simpo-component-library 3.6.464 → 3.6.465
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/directive/spacing-around.directive.mjs +2 -2
- package/esm2022/lib/directive/spacing-horizontal.directive.mjs +4 -4
- package/esm2022/lib/ecommerce/sections/passbook-transactions/passbook-transactions.component.mjs +3 -3
- package/esm2022/lib/ecommerce/sections/scheme-details/scheme-details.component.mjs +3 -3
- package/esm2022/lib/ecommerce/sections/user-profile/user-profile.component.mjs +3 -3
- package/esm2022/lib/elements/add-section/add-section.component.mjs +3 -13
- package/esm2022/lib/elements/below-image-card/below-image-card.component.mjs +3 -3
- package/esm2022/lib/elements/image-editor/image-editor.component.mjs +3 -3
- package/esm2022/lib/elements/navbar-button-element/navbar-button-element.component.mjs +3 -3
- package/esm2022/lib/sections/banner-section/banner-section.component.mjs +13 -3
- package/esm2022/lib/sections/banner-section/banner-section.model.mjs +1 -1
- package/esm2022/lib/sections/header-section/header-section.component.mjs +3 -3
- package/esm2022/lib/sections/logo-showcase/logo-showcase.component.mjs +3 -3
- package/esm2022/lib/sections/new-testimonials/new-testimonials.component.mjs +3 -3
- package/esm2022/lib/sections/service-section/service-section.component.mjs +3 -3
- package/esm2022/lib/sections/testimonial-section/testimonial-section.component.mjs +3 -3
- package/esm2022/lib/sections/text-section/text-section.component.mjs +3 -3
- package/esm2022/lib/styles/style.model.mjs +1 -1
- package/fesm2022/simpo-component-library.mjs +42 -43
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/lib/sections/banner-section/banner-section.component.d.ts +4 -1
- package/lib/sections/banner-section/banner-section.model.d.ts +2 -1
- package/lib/styles/style.model.d.ts +5 -0
- package/package.json +1 -1
- package/simpo-component-library-3.6.465.tgz +0 -0
- package/simpo-component-library-3.6.464.tgz +0 -0
|
@@ -43,6 +43,7 @@ import * as i8$2 from '@angular/material/checkbox';
|
|
|
43
43
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
44
44
|
import * as i9 from '@angular/material/autocomplete';
|
|
45
45
|
import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
|
46
|
+
import { CdkDrag, CdkDragPlaceholder, moveItemInArray } from '@angular/cdk/drag-drop';
|
|
46
47
|
import { MatMenuModule } from '@angular/material/menu';
|
|
47
48
|
import * as i8$3 from '@angular/material/bottom-sheet';
|
|
48
49
|
import { MatBottomSheetModule, MAT_BOTTOM_SHEET_DATA } from '@angular/material/bottom-sheet';
|
|
@@ -56,7 +57,6 @@ import * as mapboxgl from 'mapbox-gl';
|
|
|
56
57
|
import * as i14 from '@angular/material/datepicker';
|
|
57
58
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
58
59
|
import moment from 'moment';
|
|
59
|
-
import { CdkDragPlaceholder, moveItemInArray } from '@angular/cdk/drag-drop';
|
|
60
60
|
import { isBlurhashValid, decode } from 'blurhash';
|
|
61
61
|
import * as i4$1 from 'primeng/rating';
|
|
62
62
|
import { RatingModule } from 'primeng/rating';
|
|
@@ -2181,11 +2181,11 @@ class ImageEditorComponent {
|
|
|
2181
2181
|
}
|
|
2182
2182
|
}
|
|
2183
2183
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageEditorComponent, deps: [{ token: EventsService }, { token: ElementServiceService }, { token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2184
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImageEditorComponent, isStandalone: true, selector: "simpo-image-editor", ngImport: i0, template: "<section class=\"main-section\">\r\n <div class=\"header-section d-flex justify-content-between align-items-center\">\r\n <div class=\"head-text\">Image Settings</div>\r\n <mat-icon class=\"d-flex align-items-center justify-content-center f-18 cp\"\r\n (click)=\"dialogRef.close()\">close</mat-icon>\r\n </div>\r\n <div>\r\n <!-- <p class=\"heading mb-0\">Image</p> -->\r\n <div class=\"upload-image cp\" *ngIf=\"!imageData.url && !iconData.url\" (click)=\"updateImage()\">\r\n <img loading=\"lazy\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\"\r\n alt=\"\">\r\n <p class=\"upload-text mb-0\">Upload a file</p>\r\n <p class=\"upload-text mb-0\">or select an existing one</p>\r\n <span class=\"upload-text\">up to 32MB</span>\r\n </div>\r\n <div class=\"sec d-flex align-items-center\" *ngIf=\"imageData.url || iconData.url\">\r\n <ng-container *ngIf=\"!imgLoader\">\r\n <img [src]=\"imageData.url || iconData.url\" [alt]=\"imageData.altText ?? ''\">\r\n <div class=\"repalce-image cursor-pointer\" (click)=\"updateImage()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" width=\"24\"\r\n height=\"24\" class=\"icon w-4 h-4\" aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n d=\"m4 16 4.58579-4.5858c.78104-.781 2.04741-.781 2.82841 0L16 16m-2-2 1.5858-1.5858c.781-.781 2.0474-.781 2.8284 0L20 14m-6-6h.01M6 20h12c1.1046 0 2-.8954 2-2V6c0-1.10457-.8954-2-2-2H6c-1.10457 0-2 .89543-2 2v12c0 1.1046.89543 2 2 2Z\">\r\n </path>\r\n </svg>\r\n </div>\r\n\r\n <div class=\"delete-image cursor-pointer \" (click)=\"deleteImage()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"#ffffff\" viewBox=\"0 0 24 24\" width=\"24\"\r\n height=\"24\" class=\"icon h-4 w-4\" aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n d=\"m19 7-.8673 12.1425C18.0579 20.1891 17.187 21 16.1378 21H7.86224c-1.04928 0-1.92016-.8109-1.99492-1.8575L5 7m5 4v6m4-6v6m1-10V4c0-.55228-.4477-1-1-1h-4c-.55228 0-1 .44772-1 1v3M4 7h16\">\r\n </path>\r\n </svg>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"imgLoader\">\r\n <div class=\"upload_spinner d-flex w-100 h-100 justify-content-center align-items-center\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"!data.showIcon\">\r\n <div class=\"w-100 p-0-10 mb-22\" *ngIf=\"imageData.hasOwnProperty('altText')\">\r\n <p class=\"heading mb-2\">Alt text</p>\r\n <input type=\"text\" placeholder=\"Enter alt text\" class=\"input-field w-100\" [(ngModel)]=\"imageData.altText\">\r\n <div class=\"sub-text\">When the image fails to load, this text will be displayed.</div>\r\n </div>\r\n\r\n <div class=\"image mb-22\" *ngIf=\"imageData.hasOwnProperty('position')\">\r\n <p class=\"heading mb-1\">Image Position</p>\r\n <div class=\"horizontal-action\">\r\n <label>Horizontal</label>\r\n <div class=\"slider d-flex align-items-center justify-content-start cp\">\r\n <input [min]=\"min\" [max]=\"max\" step=\"5\" type=\"range\" [(ngModel)]=\"imageData.position.x\"\r\n (input)=\"horizontalPosition()\" class=\"w-75\">\r\n </div>\r\n </div>\r\n <div class=\"horizontal-action\" style=\"margin-top: 5px;\">\r\n <label>Vertical</label>\r\n <div class=\"slider d-flex align-items-center justify-content-start cp\">\r\n <input [min]=\"min\" [max]=\"max\" step=\"5\" type=\"range\" [(ngModel)]=\"imageData.position.y\"\r\n (input)=\"horizontalPosition()\" class=\"w-75\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"groups cp px-3\">\r\n <div *ngFor=\"let type of linkType\" [ngClass]=\"{'selectedType' : type.type === selectedType}\"\r\n (click)=\"changeType(type.type)\">{{type.type}}</div>\r\n </div>\r\n <div class=\"field-container mt-3 mx-3\">\r\n <div *ngIf=\"link.linkType === RedirectionLink.Page\">\r\n <label class=\"input-label-1 mt-3 mb-2\">Select Page</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"link.pageId\" (change)=\"onPageChange($event)\">\r\n <option value=\"\" selected>Select from your existing pages</option>\r\n <option *ngFor=\"let page of templatePage\" [value]=\"page.id\" style=\"padding: 10px;\">\r\n {{page.pageName}}</option>\r\n </select>\r\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"pageName == 'Product List'\">\r\n <label class=\"input-label-1 mt-3 mb-2\">Select Collection</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"collectionPath\" (ngModelChange)=\"addCollectionToPath()\">\r\n <option value=\"\" selected>Select from your existing pages</option>\r\n <option *ngFor=\"let coll of collectionList\" style=\"padding: 10px;\" [value]=\"coll.collectionName\">\r\n {{coll?.collectionName}}</option>\r\n </select>\r\n </div>\r\n <label class=\"input-label-1 mt-3 mb-2\">Select Category</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"categoryPath\" (ngModelChange)=\"addCategoryToPath()\">\r\n <option value=\"\" selected>Select from your existing pages</option>\r\n <option *ngFor=\"let coll of categoryList\" style=\"padding: 10px;\" [value]=\"coll.categoryName\">\r\n {{coll?.categoryName}}</option>\r\n </select>\r\n </div>\r\n </ng-container>\r\n <!-- <div class=\"sub-text\">Select from your existing pages</div> -->\r\n </div>\r\n <div *ngIf=\"link.linkType === RedirectionLink.section\">\r\n <label class=\"mt-3 mb-2 input-label-1\">Section</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"link.pageId\">\r\n <option value=\"\" selected>Select the Section</option>\r\n <option *ngFor=\"let section of templatePage[0]?.components\" [value]=\"section.id\">{{section.sectionName}}\r\n </option>\r\n </select>\r\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-between mt-10\">\r\n <label class=\"input-label-2\">Open in a new browser tab</label>\r\n <div class=\"form-check form-switch ml-auto\">\r\n <input class=\"form-check-input switch-btn cursor-pointer\" type=\"checkbox\" [(ngModel)]=\"link.newTab\"\r\n role=\"switch\">\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"link.linkType === RedirectionLink.External || link.linkType === RedirectionLink.Email || link.linkType === RedirectionLink.Phone\">\r\n <label class=\"mt-3 mb-2 input-label-1\">Select type</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"link.linkType\">\r\n <option value=\"\" selected>Select the Type</option>\r\n <option *ngFor=\"let type of externalLinkType\" [value]=\"type.type\">{{type.type}}</option>\r\n </select>\r\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n </div>\r\n </div>\r\n <label class=\"input-label mb-2\">{{link.linkType === RedirectionLink.External ? 'Website' : link.linkType ===\r\n RedirectionLink.Email ? 'Email Address' : 'Phone Number'}}</label>\r\n <input type=\"text\" class=\"input-text\" [(ngModel)]=\"link.redirectionUrl\"\r\n [placeholder]=\"link.linkType === RedirectionLink.External ? 'example : https://facebook.com': ''\">\r\n </div>\r\n\r\n\r\n </div>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngIf=\"data.showIcon\">\r\n <div class=\"icon-color px-3 mb-3 d-flex flex-column justify-content-center align-items-center\">\r\n <label class=\"input-label-1 mb-4 w-100\">Icon Color</label>\r\n <div [style.backgroundColor]=\"iconData.color\" class=\"custom-input\" (click)=\"colorInput.click()\"></div>\r\n <input type=\"color\" [(ngModel)]=\"iconData.color\" (ngModelChange)=\"changeIconColor()\" class=\"input-text d-none\"\r\n #colorInput />\r\n </div>\r\n\r\n <div class=\"background-on d-flex justify-content-between px-3 mb-2\">\r\n <label class=\"input-label-1\">Show Background</label>\r\n <div class=\"form-check form-switch ml-auto\">\r\n <input class=\"form-check-input switch-btn cursor-pointer\" type=\"checkbox\" [(ngModel)]=\"iconData.showBackground\"\r\n role=\"switch\">\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"tabs d-flex px-3 gap-3 mb-2\" *ngIf=\"iconData.showBackground\">\r\n <div class=\"tab px-3 py-2\" *ngFor=\"let tab of tabs\" (click)=\"iconData.backgroundType = tab\" [class.selectedTab]=\"iconData.backgroundType == tab\">\r\n {{tab}}\r\n </div>\r\n </div>\r\n \r\n\r\n <div class=\"icon-background px-3 d-flex flex-column justify-content-center align-items-center\"\r\n *ngIf=\"iconData.showBackground\">\r\n <label class=\"input-label-1 mb-3 w-100\">Icon Background</label>\r\n <div [style.backgroundColor]=\"iconData?.backgroundColor\" class=\"custom-input mb-2\" (click)=\"colorInput1.click()\"></div>\r\n <input type=\"color\" [(ngModel)]=\"iconData.backgroundColor\" class=\"input-text d-none\" #colorInput1 />\r\n </div>\r\n\r\n <div class=\"icon-background px-3 d-flex flex-column justify-content-center align-items-center\"\r\n *ngIf=\"iconData.showBackground && iconData.backgroundType === 'Gradient'\">\r\n <label class=\"input-label-1 mb-3 w-100\">Icon Secondary Background</label>\r\n <div [style.backgroundColor]=\"iconData?.secondaryColor\" class=\"custom-input\" (click)=\"colorInput2.click()\"></div>\r\n <input type=\"color\" [(ngModel)]=\"iconData.secondaryColor\" class=\"input-text d-none\" #colorInput2 />\r\n </div>\r\n </ng-container>\r\n\r\n\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}:host{--grey-color: rgba(250, 250, 250, 1)}.custom-input{height:35px;width:100%;border-radius:2rem;box-shadow:0 1px 3px #3c404326,0 1px 2px #3c404326}.tab{border:1px solid rgba(44,44,44,.6);border-radius:12px}.selectedTab{background:#39393934;font-weight:700}.heading{color:#000;font-size:17px;font-weight:600}.upload-text{background:var(--primary-bg-color);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:500}.upload-image{border:3px dashed rgba(44,44,44,.6);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;margin:10px 10px 22px;border-radius:20px;box-shadow:#0000000d 0 1px 2px}.upload-image img{margin-bottom:8px;height:40px}.mb-0{margin-bottom:0!important}.desc{color:#fafafa;font-size:15px}.input-field{font-size:14px;outline:none;border:unset;border-radius:5px;padding:10px;color:#090909e6;background:#fafafa}.horizontal-action{display:flex;justify-content:space-between;align-items:center}.horizontal-action label{width:25%;font-size:14px;font-weight:400!important}.main-section{display:flex;flex-direction:column}.image{display:flex;flex-direction:column;gap:5px;padding:0 10px}.slider{width:70%}.cp{cursor:pointer}.sec{padding:10px 10px 22px;position:relative}.sec img{width:100%;height:200px;border-radius:20px}.delete-image{background-color:#d92d20;width:30px;height:30px;border-radius:6px;display:flex;justify-content:center;align-items:center;position:absolute;top:20px;right:20px}.repalce-image{display:flex;align-items:center;background:#fff;padding:2px;border-radius:6px;position:absolute;bottom:30px;left:20px}.f-18{font-size:18px}.header-section{padding:10px;box-shadow:0 0 4px #00000040}.header-section .head-text{font-weight:600;font-size:15px;color:#000}.header-section mat-icon{color:#2d264b}.p-0-10{padding:0 10px}.sub-text{font-size:13px;font-weight:400;line-height:24px;color:#09090980}.w-75{width:75%}.groups{display:flex;justify-content:space-between;margin-top:25px}.groups div{font-size:15px;font-weight:600;color:#2c2c2c99;padding:6px 30px;cursor:pointer}.selectedType{position:relative;text-align:center;background:var(--primary-bg-color);background-clip:text;box-shadow:0 0 4px #00000040;border-radius:10px}.selectedType:before{content:\"\";position:absolute;inset:0;padding:1px;border-radius:10px;background:var(--primary-bg-color);mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);mask-composite:xor;mask-composite:exclude}.field-container{background:var(--grey-color);border-radius:13px;padding:10px}.drop-down-container{padding:10px;border-radius:8px;background:#fff;cursor:pointer}.drop-down-container select{width:90%;appearance:none;position:relative;outline:unset;border:unset;border-right:3px solid rgba(230,230,230,1);background:#fff;font-size:14px;padding:0 10px;border-radius:unset}.drop-down-container .down-arrow{width:10%;padding:0 6px}.input-label-1{font-size:16px;font-weight:600}.input-text{height:37px;width:100%;border:1px solid var(--grey-color);border-radius:5px;outline:none;font-size:14px;padding:10px 20px;font-weight:400;color:#090909e6}.mb-22{margin-bottom:22px}input[type=range]{-webkit-appearance:none;width:100%;height:8px;border-radius:20px;overflow:hidden;background:#fafafa}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:8px;width:10px;background:var(--primary-bg-color);box-shadow:-50rem 0 5rem 20rem #250d5e,-40rem 0 5rem 30rem #0bf,-30rem 0 2rem 25rem #250d5e,-25.5rem 0 0 25rem #0bf;border-radius:50%;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
|
|
2184
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImageEditorComponent, isStandalone: true, selector: "simpo-image-editor", ngImport: i0, template: "<section class=\"main-section\">\r\n <div class=\"header-section d-flex justify-content-between align-items-center\">\r\n <div class=\"head-text\">Image Settings</div>\r\n <mat-icon class=\"d-flex align-items-center justify-content-center f-18 cp\"\r\n (click)=\"dialogRef.close()\">close</mat-icon>\r\n </div>\r\n <div>\r\n <!-- <p class=\"heading mb-0\">Image</p> -->\r\n <div class=\"upload-image cp\" *ngIf=\"!imageData.url && !iconData.url\" (click)=\"updateImage()\">\r\n <img loading=\"lazy\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\"\r\n alt=\"\">\r\n <p class=\"upload-text mb-0\">Upload a file</p>\r\n <p class=\"upload-text mb-0\">or select an existing one</p>\r\n <span class=\"upload-text\">up to 32MB</span>\r\n </div>\r\n <div class=\"sec d-flex align-items-center\" *ngIf=\"imageData.url || iconData.url\">\r\n <ng-container *ngIf=\"!imgLoader\">\r\n <img [src]=\"imageData.url || iconData.url\" [alt]=\"imageData.altText ?? ''\">\r\n <div class=\"repalce-image cursor-pointer\" (click)=\"updateImage()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" width=\"24\"\r\n height=\"24\" class=\"icon w-4 h-4\" aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n d=\"m4 16 4.58579-4.5858c.78104-.781 2.04741-.781 2.82841 0L16 16m-2-2 1.5858-1.5858c.781-.781 2.0474-.781 2.8284 0L20 14m-6-6h.01M6 20h12c1.1046 0 2-.8954 2-2V6c0-1.10457-.8954-2-2-2H6c-1.10457 0-2 .89543-2 2v12c0 1.1046.89543 2 2 2Z\">\r\n </path>\r\n </svg>\r\n </div>\r\n\r\n <div class=\"delete-image cursor-pointer \" (click)=\"deleteImage()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"#ffffff\" viewBox=\"0 0 24 24\" width=\"24\"\r\n height=\"24\" class=\"icon h-4 w-4\" aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n d=\"m19 7-.8673 12.1425C18.0579 20.1891 17.187 21 16.1378 21H7.86224c-1.04928 0-1.92016-.8109-1.99492-1.8575L5 7m5 4v6m4-6v6m1-10V4c0-.55228-.4477-1-1-1h-4c-.55228 0-1 .44772-1 1v3M4 7h16\">\r\n </path>\r\n </svg>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"imgLoader\">\r\n <div class=\"upload_spinner d-flex w-100 h-100 justify-content-center align-items-center\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"data.showIcon\">\r\n <span class=\"p-0-10 clr-red\">Note : This Icon Feature Supports SVG and PNG in black and white format only.</span>\r\n </ng-container>\r\n <ng-container *ngIf=\"!data.showIcon\">\r\n <div class=\"w-100 p-0-10 mb-22\" *ngIf=\"imageData.hasOwnProperty('altText')\">\r\n <p class=\"heading mb-2\">Alt text</p>\r\n <input type=\"text\" placeholder=\"Enter alt text\" class=\"input-field w-100\" [(ngModel)]=\"imageData.altText\">\r\n <div class=\"sub-text\">When the image fails to load, this text will be displayed.</div>\r\n </div>\r\n\r\n <div class=\"image mb-22\" *ngIf=\"imageData.hasOwnProperty('position')\">\r\n <p class=\"heading mb-1\">Image Position</p>\r\n <div class=\"horizontal-action\">\r\n <label>Horizontal</label>\r\n <div class=\"slider d-flex align-items-center justify-content-start cp\">\r\n <input [min]=\"min\" [max]=\"max\" step=\"5\" type=\"range\" [(ngModel)]=\"imageData.position.x\"\r\n (input)=\"horizontalPosition()\" class=\"w-75\">\r\n </div>\r\n </div>\r\n <div class=\"horizontal-action\" style=\"margin-top: 5px;\">\r\n <label>Vertical</label>\r\n <div class=\"slider d-flex align-items-center justify-content-start cp\">\r\n <input [min]=\"min\" [max]=\"max\" step=\"5\" type=\"range\" [(ngModel)]=\"imageData.position.y\"\r\n (input)=\"horizontalPosition()\" class=\"w-75\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"groups cp px-3\">\r\n <div *ngFor=\"let type of linkType\" [ngClass]=\"{'selectedType' : type.type === selectedType}\"\r\n (click)=\"changeType(type.type)\">{{type.type}}</div>\r\n </div>\r\n <div class=\"field-container mt-3 mx-3\">\r\n <div *ngIf=\"link.linkType === RedirectionLink.Page\">\r\n <label class=\"input-label-1 mt-3 mb-2\">Select Page</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"link.pageId\" (change)=\"onPageChange($event)\">\r\n <option value=\"\" selected>Select from your existing pages</option>\r\n <option *ngFor=\"let page of templatePage\" [value]=\"page.id\" style=\"padding: 10px;\">\r\n {{page.pageName}}</option>\r\n </select>\r\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"pageName == 'Product List'\">\r\n <label class=\"input-label-1 mt-3 mb-2\">Select Collection</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"collectionPath\" (ngModelChange)=\"addCollectionToPath()\">\r\n <option value=\"\" selected>Select from your existing pages</option>\r\n <option *ngFor=\"let coll of collectionList\" style=\"padding: 10px;\" [value]=\"coll.collectionName\">\r\n {{coll?.collectionName}}</option>\r\n </select>\r\n </div>\r\n <label class=\"input-label-1 mt-3 mb-2\">Select Category</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"categoryPath\" (ngModelChange)=\"addCategoryToPath()\">\r\n <option value=\"\" selected>Select from your existing pages</option>\r\n <option *ngFor=\"let coll of categoryList\" style=\"padding: 10px;\" [value]=\"coll.categoryName\">\r\n {{coll?.categoryName}}</option>\r\n </select>\r\n </div>\r\n </ng-container>\r\n <!-- <div class=\"sub-text\">Select from your existing pages</div> -->\r\n </div>\r\n <div *ngIf=\"link.linkType === RedirectionLink.section\">\r\n <label class=\"mt-3 mb-2 input-label-1\">Section</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"link.pageId\">\r\n <option value=\"\" selected>Select the Section</option>\r\n <option *ngFor=\"let section of templatePage[0]?.components\" [value]=\"section.id\">{{section.sectionName}}\r\n </option>\r\n </select>\r\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-between mt-10\">\r\n <label class=\"input-label-2\">Open in a new browser tab</label>\r\n <div class=\"form-check form-switch ml-auto\">\r\n <input class=\"form-check-input switch-btn cursor-pointer\" type=\"checkbox\" [(ngModel)]=\"link.newTab\"\r\n role=\"switch\">\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"link.linkType === RedirectionLink.External || link.linkType === RedirectionLink.Email || link.linkType === RedirectionLink.Phone\">\r\n <label class=\"mt-3 mb-2 input-label-1\">Select type</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"link.linkType\">\r\n <option value=\"\" selected>Select the Type</option>\r\n <option *ngFor=\"let type of externalLinkType\" [value]=\"type.type\">{{type.type}}</option>\r\n </select>\r\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n </div>\r\n </div>\r\n <label class=\"input-label mb-2\">{{link.linkType === RedirectionLink.External ? 'Website' : link.linkType ===\r\n RedirectionLink.Email ? 'Email Address' : 'Phone Number'}}</label>\r\n <input type=\"text\" class=\"input-text\" [(ngModel)]=\"link.redirectionUrl\"\r\n [placeholder]=\"link.linkType === RedirectionLink.External ? 'example : https://facebook.com': ''\">\r\n </div>\r\n\r\n\r\n </div>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngIf=\"data.showIcon\">\r\n <div class=\"icon-color px-3 mb-3 d-flex flex-column justify-content-center align-items-center\">\r\n <label class=\"input-label-1 mb-4 w-100\">Icon Color</label>\r\n <div [style.backgroundColor]=\"iconData.color\" class=\"custom-input\" (click)=\"colorInput.click()\"></div>\r\n <input type=\"color\" [(ngModel)]=\"iconData.color\" (ngModelChange)=\"changeIconColor()\" class=\"input-text d-none\"\r\n #colorInput />\r\n </div>\r\n\r\n <div class=\"background-on d-flex justify-content-between px-3 mb-2\">\r\n <label class=\"input-label-1\">Show Background</label>\r\n <div class=\"form-check form-switch ml-auto\">\r\n <input class=\"form-check-input switch-btn cursor-pointer\" type=\"checkbox\" [(ngModel)]=\"iconData.showBackground\"\r\n role=\"switch\">\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"tabs d-flex px-3 gap-3 mb-2\" *ngIf=\"iconData.showBackground\">\r\n <div class=\"tab px-3 py-2\" *ngFor=\"let tab of tabs\" (click)=\"iconData.backgroundType = tab\" [class.selectedTab]=\"iconData.backgroundType == tab\">\r\n {{tab}}\r\n </div>\r\n </div>\r\n \r\n\r\n <div class=\"icon-background px-3 d-flex flex-column justify-content-center align-items-center\"\r\n *ngIf=\"iconData.showBackground\">\r\n <label class=\"input-label-1 mb-3 w-100\">Icon Background</label>\r\n <div [style.backgroundColor]=\"iconData?.backgroundColor\" class=\"custom-input mb-2\" (click)=\"colorInput1.click()\"></div>\r\n <input type=\"color\" [(ngModel)]=\"iconData.backgroundColor\" class=\"input-text d-none\" #colorInput1 />\r\n </div>\r\n\r\n <div class=\"icon-background px-3 d-flex flex-column justify-content-center align-items-center\"\r\n *ngIf=\"iconData.showBackground && iconData.backgroundType === 'Gradient'\">\r\n <label class=\"input-label-1 mb-3 w-100\">Icon Secondary Background</label>\r\n <div [style.backgroundColor]=\"iconData?.secondaryColor\" class=\"custom-input\" (click)=\"colorInput2.click()\"></div>\r\n <input type=\"color\" [(ngModel)]=\"iconData.secondaryColor\" class=\"input-text d-none\" #colorInput2 />\r\n </div>\r\n </ng-container>\r\n\r\n\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}:host{--grey-color: rgba(250, 250, 250, 1)}.custom-input{height:35px;width:100%;border-radius:2rem;box-shadow:0 1px 3px #3c404326,0 1px 2px #3c404326}.tab{border:1px solid rgba(44,44,44,.6);border-radius:12px}.selectedTab{background:#39393934;font-weight:700}.clr-red{color:red;font-size:12px;margin-bottom:10px}.heading{color:#000;font-size:17px;font-weight:600}.upload-text{background:var(--primary-bg-color);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:500}.upload-image{border:3px dashed rgba(44,44,44,.6);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;margin:10px 10px 22px;border-radius:20px;box-shadow:#0000000d 0 1px 2px}.upload-image img{margin-bottom:8px;height:40px}.mb-0{margin-bottom:0!important}.desc{color:#fafafa;font-size:15px}.input-field{font-size:14px;outline:none;border:unset;border-radius:5px;padding:10px;color:#090909e6;background:#fafafa}.horizontal-action{display:flex;justify-content:space-between;align-items:center}.horizontal-action label{width:25%;font-size:14px;font-weight:400!important}.main-section{display:flex;flex-direction:column}.image{display:flex;flex-direction:column;gap:5px;padding:0 10px}.slider{width:70%}.cp{cursor:pointer}.sec{padding:10px 10px 22px;position:relative}.sec img{width:100%;height:200px;border-radius:20px}.delete-image{background-color:#d92d20;width:30px;height:30px;border-radius:6px;display:flex;justify-content:center;align-items:center;position:absolute;top:20px;right:20px}.repalce-image{display:flex;align-items:center;background:#fff;padding:2px;border-radius:6px;position:absolute;bottom:30px;left:20px}.f-18{font-size:18px}.header-section{padding:10px;box-shadow:0 0 4px #00000040}.header-section .head-text{font-weight:600;font-size:15px;color:#000}.header-section mat-icon{color:#2d264b}.p-0-10{padding:0 10px}.sub-text{font-size:13px;font-weight:400;line-height:24px;color:#09090980}.w-75{width:75%}.groups{display:flex;justify-content:space-between;margin-top:25px}.groups div{font-size:15px;font-weight:600;color:#2c2c2c99;padding:6px 30px;cursor:pointer}.selectedType{position:relative;text-align:center;background:var(--primary-bg-color);background-clip:text;box-shadow:0 0 4px #00000040;border-radius:10px}.selectedType:before{content:\"\";position:absolute;inset:0;padding:1px;border-radius:10px;background:var(--primary-bg-color);mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);mask-composite:xor;mask-composite:exclude}.field-container{background:var(--grey-color);border-radius:13px;padding:10px}.drop-down-container{padding:10px;border-radius:8px;background:#fff;cursor:pointer}.drop-down-container select{width:90%;appearance:none;position:relative;outline:unset;border:unset;border-right:3px solid rgba(230,230,230,1);background:#fff;font-size:14px;padding:0 10px;border-radius:unset}.drop-down-container .down-arrow{width:10%;padding:0 6px}.input-label-1{font-size:16px;font-weight:600}.input-text{height:37px;width:100%;border:1px solid var(--grey-color);border-radius:5px;outline:none;font-size:14px;padding:10px 20px;font-weight:400;color:#090909e6}.mb-22{margin-bottom:22px}input[type=range]{-webkit-appearance:none;width:100%;height:8px;border-radius:20px;overflow:hidden;background:#fafafa}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:8px;width:10px;background:var(--primary-bg-color);box-shadow:-50rem 0 5rem 20rem #250d5e,-40rem 0 5rem 30rem #0bf,-30rem 0 2rem 25rem #250d5e,-25.5rem 0 0 25rem #0bf;border-radius:50%;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
|
|
2185
2185
|
}
|
|
2186
2186
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageEditorComponent, decorators: [{
|
|
2187
2187
|
type: Component,
|
|
2188
|
-
args: [{ selector: 'simpo-image-editor', standalone: true, imports: [CommonModule, FormsModule, MatIconModule, MatSliderModule, MatProgressSpinner], template: "<section class=\"main-section\">\r\n <div class=\"header-section d-flex justify-content-between align-items-center\">\r\n <div class=\"head-text\">Image Settings</div>\r\n <mat-icon class=\"d-flex align-items-center justify-content-center f-18 cp\"\r\n (click)=\"dialogRef.close()\">close</mat-icon>\r\n </div>\r\n <div>\r\n <!-- <p class=\"heading mb-0\">Image</p> -->\r\n <div class=\"upload-image cp\" *ngIf=\"!imageData.url && !iconData.url\" (click)=\"updateImage()\">\r\n <img loading=\"lazy\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\"\r\n alt=\"\">\r\n <p class=\"upload-text mb-0\">Upload a file</p>\r\n <p class=\"upload-text mb-0\">or select an existing one</p>\r\n <span class=\"upload-text\">up to 32MB</span>\r\n </div>\r\n <div class=\"sec d-flex align-items-center\" *ngIf=\"imageData.url || iconData.url\">\r\n <ng-container *ngIf=\"!imgLoader\">\r\n <img [src]=\"imageData.url || iconData.url\" [alt]=\"imageData.altText ?? ''\">\r\n <div class=\"repalce-image cursor-pointer\" (click)=\"updateImage()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" width=\"24\"\r\n height=\"24\" class=\"icon w-4 h-4\" aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n d=\"m4 16 4.58579-4.5858c.78104-.781 2.04741-.781 2.82841 0L16 16m-2-2 1.5858-1.5858c.781-.781 2.0474-.781 2.8284 0L20 14m-6-6h.01M6 20h12c1.1046 0 2-.8954 2-2V6c0-1.10457-.8954-2-2-2H6c-1.10457 0-2 .89543-2 2v12c0 1.1046.89543 2 2 2Z\">\r\n </path>\r\n </svg>\r\n </div>\r\n\r\n <div class=\"delete-image cursor-pointer \" (click)=\"deleteImage()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"#ffffff\" viewBox=\"0 0 24 24\" width=\"24\"\r\n height=\"24\" class=\"icon h-4 w-4\" aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n d=\"m19 7-.8673 12.1425C18.0579 20.1891 17.187 21 16.1378 21H7.86224c-1.04928 0-1.92016-.8109-1.99492-1.8575L5 7m5 4v6m4-6v6m1-10V4c0-.55228-.4477-1-1-1h-4c-.55228 0-1 .44772-1 1v3M4 7h16\">\r\n </path>\r\n </svg>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"imgLoader\">\r\n <div class=\"upload_spinner d-flex w-100 h-100 justify-content-center align-items-center\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"!data.showIcon\">\r\n <div class=\"w-100 p-0-10 mb-22\" *ngIf=\"imageData.hasOwnProperty('altText')\">\r\n <p class=\"heading mb-2\">Alt text</p>\r\n <input type=\"text\" placeholder=\"Enter alt text\" class=\"input-field w-100\" [(ngModel)]=\"imageData.altText\">\r\n <div class=\"sub-text\">When the image fails to load, this text will be displayed.</div>\r\n </div>\r\n\r\n <div class=\"image mb-22\" *ngIf=\"imageData.hasOwnProperty('position')\">\r\n <p class=\"heading mb-1\">Image Position</p>\r\n <div class=\"horizontal-action\">\r\n <label>Horizontal</label>\r\n <div class=\"slider d-flex align-items-center justify-content-start cp\">\r\n <input [min]=\"min\" [max]=\"max\" step=\"5\" type=\"range\" [(ngModel)]=\"imageData.position.x\"\r\n (input)=\"horizontalPosition()\" class=\"w-75\">\r\n </div>\r\n </div>\r\n <div class=\"horizontal-action\" style=\"margin-top: 5px;\">\r\n <label>Vertical</label>\r\n <div class=\"slider d-flex align-items-center justify-content-start cp\">\r\n <input [min]=\"min\" [max]=\"max\" step=\"5\" type=\"range\" [(ngModel)]=\"imageData.position.y\"\r\n (input)=\"horizontalPosition()\" class=\"w-75\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"groups cp px-3\">\r\n <div *ngFor=\"let type of linkType\" [ngClass]=\"{'selectedType' : type.type === selectedType}\"\r\n (click)=\"changeType(type.type)\">{{type.type}}</div>\r\n </div>\r\n <div class=\"field-container mt-3 mx-3\">\r\n <div *ngIf=\"link.linkType === RedirectionLink.Page\">\r\n <label class=\"input-label-1 mt-3 mb-2\">Select Page</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"link.pageId\" (change)=\"onPageChange($event)\">\r\n <option value=\"\" selected>Select from your existing pages</option>\r\n <option *ngFor=\"let page of templatePage\" [value]=\"page.id\" style=\"padding: 10px;\">\r\n {{page.pageName}}</option>\r\n </select>\r\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"pageName == 'Product List'\">\r\n <label class=\"input-label-1 mt-3 mb-2\">Select Collection</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"collectionPath\" (ngModelChange)=\"addCollectionToPath()\">\r\n <option value=\"\" selected>Select from your existing pages</option>\r\n <option *ngFor=\"let coll of collectionList\" style=\"padding: 10px;\" [value]=\"coll.collectionName\">\r\n {{coll?.collectionName}}</option>\r\n </select>\r\n </div>\r\n <label class=\"input-label-1 mt-3 mb-2\">Select Category</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"categoryPath\" (ngModelChange)=\"addCategoryToPath()\">\r\n <option value=\"\" selected>Select from your existing pages</option>\r\n <option *ngFor=\"let coll of categoryList\" style=\"padding: 10px;\" [value]=\"coll.categoryName\">\r\n {{coll?.categoryName}}</option>\r\n </select>\r\n </div>\r\n </ng-container>\r\n <!-- <div class=\"sub-text\">Select from your existing pages</div> -->\r\n </div>\r\n <div *ngIf=\"link.linkType === RedirectionLink.section\">\r\n <label class=\"mt-3 mb-2 input-label-1\">Section</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"link.pageId\">\r\n <option value=\"\" selected>Select the Section</option>\r\n <option *ngFor=\"let section of templatePage[0]?.components\" [value]=\"section.id\">{{section.sectionName}}\r\n </option>\r\n </select>\r\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-between mt-10\">\r\n <label class=\"input-label-2\">Open in a new browser tab</label>\r\n <div class=\"form-check form-switch ml-auto\">\r\n <input class=\"form-check-input switch-btn cursor-pointer\" type=\"checkbox\" [(ngModel)]=\"link.newTab\"\r\n role=\"switch\">\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"link.linkType === RedirectionLink.External || link.linkType === RedirectionLink.Email || link.linkType === RedirectionLink.Phone\">\r\n <label class=\"mt-3 mb-2 input-label-1\">Select type</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"link.linkType\">\r\n <option value=\"\" selected>Select the Type</option>\r\n <option *ngFor=\"let type of externalLinkType\" [value]=\"type.type\">{{type.type}}</option>\r\n </select>\r\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n </div>\r\n </div>\r\n <label class=\"input-label mb-2\">{{link.linkType === RedirectionLink.External ? 'Website' : link.linkType ===\r\n RedirectionLink.Email ? 'Email Address' : 'Phone Number'}}</label>\r\n <input type=\"text\" class=\"input-text\" [(ngModel)]=\"link.redirectionUrl\"\r\n [placeholder]=\"link.linkType === RedirectionLink.External ? 'example : https://facebook.com': ''\">\r\n </div>\r\n\r\n\r\n </div>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngIf=\"data.showIcon\">\r\n <div class=\"icon-color px-3 mb-3 d-flex flex-column justify-content-center align-items-center\">\r\n <label class=\"input-label-1 mb-4 w-100\">Icon Color</label>\r\n <div [style.backgroundColor]=\"iconData.color\" class=\"custom-input\" (click)=\"colorInput.click()\"></div>\r\n <input type=\"color\" [(ngModel)]=\"iconData.color\" (ngModelChange)=\"changeIconColor()\" class=\"input-text d-none\"\r\n #colorInput />\r\n </div>\r\n\r\n <div class=\"background-on d-flex justify-content-between px-3 mb-2\">\r\n <label class=\"input-label-1\">Show Background</label>\r\n <div class=\"form-check form-switch ml-auto\">\r\n <input class=\"form-check-input switch-btn cursor-pointer\" type=\"checkbox\" [(ngModel)]=\"iconData.showBackground\"\r\n role=\"switch\">\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"tabs d-flex px-3 gap-3 mb-2\" *ngIf=\"iconData.showBackground\">\r\n <div class=\"tab px-3 py-2\" *ngFor=\"let tab of tabs\" (click)=\"iconData.backgroundType = tab\" [class.selectedTab]=\"iconData.backgroundType == tab\">\r\n {{tab}}\r\n </div>\r\n </div>\r\n \r\n\r\n <div class=\"icon-background px-3 d-flex flex-column justify-content-center align-items-center\"\r\n *ngIf=\"iconData.showBackground\">\r\n <label class=\"input-label-1 mb-3 w-100\">Icon Background</label>\r\n <div [style.backgroundColor]=\"iconData?.backgroundColor\" class=\"custom-input mb-2\" (click)=\"colorInput1.click()\"></div>\r\n <input type=\"color\" [(ngModel)]=\"iconData.backgroundColor\" class=\"input-text d-none\" #colorInput1 />\r\n </div>\r\n\r\n <div class=\"icon-background px-3 d-flex flex-column justify-content-center align-items-center\"\r\n *ngIf=\"iconData.showBackground && iconData.backgroundType === 'Gradient'\">\r\n <label class=\"input-label-1 mb-3 w-100\">Icon Secondary Background</label>\r\n <div [style.backgroundColor]=\"iconData?.secondaryColor\" class=\"custom-input\" (click)=\"colorInput2.click()\"></div>\r\n <input type=\"color\" [(ngModel)]=\"iconData.secondaryColor\" class=\"input-text d-none\" #colorInput2 />\r\n </div>\r\n </ng-container>\r\n\r\n\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}:host{--grey-color: rgba(250, 250, 250, 1)}.custom-input{height:35px;width:100%;border-radius:2rem;box-shadow:0 1px 3px #3c404326,0 1px 2px #3c404326}.tab{border:1px solid rgba(44,44,44,.6);border-radius:12px}.selectedTab{background:#39393934;font-weight:700}.heading{color:#000;font-size:17px;font-weight:600}.upload-text{background:var(--primary-bg-color);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:500}.upload-image{border:3px dashed rgba(44,44,44,.6);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;margin:10px 10px 22px;border-radius:20px;box-shadow:#0000000d 0 1px 2px}.upload-image img{margin-bottom:8px;height:40px}.mb-0{margin-bottom:0!important}.desc{color:#fafafa;font-size:15px}.input-field{font-size:14px;outline:none;border:unset;border-radius:5px;padding:10px;color:#090909e6;background:#fafafa}.horizontal-action{display:flex;justify-content:space-between;align-items:center}.horizontal-action label{width:25%;font-size:14px;font-weight:400!important}.main-section{display:flex;flex-direction:column}.image{display:flex;flex-direction:column;gap:5px;padding:0 10px}.slider{width:70%}.cp{cursor:pointer}.sec{padding:10px 10px 22px;position:relative}.sec img{width:100%;height:200px;border-radius:20px}.delete-image{background-color:#d92d20;width:30px;height:30px;border-radius:6px;display:flex;justify-content:center;align-items:center;position:absolute;top:20px;right:20px}.repalce-image{display:flex;align-items:center;background:#fff;padding:2px;border-radius:6px;position:absolute;bottom:30px;left:20px}.f-18{font-size:18px}.header-section{padding:10px;box-shadow:0 0 4px #00000040}.header-section .head-text{font-weight:600;font-size:15px;color:#000}.header-section mat-icon{color:#2d264b}.p-0-10{padding:0 10px}.sub-text{font-size:13px;font-weight:400;line-height:24px;color:#09090980}.w-75{width:75%}.groups{display:flex;justify-content:space-between;margin-top:25px}.groups div{font-size:15px;font-weight:600;color:#2c2c2c99;padding:6px 30px;cursor:pointer}.selectedType{position:relative;text-align:center;background:var(--primary-bg-color);background-clip:text;box-shadow:0 0 4px #00000040;border-radius:10px}.selectedType:before{content:\"\";position:absolute;inset:0;padding:1px;border-radius:10px;background:var(--primary-bg-color);mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);mask-composite:xor;mask-composite:exclude}.field-container{background:var(--grey-color);border-radius:13px;padding:10px}.drop-down-container{padding:10px;border-radius:8px;background:#fff;cursor:pointer}.drop-down-container select{width:90%;appearance:none;position:relative;outline:unset;border:unset;border-right:3px solid rgba(230,230,230,1);background:#fff;font-size:14px;padding:0 10px;border-radius:unset}.drop-down-container .down-arrow{width:10%;padding:0 6px}.input-label-1{font-size:16px;font-weight:600}.input-text{height:37px;width:100%;border:1px solid var(--grey-color);border-radius:5px;outline:none;font-size:14px;padding:10px 20px;font-weight:400;color:#090909e6}.mb-22{margin-bottom:22px}input[type=range]{-webkit-appearance:none;width:100%;height:8px;border-radius:20px;overflow:hidden;background:#fafafa}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:8px;width:10px;background:var(--primary-bg-color);box-shadow:-50rem 0 5rem 20rem #250d5e,-40rem 0 5rem 30rem #0bf,-30rem 0 2rem 25rem #250d5e,-25.5rem 0 0 25rem #0bf;border-radius:50%;cursor:pointer}\n"] }]
|
|
2188
|
+
args: [{ selector: 'simpo-image-editor', standalone: true, imports: [CommonModule, FormsModule, MatIconModule, MatSliderModule, MatProgressSpinner], template: "<section class=\"main-section\">\r\n <div class=\"header-section d-flex justify-content-between align-items-center\">\r\n <div class=\"head-text\">Image Settings</div>\r\n <mat-icon class=\"d-flex align-items-center justify-content-center f-18 cp\"\r\n (click)=\"dialogRef.close()\">close</mat-icon>\r\n </div>\r\n <div>\r\n <!-- <p class=\"heading mb-0\">Image</p> -->\r\n <div class=\"upload-image cp\" *ngIf=\"!imageData.url && !iconData.url\" (click)=\"updateImage()\">\r\n <img loading=\"lazy\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\"\r\n alt=\"\">\r\n <p class=\"upload-text mb-0\">Upload a file</p>\r\n <p class=\"upload-text mb-0\">or select an existing one</p>\r\n <span class=\"upload-text\">up to 32MB</span>\r\n </div>\r\n <div class=\"sec d-flex align-items-center\" *ngIf=\"imageData.url || iconData.url\">\r\n <ng-container *ngIf=\"!imgLoader\">\r\n <img [src]=\"imageData.url || iconData.url\" [alt]=\"imageData.altText ?? ''\">\r\n <div class=\"repalce-image cursor-pointer\" (click)=\"updateImage()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" width=\"24\"\r\n height=\"24\" class=\"icon w-4 h-4\" aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n d=\"m4 16 4.58579-4.5858c.78104-.781 2.04741-.781 2.82841 0L16 16m-2-2 1.5858-1.5858c.781-.781 2.0474-.781 2.8284 0L20 14m-6-6h.01M6 20h12c1.1046 0 2-.8954 2-2V6c0-1.10457-.8954-2-2-2H6c-1.10457 0-2 .89543-2 2v12c0 1.1046.89543 2 2 2Z\">\r\n </path>\r\n </svg>\r\n </div>\r\n\r\n <div class=\"delete-image cursor-pointer \" (click)=\"deleteImage()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"#ffffff\" viewBox=\"0 0 24 24\" width=\"24\"\r\n height=\"24\" class=\"icon h-4 w-4\" aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n d=\"m19 7-.8673 12.1425C18.0579 20.1891 17.187 21 16.1378 21H7.86224c-1.04928 0-1.92016-.8109-1.99492-1.8575L5 7m5 4v6m4-6v6m1-10V4c0-.55228-.4477-1-1-1h-4c-.55228 0-1 .44772-1 1v3M4 7h16\">\r\n </path>\r\n </svg>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"imgLoader\">\r\n <div class=\"upload_spinner d-flex w-100 h-100 justify-content-center align-items-center\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"data.showIcon\">\r\n <span class=\"p-0-10 clr-red\">Note : This Icon Feature Supports SVG and PNG in black and white format only.</span>\r\n </ng-container>\r\n <ng-container *ngIf=\"!data.showIcon\">\r\n <div class=\"w-100 p-0-10 mb-22\" *ngIf=\"imageData.hasOwnProperty('altText')\">\r\n <p class=\"heading mb-2\">Alt text</p>\r\n <input type=\"text\" placeholder=\"Enter alt text\" class=\"input-field w-100\" [(ngModel)]=\"imageData.altText\">\r\n <div class=\"sub-text\">When the image fails to load, this text will be displayed.</div>\r\n </div>\r\n\r\n <div class=\"image mb-22\" *ngIf=\"imageData.hasOwnProperty('position')\">\r\n <p class=\"heading mb-1\">Image Position</p>\r\n <div class=\"horizontal-action\">\r\n <label>Horizontal</label>\r\n <div class=\"slider d-flex align-items-center justify-content-start cp\">\r\n <input [min]=\"min\" [max]=\"max\" step=\"5\" type=\"range\" [(ngModel)]=\"imageData.position.x\"\r\n (input)=\"horizontalPosition()\" class=\"w-75\">\r\n </div>\r\n </div>\r\n <div class=\"horizontal-action\" style=\"margin-top: 5px;\">\r\n <label>Vertical</label>\r\n <div class=\"slider d-flex align-items-center justify-content-start cp\">\r\n <input [min]=\"min\" [max]=\"max\" step=\"5\" type=\"range\" [(ngModel)]=\"imageData.position.y\"\r\n (input)=\"horizontalPosition()\" class=\"w-75\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"groups cp px-3\">\r\n <div *ngFor=\"let type of linkType\" [ngClass]=\"{'selectedType' : type.type === selectedType}\"\r\n (click)=\"changeType(type.type)\">{{type.type}}</div>\r\n </div>\r\n <div class=\"field-container mt-3 mx-3\">\r\n <div *ngIf=\"link.linkType === RedirectionLink.Page\">\r\n <label class=\"input-label-1 mt-3 mb-2\">Select Page</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"link.pageId\" (change)=\"onPageChange($event)\">\r\n <option value=\"\" selected>Select from your existing pages</option>\r\n <option *ngFor=\"let page of templatePage\" [value]=\"page.id\" style=\"padding: 10px;\">\r\n {{page.pageName}}</option>\r\n </select>\r\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"pageName == 'Product List'\">\r\n <label class=\"input-label-1 mt-3 mb-2\">Select Collection</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"collectionPath\" (ngModelChange)=\"addCollectionToPath()\">\r\n <option value=\"\" selected>Select from your existing pages</option>\r\n <option *ngFor=\"let coll of collectionList\" style=\"padding: 10px;\" [value]=\"coll.collectionName\">\r\n {{coll?.collectionName}}</option>\r\n </select>\r\n </div>\r\n <label class=\"input-label-1 mt-3 mb-2\">Select Category</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"categoryPath\" (ngModelChange)=\"addCategoryToPath()\">\r\n <option value=\"\" selected>Select from your existing pages</option>\r\n <option *ngFor=\"let coll of categoryList\" style=\"padding: 10px;\" [value]=\"coll.categoryName\">\r\n {{coll?.categoryName}}</option>\r\n </select>\r\n </div>\r\n </ng-container>\r\n <!-- <div class=\"sub-text\">Select from your existing pages</div> -->\r\n </div>\r\n <div *ngIf=\"link.linkType === RedirectionLink.section\">\r\n <label class=\"mt-3 mb-2 input-label-1\">Section</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"link.pageId\">\r\n <option value=\"\" selected>Select the Section</option>\r\n <option *ngFor=\"let section of templatePage[0]?.components\" [value]=\"section.id\">{{section.sectionName}}\r\n </option>\r\n </select>\r\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-between mt-10\">\r\n <label class=\"input-label-2\">Open in a new browser tab</label>\r\n <div class=\"form-check form-switch ml-auto\">\r\n <input class=\"form-check-input switch-btn cursor-pointer\" type=\"checkbox\" [(ngModel)]=\"link.newTab\"\r\n role=\"switch\">\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"link.linkType === RedirectionLink.External || link.linkType === RedirectionLink.Email || link.linkType === RedirectionLink.Phone\">\r\n <label class=\"mt-3 mb-2 input-label-1\">Select type</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"link.linkType\">\r\n <option value=\"\" selected>Select the Type</option>\r\n <option *ngFor=\"let type of externalLinkType\" [value]=\"type.type\">{{type.type}}</option>\r\n </select>\r\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n </div>\r\n </div>\r\n <label class=\"input-label mb-2\">{{link.linkType === RedirectionLink.External ? 'Website' : link.linkType ===\r\n RedirectionLink.Email ? 'Email Address' : 'Phone Number'}}</label>\r\n <input type=\"text\" class=\"input-text\" [(ngModel)]=\"link.redirectionUrl\"\r\n [placeholder]=\"link.linkType === RedirectionLink.External ? 'example : https://facebook.com': ''\">\r\n </div>\r\n\r\n\r\n </div>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngIf=\"data.showIcon\">\r\n <div class=\"icon-color px-3 mb-3 d-flex flex-column justify-content-center align-items-center\">\r\n <label class=\"input-label-1 mb-4 w-100\">Icon Color</label>\r\n <div [style.backgroundColor]=\"iconData.color\" class=\"custom-input\" (click)=\"colorInput.click()\"></div>\r\n <input type=\"color\" [(ngModel)]=\"iconData.color\" (ngModelChange)=\"changeIconColor()\" class=\"input-text d-none\"\r\n #colorInput />\r\n </div>\r\n\r\n <div class=\"background-on d-flex justify-content-between px-3 mb-2\">\r\n <label class=\"input-label-1\">Show Background</label>\r\n <div class=\"form-check form-switch ml-auto\">\r\n <input class=\"form-check-input switch-btn cursor-pointer\" type=\"checkbox\" [(ngModel)]=\"iconData.showBackground\"\r\n role=\"switch\">\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"tabs d-flex px-3 gap-3 mb-2\" *ngIf=\"iconData.showBackground\">\r\n <div class=\"tab px-3 py-2\" *ngFor=\"let tab of tabs\" (click)=\"iconData.backgroundType = tab\" [class.selectedTab]=\"iconData.backgroundType == tab\">\r\n {{tab}}\r\n </div>\r\n </div>\r\n \r\n\r\n <div class=\"icon-background px-3 d-flex flex-column justify-content-center align-items-center\"\r\n *ngIf=\"iconData.showBackground\">\r\n <label class=\"input-label-1 mb-3 w-100\">Icon Background</label>\r\n <div [style.backgroundColor]=\"iconData?.backgroundColor\" class=\"custom-input mb-2\" (click)=\"colorInput1.click()\"></div>\r\n <input type=\"color\" [(ngModel)]=\"iconData.backgroundColor\" class=\"input-text d-none\" #colorInput1 />\r\n </div>\r\n\r\n <div class=\"icon-background px-3 d-flex flex-column justify-content-center align-items-center\"\r\n *ngIf=\"iconData.showBackground && iconData.backgroundType === 'Gradient'\">\r\n <label class=\"input-label-1 mb-3 w-100\">Icon Secondary Background</label>\r\n <div [style.backgroundColor]=\"iconData?.secondaryColor\" class=\"custom-input\" (click)=\"colorInput2.click()\"></div>\r\n <input type=\"color\" [(ngModel)]=\"iconData.secondaryColor\" class=\"input-text d-none\" #colorInput2 />\r\n </div>\r\n </ng-container>\r\n\r\n\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}:host{--grey-color: rgba(250, 250, 250, 1)}.custom-input{height:35px;width:100%;border-radius:2rem;box-shadow:0 1px 3px #3c404326,0 1px 2px #3c404326}.tab{border:1px solid rgba(44,44,44,.6);border-radius:12px}.selectedTab{background:#39393934;font-weight:700}.clr-red{color:red;font-size:12px;margin-bottom:10px}.heading{color:#000;font-size:17px;font-weight:600}.upload-text{background:var(--primary-bg-color);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:500}.upload-image{border:3px dashed rgba(44,44,44,.6);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;margin:10px 10px 22px;border-radius:20px;box-shadow:#0000000d 0 1px 2px}.upload-image img{margin-bottom:8px;height:40px}.mb-0{margin-bottom:0!important}.desc{color:#fafafa;font-size:15px}.input-field{font-size:14px;outline:none;border:unset;border-radius:5px;padding:10px;color:#090909e6;background:#fafafa}.horizontal-action{display:flex;justify-content:space-between;align-items:center}.horizontal-action label{width:25%;font-size:14px;font-weight:400!important}.main-section{display:flex;flex-direction:column}.image{display:flex;flex-direction:column;gap:5px;padding:0 10px}.slider{width:70%}.cp{cursor:pointer}.sec{padding:10px 10px 22px;position:relative}.sec img{width:100%;height:200px;border-radius:20px}.delete-image{background-color:#d92d20;width:30px;height:30px;border-radius:6px;display:flex;justify-content:center;align-items:center;position:absolute;top:20px;right:20px}.repalce-image{display:flex;align-items:center;background:#fff;padding:2px;border-radius:6px;position:absolute;bottom:30px;left:20px}.f-18{font-size:18px}.header-section{padding:10px;box-shadow:0 0 4px #00000040}.header-section .head-text{font-weight:600;font-size:15px;color:#000}.header-section mat-icon{color:#2d264b}.p-0-10{padding:0 10px}.sub-text{font-size:13px;font-weight:400;line-height:24px;color:#09090980}.w-75{width:75%}.groups{display:flex;justify-content:space-between;margin-top:25px}.groups div{font-size:15px;font-weight:600;color:#2c2c2c99;padding:6px 30px;cursor:pointer}.selectedType{position:relative;text-align:center;background:var(--primary-bg-color);background-clip:text;box-shadow:0 0 4px #00000040;border-radius:10px}.selectedType:before{content:\"\";position:absolute;inset:0;padding:1px;border-radius:10px;background:var(--primary-bg-color);mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);mask-composite:xor;mask-composite:exclude}.field-container{background:var(--grey-color);border-radius:13px;padding:10px}.drop-down-container{padding:10px;border-radius:8px;background:#fff;cursor:pointer}.drop-down-container select{width:90%;appearance:none;position:relative;outline:unset;border:unset;border-right:3px solid rgba(230,230,230,1);background:#fff;font-size:14px;padding:0 10px;border-radius:unset}.drop-down-container .down-arrow{width:10%;padding:0 6px}.input-label-1{font-size:16px;font-weight:600}.input-text{height:37px;width:100%;border:1px solid var(--grey-color);border-radius:5px;outline:none;font-size:14px;padding:10px 20px;font-weight:400;color:#090909e6}.mb-22{margin-bottom:22px}input[type=range]{-webkit-appearance:none;width:100%;height:8px;border-radius:20px;overflow:hidden;background:#fafafa}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:8px;width:10px;background:var(--primary-bg-color);box-shadow:-50rem 0 5rem 20rem #250d5e,-40rem 0 5rem 30rem #0bf,-30rem 0 2rem 25rem #250d5e,-25.5rem 0 0 25rem #0bf;border-radius:50%;cursor:pointer}\n"] }]
|
|
2189
2189
|
}], ctorParameters: () => [{ type: EventsService }, { type: ElementServiceService }, { type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
|
|
2190
2190
|
type: Inject,
|
|
2191
2191
|
args: [MAT_DIALOG_DATA]
|
|
@@ -2639,7 +2639,7 @@ class BelowImageCardComponent {
|
|
|
2639
2639
|
}
|
|
2640
2640
|
}
|
|
2641
2641
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BelowImageCardComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2642
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BelowImageCardComponent, isStandalone: true, selector: "simpo-below-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button", edit: "edit" }, usesOnChanges: true, ngImport: i0, template: "<div (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\r\n [ngClass]=\"{'box-shadow' : content.display.showCard, 'px-0 py-0': styles?.borderLessImage && !content?.display?.showIcon ,'py-14' : content?.display?.showCardBackground && !styles?.borderLessImage}\"\r\n [style.background]=\"getBackground()\"\r\n [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" class=\"h-100 mt-4\"\r\n [backgroundColor]=\"styles?.background?.color\" [simpoSetDynamicBackground]=\"content?.display?.showCardBackground\"\r\n [class]=\"getAlignment()\">\r\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\r\n [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" [class]=\"componentId+data.image.id\"\r\n *ngIf=\"content.display.showImage\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"data.image\"\r\n [sectionId]=\"data?.id\">\r\n\r\n\r\n <ng-container *ngIf=\"content.display.showIcon && (data.icon.url.includes('.png') || data.icon.url.includes('.svg'))\">\r\n <div [simpoCorner]=\"styles?.corners\" [class.hovering-effect]=\"content?.display?.showHoverEffect\" [id]=\"componentId\"\r\n class=\"logo-img d-flex justify-content-center align-items-center\"\r\n [style.background]=\"data?.icon?.showBackground ? getIconBackground : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"data.icon\" [sectionId]=\"componentId\"\r\n [showIcon]=\"content.display.showIcon\">\r\n <div [id]=\"componentId\" [iconId]=\"componentId + data?.icon?.id\" [simpoIconDirective]=\"data?.icon\" class=\"w-65 h-100\"\r\n [class.w-100]=\"!data?.icon?.showBackground\"></div>\r\n </div>\r\n </ng-container>\r\n <img loading=\"lazy\" class=\"logo-img\" [src]=\"data.icon.url\" [appImageEditor]=\"edit || false\" [iconData]=\"data.icon\"\r\n [sectionId]=\"componentId\" [showIcon]=\"content.display.showIcon\"\r\n *ngIf=\"content.display.showIcon && !data.icon.url.includes('.png') && !data.icon.url.includes('.svg')\"\r\n class=\"logo-img\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n [class.hovering-effect]=\"content?.display?.showHoverEffect\">\r\n <div class=\"ptb-1 content-side\" [class.p-14-28]=\"(content?.display?.showCard || content?.display?.showHoverEffect) && styles?.borderLessImage && !content?.display?.showIcon\">\r\n <div class=\"heading-medium mb-1\" *ngIf=\"content.display.showHeading\">\r\n <simpo-text-editor [(value)]=\"data.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\r\n <simpo-text-editor [(value)]=\"data.inputText[01].value \" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\"\r\n [simpoHoverAnimation]=\"getContentAnimation()\" class=\"mt-3\">\r\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\"\r\n [buttonId]=\"button ? button.id : ''\" [sectionId]=\"componentId\" [color]=\"styles?.background?.accentColor\"\r\n [backgroundInfo]=\"styles?.background\" [edit]=\"edit\"></app-button-element>\r\n </div>\r\n </div>\r\n</div>", styles: [".w-100{width:100%}.ptb-1{padding-top:1rem}.mb-1{margin-bottom:1rem!important}.box-shadow{box-shadow:0 10px 40px #0a32231a;padding:14px 28px;color:#000!important}.p-14-28{padding:14px}.py-14{padding-top:14px;padding-bottom:14px}.logo-img{width:70px;height:70px;margin-top:.25rem}.fw-600{font-weight:600}.hovering-effect:hover{transform:scale(1.1) rotate(5deg)}.justify-items-start{justify-items:flex-start}.justify-items-end{justify-items:flex-end}.justify-items-center{justify-items:center}.w-65{width:65%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: HoverAnimationDirective, selector: "[simpoHoverAnimation]", inputs: ["simpoHoverAnimation"] }, { kind: "directive", type: TranslateOnhoverDirective, selector: "[simpoTranslateOnhover]", inputs: ["simpoTranslateOnhover"] }, { kind: "directive", type: SetDynamicBackgroundDirective, selector: "[simpoSetDynamicBackground]", inputs: ["backgroundColor", "simpoSetDynamicBackground"] }, { kind: "directive", type: IconDirectiveDirective, selector: "[simpoIconDirective]", inputs: ["simpoIconDirective", "iconId"] }] }); }
|
|
2642
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BelowImageCardComponent, isStandalone: true, selector: "simpo-below-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button", edit: "edit" }, usesOnChanges: true, ngImport: i0, template: "<div (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\r\n [ngClass]=\"{'box-shadow' : content.display.showCard, 'px-0 py-0': styles?.borderLessImage && !content?.display?.showIcon ,'py-14' : content?.display?.showCardBackground && !styles?.borderLessImage}\"\r\n [style.background]=\"getBackground()\"\r\n [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" class=\"h-100 mt-4\"\r\n [backgroundColor]=\"styles?.background?.color\" [simpoSetDynamicBackground]=\"content?.display?.showCardBackground\"\r\n [class]=\"getAlignment()\">\r\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\r\n [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" [class]=\"componentId+data.image.id\"\r\n *ngIf=\"content.display.showImage\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"data.image\"\r\n [sectionId]=\"data?.id\">\r\n\r\n\r\n <ng-container *ngIf=\"content.display.showIcon && (data.icon.url.includes('.png') || data.icon.url.includes('.svg'))\">\r\n <div [simpoCorner]=\"styles?.corners\" [class.hovering-effect]=\"content?.display?.showHoverEffect\" [id]=\"componentId\"\r\n class=\"logo-img d-flex justify-content-center align-items-center\"\r\n [style.background]=\"data?.icon?.showBackground ? getIconBackground : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"data.icon\" [sectionId]=\"componentId\"\r\n [showIcon]=\"content.display.showIcon\">\r\n <div [id]=\"componentId\" [iconId]=\"componentId + data?.icon?.id\" [simpoIconDirective]=\"data?.icon\" class=\"w-65 h-100\"\r\n [class.w-100]=\"!data?.icon?.showBackground\"></div>\r\n </div>\r\n </ng-container>\r\n <img loading=\"lazy\" class=\"logo-img\" [src]=\"data.icon.url\" [appImageEditor]=\"edit || false\" [iconData]=\"data.icon\"\r\n [sectionId]=\"componentId\" [showIcon]=\"content.display.showIcon\"\r\n *ngIf=\"content.display.showIcon && !data.icon.url.includes('.png') && !data.icon.url.includes('.svg')\"\r\n class=\"logo-img\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n [class.hovering-effect]=\"content?.display?.showHoverEffect\">\r\n <div class=\"ptb-1 content-side\" [class.p-14-28]=\"(content?.display?.showCard || content?.display?.showHoverEffect) && styles?.borderLessImage && !content?.display?.showIcon\">\r\n <div class=\"heading-medium mb-1\" *ngIf=\"content.display.showHeading\">\r\n <simpo-text-editor [(value)]=\"data.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\r\n <simpo-text-editor [(value)]=\"data.inputText[01].value \" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\"\r\n [simpoHoverAnimation]=\"getContentAnimation()\" class=\"mt-3\">\r\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\"\r\n [buttonId]=\"button ? button.id : ''\" [sectionId]=\"componentId\" [color]=\"styles?.background?.accentColor\"\r\n [backgroundInfo]=\"styles?.background\" [edit]=\"edit\"></app-button-element>\r\n </div>\r\n </div>\r\n</div>", styles: [".w-100{width:100%}.ptb-1{padding-top:1rem}.mb-1{margin-bottom:1rem!important}.box-shadow{box-shadow:0 10px 40px #0a32231a;padding:14px 28px;color:#000!important}.p-14-28{padding:14px}.py-14{padding-top:14px;padding-bottom:14px}.logo-img{width:70px;height:70px;margin-top:.25rem}.fw-600{font-weight:600}.hovering-effect:hover{transform:scale(1.1) rotate(5deg)}.justify-items-start{justify-items:flex-start}.justify-items-end{justify-items:flex-end}.justify-items-center{justify-items:center}.w-65{width:65%}@media screen and (max-width: 475px){.mt-4{margin-top:unset!important}.box-shadow{box-shadow:unset!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: HoverAnimationDirective, selector: "[simpoHoverAnimation]", inputs: ["simpoHoverAnimation"] }, { kind: "directive", type: TranslateOnhoverDirective, selector: "[simpoTranslateOnhover]", inputs: ["simpoTranslateOnhover"] }, { kind: "directive", type: SetDynamicBackgroundDirective, selector: "[simpoSetDynamicBackground]", inputs: ["backgroundColor", "simpoSetDynamicBackground"] }, { kind: "directive", type: IconDirectiveDirective, selector: "[simpoIconDirective]", inputs: ["simpoIconDirective", "iconId"] }] }); }
|
|
2643
2643
|
}
|
|
2644
2644
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BelowImageCardComponent, decorators: [{
|
|
2645
2645
|
type: Component,
|
|
@@ -2654,7 +2654,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2654
2654
|
TranslateOnhoverDirective,
|
|
2655
2655
|
SetDynamicBackgroundDirective,
|
|
2656
2656
|
IconDirectiveDirective
|
|
2657
|
-
], template: "<div (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\r\n [ngClass]=\"{'box-shadow' : content.display.showCard, 'px-0 py-0': styles?.borderLessImage && !content?.display?.showIcon ,'py-14' : content?.display?.showCardBackground && !styles?.borderLessImage}\"\r\n [style.background]=\"getBackground()\"\r\n [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" class=\"h-100 mt-4\"\r\n [backgroundColor]=\"styles?.background?.color\" [simpoSetDynamicBackground]=\"content?.display?.showCardBackground\"\r\n [class]=\"getAlignment()\">\r\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\r\n [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" [class]=\"componentId+data.image.id\"\r\n *ngIf=\"content.display.showImage\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"data.image\"\r\n [sectionId]=\"data?.id\">\r\n\r\n\r\n <ng-container *ngIf=\"content.display.showIcon && (data.icon.url.includes('.png') || data.icon.url.includes('.svg'))\">\r\n <div [simpoCorner]=\"styles?.corners\" [class.hovering-effect]=\"content?.display?.showHoverEffect\" [id]=\"componentId\"\r\n class=\"logo-img d-flex justify-content-center align-items-center\"\r\n [style.background]=\"data?.icon?.showBackground ? getIconBackground : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"data.icon\" [sectionId]=\"componentId\"\r\n [showIcon]=\"content.display.showIcon\">\r\n <div [id]=\"componentId\" [iconId]=\"componentId + data?.icon?.id\" [simpoIconDirective]=\"data?.icon\" class=\"w-65 h-100\"\r\n [class.w-100]=\"!data?.icon?.showBackground\"></div>\r\n </div>\r\n </ng-container>\r\n <img loading=\"lazy\" class=\"logo-img\" [src]=\"data.icon.url\" [appImageEditor]=\"edit || false\" [iconData]=\"data.icon\"\r\n [sectionId]=\"componentId\" [showIcon]=\"content.display.showIcon\"\r\n *ngIf=\"content.display.showIcon && !data.icon.url.includes('.png') && !data.icon.url.includes('.svg')\"\r\n class=\"logo-img\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n [class.hovering-effect]=\"content?.display?.showHoverEffect\">\r\n <div class=\"ptb-1 content-side\" [class.p-14-28]=\"(content?.display?.showCard || content?.display?.showHoverEffect) && styles?.borderLessImage && !content?.display?.showIcon\">\r\n <div class=\"heading-medium mb-1\" *ngIf=\"content.display.showHeading\">\r\n <simpo-text-editor [(value)]=\"data.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\r\n <simpo-text-editor [(value)]=\"data.inputText[01].value \" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\"\r\n [simpoHoverAnimation]=\"getContentAnimation()\" class=\"mt-3\">\r\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\"\r\n [buttonId]=\"button ? button.id : ''\" [sectionId]=\"componentId\" [color]=\"styles?.background?.accentColor\"\r\n [backgroundInfo]=\"styles?.background\" [edit]=\"edit\"></app-button-element>\r\n </div>\r\n </div>\r\n</div>", styles: [".w-100{width:100%}.ptb-1{padding-top:1rem}.mb-1{margin-bottom:1rem!important}.box-shadow{box-shadow:0 10px 40px #0a32231a;padding:14px 28px;color:#000!important}.p-14-28{padding:14px}.py-14{padding-top:14px;padding-bottom:14px}.logo-img{width:70px;height:70px;margin-top:.25rem}.fw-600{font-weight:600}.hovering-effect:hover{transform:scale(1.1) rotate(5deg)}.justify-items-start{justify-items:flex-start}.justify-items-end{justify-items:flex-end}.justify-items-center{justify-items:center}.w-65{width:65%}\n"] }]
|
|
2657
|
+
], template: "<div (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\r\n [ngClass]=\"{'box-shadow' : content.display.showCard, 'px-0 py-0': styles?.borderLessImage && !content?.display?.showIcon ,'py-14' : content?.display?.showCardBackground && !styles?.borderLessImage}\"\r\n [style.background]=\"getBackground()\"\r\n [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" class=\"h-100 mt-4\"\r\n [backgroundColor]=\"styles?.background?.color\" [simpoSetDynamicBackground]=\"content?.display?.showCardBackground\"\r\n [class]=\"getAlignment()\">\r\n <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\r\n [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" [class]=\"componentId+data.image.id\"\r\n *ngIf=\"content.display.showImage\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"data.image\"\r\n [sectionId]=\"data?.id\">\r\n\r\n\r\n <ng-container *ngIf=\"content.display.showIcon && (data.icon.url.includes('.png') || data.icon.url.includes('.svg'))\">\r\n <div [simpoCorner]=\"styles?.corners\" [class.hovering-effect]=\"content?.display?.showHoverEffect\" [id]=\"componentId\"\r\n class=\"logo-img d-flex justify-content-center align-items-center\"\r\n [style.background]=\"data?.icon?.showBackground ? getIconBackground : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"data.icon\" [sectionId]=\"componentId\"\r\n [showIcon]=\"content.display.showIcon\">\r\n <div [id]=\"componentId\" [iconId]=\"componentId + data?.icon?.id\" [simpoIconDirective]=\"data?.icon\" class=\"w-65 h-100\"\r\n [class.w-100]=\"!data?.icon?.showBackground\"></div>\r\n </div>\r\n </ng-container>\r\n <img loading=\"lazy\" class=\"logo-img\" [src]=\"data.icon.url\" [appImageEditor]=\"edit || false\" [iconData]=\"data.icon\"\r\n [sectionId]=\"componentId\" [showIcon]=\"content.display.showIcon\"\r\n *ngIf=\"content.display.showIcon && !data.icon.url.includes('.png') && !data.icon.url.includes('.svg')\"\r\n class=\"logo-img\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n [class.hovering-effect]=\"content?.display?.showHoverEffect\">\r\n <div class=\"ptb-1 content-side\" [class.p-14-28]=\"(content?.display?.showCard || content?.display?.showHoverEffect) && styles?.borderLessImage && !content?.display?.showIcon\">\r\n <div class=\"heading-medium mb-1\" *ngIf=\"content.display.showHeading\">\r\n <simpo-text-editor [(value)]=\"data.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\r\n <simpo-text-editor [(value)]=\"data.inputText[01].value \" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\"\r\n [simpoHoverAnimation]=\"getContentAnimation()\" class=\"mt-3\">\r\n <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\"\r\n [buttonId]=\"button ? button.id : ''\" [sectionId]=\"componentId\" [color]=\"styles?.background?.accentColor\"\r\n [backgroundInfo]=\"styles?.background\" [edit]=\"edit\"></app-button-element>\r\n </div>\r\n </div>\r\n</div>", styles: [".w-100{width:100%}.ptb-1{padding-top:1rem}.mb-1{margin-bottom:1rem!important}.box-shadow{box-shadow:0 10px 40px #0a32231a;padding:14px 28px;color:#000!important}.p-14-28{padding:14px}.py-14{padding-top:14px;padding-bottom:14px}.logo-img{width:70px;height:70px;margin-top:.25rem}.fw-600{font-weight:600}.hovering-effect:hover{transform:scale(1.1) rotate(5deg)}.justify-items-start{justify-items:flex-start}.justify-items-end{justify-items:flex-end}.justify-items-center{justify-items:center}.w-65{width:65%}@media screen and (max-width: 475px){.mt-4{margin-top:unset!important}.box-shadow{box-shadow:unset!important}}\n"] }]
|
|
2658
2658
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
2659
2659
|
type: Input
|
|
2660
2660
|
}], styles: [{
|
|
@@ -3045,16 +3045,6 @@ class AddSectionComponent {
|
|
|
3045
3045
|
this.tabShiftLoader = false;
|
|
3046
3046
|
this.searchText = "";
|
|
3047
3047
|
this.dummy2 = {};
|
|
3048
|
-
// searchSectionComponents(){
|
|
3049
|
-
// this.searchControl.valueChanges
|
|
3050
|
-
// .pipe(
|
|
3051
|
-
// debounceTime(500),
|
|
3052
|
-
// distinctUntilChanged()
|
|
3053
|
-
// )
|
|
3054
|
-
// .subscribe(value => {
|
|
3055
|
-
// this.searchSections(value);
|
|
3056
|
-
// });
|
|
3057
|
-
// }
|
|
3058
3048
|
this.isSearch = false;
|
|
3059
3049
|
}
|
|
3060
3050
|
ngOnInit() {
|
|
@@ -3097,12 +3087,12 @@ class AddSectionComponent {
|
|
|
3097
3087
|
if (this.searchText.length == 0)
|
|
3098
3088
|
this.sections = this.dummySections;
|
|
3099
3089
|
for (let ele of Object.keys(this.dummySections)) {
|
|
3100
|
-
if (ele.toLowerCase().includes(this.searchText)) {
|
|
3090
|
+
if (ele.toLowerCase().includes(this.searchText.toLowerCase())) {
|
|
3101
3091
|
this.dummy2[ele] = [...this.dummySections[ele]];
|
|
3102
3092
|
}
|
|
3103
3093
|
else {
|
|
3104
3094
|
for (let j of this.dummySections[ele]) {
|
|
3105
|
-
if (j.sectionName.toLowerCase().includes(this.searchText)) {
|
|
3095
|
+
if (j.sectionName.toLowerCase().includes(this.searchText.toLowerCase())) {
|
|
3106
3096
|
if (!this.dummy2[ele]) {
|
|
3107
3097
|
this.dummy2[ele] = [];
|
|
3108
3098
|
}
|
|
@@ -4613,12 +4603,12 @@ class SpacingHorizontalDirective {
|
|
|
4613
4603
|
}
|
|
4614
4604
|
changeHorizontalSpacing() {
|
|
4615
4605
|
if (window.innerWidth <= 475) {
|
|
4616
|
-
if (this.layout?.spacingHorizontal == "none") {
|
|
4606
|
+
if (this.layout?.spacingHorizontal == "none" || this.layout?.spacingHorizontal == "remove") {
|
|
4617
4607
|
this.el.nativeElement.style.setProperty("padding", "0rem");
|
|
4618
4608
|
return;
|
|
4619
4609
|
}
|
|
4620
|
-
this.el.nativeElement.style.setProperty("padding-left", '
|
|
4621
|
-
this.el.nativeElement.style.setProperty("padding-right", '
|
|
4610
|
+
this.el.nativeElement.style.setProperty("padding-left", '0.8rem');
|
|
4611
|
+
this.el.nativeElement.style.setProperty("padding-right", '0.8rem');
|
|
4622
4612
|
if (!this.isHeader) {
|
|
4623
4613
|
this.el.nativeElement.style.setProperty("padding-top", '0.8rem');
|
|
4624
4614
|
this.el.nativeElement.style.setProperty("padding-bottom", '0.8rem');
|
|
@@ -4684,7 +4674,7 @@ class TextSectionComponent extends BaseSection {
|
|
|
4684
4674
|
}, 100);
|
|
4685
4675
|
}
|
|
4686
4676
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextSectionComponent, deps: [{ token: i1$1.MatDialog }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4687
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TextSectionComponent, isStandalone: true, selector: "simpo-text-section", inputs: { data: "data", index: "index", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" class=\"total-container\">\r\n <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"main-section\"\r\n [ngClass]=\"{'justify-content-md-start': styles?.layout?.align === 'left' , 'justify-content-md-end': styles?.layout?.align === 'right'}\"\r\n [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"body-section\">\r\n <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <!-- <simpo-text-element [textData]=\"item.value\" [textLabel]=\"item.label\"></simpo-text-element> -->\r\n <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-2 d-md-flex mt-15 w-100 flex-wrap\" *ngIf=\"data?.action?.display\" [ngClass]=\"[\r\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n ]\">\r\n <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [edit]=\"edit\" [color]=\"styles?.background?.accentColor\"\r\n [sectionId]=\"data?.id\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".total_container{height:auto;position:relative}.body-section{padding:4% 15px}.button-section{margin-top:15px}.clipPath{clip-path:polygon(0% 100%,50% 0%,100% 100%);height:100px;background-color:#00f}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-15{margin-top:15px}@media only screen and (max-width: 475px){.d-flex{justify-content:center;margin-bottom:25px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type:
|
|
4677
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TextSectionComponent, isStandalone: true, selector: "simpo-text-section", inputs: { data: "data", index: "index", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" class=\"total-container\">\r\n <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"main-section\"\r\n [ngClass]=\"{'justify-content-md-start': styles?.layout?.align === 'left' , 'justify-content-md-end': styles?.layout?.align === 'right'}\"\r\n [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"body-section w-100\">\r\n <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <!-- <simpo-text-element [textData]=\"item.value\" [textLabel]=\"item.label\"></simpo-text-element> -->\r\n <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\" class=\"w-100 overflow-scroll\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-2 d-md-flex mt-15 w-100 flex-wrap\" *ngIf=\"data?.action?.display\" [ngClass]=\"[\r\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n ]\">\r\n <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [edit]=\"edit\" [color]=\"styles?.background?.accentColor\"\r\n [sectionId]=\"data?.id\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".total_container{height:auto;position:relative}.body-section{padding:4% 15px}.button-section{margin-top:15px}.clipPath{clip-path:polygon(0% 100%,50% 0%,100% 100%);height:100px;background-color:#00f}.overflow-scroll{overflow-x:scroll}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-15{margin-top:15px}@media only screen and (max-width: 475px){.d-flex{justify-content:center;margin-bottom:25px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type:
|
|
4688
4678
|
//directive
|
|
4689
4679
|
AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }] }); }
|
|
4690
4680
|
}
|
|
@@ -4706,7 +4696,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
4706
4696
|
ContentFitDirective,
|
|
4707
4697
|
HoverDirective,
|
|
4708
4698
|
OverlayDirective,
|
|
4709
|
-
], template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" class=\"total-container\">\r\n <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"main-section\"\r\n [ngClass]=\"{'justify-content-md-start': styles?.layout?.align === 'left' , 'justify-content-md-end': styles?.layout?.align === 'right'}\"\r\n [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"body-section\">\r\n <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <!-- <simpo-text-element [textData]=\"item.value\" [textLabel]=\"item.label\"></simpo-text-element> -->\r\n <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-2 d-md-flex mt-15 w-100 flex-wrap\" *ngIf=\"data?.action?.display\" [ngClass]=\"[\r\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n ]\">\r\n <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [edit]=\"edit\" [color]=\"styles?.background?.accentColor\"\r\n [sectionId]=\"data?.id\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".total_container{height:auto;position:relative}.body-section{padding:4% 15px}.button-section{margin-top:15px}.clipPath{clip-path:polygon(0% 100%,50% 0%,100% 100%);height:100px;background-color:#00f}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-15{margin-top:15px}@media only screen and (max-width: 475px){.d-flex{justify-content:center;margin-bottom:25px}}\n"] }]
|
|
4699
|
+
], template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" class=\"total-container\">\r\n <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"main-section\"\r\n [ngClass]=\"{'justify-content-md-start': styles?.layout?.align === 'left' , 'justify-content-md-end': styles?.layout?.align === 'right'}\"\r\n [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"body-section w-100\">\r\n <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <!-- <simpo-text-element [textData]=\"item.value\" [textLabel]=\"item.label\"></simpo-text-element> -->\r\n <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\" class=\"w-100 overflow-scroll\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-2 d-md-flex mt-15 w-100 flex-wrap\" *ngIf=\"data?.action?.display\" [ngClass]=\"[\r\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n ]\">\r\n <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [edit]=\"edit\" [color]=\"styles?.background?.accentColor\"\r\n [sectionId]=\"data?.id\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".total_container{height:auto;position:relative}.body-section{padding:4% 15px}.button-section{margin-top:15px}.clipPath{clip-path:polygon(0% 100%,50% 0%,100% 100%);height:100px;background-color:#00f}.overflow-scroll{overflow-x:scroll}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-15{margin-top:15px}@media only screen and (max-width: 475px){.d-flex{justify-content:center;margin-bottom:25px}}\n"] }]
|
|
4710
4700
|
}], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: EventsService }], propDecorators: { data: [{
|
|
4711
4701
|
type: Input
|
|
4712
4702
|
}], index: [{
|
|
@@ -4904,7 +4894,7 @@ class SpacingAroundDirective {
|
|
|
4904
4894
|
}
|
|
4905
4895
|
changeAroundSpacing() {
|
|
4906
4896
|
if (window.innerWidth <= 475) {
|
|
4907
|
-
if (this.layout?.spacingAround != 'none') {
|
|
4897
|
+
if (this.layout?.spacingAround && this.layout?.spacingAround != 'none' && this.layout?.spacingAround != 'remove') {
|
|
4908
4898
|
this.el.nativeElement.style.setProperty("padding-left", '0.8rem');
|
|
4909
4899
|
this.el.nativeElement.style.setProperty("padding-right", '0.8rem');
|
|
4910
4900
|
this.el.nativeElement.style.setProperty("padding-top", '0.8rem');
|
|
@@ -5067,6 +5057,14 @@ class BannerSectionComponent extends BaseSection {
|
|
|
5067
5057
|
get getPositionLayout() {
|
|
5068
5058
|
return { ...this.styles?.positionLayout };
|
|
5069
5059
|
}
|
|
5060
|
+
get point() {
|
|
5061
|
+
return { ...this.content?.tag?.position };
|
|
5062
|
+
}
|
|
5063
|
+
onDragEnded(event) {
|
|
5064
|
+
const transform = event.source.getFreeDragPosition();
|
|
5065
|
+
this.content.tag.position.x = transform.x ?? 0;
|
|
5066
|
+
this.content.tag.position.y = transform.y ?? 0;
|
|
5067
|
+
}
|
|
5070
5068
|
editSection() {
|
|
5071
5069
|
this._eventService.toggleEditorEvent.emit(false);
|
|
5072
5070
|
setTimeout(() => {
|
|
@@ -5087,7 +5085,7 @@ class BannerSectionComponent extends BaseSection {
|
|
|
5087
5085
|
return `linear-gradient(${direction} ,${this.styles?.background?.accentColor},${this.styles?.background?.secondaryAccentColor})`;
|
|
5088
5086
|
}
|
|
5089
5087
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BannerSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5090
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BannerSectionComponent, isStandalone: true, selector: "simpo-banner-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\"\r\n [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage , 'd-block': isBorderlessImage}\"\r\n class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\" [simpoMergeHeader]=\"styles?.merge\">\r\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\"\r\n class=\"d-flex justify-content-center\" [backgroundInfo]=\"styles?.background\">\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container row w-100\"\r\n [simpoCorner]=\"styles?.corners\" [ngClass]=\"{'wrap-reverse' : styles?.positionLayout?.value == 'bottom'}\">\r\n <!-- overflow-hidden -->\r\n <!-- [ngClass]=\"{'flex-column': isBorderlessImage && styles?.positionLayout?.value === 'top' , 'flex-column-reverse': isBorderlessImage && styles?.positionLayout?.value === 'bottom'}\" -->\r\n <!-- [simpoMergeHeader]=\"styles?.merge\" -->\r\n <!-- [backgroundInfo]=\"styles?.background?.image\" -->\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n <div class=\"py-5\"\r\n [ngClass]=\"{'col-lg-6 col-xxl-6': content?.image?.showImage && isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage || !content?.image?.showImage , 'col-lg-12 col-md-12 col-12 width-100': (isBorderlessImage && (styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom')) || !content?.image?.showImage}\"\r\n [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"styles?.background\">\r\n <div class=\"row g-5 justify-content-start mlr-0 h-auto\" [id]=\"data?.id\"\r\n [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?. image?.showImage && !isBorderlessImage\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\"\r\n [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n </div>\r\n <!-- 'col-lg-12': content?.image?.showImage && isBorderlessImage, 'col-lg-12':!isBorderlessImage || !content?.image?.showImage, -->\r\n <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n [ngClass]=\"{'box p-3': content?.display?.showCard , 'col-lg-6' : content?.image?.showImage && !isBorderlessImage }\"\r\n [style.background]=\"content?.display?.showCard ? getColor() : 'transparent'\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\"\r\n [simpoCorner]=\"styles?.corners\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 card-container flex-wrap\"\r\n [ngClass]=\"{'gap-3': screenWidth > 475 , 'gap-1' : screenWidth <= 475}\">\r\n <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n <div class=\"card_wrapper\">\r\n <div class=\"container_card visible\">\r\n <div class=\"card-section\">\r\n <div class=\"second-part-card\">\r\n </div>\r\n <div class=\"first-part-card d-flex align-items-center\"\r\n [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <img loading=\"lazy\" class=\"tick-img\"\r\n src=\"https://png.pngtree.com/png-vector/20230910/ourmid/pngtree-3d-tick-sign-icon-png-image_9225323.png\"\r\n alt=\"something\" />\r\n <!-- <div [innerHTML]=\"item.inputText[0].value | sanitizeHtml\" class=\"ml-5\"></div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n [edit]=\"edit\" [backgroundInfo]=\"data?.styles?.background\"></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 *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isMerged]=\"styles?.merge ?? false\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>\r\n<ng-template #ImageSection>\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n [ngClass]=\"{'w-100' : content?.image?.showImage && isBorderlessImage && styles?.positionLayout?.value == 'top' || styles?.positionLayout?.value == 'bottom'}\"\r\n style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n [simpoBorderless]=\"getPositionLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\r\n </div>\r\n</ng-template>", styles: [".btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.width-100{width:100%!important}.button-display{display:flex;flex-wrap:wrap;gap:10px}.gap-15{gap:15px}.box{border:8px solid rgba(240,240,240,.8);box-shadow:#63636333 0 2px 8px}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.wrap-reverse{flex-wrap:wrap-reverse!important}.insideImg{height:100%!important}.card-container{flex-direction:column}}.text-element{inline-size:100%;overflow-wrap:break-word}.container_card .card-section{align-items:center;gap:20px;padding-top:5px;padding-bottom:5px;width:100%;border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:2px;height:2px;border-radius:50%;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.tick-img{width:25px;height:25px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}.image-card{width:50%!important}.svg{fill:#ffb6c1;transform:rotate(180deg)}.ml-5{margin-left:5px}.mlr-0{margin-left:0;margin-right:0}.d-block{display:block!important}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type:
|
|
5088
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BannerSectionComponent, isStandalone: true, selector: "simpo-banner-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\"\r\n [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage , 'd-block': isBorderlessImage}\"\r\n class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\" [simpoMergeHeader]=\"styles?.merge\">\r\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\"\r\n class=\"d-flex justify-content-center\" [backgroundInfo]=\"styles?.background\">\r\n <div class=\"draggable\" *ngIf=\"content?.tag?.display && screenWidth > 475\" cdkDrag [cdkDragFreeDragPosition]=\"point\" (cdkDragEnded)=\"onDragEnded($event)\" cdkDragBoundary=\".total-container\" [cdkDragDisabled]=\"!edit\">\r\n {{ content?.tag?.label }}\r\n </div>\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container row w-100\"\r\n [simpoCorner]=\"styles?.corners\" [ngClass]=\"{'wrap-reverse' : styles?.positionLayout?.value == 'bottom'}\">\r\n <!-- overflow-hidden -->\r\n <!-- [ngClass]=\"{'flex-column': isBorderlessImage && styles?.positionLayout?.value === 'top' , 'flex-column-reverse': isBorderlessImage && styles?.positionLayout?.value === 'bottom'}\" -->\r\n <!-- [simpoMergeHeader]=\"styles?.merge\" -->\r\n <!-- [backgroundInfo]=\"styles?.background?.image\" -->\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n <div class=\"py-5\"\r\n [ngClass]=\"{'col-lg-6 col-xxl-6': content?.image?.showImage && isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage || !content?.image?.showImage , 'col-lg-12 col-md-12 col-12 width-100': (isBorderlessImage && (styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom')) || !content?.image?.showImage}\"\r\n [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"styles?.background\">\r\n <div class=\"row g-5 justify-content-start mlr-0 h-auto\" [id]=\"data?.id\"\r\n [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?. image?.showImage && !isBorderlessImage\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\"\r\n [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n </div>\r\n <!-- 'col-lg-12': content?.image?.showImage && isBorderlessImage, 'col-lg-12':!isBorderlessImage || !content?.image?.showImage, -->\r\n <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n [ngClass]=\"{'box p-3': content?.display?.showCard , 'col-lg-6' : content?.image?.showImage && !isBorderlessImage }\"\r\n [style.background]=\"content?.display?.showCard ? getColor() : 'transparent'\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\"\r\n [simpoCorner]=\"styles?.corners\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 card-container flex-wrap\"\r\n [ngClass]=\"{'gap-3': screenWidth > 475 , 'gap-1' : screenWidth <= 475}\">\r\n <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n <div class=\"card_wrapper\">\r\n <div class=\"container_card visible\">\r\n <div class=\"card-section\">\r\n <div class=\"second-part-card\">\r\n </div>\r\n <div class=\"first-part-card d-flex align-items-center\"\r\n [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <img loading=\"lazy\" class=\"tick-img\"\r\n src=\"https://png.pngtree.com/png-vector/20230910/ourmid/pngtree-3d-tick-sign-icon-png-image_9225323.png\"\r\n alt=\"something\" />\r\n <!-- <div [innerHTML]=\"item.inputText[0].value | sanitizeHtml\" class=\"ml-5\"></div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n [edit]=\"edit\" [backgroundInfo]=\"data?.styles?.background\"></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 *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isMerged]=\"styles?.merge ?? false\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>\r\n<ng-template #ImageSection>\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n [ngClass]=\"{'w-100' : content?.image?.showImage && isBorderlessImage && styles?.positionLayout?.value == 'top' || styles?.positionLayout?.value == 'bottom'}\"\r\n style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n [simpoBorderless]=\"getPositionLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\r\n </div>\r\n</ng-template>", styles: [".btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.width-100{width:100%!important}.button-display{display:flex;flex-wrap:wrap;gap:10px}.draggable{background:#fff3;border-radius:32px!important;box-shadow:0 4px 30px #0000001a!important;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.3)!important;z-index:1;position:absolute;width:max-content;padding:8px 10px;font-weight:700;font-size:12px!important}.gap-15{gap:15px}.box{border:8px solid rgba(240,240,240,.8);box-shadow:#63636333 0 2px 8px}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.wrap-reverse{flex-wrap:wrap-reverse!important}.insideImg{height:100%!important}.card-container{flex-direction:column}}.text-element{inline-size:100%;overflow-wrap:break-word}.container_card .card-section{align-items:center;gap:20px;padding-top:5px;padding-bottom:5px;width:100%;border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:2px;height:2px;border-radius:50%;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.tick-img{width:25px;height:25px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}.image-card{width:50%!important}.svg{fill:#ffb6c1;transform:rotate(180deg)}.ml-5{margin-left:5px}.mlr-0{margin-left:0;margin-right:0}.d-block{display:block!important}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type:
|
|
5091
5089
|
// SimpoHoverBorderDirective,
|
|
5092
5090
|
//directive
|
|
5093
5091
|
SimpoBorderlessDirective, selector: "[simpoBorderless]", inputs: ["simpoBorderless"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: MergeHeaderDirective, selector: "[simpoMergeHeader]", inputs: ["simpoMergeHeader", "backgroundInfo"] }] }); }
|
|
@@ -5101,6 +5099,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
5101
5099
|
MatGridListModule,
|
|
5102
5100
|
SimpoButtonComponent,
|
|
5103
5101
|
TextEditorComponent,
|
|
5102
|
+
CdkDrag,
|
|
5104
5103
|
// SimpoHoverBorderDirective,
|
|
5105
5104
|
//directive
|
|
5106
5105
|
SimpoBorderlessDirective,
|
|
@@ -5120,7 +5119,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
5120
5119
|
SpacingAroundDirective,
|
|
5121
5120
|
ImageEditorDirective,
|
|
5122
5121
|
MergeHeaderDirective
|
|
5123
|
-
], template: "<div [id]=\"data?.id\"\r\n [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage , 'd-block': isBorderlessImage}\"\r\n class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\" [simpoMergeHeader]=\"styles?.merge\">\r\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\"\r\n class=\"d-flex justify-content-center\" [backgroundInfo]=\"styles?.background\">\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container row w-100\"\r\n [simpoCorner]=\"styles?.corners\" [ngClass]=\"{'wrap-reverse' : styles?.positionLayout?.value == 'bottom'}\">\r\n <!-- overflow-hidden -->\r\n <!-- [ngClass]=\"{'flex-column': isBorderlessImage && styles?.positionLayout?.value === 'top' , 'flex-column-reverse': isBorderlessImage && styles?.positionLayout?.value === 'bottom'}\" -->\r\n <!-- [simpoMergeHeader]=\"styles?.merge\" -->\r\n <!-- [backgroundInfo]=\"styles?.background?.image\" -->\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n <div class=\"py-5\"\r\n [ngClass]=\"{'col-lg-6 col-xxl-6': content?.image?.showImage && isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage || !content?.image?.showImage , 'col-lg-12 col-md-12 col-12 width-100': (isBorderlessImage && (styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom')) || !content?.image?.showImage}\"\r\n [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"styles?.background\">\r\n <div class=\"row g-5 justify-content-start mlr-0 h-auto\" [id]=\"data?.id\"\r\n [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?. image?.showImage && !isBorderlessImage\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\"\r\n [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n </div>\r\n <!-- 'col-lg-12': content?.image?.showImage && isBorderlessImage, 'col-lg-12':!isBorderlessImage || !content?.image?.showImage, -->\r\n <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n [ngClass]=\"{'box p-3': content?.display?.showCard , 'col-lg-6' : content?.image?.showImage && !isBorderlessImage }\"\r\n [style.background]=\"content?.display?.showCard ? getColor() : 'transparent'\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\"\r\n [simpoCorner]=\"styles?.corners\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 card-container flex-wrap\"\r\n [ngClass]=\"{'gap-3': screenWidth > 475 , 'gap-1' : screenWidth <= 475}\">\r\n <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n <div class=\"card_wrapper\">\r\n <div class=\"container_card visible\">\r\n <div class=\"card-section\">\r\n <div class=\"second-part-card\">\r\n </div>\r\n <div class=\"first-part-card d-flex align-items-center\"\r\n [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <img loading=\"lazy\" class=\"tick-img\"\r\n src=\"https://png.pngtree.com/png-vector/20230910/ourmid/pngtree-3d-tick-sign-icon-png-image_9225323.png\"\r\n alt=\"something\" />\r\n <!-- <div [innerHTML]=\"item.inputText[0].value | sanitizeHtml\" class=\"ml-5\"></div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n [edit]=\"edit\" [backgroundInfo]=\"data?.styles?.background\"></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 *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isMerged]=\"styles?.merge ?? false\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>\r\n<ng-template #ImageSection>\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n [ngClass]=\"{'w-100' : content?.image?.showImage && isBorderlessImage && styles?.positionLayout?.value == 'top' || styles?.positionLayout?.value == 'bottom'}\"\r\n style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n [simpoBorderless]=\"getPositionLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\r\n </div>\r\n</ng-template>", styles: [".btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.width-100{width:100%!important}.button-display{display:flex;flex-wrap:wrap;gap:10px}.gap-15{gap:15px}.box{border:8px solid rgba(240,240,240,.8);box-shadow:#63636333 0 2px 8px}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.wrap-reverse{flex-wrap:wrap-reverse!important}.insideImg{height:100%!important}.card-container{flex-direction:column}}.text-element{inline-size:100%;overflow-wrap:break-word}.container_card .card-section{align-items:center;gap:20px;padding-top:5px;padding-bottom:5px;width:100%;border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:2px;height:2px;border-radius:50%;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.tick-img{width:25px;height:25px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}.image-card{width:50%!important}.svg{fill:#ffb6c1;transform:rotate(180deg)}.ml-5{margin-left:5px}.mlr-0{margin-left:0;margin-right:0}.d-block{display:block!important}\n"] }]
|
|
5122
|
+
], template: "<div [id]=\"data?.id\"\r\n [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage , 'd-block': isBorderlessImage}\"\r\n class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\" [simpoMergeHeader]=\"styles?.merge\">\r\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\"\r\n class=\"d-flex justify-content-center\" [backgroundInfo]=\"styles?.background\">\r\n <div class=\"draggable\" *ngIf=\"content?.tag?.display && screenWidth > 475\" cdkDrag [cdkDragFreeDragPosition]=\"point\" (cdkDragEnded)=\"onDragEnded($event)\" cdkDragBoundary=\".total-container\" [cdkDragDisabled]=\"!edit\">\r\n {{ content?.tag?.label }}\r\n </div>\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container row w-100\"\r\n [simpoCorner]=\"styles?.corners\" [ngClass]=\"{'wrap-reverse' : styles?.positionLayout?.value == 'bottom'}\">\r\n <!-- overflow-hidden -->\r\n <!-- [ngClass]=\"{'flex-column': isBorderlessImage && styles?.positionLayout?.value === 'top' , 'flex-column-reverse': isBorderlessImage && styles?.positionLayout?.value === 'bottom'}\" -->\r\n <!-- [simpoMergeHeader]=\"styles?.merge\" -->\r\n <!-- [backgroundInfo]=\"styles?.background?.image\" -->\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n <div class=\"py-5\"\r\n [ngClass]=\"{'col-lg-6 col-xxl-6': content?.image?.showImage && isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage || !content?.image?.showImage , 'col-lg-12 col-md-12 col-12 width-100': (isBorderlessImage && (styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom')) || !content?.image?.showImage}\"\r\n [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"styles?.background\">\r\n <div class=\"row g-5 justify-content-start mlr-0 h-auto\" [id]=\"data?.id\"\r\n [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?. image?.showImage && !isBorderlessImage\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\"\r\n [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n </div>\r\n <!-- 'col-lg-12': content?.image?.showImage && isBorderlessImage, 'col-lg-12':!isBorderlessImage || !content?.image?.showImage, -->\r\n <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n [ngClass]=\"{'box p-3': content?.display?.showCard , 'col-lg-6' : content?.image?.showImage && !isBorderlessImage }\"\r\n [style.background]=\"content?.display?.showCard ? getColor() : 'transparent'\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\"\r\n [simpoCorner]=\"styles?.corners\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 card-container flex-wrap\"\r\n [ngClass]=\"{'gap-3': screenWidth > 475 , 'gap-1' : screenWidth <= 475}\">\r\n <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n <div class=\"card_wrapper\">\r\n <div class=\"container_card visible\">\r\n <div class=\"card-section\">\r\n <div class=\"second-part-card\">\r\n </div>\r\n <div class=\"first-part-card d-flex align-items-center\"\r\n [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <img loading=\"lazy\" class=\"tick-img\"\r\n src=\"https://png.pngtree.com/png-vector/20230910/ourmid/pngtree-3d-tick-sign-icon-png-image_9225323.png\"\r\n alt=\"something\" />\r\n <!-- <div [innerHTML]=\"item.inputText[0].value | sanitizeHtml\" class=\"ml-5\"></div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n [edit]=\"edit\" [backgroundInfo]=\"data?.styles?.background\"></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 *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isMerged]=\"styles?.merge ?? false\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>\r\n<ng-template #ImageSection>\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n [ngClass]=\"{'w-100' : content?.image?.showImage && isBorderlessImage && styles?.positionLayout?.value == 'top' || styles?.positionLayout?.value == 'bottom'}\"\r\n style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n [simpoBorderless]=\"getPositionLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\r\n </div>\r\n</ng-template>", styles: [".btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.width-100{width:100%!important}.button-display{display:flex;flex-wrap:wrap;gap:10px}.draggable{background:#fff3;border-radius:32px!important;box-shadow:0 4px 30px #0000001a!important;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.3)!important;z-index:1;position:absolute;width:max-content;padding:8px 10px;font-weight:700;font-size:12px!important}.gap-15{gap:15px}.box{border:8px solid rgba(240,240,240,.8);box-shadow:#63636333 0 2px 8px}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.wrap-reverse{flex-wrap:wrap-reverse!important}.insideImg{height:100%!important}.card-container{flex-direction:column}}.text-element{inline-size:100%;overflow-wrap:break-word}.container_card .card-section{align-items:center;gap:20px;padding-top:5px;padding-bottom:5px;width:100%;border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:2px;height:2px;border-radius:50%;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.tick-img{width:25px;height:25px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}.image-card{width:50%!important}.svg{fill:#ffb6c1;transform:rotate(180deg)}.ml-5{margin-left:5px}.mlr-0{margin-left:0;margin-right:0}.d-block{display:block!important}\n"] }]
|
|
5124
5123
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
5125
5124
|
type: Input
|
|
5126
5125
|
}], index: [{
|
|
@@ -5924,7 +5923,7 @@ class ServiceSectionComponent extends BaseSection {
|
|
|
5924
5923
|
}, 100);
|
|
5925
5924
|
}
|
|
5926
5925
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ServiceSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5927
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ServiceSectionComponent, isStandalone: true, selector: "simpo-service-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.corners\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n [simpoLayout]=\"style?.layout\">\r\n <div class=\"w-100\" *ngFor=\"let text of data?.content?.inputText\">\r\n <div [simpoContentTitleSpace]=\"headingSpace\"\r\n [ngClass]=\"text.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\r\n [class.row-scroll]=\"style?.direction === 'ROW'\" #container>\r\n <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n *ngFor=\"let service of content?.listItem?.data\">\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\r\n <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-below-image-card>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\r\n <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-top-of-image-card>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\r\n <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-covering-image-card>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display d-flex mt-3 gap-2\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.row-scroll{flex-wrap:nowrap!important;width:100%;overflow-x:scroll}.button-display{display:flex;flex-wrap:wrap;gap:10px}@media screen and (min-width: 760px){.cards{padding-bottom:24px;margin-bottom:10px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: BelowImageCardComponent, selector: "simpo-below-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit"] }, { kind: "component", type: TopOfImageCardComponent, selector: "simpo-top-of-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit"] }, { kind: "component", type: CoveringImageCardComponent, selector: "simpo-covering-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
|
|
5926
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ServiceSectionComponent, isStandalone: true, selector: "simpo-service-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.corners\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n [simpoLayout]=\"style?.layout\">\r\n <div class=\"w-100\" *ngFor=\"let text of data?.content?.inputText\">\r\n <div [simpoContentTitleSpace]=\"headingSpace\"\r\n [ngClass]=\"text.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\r\n [class.row-scroll]=\"style?.direction === 'ROW'\" #container>\r\n <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n *ngFor=\"let service of content?.listItem?.data\">\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\r\n <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-below-image-card>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\r\n <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-top-of-image-card>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\r\n <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-covering-image-card>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display d-flex mt-3 gap-2\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.row-scroll{flex-wrap:nowrap!important;width:100%;overflow-x:scroll}.button-display{display:flex;flex-wrap:wrap;gap:10px}@media screen and (min-width: 760px){.cards{padding-bottom:24px;margin-bottom:10px}}@media screen and (max-width: 475px){.cards{padding:5px 8px 10px!important}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: BelowImageCardComponent, selector: "simpo-below-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit"] }, { kind: "component", type: TopOfImageCardComponent, selector: "simpo-top-of-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit"] }, { kind: "component", type: CoveringImageCardComponent, selector: "simpo-covering-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
|
|
5928
5927
|
//directive
|
|
5929
5928
|
ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }] }); }
|
|
5930
5929
|
}
|
|
@@ -5958,7 +5957,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
5958
5957
|
SpacingHorizontalDirective,
|
|
5959
5958
|
SpacingAroundDirective,
|
|
5960
5959
|
SimpoContainerAligment
|
|
5961
|
-
], template: "<section [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.corners\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n [simpoLayout]=\"style?.layout\">\r\n <div class=\"w-100\" *ngFor=\"let text of data?.content?.inputText\">\r\n <div [simpoContentTitleSpace]=\"headingSpace\"\r\n [ngClass]=\"text.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\r\n [class.row-scroll]=\"style?.direction === 'ROW'\" #container>\r\n <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n *ngFor=\"let service of content?.listItem?.data\">\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\r\n <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-below-image-card>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\r\n <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-top-of-image-card>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\r\n <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-covering-image-card>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display d-flex mt-3 gap-2\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.row-scroll{flex-wrap:nowrap!important;width:100%;overflow-x:scroll}.button-display{display:flex;flex-wrap:wrap;gap:10px}@media screen and (min-width: 760px){.cards{padding-bottom:24px;margin-bottom:10px}}\n"] }]
|
|
5960
|
+
], template: "<section [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.corners\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n [simpoLayout]=\"style?.layout\">\r\n <div class=\"w-100\" *ngFor=\"let text of data?.content?.inputText\">\r\n <div [simpoContentTitleSpace]=\"headingSpace\"\r\n [ngClass]=\"text.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\r\n [class.row-scroll]=\"style?.direction === 'ROW'\" #container>\r\n <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n *ngFor=\"let service of content?.listItem?.data\">\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\r\n <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-below-image-card>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\r\n <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-top-of-image-card>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\r\n <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-covering-image-card>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display d-flex mt-3 gap-2\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.row-scroll{flex-wrap:nowrap!important;width:100%;overflow-x:scroll}.button-display{display:flex;flex-wrap:wrap;gap:10px}@media screen and (min-width: 760px){.cards{padding-bottom:24px;margin-bottom:10px}}@media screen and (max-width: 475px){.cards{padding:5px 8px 10px!important}}\n"] }]
|
|
5962
5961
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
5963
5962
|
type: Input
|
|
5964
5963
|
}], index: [{
|
|
@@ -6094,7 +6093,7 @@ class TestimonialSectionComponent extends BaseSection {
|
|
|
6094
6093
|
}, 100);
|
|
6095
6094
|
}
|
|
6096
6095
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TestimonialSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6097
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TestimonialSectionComponent, isStandalone: true, selector: "simpo-testimonial-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row content-side\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n\r\n <div id=\"testimonialFullWidthCarousel\" class=\"carousel slide mb-1\" data-bs-ride=\"carousel\">\r\n <ol class=\"carousel-indicators\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#testimonialFullWidthCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n </ol>\r\n <div class=\"carousel-inner\">\r\n <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\r\n [class.active]=\"i === 0\" data-bs-interval=\"10000\">\r\n <div style=\"width: 90%; margin: auto;\">\r\n <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [id]=\"data?.id\"\r\n [simpoColor]=\"style?.background?.color\" [simpoContainerLayout]=\"style?.layout\">\r\n <img loading=\"lazy\" [src]=\"testimonial.image.url\" class=\"mb-1\" loading=\"lazy\" [simpoContainerLayout]=\"getLayout\" [appImageEditor]=\"edit || false\" [imageData]=\"testimonial.image\" [sectionId]=\"data?.id\">\r\n <!-- <p class=\"heading-medium\" [innerHTML]=\"testimonial.inputText[0].value\"></p> -->\r\n <simpo-text-editor [(value)]=\"testimonial.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n <ng-container *ngIf=\"testimonial?.inputText?.[1] as textItem\">\r\n <div class=\"d-flex\"> -\r\n <simpo-text-editor [(value)]=\"textItem.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div> \r\n </ng-container> \r\n\r\n <!-- <span href=\"#\" class=\"py-2 px-4 mb-1\" [innerHTML]=\"'- '+testimonial.inputText[1].value\"></span> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\" data-bs-slide=\"prev\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\" data-bs-slide=\"next\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".total-container{position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left:5%;margin-right:5%}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators .active{width:30px;height:3px;margin:1px}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.previous-icon{position:absolute;height:45px}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}li{list-style:none}.heading-medium{font-weight:400!important}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
|
|
6096
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TestimonialSectionComponent, isStandalone: true, selector: "simpo-testimonial-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row content-side\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n\r\n <div id=\"testimonialFullWidthCarousel\" class=\"carousel slide mb-1\" data-bs-ride=\"carousel\">\r\n <ol class=\"carousel-indicators\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#testimonialFullWidthCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n </ol>\r\n <div class=\"carousel-inner\">\r\n <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\r\n [class.active]=\"i === 0\" data-bs-interval=\"10000\">\r\n <div style=\"width: 90%; margin: auto;\" class=\"carousel-parent\">\r\n <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [id]=\"data?.id\"\r\n [simpoColor]=\"style?.background?.color\" [simpoContainerLayout]=\"style?.layout\">\r\n <img loading=\"lazy\" [src]=\"testimonial.image.url\" class=\"mb-1\" loading=\"lazy\" [simpoContainerLayout]=\"getLayout\" [appImageEditor]=\"edit || false\" [imageData]=\"testimonial.image\" [sectionId]=\"data?.id\">\r\n <!-- <p class=\"heading-medium\" [innerHTML]=\"testimonial.inputText[0].value\"></p> -->\r\n <simpo-text-editor [(value)]=\"testimonial.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n <ng-container *ngIf=\"testimonial?.inputText?.[1] as textItem\">\r\n <div class=\"d-flex\"> -\r\n <simpo-text-editor [(value)]=\"textItem.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div> \r\n </ng-container> \r\n\r\n <!-- <span href=\"#\" class=\"py-2 px-4 mb-1\" [innerHTML]=\"'- '+testimonial.inputText[1].value\"></span> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\" data-bs-slide=\"prev\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\" data-bs-slide=\"next\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".total-container{position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left:5%;margin-right:5%}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators .active{width:30px;height:3px;margin:1px}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.previous-icon{position:absolute;height:45px}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media screen and (max-width: 475px){.carousel-parent,.carousel-caption{width:100%!important}}li{list-style:none}.heading-medium{font-weight:400!important}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
|
|
6098
6097
|
//directive
|
|
6099
6098
|
AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContainerFitDirective, selector: "[simpoContainerLayout]", inputs: ["simpoContainerLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
|
|
6100
6099
|
}
|
|
@@ -6129,7 +6128,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
6129
6128
|
TextEditorComponent,
|
|
6130
6129
|
ImageEditorDirective,
|
|
6131
6130
|
SpacingHorizontalDirective
|
|
6132
|
-
], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row content-side\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n\r\n <div id=\"testimonialFullWidthCarousel\" class=\"carousel slide mb-1\" data-bs-ride=\"carousel\">\r\n <ol class=\"carousel-indicators\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#testimonialFullWidthCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n </ol>\r\n <div class=\"carousel-inner\">\r\n <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\r\n [class.active]=\"i === 0\" data-bs-interval=\"10000\">\r\n <div style=\"width: 90%; margin: auto;\">\r\n <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [id]=\"data?.id\"\r\n [simpoColor]=\"style?.background?.color\" [simpoContainerLayout]=\"style?.layout\">\r\n <img loading=\"lazy\" [src]=\"testimonial.image.url\" class=\"mb-1\" loading=\"lazy\" [simpoContainerLayout]=\"getLayout\" [appImageEditor]=\"edit || false\" [imageData]=\"testimonial.image\" [sectionId]=\"data?.id\">\r\n <!-- <p class=\"heading-medium\" [innerHTML]=\"testimonial.inputText[0].value\"></p> -->\r\n <simpo-text-editor [(value)]=\"testimonial.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n <ng-container *ngIf=\"testimonial?.inputText?.[1] as textItem\">\r\n <div class=\"d-flex\"> -\r\n <simpo-text-editor [(value)]=\"textItem.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div> \r\n </ng-container> \r\n\r\n <!-- <span href=\"#\" class=\"py-2 px-4 mb-1\" [innerHTML]=\"'- '+testimonial.inputText[1].value\"></span> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\" data-bs-slide=\"prev\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\" data-bs-slide=\"next\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".total-container{position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left:5%;margin-right:5%}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators .active{width:30px;height:3px;margin:1px}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.previous-icon{position:absolute;height:45px}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}li{list-style:none}.heading-medium{font-weight:400!important}\n"] }]
|
|
6131
|
+
], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row content-side\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n\r\n <div id=\"testimonialFullWidthCarousel\" class=\"carousel slide mb-1\" data-bs-ride=\"carousel\">\r\n <ol class=\"carousel-indicators\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#testimonialFullWidthCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n </ol>\r\n <div class=\"carousel-inner\">\r\n <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\r\n [class.active]=\"i === 0\" data-bs-interval=\"10000\">\r\n <div style=\"width: 90%; margin: auto;\" class=\"carousel-parent\">\r\n <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [id]=\"data?.id\"\r\n [simpoColor]=\"style?.background?.color\" [simpoContainerLayout]=\"style?.layout\">\r\n <img loading=\"lazy\" [src]=\"testimonial.image.url\" class=\"mb-1\" loading=\"lazy\" [simpoContainerLayout]=\"getLayout\" [appImageEditor]=\"edit || false\" [imageData]=\"testimonial.image\" [sectionId]=\"data?.id\">\r\n <!-- <p class=\"heading-medium\" [innerHTML]=\"testimonial.inputText[0].value\"></p> -->\r\n <simpo-text-editor [(value)]=\"testimonial.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n <ng-container *ngIf=\"testimonial?.inputText?.[1] as textItem\">\r\n <div class=\"d-flex\"> -\r\n <simpo-text-editor [(value)]=\"textItem.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div> \r\n </ng-container> \r\n\r\n <!-- <span href=\"#\" class=\"py-2 px-4 mb-1\" [innerHTML]=\"'- '+testimonial.inputText[1].value\"></span> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\" data-bs-slide=\"prev\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\" data-bs-slide=\"next\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".total-container{position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left:5%;margin-right:5%}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators .active{width:30px;height:3px;margin:1px}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.previous-icon{position:absolute;height:45px}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media screen and (max-width: 475px){.carousel-parent,.carousel-caption{width:100%!important}}li{list-style:none}.heading-medium{font-weight:400!important}\n"] }]
|
|
6133
6132
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
6134
6133
|
type: Input
|
|
6135
6134
|
}], index: [{
|
|
@@ -6320,11 +6319,11 @@ class NavbarButtonElementComponent {
|
|
|
6320
6319
|
this._eventService.pageRedirectionButton.emit({ data: pageData ? pageData : this.buttonData });
|
|
6321
6320
|
}
|
|
6322
6321
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavbarButtonElementComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6323
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NavbarButtonElementComponent, isStandalone: true, selector: "simpo-navbar-button-element", inputs: { buttonData: "buttonData", buttonStyle: "buttonStyle", selectedStyle: "selectedStyle", bgColor: "bgColor", sectionId: "sectionId", accentColor: "accentColor" }, ngImport: i0, template: "<div *ngIf=\"false\">\r\n <div *ngIf=\"selectedStyle === HeaderButtonStyle.TAB\">\r\n <div *ngIf=\"!buttonData?.folder\">\r\n <button mat-stroked-button style=\"border: none; white-space: nowrap;\" [id]=\"sectionId\" [simpoColor]=\"bgColor\"\r\n [ngStyle]=\"{color:buttonStyle?.color}\" class=\"navbar-button\">{{buttonData?.label}}</button>\r\n <div [ngStyle]=\"{'border-bottom':'1px solid'+buttonStyle?.color}\" (click)=\"changePage()\" [id]=\"sectionId\"></div>\r\n </div>\r\n <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n <button mat-stroked-button class=\"navbar-button dropdown-toggle\" [simpoColor]=\"bgColor\" style=\"border: none; white-space: nowrap;\"\r\n [ngStyle]=\"{color:buttonStyle?.color}\" type=\"button\"\r\n id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{buttonData?.label}}\r\n </button>\r\n <div [ngStyle]=\"{'border-bottom':'1px solid'+buttonStyle?.color}\" [id]=\"sectionId\"></div>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"selectedStyle === HeaderButtonStyle.ROUND_SUBTLE\">\r\n <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n style=\"border: none;width: max-content!important; border-radius: 8px;\"\r\n [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" (click)=\"changePage()\"\r\n [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n style=\"border: none;width: max-content!important; border-radius: 8px;\"\r\n [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" type=\"button\"\r\n id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{buttonData?.label}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"selectedStyle === HeaderButtonStyle.ROUND_BOLD\">\r\n <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n style=\"border: none;width: max-content!important; border-radius: 8px;\"\r\n [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" (click)=\"changePage()\"\r\n [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n style=\"border: none;width: max-content!important; border-radius: 8px;\"\r\n [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" type=\"button\"\r\n id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{buttonData?.label}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"selectedStyle === HeaderButtonStyle.SQUARE_SUBTLE\">\r\n <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n style=\"border: none;border-radius: 0px !important;width: max-content!important;\"\r\n [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" (click)=\"changePage()\"\r\n [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n style=\"border: none;border-radius: 0px !important;width: max-content!important;\"\r\n [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" type=\"button\"\r\n id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{buttonData?.label}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"selectedStyle === HeaderButtonStyle.SQUARE_BOLD\">\r\n <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n style=\"border: none;width: max-content!important; border-radius: 0px !important;\"\r\n [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" (click)=\"changePage()\"\r\n [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n style=\"border: none;width: max-content!important; border-radius: 0px !important;\"\r\n [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" type=\"button\"\r\n id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{buttonData?.label}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\">{{buttonData?.content?.label}}</button> -->\r\n\r\n</div>\r\n<div>\r\n <!-- <button mat-stroked-button style=\"border: none;width: max-content!important;\" *ngIf=\"!buttonData?.folder\" [simpoColor]=\"buttonData?.status ? '' : bgColor\"\r\n (click)=\"changePage()\" [id]=\"sectionId\" [style.color]=\"buttonData?.status ? accentColor : ''\" [style.fontWeight]=\"buttonData?.status ? '700' : ''\"\r\n class=\"status-navbar-button\">{{buttonData?.label}}</button> -->\r\n <button c *ngIf=\"!buttonData?.folder\" [simpoColor]=\"buttonData?.status ? '' : bgColor\"\r\n (click)=\"changePage()\" [id]=\"sectionId\" [style.color]=\"buttonData?.status ? accentColor : ''\" [style.fontWeight]=\"buttonData?.status ? '700' : ''\"\r\n class=\"status-navbar-button button\">\r\n {{buttonData?.label}}\r\n </button>\r\n <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n <button class=\"status-navbar-button not-selected-dropdown dropdown-toggle\" [style.fontWeight]=\"buttonData?.status ? '700' : ''\" [simpoColor]=\"buttonData?.status ? '' : bgColor\"\r\n style=\"border: none;width: max-content!important;\" [style.color]=\"buttonData?.status ? accentColor : ''\" type=\"button\" id=\"headerDropdownButton\"\r\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{buttonData?.label}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".navbar-button,.status-navbar-button{font-size:14px!important;white-space:nowrap}@media only screen and (max-width : 475px){.navbar-button{width:100%!important;display:flex;justify-content:flex-start}.status-navbar-button{color:#000!important;display:flex;justify-content:flex-start}.dropdown{padding-left:10px}.dropdown-toggle{display:flex;align-items:center;gap:10px}}.not-selected-dropdown{background:transparent;font-size:16px!important}.dropdown-item{font-size:15px;padding:10px;font-family:Roboto,sans-serif;border-bottom:1px solid #dee2e6}.dropdown-menu{top:40px;border:none;border-radius:10px}.button{border:none;background:none;outline:none;font-size:16px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
|
|
6322
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NavbarButtonElementComponent, isStandalone: true, selector: "simpo-navbar-button-element", inputs: { buttonData: "buttonData", buttonStyle: "buttonStyle", selectedStyle: "selectedStyle", bgColor: "bgColor", sectionId: "sectionId", accentColor: "accentColor" }, ngImport: i0, template: "<div *ngIf=\"false\">\r\n <div *ngIf=\"selectedStyle === HeaderButtonStyle.TAB\">\r\n <div *ngIf=\"!buttonData?.folder\">\r\n <button mat-stroked-button style=\"border: none; white-space: nowrap;\" [id]=\"sectionId\" [simpoColor]=\"bgColor\"\r\n [ngStyle]=\"{color:buttonStyle?.color}\" class=\"navbar-button\">{{buttonData?.label}}</button>\r\n <div [ngStyle]=\"{'border-bottom':'1px solid'+buttonStyle?.color}\" (click)=\"changePage()\" [id]=\"sectionId\"></div>\r\n </div>\r\n <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n <button mat-stroked-button class=\"navbar-button dropdown-toggle\" [simpoColor]=\"bgColor\" style=\"border: none; white-space: nowrap;\"\r\n [ngStyle]=\"{color:buttonStyle?.color}\" type=\"button\"\r\n id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{buttonData?.label}}\r\n </button>\r\n <div [ngStyle]=\"{'border-bottom':'1px solid'+buttonStyle?.color}\" [id]=\"sectionId\"></div>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"selectedStyle === HeaderButtonStyle.ROUND_SUBTLE\">\r\n <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n style=\"border: none;width: max-content!important; border-radius: 8px;\"\r\n [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" (click)=\"changePage()\"\r\n [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n style=\"border: none;width: max-content!important; border-radius: 8px;\"\r\n [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" type=\"button\"\r\n id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{buttonData?.label}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"selectedStyle === HeaderButtonStyle.ROUND_BOLD\">\r\n <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n style=\"border: none;width: max-content!important; border-radius: 8px;\"\r\n [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" (click)=\"changePage()\"\r\n [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n style=\"border: none;width: max-content!important; border-radius: 8px;\"\r\n [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" type=\"button\"\r\n id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{buttonData?.label}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"selectedStyle === HeaderButtonStyle.SQUARE_SUBTLE\">\r\n <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n style=\"border: none;border-radius: 0px !important;width: max-content!important;\"\r\n [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" (click)=\"changePage()\"\r\n [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n style=\"border: none;border-radius: 0px !important;width: max-content!important;\"\r\n [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" type=\"button\"\r\n id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{buttonData?.label}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"selectedStyle === HeaderButtonStyle.SQUARE_BOLD\">\r\n <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n style=\"border: none;width: max-content!important; border-radius: 0px !important;\"\r\n [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" (click)=\"changePage()\"\r\n [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n style=\"border: none;width: max-content!important; border-radius: 0px !important;\"\r\n [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" type=\"button\"\r\n id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{buttonData?.label}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\">{{buttonData?.content?.label}}</button> -->\r\n\r\n</div>\r\n<div>\r\n <!-- <button mat-stroked-button style=\"border: none;width: max-content!important;\" *ngIf=\"!buttonData?.folder\" [simpoColor]=\"buttonData?.status ? '' : bgColor\"\r\n (click)=\"changePage()\" [id]=\"sectionId\" [style.color]=\"buttonData?.status ? accentColor : ''\" [style.fontWeight]=\"buttonData?.status ? '700' : ''\"\r\n class=\"status-navbar-button\">{{buttonData?.label}}</button> -->\r\n <button c *ngIf=\"!buttonData?.folder\" [simpoColor]=\"buttonData?.status ? '' : bgColor\"\r\n (click)=\"changePage()\" [id]=\"sectionId\" [style.color]=\"buttonData?.status ? accentColor : ''\" [style.fontWeight]=\"buttonData?.status ? '700' : ''\"\r\n class=\"status-navbar-button button\">\r\n {{buttonData?.label}}\r\n </button>\r\n <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n <button class=\"status-navbar-button not-selected-dropdown dropdown-toggle\" [style.fontWeight]=\"buttonData?.status ? '700' : ''\" [simpoColor]=\"buttonData?.status ? '' : bgColor\"\r\n style=\"border: none;width: max-content!important;\" [style.color]=\"buttonData?.status ? accentColor : ''\" type=\"button\" id=\"headerDropdownButton\"\r\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{buttonData?.label}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".navbar-button,.status-navbar-button{font-size:14px!important;white-space:nowrap}@media only screen and (max-width : 475px){.navbar-button{width:100%!important;display:flex;justify-content:flex-start}.status-navbar-button{color:#000!important;display:flex;justify-content:flex-start}.dropdown-toggle{display:flex;align-items:center;gap:10px}}.not-selected-dropdown{background:transparent;font-size:16px!important}.dropdown-item{font-size:15px;padding:10px;font-family:Roboto,sans-serif;border-bottom:1px solid #dee2e6}.dropdown-menu{top:40px;border:none;border-radius:10px}.button{border:none;background:none;outline:none;font-size:16px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
|
|
6324
6323
|
}
|
|
6325
6324
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavbarButtonElementComponent, decorators: [{
|
|
6326
6325
|
type: Component,
|
|
6327
|
-
args: [{ selector: 'simpo-navbar-button-element', standalone: true, imports: [CommonModule, MatButtonModule, ColorDirective], template: "<div *ngIf=\"false\">\r\n <div *ngIf=\"selectedStyle === HeaderButtonStyle.TAB\">\r\n <div *ngIf=\"!buttonData?.folder\">\r\n <button mat-stroked-button style=\"border: none; white-space: nowrap;\" [id]=\"sectionId\" [simpoColor]=\"bgColor\"\r\n [ngStyle]=\"{color:buttonStyle?.color}\" class=\"navbar-button\">{{buttonData?.label}}</button>\r\n <div [ngStyle]=\"{'border-bottom':'1px solid'+buttonStyle?.color}\" (click)=\"changePage()\" [id]=\"sectionId\"></div>\r\n </div>\r\n <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n <button mat-stroked-button class=\"navbar-button dropdown-toggle\" [simpoColor]=\"bgColor\" style=\"border: none; white-space: nowrap;\"\r\n [ngStyle]=\"{color:buttonStyle?.color}\" type=\"button\"\r\n id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{buttonData?.label}}\r\n </button>\r\n <div [ngStyle]=\"{'border-bottom':'1px solid'+buttonStyle?.color}\" [id]=\"sectionId\"></div>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"selectedStyle === HeaderButtonStyle.ROUND_SUBTLE\">\r\n <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n style=\"border: none;width: max-content!important; border-radius: 8px;\"\r\n [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" (click)=\"changePage()\"\r\n [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n style=\"border: none;width: max-content!important; border-radius: 8px;\"\r\n [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" type=\"button\"\r\n id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{buttonData?.label}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"selectedStyle === HeaderButtonStyle.ROUND_BOLD\">\r\n <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n style=\"border: none;width: max-content!important; border-radius: 8px;\"\r\n [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" (click)=\"changePage()\"\r\n [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n style=\"border: none;width: max-content!important; border-radius: 8px;\"\r\n [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" type=\"button\"\r\n id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{buttonData?.label}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"selectedStyle === HeaderButtonStyle.SQUARE_SUBTLE\">\r\n <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n style=\"border: none;border-radius: 0px !important;width: max-content!important;\"\r\n [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" (click)=\"changePage()\"\r\n [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n style=\"border: none;border-radius: 0px !important;width: max-content!important;\"\r\n [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" type=\"button\"\r\n id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{buttonData?.label}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"selectedStyle === HeaderButtonStyle.SQUARE_BOLD\">\r\n <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n style=\"border: none;width: max-content!important; border-radius: 0px !important;\"\r\n [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" (click)=\"changePage()\"\r\n [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n style=\"border: none;width: max-content!important; border-radius: 0px !important;\"\r\n [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" type=\"button\"\r\n id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{buttonData?.label}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\">{{buttonData?.content?.label}}</button> -->\r\n\r\n</div>\r\n<div>\r\n <!-- <button mat-stroked-button style=\"border: none;width: max-content!important;\" *ngIf=\"!buttonData?.folder\" [simpoColor]=\"buttonData?.status ? '' : bgColor\"\r\n (click)=\"changePage()\" [id]=\"sectionId\" [style.color]=\"buttonData?.status ? accentColor : ''\" [style.fontWeight]=\"buttonData?.status ? '700' : ''\"\r\n class=\"status-navbar-button\">{{buttonData?.label}}</button> -->\r\n <button c *ngIf=\"!buttonData?.folder\" [simpoColor]=\"buttonData?.status ? '' : bgColor\"\r\n (click)=\"changePage()\" [id]=\"sectionId\" [style.color]=\"buttonData?.status ? accentColor : ''\" [style.fontWeight]=\"buttonData?.status ? '700' : ''\"\r\n class=\"status-navbar-button button\">\r\n {{buttonData?.label}}\r\n </button>\r\n <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n <button class=\"status-navbar-button not-selected-dropdown dropdown-toggle\" [style.fontWeight]=\"buttonData?.status ? '700' : ''\" [simpoColor]=\"buttonData?.status ? '' : bgColor\"\r\n style=\"border: none;width: max-content!important;\" [style.color]=\"buttonData?.status ? accentColor : ''\" type=\"button\" id=\"headerDropdownButton\"\r\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{buttonData?.label}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".navbar-button,.status-navbar-button{font-size:14px!important;white-space:nowrap}@media only screen and (max-width : 475px){.navbar-button{width:100%!important;display:flex;justify-content:flex-start}.status-navbar-button{color:#000!important;display:flex;justify-content:flex-start}.dropdown
|
|
6326
|
+
args: [{ selector: 'simpo-navbar-button-element', standalone: true, imports: [CommonModule, MatButtonModule, ColorDirective], template: "<div *ngIf=\"false\">\r\n <div *ngIf=\"selectedStyle === HeaderButtonStyle.TAB\">\r\n <div *ngIf=\"!buttonData?.folder\">\r\n <button mat-stroked-button style=\"border: none; white-space: nowrap;\" [id]=\"sectionId\" [simpoColor]=\"bgColor\"\r\n [ngStyle]=\"{color:buttonStyle?.color}\" class=\"navbar-button\">{{buttonData?.label}}</button>\r\n <div [ngStyle]=\"{'border-bottom':'1px solid'+buttonStyle?.color}\" (click)=\"changePage()\" [id]=\"sectionId\"></div>\r\n </div>\r\n <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n <button mat-stroked-button class=\"navbar-button dropdown-toggle\" [simpoColor]=\"bgColor\" style=\"border: none; white-space: nowrap;\"\r\n [ngStyle]=\"{color:buttonStyle?.color}\" type=\"button\"\r\n id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{buttonData?.label}}\r\n </button>\r\n <div [ngStyle]=\"{'border-bottom':'1px solid'+buttonStyle?.color}\" [id]=\"sectionId\"></div>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"selectedStyle === HeaderButtonStyle.ROUND_SUBTLE\">\r\n <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n style=\"border: none;width: max-content!important; border-radius: 8px;\"\r\n [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" (click)=\"changePage()\"\r\n [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n style=\"border: none;width: max-content!important; border-radius: 8px;\"\r\n [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" type=\"button\"\r\n id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{buttonData?.label}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"selectedStyle === HeaderButtonStyle.ROUND_BOLD\">\r\n <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n style=\"border: none;width: max-content!important; border-radius: 8px;\"\r\n [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" (click)=\"changePage()\"\r\n [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n style=\"border: none;width: max-content!important; border-radius: 8px;\"\r\n [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" type=\"button\"\r\n id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{buttonData?.label}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"selectedStyle === HeaderButtonStyle.SQUARE_SUBTLE\">\r\n <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n style=\"border: none;border-radius: 0px !important;width: max-content!important;\"\r\n [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" (click)=\"changePage()\"\r\n [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n style=\"border: none;border-radius: 0px !important;width: max-content!important;\"\r\n [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" type=\"button\"\r\n id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{buttonData?.label}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"selectedStyle === HeaderButtonStyle.SQUARE_BOLD\">\r\n <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n style=\"border: none;width: max-content!important; border-radius: 0px !important;\"\r\n [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" (click)=\"changePage()\"\r\n [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n style=\"border: none;width: max-content!important; border-radius: 0px !important;\"\r\n [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" type=\"button\"\r\n id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{buttonData?.label}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\">{{buttonData?.content?.label}}</button> -->\r\n\r\n</div>\r\n<div>\r\n <!-- <button mat-stroked-button style=\"border: none;width: max-content!important;\" *ngIf=\"!buttonData?.folder\" [simpoColor]=\"buttonData?.status ? '' : bgColor\"\r\n (click)=\"changePage()\" [id]=\"sectionId\" [style.color]=\"buttonData?.status ? accentColor : ''\" [style.fontWeight]=\"buttonData?.status ? '700' : ''\"\r\n class=\"status-navbar-button\">{{buttonData?.label}}</button> -->\r\n <button c *ngIf=\"!buttonData?.folder\" [simpoColor]=\"buttonData?.status ? '' : bgColor\"\r\n (click)=\"changePage()\" [id]=\"sectionId\" [style.color]=\"buttonData?.status ? accentColor : ''\" [style.fontWeight]=\"buttonData?.status ? '700' : ''\"\r\n class=\"status-navbar-button button\">\r\n {{buttonData?.label}}\r\n </button>\r\n <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n <button class=\"status-navbar-button not-selected-dropdown dropdown-toggle\" [style.fontWeight]=\"buttonData?.status ? '700' : ''\" [simpoColor]=\"buttonData?.status ? '' : bgColor\"\r\n style=\"border: none;width: max-content!important;\" [style.color]=\"buttonData?.status ? accentColor : ''\" type=\"button\" id=\"headerDropdownButton\"\r\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{buttonData?.label}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".navbar-button,.status-navbar-button{font-size:14px!important;white-space:nowrap}@media only screen and (max-width : 475px){.navbar-button{width:100%!important;display:flex;justify-content:flex-start}.status-navbar-button{color:#000!important;display:flex;justify-content:flex-start}.dropdown-toggle{display:flex;align-items:center;gap:10px}}.not-selected-dropdown{background:transparent;font-size:16px!important}.dropdown-item{font-size:15px;padding:10px;font-family:Roboto,sans-serif;border-bottom:1px solid #dee2e6}.dropdown-menu{top:40px;border:none;border-radius:10px}.button{border:none;background:none;outline:none;font-size:16px!important}\n"] }]
|
|
6328
6327
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { buttonData: [{
|
|
6329
6328
|
type: Input
|
|
6330
6329
|
}], buttonStyle: [{
|
|
@@ -11841,11 +11840,11 @@ class LogoShowcaseComponent extends BaseSection {
|
|
|
11841
11840
|
}
|
|
11842
11841
|
}
|
|
11843
11842
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LogoShowcaseComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11844
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LogoShowcaseComponent, isStandalone: true, selector: "simpo-logo-showcase", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"styles?.showCaseType==='Grid'\">\r\n <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\r\n [attr.style]=\"customClass\">\r\n <div class=\"py-3 w-100 \" [simpoBackground]=\"styles?.background\"\r\n [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row g-5 gridtext\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n *ngIf=\"styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\">\r\n\r\n <div class=\"col-6 gridimg w-full mb-20 content-side\" [id]=\"data?.id\"\r\n [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <ng-container *ngIf=\"edit || item.value\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-wrap flex-1 width-max\">\r\n <div class=\"slider flex overflow-hidden w-full\">\r\n <div class=\"slider-track\" *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n <ng-container\r\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n class=\"logo-img d-flex justify-content-center align-items-center\"\r\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n [showIcon]=\"content?.display?.showIcon\">\r\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"slider-track w-full\"\r\n *ngIf=\"!content?.display?.showIcon && content?.display?.showText\"\r\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\n *ngFor=\"let item of content?.listItem?.data\"\r\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"slider-track w-full\"\r\n *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\r\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides d-flex\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n *ngFor=\"let item of content?.listItem?.data\"\r\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic','flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\r\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n <ng-container\r\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n class=\"logo-img d-flex justify-content-center align-items-center\"\r\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n [showIcon]=\"content?.display?.showIcon\">\r\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n </div>\r\n </ng-container>\r\n\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\r\n <div class=\"px-5 mb-20 content-side\" [id]=\"data?.id\"\r\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <ng-container *ngIf=\"edit || item.value\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-12 flex flex-wrap items-center w-full gap-2 justify-center\">\r\n <!-- flex flex-wrap items-center w-full gap-2 justify-center -->\r\n <div class=\"slider flex overflow-hidden w-full\">\r\n <div class=\"slider-track w-full\"\r\n *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\r\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\r\n *ngFor=\"let item of content?.listItem?.data; let i = index\">\r\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n <ng-container\r\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n class=\"logo-img d-flex justify-content-center align-items-center\"\r\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n [showIcon]=\"content?.display?.showIcon\">\r\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"slider-track w-full\"\r\n *ngIf=\"!content?.display?.showIcon && content?.display?.showText\"\r\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\r\n *ngFor=\"let item of content?.listItem?.data\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"slider-track w-full\"\r\n *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\r\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides d-flex align-items-center\" [simpoCorner]=\"styles?.corners\"\r\n *ngFor=\"let item of content?.listItem?.data\" [id]=\"data?.id\"\r\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\r\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n <ng-container\r\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n class=\"logo-img d-flex justify-content-center align-items-center\"\r\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n [showIcon]=\"content?.display?.showIcon\">\r\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n </div>\r\n </ng-container>\r\n <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div *ngIf=\"styles?.showCaseType==='Carousal'\">\r\n <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n\r\n <div class=\"w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\"\r\n [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [simpoBackground]=\"styles?.background\">\r\n <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\">\r\n <div class=\"mainsec content-side\" [id]=\"data?.id\"\r\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <ng-container *ngIf=\"edit || item.value\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"gap-2 d-md-flex mt-15\" [ngClass]=\"[\r\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n ]\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{\r\n 'fullwidth flex-1 inline-edit ': styles?.fullWidth,\r\n 'nofullwidth flex-1 inline-edit ': !styles?.fullWidth\r\n }\">\r\n <div class=\"masking\">\r\n\r\n <div class=\"slider animation \" [style.animationDuration]=\"animationDuration\"\r\n [style.animationDirection]=\"animationDirection\">\r\n <div class=\"slider-track2\"\r\n *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides2\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\r\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\"\r\n [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n <ng-container\r\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n class=\"logo-img d-flex justify-content-center align-items-center\"\r\n [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n [sectionId]=\"data?.id\" [showIcon]=\"content?.display?.showIcon\">\r\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"slider-track2\"\r\n *ngIf=\"content?.display?.showText && !content?.display?.showIcon\"\r\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\r\n *ngFor=\"let item of content?.listItem?.data\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"slider-track2 d-flex w-full\"\r\n *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\r\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides d-flex\" [simpoCorner]=\"styles?.corners\"\r\n *ngFor=\"let item of content?.listItem?.data\" [id]=\"data?.id\"\r\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'align-items-start': styles?.layout?.align === 'left', 'align-items-center': styles?.layout?.align === 'center', 'align-items-end': styles?.layout?.align === 'right' , 'flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\r\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\"\r\n [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n <ng-container\r\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n class=\"logo-img d-flex justify-content-center align-items-center\"\r\n [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n [sectionId]=\"data?.id\" [showIcon]=\"content?.display?.showIcon\">\r\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n </div>\r\n </ng-container>\r\n <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </div>\r\n</div>", styles: [".masking{mask:linear-gradient(90deg,transparent,white 5%,white 95%,transparent);overflow:hidden;width:100%}.sliderdad{width:100%;display:flex}@media (min-width: 860px){.nofullwidth{overflow:hidden}}.slider-track2{min-width:max-content;translate:none;rotate:none;scale:none;gap:1rem;justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex}.mainsec{gap:2rem;flex-direction:column;display:flex}.slider-track2.logotype-boxed{gap:1rem}.slider-track2.logotype-basic{gap:5rem}.slides2.logotype-boxed{padding:1.5rem 1.25rem;--tw-bg-opacity: .05;flex-shrink:0;width:auto;height:auto;display:flex;position:relative;box-shadow:#0000002e 0 2px 4px;margin:10px 5px}.slides2.logotype-basic{flex-shrink:0;width:auto;height:auto;display:flex;position:relative}.slides2.img{height:100%;max-width:100%;border-style:solid}@keyframes scrollLeft{0%{transform:translateZ(0)}to{transform:translate3d(-100%,0,0)}}@keyframes scrollRight{0%{transform:translate3d(-100%,0,0)}to{transform:translateZ(0)}}.animation{animation:scrollLeft linear infinite}.slider-track{justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex;gap:10px}.slider-track.logotype-basic{gap:5rem}.slider-track.logotype-boxed{gap:1rem}.slides.logotype-basic{flex-shrink:0;width:auto;min-height:5rem;height:auto;display:flex;position:relative}.slides.logotype-boxed{padding:1.5rem .625rem;--tw-bg-opacity: .05;box-shadow:#0000002e 0 2px 4px;width:auto;height:auto;display:flex;align-items:center;margin:10px 5px}.width-max{width:max-content;max-width:50%}.slides.texttype-boxed{padding:1.5rem .625rem;justify-content:center;width:auto;display:flex;position:relative;box-shadow:#0000002e 0 2px 4px;margin:10px 5px;align-items:center}.slides.texttype-boxed:hover{--tw-bg-opacity: .05;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.slides.img{border-style:solid;max-width:100%;height:100%}@media only screen and (max-width: 500px){.col-xxl-8{padding-left:0!important;padding-right:0!important}.mainsec{padding-right:2rem!important;padding-left:2rem!important}.col-7{min-width:50%;width:100%;max-width:100%}.col-5{width:100%}.slides img{width:88%}}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-20{margin-top:20px}.mb-20{margin-bottom:20px}.row{margin-left:0;margin-right:0}\n"], dependencies: [{ kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: IconDirectiveDirective, selector: "[simpoIconDirective]", inputs: ["simpoIconDirective", "iconId"] }] }); }
|
|
11843
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LogoShowcaseComponent, isStandalone: true, selector: "simpo-logo-showcase", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"styles?.showCaseType==='Grid'\">\r\n <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\r\n [attr.style]=\"customClass\">\r\n <div class=\"py-3 w-100 \" [simpoBackground]=\"styles?.background\"\r\n [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row g-5 gridtext \" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n *ngIf=\"styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\">\r\n\r\n <div class=\"col-6 gridimg w-full mb-20 content-side\" [id]=\"data?.id\"\r\n [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <ng-container *ngIf=\"edit || item.value\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-wrap flex-1 width-max\">\r\n <div class=\"slider flex overflow-hidden w-full\">\r\n <div class=\"slider-track\" *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n <ng-container\r\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n class=\"logo-img d-flex justify-content-center align-items-center\"\r\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n [showIcon]=\"content?.display?.showIcon\">\r\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"slider-track w-full\"\r\n *ngIf=\"!content?.display?.showIcon && content?.display?.showText\"\r\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\n *ngFor=\"let item of content?.listItem?.data\"\r\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"slider-track w-full\"\r\n *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\r\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides d-flex\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n *ngFor=\"let item of content?.listItem?.data\"\r\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic','flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\r\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n <ng-container\r\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n class=\"logo-img d-flex justify-content-center align-items-center\"\r\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n [showIcon]=\"content?.display?.showIcon\">\r\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n </div>\r\n </ng-container>\r\n\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\r\n <div class=\"px-5 mb-20 content-side\" [id]=\"data?.id\"\r\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <ng-container *ngIf=\"edit || item.value\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-12 flex flex-wrap items-center w-full gap-2 justify-center\">\r\n <!-- flex flex-wrap items-center w-full gap-2 justify-center -->\r\n <div class=\"slider flex overflow-hidden w-full\">\r\n <div class=\"slider-track w-full\"\r\n *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\r\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\r\n *ngFor=\"let item of content?.listItem?.data; let i = index\">\r\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n <ng-container\r\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n class=\"logo-img d-flex justify-content-center align-items-center\"\r\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n [showIcon]=\"content?.display?.showIcon\">\r\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"slider-track w-full\"\r\n *ngIf=\"!content?.display?.showIcon && content?.display?.showText\"\r\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\r\n *ngFor=\"let item of content?.listItem?.data\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"slider-track w-full\"\r\n *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\r\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides d-flex align-items-center\" [simpoCorner]=\"styles?.corners\"\r\n *ngFor=\"let item of content?.listItem?.data\" [id]=\"data?.id\"\r\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\r\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n <ng-container\r\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n class=\"logo-img d-flex justify-content-center align-items-center\"\r\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n [showIcon]=\"content?.display?.showIcon\">\r\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n </div>\r\n </ng-container>\r\n <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div *ngIf=\"styles?.showCaseType==='Carousal'\">\r\n <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n\r\n <div class=\"w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\"\r\n [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [simpoBackground]=\"styles?.background\">\r\n <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\">\r\n <div class=\"mainsec content-side\" [id]=\"data?.id\"\r\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <ng-container *ngIf=\"edit || item.value\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"gap-2 d-md-flex mt-15\" [ngClass]=\"[\r\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n ]\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{\r\n 'fullwidth flex-1 inline-edit ': styles?.fullWidth,\r\n 'nofullwidth flex-1 inline-edit ': !styles?.fullWidth\r\n }\">\r\n <div class=\"masking\">\r\n\r\n <div class=\"slider animation \" [style.animationDuration]=\"animationDuration\"\r\n [style.animationDirection]=\"animationDirection\">\r\n <div class=\"slider-track2\"\r\n *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides2\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\r\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\"\r\n [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n <ng-container\r\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n class=\"logo-img d-flex justify-content-center align-items-center\"\r\n [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n [sectionId]=\"data?.id\" [showIcon]=\"content?.display?.showIcon\">\r\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"slider-track2\"\r\n *ngIf=\"content?.display?.showText && !content?.display?.showIcon\"\r\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\r\n *ngFor=\"let item of content?.listItem?.data\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"slider-track2 d-flex w-full\"\r\n *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\r\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides d-flex\" [simpoCorner]=\"styles?.corners\"\r\n *ngFor=\"let item of content?.listItem?.data\" [id]=\"data?.id\"\r\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'align-items-start': styles?.layout?.align === 'left', 'align-items-center': styles?.layout?.align === 'center', 'align-items-end': styles?.layout?.align === 'right' , 'flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\r\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\"\r\n [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n <ng-container\r\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n class=\"logo-img d-flex justify-content-center align-items-center\"\r\n [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n [sectionId]=\"data?.id\" [showIcon]=\"content?.display?.showIcon\">\r\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n </div>\r\n </ng-container>\r\n <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </div>\r\n</div>", styles: [".masking{mask:linear-gradient(90deg,transparent,white 5%,white 95%,transparent);overflow:hidden;width:100%}.sliderdad{width:100%;display:flex}@media (min-width: 860px){.nofullwidth{overflow:hidden}}.slider-track2{min-width:max-content;translate:none;rotate:none;scale:none;gap:1rem;justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex}.mainsec{gap:2rem;flex-direction:column;display:flex}.slider-track2.logotype-boxed{gap:1rem}.slider-track2.logotype-basic{gap:5rem}.slides2.logotype-boxed{padding:1.5rem 1.25rem;--tw-bg-opacity: .05;flex-shrink:0;width:auto;height:auto;display:flex;position:relative;box-shadow:#0000002e 0 2px 4px;margin:10px 5px}.slides2.logotype-basic{flex-shrink:0;width:auto;height:auto;display:flex;position:relative}.slides2.img{height:100%;max-width:100%;border-style:solid}@keyframes scrollLeft{0%{transform:translateZ(0)}to{transform:translate3d(-100%,0,0)}}@keyframes scrollRight{0%{transform:translate3d(-100%,0,0)}to{transform:translateZ(0)}}.animation{animation:scrollLeft linear infinite}.slider-track{justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex;gap:10px}.slider-track.logotype-basic{gap:5rem}.slider-track.logotype-boxed{gap:1rem}.slides.logotype-basic{flex-shrink:0;width:auto;min-height:5rem;height:auto;display:flex;position:relative}.slides.logotype-boxed{padding:1.5rem .625rem;--tw-bg-opacity: .05;box-shadow:#0000002e 0 2px 4px;width:auto;height:auto;display:flex;align-items:center;margin:10px 5px}.width-max{width:max-content;max-width:50%}.slides.texttype-boxed{padding:1.5rem .625rem;justify-content:center;width:auto;display:flex;position:relative;box-shadow:#0000002e 0 2px 4px;margin:10px 5px;align-items:center}.slides.texttype-boxed:hover{--tw-bg-opacity: .05;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.slides.img{border-style:solid;max-width:100%;height:100%}@media only screen and (max-width: 500px){.col-xxl-8{padding-left:0!important;padding-right:0!important}.mainsec{padding-right:2rem!important;padding-left:2rem!important}.col-7{min-width:50%;width:100%;max-width:100%}.col-5{width:100%}.slides img{width:88%}.gridtext{flex-direction:column!important}.gridtext .gridimg{width:100%!important}.gridtext .width-max{max-width:100%!important}}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-20{margin-top:20px}.mb-20{margin-bottom:20px}.row{margin-left:0;margin-right:0}\n"], dependencies: [{ kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: IconDirectiveDirective, selector: "[simpoIconDirective]", inputs: ["simpoIconDirective", "iconId"] }] }); }
|
|
11845
11844
|
}
|
|
11846
11845
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LogoShowcaseComponent, decorators: [{
|
|
11847
11846
|
type: Component,
|
|
11848
|
-
args: [{ selector: 'simpo-logo-showcase', standalone: true, imports: [SimpoButtonComponent, SimpoElementsModule, SanitizeHtmlPipe, TextEditorComponent, SimpoComponentModule, CommonModule, MatGridListModule, AnimationDirective, BackgroundDirective, ContentFitDirective, BorderDirective, BannerContentFitDirective, ButtonDirectiveDirective, ColumnDirectiveDirective, ContainerFitDirective, CornerDirective, simpoConetenAlignmentDirective, SimpoFooterLayoutDirective, HoverDirective, ImageDirectiveDirective, OverlayDirective, PositionLayoutDirectiveDirective, TextBackgroundDirectiveDirective, SpacingHorizontalDirective, ObjectPositionDirective, ImageEditorDirective, IconDirectiveDirective], template: "<div *ngIf=\"styles?.showCaseType==='Grid'\">\r\n <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\r\n [attr.style]=\"customClass\">\r\n <div class=\"py-3 w-100 \" [simpoBackground]=\"styles?.background\"\r\n [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row g-5 gridtext\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n *ngIf=\"styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\">\r\n\r\n <div class=\"col-6 gridimg w-full mb-20 content-side\" [id]=\"data?.id\"\r\n [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <ng-container *ngIf=\"edit || item.value\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-wrap flex-1 width-max\">\r\n <div class=\"slider flex overflow-hidden w-full\">\r\n <div class=\"slider-track\" *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n <ng-container\r\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n class=\"logo-img d-flex justify-content-center align-items-center\"\r\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n [showIcon]=\"content?.display?.showIcon\">\r\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"slider-track w-full\"\r\n *ngIf=\"!content?.display?.showIcon && content?.display?.showText\"\r\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\n *ngFor=\"let item of content?.listItem?.data\"\r\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"slider-track w-full\"\r\n *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\r\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides d-flex\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n *ngFor=\"let item of content?.listItem?.data\"\r\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic','flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\r\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n <ng-container\r\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n class=\"logo-img d-flex justify-content-center align-items-center\"\r\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n [showIcon]=\"content?.display?.showIcon\">\r\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n </div>\r\n </ng-container>\r\n\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\r\n <div class=\"px-5 mb-20 content-side\" [id]=\"data?.id\"\r\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <ng-container *ngIf=\"edit || item.value\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-12 flex flex-wrap items-center w-full gap-2 justify-center\">\r\n <!-- flex flex-wrap items-center w-full gap-2 justify-center -->\r\n <div class=\"slider flex overflow-hidden w-full\">\r\n <div class=\"slider-track w-full\"\r\n *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\r\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\r\n *ngFor=\"let item of content?.listItem?.data; let i = index\">\r\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n <ng-container\r\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n class=\"logo-img d-flex justify-content-center align-items-center\"\r\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n [showIcon]=\"content?.display?.showIcon\">\r\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"slider-track w-full\"\r\n *ngIf=\"!content?.display?.showIcon && content?.display?.showText\"\r\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\r\n *ngFor=\"let item of content?.listItem?.data\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"slider-track w-full\"\r\n *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\r\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides d-flex align-items-center\" [simpoCorner]=\"styles?.corners\"\r\n *ngFor=\"let item of content?.listItem?.data\" [id]=\"data?.id\"\r\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\r\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n <ng-container\r\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n class=\"logo-img d-flex justify-content-center align-items-center\"\r\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n [showIcon]=\"content?.display?.showIcon\">\r\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n </div>\r\n </ng-container>\r\n <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div *ngIf=\"styles?.showCaseType==='Carousal'\">\r\n <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n\r\n <div class=\"w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\"\r\n [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [simpoBackground]=\"styles?.background\">\r\n <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\">\r\n <div class=\"mainsec content-side\" [id]=\"data?.id\"\r\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <ng-container *ngIf=\"edit || item.value\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"gap-2 d-md-flex mt-15\" [ngClass]=\"[\r\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n ]\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{\r\n 'fullwidth flex-1 inline-edit ': styles?.fullWidth,\r\n 'nofullwidth flex-1 inline-edit ': !styles?.fullWidth\r\n }\">\r\n <div class=\"masking\">\r\n\r\n <div class=\"slider animation \" [style.animationDuration]=\"animationDuration\"\r\n [style.animationDirection]=\"animationDirection\">\r\n <div class=\"slider-track2\"\r\n *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides2\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\r\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\"\r\n [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n <ng-container\r\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n class=\"logo-img d-flex justify-content-center align-items-center\"\r\n [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n [sectionId]=\"data?.id\" [showIcon]=\"content?.display?.showIcon\">\r\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"slider-track2\"\r\n *ngIf=\"content?.display?.showText && !content?.display?.showIcon\"\r\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\r\n *ngFor=\"let item of content?.listItem?.data\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"slider-track2 d-flex w-full\"\r\n *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\r\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides d-flex\" [simpoCorner]=\"styles?.corners\"\r\n *ngFor=\"let item of content?.listItem?.data\" [id]=\"data?.id\"\r\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'align-items-start': styles?.layout?.align === 'left', 'align-items-center': styles?.layout?.align === 'center', 'align-items-end': styles?.layout?.align === 'right' , 'flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\r\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\"\r\n [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n <ng-container\r\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n class=\"logo-img d-flex justify-content-center align-items-center\"\r\n [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n [sectionId]=\"data?.id\" [showIcon]=\"content?.display?.showIcon\">\r\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n </div>\r\n </ng-container>\r\n <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </div>\r\n</div>", styles: [".masking{mask:linear-gradient(90deg,transparent,white 5%,white 95%,transparent);overflow:hidden;width:100%}.sliderdad{width:100%;display:flex}@media (min-width: 860px){.nofullwidth{overflow:hidden}}.slider-track2{min-width:max-content;translate:none;rotate:none;scale:none;gap:1rem;justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex}.mainsec{gap:2rem;flex-direction:column;display:flex}.slider-track2.logotype-boxed{gap:1rem}.slider-track2.logotype-basic{gap:5rem}.slides2.logotype-boxed{padding:1.5rem 1.25rem;--tw-bg-opacity: .05;flex-shrink:0;width:auto;height:auto;display:flex;position:relative;box-shadow:#0000002e 0 2px 4px;margin:10px 5px}.slides2.logotype-basic{flex-shrink:0;width:auto;height:auto;display:flex;position:relative}.slides2.img{height:100%;max-width:100%;border-style:solid}@keyframes scrollLeft{0%{transform:translateZ(0)}to{transform:translate3d(-100%,0,0)}}@keyframes scrollRight{0%{transform:translate3d(-100%,0,0)}to{transform:translateZ(0)}}.animation{animation:scrollLeft linear infinite}.slider-track{justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex;gap:10px}.slider-track.logotype-basic{gap:5rem}.slider-track.logotype-boxed{gap:1rem}.slides.logotype-basic{flex-shrink:0;width:auto;min-height:5rem;height:auto;display:flex;position:relative}.slides.logotype-boxed{padding:1.5rem .625rem;--tw-bg-opacity: .05;box-shadow:#0000002e 0 2px 4px;width:auto;height:auto;display:flex;align-items:center;margin:10px 5px}.width-max{width:max-content;max-width:50%}.slides.texttype-boxed{padding:1.5rem .625rem;justify-content:center;width:auto;display:flex;position:relative;box-shadow:#0000002e 0 2px 4px;margin:10px 5px;align-items:center}.slides.texttype-boxed:hover{--tw-bg-opacity: .05;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.slides.img{border-style:solid;max-width:100%;height:100%}@media only screen and (max-width: 500px){.col-xxl-8{padding-left:0!important;padding-right:0!important}.mainsec{padding-right:2rem!important;padding-left:2rem!important}.col-7{min-width:50%;width:100%;max-width:100%}.col-5{width:100%}.slides img{width:88%}}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-20{margin-top:20px}.mb-20{margin-bottom:20px}.row{margin-left:0;margin-right:0}\n"] }]
|
|
11847
|
+
args: [{ selector: 'simpo-logo-showcase', standalone: true, imports: [SimpoButtonComponent, SimpoElementsModule, SanitizeHtmlPipe, TextEditorComponent, SimpoComponentModule, CommonModule, MatGridListModule, AnimationDirective, BackgroundDirective, ContentFitDirective, BorderDirective, BannerContentFitDirective, ButtonDirectiveDirective, ColumnDirectiveDirective, ContainerFitDirective, CornerDirective, simpoConetenAlignmentDirective, SimpoFooterLayoutDirective, HoverDirective, ImageDirectiveDirective, OverlayDirective, PositionLayoutDirectiveDirective, TextBackgroundDirectiveDirective, SpacingHorizontalDirective, ObjectPositionDirective, ImageEditorDirective, IconDirectiveDirective], template: "<div *ngIf=\"styles?.showCaseType==='Grid'\">\r\n <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\r\n [attr.style]=\"customClass\">\r\n <div class=\"py-3 w-100 \" [simpoBackground]=\"styles?.background\"\r\n [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row g-5 gridtext \" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n *ngIf=\"styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\">\r\n\r\n <div class=\"col-6 gridimg w-full mb-20 content-side\" [id]=\"data?.id\"\r\n [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <ng-container *ngIf=\"edit || item.value\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-wrap flex-1 width-max\">\r\n <div class=\"slider flex overflow-hidden w-full\">\r\n <div class=\"slider-track\" *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n <ng-container\r\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n class=\"logo-img d-flex justify-content-center align-items-center\"\r\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n [showIcon]=\"content?.display?.showIcon\">\r\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"slider-track w-full\"\r\n *ngIf=\"!content?.display?.showIcon && content?.display?.showText\"\r\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\n *ngFor=\"let item of content?.listItem?.data\"\r\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"slider-track w-full\"\r\n *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\r\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides d-flex\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n *ngFor=\"let item of content?.listItem?.data\"\r\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic','flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\r\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n <ng-container\r\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n class=\"logo-img d-flex justify-content-center align-items-center\"\r\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n [showIcon]=\"content?.display?.showIcon\">\r\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n </div>\r\n </ng-container>\r\n\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\r\n <div class=\"px-5 mb-20 content-side\" [id]=\"data?.id\"\r\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <ng-container *ngIf=\"edit || item.value\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-12 flex flex-wrap items-center w-full gap-2 justify-center\">\r\n <!-- flex flex-wrap items-center w-full gap-2 justify-center -->\r\n <div class=\"slider flex overflow-hidden w-full\">\r\n <div class=\"slider-track w-full\"\r\n *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\r\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\r\n *ngFor=\"let item of content?.listItem?.data; let i = index\">\r\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n <ng-container\r\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n class=\"logo-img d-flex justify-content-center align-items-center\"\r\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n [showIcon]=\"content?.display?.showIcon\">\r\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"slider-track w-full\"\r\n *ngIf=\"!content?.display?.showIcon && content?.display?.showText\"\r\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\r\n *ngFor=\"let item of content?.listItem?.data\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"slider-track w-full\"\r\n *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\r\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides d-flex align-items-center\" [simpoCorner]=\"styles?.corners\"\r\n *ngFor=\"let item of content?.listItem?.data\" [id]=\"data?.id\"\r\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\r\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n <ng-container\r\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n class=\"logo-img d-flex justify-content-center align-items-center\"\r\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n [showIcon]=\"content?.display?.showIcon\">\r\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n </div>\r\n </ng-container>\r\n <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div *ngIf=\"styles?.showCaseType==='Carousal'\">\r\n <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n\r\n <div class=\"w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\"\r\n [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [simpoBackground]=\"styles?.background\">\r\n <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\">\r\n <div class=\"mainsec content-side\" [id]=\"data?.id\"\r\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <ng-container *ngIf=\"edit || item.value\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"gap-2 d-md-flex mt-15\" [ngClass]=\"[\r\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n ]\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{\r\n 'fullwidth flex-1 inline-edit ': styles?.fullWidth,\r\n 'nofullwidth flex-1 inline-edit ': !styles?.fullWidth\r\n }\">\r\n <div class=\"masking\">\r\n\r\n <div class=\"slider animation \" [style.animationDuration]=\"animationDuration\"\r\n [style.animationDirection]=\"animationDirection\">\r\n <div class=\"slider-track2\"\r\n *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides2\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\r\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\"\r\n [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n <ng-container\r\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n class=\"logo-img d-flex justify-content-center align-items-center\"\r\n [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n [sectionId]=\"data?.id\" [showIcon]=\"content?.display?.showIcon\">\r\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"slider-track2\"\r\n *ngIf=\"content?.display?.showText && !content?.display?.showIcon\"\r\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\r\n *ngFor=\"let item of content?.listItem?.data\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"slider-track2 d-flex w-full\"\r\n *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\r\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n <div class=\"slides d-flex\" [simpoCorner]=\"styles?.corners\"\r\n *ngFor=\"let item of content?.listItem?.data\" [id]=\"data?.id\"\r\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'align-items-start': styles?.layout?.align === 'left', 'align-items-center': styles?.layout?.align === 'center', 'align-items-end': styles?.layout?.align === 'right' , 'flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\r\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\"\r\n [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n <ng-container\r\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n class=\"logo-img d-flex justify-content-center align-items-center\"\r\n [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n [sectionId]=\"data?.id\" [showIcon]=\"content?.display?.showIcon\">\r\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n </div>\r\n </ng-container>\r\n <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </div>\r\n</div>", styles: [".masking{mask:linear-gradient(90deg,transparent,white 5%,white 95%,transparent);overflow:hidden;width:100%}.sliderdad{width:100%;display:flex}@media (min-width: 860px){.nofullwidth{overflow:hidden}}.slider-track2{min-width:max-content;translate:none;rotate:none;scale:none;gap:1rem;justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex}.mainsec{gap:2rem;flex-direction:column;display:flex}.slider-track2.logotype-boxed{gap:1rem}.slider-track2.logotype-basic{gap:5rem}.slides2.logotype-boxed{padding:1.5rem 1.25rem;--tw-bg-opacity: .05;flex-shrink:0;width:auto;height:auto;display:flex;position:relative;box-shadow:#0000002e 0 2px 4px;margin:10px 5px}.slides2.logotype-basic{flex-shrink:0;width:auto;height:auto;display:flex;position:relative}.slides2.img{height:100%;max-width:100%;border-style:solid}@keyframes scrollLeft{0%{transform:translateZ(0)}to{transform:translate3d(-100%,0,0)}}@keyframes scrollRight{0%{transform:translate3d(-100%,0,0)}to{transform:translateZ(0)}}.animation{animation:scrollLeft linear infinite}.slider-track{justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex;gap:10px}.slider-track.logotype-basic{gap:5rem}.slider-track.logotype-boxed{gap:1rem}.slides.logotype-basic{flex-shrink:0;width:auto;min-height:5rem;height:auto;display:flex;position:relative}.slides.logotype-boxed{padding:1.5rem .625rem;--tw-bg-opacity: .05;box-shadow:#0000002e 0 2px 4px;width:auto;height:auto;display:flex;align-items:center;margin:10px 5px}.width-max{width:max-content;max-width:50%}.slides.texttype-boxed{padding:1.5rem .625rem;justify-content:center;width:auto;display:flex;position:relative;box-shadow:#0000002e 0 2px 4px;margin:10px 5px;align-items:center}.slides.texttype-boxed:hover{--tw-bg-opacity: .05;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.slides.img{border-style:solid;max-width:100%;height:100%}@media only screen and (max-width: 500px){.col-xxl-8{padding-left:0!important;padding-right:0!important}.mainsec{padding-right:2rem!important;padding-left:2rem!important}.col-7{min-width:50%;width:100%;max-width:100%}.col-5{width:100%}.slides img{width:88%}.gridtext{flex-direction:column!important}.gridtext .gridimg{width:100%!important}.gridtext .width-max{max-width:100%!important}}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-20{margin-top:20px}.mb-20{margin-bottom:20px}.row{margin-left:0;margin-right:0}\n"] }]
|
|
11849
11848
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
11850
11849
|
type: Input
|
|
11851
11850
|
}], index: [{
|
|
@@ -14545,7 +14544,7 @@ class HeaderSectionComponent {
|
|
|
14545
14544
|
this.router.navigate(['/login']);
|
|
14546
14545
|
}
|
|
14547
14546
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderSectionComponent, deps: [{ token: EventsService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: i1$1.MatDialog }, { token: StorageServiceService }, { token: RestService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14548
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeaderSectionComponent, isStandalone: true, selector: "simpo-header-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\r\n <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n [class.margin-bottom]=\"isHeaderSticky && isEcommerceWebsite && isMobile\">\r\n <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\r\n [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\r\n simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\r\n (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\r\n <ng-container *ngIf=\"style?.headline?.display\">\r\n <div>\r\n <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n </div>\r\n <!-- <div class=\"input-group mx-2 mb-2 w-98\" *ngIf=\"isMobile && isEcommerceWebsite\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">search</mat-icon>\r\n </div> -->\r\n <ng-container *ngIf=\"isEcommerceWebsite && !isMobile\">\r\n <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\r\n <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\r\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n </ng-container>\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n <div class=\"header1\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 95 : ''\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n <div class=\"header1\">\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </div>\r\n <div class=\"text-end\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n <div class=\"header1\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n <div class=\"header1\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container> </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </div>\r\n <div class=\"text-end\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\r\n (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" 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 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\r\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n <div class=\"d-flex gap-3\"\r\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\r\n [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | lowercase | titlecase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n <div class=\"d-flex\">\r\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\r\n (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\" [style.borderColor]=\"backgroundInfo?.accentColor\">\r\n <mat-icon>person_outline</mat-icon>\r\n Login\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn && !isMobile\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n </div>\r\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n <div class=\"icons\" (click)=\"goToHome()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Home</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"searchProducts()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Shop</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"goToWishlist()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Cart</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n </div> -->\r\n <div class=\"w-75 d-flex align-items-center\">\r\n <div class=\"input-group w-75 ml-2\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\r\n [style.color]=\"backgroundInfo?.accentColor\">\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : backgroundInfo.background?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\r\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"passbookAppStatus\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\r\n height=\"30\" version=\"1.1\">\r\n <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\r\n <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path\r\n d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\r\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\n <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\r\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\n <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path\r\n d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\r\n [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\n <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n </g>\r\n </svg>\r\n <div [style.color]=\"accentColor\">Schemes</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\">\r\n <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\r\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\r\n <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\r\n <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\r\n Pincode\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\r\n getPincode}}</div>\r\n\r\n <!-- (mouseleave)=\"showPincodeInput = false\" -->\r\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your PIN Code unlocks\r\n </div>\r\n <div class=\"sub-text text-center f-14 pincode-text\">\r\n Fastest delivery date, Try-at-Home availability,\r\n Nearest store and In-store design!\r\n </div>\r\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n [class.error-border]=\"pinError\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n class=\"w-75 p-0\">\r\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n </div>\r\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n Please enter a valid pincode\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\r\n </div>\r\n <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n {{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\r\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\r\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\r\n stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\r\n </div>\r\n <!-- (mouseleave)=\"showLogin = false\" -->\r\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your Account\r\n </div>\r\n <div class=\"sub-text text-center f-14\">\r\n Access account & manage your orders.\r\n </div>\r\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">Sign Up</div>\r\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n <!-- <div> -->\r\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n <!-- </div> -->\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | uppercase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\r\n <div class=\"offcanvas-header\">\r\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\r\n <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n </div>\r\n <div class=\"offcanvas-body\">\r\n <div class=\"pages\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"offcanvas-footer\">\r\n <div class=\"canvas-button\">\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-16 py-1\"\r\n (click)=\"showSearchBarMobile = !showSearchBarMobile\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n\r\n\r\n <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\">\r\n\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [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-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n <div class=\"categories-header d-flex gap-3 py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\" [style.background]=\"data?.styles?.headline?.color\">\r\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\r\n (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\">\r\n {{ele?.categoryName | titlecase}}\r\n </div>\r\n <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\r\n *ngIf=\"collectionList?.collections?.length > 0\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\r\n [simpoColor]=\"data?.styles?.headline?.color\">\r\n Collections\r\n </div>\r\n </div>\r\n <!-- (mouseleave)=\"showList = false\" -->\r\n <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\r\n <div class=\"row w-100 h-100\">\r\n <div class=\"col-7 row\">\r\n <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\r\n <div class=\"list-header mb-3\">By Price</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\r\n <div class=\"each-price cursor-pointer\"\r\n (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\r\n {{price | titlecase}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-4 h-100 overflow-scroll\"\r\n *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\r\n <div class=\"list-header mb-3\">By Style</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\r\n <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\r\n |\r\n titlecase}}</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-4\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"list-header mb-3\">By Metal & Stone</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let collection of byMetalAndStone\">\r\n <div class=\"d-flex gap-2 align-items-center\">\r\n <div style=\"width: 15px;height: 20px;\">\r\n <img [src]=\"collection.imageUrl\" alt=\"\" class=\"w-100\">\r\n </div>\r\n <div class=\"each-price cursor-pointer\">{{collection.name\r\n |\r\n titlecase}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\r\n <ng-container *ngFor=\"let image of selectedCategory?.imageUrls | slice:0:2; let i = index\">\r\n <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\r\n <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\" (click)=\"filterByCategory()\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- (mouseleave)=\"showCollections = false\" -->\r\n <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\r\n <div class=\"row w-100 h-100\">\r\n <div class=\"col-7 row\">\r\n <ng-container *ngFor=\"let collection of collectionList?.collections\">\r\n <div class=\"collection row col-3 align-items-center\"\r\n (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\r\n <div class=\"col-imag col-4\">\r\n <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\r\n </div>\r\n <div class=\"col-8 text-overflow\">\r\n {{collection?.collectionName | titlecase}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls\">\r\n <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls) | slice:0:2; let i = index\">\r\n <div class=\"image-container h-100 col-6 position-relative\" *ngIf=\"image\"\r\n (click)=\"applyFilterToList(image, 'collections')\">\r\n <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\r\n <div class=\"text-center p-2 btm-col-name position-absolute\"\r\n [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileCategoryHeader>\r\n <div class=\"categories-header d-flex gap-3 py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n <div class=\"cat-img d-flex justify-content-center align-items-center\">\r\n <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\r\n </div>\r\n <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{height:44px;gap:26px!important}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.mob-form-control{position:absolute;right:10px;width:95%;top:85px;border-radius:12px!important}.categories-header{height:unset!important;margin-top:var(--margin-top)}.w-98{width:98%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:1000000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:8px}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:-15px;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i4.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i4.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId", "accentColor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky", "categoryHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: MovingTextComponent, selector: "simpo-moving-text", inputs: ["data", "edit", "delete", "customClass", "index"] }] }); }
|
|
14547
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeaderSectionComponent, isStandalone: true, selector: "simpo-header-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\r\n <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n [class.margin-bottom]=\"isHeaderSticky && isEcommerceWebsite && isMobile\">\r\n <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\r\n [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\r\n simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\r\n (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\r\n <ng-container *ngIf=\"style?.headline?.display\">\r\n <div>\r\n <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n </div>\r\n <!-- <div class=\"input-group mx-2 mb-2 w-98\" *ngIf=\"isMobile && isEcommerceWebsite\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">search</mat-icon>\r\n </div> -->\r\n <ng-container *ngIf=\"isEcommerceWebsite && !isMobile\">\r\n <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\r\n <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\r\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n </ng-container>\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n <div class=\"header1\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 95 : ''\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n <div class=\"header1\">\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"text-end\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n <div class=\"header1\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n <div class=\"header1\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container> </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"text-end\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\r\n (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" 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 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\r\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n <div class=\"d-flex gap-3\"\r\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\r\n [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | lowercase | titlecase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n <div class=\"d-flex\">\r\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\r\n (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\" [style.borderColor]=\"backgroundInfo?.accentColor\">\r\n <mat-icon>person_outline</mat-icon>\r\n Login\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn && !isMobile\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n </div>\r\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n <div class=\"icons\" (click)=\"goToHome()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Home</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"searchProducts()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Shop</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"goToWishlist()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Cart</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n </div> -->\r\n <div class=\"w-75 d-flex align-items-center\">\r\n <div class=\"input-group w-75 ml-2\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\r\n [style.color]=\"backgroundInfo?.accentColor\">\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : backgroundInfo.background?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\r\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"schemeAvailable\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\r\n height=\"30\" version=\"1.1\">\r\n <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\r\n <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path\r\n d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\r\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\n <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\r\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\n <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path\r\n d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\r\n [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\n <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n </g>\r\n </svg>\r\n <div [style.color]=\"accentColor\">Schemes</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\">\r\n <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\r\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\r\n <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\r\n <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\r\n Pincode\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\r\n getPincode}}</div>\r\n\r\n <!-- (mouseleave)=\"showPincodeInput = false\" -->\r\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your PIN Code unlocks\r\n </div>\r\n <div class=\"sub-text text-center f-14 pincode-text\">\r\n Fastest delivery date, Try-at-Home availability,\r\n Nearest store and In-store design!\r\n </div>\r\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n [class.error-border]=\"pinError\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n class=\"w-75 p-0\">\r\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n </div>\r\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n Please enter a valid pincode\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\r\n </div>\r\n <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n {{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\r\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\r\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\r\n stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\r\n </div>\r\n <!-- (mouseleave)=\"showLogin = false\" -->\r\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your Account\r\n </div>\r\n <div class=\"sub-text text-center f-14\">\r\n Access account & manage your orders.\r\n </div>\r\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">Sign Up</div>\r\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n <!-- <div> -->\r\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n <!-- </div> -->\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | uppercase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\r\n <div class=\"offcanvas-header\">\r\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\r\n <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n </div>\r\n <div class=\"offcanvas-body\">\r\n <div class=\"pages\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"offcanvas-footer\">\r\n <div class=\"canvas-button\">\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-16 py-1\"\r\n (click)=\"showSearchBarMobile = !showSearchBarMobile\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n\r\n\r\n <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\">\r\n\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [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-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n <div class=\"categories-header d-flex gap-3 py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\" [style.background]=\"data?.styles?.headline?.color\">\r\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\r\n (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\">\r\n {{ele?.categoryName | titlecase}}\r\n </div>\r\n <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\r\n *ngIf=\"collectionList?.collections?.length > 0\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\r\n [simpoColor]=\"data?.styles?.headline?.color\">\r\n Collections\r\n </div>\r\n </div>\r\n <!-- (mouseleave)=\"showList = false\" -->\r\n <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\r\n <div class=\"row w-100 h-100\">\r\n <div class=\"col-7 row\">\r\n <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\r\n <div class=\"list-header mb-3\">By Price</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\r\n <div class=\"each-price cursor-pointer\"\r\n (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\r\n {{price | titlecase}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-4 h-100 overflow-scroll\"\r\n *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\r\n <div class=\"list-header mb-3\">By Style</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\r\n <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\r\n |\r\n titlecase}}</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-4\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"list-header mb-3\">By Metal & Stone</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let collection of byMetalAndStone\">\r\n <div class=\"d-flex gap-2 align-items-center\">\r\n <div style=\"width: 15px;height: 20px;\">\r\n <img [src]=\"collection.imageUrl\" alt=\"\" class=\"w-100\">\r\n </div>\r\n <div class=\"each-price cursor-pointer\">{{collection.name\r\n |\r\n titlecase}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\r\n <ng-container *ngFor=\"let image of selectedCategory?.imageUrls | slice:0:2; let i = index\">\r\n <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\r\n <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\" (click)=\"filterByCategory()\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- (mouseleave)=\"showCollections = false\" -->\r\n <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\r\n <div class=\"row w-100 h-100\">\r\n <div class=\"col-7 row\">\r\n <ng-container *ngFor=\"let collection of collectionList?.collections\">\r\n <div class=\"collection row col-3 align-items-center\"\r\n (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\r\n <div class=\"col-imag col-4\">\r\n <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\r\n </div>\r\n <div class=\"col-8 text-overflow\">\r\n {{collection?.collectionName | titlecase}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls\">\r\n <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls) | slice:0:2; let i = index\">\r\n <div class=\"image-container h-100 col-6 position-relative\" *ngIf=\"image\"\r\n (click)=\"applyFilterToList(image, 'collections')\">\r\n <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\r\n <div class=\"text-center p-2 btm-col-name position-absolute\"\r\n [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileCategoryHeader>\r\n <div class=\"categories-header d-flex gap-3 py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n <div class=\"cat-img d-flex justify-content-center align-items-center\">\r\n <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\r\n </div>\r\n <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{height:44px;gap:26px!important}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.mob-form-control{position:absolute;right:10px;width:95%;top:85px;border-radius:12px!important}.categories-header{height:unset!important;margin-top:var(--margin-top)}.w-98{width:98%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:1000000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:8px}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:-15px;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i4.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i4.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId", "accentColor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky", "categoryHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: MovingTextComponent, selector: "simpo-moving-text", inputs: ["data", "edit", "delete", "customClass", "index"] }] }); }
|
|
14549
14548
|
}
|
|
14550
14549
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderSectionComponent, decorators: [{
|
|
14551
14550
|
type: Component,
|
|
@@ -14583,7 +14582,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
14583
14582
|
SpacingHorizontalDirective,
|
|
14584
14583
|
MovingTextComponent,
|
|
14585
14584
|
ContentFitDirective,
|
|
14586
|
-
], template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\r\n <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n [class.margin-bottom]=\"isHeaderSticky && isEcommerceWebsite && isMobile\">\r\n <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\r\n [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\r\n simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\r\n (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\r\n <ng-container *ngIf=\"style?.headline?.display\">\r\n <div>\r\n <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n </div>\r\n <!-- <div class=\"input-group mx-2 mb-2 w-98\" *ngIf=\"isMobile && isEcommerceWebsite\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">search</mat-icon>\r\n </div> -->\r\n <ng-container *ngIf=\"isEcommerceWebsite && !isMobile\">\r\n <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\r\n <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\r\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n </ng-container>\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n <div class=\"header1\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 95 : ''\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n <div class=\"header1\">\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </div>\r\n <div class=\"text-end\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n <div class=\"header1\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n <div class=\"header1\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container> </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </div>\r\n <div class=\"text-end\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\r\n (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" 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 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\r\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n <div class=\"d-flex gap-3\"\r\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\r\n [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | lowercase | titlecase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n <div class=\"d-flex\">\r\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\r\n (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\" [style.borderColor]=\"backgroundInfo?.accentColor\">\r\n <mat-icon>person_outline</mat-icon>\r\n Login\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn && !isMobile\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n </div>\r\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n <div class=\"icons\" (click)=\"goToHome()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Home</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"searchProducts()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Shop</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"goToWishlist()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Cart</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n </div> -->\r\n <div class=\"w-75 d-flex align-items-center\">\r\n <div class=\"input-group w-75 ml-2\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\r\n [style.color]=\"backgroundInfo?.accentColor\">\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : backgroundInfo.background?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\r\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"passbookAppStatus\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\r\n height=\"30\" version=\"1.1\">\r\n <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\r\n <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path\r\n d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\r\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\n <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\r\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\n <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path\r\n d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\r\n [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\n <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n </g>\r\n </svg>\r\n <div [style.color]=\"accentColor\">Schemes</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\">\r\n <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\r\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\r\n <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\r\n <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\r\n Pincode\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\r\n getPincode}}</div>\r\n\r\n <!-- (mouseleave)=\"showPincodeInput = false\" -->\r\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your PIN Code unlocks\r\n </div>\r\n <div class=\"sub-text text-center f-14 pincode-text\">\r\n Fastest delivery date, Try-at-Home availability,\r\n Nearest store and In-store design!\r\n </div>\r\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n [class.error-border]=\"pinError\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n class=\"w-75 p-0\">\r\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n </div>\r\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n Please enter a valid pincode\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\r\n </div>\r\n <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n {{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\r\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\r\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\r\n stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\r\n </div>\r\n <!-- (mouseleave)=\"showLogin = false\" -->\r\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your Account\r\n </div>\r\n <div class=\"sub-text text-center f-14\">\r\n Access account & manage your orders.\r\n </div>\r\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">Sign Up</div>\r\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n <!-- <div> -->\r\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n <!-- </div> -->\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | uppercase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\r\n <div class=\"offcanvas-header\">\r\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\r\n <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n </div>\r\n <div class=\"offcanvas-body\">\r\n <div class=\"pages\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"offcanvas-footer\">\r\n <div class=\"canvas-button\">\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-16 py-1\"\r\n (click)=\"showSearchBarMobile = !showSearchBarMobile\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n\r\n\r\n <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\">\r\n\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [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-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n <div class=\"categories-header d-flex gap-3 py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\" [style.background]=\"data?.styles?.headline?.color\">\r\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\r\n (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\">\r\n {{ele?.categoryName | titlecase}}\r\n </div>\r\n <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\r\n *ngIf=\"collectionList?.collections?.length > 0\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\r\n [simpoColor]=\"data?.styles?.headline?.color\">\r\n Collections\r\n </div>\r\n </div>\r\n <!-- (mouseleave)=\"showList = false\" -->\r\n <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\r\n <div class=\"row w-100 h-100\">\r\n <div class=\"col-7 row\">\r\n <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\r\n <div class=\"list-header mb-3\">By Price</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\r\n <div class=\"each-price cursor-pointer\"\r\n (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\r\n {{price | titlecase}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-4 h-100 overflow-scroll\"\r\n *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\r\n <div class=\"list-header mb-3\">By Style</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\r\n <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\r\n |\r\n titlecase}}</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-4\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"list-header mb-3\">By Metal & Stone</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let collection of byMetalAndStone\">\r\n <div class=\"d-flex gap-2 align-items-center\">\r\n <div style=\"width: 15px;height: 20px;\">\r\n <img [src]=\"collection.imageUrl\" alt=\"\" class=\"w-100\">\r\n </div>\r\n <div class=\"each-price cursor-pointer\">{{collection.name\r\n |\r\n titlecase}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\r\n <ng-container *ngFor=\"let image of selectedCategory?.imageUrls | slice:0:2; let i = index\">\r\n <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\r\n <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\" (click)=\"filterByCategory()\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- (mouseleave)=\"showCollections = false\" -->\r\n <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\r\n <div class=\"row w-100 h-100\">\r\n <div class=\"col-7 row\">\r\n <ng-container *ngFor=\"let collection of collectionList?.collections\">\r\n <div class=\"collection row col-3 align-items-center\"\r\n (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\r\n <div class=\"col-imag col-4\">\r\n <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\r\n </div>\r\n <div class=\"col-8 text-overflow\">\r\n {{collection?.collectionName | titlecase}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls\">\r\n <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls) | slice:0:2; let i = index\">\r\n <div class=\"image-container h-100 col-6 position-relative\" *ngIf=\"image\"\r\n (click)=\"applyFilterToList(image, 'collections')\">\r\n <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\r\n <div class=\"text-center p-2 btm-col-name position-absolute\"\r\n [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileCategoryHeader>\r\n <div class=\"categories-header d-flex gap-3 py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n <div class=\"cat-img d-flex justify-content-center align-items-center\">\r\n <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\r\n </div>\r\n <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{height:44px;gap:26px!important}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.mob-form-control{position:absolute;right:10px;width:95%;top:85px;border-radius:12px!important}.categories-header{height:unset!important;margin-top:var(--margin-top)}.w-98{width:98%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:1000000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:8px}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:-15px;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}\n"] }]
|
|
14585
|
+
], template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\r\n <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n [class.margin-bottom]=\"isHeaderSticky && isEcommerceWebsite && isMobile\">\r\n <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\r\n [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\r\n simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\r\n (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\r\n <ng-container *ngIf=\"style?.headline?.display\">\r\n <div>\r\n <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n </div>\r\n <!-- <div class=\"input-group mx-2 mb-2 w-98\" *ngIf=\"isMobile && isEcommerceWebsite\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">search</mat-icon>\r\n </div> -->\r\n <ng-container *ngIf=\"isEcommerceWebsite && !isMobile\">\r\n <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\r\n <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\r\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n </ng-container>\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n <div class=\"header1\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 95 : ''\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n <div class=\"header1\">\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"text-end\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n <div class=\"header1\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n <div class=\"header1\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container> </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"text-end\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\r\n (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" 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 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\r\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n <div class=\"d-flex gap-3\"\r\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\r\n [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | lowercase | titlecase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n <div class=\"d-flex\">\r\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\r\n (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\" [style.borderColor]=\"backgroundInfo?.accentColor\">\r\n <mat-icon>person_outline</mat-icon>\r\n Login\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn && !isMobile\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n </div>\r\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n <div class=\"icons\" (click)=\"goToHome()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Home</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"searchProducts()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Shop</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"goToWishlist()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Cart</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n </div> -->\r\n <div class=\"w-75 d-flex align-items-center\">\r\n <div class=\"input-group w-75 ml-2\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\r\n [style.color]=\"backgroundInfo?.accentColor\">\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : backgroundInfo.background?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\r\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"schemeAvailable\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\r\n height=\"30\" version=\"1.1\">\r\n <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\r\n <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path\r\n d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\r\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\n <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\r\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\n <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path\r\n d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\r\n [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\n <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n </g>\r\n </svg>\r\n <div [style.color]=\"accentColor\">Schemes</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\">\r\n <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\r\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\r\n <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\r\n <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\r\n Pincode\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\r\n getPincode}}</div>\r\n\r\n <!-- (mouseleave)=\"showPincodeInput = false\" -->\r\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your PIN Code unlocks\r\n </div>\r\n <div class=\"sub-text text-center f-14 pincode-text\">\r\n Fastest delivery date, Try-at-Home availability,\r\n Nearest store and In-store design!\r\n </div>\r\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n [class.error-border]=\"pinError\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n class=\"w-75 p-0\">\r\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n </div>\r\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n Please enter a valid pincode\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\r\n </div>\r\n <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n {{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\r\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\r\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\r\n stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\r\n </div>\r\n <!-- (mouseleave)=\"showLogin = false\" -->\r\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your Account\r\n </div>\r\n <div class=\"sub-text text-center f-14\">\r\n Access account & manage your orders.\r\n </div>\r\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">Sign Up</div>\r\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n <!-- <div> -->\r\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n <!-- </div> -->\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | uppercase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\r\n <div class=\"offcanvas-header\">\r\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\r\n <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n </div>\r\n <div class=\"offcanvas-body\">\r\n <div class=\"pages\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"offcanvas-footer\">\r\n <div class=\"canvas-button\">\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-16 py-1\"\r\n (click)=\"showSearchBarMobile = !showSearchBarMobile\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n\r\n\r\n <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\">\r\n\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [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-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n <div class=\"categories-header d-flex gap-3 py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\" [style.background]=\"data?.styles?.headline?.color\">\r\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\r\n (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\">\r\n {{ele?.categoryName | titlecase}}\r\n </div>\r\n <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\r\n *ngIf=\"collectionList?.collections?.length > 0\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\r\n [simpoColor]=\"data?.styles?.headline?.color\">\r\n Collections\r\n </div>\r\n </div>\r\n <!-- (mouseleave)=\"showList = false\" -->\r\n <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\r\n <div class=\"row w-100 h-100\">\r\n <div class=\"col-7 row\">\r\n <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\r\n <div class=\"list-header mb-3\">By Price</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\r\n <div class=\"each-price cursor-pointer\"\r\n (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\r\n {{price | titlecase}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-4 h-100 overflow-scroll\"\r\n *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\r\n <div class=\"list-header mb-3\">By Style</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\r\n <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\r\n |\r\n titlecase}}</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-4\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"list-header mb-3\">By Metal & Stone</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let collection of byMetalAndStone\">\r\n <div class=\"d-flex gap-2 align-items-center\">\r\n <div style=\"width: 15px;height: 20px;\">\r\n <img [src]=\"collection.imageUrl\" alt=\"\" class=\"w-100\">\r\n </div>\r\n <div class=\"each-price cursor-pointer\">{{collection.name\r\n |\r\n titlecase}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\r\n <ng-container *ngFor=\"let image of selectedCategory?.imageUrls | slice:0:2; let i = index\">\r\n <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\r\n <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\" (click)=\"filterByCategory()\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- (mouseleave)=\"showCollections = false\" -->\r\n <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\r\n <div class=\"row w-100 h-100\">\r\n <div class=\"col-7 row\">\r\n <ng-container *ngFor=\"let collection of collectionList?.collections\">\r\n <div class=\"collection row col-3 align-items-center\"\r\n (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\r\n <div class=\"col-imag col-4\">\r\n <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\r\n </div>\r\n <div class=\"col-8 text-overflow\">\r\n {{collection?.collectionName | titlecase}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls\">\r\n <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls) | slice:0:2; let i = index\">\r\n <div class=\"image-container h-100 col-6 position-relative\" *ngIf=\"image\"\r\n (click)=\"applyFilterToList(image, 'collections')\">\r\n <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\r\n <div class=\"text-center p-2 btm-col-name position-absolute\"\r\n [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileCategoryHeader>\r\n <div class=\"categories-header d-flex gap-3 py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n <div class=\"cat-img d-flex justify-content-center align-items-center\">\r\n <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\r\n </div>\r\n <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{height:44px;gap:26px!important}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.mob-form-control{position:absolute;right:10px;width:95%;top:85px;border-radius:12px!important}.categories-header{height:unset!important;margin-top:var(--margin-top)}.w-98{width:98%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:1000000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:8px}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:-15px;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}\n"] }]
|
|
14587
14586
|
}], ctorParameters: () => [{ type: EventsService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i1$1.MatDialog }, { type: StorageServiceService }, { type: RestService }, { type: EventsService }], propDecorators: { data: [{
|
|
14588
14587
|
type: Input
|
|
14589
14588
|
}], nextComponent: [{
|
|
@@ -14657,7 +14656,7 @@ class NewTestimonialsComponent extends BaseSection {
|
|
|
14657
14656
|
this.screenWidth = window.innerWidth;
|
|
14658
14657
|
}
|
|
14659
14658
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewTestimonialsComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14660
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NewTestimonialsComponent, isStandalone: true, selector: "simpo-new-testimonials", inputs: { data: "data", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor", index: "index" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\">\r\n <div class=\"parent-div\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\">\r\n <div class=\"header\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <ng-container *ngIf=\"data?.action?.display\">\r\n <div *ngFor=\"let button of data?.action?.buttons\" class=\"mt-4\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [edit]=\"edit\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </ng-container>\r\n <div class=\"list-items mt-3 d-flex gap-3\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [simpoAnimation]=\"styles?.animation\" [class.flex-column]=\"screenWidth < 475\">\r\n <div class=\"image-container w-35 height-50\" [class.w-100]=\"screenWidth < 475\" [class.h-30]=\"screenWidth < 475\">\r\n <ng-container>\r\n <ng-container *ngIf=\"getImageType() == 'Image'\">\r\n <img [src]=\"getImageUrl()\" alt=\"Selected Image\" class=\"w-100 h-100\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n [simpoCorner]=\"styles?.corners\">\r\n </ng-container>\r\n <ng-container *ngIf=\"getImageType() == 'Video'\">\r\n <video [src]=\"getImageUrl()\" class=\"w-100 h-100\" [simpoCorner]=\"styles?.corners\"\r\n controls></video>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <div id=\"carouselExampleIndicators\" class=\"carousel slide w-65 d-flex flex-column\"\r\n [simpoContentAlignment]=\"styles?.contentAlignment\" [class.w-100]=\"screenWidth < 475\">\r\n <div class=\"carousel-inner mb-4\" [class.mb-6]=\"screenWidth < 475\">\r\n <ng-container *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <div class=\"carousel-item h-100\" [ngClass]=\"{'active': i === 0}\">\r\n <div class=\"quote-image mb-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"31\" viewBox=\"0 0 36 31\"\r\n fill=\"none\">\r\n <path\r\n d=\"M35.3998 3.29993C35.5998 3.09993 35.7998 2.69993 35.5998 2.29993C35.3998 2.09993 34.9998 1.69993 34.5998 0.899925C33.9998 0.699925 33.5998 0.699926 32.9998 1.09993C25.3998 5.89993 21.1998 11.4999 20.3998 17.8999C18.9998 27.8999 27.9998 32.6999 32.5998 28.2999C37.1998 23.8999 34.3998 18.2999 31.1998 16.6999C27.9998 15.0999 25.9998 15.6999 26.1998 13.6999C26.5998 11.6999 31.1998 6.09993 35.3998 3.29993ZM14.7998 1.09993C14.1998 0.699926 13.5998 0.699926 13.1998 1.09993C5.59983 5.89993 1.39983 11.4999 0.599832 18.0999C-0.800168 28.0999 8.19983 32.8999 12.7998 28.4999C17.3998 24.0999 14.5998 18.4999 11.3998 16.8999C7.99983 15.4999 5.99983 16.0999 6.39983 13.8999C6.79983 11.8999 11.3998 6.29993 15.5998 3.49993C15.7998 3.29993 15.9998 2.89993 15.7998 2.49993C15.5998 2.29993 15.1998 1.89993 14.7998 1.09993Z\"\r\n [attr.fill]=\"styles?.background?.accentColor\" />\r\n </svg>\r\n </div>\r\n <div class=\"item mb-3\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"prev-next d-flex gap-2\">\r\n <div class=\"carousel-control-prev\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n data-bs-slide=\"prev\" [style.backgroundColor]=\"styles?.background?.accentColor\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"carousel-control-next\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n data-bs-slide=\"next\" [style.backgroundColor]=\"styles?.background?.accentColor\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-container{position:relative;height:auto}.carousel-control-prev,.carousel-control-next{position:unset!important;width:4%;border-radius:50%!important;height:4vh}.w-35{width:35%!important}.w-65{width:65%!important}.prev-next{position:absolute;bottom:0;left:0;width:100%}.overflow-visible{overflow:visible!important}@media screen and (max-width: 475px){.carousel-control-prev,.carousel-control-next{width:
|
|
14659
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NewTestimonialsComponent, isStandalone: true, selector: "simpo-new-testimonials", inputs: { data: "data", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor", index: "index" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\">\r\n <div class=\"parent-div\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\">\r\n <div class=\"header\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <ng-container *ngIf=\"data?.action?.display\">\r\n <div *ngFor=\"let button of data?.action?.buttons\" class=\"mt-4\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [edit]=\"edit\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </ng-container>\r\n <div class=\"list-items mt-3 d-flex gap-3\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [simpoAnimation]=\"styles?.animation\" [class.flex-column]=\"screenWidth < 475\">\r\n <div class=\"image-container w-35 height-50\" [class.w-100]=\"screenWidth < 475\" [class.h-30]=\"screenWidth < 475\">\r\n <ng-container>\r\n <ng-container *ngIf=\"getImageType() == 'Image'\">\r\n <img [src]=\"getImageUrl()\" alt=\"Selected Image\" class=\"w-100 h-100\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n [simpoCorner]=\"styles?.corners\">\r\n </ng-container>\r\n <ng-container *ngIf=\"getImageType() == 'Video'\">\r\n <video [src]=\"getImageUrl()\" class=\"w-100 h-100\" [simpoCorner]=\"styles?.corners\"\r\n controls></video>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <div id=\"carouselExampleIndicators\" class=\"carousel slide w-65 d-flex flex-column\"\r\n [simpoContentAlignment]=\"styles?.contentAlignment\" [class.w-100]=\"screenWidth < 475\">\r\n <div class=\"carousel-inner mb-4\" [class.mb-6]=\"screenWidth < 475\">\r\n <ng-container *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <div class=\"carousel-item h-100\" [ngClass]=\"{'active': i === 0}\">\r\n <div class=\"quote-image mb-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"31\" viewBox=\"0 0 36 31\"\r\n fill=\"none\">\r\n <path\r\n d=\"M35.3998 3.29993C35.5998 3.09993 35.7998 2.69993 35.5998 2.29993C35.3998 2.09993 34.9998 1.69993 34.5998 0.899925C33.9998 0.699925 33.5998 0.699926 32.9998 1.09993C25.3998 5.89993 21.1998 11.4999 20.3998 17.8999C18.9998 27.8999 27.9998 32.6999 32.5998 28.2999C37.1998 23.8999 34.3998 18.2999 31.1998 16.6999C27.9998 15.0999 25.9998 15.6999 26.1998 13.6999C26.5998 11.6999 31.1998 6.09993 35.3998 3.29993ZM14.7998 1.09993C14.1998 0.699926 13.5998 0.699926 13.1998 1.09993C5.59983 5.89993 1.39983 11.4999 0.599832 18.0999C-0.800168 28.0999 8.19983 32.8999 12.7998 28.4999C17.3998 24.0999 14.5998 18.4999 11.3998 16.8999C7.99983 15.4999 5.99983 16.0999 6.39983 13.8999C6.79983 11.8999 11.3998 6.29993 15.5998 3.49993C15.7998 3.29993 15.9998 2.89993 15.7998 2.49993C15.5998 2.29993 15.1998 1.89993 14.7998 1.09993Z\"\r\n [attr.fill]=\"styles?.background?.accentColor\" />\r\n </svg>\r\n </div>\r\n <div class=\"item mb-3\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"prev-next d-flex gap-2\">\r\n <div class=\"carousel-control-prev\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n data-bs-slide=\"prev\" [style.backgroundColor]=\"styles?.background?.accentColor\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"carousel-control-next\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n data-bs-slide=\"next\" [style.backgroundColor]=\"styles?.background?.accentColor\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-container{position:relative;height:auto}.carousel-control-prev,.carousel-control-next{position:unset!important;width:4%;border-radius:50%!important;height:4vh}.w-35{width:35%!important}.w-65{width:65%!important}.prev-next{position:absolute;bottom:0;left:0;width:100%}.overflow-visible{overflow:visible!important}@media screen and (max-width: 475px){.carousel-control-prev,.carousel-control-next{width:18%!important}.list-items{flex-direction:column!important}.h-30{height:30vh!important}}.height-50{height:50vh}.w-100{width:100%!important}.mb-6{margin-bottom:2.5rem!important}.flex-column{flex-direction:column!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type:
|
|
14661
14660
|
// directives
|
|
14662
14661
|
SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "component", type:
|
|
14663
14662
|
// components
|
|
@@ -14693,7 +14692,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
14693
14692
|
TextEditorComponent,
|
|
14694
14693
|
SimpoButtonComponent,
|
|
14695
14694
|
ImageEditorDirective,
|
|
14696
|
-
], template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\">\r\n <div class=\"parent-div\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\">\r\n <div class=\"header\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <ng-container *ngIf=\"data?.action?.display\">\r\n <div *ngFor=\"let button of data?.action?.buttons\" class=\"mt-4\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [edit]=\"edit\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </ng-container>\r\n <div class=\"list-items mt-3 d-flex gap-3\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [simpoAnimation]=\"styles?.animation\" [class.flex-column]=\"screenWidth < 475\">\r\n <div class=\"image-container w-35 height-50\" [class.w-100]=\"screenWidth < 475\" [class.h-30]=\"screenWidth < 475\">\r\n <ng-container>\r\n <ng-container *ngIf=\"getImageType() == 'Image'\">\r\n <img [src]=\"getImageUrl()\" alt=\"Selected Image\" class=\"w-100 h-100\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n [simpoCorner]=\"styles?.corners\">\r\n </ng-container>\r\n <ng-container *ngIf=\"getImageType() == 'Video'\">\r\n <video [src]=\"getImageUrl()\" class=\"w-100 h-100\" [simpoCorner]=\"styles?.corners\"\r\n controls></video>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <div id=\"carouselExampleIndicators\" class=\"carousel slide w-65 d-flex flex-column\"\r\n [simpoContentAlignment]=\"styles?.contentAlignment\" [class.w-100]=\"screenWidth < 475\">\r\n <div class=\"carousel-inner mb-4\" [class.mb-6]=\"screenWidth < 475\">\r\n <ng-container *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <div class=\"carousel-item h-100\" [ngClass]=\"{'active': i === 0}\">\r\n <div class=\"quote-image mb-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"31\" viewBox=\"0 0 36 31\"\r\n fill=\"none\">\r\n <path\r\n d=\"M35.3998 3.29993C35.5998 3.09993 35.7998 2.69993 35.5998 2.29993C35.3998 2.09993 34.9998 1.69993 34.5998 0.899925C33.9998 0.699925 33.5998 0.699926 32.9998 1.09993C25.3998 5.89993 21.1998 11.4999 20.3998 17.8999C18.9998 27.8999 27.9998 32.6999 32.5998 28.2999C37.1998 23.8999 34.3998 18.2999 31.1998 16.6999C27.9998 15.0999 25.9998 15.6999 26.1998 13.6999C26.5998 11.6999 31.1998 6.09993 35.3998 3.29993ZM14.7998 1.09993C14.1998 0.699926 13.5998 0.699926 13.1998 1.09993C5.59983 5.89993 1.39983 11.4999 0.599832 18.0999C-0.800168 28.0999 8.19983 32.8999 12.7998 28.4999C17.3998 24.0999 14.5998 18.4999 11.3998 16.8999C7.99983 15.4999 5.99983 16.0999 6.39983 13.8999C6.79983 11.8999 11.3998 6.29993 15.5998 3.49993C15.7998 3.29993 15.9998 2.89993 15.7998 2.49993C15.5998 2.29993 15.1998 1.89993 14.7998 1.09993Z\"\r\n [attr.fill]=\"styles?.background?.accentColor\" />\r\n </svg>\r\n </div>\r\n <div class=\"item mb-3\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"prev-next d-flex gap-2\">\r\n <div class=\"carousel-control-prev\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n data-bs-slide=\"prev\" [style.backgroundColor]=\"styles?.background?.accentColor\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"carousel-control-next\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n data-bs-slide=\"next\" [style.backgroundColor]=\"styles?.background?.accentColor\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-container{position:relative;height:auto}.carousel-control-prev,.carousel-control-next{position:unset!important;width:4%;border-radius:50%!important;height:4vh}.w-35{width:35%!important}.w-65{width:65%!important}.prev-next{position:absolute;bottom:0;left:0;width:100%}.overflow-visible{overflow:visible!important}@media screen and (max-width: 475px){.carousel-control-prev,.carousel-control-next{width:
|
|
14695
|
+
], template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\">\r\n <div class=\"parent-div\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\">\r\n <div class=\"header\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <ng-container *ngIf=\"data?.action?.display\">\r\n <div *ngFor=\"let button of data?.action?.buttons\" class=\"mt-4\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [edit]=\"edit\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </ng-container>\r\n <div class=\"list-items mt-3 d-flex gap-3\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [simpoAnimation]=\"styles?.animation\" [class.flex-column]=\"screenWidth < 475\">\r\n <div class=\"image-container w-35 height-50\" [class.w-100]=\"screenWidth < 475\" [class.h-30]=\"screenWidth < 475\">\r\n <ng-container>\r\n <ng-container *ngIf=\"getImageType() == 'Image'\">\r\n <img [src]=\"getImageUrl()\" alt=\"Selected Image\" class=\"w-100 h-100\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n [simpoCorner]=\"styles?.corners\">\r\n </ng-container>\r\n <ng-container *ngIf=\"getImageType() == 'Video'\">\r\n <video [src]=\"getImageUrl()\" class=\"w-100 h-100\" [simpoCorner]=\"styles?.corners\"\r\n controls></video>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <div id=\"carouselExampleIndicators\" class=\"carousel slide w-65 d-flex flex-column\"\r\n [simpoContentAlignment]=\"styles?.contentAlignment\" [class.w-100]=\"screenWidth < 475\">\r\n <div class=\"carousel-inner mb-4\" [class.mb-6]=\"screenWidth < 475\">\r\n <ng-container *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <div class=\"carousel-item h-100\" [ngClass]=\"{'active': i === 0}\">\r\n <div class=\"quote-image mb-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"31\" viewBox=\"0 0 36 31\"\r\n fill=\"none\">\r\n <path\r\n d=\"M35.3998 3.29993C35.5998 3.09993 35.7998 2.69993 35.5998 2.29993C35.3998 2.09993 34.9998 1.69993 34.5998 0.899925C33.9998 0.699925 33.5998 0.699926 32.9998 1.09993C25.3998 5.89993 21.1998 11.4999 20.3998 17.8999C18.9998 27.8999 27.9998 32.6999 32.5998 28.2999C37.1998 23.8999 34.3998 18.2999 31.1998 16.6999C27.9998 15.0999 25.9998 15.6999 26.1998 13.6999C26.5998 11.6999 31.1998 6.09993 35.3998 3.29993ZM14.7998 1.09993C14.1998 0.699926 13.5998 0.699926 13.1998 1.09993C5.59983 5.89993 1.39983 11.4999 0.599832 18.0999C-0.800168 28.0999 8.19983 32.8999 12.7998 28.4999C17.3998 24.0999 14.5998 18.4999 11.3998 16.8999C7.99983 15.4999 5.99983 16.0999 6.39983 13.8999C6.79983 11.8999 11.3998 6.29993 15.5998 3.49993C15.7998 3.29993 15.9998 2.89993 15.7998 2.49993C15.5998 2.29993 15.1998 1.89993 14.7998 1.09993Z\"\r\n [attr.fill]=\"styles?.background?.accentColor\" />\r\n </svg>\r\n </div>\r\n <div class=\"item mb-3\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"prev-next d-flex gap-2\">\r\n <div class=\"carousel-control-prev\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n data-bs-slide=\"prev\" [style.backgroundColor]=\"styles?.background?.accentColor\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"carousel-control-next\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n data-bs-slide=\"next\" [style.backgroundColor]=\"styles?.background?.accentColor\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-container{position:relative;height:auto}.carousel-control-prev,.carousel-control-next{position:unset!important;width:4%;border-radius:50%!important;height:4vh}.w-35{width:35%!important}.w-65{width:65%!important}.prev-next{position:absolute;bottom:0;left:0;width:100%}.overflow-visible{overflow:visible!important}@media screen and (max-width: 475px){.carousel-control-prev,.carousel-control-next{width:18%!important}.list-items{flex-direction:column!important}.h-30{height:30vh!important}}.height-50{height:50vh}.w-100{width:100%!important}.mb-6{margin-bottom:2.5rem!important}.flex-column{flex-direction:column!important}\n"] }]
|
|
14697
14696
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
14698
14697
|
type: Input
|
|
14699
14698
|
}], edit: [{
|
|
@@ -18537,11 +18536,11 @@ class SchemeDetailsComponent {
|
|
|
18537
18536
|
return window.innerWidth <= 475;
|
|
18538
18537
|
}
|
|
18539
18538
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemeDetailsComponent, deps: [{ token: StorageServiceService }, { token: RestService }, { token: i1$1.MatDialog }, { token: EventsService }, { token: i2$2.Router }, { token: i6$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18540
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SchemeDetailsComponent, isStandalone: true, selector: "simpo-scheme-details", inputs: { schemeDetails: "schemeDetails", data: "data", metalPrice: "metalPrice" }, outputs: { gotoSchemeOverview: "gotoSchemeOverview" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }, { propertyName: "slabListTemplate", first: true, predicate: ["showSlab"], descendants: true, static: true }], ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<div class=\"w-100 h-100\">\r\n <!-- Header -->\r\n <div class=\"header\">\r\n <div class=\"header_left d-flex justify-content-between align-items-center\">\r\n <div class=\"back-btn d-flex align-items-center\" (click)=\"goBack()\"><mat-icon>keyboard_backspace</mat-icon>\r\n </div>\r\n <h1>Passbook Details</h1>\r\n </div>\r\n <div class=\"redeem_request cursor-pointer\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"showBenefitSlab()\"\r\n *ngIf=\"schemeDetails?.passBookStatus == 'ACTIVE'\">Raise Redeem Request</div>\r\n </div>\r\n\r\n <!-- Amount Card -->\r\n <div class=\"d-flex justify-content-between amount-card-section\">\r\n <div class=\"w-100\">\r\n <div class=\"amount-card\">\r\n <div class=\"top-dashboard\">\r\n <div class=\"amount-info\">\r\n <div class=\"coin-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\r\n </div>\r\n <div class=\"amount-details\">\r\n <h2>\u20B9{{schemeDetails?.totalPaidAmount ? schemeDetails?.totalPaidAmount : '0'}}</h2>\r\n <p>{{schemeDetails.schemeType === 'GOLD_PROTECTION' ? 'Deposited Amount' : 'Total Available Scheme Amount'}}</p>\r\n </div>\r\n </div>\r\n <div class=\"amount-info\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"coin-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\r\n </div>\r\n <div class=\"amount-details\">\r\n <h2>{{schemeDetails?.totalInvestedMetal}} gms</h2>\r\n <p>Accumulated Gold</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-start justify-content-around scheme-section\">\r\n <div class=\"details_tab\">\r\n <div class=\"section-header\">\r\n <h3>Passbook Details</h3>\r\n <span class=\"redeem-requested\">{{schemeDetails?.passBookStatus ?\r\n schemeDetails?.passBookStatus?.replaceAll('_', ' ') : 'N/A'}}</span>\r\n </div>\r\n\r\n <div class=\"scheme-info\">\r\n <div class=\"scheme-name\">\r\n <span class=\"label\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :\r\n 'N/A'}}</span>\r\n </div>\r\n <div class=\"scheme-id\">\u20B9{{schemeDetails?.installmentAmount ? schemeDetails?.installmentAmount :\r\n 'N/A'}}\r\n Monthly</div>\r\n </div>\r\n\r\n <div class=\"dates-grid\">\r\n <div class=\"date-item\">\r\n <div class=\"date-icon\">\uD83D\uDCC5</div>\r\n <div class=\"date-info\">\r\n <span class=\"date-label\">Scheme started on</span>\r\n <span class=\"date-value\">{{schemeDetails?.createdTimestamp ?\r\n (schemeDetails?.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\r\n </div>\r\n </div>\r\n <div class=\"date-item\">\r\n <div class=\"date-icon\">\uD83D\uDCC5</div>\r\n <div class=\"date-info\">\r\n <span class=\"date-label\">Maturity Date</span>\r\n <span class=\"date-value\">{{schemeDetails?.maturityDate ?\r\n (schemeDetails?.maturityDate | date:'mediumDate') : 'N/A' }}</span>\r\n </div>\r\n </div>\r\n <div class=\"completion-info\">\r\n <span class=\"completion-label\">Completed EMIs</span>\r\n <span class=\"completion-value\">{{schemeDetails.dueMonths ?\r\n (schemeDetails?.schemePayments?.length-schemeDetails.dueMonths) :\r\n 0}} out\r\n of {{schemeDetails?.schemePayments?.length}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"enrollment-card\">\r\n <div class=\"enrollment-row\">\r\n <span class=\"enrollment-label\">Group Name</span>\r\n <span class=\"enrollment-value\">{{schemeDetails?.schemeName ?\r\n schemeDetails?.schemeName :'N/A' }}</span>\r\n </div>\r\n\r\n <div class=\"enrollment-row\">\r\n <span class=\"enrollment-label\">Group Code</span>\r\n <span class=\"enrollment-value\">{{schemeDetails.enrollmentGroup?.pwcGroupId ?\r\n schemeDetails.enrollmentGroup.pwcGroupId : 'N/A' }}</span>\r\n </div>\r\n\r\n <div class=\"enrollment-row\">\r\n <span class=\"enrollment-label\">Maturity Date</span>\r\n <span class=\"enrollment-value\">{{schemeDetails.maturityDate ? (schemeDetails.maturityDate | date\r\n : 'dd-MM-yyyy') : 'N/A'}}</span>\r\n </div>\r\n <div class=\"enrollment-row\">\r\n <span class=\"enrollment-label\">Enrollment Id</span>\r\n <span class=\"enrollment-value\">{{schemeDetails.enrollmentId ? schemeDetails.enrollmentId : 'N/A'}}</span>\r\n </div>\r\n </div> -->\r\n </div>\r\n </div>\r\n <!-- <div class=\"quick-actions\">\r\n <h3>Quick Actions</h3>\r\n <div class=\"actions d-flex flex-column justify-content-evenly\">\r\n <div class=\"action-item d-flex align-items-center mb-2\">Make Due Payments\r\n </div>\r\n <div class=\"action-item d-flex align-items-center\">Add Nominee</div>\r\n <div class=\"action-item d-flex align-items-center\">Download SOA</div>\r\n </div>\r\n\r\n <button class=\"enroll-btn\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/782673c1753434311903SVG (1).png\"> Enroll\r\n New Scheme</button>\r\n </div> -->\r\n </div>\r\n\r\n <!-- Scheme Details Section -->\r\n <div class=\"scheme-details\">\r\n <div class=\"section d-flex-flex-column gap-2\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Installments</h2>\r\n </div>\r\n <div class=\"payment-list d-flex flex-column gap-2\">\r\n <ng-container *ngIf=\"paymentData.length;else noPayments\">\r\n <ng-container *ngFor=\"let payment of paymentData;let i = index\">\r\n <div class=\"payment-item\">\r\n <div class=\"payment-info\">\r\n <div class=\"payment-icon upcoming\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\">\r\n </div>\r\n <div class=\"payment-details\">\r\n <h4>{{schemeDetails?.schemeName ? schemeDetails?.schemeName : 'N/A'}}</h4>\r\n <p>Due Date : {{payment?.dueDate ? (payment?.dueDate | date : 'dd-MM-yyyy') :\r\n 'N/A'}}</p>\r\n <p *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && payment.paymentStatus === 'PAID'\">Gold Allocated : {{payment?.totalInvestedMetal}} gms</p>\r\n <p *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && paymentData[i-1]?.paymentStatus === 'PAID' && payment?.paymentStatus === 'DUE'\">Gold Allocate today : {{payment?.dueAmount / metalPrice?.price}} gms</p>\r\n <!-- |\r\n Due by: {{getDueDate(payment?.dueDate)}} days</p> -->\r\n </div>\r\n </div>\r\n <div class=\"payment-amount\">\r\n <div class=\"amount-value\" *ngIf=\"payment?.dueAmount\">\u20B9{{payment?.dueAmount ?\r\n payment.dueAmount :\r\n 'N/A'}}</div>\r\n <div class=\"paid-btn payment-status d-flex align-items-center justify-content-center\"\r\n *ngIf=\"payment?.paymentStatus != 'DUE'\">\r\n Paid\r\n </div>\r\n <div class=\"payment-status pay-now-btn cursor-pointer\"\r\n *ngIf=\"paymentData[i-1]?.paymentStatus === 'PAID' && payment?.paymentStatus === 'DUE'\" (click)=\"payDuePayment(payment)\">\r\n <ng-container *ngIf=\"!paymentLoader\">Pay Now</ng-container>\r\n <ng-container *ngIf=\"paymentLoader\">Loading...</ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button>\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Gold Allocate:</span>\r\n <span class=\"amount\">{{storeCharges?.breakdown?.installmentAmount / metalPrice?.price}} gms</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template #showSlab>\r\n <div class=\"main_section\">\r\n <div class=\"slab_header d-flex justify-content-between align-items-center\">\r\n Confirm Redeem Request\r\n <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n </div>\r\n <div class=\"main_body\">\r\n <div class=\"container\">\r\n <div class=\"card\">\r\n <div class=\"card-title\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :\r\n 'N/A'}}</div>\r\n <div class=\"info-row\">\r\n <span>Plan started on</span>\r\n <span class=\"value\">{{schemeDetails.createdTimestamp ?\r\n (schemeDetails.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Monthly Amount Paid</span>\r\n <span class=\"value\">\u20B9{{schemeDetails?.installmentAmount ?\r\n schemeDetails?.installmentAmount : 'N/A'}}</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Total Amount Paid</span>\r\n <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount ?\r\n schemeDetails?.totalPaidAmount : 'N/A' }}</span>\r\n </div>\r\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType !== 'GOLD_PROTECTION' && paidMonth < schemeDetails?.minRedemptionMonth && schemeDetails?.earlyRedemptionCharge\">\r\n <span>Enrollment Fee</span>\r\n <span class=\"value\">\u20B9{{schemeDetails?.earlyRedemptionCharge}}</span>\r\n </div>\r\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\r\n <span>Accumulated gold</span>\r\n <span class=\"value\">{{schemeDetails?.totalInvestedMetal}} gms</span>\r\n </div>\r\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && paidMonth < schemeDetails?.minRedemptionMonth && schemeDetails?.earlyRedemptionCharge\">\r\n <span>Gold Deducted</span>\r\n <span class=\"value\">{{goldDeducted}} gms</span>\r\n </div>\r\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\r\n <span>Accumulated gold after Deduction</span>\r\n <span class=\"value\">{{schemeDetails?.totalInvestedMetal - (paidMonth < schemeDetails?.minRedemptionMonth ? goldDeducted : 0)}} gms</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Total Redeem Amount</span>\r\n <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount - (paidMonth < schemeDetails?.minRedemptionMonth ? schemeDetails?.earlyRedemptionCharge ?? 0 : 0)}}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"card\" *ngIf=\"slabDetails && slabDetails.length > 0\">\r\n <div class=\"card-title center\">Benefits You Will Get</div>\r\n <div class=\"info-row\">\r\n <span>Installments Paid:</span>\r\n <span class=\"value\">{{ schemeDetails?.schemePayments?.length ?\r\n (schemeDetails?.schemePayments?.length -\r\n schemeDetails?.dueMonths) : 'N/A'}}</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Benefit Slab:</span>\r\n <span class=\"value\">{{slabDetails[0]?.minMonths >= 0 ? slabDetails[0]?.minMonths\r\n :\r\n 'N/A'}} - {{slabDetails[0]?.maxMonths ? slabDetails[0]?.maxMonths : 'N/A'}}\r\n months</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Benefit Percentage:</span>\r\n <span class=\"value\">{{slabDetails[0].benefitPercentage >= 0 ?\r\n slabDetails[0].benefitPercentage : 'N/A'}}%</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Benefit Amount:</span>\r\n <span class=\"value highlight\">\u20B9{{slabDetails[0]?.benefitAmount >= 0 ?\r\n slabDetails[0]?.benefitAmount : 'N/A'}}</span>\r\n </div>\r\n </div>\r\n\r\n <button class=\"confirm-btn\" (click)=\"confirmRequest()\"\r\n *ngIf=\"!redeemRequestLoader\">Confirm Request</button>\r\n <button class=\"confirm-btn redeem-request-btn\" *ngIf=\"redeemRequestLoader\">\r\n <mat-spinner></mat-spinner>\r\n Requesting..\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template #noPayments>\r\n <div class=\"d-flex justify-content-center align-items-center w-100 h-100\">\r\n <span>No Upcoming Payments</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n <div class=\"tabs\">\r\n <button class=\"tab d-flex justify-content-center align-items-center active\">Transactions</button>\r\n </div>\r\n <div class=\"transactions\">\r\n <ng-container *ngFor=\"let transaction of schemeDetails.schemePayments\">\r\n <div class=\"transaction-item\" *ngIf=\"transaction.paymentStatus === 'PAID'\">\r\n <div class=\"transaction-status paid\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/484102c1753446573473Group 1707484906.png\">\r\n </div>\r\n <div class=\"transaction-details\">\r\n <h4>{{transaction.emiMonthCount ? transaction.emiMonthCount : 'N/A' }}st Instalment Paid\r\n </h4>\r\n <p>Payment Date : {{transaction.paidDate ? (transaction.paidDate | date : 'dd-MM-yyyy') :\r\n 'N/A'}}\r\n </p>\r\n </div>\r\n <div class=\"transaction-amount\">\r\n {{transaction.paidAmount ? ('\u20B9'+transaction.paidAmount) : 'N/A' }}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f5f5f5;color:#333}.header{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;background-color:#fff;border-bottom:1px solid #e0e0e0}.back-btn{background:none;border:none;font-size:20px;cursor:pointer;padding:7px}.header_left h1{font-size:18px;font-weight:600;flex-grow:1;text-align:center;margin:0 16px}.header-actions{display:flex;gap:8px}.share-btn,.download-btn{font-size:16px;cursor:pointer;padding:9px;border:1px solid lightgrey;border-radius:5px}.details_tab{border:1px solid lightgrey;padding:3%;border-radius:7px;width:62%}.amount-card{background:linear-gradient(90deg,#fffbeb,#fff7ed);margin:16px;padding:20px;border-radius:12px}.amount-info{display:flex;align-items:center;gap:16px}.coin-icon{font-size:32px}.amount-details h2{font-size:24px;font-weight:700;color:#333;margin-bottom:4px}.amount-details p{font-size:14px;color:#666}.scheme-details{padding:0 16px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-title{font-size:18px;font-weight:600}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;margin:12px 0}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.pay-now-btn{background:#10f464}.paid-btn{color:#10f464}.payment-status{font-size:12px;padding:6px;border-radius:4px}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.section-header h3{font-size:18px;font-weight:600}.redeem-requested{background-color:#fff3e0;color:#e65100;padding:4px 12px;border-radius:16px;font-size:12px;font-weight:500}.scheme-info{margin-bottom:24px}.scheme-name{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.scheme-name .label{font-size:16px;font-weight:600}.scheme-name .redeem-status{background-color:#e8f5e8;color:#2e7d32;padding:4px 12px;border-radius:16px;font-size:12px}.scheme-id{color:#666;font-size:14px}.dates-grid{display:flex;gap:16px;border-top:1px solid lightgrey;justify-content:space-between;padding-top:11px}.date-item{display:flex;align-items:center;gap:8px}.date-icon{font-size:16px}.date-info{display:flex;flex-direction:column}.date-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.date-value{font-size:11px;font-weight:500}.completion-info{display:flex;flex-direction:column;align-items:flex-start;grid-column:span 2}.completion-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.completion-value{font-size:11px;font-weight:500}.tabs{display:flex;border-bottom:1px solid #e0e0e0;margin:20px 0;height:5vh;background:#d3d3d3;align-items:center;padding:0 1%;width:fit-content;border-radius:30px}.tab{background:none;border:none;font-size:10px!important;cursor:pointer;border-bottom:2px solid transparent;color:#666;width:6vw!important;height:80%!important}.tab.active{color:#333;border-radius:30px;font-weight:500;background-color:#fff}.transactions{display:flex;flex-direction:column;gap:16px;padding-bottom:20px}.transaction-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid lightgrey;border-radius:8px}.transaction-status{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}.underline{text-decoration:underline}.transaction-status img{width:100%}.transaction-status.paid{background-color:#4caf50;color:#fff}.transaction-status.due{background-color:#e0e0e0;border:2px solid #bdbdbd}.transaction-details{flex-grow:1}.transaction-details h4{font-size:14px;font-weight:500;margin-bottom:2px}.transaction-details p{font-size:12px;color:#666}.transaction-amount{font-size:16px;font-weight:600}@media (max-width: 480px){.dates-grid{grid-template-columns:1fr}.amount-info{justify-content:space-between}.top-dashboard{flex-direction:column}.completion-info{grid-column:span 1;align-items:flex-start}.header{padding:20px 0}.redeem_request{white-space:nowrap;font-size:.7rem!important}.header_left h1{white-space:nowrap;margin:0 6px}}.scheme-section{flex-direction:column;gap:1rem}.details_tab{width:100%;border-radius:12px}.redeem_request{padding:.3rem .6rem;border-radius:4px;font-weight:700;font-size:14px;border:2px solid}.section{padding:12px!important;max-height:75vh;overflow-y:scroll}.upcoming-status{display:flex;justify-content:center;align-items:center;height:35px;white-space:nowrap}.payment-details p{font-size:12px}.tab{width:22vw!important}.scheme-details{padding:0}.enrollment-card{width:100%!important}.amount-card{margin:0 0 12px}.amount-card-section{flex-direction:column}.actions{height:70%}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.enrollment-card{background:#fff;border-radius:12px;padding:0 24px;border:1px solid lightgrey;width:30%}.section{background:#fff;border-radius:12px;padding:24px;margin:24px 0;border:1px solid #e9ecef}.enrollment-row{display:flex;justify-content:space-between;align-items:center;padding:10.5px 0;border-bottom:1px solid #f0f0f0}.enrollment-row:last-child{border-bottom:none}.enrollment-label{color:#666;font-size:14px;font-weight:500}.enrollment-value{color:#333;font-size:14px;font-weight:600}.enrollment-value.zero{color:#ef4444}.container{max-width:400px;margin:32px auto;padding:0 16px}.card{background:#fff;border-radius:16px;box-shadow:0 2px 10px #00000012;padding:22px 18px 14px;margin-bottom:18px}.card-title{font-weight:600;color:#222;font-size:1.18rem;margin-bottom:10px}.card-title.center{text-align:center;font-size:1.09rem;margin-bottom:16px}.info-row{display:flex;justify-content:space-between;align-items:center;font-size:.99rem;margin-top:7px;margin-bottom:0}.info-row .value{font-weight:500;color:#212121}.main_section{min-width:35vw}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.slab_header{padding:2% 3%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:700;font-size:19px;border-bottom:1px solid lightgrey}.info-row .highlight{border-radius:3px;padding:2px 7px;font-weight:600}.confirm-btn{width:100%;display:block;background:#e22d2f;color:#fff;border:none;outline:none;font-size:1.04rem;font-weight:600;padding:8px 0;border-radius:8px;box-shadow:0 1px 4px #e22d2f33;cursor:pointer;margin-top:18px;letter-spacing:.03em;transition:background .2s}.confirm-btn:hover{background:#c31113}.redeem-request-btn{justify-content:center;display:flex;align-items:center;gap:10px}.redeem-request-btn mat-spinner{height:25px!important;width:25px!important}.top-dashboard{display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
|
|
18539
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SchemeDetailsComponent, isStandalone: true, selector: "simpo-scheme-details", inputs: { schemeDetails: "schemeDetails", data: "data", metalPrice: "metalPrice" }, outputs: { gotoSchemeOverview: "gotoSchemeOverview" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }, { propertyName: "slabListTemplate", first: true, predicate: ["showSlab"], descendants: true, static: true }], ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<div class=\"w-100 h-100\">\r\n <!-- Header -->\r\n <div class=\"header\">\r\n <div class=\"header_left d-flex justify-content-between align-items-center\">\r\n <div class=\"back-btn d-flex align-items-center\" (click)=\"goBack()\"><mat-icon>keyboard_backspace</mat-icon>\r\n </div>\r\n <h1>Passbook Details</h1>\r\n </div>\r\n <div class=\"redeem_request cursor-pointer\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"showBenefitSlab()\"\r\n *ngIf=\"schemeDetails?.passBookStatus == 'ACTIVE'\">Raise Redeem Request</div>\r\n </div>\r\n\r\n <!-- Amount Card -->\r\n <div class=\"d-flex justify-content-between amount-card-section\">\r\n <div class=\"w-100\">\r\n <div class=\"amount-card\">\r\n <div class=\"top-dashboard\">\r\n <div class=\"amount-info\">\r\n <div class=\"coin-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\r\n </div>\r\n <div class=\"amount-details\">\r\n <h2>\u20B9{{schemeDetails?.totalPaidAmount ? schemeDetails?.totalPaidAmount : 'N/A'}}</h2>\r\n <p>{{schemeDetails.schemeType === 'GOLD_PROTECTION' ? 'Deposited Amount' : 'Total Available Scheme Amount'}}</p>\r\n </div>\r\n </div>\r\n <div class=\"amount-info\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"coin-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\r\n </div>\r\n <div class=\"amount-details\">\r\n <h2>{{schemeDetails?.totalInvestedMetal}} gms</h2>\r\n <p>Accumulated Gold</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-start justify-content-around scheme-section\">\r\n <div class=\"details_tab\">\r\n <div class=\"section-header\">\r\n <h3>Passbook Details</h3>\r\n <span class=\"redeem-requested\">{{schemeDetails?.passBookStatus ?\r\n schemeDetails?.passBookStatus?.replaceAll('_', ' ') : 'N/A'}}</span>\r\n </div>\r\n\r\n <div class=\"scheme-info\">\r\n <div class=\"scheme-name\">\r\n <span class=\"label\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :\r\n 'N/A'}}</span>\r\n </div>\r\n <div class=\"scheme-id\">\u20B9{{schemeDetails?.installmentAmount ? schemeDetails?.installmentAmount :\r\n 'N/A'}}\r\n Monthly</div>\r\n </div>\r\n\r\n <div class=\"dates-grid\">\r\n <div class=\"date-item\">\r\n <div class=\"date-icon\">\uD83D\uDCC5</div>\r\n <div class=\"date-info\">\r\n <span class=\"date-label\">Scheme started on</span>\r\n <span class=\"date-value\">{{schemeDetails?.createdTimestamp ?\r\n (schemeDetails?.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\r\n </div>\r\n </div>\r\n <div class=\"date-item\">\r\n <div class=\"date-icon\">\uD83D\uDCC5</div>\r\n <div class=\"date-info\">\r\n <span class=\"date-label\">Maturity Date</span>\r\n <span class=\"date-value\">{{schemeDetails?.maturityDate ?\r\n (schemeDetails?.maturityDate | date:'mediumDate') : 'N/A' }}</span>\r\n </div>\r\n </div>\r\n <div class=\"completion-info\">\r\n <span class=\"completion-label\">Completed EMIs</span>\r\n <span class=\"completion-value\">{{schemeDetails.dueMonths ?\r\n (schemeDetails?.schemePayments?.length-schemeDetails.dueMonths) :\r\n 0}} out\r\n of {{schemeDetails?.schemePayments?.length}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"enrollment-card\">\r\n <div class=\"enrollment-row\">\r\n <span class=\"enrollment-label\">Group Name</span>\r\n <span class=\"enrollment-value\">{{schemeDetails?.schemeName ?\r\n schemeDetails?.schemeName :'N/A' }}</span>\r\n </div>\r\n\r\n <div class=\"enrollment-row\">\r\n <span class=\"enrollment-label\">Group Code</span>\r\n <span class=\"enrollment-value\">{{schemeDetails.enrollmentGroup?.pwcGroupId ?\r\n schemeDetails.enrollmentGroup.pwcGroupId : 'N/A' }}</span>\r\n </div>\r\n\r\n <div class=\"enrollment-row\">\r\n <span class=\"enrollment-label\">Maturity Date</span>\r\n <span class=\"enrollment-value\">{{schemeDetails.maturityDate ? (schemeDetails.maturityDate | date\r\n : 'dd-MM-yyyy') : 'N/A'}}</span>\r\n </div>\r\n <div class=\"enrollment-row\">\r\n <span class=\"enrollment-label\">Enrollment Id</span>\r\n <span class=\"enrollment-value\">{{schemeDetails.enrollmentId ? schemeDetails.enrollmentId : 'N/A'}}</span>\r\n </div>\r\n </div> -->\r\n </div>\r\n </div>\r\n <!-- <div class=\"quick-actions\">\r\n <h3>Quick Actions</h3>\r\n <div class=\"actions d-flex flex-column justify-content-evenly\">\r\n <div class=\"action-item d-flex align-items-center mb-2\">Make Due Payments\r\n </div>\r\n <div class=\"action-item d-flex align-items-center\">Add Nominee</div>\r\n <div class=\"action-item d-flex align-items-center\">Download SOA</div>\r\n </div>\r\n\r\n <button class=\"enroll-btn\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/782673c1753434311903SVG (1).png\"> Enroll\r\n New Scheme</button>\r\n </div> -->\r\n </div>\r\n\r\n <!-- Scheme Details Section -->\r\n <div class=\"scheme-details\">\r\n <div class=\"section d-flex-flex-column gap-2\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Installments</h2>\r\n </div>\r\n <div class=\"payment-list d-flex flex-column gap-2\">\r\n <ng-container *ngIf=\"paymentData.length;else noPayments\">\r\n <ng-container *ngFor=\"let payment of paymentData;let i = index\">\r\n <div class=\"payment-item\">\r\n <div class=\"payment-info\">\r\n <div class=\"payment-icon upcoming\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\">\r\n </div>\r\n <div class=\"payment-details\">\r\n <h4>{{schemeDetails?.schemeName ? schemeDetails?.schemeName : 'N/A'}}</h4>\r\n <p>Due Date : {{payment?.dueDate ? (payment?.dueDate | date : 'dd-MM-yyyy') :\r\n 'N/A'}}</p>\r\n <p *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && payment.paymentStatus === 'PAID'\">Gold Allocated : {{payment?.totalInvestedMetal}} gms</p>\r\n <p *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && paymentData[i-1]?.paymentStatus === 'PAID' && payment?.paymentStatus === 'DUE'\">Gold Allocate today : {{payment?.dueAmount / metalPrice?.price}} gms</p>\r\n <!-- |\r\n Due by: {{getDueDate(payment?.dueDate)}} days</p> -->\r\n </div>\r\n </div>\r\n <div class=\"payment-amount\">\r\n <div class=\"amount-value\" *ngIf=\"payment?.dueAmount\">\u20B9{{payment?.dueAmount ?\r\n payment.dueAmount :\r\n 'N/A'}}</div>\r\n <div class=\"paid-btn payment-status d-flex align-items-center justify-content-center\"\r\n *ngIf=\"payment?.paymentStatus != 'DUE'\">\r\n Paid\r\n </div>\r\n <div class=\"payment-status pay-now-btn cursor-pointer\"\r\n *ngIf=\"paymentData[i-1]?.paymentStatus === 'PAID' && payment?.paymentStatus === 'DUE'\" (click)=\"payDuePayment(payment)\">\r\n <ng-container *ngIf=\"!paymentLoader\">Pay Now</ng-container>\r\n <ng-container *ngIf=\"paymentLoader\">Loading...</ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button>\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Gold Allocate:</span>\r\n <span class=\"amount\">{{storeCharges?.breakdown?.installmentAmount / metalPrice?.price}} gms</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template #showSlab>\r\n <div class=\"main_section\">\r\n <div class=\"slab_header d-flex justify-content-between align-items-center\">\r\n Confirm Redeem Request\r\n <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n </div>\r\n <div class=\"main_body\">\r\n <div class=\"container\">\r\n <div class=\"card\">\r\n <div class=\"card-title\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :\r\n 'N/A'}}</div>\r\n <div class=\"info-row\">\r\n <span>Plan started on</span>\r\n <span class=\"value\">{{schemeDetails.createdTimestamp ?\r\n (schemeDetails.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Monthly Amount Paid</span>\r\n <span class=\"value\">\u20B9{{schemeDetails?.installmentAmount ?\r\n schemeDetails?.installmentAmount : 'N/A'}}</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Total Amount Paid</span>\r\n <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount ?\r\n schemeDetails?.totalPaidAmount : 'N/A' }}</span>\r\n </div>\r\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType !== 'GOLD_PROTECTION' && paidMonth < schemeDetails?.minRedemptionMonth && schemeDetails?.earlyRedemptionCharge\">\r\n <span>Enrollment Fee</span>\r\n <span class=\"value\">\u20B9{{schemeDetails?.earlyRedemptionCharge}}</span>\r\n </div>\r\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\r\n <span>Accumulated gold</span>\r\n <span class=\"value\">{{schemeDetails?.totalInvestedMetal}} gms</span>\r\n </div>\r\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && paidMonth < schemeDetails?.minRedemptionMonth && schemeDetails?.earlyRedemptionCharge\">\r\n <span>Gold Deducted</span>\r\n <span class=\"value\">{{goldDeducted}} gms</span>\r\n </div>\r\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\r\n <span>Accumulated gold after Deduction</span>\r\n <span class=\"value\">{{schemeDetails?.totalInvestedMetal - (paidMonth < schemeDetails?.minRedemptionMonth ? goldDeducted : 0)}} gms</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Total Redeem Amount</span>\r\n <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount - (paidMonth < schemeDetails?.minRedemptionMonth ? schemeDetails?.earlyRedemptionCharge ?? 0 : 0)}}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"card\" *ngIf=\"slabDetails && slabDetails.length > 0\">\r\n <div class=\"card-title center\">Benefits You Will Get</div>\r\n <div class=\"info-row\">\r\n <span>Installments Paid:</span>\r\n <span class=\"value\">{{ schemeDetails?.schemePayments?.length ?\r\n (schemeDetails?.schemePayments?.length -\r\n schemeDetails?.dueMonths) : 'N/A'}}</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Benefit Slab:</span>\r\n <span class=\"value\">{{slabDetails[0]?.minMonths >= 0 ? slabDetails[0]?.minMonths\r\n :\r\n 'N/A'}} - {{slabDetails[0]?.maxMonths ? slabDetails[0]?.maxMonths : 'N/A'}}\r\n months</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Benefit Percentage:</span>\r\n <span class=\"value\">{{slabDetails[0].benefitPercentage >= 0 ?\r\n slabDetails[0].benefitPercentage : 'N/A'}}%</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Benefit Amount:</span>\r\n <span class=\"value highlight\">\u20B9{{slabDetails[0]?.benefitAmount >= 0 ?\r\n slabDetails[0]?.benefitAmount : 'N/A'}}</span>\r\n </div>\r\n </div>\r\n\r\n <button class=\"confirm-btn\" (click)=\"confirmRequest()\"\r\n *ngIf=\"!redeemRequestLoader\">Confirm Request</button>\r\n <button class=\"confirm-btn redeem-request-btn\" *ngIf=\"redeemRequestLoader\">\r\n <mat-spinner></mat-spinner>\r\n Requesting..\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template #noPayments>\r\n <div class=\"d-flex justify-content-center align-items-center w-100 h-100\">\r\n <span>No Upcoming Payments</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n <div class=\"tabs\">\r\n <button class=\"tab d-flex justify-content-center align-items-center active\">Transactions</button>\r\n </div>\r\n <div class=\"transactions\">\r\n <ng-container *ngFor=\"let transaction of schemeDetails.schemePayments\">\r\n <div class=\"transaction-item\" *ngIf=\"transaction.paymentStatus === 'PAID'\">\r\n <div class=\"transaction-status paid\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/484102c1753446573473Group 1707484906.png\">\r\n </div>\r\n <div class=\"transaction-details\">\r\n <h4>{{transaction.emiMonthCount ? transaction.emiMonthCount : 'N/A' }}st Instalment Paid\r\n </h4>\r\n <p>Payment Date : {{transaction.paidDate ? (transaction.paidDate | date : 'dd-MM-yyyy') :\r\n 'N/A'}}\r\n </p>\r\n </div>\r\n <div class=\"transaction-amount\">\r\n {{transaction.paidAmount ? ('\u20B9'+transaction.paidAmount) : 'N/A' }}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f5f5f5;color:#333}.header{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;background-color:#fff;border-bottom:1px solid #e0e0e0}.back-btn{background:none;border:none;font-size:20px;cursor:pointer;padding:7px}.header_left h1{font-size:18px;font-weight:600;flex-grow:1;text-align:center;margin:0 16px}.header-actions{display:flex;gap:8px}.share-btn,.download-btn{font-size:16px;cursor:pointer;padding:9px;border:1px solid lightgrey;border-radius:5px}.details_tab{border:1px solid lightgrey;padding:3%;border-radius:7px;width:62%}.amount-card{background:linear-gradient(90deg,#fffbeb,#fff7ed);margin:16px;padding:20px;border-radius:12px}.amount-info{display:flex;align-items:center;gap:16px}.coin-icon{font-size:32px}.amount-details h2{font-size:24px;font-weight:700;color:#333;margin-bottom:4px}.amount-details p{font-size:14px;color:#666}.scheme-details{padding:0 16px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-title{font-size:18px;font-weight:600}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;margin:12px 0}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.pay-now-btn{background:#10f464}.paid-btn{color:#10f464}.payment-status{font-size:12px;padding:6px;border-radius:4px}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.section-header h3{font-size:18px;font-weight:600}.redeem-requested{background-color:#fff3e0;color:#e65100;padding:4px 12px;border-radius:16px;font-size:12px;font-weight:500}.scheme-info{margin-bottom:24px}.scheme-name{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.scheme-name .label{font-size:16px;font-weight:600}.scheme-name .redeem-status{background-color:#e8f5e8;color:#2e7d32;padding:4px 12px;border-radius:16px;font-size:12px}.scheme-id{color:#666;font-size:14px}.dates-grid{display:flex;gap:16px;border-top:1px solid lightgrey;justify-content:space-between;padding-top:11px}.date-item{display:flex;align-items:center;gap:8px}.date-icon{font-size:16px}.date-info{display:flex;flex-direction:column}.date-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.date-value{font-size:11px;font-weight:500}.completion-info{display:flex;flex-direction:column;align-items:flex-start;grid-column:span 2}.completion-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.completion-value{font-size:11px;font-weight:500}.tabs{display:flex;border-bottom:1px solid #e0e0e0;margin:20px 0;height:5vh;background:#d3d3d3;align-items:center;padding:0 1%;width:fit-content;border-radius:30px}.tab{background:none;border:none;font-size:10px!important;cursor:pointer;border-bottom:2px solid transparent;color:#666;width:6vw!important;height:80%!important}.tab.active{color:#333;border-radius:30px;font-weight:500;background-color:#fff}.transactions{display:flex;flex-direction:column;gap:16px;padding-bottom:20px}.transaction-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid lightgrey;border-radius:8px}.transaction-status{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}.underline{text-decoration:underline}.transaction-status img{width:100%}.transaction-status.paid{background-color:#4caf50;color:#fff}.transaction-status.due{background-color:#e0e0e0;border:2px solid #bdbdbd}.transaction-details{flex-grow:1}.transaction-details h4{font-size:14px;font-weight:500;margin-bottom:2px}.transaction-details p{font-size:12px;color:#666}.transaction-amount{font-size:16px;font-weight:600}@media (max-width: 480px){.dates-grid{grid-template-columns:1fr}.amount-info{justify-content:space-between}.top-dashboard{flex-direction:column}.completion-info{grid-column:span 1;align-items:flex-start}.header{padding:20px 0}.redeem_request{white-space:nowrap;font-size:.7rem!important}.header_left h1{white-space:nowrap;margin:0 6px}}.scheme-section{flex-direction:column;gap:1rem}.details_tab{width:100%;border-radius:12px}.redeem_request{padding:.3rem .6rem;border-radius:4px;font-weight:700;font-size:14px;border:2px solid}.section{padding:12px!important;max-height:75vh;overflow-y:scroll}.upcoming-status{display:flex;justify-content:center;align-items:center;height:35px;white-space:nowrap}.payment-details p{font-size:12px}.tab{width:22vw!important}.scheme-details{padding:0}.enrollment-card{width:100%!important}.amount-card{margin:0 0 12px}.amount-card-section{flex-direction:column}.actions{height:70%}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.enrollment-card{background:#fff;border-radius:12px;padding:0 24px;border:1px solid lightgrey;width:30%}.section{background:#fff;border-radius:12px;padding:24px;margin:24px 0;border:1px solid #e9ecef}.enrollment-row{display:flex;justify-content:space-between;align-items:center;padding:10.5px 0;border-bottom:1px solid #f0f0f0}.enrollment-row:last-child{border-bottom:none}.enrollment-label{color:#666;font-size:14px;font-weight:500}.enrollment-value{color:#333;font-size:14px;font-weight:600}.enrollment-value.zero{color:#ef4444}.container{max-width:400px;margin:32px auto;padding:0 16px}.card{background:#fff;border-radius:16px;box-shadow:0 2px 10px #00000012;padding:22px 18px 14px;margin-bottom:18px}.card-title{font-weight:600;color:#222;font-size:1.18rem;margin-bottom:10px}.card-title.center{text-align:center;font-size:1.09rem;margin-bottom:16px}.info-row{display:flex;justify-content:space-between;align-items:center;font-size:.99rem;margin-top:7px;margin-bottom:0}.info-row .value{font-weight:500;color:#212121}.main_section{min-width:35vw}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.slab_header{padding:2% 3%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:700;font-size:19px;border-bottom:1px solid lightgrey}.info-row .highlight{border-radius:3px;padding:2px 7px;font-weight:600}.confirm-btn{width:100%;display:block;background:#e22d2f;color:#fff;border:none;outline:none;font-size:1.04rem;font-weight:600;padding:8px 0;border-radius:8px;box-shadow:0 1px 4px #e22d2f33;cursor:pointer;margin-top:18px;letter-spacing:.03em;transition:background .2s}.confirm-btn:hover{background:#c31113}.redeem-request-btn{justify-content:center;display:flex;align-items:center;gap:10px}.redeem-request-btn mat-spinner{height:25px!important;width:25px!important}.top-dashboard{display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
|
|
18541
18540
|
}
|
|
18542
18541
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemeDetailsComponent, decorators: [{
|
|
18543
18542
|
type: Component,
|
|
18544
|
-
args: [{ selector: 'simpo-scheme-details', standalone: true, imports: [MatIcon, CommonModule, MatProgressSpinner, MatProgressSpinnerModule, ToastModule], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<div class=\"w-100 h-100\">\r\n <!-- Header -->\r\n <div class=\"header\">\r\n <div class=\"header_left d-flex justify-content-between align-items-center\">\r\n <div class=\"back-btn d-flex align-items-center\" (click)=\"goBack()\"><mat-icon>keyboard_backspace</mat-icon>\r\n </div>\r\n <h1>Passbook Details</h1>\r\n </div>\r\n <div class=\"redeem_request cursor-pointer\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"showBenefitSlab()\"\r\n *ngIf=\"schemeDetails?.passBookStatus == 'ACTIVE'\">Raise Redeem Request</div>\r\n </div>\r\n\r\n <!-- Amount Card -->\r\n <div class=\"d-flex justify-content-between amount-card-section\">\r\n <div class=\"w-100\">\r\n <div class=\"amount-card\">\r\n <div class=\"top-dashboard\">\r\n <div class=\"amount-info\">\r\n <div class=\"coin-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\r\n </div>\r\n <div class=\"amount-details\">\r\n <h2>\u20B9{{schemeDetails?.totalPaidAmount ? schemeDetails?.totalPaidAmount : '0'}}</h2>\r\n <p>{{schemeDetails.schemeType === 'GOLD_PROTECTION' ? 'Deposited Amount' : 'Total Available Scheme Amount'}}</p>\r\n </div>\r\n </div>\r\n <div class=\"amount-info\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"coin-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\r\n </div>\r\n <div class=\"amount-details\">\r\n <h2>{{schemeDetails?.totalInvestedMetal}} gms</h2>\r\n <p>Accumulated Gold</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-start justify-content-around scheme-section\">\r\n <div class=\"details_tab\">\r\n <div class=\"section-header\">\r\n <h3>Passbook Details</h3>\r\n <span class=\"redeem-requested\">{{schemeDetails?.passBookStatus ?\r\n schemeDetails?.passBookStatus?.replaceAll('_', ' ') : 'N/A'}}</span>\r\n </div>\r\n\r\n <div class=\"scheme-info\">\r\n <div class=\"scheme-name\">\r\n <span class=\"label\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :\r\n 'N/A'}}</span>\r\n </div>\r\n <div class=\"scheme-id\">\u20B9{{schemeDetails?.installmentAmount ? schemeDetails?.installmentAmount :\r\n 'N/A'}}\r\n Monthly</div>\r\n </div>\r\n\r\n <div class=\"dates-grid\">\r\n <div class=\"date-item\">\r\n <div class=\"date-icon\">\uD83D\uDCC5</div>\r\n <div class=\"date-info\">\r\n <span class=\"date-label\">Scheme started on</span>\r\n <span class=\"date-value\">{{schemeDetails?.createdTimestamp ?\r\n (schemeDetails?.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\r\n </div>\r\n </div>\r\n <div class=\"date-item\">\r\n <div class=\"date-icon\">\uD83D\uDCC5</div>\r\n <div class=\"date-info\">\r\n <span class=\"date-label\">Maturity Date</span>\r\n <span class=\"date-value\">{{schemeDetails?.maturityDate ?\r\n (schemeDetails?.maturityDate | date:'mediumDate') : 'N/A' }}</span>\r\n </div>\r\n </div>\r\n <div class=\"completion-info\">\r\n <span class=\"completion-label\">Completed EMIs</span>\r\n <span class=\"completion-value\">{{schemeDetails.dueMonths ?\r\n (schemeDetails?.schemePayments?.length-schemeDetails.dueMonths) :\r\n 0}} out\r\n of {{schemeDetails?.schemePayments?.length}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"enrollment-card\">\r\n <div class=\"enrollment-row\">\r\n <span class=\"enrollment-label\">Group Name</span>\r\n <span class=\"enrollment-value\">{{schemeDetails?.schemeName ?\r\n schemeDetails?.schemeName :'N/A' }}</span>\r\n </div>\r\n\r\n <div class=\"enrollment-row\">\r\n <span class=\"enrollment-label\">Group Code</span>\r\n <span class=\"enrollment-value\">{{schemeDetails.enrollmentGroup?.pwcGroupId ?\r\n schemeDetails.enrollmentGroup.pwcGroupId : 'N/A' }}</span>\r\n </div>\r\n\r\n <div class=\"enrollment-row\">\r\n <span class=\"enrollment-label\">Maturity Date</span>\r\n <span class=\"enrollment-value\">{{schemeDetails.maturityDate ? (schemeDetails.maturityDate | date\r\n : 'dd-MM-yyyy') : 'N/A'}}</span>\r\n </div>\r\n <div class=\"enrollment-row\">\r\n <span class=\"enrollment-label\">Enrollment Id</span>\r\n <span class=\"enrollment-value\">{{schemeDetails.enrollmentId ? schemeDetails.enrollmentId : 'N/A'}}</span>\r\n </div>\r\n </div> -->\r\n </div>\r\n </div>\r\n <!-- <div class=\"quick-actions\">\r\n <h3>Quick Actions</h3>\r\n <div class=\"actions d-flex flex-column justify-content-evenly\">\r\n <div class=\"action-item d-flex align-items-center mb-2\">Make Due Payments\r\n </div>\r\n <div class=\"action-item d-flex align-items-center\">Add Nominee</div>\r\n <div class=\"action-item d-flex align-items-center\">Download SOA</div>\r\n </div>\r\n\r\n <button class=\"enroll-btn\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/782673c1753434311903SVG (1).png\"> Enroll\r\n New Scheme</button>\r\n </div> -->\r\n </div>\r\n\r\n <!-- Scheme Details Section -->\r\n <div class=\"scheme-details\">\r\n <div class=\"section d-flex-flex-column gap-2\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Installments</h2>\r\n </div>\r\n <div class=\"payment-list d-flex flex-column gap-2\">\r\n <ng-container *ngIf=\"paymentData.length;else noPayments\">\r\n <ng-container *ngFor=\"let payment of paymentData;let i = index\">\r\n <div class=\"payment-item\">\r\n <div class=\"payment-info\">\r\n <div class=\"payment-icon upcoming\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\">\r\n </div>\r\n <div class=\"payment-details\">\r\n <h4>{{schemeDetails?.schemeName ? schemeDetails?.schemeName : 'N/A'}}</h4>\r\n <p>Due Date : {{payment?.dueDate ? (payment?.dueDate | date : 'dd-MM-yyyy') :\r\n 'N/A'}}</p>\r\n <p *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && payment.paymentStatus === 'PAID'\">Gold Allocated : {{payment?.totalInvestedMetal}} gms</p>\r\n <p *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && paymentData[i-1]?.paymentStatus === 'PAID' && payment?.paymentStatus === 'DUE'\">Gold Allocate today : {{payment?.dueAmount / metalPrice?.price}} gms</p>\r\n <!-- |\r\n Due by: {{getDueDate(payment?.dueDate)}} days</p> -->\r\n </div>\r\n </div>\r\n <div class=\"payment-amount\">\r\n <div class=\"amount-value\" *ngIf=\"payment?.dueAmount\">\u20B9{{payment?.dueAmount ?\r\n payment.dueAmount :\r\n 'N/A'}}</div>\r\n <div class=\"paid-btn payment-status d-flex align-items-center justify-content-center\"\r\n *ngIf=\"payment?.paymentStatus != 'DUE'\">\r\n Paid\r\n </div>\r\n <div class=\"payment-status pay-now-btn cursor-pointer\"\r\n *ngIf=\"paymentData[i-1]?.paymentStatus === 'PAID' && payment?.paymentStatus === 'DUE'\" (click)=\"payDuePayment(payment)\">\r\n <ng-container *ngIf=\"!paymentLoader\">Pay Now</ng-container>\r\n <ng-container *ngIf=\"paymentLoader\">Loading...</ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button>\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Gold Allocate:</span>\r\n <span class=\"amount\">{{storeCharges?.breakdown?.installmentAmount / metalPrice?.price}} gms</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template #showSlab>\r\n <div class=\"main_section\">\r\n <div class=\"slab_header d-flex justify-content-between align-items-center\">\r\n Confirm Redeem Request\r\n <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n </div>\r\n <div class=\"main_body\">\r\n <div class=\"container\">\r\n <div class=\"card\">\r\n <div class=\"card-title\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :\r\n 'N/A'}}</div>\r\n <div class=\"info-row\">\r\n <span>Plan started on</span>\r\n <span class=\"value\">{{schemeDetails.createdTimestamp ?\r\n (schemeDetails.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Monthly Amount Paid</span>\r\n <span class=\"value\">\u20B9{{schemeDetails?.installmentAmount ?\r\n schemeDetails?.installmentAmount : 'N/A'}}</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Total Amount Paid</span>\r\n <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount ?\r\n schemeDetails?.totalPaidAmount : 'N/A' }}</span>\r\n </div>\r\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType !== 'GOLD_PROTECTION' && paidMonth < schemeDetails?.minRedemptionMonth && schemeDetails?.earlyRedemptionCharge\">\r\n <span>Enrollment Fee</span>\r\n <span class=\"value\">\u20B9{{schemeDetails?.earlyRedemptionCharge}}</span>\r\n </div>\r\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\r\n <span>Accumulated gold</span>\r\n <span class=\"value\">{{schemeDetails?.totalInvestedMetal}} gms</span>\r\n </div>\r\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && paidMonth < schemeDetails?.minRedemptionMonth && schemeDetails?.earlyRedemptionCharge\">\r\n <span>Gold Deducted</span>\r\n <span class=\"value\">{{goldDeducted}} gms</span>\r\n </div>\r\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\r\n <span>Accumulated gold after Deduction</span>\r\n <span class=\"value\">{{schemeDetails?.totalInvestedMetal - (paidMonth < schemeDetails?.minRedemptionMonth ? goldDeducted : 0)}} gms</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Total Redeem Amount</span>\r\n <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount - (paidMonth < schemeDetails?.minRedemptionMonth ? schemeDetails?.earlyRedemptionCharge ?? 0 : 0)}}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"card\" *ngIf=\"slabDetails && slabDetails.length > 0\">\r\n <div class=\"card-title center\">Benefits You Will Get</div>\r\n <div class=\"info-row\">\r\n <span>Installments Paid:</span>\r\n <span class=\"value\">{{ schemeDetails?.schemePayments?.length ?\r\n (schemeDetails?.schemePayments?.length -\r\n schemeDetails?.dueMonths) : 'N/A'}}</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Benefit Slab:</span>\r\n <span class=\"value\">{{slabDetails[0]?.minMonths >= 0 ? slabDetails[0]?.minMonths\r\n :\r\n 'N/A'}} - {{slabDetails[0]?.maxMonths ? slabDetails[0]?.maxMonths : 'N/A'}}\r\n months</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Benefit Percentage:</span>\r\n <span class=\"value\">{{slabDetails[0].benefitPercentage >= 0 ?\r\n slabDetails[0].benefitPercentage : 'N/A'}}%</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Benefit Amount:</span>\r\n <span class=\"value highlight\">\u20B9{{slabDetails[0]?.benefitAmount >= 0 ?\r\n slabDetails[0]?.benefitAmount : 'N/A'}}</span>\r\n </div>\r\n </div>\r\n\r\n <button class=\"confirm-btn\" (click)=\"confirmRequest()\"\r\n *ngIf=\"!redeemRequestLoader\">Confirm Request</button>\r\n <button class=\"confirm-btn redeem-request-btn\" *ngIf=\"redeemRequestLoader\">\r\n <mat-spinner></mat-spinner>\r\n Requesting..\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template #noPayments>\r\n <div class=\"d-flex justify-content-center align-items-center w-100 h-100\">\r\n <span>No Upcoming Payments</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n <div class=\"tabs\">\r\n <button class=\"tab d-flex justify-content-center align-items-center active\">Transactions</button>\r\n </div>\r\n <div class=\"transactions\">\r\n <ng-container *ngFor=\"let transaction of schemeDetails.schemePayments\">\r\n <div class=\"transaction-item\" *ngIf=\"transaction.paymentStatus === 'PAID'\">\r\n <div class=\"transaction-status paid\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/484102c1753446573473Group 1707484906.png\">\r\n </div>\r\n <div class=\"transaction-details\">\r\n <h4>{{transaction.emiMonthCount ? transaction.emiMonthCount : 'N/A' }}st Instalment Paid\r\n </h4>\r\n <p>Payment Date : {{transaction.paidDate ? (transaction.paidDate | date : 'dd-MM-yyyy') :\r\n 'N/A'}}\r\n </p>\r\n </div>\r\n <div class=\"transaction-amount\">\r\n {{transaction.paidAmount ? ('\u20B9'+transaction.paidAmount) : 'N/A' }}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f5f5f5;color:#333}.header{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;background-color:#fff;border-bottom:1px solid #e0e0e0}.back-btn{background:none;border:none;font-size:20px;cursor:pointer;padding:7px}.header_left h1{font-size:18px;font-weight:600;flex-grow:1;text-align:center;margin:0 16px}.header-actions{display:flex;gap:8px}.share-btn,.download-btn{font-size:16px;cursor:pointer;padding:9px;border:1px solid lightgrey;border-radius:5px}.details_tab{border:1px solid lightgrey;padding:3%;border-radius:7px;width:62%}.amount-card{background:linear-gradient(90deg,#fffbeb,#fff7ed);margin:16px;padding:20px;border-radius:12px}.amount-info{display:flex;align-items:center;gap:16px}.coin-icon{font-size:32px}.amount-details h2{font-size:24px;font-weight:700;color:#333;margin-bottom:4px}.amount-details p{font-size:14px;color:#666}.scheme-details{padding:0 16px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-title{font-size:18px;font-weight:600}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;margin:12px 0}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.pay-now-btn{background:#10f464}.paid-btn{color:#10f464}.payment-status{font-size:12px;padding:6px;border-radius:4px}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.section-header h3{font-size:18px;font-weight:600}.redeem-requested{background-color:#fff3e0;color:#e65100;padding:4px 12px;border-radius:16px;font-size:12px;font-weight:500}.scheme-info{margin-bottom:24px}.scheme-name{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.scheme-name .label{font-size:16px;font-weight:600}.scheme-name .redeem-status{background-color:#e8f5e8;color:#2e7d32;padding:4px 12px;border-radius:16px;font-size:12px}.scheme-id{color:#666;font-size:14px}.dates-grid{display:flex;gap:16px;border-top:1px solid lightgrey;justify-content:space-between;padding-top:11px}.date-item{display:flex;align-items:center;gap:8px}.date-icon{font-size:16px}.date-info{display:flex;flex-direction:column}.date-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.date-value{font-size:11px;font-weight:500}.completion-info{display:flex;flex-direction:column;align-items:flex-start;grid-column:span 2}.completion-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.completion-value{font-size:11px;font-weight:500}.tabs{display:flex;border-bottom:1px solid #e0e0e0;margin:20px 0;height:5vh;background:#d3d3d3;align-items:center;padding:0 1%;width:fit-content;border-radius:30px}.tab{background:none;border:none;font-size:10px!important;cursor:pointer;border-bottom:2px solid transparent;color:#666;width:6vw!important;height:80%!important}.tab.active{color:#333;border-radius:30px;font-weight:500;background-color:#fff}.transactions{display:flex;flex-direction:column;gap:16px;padding-bottom:20px}.transaction-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid lightgrey;border-radius:8px}.transaction-status{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}.underline{text-decoration:underline}.transaction-status img{width:100%}.transaction-status.paid{background-color:#4caf50;color:#fff}.transaction-status.due{background-color:#e0e0e0;border:2px solid #bdbdbd}.transaction-details{flex-grow:1}.transaction-details h4{font-size:14px;font-weight:500;margin-bottom:2px}.transaction-details p{font-size:12px;color:#666}.transaction-amount{font-size:16px;font-weight:600}@media (max-width: 480px){.dates-grid{grid-template-columns:1fr}.amount-info{justify-content:space-between}.top-dashboard{flex-direction:column}.completion-info{grid-column:span 1;align-items:flex-start}.header{padding:20px 0}.redeem_request{white-space:nowrap;font-size:.7rem!important}.header_left h1{white-space:nowrap;margin:0 6px}}.scheme-section{flex-direction:column;gap:1rem}.details_tab{width:100%;border-radius:12px}.redeem_request{padding:.3rem .6rem;border-radius:4px;font-weight:700;font-size:14px;border:2px solid}.section{padding:12px!important;max-height:75vh;overflow-y:scroll}.upcoming-status{display:flex;justify-content:center;align-items:center;height:35px;white-space:nowrap}.payment-details p{font-size:12px}.tab{width:22vw!important}.scheme-details{padding:0}.enrollment-card{width:100%!important}.amount-card{margin:0 0 12px}.amount-card-section{flex-direction:column}.actions{height:70%}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.enrollment-card{background:#fff;border-radius:12px;padding:0 24px;border:1px solid lightgrey;width:30%}.section{background:#fff;border-radius:12px;padding:24px;margin:24px 0;border:1px solid #e9ecef}.enrollment-row{display:flex;justify-content:space-between;align-items:center;padding:10.5px 0;border-bottom:1px solid #f0f0f0}.enrollment-row:last-child{border-bottom:none}.enrollment-label{color:#666;font-size:14px;font-weight:500}.enrollment-value{color:#333;font-size:14px;font-weight:600}.enrollment-value.zero{color:#ef4444}.container{max-width:400px;margin:32px auto;padding:0 16px}.card{background:#fff;border-radius:16px;box-shadow:0 2px 10px #00000012;padding:22px 18px 14px;margin-bottom:18px}.card-title{font-weight:600;color:#222;font-size:1.18rem;margin-bottom:10px}.card-title.center{text-align:center;font-size:1.09rem;margin-bottom:16px}.info-row{display:flex;justify-content:space-between;align-items:center;font-size:.99rem;margin-top:7px;margin-bottom:0}.info-row .value{font-weight:500;color:#212121}.main_section{min-width:35vw}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.slab_header{padding:2% 3%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:700;font-size:19px;border-bottom:1px solid lightgrey}.info-row .highlight{border-radius:3px;padding:2px 7px;font-weight:600}.confirm-btn{width:100%;display:block;background:#e22d2f;color:#fff;border:none;outline:none;font-size:1.04rem;font-weight:600;padding:8px 0;border-radius:8px;box-shadow:0 1px 4px #e22d2f33;cursor:pointer;margin-top:18px;letter-spacing:.03em;transition:background .2s}.confirm-btn:hover{background:#c31113}.redeem-request-btn{justify-content:center;display:flex;align-items:center;gap:10px}.redeem-request-btn mat-spinner{height:25px!important;width:25px!important}.top-dashboard{display:flex;justify-content:space-between}\n"] }]
|
|
18543
|
+
args: [{ selector: 'simpo-scheme-details', standalone: true, imports: [MatIcon, CommonModule, MatProgressSpinner, MatProgressSpinnerModule, ToastModule], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<div class=\"w-100 h-100\">\r\n <!-- Header -->\r\n <div class=\"header\">\r\n <div class=\"header_left d-flex justify-content-between align-items-center\">\r\n <div class=\"back-btn d-flex align-items-center\" (click)=\"goBack()\"><mat-icon>keyboard_backspace</mat-icon>\r\n </div>\r\n <h1>Passbook Details</h1>\r\n </div>\r\n <div class=\"redeem_request cursor-pointer\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"showBenefitSlab()\"\r\n *ngIf=\"schemeDetails?.passBookStatus == 'ACTIVE'\">Raise Redeem Request</div>\r\n </div>\r\n\r\n <!-- Amount Card -->\r\n <div class=\"d-flex justify-content-between amount-card-section\">\r\n <div class=\"w-100\">\r\n <div class=\"amount-card\">\r\n <div class=\"top-dashboard\">\r\n <div class=\"amount-info\">\r\n <div class=\"coin-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\r\n </div>\r\n <div class=\"amount-details\">\r\n <h2>\u20B9{{schemeDetails?.totalPaidAmount ? schemeDetails?.totalPaidAmount : 'N/A'}}</h2>\r\n <p>{{schemeDetails.schemeType === 'GOLD_PROTECTION' ? 'Deposited Amount' : 'Total Available Scheme Amount'}}</p>\r\n </div>\r\n </div>\r\n <div class=\"amount-info\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"coin-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\r\n </div>\r\n <div class=\"amount-details\">\r\n <h2>{{schemeDetails?.totalInvestedMetal}} gms</h2>\r\n <p>Accumulated Gold</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-start justify-content-around scheme-section\">\r\n <div class=\"details_tab\">\r\n <div class=\"section-header\">\r\n <h3>Passbook Details</h3>\r\n <span class=\"redeem-requested\">{{schemeDetails?.passBookStatus ?\r\n schemeDetails?.passBookStatus?.replaceAll('_', ' ') : 'N/A'}}</span>\r\n </div>\r\n\r\n <div class=\"scheme-info\">\r\n <div class=\"scheme-name\">\r\n <span class=\"label\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :\r\n 'N/A'}}</span>\r\n </div>\r\n <div class=\"scheme-id\">\u20B9{{schemeDetails?.installmentAmount ? schemeDetails?.installmentAmount :\r\n 'N/A'}}\r\n Monthly</div>\r\n </div>\r\n\r\n <div class=\"dates-grid\">\r\n <div class=\"date-item\">\r\n <div class=\"date-icon\">\uD83D\uDCC5</div>\r\n <div class=\"date-info\">\r\n <span class=\"date-label\">Scheme started on</span>\r\n <span class=\"date-value\">{{schemeDetails?.createdTimestamp ?\r\n (schemeDetails?.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\r\n </div>\r\n </div>\r\n <div class=\"date-item\">\r\n <div class=\"date-icon\">\uD83D\uDCC5</div>\r\n <div class=\"date-info\">\r\n <span class=\"date-label\">Maturity Date</span>\r\n <span class=\"date-value\">{{schemeDetails?.maturityDate ?\r\n (schemeDetails?.maturityDate | date:'mediumDate') : 'N/A' }}</span>\r\n </div>\r\n </div>\r\n <div class=\"completion-info\">\r\n <span class=\"completion-label\">Completed EMIs</span>\r\n <span class=\"completion-value\">{{schemeDetails.dueMonths ?\r\n (schemeDetails?.schemePayments?.length-schemeDetails.dueMonths) :\r\n 0}} out\r\n of {{schemeDetails?.schemePayments?.length}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"enrollment-card\">\r\n <div class=\"enrollment-row\">\r\n <span class=\"enrollment-label\">Group Name</span>\r\n <span class=\"enrollment-value\">{{schemeDetails?.schemeName ?\r\n schemeDetails?.schemeName :'N/A' }}</span>\r\n </div>\r\n\r\n <div class=\"enrollment-row\">\r\n <span class=\"enrollment-label\">Group Code</span>\r\n <span class=\"enrollment-value\">{{schemeDetails.enrollmentGroup?.pwcGroupId ?\r\n schemeDetails.enrollmentGroup.pwcGroupId : 'N/A' }}</span>\r\n </div>\r\n\r\n <div class=\"enrollment-row\">\r\n <span class=\"enrollment-label\">Maturity Date</span>\r\n <span class=\"enrollment-value\">{{schemeDetails.maturityDate ? (schemeDetails.maturityDate | date\r\n : 'dd-MM-yyyy') : 'N/A'}}</span>\r\n </div>\r\n <div class=\"enrollment-row\">\r\n <span class=\"enrollment-label\">Enrollment Id</span>\r\n <span class=\"enrollment-value\">{{schemeDetails.enrollmentId ? schemeDetails.enrollmentId : 'N/A'}}</span>\r\n </div>\r\n </div> -->\r\n </div>\r\n </div>\r\n <!-- <div class=\"quick-actions\">\r\n <h3>Quick Actions</h3>\r\n <div class=\"actions d-flex flex-column justify-content-evenly\">\r\n <div class=\"action-item d-flex align-items-center mb-2\">Make Due Payments\r\n </div>\r\n <div class=\"action-item d-flex align-items-center\">Add Nominee</div>\r\n <div class=\"action-item d-flex align-items-center\">Download SOA</div>\r\n </div>\r\n\r\n <button class=\"enroll-btn\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/782673c1753434311903SVG (1).png\"> Enroll\r\n New Scheme</button>\r\n </div> -->\r\n </div>\r\n\r\n <!-- Scheme Details Section -->\r\n <div class=\"scheme-details\">\r\n <div class=\"section d-flex-flex-column gap-2\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Installments</h2>\r\n </div>\r\n <div class=\"payment-list d-flex flex-column gap-2\">\r\n <ng-container *ngIf=\"paymentData.length;else noPayments\">\r\n <ng-container *ngFor=\"let payment of paymentData;let i = index\">\r\n <div class=\"payment-item\">\r\n <div class=\"payment-info\">\r\n <div class=\"payment-icon upcoming\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\">\r\n </div>\r\n <div class=\"payment-details\">\r\n <h4>{{schemeDetails?.schemeName ? schemeDetails?.schemeName : 'N/A'}}</h4>\r\n <p>Due Date : {{payment?.dueDate ? (payment?.dueDate | date : 'dd-MM-yyyy') :\r\n 'N/A'}}</p>\r\n <p *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && payment.paymentStatus === 'PAID'\">Gold Allocated : {{payment?.totalInvestedMetal}} gms</p>\r\n <p *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && paymentData[i-1]?.paymentStatus === 'PAID' && payment?.paymentStatus === 'DUE'\">Gold Allocate today : {{payment?.dueAmount / metalPrice?.price}} gms</p>\r\n <!-- |\r\n Due by: {{getDueDate(payment?.dueDate)}} days</p> -->\r\n </div>\r\n </div>\r\n <div class=\"payment-amount\">\r\n <div class=\"amount-value\" *ngIf=\"payment?.dueAmount\">\u20B9{{payment?.dueAmount ?\r\n payment.dueAmount :\r\n 'N/A'}}</div>\r\n <div class=\"paid-btn payment-status d-flex align-items-center justify-content-center\"\r\n *ngIf=\"payment?.paymentStatus != 'DUE'\">\r\n Paid\r\n </div>\r\n <div class=\"payment-status pay-now-btn cursor-pointer\"\r\n *ngIf=\"paymentData[i-1]?.paymentStatus === 'PAID' && payment?.paymentStatus === 'DUE'\" (click)=\"payDuePayment(payment)\">\r\n <ng-container *ngIf=\"!paymentLoader\">Pay Now</ng-container>\r\n <ng-container *ngIf=\"paymentLoader\">Loading...</ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button>\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Gold Allocate:</span>\r\n <span class=\"amount\">{{storeCharges?.breakdown?.installmentAmount / metalPrice?.price}} gms</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template #showSlab>\r\n <div class=\"main_section\">\r\n <div class=\"slab_header d-flex justify-content-between align-items-center\">\r\n Confirm Redeem Request\r\n <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n </div>\r\n <div class=\"main_body\">\r\n <div class=\"container\">\r\n <div class=\"card\">\r\n <div class=\"card-title\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :\r\n 'N/A'}}</div>\r\n <div class=\"info-row\">\r\n <span>Plan started on</span>\r\n <span class=\"value\">{{schemeDetails.createdTimestamp ?\r\n (schemeDetails.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Monthly Amount Paid</span>\r\n <span class=\"value\">\u20B9{{schemeDetails?.installmentAmount ?\r\n schemeDetails?.installmentAmount : 'N/A'}}</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Total Amount Paid</span>\r\n <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount ?\r\n schemeDetails?.totalPaidAmount : 'N/A' }}</span>\r\n </div>\r\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType !== 'GOLD_PROTECTION' && paidMonth < schemeDetails?.minRedemptionMonth && schemeDetails?.earlyRedemptionCharge\">\r\n <span>Enrollment Fee</span>\r\n <span class=\"value\">\u20B9{{schemeDetails?.earlyRedemptionCharge}}</span>\r\n </div>\r\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\r\n <span>Accumulated gold</span>\r\n <span class=\"value\">{{schemeDetails?.totalInvestedMetal}} gms</span>\r\n </div>\r\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && paidMonth < schemeDetails?.minRedemptionMonth && schemeDetails?.earlyRedemptionCharge\">\r\n <span>Gold Deducted</span>\r\n <span class=\"value\">{{goldDeducted}} gms</span>\r\n </div>\r\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\r\n <span>Accumulated gold after Deduction</span>\r\n <span class=\"value\">{{schemeDetails?.totalInvestedMetal - (paidMonth < schemeDetails?.minRedemptionMonth ? goldDeducted : 0)}} gms</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Total Redeem Amount</span>\r\n <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount - (paidMonth < schemeDetails?.minRedemptionMonth ? schemeDetails?.earlyRedemptionCharge ?? 0 : 0)}}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"card\" *ngIf=\"slabDetails && slabDetails.length > 0\">\r\n <div class=\"card-title center\">Benefits You Will Get</div>\r\n <div class=\"info-row\">\r\n <span>Installments Paid:</span>\r\n <span class=\"value\">{{ schemeDetails?.schemePayments?.length ?\r\n (schemeDetails?.schemePayments?.length -\r\n schemeDetails?.dueMonths) : 'N/A'}}</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Benefit Slab:</span>\r\n <span class=\"value\">{{slabDetails[0]?.minMonths >= 0 ? slabDetails[0]?.minMonths\r\n :\r\n 'N/A'}} - {{slabDetails[0]?.maxMonths ? slabDetails[0]?.maxMonths : 'N/A'}}\r\n months</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Benefit Percentage:</span>\r\n <span class=\"value\">{{slabDetails[0].benefitPercentage >= 0 ?\r\n slabDetails[0].benefitPercentage : 'N/A'}}%</span>\r\n </div>\r\n <div class=\"info-row\">\r\n <span>Benefit Amount:</span>\r\n <span class=\"value highlight\">\u20B9{{slabDetails[0]?.benefitAmount >= 0 ?\r\n slabDetails[0]?.benefitAmount : 'N/A'}}</span>\r\n </div>\r\n </div>\r\n\r\n <button class=\"confirm-btn\" (click)=\"confirmRequest()\"\r\n *ngIf=\"!redeemRequestLoader\">Confirm Request</button>\r\n <button class=\"confirm-btn redeem-request-btn\" *ngIf=\"redeemRequestLoader\">\r\n <mat-spinner></mat-spinner>\r\n Requesting..\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template #noPayments>\r\n <div class=\"d-flex justify-content-center align-items-center w-100 h-100\">\r\n <span>No Upcoming Payments</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n <div class=\"tabs\">\r\n <button class=\"tab d-flex justify-content-center align-items-center active\">Transactions</button>\r\n </div>\r\n <div class=\"transactions\">\r\n <ng-container *ngFor=\"let transaction of schemeDetails.schemePayments\">\r\n <div class=\"transaction-item\" *ngIf=\"transaction.paymentStatus === 'PAID'\">\r\n <div class=\"transaction-status paid\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/484102c1753446573473Group 1707484906.png\">\r\n </div>\r\n <div class=\"transaction-details\">\r\n <h4>{{transaction.emiMonthCount ? transaction.emiMonthCount : 'N/A' }}st Instalment Paid\r\n </h4>\r\n <p>Payment Date : {{transaction.paidDate ? (transaction.paidDate | date : 'dd-MM-yyyy') :\r\n 'N/A'}}\r\n </p>\r\n </div>\r\n <div class=\"transaction-amount\">\r\n {{transaction.paidAmount ? ('\u20B9'+transaction.paidAmount) : 'N/A' }}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f5f5f5;color:#333}.header{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;background-color:#fff;border-bottom:1px solid #e0e0e0}.back-btn{background:none;border:none;font-size:20px;cursor:pointer;padding:7px}.header_left h1{font-size:18px;font-weight:600;flex-grow:1;text-align:center;margin:0 16px}.header-actions{display:flex;gap:8px}.share-btn,.download-btn{font-size:16px;cursor:pointer;padding:9px;border:1px solid lightgrey;border-radius:5px}.details_tab{border:1px solid lightgrey;padding:3%;border-radius:7px;width:62%}.amount-card{background:linear-gradient(90deg,#fffbeb,#fff7ed);margin:16px;padding:20px;border-radius:12px}.amount-info{display:flex;align-items:center;gap:16px}.coin-icon{font-size:32px}.amount-details h2{font-size:24px;font-weight:700;color:#333;margin-bottom:4px}.amount-details p{font-size:14px;color:#666}.scheme-details{padding:0 16px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-title{font-size:18px;font-weight:600}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;margin:12px 0}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.pay-now-btn{background:#10f464}.paid-btn{color:#10f464}.payment-status{font-size:12px;padding:6px;border-radius:4px}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.section-header h3{font-size:18px;font-weight:600}.redeem-requested{background-color:#fff3e0;color:#e65100;padding:4px 12px;border-radius:16px;font-size:12px;font-weight:500}.scheme-info{margin-bottom:24px}.scheme-name{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.scheme-name .label{font-size:16px;font-weight:600}.scheme-name .redeem-status{background-color:#e8f5e8;color:#2e7d32;padding:4px 12px;border-radius:16px;font-size:12px}.scheme-id{color:#666;font-size:14px}.dates-grid{display:flex;gap:16px;border-top:1px solid lightgrey;justify-content:space-between;padding-top:11px}.date-item{display:flex;align-items:center;gap:8px}.date-icon{font-size:16px}.date-info{display:flex;flex-direction:column}.date-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.date-value{font-size:11px;font-weight:500}.completion-info{display:flex;flex-direction:column;align-items:flex-start;grid-column:span 2}.completion-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.completion-value{font-size:11px;font-weight:500}.tabs{display:flex;border-bottom:1px solid #e0e0e0;margin:20px 0;height:5vh;background:#d3d3d3;align-items:center;padding:0 1%;width:fit-content;border-radius:30px}.tab{background:none;border:none;font-size:10px!important;cursor:pointer;border-bottom:2px solid transparent;color:#666;width:6vw!important;height:80%!important}.tab.active{color:#333;border-radius:30px;font-weight:500;background-color:#fff}.transactions{display:flex;flex-direction:column;gap:16px;padding-bottom:20px}.transaction-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid lightgrey;border-radius:8px}.transaction-status{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}.underline{text-decoration:underline}.transaction-status img{width:100%}.transaction-status.paid{background-color:#4caf50;color:#fff}.transaction-status.due{background-color:#e0e0e0;border:2px solid #bdbdbd}.transaction-details{flex-grow:1}.transaction-details h4{font-size:14px;font-weight:500;margin-bottom:2px}.transaction-details p{font-size:12px;color:#666}.transaction-amount{font-size:16px;font-weight:600}@media (max-width: 480px){.dates-grid{grid-template-columns:1fr}.amount-info{justify-content:space-between}.top-dashboard{flex-direction:column}.completion-info{grid-column:span 1;align-items:flex-start}.header{padding:20px 0}.redeem_request{white-space:nowrap;font-size:.7rem!important}.header_left h1{white-space:nowrap;margin:0 6px}}.scheme-section{flex-direction:column;gap:1rem}.details_tab{width:100%;border-radius:12px}.redeem_request{padding:.3rem .6rem;border-radius:4px;font-weight:700;font-size:14px;border:2px solid}.section{padding:12px!important;max-height:75vh;overflow-y:scroll}.upcoming-status{display:flex;justify-content:center;align-items:center;height:35px;white-space:nowrap}.payment-details p{font-size:12px}.tab{width:22vw!important}.scheme-details{padding:0}.enrollment-card{width:100%!important}.amount-card{margin:0 0 12px}.amount-card-section{flex-direction:column}.actions{height:70%}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.enrollment-card{background:#fff;border-radius:12px;padding:0 24px;border:1px solid lightgrey;width:30%}.section{background:#fff;border-radius:12px;padding:24px;margin:24px 0;border:1px solid #e9ecef}.enrollment-row{display:flex;justify-content:space-between;align-items:center;padding:10.5px 0;border-bottom:1px solid #f0f0f0}.enrollment-row:last-child{border-bottom:none}.enrollment-label{color:#666;font-size:14px;font-weight:500}.enrollment-value{color:#333;font-size:14px;font-weight:600}.enrollment-value.zero{color:#ef4444}.container{max-width:400px;margin:32px auto;padding:0 16px}.card{background:#fff;border-radius:16px;box-shadow:0 2px 10px #00000012;padding:22px 18px 14px;margin-bottom:18px}.card-title{font-weight:600;color:#222;font-size:1.18rem;margin-bottom:10px}.card-title.center{text-align:center;font-size:1.09rem;margin-bottom:16px}.info-row{display:flex;justify-content:space-between;align-items:center;font-size:.99rem;margin-top:7px;margin-bottom:0}.info-row .value{font-weight:500;color:#212121}.main_section{min-width:35vw}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.slab_header{padding:2% 3%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:700;font-size:19px;border-bottom:1px solid lightgrey}.info-row .highlight{border-radius:3px;padding:2px 7px;font-weight:600}.confirm-btn{width:100%;display:block;background:#e22d2f;color:#fff;border:none;outline:none;font-size:1.04rem;font-weight:600;padding:8px 0;border-radius:8px;box-shadow:0 1px 4px #e22d2f33;cursor:pointer;margin-top:18px;letter-spacing:.03em;transition:background .2s}.confirm-btn:hover{background:#c31113}.redeem-request-btn{justify-content:center;display:flex;align-items:center;gap:10px}.redeem-request-btn mat-spinner{height:25px!important;width:25px!important}.top-dashboard{display:flex;justify-content:space-between}\n"] }]
|
|
18545
18544
|
}], ctorParameters: () => [{ type: StorageServiceService }, { type: RestService }, { type: i1$1.MatDialog }, { type: EventsService }, { type: i2$2.Router }, { type: i6$1.MessageService }], propDecorators: { schemeDetails: [{
|
|
18546
18545
|
type: Input,
|
|
18547
18546
|
args: ["schemeDetails"]
|
|
@@ -18668,11 +18667,11 @@ class PassbookTransactionsComponent {
|
|
|
18668
18667
|
});
|
|
18669
18668
|
}
|
|
18670
18669
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PassbookTransactionsComponent, deps: [{ token: StorageServiceService }, { token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18671
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PassbookTransactionsComponent, isStandalone: true, selector: "simpo-passbook-transactions", ngImport: i0, template: "<section class=\"total-container p-2 h-100\">\r\n <div class=\"d-flex text-start fs-20 lh-28 fw-bold clr-primary mb-3 p-1\">\r\n Transactions\r\n </div>\r\n <div class=\"transactions h-100 overflow-scroll p-1\"
|
|
18670
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PassbookTransactionsComponent, isStandalone: true, selector: "simpo-passbook-transactions", ngImport: i0, template: "<section class=\"total-container p-2 h-100\">\r\n <div class=\"d-flex text-start fs-20 lh-28 fw-bold clr-primary mb-3 p-1\">\r\n Transactions\r\n </div>\r\n <div class=\"transactions h-100 overflow-scroll p-1\">\r\n <div class=\"transaction w-100 p-3 d-flex justify-content-between align-items-center bx-shd mb-3\"\r\n *ngFor=\"let transaction of allTransactions\">\r\n <div class=\"left d-flex align-items-center gap-3\">\r\n <div class=\"d-flex image_container\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/558782c1755619706471Group 1707484906.png\"\r\n alt=\"load\">\r\n </div>\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"top lh-20 fw-bold clr-primary\">{{transaction?.emiMonthCount ? transaction?.emiMonthCount\r\n : 'N/A' }} Instalment Paid</div>\r\n <div class=\"bottom d-flex gap-2\">\r\n <div class=\"fs-14 lh-20 clr-secondary transaction_date fw-bold\">\r\n {{transaction?.paidDate ? (transaction?.paidDate | date:'dd-MM-yyyy':'UTC') : 'N/A'}}\r\n </div>\r\n <div class=\"fs-14 lh-20 clr-secondary fw-bold plan_name\">\r\n • {{transaction?.planName ? transaction?.planName : 'N/A'}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex text-end\">\r\n <div class=\"fs-18 lh-28 fw-bold clr-primary installment_amount\">\u20B9 {{transaction?.paidAmount ?\r\n transaction?.paidAmount :\r\n 'N/A'}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n</section>", styles: ["*{font-family:var(--website-font-family)}.fs-20{font-size:20px}.fs-18{font-size:18px}.fs-14{font-size:14px}.lh-28{line-height:28px}.lh-20{line-height:20px}.clr-primary{color:#020817}.clr-secondary{color:#0006}.bx-shd{box-shadow:#63636333 0 2px 8px;border-radius:8px}@media only screen and (max-width:475px){.total-container{padding:unset!important}.plan_name,.transaction_date,.installment_amount{font-size:10px;white-space:nowrap}.image_container{width:30px}.image_container img{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }] }); }
|
|
18672
18671
|
}
|
|
18673
18672
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PassbookTransactionsComponent, decorators: [{
|
|
18674
18673
|
type: Component,
|
|
18675
|
-
args: [{ selector: 'simpo-passbook-transactions', standalone: true, imports: [CommonModule], template: "<section class=\"total-container p-2 h-100\">\r\n <div class=\"d-flex text-start fs-20 lh-28 fw-bold clr-primary mb-3 p-1\">\r\n Transactions\r\n </div>\r\n <div class=\"transactions h-100 overflow-scroll p-1\"
|
|
18674
|
+
args: [{ selector: 'simpo-passbook-transactions', standalone: true, imports: [CommonModule], template: "<section class=\"total-container p-2 h-100\">\r\n <div class=\"d-flex text-start fs-20 lh-28 fw-bold clr-primary mb-3 p-1\">\r\n Transactions\r\n </div>\r\n <div class=\"transactions h-100 overflow-scroll p-1\">\r\n <div class=\"transaction w-100 p-3 d-flex justify-content-between align-items-center bx-shd mb-3\"\r\n *ngFor=\"let transaction of allTransactions\">\r\n <div class=\"left d-flex align-items-center gap-3\">\r\n <div class=\"d-flex image_container\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/558782c1755619706471Group 1707484906.png\"\r\n alt=\"load\">\r\n </div>\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"top lh-20 fw-bold clr-primary\">{{transaction?.emiMonthCount ? transaction?.emiMonthCount\r\n : 'N/A' }} Instalment Paid</div>\r\n <div class=\"bottom d-flex gap-2\">\r\n <div class=\"fs-14 lh-20 clr-secondary transaction_date fw-bold\">\r\n {{transaction?.paidDate ? (transaction?.paidDate | date:'dd-MM-yyyy':'UTC') : 'N/A'}}\r\n </div>\r\n <div class=\"fs-14 lh-20 clr-secondary fw-bold plan_name\">\r\n • {{transaction?.planName ? transaction?.planName : 'N/A'}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex text-end\">\r\n <div class=\"fs-18 lh-28 fw-bold clr-primary installment_amount\">\u20B9 {{transaction?.paidAmount ?\r\n transaction?.paidAmount :\r\n 'N/A'}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n</section>", styles: ["*{font-family:var(--website-font-family)}.fs-20{font-size:20px}.fs-18{font-size:18px}.fs-14{font-size:14px}.lh-28{line-height:28px}.lh-20{line-height:20px}.clr-primary{color:#020817}.clr-secondary{color:#0006}.bx-shd{box-shadow:#63636333 0 2px 8px;border-radius:8px}@media only screen and (max-width:475px){.total-container{padding:unset!important}.plan_name,.transaction_date,.installment_amount{font-size:10px;white-space:nowrap}.image_container{width:30px}.image_container img{width:100%}}\n"] }]
|
|
18676
18675
|
}], ctorParameters: () => [{ type: StorageServiceService }, { type: RestService }] });
|
|
18677
18676
|
|
|
18678
18677
|
class UserProfileComponent extends BaseSection {
|
|
@@ -19221,7 +19220,7 @@ class UserProfileComponent extends BaseSection {
|
|
|
19221
19220
|
this.getAllSchemes();
|
|
19222
19221
|
}
|
|
19223
19222
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserProfileComponent, deps: [{ token: i2$2.Router }, { token: EventsService }, { token: RestService }, { token: StorageServiceService }, { token: CartService }, { token: i1$1.MatDialog }, { token: i8$3.MatBottomSheet }, { token: i2$3.CookieService }, { token: i6$1.MessageService }, { token: i2$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
19224
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserProfileComponent, isStandalone: true, selector: "simpo-user-profile", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [spacingHorizontal]=\"styles?.layout\" [ngStyle]=\"{'max-height': '100vh', 'z-index': isMobile ? '100000000' : ''}\"\r\n [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"p-4 profile-box shadow-lg\"\r\n style=\"width: 25%; border-radius: 20px; height: fit-content; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 1px solid rgba(0,0,0,0.05);\"\r\n [style.order]=\"styles?.swap ? '1' : '0'\">\r\n\r\n <!-- Profile Header Section -->\r\n <div class=\"d-flex align-items-center profile-header\"\r\n style=\"gap: 15px; height: 80px; margin-bottom: 20px; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 15px; backdrop-filter: blur(10px);\">\r\n <div class=\"profile-image-wrapper\" style=\"position: relative;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100 profile-icon\"\r\n style=\"border: 3px solid #e3f2fd; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: all 0.3s ease;\">\r\n <div class=\"online-indicator\"\r\n style=\"position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4caf50; border: 2px solid white; border-radius: 50%;\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"profile-details flex-grow-1\">\r\n <h4 class=\"font-weight-bold mb-2\" style=\"color: #2c3e50; font-size: 1.1rem; margin-bottom: 8px;\">\r\n {{getUserDetails?.contact?.name}}</h4>\r\n\r\n <div class=\"contact-info\" style=\"display: flex; flex-direction: column; gap: 6px;\">\r\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n *ngIf=\"getUserDetails?.contact?.mobile?.length\"\r\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">stay_primary_portrait</mat-icon>\r\n <span>{{getUserDetails?.contact?.mobile}}</span>\r\n </h6>\r\n\r\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n *ngIf=\"getUserDetails?.contact?.email?.length\"\r\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">mail_outline</mat-icon>\r\n <span class=\"w-100 text-overflow\">{{getUserDetails?.contact?.email}}</span>\r\n </h6>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Navigation Tabs Section -->\r\n <div class=\"tabs-container\" style=\"margin-bottom: 20px;\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center tab-item\"\r\n style=\"gap: 12px; cursor: pointer; padding: 16px 12px; margin: 2px 0; border-radius: 12px; transition: all 0.3s ease; position: relative; overflow: hidden;\"\r\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '1px solid rgba(0,0,0,0.06)' : ''\"\r\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\"\r\n [style.backgroundColor]=\"tab.status ? styles?.background?.color : 'transparent'\"\r\n [style.borderColor]=\"tab.status ? styles?.background?.accentColor : 'transparent'\">\r\n <div class=\"tab-icon-wrapper\"\r\n style=\"width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;\">\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n style=\"height: 20px; width: 20px; object-fit: contain; transition: transform 0.3s ease;\">\r\n </div>\r\n\r\n <div class=\"tab-label font-weight-normal\" style=\"font-size: 0.9rem; transition: all 0.3s ease;\">\r\n {{tab.value}}</div>\r\n\r\n <!-- Hover effect background -->\r\n <div class=\"tab-hover-bg\"\r\n style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,123,255,0.05) 0%, rgba(0,123,255,0.02) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1;\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- Action Buttons Section -->\r\n <div class=\"d-flex action-buttons\"\r\n style=\"gap: 10px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.06);\">\r\n <button class=\"edit-btn flex-grow-1\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\"\r\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; background: transparent; border: 2px solid; transition: all 0.3s ease; position: relative; overflow: hidden;\">\r\n Edit Profile\r\n </button>\r\n\r\n <button class=\"logout-btn flex-grow-1\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\"\r\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; border: none; color: white; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.15);\">\r\n Logout\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"orders-sec shadow-lg\" [style.order]=\"styles?.swap ? '0' : '1'\">\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Details'\">\r\n <ng-container *ngTemplateOutlet=\"SchemeDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Transactions'\">\r\n <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n <simpo-list-home-appointment></simpo-list-home-appointment>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <div class=\"w-100 position-relative mobile-height\" style=\"height: 80vh;\">\r\n <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\"\r\n *ngIf=\"selectedSidePanelTab != 'Scheme_Details'\">\r\n <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\"\r\n (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n </div>\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"''\">\r\n <section class=\"top-sec\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\"\r\n style=\"width: 50px; height: 50px;\">\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\">\r\n <mat-icon>stay_primary_portrait</mat-icon>\r\n <span>{{getUserDetails?.contact?.mobile}}</span>\r\n </h6>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\"\r\n *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon>\r\n <span>{{getUserDetails?.contact?.email}}</span>\r\n </h6>\r\n </div>\r\n </section>\r\n <section class=\"list-sec\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\"\r\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\"\r\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n [style.color]=\"styles?.background?.accentColor\">\r\n <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">\r\n {{tab.value}}</div>\r\n </div>\r\n\r\n </ng-container>\r\n </section>\r\n <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\r\n <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Transactions'\">\r\n <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n <simpo-list-home-appointment></simpo-list-home-appointment>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isEcommerce]=\"true\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n <h3 class=\"onlyDesktop mb-3\">My Orders</h3>\r\n <!-- <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n <ng-container *ngFor=\"let tab of tabs\">\r\n <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">\r\n {{tab.value}}</div>\r\n </ng-container>\r\n </div> -->\r\n <div class=\"order-list\">\r\n <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #showEmptyScreen>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <div class=\"cart-text \">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <div class=\"heading-medium d-flex justify-content-center content-side\"\r\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n <simpo-text-editor [(value)]=\"text.value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\"\r\n (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n <div class=\"d-flex justify-content-between mb-2\">\r\n <h3 class=\"title-text\">My Address</h3>\r\n <button class=\"address-btn\" (click)=\"addNewAddress()\"\r\n [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n <div class=\"address-list\">\r\n <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\r\n <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n <div class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card \" [style.width]=\"getProductWidth\">\r\n <div class=\"card-body p-3\">\r\n <!-- Header Section -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n <div class=\"address-info d-flex align-items-center justify-content-between w-100\">\r\n <h4 class=\"mb-0 fw-semibold\">{{address.receiverName}}</h4>\r\n <div class=\"icon-grp d-flex\">\r\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n (click)=\"editAddress(idx)\">edit</mat-icon>\r\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"address-content mb-3\">\r\n <div class=\"address-line mb-2\">\r\n <span class=\"text-muted small d-block\">Address</span>\r\n <span class=\"address-text\">{{address.addressLine1}}</span>\r\n </div>\r\n <div class=\"phone-info\">\r\n <span class=\"text-muted small d-block\">Phone</span>\r\n <span class=\"phone-number fw-bold\">{{address.receiverPhone}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-template #showEmptyAddress>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\r\n <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery\r\n </div>\r\n <!-- </ng-container> -->\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n <h3 class=\"onlyDesktop\">My Accounts</h3>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n <h3 class=\"onlyDesktop\">Logout</h3>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n <div (click)=\"goToOrderDetails(order)\" class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card\">\r\n <div class=\"card-body p-3\" [style.--background-color]=\"styles?.background?.color\">\r\n <!-- Header Section -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n <div class=\"order-number\">\r\n <h4 class=\"mb-0 fw-semibold\">{{\"Order\" + \" \" + order.orderNum}}</h4>\r\n </div>\r\n <div class=\"arrow-icon\">\r\n <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"ordered-item row mb-2\">\r\n <ng-container *ngFor=\"let item of getOrderedItems(order)\">\r\n <div class=\"item-card col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img [src]=\"item?.imgUrl\" alt=\"Product Image\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"item-img w-50\">\r\n <div class=\"cart-item-name\">{{item?.itemName}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <!-- Middle Section -->\r\n <div class=\"order-details\">\r\n <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-1\">\r\n <span class=\"text-muted small mb-3 mb-sm-0\">\r\n {{order.createdTimeStamp | date: 'dd MMMM yyyy'}}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"amount-section\">\r\n <span class=\"h5 mb-0 text-success fw-bold\">\r\n <span [innerHTML]=\"currency\"></span>\r\n {{(order.billDetails.discountAmount ?\r\n (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount +\r\n order?.billDetails?.totalTaxAfterDiscount) :\r\n order.billDetails.totalGrossValue) | number:'1.0-2'}}\r\n </span>\r\n </div>\r\n <div class=\"status-section\">\r\n <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">\r\n {{order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | titlecase}}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #WishlistDetails>\r\n <h3 class=\"onlyDesktop\">My Wishlist</h3>\r\n <div class=\"wishlist-list\" *ngIf=\"wishlistData?.length; else showEmptyWishlistScreen\">\r\n <div class=\"d-flex flex-wrap\" style=\"gap: 10px;\">\r\n <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n <div class=\"address-card mb-2\">\r\n <div class=\"card-body p-4\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-auto\">\r\n <div class=\"product-image-wrapper\">\r\n <img loading=\"lazy\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"product-img rounded\" [src]=\"item.imgUrl\" alt=\"Product Image\">\r\n </div>\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"product-details\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div\r\n class=\"col-auto text-end d-flex justify-content-between align-items-center w-100\">\r\n <h6 class=\"product-name mb-2 fw-semibold text-dark\">\r\n {{item.itemName}}\r\n </h6>\r\n <div class=\"delete-action\" *ngIf=\"!isMobile\">\r\n <button class=\"btn btn-sm delete-btn\" (click)=\"deleteFromWhislist(item)\"\r\n title=\"Remove from wishlist\">\r\n <mat-icon class=\"small-icon\">delete</mat-icon>\r\n </button>\r\n </div>\r\n <div class=\"delete-action mt-2\" *ngIf=\"isMobile\">\r\n <button class=\"btn btn-sm w-100\" (click)=\"deleteFromWhislist(item)\">\r\n <mat-icon class=\"small-icon me-1\">delete</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"product-price mb-3\">\r\n <span class=\"h5 text-success fw-bold mb-0\">\r\n <span [innerHTML]='currency'></span>{{item.discountedPrice}}\r\n </span>\r\n <span class=\"text-muted small ms-2\" *ngIf=\"item.quantity\">\r\n ({{item.quantity}} items)\r\n </span>\r\n </div>\r\n <div class=\"action-buttons d-flex gap-2\">\r\n <div class=\"quantity-controls d-flex align-items-center w-50 justify-content-center\"\r\n *ngIf=\"item.quantity\">\r\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n (click)=\"addToFav(item, 'SUBSTRACT')\">\r\n -\r\n </button>\r\n <span class=\"quantity-display px-3 py-1 bg-light rounded mx-1\">\r\n {{item.quantity}}\r\n </span>\r\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n (click)=\"addToFav(item, 'ADD')\"> +\r\n </button>\r\n </div>\r\n <button class=\"btn btn-sm w-50\" *ngIf=\"!item.quantity\"\r\n (click)=\"addToFav(item, 'ADD')\">\r\n + Add Quantity\r\n </button>\r\n <button class=\"btn btn-sm w-50\" (click)=\"moveToCart(item)\">\r\n Move to Cart\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n <ng-template #showEmptyWishlistScreen>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container>\r\n <div class=\"heading-medium d-flex justify-content-center\">\r\n Your Wishlist is Empty</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #SchemeDetails>\r\n <div class=\"header mb-3 f-18 fw-600\">Current Scheme Enrollments - 4</div>\r\n <div class=\"row gap-2\">\r\n <ng-container *ngFor=\"let scheme of [1,1,1,1]\">\r\n <div class=\"cards d-flex flex-column w-32 mb-2 p-0 \">\r\n <div class=\"card-header row gap-2\">\r\n <div class=\"card-head-left col-7\">\r\n <div class=\"scheme-type fs-15 fw-600\">Group Investment Scheme</div>\r\n <div class=\"scheme-id fw-600\">GIS6K_000231004</div>\r\n </div>\r\n <div class=\"card-head-right col-4 text-center align-content-center\">\r\n <div class=\"scheme-amount fw-600\">\u20B96,000/M</div>\r\n </div>\r\n </div>\r\n <div class=\"card-body d-flex p-0 mb-3\">\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/425719c1752566628577star.png\" alt=\"\"\r\n class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">\u20B913,800</div>\r\n <div class=\"card-sub-text text-center\">Total Acheived</div>\r\n </div>\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/229997c1752567131192brand_7959220.png\"\r\n alt=\"\" class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">\u20B91,000</div>\r\n <div class=\"card-sub-text text-center\">Rewards</div>\r\n </div>\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/760761c1752567279970calendar (1).png\"\r\n alt=\"\" class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">8</div>\r\n <div class=\"card-sub-text text-center\">Due Months</div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer row\">\r\n <div class=\"col-6 d-flex gap-2 p-0\">\r\n <span class=\"footer-text text-nowrap\">Start On :</span><span class=\"date-text text-nowrap\">30\r\n may 2025</span>\r\n </div>\r\n <div class=\"col-6 d-flex gap-2 p-0\">\r\n <span class=\"footer-text text-nowrap\">Maturity On :</span><span class=\"date-text text-nowrap\">25\r\n may 2026</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n<ng-template #SchemePassbook>\r\n <div class=\"w-100 h-100 overflow-scroll passbook_container\">\r\n <div class=\"header d-flex flex-column\">\r\n <div class=\"d-flex align-items-center justify-content-end mb-3\" *ngIf=\"storeListing.length >= 2\"><select\r\n class=\"store-listing\" (change)=\"changeStore($event)\">\r\n <option value=\"\">Select Store</option>\r\n <option [value]=\"store.id\" *ngFor=\"let store of storeListing\">{{store.storeName}}</option>\r\n </select></div>\r\n <div class=\"scheme-overview d-flex flex-column\">\r\n <div class=\"d-flex gap-2\">\r\n <div class=\"available-savings\">\r\n <div class=\"d-flex align-items-center gap-1 w-100 justify-content-between\">\r\n <h3>Available Savings</h3>\r\n <span class=\"amount_logo\">\uD83D\uDCB0</span>\r\n </div>\r\n\r\n <div class=\"amount\">{{totalSavings ? totalSavings :\r\n '0'}}</div>\r\n </div>\r\n <div class=\"active-schemes\">\r\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n <h3>Active Passbooks</h3>\r\n <div class=\"auto-pay-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\r\n </div>\r\n </div>\r\n <div class=\"scheme-count\">{{totalSchemes?.length ?\r\n totalSchemes.length : '0'}}</div>\r\n <div class=\"subtitle\">On Track</div>\r\n </div>\r\n <div class=\"active-schemes\" *ngIf=\"totalAccumulatedGold > 0\">\r\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n <h3>Accumulated Gold </h3>\r\n <div class=\"auto-pay-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/153448c1756808418216accumulated_icon.png\">\r\n </div>\r\n </div>\r\n <div class=\"scheme-count\">{{totalAccumulatedGold}} gms</div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"overAllDues?.length\">\r\n <div class=\"section d-flex-flex-column gap-2\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Due Payments</h2>\r\n </div>\r\n <div class=\"payment-list d-flex flex-column gap-2\">\r\n <ng-container *ngIf=\"overAllDues?.length; else showEmptyPayment\">\r\n <div class=\"payment-item overdue\" *ngFor=\"let payment of overAllDues\">\r\n <div class=\"payment-info\">\r\n <div class=\"payment-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/403142c1753435378127Background.svg\">\r\n <!-- <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\"\r\n *ngIf=\"!payment.overdueStatus && payment.paymentStatus === 'PAID'\"> -->\r\n </div>\r\n <div class=\"payment-details\">\r\n <h4>{{payment.schemeName}} - {{payment.emiMonthCount}}rd EMI</h4>\r\n <span>Date {{payment.dueDate ? (payment.dueDate | date:'dd-MM-yyyy') :\r\n 'N/A'}}\r\n <!-- <span *ngIf=\"payment.overdueStatus\">| Due by: {{payment.daysOverdue\r\n ? payment.daysOverdue : 0}}</span> --></span>\r\n </div>\r\n </div>\r\n <div class=\"payment-amount\">\r\n <div class=\"amount-value\">\u20B9{{payment.dueAmount ? payment.dueAmount :\r\n '0'}}\r\n </div>\r\n <div class=\"payment-status overdue-status cursor-pointer\"\r\n (click)=\"payDue(payment)\">\r\n <ng-container *ngIf=\"!payDueLoader\">Pay Now</ng-container>\r\n <ng-container *ngIf=\"payDueLoader\">Loading...</ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #showEmptyPayment>\r\n <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n <span>No Due Payments</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"section mt-3\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Your Active Passbooks</h2>\r\n </div>\r\n\r\n <div class=\"schemes-grid\">\r\n <ng-container *ngIf=\"totalSchemes && totalSchemes.length > 0; else showActiveScheme\">\r\n <div class=\"scheme-card d-flex flex-column gap-2 cursor-pointer\"\r\n *ngFor=\"let scheme of totalSchemes; let i = index\" (click)=\"viewSchemeDetails(scheme)\">\r\n <div class=\"scheme-header\">\r\n <div>\r\n <div class=\"scheme-title\">{{ scheme?.schemeName || 'N/A' }}</div>\r\n <div class=\"scheme-amount\">\u20B9{{ scheme?.installmentAmount || '0' }}/Monthly</div>\r\n </div>\r\n <div class=\"scheme-date\">\r\n <span>Enrolled: {{ scheme?.createdTimestamp ? (scheme?.createdTimestamp |\r\n date:'dd-MM-yyyy') :\r\n 'N/A' }}</span>\r\n <!-- <span>Maturity: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n 'N/A' }}</span> -->\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-status d-flex justify-content-center align-items-center\"\r\n [ngClass]=\"scheme?.passBookStatus === 'REDEEM_REQUESTED' ? 'redeem_status' : (scheme?.passBookStatus === 'ACTIVE' ? 'active-status' : 'redeem_status')\">\r\n {{\r\n scheme.passBookStatus ? scheme.passBookStatus.replaceAll('_', ' ') : 'N/A'\r\n }}\r\n </div>\r\n\r\n <div class=\"scheme-stats\">\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">{{ scheme?.totalPaidAmount || '0' }}</div>\r\n <div class=\"stat-label\">Deposited Amount</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">\r\n {{\r\n scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n (scheme?.schemePayments?.length -\r\n scheme.dueMonths) : 'N/A'\r\n }}\r\n </div>\r\n <div class=\"stat-label\">Paid Months</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">{{scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n scheme?.dueMonths : 'N/A' }}</div>\r\n <div class=\"stat-label\">Due Months</div>\r\n </div>\r\n <div class=\"stat\" *ngIf=\"scheme?.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"stat-value\">{{ scheme?.totalInvestedMetal || '0' }} gms</div>\r\n <div class=\"stat-label\">Accumulated Gold</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-footer\">\r\n <span>Maturity Date: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n 'N/A' }}</span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #showActiveScheme>\r\n <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n <span>No Active Scheme</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n <!-- <div class=\"auto-pay\">\r\n <div class=\"auto-pay-icon mobile-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/966462c1753439662355Background.png\"></div>\r\n <div class=\"auto-pay-content\">\r\n <div class=\"auto-pay-title\">Manage Auto-pay</div>\r\n <div class=\"auto-pay-desc\">Pause, resume or cancel auto payment subscription</div>\r\n </div>\r\n <button class=\"manage-btn\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/409230c1753439564830SVG.png\"> Manage</button>\r\n </div> -->\r\n </div>\r\n</ng-template>\r\n<ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button>\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #Scheme_Details>\r\n <simpo-scheme-details [schemeDetails]=\"schemeDetails\" [data]=\"data\" [metalPrice]=\"metalPrice\"\r\n (gotoSchemeOverview)=\"selectedSidePanelTab = 'Scheme Passbook'\"></simpo-scheme-details>\r\n</ng-template>\r\n<ng-template #Transactions>\r\n <simpo-passbook-transactions></simpo-passbook-transactions>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n</ngx-skeleton-loader>\r\n", styles: [".total-container{position:relative;height:auto;overflow:scroll;background:#fff!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;margin-left:20px;padding:15px;overflow-y:auto;overflow-x:hidden;border:1px solid #d3d3d324;border-radius:20px;max-height:70vh}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}.profile-box{box-shadow:#00000029 0 1px 4px}h1{font-weight:600}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.amount_logo{font-size:27px}@media screen and (max-width: 475px){.store-listing{width:35%!important}.total-container{height:100%!important}.amount_logo{font-size:27px}.amount,.scheme-count{font-size:20px!important}.title-text{font-size:24px}.schemes-grid{flex-wrap:wrap;overflow-y:scroll;height:95%}.section{height:auto}.scheme-status{white-space:nowrap}.scheme-card{width:100%}.header{flex-direction:column-reverse}.scheme-overview{width:100%!important}.scheme-overview div{flex-wrap:wrap}.available-savings h3{font-size:17px!important}.quick-actions{width:100%}.active-schemes h3{font-size:17px!important}.auto-pay-icon{width:55px!important;height:50px!important}.mobile-icon{width:30px!important}.manage-btn{width:25%!important}.tab-selected div{font-weight:600!important}.mobile-height{height:100%!important}.passbook_container{height:90%!important;overflow-x:scroll!important}.passbook_container .section{max-height:unset!important;padding:10px!important}.section-header{margin-bottom:2px!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px 0;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.list-sec .tab-selected{border-top-left-radius:10px!important;border-bottom-left-radius:10px}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:0 10px;width:100vw;margin-bottom:20px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.profile-icon{width:70px}.text-overflow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width:1200px) and (max-width: 1330px){.profile-details{width:75%!important}}@media screen and (min-width:1200px){.manage-btn{width:10%!important}}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}.cards{box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;border-radius:12px}.cards .card-header{padding:8px}.cards .card-header .card-head .scheme-type{font-size:15px}.cards .card-body .col-4 .card-sub-text{font-size:14px}.cards .card-footer{border-top:2px dashed!important;margin:0 5px;padding:10px}.cards .card-footer span{font-size:13px}.cards .card-footer .date-text{font-weight:600}.cards .card-footer div{font-size:15px}.fs-15{font-size:14px}.w-32{width:32.5%!important}.w-40{width:40px!important}.f-18{font-size:18px}.fw-600{font-weight:600}.scheme-id{font-size:13px}.order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}.order-card:hover .arrow-icon mat-icon{transform:translate(3px)}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.cart-item-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa);width:49%}.address-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.address-card .card-body{position:relative;overflow:hidden}.address-text{color:#495057;line-height:1.4}.btn-sm{transition:all .3s ease}.small-icon{font-size:16px!important}.badge.bg-light{color:#495057!important;background:linear-gradient(135deg,#e9ecef,#f8f9fa)!important;border:1px solid #dee2e6}@media (max-width: 576px){.address-card .card-body{padding:1rem!important}.address-card{width:100%!important}.btn-sm{display:flex;justify-content:center;align-items:center;color:red!important}.btn-sm mat-icon{font-size:13px}.btn-sm{width:100%;margin-bottom:.25rem}}.profile-box{transition:all .3s ease;position:relative}.profile-box:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001f!important}.profile-icon:hover{transform:scale(1.05);box-shadow:0 6px 20px #00000026!important}.contact-item:hover{color:#007bff!important}.tab-item:hover{background:linear-gradient(90deg,#007bff14,#007bff08)!important;transform:translate(4px)}.tab-item:hover .tab-hover-bg{opacity:1}.tab-item:hover img{transform:scale(1.1)}.tab-selected{border-left:4px solid;font-weight:600!important;border-bottom:unset!important}.tab-selected .tab-label{font-weight:600!important}.edit-btn:hover{background:linear-gradient(135deg,#007bff0d,#007bff1a)!important;transform:translateY(-1px);box-shadow:0 4px 12px #007bff33}.logout-btn:hover{transform:translateY(-1px);box-shadow:0 4px 15px #00000040!important;filter:brightness(1.05)}.tabs-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.tabs-container::-webkit-scrollbar{width:4px}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.profile-box{animation:fadeInUp .6s ease-out}@media (max-width: 768px){.profile-box{width:100%!important}.profile-header{flex-direction:column;height:auto!important;text-align:center}.action-buttons{flex-direction:column}}.scheme-overview{gap:20px;width:100%}.available-savings{background:linear-gradient(135deg,#fff3cd,#ffeaa7);padding:20px;border-radius:12px;position:relative;flex:1}.available-savings .amount{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.available-savings h3{font-size:14px;color:#856404;margin-bottom:8px;font-weight:500}.subtitle{font-size:12px;color:#666}.active-schemes{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;position:relative;flex:1}.active-schemes h3{font-size:14px;color:#666;margin-bottom:8px;font-weight:500}.scheme-count{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:1px solid #e9ecef;max-height:40vh;overflow-x:scroll}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:18px;font-weight:600}.view-all{color:#6c5ce7;font-size:16px}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.overdue{background:#fef2f2;border:1px solid #FECACA}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.upcoming{background:#f8f9fa;color:#666}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.payment-status{font-size:12px;padding:4px 8px;border-radius:4px;color:#fff;white-space:nowrap}.overdue-status{background:#dc3545}.upcoming-status{background:#6c757d}.schemes-grid{display:flex;gap:10px;overflow-x:scroll}.scheme-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e9ecef;position:relative;min-width:34vw}.scheme-header{display:flex;justify-content:space-between;align-items:flex-start}.scheme-title{font-size:16px;font-weight:600;margin-bottom:4px}.scheme-amount{font-size:12px;color:#666}.scheme-date{font-size:12px;color:#666;display:flex;flex-direction:column;gap:10px}.scheme-status{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;text-transform:uppercase;min-width:15%;max-width:fit-content}.redeem_status{background:orange;color:#fff}.active-status{background:#22c55e;color:#fff}.scheme-stats{display:flex;justify-content:space-between}.stat{text-align:center}.stat-value{font-size:20px;font-weight:700;color:#333}.stat-label{font-size:11px;color:#666;text-transform:uppercase;margin-top:4px}.scheme-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666}.price-notice{background:#fce7f3;color:#be185d;padding:8px 12px;border-radius:6px;font-size:11px}.auto-pay{background:#fff3cd;padding:16px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-top:20px}.auto-pay-icon{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.auto-pay-icon img{width:100%}.auto-pay-content{flex:1}.auto-pay-title{font-size:14px;font-weight:600;margin-bottom:4px}.auto-pay-desc{font-size:12px;color:#666}.manage-btn{background:none;border:1px solid #dee2e6;padding:6px 0;border-radius:4px;font-size:13px!important;cursor:pointer;display:flex;justify-content:space-evenly}.store-listing{font-size:14px;width:20%;height:30px;margin-bottom:13px;border:1px solid #e9ecef;border-radius:5px;outline:none;padding-left:5px;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: OrderDetailsComponent, selector: "simpo-order-details", inputs: ["responseData", "data", "index", "edit", "delete", "customClass", "orderDetailData"], outputs: ["goBackEmitter"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "component", type: SchemeDetailsComponent, selector: "simpo-scheme-details", inputs: ["schemeDetails", "data", "metalPrice"], outputs: ["gotoSchemeOverview"] }, { kind: "component", type: ListHomeAppointmentComponent, selector: "simpo-list-home-appointment" }, { kind: "component", type: PassbookTransactionsComponent, selector: "simpo-passbook-transactions" }] }); }
|
|
19223
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserProfileComponent, isStandalone: true, selector: "simpo-user-profile", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [spacingHorizontal]=\"styles?.layout\" [ngStyle]=\"{'max-height': '100vh', 'z-index': isMobile ? '100000000' : ''}\"\r\n [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"p-4 profile-box shadow-lg\"\r\n style=\"width: 25%; border-radius: 20px; height: fit-content; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 1px solid rgba(0,0,0,0.05);\"\r\n [style.order]=\"styles?.swap ? '1' : '0'\">\r\n\r\n <!-- Profile Header Section -->\r\n <div class=\"d-flex align-items-center profile-header\"\r\n style=\"gap: 15px; height: 80px; margin-bottom: 20px; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 15px; backdrop-filter: blur(10px);\">\r\n <div class=\"profile-image-wrapper\" style=\"position: relative;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100 profile-icon\"\r\n style=\"border: 3px solid #e3f2fd; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: all 0.3s ease;\">\r\n <div class=\"online-indicator\"\r\n style=\"position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4caf50; border: 2px solid white; border-radius: 50%;\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"profile-details flex-grow-1\">\r\n <h4 class=\"font-weight-bold mb-2\" style=\"color: #2c3e50; font-size: 1.1rem; margin-bottom: 8px;\">\r\n {{getUserDetails?.contact?.name}}</h4>\r\n\r\n <div class=\"contact-info\" style=\"display: flex; flex-direction: column; gap: 6px;\">\r\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n *ngIf=\"getUserDetails?.contact?.mobile?.length\"\r\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">stay_primary_portrait</mat-icon>\r\n <span>{{getUserDetails?.contact?.mobile}}</span>\r\n </h6>\r\n\r\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n *ngIf=\"getUserDetails?.contact?.email?.length\"\r\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">mail_outline</mat-icon>\r\n <span class=\"w-100 text-overflow\">{{getUserDetails?.contact?.email}}</span>\r\n </h6>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Navigation Tabs Section -->\r\n <div class=\"tabs-container\" style=\"margin-bottom: 20px;\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center tab-item\"\r\n style=\"gap: 12px; cursor: pointer; padding: 16px 12px; margin: 2px 0; border-radius: 12px; transition: all 0.3s ease; position: relative; overflow: hidden;\"\r\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '1px solid rgba(0,0,0,0.06)' : ''\"\r\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\"\r\n [style.backgroundColor]=\"tab.status ? styles?.background?.color : 'transparent'\"\r\n [style.borderColor]=\"tab.status ? styles?.background?.accentColor : 'transparent'\">\r\n <div class=\"tab-icon-wrapper\"\r\n style=\"width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;\">\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n style=\"height: 20px; width: 20px; object-fit: contain; transition: transform 0.3s ease;\">\r\n </div>\r\n\r\n <div class=\"tab-label font-weight-normal\" style=\"font-size: 0.9rem; transition: all 0.3s ease;\">\r\n {{tab.value}}</div>\r\n\r\n <!-- Hover effect background -->\r\n <div class=\"tab-hover-bg\"\r\n style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,123,255,0.05) 0%, rgba(0,123,255,0.02) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1;\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- Action Buttons Section -->\r\n <div class=\"d-flex action-buttons\"\r\n style=\"gap: 10px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.06);\">\r\n <button class=\"edit-btn flex-grow-1\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\"\r\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; background: transparent; border: 2px solid; transition: all 0.3s ease; position: relative; overflow: hidden;\">\r\n Edit Profile\r\n </button>\r\n\r\n <button class=\"logout-btn flex-grow-1\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\"\r\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; border: none; color: white; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.15);\">\r\n Logout\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"orders-sec shadow-lg\" [style.order]=\"styles?.swap ? '0' : '1'\">\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Details'\">\r\n <ng-container *ngTemplateOutlet=\"SchemeDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Transactions'\">\r\n <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n <simpo-list-home-appointment></simpo-list-home-appointment>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <div class=\"w-100 position-relative mobile-height\" style=\"height: 80vh;\">\r\n <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\"\r\n *ngIf=\"selectedSidePanelTab != 'Scheme_Details'\">\r\n <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\"\r\n (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n </div>\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"''\">\r\n <section class=\"top-sec\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\"\r\n style=\"width: 50px; height: 50px;\">\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\">\r\n <mat-icon>stay_primary_portrait</mat-icon>\r\n <span>{{getUserDetails?.contact?.mobile}}</span>\r\n </h6>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\"\r\n *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon>\r\n <span>{{getUserDetails?.contact?.email}}</span>\r\n </h6>\r\n </div>\r\n </section>\r\n <section class=\"list-sec\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\"\r\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\"\r\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n [style.color]=\"styles?.background?.accentColor\">\r\n <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">\r\n {{tab.value}}</div>\r\n </div>\r\n\r\n </ng-container>\r\n </section>\r\n <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\r\n <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Transactions'\">\r\n <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n <simpo-list-home-appointment></simpo-list-home-appointment>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isEcommerce]=\"true\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n <h3 class=\"onlyDesktop mb-3\">My Orders</h3>\r\n <!-- <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n <ng-container *ngFor=\"let tab of tabs\">\r\n <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">\r\n {{tab.value}}</div>\r\n </ng-container>\r\n </div> -->\r\n <div class=\"order-list\">\r\n <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #showEmptyScreen>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <div class=\"cart-text \">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <div class=\"heading-medium d-flex justify-content-center content-side\"\r\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n <simpo-text-editor [(value)]=\"text.value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\"\r\n (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n <div class=\"d-flex justify-content-between mb-2\">\r\n <h3 class=\"title-text\">My Address</h3>\r\n <button class=\"address-btn\" (click)=\"addNewAddress()\"\r\n [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n <div class=\"address-list\">\r\n <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\r\n <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n <div class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card \" [style.width]=\"getProductWidth\">\r\n <div class=\"card-body p-3\">\r\n <!-- Header Section -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n <div class=\"address-info d-flex align-items-center justify-content-between w-100\">\r\n <h4 class=\"mb-0 fw-semibold\">{{address.receiverName}}</h4>\r\n <div class=\"icon-grp d-flex\">\r\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n (click)=\"editAddress(idx)\">edit</mat-icon>\r\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"address-content mb-3\">\r\n <div class=\"address-line mb-2\">\r\n <span class=\"text-muted small d-block\">Address</span>\r\n <span class=\"address-text\">{{address.addressLine1}}</span>\r\n </div>\r\n <div class=\"phone-info\">\r\n <span class=\"text-muted small d-block\">Phone</span>\r\n <span class=\"phone-number fw-bold\">{{address.receiverPhone}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-template #showEmptyAddress>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\r\n <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery\r\n </div>\r\n <!-- </ng-container> -->\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n <h3 class=\"onlyDesktop\">My Accounts</h3>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n <h3 class=\"onlyDesktop\">Logout</h3>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n <div (click)=\"goToOrderDetails(order)\" class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card\">\r\n <div class=\"card-body p-3\" [style.--background-color]=\"styles?.background?.color\">\r\n <!-- Header Section -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n <div class=\"order-number\">\r\n <h4 class=\"mb-0 fw-semibold\">{{\"Order\" + \" \" + order.orderNum}}</h4>\r\n </div>\r\n <div class=\"arrow-icon\">\r\n <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"ordered-item row mb-2\">\r\n <ng-container *ngFor=\"let item of getOrderedItems(order)\">\r\n <div class=\"item-card col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img [src]=\"item?.imgUrl\" alt=\"Product Image\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"item-img w-50\">\r\n <div class=\"cart-item-name\">{{item?.itemName}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <!-- Middle Section -->\r\n <div class=\"order-details\">\r\n <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-1\">\r\n <span class=\"text-muted small mb-3 mb-sm-0\">\r\n {{order.createdTimeStamp | date: 'dd MMMM yyyy'}}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"amount-section\">\r\n <span class=\"h5 mb-0 text-success fw-bold\">\r\n <span [innerHTML]=\"currency\"></span>\r\n {{(order.billDetails.discountAmount ?\r\n (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount +\r\n order?.billDetails?.totalTaxAfterDiscount) :\r\n order.billDetails.totalGrossValue) | number:'1.0-2'}}\r\n </span>\r\n </div>\r\n <div class=\"status-section\">\r\n <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">\r\n {{order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | titlecase}}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #WishlistDetails>\r\n <h3 class=\"onlyDesktop\">My Wishlist</h3>\r\n <div class=\"wishlist-list\" *ngIf=\"wishlistData?.length; else showEmptyWishlistScreen\">\r\n <div class=\"d-flex flex-wrap\" style=\"gap: 10px;\">\r\n <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n <div class=\"address-card mb-2\">\r\n <div class=\"card-body p-4\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-auto\">\r\n <div class=\"product-image-wrapper\">\r\n <img loading=\"lazy\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"product-img rounded\" [src]=\"item.imgUrl\" alt=\"Product Image\">\r\n </div>\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"product-details\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div\r\n class=\"col-auto text-end d-flex justify-content-between align-items-center w-100\">\r\n <h6 class=\"product-name mb-2 fw-semibold text-dark\">\r\n {{item.itemName}}\r\n </h6>\r\n <div class=\"delete-action\" *ngIf=\"!isMobile\">\r\n <button class=\"btn btn-sm delete-btn\" (click)=\"deleteFromWhislist(item)\"\r\n title=\"Remove from wishlist\">\r\n <mat-icon class=\"small-icon\">delete</mat-icon>\r\n </button>\r\n </div>\r\n <div class=\"delete-action mt-2\" *ngIf=\"isMobile\">\r\n <button class=\"btn btn-sm w-100\" (click)=\"deleteFromWhislist(item)\">\r\n <mat-icon class=\"small-icon me-1\">delete</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"product-price mb-3\">\r\n <span class=\"h5 text-success fw-bold mb-0\">\r\n <span [innerHTML]='currency'></span>{{item.discountedPrice}}\r\n </span>\r\n <span class=\"text-muted small ms-2\" *ngIf=\"item.quantity\">\r\n ({{item.quantity}} items)\r\n </span>\r\n </div>\r\n <div class=\"action-buttons d-flex gap-2\">\r\n <div class=\"quantity-controls d-flex align-items-center w-50 justify-content-center\"\r\n *ngIf=\"item.quantity\">\r\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n (click)=\"addToFav(item, 'SUBSTRACT')\">\r\n -\r\n </button>\r\n <span class=\"quantity-display px-3 py-1 bg-light rounded mx-1\">\r\n {{item.quantity}}\r\n </span>\r\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n (click)=\"addToFav(item, 'ADD')\"> +\r\n </button>\r\n </div>\r\n <button class=\"btn btn-sm w-50\" *ngIf=\"!item.quantity\"\r\n (click)=\"addToFav(item, 'ADD')\">\r\n + Add Quantity\r\n </button>\r\n <button class=\"btn btn-sm w-50\" (click)=\"moveToCart(item)\">\r\n Move to Cart\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n <ng-template #showEmptyWishlistScreen>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container>\r\n <div class=\"heading-medium d-flex justify-content-center\">\r\n Your Wishlist is Empty</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #SchemeDetails>\r\n <div class=\"header mb-3 f-18 fw-600\">Current Scheme Enrollments - 4</div>\r\n <div class=\"row gap-2\">\r\n <ng-container *ngFor=\"let scheme of [1,1,1,1]\">\r\n <div class=\"cards d-flex flex-column w-32 mb-2 p-0 \">\r\n <div class=\"card-header row gap-2\">\r\n <div class=\"card-head-left col-7\">\r\n <div class=\"scheme-type fs-15 fw-600\">Group Investment Scheme</div>\r\n <div class=\"scheme-id fw-600\">GIS6K_000231004</div>\r\n </div>\r\n <div class=\"card-head-right col-4 text-center align-content-center\">\r\n <div class=\"scheme-amount fw-600\">\u20B96,000/M</div>\r\n </div>\r\n </div>\r\n <div class=\"card-body d-flex p-0 mb-3\">\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/425719c1752566628577star.png\" alt=\"\"\r\n class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">\u20B913,800</div>\r\n <div class=\"card-sub-text text-center\">Total Acheived</div>\r\n </div>\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/229997c1752567131192brand_7959220.png\"\r\n alt=\"\" class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">\u20B91,000</div>\r\n <div class=\"card-sub-text text-center\">Rewards</div>\r\n </div>\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/760761c1752567279970calendar (1).png\"\r\n alt=\"\" class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">8</div>\r\n <div class=\"card-sub-text text-center\">Due Months</div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer row\">\r\n <div class=\"col-6 d-flex gap-2 p-0\">\r\n <span class=\"footer-text text-nowrap\">Start On :</span><span class=\"date-text text-nowrap\">30\r\n may 2025</span>\r\n </div>\r\n <div class=\"col-6 d-flex gap-2 p-0\">\r\n <span class=\"footer-text text-nowrap\">Maturity On :</span><span class=\"date-text text-nowrap\">25\r\n may 2026</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n<ng-template #SchemePassbook>\r\n <div class=\"w-100 h-100 overflow-scroll passbook_container\">\r\n <div class=\"header d-flex flex-column\">\r\n <div class=\"d-flex align-items-center justify-content-end mb-3\" *ngIf=\"storeListing.length >= 2\"><select\r\n class=\"store-listing\" (change)=\"changeStore($event)\">\r\n <option value=\"\">Select Store</option>\r\n <option [value]=\"store.id\" *ngFor=\"let store of storeListing\">{{store.storeName}}</option>\r\n </select></div>\r\n <div class=\"scheme-overview d-flex flex-column\">\r\n <div class=\"d-flex gap-2\">\r\n <div class=\"available-savings\">\r\n <div class=\"d-flex align-items-center gap-1 w-100 justify-content-between\">\r\n <h3>Available Savings</h3>\r\n <span class=\"amount_logo\">\uD83D\uDCB0</span>\r\n </div>\r\n\r\n <div class=\"amount\">{{totalSavings ? totalSavings :\r\n 'N/A'}}</div>\r\n </div>\r\n <div class=\"active-schemes\">\r\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n <h3>Active Passbooks</h3>\r\n <div class=\"auto-pay-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\r\n </div>\r\n </div>\r\n <div class=\"scheme-count\">{{totalSchemes?.length ?\r\n totalSchemes.length : 'N/A'}}</div>\r\n <div class=\"subtitle\">On Track</div>\r\n </div>\r\n <div class=\"active-schemes\" *ngIf=\"totalAccumulatedGold > 0\">\r\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n <h3>Accumulated Gold </h3>\r\n <div class=\"auto-pay-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/153448c1756808418216accumulated_icon.png\">\r\n </div>\r\n </div>\r\n <div class=\"scheme-count\">{{totalAccumulatedGold}} gms</div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"overAllDues?.length\">\r\n <div class=\"section d-flex-flex-column gap-2\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Due Payments</h2>\r\n </div>\r\n <div class=\"payment-list d-flex flex-column gap-2\">\r\n <ng-container *ngIf=\"overAllDues?.length; else showEmptyPayment\">\r\n <div class=\"payment-item overdue\" *ngFor=\"let payment of overAllDues\">\r\n <div class=\"payment-info\">\r\n <div class=\"payment-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/403142c1753435378127Background.svg\">\r\n <!-- <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\"\r\n *ngIf=\"!payment.overdueStatus && payment.paymentStatus === 'PAID'\"> -->\r\n </div>\r\n <div class=\"payment-details\">\r\n <h4>{{payment.schemeName}} - {{payment.emiMonthCount}}rd EMI</h4>\r\n <span>Date {{payment.dueDate ? (payment.dueDate | date:'dd-MM-yyyy') :\r\n 'N/A'}}\r\n <!-- <span *ngIf=\"payment.overdueStatus\">| Due by: {{payment.daysOverdue\r\n ? payment.daysOverdue : 0}}</span> --></span>\r\n </div>\r\n </div>\r\n <div class=\"payment-amount\">\r\n <div class=\"amount-value\">\u20B9{{payment.dueAmount ? payment.dueAmount :\r\n 'N/A'}}\r\n </div>\r\n <div class=\"payment-status overdue-status cursor-pointer\"\r\n (click)=\"payDue(payment)\">\r\n <ng-container *ngIf=\"!payDueLoader\">Pay Now</ng-container>\r\n <ng-container *ngIf=\"payDueLoader\">Loading...</ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #showEmptyPayment>\r\n <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n <span>No Due Payments</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"section mt-3\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Your Active Passbooks</h2>\r\n </div>\r\n\r\n <div class=\"schemes-grid\">\r\n <ng-container *ngIf=\"totalSchemes && totalSchemes.length > 0; else showActiveScheme\">\r\n <div class=\"scheme-card d-flex flex-column gap-2 cursor-pointer\"\r\n *ngFor=\"let scheme of totalSchemes; let i = index\" (click)=\"viewSchemeDetails(scheme)\">\r\n <div class=\"scheme-header\">\r\n <div>\r\n <div class=\"scheme-title\">{{ scheme?.schemeName || 'N/A' }}</div>\r\n <div class=\"scheme-amount\">\u20B9{{ scheme?.installmentAmount || 'N/A' }}/Monthly</div>\r\n </div>\r\n <div class=\"scheme-date\">\r\n <span>Enrolled: {{ scheme?.createdTimestamp ? (scheme?.createdTimestamp |\r\n date:'dd-MM-yyyy') :\r\n 'N/A' }}</span>\r\n <!-- <span>Maturity: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n 'N/A' }}</span> -->\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-status d-flex justify-content-center align-items-center\"\r\n [ngClass]=\"scheme?.passBookStatus === 'REDEEM_REQUESTED' ? 'redeem_status' : (scheme?.passBookStatus === 'ACTIVE' ? 'active-status' : 'redeem_status')\">\r\n {{\r\n scheme.passBookStatus ? scheme.passBookStatus.replaceAll('_', ' ') : 'N/A'\r\n }}\r\n </div>\r\n\r\n <div class=\"scheme-stats\">\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">{{ scheme?.totalPaidAmount || 'N/A' }}</div>\r\n <div class=\"stat-label\">Deposited Amount</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">\r\n {{\r\n scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n (scheme?.schemePayments?.length -\r\n scheme.dueMonths) : 'N/A'\r\n }}\r\n </div>\r\n <div class=\"stat-label\">Paid Months</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">{{scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n scheme?.dueMonths : 'N/A' }}</div>\r\n <div class=\"stat-label\">Due Months</div>\r\n </div>\r\n <div class=\"stat\" *ngIf=\"scheme?.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"stat-value\">{{ scheme?.totalInvestedMetal || 'N/A' }} gms</div>\r\n <div class=\"stat-label\">Accumulated Gold</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-footer\">\r\n <span>Maturity Date: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n 'N/A' }}</span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #showActiveScheme>\r\n <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n <span>No Active Scheme</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n <!-- <div class=\"auto-pay\">\r\n <div class=\"auto-pay-icon mobile-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/966462c1753439662355Background.png\"></div>\r\n <div class=\"auto-pay-content\">\r\n <div class=\"auto-pay-title\">Manage Auto-pay</div>\r\n <div class=\"auto-pay-desc\">Pause, resume or cancel auto payment subscription</div>\r\n </div>\r\n <button class=\"manage-btn\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/409230c1753439564830SVG.png\"> Manage</button>\r\n </div> -->\r\n </div>\r\n</ng-template>\r\n<ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button>\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #Scheme_Details>\r\n <simpo-scheme-details [schemeDetails]=\"schemeDetails\" [data]=\"data\" [metalPrice]=\"metalPrice\"\r\n (gotoSchemeOverview)=\"selectedSidePanelTab = 'Scheme Passbook'\"></simpo-scheme-details>\r\n</ng-template>\r\n<ng-template #Transactions>\r\n <simpo-passbook-transactions></simpo-passbook-transactions>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n</ngx-skeleton-loader>", styles: [".total-container{position:relative;height:auto;overflow:scroll;background:#fff!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;margin-left:20px;padding:15px;overflow-y:auto;overflow-x:hidden;border:1px solid #d3d3d324;border-radius:20px;max-height:70vh}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}.profile-box{box-shadow:#00000029 0 1px 4px}h1{font-weight:600}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.amount_logo{font-size:27px}@media screen and (max-width: 475px){.store-listing{width:35%!important}.total-container{height:100%!important}.amount_logo{font-size:27px}.amount,.scheme-count{font-size:20px!important}.title-text{font-size:24px}.schemes-grid{flex-wrap:wrap;overflow-y:scroll;height:95%}.section{height:auto}.scheme-status{white-space:nowrap}.scheme-card{width:100%}.header{flex-direction:column-reverse}.scheme-overview{width:100%!important}.scheme-overview div{flex-wrap:wrap}.available-savings h3{font-size:17px!important}.quick-actions{width:100%}.active-schemes h3{font-size:17px!important}.auto-pay-icon{width:55px!important;height:50px!important}.mobile-icon{width:30px!important}.manage-btn{width:25%!important}.tab-selected div{font-weight:600!important}.mobile-height{height:100%!important}.passbook_container{height:90%!important;overflow-x:scroll!important}.passbook_container .section{max-height:unset!important;padding:10px!important}.section-header{margin-bottom:2px!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px 0;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.list-sec .tab-selected{border-top-left-radius:10px!important;border-bottom-left-radius:10px}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:0 10px;width:100vw;margin-bottom:20px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.profile-icon{width:70px}.text-overflow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width:1200px) and (max-width: 1330px){.profile-details{width:75%!important}}@media screen and (min-width:1200px){.manage-btn{width:10%!important}}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}.cards{box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;border-radius:12px}.cards .card-header{padding:8px}.cards .card-header .card-head .scheme-type{font-size:15px}.cards .card-body .col-4 .card-sub-text{font-size:14px}.cards .card-footer{border-top:2px dashed!important;margin:0 5px;padding:10px}.cards .card-footer span{font-size:13px}.cards .card-footer .date-text{font-weight:600}.cards .card-footer div{font-size:15px}.fs-15{font-size:14px}.w-32{width:32.5%!important}.w-40{width:40px!important}.f-18{font-size:18px}.fw-600{font-weight:600}.scheme-id{font-size:13px}.order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}.order-card:hover .arrow-icon mat-icon{transform:translate(3px)}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.cart-item-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa);width:49%}.address-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.address-card .card-body{position:relative;overflow:hidden}.address-text{color:#495057;line-height:1.4}.btn-sm{transition:all .3s ease}.small-icon{font-size:16px!important}.badge.bg-light{color:#495057!important;background:linear-gradient(135deg,#e9ecef,#f8f9fa)!important;border:1px solid #dee2e6}@media (max-width: 576px){.address-card .card-body{padding:1rem!important}.address-card{width:100%!important}.btn-sm{display:flex;justify-content:center;align-items:center;color:red!important}.btn-sm mat-icon{font-size:13px}.btn-sm{width:100%;margin-bottom:.25rem}}.profile-box{transition:all .3s ease;position:relative}.profile-box:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001f!important}.profile-icon:hover{transform:scale(1.05);box-shadow:0 6px 20px #00000026!important}.contact-item:hover{color:#007bff!important}.tab-item:hover{background:linear-gradient(90deg,#007bff14,#007bff08)!important;transform:translate(4px)}.tab-item:hover .tab-hover-bg{opacity:1}.tab-item:hover img{transform:scale(1.1)}.tab-selected{border-left:4px solid;font-weight:600!important;border-bottom:unset!important}.tab-selected .tab-label{font-weight:600!important}.edit-btn:hover{background:linear-gradient(135deg,#007bff0d,#007bff1a)!important;transform:translateY(-1px);box-shadow:0 4px 12px #007bff33}.logout-btn:hover{transform:translateY(-1px);box-shadow:0 4px 15px #00000040!important;filter:brightness(1.05)}.tabs-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.tabs-container::-webkit-scrollbar{width:4px}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.profile-box{animation:fadeInUp .6s ease-out}@media (max-width: 768px){.profile-box{width:100%!important}.profile-header{flex-direction:column;height:auto!important;text-align:center}.action-buttons{flex-direction:column}}.scheme-overview{gap:20px;width:100%}.available-savings{background:linear-gradient(135deg,#fff3cd,#ffeaa7);padding:20px;border-radius:12px;position:relative;flex:1}.available-savings .amount{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.available-savings h3{font-size:14px;color:#856404;margin-bottom:8px;font-weight:500}.subtitle{font-size:12px;color:#666}.active-schemes{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;position:relative;flex:1}.active-schemes h3{font-size:14px;color:#666;margin-bottom:8px;font-weight:500}.scheme-count{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:1px solid #e9ecef;max-height:40vh;overflow-x:scroll}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:18px;font-weight:600}.view-all{color:#6c5ce7;font-size:16px}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.overdue{background:#fef2f2;border:1px solid #FECACA}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.upcoming{background:#f8f9fa;color:#666}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.payment-status{font-size:12px;padding:4px 8px;border-radius:4px;color:#fff;white-space:nowrap}.overdue-status{background:#dc3545}.upcoming-status{background:#6c757d}.schemes-grid{display:flex;gap:10px;overflow-x:scroll}.scheme-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e9ecef;position:relative;min-width:34vw}.scheme-header{display:flex;justify-content:space-between;align-items:flex-start}.scheme-title{font-size:16px;font-weight:600;margin-bottom:4px}.scheme-amount{font-size:12px;color:#666}.scheme-date{font-size:12px;color:#666;display:flex;flex-direction:column;gap:10px}.scheme-status{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;text-transform:uppercase;min-width:15%;max-width:fit-content}.redeem_status{background:orange;color:#fff}.active-status{background:#22c55e;color:#fff}.scheme-stats{display:flex;justify-content:space-between}.stat{text-align:center}.stat-value{font-size:20px;font-weight:700;color:#333}.stat-label{font-size:11px;color:#666;text-transform:uppercase;margin-top:4px}.scheme-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666}.price-notice{background:#fce7f3;color:#be185d;padding:8px 12px;border-radius:6px;font-size:11px}.auto-pay{background:#fff3cd;padding:16px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-top:20px}.auto-pay-icon{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.auto-pay-icon img{width:100%}.auto-pay-content{flex:1}.auto-pay-title{font-size:14px;font-weight:600;margin-bottom:4px}.auto-pay-desc{font-size:12px;color:#666}.manage-btn{background:none;border:1px solid #dee2e6;padding:6px 0;border-radius:4px;font-size:13px!important;cursor:pointer;display:flex;justify-content:space-evenly}.store-listing{font-size:14px;width:20%;height:30px;margin-bottom:13px;border:1px solid #e9ecef;border-radius:5px;outline:none;padding-left:5px;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: OrderDetailsComponent, selector: "simpo-order-details", inputs: ["responseData", "data", "index", "edit", "delete", "customClass", "orderDetailData"], outputs: ["goBackEmitter"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "component", type: SchemeDetailsComponent, selector: "simpo-scheme-details", inputs: ["schemeDetails", "data", "metalPrice"], outputs: ["gotoSchemeOverview"] }, { kind: "component", type: ListHomeAppointmentComponent, selector: "simpo-list-home-appointment" }, { kind: "component", type: PassbookTransactionsComponent, selector: "simpo-passbook-transactions" }] }); }
|
|
19225
19224
|
}
|
|
19226
19225
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserProfileComponent, decorators: [{
|
|
19227
19226
|
type: Component,
|
|
@@ -19248,7 +19247,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
19248
19247
|
SchemeDetailsComponent,
|
|
19249
19248
|
ListHomeAppointmentComponent,
|
|
19250
19249
|
PassbookTransactionsComponent
|
|
19251
|
-
], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [spacingHorizontal]=\"styles?.layout\" [ngStyle]=\"{'max-height': '100vh', 'z-index': isMobile ? '100000000' : ''}\"\r\n [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"p-4 profile-box shadow-lg\"\r\n style=\"width: 25%; border-radius: 20px; height: fit-content; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 1px solid rgba(0,0,0,0.05);\"\r\n [style.order]=\"styles?.swap ? '1' : '0'\">\r\n\r\n <!-- Profile Header Section -->\r\n <div class=\"d-flex align-items-center profile-header\"\r\n style=\"gap: 15px; height: 80px; margin-bottom: 20px; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 15px; backdrop-filter: blur(10px);\">\r\n <div class=\"profile-image-wrapper\" style=\"position: relative;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100 profile-icon\"\r\n style=\"border: 3px solid #e3f2fd; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: all 0.3s ease;\">\r\n <div class=\"online-indicator\"\r\n style=\"position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4caf50; border: 2px solid white; border-radius: 50%;\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"profile-details flex-grow-1\">\r\n <h4 class=\"font-weight-bold mb-2\" style=\"color: #2c3e50; font-size: 1.1rem; margin-bottom: 8px;\">\r\n {{getUserDetails?.contact?.name}}</h4>\r\n\r\n <div class=\"contact-info\" style=\"display: flex; flex-direction: column; gap: 6px;\">\r\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n *ngIf=\"getUserDetails?.contact?.mobile?.length\"\r\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">stay_primary_portrait</mat-icon>\r\n <span>{{getUserDetails?.contact?.mobile}}</span>\r\n </h6>\r\n\r\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n *ngIf=\"getUserDetails?.contact?.email?.length\"\r\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">mail_outline</mat-icon>\r\n <span class=\"w-100 text-overflow\">{{getUserDetails?.contact?.email}}</span>\r\n </h6>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Navigation Tabs Section -->\r\n <div class=\"tabs-container\" style=\"margin-bottom: 20px;\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center tab-item\"\r\n style=\"gap: 12px; cursor: pointer; padding: 16px 12px; margin: 2px 0; border-radius: 12px; transition: all 0.3s ease; position: relative; overflow: hidden;\"\r\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '1px solid rgba(0,0,0,0.06)' : ''\"\r\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\"\r\n [style.backgroundColor]=\"tab.status ? styles?.background?.color : 'transparent'\"\r\n [style.borderColor]=\"tab.status ? styles?.background?.accentColor : 'transparent'\">\r\n <div class=\"tab-icon-wrapper\"\r\n style=\"width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;\">\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n style=\"height: 20px; width: 20px; object-fit: contain; transition: transform 0.3s ease;\">\r\n </div>\r\n\r\n <div class=\"tab-label font-weight-normal\" style=\"font-size: 0.9rem; transition: all 0.3s ease;\">\r\n {{tab.value}}</div>\r\n\r\n <!-- Hover effect background -->\r\n <div class=\"tab-hover-bg\"\r\n style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,123,255,0.05) 0%, rgba(0,123,255,0.02) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1;\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- Action Buttons Section -->\r\n <div class=\"d-flex action-buttons\"\r\n style=\"gap: 10px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.06);\">\r\n <button class=\"edit-btn flex-grow-1\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\"\r\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; background: transparent; border: 2px solid; transition: all 0.3s ease; position: relative; overflow: hidden;\">\r\n Edit Profile\r\n </button>\r\n\r\n <button class=\"logout-btn flex-grow-1\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\"\r\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; border: none; color: white; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.15);\">\r\n Logout\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"orders-sec shadow-lg\" [style.order]=\"styles?.swap ? '0' : '1'\">\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Details'\">\r\n <ng-container *ngTemplateOutlet=\"SchemeDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Transactions'\">\r\n <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n <simpo-list-home-appointment></simpo-list-home-appointment>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <div class=\"w-100 position-relative mobile-height\" style=\"height: 80vh;\">\r\n <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\"\r\n *ngIf=\"selectedSidePanelTab != 'Scheme_Details'\">\r\n <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\"\r\n (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n </div>\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"''\">\r\n <section class=\"top-sec\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\"\r\n style=\"width: 50px; height: 50px;\">\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\">\r\n <mat-icon>stay_primary_portrait</mat-icon>\r\n <span>{{getUserDetails?.contact?.mobile}}</span>\r\n </h6>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\"\r\n *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon>\r\n <span>{{getUserDetails?.contact?.email}}</span>\r\n </h6>\r\n </div>\r\n </section>\r\n <section class=\"list-sec\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\"\r\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\"\r\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n [style.color]=\"styles?.background?.accentColor\">\r\n <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">\r\n {{tab.value}}</div>\r\n </div>\r\n\r\n </ng-container>\r\n </section>\r\n <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\r\n <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Transactions'\">\r\n <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n <simpo-list-home-appointment></simpo-list-home-appointment>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isEcommerce]=\"true\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n <h3 class=\"onlyDesktop mb-3\">My Orders</h3>\r\n <!-- <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n <ng-container *ngFor=\"let tab of tabs\">\r\n <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">\r\n {{tab.value}}</div>\r\n </ng-container>\r\n </div> -->\r\n <div class=\"order-list\">\r\n <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #showEmptyScreen>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <div class=\"cart-text \">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <div class=\"heading-medium d-flex justify-content-center content-side\"\r\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n <simpo-text-editor [(value)]=\"text.value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\"\r\n (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n <div class=\"d-flex justify-content-between mb-2\">\r\n <h3 class=\"title-text\">My Address</h3>\r\n <button class=\"address-btn\" (click)=\"addNewAddress()\"\r\n [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n <div class=\"address-list\">\r\n <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\r\n <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n <div class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card \" [style.width]=\"getProductWidth\">\r\n <div class=\"card-body p-3\">\r\n <!-- Header Section -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n <div class=\"address-info d-flex align-items-center justify-content-between w-100\">\r\n <h4 class=\"mb-0 fw-semibold\">{{address.receiverName}}</h4>\r\n <div class=\"icon-grp d-flex\">\r\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n (click)=\"editAddress(idx)\">edit</mat-icon>\r\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"address-content mb-3\">\r\n <div class=\"address-line mb-2\">\r\n <span class=\"text-muted small d-block\">Address</span>\r\n <span class=\"address-text\">{{address.addressLine1}}</span>\r\n </div>\r\n <div class=\"phone-info\">\r\n <span class=\"text-muted small d-block\">Phone</span>\r\n <span class=\"phone-number fw-bold\">{{address.receiverPhone}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-template #showEmptyAddress>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\r\n <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery\r\n </div>\r\n <!-- </ng-container> -->\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n <h3 class=\"onlyDesktop\">My Accounts</h3>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n <h3 class=\"onlyDesktop\">Logout</h3>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n <div (click)=\"goToOrderDetails(order)\" class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card\">\r\n <div class=\"card-body p-3\" [style.--background-color]=\"styles?.background?.color\">\r\n <!-- Header Section -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n <div class=\"order-number\">\r\n <h4 class=\"mb-0 fw-semibold\">{{\"Order\" + \" \" + order.orderNum}}</h4>\r\n </div>\r\n <div class=\"arrow-icon\">\r\n <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"ordered-item row mb-2\">\r\n <ng-container *ngFor=\"let item of getOrderedItems(order)\">\r\n <div class=\"item-card col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img [src]=\"item?.imgUrl\" alt=\"Product Image\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"item-img w-50\">\r\n <div class=\"cart-item-name\">{{item?.itemName}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <!-- Middle Section -->\r\n <div class=\"order-details\">\r\n <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-1\">\r\n <span class=\"text-muted small mb-3 mb-sm-0\">\r\n {{order.createdTimeStamp | date: 'dd MMMM yyyy'}}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"amount-section\">\r\n <span class=\"h5 mb-0 text-success fw-bold\">\r\n <span [innerHTML]=\"currency\"></span>\r\n {{(order.billDetails.discountAmount ?\r\n (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount +\r\n order?.billDetails?.totalTaxAfterDiscount) :\r\n order.billDetails.totalGrossValue) | number:'1.0-2'}}\r\n </span>\r\n </div>\r\n <div class=\"status-section\">\r\n <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">\r\n {{order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | titlecase}}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #WishlistDetails>\r\n <h3 class=\"onlyDesktop\">My Wishlist</h3>\r\n <div class=\"wishlist-list\" *ngIf=\"wishlistData?.length; else showEmptyWishlistScreen\">\r\n <div class=\"d-flex flex-wrap\" style=\"gap: 10px;\">\r\n <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n <div class=\"address-card mb-2\">\r\n <div class=\"card-body p-4\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-auto\">\r\n <div class=\"product-image-wrapper\">\r\n <img loading=\"lazy\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"product-img rounded\" [src]=\"item.imgUrl\" alt=\"Product Image\">\r\n </div>\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"product-details\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div\r\n class=\"col-auto text-end d-flex justify-content-between align-items-center w-100\">\r\n <h6 class=\"product-name mb-2 fw-semibold text-dark\">\r\n {{item.itemName}}\r\n </h6>\r\n <div class=\"delete-action\" *ngIf=\"!isMobile\">\r\n <button class=\"btn btn-sm delete-btn\" (click)=\"deleteFromWhislist(item)\"\r\n title=\"Remove from wishlist\">\r\n <mat-icon class=\"small-icon\">delete</mat-icon>\r\n </button>\r\n </div>\r\n <div class=\"delete-action mt-2\" *ngIf=\"isMobile\">\r\n <button class=\"btn btn-sm w-100\" (click)=\"deleteFromWhislist(item)\">\r\n <mat-icon class=\"small-icon me-1\">delete</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"product-price mb-3\">\r\n <span class=\"h5 text-success fw-bold mb-0\">\r\n <span [innerHTML]='currency'></span>{{item.discountedPrice}}\r\n </span>\r\n <span class=\"text-muted small ms-2\" *ngIf=\"item.quantity\">\r\n ({{item.quantity}} items)\r\n </span>\r\n </div>\r\n <div class=\"action-buttons d-flex gap-2\">\r\n <div class=\"quantity-controls d-flex align-items-center w-50 justify-content-center\"\r\n *ngIf=\"item.quantity\">\r\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n (click)=\"addToFav(item, 'SUBSTRACT')\">\r\n -\r\n </button>\r\n <span class=\"quantity-display px-3 py-1 bg-light rounded mx-1\">\r\n {{item.quantity}}\r\n </span>\r\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n (click)=\"addToFav(item, 'ADD')\"> +\r\n </button>\r\n </div>\r\n <button class=\"btn btn-sm w-50\" *ngIf=\"!item.quantity\"\r\n (click)=\"addToFav(item, 'ADD')\">\r\n + Add Quantity\r\n </button>\r\n <button class=\"btn btn-sm w-50\" (click)=\"moveToCart(item)\">\r\n Move to Cart\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n <ng-template #showEmptyWishlistScreen>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container>\r\n <div class=\"heading-medium d-flex justify-content-center\">\r\n Your Wishlist is Empty</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #SchemeDetails>\r\n <div class=\"header mb-3 f-18 fw-600\">Current Scheme Enrollments - 4</div>\r\n <div class=\"row gap-2\">\r\n <ng-container *ngFor=\"let scheme of [1,1,1,1]\">\r\n <div class=\"cards d-flex flex-column w-32 mb-2 p-0 \">\r\n <div class=\"card-header row gap-2\">\r\n <div class=\"card-head-left col-7\">\r\n <div class=\"scheme-type fs-15 fw-600\">Group Investment Scheme</div>\r\n <div class=\"scheme-id fw-600\">GIS6K_000231004</div>\r\n </div>\r\n <div class=\"card-head-right col-4 text-center align-content-center\">\r\n <div class=\"scheme-amount fw-600\">\u20B96,000/M</div>\r\n </div>\r\n </div>\r\n <div class=\"card-body d-flex p-0 mb-3\">\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/425719c1752566628577star.png\" alt=\"\"\r\n class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">\u20B913,800</div>\r\n <div class=\"card-sub-text text-center\">Total Acheived</div>\r\n </div>\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/229997c1752567131192brand_7959220.png\"\r\n alt=\"\" class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">\u20B91,000</div>\r\n <div class=\"card-sub-text text-center\">Rewards</div>\r\n </div>\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/760761c1752567279970calendar (1).png\"\r\n alt=\"\" class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">8</div>\r\n <div class=\"card-sub-text text-center\">Due Months</div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer row\">\r\n <div class=\"col-6 d-flex gap-2 p-0\">\r\n <span class=\"footer-text text-nowrap\">Start On :</span><span class=\"date-text text-nowrap\">30\r\n may 2025</span>\r\n </div>\r\n <div class=\"col-6 d-flex gap-2 p-0\">\r\n <span class=\"footer-text text-nowrap\">Maturity On :</span><span class=\"date-text text-nowrap\">25\r\n may 2026</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n<ng-template #SchemePassbook>\r\n <div class=\"w-100 h-100 overflow-scroll passbook_container\">\r\n <div class=\"header d-flex flex-column\">\r\n <div class=\"d-flex align-items-center justify-content-end mb-3\" *ngIf=\"storeListing.length >= 2\"><select\r\n class=\"store-listing\" (change)=\"changeStore($event)\">\r\n <option value=\"\">Select Store</option>\r\n <option [value]=\"store.id\" *ngFor=\"let store of storeListing\">{{store.storeName}}</option>\r\n </select></div>\r\n <div class=\"scheme-overview d-flex flex-column\">\r\n <div class=\"d-flex gap-2\">\r\n <div class=\"available-savings\">\r\n <div class=\"d-flex align-items-center gap-1 w-100 justify-content-between\">\r\n <h3>Available Savings</h3>\r\n <span class=\"amount_logo\">\uD83D\uDCB0</span>\r\n </div>\r\n\r\n <div class=\"amount\">{{totalSavings ? totalSavings :\r\n '0'}}</div>\r\n </div>\r\n <div class=\"active-schemes\">\r\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n <h3>Active Passbooks</h3>\r\n <div class=\"auto-pay-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\r\n </div>\r\n </div>\r\n <div class=\"scheme-count\">{{totalSchemes?.length ?\r\n totalSchemes.length : '0'}}</div>\r\n <div class=\"subtitle\">On Track</div>\r\n </div>\r\n <div class=\"active-schemes\" *ngIf=\"totalAccumulatedGold > 0\">\r\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n <h3>Accumulated Gold </h3>\r\n <div class=\"auto-pay-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/153448c1756808418216accumulated_icon.png\">\r\n </div>\r\n </div>\r\n <div class=\"scheme-count\">{{totalAccumulatedGold}} gms</div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"overAllDues?.length\">\r\n <div class=\"section d-flex-flex-column gap-2\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Due Payments</h2>\r\n </div>\r\n <div class=\"payment-list d-flex flex-column gap-2\">\r\n <ng-container *ngIf=\"overAllDues?.length; else showEmptyPayment\">\r\n <div class=\"payment-item overdue\" *ngFor=\"let payment of overAllDues\">\r\n <div class=\"payment-info\">\r\n <div class=\"payment-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/403142c1753435378127Background.svg\">\r\n <!-- <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\"\r\n *ngIf=\"!payment.overdueStatus && payment.paymentStatus === 'PAID'\"> -->\r\n </div>\r\n <div class=\"payment-details\">\r\n <h4>{{payment.schemeName}} - {{payment.emiMonthCount}}rd EMI</h4>\r\n <span>Date {{payment.dueDate ? (payment.dueDate | date:'dd-MM-yyyy') :\r\n 'N/A'}}\r\n <!-- <span *ngIf=\"payment.overdueStatus\">| Due by: {{payment.daysOverdue\r\n ? payment.daysOverdue : 0}}</span> --></span>\r\n </div>\r\n </div>\r\n <div class=\"payment-amount\">\r\n <div class=\"amount-value\">\u20B9{{payment.dueAmount ? payment.dueAmount :\r\n '0'}}\r\n </div>\r\n <div class=\"payment-status overdue-status cursor-pointer\"\r\n (click)=\"payDue(payment)\">\r\n <ng-container *ngIf=\"!payDueLoader\">Pay Now</ng-container>\r\n <ng-container *ngIf=\"payDueLoader\">Loading...</ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #showEmptyPayment>\r\n <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n <span>No Due Payments</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"section mt-3\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Your Active Passbooks</h2>\r\n </div>\r\n\r\n <div class=\"schemes-grid\">\r\n <ng-container *ngIf=\"totalSchemes && totalSchemes.length > 0; else showActiveScheme\">\r\n <div class=\"scheme-card d-flex flex-column gap-2 cursor-pointer\"\r\n *ngFor=\"let scheme of totalSchemes; let i = index\" (click)=\"viewSchemeDetails(scheme)\">\r\n <div class=\"scheme-header\">\r\n <div>\r\n <div class=\"scheme-title\">{{ scheme?.schemeName || 'N/A' }}</div>\r\n <div class=\"scheme-amount\">\u20B9{{ scheme?.installmentAmount || '0' }}/Monthly</div>\r\n </div>\r\n <div class=\"scheme-date\">\r\n <span>Enrolled: {{ scheme?.createdTimestamp ? (scheme?.createdTimestamp |\r\n date:'dd-MM-yyyy') :\r\n 'N/A' }}</span>\r\n <!-- <span>Maturity: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n 'N/A' }}</span> -->\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-status d-flex justify-content-center align-items-center\"\r\n [ngClass]=\"scheme?.passBookStatus === 'REDEEM_REQUESTED' ? 'redeem_status' : (scheme?.passBookStatus === 'ACTIVE' ? 'active-status' : 'redeem_status')\">\r\n {{\r\n scheme.passBookStatus ? scheme.passBookStatus.replaceAll('_', ' ') : 'N/A'\r\n }}\r\n </div>\r\n\r\n <div class=\"scheme-stats\">\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">{{ scheme?.totalPaidAmount || '0' }}</div>\r\n <div class=\"stat-label\">Deposited Amount</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">\r\n {{\r\n scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n (scheme?.schemePayments?.length -\r\n scheme.dueMonths) : 'N/A'\r\n }}\r\n </div>\r\n <div class=\"stat-label\">Paid Months</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">{{scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n scheme?.dueMonths : 'N/A' }}</div>\r\n <div class=\"stat-label\">Due Months</div>\r\n </div>\r\n <div class=\"stat\" *ngIf=\"scheme?.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"stat-value\">{{ scheme?.totalInvestedMetal || '0' }} gms</div>\r\n <div class=\"stat-label\">Accumulated Gold</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-footer\">\r\n <span>Maturity Date: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n 'N/A' }}</span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #showActiveScheme>\r\n <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n <span>No Active Scheme</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n <!-- <div class=\"auto-pay\">\r\n <div class=\"auto-pay-icon mobile-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/966462c1753439662355Background.png\"></div>\r\n <div class=\"auto-pay-content\">\r\n <div class=\"auto-pay-title\">Manage Auto-pay</div>\r\n <div class=\"auto-pay-desc\">Pause, resume or cancel auto payment subscription</div>\r\n </div>\r\n <button class=\"manage-btn\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/409230c1753439564830SVG.png\"> Manage</button>\r\n </div> -->\r\n </div>\r\n</ng-template>\r\n<ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button>\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #Scheme_Details>\r\n <simpo-scheme-details [schemeDetails]=\"schemeDetails\" [data]=\"data\" [metalPrice]=\"metalPrice\"\r\n (gotoSchemeOverview)=\"selectedSidePanelTab = 'Scheme Passbook'\"></simpo-scheme-details>\r\n</ng-template>\r\n<ng-template #Transactions>\r\n <simpo-passbook-transactions></simpo-passbook-transactions>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n</ngx-skeleton-loader>\r\n", styles: [".total-container{position:relative;height:auto;overflow:scroll;background:#fff!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;margin-left:20px;padding:15px;overflow-y:auto;overflow-x:hidden;border:1px solid #d3d3d324;border-radius:20px;max-height:70vh}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}.profile-box{box-shadow:#00000029 0 1px 4px}h1{font-weight:600}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.amount_logo{font-size:27px}@media screen and (max-width: 475px){.store-listing{width:35%!important}.total-container{height:100%!important}.amount_logo{font-size:27px}.amount,.scheme-count{font-size:20px!important}.title-text{font-size:24px}.schemes-grid{flex-wrap:wrap;overflow-y:scroll;height:95%}.section{height:auto}.scheme-status{white-space:nowrap}.scheme-card{width:100%}.header{flex-direction:column-reverse}.scheme-overview{width:100%!important}.scheme-overview div{flex-wrap:wrap}.available-savings h3{font-size:17px!important}.quick-actions{width:100%}.active-schemes h3{font-size:17px!important}.auto-pay-icon{width:55px!important;height:50px!important}.mobile-icon{width:30px!important}.manage-btn{width:25%!important}.tab-selected div{font-weight:600!important}.mobile-height{height:100%!important}.passbook_container{height:90%!important;overflow-x:scroll!important}.passbook_container .section{max-height:unset!important;padding:10px!important}.section-header{margin-bottom:2px!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px 0;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.list-sec .tab-selected{border-top-left-radius:10px!important;border-bottom-left-radius:10px}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:0 10px;width:100vw;margin-bottom:20px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.profile-icon{width:70px}.text-overflow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width:1200px) and (max-width: 1330px){.profile-details{width:75%!important}}@media screen and (min-width:1200px){.manage-btn{width:10%!important}}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}.cards{box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;border-radius:12px}.cards .card-header{padding:8px}.cards .card-header .card-head .scheme-type{font-size:15px}.cards .card-body .col-4 .card-sub-text{font-size:14px}.cards .card-footer{border-top:2px dashed!important;margin:0 5px;padding:10px}.cards .card-footer span{font-size:13px}.cards .card-footer .date-text{font-weight:600}.cards .card-footer div{font-size:15px}.fs-15{font-size:14px}.w-32{width:32.5%!important}.w-40{width:40px!important}.f-18{font-size:18px}.fw-600{font-weight:600}.scheme-id{font-size:13px}.order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}.order-card:hover .arrow-icon mat-icon{transform:translate(3px)}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.cart-item-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa);width:49%}.address-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.address-card .card-body{position:relative;overflow:hidden}.address-text{color:#495057;line-height:1.4}.btn-sm{transition:all .3s ease}.small-icon{font-size:16px!important}.badge.bg-light{color:#495057!important;background:linear-gradient(135deg,#e9ecef,#f8f9fa)!important;border:1px solid #dee2e6}@media (max-width: 576px){.address-card .card-body{padding:1rem!important}.address-card{width:100%!important}.btn-sm{display:flex;justify-content:center;align-items:center;color:red!important}.btn-sm mat-icon{font-size:13px}.btn-sm{width:100%;margin-bottom:.25rem}}.profile-box{transition:all .3s ease;position:relative}.profile-box:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001f!important}.profile-icon:hover{transform:scale(1.05);box-shadow:0 6px 20px #00000026!important}.contact-item:hover{color:#007bff!important}.tab-item:hover{background:linear-gradient(90deg,#007bff14,#007bff08)!important;transform:translate(4px)}.tab-item:hover .tab-hover-bg{opacity:1}.tab-item:hover img{transform:scale(1.1)}.tab-selected{border-left:4px solid;font-weight:600!important;border-bottom:unset!important}.tab-selected .tab-label{font-weight:600!important}.edit-btn:hover{background:linear-gradient(135deg,#007bff0d,#007bff1a)!important;transform:translateY(-1px);box-shadow:0 4px 12px #007bff33}.logout-btn:hover{transform:translateY(-1px);box-shadow:0 4px 15px #00000040!important;filter:brightness(1.05)}.tabs-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.tabs-container::-webkit-scrollbar{width:4px}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.profile-box{animation:fadeInUp .6s ease-out}@media (max-width: 768px){.profile-box{width:100%!important}.profile-header{flex-direction:column;height:auto!important;text-align:center}.action-buttons{flex-direction:column}}.scheme-overview{gap:20px;width:100%}.available-savings{background:linear-gradient(135deg,#fff3cd,#ffeaa7);padding:20px;border-radius:12px;position:relative;flex:1}.available-savings .amount{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.available-savings h3{font-size:14px;color:#856404;margin-bottom:8px;font-weight:500}.subtitle{font-size:12px;color:#666}.active-schemes{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;position:relative;flex:1}.active-schemes h3{font-size:14px;color:#666;margin-bottom:8px;font-weight:500}.scheme-count{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:1px solid #e9ecef;max-height:40vh;overflow-x:scroll}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:18px;font-weight:600}.view-all{color:#6c5ce7;font-size:16px}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.overdue{background:#fef2f2;border:1px solid #FECACA}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.upcoming{background:#f8f9fa;color:#666}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.payment-status{font-size:12px;padding:4px 8px;border-radius:4px;color:#fff;white-space:nowrap}.overdue-status{background:#dc3545}.upcoming-status{background:#6c757d}.schemes-grid{display:flex;gap:10px;overflow-x:scroll}.scheme-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e9ecef;position:relative;min-width:34vw}.scheme-header{display:flex;justify-content:space-between;align-items:flex-start}.scheme-title{font-size:16px;font-weight:600;margin-bottom:4px}.scheme-amount{font-size:12px;color:#666}.scheme-date{font-size:12px;color:#666;display:flex;flex-direction:column;gap:10px}.scheme-status{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;text-transform:uppercase;min-width:15%;max-width:fit-content}.redeem_status{background:orange;color:#fff}.active-status{background:#22c55e;color:#fff}.scheme-stats{display:flex;justify-content:space-between}.stat{text-align:center}.stat-value{font-size:20px;font-weight:700;color:#333}.stat-label{font-size:11px;color:#666;text-transform:uppercase;margin-top:4px}.scheme-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666}.price-notice{background:#fce7f3;color:#be185d;padding:8px 12px;border-radius:6px;font-size:11px}.auto-pay{background:#fff3cd;padding:16px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-top:20px}.auto-pay-icon{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.auto-pay-icon img{width:100%}.auto-pay-content{flex:1}.auto-pay-title{font-size:14px;font-weight:600;margin-bottom:4px}.auto-pay-desc{font-size:12px;color:#666}.manage-btn{background:none;border:1px solid #dee2e6;padding:6px 0;border-radius:4px;font-size:13px!important;cursor:pointer;display:flex;justify-content:space-evenly}.store-listing{font-size:14px;width:20%;height:30px;margin-bottom:13px;border:1px solid #e9ecef;border-radius:5px;outline:none;padding-left:5px;cursor:pointer}\n"] }]
|
|
19250
|
+
], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [spacingHorizontal]=\"styles?.layout\" [ngStyle]=\"{'max-height': '100vh', 'z-index': isMobile ? '100000000' : ''}\"\r\n [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"p-4 profile-box shadow-lg\"\r\n style=\"width: 25%; border-radius: 20px; height: fit-content; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 1px solid rgba(0,0,0,0.05);\"\r\n [style.order]=\"styles?.swap ? '1' : '0'\">\r\n\r\n <!-- Profile Header Section -->\r\n <div class=\"d-flex align-items-center profile-header\"\r\n style=\"gap: 15px; height: 80px; margin-bottom: 20px; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 15px; backdrop-filter: blur(10px);\">\r\n <div class=\"profile-image-wrapper\" style=\"position: relative;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100 profile-icon\"\r\n style=\"border: 3px solid #e3f2fd; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: all 0.3s ease;\">\r\n <div class=\"online-indicator\"\r\n style=\"position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4caf50; border: 2px solid white; border-radius: 50%;\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"profile-details flex-grow-1\">\r\n <h4 class=\"font-weight-bold mb-2\" style=\"color: #2c3e50; font-size: 1.1rem; margin-bottom: 8px;\">\r\n {{getUserDetails?.contact?.name}}</h4>\r\n\r\n <div class=\"contact-info\" style=\"display: flex; flex-direction: column; gap: 6px;\">\r\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n *ngIf=\"getUserDetails?.contact?.mobile?.length\"\r\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">stay_primary_portrait</mat-icon>\r\n <span>{{getUserDetails?.contact?.mobile}}</span>\r\n </h6>\r\n\r\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n *ngIf=\"getUserDetails?.contact?.email?.length\"\r\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">mail_outline</mat-icon>\r\n <span class=\"w-100 text-overflow\">{{getUserDetails?.contact?.email}}</span>\r\n </h6>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Navigation Tabs Section -->\r\n <div class=\"tabs-container\" style=\"margin-bottom: 20px;\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center tab-item\"\r\n style=\"gap: 12px; cursor: pointer; padding: 16px 12px; margin: 2px 0; border-radius: 12px; transition: all 0.3s ease; position: relative; overflow: hidden;\"\r\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '1px solid rgba(0,0,0,0.06)' : ''\"\r\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\"\r\n [style.backgroundColor]=\"tab.status ? styles?.background?.color : 'transparent'\"\r\n [style.borderColor]=\"tab.status ? styles?.background?.accentColor : 'transparent'\">\r\n <div class=\"tab-icon-wrapper\"\r\n style=\"width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;\">\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n style=\"height: 20px; width: 20px; object-fit: contain; transition: transform 0.3s ease;\">\r\n </div>\r\n\r\n <div class=\"tab-label font-weight-normal\" style=\"font-size: 0.9rem; transition: all 0.3s ease;\">\r\n {{tab.value}}</div>\r\n\r\n <!-- Hover effect background -->\r\n <div class=\"tab-hover-bg\"\r\n style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,123,255,0.05) 0%, rgba(0,123,255,0.02) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1;\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- Action Buttons Section -->\r\n <div class=\"d-flex action-buttons\"\r\n style=\"gap: 10px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.06);\">\r\n <button class=\"edit-btn flex-grow-1\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\"\r\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; background: transparent; border: 2px solid; transition: all 0.3s ease; position: relative; overflow: hidden;\">\r\n Edit Profile\r\n </button>\r\n\r\n <button class=\"logout-btn flex-grow-1\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\"\r\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; border: none; color: white; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.15);\">\r\n Logout\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"orders-sec shadow-lg\" [style.order]=\"styles?.swap ? '0' : '1'\">\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Details'\">\r\n <ng-container *ngTemplateOutlet=\"SchemeDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Transactions'\">\r\n <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n <simpo-list-home-appointment></simpo-list-home-appointment>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <div class=\"w-100 position-relative mobile-height\" style=\"height: 80vh;\">\r\n <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\"\r\n *ngIf=\"selectedSidePanelTab != 'Scheme_Details'\">\r\n <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\"\r\n (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n </div>\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"''\">\r\n <section class=\"top-sec\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\"\r\n style=\"width: 50px; height: 50px;\">\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\">\r\n <mat-icon>stay_primary_portrait</mat-icon>\r\n <span>{{getUserDetails?.contact?.mobile}}</span>\r\n </h6>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\"\r\n *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon>\r\n <span>{{getUserDetails?.contact?.email}}</span>\r\n </h6>\r\n </div>\r\n </section>\r\n <section class=\"list-sec\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\"\r\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\"\r\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n [style.color]=\"styles?.background?.accentColor\">\r\n <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">\r\n {{tab.value}}</div>\r\n </div>\r\n\r\n </ng-container>\r\n </section>\r\n <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\r\n <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Transactions'\">\r\n <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n <simpo-list-home-appointment></simpo-list-home-appointment>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isEcommerce]=\"true\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n <h3 class=\"onlyDesktop mb-3\">My Orders</h3>\r\n <!-- <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n <ng-container *ngFor=\"let tab of tabs\">\r\n <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">\r\n {{tab.value}}</div>\r\n </ng-container>\r\n </div> -->\r\n <div class=\"order-list\">\r\n <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #showEmptyScreen>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\r\n </div>\r\n <div class=\"cart-text \">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <div class=\"heading-medium d-flex justify-content-center content-side\"\r\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n <simpo-text-editor [(value)]=\"text.value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\"\r\n (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n <div class=\"d-flex justify-content-between mb-2\">\r\n <h3 class=\"title-text\">My Address</h3>\r\n <button class=\"address-btn\" (click)=\"addNewAddress()\"\r\n [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n <div class=\"address-list\">\r\n <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\r\n <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n <div class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card \" [style.width]=\"getProductWidth\">\r\n <div class=\"card-body p-3\">\r\n <!-- Header Section -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n <div class=\"address-info d-flex align-items-center justify-content-between w-100\">\r\n <h4 class=\"mb-0 fw-semibold\">{{address.receiverName}}</h4>\r\n <div class=\"icon-grp d-flex\">\r\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n (click)=\"editAddress(idx)\">edit</mat-icon>\r\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"address-content mb-3\">\r\n <div class=\"address-line mb-2\">\r\n <span class=\"text-muted small d-block\">Address</span>\r\n <span class=\"address-text\">{{address.addressLine1}}</span>\r\n </div>\r\n <div class=\"phone-info\">\r\n <span class=\"text-muted small d-block\">Phone</span>\r\n <span class=\"phone-number fw-bold\">{{address.receiverPhone}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-template #showEmptyAddress>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\r\n <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery\r\n </div>\r\n <!-- </ng-container> -->\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n <h3 class=\"onlyDesktop\">My Accounts</h3>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n <h3 class=\"onlyDesktop\">Logout</h3>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n <div (click)=\"goToOrderDetails(order)\" class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card\">\r\n <div class=\"card-body p-3\" [style.--background-color]=\"styles?.background?.color\">\r\n <!-- Header Section -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n <div class=\"order-number\">\r\n <h4 class=\"mb-0 fw-semibold\">{{\"Order\" + \" \" + order.orderNum}}</h4>\r\n </div>\r\n <div class=\"arrow-icon\">\r\n <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"ordered-item row mb-2\">\r\n <ng-container *ngFor=\"let item of getOrderedItems(order)\">\r\n <div class=\"item-card col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img [src]=\"item?.imgUrl\" alt=\"Product Image\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"item-img w-50\">\r\n <div class=\"cart-item-name\">{{item?.itemName}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <!-- Middle Section -->\r\n <div class=\"order-details\">\r\n <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-1\">\r\n <span class=\"text-muted small mb-3 mb-sm-0\">\r\n {{order.createdTimeStamp | date: 'dd MMMM yyyy'}}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"amount-section\">\r\n <span class=\"h5 mb-0 text-success fw-bold\">\r\n <span [innerHTML]=\"currency\"></span>\r\n {{(order.billDetails.discountAmount ?\r\n (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount +\r\n order?.billDetails?.totalTaxAfterDiscount) :\r\n order.billDetails.totalGrossValue) | number:'1.0-2'}}\r\n </span>\r\n </div>\r\n <div class=\"status-section\">\r\n <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">\r\n {{order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | titlecase}}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #WishlistDetails>\r\n <h3 class=\"onlyDesktop\">My Wishlist</h3>\r\n <div class=\"wishlist-list\" *ngIf=\"wishlistData?.length; else showEmptyWishlistScreen\">\r\n <div class=\"d-flex flex-wrap\" style=\"gap: 10px;\">\r\n <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n <div class=\"address-card mb-2\">\r\n <div class=\"card-body p-4\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-auto\">\r\n <div class=\"product-image-wrapper\">\r\n <img loading=\"lazy\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"product-img rounded\" [src]=\"item.imgUrl\" alt=\"Product Image\">\r\n </div>\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"product-details\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div\r\n class=\"col-auto text-end d-flex justify-content-between align-items-center w-100\">\r\n <h6 class=\"product-name mb-2 fw-semibold text-dark\">\r\n {{item.itemName}}\r\n </h6>\r\n <div class=\"delete-action\" *ngIf=\"!isMobile\">\r\n <button class=\"btn btn-sm delete-btn\" (click)=\"deleteFromWhislist(item)\"\r\n title=\"Remove from wishlist\">\r\n <mat-icon class=\"small-icon\">delete</mat-icon>\r\n </button>\r\n </div>\r\n <div class=\"delete-action mt-2\" *ngIf=\"isMobile\">\r\n <button class=\"btn btn-sm w-100\" (click)=\"deleteFromWhislist(item)\">\r\n <mat-icon class=\"small-icon me-1\">delete</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"product-price mb-3\">\r\n <span class=\"h5 text-success fw-bold mb-0\">\r\n <span [innerHTML]='currency'></span>{{item.discountedPrice}}\r\n </span>\r\n <span class=\"text-muted small ms-2\" *ngIf=\"item.quantity\">\r\n ({{item.quantity}} items)\r\n </span>\r\n </div>\r\n <div class=\"action-buttons d-flex gap-2\">\r\n <div class=\"quantity-controls d-flex align-items-center w-50 justify-content-center\"\r\n *ngIf=\"item.quantity\">\r\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n (click)=\"addToFav(item, 'SUBSTRACT')\">\r\n -\r\n </button>\r\n <span class=\"quantity-display px-3 py-1 bg-light rounded mx-1\">\r\n {{item.quantity}}\r\n </span>\r\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n (click)=\"addToFav(item, 'ADD')\"> +\r\n </button>\r\n </div>\r\n <button class=\"btn btn-sm w-50\" *ngIf=\"!item.quantity\"\r\n (click)=\"addToFav(item, 'ADD')\">\r\n + Add Quantity\r\n </button>\r\n <button class=\"btn btn-sm w-50\" (click)=\"moveToCart(item)\">\r\n Move to Cart\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n <ng-template #showEmptyWishlistScreen>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container>\r\n <div class=\"heading-medium d-flex justify-content-center\">\r\n Your Wishlist is Empty</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #SchemeDetails>\r\n <div class=\"header mb-3 f-18 fw-600\">Current Scheme Enrollments - 4</div>\r\n <div class=\"row gap-2\">\r\n <ng-container *ngFor=\"let scheme of [1,1,1,1]\">\r\n <div class=\"cards d-flex flex-column w-32 mb-2 p-0 \">\r\n <div class=\"card-header row gap-2\">\r\n <div class=\"card-head-left col-7\">\r\n <div class=\"scheme-type fs-15 fw-600\">Group Investment Scheme</div>\r\n <div class=\"scheme-id fw-600\">GIS6K_000231004</div>\r\n </div>\r\n <div class=\"card-head-right col-4 text-center align-content-center\">\r\n <div class=\"scheme-amount fw-600\">\u20B96,000/M</div>\r\n </div>\r\n </div>\r\n <div class=\"card-body d-flex p-0 mb-3\">\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/425719c1752566628577star.png\" alt=\"\"\r\n class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">\u20B913,800</div>\r\n <div class=\"card-sub-text text-center\">Total Acheived</div>\r\n </div>\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/229997c1752567131192brand_7959220.png\"\r\n alt=\"\" class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">\u20B91,000</div>\r\n <div class=\"card-sub-text text-center\">Rewards</div>\r\n </div>\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/760761c1752567279970calendar (1).png\"\r\n alt=\"\" class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">8</div>\r\n <div class=\"card-sub-text text-center\">Due Months</div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer row\">\r\n <div class=\"col-6 d-flex gap-2 p-0\">\r\n <span class=\"footer-text text-nowrap\">Start On :</span><span class=\"date-text text-nowrap\">30\r\n may 2025</span>\r\n </div>\r\n <div class=\"col-6 d-flex gap-2 p-0\">\r\n <span class=\"footer-text text-nowrap\">Maturity On :</span><span class=\"date-text text-nowrap\">25\r\n may 2026</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n<ng-template #SchemePassbook>\r\n <div class=\"w-100 h-100 overflow-scroll passbook_container\">\r\n <div class=\"header d-flex flex-column\">\r\n <div class=\"d-flex align-items-center justify-content-end mb-3\" *ngIf=\"storeListing.length >= 2\"><select\r\n class=\"store-listing\" (change)=\"changeStore($event)\">\r\n <option value=\"\">Select Store</option>\r\n <option [value]=\"store.id\" *ngFor=\"let store of storeListing\">{{store.storeName}}</option>\r\n </select></div>\r\n <div class=\"scheme-overview d-flex flex-column\">\r\n <div class=\"d-flex gap-2\">\r\n <div class=\"available-savings\">\r\n <div class=\"d-flex align-items-center gap-1 w-100 justify-content-between\">\r\n <h3>Available Savings</h3>\r\n <span class=\"amount_logo\">\uD83D\uDCB0</span>\r\n </div>\r\n\r\n <div class=\"amount\">{{totalSavings ? totalSavings :\r\n 'N/A'}}</div>\r\n </div>\r\n <div class=\"active-schemes\">\r\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n <h3>Active Passbooks</h3>\r\n <div class=\"auto-pay-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\r\n </div>\r\n </div>\r\n <div class=\"scheme-count\">{{totalSchemes?.length ?\r\n totalSchemes.length : 'N/A'}}</div>\r\n <div class=\"subtitle\">On Track</div>\r\n </div>\r\n <div class=\"active-schemes\" *ngIf=\"totalAccumulatedGold > 0\">\r\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n <h3>Accumulated Gold </h3>\r\n <div class=\"auto-pay-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/153448c1756808418216accumulated_icon.png\">\r\n </div>\r\n </div>\r\n <div class=\"scheme-count\">{{totalAccumulatedGold}} gms</div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"overAllDues?.length\">\r\n <div class=\"section d-flex-flex-column gap-2\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Due Payments</h2>\r\n </div>\r\n <div class=\"payment-list d-flex flex-column gap-2\">\r\n <ng-container *ngIf=\"overAllDues?.length; else showEmptyPayment\">\r\n <div class=\"payment-item overdue\" *ngFor=\"let payment of overAllDues\">\r\n <div class=\"payment-info\">\r\n <div class=\"payment-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/403142c1753435378127Background.svg\">\r\n <!-- <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\"\r\n *ngIf=\"!payment.overdueStatus && payment.paymentStatus === 'PAID'\"> -->\r\n </div>\r\n <div class=\"payment-details\">\r\n <h4>{{payment.schemeName}} - {{payment.emiMonthCount}}rd EMI</h4>\r\n <span>Date {{payment.dueDate ? (payment.dueDate | date:'dd-MM-yyyy') :\r\n 'N/A'}}\r\n <!-- <span *ngIf=\"payment.overdueStatus\">| Due by: {{payment.daysOverdue\r\n ? payment.daysOverdue : 0}}</span> --></span>\r\n </div>\r\n </div>\r\n <div class=\"payment-amount\">\r\n <div class=\"amount-value\">\u20B9{{payment.dueAmount ? payment.dueAmount :\r\n 'N/A'}}\r\n </div>\r\n <div class=\"payment-status overdue-status cursor-pointer\"\r\n (click)=\"payDue(payment)\">\r\n <ng-container *ngIf=\"!payDueLoader\">Pay Now</ng-container>\r\n <ng-container *ngIf=\"payDueLoader\">Loading...</ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #showEmptyPayment>\r\n <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n <span>No Due Payments</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"section mt-3\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Your Active Passbooks</h2>\r\n </div>\r\n\r\n <div class=\"schemes-grid\">\r\n <ng-container *ngIf=\"totalSchemes && totalSchemes.length > 0; else showActiveScheme\">\r\n <div class=\"scheme-card d-flex flex-column gap-2 cursor-pointer\"\r\n *ngFor=\"let scheme of totalSchemes; let i = index\" (click)=\"viewSchemeDetails(scheme)\">\r\n <div class=\"scheme-header\">\r\n <div>\r\n <div class=\"scheme-title\">{{ scheme?.schemeName || 'N/A' }}</div>\r\n <div class=\"scheme-amount\">\u20B9{{ scheme?.installmentAmount || 'N/A' }}/Monthly</div>\r\n </div>\r\n <div class=\"scheme-date\">\r\n <span>Enrolled: {{ scheme?.createdTimestamp ? (scheme?.createdTimestamp |\r\n date:'dd-MM-yyyy') :\r\n 'N/A' }}</span>\r\n <!-- <span>Maturity: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n 'N/A' }}</span> -->\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-status d-flex justify-content-center align-items-center\"\r\n [ngClass]=\"scheme?.passBookStatus === 'REDEEM_REQUESTED' ? 'redeem_status' : (scheme?.passBookStatus === 'ACTIVE' ? 'active-status' : 'redeem_status')\">\r\n {{\r\n scheme.passBookStatus ? scheme.passBookStatus.replaceAll('_', ' ') : 'N/A'\r\n }}\r\n </div>\r\n\r\n <div class=\"scheme-stats\">\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">{{ scheme?.totalPaidAmount || 'N/A' }}</div>\r\n <div class=\"stat-label\">Deposited Amount</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">\r\n {{\r\n scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n (scheme?.schemePayments?.length -\r\n scheme.dueMonths) : 'N/A'\r\n }}\r\n </div>\r\n <div class=\"stat-label\">Paid Months</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">{{scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n scheme?.dueMonths : 'N/A' }}</div>\r\n <div class=\"stat-label\">Due Months</div>\r\n </div>\r\n <div class=\"stat\" *ngIf=\"scheme?.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"stat-value\">{{ scheme?.totalInvestedMetal || 'N/A' }} gms</div>\r\n <div class=\"stat-label\">Accumulated Gold</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-footer\">\r\n <span>Maturity Date: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n 'N/A' }}</span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #showActiveScheme>\r\n <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n <span>No Active Scheme</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n <!-- <div class=\"auto-pay\">\r\n <div class=\"auto-pay-icon mobile-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/966462c1753439662355Background.png\"></div>\r\n <div class=\"auto-pay-content\">\r\n <div class=\"auto-pay-title\">Manage Auto-pay</div>\r\n <div class=\"auto-pay-desc\">Pause, resume or cancel auto payment subscription</div>\r\n </div>\r\n <button class=\"manage-btn\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/409230c1753439564830SVG.png\"> Manage</button>\r\n </div> -->\r\n </div>\r\n</ng-template>\r\n<ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button>\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #Scheme_Details>\r\n <simpo-scheme-details [schemeDetails]=\"schemeDetails\" [data]=\"data\" [metalPrice]=\"metalPrice\"\r\n (gotoSchemeOverview)=\"selectedSidePanelTab = 'Scheme Passbook'\"></simpo-scheme-details>\r\n</ng-template>\r\n<ng-template #Transactions>\r\n <simpo-passbook-transactions></simpo-passbook-transactions>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n</ngx-skeleton-loader>", styles: [".total-container{position:relative;height:auto;overflow:scroll;background:#fff!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;margin-left:20px;padding:15px;overflow-y:auto;overflow-x:hidden;border:1px solid #d3d3d324;border-radius:20px;max-height:70vh}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}.profile-box{box-shadow:#00000029 0 1px 4px}h1{font-weight:600}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.amount_logo{font-size:27px}@media screen and (max-width: 475px){.store-listing{width:35%!important}.total-container{height:100%!important}.amount_logo{font-size:27px}.amount,.scheme-count{font-size:20px!important}.title-text{font-size:24px}.schemes-grid{flex-wrap:wrap;overflow-y:scroll;height:95%}.section{height:auto}.scheme-status{white-space:nowrap}.scheme-card{width:100%}.header{flex-direction:column-reverse}.scheme-overview{width:100%!important}.scheme-overview div{flex-wrap:wrap}.available-savings h3{font-size:17px!important}.quick-actions{width:100%}.active-schemes h3{font-size:17px!important}.auto-pay-icon{width:55px!important;height:50px!important}.mobile-icon{width:30px!important}.manage-btn{width:25%!important}.tab-selected div{font-weight:600!important}.mobile-height{height:100%!important}.passbook_container{height:90%!important;overflow-x:scroll!important}.passbook_container .section{max-height:unset!important;padding:10px!important}.section-header{margin-bottom:2px!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px 0;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.list-sec .tab-selected{border-top-left-radius:10px!important;border-bottom-left-radius:10px}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:0 10px;width:100vw;margin-bottom:20px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.profile-icon{width:70px}.text-overflow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width:1200px) and (max-width: 1330px){.profile-details{width:75%!important}}@media screen and (min-width:1200px){.manage-btn{width:10%!important}}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}.cards{box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;border-radius:12px}.cards .card-header{padding:8px}.cards .card-header .card-head .scheme-type{font-size:15px}.cards .card-body .col-4 .card-sub-text{font-size:14px}.cards .card-footer{border-top:2px dashed!important;margin:0 5px;padding:10px}.cards .card-footer span{font-size:13px}.cards .card-footer .date-text{font-weight:600}.cards .card-footer div{font-size:15px}.fs-15{font-size:14px}.w-32{width:32.5%!important}.w-40{width:40px!important}.f-18{font-size:18px}.fw-600{font-weight:600}.scheme-id{font-size:13px}.order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}.order-card:hover .arrow-icon mat-icon{transform:translate(3px)}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.cart-item-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa);width:49%}.address-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.address-card .card-body{position:relative;overflow:hidden}.address-text{color:#495057;line-height:1.4}.btn-sm{transition:all .3s ease}.small-icon{font-size:16px!important}.badge.bg-light{color:#495057!important;background:linear-gradient(135deg,#e9ecef,#f8f9fa)!important;border:1px solid #dee2e6}@media (max-width: 576px){.address-card .card-body{padding:1rem!important}.address-card{width:100%!important}.btn-sm{display:flex;justify-content:center;align-items:center;color:red!important}.btn-sm mat-icon{font-size:13px}.btn-sm{width:100%;margin-bottom:.25rem}}.profile-box{transition:all .3s ease;position:relative}.profile-box:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001f!important}.profile-icon:hover{transform:scale(1.05);box-shadow:0 6px 20px #00000026!important}.contact-item:hover{color:#007bff!important}.tab-item:hover{background:linear-gradient(90deg,#007bff14,#007bff08)!important;transform:translate(4px)}.tab-item:hover .tab-hover-bg{opacity:1}.tab-item:hover img{transform:scale(1.1)}.tab-selected{border-left:4px solid;font-weight:600!important;border-bottom:unset!important}.tab-selected .tab-label{font-weight:600!important}.edit-btn:hover{background:linear-gradient(135deg,#007bff0d,#007bff1a)!important;transform:translateY(-1px);box-shadow:0 4px 12px #007bff33}.logout-btn:hover{transform:translateY(-1px);box-shadow:0 4px 15px #00000040!important;filter:brightness(1.05)}.tabs-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.tabs-container::-webkit-scrollbar{width:4px}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.profile-box{animation:fadeInUp .6s ease-out}@media (max-width: 768px){.profile-box{width:100%!important}.profile-header{flex-direction:column;height:auto!important;text-align:center}.action-buttons{flex-direction:column}}.scheme-overview{gap:20px;width:100%}.available-savings{background:linear-gradient(135deg,#fff3cd,#ffeaa7);padding:20px;border-radius:12px;position:relative;flex:1}.available-savings .amount{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.available-savings h3{font-size:14px;color:#856404;margin-bottom:8px;font-weight:500}.subtitle{font-size:12px;color:#666}.active-schemes{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;position:relative;flex:1}.active-schemes h3{font-size:14px;color:#666;margin-bottom:8px;font-weight:500}.scheme-count{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:1px solid #e9ecef;max-height:40vh;overflow-x:scroll}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:18px;font-weight:600}.view-all{color:#6c5ce7;font-size:16px}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.overdue{background:#fef2f2;border:1px solid #FECACA}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.upcoming{background:#f8f9fa;color:#666}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.payment-status{font-size:12px;padding:4px 8px;border-radius:4px;color:#fff;white-space:nowrap}.overdue-status{background:#dc3545}.upcoming-status{background:#6c757d}.schemes-grid{display:flex;gap:10px;overflow-x:scroll}.scheme-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e9ecef;position:relative;min-width:34vw}.scheme-header{display:flex;justify-content:space-between;align-items:flex-start}.scheme-title{font-size:16px;font-weight:600;margin-bottom:4px}.scheme-amount{font-size:12px;color:#666}.scheme-date{font-size:12px;color:#666;display:flex;flex-direction:column;gap:10px}.scheme-status{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;text-transform:uppercase;min-width:15%;max-width:fit-content}.redeem_status{background:orange;color:#fff}.active-status{background:#22c55e;color:#fff}.scheme-stats{display:flex;justify-content:space-between}.stat{text-align:center}.stat-value{font-size:20px;font-weight:700;color:#333}.stat-label{font-size:11px;color:#666;text-transform:uppercase;margin-top:4px}.scheme-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666}.price-notice{background:#fce7f3;color:#be185d;padding:8px 12px;border-radius:6px;font-size:11px}.auto-pay{background:#fff3cd;padding:16px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-top:20px}.auto-pay-icon{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.auto-pay-icon img{width:100%}.auto-pay-content{flex:1}.auto-pay-title{font-size:14px;font-weight:600;margin-bottom:4px}.auto-pay-desc{font-size:12px;color:#666}.manage-btn{background:none;border:1px solid #dee2e6;padding:6px 0;border-radius:4px;font-size:13px!important;cursor:pointer;display:flex;justify-content:space-evenly}.store-listing{font-size:14px;width:20%;height:30px;margin-bottom:13px;border:1px solid #e9ecef;border-radius:5px;outline:none;padding-left:5px;cursor:pointer}\n"] }]
|
|
19252
19251
|
}], ctorParameters: () => [{ type: i2$2.Router }, { type: EventsService }, { type: RestService }, { type: StorageServiceService }, { type: CartService }, { type: i1$1.MatDialog }, { type: i8$3.MatBottomSheet }, { type: i2$3.CookieService }, { type: i6$1.MessageService }, { type: i2$2.ActivatedRoute }], propDecorators: { showChargesTemplate: [{
|
|
19253
19252
|
type: ViewChild,
|
|
19254
19253
|
args: ['showCharges', { static: true }]
|