simpo-component-library 3.4.0 → 3.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/ecommerce/sections/product-desc/product-desc.component.mjs +7 -8
- package/esm2022/lib/sections/registration-form/registration-form.component.mjs +30 -3
- package/esm2022/lib/services/image-upload-service.service.mjs +5 -4
- package/fesm2022/simpo-component-library.mjs +49 -22
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/lib/sections/registration-form/registration-form.component.d.ts +1 -0
- package/lib/services/image-upload-service.service.d.ts +0 -2
- package/package.json +1 -1
- package/simpo-component-library-3.4.1.tgz +0 -0
- package/simpo-component-library-3.4.0.tgz +0 -0
|
@@ -20,7 +20,7 @@ import { MatIconModule, MatIcon } from '@angular/material/icon';
|
|
|
20
20
|
import * as i1 from '@angular/common/http';
|
|
21
21
|
import { HttpHeaders } from '@angular/common/http';
|
|
22
22
|
import { fromEvent, debounceTime, filter, startWith, distinctUntilChanged, switchMap, map, forkJoin } from 'rxjs';
|
|
23
|
-
import * as i14$
|
|
23
|
+
import * as i14$1 from '@angular/material/slider';
|
|
24
24
|
import { MatSliderModule } from '@angular/material/slider';
|
|
25
25
|
import * as i8$1 from '@angular/cdk/scrolling';
|
|
26
26
|
import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
|
|
@@ -44,7 +44,7 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
|
|
44
44
|
import { MatMenuModule } from '@angular/material/menu';
|
|
45
45
|
import * as i8$3 from '@angular/material/bottom-sheet';
|
|
46
46
|
import { MatBottomSheetModule, MAT_BOTTOM_SHEET_DATA } from '@angular/material/bottom-sheet';
|
|
47
|
-
import * as
|
|
47
|
+
import * as i13$1 from 'primeng/toast';
|
|
48
48
|
import { ToastModule } from 'primeng/toast';
|
|
49
49
|
import * as i2$4 from '@angular/router';
|
|
50
50
|
import * as i2$3 from 'ngx-cookie-service';
|
|
@@ -61,11 +61,10 @@ import * as i14 from '@angular/material/datepicker';
|
|
|
61
61
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
62
62
|
import moment from 'moment';
|
|
63
63
|
import { isBlurhashValid, decode } from 'blurhash';
|
|
64
|
-
import * as i14$1 from 'ngx-image-zoom';
|
|
65
64
|
import { NgxImageZoomModule } from 'ngx-image-zoom';
|
|
66
|
-
import * as
|
|
65
|
+
import * as i15 from 'primeng/speeddial';
|
|
67
66
|
import { SpeedDialModule } from 'primeng/speeddial';
|
|
68
|
-
import * as
|
|
67
|
+
import * as i17 from 'primeng/panel';
|
|
69
68
|
import { PanelModule } from 'primeng/panel';
|
|
70
69
|
import { CdkDrag, moveItemInArray } from '@angular/cdk/drag-drop';
|
|
71
70
|
import * as i4 from 'primeng/timeline';
|
|
@@ -1458,6 +1457,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1458
1457
|
}] } });
|
|
1459
1458
|
|
|
1460
1459
|
class ImageUplaodService {
|
|
1460
|
+
// region = 'us-east-1'
|
|
1461
|
+
// identityPoolId = 'us-east-1:d4bc770a-5664-4051-bd66-6861a6efbd9c';
|
|
1461
1462
|
// bucketName = `${bucketUrl}`;
|
|
1462
1463
|
constructor(http, bucketUrl) {
|
|
1463
1464
|
this.http = http;
|
|
@@ -1468,8 +1469,7 @@ class ImageUplaodService {
|
|
|
1468
1469
|
containerName: 'prod-cmis'
|
|
1469
1470
|
};
|
|
1470
1471
|
this.UNSPLASH_API_TOKEN = 'iMn43HCZ_FLCMWkZgUtMAjt-p-M6vmaB1Z_3fbetmJA';
|
|
1471
|
-
|
|
1472
|
-
this.identityPoolId = 'us-east-1:d4bc770a-5664-4051-bd66-6861a6efbd9c';
|
|
1472
|
+
console.log('bucketUrl', this.bucketUrl);
|
|
1473
1473
|
this.s3Client = new S3Client({
|
|
1474
1474
|
region: this.bucketUrl.bucketDetails.Region, // e.g., 'us-east-1'
|
|
1475
1475
|
credentials: fromCognitoIdentityPool({
|
|
@@ -1505,7 +1505,7 @@ class ImageUplaodService {
|
|
|
1505
1505
|
const fileBuffer = await this.fileToArrayBuffer(file);
|
|
1506
1506
|
// Prepare the upload parameters
|
|
1507
1507
|
const params = {
|
|
1508
|
-
Bucket: this.bucketUrl,
|
|
1508
|
+
Bucket: this.bucketUrl.bucketDetails.Bucket,
|
|
1509
1509
|
Key: fileName,
|
|
1510
1510
|
Body: fileBuffer,
|
|
1511
1511
|
ContentType: file.type,
|
|
@@ -6984,7 +6984,7 @@ class CartComponent extends BaseSection {
|
|
|
6984
6984
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CartComponent, deps: [{ token: EventsService }, { token: CartService }, { token: i2$4.Router }, { token: RestService }, { token: i2$1.MatDialog }, { token: StorageServiceService }, { token: i5$1.MessageService }, { token: i8$3.MatBottomSheet }, { token: i2$4.ActivatedRoute }, { token: MAT_DIALOG_DATA, optional: true }, { token: i2$1.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6985
6985
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CartComponent, isStandalone: true, selector: "simpo-cart", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n <ng-container *ngIf=\"data\">\n <section [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [attr.class]=\"isMobile ? 'py-5 position-relative' : 'position-relative'\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\n <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\" [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\" *ngIf=\"responseData?.orderedItems?.length\">\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'BAG'}\" (click)=\"currentTab = 'BAG'\">Bag</span>\n <div class=\"bar\"></div>\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'ADDRESS'}\" (click)=\"proceedToCheckout()\">Address</span>\n <div class=\"bar\"></div>\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'PAYMENT'}\" style=\"cursor: auto;\">Payment</span>\n </div>\n <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\n <ng-container [ngSwitch]=\"currentTab\">\n <div class=\"left-panel\" *ngSwitchCase=\"'BAG'\">\n <div class=\"my-bag\">\n My Bag <span>({{responseData?.orderedItems?.length}} Items)</span>\n </div>\n <div class=\"cart-items\">\n <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\n <div class=\"item-parent d-flex\">\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" (click)=\"goToProductDetails(item)\">\n </div>\n <div class=\"col-md-6 h-100\" [style.width.px]=\"isMobile ? '200' : ''\" style=\"margin-left: px;\">\n <div class=\"lh-23\">\n <div class=\"item-name trim-text heading-large\">{{item.itemName}}</div>\n <div class=\"price-with-tax\">\n <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\n </div>\n <ng-container *ngIf=\"item.itemVariant\">\n <div class=\"d-flex align-items-center\" *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\n <strong class=\"fw-bold\">{{ varient }} : </strong>\n <!-- <div class=\"fw-normal\" style=\"margin-left: 5px; height: 13px; width: 13px; border-radius: 50%;\" *ngIf=\"varient.toLowerCase() == 'color'\" [style.backgroundColor]=\"item.itemVariant.properties[varient]\"></div> -->\n {{ item.itemVariant.properties[varient] | uppercase }}\n </div>\n </ng-container>\n <div class=\"item-quantity\">\n <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\n <span>{{item.quantity}}</span>\n <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\n </div>\n </div>\n </div>\n <div class=\"col-md-4 position-relative\" style=\"margin-left: auto; width: 0px; \">\n <div class=\"item-price\"><span [innerHTML]='currency'></span> {{((item.discountedPrice) * item.quantity) | number: '1.0-2'}}</div>\n <div>\n <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\" [style.right.px]=\"isMobile ? '5' : '0'\">delete</mat-icon>\n </div>\n </div>\n </div>\n <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\n </ng-container>\n </div>\n </div>\n <div class=\"left-panel\" *ngSwitchCase=\"'ADDRESS'\">\n <simpo-address [isCart]=\"true\" [responseData]=\"getAddressList\" [data]=\"data\" (selectedAddress)=\"addressSelected($event)\"></simpo-address>\n </div>\n <div class=\"left-panel\" *ngSwitchCase=\"'PAYMENT'\"></div>\n </ng-container>\n <div class=\"right-panel\">\n <div class=\"my-bag\">\n Coupon\n </div>\n <div class=\"coupons\" (click)=\"openDialog(CouponList)\">\n <ng-container *ngIf=\"!responseData.billdetails?.couponId\">\n <div class=\"d-flex flex-column\">\n <span style=\"font-weight: 600;\">Apply Coupon</span>\n <span style=\"font-size: 13px;\">Save more with coupon and offers</span>\n </div>\n <div [style.color]=\"styles?.background?.accentColor\" style=\"font-weight: 600;\">Apply</div>\n </ng-container>\n <ng-container *ngIf=\"responseData.billdetails?.couponId\">\n <div class=\"d-flex flex-column\">\n <span style=\"font-weight: 600;\">Coupon</span>\n <span style=\"font-size: 13px;\">Save more with coupon and offers</span>\n </div>\n <div [style.color]=\"styles?.background?.accentColor\" (click)=\"removeCoupon($event)\">Remove</div>\n </ng-container>\n </div>\n <div class=\"my-bag\">\n Price Details\n </div>\n <div class=\"price-details\">\n <div class=\"price-parent-block\">\n <div class=\"price-type\">Total Price</div>\n <div class=\"price-value\"><span [innerHTML]='currency'></span> {{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</div>\n </div>\n <div class=\"price-parent-block\">\n <div class=\"price-type\">Total Tax</div>\n <div class=\"price-value\"><span [innerHTML]='currency'></span> {{((!responseData.billdetails?.couponId ? responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) | number: '1.0-2'}}</div>\n </div>\n <div class=\"price-parent-block\"\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\n <div class=\"price-type\">Delivery Charge</div>\n <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges | number: '1.0-2'}}</div>\n </div>\n <div class=\"price-parent-block\"\n *ngIf=\"responseData?.billdetails?.discountAmount\">\n <div class=\"price-type\">Discount Amount</div>\n <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData?.billdetails?.discountAmount | number: '1.0-2'}}</div>\n </div>\n <hr>\n <div class=\"price-parent-block\">\n <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\n <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span> {{((responseData?.totalAmount ?? 0) - (responseData?.billdetails?.discountAmount ?? 0)) | number: '1.0-2'}}</div>\n </div>\n\n <div class=\"button-parent\">\n <ng-container *ngIf=\"currentTab == 'BAG'\">\n <div class=\"btn mobile-fixed\" (click)=\"proceedToCheckout()\" [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.color\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout Cart'}}</div>\n <div class=\"btn\" (click)=\"proceedToListPage()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue Shopping'}}</div>\n </ng-container>\n\n <ng-container *ngIf=\"currentTab == 'ADDRESS'\">\n <div class=\"btn mobile-fixed\" (click)=\"proceedToPayment()\" [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.color\">{{data?.action?.buttons?.[2]?.content?.label ?? 'Place Order'}}</div>\n </ng-container>\n <!-- <div *ngFor=\"let button of data?.action?.buttons;let i = index\">\n <button class=\"btn\" (click)=\"i == 0 ? proceedToCheckout() : proceedToListPage()\" simpoButtonDirective [id]=\"data?.id+button.id\" [buttonStyle]=\"button?.styles\"\n [color]=\"styles?.background?.accentColor\">{{button?.content?.label}}</button>\n </div> -->\n </div>\n </div>\n </div>\n </div>\n\n <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\n <div class=\"empty-cart-container\">\n <div class=\"cart-image\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\"\n [appImageEditor]=\"edit || false\" [imageData]=\"data?.content?.image\" [sectionId]=\"data?.id\">\n </div>\n <div class=\"cart-text content-side\">\n <ng-container *ngFor=\"let text of data?.content?.inputText\">\n <div class=\"d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </ng-container>\n <!-- <div class=\"description d-flex mt-4\">\n Looks like you have not added anything to your cart. Go ahead & explore top categories.\n </div> -->\n </div>\n </div>\n </section>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n\n </section>\n </ng-container>\n <ng-container *ngIf=\"!data\">\n <section class=\"cart-window\">\n <div class=\"heading-large lh-2 mb-3 header-sec\">\n <div class=\"d-flex align-items-center\">\n <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\n <span>Your Cart</span>\n </div>\n <div class=\"saving\"></div>\n </div>\n <div class=\"offers\">\n <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\n <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\n <span>Avail Offers / Coupons</span>\n </div>\n <mat-icon>keyboard_arrow_right</mat-icon>\n </div>\n <div class=\"small-items\">\n <ng-container *ngFor=\"let item of responseData?.orderedItems\">\n <div class=\"small-item\">\n <div class=\"d-flex\" style=\"gap: 5px;\">\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"small-product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" (click)=\"goToProductDetails(item)\">\n </div>\n <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\n <div class=\"small-item-quantity\">\n <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\n <span>{{item.quantity}}</span>\n <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\n </div>\n <div class=\"small-item-price\">\n <div class=\"price-with-tax\">\n <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\n </div>\n <!-- <div class=\"price-with-tax\">\n <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\n </div> -->\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"fotter-sec\">\n <div class=\"delivery-add d-flex\">\n <mat-icon>home</mat-icon>\n <div class=\"address\">Tetsting</div>\n </div>\n <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span> {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\n </div>\n </section>\n </ng-container>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '40vh',\n 'border-radius': '10px',\n 'position': 'relative',\n 'right': '5px'\n}\">\n</ngx-skeleton-loader>\n\n<ng-template #CouponList>\n <section class=\"coupons-listing-section\">\n <div class=\"coupon-heading\">\n <div class=\"back-btn\" (click)=\"closeDialogRef()\">\n <mat-icon>keyboard_arrow_left</mat-icon>\n </div>\n <div class=\"header-text\">Apply Coupon</div>\n </div>\n <!-- <div class=\"coupon-search-sec\">\n <input type=\"text\" placeholder=\"Type Coupon Code\" [(ngModel)]=\"enteredCouponCode\">\n <div class=\"apply-btn-search\" (click)=\"searchIfApplicable()\">Apply</div>\n </div> -->\n <div class=\"coupon-listing\">\n <ng-container *ngIf=\"couponList.length > 0; else showEmptyScreen\">\n <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\n <div class=\"coupon-details\"\n [ngStyle]=\"{'background-color': !couponDetails.applicable ? '#FFF2F4' : '#EDFFFA'}\">\n <div class=\"details__coupon-heading\">\n <div class=\"coupon-brief\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name\"\n [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\n {{ couponDetails.couponCode | uppercase }}</div>\n <div class=\"coupon-desc\">{{ couponDetails.discountDescription | titlecase }}</div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn\"\n [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\" [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : ''}\" (click)=\"applyCoupon(couponDetails)\">Apply</div>\n </div>\n </div>\n <!-- <div class=\"coupon-toggle-details-btn\" (click)=\"couponDetails.status = !couponDetails.status\">\n <span class=\"hide-details-btn\" *ngIf=\"couponDetails.status\">Hide details</span>\n <div class=\"show-details-btn\" *ngIf=\"!couponDetails.status\">View details</div>\n </div> -->\n </div>\n <ng-container *ngIf=\"couponDetails.status\">\n <div class=\"details-divider\"></div>\n <ul class=\"details__coupon-terms\">\n <li>Offer valid from {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}</li>\n </ul>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n <ng-template #showEmptyScreen>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Coupon Available</div>\n <div class=\"empty-screen__secondary-text\">\n Looks like there are no coupons at the moment\n </div>\n <!-- <div class=\"empty-screen__button\">Explore</div> -->\n </div>\n </ng-template>\n </div>\n </section>\n</ng-template>\n\n", styles: [".position-relative{position:relative}.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;margin-left:8px}.my-bag span{color:#939393}.coupons{display:flex;justify-content:space-between;padding:10px;border-radius:4px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px;margin-top:10px;cursor:pointer}.coupon-list-section{padding:15px;width:400px;z-index:10000001!important}.coupon-list-section .search{padding:8px;border:1px solid lightgray;border-radius:20px;display:flex;justify-content:space-between}.coupon-list-section input{border:none;outline:none;width:90%}.coupon-list-section .coupon-list{height:60vh;width:100%}.item-parent{margin:10px 0;min-height:120px}.lh-23{line-height:23px;margin-left:10px}.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:100%;width:110px;padding:0;cursor:pointer}.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:#df2e2e;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;height:calc(100vh - 170px)}.hover_effect{position:unset;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}.cart-window{padding:10px}.cart-window .small-product-img{width:55px;height:55px;border-radius:5px}.cart-window .small-items{display:flex;flex-direction:column;gap:10px;margin-top:15px;height:calc(100vh - 160px);overflow-y:auto}.cart-window .small-item{width:100%;display:flex;justify-content:space-between}.cart-window .small-item-name{width:200px}.cart-window .small-item-quantity{display:flex;align-items:center;justify-content:space-between;border-radius:5px;width:80px;background-color:#fafad2;padding:3px 8px;height:35px;font-weight:500;margin-right:3px}.cart-window .small-item-price{display:flex;flex-direction:column;gap:5px}.cart-window .small-item-price .price-with-tax{display:flex;font-size:13px!important}.cart-window .fotter-sec{background-color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:10px}.cart-window .fotter-sec .payment-btn{border-radius:5px;border:none;display:flex;align-items:center;justify-content:center;background-color:#f08080;padding:10px 5px;color:#fff;cursor:pointer}.offers{background-color:#fff;display:flex;justify-content:space-between;padding:8px;border-radius:8px;box-shadow:#959da533 0 -1px 6px}.header-sec{font-size:26px}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel{width:100%}.right-panel{width:100%;z-index:1000}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap;display:none}.product-img{width:82px}[class*=col-md]{padding-left:5px!important;padding-right:5px!important}.mobile-fixed{height:40px;font-size:16px!important;border:1px solid lightgray;width:100%;position:relative;bottom:10px}.empty-cart-container{height:calc(100vh - 130px)}.coupons-listing-section{width:100vw!important}}.mobile-fixed{color:#fff}.coupons-listing-section{height:100vh;padding-top:0;position:relative;width:390px;z-index:100;background:#d3d3d354}.coupons-listing-section .coupon-heading{display:flex;align-items:center;background-color:#fff;padding:15px 20px;width:100%;box-sizing:border-box}.coupons-listing-section .coupon-heading img{height:15px;width:15px;position:relative;top:2px;cursor:pointer}.coupons-listing-section .coupon-heading .header-text{font-size:16px;color:#000;font-weight:600;margin-left:15px;position:relative;top:-3px;right:15px;cursor:pointer}.coupons-listing-section .coupon-search-sec{width:90%;box-sizing:border-box;margin:10px auto;border:1px solid lightgray;padding:10px;border-radius:10px;background-color:#fff;display:flex;font-size:16px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec input{border:none;outline:none;background-color:transparent;width:95%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-search-sec input:focus{font-size:14px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec .back-btn{position:relative;top:3px;cursor:pointer}.coupons-listing-section .coupon-search-sec .apply-btn-search{font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing{height:72%;overflow-y:auto;width:90%;margin:20px auto}.coupons-listing-section .coupon-listing .coupon-details{padding:15px;margin-bottom:15px;background-color:#edfffa;border-radius:10px;border:1px solid lightgray}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading{display:flex;flex-direction:column;gap:25px}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief{display:flex;justify-content:space-between;width:100%}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-name{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-desc{padding:5px 0;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .show-details-btn{cursor:pointer}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec{display:flex;justify-content:flex-end}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec .apply-offer-btn{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-toggle-details-btn{text-align:left;text-decoration:underline;width:100%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details-divider{border-top:2px solid lightgray;opacity:.3;margin:15px 0}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-terms{font-size:14px;color:#000;font-weight:400}.empty-screen-container{height:100%;width:85%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-screen-container .empty-screen__primary-text{font-size:22px;color:#000;font-weight:400}.empty-screen-container .empty-screen__secondary-text{text-align:center;padding:10px 0;font-size:16px;color:#000;font-weight:400}.empty-screen-container .empty-screen__button{width:90%;background-color:#fff;border-radius:8px;text-align:center;padding:10px;margin:10px auto 0;cursor:pointer;font-size:18px;color:#000;font-weight:400}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { 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", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "directive", type:
|
|
6986
6986
|
//DIRECTIVE
|
|
6987
|
-
ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: AddressComponent, selector: "simpo-address", inputs: ["responseData", "data", "index", "customClass", "edit", "delete", "isCart"], outputs: ["selectedAddress"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type:
|
|
6987
|
+
ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: AddressComponent, selector: "simpo-address", inputs: ["responseData", "data", "index", "customClass", "edit", "delete", "isCart"], outputs: ["selectedAddress"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }] }); }
|
|
6988
6988
|
}
|
|
6989
6989
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CartComponent, decorators: [{
|
|
6990
6990
|
type: Component,
|
|
@@ -7304,7 +7304,7 @@ class AuthenticationRequiredComponent extends BaseSection {
|
|
|
7304
7304
|
return this.styles?.background?.accentColor ? this.styles.background?.accentColor : '#000';
|
|
7305
7305
|
}
|
|
7306
7306
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthenticationRequiredComponent, deps: [{ token: RestService }, { token: i2$4.Router }, { token: i5$1.MessageService }, { token: StorageServiceService }, { token: i2$1.MatDialog }, { token: i2$4.ActivatedRoute }, { token: i2$1.MatDialogRef, optional: true }, { token: i8$3.MatBottomSheetRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7307
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AuthenticationRequiredComponent, isStandalone: true, selector: "simpo-authentication-required", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<section [id]=\"data?.id\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\n <div [spacingAround]=\"stylesLayout\">\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\n <div [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\" class=\"main-panel\">\n <div class=\"panel\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\n <ng-container *ngTemplateOutlet=\"currentPage === 'LOGIN' ? loginTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"currentPage === 'SIGNUP' ? signInTemplate : null\"></ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\n ></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n\n</section>\n\n<ng-template #loginTemplate>\n <div>\n <div class=\"input-box\">\n <label for=\"\">Email</label>\n <input type=\"email\" [(ngModel)]=\"email\" required=\"\" placeholder=\"Enter Email\">\n </div>\n <div class=\"input-box\">\n <label for=\"\">Password</label>\n <input type=\"password\" [(ngModel)]=\"password\" required=\"\">\n </div>\n <!-- <div class=\"forgot-pwd\" [style.color]=\"accentColor\">Forgot Password?</div> -->\n <button class=\"button\" *ngIf=\"!buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [backgroundInfo]=\"styles?.background\"\n [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\" (click)=\"login()\">Login</button>\n <button class=\"button\" *ngIf=\"buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [backgroundInfo]=\"styles?.background\"\n [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\">Loading...</button>\n\n\n <div class=\"sign-up\" *ngIf=\"signUpEnabled\">Don't have an account? <span [style.color]=\"accentColor\" (click)=\"currentPage = 'SIGNUP'\">Sign\n Up</span></div>\n\n <!-- <div class=\"text-center mt-20\">\n <div class=\"or-divider\">\n <span class=\"or-text\">or</span>\n </div>\n <div class=\"sign-up\">Login with <span [style.color]=\"accentColor\">OTP</span></div>\n </div> -->\n </div>\n</ng-template>\n\n<ng-template #signInTemplate>\n <div>\n <div class=\"input-box\">\n <label for=\"\">Name</label>\n <input type=\"text\" [(ngModel)]=\"userName\">\n </div>\n <div class=\"input-box\">\n <label for=\"\">Email</label>\n <input type=\"email\" [(ngModel)]=\"email\">\n </div>\n <div class=\"input-box\">\n <label for=\"\">Phone Number</label>\n <input type=\"number\" [(ngModel)]=\"mobile\" (keypress)=\"validateNumber($event)\">\n </div>\n <div class=\"input-box position-relative\">\n <label for=\"\">Password</label>\n <input type=\"password\" required=\"\" [(ngModel)]=\"password\" (ngModelChange)=\"checkStrength()\">\n <div class=\"strength-bar-container\">\n <div *ngFor=\"let strength of passwordStrength; let idx = index\" class=\"strength-bar\"\n [style.backgroundColor]=\"getStrengthColor(idx)\"></div>\n </div>\n </div>\n <button class=\"button\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" *ngIf=\"!buttonLoading\"\n [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\" (click)=\"createAccount()\"\n [disabled]=\"!isEmailValid || !isPasswordValid || !userName\">Create Account</button>\n <button class=\"button\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\" *ngIf=\"buttonLoading\"\n >Loading...</button>\n\n\n <div class=\"sign-up\">Alraedy have an account? <span [style.color]=\"accentColor\"\n (click)=\"currentPage = 'LOGIN'\">Login</span></div>\n </div>\n</ng-template>\n", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.main-panel{max-width:450px;margin:auto}.input-box{display:flex;flex-direction:column;gap:5px;margin-bottom:15px}.input-box label{color:#000!important;font-size:15px;font-weight:700;font-family:Mulish}.input-box input{height:40px;border:2px solid rgba(0,0,0,.05);border-radius:5px;outline:none;padding-left:10px;padding-right:10px;font-weight:500;font-family:Mulish}.button{margin-top:20px;height:40px;outline:none}.panel{background:#fff;padding:4rem}.forgot-pwd{font-family:Mulish;text-align:right;font-size:14px;font-weight:700;margin-top:10px}.sign-up{margin-top:20px;text-align:center;font-size:15px;font-family:Mulish;color:#000!important}.sign-up span{font-family:Mulish;cursor:pointer}.mt-20{margin-top:20px}.or-divider{display:flex;align-items:center;margin:24px 0;color:#666}.or-divider:before,.or-divider:after{content:\"\";flex:1;border-bottom:1px solid #eee}.or-text{padding:0 12px;font-size:14px;font-family:Mulish}.strength-bar-container{display:flex;justify-content:space-between;width:100%!important;margin:auto;position:relative;top:15px}.strength-bar{height:8px;width:23.5%;border-radius:6px;background-color:#d3d3d3ba}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type:
|
|
7307
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AuthenticationRequiredComponent, isStandalone: true, selector: "simpo-authentication-required", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<section [id]=\"data?.id\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\n <div [spacingAround]=\"stylesLayout\">\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\n <div [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\" class=\"main-panel\">\n <div class=\"panel\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\n <ng-container *ngTemplateOutlet=\"currentPage === 'LOGIN' ? loginTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"currentPage === 'SIGNUP' ? signInTemplate : null\"></ng-container>\n </div>\n </div>\n </div>\n </div>\n\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\n ></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n\n</section>\n\n<ng-template #loginTemplate>\n <div>\n <div class=\"input-box\">\n <label for=\"\">Email</label>\n <input type=\"email\" [(ngModel)]=\"email\" required=\"\" placeholder=\"Enter Email\">\n </div>\n <div class=\"input-box\">\n <label for=\"\">Password</label>\n <input type=\"password\" [(ngModel)]=\"password\" required=\"\">\n </div>\n <!-- <div class=\"forgot-pwd\" [style.color]=\"accentColor\">Forgot Password?</div> -->\n <button class=\"button\" *ngIf=\"!buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [backgroundInfo]=\"styles?.background\"\n [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\" (click)=\"login()\">Login</button>\n <button class=\"button\" *ngIf=\"buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [backgroundInfo]=\"styles?.background\"\n [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\">Loading...</button>\n\n\n <div class=\"sign-up\" *ngIf=\"signUpEnabled\">Don't have an account? <span [style.color]=\"accentColor\" (click)=\"currentPage = 'SIGNUP'\">Sign\n Up</span></div>\n\n <!-- <div class=\"text-center mt-20\">\n <div class=\"or-divider\">\n <span class=\"or-text\">or</span>\n </div>\n <div class=\"sign-up\">Login with <span [style.color]=\"accentColor\">OTP</span></div>\n </div> -->\n </div>\n</ng-template>\n\n<ng-template #signInTemplate>\n <div>\n <div class=\"input-box\">\n <label for=\"\">Name</label>\n <input type=\"text\" [(ngModel)]=\"userName\">\n </div>\n <div class=\"input-box\">\n <label for=\"\">Email</label>\n <input type=\"email\" [(ngModel)]=\"email\">\n </div>\n <div class=\"input-box\">\n <label for=\"\">Phone Number</label>\n <input type=\"number\" [(ngModel)]=\"mobile\" (keypress)=\"validateNumber($event)\">\n </div>\n <div class=\"input-box position-relative\">\n <label for=\"\">Password</label>\n <input type=\"password\" required=\"\" [(ngModel)]=\"password\" (ngModelChange)=\"checkStrength()\">\n <div class=\"strength-bar-container\">\n <div *ngFor=\"let strength of passwordStrength; let idx = index\" class=\"strength-bar\"\n [style.backgroundColor]=\"getStrengthColor(idx)\"></div>\n </div>\n </div>\n <button class=\"button\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" *ngIf=\"!buttonLoading\"\n [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\" (click)=\"createAccount()\"\n [disabled]=\"!isEmailValid || !isPasswordValid || !userName\">Create Account</button>\n <button class=\"button\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\n [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\" *ngIf=\"buttonLoading\"\n >Loading...</button>\n\n\n <div class=\"sign-up\">Alraedy have an account? <span [style.color]=\"accentColor\"\n (click)=\"currentPage = 'LOGIN'\">Login</span></div>\n </div>\n</ng-template>\n", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.main-panel{max-width:450px;margin:auto}.input-box{display:flex;flex-direction:column;gap:5px;margin-bottom:15px}.input-box label{color:#000!important;font-size:15px;font-weight:700;font-family:Mulish}.input-box input{height:40px;border:2px solid rgba(0,0,0,.05);border-radius:5px;outline:none;padding-left:10px;padding-right:10px;font-weight:500;font-family:Mulish}.button{margin-top:20px;height:40px;outline:none}.panel{background:#fff;padding:4rem}.forgot-pwd{font-family:Mulish;text-align:right;font-size:14px;font-weight:700;margin-top:10px}.sign-up{margin-top:20px;text-align:center;font-size:15px;font-family:Mulish;color:#000!important}.sign-up span{font-family:Mulish;cursor:pointer}.mt-20{margin-top:20px}.or-divider{display:flex;align-items:center;margin:24px 0;color:#666}.or-divider:before,.or-divider:after{content:\"\";flex:1;border-bottom:1px solid #eee}.or-text{padding:0 12px;font-size:14px;font-family:Mulish}.strength-bar-container{display:flex;justify-content:space-between;width:100%!important;margin:auto;position:relative;top:15px}.strength-bar{height:8px;width:23.5%;border-radius:6px;background-color:#d3d3d3ba}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { 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: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround"] }] }); }
|
|
7308
7308
|
}
|
|
7309
7309
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthenticationRequiredComponent, decorators: [{
|
|
7310
7310
|
type: Component,
|
|
@@ -10749,6 +10749,7 @@ class RegistrationFormComponent extends BaseSection {
|
|
|
10749
10749
|
}
|
|
10750
10750
|
};
|
|
10751
10751
|
this.fieldData = {};
|
|
10752
|
+
this.businessId = '1efdd3f0-fc93-668f-b6d0-fd60a2542463';
|
|
10752
10753
|
this.documentList = [];
|
|
10753
10754
|
this.formStatus = '';
|
|
10754
10755
|
this.studentLiveWith = '';
|
|
@@ -10790,6 +10791,14 @@ class RegistrationFormComponent extends BaseSection {
|
|
|
10790
10791
|
serverCall.subscribe((result) => {
|
|
10791
10792
|
let admissionData = this.data?.sectionType === 'registrationForm' ? result.admissionData.data : result.admissionData.data.data[0];
|
|
10792
10793
|
let fieldData = result.fieldData.data;
|
|
10794
|
+
fieldData?.data.forEach((element) => {
|
|
10795
|
+
if ((element.fieldLabel).toLowerCase().includes('passport') && element.dataType != 'RADIOBUTTON') {
|
|
10796
|
+
element.isDisplay = false;
|
|
10797
|
+
}
|
|
10798
|
+
else {
|
|
10799
|
+
element.isDisplay = true;
|
|
10800
|
+
}
|
|
10801
|
+
});
|
|
10793
10802
|
this.formStatus = admissionData.status;
|
|
10794
10803
|
// this.payload = admissionData;
|
|
10795
10804
|
this.payload['documents'] = [];
|
|
@@ -11196,8 +11205,26 @@ class RegistrationFormComponent extends BaseSection {
|
|
|
11196
11205
|
isImage(fileUrl) {
|
|
11197
11206
|
return typeof fileUrl === 'string' && (fileUrl.startsWith('data:image') || /\.(jpg|jpeg|png|gif)$/i.test(fileUrl));
|
|
11198
11207
|
}
|
|
11208
|
+
getFieldValidation(item) {
|
|
11209
|
+
const label = (item.fieldLabel || '').toLowerCase();
|
|
11210
|
+
const isPhone = label.includes('phone number');
|
|
11211
|
+
const isEmail = label.includes('email');
|
|
11212
|
+
const valueStr = item.fieldValue?.toString() || '';
|
|
11213
|
+
// Phone validation
|
|
11214
|
+
if (isPhone) {
|
|
11215
|
+
const mobilePattern = /^[6-9]\d{9}$/;
|
|
11216
|
+
return mobilePattern.test(valueStr) && valueStr.length === 10;
|
|
11217
|
+
}
|
|
11218
|
+
// Email validation
|
|
11219
|
+
if (isEmail) {
|
|
11220
|
+
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
11221
|
+
return emailPattern.test(valueStr);
|
|
11222
|
+
}
|
|
11223
|
+
// For other fields, no validation
|
|
11224
|
+
return true;
|
|
11225
|
+
}
|
|
11199
11226
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RegistrationFormComponent, deps: [{ token: RestService }, { token: i2$2.MatSnackBar }, { token: EventsService }, { token: i2$4.ActivatedRoute }, { token: i1$1.DomSanitizer }, { token: ImageUplaodService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11200
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RegistrationFormComponent, isStandalone: true, selector: "simpo-registration-form", inputs: { data: "data", index: "index", edit: "edit", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\n <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\"\n [simpoBorder]=\"styles?.border\">\n <div class=\"main-section\"\n [ngClass]=\"{'justify-content-md-start': styles?.layout?.align === 'left' , 'justify-content-md-end': styles?.layout?.align === 'right'}\"\n [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\n <div class=\"body-section\">\n <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\n <div>\n <simpo-text-element [textData]=\"content?.inputText?.[0]?.value\" [textLabel]=\"content?.inputText?.[0]?.label\"></simpo-text-element>\n </div>\n <div class=\"d-flex gap-2 d-md-flex mt-15\" *ngIf=\"data?.action?.display\" [ngClass]=\"[\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\n ]\">\n </div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n\n <section class=\"main-section\">\n <div *ngIf=\"formStatus != 'REGISTERED' && formStatus != 'ADMITTED'\">\n <div class=\"subTabs_section\">\n <div class=\"list_tabs d-flex align-items-center\">\n <ng-container *ngFor=\"let key of Object.keys(fieldData)\">\n <div class=\"single_tab cursor-pointer\" (click)=\"selectedKey = key\"\n [ngClass]=\"selectedKey === key ? 'single_tab_active' : 'single_tab'\">\n {{key | titlecase}}\n </div>\n </ng-container>\n <div class=\"single_tab cursor-pointer\" (click)=\"selectedKey = 'Document'\" *ngIf=\"data?.sectionType === 'admissionForm'\"\n [ngClass]=\"selectedKey === 'Document' ? 'single_tab_active' : 'single_tab'\">\n Document\n </div>\n <div class=\"single_tab cursor-pointer\" (click)=\"redirectToPayment()\"\n *ngIf=\"data?.sectionType === 'admissionForm'\"\n [ngClass]=\"selectedKey === 'Payment' ? 'single_tab_active' : 'single_tab'\">\n Payment\n </div>\n </div>\n </div>\n\n <div class=\"main-content\">\n <ng-container *ngFor=\"let group of fieldData[selectedKey] ? Object.keys(fieldData[selectedKey]) : [];let groupIndex = index\">\n <div class=\"body\" *ngIf=\"group !== 'Backup Contact'\">\n <div class=\"list_tabs backToLeads d-flex align-items-center\">\n {{group}}\n </div>\n\n <ng-container *ngIf=\"groupIndex == 0 && Object.keys(fieldData)[0] === selectedKey\">\n <div class=\"image-box\" *ngIf=\"!payload.imgUrl\">\n <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\n (click)=\"fileInput.click()\" alt=\"\">\n <div class=\"image_box\">\n <span class=\"fc_browse_btn\" id=\"display_browse_btn\" (click)=\"fileInput.click()\">Click to\n upload</span>\n </div>\n </div>\n <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\"\n accept=\"image/x-png,image/jpeg,image/jpg\" (change)=\"updateAdmissionImage($event)\" class=\"pc-btn\"\n id=\"browse_contact_image\" #fileInput />\n\n <div *ngIf=\"payload.imgUrl\" class=\"addedImg\">\n <div class=\"uploadedImg\">\n <img alt=\"\" [src]=\"ds.bypassSecurityTrustUrl(payload.imgUrl)\">\n </div>\n <div class=\"image-buttons\">\n <div class=\"button\" (click)=\"fileInput.click()\">\n <img src=\"../../../../../../../../../assets/images/blogs/change_image.svg\" alt=\"\">\n Change Image\n </div>\n <div class=\"button delete-change\" (click)=\"deleteImg()\">\n\n <div class=\"delete\">\n <img src=\"./../../../../../../../../../assets/images/blogs/delete_image.svg\" alt=\"\">\n <div>Delete</div>\n </div>\n\n </div>\n </div>\n\n </div>\n </ng-container>\n\n <div class=\"row mt-1\">\n <ng-container *ngFor=\"let info of fieldData[selectedKey][group]\">\n <div class=\"col-md-4 col-12 mt-1\" *ngIf=\"info.isDisplay\">\n <label for=\"\" class=\"label-text\">{{info.displayText || info.fieldLabel}}</label> <span style=\"color: red;\" *ngIf=\"info.required\">*</span> <br>\n <ng-container *ngTemplateOutlet=\"inputData; context: {data: info, group:group}\"></ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n\n <div class=\"body\" *ngIf=\"fieldData[selectedKey].hasOwnProperty('Backup Contact') && studentLiveWith === 'single parent' && groupIndex == 0 && Object.keys(fieldData)[0] === selectedKey\">\n <div class=\"list_tabs backToLeads d-flex align-items-center\">\n Backup Contact (Optional)\n </div>\n\n <div class=\"row mt-1\">\n <div class=\"col-md-12\">\n <label class=\"mtb-15 checkbox-label\">\n <input type=\"checkbox\" name=\"\" id=\"\" [(ngModel)]=\"payload.parentAuthorization\">\n I authorize the school to release the child only to the parent listed above\n </label>\n </div>\n <div class=\"col-md-4 col-12 mt-1\" *ngFor=\"let info of fieldData[selectedKey]['Backup Contact']\">\n <label for=\"\" class=\"label-text\">{{info.displayText || info.fieldLabel}}</label> <span style=\"color: red;\"\n *ngIf=\"info.required\">*</span> <br>\n <ng-container *ngTemplateOutlet=\"inputData; context: {data: info}\"></ng-container>\n </div>\n <div class=\"col-md-4 col-12 mt-1\">\n <label for=\"\" class=\"label-text\">Upload Supporting Document (Optional)</label>\n <div class=\"input-text upload-file\" (click)=\"backUpDocInput.click()\">\n <p>{{backupDocFile ? 'File Uploaded' : 'Upload File'}}</p>\n <mat-icon>cloud_upload</mat-icon>\n </div>\n <input id=\"vendorImage\" type=\"file\" name=\"myfile\" hidden\n accept=\".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/x-png,image/jpeg,image/jpg,.pdf, video/mp4,video/x-matroska,video/x-msvideo,video/quicktime\"\n (change)=\"uploadBackUpDocument($event)\" class=\"pc-btn\"\n id=\"browse_contact_image\" #backUpDocInput />\n </div>\n </div>\n </div>\n\n </ng-container>\n <div class=\"payment-details\" *ngIf=\"selectedKey === 'Document' && data?.sectionType === 'admissionForm'\">\n <simpo-document [documentList]=\"documentList\"></simpo-document>\n </div>\n <div class=\"payment-details\" *ngIf=\"selectedKey === 'Payment' && data?.sectionType === 'admissionForm'\">\n <simpo-payment-details [admissionData]=\"payload\"\n [subscriptionsData]=\"subscriptionsData\" [termPaymentList]=\"termPaymentList\"></simpo-payment-details>\n </div>\n </div>\n\n <div class=\"button-parent\">\n <ng-container *ngFor=\"let button of data?.action?.buttons\">\n <button class=\"button\" (click)=\"submitForm()\" simpoButtonDirective [id]=\"data?.id+button.id\"\n [buttonStyle]=\"button.styles\" *ngIf=\"(data?.sectionType === 'admissionForm' && selectedKey == 'Payment') ||\n (data?.sectionType === 'registrationForm' &&\n (Object.keys(fieldData)[Object.keys(fieldData).length - 1] == selectedKey))\"\n [color]=\"data?.styles?.background?.accentColor\">{{button?.content?.label}}</button>\n\n <button class=\"button\" (click)=\"continueAdmission()\" simpoButtonDirective [id]=\"data?.id+button.id\"\n [buttonStyle]=\"button.styles\" *ngIf=\"selectedKey != 'Payment' && data?.sectionType === 'admissionForm'\"\n [color]=\"data?.styles?.background?.accentColor\">Continue</button>\n\n <button class=\"button\" (click)=\"continueAdmission()\" simpoButtonDirective [id]=\"data?.id+button.id\"\n [buttonStyle]=\"button.styles\"\n *ngIf=\"data?.sectionType === 'registrationForm' && (Object.keys(fieldData)[Object.keys(fieldData).length - 1] != selectedKey)\"\n [color]=\"data?.styles?.background?.accentColor\">Continue</button>\n </ng-container>\n </div>\n </div>\n\n <div class=\"emptyText\" *ngIf=\"formStatus == 'REGISTERED' || formStatus == 'ADMITTED'\">\n <img [src]=\"content?.image?.url\" alt=\"\" *ngIf=\"content?.image?.showImage\">\n <div class=\"heading-large\" [innerHtml]=\"content?.inputText?.[1]?.value\"></div>\n </div>\n </section>\n\n <ng-template #inputData let-field=\"data\" let-group=\"group\">\n <div *ngIf=\"field.dataType == 'IMAGE'\">\n <div class=\"image-box\" *ngIf=\"!field.fieldImageUrl\">\n <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\n (click)=\"fileInput2.click()\" alt=\"\">\n <div class=\"d-flex align-items-center\">\n <span class=\"fc_browse_btn\" id=\"display_browse_btn\" (click)=\"fileInput2.click()\">Click to\n upload</span>\n </div>\n </div>\n <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\" accept=\"image/x-png,image/jpeg,image/jpg\"\n (change)=\"uploadParentGuardinaImages($event,field)\" class=\"pc-btn\" id=\"browse_contact_image\" #fileInput2 />\n <div *ngIf=\"field.fieldImageUrl\" class=\"addedImg\">\n <div class=\"uploadedImg\">\n <img alt=\"\" [src]=\"ds.bypassSecurityTrustUrl(field.fieldImageUrl)\">\n </div>\n <div class=\"image-buttons\">\n <div class=\"button\" (click)=\"fileInput2.click()\">\n <img src=\"../../../../../../../../../assets/images/blogs/change_image.svg\" alt=\"\">\n Change Image\n </div>\n <div class=\"button delete-change\" (click)=\"deleteImg()\">\n \n <div class=\"delete\">\n <img src=\"./../../../../../../../../../assets/images/blogs/delete_image.svg\" alt=\"\">\n <div>Delete</div>\n </div>\n \n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"field.dataType === 'TEXT' && field.isDisplay\">\n <input type=\"text\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\n </div>\n <div *ngIf=\"field.dataType === 'NUMBER' && field.isDisplay\">\n <input type=\"number\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\n </div>\n <div *ngIf=\"field.dataType === 'MONEY' && field.isDisplay\">\n <input type=\"text\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\n </div>\n <div *ngIf=\"field.dataType === 'DATE' && field.isDisplay\">\n <input type=\"date\" class=\"input-text\" [(ngModel)]=\"field.fieldValue\" [placeholder]=\"'Select '+field.fieldLabel\" [max]=\"getMaxDate(field)\">\n </div>\n <div class=\"input-container\" *ngIf=\"field.dataType === 'TEXT_FILE' && field.isDisplay\">\n <input matInput class=\"input-text-1\" [(ngModel)]=\"field.fieldValue\" style=\"width:90%\">\n <div class=\"image-box-1 d-flex justify-content-center align-items-center\" *ngIf=\"!field.fieldImageUrl\"\n style=\"width:10%\">\n <mat-icon (click)=\"fileInput1.click()\"\n class=\"dummy-image-1 w-100 d-flex justify-content-center\">cloud_upload</mat-icon>\n </div>\n <div class=\"image-box-1 d-flex justify-content-center align-items-center\" *ngIf=\"field.fieldImageUrl\" style=\"width:10%\">\n <!-- If the uploaded file is an image, show the preview -->\n <img\n *ngIf=\"isImage(field.fieldImageUrl)\"\n alt=\"\"\n class=\"w-100 h-100\"\n [src]=\"ds.bypassSecurityTrustUrl(field.fieldImageUrl)\"\n (click)=\"fileInput1.click()\" />\n \n <!-- If the uploaded file is not an image, show a file icon -->\n <mat-icon\n *ngIf=\"!isImage(field.fieldImageUrl)\"\n class=\"w-100 d-flex justify-content-center align-items-center dummy-image-1\"\n (click)=\"fileInput1.click()\">insert_drive_file</mat-icon>\n </div>\n \n <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\"\n accept=\".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/x-png,image/jpeg,image/jpg,.pdf, video/mp4,video/x-matroska,video/x-msvideo,video/quicktime\"\n (change)=\"updateSelectedImage($event,field)\" class=\"pc-btn\" id=\"browse_contact_image\" #fileInput1 />\n </div>\n <div *ngIf=\"field.dataType === 'DROPDOWN' && field.isDisplay\" class=\"admission\">\n <mat-form-field class=\"input-text-1 input_card\" appearance=\"outline\" style=\"width:100%\">\n <mat-select class=\"inputStyle\" placeholder=\"--Select--\" [(ngModel)]=\"field.fieldValue\" [multiple]=\"field.multipleSelection\">\n <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\n <mat-option *ngFor=\"let item of field.value\" [value]=\"item?.value\" (click)=\"masterDropdownValueChange(item, field)\">{{item.label}}</mat-option>\n </ng-container>\n <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\n <mat-option *ngFor=\"let item of field.sourceData[field.dataSourceType]\"\n (click)=\"inputFieldChange(item, field)\" [value]=\"item?.name\">{{item.name}}</mat-option>\n </ng-container>\n </mat-select>\n </mat-form-field>\n </div>\n <div *ngIf=\"field.dataType === 'CHECKBOX' && field.isDisplay\">\n <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\n <div class=\"form-check mb-5\" *ngFor=\"let data of field.value\">\n <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckChecked\" [(ngModel)]=\"data.checked\">\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\n {{data.label}}\n </label>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\n <div class=\"form-check mb-5\" *ngFor=\"let data of field.sourceData[field.dataSourceType]\">\n <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckChecked\" [(ngModel)]=\"data.checked\">\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\n {{data.name}}\n </label>\n </div>\n </ng-container>\n </div>\n <div *ngIf=\"field.dataType === 'RADIOBUTTON' && field.isDisplay\">\n <div style=\"display: flex; gap: 20px; margin-top: 10px; height: 35px;align-items: center;\">\n <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\n <!-- <div class=\" mb-5\" *ngFor=\"let data of field.value\">\n <mat-radio-button [value]=\"data.value\" [(ngModel)]=\"field.fieldValue\">{{data.label}}</mat-radio-button>\n </div> -->\n <mat-radio-group [(ngModel)]=\"field.fieldValue\" (change)=\"radioButtonChanged(field,selectedKey,group)\">\n <mat-radio-button *ngFor=\"let data of field.value\" [value]=\"data.value\">\n {{ data.label }}\n </mat-radio-button>\n </mat-radio-group>\n </ng-container>\n \n <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\n <div class=\"form-check mb-5\" *ngFor=\"let data of field.value\">\n <input class=\"form-check-input\" type=\"radio\" [value]=\"data.name\" [(ngModel)]=\"field.fieldValue\" />\n \n <label class=\"form-check-label\" [for]=\"'radio_' + data.name\">\n {{ data.name }}\n </label>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-template>\n\n\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n</section>\n", styles: [".total_container{height:auto;position:relative}.body-section{padding:4% 15px}.button-section{margin-top:15px}.clipPath{clip-path:polygon(0% 100%,50% 0%,100% 100%);height:100px;background-color:#00f}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-15{margin-top:15px}@media only screen and (max-width: 475px){.d-flex{justify-content:center;margin-bottom:25px}}.main-section{width:100%;overflow-y:hidden}.subTabs_section{padding:1rem 5rem;height:12vh}.active_route_section{height:89%;border:1px solid #0000000F;padding:15px 20px;background-color:#fff;border-radius:6px}.active_route_section_normal{background-color:#f6f6f6;border:none;padding:10px 4rem}.list_tabs{border:1px solid #0000001A;background-color:#ffffffe5;padding:10px;border-radius:6px;gap:10px;height:50px}.single_tab{color:#0e233c99;font-size:14px;font-weight:500;font-family:interReg;padding:10px 20px}.single_tab_active{width:max-content;height:32px;background-color:#0015800a;display:flex;align-items:center;font-weight:600;padding:10px 20px;border-radius:4px;color:#0e233c}.align-items-center{align-items:center}.header{height:8vh;padding:10px;border-bottom:2px solid rgba(0,0,0,.06);display:flex}.p-5{padding:5rem}.backToLeads{color:#000!important}.body{margin:1rem 5rem 0rem;box-shadow:#00000029 0 1px 4px;padding:2rem;border-radius:10px}.profile-img{display:flex;align-items:center;gap:2rem}.mt-2{margin-top:2rem!important}.mt-1{margin-top:1rem!important}.image-box{display:flex;gap:1rem;margin-top:3rem;cursor:pointer}.image-box span{color:#0189ea;font-size:14px;font-weight:500;padding:11px 7rem;border:2px solid rgba(0,0,0,.06);height:47px;border-radius:10px}.image_box{display:flex;align-items:center}.dummy-image{height:55px}.label-text{font-weight:400;font-family:Inter;font-size:14px;color:#434443}.input-text{border-radius:7px;border:2px solid rgba(208,213,221,1);height:42px;width:100%;margin-top:5px;padding-left:10px}.footer{display:flex;gap:1rem;align-items:center;justify-content:flex-end;height:8vh;padding:10px;border-top:2px solid rgba(0,0,0,.06);position:absolute;bottom:0;width:100%}.footer .continue{font-size:13px;font-family:interMedium;color:#242424;font-weight:500;border:none;background-color:#f6c318;padding:10px 20px;border-radius:8px;width:max-content}.footer .cancel{font-size:13px;font-family:interMedium;color:#f6c318;font-weight:500;border:1px solid #F6C318;background-color:#fff;padding:10px 20px;border-radius:8px;width:max-content}.main-content{overflow:scroll;padding-top:5px;padding-bottom:10px}.button-parent{padding:1rem 5rem 1rem 2rem;align-items:center;display:flex;justify-content:flex-end}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.payment-details{margin:1rem 5rem 0rem;box-shadow:#00000029 0 1px 4px;border-radius:10px}.mb-5{margin-bottom:5px!important}.addedImg{display:flex;gap:5%;width:95%;margin-top:2rem}.addedImg .uploadedImg img{height:65px;width:65px;border-radius:50%}.addedImg .image-buttons{display:flex;gap:3%;padding-top:20px}.addedImg .image-buttons .button{display:flex;gap:8px;width:142px;height:40px;padding:12px 8px;font-family:lexandMedium;color:#3f3b3b;font-style:normal;font-weight:500;font-size:12px!important;border:1px dashed #E4E7EC;border-radius:12px;cursor:pointer}.addedImg .image-buttons .button img{width:20px}.addedImg .image-buttons .button .delete{display:flex;gap:15%;width:60%;margin:auto}.addedImg .image-buttons .button .delete img{width:12px}.emptyText{height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:50px}.emptyText img{height:200px}@media screen and (max-width: 475px){.body{margin:0rem}.emptyText{padding:1rem}.emptyText img{width:100%}.subTabs_section{padding:1rem .5rem}.list_tabs{white-space:nowrap;overflow:scroll;justify-content:flex-start}.payment-details{margin:0rem}}.mtb-15{margin-top:15px;margin-bottom:15px}.checkbox-label{display:flex;align-items:center;gap:15px}.checkbox-label input{height:16px;width:16px}.upload-file{display:flex;align-items:center;justify-content:space-between;padding-right:10px}.upload-file mat-icon{color:#4caf50}.upload-file p{margin-bottom:0}@media only screen and (min-width: 320px) and (max-width : 500px){.image-box span{padding:11px 4rem}}mat-form-field{border:1px solid 2px solid rgba(208,213,221,1);border-radius:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatGridListModule }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: TextElementComponent, selector: "simpo-text-element", inputs: ["textData", "textLabel"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: PaymentDetailsComponent, selector: "simpo-payment-details", inputs: ["admissionData", "subscriptionsData", "termPaymentList"] }, { kind: "component", type: DocumentComponent, selector: "simpo-document", inputs: ["documentList"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type:
|
|
11227
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RegistrationFormComponent, isStandalone: true, selector: "simpo-registration-form", inputs: { data: "data", index: "index", edit: "edit", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\n <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\"\n [simpoBorder]=\"styles?.border\">\n <div class=\"main-section\"\n [ngClass]=\"{'justify-content-md-start': styles?.layout?.align === 'left' , 'justify-content-md-end': styles?.layout?.align === 'right'}\"\n [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\n <div class=\"body-section\">\n <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\n <div>\n <simpo-text-element [textData]=\"content?.inputText?.[0]?.value\" [textLabel]=\"content?.inputText?.[0]?.label\"></simpo-text-element>\n </div>\n <div class=\"d-flex gap-2 d-md-flex mt-15\" *ngIf=\"data?.action?.display\" [ngClass]=\"[\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\n ]\">\n </div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n\n <section class=\"main-section\">\n <div *ngIf=\"formStatus != 'REGISTERED' && formStatus != 'ADMITTED'\">\n <div class=\"subTabs_section\">\n <div class=\"list_tabs d-flex align-items-center\">\n <ng-container *ngFor=\"let key of Object.keys(fieldData)\">\n <div class=\"single_tab cursor-pointer\" (click)=\"selectedKey = key\"\n [ngClass]=\"selectedKey === key ? 'single_tab_active' : 'single_tab'\">\n {{key | titlecase}}\n </div>\n </ng-container>\n <div class=\"single_tab cursor-pointer\" (click)=\"selectedKey = 'Document'\" *ngIf=\"data?.sectionType === 'admissionForm'\"\n [ngClass]=\"selectedKey === 'Document' ? 'single_tab_active' : 'single_tab'\">\n Document\n </div>\n <div class=\"single_tab cursor-pointer\" (click)=\"redirectToPayment()\"\n *ngIf=\"data?.sectionType === 'admissionForm'\"\n [ngClass]=\"selectedKey === 'Payment' ? 'single_tab_active' : 'single_tab'\">\n Payment\n </div>\n </div>\n </div>\n\n <div class=\"main-content\">\n <ng-container *ngFor=\"let group of fieldData[selectedKey] ? Object.keys(fieldData[selectedKey]) : [];let groupIndex = index\">\n <div class=\"body\" *ngIf=\"group !== 'Backup Contact'\">\n <div class=\"list_tabs backToLeads d-flex align-items-center\">\n {{group}}\n </div>\n\n <ng-container *ngIf=\"groupIndex == 0 && Object.keys(fieldData)[0] === selectedKey\">\n <div class=\"image-box\" *ngIf=\"!payload.imgUrl\">\n <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\n (click)=\"fileInput.click()\" alt=\"\">\n <div class=\"image_box\">\n <span class=\"fc_browse_btn\" id=\"display_browse_btn\" (click)=\"fileInput.click()\">Click to\n upload</span>\n </div>\n </div>\n <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\"\n accept=\"image/x-png,image/jpeg,image/jpg\" (change)=\"updateAdmissionImage($event)\" class=\"pc-btn\"\n id=\"browse_contact_image\" #fileInput />\n\n <div *ngIf=\"payload.imgUrl\" class=\"addedImg\">\n <div class=\"uploadedImg\">\n <img alt=\"\" [src]=\"ds.bypassSecurityTrustUrl(payload.imgUrl)\">\n </div>\n <div class=\"image-buttons\">\n <div class=\"button\" (click)=\"fileInput.click()\">\n <img src=\"../../../../../../../../../assets/images/blogs/change_image.svg\" alt=\"\">\n Change Image\n </div>\n <div class=\"button delete-change\" (click)=\"deleteImg()\">\n\n <div class=\"delete\">\n <img src=\"./../../../../../../../../../assets/images/blogs/delete_image.svg\" alt=\"\">\n <div>Delete</div>\n </div>\n\n </div>\n </div>\n\n </div>\n </ng-container>\n\n <div class=\"row mt-1\">\n <ng-container *ngFor=\"let info of fieldData[selectedKey][group]\">\n <div class=\"col-md-4 col-12 mt-1\" *ngIf=\"info.isDisplay\">\n <label for=\"\" class=\"label-text\">{{info.displayText || info.fieldLabel}}</label> <span style=\"color: red;\" *ngIf=\"info.required\">*</span> <br>\n <ng-container *ngTemplateOutlet=\"inputData; context: {data: info, group:group}\"></ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n\n <div class=\"body\" *ngIf=\"fieldData[selectedKey].hasOwnProperty('Backup Contact') && studentLiveWith === 'single parent' && groupIndex == 0 && Object.keys(fieldData)[0] === selectedKey\">\n <div class=\"list_tabs backToLeads d-flex align-items-center\">\n Backup Contact (Optional)\n </div>\n\n <div class=\"row mt-1\">\n <div class=\"col-md-12\">\n <label class=\"mtb-15 checkbox-label\">\n <input type=\"checkbox\" name=\"\" id=\"\" [(ngModel)]=\"payload.parentAuthorization\">\n I authorize the school to release the child only to the parent listed above\n </label>\n </div>\n <div class=\"col-md-4 col-12 mt-1\" *ngFor=\"let info of fieldData[selectedKey]['Backup Contact']\">\n <label for=\"\" class=\"label-text\">{{info.displayText || info.fieldLabel}}</label> <span style=\"color: red;\"\n *ngIf=\"info.required\">*</span> <br>\n <ng-container *ngTemplateOutlet=\"inputData; context: {data: info}\"></ng-container>\n </div>\n <div class=\"col-md-4 col-12 mt-1\">\n <label for=\"\" class=\"label-text\">Upload Supporting Document (Optional)</label>\n <div class=\"input-text upload-file\" (click)=\"backUpDocInput.click()\">\n <p>{{backupDocFile ? 'File Uploaded' : 'Upload File'}}</p>\n <mat-icon>cloud_upload</mat-icon>\n </div>\n <input id=\"vendorImage\" type=\"file\" name=\"myfile\" hidden\n accept=\".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/x-png,image/jpeg,image/jpg,.pdf, video/mp4,video/x-matroska,video/x-msvideo,video/quicktime\"\n (change)=\"uploadBackUpDocument($event)\" class=\"pc-btn\"\n id=\"browse_contact_image\" #backUpDocInput />\n </div>\n </div>\n </div>\n\n </ng-container>\n <div class=\"payment-details\" *ngIf=\"selectedKey === 'Document' && data?.sectionType === 'admissionForm'\">\n <simpo-document [documentList]=\"documentList\"></simpo-document>\n </div>\n <div class=\"payment-details\" *ngIf=\"selectedKey === 'Payment' && data?.sectionType === 'admissionForm'\">\n <simpo-payment-details [admissionData]=\"payload\"\n [subscriptionsData]=\"subscriptionsData\" [termPaymentList]=\"termPaymentList\"></simpo-payment-details>\n </div>\n </div>\n\n <div class=\"button-parent\">\n <ng-container *ngFor=\"let button of data?.action?.buttons\">\n <button class=\"button\" (click)=\"submitForm()\" simpoButtonDirective [id]=\"data?.id+button.id\"\n [buttonStyle]=\"button.styles\" *ngIf=\"(data?.sectionType === 'admissionForm' && selectedKey == 'Payment') ||\n (data?.sectionType === 'registrationForm' &&\n (Object.keys(fieldData)[Object.keys(fieldData).length - 1] == selectedKey))\"\n [color]=\"data?.styles?.background?.accentColor\">{{button?.content?.label}}</button>\n\n <button class=\"button\" (click)=\"continueAdmission()\" simpoButtonDirective [id]=\"data?.id+button.id\"\n [buttonStyle]=\"button.styles\" *ngIf=\"selectedKey != 'Payment' && data?.sectionType === 'admissionForm'\"\n [color]=\"data?.styles?.background?.accentColor\">Continue</button>\n\n <button class=\"button\" (click)=\"continueAdmission()\" simpoButtonDirective [id]=\"data?.id+button.id\"\n [buttonStyle]=\"button.styles\"\n *ngIf=\"data?.sectionType === 'registrationForm' && (Object.keys(fieldData)[Object.keys(fieldData).length - 1] != selectedKey)\"\n [color]=\"data?.styles?.background?.accentColor\">Continue</button>\n </ng-container>\n </div>\n </div>\n\n <div class=\"emptyText\" *ngIf=\"formStatus == 'REGISTERED' || formStatus == 'ADMITTED'\">\n <img [src]=\"content?.image?.url\" alt=\"\" *ngIf=\"content?.image?.showImage\">\n <div class=\"heading-large\" [innerHtml]=\"content?.inputText?.[1]?.value\"></div>\n </div>\n </section>\n\n <ng-template #inputData let-field=\"data\" let-group=\"group\">\n <div *ngIf=\"field.dataType == 'IMAGE'\">\n <div class=\"image-box\" *ngIf=\"!field.fieldImageUrl\">\n <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\n (click)=\"fileInput2.click()\" alt=\"\">\n <div class=\"d-flex align-items-center\">\n <span class=\"fc_browse_btn\" id=\"display_browse_btn\" (click)=\"fileInput2.click()\">Click to\n upload</span>\n </div>\n </div>\n <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\" accept=\"image/x-png,image/jpeg,image/jpg\"\n (change)=\"uploadParentGuardinaImages($event,field)\" class=\"pc-btn\" id=\"browse_contact_image\" #fileInput2 />\n <div *ngIf=\"field.fieldImageUrl\" class=\"addedImg\">\n <div class=\"uploadedImg\">\n <img alt=\"\" [src]=\"ds.bypassSecurityTrustUrl(field.fieldImageUrl)\">\n </div>\n <div class=\"image-buttons\">\n <div class=\"button\" (click)=\"fileInput2.click()\">\n <img src=\"../../../../../../../../../assets/images/blogs/change_image.svg\" alt=\"\">\n Change Image\n </div>\n <div class=\"button delete-change\" (click)=\"deleteImg()\">\n \n <div class=\"delete\">\n <img src=\"./../../../../../../../../../assets/images/blogs/delete_image.svg\" alt=\"\">\n <div>Delete</div>\n </div>\n \n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"field.dataType === 'TEXT' && field.isDisplay\">\n <input type=\"text\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\n <div class=\"error\" *ngIf=\"field.fieldValue && !getFieldValidation(field)\">\n <ng-container *ngIf=\"field.fieldLabel?.toLowerCase().includes('phone number')\">\n Please enter a valid 10-digit Indian mobile number.\n </ng-container>\n <ng-container *ngIf=\"field.fieldLabel?.toLowerCase().includes('email')\">\n Please enter a valid email address.\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"field.dataType === 'NUMBER' && field.isDisplay\">\n <input type=\"number\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\n <div class=\"error\" *ngIf=\"field.fieldValue && !getFieldValidation(field)\">\n <ng-container *ngIf=\"field.fieldLabel?.toLowerCase().includes('phone number')\">\n Please enter a valid 10-digit Indian mobile number.\n </ng-container>\n <ng-container *ngIf=\"field.fieldLabel?.toLowerCase().includes('email')\">\n Please enter a valid email address.\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"field.dataType === 'MONEY' && field.isDisplay\">\n <input type=\"text\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\n </div>\n <div *ngIf=\"field.dataType === 'DATE' && field.isDisplay\">\n <input type=\"date\" class=\"input-text\" [(ngModel)]=\"field.fieldValue\" [placeholder]=\"'Select '+field.fieldLabel\" [max]=\"getMaxDate(field)\">\n </div>\n <div class=\"input-container\" *ngIf=\"field.dataType === 'TEXT_FILE' && field.isDisplay\">\n <input matInput class=\"input-text-1\" [(ngModel)]=\"field.fieldValue\" style=\"width:90%\">\n <div class=\"image-box-1 d-flex justify-content-center align-items-center\" *ngIf=\"!field.fieldImageUrl\"\n style=\"width:10%\">\n <mat-icon (click)=\"fileInput1.click()\"\n class=\"dummy-image-1 w-100 d-flex justify-content-center\">cloud_upload</mat-icon>\n </div>\n <div class=\"image-box-1 d-flex justify-content-center align-items-center\" *ngIf=\"field.fieldImageUrl\" style=\"width:10%\">\n <!-- If the uploaded file is an image, show the preview -->\n <img\n *ngIf=\"isImage(field.fieldImageUrl)\"\n alt=\"\"\n class=\"w-100 h-100\"\n [src]=\"ds.bypassSecurityTrustUrl(field.fieldImageUrl)\"\n (click)=\"fileInput1.click()\" />\n \n <!-- If the uploaded file is not an image, show a file icon -->\n <mat-icon\n *ngIf=\"!isImage(field.fieldImageUrl)\"\n class=\"w-100 d-flex justify-content-center align-items-center dummy-image-1\"\n (click)=\"fileInput1.click()\">insert_drive_file</mat-icon>\n </div>\n \n <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\"\n accept=\".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/x-png,image/jpeg,image/jpg,.pdf, video/mp4,video/x-matroska,video/x-msvideo,video/quicktime\"\n (change)=\"updateSelectedImage($event,field)\" class=\"pc-btn\" id=\"browse_contact_image\" #fileInput1 />\n </div>\n <div *ngIf=\"field.dataType === 'DROPDOWN' && field.isDisplay\" class=\"admission\">\n <mat-form-field class=\"input-text-1 input_card\" appearance=\"outline\" style=\"width:100%\">\n <mat-select class=\"inputStyle\" placeholder=\"--Select--\" [(ngModel)]=\"field.fieldValue\" [multiple]=\"field.multipleSelection\">\n <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\n <mat-option *ngFor=\"let item of field.value\" [value]=\"item?.value\" (click)=\"masterDropdownValueChange(item, field)\">{{item.label}}</mat-option>\n </ng-container>\n <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\n <mat-option *ngFor=\"let item of field.sourceData[field.dataSourceType]\"\n (click)=\"inputFieldChange(item, field)\" [value]=\"item?.name\">{{item.name}}</mat-option>\n </ng-container>\n </mat-select>\n </mat-form-field>\n </div>\n <div *ngIf=\"field.dataType === 'CHECKBOX' && field.isDisplay\">\n <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\n <div class=\"form-check mb-5\" *ngFor=\"let data of field.value\">\n <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckChecked\" [(ngModel)]=\"data.checked\">\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\n {{data.label}}\n </label>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\n <div class=\"form-check mb-5\" *ngFor=\"let data of field.sourceData[field.dataSourceType]\">\n <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckChecked\" [(ngModel)]=\"data.checked\">\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\n {{data.name}}\n </label>\n </div>\n </ng-container>\n </div>\n <div *ngIf=\"field.dataType === 'RADIOBUTTON' && field.isDisplay\">\n <div style=\"display: flex; gap: 20px; margin-top: 10px; height: 35px;align-items: center;\">\n <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\n <!-- <div class=\" mb-5\" *ngFor=\"let data of field.value\">\n <mat-radio-button [value]=\"data.value\" [(ngModel)]=\"field.fieldValue\">{{data.label}}</mat-radio-button>\n </div> -->\n <mat-radio-group [(ngModel)]=\"field.fieldValue\" (change)=\"radioButtonChanged(field,selectedKey,group)\">\n <mat-radio-button *ngFor=\"let data of field.value\" [value]=\"data.value\">\n {{ data.label }}\n </mat-radio-button>\n </mat-radio-group>\n </ng-container>\n \n <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\n <div class=\"form-check mb-5\" *ngFor=\"let data of field.value\">\n <input class=\"form-check-input\" type=\"radio\" [value]=\"data.name\" [(ngModel)]=\"field.fieldValue\" />\n \n <label class=\"form-check-label\" [for]=\"'radio_' + data.name\">\n {{ data.name }}\n </label>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-template>\n\n\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n</section>\n", styles: [".total_container{height:auto;position:relative}.body-section{padding:4% 15px}.button-section{margin-top:15px}.clipPath{clip-path:polygon(0% 100%,50% 0%,100% 100%);height:100px;background-color:#00f}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-15{margin-top:15px}@media only screen and (max-width: 475px){.d-flex{justify-content:center;margin-bottom:25px}}.main-section{width:100%;overflow-y:hidden}.subTabs_section{padding:1rem 5rem;height:12vh}.active_route_section{height:89%;border:1px solid #0000000F;padding:15px 20px;background-color:#fff;border-radius:6px}.active_route_section_normal{background-color:#f6f6f6;border:none;padding:10px 4rem}.list_tabs{border:1px solid #0000001A;background-color:#ffffffe5;padding:10px;border-radius:6px;gap:10px;height:50px}.single_tab{color:#0e233c99;font-size:14px;font-weight:500;font-family:interReg;padding:10px 20px}.single_tab_active{width:max-content;height:32px;background-color:#0015800a;display:flex;align-items:center;font-weight:600;padding:10px 20px;border-radius:4px;color:#0e233c}.align-items-center{align-items:center}.header{height:8vh;padding:10px;border-bottom:2px solid rgba(0,0,0,.06);display:flex}.p-5{padding:5rem}.backToLeads{color:#000!important}.body{margin:1rem 5rem 0rem;box-shadow:#00000029 0 1px 4px;padding:2rem;border-radius:10px}.profile-img{display:flex;align-items:center;gap:2rem}.mt-2{margin-top:2rem!important}.mt-1{margin-top:1rem!important}.image-box{display:flex;gap:1rem;margin-top:3rem;cursor:pointer}.image-box span{color:#0189ea;font-size:14px;font-weight:500;padding:11px 7rem;border:2px solid rgba(0,0,0,.06);height:47px;border-radius:10px}.image_box{display:flex;align-items:center}.dummy-image{height:55px}.label-text{font-weight:400;font-family:Inter;font-size:14px;color:#434443}.input-text{border-radius:7px;border:2px solid rgba(208,213,221,1);height:42px;width:100%;margin-top:5px;padding-left:10px}.footer{display:flex;gap:1rem;align-items:center;justify-content:flex-end;height:8vh;padding:10px;border-top:2px solid rgba(0,0,0,.06);position:absolute;bottom:0;width:100%}.footer .continue{font-size:13px;font-family:interMedium;color:#242424;font-weight:500;border:none;background-color:#f6c318;padding:10px 20px;border-radius:8px;width:max-content}.footer .cancel{font-size:13px;font-family:interMedium;color:#f6c318;font-weight:500;border:1px solid #F6C318;background-color:#fff;padding:10px 20px;border-radius:8px;width:max-content}.main-content{overflow:scroll;padding-top:5px;padding-bottom:10px}.button-parent{padding:1rem 5rem 1rem 2rem;align-items:center;display:flex;justify-content:flex-end}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.payment-details{margin:1rem 5rem 0rem;box-shadow:#00000029 0 1px 4px;border-radius:10px}.mb-5{margin-bottom:5px!important}.addedImg{display:flex;gap:5%;width:95%;margin-top:2rem}.addedImg .uploadedImg img{height:65px;width:65px;border-radius:50%}.addedImg .image-buttons{display:flex;gap:3%;padding-top:20px}.addedImg .image-buttons .button{display:flex;gap:8px;width:142px;height:40px;padding:12px 8px;font-family:lexandMedium;color:#3f3b3b;font-style:normal;font-weight:500;font-size:12px!important;border:1px dashed #E4E7EC;border-radius:12px;cursor:pointer}.addedImg .image-buttons .button img{width:20px}.addedImg .image-buttons .button .delete{display:flex;gap:15%;width:60%;margin:auto}.addedImg .image-buttons .button .delete img{width:12px}.emptyText{height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:50px}.emptyText img{height:200px}@media screen and (max-width: 475px){.body{margin:0rem}.emptyText{padding:1rem}.emptyText img{width:100%}.subTabs_section{padding:1rem .5rem}.list_tabs{white-space:nowrap;overflow:scroll;justify-content:flex-start}.payment-details{margin:0rem}}.mtb-15{margin-top:15px;margin-bottom:15px}.checkbox-label{display:flex;align-items:center;gap:15px}.checkbox-label input{height:16px;width:16px}.upload-file{display:flex;align-items:center;justify-content:space-between;padding-right:10px}.upload-file mat-icon{color:#4caf50}.upload-file p{margin-bottom:0}@media only screen and (min-width: 320px) and (max-width : 500px){.image-box span{padding:11px 4rem}}mat-form-field{border:1px solid 2px solid rgba(208,213,221,1);border-radius:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatGridListModule }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: TextElementComponent, selector: "simpo-text-element", inputs: ["textData", "textLabel"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: PaymentDetailsComponent, selector: "simpo-payment-details", inputs: ["admissionData", "subscriptionsData", "termPaymentList"] }, { kind: "component", type: DocumentComponent, selector: "simpo-document", inputs: ["documentList"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type:
|
|
11201
11228
|
//directive
|
|
11202
11229
|
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", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: i13.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i7$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i7$2.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }] }); }
|
|
11203
11230
|
}
|
|
@@ -11222,7 +11249,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
11222
11249
|
FormsModule,
|
|
11223
11250
|
MatIconModule,
|
|
11224
11251
|
MatRadioModule
|
|
11225
|
-
], template: "<section simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\n <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\"\n [simpoBorder]=\"styles?.border\">\n <div class=\"main-section\"\n [ngClass]=\"{'justify-content-md-start': styles?.layout?.align === 'left' , 'justify-content-md-end': styles?.layout?.align === 'right'}\"\n [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\n <div class=\"body-section\">\n <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\n <div>\n <simpo-text-element [textData]=\"content?.inputText?.[0]?.value\" [textLabel]=\"content?.inputText?.[0]?.label\"></simpo-text-element>\n </div>\n <div class=\"d-flex gap-2 d-md-flex mt-15\" *ngIf=\"data?.action?.display\" [ngClass]=\"[\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\n ]\">\n </div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n\n <section class=\"main-section\">\n <div *ngIf=\"formStatus != 'REGISTERED' && formStatus != 'ADMITTED'\">\n <div class=\"subTabs_section\">\n <div class=\"list_tabs d-flex align-items-center\">\n <ng-container *ngFor=\"let key of Object.keys(fieldData)\">\n <div class=\"single_tab cursor-pointer\" (click)=\"selectedKey = key\"\n [ngClass]=\"selectedKey === key ? 'single_tab_active' : 'single_tab'\">\n {{key | titlecase}}\n </div>\n </ng-container>\n <div class=\"single_tab cursor-pointer\" (click)=\"selectedKey = 'Document'\" *ngIf=\"data?.sectionType === 'admissionForm'\"\n [ngClass]=\"selectedKey === 'Document' ? 'single_tab_active' : 'single_tab'\">\n Document\n </div>\n <div class=\"single_tab cursor-pointer\" (click)=\"redirectToPayment()\"\n *ngIf=\"data?.sectionType === 'admissionForm'\"\n [ngClass]=\"selectedKey === 'Payment' ? 'single_tab_active' : 'single_tab'\">\n Payment\n </div>\n </div>\n </div>\n\n <div class=\"main-content\">\n <ng-container *ngFor=\"let group of fieldData[selectedKey] ? Object.keys(fieldData[selectedKey]) : [];let groupIndex = index\">\n <div class=\"body\" *ngIf=\"group !== 'Backup Contact'\">\n <div class=\"list_tabs backToLeads d-flex align-items-center\">\n {{group}}\n </div>\n\n <ng-container *ngIf=\"groupIndex == 0 && Object.keys(fieldData)[0] === selectedKey\">\n <div class=\"image-box\" *ngIf=\"!payload.imgUrl\">\n <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\n (click)=\"fileInput.click()\" alt=\"\">\n <div class=\"image_box\">\n <span class=\"fc_browse_btn\" id=\"display_browse_btn\" (click)=\"fileInput.click()\">Click to\n upload</span>\n </div>\n </div>\n <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\"\n accept=\"image/x-png,image/jpeg,image/jpg\" (change)=\"updateAdmissionImage($event)\" class=\"pc-btn\"\n id=\"browse_contact_image\" #fileInput />\n\n <div *ngIf=\"payload.imgUrl\" class=\"addedImg\">\n <div class=\"uploadedImg\">\n <img alt=\"\" [src]=\"ds.bypassSecurityTrustUrl(payload.imgUrl)\">\n </div>\n <div class=\"image-buttons\">\n <div class=\"button\" (click)=\"fileInput.click()\">\n <img src=\"../../../../../../../../../assets/images/blogs/change_image.svg\" alt=\"\">\n Change Image\n </div>\n <div class=\"button delete-change\" (click)=\"deleteImg()\">\n\n <div class=\"delete\">\n <img src=\"./../../../../../../../../../assets/images/blogs/delete_image.svg\" alt=\"\">\n <div>Delete</div>\n </div>\n\n </div>\n </div>\n\n </div>\n </ng-container>\n\n <div class=\"row mt-1\">\n <ng-container *ngFor=\"let info of fieldData[selectedKey][group]\">\n <div class=\"col-md-4 col-12 mt-1\" *ngIf=\"info.isDisplay\">\n <label for=\"\" class=\"label-text\">{{info.displayText || info.fieldLabel}}</label> <span style=\"color: red;\" *ngIf=\"info.required\">*</span> <br>\n <ng-container *ngTemplateOutlet=\"inputData; context: {data: info, group:group}\"></ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n\n <div class=\"body\" *ngIf=\"fieldData[selectedKey].hasOwnProperty('Backup Contact') && studentLiveWith === 'single parent' && groupIndex == 0 && Object.keys(fieldData)[0] === selectedKey\">\n <div class=\"list_tabs backToLeads d-flex align-items-center\">\n Backup Contact (Optional)\n </div>\n\n <div class=\"row mt-1\">\n <div class=\"col-md-12\">\n <label class=\"mtb-15 checkbox-label\">\n <input type=\"checkbox\" name=\"\" id=\"\" [(ngModel)]=\"payload.parentAuthorization\">\n I authorize the school to release the child only to the parent listed above\n </label>\n </div>\n <div class=\"col-md-4 col-12 mt-1\" *ngFor=\"let info of fieldData[selectedKey]['Backup Contact']\">\n <label for=\"\" class=\"label-text\">{{info.displayText || info.fieldLabel}}</label> <span style=\"color: red;\"\n *ngIf=\"info.required\">*</span> <br>\n <ng-container *ngTemplateOutlet=\"inputData; context: {data: info}\"></ng-container>\n </div>\n <div class=\"col-md-4 col-12 mt-1\">\n <label for=\"\" class=\"label-text\">Upload Supporting Document (Optional)</label>\n <div class=\"input-text upload-file\" (click)=\"backUpDocInput.click()\">\n <p>{{backupDocFile ? 'File Uploaded' : 'Upload File'}}</p>\n <mat-icon>cloud_upload</mat-icon>\n </div>\n <input id=\"vendorImage\" type=\"file\" name=\"myfile\" hidden\n accept=\".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/x-png,image/jpeg,image/jpg,.pdf, video/mp4,video/x-matroska,video/x-msvideo,video/quicktime\"\n (change)=\"uploadBackUpDocument($event)\" class=\"pc-btn\"\n id=\"browse_contact_image\" #backUpDocInput />\n </div>\n </div>\n </div>\n\n </ng-container>\n <div class=\"payment-details\" *ngIf=\"selectedKey === 'Document' && data?.sectionType === 'admissionForm'\">\n <simpo-document [documentList]=\"documentList\"></simpo-document>\n </div>\n <div class=\"payment-details\" *ngIf=\"selectedKey === 'Payment' && data?.sectionType === 'admissionForm'\">\n <simpo-payment-details [admissionData]=\"payload\"\n [subscriptionsData]=\"subscriptionsData\" [termPaymentList]=\"termPaymentList\"></simpo-payment-details>\n </div>\n </div>\n\n <div class=\"button-parent\">\n <ng-container *ngFor=\"let button of data?.action?.buttons\">\n <button class=\"button\" (click)=\"submitForm()\" simpoButtonDirective [id]=\"data?.id+button.id\"\n [buttonStyle]=\"button.styles\" *ngIf=\"(data?.sectionType === 'admissionForm' && selectedKey == 'Payment') ||\n (data?.sectionType === 'registrationForm' &&\n (Object.keys(fieldData)[Object.keys(fieldData).length - 1] == selectedKey))\"\n [color]=\"data?.styles?.background?.accentColor\">{{button?.content?.label}}</button>\n\n <button class=\"button\" (click)=\"continueAdmission()\" simpoButtonDirective [id]=\"data?.id+button.id\"\n [buttonStyle]=\"button.styles\" *ngIf=\"selectedKey != 'Payment' && data?.sectionType === 'admissionForm'\"\n [color]=\"data?.styles?.background?.accentColor\">Continue</button>\n\n <button class=\"button\" (click)=\"continueAdmission()\" simpoButtonDirective [id]=\"data?.id+button.id\"\n [buttonStyle]=\"button.styles\"\n *ngIf=\"data?.sectionType === 'registrationForm' && (Object.keys(fieldData)[Object.keys(fieldData).length - 1] != selectedKey)\"\n [color]=\"data?.styles?.background?.accentColor\">Continue</button>\n </ng-container>\n </div>\n </div>\n\n <div class=\"emptyText\" *ngIf=\"formStatus == 'REGISTERED' || formStatus == 'ADMITTED'\">\n <img [src]=\"content?.image?.url\" alt=\"\" *ngIf=\"content?.image?.showImage\">\n <div class=\"heading-large\" [innerHtml]=\"content?.inputText?.[1]?.value\"></div>\n </div>\n </section>\n\n <ng-template #inputData let-field=\"data\" let-group=\"group\">\n <div *ngIf=\"field.dataType == 'IMAGE'\">\n <div class=\"image-box\" *ngIf=\"!field.fieldImageUrl\">\n <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\n (click)=\"fileInput2.click()\" alt=\"\">\n <div class=\"d-flex align-items-center\">\n <span class=\"fc_browse_btn\" id=\"display_browse_btn\" (click)=\"fileInput2.click()\">Click to\n upload</span>\n </div>\n </div>\n <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\" accept=\"image/x-png,image/jpeg,image/jpg\"\n (change)=\"uploadParentGuardinaImages($event,field)\" class=\"pc-btn\" id=\"browse_contact_image\" #fileInput2 />\n <div *ngIf=\"field.fieldImageUrl\" class=\"addedImg\">\n <div class=\"uploadedImg\">\n <img alt=\"\" [src]=\"ds.bypassSecurityTrustUrl(field.fieldImageUrl)\">\n </div>\n <div class=\"image-buttons\">\n <div class=\"button\" (click)=\"fileInput2.click()\">\n <img src=\"../../../../../../../../../assets/images/blogs/change_image.svg\" alt=\"\">\n Change Image\n </div>\n <div class=\"button delete-change\" (click)=\"deleteImg()\">\n \n <div class=\"delete\">\n <img src=\"./../../../../../../../../../assets/images/blogs/delete_image.svg\" alt=\"\">\n <div>Delete</div>\n </div>\n \n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"field.dataType === 'TEXT' && field.isDisplay\">\n <input type=\"text\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\n </div>\n <div *ngIf=\"field.dataType === 'NUMBER' && field.isDisplay\">\n <input type=\"number\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\n </div>\n <div *ngIf=\"field.dataType === 'MONEY' && field.isDisplay\">\n <input type=\"text\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\n </div>\n <div *ngIf=\"field.dataType === 'DATE' && field.isDisplay\">\n <input type=\"date\" class=\"input-text\" [(ngModel)]=\"field.fieldValue\" [placeholder]=\"'Select '+field.fieldLabel\" [max]=\"getMaxDate(field)\">\n </div>\n <div class=\"input-container\" *ngIf=\"field.dataType === 'TEXT_FILE' && field.isDisplay\">\n <input matInput class=\"input-text-1\" [(ngModel)]=\"field.fieldValue\" style=\"width:90%\">\n <div class=\"image-box-1 d-flex justify-content-center align-items-center\" *ngIf=\"!field.fieldImageUrl\"\n style=\"width:10%\">\n <mat-icon (click)=\"fileInput1.click()\"\n class=\"dummy-image-1 w-100 d-flex justify-content-center\">cloud_upload</mat-icon>\n </div>\n <div class=\"image-box-1 d-flex justify-content-center align-items-center\" *ngIf=\"field.fieldImageUrl\" style=\"width:10%\">\n <!-- If the uploaded file is an image, show the preview -->\n <img\n *ngIf=\"isImage(field.fieldImageUrl)\"\n alt=\"\"\n class=\"w-100 h-100\"\n [src]=\"ds.bypassSecurityTrustUrl(field.fieldImageUrl)\"\n (click)=\"fileInput1.click()\" />\n \n <!-- If the uploaded file is not an image, show a file icon -->\n <mat-icon\n *ngIf=\"!isImage(field.fieldImageUrl)\"\n class=\"w-100 d-flex justify-content-center align-items-center dummy-image-1\"\n (click)=\"fileInput1.click()\">insert_drive_file</mat-icon>\n </div>\n \n <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\"\n accept=\".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/x-png,image/jpeg,image/jpg,.pdf, video/mp4,video/x-matroska,video/x-msvideo,video/quicktime\"\n (change)=\"updateSelectedImage($event,field)\" class=\"pc-btn\" id=\"browse_contact_image\" #fileInput1 />\n </div>\n <div *ngIf=\"field.dataType === 'DROPDOWN' && field.isDisplay\" class=\"admission\">\n <mat-form-field class=\"input-text-1 input_card\" appearance=\"outline\" style=\"width:100%\">\n <mat-select class=\"inputStyle\" placeholder=\"--Select--\" [(ngModel)]=\"field.fieldValue\" [multiple]=\"field.multipleSelection\">\n <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\n <mat-option *ngFor=\"let item of field.value\" [value]=\"item?.value\" (click)=\"masterDropdownValueChange(item, field)\">{{item.label}}</mat-option>\n </ng-container>\n <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\n <mat-option *ngFor=\"let item of field.sourceData[field.dataSourceType]\"\n (click)=\"inputFieldChange(item, field)\" [value]=\"item?.name\">{{item.name}}</mat-option>\n </ng-container>\n </mat-select>\n </mat-form-field>\n </div>\n <div *ngIf=\"field.dataType === 'CHECKBOX' && field.isDisplay\">\n <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\n <div class=\"form-check mb-5\" *ngFor=\"let data of field.value\">\n <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckChecked\" [(ngModel)]=\"data.checked\">\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\n {{data.label}}\n </label>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\n <div class=\"form-check mb-5\" *ngFor=\"let data of field.sourceData[field.dataSourceType]\">\n <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckChecked\" [(ngModel)]=\"data.checked\">\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\n {{data.name}}\n </label>\n </div>\n </ng-container>\n </div>\n <div *ngIf=\"field.dataType === 'RADIOBUTTON' && field.isDisplay\">\n <div style=\"display: flex; gap: 20px; margin-top: 10px; height: 35px;align-items: center;\">\n <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\n <!-- <div class=\" mb-5\" *ngFor=\"let data of field.value\">\n <mat-radio-button [value]=\"data.value\" [(ngModel)]=\"field.fieldValue\">{{data.label}}</mat-radio-button>\n </div> -->\n <mat-radio-group [(ngModel)]=\"field.fieldValue\" (change)=\"radioButtonChanged(field,selectedKey,group)\">\n <mat-radio-button *ngFor=\"let data of field.value\" [value]=\"data.value\">\n {{ data.label }}\n </mat-radio-button>\n </mat-radio-group>\n </ng-container>\n \n <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\n <div class=\"form-check mb-5\" *ngFor=\"let data of field.value\">\n <input class=\"form-check-input\" type=\"radio\" [value]=\"data.name\" [(ngModel)]=\"field.fieldValue\" />\n \n <label class=\"form-check-label\" [for]=\"'radio_' + data.name\">\n {{ data.name }}\n </label>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-template>\n\n\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n</section>\n", styles: [".total_container{height:auto;position:relative}.body-section{padding:4% 15px}.button-section{margin-top:15px}.clipPath{clip-path:polygon(0% 100%,50% 0%,100% 100%);height:100px;background-color:#00f}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-15{margin-top:15px}@media only screen and (max-width: 475px){.d-flex{justify-content:center;margin-bottom:25px}}.main-section{width:100%;overflow-y:hidden}.subTabs_section{padding:1rem 5rem;height:12vh}.active_route_section{height:89%;border:1px solid #0000000F;padding:15px 20px;background-color:#fff;border-radius:6px}.active_route_section_normal{background-color:#f6f6f6;border:none;padding:10px 4rem}.list_tabs{border:1px solid #0000001A;background-color:#ffffffe5;padding:10px;border-radius:6px;gap:10px;height:50px}.single_tab{color:#0e233c99;font-size:14px;font-weight:500;font-family:interReg;padding:10px 20px}.single_tab_active{width:max-content;height:32px;background-color:#0015800a;display:flex;align-items:center;font-weight:600;padding:10px 20px;border-radius:4px;color:#0e233c}.align-items-center{align-items:center}.header{height:8vh;padding:10px;border-bottom:2px solid rgba(0,0,0,.06);display:flex}.p-5{padding:5rem}.backToLeads{color:#000!important}.body{margin:1rem 5rem 0rem;box-shadow:#00000029 0 1px 4px;padding:2rem;border-radius:10px}.profile-img{display:flex;align-items:center;gap:2rem}.mt-2{margin-top:2rem!important}.mt-1{margin-top:1rem!important}.image-box{display:flex;gap:1rem;margin-top:3rem;cursor:pointer}.image-box span{color:#0189ea;font-size:14px;font-weight:500;padding:11px 7rem;border:2px solid rgba(0,0,0,.06);height:47px;border-radius:10px}.image_box{display:flex;align-items:center}.dummy-image{height:55px}.label-text{font-weight:400;font-family:Inter;font-size:14px;color:#434443}.input-text{border-radius:7px;border:2px solid rgba(208,213,221,1);height:42px;width:100%;margin-top:5px;padding-left:10px}.footer{display:flex;gap:1rem;align-items:center;justify-content:flex-end;height:8vh;padding:10px;border-top:2px solid rgba(0,0,0,.06);position:absolute;bottom:0;width:100%}.footer .continue{font-size:13px;font-family:interMedium;color:#242424;font-weight:500;border:none;background-color:#f6c318;padding:10px 20px;border-radius:8px;width:max-content}.footer .cancel{font-size:13px;font-family:interMedium;color:#f6c318;font-weight:500;border:1px solid #F6C318;background-color:#fff;padding:10px 20px;border-radius:8px;width:max-content}.main-content{overflow:scroll;padding-top:5px;padding-bottom:10px}.button-parent{padding:1rem 5rem 1rem 2rem;align-items:center;display:flex;justify-content:flex-end}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.payment-details{margin:1rem 5rem 0rem;box-shadow:#00000029 0 1px 4px;border-radius:10px}.mb-5{margin-bottom:5px!important}.addedImg{display:flex;gap:5%;width:95%;margin-top:2rem}.addedImg .uploadedImg img{height:65px;width:65px;border-radius:50%}.addedImg .image-buttons{display:flex;gap:3%;padding-top:20px}.addedImg .image-buttons .button{display:flex;gap:8px;width:142px;height:40px;padding:12px 8px;font-family:lexandMedium;color:#3f3b3b;font-style:normal;font-weight:500;font-size:12px!important;border:1px dashed #E4E7EC;border-radius:12px;cursor:pointer}.addedImg .image-buttons .button img{width:20px}.addedImg .image-buttons .button .delete{display:flex;gap:15%;width:60%;margin:auto}.addedImg .image-buttons .button .delete img{width:12px}.emptyText{height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:50px}.emptyText img{height:200px}@media screen and (max-width: 475px){.body{margin:0rem}.emptyText{padding:1rem}.emptyText img{width:100%}.subTabs_section{padding:1rem .5rem}.list_tabs{white-space:nowrap;overflow:scroll;justify-content:flex-start}.payment-details{margin:0rem}}.mtb-15{margin-top:15px;margin-bottom:15px}.checkbox-label{display:flex;align-items:center;gap:15px}.checkbox-label input{height:16px;width:16px}.upload-file{display:flex;align-items:center;justify-content:space-between;padding-right:10px}.upload-file mat-icon{color:#4caf50}.upload-file p{margin-bottom:0}@media only screen and (min-width: 320px) and (max-width : 500px){.image-box span{padding:11px 4rem}}mat-form-field{border:1px solid 2px solid rgba(208,213,221,1);border-radius:8px}\n"] }]
|
|
11252
|
+
], template: "<section simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\n <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\"\n [simpoBorder]=\"styles?.border\">\n <div class=\"main-section\"\n [ngClass]=\"{'justify-content-md-start': styles?.layout?.align === 'left' , 'justify-content-md-end': styles?.layout?.align === 'right'}\"\n [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\n <div class=\"body-section\">\n <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\n <div>\n <simpo-text-element [textData]=\"content?.inputText?.[0]?.value\" [textLabel]=\"content?.inputText?.[0]?.label\"></simpo-text-element>\n </div>\n <div class=\"d-flex gap-2 d-md-flex mt-15\" *ngIf=\"data?.action?.display\" [ngClass]=\"[\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\n ]\">\n </div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n\n <section class=\"main-section\">\n <div *ngIf=\"formStatus != 'REGISTERED' && formStatus != 'ADMITTED'\">\n <div class=\"subTabs_section\">\n <div class=\"list_tabs d-flex align-items-center\">\n <ng-container *ngFor=\"let key of Object.keys(fieldData)\">\n <div class=\"single_tab cursor-pointer\" (click)=\"selectedKey = key\"\n [ngClass]=\"selectedKey === key ? 'single_tab_active' : 'single_tab'\">\n {{key | titlecase}}\n </div>\n </ng-container>\n <div class=\"single_tab cursor-pointer\" (click)=\"selectedKey = 'Document'\" *ngIf=\"data?.sectionType === 'admissionForm'\"\n [ngClass]=\"selectedKey === 'Document' ? 'single_tab_active' : 'single_tab'\">\n Document\n </div>\n <div class=\"single_tab cursor-pointer\" (click)=\"redirectToPayment()\"\n *ngIf=\"data?.sectionType === 'admissionForm'\"\n [ngClass]=\"selectedKey === 'Payment' ? 'single_tab_active' : 'single_tab'\">\n Payment\n </div>\n </div>\n </div>\n\n <div class=\"main-content\">\n <ng-container *ngFor=\"let group of fieldData[selectedKey] ? Object.keys(fieldData[selectedKey]) : [];let groupIndex = index\">\n <div class=\"body\" *ngIf=\"group !== 'Backup Contact'\">\n <div class=\"list_tabs backToLeads d-flex align-items-center\">\n {{group}}\n </div>\n\n <ng-container *ngIf=\"groupIndex == 0 && Object.keys(fieldData)[0] === selectedKey\">\n <div class=\"image-box\" *ngIf=\"!payload.imgUrl\">\n <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\n (click)=\"fileInput.click()\" alt=\"\">\n <div class=\"image_box\">\n <span class=\"fc_browse_btn\" id=\"display_browse_btn\" (click)=\"fileInput.click()\">Click to\n upload</span>\n </div>\n </div>\n <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\"\n accept=\"image/x-png,image/jpeg,image/jpg\" (change)=\"updateAdmissionImage($event)\" class=\"pc-btn\"\n id=\"browse_contact_image\" #fileInput />\n\n <div *ngIf=\"payload.imgUrl\" class=\"addedImg\">\n <div class=\"uploadedImg\">\n <img alt=\"\" [src]=\"ds.bypassSecurityTrustUrl(payload.imgUrl)\">\n </div>\n <div class=\"image-buttons\">\n <div class=\"button\" (click)=\"fileInput.click()\">\n <img src=\"../../../../../../../../../assets/images/blogs/change_image.svg\" alt=\"\">\n Change Image\n </div>\n <div class=\"button delete-change\" (click)=\"deleteImg()\">\n\n <div class=\"delete\">\n <img src=\"./../../../../../../../../../assets/images/blogs/delete_image.svg\" alt=\"\">\n <div>Delete</div>\n </div>\n\n </div>\n </div>\n\n </div>\n </ng-container>\n\n <div class=\"row mt-1\">\n <ng-container *ngFor=\"let info of fieldData[selectedKey][group]\">\n <div class=\"col-md-4 col-12 mt-1\" *ngIf=\"info.isDisplay\">\n <label for=\"\" class=\"label-text\">{{info.displayText || info.fieldLabel}}</label> <span style=\"color: red;\" *ngIf=\"info.required\">*</span> <br>\n <ng-container *ngTemplateOutlet=\"inputData; context: {data: info, group:group}\"></ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n\n <div class=\"body\" *ngIf=\"fieldData[selectedKey].hasOwnProperty('Backup Contact') && studentLiveWith === 'single parent' && groupIndex == 0 && Object.keys(fieldData)[0] === selectedKey\">\n <div class=\"list_tabs backToLeads d-flex align-items-center\">\n Backup Contact (Optional)\n </div>\n\n <div class=\"row mt-1\">\n <div class=\"col-md-12\">\n <label class=\"mtb-15 checkbox-label\">\n <input type=\"checkbox\" name=\"\" id=\"\" [(ngModel)]=\"payload.parentAuthorization\">\n I authorize the school to release the child only to the parent listed above\n </label>\n </div>\n <div class=\"col-md-4 col-12 mt-1\" *ngFor=\"let info of fieldData[selectedKey]['Backup Contact']\">\n <label for=\"\" class=\"label-text\">{{info.displayText || info.fieldLabel}}</label> <span style=\"color: red;\"\n *ngIf=\"info.required\">*</span> <br>\n <ng-container *ngTemplateOutlet=\"inputData; context: {data: info}\"></ng-container>\n </div>\n <div class=\"col-md-4 col-12 mt-1\">\n <label for=\"\" class=\"label-text\">Upload Supporting Document (Optional)</label>\n <div class=\"input-text upload-file\" (click)=\"backUpDocInput.click()\">\n <p>{{backupDocFile ? 'File Uploaded' : 'Upload File'}}</p>\n <mat-icon>cloud_upload</mat-icon>\n </div>\n <input id=\"vendorImage\" type=\"file\" name=\"myfile\" hidden\n accept=\".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/x-png,image/jpeg,image/jpg,.pdf, video/mp4,video/x-matroska,video/x-msvideo,video/quicktime\"\n (change)=\"uploadBackUpDocument($event)\" class=\"pc-btn\"\n id=\"browse_contact_image\" #backUpDocInput />\n </div>\n </div>\n </div>\n\n </ng-container>\n <div class=\"payment-details\" *ngIf=\"selectedKey === 'Document' && data?.sectionType === 'admissionForm'\">\n <simpo-document [documentList]=\"documentList\"></simpo-document>\n </div>\n <div class=\"payment-details\" *ngIf=\"selectedKey === 'Payment' && data?.sectionType === 'admissionForm'\">\n <simpo-payment-details [admissionData]=\"payload\"\n [subscriptionsData]=\"subscriptionsData\" [termPaymentList]=\"termPaymentList\"></simpo-payment-details>\n </div>\n </div>\n\n <div class=\"button-parent\">\n <ng-container *ngFor=\"let button of data?.action?.buttons\">\n <button class=\"button\" (click)=\"submitForm()\" simpoButtonDirective [id]=\"data?.id+button.id\"\n [buttonStyle]=\"button.styles\" *ngIf=\"(data?.sectionType === 'admissionForm' && selectedKey == 'Payment') ||\n (data?.sectionType === 'registrationForm' &&\n (Object.keys(fieldData)[Object.keys(fieldData).length - 1] == selectedKey))\"\n [color]=\"data?.styles?.background?.accentColor\">{{button?.content?.label}}</button>\n\n <button class=\"button\" (click)=\"continueAdmission()\" simpoButtonDirective [id]=\"data?.id+button.id\"\n [buttonStyle]=\"button.styles\" *ngIf=\"selectedKey != 'Payment' && data?.sectionType === 'admissionForm'\"\n [color]=\"data?.styles?.background?.accentColor\">Continue</button>\n\n <button class=\"button\" (click)=\"continueAdmission()\" simpoButtonDirective [id]=\"data?.id+button.id\"\n [buttonStyle]=\"button.styles\"\n *ngIf=\"data?.sectionType === 'registrationForm' && (Object.keys(fieldData)[Object.keys(fieldData).length - 1] != selectedKey)\"\n [color]=\"data?.styles?.background?.accentColor\">Continue</button>\n </ng-container>\n </div>\n </div>\n\n <div class=\"emptyText\" *ngIf=\"formStatus == 'REGISTERED' || formStatus == 'ADMITTED'\">\n <img [src]=\"content?.image?.url\" alt=\"\" *ngIf=\"content?.image?.showImage\">\n <div class=\"heading-large\" [innerHtml]=\"content?.inputText?.[1]?.value\"></div>\n </div>\n </section>\n\n <ng-template #inputData let-field=\"data\" let-group=\"group\">\n <div *ngIf=\"field.dataType == 'IMAGE'\">\n <div class=\"image-box\" *ngIf=\"!field.fieldImageUrl\">\n <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\n (click)=\"fileInput2.click()\" alt=\"\">\n <div class=\"d-flex align-items-center\">\n <span class=\"fc_browse_btn\" id=\"display_browse_btn\" (click)=\"fileInput2.click()\">Click to\n upload</span>\n </div>\n </div>\n <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\" accept=\"image/x-png,image/jpeg,image/jpg\"\n (change)=\"uploadParentGuardinaImages($event,field)\" class=\"pc-btn\" id=\"browse_contact_image\" #fileInput2 />\n <div *ngIf=\"field.fieldImageUrl\" class=\"addedImg\">\n <div class=\"uploadedImg\">\n <img alt=\"\" [src]=\"ds.bypassSecurityTrustUrl(field.fieldImageUrl)\">\n </div>\n <div class=\"image-buttons\">\n <div class=\"button\" (click)=\"fileInput2.click()\">\n <img src=\"../../../../../../../../../assets/images/blogs/change_image.svg\" alt=\"\">\n Change Image\n </div>\n <div class=\"button delete-change\" (click)=\"deleteImg()\">\n \n <div class=\"delete\">\n <img src=\"./../../../../../../../../../assets/images/blogs/delete_image.svg\" alt=\"\">\n <div>Delete</div>\n </div>\n \n </div>\n </div>\n </div>\n </div>\n <div *ngIf=\"field.dataType === 'TEXT' && field.isDisplay\">\n <input type=\"text\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\n <div class=\"error\" *ngIf=\"field.fieldValue && !getFieldValidation(field)\">\n <ng-container *ngIf=\"field.fieldLabel?.toLowerCase().includes('phone number')\">\n Please enter a valid 10-digit Indian mobile number.\n </ng-container>\n <ng-container *ngIf=\"field.fieldLabel?.toLowerCase().includes('email')\">\n Please enter a valid email address.\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"field.dataType === 'NUMBER' && field.isDisplay\">\n <input type=\"number\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\n <div class=\"error\" *ngIf=\"field.fieldValue && !getFieldValidation(field)\">\n <ng-container *ngIf=\"field.fieldLabel?.toLowerCase().includes('phone number')\">\n Please enter a valid 10-digit Indian mobile number.\n </ng-container>\n <ng-container *ngIf=\"field.fieldLabel?.toLowerCase().includes('email')\">\n Please enter a valid email address.\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"field.dataType === 'MONEY' && field.isDisplay\">\n <input type=\"text\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\n </div>\n <div *ngIf=\"field.dataType === 'DATE' && field.isDisplay\">\n <input type=\"date\" class=\"input-text\" [(ngModel)]=\"field.fieldValue\" [placeholder]=\"'Select '+field.fieldLabel\" [max]=\"getMaxDate(field)\">\n </div>\n <div class=\"input-container\" *ngIf=\"field.dataType === 'TEXT_FILE' && field.isDisplay\">\n <input matInput class=\"input-text-1\" [(ngModel)]=\"field.fieldValue\" style=\"width:90%\">\n <div class=\"image-box-1 d-flex justify-content-center align-items-center\" *ngIf=\"!field.fieldImageUrl\"\n style=\"width:10%\">\n <mat-icon (click)=\"fileInput1.click()\"\n class=\"dummy-image-1 w-100 d-flex justify-content-center\">cloud_upload</mat-icon>\n </div>\n <div class=\"image-box-1 d-flex justify-content-center align-items-center\" *ngIf=\"field.fieldImageUrl\" style=\"width:10%\">\n <!-- If the uploaded file is an image, show the preview -->\n <img\n *ngIf=\"isImage(field.fieldImageUrl)\"\n alt=\"\"\n class=\"w-100 h-100\"\n [src]=\"ds.bypassSecurityTrustUrl(field.fieldImageUrl)\"\n (click)=\"fileInput1.click()\" />\n \n <!-- If the uploaded file is not an image, show a file icon -->\n <mat-icon\n *ngIf=\"!isImage(field.fieldImageUrl)\"\n class=\"w-100 d-flex justify-content-center align-items-center dummy-image-1\"\n (click)=\"fileInput1.click()\">insert_drive_file</mat-icon>\n </div>\n \n <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\"\n accept=\".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/x-png,image/jpeg,image/jpg,.pdf, video/mp4,video/x-matroska,video/x-msvideo,video/quicktime\"\n (change)=\"updateSelectedImage($event,field)\" class=\"pc-btn\" id=\"browse_contact_image\" #fileInput1 />\n </div>\n <div *ngIf=\"field.dataType === 'DROPDOWN' && field.isDisplay\" class=\"admission\">\n <mat-form-field class=\"input-text-1 input_card\" appearance=\"outline\" style=\"width:100%\">\n <mat-select class=\"inputStyle\" placeholder=\"--Select--\" [(ngModel)]=\"field.fieldValue\" [multiple]=\"field.multipleSelection\">\n <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\n <mat-option *ngFor=\"let item of field.value\" [value]=\"item?.value\" (click)=\"masterDropdownValueChange(item, field)\">{{item.label}}</mat-option>\n </ng-container>\n <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\n <mat-option *ngFor=\"let item of field.sourceData[field.dataSourceType]\"\n (click)=\"inputFieldChange(item, field)\" [value]=\"item?.name\">{{item.name}}</mat-option>\n </ng-container>\n </mat-select>\n </mat-form-field>\n </div>\n <div *ngIf=\"field.dataType === 'CHECKBOX' && field.isDisplay\">\n <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\n <div class=\"form-check mb-5\" *ngFor=\"let data of field.value\">\n <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckChecked\" [(ngModel)]=\"data.checked\">\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\n {{data.label}}\n </label>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\n <div class=\"form-check mb-5\" *ngFor=\"let data of field.sourceData[field.dataSourceType]\">\n <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckChecked\" [(ngModel)]=\"data.checked\">\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\n {{data.name}}\n </label>\n </div>\n </ng-container>\n </div>\n <div *ngIf=\"field.dataType === 'RADIOBUTTON' && field.isDisplay\">\n <div style=\"display: flex; gap: 20px; margin-top: 10px; height: 35px;align-items: center;\">\n <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\n <!-- <div class=\" mb-5\" *ngFor=\"let data of field.value\">\n <mat-radio-button [value]=\"data.value\" [(ngModel)]=\"field.fieldValue\">{{data.label}}</mat-radio-button>\n </div> -->\n <mat-radio-group [(ngModel)]=\"field.fieldValue\" (change)=\"radioButtonChanged(field,selectedKey,group)\">\n <mat-radio-button *ngFor=\"let data of field.value\" [value]=\"data.value\">\n {{ data.label }}\n </mat-radio-button>\n </mat-radio-group>\n </ng-container>\n \n <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\n <div class=\"form-check mb-5\" *ngFor=\"let data of field.value\">\n <input class=\"form-check-input\" type=\"radio\" [value]=\"data.name\" [(ngModel)]=\"field.fieldValue\" />\n \n <label class=\"form-check-label\" [for]=\"'radio_' + data.name\">\n {{ data.name }}\n </label>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-template>\n\n\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n</section>\n", styles: [".total_container{height:auto;position:relative}.body-section{padding:4% 15px}.button-section{margin-top:15px}.clipPath{clip-path:polygon(0% 100%,50% 0%,100% 100%);height:100px;background-color:#00f}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-15{margin-top:15px}@media only screen and (max-width: 475px){.d-flex{justify-content:center;margin-bottom:25px}}.main-section{width:100%;overflow-y:hidden}.subTabs_section{padding:1rem 5rem;height:12vh}.active_route_section{height:89%;border:1px solid #0000000F;padding:15px 20px;background-color:#fff;border-radius:6px}.active_route_section_normal{background-color:#f6f6f6;border:none;padding:10px 4rem}.list_tabs{border:1px solid #0000001A;background-color:#ffffffe5;padding:10px;border-radius:6px;gap:10px;height:50px}.single_tab{color:#0e233c99;font-size:14px;font-weight:500;font-family:interReg;padding:10px 20px}.single_tab_active{width:max-content;height:32px;background-color:#0015800a;display:flex;align-items:center;font-weight:600;padding:10px 20px;border-radius:4px;color:#0e233c}.align-items-center{align-items:center}.header{height:8vh;padding:10px;border-bottom:2px solid rgba(0,0,0,.06);display:flex}.p-5{padding:5rem}.backToLeads{color:#000!important}.body{margin:1rem 5rem 0rem;box-shadow:#00000029 0 1px 4px;padding:2rem;border-radius:10px}.profile-img{display:flex;align-items:center;gap:2rem}.mt-2{margin-top:2rem!important}.mt-1{margin-top:1rem!important}.image-box{display:flex;gap:1rem;margin-top:3rem;cursor:pointer}.image-box span{color:#0189ea;font-size:14px;font-weight:500;padding:11px 7rem;border:2px solid rgba(0,0,0,.06);height:47px;border-radius:10px}.image_box{display:flex;align-items:center}.dummy-image{height:55px}.label-text{font-weight:400;font-family:Inter;font-size:14px;color:#434443}.input-text{border-radius:7px;border:2px solid rgba(208,213,221,1);height:42px;width:100%;margin-top:5px;padding-left:10px}.footer{display:flex;gap:1rem;align-items:center;justify-content:flex-end;height:8vh;padding:10px;border-top:2px solid rgba(0,0,0,.06);position:absolute;bottom:0;width:100%}.footer .continue{font-size:13px;font-family:interMedium;color:#242424;font-weight:500;border:none;background-color:#f6c318;padding:10px 20px;border-radius:8px;width:max-content}.footer .cancel{font-size:13px;font-family:interMedium;color:#f6c318;font-weight:500;border:1px solid #F6C318;background-color:#fff;padding:10px 20px;border-radius:8px;width:max-content}.main-content{overflow:scroll;padding-top:5px;padding-bottom:10px}.button-parent{padding:1rem 5rem 1rem 2rem;align-items:center;display:flex;justify-content:flex-end}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.payment-details{margin:1rem 5rem 0rem;box-shadow:#00000029 0 1px 4px;border-radius:10px}.mb-5{margin-bottom:5px!important}.addedImg{display:flex;gap:5%;width:95%;margin-top:2rem}.addedImg .uploadedImg img{height:65px;width:65px;border-radius:50%}.addedImg .image-buttons{display:flex;gap:3%;padding-top:20px}.addedImg .image-buttons .button{display:flex;gap:8px;width:142px;height:40px;padding:12px 8px;font-family:lexandMedium;color:#3f3b3b;font-style:normal;font-weight:500;font-size:12px!important;border:1px dashed #E4E7EC;border-radius:12px;cursor:pointer}.addedImg .image-buttons .button img{width:20px}.addedImg .image-buttons .button .delete{display:flex;gap:15%;width:60%;margin:auto}.addedImg .image-buttons .button .delete img{width:12px}.emptyText{height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:50px}.emptyText img{height:200px}@media screen and (max-width: 475px){.body{margin:0rem}.emptyText{padding:1rem}.emptyText img{width:100%}.subTabs_section{padding:1rem .5rem}.list_tabs{white-space:nowrap;overflow:scroll;justify-content:flex-start}.payment-details{margin:0rem}}.mtb-15{margin-top:15px;margin-bottom:15px}.checkbox-label{display:flex;align-items:center;gap:15px}.checkbox-label input{height:16px;width:16px}.upload-file{display:flex;align-items:center;justify-content:space-between;padding-right:10px}.upload-file mat-icon{color:#4caf50}.upload-file p{margin-bottom:0}@media only screen and (min-width: 320px) and (max-width : 500px){.image-box span{padding:11px 4rem}}mat-form-field{border:1px solid 2px solid rgba(208,213,221,1);border-radius:8px}\n"] }]
|
|
11226
11253
|
}], ctorParameters: () => [{ type: RestService }, { type: i2$2.MatSnackBar }, { type: EventsService }, { type: i2$4.ActivatedRoute }, { type: i1$1.DomSanitizer }, { type: ImageUplaodService }], propDecorators: { data: [{
|
|
11227
11254
|
type: Input
|
|
11228
11255
|
}], index: [{
|
|
@@ -12474,7 +12501,7 @@ class FeaturedProductsComponent extends BaseSection {
|
|
|
12474
12501
|
//directive
|
|
12475
12502
|
SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SimpoWrapComntainer, selector: "[simpoWrapContainer]", inputs: ["simpoWrapContainer"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type:
|
|
12476
12503
|
// MatBottomSheetModule,
|
|
12477
|
-
ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type:
|
|
12504
|
+
ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "component", type: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data", "isScrollable", "isCategoryProductList", "customClass"] }, { kind: "component", type: CardSkeletonLoaderComponent, selector: "simpo-card-skeleton-loader", inputs: ["count", "showTitles"] }, { kind: "component", type: ImageLoadingComponent, selector: "image-loading", inputs: ["hash", "imageUrl", "index", "product", "theme"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }] }); }
|
|
12478
12505
|
}
|
|
12479
12506
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeaturedProductsComponent, decorators: [{
|
|
12480
12507
|
type: Component,
|
|
@@ -13028,7 +13055,7 @@ class ProductDescComponent extends BaseSection {
|
|
|
13028
13055
|
return window.innerWidth <= 475;
|
|
13029
13056
|
}
|
|
13030
13057
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductDescComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: i2$4.Router }, { token: i2$4.ActivatedRoute }, { token: RestService }, { token: CartService }, { token: StorageServiceService }, { token: i5$1.MessageService }, { token: i1$1.Meta }, { token: i1$1.Title }, { token: i8$3.MatBottomSheet }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13031
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "reviewComponent", first: true, predicate: CustomerReviewComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\"\n simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\n\n <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\n <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\n </div>\n <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\n <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\" (click)=\"routeToHome()\">Home</a> /\n <span>{{ responseData?.name | titlecase }}</span>\n </div>\n <div class=\"row h-100\" style=\"margin-top: 25px;\" class=\"above-height\"\n [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile}\">\n <div class=\"col-lg-6 col-12 h-100\" class=\"height\">\n <div class=\"prod-img-block\">\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\n </div>\n </div>\n <div class=\"col-lg-6 col-12 h-100 product-detail\">\n <ng-container *ngIf=\"isMobile\">\n <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\n </ng-container>\n\n <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\n\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\n </ng-container>\n\n <div class=\"product-desc body-large d-block trim-text\" *ngIf=\"responseData?.brief\"\n [innerHTML]=\"responseData.brief\"></div>\n <div class=\"product-sku\">\n <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div>\n <div\n *ngIf=\"responseData?.itemCategorisation?.itemCategories && (responseData?.itemCategorisation?.itemCategories?.length || 0) > 0\">\n Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\n *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\n titlecase}} <ng-container\n *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\n </a></div>\n <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\n *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\n </span></div>\n </div>\n <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\n <!-- <ng-container>\n <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\n </ng-container> -->\n </div>\n </div>\n <div class=\"row prod-desc\" *ngIf=\"responseData?.descriptor?.name\">\n\n <div>\n <p-panel header=\"Description\" [toggleable]=\"true\" [collapsed]=\"true\" [collapsed]=\"true\">\n <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\n [innerHTML]=\"responseData?.descriptor?.name\"></div>\n </p-panel>\n </div>\n\n\n <!-- <div class=\"tab-group\">\n <div class=\"tab\" data-bs-toggle=\"collapse\" href=\"#collapseExample\" >Description</div>\n </div>\n <div style=\"margin-top: 10px;\" class=\"body-large collapse\" id=\"collapseExample\" *ngIf=\"responseData?.descriptor\"\n [innerHTML]=\"responseData?.descriptor?.name\"></div> -->\n </div>\n </section>\n <ng-container *ngIf=\"relatedProductData?.length\">\n <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\n [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\n </ng-container>\n <ng-container *ngIf=\"recentViewItemList?.length\">\n <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\n [isRelatedProduct]=\"true\"></simpo-featured-products>\n </ng-container>\n <!-- <ng-container>\n <simpo-customer-review [data]=\"data\"></simpo-customer-review>\n </ng-container> -->\n\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n </section>\n</ng-container>\n\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '40vh',\n 'border-radius': '10px',\n 'position': 'relative',\n 'right': '5px'\n}\">\n</ngx-skeleton-loader>\n\n\n<div class=\"mobile-footer\">\n <div class=\"icons\">\n <div (click)=\"goToCart()\">\n <mat-icon>shopping_cart</mat-icon>\n </div>\n <div>\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\n *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\n *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n <!-- <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\n *ngIf=\"!isItemAsFavorite\">bookmark</mat-icon>\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\n *ngIf=\"isItemAsFavorite\">bookmark_border</mat-icon> -->\n </div>\n </div>\n <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\n <div class=\"quantity\" *ngIf=\"responseData?.quantity && !isItemOutOfStock\">\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\n <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\n </div>\n <button class=\"add-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [backgroundInfo]=\"styles?.background\"\n [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\"\n *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\n</div>\n\n<ng-template #ReviewSection>\n <div class=\"review-sec\">\n <div class=\"title\">Customer Review</div>\n <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\n <span>Be the first to write a review</span>\n <button class=\"mt-3\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [backgroundInfo]=\"styles?.background\"\n [color]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\"\n (click)=\"showReview = !showReview\">{{ !showReview ? 'Add Review' : 'Cancel Review'}}</button>\n <ng-container *ngIf=\"showReview\">\n <hr />\n <div class=\"user-review\">\n <div class=\"title\">Write a review</div>\n <span class=\"secondary-text\">RATING</span>\n <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\n <div>\n <span class=\"secondary-text\">Review Title</span>\n <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\n </div>\n <div>\n <span class=\"secondary-text\">Review</span>\n <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\n </div>\n <div class=\"review-action-btn\">\n <button [style.borderColor]=\"data?.styles?.background?.accentColor\"\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\n <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [backgroundInfo]=\"styles?.background\"\n [color]=\"data?.styles?.background?.accentColor\" (click)=\"addProductReview()\"\n [disabled]=\"productReview == 0 && reviewTitle?.length == 0 && reviewDescription?.length == 0\">Submit\n review</button>\n </div>\n </div>\n </ng-container>\n </div>\n</ng-template>\n<ng-template #SocialIcons>\n <div class=\"d-flex\">\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\n [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\n <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\n <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\n <div style=\"position: relative;margin-right: 10px;\">\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\"\n [sectionId]=\"data?.id\"></simpo-socia-icons>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #ActionBtn>\n <div class=\"button-parent\">\n <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\n <div class=\"quantity\" *ngIf=\"responseData?.quantity\">\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\n <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\n </div>\n <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">\n <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [backgroundInfo]=\"styles?.background\"\n [color]=\"data?.styles?.background?.accentColor\"\n (click)=\"addToCart()\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\n </div>\n <div class=\"favourite\">\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\n *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\n *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #variants>\n <ng-container *ngFor=\"let varient of varients | keyvalue\">\n <div class=\"mb-15\">\n <div class=\"varient-key\">{{varient.key}}</div>\n <div class=\"d-flex\" style=\"gap: 5px;\">\n\n <!-- [attr.class]=\"!isVarientAvailable(varient) ? 'varient-tag disable-varient' : 'varient-tag'\" -->\n <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\n [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\n [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\n (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue}}</div>\n </div>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #ProductDesc>\n <div class=\"heading-large trim-text\" class=\"product-heading\">{{responseData?.name}}</div>\n <div class=\"d-flex\" style=\"gap: 10px; align-items: center; margin-top: 15px;\">\n <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\n *ngIf=\"responseData?.price?.discountedPrice != responseData?.price?.value\"><span [innerHTML]='currency'></span>\n {{responseData?.price?.value}}</div>\n <div class=\"price\" *ngIf=\"responseData?.price?.discountedPrice\"><span [innerHTML]='currency'></span>\n {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\n <div class=\"tax-text\">(Inclusive all taxes)</div>\n </div>\n\n</ng-template>\n\n<ng-template #ImageSection>\n <ng-container *ngIf=\"!varientLoading\">\n <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\n <ng-container *ngFor=\"let img of itemImages\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\n alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\"\n [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\n </ng-container>\n </div>\n <div class=\"item-img\">\n <ng-container *ngIf=\"currentImg\">\n\n <mat-icon class=\"share-icon\" (click)=\"shareProduct()\">share</mat-icon>\n <ng-container *ngIf=\"!isMobile\">\n <lib-ngx-image-zoom [thumbImage]=\"currentImg\" [fullImage]=\"currentImg\" [zoomMode]=\"'hover'\"\n [magnification]=\"2\" [lensHeight]=\"100\" [lensWidth]=\"100\"\n style=\"height: 100%; width: 100%;\"></lib-ngx-image-zoom>\n </ng-container>\n <ng-container *ngIf=\"isMobile\">\n <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!currentImg\">\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\n </ng-container>\n </div>\n <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\n <ng-container *ngFor=\"let img of itemImages\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\n alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\"\n [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\n </ng-container>\n </div>\n </ng-container>\n <div class=\"item-img\" *ngIf=\"varientLoading\">\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '100%',\n 'border-radius': '10px',\n 'position': 'relative',\n 'right': '5px'\n }\">\n </ngx-skeleton-loader>\n </div>\n</ng-template>\n\n\n\n\n<!-- <div class=\"modal fade\" id=\"itemVarients\" tabindex=\"-1\" aria-labelledby=\"itemVarients\" aria-hidden=\"true\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Right-to-Left Modal</h5>\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\n </div>\n <div class=\"modal-body\">\n This content is aligned from right to left.\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button>\n <button type=\"button\" class=\"btn btn-primary\">Save changes</button>\n </div>\n </div>\n </div>\n</div> -->\n", styles: [".product-desc{display:flex}.share-icon{border:1.5px solid rgba(211,211,211,.382);position:absolute;top:10px;right:10px;z-index:1;opacity:.5;border-radius:50%;padding:5px;height:30px;width:30px;display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:#00000003 0 1px 2px;cursor:pointer}.row{margin-top:25px}.prod-img-block{height:100%;display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px;max-height:460px;overflow:scroll}.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:500px;overflow:hidden}.item-img img{width:100%!important;height:100%!important}.fast-checkout{position:absolute;top:10px;right:10px;display:flex;gap:10px;width:fit-content}.fast-checkout img{cursor:pointer}.selling-fast-tag{background-color:#fff;color:#000;padding:5px 10px;border-radius:3px;font-weight:700}.price{font-weight:600;font-family:Poppins;font-size:20px}.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:50px;width:155px;justify-content:space-between;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}.trim-text{-webkit-line-clamp:3!important}.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;max-width:max-content}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;padding:15px 20px;border-radius:5px;margin-top:15px}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#fff;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:5px 15px;cursor:pointer}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:50px!important;width:130px!important;justify-content:space-between;margin-top:1rem;border-radius:5px}.disable-varient{text-decoration:line-through;cursor:not-allowed}.review-sec{box-shadow:#00000029 0 1px 4px;width:100%;padding:20px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}.review-sec .title{font-size:26px;margin-bottom:10px}.review-sec button{border-radius:20px!important;background-color:transparent;padding:5px 15px;width:fit-content!important;margin:auto}.review-sec hr{border-top:1.5px solid lightgray;width:100%}.review-sec .user-review{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.review-sec .user-review>div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.review-sec .user-review>div input{width:80%;margin:auto;border-radius:20px;padding:10px 10px 10px 20px;border:1.5px solid lightgray}.review-sec .user-review>div textarea{width:80%;border-radius:5px;padding:10px;border:1.5px solid lightgray}.review-sec .user-review .review-action-btn{display:flex;flex-direction:row;gap:10px}.review-sec .user-review .review-action-btn button{width:fit-content!important;font-size:16px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.product-detail{overflow-y:auto}.above-height{height:90vh}.mobile-footer{display:none}@media (min-width: 1024px){.height{width:min-content}.above-height{width:100%;display:flex}.product-detail{padding:2%}.product-heading{font-size:35px}.prod-img-block{height:100%;display:flex;gap:5px}}@media only screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:100000001;background-color:#fff;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;color:#000;align-items:center;justify-content:center;gap:15px;width:20%}.mobile-footer .icons .mat-icon{font-size:26px}.product-desc,.brief-desc{font-size:16px}.total-container{padding-top:10px!important;padding-bottom:10px!important}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;padding:5px;margin-top:0!important}.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important;height:348px}.item-img img{width:100%;height:348px!important}.display-none{display:none}.prod-img-block{flex-direction:column;gap:5px}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{width:25%;border:2px solid lightgray;cursor:pointer}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}.send-btn{padding:.5rem 1rem!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}.review-sec :is(input,textarea){width:100%!important}.height{width:100%}.above-height{padding:0;min-height:95vh!important;height:unset!important}.product-heading{font-size:16px}}.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-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%}.modal-dialog{height:100vh;position:absolute;top:0;margin:0;right:0;border:none}.modal-content{height:100%;border:none;border-radius:0!important}@media (min-width:768px) and (max-width:991px){.item-img{position:relative;width:auto!important;height:auto!important;overflow:hidden}.item-img img{height:auto!important;width:auto!important}.height{width:min-content}.above-height{width:100%;padding:2%;display:flex;flex-direction:column}.product-detail{padding:0vw 42vw 0vw 2vw}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:911px){.product-detail{padding:0% 34% 0% 2%}.above-height{display:flex}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:1024px){.product-detail{padding:0% 0% 0% 2%}.above-height{display:flex}.product-headig{font-size:35px}.prod-img-block{height:100%;display:flex;gap:5px}}.mat-accordion .mat-expansion-panel:last-of-type{box-shadow:none}.mb-15{margin-bottom:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: NgxImageZoomModule }, { kind: "component", type: i14$1.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", "edit", "customClass", "delete", "nextComponentColor"], outputs: ["changeDetailProduct"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i3$1.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i16.SpeedDial, selector: "p-speedDial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i17.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: PanelModule }, { kind: "component", type: i18.Panel, selector: "p-panel", inputs: ["toggleable", "header", "collapsed", "style", "styleClass", "iconPos", "expandIcon", "collapseIcon", "showHeader", "toggler", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }] }); }
|
|
13058
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "reviewComponent", first: true, predicate: CustomerReviewComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\"\n simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\n\n <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\n <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\n </div>\n <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\n <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\" (click)=\"routeToHome()\">Home</a> /\n <span>{{ responseData?.name | titlecase }}</span>\n </div>\n <div class=\"row h-100\" style=\"margin-top: 25px;\" class=\"above-height\"\n [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile}\">\n <div class=\"col-lg-6 col-12 h-100\" class=\"height\">\n <div class=\"prod-img-block\">\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\n </div>\n </div>\n <div class=\"col-lg-6 col-12 h-100 product-detail\">\n <ng-container *ngIf=\"isMobile\">\n <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\n </ng-container>\n\n <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\n\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\n </ng-container>\n\n <div class=\"product-desc body-large d-block trim-text\" *ngIf=\"responseData?.brief\"\n [innerHTML]=\"responseData.brief\"></div>\n <div class=\"product-sku\">\n <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div>\n <div\n *ngIf=\"responseData?.itemCategorisation?.itemCategories && (responseData?.itemCategorisation?.itemCategories?.length || 0) > 0\">\n Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\n *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\n titlecase}} <ng-container\n *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\n </a></div>\n <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\n *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\n </span></div>\n </div>\n <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\n <!-- <ng-container>\n <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\n </ng-container> -->\n </div>\n </div>\n <div class=\"row prod-desc\" *ngIf=\"responseData?.descriptor?.name\">\n\n <div>\n <p-panel header=\"Description\" [toggleable]=\"true\" [collapsed]=\"true\" [collapsed]=\"true\">\n <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\n [innerHTML]=\"responseData?.descriptor?.name\"></div>\n </p-panel>\n </div>\n\n\n <!-- <div class=\"tab-group\">\n <div class=\"tab\" data-bs-toggle=\"collapse\" href=\"#collapseExample\" >Description</div>\n </div>\n <div style=\"margin-top: 10px;\" class=\"body-large collapse\" id=\"collapseExample\" *ngIf=\"responseData?.descriptor\"\n [innerHTML]=\"responseData?.descriptor?.name\"></div> -->\n </div>\n </section>\n <ng-container *ngIf=\"relatedProductData?.length\">\n <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\n [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\n </ng-container>\n <ng-container *ngIf=\"recentViewItemList?.length\">\n <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\n [isRelatedProduct]=\"true\"></simpo-featured-products>\n </ng-container>\n <!-- <ng-container>\n <simpo-customer-review [data]=\"data\"></simpo-customer-review>\n </ng-container> -->\n\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n </section>\n</ng-container>\n\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '40vh',\n 'border-radius': '10px',\n 'position': 'relative',\n 'right': '5px'\n}\">\n</ngx-skeleton-loader>\n\n\n<div class=\"mobile-footer\">\n <div class=\"icons\">\n <div (click)=\"goToCart()\">\n <mat-icon>shopping_cart</mat-icon>\n </div>\n <div>\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\n *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\n *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n <!-- <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\n *ngIf=\"!isItemAsFavorite\">bookmark</mat-icon>\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\n *ngIf=\"isItemAsFavorite\">bookmark_border</mat-icon> -->\n </div>\n </div>\n <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\n <div class=\"quantity\" *ngIf=\"responseData?.quantity && !isItemOutOfStock\">\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\n <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\n </div>\n <button class=\"add-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [backgroundInfo]=\"styles?.background\"\n [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\"\n *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\n</div>\n\n<ng-template #ReviewSection>\n <div class=\"review-sec\">\n <div class=\"title\">Customer Review</div>\n <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\n <span>Be the first to write a review</span>\n <button class=\"mt-3\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [backgroundInfo]=\"styles?.background\"\n [color]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\"\n (click)=\"showReview = !showReview\">{{ !showReview ? 'Add Review' : 'Cancel Review'}}</button>\n <ng-container *ngIf=\"showReview\">\n <hr />\n <div class=\"user-review\">\n <div class=\"title\">Write a review</div>\n <span class=\"secondary-text\">RATING</span>\n <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\n <div>\n <span class=\"secondary-text\">Review Title</span>\n <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\n </div>\n <div>\n <span class=\"secondary-text\">Review</span>\n <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\n </div>\n <div class=\"review-action-btn\">\n <button [style.borderColor]=\"data?.styles?.background?.accentColor\"\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\n <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [backgroundInfo]=\"styles?.background\"\n [color]=\"data?.styles?.background?.accentColor\" (click)=\"addProductReview()\"\n [disabled]=\"productReview == 0 && reviewTitle?.length == 0 && reviewDescription?.length == 0\">Submit\n review</button>\n </div>\n </div>\n </ng-container>\n </div>\n</ng-template>\n<ng-template #SocialIcons>\n <div class=\"d-flex\">\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\n [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\n <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\n <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\n <div style=\"position: relative;margin-right: 10px;\">\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\"\n [sectionId]=\"data?.id\"></simpo-socia-icons>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #ActionBtn>\n <div class=\"button-parent\">\n <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\n <div class=\"quantity\" *ngIf=\"responseData?.quantity\">\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\n <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\n </div>\n <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">\n <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [backgroundInfo]=\"styles?.background\"\n [color]=\"data?.styles?.background?.accentColor\"\n (click)=\"addToCart()\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\n </div>\n <div class=\"favourite\">\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\n *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\n *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #variants>\n <ng-container *ngFor=\"let varient of varients | keyvalue\">\n <div class=\"mb-15\">\n <div class=\"varient-key\">{{varient.key}}</div>\n <div class=\"d-flex\" style=\"gap: 5px;\">\n\n <!-- [attr.class]=\"!isVarientAvailable(varient) ? 'varient-tag disable-varient' : 'varient-tag'\" -->\n <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\n [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\n [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\n (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue}}</div>\n </div>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #ProductDesc>\n <div class=\"heading-large trim-text\" class=\"product-heading\">{{responseData?.name}}</div>\n <div class=\"d-flex\" style=\"gap: 10px; align-items: center; margin-top: 15px;\">\n <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\n *ngIf=\"responseData?.price?.discountedPrice != responseData?.price?.value\"><span [innerHTML]='currency'></span>\n {{responseData?.price?.value}}</div>\n <div class=\"price\" *ngIf=\"responseData?.price?.discountedPrice\"><span [innerHTML]='currency'></span>\n {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\n <div class=\"tax-text\">(Inclusive all taxes)</div>\n </div>\n\n</ng-template>\n\n<ng-template #ImageSection>\n <ng-container *ngIf=\"!varientLoading\">\n <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\n <ng-container *ngFor=\"let img of itemImages\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\n alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\"\n [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\n </ng-container>\n </div>\n <div class=\"item-img\">\n <ng-container *ngIf=\"currentImg\">\n\n <mat-icon class=\"share-icon\" (click)=\"shareProduct()\">share</mat-icon>\n <ng-container *ngIf=\"!isMobile\">\n <img [src]=\"currentImg\" class=\"img\"\n style=\"height: 100%; width: 100%;\">\n </ng-container>\n <ng-container *ngIf=\"isMobile\">\n <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!currentImg\">\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\n </ng-container>\n </div>\n <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\n <ng-container *ngFor=\"let img of itemImages\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\n alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\"\n [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\n </ng-container>\n </div>\n </ng-container>\n <div class=\"item-img\" *ngIf=\"varientLoading\">\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '100%',\n 'border-radius': '10px',\n 'position': 'relative',\n 'right': '5px'\n }\">\n </ngx-skeleton-loader>\n </div>\n</ng-template>\n\n\n\n\n<!-- <div class=\"modal fade\" id=\"itemVarients\" tabindex=\"-1\" aria-labelledby=\"itemVarients\" aria-hidden=\"true\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Right-to-Left Modal</h5>\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\n </div>\n <div class=\"modal-body\">\n This content is aligned from right to left.\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button>\n <button type=\"button\" class=\"btn btn-primary\">Save changes</button>\n </div>\n </div>\n </div>\n</div> -->\n", styles: [".product-desc{display:flex}.share-icon{border:1.5px solid rgba(211,211,211,.382);position:absolute;top:10px;right:10px;z-index:1;opacity:.5;border-radius:50%;padding:5px;height:30px;width:30px;display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:#00000003 0 1px 2px;cursor:pointer}.row{margin-top:25px}.prod-img-block{height:100%;display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px;max-height:460px;overflow:scroll}.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:500px;overflow:hidden}.item-img img{width:100%!important;height:100%!important}.fast-checkout{position:absolute;top:10px;right:10px;display:flex;gap:10px;width:fit-content}.fast-checkout img{cursor:pointer}.selling-fast-tag{background-color:#fff;color:#000;padding:5px 10px;border-radius:3px;font-weight:700}.price{font-weight:600;font-family:Poppins;font-size:20px}.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:50px;width:155px;justify-content:space-between;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}.trim-text{-webkit-line-clamp:3!important}.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;max-width:max-content}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;padding:15px 20px;border-radius:5px;margin-top:15px}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#fff;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:5px 15px;cursor:pointer}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:50px!important;width:130px!important;justify-content:space-between;margin-top:1rem;border-radius:5px}.disable-varient{text-decoration:line-through;cursor:not-allowed}.review-sec{box-shadow:#00000029 0 1px 4px;width:100%;padding:20px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}.review-sec .title{font-size:26px;margin-bottom:10px}.review-sec button{border-radius:20px!important;background-color:transparent;padding:5px 15px;width:fit-content!important;margin:auto}.review-sec hr{border-top:1.5px solid lightgray;width:100%}.review-sec .user-review{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.review-sec .user-review>div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.review-sec .user-review>div input{width:80%;margin:auto;border-radius:20px;padding:10px 10px 10px 20px;border:1.5px solid lightgray}.review-sec .user-review>div textarea{width:80%;border-radius:5px;padding:10px;border:1.5px solid lightgray}.review-sec .user-review .review-action-btn{display:flex;flex-direction:row;gap:10px}.review-sec .user-review .review-action-btn button{width:fit-content!important;font-size:16px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.product-detail{overflow-y:auto}.above-height{height:90vh}.mobile-footer{display:none}@media (min-width: 1024px){.height{width:min-content}.above-height{width:100%;display:flex}.product-detail{padding:2%}.product-heading{font-size:35px}.prod-img-block{height:100%;display:flex;gap:5px}}@media only screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:100000001;background-color:#fff;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;color:#000;align-items:center;justify-content:center;gap:15px;width:20%}.mobile-footer .icons .mat-icon{font-size:26px}.product-desc,.brief-desc{font-size:16px}.total-container{padding-top:10px!important;padding-bottom:10px!important}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;padding:5px;margin-top:0!important}.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important;height:348px}.item-img img{width:100%;height:348px!important}.display-none{display:none}.prod-img-block{flex-direction:column;gap:5px}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{width:25%;border:2px solid lightgray;cursor:pointer}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}.send-btn{padding:.5rem 1rem!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}.review-sec :is(input,textarea){width:100%!important}.height{width:100%}.above-height{padding:0;min-height:95vh!important;height:unset!important}.product-heading{font-size:16px}}.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-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%}.modal-dialog{height:100vh;position:absolute;top:0;margin:0;right:0;border:none}.modal-content{height:100%;border:none;border-radius:0!important}@media (min-width:768px) and (max-width:991px){.item-img{position:relative;width:auto!important;height:auto!important;overflow:hidden}.item-img img{height:auto!important;width:auto!important}.height{width:min-content}.above-height{width:100%;padding:2%;display:flex;flex-direction:column}.product-detail{padding:0vw 42vw 0vw 2vw}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:911px){.product-detail{padding:0% 34% 0% 2%}.above-height{display:flex}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:1024px){.product-detail{padding:0% 0% 0% 2%}.above-height{display:flex}.product-headig{font-size:35px}.prod-img-block{height:100%;display:flex;gap:5px}}.mat-accordion .mat-expansion-panel:last-of-type{box-shadow:none}.mb-15{margin-bottom:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: NgxImageZoomModule }, { kind: "component", type: FeaturedProductsComponent, selector: "simpo-featured-products", inputs: ["data", "responseData", "index", "isRelatedProduct", "edit", "customClass", "delete", "nextComponentColor"], outputs: ["changeDetailProduct"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i3$1.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i15.SpeedDial, selector: "p-speedDial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: PanelModule }, { kind: "component", type: i17.Panel, selector: "p-panel", inputs: ["toggleable", "header", "collapsed", "style", "styleClass", "iconPos", "expandIcon", "collapseIcon", "showHeader", "toggler", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }] }); }
|
|
13032
13059
|
}
|
|
13033
13060
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductDescComponent, decorators: [{
|
|
13034
13061
|
type: Component,
|
|
@@ -13055,7 +13082,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
13055
13082
|
CustomerReviewComponent,
|
|
13056
13083
|
PanelModule,
|
|
13057
13084
|
SvgDividerComponent
|
|
13058
|
-
], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\"\n simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\n\n <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\n <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\n </div>\n <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\n <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\" (click)=\"routeToHome()\">Home</a> /\n <span>{{ responseData?.name | titlecase }}</span>\n </div>\n <div class=\"row h-100\" style=\"margin-top: 25px;\" class=\"above-height\"\n [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile}\">\n <div class=\"col-lg-6 col-12 h-100\" class=\"height\">\n <div class=\"prod-img-block\">\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\n </div>\n </div>\n <div class=\"col-lg-6 col-12 h-100 product-detail\">\n <ng-container *ngIf=\"isMobile\">\n <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\n </ng-container>\n\n <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\n\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\n </ng-container>\n\n <div class=\"product-desc body-large d-block trim-text\" *ngIf=\"responseData?.brief\"\n [innerHTML]=\"responseData.brief\"></div>\n <div class=\"product-sku\">\n <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div>\n <div\n *ngIf=\"responseData?.itemCategorisation?.itemCategories && (responseData?.itemCategorisation?.itemCategories?.length || 0) > 0\">\n Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\n *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\n titlecase}} <ng-container\n *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\n </a></div>\n <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\n *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\n </span></div>\n </div>\n <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\n <!-- <ng-container>\n <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\n </ng-container> -->\n </div>\n </div>\n <div class=\"row prod-desc\" *ngIf=\"responseData?.descriptor?.name\">\n\n <div>\n <p-panel header=\"Description\" [toggleable]=\"true\" [collapsed]=\"true\" [collapsed]=\"true\">\n <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\n [innerHTML]=\"responseData?.descriptor?.name\"></div>\n </p-panel>\n </div>\n\n\n <!-- <div class=\"tab-group\">\n <div class=\"tab\" data-bs-toggle=\"collapse\" href=\"#collapseExample\" >Description</div>\n </div>\n <div style=\"margin-top: 10px;\" class=\"body-large collapse\" id=\"collapseExample\" *ngIf=\"responseData?.descriptor\"\n [innerHTML]=\"responseData?.descriptor?.name\"></div> -->\n </div>\n </section>\n <ng-container *ngIf=\"relatedProductData?.length\">\n <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\n [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\n </ng-container>\n <ng-container *ngIf=\"recentViewItemList?.length\">\n <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\n [isRelatedProduct]=\"true\"></simpo-featured-products>\n </ng-container>\n <!-- <ng-container>\n <simpo-customer-review [data]=\"data\"></simpo-customer-review>\n </ng-container> -->\n\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n </section>\n</ng-container>\n\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '40vh',\n 'border-radius': '10px',\n 'position': 'relative',\n 'right': '5px'\n}\">\n</ngx-skeleton-loader>\n\n\n<div class=\"mobile-footer\">\n <div class=\"icons\">\n <div (click)=\"goToCart()\">\n <mat-icon>shopping_cart</mat-icon>\n </div>\n <div>\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\n *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\n *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n <!-- <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\n *ngIf=\"!isItemAsFavorite\">bookmark</mat-icon>\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\n *ngIf=\"isItemAsFavorite\">bookmark_border</mat-icon> -->\n </div>\n </div>\n <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\n <div class=\"quantity\" *ngIf=\"responseData?.quantity && !isItemOutOfStock\">\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\n <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\n </div>\n <button class=\"add-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [backgroundInfo]=\"styles?.background\"\n [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\"\n *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\n</div>\n\n<ng-template #ReviewSection>\n <div class=\"review-sec\">\n <div class=\"title\">Customer Review</div>\n <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\n <span>Be the first to write a review</span>\n <button class=\"mt-3\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [backgroundInfo]=\"styles?.background\"\n [color]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\"\n (click)=\"showReview = !showReview\">{{ !showReview ? 'Add Review' : 'Cancel Review'}}</button>\n <ng-container *ngIf=\"showReview\">\n <hr />\n <div class=\"user-review\">\n <div class=\"title\">Write a review</div>\n <span class=\"secondary-text\">RATING</span>\n <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\n <div>\n <span class=\"secondary-text\">Review Title</span>\n <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\n </div>\n <div>\n <span class=\"secondary-text\">Review</span>\n <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\n </div>\n <div class=\"review-action-btn\">\n <button [style.borderColor]=\"data?.styles?.background?.accentColor\"\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\n <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [backgroundInfo]=\"styles?.background\"\n [color]=\"data?.styles?.background?.accentColor\" (click)=\"addProductReview()\"\n [disabled]=\"productReview == 0 && reviewTitle?.length == 0 && reviewDescription?.length == 0\">Submit\n review</button>\n </div>\n </div>\n </ng-container>\n </div>\n</ng-template>\n<ng-template #SocialIcons>\n <div class=\"d-flex\">\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\n [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\n <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\n <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\n <div style=\"position: relative;margin-right: 10px;\">\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\"\n [sectionId]=\"data?.id\"></simpo-socia-icons>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #ActionBtn>\n <div class=\"button-parent\">\n <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\n <div class=\"quantity\" *ngIf=\"responseData?.quantity\">\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\n <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\n </div>\n <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">\n <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [backgroundInfo]=\"styles?.background\"\n [color]=\"data?.styles?.background?.accentColor\"\n (click)=\"addToCart()\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\n </div>\n <div class=\"favourite\">\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\n *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\n *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #variants>\n <ng-container *ngFor=\"let varient of varients | keyvalue\">\n <div class=\"mb-15\">\n <div class=\"varient-key\">{{varient.key}}</div>\n <div class=\"d-flex\" style=\"gap: 5px;\">\n\n <!-- [attr.class]=\"!isVarientAvailable(varient) ? 'varient-tag disable-varient' : 'varient-tag'\" -->\n <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\n [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\n [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\n (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue}}</div>\n </div>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #ProductDesc>\n <div class=\"heading-large trim-text\" class=\"product-heading\">{{responseData?.name}}</div>\n <div class=\"d-flex\" style=\"gap: 10px; align-items: center; margin-top: 15px;\">\n <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\n *ngIf=\"responseData?.price?.discountedPrice != responseData?.price?.value\"><span [innerHTML]='currency'></span>\n {{responseData?.price?.value}}</div>\n <div class=\"price\" *ngIf=\"responseData?.price?.discountedPrice\"><span [innerHTML]='currency'></span>\n {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\n <div class=\"tax-text\">(Inclusive all taxes)</div>\n </div>\n\n</ng-template>\n\n<ng-template #ImageSection>\n <ng-container *ngIf=\"!varientLoading\">\n <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\n <ng-container *ngFor=\"let img of itemImages\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\n alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\"\n [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\n </ng-container>\n </div>\n <div class=\"item-img\">\n <ng-container *ngIf=\"currentImg\">\n\n <mat-icon class=\"share-icon\" (click)=\"shareProduct()\">share</mat-icon>\n <ng-container *ngIf=\"!isMobile\">\n <lib-ngx-image-zoom [thumbImage]=\"currentImg\" [fullImage]=\"currentImg\" [zoomMode]=\"'hover'\"\n [magnification]=\"2\" [lensHeight]=\"100\" [lensWidth]=\"100\"\n style=\"height: 100%; width: 100%;\"></lib-ngx-image-zoom>\n </ng-container>\n <ng-container *ngIf=\"isMobile\">\n <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!currentImg\">\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\n </ng-container>\n </div>\n <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\n <ng-container *ngFor=\"let img of itemImages\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\n alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\"\n [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\n </ng-container>\n </div>\n </ng-container>\n <div class=\"item-img\" *ngIf=\"varientLoading\">\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '100%',\n 'border-radius': '10px',\n 'position': 'relative',\n 'right': '5px'\n }\">\n </ngx-skeleton-loader>\n </div>\n</ng-template>\n\n\n\n\n<!-- <div class=\"modal fade\" id=\"itemVarients\" tabindex=\"-1\" aria-labelledby=\"itemVarients\" aria-hidden=\"true\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Right-to-Left Modal</h5>\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\n </div>\n <div class=\"modal-body\">\n This content is aligned from right to left.\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button>\n <button type=\"button\" class=\"btn btn-primary\">Save changes</button>\n </div>\n </div>\n </div>\n</div> -->\n", styles: [".product-desc{display:flex}.share-icon{border:1.5px solid rgba(211,211,211,.382);position:absolute;top:10px;right:10px;z-index:1;opacity:.5;border-radius:50%;padding:5px;height:30px;width:30px;display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:#00000003 0 1px 2px;cursor:pointer}.row{margin-top:25px}.prod-img-block{height:100%;display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px;max-height:460px;overflow:scroll}.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:500px;overflow:hidden}.item-img img{width:100%!important;height:100%!important}.fast-checkout{position:absolute;top:10px;right:10px;display:flex;gap:10px;width:fit-content}.fast-checkout img{cursor:pointer}.selling-fast-tag{background-color:#fff;color:#000;padding:5px 10px;border-radius:3px;font-weight:700}.price{font-weight:600;font-family:Poppins;font-size:20px}.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:50px;width:155px;justify-content:space-between;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}.trim-text{-webkit-line-clamp:3!important}.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;max-width:max-content}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;padding:15px 20px;border-radius:5px;margin-top:15px}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#fff;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:5px 15px;cursor:pointer}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:50px!important;width:130px!important;justify-content:space-between;margin-top:1rem;border-radius:5px}.disable-varient{text-decoration:line-through;cursor:not-allowed}.review-sec{box-shadow:#00000029 0 1px 4px;width:100%;padding:20px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}.review-sec .title{font-size:26px;margin-bottom:10px}.review-sec button{border-radius:20px!important;background-color:transparent;padding:5px 15px;width:fit-content!important;margin:auto}.review-sec hr{border-top:1.5px solid lightgray;width:100%}.review-sec .user-review{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.review-sec .user-review>div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.review-sec .user-review>div input{width:80%;margin:auto;border-radius:20px;padding:10px 10px 10px 20px;border:1.5px solid lightgray}.review-sec .user-review>div textarea{width:80%;border-radius:5px;padding:10px;border:1.5px solid lightgray}.review-sec .user-review .review-action-btn{display:flex;flex-direction:row;gap:10px}.review-sec .user-review .review-action-btn button{width:fit-content!important;font-size:16px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.product-detail{overflow-y:auto}.above-height{height:90vh}.mobile-footer{display:none}@media (min-width: 1024px){.height{width:min-content}.above-height{width:100%;display:flex}.product-detail{padding:2%}.product-heading{font-size:35px}.prod-img-block{height:100%;display:flex;gap:5px}}@media only screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:100000001;background-color:#fff;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;color:#000;align-items:center;justify-content:center;gap:15px;width:20%}.mobile-footer .icons .mat-icon{font-size:26px}.product-desc,.brief-desc{font-size:16px}.total-container{padding-top:10px!important;padding-bottom:10px!important}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;padding:5px;margin-top:0!important}.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important;height:348px}.item-img img{width:100%;height:348px!important}.display-none{display:none}.prod-img-block{flex-direction:column;gap:5px}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{width:25%;border:2px solid lightgray;cursor:pointer}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}.send-btn{padding:.5rem 1rem!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}.review-sec :is(input,textarea){width:100%!important}.height{width:100%}.above-height{padding:0;min-height:95vh!important;height:unset!important}.product-heading{font-size:16px}}.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-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%}.modal-dialog{height:100vh;position:absolute;top:0;margin:0;right:0;border:none}.modal-content{height:100%;border:none;border-radius:0!important}@media (min-width:768px) and (max-width:991px){.item-img{position:relative;width:auto!important;height:auto!important;overflow:hidden}.item-img img{height:auto!important;width:auto!important}.height{width:min-content}.above-height{width:100%;padding:2%;display:flex;flex-direction:column}.product-detail{padding:0vw 42vw 0vw 2vw}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:911px){.product-detail{padding:0% 34% 0% 2%}.above-height{display:flex}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:1024px){.product-detail{padding:0% 0% 0% 2%}.above-height{display:flex}.product-headig{font-size:35px}.prod-img-block{height:100%;display:flex;gap:5px}}.mat-accordion .mat-expansion-panel:last-of-type{box-shadow:none}.mb-15{margin-bottom:15px}\n"] }]
|
|
13085
|
+
], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\"\n simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\n\n <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\n <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\n </div>\n <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\n <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\" (click)=\"routeToHome()\">Home</a> /\n <span>{{ responseData?.name | titlecase }}</span>\n </div>\n <div class=\"row h-100\" style=\"margin-top: 25px;\" class=\"above-height\"\n [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile}\">\n <div class=\"col-lg-6 col-12 h-100\" class=\"height\">\n <div class=\"prod-img-block\">\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\n </div>\n </div>\n <div class=\"col-lg-6 col-12 h-100 product-detail\">\n <ng-container *ngIf=\"isMobile\">\n <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\n </ng-container>\n\n <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\n\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\n </ng-container>\n\n <div class=\"product-desc body-large d-block trim-text\" *ngIf=\"responseData?.brief\"\n [innerHTML]=\"responseData.brief\"></div>\n <div class=\"product-sku\">\n <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div>\n <div\n *ngIf=\"responseData?.itemCategorisation?.itemCategories && (responseData?.itemCategorisation?.itemCategories?.length || 0) > 0\">\n Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\n *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\n titlecase}} <ng-container\n *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\n </a></div>\n <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\n *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\n </span></div>\n </div>\n <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\n <!-- <ng-container>\n <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\n </ng-container> -->\n </div>\n </div>\n <div class=\"row prod-desc\" *ngIf=\"responseData?.descriptor?.name\">\n\n <div>\n <p-panel header=\"Description\" [toggleable]=\"true\" [collapsed]=\"true\" [collapsed]=\"true\">\n <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\n [innerHTML]=\"responseData?.descriptor?.name\"></div>\n </p-panel>\n </div>\n\n\n <!-- <div class=\"tab-group\">\n <div class=\"tab\" data-bs-toggle=\"collapse\" href=\"#collapseExample\" >Description</div>\n </div>\n <div style=\"margin-top: 10px;\" class=\"body-large collapse\" id=\"collapseExample\" *ngIf=\"responseData?.descriptor\"\n [innerHTML]=\"responseData?.descriptor?.name\"></div> -->\n </div>\n </section>\n <ng-container *ngIf=\"relatedProductData?.length\">\n <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\n [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\n </ng-container>\n <ng-container *ngIf=\"recentViewItemList?.length\">\n <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\n [isRelatedProduct]=\"true\"></simpo-featured-products>\n </ng-container>\n <!-- <ng-container>\n <simpo-customer-review [data]=\"data\"></simpo-customer-review>\n </ng-container> -->\n\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n </section>\n</ng-container>\n\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '40vh',\n 'border-radius': '10px',\n 'position': 'relative',\n 'right': '5px'\n}\">\n</ngx-skeleton-loader>\n\n\n<div class=\"mobile-footer\">\n <div class=\"icons\">\n <div (click)=\"goToCart()\">\n <mat-icon>shopping_cart</mat-icon>\n </div>\n <div>\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\n *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\n *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n <!-- <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\n *ngIf=\"!isItemAsFavorite\">bookmark</mat-icon>\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\n *ngIf=\"isItemAsFavorite\">bookmark_border</mat-icon> -->\n </div>\n </div>\n <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\n <div class=\"quantity\" *ngIf=\"responseData?.quantity && !isItemOutOfStock\">\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\n <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\n </div>\n <button class=\"add-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [backgroundInfo]=\"styles?.background\"\n [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\"\n *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\n</div>\n\n<ng-template #ReviewSection>\n <div class=\"review-sec\">\n <div class=\"title\">Customer Review</div>\n <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\n <span>Be the first to write a review</span>\n <button class=\"mt-3\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [backgroundInfo]=\"styles?.background\"\n [color]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\"\n (click)=\"showReview = !showReview\">{{ !showReview ? 'Add Review' : 'Cancel Review'}}</button>\n <ng-container *ngIf=\"showReview\">\n <hr />\n <div class=\"user-review\">\n <div class=\"title\">Write a review</div>\n <span class=\"secondary-text\">RATING</span>\n <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\n <div>\n <span class=\"secondary-text\">Review Title</span>\n <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\n </div>\n <div>\n <span class=\"secondary-text\">Review</span>\n <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\n </div>\n <div class=\"review-action-btn\">\n <button [style.borderColor]=\"data?.styles?.background?.accentColor\"\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\n <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [backgroundInfo]=\"styles?.background\"\n [color]=\"data?.styles?.background?.accentColor\" (click)=\"addProductReview()\"\n [disabled]=\"productReview == 0 && reviewTitle?.length == 0 && reviewDescription?.length == 0\">Submit\n review</button>\n </div>\n </div>\n </ng-container>\n </div>\n</ng-template>\n<ng-template #SocialIcons>\n <div class=\"d-flex\">\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\n [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\n <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\n <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\n <div style=\"position: relative;margin-right: 10px;\">\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\"\n [sectionId]=\"data?.id\"></simpo-socia-icons>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #ActionBtn>\n <div class=\"button-parent\">\n <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\n <div class=\"quantity\" *ngIf=\"responseData?.quantity\">\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\n <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\n </div>\n <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">\n <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [backgroundInfo]=\"styles?.background\"\n [color]=\"data?.styles?.background?.accentColor\"\n (click)=\"addToCart()\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\n </div>\n <div class=\"favourite\">\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\n *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\n *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #variants>\n <ng-container *ngFor=\"let varient of varients | keyvalue\">\n <div class=\"mb-15\">\n <div class=\"varient-key\">{{varient.key}}</div>\n <div class=\"d-flex\" style=\"gap: 5px;\">\n\n <!-- [attr.class]=\"!isVarientAvailable(varient) ? 'varient-tag disable-varient' : 'varient-tag'\" -->\n <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\n [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\n [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\n (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue}}</div>\n </div>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #ProductDesc>\n <div class=\"heading-large trim-text\" class=\"product-heading\">{{responseData?.name}}</div>\n <div class=\"d-flex\" style=\"gap: 10px; align-items: center; margin-top: 15px;\">\n <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\n *ngIf=\"responseData?.price?.discountedPrice != responseData?.price?.value\"><span [innerHTML]='currency'></span>\n {{responseData?.price?.value}}</div>\n <div class=\"price\" *ngIf=\"responseData?.price?.discountedPrice\"><span [innerHTML]='currency'></span>\n {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\n <div class=\"tax-text\">(Inclusive all taxes)</div>\n </div>\n\n</ng-template>\n\n<ng-template #ImageSection>\n <ng-container *ngIf=\"!varientLoading\">\n <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\n <ng-container *ngFor=\"let img of itemImages\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\n alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\"\n [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\n </ng-container>\n </div>\n <div class=\"item-img\">\n <ng-container *ngIf=\"currentImg\">\n\n <mat-icon class=\"share-icon\" (click)=\"shareProduct()\">share</mat-icon>\n <ng-container *ngIf=\"!isMobile\">\n <img [src]=\"currentImg\" class=\"img\"\n style=\"height: 100%; width: 100%;\">\n </ng-container>\n <ng-container *ngIf=\"isMobile\">\n <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!currentImg\">\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\n </ng-container>\n </div>\n <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\n <ng-container *ngFor=\"let img of itemImages\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\n alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\"\n [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\n </ng-container>\n </div>\n </ng-container>\n <div class=\"item-img\" *ngIf=\"varientLoading\">\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '100%',\n 'border-radius': '10px',\n 'position': 'relative',\n 'right': '5px'\n }\">\n </ngx-skeleton-loader>\n </div>\n</ng-template>\n\n\n\n\n<!-- <div class=\"modal fade\" id=\"itemVarients\" tabindex=\"-1\" aria-labelledby=\"itemVarients\" aria-hidden=\"true\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Right-to-Left Modal</h5>\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\n </div>\n <div class=\"modal-body\">\n This content is aligned from right to left.\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button>\n <button type=\"button\" class=\"btn btn-primary\">Save changes</button>\n </div>\n </div>\n </div>\n</div> -->\n", styles: [".product-desc{display:flex}.share-icon{border:1.5px solid rgba(211,211,211,.382);position:absolute;top:10px;right:10px;z-index:1;opacity:.5;border-radius:50%;padding:5px;height:30px;width:30px;display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:#00000003 0 1px 2px;cursor:pointer}.row{margin-top:25px}.prod-img-block{height:100%;display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px;max-height:460px;overflow:scroll}.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:500px;overflow:hidden}.item-img img{width:100%!important;height:100%!important}.fast-checkout{position:absolute;top:10px;right:10px;display:flex;gap:10px;width:fit-content}.fast-checkout img{cursor:pointer}.selling-fast-tag{background-color:#fff;color:#000;padding:5px 10px;border-radius:3px;font-weight:700}.price{font-weight:600;font-family:Poppins;font-size:20px}.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:50px;width:155px;justify-content:space-between;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}.trim-text{-webkit-line-clamp:3!important}.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;max-width:max-content}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;padding:15px 20px;border-radius:5px;margin-top:15px}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#fff;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:5px 15px;cursor:pointer}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:50px!important;width:130px!important;justify-content:space-between;margin-top:1rem;border-radius:5px}.disable-varient{text-decoration:line-through;cursor:not-allowed}.review-sec{box-shadow:#00000029 0 1px 4px;width:100%;padding:20px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}.review-sec .title{font-size:26px;margin-bottom:10px}.review-sec button{border-radius:20px!important;background-color:transparent;padding:5px 15px;width:fit-content!important;margin:auto}.review-sec hr{border-top:1.5px solid lightgray;width:100%}.review-sec .user-review{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.review-sec .user-review>div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.review-sec .user-review>div input{width:80%;margin:auto;border-radius:20px;padding:10px 10px 10px 20px;border:1.5px solid lightgray}.review-sec .user-review>div textarea{width:80%;border-radius:5px;padding:10px;border:1.5px solid lightgray}.review-sec .user-review .review-action-btn{display:flex;flex-direction:row;gap:10px}.review-sec .user-review .review-action-btn button{width:fit-content!important;font-size:16px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.product-detail{overflow-y:auto}.above-height{height:90vh}.mobile-footer{display:none}@media (min-width: 1024px){.height{width:min-content}.above-height{width:100%;display:flex}.product-detail{padding:2%}.product-heading{font-size:35px}.prod-img-block{height:100%;display:flex;gap:5px}}@media only screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:100000001;background-color:#fff;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;color:#000;align-items:center;justify-content:center;gap:15px;width:20%}.mobile-footer .icons .mat-icon{font-size:26px}.product-desc,.brief-desc{font-size:16px}.total-container{padding-top:10px!important;padding-bottom:10px!important}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;padding:5px;margin-top:0!important}.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important;height:348px}.item-img img{width:100%;height:348px!important}.display-none{display:none}.prod-img-block{flex-direction:column;gap:5px}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{width:25%;border:2px solid lightgray;cursor:pointer}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}.send-btn{padding:.5rem 1rem!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}.review-sec :is(input,textarea){width:100%!important}.height{width:100%}.above-height{padding:0;min-height:95vh!important;height:unset!important}.product-heading{font-size:16px}}.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-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%}.modal-dialog{height:100vh;position:absolute;top:0;margin:0;right:0;border:none}.modal-content{height:100%;border:none;border-radius:0!important}@media (min-width:768px) and (max-width:991px){.item-img{position:relative;width:auto!important;height:auto!important;overflow:hidden}.item-img img{height:auto!important;width:auto!important}.height{width:min-content}.above-height{width:100%;padding:2%;display:flex;flex-direction:column}.product-detail{padding:0vw 42vw 0vw 2vw}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:911px){.product-detail{padding:0% 34% 0% 2%}.above-height{display:flex}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:1024px){.product-detail{padding:0% 0% 0% 2%}.above-height{display:flex}.product-headig{font-size:35px}.prod-img-block{height:100%;display:flex;gap:5px}}.mat-accordion .mat-expansion-panel:last-of-type{box-shadow:none}.mb-15{margin-bottom:15px}\n"] }]
|
|
13059
13086
|
}], ctorParameters: () => [{ type: Object, decorators: [{
|
|
13060
13087
|
type: Inject,
|
|
13061
13088
|
args: [PLATFORM_ID]
|
|
@@ -13512,9 +13539,9 @@ class ProductListComponent extends BaseSection {
|
|
|
13512
13539
|
return Math.min(this.totalCount, (((this.pageNo - 1) * this.size + 1) + this.size));
|
|
13513
13540
|
}
|
|
13514
13541
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductListComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$4.Router }, { token: i2$4.ActivatedRoute }, { token: StorageServiceService }, { token: i8$3.MatBottomSheet }, { token: i2$1.MatDialog }, { token: CartService }, { token: i5$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13515
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductListComponent, isStandalone: true, selector: "simpo-product-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:scroll": "onWindowScroll($event)", "window: resize": "getScreenSize($event)" } }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<div class=\"input-group\" *ngIf=\"isMobile\" [ngClass]=\"{'input-group-sticky': scrollingValue > 20}\">\n <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\n</div>\n\n<ng-container *ngIf=\"!isLoading\">\n <section [id]=\"data?.id\" class=\"container-fluid total-container\" [simpoLayout]=\"styles?.layout\" simpoHover\n (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\" [style.paddingTop.px]=\"isMobile ? '0 !important' : ''\" [attr.style]=\"customClass\">\n\n <!-- <div *ngIf=\"isMobile\" class=\"back-to-home\" cdkDrag (click)=\"goToCart()\">\n <mat-icon>home</mat-icon>\n </div> -->\n\n <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\n <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\" >\n <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\" style=\"width: 25%; padding: 0rem 2rem 0rem 1rem ;\" >\n <div class=\"filter body-large\" [style.color]=\"styles?.background?.accentColor\">\n Filters\n </div>\n <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\n Clear all\n </div>\n </div>\n <div itemid=\"top-section\" class=\"d-flex align-items-center justify-content-between\" style=\"width: 70%;margin-left: 10px; margin-right: 2%;\">\n <div class=\"fs-6 fw-normal\" [style.color]=\"styles?.background?.accentColor\">Showing {{(pageNo -1)*size}}-{{minSize}} of {{ totalCount }} Results</div>\n <div class=\"d-flex align-items-center\" style=\"gap: 10px;\" [style.color]=\"styles?.background?.accentColor\">\n <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\n <select (change)=\"applyFilter($event, 'SORT')\" style=\"color: black;\">\n <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{filter.name}}</option>\n </select>\n </div>\n </div>\n </div>\n <div class=\"d-flex w-100 onlyMobile\" style=\"gap: 5px; overflow-x: auto;\" [style.color]=\"styles?.background?.accentColor\">\n <ng-container *ngFor=\"let filter of filterList\">\n <div class=\"d-flex justify-content-between w-100 chip\" [style.color]=\"styles?.background?.color\" [style.backgroundColor]=\"styles?.background?.accentColor\">\n <span>{{filter.name}}</span>\n <span style=\"cursor: pointer; margin-left: 5px;\" (click)=\"removeFilter(filter)\">X</span>\n </div>\n </ng-container>\n </div>\n <div class=\"d-flex justify-content-between\">\n <div class=\"filter-side onlyDesktop\">\n <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\n </div>\n <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\n <ng-container *ngIf=\"!apiLoading\">\n <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\" >\n <div *ngFor=\"let product of responseData\" class=\"product\" [style.width]=\"applyProductWidth() ? getProductWidth() : ''\" style=\"cursor: pointer;\">\n <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\n <ng-container *ngTemplateOutlet=\"ProductDesc; context: {data: product}\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"styles?.theme != theme.Theme1\">\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"screenWidth > 475\"></simpo-small-product-listing>\n </ng-container>\n </div>\n <simpo-pagnination style=\"width: 100%; margin-top: 30px; overflow-x: scroll; \" [totalPages]=\"totalPages\" [currentPage]=\"pageNo\" (paginationChange)=\"paginationChange($event)\"></simpo-pagnination>\n </div>\n\n <section class=\"empty-cart\" *ngIf=\"responseData?.length == 0\">\n <div>\n <div class=\"cart-image\">\n <img loading=\"lazy\" style=\"height: 150px; width: 150px;\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\" >\n </div>\n <div class=\"cart-text\">\n <div class=\"heading-medium d-flex justify-content-center\" [style.color]=\"styles?.background?.accentColor\">\n Product list is empty\n </div>\n <div class=\"description d-flex justify-content-center mt-4\" [style.color]=\"styles?.background?.accentColor\">\n Looks like no item is present with filter. Go ahead & explore top categories.\n </div>\n </div>\n </div>\n </section>\n </ng-container>\n <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\n </div>\n\n <div class=\"bottom-filter\"[style.color]=\"styles?.background?.accentColor\">\n <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\n <mat-icon>sort</mat-icon>\n <span>Sort by</span>\n </div>\n <div class=\"divider\"></div>\n <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\n <mat-icon>filter_list</mat-icon>\n <span>Filter</span>\n </div>\n </div>\n </div>\n\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n </section>\n</ng-container>\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '40vh',\n 'border-radius': '10px',\n 'position': 'relative',\n 'right': '5px'\n}\">\n</ngx-skeleton-loader>\n<ng-template #FavouriteTags let-product=\"data\">\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\n</ng-template>\n\n<ng-template #FilterSection>\n <section>\n <div class=\"d-flex flex-column m-auto\" style=\"width: 95%;\">\n <ng-container *ngFor=\"let filter of filterList\">\n <div class=\"d-flex justify-content-between w-90 chip\" [style.color]=\"styles?.background?.color\" [style.backgroundColor]=\"styles?.background?.accentColor\">\n <span>{{filter.name}}</span>\n <span style=\"cursor: pointer;\" (click)=\"removeFilter(filter)\">X</span>\n </div>\n </ng-container>\n </div>\n <div class=\"categories-section\" *ngIf=\"categories?.length\" >\n <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\n <h6><b>Shop by categories</b></h6>\n </div>\n <div class=\"category-options\" *ngFor=\"let category of categories\" (click)=\"applyFilter(category, 'FILTER')\" [style.color]=\"styles?.background?.accentColor\">\n <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"category.status\" />\n <div class=\"trim-text\">{{category.option | uppercase}}</div>\n </div>\n </div>\n <div class=\"categories-section\" *ngIf=\"collections?.length\" [style.color]=\"styles?.background?.accentColor\">\n <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\n Shop by collections\n </div>\n <div class=\"category-options\" *ngFor=\"let collection of collections\" (click)=\"applyFilter(collection, 'FILTER')\">\n <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"collection.status\" />\n <div class=\"trim-text\">{{collection.option | uppercase}}</div>\n </div>\n </div>\n\n <div class=\"price-section\">\n <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\n Shop by price\n </div>\n <div>\n <mat-slider class=\"mat-slider\" [min]=\"minProductPrice\" [max]=\"maxProductPrice\" style=\"width: 87%;\">\n <input matSliderStartThumb [(ngModel)]=\"pricingMin\">\n <input matSliderEndThumb [(ngModel)]=\"pricingMax\">\n </mat-slider>\n </div>\n <div class=\"price-button-section\">\n <div class=\"button-section\">\n <button (click)=\"applyFilter()\" [style.backgroundColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.color\">Filter</button>\n </div>\n <div class=\"price-range\">\n Price: <span [innerHtml]='currency'></span>{{ pricingMin }} - <span [innerHtml]='currency'></span>{{ pricingMax | formateAmount }}\n </div>\n </div>\n </div>\n </section>\n</ng-template>\n<ng-template #CategoryFilterSection>\n <section>\n <ng-container *ngFor=\"let category of categories\">\n <div class=\"category\">\n <img [src]=\"category.imgUrl\">\n <span>{{ category.option }}</span>\n </div>\n </ng-container>\n </section>\n</ng-template>\n\n<ng-template #SortingSection>\n <section style=\"padding: 10px\">\n <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\n <span>Sort by</span>\n <mat-icon (click)=\"closeDialog()\">close</mat-icon>\n </div>\n <mat-radio-group class=\"d-flex flex-column\">\n <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"applyFilter($event, 'SORT')\">{{sortingType.name}}</mat-radio-button>\n </mat-radio-group>\n </section>\n</ng-template>\n\n<ng-template #ProductDesc let-product=\"data\">\n <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\" class=\"default-image position-relative box-shadow\" (click)=\"proceedToProductDesc(product.itemId)\">\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\n </div>\n <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\" class=\"default-image position-relative box-shadow\" (click)=\"proceedToProductDesc(product.itemId)\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"product?.itemImages?.[0]?.imgUrl\" alt=\"\" class=\"product-img\">\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\n </div>\n <div class=\"mt-2 w-100\">\n <div class=\"product-name heading-large w-100 text-left trim-text\" [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\n <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\n <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\" [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\" [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\" (click)=\"selectVarient(product, varient)\">\n </ng-container>\n </div>\n <div class=\"d-flex align-item-center justify-content-between\" [style.display]=\"true ? 'block!important' : ''\">\n <div class=\"price body-large text-left d-flex align-items-center mtb-5 g-10\">\n <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice != product?.price?.value\">\n <span [innerHTML]='currency'></span>\n {{product.price.value}}</div>\n <div>\n <span [innerHTML]='currency'></span>\n {{product.price.sellingPrice | number:'1.0-0'}}\n </div>\n </div>\n <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [backgroundInfo]=\"styles?.background\"\n [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\" (click)=\"addItemToCart($event, product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\n\n <div class=\"quantity full-width-quantity\" [style.borderColor]=\"styles?.background?.accentColor\" [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\n <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\" [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\n <span style=\"width: 70%;\">{{product.quantity}}</span>\n <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\" [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\n </div>\n <!-- <div class=\"quantity\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\" [style.borderColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.accentColor\">\n <span (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\n <span>{{product.quantity}}</span>\n <span (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\n </div> -->\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:40vh;width:100%}.categories-heading-small{padding:0rem 0rem 0rem 1rem}.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!important;width:220px;font-weight:500}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:100%;height:40vh}.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 button{height:35px;font-size:16px!important}.fav-icon{position:absolute;z-index:1000;padding:5px;right:3px;top:3px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.discounted-price{margin-top:-3px}.filter-side{width:25%;position:sticky;top:0;height:fit-content}.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 0rem .75rem 2rem;gap:11px}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem}.button-section button{position:relative;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px}.chip{padding:8px 15px;border-radius:3px;margin:3px 0;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%;margin-left:10px}.bottom-filter{display:none}.onlyMobile{display:none!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray;cursor:pointer}.varient-list .selected-varient{border:1px solid transparent}:is() .speeddial-linear .p-speeddial-direction-up{position:relative;bottom:0%;right:0}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important;padding-top:10px!important}.product{padding:5px!important;margin-top:10px!important}.out-of-stock{font-size:12px!important}.discounted-price,.add-to-cart-btn button{font-size:14px!important}.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:block!important}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:100000001;width:100%;margin-left:-5px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:100%}.default-image img{width:100%;height:220px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important}}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.input-group-sticky{width:100%;height:57px}.input-group{position:sticky;top:0;width:95%;padding:5px;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:15px auto}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.back-to-home{background-color:#9b9a9a1c;padding:5px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:fixed;right:3px;top:50%;cursor:pointer}.back-to-home .mat-icon{font-size:16px;height:16px;width:16px}@media (min-width: 475px) and (max-width: 1024px){.price-button-section{display:flex;flex-direction:column-reverse}.categories-section{padding:.8rem 0rem}.category-options{padding:.75rem 1rem}.categories{padding:1rem}.top-section{width:25%;padding:0rem 2rem 0rem 1rem}.product-parent{display:flex;flex-wrap:wrap;margin-top:15px;margin-left:10%}}@media screen and (max-width: 475px){.product-name{font-size:14px}}.box-shadow{box-shadow:#0000003d 0 3px 8px;border-radius:10px}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mtb-5{margin-top:5px;margin-bottom:5px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i14$2.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i14$2.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "component", type: PagninationComponent, selector: "simpo-pagnination", inputs: ["totalPages", "currentPage"], outputs: ["paginationChange"] }, { kind: "directive", type:
|
|
13542
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductListComponent, isStandalone: true, selector: "simpo-product-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:scroll": "onWindowScroll($event)", "window: resize": "getScreenSize($event)" } }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<div class=\"input-group\" *ngIf=\"isMobile\" [ngClass]=\"{'input-group-sticky': scrollingValue > 20}\">\n <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\n</div>\n\n<ng-container *ngIf=\"!isLoading\">\n <section [id]=\"data?.id\" class=\"container-fluid total-container\" [simpoLayout]=\"styles?.layout\" simpoHover\n (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\" [style.paddingTop.px]=\"isMobile ? '0 !important' : ''\" [attr.style]=\"customClass\">\n\n <!-- <div *ngIf=\"isMobile\" class=\"back-to-home\" cdkDrag (click)=\"goToCart()\">\n <mat-icon>home</mat-icon>\n </div> -->\n\n <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\n <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\n </div>\n\n <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\" >\n <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\" style=\"width: 25%; padding: 0rem 2rem 0rem 1rem ;\" >\n <div class=\"filter body-large\" [style.color]=\"styles?.background?.accentColor\">\n Filters\n </div>\n <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\n Clear all\n </div>\n </div>\n <div itemid=\"top-section\" class=\"d-flex align-items-center justify-content-between\" style=\"width: 70%;margin-left: 10px; margin-right: 2%;\">\n <div class=\"fs-6 fw-normal\" [style.color]=\"styles?.background?.accentColor\">Showing {{(pageNo -1)*size}}-{{minSize}} of {{ totalCount }} Results</div>\n <div class=\"d-flex align-items-center\" style=\"gap: 10px;\" [style.color]=\"styles?.background?.accentColor\">\n <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\n <select (change)=\"applyFilter($event, 'SORT')\" style=\"color: black;\">\n <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{filter.name}}</option>\n </select>\n </div>\n </div>\n </div>\n <div class=\"d-flex w-100 onlyMobile\" style=\"gap: 5px; overflow-x: auto;\" [style.color]=\"styles?.background?.accentColor\">\n <ng-container *ngFor=\"let filter of filterList\">\n <div class=\"d-flex justify-content-between w-100 chip\" [style.color]=\"styles?.background?.color\" [style.backgroundColor]=\"styles?.background?.accentColor\">\n <span>{{filter.name}}</span>\n <span style=\"cursor: pointer; margin-left: 5px;\" (click)=\"removeFilter(filter)\">X</span>\n </div>\n </ng-container>\n </div>\n <div class=\"d-flex justify-content-between\">\n <div class=\"filter-side onlyDesktop\">\n <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\n </div>\n <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\n <ng-container *ngIf=\"!apiLoading\">\n <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\" >\n <div *ngFor=\"let product of responseData\" class=\"product\" [style.width]=\"applyProductWidth() ? getProductWidth() : ''\" style=\"cursor: pointer;\">\n <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\n <ng-container *ngTemplateOutlet=\"ProductDesc; context: {data: product}\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"styles?.theme != theme.Theme1\">\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"screenWidth > 475\"></simpo-small-product-listing>\n </ng-container>\n </div>\n <simpo-pagnination style=\"width: 100%; margin-top: 30px; overflow-x: scroll; \" [totalPages]=\"totalPages\" [currentPage]=\"pageNo\" (paginationChange)=\"paginationChange($event)\"></simpo-pagnination>\n </div>\n\n <section class=\"empty-cart\" *ngIf=\"responseData?.length == 0\">\n <div>\n <div class=\"cart-image\">\n <img loading=\"lazy\" style=\"height: 150px; width: 150px;\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\" >\n </div>\n <div class=\"cart-text\">\n <div class=\"heading-medium d-flex justify-content-center\" [style.color]=\"styles?.background?.accentColor\">\n Product list is empty\n </div>\n <div class=\"description d-flex justify-content-center mt-4\" [style.color]=\"styles?.background?.accentColor\">\n Looks like no item is present with filter. Go ahead & explore top categories.\n </div>\n </div>\n </div>\n </section>\n </ng-container>\n <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\n </div>\n\n <div class=\"bottom-filter\"[style.color]=\"styles?.background?.accentColor\">\n <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\n <mat-icon>sort</mat-icon>\n <span>Sort by</span>\n </div>\n <div class=\"divider\"></div>\n <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\n <mat-icon>filter_list</mat-icon>\n <span>Filter</span>\n </div>\n </div>\n </div>\n\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n </section>\n</ng-container>\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '40vh',\n 'border-radius': '10px',\n 'position': 'relative',\n 'right': '5px'\n}\">\n</ngx-skeleton-loader>\n<ng-template #FavouriteTags let-product=\"data\">\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\n</ng-template>\n\n<ng-template #FilterSection>\n <section>\n <div class=\"d-flex flex-column m-auto\" style=\"width: 95%;\">\n <ng-container *ngFor=\"let filter of filterList\">\n <div class=\"d-flex justify-content-between w-90 chip\" [style.color]=\"styles?.background?.color\" [style.backgroundColor]=\"styles?.background?.accentColor\">\n <span>{{filter.name}}</span>\n <span style=\"cursor: pointer;\" (click)=\"removeFilter(filter)\">X</span>\n </div>\n </ng-container>\n </div>\n <div class=\"categories-section\" *ngIf=\"categories?.length\" >\n <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\n <h6><b>Shop by categories</b></h6>\n </div>\n <div class=\"category-options\" *ngFor=\"let category of categories\" (click)=\"applyFilter(category, 'FILTER')\" [style.color]=\"styles?.background?.accentColor\">\n <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"category.status\" />\n <div class=\"trim-text\">{{category.option | uppercase}}</div>\n </div>\n </div>\n <div class=\"categories-section\" *ngIf=\"collections?.length\" [style.color]=\"styles?.background?.accentColor\">\n <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\n Shop by collections\n </div>\n <div class=\"category-options\" *ngFor=\"let collection of collections\" (click)=\"applyFilter(collection, 'FILTER')\">\n <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"collection.status\" />\n <div class=\"trim-text\">{{collection.option | uppercase}}</div>\n </div>\n </div>\n\n <div class=\"price-section\">\n <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\n Shop by price\n </div>\n <div>\n <mat-slider class=\"mat-slider\" [min]=\"minProductPrice\" [max]=\"maxProductPrice\" style=\"width: 87%;\">\n <input matSliderStartThumb [(ngModel)]=\"pricingMin\">\n <input matSliderEndThumb [(ngModel)]=\"pricingMax\">\n </mat-slider>\n </div>\n <div class=\"price-button-section\">\n <div class=\"button-section\">\n <button (click)=\"applyFilter()\" [style.backgroundColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.color\">Filter</button>\n </div>\n <div class=\"price-range\">\n Price: <span [innerHtml]='currency'></span>{{ pricingMin }} - <span [innerHtml]='currency'></span>{{ pricingMax | formateAmount }}\n </div>\n </div>\n </div>\n </section>\n</ng-template>\n<ng-template #CategoryFilterSection>\n <section>\n <ng-container *ngFor=\"let category of categories\">\n <div class=\"category\">\n <img [src]=\"category.imgUrl\">\n <span>{{ category.option }}</span>\n </div>\n </ng-container>\n </section>\n</ng-template>\n\n<ng-template #SortingSection>\n <section style=\"padding: 10px\">\n <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\n <span>Sort by</span>\n <mat-icon (click)=\"closeDialog()\">close</mat-icon>\n </div>\n <mat-radio-group class=\"d-flex flex-column\">\n <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"applyFilter($event, 'SORT')\">{{sortingType.name}}</mat-radio-button>\n </mat-radio-group>\n </section>\n</ng-template>\n\n<ng-template #ProductDesc let-product=\"data\">\n <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\" class=\"default-image position-relative box-shadow\" (click)=\"proceedToProductDesc(product.itemId)\">\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\n </div>\n <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\" class=\"default-image position-relative box-shadow\" (click)=\"proceedToProductDesc(product.itemId)\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"product?.itemImages?.[0]?.imgUrl\" alt=\"\" class=\"product-img\">\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\n </div>\n <div class=\"mt-2 w-100\">\n <div class=\"product-name heading-large w-100 text-left trim-text\" [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\n <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\n <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\" [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\" [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\" (click)=\"selectVarient(product, varient)\">\n </ng-container>\n </div>\n <div class=\"d-flex align-item-center justify-content-between\" [style.display]=\"true ? 'block!important' : ''\">\n <div class=\"price body-large text-left d-flex align-items-center mtb-5 g-10\">\n <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice != product?.price?.value\">\n <span [innerHTML]='currency'></span>\n {{product.price.value}}</div>\n <div>\n <span [innerHTML]='currency'></span>\n {{product.price.sellingPrice | number:'1.0-0'}}\n </div>\n </div>\n <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [backgroundInfo]=\"styles?.background\"\n [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\" (click)=\"addItemToCart($event, product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\n\n <div class=\"quantity full-width-quantity\" [style.borderColor]=\"styles?.background?.accentColor\" [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\n <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\" [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\n <span style=\"width: 70%;\">{{product.quantity}}</span>\n <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\" [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\n </div>\n <!-- <div class=\"quantity\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\" [style.borderColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.accentColor\">\n <span (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\n <span>{{product.quantity}}</span>\n <span (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\n </div> -->\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\n </div>\n </div>\n </div>\n</ng-template>\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:40vh;width:100%}.categories-heading-small{padding:0rem 0rem 0rem 1rem}.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!important;width:220px;font-weight:500}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:100%;height:40vh}.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 button{height:35px;font-size:16px!important}.fav-icon{position:absolute;z-index:1000;padding:5px;right:3px;top:3px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.discounted-price{margin-top:-3px}.filter-side{width:25%;position:sticky;top:0;height:fit-content}.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 0rem .75rem 2rem;gap:11px}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem}.button-section button{position:relative;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px}.chip{padding:8px 15px;border-radius:3px;margin:3px 0;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%;margin-left:10px}.bottom-filter{display:none}.onlyMobile{display:none!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray;cursor:pointer}.varient-list .selected-varient{border:1px solid transparent}:is() .speeddial-linear .p-speeddial-direction-up{position:relative;bottom:0%;right:0}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important;padding-top:10px!important}.product{padding:5px!important;margin-top:10px!important}.out-of-stock{font-size:12px!important}.discounted-price,.add-to-cart-btn button{font-size:14px!important}.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:block!important}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:100000001;width:100%;margin-left:-5px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:100%}.default-image img{width:100%;height:220px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important}}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.input-group-sticky{width:100%;height:57px}.input-group{position:sticky;top:0;width:95%;padding:5px;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:15px auto}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.back-to-home{background-color:#9b9a9a1c;padding:5px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:fixed;right:3px;top:50%;cursor:pointer}.back-to-home .mat-icon{font-size:16px;height:16px;width:16px}@media (min-width: 475px) and (max-width: 1024px){.price-button-section{display:flex;flex-direction:column-reverse}.categories-section{padding:.8rem 0rem}.category-options{padding:.75rem 1rem}.categories{padding:1rem}.top-section{width:25%;padding:0rem 2rem 0rem 1rem}.product-parent{display:flex;flex-wrap:wrap;margin-top:15px;margin-left:10%}}@media screen and (max-width: 475px){.product-name{font-size:14px}}.box-shadow{box-shadow:#0000003d 0 3px 8px;border-radius:10px}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mtb-5{margin-top:5px;margin-bottom:5px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i14$1.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i14$1.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "component", type: PagninationComponent, selector: "simpo-pagnination", inputs: ["totalPages", "currentPage"], outputs: ["paginationChange"] }, { kind: "directive", type:
|
|
13516
13543
|
//directive
|
|
13517
|
-
AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type:
|
|
13544
|
+
AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i15.SpeedDial, selector: "p-speedDial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i7$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i7$2.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "pipe", type: FormateAmount, name: "formateAmount" }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: CardSkeletonLoaderComponent, selector: "simpo-card-skeleton-loader", inputs: ["count", "showTitles"] }, { kind: "component", type: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data", "isScrollable", "isCategoryProductList", "customClass"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
|
|
13518
13545
|
}
|
|
13519
13546
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductListComponent, decorators: [{
|
|
13520
13547
|
type: Component,
|
|
@@ -13810,7 +13837,7 @@ class WhislistComponent extends BaseSection {
|
|
|
13810
13837
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WhislistComponent, deps: [{ token: CartService }, { token: EventsService }, { token: StorageServiceService }, { token: RestService }, { token: i5$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13811
13838
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: WhislistComponent, isStandalone: true, selector: "simpo-whislist", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n<ng-container *ngIf=\"!isLoading\">\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\n <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\" [id]=\"data?.id\"\n [simpoAnimation]=\"styles?.animation\">\n <div class=\"left-panel\" [ngClass]=\"{ 'mobile-height': isMobile && responseData?.orderedItems?.length === 1 }\">\n <div class=\"my-bag\"[style.color]=\"styles?.background?.accentColor\">\n My Wishlist <span>({{responseData?.orderedItems?.length}} Items)</span>\n </div>\n\n <div class=\"d-flex flex-wrap justify-content-between\" style=\"gap: 10px;\">\n <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\n <div class=\"cart-items\" [ngClass]=\"{ 'mobile-height': isMobile && (responseData?.orderedItems?.length ?? 0) === 1, 'multiple-items': (responseData?.orderedItems?.length ?? 0) > 1 }\">\n <mat-icon class=\"delete-btn\" (click)=\"deleteFromWhislist(item)\">close</mat-icon>\n <div class=\"d-flex item-parent\">\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\">\n </div>\n <div class=\"col-md-6 h-100 item-desc\">\n <div class=\"lh-23\">\n <div class=\"item-name heading-large trim-text\" [style.color]=\"styles?.background?.accentColor\">{{item.itemName}}</div>\n <div class=\"price-with-tax\" [style.color]=\"styles?.background?.accentColor\">\n <span [innerHTML]='currency'></span> {{item.discountedPrice}}\n </div>\n <ng-container *ngIf=\"item.itemVariant\">\n <div class=\"d-flex align-items-center\" *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\n <div class=\"fw-bold\"[style.color]=\"styles?.background?.accentColor\">{{ varient }} : </div>\n <!-- <div class=\"fw-normal\" style=\"margin-left: 5px; height: 13px; width: 13px; border-radius: 50%;\" *ngIf=\"varient.toLowerCase() == 'color'\" [style.backgroundColor]=\"item.itemVariant.properties[varient]\"></div> -->\n <div class=\"fw-normal\" style=\"margin-left: 5px;\"[style.color]=\"styles?.background?.accentColor\"> {{ item.itemVariant.properties[varient] | uppercase }}</div>\n </div>\n </ng-container>\n <div class=\"d-flex action-btn\" class=\"options\" style=\"gap: 5px; \" >\n <div class=\"item-quantity\" *ngIf=\"item.quantity\" [style.color]=\"styles?.background?.accentColor\">\n <div class=\"count\">\n <span class=\"cursor\" (click)=\"addToFav(item, 'SUBSTRACT')\">-</span>\n <span>{{item.quantity}}</span>\n <span class=\"cursor\" (click)=\"addToFav(item, 'ADD')\">+</span>\n </div>\n </div>\n <div class=\"item-quantity\" *ngIf=\"!item.quantity\" (click)=\"addToFav(item, 'ADD')\" [style.color]=\"styles?.background?.accentColor\">Add Quantity\n </div>\n <div class=\"item-quantity\" (click)=\"moveToCart(item)\" [style.color]=\"styles?.background?.accentColor\">Move to Cart</div>\n </div>\n </div>\n </div>\n <div class=\"position-relative itemPrice\" style=\"margin-left: auto; width: 30%;\">\n <div class=\"item-price\" *ngIf=\"item.quantity\"><span [innerHTML]='currency'></span>\n {{(item.discountedPrice) * item.quantity}}</div>\n <div>\n <mat-icon class=\"delete-item\" (click)=\"deleteFromWhislist(item)\">delete</mat-icon>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n\n <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\n <div class=\"empty-cart-container\">\n <div class=\"cart-image\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\n alt=\"\">\n </div>\n <div class=\"cart-text\">\n <div class=\"heading-medium d-flex justify-content-center\" [style.color]=\"styles.background.accentColor\">\n Your Wishlist is empty\n </div>\n <div class=\"description d-flex mt-4\" [style.color]=\"styles.background.accentColor\">\n Looks like you have not added anything to your Wishlist. Go ahead & explore top categories.\n </div>\n </div>\n </div>\n </section>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n\n </section>\n</ng-container>\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '40vh',\n 'border-radius': '10px',\n 'position': 'relative',\n 'right': '5px'\n}\">\n</ngx-skeleton-loader>\n", styles: [".cart-parent{display:flex;flex-wrap:wrap;margin-top:15px;gap:20px}.item-desc{margin-left:10px!important}.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:100%;width:110px;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:#df2e2e;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-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}.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%}.options{display:flex}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}.delete-btn{display:none}.count{width:100%;display:flex;justify-content:space-between}@media only screen and (max-width: 475px){.cart-parent{flex-direction:column}.delete-btn{display:flex!important;justify-content:center;align-items:center;padding:5px;background-color:#d3d3d3;border-radius:50%;position:absolute;top:-10px;right:-5px;font-size:18px;color:#000}.total-container{padding-top:5px!important;padding-bottom:5px!important;height:calc(100vh - 130px)}.item-parent{flex-direction:row!important;flex-wrap:nowrap!important}.cart-items{width:100%;position:relative}.left-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-desc{width:73%}.itemPrice{display:none!important}.action-btn{flex-wrap:wrap}.count{display:flex;gap:20px}.item-quantity{width:100%;justify-content:center}.options{flex-direction:column}.empty-cart-container{height:calc(100vh - 130px)}}@media (min-width:768px) and (max-width:1024px){.options{flex-direction:column}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "directive", type:
|
|
13812
13839
|
//DIRECTIVE
|
|
13813
|
-
BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "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: ToastModule }, { kind: "component", type:
|
|
13840
|
+
BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "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: ToastModule }, { kind: "component", type: i13$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
|
|
13814
13841
|
}
|
|
13815
13842
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WhislistComponent, decorators: [{
|
|
13816
13843
|
type: Component,
|
|
@@ -14016,7 +14043,7 @@ class UserBasicInfoComponent {
|
|
|
14016
14043
|
return this.email?.includes("@") && this.email.includes(".com") || (this.email?.length == 0);
|
|
14017
14044
|
}
|
|
14018
14045
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserBasicInfoComponent, deps: [{ token: RestService }, { token: i2$4.Router }, { token: i2$1.MatDialogRef }, { token: StorageServiceService }, { token: i5$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14019
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserBasicInfoComponent, isStandalone: true, selector: "simpo-user-basic-info", providers: [MessageService], ngImport: i0, template: "<section style=\"padding: 20px\" class=\"position-relative\">\n <div class=\"d-flex flex-wrap justify-content-between\">\n <div class=\"form-control-group\">\n <div class=\"label\">First Name</div>\n <input type=\"text\" placeholder=\"Enter first name\" [(ngModel)]=\"firstName\" (keydown)=\"validateName($event)\">\n </div>\n <!-- <div class=\"form-control-group-3\">\n <div class=\"label\">Middle Name</div>\n <input type=\"text\" placeholder=\"Enter middle name\" [(ngModel)]=\"middleName\">\n </div> -->\n <div class=\"form-control-group\">\n <div class=\"label\">Last Name</div>\n <input type=\"text\" placeholder=\"Enter last name\" [(ngModel)]=\"lastName\" (keydown)=\"validateName($event)\">\n </div>\n\n <div class=\"form-control-group\" *ngIf=\"isEdit\">\n <div class=\"label required\">Mobile</div>\n <input type=\"number\" placeholder=\"Enter mobile\" [(ngModel)]=\"mobile\" disabled>\n </div>\n <div class=\"form-control-group\">\n <div class=\"label\">Email</div>\n <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"email\">\n <span class=\"error-msg\" [style.visibility]=\"isEmailValid ? 'hidden' : 'visible'\">Please enter valid email</span>\n </div>\n \n <div class=\"form-control-group-full\">\n <div class=\"label\">Select Gender</div>\n <div class=\"d-flex align-items-center\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" src=\"https://img.icons8.com/?size=100&id=108296&format=png&color=000000\" alt=\"\"\n (click)=\"gender = 'MALE'\" [ngClass]=\"{'active': gender == 'MALE' }\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" src=\"https://img.icons8.com/?size=100&id=108295&format=png&color=000000\" alt=\"\"\n (click)=\"gender = 'FEMALE'\" [ngClass]=\"{'active': gender == 'FEMALE'}\">\n </div>\n </div>\n </div>\n <div class=\"action-btn\">\n <span class=\"skip-btn\" (click)=\"close()\">{{!isEdit ? 'Skip' : 'Close'}}</span>\n <button (click)=\"saveProfile()\">Save Profile</button>\n </div>\n</section>\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>", styles: [".form-control-group,.form-control-group-3,.form-control-group-full{width:100%}: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%}img{height:60px;width:60px;object-fit:cover;margin:0 5px;border:2px solid transparent;cursor:pointer;border-radius:50%}.active{border:2px solid #0267C1}.form-control-group{margin:10px 0}.action-btn{position:relative;bottom:0;right:0;display:flex;align-items:center;justify-content:flex-end;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}.required:after{content:\"*\";color:tomato}.error-msg{color:tomato}@media screen and (max-width: 475px){.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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type:
|
|
14046
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserBasicInfoComponent, isStandalone: true, selector: "simpo-user-basic-info", providers: [MessageService], ngImport: i0, template: "<section style=\"padding: 20px\" class=\"position-relative\">\n <div class=\"d-flex flex-wrap justify-content-between\">\n <div class=\"form-control-group\">\n <div class=\"label\">First Name</div>\n <input type=\"text\" placeholder=\"Enter first name\" [(ngModel)]=\"firstName\" (keydown)=\"validateName($event)\">\n </div>\n <!-- <div class=\"form-control-group-3\">\n <div class=\"label\">Middle Name</div>\n <input type=\"text\" placeholder=\"Enter middle name\" [(ngModel)]=\"middleName\">\n </div> -->\n <div class=\"form-control-group\">\n <div class=\"label\">Last Name</div>\n <input type=\"text\" placeholder=\"Enter last name\" [(ngModel)]=\"lastName\" (keydown)=\"validateName($event)\">\n </div>\n\n <div class=\"form-control-group\" *ngIf=\"isEdit\">\n <div class=\"label required\">Mobile</div>\n <input type=\"number\" placeholder=\"Enter mobile\" [(ngModel)]=\"mobile\" disabled>\n </div>\n <div class=\"form-control-group\">\n <div class=\"label\">Email</div>\n <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"email\">\n <span class=\"error-msg\" [style.visibility]=\"isEmailValid ? 'hidden' : 'visible'\">Please enter valid email</span>\n </div>\n \n <div class=\"form-control-group-full\">\n <div class=\"label\">Select Gender</div>\n <div class=\"d-flex align-items-center\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" src=\"https://img.icons8.com/?size=100&id=108296&format=png&color=000000\" alt=\"\"\n (click)=\"gender = 'MALE'\" [ngClass]=\"{'active': gender == 'MALE' }\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" src=\"https://img.icons8.com/?size=100&id=108295&format=png&color=000000\" alt=\"\"\n (click)=\"gender = 'FEMALE'\" [ngClass]=\"{'active': gender == 'FEMALE'}\">\n </div>\n </div>\n </div>\n <div class=\"action-btn\">\n <span class=\"skip-btn\" (click)=\"close()\">{{!isEdit ? 'Skip' : 'Close'}}</span>\n <button (click)=\"saveProfile()\">Save Profile</button>\n </div>\n</section>\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>", styles: [".form-control-group,.form-control-group-3,.form-control-group-full{width:100%}: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%}img{height:60px;width:60px;object-fit:cover;margin:0 5px;border:2px solid transparent;cursor:pointer;border-radius:50%}.active{border:2px solid #0267C1}.form-control-group{margin:10px 0}.action-btn{position:relative;bottom:0;right:0;display:flex;align-items:center;justify-content:flex-end;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}.required:after{content:\"*\";color:tomato}.error-msg{color:tomato}@media screen and (max-width: 475px){.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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
|
|
14020
14047
|
}
|
|
14021
14048
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserBasicInfoComponent, decorators: [{
|
|
14022
14049
|
type: Component,
|
|
@@ -14364,7 +14391,7 @@ class UserProfileComponent extends BaseSection {
|
|
|
14364
14391
|
return BUSINESS_CONSTANTS.CURRENCY;
|
|
14365
14392
|
}
|
|
14366
14393
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserProfileComponent, deps: [{ token: i2$4.Router }, { token: EventsService }, { token: RestService }, { token: StorageServiceService }, { token: CartService }, { token: i2$1.MatDialog }, { token: i8$3.MatBottomSheet }, { token: i2$3.CookieService }, { token: i5$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14367
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserProfileComponent, isStandalone: true, selector: "simpo-user-profile", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"styles?.layout\" [simpoBackground]=\"styles?.background\" [ngStyle]=\"{'height': isMobile ? '100vh' : '90vh', 'z-index': isMobile ? '100000000' : ''}\" [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\n <ng-container *ngIf=\"!isMobile\">\n <div class=\"p-3 profile-box\" style=\"width: 25%; border-radius: 10px; height: fit-content;\" [style.order]=\"styles?.swap ? '1' : '0'\">\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; height: 70px;\" [simpoColor]=\"styles?.background?.color\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100\" class=\"profile-icon\">\n <div class=\"profile-detials\" >\n <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\n <h6 class=\"d-flex align-items-center font-weight-normal position-relative\" *ngIf=\"getUserDetails?.contact?.mobile?.length\">\n <mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span>\n <!-- <mat-icon class=\"edit-icon\" (click)=\"editProfileData('MOBILE')\">edit</mat-icon> -->\n </h6>\n <h6 class=\"d-flex align-items-center font-weight-normal position-relative\" *ngIf=\"getUserDetails?.contact?.email?.length\">\n <mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span>\n <!-- <mat-icon class=\"edit-icon\" (click)=\"editProfileData('EMAIL')\">edit</mat-icon> -->\n </h6>\n </div>\n </div>\n <div class=\"tabs\">\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\n <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [simpoColor]=\"styles?.background?.color\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\">\n <!-- <mat-icon [style.color]=\"getSupportingColor(getCardBGColor)\">{{tab.icon}}</mat-icon> -->\n <img [src]=\"tab.image | genderIcon\" alt=\"\" style=\"height: 20px;\" [simpoColor]=\"styles?.background?.color\">\n <div class=\"tab font-weight-normal\">{{tab.value}}</div>\n </div>\n </ng-container>\n <div class=\"d-flex\" style=\"gap: 5px;\">\n <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\n <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"[simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\">Logout</button>\n </div>\n </div>\n </div>\n <div class=\"orders-sec\" [simpoBorder]=\"styles?.border\" [style.order]=\"styles?.swap ? '0' : '1'\" [simpoBackground]=\"styles?.background\">\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\n <ng-container *ngSwitchCase=\"'Orders'\">\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Address'\">\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Account Details'\">\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Logout'\">\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Wishlist'\">\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n <ng-container *ngIf=\"isMobile\">\n <div class=\"w-100 position-relative\" style=\"height: 80vh;\">\n <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\">\n <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\" (click)=\"goBack()\">keyboard_backspace</mat-icon>\n <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\n </div>\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\n <ng-container *ngSwitchCase=\"''\">\n <section class=\"top-sec\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\" style=\"width: 50px; height: 50px;\">\n <div class=\"d-flex flex-column align-items-center\">\n <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\n <h6 class=\"d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\n <h6 class=\"d-flex align-items-center font-weight-normal\" *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\n </div>\n </section>\n <section class=\"list-sec\">\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\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)\">\n <img [src]=\"tab.image | genderIcon\" alt=\"\" [style.color]=\"styles?.background?.accentColor\">\n <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">{{tab.value}}</div>\n </div>\n\n </ng-container>\n </section>\n <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\n <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\n <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Orders'\">\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Address'\">\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Account Details'\">\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Logout'\">\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Wishlist'\">\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\n </ng-container>\n\n </ng-container>\n </div>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n\n</section>\n\n<ng-template #OrderSection>\n <h1 class=\"onlyDesktop\">My Orders</h1>\n <div class=\"d-flex my-3 orderlist onlyDesktop\">\n <ng-container *ngFor=\"let tab of tabs\">\n <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">{{tab.value}}</div>\n </ng-container>\n </div>\n <div class=\"order-list\">\n <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\n <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\n <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\n </div>\n </ng-container>\n <ng-template #showEmptyScreen>\n <section class=\"empty-cart m-auto\">\n <div>\n <div class=\"cart-image\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\"\n [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\n </div>\n <div class=\"cart-text \">\n <ng-container *ngFor=\"let text of content?.inputText\">\n <div class=\"heading-medium d-flex justify-content-center content-side\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n\n </div>\n </ng-container>\n </div>\n </div>\n </section>\n </ng-template>\n </div>\n</ng-template>\n<ng-template #OrderDetails>\n <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\" (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\n</ng-template>\n<ng-template #AddressSection>\n <div class=\"d-flex justify-content-between mb-2\">\n <h1 class=\"title-text\">My Address</h1>\n <button class=\"address-btn\" (click)=\"addNewAddress()\" [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\n </div>\n <div class=\"address-list\">\n <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\n <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\n <div class=\"address\" [style.width]=\"getProductWidth\">\n <div class=\"address-left\">\n <div class=\"top\">\n <span class=\"fw-bold mr-2\">{{address.receiverName}}</span>\n <span class=\"address-type\">{{address.addressType}}</span>\n </div>\n <div class=\"address-det trim-text\">{{address.addressLine1}}</div>\n <div class=\"phone\">\n <span>Phone:</span>\n <span class=\"address-phone\">{{address.receiverPhone}}</span>\n </div>\n </div>\n <div class=\"address-right\">\n <mat-icon (click)=\"editAddress(idx)\">edit</mat-icon>\n <mat-icon (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\n </div>\n </div>\n </ng-container>\n </ng-container>\n <ng-template #showEmptyAddress>\n <section class=\"empty-cart m-auto\">\n <div>\n <div class=\"cart-image\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\n </div>\n <div class=\"cart-text\">\n <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\n <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\n <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery</div>\n <!-- </ng-container> -->\n </div>\n </div>\n </section>\n </ng-template>\n </div>\n</ng-template>\n<ng-template #AccountsSection>\n <h1 class=\"onlyDesktop\">My Accounts</h1>\n</ng-template>\n<ng-template #LogoutSection>\n <h1 class=\"onlyDesktop\">Logout</h1>\n</ng-template>\n<ng-template #OrderCard let-order=\"data\">\n <div (click)=\"goToOrderDetails(order)\" class=\"cursor-pointer\">\n <div class=\"top\">\n <span class=\"font-weight-normal\">{{order.orderNum}}</span>\n <mat-icon>arrow_forward_ios</mat-icon>\n </div>\n <div class=\"middle my-2\">\n <span>{{order.createdTimeStamp | date: 'medium'}}</span>\n <span class=\"font-weight-bold\">{{order?.brandOrderDetails?.[0]?.brandName | titlecase}}</span>\n </div>\n <hr />\n <div class=\"bottom\">\n <span class=\"font-weight-normal\">Amount: <span> <span [innerHTML]=\"currency\"></span> {{ order.billDetails.discountAmount ? (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount + order?.billDetails?.totalTaxAfterDiscount) :\n order.billDetails.totalGrossValue }}</span></span>\n <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">{{ order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | uppercase }}</span>\n </div>\n </div>\n</ng-template>\n<ng-template #WishlistDetails>\n <h1 class=\"onlyDesktop\">My Wishlist</h1>\n <div class=\"wishlist-list\">\n <div class=\"d-flex flex-wrap justify-content-between\" style=\"gap: 10px;\">\n <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\n <div class=\"cart-items\">\n <div class=\"d-flex item-parent\">\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\n </div>\n <div class=\"col-md-8 h-100 item-desc\">\n <div class=\"lh-23\">\n <div class=\"item-name heading-large\">{{item.itemName}}</div>\n <div class=\"price-with-tax\">\n <span [innerHTML]='currency'></span> {{item.discountedPrice}}\n </div>\n <div class=\"d-flex action-btn\" style=\"gap: 5px;\">\n <div class=\"item-quantity\" *ngIf=\"item.quantity\">\n <span class=\"cursor\" (click)=\"addToFav(item, 'SUBSTRACT')\">-</span>\n <span>{{item.quantity}}</span>\n <span class=\"cursor\" (click)=\"addToFav(item, 'ADD')\">+</span>\n </div>\n <div class=\"item-quantity\" *ngIf=\"!item.quantity\" (click)=\"addToFav(item, 'ADD')\">Add to Quantity</div>\n <div class=\"item-quantity\" (click)=\"moveToCart(item)\">Move to Cart</div>\n </div>\n </div>\n </div>\n <div class=\"position-relative d-flex flex-column justify-content-between iemPrice\" style=\"right: 5px\">\n <div class=\"item-price\" *ngIf=\"item.quantity\"><span [innerHTML]='currency'></span> {{(item.discountedPrice) * item.quantity}}</div>\n <div>\n <mat-icon class=\"delete-item\" (click)=\"deleteFromWhislist(item)\" *ngIf=\"!isMobile\">delete</mat-icon>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n <ng-template #showEmptyWishlistScreen>\n <section class=\"empty-cart m-auto\">\n <div>\n <div class=\"cart-image\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\n </div>\n <div class=\"cart-text\">\n <ng-container *ngFor=\"let text of content?.inputText\">\n <div class=\"heading-medium d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{ text.value }}</div>\n </ng-container>\n </div>\n </div>\n </section>\n </ng-template>\n</ng-template>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '40vh',\n 'border-radius': '10px',\n 'position': 'relative',\n 'right': '5px'\n }\">\n</ngx-skeleton-loader>\n", styles: [".total-container{position:relative;height:auto;overflow:scroll}.mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.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:80%;margin-left:20px;margin-right:20px;padding:15px;overflow-y:auto;border:1px solid #d3d3d324;box-shadow:#0000000d 0 0 0 1px}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order{border:1px solid lightgray;padding:15px;border-radius:5px;margin:10px 0;box-shadow:#0000000d 0 0 0 1px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;min-height:40vh;max-height:71vh;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.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:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}.profile-box{border:1px solid lightgray;box-shadow:#00000029 0 1px 4px}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.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;border:1.5px solid white}.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{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.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;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}@media screen and (max-width: 475px){.title-text{font-size:24px}.tab-selected div{font-weight:600!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;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}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:20px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.profile-icon{width:70px}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.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: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: OrderDetailsComponent, selector: "simpo-order-details", inputs: ["responseData", "data", "index", "edit", "delete", "customClass", "orderDetailData"], outputs: ["goBackEmitter"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i17.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }] }); }
|
|
14394
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserProfileComponent, isStandalone: true, selector: "simpo-user-profile", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"styles?.layout\" [simpoBackground]=\"styles?.background\" [ngStyle]=\"{'height': isMobile ? '100vh' : '90vh', 'z-index': isMobile ? '100000000' : ''}\" [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\n <ng-container *ngIf=\"!isMobile\">\n <div class=\"p-3 profile-box\" style=\"width: 25%; border-radius: 10px; height: fit-content;\" [style.order]=\"styles?.swap ? '1' : '0'\">\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; height: 70px;\" [simpoColor]=\"styles?.background?.color\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100\" class=\"profile-icon\">\n <div class=\"profile-detials\" >\n <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\n <h6 class=\"d-flex align-items-center font-weight-normal position-relative\" *ngIf=\"getUserDetails?.contact?.mobile?.length\">\n <mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span>\n <!-- <mat-icon class=\"edit-icon\" (click)=\"editProfileData('MOBILE')\">edit</mat-icon> -->\n </h6>\n <h6 class=\"d-flex align-items-center font-weight-normal position-relative\" *ngIf=\"getUserDetails?.contact?.email?.length\">\n <mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span>\n <!-- <mat-icon class=\"edit-icon\" (click)=\"editProfileData('EMAIL')\">edit</mat-icon> -->\n </h6>\n </div>\n </div>\n <div class=\"tabs\">\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\n <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [simpoColor]=\"styles?.background?.color\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\">\n <!-- <mat-icon [style.color]=\"getSupportingColor(getCardBGColor)\">{{tab.icon}}</mat-icon> -->\n <img [src]=\"tab.image | genderIcon\" alt=\"\" style=\"height: 20px;\" [simpoColor]=\"styles?.background?.color\">\n <div class=\"tab font-weight-normal\">{{tab.value}}</div>\n </div>\n </ng-container>\n <div class=\"d-flex\" style=\"gap: 5px;\">\n <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\n <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"[simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\">Logout</button>\n </div>\n </div>\n </div>\n <div class=\"orders-sec\" [simpoBorder]=\"styles?.border\" [style.order]=\"styles?.swap ? '0' : '1'\" [simpoBackground]=\"styles?.background\">\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\n <ng-container *ngSwitchCase=\"'Orders'\">\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Address'\">\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Account Details'\">\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Logout'\">\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Wishlist'\">\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n <ng-container *ngIf=\"isMobile\">\n <div class=\"w-100 position-relative\" style=\"height: 80vh;\">\n <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\">\n <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\" (click)=\"goBack()\">keyboard_backspace</mat-icon>\n <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\n </div>\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\n <ng-container *ngSwitchCase=\"''\">\n <section class=\"top-sec\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\" style=\"width: 50px; height: 50px;\">\n <div class=\"d-flex flex-column align-items-center\">\n <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\n <h6 class=\"d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\n <h6 class=\"d-flex align-items-center font-weight-normal\" *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\n </div>\n </section>\n <section class=\"list-sec\">\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\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)\">\n <img [src]=\"tab.image | genderIcon\" alt=\"\" [style.color]=\"styles?.background?.accentColor\">\n <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">{{tab.value}}</div>\n </div>\n\n </ng-container>\n </section>\n <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\n <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\n <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Orders'\">\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Address'\">\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Account Details'\">\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Logout'\">\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Wishlist'\">\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\n </ng-container>\n\n </ng-container>\n </div>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n\n</section>\n\n<ng-template #OrderSection>\n <h1 class=\"onlyDesktop\">My Orders</h1>\n <div class=\"d-flex my-3 orderlist onlyDesktop\">\n <ng-container *ngFor=\"let tab of tabs\">\n <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">{{tab.value}}</div>\n </ng-container>\n </div>\n <div class=\"order-list\">\n <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\n <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\n <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\n </div>\n </ng-container>\n <ng-template #showEmptyScreen>\n <section class=\"empty-cart m-auto\">\n <div>\n <div class=\"cart-image\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\"\n [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\n </div>\n <div class=\"cart-text \">\n <ng-container *ngFor=\"let text of content?.inputText\">\n <div class=\"heading-medium d-flex justify-content-center content-side\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n\n </div>\n </ng-container>\n </div>\n </div>\n </section>\n </ng-template>\n </div>\n</ng-template>\n<ng-template #OrderDetails>\n <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\" (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\n</ng-template>\n<ng-template #AddressSection>\n <div class=\"d-flex justify-content-between mb-2\">\n <h1 class=\"title-text\">My Address</h1>\n <button class=\"address-btn\" (click)=\"addNewAddress()\" [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\n </div>\n <div class=\"address-list\">\n <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\n <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\n <div class=\"address\" [style.width]=\"getProductWidth\">\n <div class=\"address-left\">\n <div class=\"top\">\n <span class=\"fw-bold mr-2\">{{address.receiverName}}</span>\n <span class=\"address-type\">{{address.addressType}}</span>\n </div>\n <div class=\"address-det trim-text\">{{address.addressLine1}}</div>\n <div class=\"phone\">\n <span>Phone:</span>\n <span class=\"address-phone\">{{address.receiverPhone}}</span>\n </div>\n </div>\n <div class=\"address-right\">\n <mat-icon (click)=\"editAddress(idx)\">edit</mat-icon>\n <mat-icon (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\n </div>\n </div>\n </ng-container>\n </ng-container>\n <ng-template #showEmptyAddress>\n <section class=\"empty-cart m-auto\">\n <div>\n <div class=\"cart-image\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\n </div>\n <div class=\"cart-text\">\n <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\n <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\n <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery</div>\n <!-- </ng-container> -->\n </div>\n </div>\n </section>\n </ng-template>\n </div>\n</ng-template>\n<ng-template #AccountsSection>\n <h1 class=\"onlyDesktop\">My Accounts</h1>\n</ng-template>\n<ng-template #LogoutSection>\n <h1 class=\"onlyDesktop\">Logout</h1>\n</ng-template>\n<ng-template #OrderCard let-order=\"data\">\n <div (click)=\"goToOrderDetails(order)\" class=\"cursor-pointer\">\n <div class=\"top\">\n <span class=\"font-weight-normal\">{{order.orderNum}}</span>\n <mat-icon>arrow_forward_ios</mat-icon>\n </div>\n <div class=\"middle my-2\">\n <span>{{order.createdTimeStamp | date: 'medium'}}</span>\n <span class=\"font-weight-bold\">{{order?.brandOrderDetails?.[0]?.brandName | titlecase}}</span>\n </div>\n <hr />\n <div class=\"bottom\">\n <span class=\"font-weight-normal\">Amount: <span> <span [innerHTML]=\"currency\"></span> {{ order.billDetails.discountAmount ? (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount + order?.billDetails?.totalTaxAfterDiscount) :\n order.billDetails.totalGrossValue }}</span></span>\n <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">{{ order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | uppercase }}</span>\n </div>\n </div>\n</ng-template>\n<ng-template #WishlistDetails>\n <h1 class=\"onlyDesktop\">My Wishlist</h1>\n <div class=\"wishlist-list\">\n <div class=\"d-flex flex-wrap justify-content-between\" style=\"gap: 10px;\">\n <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\n <div class=\"cart-items\">\n <div class=\"d-flex item-parent\">\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\n </div>\n <div class=\"col-md-8 h-100 item-desc\">\n <div class=\"lh-23\">\n <div class=\"item-name heading-large\">{{item.itemName}}</div>\n <div class=\"price-with-tax\">\n <span [innerHTML]='currency'></span> {{item.discountedPrice}}\n </div>\n <div class=\"d-flex action-btn\" style=\"gap: 5px;\">\n <div class=\"item-quantity\" *ngIf=\"item.quantity\">\n <span class=\"cursor\" (click)=\"addToFav(item, 'SUBSTRACT')\">-</span>\n <span>{{item.quantity}}</span>\n <span class=\"cursor\" (click)=\"addToFav(item, 'ADD')\">+</span>\n </div>\n <div class=\"item-quantity\" *ngIf=\"!item.quantity\" (click)=\"addToFav(item, 'ADD')\">Add to Quantity</div>\n <div class=\"item-quantity\" (click)=\"moveToCart(item)\">Move to Cart</div>\n </div>\n </div>\n </div>\n <div class=\"position-relative d-flex flex-column justify-content-between iemPrice\" style=\"right: 5px\">\n <div class=\"item-price\" *ngIf=\"item.quantity\"><span [innerHTML]='currency'></span> {{(item.discountedPrice) * item.quantity}}</div>\n <div>\n <mat-icon class=\"delete-item\" (click)=\"deleteFromWhislist(item)\" *ngIf=\"!isMobile\">delete</mat-icon>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n <ng-template #showEmptyWishlistScreen>\n <section class=\"empty-cart m-auto\">\n <div>\n <div class=\"cart-image\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\n </div>\n <div class=\"cart-text\">\n <ng-container *ngFor=\"let text of content?.inputText\">\n <div class=\"heading-medium d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{ text.value }}</div>\n </ng-container>\n </div>\n </div>\n </section>\n </ng-template>\n</ng-template>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '40vh',\n 'border-radius': '10px',\n 'position': 'relative',\n 'right': '5px'\n }\">\n</ngx-skeleton-loader>\n", styles: [".total-container{position:relative;height:auto;overflow:scroll}.mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.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:80%;margin-left:20px;margin-right:20px;padding:15px;overflow-y:auto;border:1px solid #d3d3d324;box-shadow:#0000000d 0 0 0 1px}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order{border:1px solid lightgray;padding:15px;border-radius:5px;margin:10px 0;box-shadow:#0000000d 0 0 0 1px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;min-height:40vh;max-height:71vh;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.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:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}.profile-box{border:1px solid lightgray;box-shadow:#00000029 0 1px 4px}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.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;border:1.5px solid white}.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{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.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;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}@media screen and (max-width: 475px){.title-text{font-size:24px}.tab-selected div{font-weight:600!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;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}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:20px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.profile-icon{width:70px}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.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: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: OrderDetailsComponent, selector: "simpo-order-details", inputs: ["responseData", "data", "index", "edit", "delete", "customClass", "orderDetailData"], outputs: ["goBackEmitter"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }] }); }
|
|
14368
14395
|
}
|
|
14369
14396
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserProfileComponent, decorators: [{
|
|
14370
14397
|
type: Component,
|
|
@@ -14752,7 +14779,7 @@ class AuthenticateUserComponent extends BaseSection {
|
|
|
14752
14779
|
return window.innerWidth <= 475;
|
|
14753
14780
|
}
|
|
14754
14781
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthenticateUserComponent, deps: [{ token: MAT_DIALOG_DATA, optional: true }, { token: MAT_BOTTOM_SHEET_DATA, optional: true }, { token: RestService }, { token: i2$4.Router }, { token: i2$1.MatDialog }, { token: StorageServiceService }, { token: i2$1.MatDialogRef, optional: true }, { token: i8$3.MatBottomSheetRef, optional: true }, { token: EventsService }, { token: i5$1.MessageService }, { token: i8.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14755
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AuthenticateUserComponent, isStandalone: true, selector: "simpo-authenticate-user", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n <div [style.height.vh]=\"isMobile ? '40' : ''\" [id]=\"data?.id\" simpoHover\n (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\" [attr.style]=\"customClass\">\n <ng-container [ngSwitch]=\"screen\">\n <section style=\"padding: 14px;\"\n class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\n *ngSwitchCase=\"'LOGIN'\" [ngClass]=\"{'fullSection': isMobile}\">\n <h5 class=\"text-center onlyDesktop\" [style.color]=\"data?.styles?.background?.accentColor\">\n {{data?.content?.siteName?.value}}</h5>\n <h2 class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Welcome</h2>\n <div class=\"text-center-1\" [style.color]=\"data?.styles?.background?.accentColor\">\n <div class=\"login\" (click)=\"openLogin()\" ><button class=\"loginButton-1\" [class.active-cls]=\"login\">Login</button></div>\n \n <div class=\"login\" (click)=\"openSignup()\" ><button class=\"loginButton-2\" [class.active-cls]=\"signup\">Signup</button></div>\n \n </div>\n <div class=\"mobile_email\">\n <button class=\"mobile\" (click)=\"mobile_click()\" [class.active-class]=\"m_clicked\">Login using OTP</button>\n <button class=\"mobile\" (click)=\"email_click()\" [class.active-class]=\"e_clicked\">Login using Password</button>\n </div>\n <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\" *ngIf=\"m_clicked\">\n <input type=\"email\" placeholder=\"E-mail\" [(ngModel)]=\"passData.email\" (ngModelChange)=\"isEmailValid(passData.email)\" *ngIf=\"e_clicked\">\n \n <form [formGroup]=\"passwordValidation\">\n <div *ngIf=\"e_clicked\" class=\"password-input\">\n <input class=\"password-2\" type=\"password-2\" placeholder=\"Password\" [(ngModel)]=\"passData.password\" formControlName=\"passwordValid\" >\n <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\n class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n \n </div>\n \n\n <!-- <div class=\"password\" *ngIf=\"e_clicked\">\n \n <div class=\"field\">\n <input class=\"pass-field\" [(ngModel)]=\"this.passData.password\" placeholder=\"Enter password\" matInput > \n <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\n class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n </div>\n </div> -->\n <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"m_clicked\">You will receive an OTP in\n WhatsApp</p>\n <!-- <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"e_clicked\">You will receive an OTP in\n Email</p> -->\n\n <div *ngIf=\"m_clicked\" class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\n <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"generateOTP()\"\n [disabled]=\"!isMobileValid\" *ngIf=\"!buttonLoading\">Login</button>\n <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"buttonLoading\">\n <span>OTP Sent</span>\n <img src=\"https://i.imghippo.com/files/3ScyK1726294453.gif\" alt=\"\" style=\"height: 35px;\">\n </button>\n \n </div>\n <div *ngIf=\"e_clicked\" class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\n <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n [style.color]=\"data?.styles?.background?.accentColor\" \n *ngIf=\"!buttonLoading\" [disabled]=\"emailValid || passwordValidation.invalid\" (click)=\"signinPassword()\">Login</button>\n <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"buttonLoading\">\n <!-- <span>Email Sent</span> -->\n <img src=\"https://i.imghippo.com/files/3ScyK1726294453.gif\" alt=\"\" style=\"height: 35px;\">\n </button>\n <!-- <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Use email\n instead</div> -->\n </div>\n </form>\n \n <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\n <mat-icon>close</mat-icon>\n </div>\n </section>\n <section *ngSwitchCase=\"'OTP'\" style=\"padding: 15px;\"\n class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\n [ngClass]=\"{'fullSection': isMobile}\">\n <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\n <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\n <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we\n have sent via the phone number +{{ countryCode }}{{ mobile\n }}</p>\n <div class=\"otpContainer\">\n <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\n <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" [(ngModel)]=\"otpData[idx]\"\n (keyup)=\"move($event, idx)\">\n </ng-container>\n </div>\n\n <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\n <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifyOTP()\">Verify</button>\n <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\"\n (click)=\"resendOTP()\">Resend code</div>\n </div>\n\n <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\n <mat-icon>close</mat-icon>\n </div>\n <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\n <mat-icon>keyboard_backspace</mat-icon>\n </div>\n </section>\n\n\n <section *ngSwitchCase=\"'SIGNUPOTP'\" style=\"padding: 15px;\"\n class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\n [ngClass]=\"{'fullSection': isMobile}\">\n <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\n <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\n <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we\n have sent via the phone number {{ countryCode }}{{ mobile\n }} and E-mail</p>\n <div class=\"otpContainer\">\n <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\n <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" [(ngModel)]=\"otpData[idx]\"\n (keyup)=\"move($event, idx)\">\n </ng-container>\n </div>\n\n <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\n <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifySignupOTP()\">Verify</button>\n <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\"\n (click)=\"resendOTP()\">Resend code</div>\n </div>\n\n <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\n <mat-icon>close</mat-icon>\n </div>\n <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\n <mat-icon>keyboard_backspace</mat-icon>\n </div>\n </section>\n\n\n\n \n <section *ngSwitchCase=\"'CREATEPASSWORD'\" style=\"padding: 15px;\"\n class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\n [ngClass]=\"{'fullSection': isMobile}\">\n \n <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\n <div>\n <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n [style.color]=\"data?.styles?.background?.accentColor\">Create an Account</h2>\n </div>\n <div class=\"pass-signin\">\n <div class=\"password\">\n <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\"> Mobile Number <span class=\"required\">*</span></div>\n <div class=\"field\">\n <input class=\"countrycode\" [(ngModel)]=\"this.payload.countryCode\" placeholder=\" +91\" matInput [(ngModel)]=\"countryCode\">\n <input class=\"m_num\" [(ngModel)]=\"this.payload.mobile\" type=\"text\" (keypress)=\"validateNumber($event)\" matInput required #mobileCheck=\"ngModel\" onKeyPress=\"if(this.value.length==15) return false;\"\n pattern=\"^[6-9]\\d{9}$|^[1-9]\\d{9}$\" placeholder=\" Mobile\" matInput [(ngModel)]=\"mobilenumber\">\n \n </div>\n </div>\n \n <div class=\"password\">\n <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\"> Email <span class=\"required\">*</span></div>\n <div class=\"field\">\n <input type=\"email\" [(ngModel)]=\"payload.email\" class=\"pass-field\" placeholder=\"E-mail\" (ngModelChange)=\"isEmailValid(payload.email)\">\n \n </div>\n </div>\n <form [formGroup]=\"passwordValidation\">\n <div class=\"password\">\n <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\"> New Password <span class=\"required\">*</span></div>\n <div class=\"field\">\n <input [(ngModel)]=\"this.payload.password\" class=\"pass-field\" placeholder=\"Enter New password\" matInput formControlName=\"passwordValid\">\n <mat-icon matSuffix (click)=\"newPasswordHide = !newPasswordHide\" style=\"cursor:pointer\"\n class=\"eye-icon\">{{newPasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n </div>\n </div>\n </form>\n <div class=\"password\">\n <div class=\"label\" > Confirm Password <span class=\"required\">*</span></div>\n <div class=\"field\">\n <input class=\"pass-field\" placeholder=\" Confirm password\" matInput [(ngModel)]=\"confirmPass\" (ngModelChange)=\"isConfirmPAsswordValid(confirmPass)\">\n <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\n class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n </div>\n </div>\n \n <div class=\"password-1\">\n <div>\n Already have an account?\n </div>\n <div (click)=\"openLogin()\" class=\"backToLogin\">Login</div>\n </div>\n </div>\n <div class=\"signin\" (click)=\"createPassword()\">\n <button class=\"signin-button\" [disabled]=\"confirm || emailValid\" >Signup</button>\n </div>\n \n </section> \n </ng-container> \n </div>\n \n <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\n <mat-icon>close</mat-icon>\n </div>\n <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\n <mat-icon>keyboard_backspace</mat-icon>\n </div>\n \n\n</ng-container>\n\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '40vh',\n 'border-radius': '10px',\n 'position': 'relative',\n 'right': '5px'\n }\">\n</ngx-skeleton-loader>\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n</ng-container>\n\n<div [ngClass]=\"{'hover_effect': edit }\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n</div>\n<div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n</div>", styles: ["input,button{width:80%!important;margin:10px auto}input{padding:10px}.alternate-opt:hover{text-decoration:underline;cursor:pointer}button:disabled{background-color:#d3d3d3!important}.btn{border:1.5px solid transparent}.login{cursor:pointer}.login:hover{color:#0496ff}.btn:hover{background-color:#000;color:#fff!important}.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 only screen and (max-width: 475px){.onlyDesktop{display:none}.pass-field{width:92%}.pass-signin{margin-left:0!important;margin-top:0!important;gap:15px}.m_num{width:70%}.text-center{text-align:center!important;font-size:26px;font-weight:500}.verify-otp{text-align:left!important;margin-top:8%}.otpContainer{width:100vw;margin-left:-20px;right:10px;justify-content:space-between;padding:0 5px!important}.otpContainer .otp{height:45px!important;width:45px!important;margin:0!important}button,input{width:80%!important}.fullSection{justify-content:start!important}.action-btn{position:relative;bottom:6px;width:95%;right:-2px}.action-btn .text-center{text-align:center!important}.otpContainer{margin-top:20px;position:relative;right:10px}}.loginButton-1{width:100%!important;border:1px solid grey;border-radius:6px 0 0 6px/6px 0px 0px 6px;font-size:18px!important;font-weight:100;background-color:transparent;padding:1px 20px}.loginButton-2{width:100%!important;border:1px solid grey;border-radius:0 6px 6px 0/0px 6px 6px 0px;font-size:18px!important;font-weight:100;background-color:transparent;padding:1px 20px}.loginButton-1:hover,.loginButton-2:hover{background-color:#0496ff;color:#fff}.text-center-1{display:flex;justify-content:center;margin:5px}.mobile{border:unset;border-radius:5px;width:48%!important;margin:unset!important;background-color:transparent;font-size:14px!important}.mobile_email{display:flex;justify-content:center}.active-cls{background-color:#0496ff;color:#fff}.active-class{color:#0496ff}.field{display:flex;width:100%;gap:2%;align-items:center}.password{display:flex;flex-direction:column;width:50%}.backToLogin{cursor:pointer}.backToLogin:hover{color:#0496ff}.password-2{display:flex;flex-direction:column;width:80%;margin-left:10%!important;margin-right:13px!important}.password-input{display:flex;align-items:center}.pass-field{margin:unset}.password-1{display:flex;gap:10px}.password{justify-content:start!important;display:flex;flex-direction:column;width:100%;align-items:center}.label{width:100%;text-align:left;font-size:13px;font-weight:600;padding-left:0}.signin{display:flex;justify-content:center;margin-right:16px}.signin-button{width:25%!important;border:1px solid;border-radius:5px}.pass-signin{display:flex;flex-direction:column;gap:20px;margin-left:56px;margin-top:10px}.countrycode{width:20%!important;margin:unset}.m_num{width:58%!important;margin:unset}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i8.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i8.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i8.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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i17.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i11.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type:
|
|
14782
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AuthenticateUserComponent, isStandalone: true, selector: "simpo-authenticate-user", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n <div [style.height.vh]=\"isMobile ? '40' : ''\" [id]=\"data?.id\" simpoHover\n (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\" [attr.style]=\"customClass\">\n <ng-container [ngSwitch]=\"screen\">\n <section style=\"padding: 14px;\"\n class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\n *ngSwitchCase=\"'LOGIN'\" [ngClass]=\"{'fullSection': isMobile}\">\n <h5 class=\"text-center onlyDesktop\" [style.color]=\"data?.styles?.background?.accentColor\">\n {{data?.content?.siteName?.value}}</h5>\n <h2 class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Welcome</h2>\n <div class=\"text-center-1\" [style.color]=\"data?.styles?.background?.accentColor\">\n <div class=\"login\" (click)=\"openLogin()\" ><button class=\"loginButton-1\" [class.active-cls]=\"login\">Login</button></div>\n \n <div class=\"login\" (click)=\"openSignup()\" ><button class=\"loginButton-2\" [class.active-cls]=\"signup\">Signup</button></div>\n \n </div>\n <div class=\"mobile_email\">\n <button class=\"mobile\" (click)=\"mobile_click()\" [class.active-class]=\"m_clicked\">Login using OTP</button>\n <button class=\"mobile\" (click)=\"email_click()\" [class.active-class]=\"e_clicked\">Login using Password</button>\n </div>\n <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\" *ngIf=\"m_clicked\">\n <input type=\"email\" placeholder=\"E-mail\" [(ngModel)]=\"passData.email\" (ngModelChange)=\"isEmailValid(passData.email)\" *ngIf=\"e_clicked\">\n \n <form [formGroup]=\"passwordValidation\">\n <div *ngIf=\"e_clicked\" class=\"password-input\">\n <input class=\"password-2\" type=\"password-2\" placeholder=\"Password\" [(ngModel)]=\"passData.password\" formControlName=\"passwordValid\" >\n <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\n class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n \n </div>\n \n\n <!-- <div class=\"password\" *ngIf=\"e_clicked\">\n \n <div class=\"field\">\n <input class=\"pass-field\" [(ngModel)]=\"this.passData.password\" placeholder=\"Enter password\" matInput > \n <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\n class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n </div>\n </div> -->\n <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"m_clicked\">You will receive an OTP in\n WhatsApp</p>\n <!-- <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"e_clicked\">You will receive an OTP in\n Email</p> -->\n\n <div *ngIf=\"m_clicked\" class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\n <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"generateOTP()\"\n [disabled]=\"!isMobileValid\" *ngIf=\"!buttonLoading\">Login</button>\n <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"buttonLoading\">\n <span>OTP Sent</span>\n <img src=\"https://i.imghippo.com/files/3ScyK1726294453.gif\" alt=\"\" style=\"height: 35px;\">\n </button>\n \n </div>\n <div *ngIf=\"e_clicked\" class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\n <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n [style.color]=\"data?.styles?.background?.accentColor\" \n *ngIf=\"!buttonLoading\" [disabled]=\"emailValid || passwordValidation.invalid\" (click)=\"signinPassword()\">Login</button>\n <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"buttonLoading\">\n <!-- <span>Email Sent</span> -->\n <img src=\"https://i.imghippo.com/files/3ScyK1726294453.gif\" alt=\"\" style=\"height: 35px;\">\n </button>\n <!-- <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Use email\n instead</div> -->\n </div>\n </form>\n \n <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\n <mat-icon>close</mat-icon>\n </div>\n </section>\n <section *ngSwitchCase=\"'OTP'\" style=\"padding: 15px;\"\n class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\n [ngClass]=\"{'fullSection': isMobile}\">\n <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\n <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\n <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we\n have sent via the phone number +{{ countryCode }}{{ mobile\n }}</p>\n <div class=\"otpContainer\">\n <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\n <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" [(ngModel)]=\"otpData[idx]\"\n (keyup)=\"move($event, idx)\">\n </ng-container>\n </div>\n\n <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\n <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifyOTP()\">Verify</button>\n <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\"\n (click)=\"resendOTP()\">Resend code</div>\n </div>\n\n <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\n <mat-icon>close</mat-icon>\n </div>\n <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\n <mat-icon>keyboard_backspace</mat-icon>\n </div>\n </section>\n\n\n <section *ngSwitchCase=\"'SIGNUPOTP'\" style=\"padding: 15px;\"\n class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\n [ngClass]=\"{'fullSection': isMobile}\">\n <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\n <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\n <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we\n have sent via the phone number {{ countryCode }}{{ mobile\n }} and E-mail</p>\n <div class=\"otpContainer\">\n <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\n <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" [(ngModel)]=\"otpData[idx]\"\n (keyup)=\"move($event, idx)\">\n </ng-container>\n </div>\n\n <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\n <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifySignupOTP()\">Verify</button>\n <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\"\n (click)=\"resendOTP()\">Resend code</div>\n </div>\n\n <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\n <mat-icon>close</mat-icon>\n </div>\n <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\n <mat-icon>keyboard_backspace</mat-icon>\n </div>\n </section>\n\n\n\n \n <section *ngSwitchCase=\"'CREATEPASSWORD'\" style=\"padding: 15px;\"\n class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\n [ngClass]=\"{'fullSection': isMobile}\">\n \n <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\n <div>\n <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n [style.color]=\"data?.styles?.background?.accentColor\">Create an Account</h2>\n </div>\n <div class=\"pass-signin\">\n <div class=\"password\">\n <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\"> Mobile Number <span class=\"required\">*</span></div>\n <div class=\"field\">\n <input class=\"countrycode\" [(ngModel)]=\"this.payload.countryCode\" placeholder=\" +91\" matInput [(ngModel)]=\"countryCode\">\n <input class=\"m_num\" [(ngModel)]=\"this.payload.mobile\" type=\"text\" (keypress)=\"validateNumber($event)\" matInput required #mobileCheck=\"ngModel\" onKeyPress=\"if(this.value.length==15) return false;\"\n pattern=\"^[6-9]\\d{9}$|^[1-9]\\d{9}$\" placeholder=\" Mobile\" matInput [(ngModel)]=\"mobilenumber\">\n \n </div>\n </div>\n \n <div class=\"password\">\n <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\"> Email <span class=\"required\">*</span></div>\n <div class=\"field\">\n <input type=\"email\" [(ngModel)]=\"payload.email\" class=\"pass-field\" placeholder=\"E-mail\" (ngModelChange)=\"isEmailValid(payload.email)\">\n \n </div>\n </div>\n <form [formGroup]=\"passwordValidation\">\n <div class=\"password\">\n <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\"> New Password <span class=\"required\">*</span></div>\n <div class=\"field\">\n <input [(ngModel)]=\"this.payload.password\" class=\"pass-field\" placeholder=\"Enter New password\" matInput formControlName=\"passwordValid\">\n <mat-icon matSuffix (click)=\"newPasswordHide = !newPasswordHide\" style=\"cursor:pointer\"\n class=\"eye-icon\">{{newPasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n </div>\n </div>\n </form>\n <div class=\"password\">\n <div class=\"label\" > Confirm Password <span class=\"required\">*</span></div>\n <div class=\"field\">\n <input class=\"pass-field\" placeholder=\" Confirm password\" matInput [(ngModel)]=\"confirmPass\" (ngModelChange)=\"isConfirmPAsswordValid(confirmPass)\">\n <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\n class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n </div>\n </div>\n \n <div class=\"password-1\">\n <div>\n Already have an account?\n </div>\n <div (click)=\"openLogin()\" class=\"backToLogin\">Login</div>\n </div>\n </div>\n <div class=\"signin\" (click)=\"createPassword()\">\n <button class=\"signin-button\" [disabled]=\"confirm || emailValid\" >Signup</button>\n </div>\n \n </section> \n </ng-container> \n </div>\n \n <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\n <mat-icon>close</mat-icon>\n </div>\n <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\n <mat-icon>keyboard_backspace</mat-icon>\n </div>\n \n\n</ng-container>\n\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '40vh',\n 'border-radius': '10px',\n 'position': 'relative',\n 'right': '5px'\n }\">\n</ngx-skeleton-loader>\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n</ng-container>\n\n<div [ngClass]=\"{'hover_effect': edit }\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n</div>\n<div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n</div>", styles: ["input,button{width:80%!important;margin:10px auto}input{padding:10px}.alternate-opt:hover{text-decoration:underline;cursor:pointer}button:disabled{background-color:#d3d3d3!important}.btn{border:1.5px solid transparent}.login{cursor:pointer}.login:hover{color:#0496ff}.btn:hover{background-color:#000;color:#fff!important}.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 only screen and (max-width: 475px){.onlyDesktop{display:none}.pass-field{width:92%}.pass-signin{margin-left:0!important;margin-top:0!important;gap:15px}.m_num{width:70%}.text-center{text-align:center!important;font-size:26px;font-weight:500}.verify-otp{text-align:left!important;margin-top:8%}.otpContainer{width:100vw;margin-left:-20px;right:10px;justify-content:space-between;padding:0 5px!important}.otpContainer .otp{height:45px!important;width:45px!important;margin:0!important}button,input{width:80%!important}.fullSection{justify-content:start!important}.action-btn{position:relative;bottom:6px;width:95%;right:-2px}.action-btn .text-center{text-align:center!important}.otpContainer{margin-top:20px;position:relative;right:10px}}.loginButton-1{width:100%!important;border:1px solid grey;border-radius:6px 0 0 6px/6px 0px 0px 6px;font-size:18px!important;font-weight:100;background-color:transparent;padding:1px 20px}.loginButton-2{width:100%!important;border:1px solid grey;border-radius:0 6px 6px 0/0px 6px 6px 0px;font-size:18px!important;font-weight:100;background-color:transparent;padding:1px 20px}.loginButton-1:hover,.loginButton-2:hover{background-color:#0496ff;color:#fff}.text-center-1{display:flex;justify-content:center;margin:5px}.mobile{border:unset;border-radius:5px;width:48%!important;margin:unset!important;background-color:transparent;font-size:14px!important}.mobile_email{display:flex;justify-content:center}.active-cls{background-color:#0496ff;color:#fff}.active-class{color:#0496ff}.field{display:flex;width:100%;gap:2%;align-items:center}.password{display:flex;flex-direction:column;width:50%}.backToLogin{cursor:pointer}.backToLogin:hover{color:#0496ff}.password-2{display:flex;flex-direction:column;width:80%;margin-left:10%!important;margin-right:13px!important}.password-input{display:flex;align-items:center}.pass-field{margin:unset}.password-1{display:flex;gap:10px}.password{justify-content:start!important;display:flex;flex-direction:column;width:100%;align-items:center}.label{width:100%;text-align:left;font-size:13px;font-weight:600;padding-left:0}.signin{display:flex;justify-content:center;margin-right:16px}.signin-button{width:25%!important;border:1px solid;border-radius:5px}.pass-signin{display:flex;flex-direction:column;gap:20px;margin-left:56px;margin-top:10px}.countrycode{width:20%!important;margin:unset}.m_num{width:58%!important;margin:unset}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i8.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i8.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i8.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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i11.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type:
|
|
14756
14783
|
// FormGroup,
|
|
14757
14784
|
// FormBuilder,
|
|
14758
14785
|
// Validators,
|
|
@@ -14892,7 +14919,7 @@ class VerifyComponent extends BaseSection {
|
|
|
14892
14919
|
}, 100);
|
|
14893
14920
|
}
|
|
14894
14921
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: VerifyComponent, deps: [{ token: RestService }, { token: i2$4.Router }, { token: StorageServiceService }, { token: i5$1.MessageService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14895
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: VerifyComponent, isStandalone: true, selector: "simpo-verify-payment", inputs: { data: "data", responseData: "responseData", edit: "edit", index: "index", delete: "delete", customClass: "customClass" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n<section class=\"d-flex flex-column align-items-center justify-content-center total-container\" style=\"height: 100vh;\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"getImageUrl\" style=\"height: 200px; width: 200px;\" [alt]=\"content?.image?.altText\">\n <span class=\"font-bold\">{{loadingText}}</span>\n\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n</section>\n", styles: ["span{color:#000;font-weight:600;font-size:larger}.total-container{position:relative;height:auto}\n"], dependencies: [{ kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type:
|
|
14922
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: VerifyComponent, isStandalone: true, selector: "simpo-verify-payment", inputs: { data: "data", responseData: "responseData", edit: "edit", index: "index", delete: "delete", customClass: "customClass" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n<section class=\"d-flex flex-column align-items-center justify-content-center total-container\" style=\"height: 100vh;\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"getImageUrl\" style=\"height: 200px; width: 200px;\" [alt]=\"content?.image?.altText\">\n <span class=\"font-bold\">{{loadingText}}</span>\n\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n</section>\n", styles: ["span{color:#000;font-weight:600;font-size:larger}.total-container{position:relative;height:auto}\n"], dependencies: [{ kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }] }); }
|
|
14896
14923
|
}
|
|
14897
14924
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: VerifyComponent, decorators: [{
|
|
14898
14925
|
type: Component,
|