simpo-component-library 3.6.57 → 3.6.61

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.
@@ -19,7 +19,7 @@ import * as i6 from '@angular/material/icon';
19
19
  import { MatIconModule, MatIcon } from '@angular/material/icon';
20
20
  import * as i1 from '@angular/common/http';
21
21
  import { HttpHeaders } from '@angular/common/http';
22
- import { fromEvent, debounceTime, filter, startWith, distinctUntilChanged, switchMap, map, forkJoin } from 'rxjs';
22
+ import { fromEvent, debounceTime, filter, startWith, distinctUntilChanged, switchMap, map, forkJoin, throttleTime } from 'rxjs';
23
23
  import * as i14$1 from '@angular/material/slider';
24
24
  import { MatSliderModule } from '@angular/material/slider';
25
25
  import * as i8$1 from '@angular/cdk/scrolling';
@@ -639,10 +639,11 @@ class ButtonDirectiveDirective {
639
639
  else if (style?.type === 'Text') {
640
640
  this.el.nativeElement.style.setProperty('border', 'unset', 'important');
641
641
  this.el.nativeElement.style.setProperty('background', 'transparent');
642
- this.el.nativeElement.style.setProperty('color', this.getTextColor(backgroundInfo?.accentColor || '#ffffff'));
642
+ this.el.nativeElement.style.setProperty('color', backgroundInfo?.accentColor);
643
643
  if (this.scrollValue) {
644
+ this.el.nativeElement.style.setProperty('border', 'unset', 'important');
644
645
  this.el.nativeElement.style.setProperty('background', 'transparent');
645
- this.el.nativeElement.style.setProperty('color', this.getTextColor(backgroundInfo?.accentColor || '#ffffff'));
646
+ this.el.nativeElement.style.setProperty('color', backgroundInfo?.accentColor);
646
647
  }
647
648
  }
648
649
  else {
@@ -830,13 +831,19 @@ class LinkEditorComponent {
830
831
  ];
831
832
  this.buttonShapes = [
832
833
  {
833
- type: "Round"
834
- },
835
- {
834
+ icon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/832968c1747221270856Vector%2048%20(2).png",
835
+ activeIcon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/481850c1747220937693Vector%2048%20(1).png",
836
836
  type: "Square"
837
837
  },
838
838
  {
839
+ icon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/830842c1747220757453Vector%2049.png",
840
+ activeIcon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/780601c1747221243613Vector%2049%20(1).png",
839
841
  type: "Curve"
842
+ },
843
+ {
844
+ icon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/210350c1747220803521Vector%2050.png",
845
+ activeIcon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/939611c1747220900124Vector%2050%20(1).png",
846
+ type: "Round"
840
847
  }
841
848
  ];
842
849
  this.templatePage = [];
@@ -871,11 +878,11 @@ class LinkEditorComponent {
871
878
  this.eventService.buttonStyleChangeChecks.emit({ id: this.data.buttonId, style: this.data.buttonStyle, backgroundInfo: this.data.backgroundInfo });
872
879
  }
873
880
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: LinkEditorComponent, deps: [{ token: ElementServiceService }, { token: i2$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
874
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: LinkEditorComponent, isStandalone: true, selector: "simpo-link-editor", ngImport: i0, template: "<section>\r\n <div class=\"header\">\r\n <p>{{data.type == 'BUTTON' ? \"Button\" : \"Link\"}} Settings</p>\r\n <mat-icon (click)=\"closeDialog()\" class=\"f-18 d-flex align-items-center justify-content-center cp\">close</mat-icon>\r\n </div>\r\n\r\n <div class=\"body\">\r\n <div>\r\n <label class=\"link-text\">{{data.type == 'BUTTON' ? \"Button\" : \"Link\"}} Text</label><br>\r\n <input type=\"text\" class=\"input-text link-text-input\" [(ngModel)]=\"link.label\">\r\n <p class=\"desc\">This is the text that will be displayed to users</p>\r\n </div>\r\n\r\n <hr>\r\n\r\n <!-- <ng-container *ngIf=\"data.type == 'BUTTON'\">\r\n <select>\r\n <ng-container *ngFor=\"let style of styles\">\r\n <option (click)=\"changeButtonStyle(style)\" [value]=\"style.name\">{{style.name}}</option>\r\n </ng-container>\r\n <select>\r\n </ng-container> -->\r\n\r\n <ng-container *ngIf=\"data.type == 'BUTTON'\">\r\n <label class=\"link-text mb-1\">Button Style</label>\r\n <select [(ngModel)]=\"data.buttonStyle.type\" (ngModelChange)=\"changeButtonStyle()\" class=\"w-100 p-2 mb-2 br-7\">\r\n <ng-container *ngFor=\"let type of buttonTypes\">\r\n <option [value]=\"type.type\">\r\n {{type.type | titlecase}}\r\n </option>\r\n </ng-container>\r\n </select>\r\n <label class=\"link-text mb-1\">Button Border Radius</label>\r\n <select [(ngModel)]=\"data.buttonStyle.shape\" (ngModelChange)=\"changeButtonStyle()\" class=\"w-100 p-2 br-7\">\r\n <ng-container *ngFor=\"let shape of buttonShapes\">\r\n <option [value]=\"shape.type\">\r\n {{shape.type | titlecase}}\r\n </option>\r\n </ng-container>\r\n </select>\r\n </ng-container>\r\n\r\n <div class=\"groups cp\">\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\r\n <div class=\"field-container mt-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\">\r\n <option value=\"\" selected>Select from your existing pages</option>\r\n <option *ngFor=\"let page of templatePage\" [value]=\"page.id\" (click)=\"link.redirectionUrl=page.path\"\r\n 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 <!-- <div class=\"sub-text\">Select from your existing pages</div> -->\r\n </div>\r\n\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\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 <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\" type=\"checkbox\" [(ngModel)]=\"link.newTab\" role=\"switch\">\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"footer w-100 align-items-center justify-content-center\">\r\n <button *ngIf=\"addLink\" (click)=\"addNewLink()\">Update Link</button>\r\n </div>\r\n\r\n </div>\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)}.br-7{border-radius:7px}.header{height:45px;display:flex;justify-content:space-between;border-bottom:2px solid #F0F0F0;align-items:center;padding-left:15px;padding-right:15px}.header p{font-size:16px;font-weight:600;font-family:var(--primary-font-family)}.body{padding:15px}.footer{height:45px;position:absolute;bottom:0;left:0;padding:0 15px}.footer button{border:unset;border-radius:10px;font-size:15px;font-weight:500;padding:5px;color:#fff;text-align:center;background:var(--primary-bg-color)}p{margin-bottom:0!important}.link-text{font-size:15px;font-weight:600;font-family:var(--primary-font-family);color:#434343;margin-bottom:10px}.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}.link-text-input{background-color:var(--grey-color)}.desc{margin-top:10px;font-size:13px;color:#09090980;font-weight:400;font-family:Inter;margin-bottom:25px!important}hr{border:1px solid rgba(116,116,116,.2)}.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;display:inline-block;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}.f-18{font-size:18px}.mt-10{margin-top:10px}.drop-down-container{padding:10px;border-radius:8px;background:#fff}.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}select option{padding:10px;background:#fff;color:#000}.field-container{background:var(--grey-color);border-radius:13px;padding:10px}.sub-text{font-size:13px;color:#09090980}.input-label-1{font-size:16px;font-weight:600}.input-label-2{color:#09090980}option:hover{background:var(--primary-bg-color)}.cp{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { 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.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: MatOptionModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
881
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: LinkEditorComponent, isStandalone: true, selector: "simpo-link-editor", ngImport: i0, template: "<section>\r\n <div class=\"header\">\r\n <p>{{data.type == 'BUTTON' ? \"Button\" : \"Link\"}} Settings</p>\r\n <mat-icon (click)=\"closeDialog()\" class=\"f-18 d-flex align-items-center justify-content-center cp\">close</mat-icon>\r\n </div>\r\n\r\n <div class=\"body\">\r\n <div>\r\n <label class=\"link-text\">{{data.type == 'BUTTON' ? \"Button\" : \"Link\"}} Text</label><br>\r\n <input type=\"text\" class=\"input-text link-text-input\" [(ngModel)]=\"link.label\">\r\n <p class=\"desc\">This is the text that will be displayed to users</p>\r\n </div>\r\n\r\n <hr>\r\n\r\n <!-- <ng-container *ngIf=\"data.type == 'BUTTON'\">\r\n <select>\r\n <ng-container *ngFor=\"let style of styles\">\r\n <option (click)=\"changeButtonStyle(style)\" [value]=\"style.name\">{{style.name}}</option>\r\n </ng-container>\r\n <select>\r\n </ng-container> -->\r\n\r\n <ng-container *ngIf=\"data.type == 'BUTTON'\">\r\n <label class=\"link-text mb-1\">Button Style</label>\r\n <select [(ngModel)]=\"data.buttonStyle.type\" (ngModelChange)=\"changeButtonStyle()\" class=\"w-100 p-2 mb-2 br-7\">\r\n <ng-container *ngFor=\"let type of buttonTypes\">\r\n <option [value]=\"type.type\">\r\n {{type.type | titlecase}}\r\n </option>\r\n </ng-container>\r\n </select>\r\n\r\n <div class=\"field-container\">\r\n <label class=\"link-text\">Button Style</label>\r\n <div class=\"row\">\r\n <div class=\"color w-48\">\r\n\r\n </div>\r\n <div class=\"corner-radius w-48 bg-white p-2 br-10\">\r\n <div class=\"sub-text-1 mb-3\">\r\n Corner Radius\r\n </div>\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <div class=\"box-shadow d-flex br-10 w-75\">\r\n <ng-container *ngFor=\"let shape of buttonShapes\">\r\n <div class=\"color-box d-flex p-2 align-items-center justify-content-center br-10\" [ngClass]=\"{'selected' : data.buttonStyle.shape === shape.type}\"\r\n (click)=\"data.buttonStyle.shape = shape.type;changeButtonStyle()\">\r\n <img [src]=\"shape.icon\" alt=\"icon\" *ngIf=\"data.buttonStyle.shape !== shape.type\">\r\n <img [src]=\"shape.activeIcon\" alt=\"icon\" *ngIf=\"data.buttonStyle.shape === shape.type\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"groups cp\">\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\r\n <div class=\"field-container mt-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\">\r\n <option value=\"\" selected>Select from your existing pages</option>\r\n <option *ngFor=\"let page of templatePage\" [value]=\"page.id\" (click)=\"link.redirectionUrl=page.path\"\r\n 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 <!-- <div class=\"sub-text\">Select from your existing pages</div> -->\r\n </div>\r\n\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\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 <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\" type=\"checkbox\" [(ngModel)]=\"link.newTab\" role=\"switch\">\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"footer w-100 align-items-center justify-content-center\">\r\n <button *ngIf=\"addLink\" (click)=\"addNewLink()\">Update Link</button>\r\n </div>\r\n\r\n </div>\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)}.br-7{border-radius:7px}.br-10{border-radius:10px}.w-90{width:90%}.sub-text-1{font-size:15px;color:#000}.w-48{width:48%}.box-shadow{box-shadow:0 0 4px #00000040}.color-box{width:33%}.selected{background:var(--primary-bg-color)}.header{height:45px;display:flex;justify-content:space-between;border-bottom:2px solid #F0F0F0;align-items:center;padding-left:15px;padding-right:15px}.header p{font-size:16px;font-weight:600;font-family:var(--primary-font-family)}.body{padding:15px}.footer{height:45px;position:absolute;bottom:0;left:0;padding:0 15px}.footer button{border:unset;border-radius:10px;font-size:15px;font-weight:500;padding:5px;color:#fff;text-align:center;background:var(--primary-bg-color)}p{margin-bottom:0!important}.link-text{font-size:15px;font-weight:600;font-family:var(--primary-font-family);color:#434343;margin-bottom:10px}.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}.link-text-input{background-color:var(--grey-color)}.desc{margin-top:10px;font-size:13px;color:#09090980;font-weight:400;font-family:Inter;margin-bottom:25px!important}hr{border:1px solid rgba(116,116,116,.2)}.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;display:inline-block;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}.f-18{font-size:18px}.mt-10{margin-top:10px}.drop-down-container{padding:10px;border-radius:8px;background:#fff}.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}select option{padding:10px;background:#fff;color:#000}.field-container{background:var(--grey-color);border-radius:13px;padding:10px}.sub-text{font-size:13px;color:#09090980}.input-label-1{font-size:16px;font-weight:600}.input-label-2{color:#09090980}option:hover{background:var(--primary-bg-color)}.cp{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { 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.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: MatOptionModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
875
882
  }
876
883
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: LinkEditorComponent, decorators: [{
877
884
  type: Component,
878
- args: [{ selector: 'simpo-link-editor', standalone: true, imports: [CommonModule, FormsModule, MatOptionModule, MatInputModule, MatSelectModule, MatIconModule], template: "<section>\r\n <div class=\"header\">\r\n <p>{{data.type == 'BUTTON' ? \"Button\" : \"Link\"}} Settings</p>\r\n <mat-icon (click)=\"closeDialog()\" class=\"f-18 d-flex align-items-center justify-content-center cp\">close</mat-icon>\r\n </div>\r\n\r\n <div class=\"body\">\r\n <div>\r\n <label class=\"link-text\">{{data.type == 'BUTTON' ? \"Button\" : \"Link\"}} Text</label><br>\r\n <input type=\"text\" class=\"input-text link-text-input\" [(ngModel)]=\"link.label\">\r\n <p class=\"desc\">This is the text that will be displayed to users</p>\r\n </div>\r\n\r\n <hr>\r\n\r\n <!-- <ng-container *ngIf=\"data.type == 'BUTTON'\">\r\n <select>\r\n <ng-container *ngFor=\"let style of styles\">\r\n <option (click)=\"changeButtonStyle(style)\" [value]=\"style.name\">{{style.name}}</option>\r\n </ng-container>\r\n <select>\r\n </ng-container> -->\r\n\r\n <ng-container *ngIf=\"data.type == 'BUTTON'\">\r\n <label class=\"link-text mb-1\">Button Style</label>\r\n <select [(ngModel)]=\"data.buttonStyle.type\" (ngModelChange)=\"changeButtonStyle()\" class=\"w-100 p-2 mb-2 br-7\">\r\n <ng-container *ngFor=\"let type of buttonTypes\">\r\n <option [value]=\"type.type\">\r\n {{type.type | titlecase}}\r\n </option>\r\n </ng-container>\r\n </select>\r\n <label class=\"link-text mb-1\">Button Border Radius</label>\r\n <select [(ngModel)]=\"data.buttonStyle.shape\" (ngModelChange)=\"changeButtonStyle()\" class=\"w-100 p-2 br-7\">\r\n <ng-container *ngFor=\"let shape of buttonShapes\">\r\n <option [value]=\"shape.type\">\r\n {{shape.type | titlecase}}\r\n </option>\r\n </ng-container>\r\n </select>\r\n </ng-container>\r\n\r\n <div class=\"groups cp\">\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\r\n <div class=\"field-container mt-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\">\r\n <option value=\"\" selected>Select from your existing pages</option>\r\n <option *ngFor=\"let page of templatePage\" [value]=\"page.id\" (click)=\"link.redirectionUrl=page.path\"\r\n 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 <!-- <div class=\"sub-text\">Select from your existing pages</div> -->\r\n </div>\r\n\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\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 <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\" type=\"checkbox\" [(ngModel)]=\"link.newTab\" role=\"switch\">\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"footer w-100 align-items-center justify-content-center\">\r\n <button *ngIf=\"addLink\" (click)=\"addNewLink()\">Update Link</button>\r\n </div>\r\n\r\n </div>\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)}.br-7{border-radius:7px}.header{height:45px;display:flex;justify-content:space-between;border-bottom:2px solid #F0F0F0;align-items:center;padding-left:15px;padding-right:15px}.header p{font-size:16px;font-weight:600;font-family:var(--primary-font-family)}.body{padding:15px}.footer{height:45px;position:absolute;bottom:0;left:0;padding:0 15px}.footer button{border:unset;border-radius:10px;font-size:15px;font-weight:500;padding:5px;color:#fff;text-align:center;background:var(--primary-bg-color)}p{margin-bottom:0!important}.link-text{font-size:15px;font-weight:600;font-family:var(--primary-font-family);color:#434343;margin-bottom:10px}.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}.link-text-input{background-color:var(--grey-color)}.desc{margin-top:10px;font-size:13px;color:#09090980;font-weight:400;font-family:Inter;margin-bottom:25px!important}hr{border:1px solid rgba(116,116,116,.2)}.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;display:inline-block;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}.f-18{font-size:18px}.mt-10{margin-top:10px}.drop-down-container{padding:10px;border-radius:8px;background:#fff}.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}select option{padding:10px;background:#fff;color:#000}.field-container{background:var(--grey-color);border-radius:13px;padding:10px}.sub-text{font-size:13px;color:#09090980}.input-label-1{font-size:16px;font-weight:600}.input-label-2{color:#09090980}option:hover{background:var(--primary-bg-color)}.cp{cursor:pointer}\n"] }]
885
+ args: [{ selector: 'simpo-link-editor', standalone: true, imports: [CommonModule, FormsModule, MatOptionModule, MatInputModule, MatSelectModule, MatIconModule], template: "<section>\r\n <div class=\"header\">\r\n <p>{{data.type == 'BUTTON' ? \"Button\" : \"Link\"}} Settings</p>\r\n <mat-icon (click)=\"closeDialog()\" class=\"f-18 d-flex align-items-center justify-content-center cp\">close</mat-icon>\r\n </div>\r\n\r\n <div class=\"body\">\r\n <div>\r\n <label class=\"link-text\">{{data.type == 'BUTTON' ? \"Button\" : \"Link\"}} Text</label><br>\r\n <input type=\"text\" class=\"input-text link-text-input\" [(ngModel)]=\"link.label\">\r\n <p class=\"desc\">This is the text that will be displayed to users</p>\r\n </div>\r\n\r\n <hr>\r\n\r\n <!-- <ng-container *ngIf=\"data.type == 'BUTTON'\">\r\n <select>\r\n <ng-container *ngFor=\"let style of styles\">\r\n <option (click)=\"changeButtonStyle(style)\" [value]=\"style.name\">{{style.name}}</option>\r\n </ng-container>\r\n <select>\r\n </ng-container> -->\r\n\r\n <ng-container *ngIf=\"data.type == 'BUTTON'\">\r\n <label class=\"link-text mb-1\">Button Style</label>\r\n <select [(ngModel)]=\"data.buttonStyle.type\" (ngModelChange)=\"changeButtonStyle()\" class=\"w-100 p-2 mb-2 br-7\">\r\n <ng-container *ngFor=\"let type of buttonTypes\">\r\n <option [value]=\"type.type\">\r\n {{type.type | titlecase}}\r\n </option>\r\n </ng-container>\r\n </select>\r\n\r\n <div class=\"field-container\">\r\n <label class=\"link-text\">Button Style</label>\r\n <div class=\"row\">\r\n <div class=\"color w-48\">\r\n\r\n </div>\r\n <div class=\"corner-radius w-48 bg-white p-2 br-10\">\r\n <div class=\"sub-text-1 mb-3\">\r\n Corner Radius\r\n </div>\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <div class=\"box-shadow d-flex br-10 w-75\">\r\n <ng-container *ngFor=\"let shape of buttonShapes\">\r\n <div class=\"color-box d-flex p-2 align-items-center justify-content-center br-10\" [ngClass]=\"{'selected' : data.buttonStyle.shape === shape.type}\"\r\n (click)=\"data.buttonStyle.shape = shape.type;changeButtonStyle()\">\r\n <img [src]=\"shape.icon\" alt=\"icon\" *ngIf=\"data.buttonStyle.shape !== shape.type\">\r\n <img [src]=\"shape.activeIcon\" alt=\"icon\" *ngIf=\"data.buttonStyle.shape === shape.type\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"groups cp\">\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\r\n <div class=\"field-container mt-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\">\r\n <option value=\"\" selected>Select from your existing pages</option>\r\n <option *ngFor=\"let page of templatePage\" [value]=\"page.id\" (click)=\"link.redirectionUrl=page.path\"\r\n 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 <!-- <div class=\"sub-text\">Select from your existing pages</div> -->\r\n </div>\r\n\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\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 <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\" type=\"checkbox\" [(ngModel)]=\"link.newTab\" role=\"switch\">\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"footer w-100 align-items-center justify-content-center\">\r\n <button *ngIf=\"addLink\" (click)=\"addNewLink()\">Update Link</button>\r\n </div>\r\n\r\n </div>\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)}.br-7{border-radius:7px}.br-10{border-radius:10px}.w-90{width:90%}.sub-text-1{font-size:15px;color:#000}.w-48{width:48%}.box-shadow{box-shadow:0 0 4px #00000040}.color-box{width:33%}.selected{background:var(--primary-bg-color)}.header{height:45px;display:flex;justify-content:space-between;border-bottom:2px solid #F0F0F0;align-items:center;padding-left:15px;padding-right:15px}.header p{font-size:16px;font-weight:600;font-family:var(--primary-font-family)}.body{padding:15px}.footer{height:45px;position:absolute;bottom:0;left:0;padding:0 15px}.footer button{border:unset;border-radius:10px;font-size:15px;font-weight:500;padding:5px;color:#fff;text-align:center;background:var(--primary-bg-color)}p{margin-bottom:0!important}.link-text{font-size:15px;font-weight:600;font-family:var(--primary-font-family);color:#434343;margin-bottom:10px}.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}.link-text-input{background-color:var(--grey-color)}.desc{margin-top:10px;font-size:13px;color:#09090980;font-weight:400;font-family:Inter;margin-bottom:25px!important}hr{border:1px solid rgba(116,116,116,.2)}.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;display:inline-block;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}.f-18{font-size:18px}.mt-10{margin-top:10px}.drop-down-container{padding:10px;border-radius:8px;background:#fff}.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}select option{padding:10px;background:#fff;color:#000}.field-container{background:var(--grey-color);border-radius:13px;padding:10px}.sub-text{font-size:13px;color:#09090980}.input-label-1{font-size:16px;font-weight:600}.input-label-2{color:#09090980}option:hover{background:var(--primary-bg-color)}.cp{cursor:pointer}\n"] }]
879
886
  }], ctorParameters: () => [{ type: ElementServiceService }, { type: i2$1.MatDialogRef }, { type: undefined, decorators: [{
880
887
  type: Inject,
881
888
  args: [MAT_DIALOG_DATA]
@@ -892,7 +899,7 @@ class ButtonEditorDirective {
892
899
  }
893
900
  ngOnInit() {
894
901
  if (this.appButtonEditor) {
895
- this.el.nativeElement.style.border = 'unset';
902
+ this.el.nativeElement.style.border = this.buttonStyle?.type == 'Outline' ? `2px solid ${this.backgroundInfo?.accentColor}` : 'unset';
896
903
  this.setupEventListeners();
897
904
  }
898
905
  }
@@ -901,6 +908,7 @@ class ButtonEditorDirective {
901
908
  if (this.appButtonEditor) {
902
909
  this.setupEventListeners();
903
910
  }
911
+ console.log(this.buttonStyle);
904
912
  }
905
913
  setupEventListeners() {
906
914
  this.mouseEnterSub = fromEvent(this.el.nativeElement, 'mouseenter')
@@ -911,7 +919,7 @@ class ButtonEditorDirective {
911
919
  this.mouseLeaveSub = fromEvent(this.el.nativeElement, 'mouseleave')
912
920
  .pipe(debounceTime(100))
913
921
  .subscribe(() => {
914
- this.el.nativeElement.style.border = 'unset';
922
+ this.el.nativeElement.style.border = this.buttonStyle?.type == 'Outline' ? `2px solid ${this.backgroundInfo?.accentColor}` : 'unset';
915
923
  });
916
924
  this.clickSub = fromEvent(this.el.nativeElement, 'click')
917
925
  .pipe(filter(() => !this.matDialog.openDialogs.length))
@@ -3610,6 +3618,28 @@ class BackgroundDirective {
3610
3618
  this.eventEmmitter = this.eventService.backgroundImageChangeCheck.subscribe((res) => {
3611
3619
  if (this.el.nativeElement.id === res.id || res.globalThemeChange) {
3612
3620
  if (res.data?.showImage && this?.scrollValue == 0) {
3621
+ if (this.simpoBackground?.image.includes('.mp4')) {
3622
+ this.el.nativeElement.style.setProperty('background-image', '');
3623
+ const videoElement = document.createElement('video');
3624
+ videoElement.src = this.simpoBackground.image;
3625
+ videoElement.autoplay = true;
3626
+ videoElement.loop = true;
3627
+ videoElement.muted = true;
3628
+ videoElement.playsInline = true;
3629
+ // Style the video element
3630
+ videoElement.style.position = 'absolute';
3631
+ videoElement.style.right = '0';
3632
+ videoElement.style.bottom = '0';
3633
+ videoElement.style.minWidth = '100%';
3634
+ videoElement.style.minHeight = '100%';
3635
+ videoElement.style.width = 'auto';
3636
+ videoElement.style.height = 'auto';
3637
+ videoElement.style.zIndex = '-1';
3638
+ videoElement.style.objectFit = 'cover';
3639
+ this.el.nativeElement.appendChild(videoElement);
3640
+ return;
3641
+ }
3642
+ // this.el.nativeElement.removeChild(this.el.nativeElement.querySelector('video'));
3613
3643
  this.el.nativeElement.style.setProperty('background-image', `url(${res.data.image})`);
3614
3644
  this.el.nativeElement.style.setProperty('background-position', `${res.data.position?.x}% ${res.data.position?.y}%`);
3615
3645
  this.el.nativeElement.style.setProperty('background-repeat', `no-repeat`);
@@ -3617,6 +3647,7 @@ class BackgroundDirective {
3617
3647
  this.el.nativeElement.style.setProperty('color', this.getTextColor(res.data?.color));
3618
3648
  }
3619
3649
  else {
3650
+ this.el.nativeElement.removeChild(this.el.nativeElement.querySelector('video'));
3620
3651
  if (this.simpoBackground?.backgroundType === 'Gradient') {
3621
3652
  const direction = GradientDirection[this.simpoBackground.backgroundGradientDirection || GradientDirection.DOWN];
3622
3653
  const gradientColor = direction != GradientDirection.DOWN ? `linear-gradient(${direction},${this.simpoBackground.color},${this.simpoBackground.secondaryColor})` :
@@ -3632,6 +3663,17 @@ class BackgroundDirective {
3632
3663
  this.el.nativeElement.style.setProperty('background-position', 'center');
3633
3664
  this.el.nativeElement.style.setProperty('color', this.getTextColor(res.data?.color));
3634
3665
  }
3666
+ if (this.simpoBackground?.backgroundAnimation === 'DANCING_DOTS') {
3667
+ this.el.nativeElement.style.setProperty('background-image', `url('https://d2yx15pncgmu63.cloudfront.net/prod-images/116026c1747122296408Artboard1.gif')`);
3668
+ }
3669
+ if (this.simpoBackground?.backgroundAnimation === 'SCATTERING_DOTS') {
3670
+ this.el.nativeElement.style.setProperty('background-image', `url('https://d2yx15pncgmu63.cloudfront.net/prod-images/287348c1747051540088WhatsAppVideo2025-05-12at5.19.11PM-ezgif.com-video-to-gif-converter (1).gif')`);
3671
+ }
3672
+ if (this.simpoBackground?.backgroundAnimation) {
3673
+ this.el.nativeElement.style.setProperty('background-size', 'cover');
3674
+ this.el.nativeElement.style.setProperty('background-repeat', 'no-repeat');
3675
+ this.el.nativeElement.style.setProperty('background-position', 'center');
3676
+ }
3635
3677
  }
3636
3678
  });
3637
3679
  }
@@ -3644,14 +3686,12 @@ class BackgroundDirective {
3644
3686
  if (this.simpoBackground?.showImage) {
3645
3687
  if (this.simpoBackground?.image.includes('.mp4')) {
3646
3688
  this.el.nativeElement.style.setProperty('background-image', '');
3647
- debugger;
3648
3689
  const videoElement = document.createElement('video');
3649
3690
  videoElement.src = this.simpoBackground.image;
3650
3691
  videoElement.autoplay = true;
3651
3692
  videoElement.loop = true;
3652
3693
  videoElement.muted = true;
3653
3694
  videoElement.playsInline = true;
3654
- debugger;
3655
3695
  // Style the video element
3656
3696
  videoElement.style.position = 'absolute';
3657
3697
  videoElement.style.right = '0';
@@ -3665,6 +3705,7 @@ class BackgroundDirective {
3665
3705
  this.el.nativeElement.appendChild(videoElement);
3666
3706
  return;
3667
3707
  }
3708
+ // this.el.nativeElement.removeChild(this.el.nativeElement.querySelector('video'));
3668
3709
  this.el.nativeElement.style.setProperty('background-image', `url(${this.simpoBackground.image})`);
3669
3710
  this.el.nativeElement.style.setProperty('background-position', `${this.simpoBackground.position?.x}% ${this.simpoBackground.position?.y}%`);
3670
3711
  this.el.nativeElement.style.setProperty('background-repeat', `no-repeat`);
@@ -3672,7 +3713,7 @@ class BackgroundDirective {
3672
3713
  this.el.nativeElement.style.setProperty('color', this.getTextColor(this.simpoBackground?.color ? this.simpoBackground?.color : '#ffffff'));
3673
3714
  }
3674
3715
  else {
3675
- // debugger
3716
+ // this.el.nativeElement.removeChild(this.el.nativeElement.querySelector('video'));
3676
3717
  if (this.simpoBackground?.backgroundType === 'Gradient') {
3677
3718
  const direction = GradientDirection[this.simpoBackground.backgroundGradientDirection || GradientDirection.DOWN];
3678
3719
  const gradientColor = direction != GradientDirection.DOWN ? `linear-gradient(${direction},${this.simpoBackground.color},${this.simpoBackground.secondaryColor})` :
@@ -3698,12 +3739,15 @@ class BackgroundDirective {
3698
3739
  // }
3699
3740
  return;
3700
3741
  }
3742
+ // this.el.nativeElement.removeChild(this.el.nativeElement.querySelector('video'));
3701
3743
  this.el.nativeElement.style.setProperty('background-color', this.simpoBackground?.color);
3702
3744
  this.el.nativeElement.style.setProperty('background-image', ``);
3703
3745
  if (this.simpoBackground?.backgroundAnimation === 'DANCING_DOTS') {
3746
+ // this.el.nativeElement.removeChild(this.el.nativeElement.querySelector('video'));
3704
3747
  this.el.nativeElement.style.setProperty('background-image', `url('https://d2yx15pncgmu63.cloudfront.net/prod-images/116026c1747122296408Artboard1.gif')`);
3705
3748
  }
3706
3749
  if (this.simpoBackground?.backgroundAnimation === 'SCATTERING_DOTS') {
3750
+ // this.el.nativeElement.removeChild(this.el.nativeElement.querySelector('video'));
3707
3751
  this.el.nativeElement.style.setProperty('background-image', `url('https://d2yx15pncgmu63.cloudfront.net/prod-images/287348c1747051540088WhatsAppVideo2025-05-12at5.19.11PM-ezgif.com-video-to-gif-converter (1).gif')`);
3708
3752
  }
3709
3753
  if (this.simpoBackground?.backgroundAnimation) {
@@ -12280,12 +12324,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
12280
12324
 
12281
12325
  class HeaderSectionComponent {
12282
12326
  // matDialog = inject(MatDialog);
12283
- constructor(_eventService, router, activatedRoute, matDialog, storageService) {
12327
+ constructor(_eventService, router, activatedRoute, matDialog, storageService, ngZone, platformId
12328
+ // private cdRef: ChangeDetectorRef
12329
+ ) {
12284
12330
  this._eventService = _eventService;
12285
12331
  this.router = router;
12286
12332
  this.activatedRoute = activatedRoute;
12287
12333
  this.matDialog = matDialog;
12288
12334
  this.storageService = storageService;
12335
+ this.ngZone = ngZone;
12336
+ this.platformId = platformId;
12289
12337
  this.edit = false;
12290
12338
  this.scrollValue = 0;
12291
12339
  this.color = '#000000';
@@ -12293,6 +12341,7 @@ class HeaderSectionComponent {
12293
12341
  this.theme = ProductCardTheme;
12294
12342
  this.HeaderStyling = Header_Type;
12295
12343
  this.parentHeight = 70; // Default height
12344
+ this.scrollSubscription = null;
12296
12345
  // ngAfterViewInit() {
12297
12346
  // this.updateParentHeight();
12298
12347
  // // ✅ Detect size changes and update height
@@ -12361,6 +12410,7 @@ class HeaderSectionComponent {
12361
12410
  }
12362
12411
  onScroll(event) {
12363
12412
  this.scrollValue = event.currentTarget.pageYOffset / 100;
12413
+ this.isScrolled = window.scrollY > 50;
12364
12414
  }
12365
12415
  ngOnInit() {
12366
12416
  this.content = this.data?.content;
@@ -12369,6 +12419,18 @@ class HeaderSectionComponent {
12369
12419
  this.activatedRoute.queryParams.subscribe((qParam) => {
12370
12420
  this.searchText = qParam["searchTxt"];
12371
12421
  });
12422
+ if (isPlatformBrowser(this.platformId)) {
12423
+ this.scrollSubscription = fromEvent(window, 'scroll')
12424
+ .pipe(throttleTime(100), map(() => window.scrollY > 50), distinctUntilChanged())
12425
+ .subscribe(scrolled => {
12426
+ this.isScrolled = scrolled;
12427
+ });
12428
+ }
12429
+ }
12430
+ ngOnDestroy() {
12431
+ if (this.scrollSubscription) {
12432
+ this.scrollSubscription.unsubscribe();
12433
+ }
12372
12434
  }
12373
12435
  getScreenSize(event) {
12374
12436
  if (typeof window !== 'undefined') {
@@ -12473,11 +12535,8 @@ class HeaderSectionComponent {
12473
12535
  }
12474
12536
  return page;
12475
12537
  }
12476
- onWindowScroll() {
12477
- this.isScrolled = window.scrollY > 50;
12478
- }
12479
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: HeaderSectionComponent, deps: [{ token: EventsService }, { token: i2$4.Router }, { token: i2$4.ActivatedRoute }, { token: i2$1.MatDialog }, { token: StorageServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
12480
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: HeaderSectionComponent, isStandalone: true, selector: "simpo-header-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "window:scroll": "onWindowScroll()", "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\" [style.height.px]=\"getParentHeight\" simpoHover\r\n (hovering)=\"showEditTabs($event)\">\r\n <div class=\"w-100\" #childContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\r\n [ngClass]=\"{'box-shadow': isEcommerceWebsite}\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\"\r\n [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\" [ngClass]=\"{'header--scrolled' : content?.display?.showShrinkingHeader && isScrolled}\">\r\n <ng-container *ngIf=\"content?.display?.showHeadline\" >\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>\r\n <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [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\" [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\" [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\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n </div>\r\n </div>\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\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</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\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></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\" 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 #header2Template>\r\n <div class=\"header1\">\r\n <div class=\"d-flex gap-15 align-center\" *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 *ngTemplateOutlet=\"pageLinksTemplate\"></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 *ngTemplateOutlet=\"pageLinksTemplate\"></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\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></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 <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)=\"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)=\"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>\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</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\"\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=\"input-group\" *ngIf=\"showSearchBar\">\r\n <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon [style.color]=\"accentColor\">favorite_border</mat-icon>\r\n <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span> -->\r\n </div>\r\n <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\"\r\n (click)=\"goToCart()\">\r\n <mat-icon [style.color]=\"accentColor\">shopping_cart</mat-icon>\r\n <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span> -->\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"loginButton\" (click)=\"goToAccount()\" [style.backgroundColor]=\"accentColor\" *ngIf=\"!loggedIn\">\r\n <mat-icon [simpoColor]=\"accentColor\">person_outline</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount()\" *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">{{getUserName}}</span>\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 <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount()\" *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)=\"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)=\"goToHome()\">\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}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.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{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:0;left:12px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;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}.input-group{position:relative;width:340px;outline:none;border:none;border-radius:5px;height:38px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px;position:absolute;right:0%;top:130%;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size: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;padding:6px 15px;border-radius:8px;cursor:pointer}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:100000000}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i3.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"] }, { 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"] }] }); }
12538
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: HeaderSectionComponent, deps: [{ token: EventsService }, { token: i2$4.Router }, { token: i2$4.ActivatedRoute }, { token: i2$1.MatDialog }, { token: StorageServiceService }, { token: i0.NgZone }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
12539
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", 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\" [style.height.px]=\"getParentHeight\" simpoHover\r\n (hovering)=\"showEditTabs($event)\">\r\n <div class=\"w-100\" #childContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\r\n [ngClass]=\"{'box-shadow': isEcommerceWebsite}\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\"\r\n [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\" [ngClass]=\"{'header--scrolled' : content?.display?.showShrinkingHeader && isScrolled}\">\r\n <ng-container *ngIf=\"content?.display?.showHeadline\" >\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>\r\n <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [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\" [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\" [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\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n </div>\r\n </div>\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\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</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\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></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\" 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 #header2Template>\r\n <div class=\"header1\">\r\n <div class=\"d-flex gap-15 align-center\" *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 *ngTemplateOutlet=\"pageLinksTemplate\"></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 *ngTemplateOutlet=\"pageLinksTemplate\"></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\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></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 <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)=\"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)=\"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>\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</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\"\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=\"input-group\" *ngIf=\"showSearchBar\">\r\n <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon [style.color]=\"accentColor\">favorite_border</mat-icon>\r\n <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span> -->\r\n </div>\r\n <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\"\r\n (click)=\"goToCart()\">\r\n <mat-icon [style.color]=\"accentColor\">shopping_cart</mat-icon>\r\n <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span> -->\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"loginButton\" (click)=\"goToAccount()\" [style.backgroundColor]=\"accentColor\" *ngIf=\"!loggedIn\">\r\n <mat-icon [simpoColor]=\"accentColor\">person_outline</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount()\" *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">{{getUserName}}</span>\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 <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount()\" *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)=\"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)=\"goToHome()\">\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}.total-container{transition:width .2s ease-in-out}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.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{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:0;left:12px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;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}.input-group{position:relative;width:340px;outline:none;border:none;border-radius:5px;height:38px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px;position:absolute;right:0%;top:130%;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size: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;padding:6px 15px;border-radius:8px;cursor:pointer}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:100000000}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i3.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"] }, { 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"] }] }); }
12481
12540
  }
12482
12541
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: HeaderSectionComponent, decorators: [{
12483
12542
  type: Component,
@@ -12515,8 +12574,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
12515
12574
  SpacingHorizontalDirective,
12516
12575
  MovingTextComponent,
12517
12576
  ContentFitDirective
12518
- ], template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [style.height.px]=\"getParentHeight\" simpoHover\r\n (hovering)=\"showEditTabs($event)\">\r\n <div class=\"w-100\" #childContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\r\n [ngClass]=\"{'box-shadow': isEcommerceWebsite}\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\"\r\n [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\" [ngClass]=\"{'header--scrolled' : content?.display?.showShrinkingHeader && isScrolled}\">\r\n <ng-container *ngIf=\"content?.display?.showHeadline\" >\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>\r\n <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [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\" [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\" [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\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n </div>\r\n </div>\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\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</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\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></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\" 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 #header2Template>\r\n <div class=\"header1\">\r\n <div class=\"d-flex gap-15 align-center\" *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 *ngTemplateOutlet=\"pageLinksTemplate\"></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 *ngTemplateOutlet=\"pageLinksTemplate\"></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\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></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 <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)=\"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)=\"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>\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</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\"\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=\"input-group\" *ngIf=\"showSearchBar\">\r\n <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon [style.color]=\"accentColor\">favorite_border</mat-icon>\r\n <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span> -->\r\n </div>\r\n <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\"\r\n (click)=\"goToCart()\">\r\n <mat-icon [style.color]=\"accentColor\">shopping_cart</mat-icon>\r\n <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span> -->\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"loginButton\" (click)=\"goToAccount()\" [style.backgroundColor]=\"accentColor\" *ngIf=\"!loggedIn\">\r\n <mat-icon [simpoColor]=\"accentColor\">person_outline</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount()\" *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">{{getUserName}}</span>\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 <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount()\" *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)=\"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)=\"goToHome()\">\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}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.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{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:0;left:12px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;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}.input-group{position:relative;width:340px;outline:none;border:none;border-radius:5px;height:38px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px;position:absolute;right:0%;top:130%;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size: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;padding:6px 15px;border-radius:8px;cursor:pointer}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:100000000}.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}\n"] }]
12519
- }], ctorParameters: () => [{ type: EventsService }, { type: i2$4.Router }, { type: i2$4.ActivatedRoute }, { type: i2$1.MatDialog }, { type: StorageServiceService }], propDecorators: { data: [{
12577
+ ], template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [style.height.px]=\"getParentHeight\" simpoHover\r\n (hovering)=\"showEditTabs($event)\">\r\n <div class=\"w-100\" #childContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\r\n [ngClass]=\"{'box-shadow': isEcommerceWebsite}\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\"\r\n [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\" [ngClass]=\"{'header--scrolled' : content?.display?.showShrinkingHeader && isScrolled}\">\r\n <ng-container *ngIf=\"content?.display?.showHeadline\" >\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>\r\n <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [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\" [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\" [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\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n </div>\r\n </div>\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\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</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\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></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\" 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 #header2Template>\r\n <div class=\"header1\">\r\n <div class=\"d-flex gap-15 align-center\" *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 *ngTemplateOutlet=\"pageLinksTemplate\"></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 *ngTemplateOutlet=\"pageLinksTemplate\"></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\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></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 <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)=\"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)=\"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>\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</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\"\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=\"input-group\" *ngIf=\"showSearchBar\">\r\n <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon [style.color]=\"accentColor\">favorite_border</mat-icon>\r\n <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span> -->\r\n </div>\r\n <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\"\r\n (click)=\"goToCart()\">\r\n <mat-icon [style.color]=\"accentColor\">shopping_cart</mat-icon>\r\n <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span> -->\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"loginButton\" (click)=\"goToAccount()\" [style.backgroundColor]=\"accentColor\" *ngIf=\"!loggedIn\">\r\n <mat-icon [simpoColor]=\"accentColor\">person_outline</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount()\" *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">{{getUserName}}</span>\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 <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount()\" *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)=\"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)=\"goToHome()\">\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}.total-container{transition:width .2s ease-in-out}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.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{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:0;left:12px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;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}.input-group{position:relative;width:340px;outline:none;border:none;border-radius:5px;height:38px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px;position:absolute;right:0%;top:130%;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size: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;padding:6px 15px;border-radius:8px;cursor:pointer}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:100000000}.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}\n"] }]
12578
+ }], ctorParameters: () => [{ type: EventsService }, { type: i2$4.Router }, { type: i2$4.ActivatedRoute }, { type: i2$1.MatDialog }, { type: StorageServiceService }, { type: i0.NgZone }, { type: Object, decorators: [{
12579
+ type: Inject,
12580
+ args: [PLATFORM_ID]
12581
+ }] }], propDecorators: { data: [{
12520
12582
  type: Input
12521
12583
  }], nextComponent: [{
12522
12584
  type: Input
@@ -12535,9 +12597,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
12535
12597
  }], getScreenSize: [{
12536
12598
  type: HostListener,
12537
12599
  args: ['window:resize', ['$event']]
12538
- }], onWindowScroll: [{
12539
- type: HostListener,
12540
- args: ['window:scroll', []]
12541
12600
  }] } });
12542
12601
 
12543
12602
  class NewTestimonialsComponent extends BaseSection {