simpo-component-library 1.4.285 → 1.4.287
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/authenticate-user/authenticate-user.component.mjs +5 -3
- package/esm2022/lib/ecommerce/sections/product-desc/product-desc.component.mjs +3 -3
- package/esm2022/lib/sections/navbar-section/navbar-section.component.mjs +3 -3
- package/fesm2022/simpo-component-library.mjs +8 -6
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/package.json +1 -1
- package/simpo-component-library-1.4.285.tgz +0 -0
- package/simpo-component-library-1.4.286.tgz +0 -0
- package/simpo-component-library-1.4.287.tgz +0 -0
|
@@ -3557,6 +3557,8 @@ class AuthenticateUserComponent extends BaseSection {
|
|
|
3557
3557
|
this.storageService.updateAllData();
|
|
3558
3558
|
if (this.dialogRef)
|
|
3559
3559
|
this.dialogRef.close();
|
|
3560
|
+
if (this.bottomsheetRef)
|
|
3561
|
+
this.bottomsheetRef.dismiss();
|
|
3560
3562
|
Swal.fire({
|
|
3561
3563
|
icon: "success",
|
|
3562
3564
|
title: "Hurray",
|
|
@@ -3601,7 +3603,7 @@ class AuthenticateUserComponent extends BaseSection {
|
|
|
3601
3603
|
return window.innerWidth <= 475;
|
|
3602
3604
|
}
|
|
3603
3605
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AuthenticateUserComponent, deps: [{ token: MAT_DIALOG_DATA, optional: true }, { token: MAT_BOTTOM_SHEET_DATA, optional: true }, { token: RestService }, { token: i2$4.Router }, { token: i3.MatDialog }, { token: StorageServiceService }, { token: i3.MatDialogRef, optional: true }, { token: i5.MatBottomSheetRef, optional: true }, { token: EventsService }, { token: i7$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3604
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AuthenticateUserComponent, isStandalone: true, selector: "simpo-authenticate-user", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <div [style.height.vh]=\"isMobile ? '40' : ''\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n <ng-container [ngSwitch]=\"screen\">\r\n <section style=\"padding: 15px;\"\r\n class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n *ngSwitchCase=\"'LOGIN'\"[ngClass]=\"{'fullSection': isMobile}\">\r\n <h5 class=\"text-center onlyDesktop\" [style.color]=\"data?.styles?.background?.accentColor\">{{data?.content?.siteName?.value}}</h5>\r\n <h2 class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Welcome</h2>\r\n <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Log or Signup in to your account</p>\r\n <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\">\r\n <p class=\"text-center\"[style.color]=\"data?.styles?.background?.accentColor\">You will receive an OTP in WhatsApp</p>\r\n\r\n <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"generateOTP()\" [disabled]=\"!isMobileValid\">Send OTP</button>\r\n <!-- <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Use email\r\n instead</div> -->\r\n </div>\r\n <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n </section>\r\n <section *ngSwitchCase=\"'OTP'\" style=\"padding: 15px;\"\r\n class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\" [ngClass]=\"{'fullSection': isMobile}\">\r\n <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\r\n <h2 class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\r\n <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we have sent via the phone number +{{ countryCode }}{{ mobile\r\n }}</p>\r\n <div class=\"otpContainer\">\r\n <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\r\n <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" [(ngModel)]=\"otpData[idx]\" (keyup)=\"move($event, idx)\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n <button class=\"btn\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifyOTP()\">Verify</button>\r\n <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"resendOTP()\">Resend code</div>\r\n </div>\r\n\r\n <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\r\n <mat-icon>keyboard_backspace</mat-icon>\r\n </div>\r\n </section>\r\n </ng-container>\r\n </div>\r\n</ng-container>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n</ngx-skeleton-loader>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n\r\n<div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n<div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n</div>", 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}.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}.text-center{text-align:left!important}.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:100%!important}.fullSection{justify-content:start!important}.action-btn{position:
|
|
3606
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AuthenticateUserComponent, isStandalone: true, selector: "simpo-authenticate-user", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <div [style.height.vh]=\"isMobile ? '40' : ''\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n <ng-container [ngSwitch]=\"screen\">\r\n <section style=\"padding: 15px;\"\r\n class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n *ngSwitchCase=\"'LOGIN'\"[ngClass]=\"{'fullSection': isMobile}\">\r\n <h5 class=\"text-center onlyDesktop\" [style.color]=\"data?.styles?.background?.accentColor\">{{data?.content?.siteName?.value}}</h5>\r\n <h2 class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Welcome</h2>\r\n <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Log or Signup in to your account</p>\r\n <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\">\r\n <p class=\"text-center\"[style.color]=\"data?.styles?.background?.accentColor\">You will receive an OTP in WhatsApp</p>\r\n\r\n <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"generateOTP()\" [disabled]=\"!isMobileValid\">Send OTP</button>\r\n <!-- <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Use email\r\n instead</div> -->\r\n </div>\r\n <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n </section>\r\n <section *ngSwitchCase=\"'OTP'\" style=\"padding: 15px;\"\r\n class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\" [ngClass]=\"{'fullSection': isMobile}\">\r\n <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\r\n <h2 class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\r\n <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we have sent via the phone number +{{ countryCode }}{{ mobile\r\n }}</p>\r\n <div class=\"otpContainer\">\r\n <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\r\n <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" [(ngModel)]=\"otpData[idx]\" (keyup)=\"move($event, idx)\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n <button class=\"btn\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifyOTP()\">Verify</button>\r\n <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"resendOTP()\">Resend code</div>\r\n </div>\r\n\r\n <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\r\n <mat-icon>keyboard_backspace</mat-icon>\r\n </div>\r\n </section>\r\n </ng-container>\r\n </div>\r\n</ng-container>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n</ngx-skeleton-loader>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n\r\n<div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n<div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n</div>", 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}.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}.text-center{text-align:left!important}.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:100%!important}.fullSection{justify-content:start!important}.action-btn{position:relative;bottom:0;width:95%}.action-btn .text-center{text-align:center!important}.otpContainer{margin-top:20px;position:relative;right:10px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "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: i12.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
|
|
3605
3607
|
}
|
|
3606
3608
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AuthenticateUserComponent, decorators: [{
|
|
3607
3609
|
type: Component,
|
|
@@ -3613,7 +3615,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
3613
3615
|
SimpoComponentModule,
|
|
3614
3616
|
ButtonDirectiveDirective,
|
|
3615
3617
|
ToastModule
|
|
3616
|
-
], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\r\n <div [style.height.vh]=\"isMobile ? '40' : ''\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n <ng-container [ngSwitch]=\"screen\">\r\n <section style=\"padding: 15px;\"\r\n class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n *ngSwitchCase=\"'LOGIN'\"[ngClass]=\"{'fullSection': isMobile}\">\r\n <h5 class=\"text-center onlyDesktop\" [style.color]=\"data?.styles?.background?.accentColor\">{{data?.content?.siteName?.value}}</h5>\r\n <h2 class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Welcome</h2>\r\n <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Log or Signup in to your account</p>\r\n <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\">\r\n <p class=\"text-center\"[style.color]=\"data?.styles?.background?.accentColor\">You will receive an OTP in WhatsApp</p>\r\n\r\n <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"generateOTP()\" [disabled]=\"!isMobileValid\">Send OTP</button>\r\n <!-- <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Use email\r\n instead</div> -->\r\n </div>\r\n <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n </section>\r\n <section *ngSwitchCase=\"'OTP'\" style=\"padding: 15px;\"\r\n class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\" [ngClass]=\"{'fullSection': isMobile}\">\r\n <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\r\n <h2 class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\r\n <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we have sent via the phone number +{{ countryCode }}{{ mobile\r\n }}</p>\r\n <div class=\"otpContainer\">\r\n <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\r\n <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" [(ngModel)]=\"otpData[idx]\" (keyup)=\"move($event, idx)\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n <button class=\"btn\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifyOTP()\">Verify</button>\r\n <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"resendOTP()\">Resend code</div>\r\n </div>\r\n\r\n <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\r\n <mat-icon>keyboard_backspace</mat-icon>\r\n </div>\r\n </section>\r\n </ng-container>\r\n </div>\r\n</ng-container>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n</ngx-skeleton-loader>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n\r\n<div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n<div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n</div>", 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}.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}.text-center{text-align:left!important}.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:100%!important}.fullSection{justify-content:start!important}.action-btn{position:
|
|
3618
|
+
], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\r\n <div [style.height.vh]=\"isMobile ? '40' : ''\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n <ng-container [ngSwitch]=\"screen\">\r\n <section style=\"padding: 15px;\"\r\n class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n *ngSwitchCase=\"'LOGIN'\"[ngClass]=\"{'fullSection': isMobile}\">\r\n <h5 class=\"text-center onlyDesktop\" [style.color]=\"data?.styles?.background?.accentColor\">{{data?.content?.siteName?.value}}</h5>\r\n <h2 class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Welcome</h2>\r\n <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Log or Signup in to your account</p>\r\n <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\">\r\n <p class=\"text-center\"[style.color]=\"data?.styles?.background?.accentColor\">You will receive an OTP in WhatsApp</p>\r\n\r\n <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"generateOTP()\" [disabled]=\"!isMobileValid\">Send OTP</button>\r\n <!-- <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Use email\r\n instead</div> -->\r\n </div>\r\n <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n </section>\r\n <section *ngSwitchCase=\"'OTP'\" style=\"padding: 15px;\"\r\n class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\" [ngClass]=\"{'fullSection': isMobile}\">\r\n <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\r\n <h2 class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\r\n <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we have sent via the phone number +{{ countryCode }}{{ mobile\r\n }}</p>\r\n <div class=\"otpContainer\">\r\n <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\r\n <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" [(ngModel)]=\"otpData[idx]\" (keyup)=\"move($event, idx)\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n <button class=\"btn\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifyOTP()\">Verify</button>\r\n <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"resendOTP()\">Resend code</div>\r\n </div>\r\n\r\n <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\r\n <mat-icon>keyboard_backspace</mat-icon>\r\n </div>\r\n </section>\r\n </ng-container>\r\n </div>\r\n</ng-container>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n</ngx-skeleton-loader>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n\r\n<div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n<div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n</div>", 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}.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}.text-center{text-align:left!important}.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:100%!important}.fullSection{justify-content:start!important}.action-btn{position:relative;bottom:0;width:95%}.action-btn .text-center{text-align:center!important}.otpContainer{margin-top:20px;position:relative;right:10px}}\n"] }]
|
|
3617
3619
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
3618
3620
|
type: Optional
|
|
3619
3621
|
}, {
|
|
@@ -3822,7 +3824,7 @@ class NavbarSectionComponent {
|
|
|
3822
3824
|
return null;
|
|
3823
3825
|
}
|
|
3824
3826
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: NavbarSectionComponent, deps: [{ token: EventsService }, { token: i2$4.Router }, { token: i2$4.ActivatedRoute }, { token: i3.MatDialog }, { token: i5.MatBottomSheet }, { token: i2$3.CookieService }, { token: StorageServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3825
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: NavbarSectionComponent, isStandalone: true, selector: "simpo-navbar-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\" [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\">\r\n <div class=\"container-fluid position-relative \">\r\n <div class=\"w-50 left-logo-text d-flex\">\r\n <!-- <a class=\"navbar-brand\" href=\"#\">{{content?.siteName?.value}}</a> -->\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\"(click)=\"goToHome()\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"isEcommerceWebsite && screenWidth > 768\">\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <a class=\"nav-link dropdown-toggle mx-2\" href=\"#\" [id]=\"'navbarDropdownMenuLink_' + idx\" role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\" *ngIf=\"getValues(content?.ecomlinks?.[link])?.length\">{{ link | uppercase }}</a>\r\n <ul class=\"dropdown-menu fs-6 position-absolute\" [attr.aria-labelledby]=\"'navbarDropdownMenuLink_'+idx\">\r\n <li *ngFor=\"let value of getValues(content?.ecomlinks?.[link])\"><a class=\"dropdown-item\" (click)=\"applyFilter(value, link)\">{{value}}</a></li>\r\n </ul>\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n <div class=\"w-50 right-btn d-flex justify-content-end\">\r\n <div *ngIf=\"screenWidth <= 768 && isEcommerceWebsite\" class=\"d-flex align-items-center justify-content-around\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 35px;\" (click)=\"goToAccount()\">\r\n </div>\r\n <button class=\"navbar-toggler menu-icon\" [simpoColor]=\"simpoColor\" [id]=\"data?.id\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNavAltMarkup\" *ngIf=\"screenWidth < 769 && !isEcommerceWebsite\"\r\n aria-controls=\"navbarNavAltMarkup\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n <hr>\r\n <hr>\r\n <hr>\r\n </button>\r\n </div>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <div class=\"collapse navbar-collapse\" *ngIf=\"screenWidth > 768\">\r\n <div class=\"navbar-nav align-items-center\">\r\n <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"\r\n [bgColor]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex\">\r\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <button class=\"button\" (click)=\"redirectTo(button?.content)\" simpoButtonDirective [scrollValue]=\"scrollValue\" [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button.styles\" [color]=\"accentColor\">{{button?.content?.label}}</button>\r\n <!-- <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth <= 768\">\r\n <div class=\"inner-height p-4\">\r\n <div class=\"nab-bar-mobile flex-column d-flex justify-content-between align-items-center\">\r\n <div class=\"d-flex flex-column w-100\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"title-row\">\r\n <div class=\"d-flex gap-3 align-items-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\"\r\n *ngIf=\"content?.logo?.isImage\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n\r\n </div>\r\n <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center mt-5\">\r\n <div class=\"d-flex flex-column gap-4 w-100\">\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-4\">\r\n <div *ngIf=\"action?.display\" class=\"button-display\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <div class=\"collapse navbar-collapse position-absolute pr-0\" style=\"right: 0px;\" *ngIf=\"screenWidth > 768\">\r\n <div class=\"container-fluid justify-content-between pr-0 d-flex\" style=\"max-width: 50vw;\">\r\n <div class=\"input-group\">\r\n <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center mx-3 position-relative\" style=\"width: 60px; cursor: pointer;\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 30px; margin-top: -5px\">\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Account</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </nav>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n</div>\r\n\r\n\r\n<div class=\"mobile-footer\" *ngIf=\"isEcommerceWebsite\" [simpoBackground]=\"backgroundInfo\">\r\n <div class=\"icons\" (click)=\"goToHome()\" [simpoColor]=\"simpoColor\">\r\n <mat-icon>home</mat-icon>\r\n <span>Home</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"goToWishlist()\" [simpoColor]=\"simpoColor\">\r\n <mat-icon>bookmark</mat-icon>\r\n <span>Wishlist</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"searchProducts()\" [simpoColor]=\"simpoColor\">\r\n <mat-icon>grid_on</mat-icon>\r\n <span>Shop</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"goToCart()\" [simpoColor]=\"simpoColor\">\r\n <mat-icon>shopping_cart</mat-icon>\r\n <span>Cart</span>\r\n </div>\r\n</div>", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}.cartItemCount{right:10px!important}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important;padding-top:10px}.right-btn{width:15%!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:-10px;right:-10px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:340px;outline:none;border:none;border-radius:5px;height:45px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:100000000;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: SimpoFooterLayoutDirective, selector: "[simpoFooterLayout]", inputs: ["simpoFooterLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatMenuModule }] }); }
|
|
3827
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: NavbarSectionComponent, isStandalone: true, selector: "simpo-navbar-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\" [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\">\r\n <div class=\"container-fluid position-relative \">\r\n <div class=\"w-50 left-logo-text d-flex\">\r\n <!-- <a class=\"navbar-brand\" href=\"#\">{{content?.siteName?.value}}</a> -->\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\"(click)=\"goToHome()\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"isEcommerceWebsite && screenWidth > 768\">\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <a class=\"nav-link dropdown-toggle mx-2\" href=\"#\" [id]=\"'navbarDropdownMenuLink_' + idx\" role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\" *ngIf=\"getValues(content?.ecomlinks?.[link])?.length\">{{ link | uppercase }}</a>\r\n <ul class=\"dropdown-menu fs-6 position-absolute\" [attr.aria-labelledby]=\"'navbarDropdownMenuLink_'+idx\">\r\n <li *ngFor=\"let value of getValues(content?.ecomlinks?.[link])\"><a class=\"dropdown-item\" (click)=\"applyFilter(value, link)\">{{value}}</a></li>\r\n </ul>\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n <div class=\"w-50 right-btn d-flex justify-content-end\">\r\n <div *ngIf=\"screenWidth <= 768 && isEcommerceWebsite\" class=\"d-flex align-items-center justify-content-around\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 35px;\" (click)=\"goToAccount()\">\r\n </div>\r\n <button class=\"navbar-toggler menu-icon\" [simpoColor]=\"simpoColor\" [id]=\"data?.id\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNavAltMarkup\" *ngIf=\"screenWidth < 769 && !isEcommerceWebsite\"\r\n aria-controls=\"navbarNavAltMarkup\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n <hr>\r\n <hr>\r\n <hr>\r\n </button>\r\n </div>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <div class=\"collapse navbar-collapse\" *ngIf=\"screenWidth > 768\">\r\n <div class=\"navbar-nav align-items-center\">\r\n <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"\r\n [bgColor]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex\">\r\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <button class=\"button\" (click)=\"redirectTo(button?.content)\" simpoButtonDirective [scrollValue]=\"scrollValue\" [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button.styles\" [color]=\"accentColor\">{{button?.content?.label}}</button>\r\n <!-- <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth <= 768\">\r\n <div class=\"inner-height p-4\">\r\n <div class=\"nab-bar-mobile flex-column d-flex justify-content-between align-items-center\">\r\n <div class=\"d-flex flex-column w-100\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"title-row\">\r\n <div class=\"d-flex gap-3 align-items-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\"\r\n *ngIf=\"content?.logo?.isImage\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n\r\n </div>\r\n <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center mt-5\">\r\n <div class=\"d-flex flex-column gap-4 w-100\">\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-4\">\r\n <div *ngIf=\"action?.display\" class=\"button-display\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <div class=\"collapse navbar-collapse position-absolute pr-0\" style=\"right: 0px;\" *ngIf=\"screenWidth > 768\">\r\n <div class=\"container-fluid justify-content-between pr-0 d-flex\" style=\"max-width: 50vw;\">\r\n <div class=\"input-group\">\r\n <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center mx-3 position-relative\" style=\"width: 60px; cursor: pointer;\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 30px; margin-top: -5px\">\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Account</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </nav>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n</div>\r\n\r\n\r\n<div class=\"mobile-footer\" *ngIf=\"isEcommerceWebsite\" [simpoBackground]=\"backgroundInfo\">\r\n <div class=\"icons\" (click)=\"goToHome()\" [simpoColor]=\"simpoColor\">\r\n <mat-icon>home</mat-icon>\r\n <span>Home</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"goToWishlist()\" [simpoColor]=\"simpoColor\">\r\n <mat-icon>bookmark</mat-icon>\r\n <span>Wishlist</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"searchProducts()\" [simpoColor]=\"simpoColor\">\r\n <mat-icon>grid_on</mat-icon>\r\n <span>Shop</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"goToCart()\" [simpoColor]=\"simpoColor\">\r\n <mat-icon>shopping_cart</mat-icon>\r\n <span>Cart</span>\r\n </div>\r\n</div>", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}.cartItemCount{right:10px!important}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important;padding-top:10px}.right-btn{width:15%!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:-10px;right:-10px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:340px;outline:none;border:none;border-radius:5px;height:45px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: SimpoFooterLayoutDirective, selector: "[simpoFooterLayout]", inputs: ["simpoFooterLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatMenuModule }] }); }
|
|
3826
3828
|
}
|
|
3827
3829
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: NavbarSectionComponent, decorators: [{
|
|
3828
3830
|
type: Component,
|
|
@@ -3856,7 +3858,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
3856
3858
|
MatBottomSheetModule,
|
|
3857
3859
|
MatButtonModule,
|
|
3858
3860
|
MatMenuModule
|
|
3859
|
-
], template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\" [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\">\r\n <div class=\"container-fluid position-relative \">\r\n <div class=\"w-50 left-logo-text d-flex\">\r\n <!-- <a class=\"navbar-brand\" href=\"#\">{{content?.siteName?.value}}</a> -->\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\"(click)=\"goToHome()\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"isEcommerceWebsite && screenWidth > 768\">\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <a class=\"nav-link dropdown-toggle mx-2\" href=\"#\" [id]=\"'navbarDropdownMenuLink_' + idx\" role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\" *ngIf=\"getValues(content?.ecomlinks?.[link])?.length\">{{ link | uppercase }}</a>\r\n <ul class=\"dropdown-menu fs-6 position-absolute\" [attr.aria-labelledby]=\"'navbarDropdownMenuLink_'+idx\">\r\n <li *ngFor=\"let value of getValues(content?.ecomlinks?.[link])\"><a class=\"dropdown-item\" (click)=\"applyFilter(value, link)\">{{value}}</a></li>\r\n </ul>\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n <div class=\"w-50 right-btn d-flex justify-content-end\">\r\n <div *ngIf=\"screenWidth <= 768 && isEcommerceWebsite\" class=\"d-flex align-items-center justify-content-around\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 35px;\" (click)=\"goToAccount()\">\r\n </div>\r\n <button class=\"navbar-toggler menu-icon\" [simpoColor]=\"simpoColor\" [id]=\"data?.id\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNavAltMarkup\" *ngIf=\"screenWidth < 769 && !isEcommerceWebsite\"\r\n aria-controls=\"navbarNavAltMarkup\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n <hr>\r\n <hr>\r\n <hr>\r\n </button>\r\n </div>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <div class=\"collapse navbar-collapse\" *ngIf=\"screenWidth > 768\">\r\n <div class=\"navbar-nav align-items-center\">\r\n <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"\r\n [bgColor]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex\">\r\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <button class=\"button\" (click)=\"redirectTo(button?.content)\" simpoButtonDirective [scrollValue]=\"scrollValue\" [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button.styles\" [color]=\"accentColor\">{{button?.content?.label}}</button>\r\n <!-- <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth <= 768\">\r\n <div class=\"inner-height p-4\">\r\n <div class=\"nab-bar-mobile flex-column d-flex justify-content-between align-items-center\">\r\n <div class=\"d-flex flex-column w-100\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"title-row\">\r\n <div class=\"d-flex gap-3 align-items-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\"\r\n *ngIf=\"content?.logo?.isImage\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n\r\n </div>\r\n <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center mt-5\">\r\n <div class=\"d-flex flex-column gap-4 w-100\">\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-4\">\r\n <div *ngIf=\"action?.display\" class=\"button-display\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <div class=\"collapse navbar-collapse position-absolute pr-0\" style=\"right: 0px;\" *ngIf=\"screenWidth > 768\">\r\n <div class=\"container-fluid justify-content-between pr-0 d-flex\" style=\"max-width: 50vw;\">\r\n <div class=\"input-group\">\r\n <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center mx-3 position-relative\" style=\"width: 60px; cursor: pointer;\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 30px; margin-top: -5px\">\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Account</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </nav>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n</div>\r\n\r\n\r\n<div class=\"mobile-footer\" *ngIf=\"isEcommerceWebsite\" [simpoBackground]=\"backgroundInfo\">\r\n <div class=\"icons\" (click)=\"goToHome()\" [simpoColor]=\"simpoColor\">\r\n <mat-icon>home</mat-icon>\r\n <span>Home</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"goToWishlist()\" [simpoColor]=\"simpoColor\">\r\n <mat-icon>bookmark</mat-icon>\r\n <span>Wishlist</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"searchProducts()\" [simpoColor]=\"simpoColor\">\r\n <mat-icon>grid_on</mat-icon>\r\n <span>Shop</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"goToCart()\" [simpoColor]=\"simpoColor\">\r\n <mat-icon>shopping_cart</mat-icon>\r\n <span>Cart</span>\r\n </div>\r\n</div>", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}.cartItemCount{right:10px!important}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important;padding-top:10px}.right-btn{width:15%!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:-10px;right:-10px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:340px;outline:none;border:none;border-radius:5px;height:45px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:100000000;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}\n"] }]
|
|
3861
|
+
], template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\" [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\">\r\n <div class=\"container-fluid position-relative \">\r\n <div class=\"w-50 left-logo-text d-flex\">\r\n <!-- <a class=\"navbar-brand\" href=\"#\">{{content?.siteName?.value}}</a> -->\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\"(click)=\"goToHome()\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"isEcommerceWebsite && screenWidth > 768\">\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <a class=\"nav-link dropdown-toggle mx-2\" href=\"#\" [id]=\"'navbarDropdownMenuLink_' + idx\" role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\" *ngIf=\"getValues(content?.ecomlinks?.[link])?.length\">{{ link | uppercase }}</a>\r\n <ul class=\"dropdown-menu fs-6 position-absolute\" [attr.aria-labelledby]=\"'navbarDropdownMenuLink_'+idx\">\r\n <li *ngFor=\"let value of getValues(content?.ecomlinks?.[link])\"><a class=\"dropdown-item\" (click)=\"applyFilter(value, link)\">{{value}}</a></li>\r\n </ul>\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n <div class=\"w-50 right-btn d-flex justify-content-end\">\r\n <div *ngIf=\"screenWidth <= 768 && isEcommerceWebsite\" class=\"d-flex align-items-center justify-content-around\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 35px;\" (click)=\"goToAccount()\">\r\n </div>\r\n <button class=\"navbar-toggler menu-icon\" [simpoColor]=\"simpoColor\" [id]=\"data?.id\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNavAltMarkup\" *ngIf=\"screenWidth < 769 && !isEcommerceWebsite\"\r\n aria-controls=\"navbarNavAltMarkup\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n <hr>\r\n <hr>\r\n <hr>\r\n </button>\r\n </div>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <div class=\"collapse navbar-collapse\" *ngIf=\"screenWidth > 768\">\r\n <div class=\"navbar-nav align-items-center\">\r\n <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"\r\n [bgColor]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex\">\r\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <button class=\"button\" (click)=\"redirectTo(button?.content)\" simpoButtonDirective [scrollValue]=\"scrollValue\" [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button.styles\" [color]=\"accentColor\">{{button?.content?.label}}</button>\r\n <!-- <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth <= 768\">\r\n <div class=\"inner-height p-4\">\r\n <div class=\"nab-bar-mobile flex-column d-flex justify-content-between align-items-center\">\r\n <div class=\"d-flex flex-column w-100\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"title-row\">\r\n <div class=\"d-flex gap-3 align-items-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\"\r\n *ngIf=\"content?.logo?.isImage\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n\r\n </div>\r\n <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center mt-5\">\r\n <div class=\"d-flex flex-column gap-4 w-100\">\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-4\">\r\n <div *ngIf=\"action?.display\" class=\"button-display\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <div class=\"collapse navbar-collapse position-absolute pr-0\" style=\"right: 0px;\" *ngIf=\"screenWidth > 768\">\r\n <div class=\"container-fluid justify-content-between pr-0 d-flex\" style=\"max-width: 50vw;\">\r\n <div class=\"input-group\">\r\n <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center mx-3 position-relative\" style=\"width: 60px; cursor: pointer;\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 30px; margin-top: -5px\">\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Account</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </nav>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n</div>\r\n\r\n\r\n<div class=\"mobile-footer\" *ngIf=\"isEcommerceWebsite\" [simpoBackground]=\"backgroundInfo\">\r\n <div class=\"icons\" (click)=\"goToHome()\" [simpoColor]=\"simpoColor\">\r\n <mat-icon>home</mat-icon>\r\n <span>Home</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"goToWishlist()\" [simpoColor]=\"simpoColor\">\r\n <mat-icon>bookmark</mat-icon>\r\n <span>Wishlist</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"searchProducts()\" [simpoColor]=\"simpoColor\">\r\n <mat-icon>grid_on</mat-icon>\r\n <span>Shop</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"goToCart()\" [simpoColor]=\"simpoColor\">\r\n <mat-icon>shopping_cart</mat-icon>\r\n <span>Cart</span>\r\n </div>\r\n</div>", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}.cartItemCount{right:10px!important}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important;padding-top:10px}.right-btn{width:15%!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:-10px;right:-10px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:340px;outline:none;border:none;border-radius:5px;height:45px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}\n"] }]
|
|
3860
3862
|
}], ctorParameters: () => [{ type: EventsService }, { type: i2$4.Router }, { type: i2$4.ActivatedRoute }, { type: i3.MatDialog }, { type: i5.MatBottomSheet }, { type: i2$3.CookieService }, { type: StorageServiceService }], propDecorators: { data: [{
|
|
3861
3863
|
type: Input
|
|
3862
3864
|
}], nextComponent: [{
|
|
@@ -6032,7 +6034,7 @@ class ProductDescComponent extends BaseSection {
|
|
|
6032
6034
|
return window.innerWidth <= 475;
|
|
6033
6035
|
}
|
|
6034
6036
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductDescComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: i2$4.Router }, { token: i2$4.ActivatedRoute }, { token: RestService }, { token: CartService }, { token: StorageServiceService }, { token: i7$1.MessageService }, { token: i7.Meta }, { token: i7.Title }, { token: i5.MatBottomSheet }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6035
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"></p-toast>\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\"\r\n simpoHover (hovering)=\"showEditTabs($event)\">\r\n <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\" (click)=\"routeToHome()\">Home</a> /\r\n <span>{{ responseData?.name | titlecase }}</span></div>\r\n <div class=\"row\">\r\n <div class=\"col-lg-6 col-12\">\r\n <div class=\"prod-img-block\">\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6 col-12 product-detail\">\r\n <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\r\n \r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n </ng-container>\r\n\r\n <div class=\"product-sku\">\r\n <div *ngIf=\"responseData?.itemInventory\">SKU :\r\n {{responseData.itemInventory?.openingStock}}</div>\r\n <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <a href=\"javascript:void(0)\"\r\n (click)=\"goToFilter(cat.refName)\"\r\n *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\r\n titlecase}} <ng-container\r\n *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n </a></div>\r\n <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n </span></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row prod-desc\" *ngIf=\"responseData?.descriptor?.name\">\r\n <div class=\"tab-group\">\r\n <div class=\"tab\">Description</div>\r\n </div>\r\n <div style=\"margin-top: 10px;\" class=\"body-large\" *ngIf=\"responseData?.descriptor\"\r\n [innerHTML]=\"responseData?.descriptor?.name\"></div>\r\n </div>\r\n </section>\r\n <ng-container *ngIf=\"relatedProductData?.length\">\r\n <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\r\n [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </section>\r\n</ng-container>\r\n\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n\r\n<div class=\"mobile-footer\">\r\n <div class=\"icons\">\r\n <div (click)=\"routeToHome()\">\r\n <mat-icon>home</mat-icon>\r\n </div>\r\n <div>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n *ngIf=\"!isItemAsFavorite\">bookmark</mat-icon>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n *ngIf=\"isItemAsFavorite\">bookmark_border</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n <div class=\"quantity\" *ngIf=\"responseData?.quantity\">\r\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n </div>\r\n <button class=\"add-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"addToCart()\" *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n</div>\r\n<ng-template #ActionBtn>\r\n <div class=\"button-parent\">\r\n <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n <div class=\"quantity\" *ngIf=\"responseData?.quantity\">\r\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n </div>\r\n <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">\r\n <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"addToCart()\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n <div class=\"favourite\">\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n <div>\r\n <div class=\"varient-key\">{{varient.key}}</div>\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div *ngFor=\"let varientValue of varient.value\"\r\n [attr.class]=\"!isVarientAvailable() ? 'varient-tag disable-varient' : 'varient-tag'\"\r\n [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue}}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</ng-template>\r\n<ng-template #ProductDesc>\r\n <div class=\"heading-large trim-text\">{{responseData?.name}}</div>\r\n <div class=\"d-flex\" style=\"gap: 10px; align-items: center; margin-top: 15px;\">\r\n <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n *ngIf=\"responseData?.price?.discountedPrice != responseData?.price?.value\"><span\r\n [innerHTML]='currency'></span> {{responseData?.price?.value}}</div>\r\n <div class=\"price\" *ngIf=\"responseData?.price?.discountedPrice\"><span [innerHTML]='currency'></span>\r\n {{responseData?.price?.discountedPrice}}</div>\r\n <div class=\"tax-text\">(excluding all taxes)</div>\r\n </div>\r\n <div class=\"product-desc body-large\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #ImageSection>\r\n <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n <ng-container *ngFor=\"let img of itemImages\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\"\r\n [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n </ng-container>\r\n </div>\r\n <div class=\"item-img\">\r\n <ng-container *ngIf=\"currentImg\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <lib-ngx-image-zoom [thumbImage]=\"currentImg\" [fullImage]=\"currentImg\" [zoomMode]=\"'hover'\"\r\n [magnification]=\"2\" [lensHeight]=\"100\" [lensWidth]=\"100\"\r\n style=\"height: 100%; width: 100%;\"></lib-ngx-image-zoom>\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"!currentImg\">\r\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n </ng-container>\r\n </div>\r\n <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n <ng-container *ngFor=\"let img of itemImages\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\">\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n<!-- <div class=\"modal fade\" id=\"itemVarients\" tabindex=\"-1\" aria-labelledby=\"itemVarients\" aria-hidden=\"true\">\r\n <div class=\"modal-dialog\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h5 class=\"modal-title\">Right-to-Left Modal</h5>\r\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\r\n </div>\r\n <div class=\"modal-body\">\r\n This content is aligned from right to left.\r\n </div>\r\n <div class=\"modal-footer\">\r\n <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button>\r\n <button type=\"button\" class=\"btn btn-primary\">Save changes</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div> -->", styles: [".product-desc{display:flex}.row{margin-top:25px}.prod-img-block{display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px;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:460px;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}.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}.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}.trim-text{text-align:left!important;width:100%;display:inline-block!important;overflow:hidden!important;-webkit-line-clamp:2!important;text-overflow:ellipsis!important}.disable-varient{text-decoration:line-through;cursor:not-allowed}.mobile-footer{display:none}@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:10000000001;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}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;border:none!important;padding:5px;margin-top:0!important}.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important}.item-img img{width:100%;height:448px}.prod-img-block{flex-direction:column}.img-list{flex-direction:row;overflow-x:scroll;height:fit-content}.img-list img{height:25%;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}}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i12.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"] }, { 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: i13$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", "delete"], outputs: ["changeDetailProduct"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
|
|
6037
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"></p-toast>\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\"\r\n simpoHover (hovering)=\"showEditTabs($event)\">\r\n <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\" (click)=\"routeToHome()\">Home</a> /\r\n <span>{{ responseData?.name | titlecase }}</span></div>\r\n <div class=\"row\">\r\n <div class=\"col-lg-6 col-12\">\r\n <div class=\"prod-img-block\">\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6 col-12 product-detail\">\r\n <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\r\n \r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n </ng-container>\r\n\r\n <div class=\"product-sku\">\r\n <div *ngIf=\"responseData?.itemInventory\">SKU :\r\n {{responseData.itemInventory?.openingStock}}</div>\r\n <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <a href=\"javascript:void(0)\"\r\n (click)=\"goToFilter(cat.refName)\"\r\n *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\r\n titlecase}} <ng-container\r\n *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n </a></div>\r\n <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n </span></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row prod-desc\" *ngIf=\"responseData?.descriptor?.name\">\r\n <div class=\"tab-group\">\r\n <div class=\"tab\">Description</div>\r\n </div>\r\n <div style=\"margin-top: 10px;\" class=\"body-large\" *ngIf=\"responseData?.descriptor\"\r\n [innerHTML]=\"responseData?.descriptor?.name\"></div>\r\n </div>\r\n </section>\r\n <ng-container *ngIf=\"relatedProductData?.length\">\r\n <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\r\n [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </section>\r\n</ng-container>\r\n\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n\r\n<div class=\"mobile-footer\">\r\n <div class=\"icons\">\r\n <div (click)=\"routeToHome()\">\r\n <mat-icon>home</mat-icon>\r\n </div>\r\n <div>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n *ngIf=\"!isItemAsFavorite\">bookmark</mat-icon>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n *ngIf=\"isItemAsFavorite\">bookmark_border</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n <div class=\"quantity\" *ngIf=\"responseData?.quantity\">\r\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n </div>\r\n <button class=\"add-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"addToCart()\" *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n</div>\r\n<ng-template #ActionBtn>\r\n <div class=\"button-parent\">\r\n <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n <div class=\"quantity\" *ngIf=\"responseData?.quantity\">\r\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n </div>\r\n <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">\r\n <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"addToCart()\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n <div class=\"favourite\">\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n <div>\r\n <div class=\"varient-key\">{{varient.key}}</div>\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div *ngFor=\"let varientValue of varient.value\"\r\n [attr.class]=\"!isVarientAvailable() ? 'varient-tag disable-varient' : 'varient-tag'\"\r\n [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue}}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</ng-template>\r\n<ng-template #ProductDesc>\r\n <div class=\"heading-large trim-text\">{{responseData?.name}}</div>\r\n <div class=\"d-flex\" style=\"gap: 10px; align-items: center; margin-top: 15px;\">\r\n <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n *ngIf=\"responseData?.price?.discountedPrice != responseData?.price?.value\"><span\r\n [innerHTML]='currency'></span> {{responseData?.price?.value}}</div>\r\n <div class=\"price\" *ngIf=\"responseData?.price?.discountedPrice\"><span [innerHTML]='currency'></span>\r\n {{responseData?.price?.discountedPrice}}</div>\r\n <div class=\"tax-text\">(excluding all taxes)</div>\r\n </div>\r\n <div class=\"product-desc body-large\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #ImageSection>\r\n <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n <ng-container *ngFor=\"let img of itemImages\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\"\r\n [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n </ng-container>\r\n </div>\r\n <div class=\"item-img\">\r\n <ng-container *ngIf=\"currentImg\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <lib-ngx-image-zoom [thumbImage]=\"currentImg\" [fullImage]=\"currentImg\" [zoomMode]=\"'hover'\"\r\n [magnification]=\"2\" [lensHeight]=\"100\" [lensWidth]=\"100\"\r\n style=\"height: 100%; width: 100%;\"></lib-ngx-image-zoom>\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"!currentImg\">\r\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n </ng-container>\r\n </div>\r\n <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n <ng-container *ngFor=\"let img of itemImages\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\">\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n<!-- <div class=\"modal fade\" id=\"itemVarients\" tabindex=\"-1\" aria-labelledby=\"itemVarients\" aria-hidden=\"true\">\r\n <div class=\"modal-dialog\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h5 class=\"modal-title\">Right-to-Left Modal</h5>\r\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\r\n </div>\r\n <div class=\"modal-body\">\r\n This content is aligned from right to left.\r\n </div>\r\n <div class=\"modal-footer\">\r\n <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button>\r\n <button type=\"button\" class=\"btn btn-primary\">Save changes</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div> -->", styles: [".product-desc{display:flex}.row{margin-top:25px}.prod-img-block{display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px;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:460px;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}.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}.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}.trim-text{text-align:left!important;width:100%;display:inline-block!important;overflow:hidden!important;-webkit-line-clamp:2!important;text-overflow:ellipsis!important}.disable-varient{text-decoration:line-through;cursor:not-allowed}.mobile-footer{display:none}@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:10001;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}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;border:none!important;padding:5px;margin-top:0!important}.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important}.item-img img{width:100%;height:448px}.prod-img-block{flex-direction:column}.img-list{flex-direction:row;overflow-x:scroll;height:fit-content}.img-list img{height:25%;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}}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i12.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"] }, { 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: i13$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", "delete"], outputs: ["changeDetailProduct"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
|
|
6036
6038
|
}
|
|
6037
6039
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductDescComponent, decorators: [{
|
|
6038
6040
|
type: Component,
|
|
@@ -6053,7 +6055,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
6053
6055
|
FeaturedProductsComponent,
|
|
6054
6056
|
MatBottomSheetModule,
|
|
6055
6057
|
ToastModule
|
|
6056
|
-
], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"></p-toast>\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\"\r\n simpoHover (hovering)=\"showEditTabs($event)\">\r\n <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\" (click)=\"routeToHome()\">Home</a> /\r\n <span>{{ responseData?.name | titlecase }}</span></div>\r\n <div class=\"row\">\r\n <div class=\"col-lg-6 col-12\">\r\n <div class=\"prod-img-block\">\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6 col-12 product-detail\">\r\n <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\r\n \r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n </ng-container>\r\n\r\n <div class=\"product-sku\">\r\n <div *ngIf=\"responseData?.itemInventory\">SKU :\r\n {{responseData.itemInventory?.openingStock}}</div>\r\n <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <a href=\"javascript:void(0)\"\r\n (click)=\"goToFilter(cat.refName)\"\r\n *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\r\n titlecase}} <ng-container\r\n *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n </a></div>\r\n <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n </span></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row prod-desc\" *ngIf=\"responseData?.descriptor?.name\">\r\n <div class=\"tab-group\">\r\n <div class=\"tab\">Description</div>\r\n </div>\r\n <div style=\"margin-top: 10px;\" class=\"body-large\" *ngIf=\"responseData?.descriptor\"\r\n [innerHTML]=\"responseData?.descriptor?.name\"></div>\r\n </div>\r\n </section>\r\n <ng-container *ngIf=\"relatedProductData?.length\">\r\n <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\r\n [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </section>\r\n</ng-container>\r\n\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n\r\n<div class=\"mobile-footer\">\r\n <div class=\"icons\">\r\n <div (click)=\"routeToHome()\">\r\n <mat-icon>home</mat-icon>\r\n </div>\r\n <div>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n *ngIf=\"!isItemAsFavorite\">bookmark</mat-icon>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n *ngIf=\"isItemAsFavorite\">bookmark_border</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n <div class=\"quantity\" *ngIf=\"responseData?.quantity\">\r\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n </div>\r\n <button class=\"add-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"addToCart()\" *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n</div>\r\n<ng-template #ActionBtn>\r\n <div class=\"button-parent\">\r\n <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n <div class=\"quantity\" *ngIf=\"responseData?.quantity\">\r\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n </div>\r\n <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">\r\n <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"addToCart()\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n <div class=\"favourite\">\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n <div>\r\n <div class=\"varient-key\">{{varient.key}}</div>\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div *ngFor=\"let varientValue of varient.value\"\r\n [attr.class]=\"!isVarientAvailable() ? 'varient-tag disable-varient' : 'varient-tag'\"\r\n [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue}}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</ng-template>\r\n<ng-template #ProductDesc>\r\n <div class=\"heading-large trim-text\">{{responseData?.name}}</div>\r\n <div class=\"d-flex\" style=\"gap: 10px; align-items: center; margin-top: 15px;\">\r\n <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n *ngIf=\"responseData?.price?.discountedPrice != responseData?.price?.value\"><span\r\n [innerHTML]='currency'></span> {{responseData?.price?.value}}</div>\r\n <div class=\"price\" *ngIf=\"responseData?.price?.discountedPrice\"><span [innerHTML]='currency'></span>\r\n {{responseData?.price?.discountedPrice}}</div>\r\n <div class=\"tax-text\">(excluding all taxes)</div>\r\n </div>\r\n <div class=\"product-desc body-large\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #ImageSection>\r\n <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n <ng-container *ngFor=\"let img of itemImages\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\"\r\n [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n </ng-container>\r\n </div>\r\n <div class=\"item-img\">\r\n <ng-container *ngIf=\"currentImg\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <lib-ngx-image-zoom [thumbImage]=\"currentImg\" [fullImage]=\"currentImg\" [zoomMode]=\"'hover'\"\r\n [magnification]=\"2\" [lensHeight]=\"100\" [lensWidth]=\"100\"\r\n style=\"height: 100%; width: 100%;\"></lib-ngx-image-zoom>\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"!currentImg\">\r\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n </ng-container>\r\n </div>\r\n <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n <ng-container *ngFor=\"let img of itemImages\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\">\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n<!-- <div class=\"modal fade\" id=\"itemVarients\" tabindex=\"-1\" aria-labelledby=\"itemVarients\" aria-hidden=\"true\">\r\n <div class=\"modal-dialog\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h5 class=\"modal-title\">Right-to-Left Modal</h5>\r\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\r\n </div>\r\n <div class=\"modal-body\">\r\n This content is aligned from right to left.\r\n </div>\r\n <div class=\"modal-footer\">\r\n <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button>\r\n <button type=\"button\" class=\"btn btn-primary\">Save changes</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div> -->", styles: [".product-desc{display:flex}.row{margin-top:25px}.prod-img-block{display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px;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:460px;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}.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}.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}.trim-text{text-align:left!important;width:100%;display:inline-block!important;overflow:hidden!important;-webkit-line-clamp:2!important;text-overflow:ellipsis!important}.disable-varient{text-decoration:line-through;cursor:not-allowed}.mobile-footer{display:none}@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:10000000001;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}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;border:none!important;padding:5px;margin-top:0!important}.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important}.item-img img{width:100%;height:448px}.prod-img-block{flex-direction:column}.img-list{flex-direction:row;overflow-x:scroll;height:fit-content}.img-list img{height:25%;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}}.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}\n"] }]
|
|
6058
|
+
], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"></p-toast>\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\"\r\n simpoHover (hovering)=\"showEditTabs($event)\">\r\n <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\" (click)=\"routeToHome()\">Home</a> /\r\n <span>{{ responseData?.name | titlecase }}</span></div>\r\n <div class=\"row\">\r\n <div class=\"col-lg-6 col-12\">\r\n <div class=\"prod-img-block\">\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6 col-12 product-detail\">\r\n <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\r\n \r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n </ng-container>\r\n\r\n <div class=\"product-sku\">\r\n <div *ngIf=\"responseData?.itemInventory\">SKU :\r\n {{responseData.itemInventory?.openingStock}}</div>\r\n <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <a href=\"javascript:void(0)\"\r\n (click)=\"goToFilter(cat.refName)\"\r\n *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\r\n titlecase}} <ng-container\r\n *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n </a></div>\r\n <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n </span></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row prod-desc\" *ngIf=\"responseData?.descriptor?.name\">\r\n <div class=\"tab-group\">\r\n <div class=\"tab\">Description</div>\r\n </div>\r\n <div style=\"margin-top: 10px;\" class=\"body-large\" *ngIf=\"responseData?.descriptor\"\r\n [innerHTML]=\"responseData?.descriptor?.name\"></div>\r\n </div>\r\n </section>\r\n <ng-container *ngIf=\"relatedProductData?.length\">\r\n <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\r\n [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </section>\r\n</ng-container>\r\n\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n\r\n<div class=\"mobile-footer\">\r\n <div class=\"icons\">\r\n <div (click)=\"routeToHome()\">\r\n <mat-icon>home</mat-icon>\r\n </div>\r\n <div>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n *ngIf=\"!isItemAsFavorite\">bookmark</mat-icon>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n *ngIf=\"isItemAsFavorite\">bookmark_border</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n <div class=\"quantity\" *ngIf=\"responseData?.quantity\">\r\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n </div>\r\n <button class=\"add-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"addToCart()\" *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n</div>\r\n<ng-template #ActionBtn>\r\n <div class=\"button-parent\">\r\n <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n <div class=\"quantity\" *ngIf=\"responseData?.quantity\">\r\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n </div>\r\n <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">\r\n <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"addToCart()\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n <div class=\"favourite\">\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n <div>\r\n <div class=\"varient-key\">{{varient.key}}</div>\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div *ngFor=\"let varientValue of varient.value\"\r\n [attr.class]=\"!isVarientAvailable() ? 'varient-tag disable-varient' : 'varient-tag'\"\r\n [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue}}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</ng-template>\r\n<ng-template #ProductDesc>\r\n <div class=\"heading-large trim-text\">{{responseData?.name}}</div>\r\n <div class=\"d-flex\" style=\"gap: 10px; align-items: center; margin-top: 15px;\">\r\n <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n *ngIf=\"responseData?.price?.discountedPrice != responseData?.price?.value\"><span\r\n [innerHTML]='currency'></span> {{responseData?.price?.value}}</div>\r\n <div class=\"price\" *ngIf=\"responseData?.price?.discountedPrice\"><span [innerHTML]='currency'></span>\r\n {{responseData?.price?.discountedPrice}}</div>\r\n <div class=\"tax-text\">(excluding all taxes)</div>\r\n </div>\r\n <div class=\"product-desc body-large\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #ImageSection>\r\n <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n <ng-container *ngFor=\"let img of itemImages\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\"\r\n [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n </ng-container>\r\n </div>\r\n <div class=\"item-img\">\r\n <ng-container *ngIf=\"currentImg\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <lib-ngx-image-zoom [thumbImage]=\"currentImg\" [fullImage]=\"currentImg\" [zoomMode]=\"'hover'\"\r\n [magnification]=\"2\" [lensHeight]=\"100\" [lensWidth]=\"100\"\r\n style=\"height: 100%; width: 100%;\"></lib-ngx-image-zoom>\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"!currentImg\">\r\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n </ng-container>\r\n </div>\r\n <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n <ng-container *ngFor=\"let img of itemImages\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\">\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n<!-- <div class=\"modal fade\" id=\"itemVarients\" tabindex=\"-1\" aria-labelledby=\"itemVarients\" aria-hidden=\"true\">\r\n <div class=\"modal-dialog\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h5 class=\"modal-title\">Right-to-Left Modal</h5>\r\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\r\n </div>\r\n <div class=\"modal-body\">\r\n This content is aligned from right to left.\r\n </div>\r\n <div class=\"modal-footer\">\r\n <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button>\r\n <button type=\"button\" class=\"btn btn-primary\">Save changes</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div> -->", styles: [".product-desc{display:flex}.row{margin-top:25px}.prod-img-block{display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px;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:460px;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}.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}.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}.trim-text{text-align:left!important;width:100%;display:inline-block!important;overflow:hidden!important;-webkit-line-clamp:2!important;text-overflow:ellipsis!important}.disable-varient{text-decoration:line-through;cursor:not-allowed}.mobile-footer{display:none}@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:10001;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}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;border:none!important;padding:5px;margin-top:0!important}.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important}.item-img img{width:100%;height:448px}.prod-img-block{flex-direction:column}.img-list{flex-direction:row;overflow-x:scroll;height:fit-content}.img-list img{height:25%;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}}.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}\n"] }]
|
|
6057
6059
|
}], ctorParameters: () => [{ type: Object, decorators: [{
|
|
6058
6060
|
type: Inject,
|
|
6059
6061
|
args: [PLATFORM_ID]
|