simpo-component-library 3.6.466 → 3.6.468

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/esm2022/lib/directive/button-directive.directive.mjs +6 -4
  2. package/esm2022/lib/directive/image-directive.directive.mjs +5 -2
  3. package/esm2022/lib/directive/spacing-around.directive.mjs +3 -3
  4. package/esm2022/lib/elements/link-editor/link-editor.component.mjs +13 -4
  5. package/esm2022/lib/elements/text-editor/text-editor.component.mjs +94 -80
  6. package/esm2022/lib/sections/footer/footer.component.mjs +3 -3
  7. package/esm2022/lib/sections/header-section/header-section.component.mjs +3 -5
  8. package/esm2022/lib/sections/image-carousel-section/image-carousel-section.component.mjs +12 -5
  9. package/esm2022/lib/sections/logo-showcase/logo-showcase.component.mjs +7 -9
  10. package/esm2022/lib/sections/service-section/service-section.component.mjs +3 -3
  11. package/esm2022/lib/services/rest.service.mjs +21 -17
  12. package/esm2022/lib/tokens/api-token.mjs +2 -1
  13. package/fesm2022/simpo-component-library.mjs +185 -149
  14. package/fesm2022/simpo-component-library.mjs.map +1 -1
  15. package/lib/ecommerce/sections/authentication-required/authentication-required.component.d.ts +1 -1
  16. package/lib/ecommerce/sections/product-desc/product-desc.component.d.ts +1 -1
  17. package/lib/ecommerce/sections/schemes/schemes.component.d.ts +1 -1
  18. package/lib/elements/link-editor/link-editor.component.d.ts +2 -1
  19. package/lib/elements/pricing-s1/pricing-s1.component.d.ts +1 -1
  20. package/lib/elements/text-editor/text-editor.component.d.ts +4 -3
  21. package/lib/sections/banner-carousel/banner-carousel.component.d.ts +2 -2
  22. package/lib/sections/carousel-banner/carousel-banner.component.d.ts +1 -1
  23. package/lib/sections/contact-us/contact-us.component.d.ts +1 -1
  24. package/lib/sections/faq-section/faq-section.component.d.ts +1 -1
  25. package/lib/sections/image-carousel-section/image-carousel-section.component.d.ts +2 -1
  26. package/lib/sections/image-section/image-section.component.d.ts +2 -2
  27. package/lib/sections/logo-showcase/logo-showcase.component.d.ts +2 -2
  28. package/lib/sections/new-testimonials/new-testimonials.component.d.ts +1 -1
  29. package/lib/sections/pricing-section/pricing-section.component.d.ts +1 -1
  30. package/lib/services/rest.service.d.ts +2 -2
  31. package/lib/tokens/api-token.d.ts +1 -0
  32. package/package.json +1 -1
  33. package/simpo-component-library-3.6.468.tgz +0 -0
  34. package/simpo-component-library-3.6.466.tgz +0 -0
package/fesm2022/simpo-component-library.mjs CHANGED
@@ -544,7 +544,7 @@ class ImageDirectiveDirective {
544
544
  if (this.simpoImageDirective.ratio === ImageRatio.SQUARE ||
545
545
  this.simpoImageDirective.ratio === ImageRatio.LANDSCAPE ||
546
546
  this.simpoImageDirective.ratio === ImageRatio.PORTRAIT ||
547
- this.simpoImageDirective.ratio === ImageRatio.RECTANGULAR) {
547
+ this.simpoImageDirective.ratio === ImageRatio.WIDESCREEN || this.simpoImageDirective.ratio === ImageRatio.RECTANGULAR) {
548
548
  imageRatio = this.simpoImageDirective.ratio.split(":");
549
549
  }
550
550
  this.el.nativeElement.style.setProperty('aspect-ratio', imageRatio[0] + '/' + imageRatio[1]);
@@ -583,6 +583,9 @@ class ImageDirectiveDirective {
583
583
  if (style?.ratio === ImageRatio.WIDESCREEN) {
584
584
  imageRatio = ImageRatio.WIDESCREEN.split(":");
585
585
  }
586
+ if (style?.ratio === ImageRatio.RECTANGULAR) {
587
+ imageRatio = ImageRatio.RECTANGULAR.split(":");
588
+ }
586
589
  this.el.nativeElement.style.setProperty('aspect-ratio', imageRatio[0] + '/' + imageRatio[1]);
587
590
  }
588
591
  }
@@ -656,6 +659,7 @@ class ButtonDirectiveDirective {
656
659
  this.el.nativeElement.style.setProperty('color', style?.background);
657
660
  if (this.scrollValue) {
658
661
  this.el.nativeElement.style.setProperty('border', 'unset', 'important');
662
+ this.el.nativeElement.style.setProperty('border-radius', 'unset', 'important');
659
663
  this.el.nativeElement.style.setProperty('background', 'transparent');
660
664
  this.el.nativeElement.style.setProperty('color', style?.secondaryBackground);
661
665
  }
@@ -683,6 +687,8 @@ class ButtonDirectiveDirective {
683
687
  }
684
688
  }
685
689
  applyButtonShape(style) {
690
+ if (style?.type === 'Text')
691
+ return;
686
692
  if (style?.shape === 'Round') {
687
693
  this.el.nativeElement.style.setProperty('border-radius', '99px');
688
694
  }
@@ -720,10 +726,9 @@ class ButtonDirectiveDirective {
720
726
  }
721
727
  }
722
728
  onHover() {
723
- if (this.buttonStyle?.type === 'Solid') {
729
+ if (this.buttonStyle?.type !== 'Text')
724
730
  this.el.nativeElement.style.setProperty('box-shadow', 'rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px');
725
- this.el.nativeElement.style.setProperty('transform', 'translateY(-3px)');
726
- }
731
+ this.el.nativeElement.style.setProperty('transform', 'translateY(-5px)');
727
732
  }
728
733
  onLeave() {
729
734
  this.el.nativeElement.style.setProperty('box-shadow', 'none');
@@ -758,6 +763,7 @@ const API_URL = new InjectionToken('apiUrl');
758
763
  const ECOMMERCE_URL = new InjectionToken('ecommerceURL');
759
764
  const CMIS_URL = new InjectionToken('cmisURL');
760
765
  const BUCKET_URL = new InjectionToken('bucketURL');
766
+ const PASSBOOK_URL = new InjectionToken('passbookURL');
761
767
 
762
768
  class ImageUplaodService {
763
769
  // region = 'us-east-1'
@@ -1323,9 +1329,18 @@ class LinkEditorComponent {
1323
1329
  addNewLink() {
1324
1330
  this.dialogRef.close({ link: this.link });
1325
1331
  }
1332
+ getColorLabel() {
1333
+ if (this.data.buttonStyle?.type == 'Outline') {
1334
+ return 'Outline Color';
1335
+ }
1336
+ else if (this.data.buttonStyle?.type == 'Text') {
1337
+ return 'Text Color';
1338
+ }
1339
+ return 'Button Color';
1340
+ }
1326
1341
  changeButtonStyle() {
1327
1342
  // debugger
1328
- if (this.data?.buttonStyle?.type == 'Outline') {
1343
+ if (this.data?.buttonStyle?.type == 'Outline' || this.data?.buttonStyle?.type == 'Text') {
1329
1344
  this.backgroundType = ['Solid'];
1330
1345
  this.data.buttonStyle.colorType = 'Solid';
1331
1346
  }
@@ -1413,11 +1428,11 @@ class LinkEditorComponent {
1413
1428
  }
1414
1429
  }
1415
1430
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LinkEditorComponent, deps: [{ token: ElementServiceService }, { token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: EventsService }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
1416
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LinkEditorComponent, isStandalone: true, selector: "simpo-link-editor", ngImport: i0, template: "<section>\n <div class=\"header\">\n <p>{{data.type == 'BUTTON' ? \"Button\" : \"Link\"}} Settings</p>\n <mat-icon (click)=\"closeDialog()\" class=\"f-18 d-flex align-items-center justify-content-center cp\">close</mat-icon>\n </div>\n\n <div class=\"body\">\n <div>\n <label class=\"link-text\">{{data.type == 'BUTTON' ? \"Button\" : \"Link\"}} Text</label><br>\n <input type=\"text\" class=\"input-text link-text-input\" [(ngModel)]=\"link.label\">\n <p class=\"desc\">This is the text that will be displayed to users</p>\n </div>\n\n <hr>\n\n <!-- <ng-container *ngIf=\"data.type == 'BUTTON'\">\n <select>\n <ng-container *ngFor=\"let style of styles\">\n <option (click)=\"changeButtonStyle(style)\" [value]=\"style.name\">{{style.name}}</option>\n </ng-container>\n <select>\n </ng-container> -->\n\n <ng-container *ngIf=\"data.type == 'BUTTON'\">\n <div class=\"field-container mb-2\">\n <div class=\"d-flex justify-content-between align-items-center\">\n <label class=\"link-text mb-1\">Button</label>\n <div class=\"colorType d-flex align-items-center justify-content-center\">\n <select class=\"border-0 w-100\" [(ngModel)]=\"data.buttonStyle.type\" (ngModelChange)=\"changeButtonStyle()\">\n <ng-container *ngFor=\"let type of buttonTypes\">\n <option [value]=\"type.type\">\n {{type.type | titlecase}}\n </option>\n </ng-container>\n </select>\n </div>\n </div>\n <div>\n <div class=\"preview d-flex justify-content-center\">\n <button class=\"btn-style w-80\" [style.borderRadius]=\"setBorderRadius()\" [style.border]=\"setBorder()\"\n [style.background]=\"setBackground()\">\n <span\n *ngIf=\"(data?.buttonStyle?.type === 'Text' || data?.buttonStyle?.type === 'Outline') && data?.buttonStyle?.colorType === 'Gradient'\"\n [ngStyle]=\"{\n 'background': 'linear-gradient(90deg, ' + data?.buttonStyle?.background + ' 0%, ' + data?.buttonStyle.secondaryBackground + ' 100%)'\n }\">\n {{ link.label ? link.label : \"Button Text\"}}\n </span>\n <span *ngIf=\"data?.style?.colorType == 'Solid' || data?.buttonStyle?.type == 'Solid'\"\n [style.color]=\"setColor()\">\n {{ link.label ? link.label : \"Button Text\"}}\n </span>\n <span *ngIf=\"data?.buttonStyle?.type === 'Text' || data?.buttonStyle?.type === 'Outline'\"\n [style.color]=\"setColor()\">\n {{ link.label ? link.label : \"Button Text\"}}\n </span>\n </button>\n\n </div>\n </div>\n </div>\n\n <div class=\"field-container\">\n <label class=\"link-text\">Button Style</label>\n <div class=\"color-container row\">\n <div class=\"color br-10\">\n <div class=\"color-top d-flex justify-content-between mb-2 align-items-center\">\n <div class=\"left-side\">Color</div>\n <div class=\"right-side\">\n <div class=\"colorType d-flex align-items-center justify-content-center w-100\">\n <select class=\"border-0 w-100\" [(ngModel)]=\"data.buttonStyle.colorType\"\n (ngModelChange)=\"changeButtonStyle()\">\n <ng-container *ngFor=\"let type of backgroundType\">\n <option style=\"padding: 10px;\">\n {{ type | titlecase }}</option>\n </ng-container>\n </select>\n </div>\n </div>\n </div>\n <div class=\"color-bottom\">\n <div class=\"mt-20\" *ngIf=\"data.buttonStyle.colorType === 'Solid'\">\n <div class=\"text-background\">\n <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.background\"\n (ngModelChange)=\"getContrastTextColor(data.buttonStyle.background)\" style=\"display: none;\"\n #colorInput>\n <div class=\"w-100 d-flex flex-column mt-2\">\n <label class=\"color-text mb-1 d-flex justify-content-center\"> Button Color</label>\n <div class=\"w-100 d-flex justify-content-center\">\n <div class=\"custom-input\" [style.background]=\"data.buttonStyle.background\"\n (click)=\"colorInput.click()\"></div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mt-20\" *ngIf=\"data.buttonStyle.colorType === 'Gradient'\">\n <div class=\"text-background\">\n <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.background\"\n (ngModelChange)=\"changeButtonStyle()\" style=\"display: none;\" #colorInput1>\n <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.secondaryBackground\"\n (ngModelChange)=\"changeButtonStyle()\" style=\"display: none;\" #colorInput>\n <div class=\"w-100 d-flex mt-2\">\n <div class=\"w-100 d-flex flex-column\">\n <label class=\"color-text mb-1 d-flex justify-content-center\">Color 1</label>\n <div class=\"d-flex justify-content-center\">\n <div class=\"custom-input\" [style.background]=\"data?.buttonStyle?.background\"\n (click)=\"colorInput1.click()\"></div>\n </div>\n </div>\n <div class=\"w-100 d-flex flex-column\">\n <label class=\"color-text mb-1 d-flex justify-content-center\">Color 2</label>\n <div class=\"d-flex justify-content-center\">\n <div class=\"custom-input\" [style.background]=\"data?.buttonStyle?.secondaryBackground\"\n (click)=\"colorInput.click()\"></div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"gradient-direction\">\n <div class=\"left-direction mt-3 mb-1\"> Direction</div>\n <div class=\"right-direction\">\n <div class=\"d-flex justify-content-center align-items-center\">\n <div class=\"box-shadow d-flex br-10 w-80\">\n <ng-container *ngFor=\"let direction of directionType\">\n <div class=\"color-box d-flex p-2 align-items-center justify-content-center br-10\"\n [ngClass]=\"{'selected' : data.buttonStyle?.gradientDirection === direction.type}\"\n (click)=\"data.buttonStyle.gradientDirection = direction.type;changeButtonStyle()\">\n <img class=\"w-10\" [src]=\"direction.icon\" alt=\"icon\"\n *ngIf=\"data.buttonStyle?.gradientDirection !== direction.type\" loading=\"lazy\">\n <img class=\"w-10\" [src]=\"direction.activeIcon\" alt=\"icon\"\n *ngIf=\"data.buttonStyle?.gradientDirection === direction.type\" loading=\"lazy\">\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mt-20\">\n <div class=\"text-background\">\n <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.textColor\"\n (ngModelChange)=\"changeButtonStyle()\" style=\"display: none;\" #colorInput3>\n <div class=\"w-100 d-flex flex-column mt-2\">\n <label class=\"color-text mb-1 d-flex justify-content-center\">Text Color</label>\n <div class=\"w-100 d-flex justify-content-center\">\n <div class=\"custom-input\" [style.background]=\"data.buttonStyle.textColor\"\n (click)=\"colorInput3.click()\"></div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"corner-radius bg-white p-2 br-10 d-flex justify-content-between\"\n *ngIf=\"data.buttonStyle.type != 'Text'\">\n <div class=\"sub-text-1 d-flex align-items-center\">\n Corner Radius\n </div>\n <div class=\"d-flex justify-content-center align-items-center\">\n <div class=\"box-shadow d-flex br-10\">\n <ng-container *ngFor=\"let shape of buttonShapes\">\n <div class=\"color-box d-flex p-2 align-items-center justify-content-center br-10\"\n [ngClass]=\"{'selected' : data.buttonStyle.shape === shape.type}\"\n (click)=\"data.buttonStyle.shape = shape.type;changeButtonStyle()\">\n <img [src]=\"shape.icon\" alt=\"icon\" *ngIf=\"data.buttonStyle.shape !== shape.type\" loading=\"lazy\"\n class=\"transition-image\">\n <img [src]=\"shape.activeIcon\" alt=\"icon\" *ngIf=\"data.buttonStyle?.shape === shape.type\"\n loading=\"lazy\" class=\"transition-image\">\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"p-2 d-flex justify-content-between align-items-center mt-20\">\n <div class=\"fw-bold\">Show Icon</div>\n <div class=\"form-check form-switch ml-auto\">\n <input class=\"form-check-input switch-btn\" type=\"checkbox\" [(ngModel)]=\"link.showIcon\" role=\"switch\">\n </div>\n </div>\n <div>\n <!-- <p class=\"heading mb-0\">Image</p> -->\n <div class=\"upload-image cp\" *ngIf=\"link.showIcon && !link?.icon?.url\" (click)=\"updateImage()\">\n <img loading=\"lazy\"\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\"\n alt=\"\">\n <p class=\"upload-text mb-0\">Upload a file</p>\n <p class=\"upload-text mb-0\">or select an existing one</p>\n <span class=\"upload-text\">up to 32MB</span>\n </div>\n <div class=\"sec d-flex align-items-center\" *ngIf=\"link.showIcon && link?.icon?.url\">\n <ng-container *ngIf=\"!imgLoader\">\n <img [src]=\"link?.icon?.url\">\n <div class=\"repalce-image cursor-pointer\" (click)=\"updateImage()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" width=\"24\"\n height=\"24\" class=\"icon w-4 h-4\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\n d=\"m4 16 4.58579-4.5858c.78104-.781 2.04741-.781 2.82841 0L16 16m-2-2 1.5858-1.5858c.781-.781 2.0474-.781 2.8284 0L20 14m-6-6h.01M6 20h12c1.1046 0 2-.8954 2-2V6c0-1.10457-.8954-2-2-2H6c-1.10457 0-2 .89543-2 2v12c0 1.1046.89543 2 2 2Z\">\n </path>\n </svg>\n </div>\n\n <div class=\"delete-image cursor-pointer \" (click)=\"deleteImage()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"#ffffff\" viewBox=\"0 0 24 24\" width=\"24\"\n height=\"24\" class=\"icon h-4 w-4\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\n d=\"m19 7-.8673 12.1425C18.0579 20.1891 17.187 21 16.1378 21H7.86224c-1.04928 0-1.92016-.8109-1.99492-1.8575L5 7m5 4v6m4-6v6m1-10V4c0-.55228-.4477-1-1-1h-4c-.55228 0-1 .44772-1 1v3M4 7h16\">\n </path>\n </svg>\n </div>\n </ng-container>\n <ng-container *ngIf=\"imgLoader\">\n <div class=\"upload_spinner d-flex w-100 h-100 justify-content-center align-items-center\">\n <mat-spinner></mat-spinner>\n </div>\n </ng-container>\n </div>\n\n\n </div>\n\n <div class=\"fw-bold p-2 mb-2\">Icon Position</div>\n <div class=\"tabs d-flex px-2 gap-3 mb-2\" *ngIf=\"link.showIcon\">\n <div class=\"tab px-3 py-2\" *ngFor=\"let tab of ['left','right']\" (click)=\"link.icon.iconPosition = tab\"\n [class.selectedTab]=\"link?.icon?.iconPosition == tab\">\n {{tab | titlecase}}\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"data?.linkData?.length != 0\">\n\n\n <div class=\"groups cp\">\n <div *ngFor=\"let type of linkType\" [ngClass]=\"{'selectedType' : type.type === selectedType}\"\n (click)=\"changeType(type.type)\">{{type.type}}</div>\n </div>\n\n <div class=\"field-container mt-3\">\n <div *ngIf=\"link.linkType === RedirectionLink.Page\">\n <label class=\"input-label-1 mt-3 mb-2\">Select Page</label>\n <div class=\"drop-down-container w-100 d-flex mb-2\">\n <select [(ngModel)]=\"link.pageId\" (ngModelChange)=\"setRedirectUrl()\">\n <option value=\"\" selected>Select from your existing pages</option>\n <option *ngFor=\"let page of templatePage\" [value]=\"page.id\" style=\"padding: 10px;\">\n {{page.pageName}}</option>\n </select>\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\"\n alt=\"\">\n </div>\n </div>\n <!-- <div class=\"sub-text\">Select from your existing pages</div> -->\n </div>\n\n <div *ngIf=\"link.linkType === RedirectionLink.section\">\n <label class=\"mt-3 mb-2 input-label-1\">Section</label>\n <div class=\"drop-down-container w-100 d-flex mb-2\">\n <select [(ngModel)]=\"link.pageId\" style=\"cursor:pointer\">\n <option value=\"\" selected>Select the Section</option>\n <option *ngFor=\"let section of templatePage[0].components\" [value]=\"section.id\">{{section.sectionName}}\n </option>\n </select>\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\"\n alt=\"\">\n </div>\n </div>\n </div>\n\n <div\n *ngIf=\"link.linkType === RedirectionLink.External || link.linkType === RedirectionLink.Email || link.linkType === RedirectionLink.Phone\">\n <label class=\"mt-3 mb-2 input-label-1\">Select type</label>\n <div class=\"drop-down-container w-100 d-flex mb-2\">\n <select [(ngModel)]=\"link.linkType\" style=\"cursor:pointer\">\n <option value=\"\" selected>Select the Type</option>\n <option *ngFor=\"let type of externalLinkType\" [value]=\"type.type\">{{type.type}}</option>\n </select>\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\"\n alt=\"\">\n </div>\n </div>\n <label class=\"input-label mb-2\">{{link.linkType === RedirectionLink.External ? 'Website' : link.linkType ===\n RedirectionLink.Email ? 'Email Address' : 'Phone Number'}}</label>\n <input type=\"text\" class=\"input-text\" [(ngModel)]=\"link.redirectionUrl\"\n [placeholder]=\"link.linkType === RedirectionLink.External ? 'example : https://facebook.com': ''\">\n </div>\n\n <div class=\"d-flex justify-content-between mt-10\">\n <label class=\"input-label-2\">Open in a new browser tab</label>\n <div class=\"form-check form-switch ml-auto\">\n <input class=\"form-check-input switch-btn\" type=\"checkbox\" [(ngModel)]=\"link.newTab\" role=\"switch\">\n </div>\n </div>\n\n </div>\n\n <div class=\"footer w-100 align-items-center justify-content-center\">\n <button *ngIf=\"addLink\" (click)=\"addNewLink()\">Update Link</button>\n </div>\n\n </ng-container>\n\n </div>\n\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}.switch-btn{position:relative;z-index:10}.upload-image{border:3px dashed rgba(44,44,44,.6);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;margin:10px 10px 22px;border-radius:20px;box-shadow:#0000000d 0 1px 2px}.upload-image img{margin-bottom:8px;height:40px}.upload-text{background:var(--primary-bg-color);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:500}.sec{padding:10px 10px 22px;position:relative}.sec img{width:100%;height:200px;border-radius:20px}.delete-image{background-color:#d92d20;width:30px;height:30px;border-radius:6px;display:flex;justify-content:center;align-items:center;position:absolute;top:20px;right:20px}.repalce-image{display:flex;align-items:center;background:#fff;padding:2px;border-radius:6px;position:absolute;bottom:30px;left:20px}.selectedTab{background:#39393934;font-weight:700}.tab{border:1px solid rgba(44,44,44,.6);border-radius:12px}.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:50px}.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;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}.colorType{padding:3px 10px;box-shadow:0 0 4px #00000040;border-radius:10px;width:25%;border:1px solid #090981}.colorType select{background:transparent}.border-0{outline:unset}.transition-image{transition:opacity .3s ease-in-out,transform .3s ease-in-out}.color{background:#fff;padding:1rem}.custom-mat-form{width:100%;margin:10px 0;background-color:#f9f9f9;border-radius:8px}.custom-mat-form.mat-form-field-appearance-outline .mat-form-field-outline{color:#1976d2;border-color:#1976d2}.custom-mat-form .mat-form-field-label{color:#666;font-weight:500}.custom-mat-form .mat-select-trigger{padding:10px;font-size:14px;color:#333}::ng-deep .mat-select-panel{background-color:#fff;color:#333}::ng-deep .mat-option{font-size:14px;padding:10px 16px}::ng-deep .mat-option:hover{background-color:#e0f7fa}.color-container{padding:7px;gap:10px;border-radius:10px}.custom-input{height:35px;width:80%;border-radius:2rem;box-shadow:0 1px 3px #3c404326,0 1px 2px #3c404326}.outline-btn{border:2px solid #374151;color:#374151;background:transparent}.solid-btn{background-color:#374151;border:2px solid #374151;color:#fff}.text-btn{border:unset;color:#000}.btn-style{padding-top:5px;padding-bottom:5px;font-size:16px!important;margin-top:14px}.box-shadow{height:40px}.gradientStyle{-webkit-background-clip:text!important;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.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"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
1431
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LinkEditorComponent, isStandalone: true, selector: "simpo-link-editor", ngImport: i0, template: "<section>\n <div class=\"header\">\n <p>{{data.type == 'BUTTON' ? \"Button\" : \"Link\"}} Settings</p>\n <mat-icon (click)=\"closeDialog()\" class=\"f-18 d-flex align-items-center justify-content-center cp\">close</mat-icon>\n </div>\n\n <div class=\"body\">\n <div>\n <label class=\"link-text\">{{data.type == 'BUTTON' ? \"Button\" : \"Link\"}} Text</label><br>\n <input type=\"text\" class=\"input-text link-text-input\" [(ngModel)]=\"link.label\">\n <p class=\"desc\">This is the text that will be displayed to users</p>\n </div>\n\n <hr>\n\n <!-- <ng-container *ngIf=\"data.type == 'BUTTON'\">\n <select>\n <ng-container *ngFor=\"let style of styles\">\n <option (click)=\"changeButtonStyle(style)\" [value]=\"style.name\">{{style.name}}</option>\n </ng-container>\n <select>\n </ng-container> -->\n\n <ng-container *ngIf=\"data.type == 'BUTTON'\">\n <div class=\"field-container mb-2\">\n <div class=\"d-flex justify-content-between align-items-center\">\n <label class=\"link-text mb-1\">Button</label>\n <div class=\"colorType d-flex align-items-center justify-content-center\">\n <select class=\"border-0 w-100\" [(ngModel)]=\"data.buttonStyle.type\" (ngModelChange)=\"changeButtonStyle()\">\n <ng-container *ngFor=\"let type of buttonTypes\">\n <option [value]=\"type.type\">\n {{type.type | titlecase}}\n </option>\n </ng-container>\n </select>\n </div>\n </div>\n <div>\n <div class=\"preview d-flex justify-content-center\">\n <button class=\"btn-style w-80\" [style.borderRadius]=\"setBorderRadius()\" [style.border]=\"setBorder()\"\n [style.background]=\"setBackground()\">\n <span\n *ngIf=\"(data?.buttonStyle?.type === 'Text' || data?.buttonStyle?.type === 'Outline') && data?.buttonStyle?.colorType === 'Gradient'\"\n [ngStyle]=\"{\n 'background': 'linear-gradient(90deg, ' + data?.buttonStyle?.background + ' 0%, ' + data?.buttonStyle.secondaryBackground + ' 100%)'\n }\">\n {{ link.label ? link.label : \"Button Text\"}}\n </span>\n <span *ngIf=\"data?.style?.colorType == 'Solid' || data?.buttonStyle?.type == 'Solid'\"\n [style.color]=\"setColor()\">\n {{ link.label ? link.label : \"Button Text\"}}\n </span>\n <span *ngIf=\"data?.buttonStyle?.type === 'Outline'\"\n [style.color]=\"setColor()\">\n {{ link.label ? link.label : \"Button Text\"}}\n </span>\n <span *ngIf=\"data?.buttonStyle?.type === 'Text'\"\n [style.color]=\"data.buttonStyle.background\">\n {{ link.label ? link.label : \"Button Text\"}}\n </span>\n </button>\n\n </div>\n </div>\n </div>\n\n <div class=\"field-container\">\n <label class=\"link-text\">Button Style</label>\n <div class=\"color-container row\">\n <div class=\"color br-10\">\n <div class=\"color-top d-flex justify-content-between mb-2 align-items-center\">\n <div class=\"left-side\">Color</div>\n <div class=\"right-side\">\n <div class=\"colorType d-flex align-items-center justify-content-center w-100\">\n <select class=\"border-0 w-100\" [(ngModel)]=\"data.buttonStyle.colorType\"\n (ngModelChange)=\"changeButtonStyle()\">\n <ng-container *ngFor=\"let type of backgroundType\">\n <option style=\"padding: 10px;\">\n {{ type | titlecase }}</option>\n </ng-container>\n </select>\n </div>\n </div>\n </div>\n <div class=\"color-bottom\">\n <div class=\"mt-20\" *ngIf=\"data.buttonStyle.colorType === 'Solid'\">\n <div class=\"text-background\">\n <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.background\"\n (ngModelChange)=\"getContrastTextColor(data.buttonStyle.background)\" style=\"display: none;\"\n #colorInput>\n <div class=\"w-100 d-flex flex-column mt-2\">\n <label class=\"color-text mb-1 d-flex justify-content-center\"> {{ getColorLabel()}}</label>\n <div class=\"w-100 d-flex justify-content-center\">\n <div class=\"custom-input\" [style.background]=\"data.buttonStyle.background\"\n (click)=\"colorInput.click()\"></div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mt-20\" *ngIf=\"data.buttonStyle.colorType === 'Gradient'\">\n <div class=\"text-background\">\n <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.background\"\n (ngModelChange)=\"changeButtonStyle()\" style=\"display: none;\" #colorInput1>\n <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.secondaryBackground\"\n (ngModelChange)=\"changeButtonStyle()\" style=\"display: none;\" #colorInput>\n <div class=\"w-100 d-flex mt-2\">\n <div class=\"w-100 d-flex flex-column\">\n <label class=\"color-text mb-1 d-flex justify-content-center\">Color 1</label>\n <div class=\"d-flex justify-content-center\">\n <div class=\"custom-input\" [style.background]=\"data?.buttonStyle?.background\"\n (click)=\"colorInput1.click()\"></div>\n </div>\n </div>\n <div class=\"w-100 d-flex flex-column\">\n <label class=\"color-text mb-1 d-flex justify-content-center\">Color 2</label>\n <div class=\"d-flex justify-content-center\">\n <div class=\"custom-input\" [style.background]=\"data?.buttonStyle?.secondaryBackground\"\n (click)=\"colorInput.click()\"></div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"gradient-direction\">\n <div class=\"left-direction mt-3 mb-1\"> Direction</div>\n <div class=\"right-direction\">\n <div class=\"d-flex justify-content-center align-items-center\">\n <div class=\"box-shadow d-flex br-10 w-80\">\n <ng-container *ngFor=\"let direction of directionType\">\n <div class=\"color-box d-flex p-2 align-items-center justify-content-center br-10\"\n [ngClass]=\"{'selected' : data.buttonStyle?.gradientDirection === direction.type}\"\n (click)=\"data.buttonStyle.gradientDirection = direction.type;changeButtonStyle()\">\n <img class=\"w-10\" [src]=\"direction.icon\" alt=\"icon\"\n *ngIf=\"data.buttonStyle?.gradientDirection !== direction.type\" loading=\"lazy\">\n <img class=\"w-10\" [src]=\"direction.activeIcon\" alt=\"icon\"\n *ngIf=\"data.buttonStyle?.gradientDirection === direction.type\" loading=\"lazy\">\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mt-20\" *ngIf=\"data.buttonStyle.type != 'Text'\">\n <div class=\"text-background\">\n <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.textColor\"\n (ngModelChange)=\"changeButtonStyle()\" style=\"display: none;\" #colorInput3>\n <div class=\"w-100 d-flex flex-column mt-2\">\n <label class=\"color-text mb-1 d-flex justify-content-center\">Text Color</label>\n <div class=\"w-100 d-flex justify-content-center\">\n <div class=\"custom-input\" [style.background]=\"data.buttonStyle.textColor\"\n (click)=\"colorInput3.click()\"></div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"corner-radius bg-white p-2 br-10 d-flex justify-content-between\"\n *ngIf=\"data.buttonStyle.type != 'Text'\">\n <div class=\"sub-text-1 d-flex align-items-center\">\n Corner Radius\n </div>\n <div class=\"d-flex justify-content-center align-items-center\">\n <div class=\"box-shadow d-flex br-10\">\n <ng-container *ngFor=\"let shape of buttonShapes\">\n <div class=\"color-box d-flex p-2 align-items-center justify-content-center br-10\"\n [ngClass]=\"{'selected' : data.buttonStyle.shape === shape.type}\"\n (click)=\"data.buttonStyle.shape = shape.type;changeButtonStyle()\">\n <img [src]=\"shape.icon\" alt=\"icon\" *ngIf=\"data.buttonStyle.shape !== shape.type\" loading=\"lazy\"\n class=\"transition-image\">\n <img [src]=\"shape.activeIcon\" alt=\"icon\" *ngIf=\"data.buttonStyle?.shape === shape.type\"\n loading=\"lazy\" class=\"transition-image\">\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"p-2 d-flex justify-content-between align-items-center mt-20\">\n <div class=\"fw-bold\">Show Icon</div>\n <div class=\"form-check form-switch ml-auto\">\n <input class=\"form-check-input switch-btn\" type=\"checkbox\" [(ngModel)]=\"link.showIcon\" role=\"switch\">\n </div>\n </div>\n <div>\n <!-- <p class=\"heading mb-0\">Image</p> -->\n <div class=\"upload-image cp\" *ngIf=\"link.showIcon && !link?.icon?.url\" (click)=\"updateImage()\">\n <img loading=\"lazy\"\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\"\n alt=\"\">\n <p class=\"upload-text mb-0\">Upload a file</p>\n <p class=\"upload-text mb-0\">or select an existing one</p>\n <span class=\"upload-text\">up to 32MB</span>\n </div>\n <div class=\"sec d-flex align-items-center\" *ngIf=\"link.showIcon && link?.icon?.url\">\n <ng-container *ngIf=\"!imgLoader\">\n <img [src]=\"link?.icon?.url\">\n <div class=\"repalce-image cursor-pointer\" (click)=\"updateImage()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" width=\"24\"\n height=\"24\" class=\"icon w-4 h-4\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\n d=\"m4 16 4.58579-4.5858c.78104-.781 2.04741-.781 2.82841 0L16 16m-2-2 1.5858-1.5858c.781-.781 2.0474-.781 2.8284 0L20 14m-6-6h.01M6 20h12c1.1046 0 2-.8954 2-2V6c0-1.10457-.8954-2-2-2H6c-1.10457 0-2 .89543-2 2v12c0 1.1046.89543 2 2 2Z\">\n </path>\n </svg>\n </div>\n\n <div class=\"delete-image cursor-pointer \" (click)=\"deleteImage()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"#ffffff\" viewBox=\"0 0 24 24\" width=\"24\"\n height=\"24\" class=\"icon h-4 w-4\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\n d=\"m19 7-.8673 12.1425C18.0579 20.1891 17.187 21 16.1378 21H7.86224c-1.04928 0-1.92016-.8109-1.99492-1.8575L5 7m5 4v6m4-6v6m1-10V4c0-.55228-.4477-1-1-1h-4c-.55228 0-1 .44772-1 1v3M4 7h16\">\n </path>\n </svg>\n </div>\n </ng-container>\n <ng-container *ngIf=\"imgLoader\">\n <div class=\"upload_spinner d-flex w-100 h-100 justify-content-center align-items-center\">\n <mat-spinner></mat-spinner>\n </div>\n </ng-container>\n </div>\n\n\n </div>\n\n <div class=\"fw-bold p-2 mb-2\">Icon Position</div>\n <div class=\"tabs d-flex px-2 gap-3 mb-2\" *ngIf=\"link.showIcon\">\n <div class=\"tab px-3 py-2\" *ngFor=\"let tab of ['left','right']\" (click)=\"link.icon.iconPosition = tab\"\n [class.selectedTab]=\"link?.icon?.iconPosition == tab\">\n {{tab | titlecase}}\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"data?.linkData?.length != 0\">\n\n\n <div class=\"groups cp\">\n <div *ngFor=\"let type of linkType\" [ngClass]=\"{'selectedType' : type.type === selectedType}\"\n (click)=\"changeType(type.type)\">{{type.type}}</div>\n </div>\n\n <div class=\"field-container mt-3\">\n <div *ngIf=\"link.linkType === RedirectionLink.Page\">\n <label class=\"input-label-1 mt-3 mb-2\">Select Page</label>\n <div class=\"drop-down-container w-100 d-flex mb-2\">\n <select [(ngModel)]=\"link.pageId\" (ngModelChange)=\"setRedirectUrl()\">\n <option value=\"\" selected>Select from your existing pages</option>\n <option *ngFor=\"let page of templatePage\" [value]=\"page.id\" style=\"padding: 10px;\">\n {{page.pageName}}</option>\n </select>\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\"\n alt=\"\">\n </div>\n </div>\n <!-- <div class=\"sub-text\">Select from your existing pages</div> -->\n </div>\n\n <div *ngIf=\"link.linkType === RedirectionLink.section\">\n <label class=\"mt-3 mb-2 input-label-1\">Section</label>\n <div class=\"drop-down-container w-100 d-flex mb-2\">\n <select [(ngModel)]=\"link.pageId\" style=\"cursor:pointer\">\n <option value=\"\" selected>Select the Section</option>\n <option *ngFor=\"let section of templatePage[0].components\" [value]=\"section.id\">{{section.sectionName}}\n </option>\n </select>\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\"\n alt=\"\">\n </div>\n </div>\n </div>\n\n <div\n *ngIf=\"link.linkType === RedirectionLink.External || link.linkType === RedirectionLink.Email || link.linkType === RedirectionLink.Phone\">\n <label class=\"mt-3 mb-2 input-label-1\">Select type</label>\n <div class=\"drop-down-container w-100 d-flex mb-2\">\n <select [(ngModel)]=\"link.linkType\" style=\"cursor:pointer\">\n <option value=\"\" selected>Select the Type</option>\n <option *ngFor=\"let type of externalLinkType\" [value]=\"type.type\">{{type.type}}</option>\n </select>\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\"\n alt=\"\">\n </div>\n </div>\n <label class=\"input-label mb-2\">{{link.linkType === RedirectionLink.External ? 'Website' : link.linkType ===\n RedirectionLink.Email ? 'Email Address' : 'Phone Number'}}</label>\n <input type=\"text\" class=\"input-text\" [(ngModel)]=\"link.redirectionUrl\"\n [placeholder]=\"link.linkType === RedirectionLink.External ? 'example : https://facebook.com': ''\">\n </div>\n\n <div class=\"d-flex justify-content-between mt-10\">\n <label class=\"input-label-2\">Open in a new browser tab</label>\n <div class=\"form-check form-switch ml-auto\">\n <input class=\"form-check-input switch-btn\" type=\"checkbox\" [(ngModel)]=\"link.newTab\" role=\"switch\">\n </div>\n </div>\n\n </div>\n\n <div class=\"footer w-100 align-items-center justify-content-center\">\n <button *ngIf=\"addLink\" (click)=\"addNewLink()\">Update Link</button>\n </div>\n\n </ng-container>\n\n </div>\n\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}.switch-btn{position:relative;z-index:10}.upload-image{border:3px dashed rgba(44,44,44,.6);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;margin:10px 10px 22px;border-radius:20px;box-shadow:#0000000d 0 1px 2px}.upload-image img{margin-bottom:8px;height:40px}.upload-text{background:var(--primary-bg-color);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:500}.sec{padding:10px 10px 22px;position:relative}.sec img{width:100%;height:200px;border-radius:20px}.delete-image{background-color:#d92d20;width:30px;height:30px;border-radius:6px;display:flex;justify-content:center;align-items:center;position:absolute;top:20px;right:20px}.repalce-image{display:flex;align-items:center;background:#fff;padding:2px;border-radius:6px;position:absolute;bottom:30px;left:20px}.selectedTab{background:#39393934;font-weight:700}.tab{border:1px solid rgba(44,44,44,.6);border-radius:12px}.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:50px}.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;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}.colorType{padding:3px 10px;box-shadow:0 0 4px #00000040;border-radius:10px;width:25%;border:1px solid #090981}.colorType select{background:transparent}.border-0{outline:unset}.transition-image{transition:opacity .3s ease-in-out,transform .3s ease-in-out}.color{background:#fff;padding:1rem}.custom-mat-form{width:100%;margin:10px 0;background-color:#f9f9f9;border-radius:8px}.custom-mat-form.mat-form-field-appearance-outline .mat-form-field-outline{color:#1976d2;border-color:#1976d2}.custom-mat-form .mat-form-field-label{color:#666;font-weight:500}.custom-mat-form .mat-select-trigger{padding:10px;font-size:14px;color:#333}::ng-deep .mat-select-panel{background-color:#fff;color:#333}::ng-deep .mat-option{font-size:14px;padding:10px 16px}::ng-deep .mat-option:hover{background-color:#e0f7fa}.color-container{padding:7px;gap:10px;border-radius:10px}.custom-input{height:35px;width:80%;border-radius:2rem;box-shadow:0 1px 3px #3c404326,0 1px 2px #3c404326}.outline-btn{border:2px solid #374151;color:#374151;background:transparent}.solid-btn{background-color:#374151;border:2px solid #374151;color:#fff}.text-btn{border:unset;color:#000}.btn-style{padding-top:5px;padding-bottom:5px;font-size:16px!important;margin-top:14px}.box-shadow{height:40px}.gradientStyle{-webkit-background-clip:text!important;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.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"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
1417
1432
  }
1418
1433
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LinkEditorComponent, decorators: [{
1419
1434
  type: Component,
1420
- args: [{ selector: 'simpo-link-editor', standalone: true, imports: [CommonModule, FormsModule, MatOptionModule, MatInputModule, MatSelectModule, MatIconModule, ButtonDirectiveDirective, MatSliderModule, MatProgressSpinner], template: "<section>\n <div class=\"header\">\n <p>{{data.type == 'BUTTON' ? \"Button\" : \"Link\"}} Settings</p>\n <mat-icon (click)=\"closeDialog()\" class=\"f-18 d-flex align-items-center justify-content-center cp\">close</mat-icon>\n </div>\n\n <div class=\"body\">\n <div>\n <label class=\"link-text\">{{data.type == 'BUTTON' ? \"Button\" : \"Link\"}} Text</label><br>\n <input type=\"text\" class=\"input-text link-text-input\" [(ngModel)]=\"link.label\">\n <p class=\"desc\">This is the text that will be displayed to users</p>\n </div>\n\n <hr>\n\n <!-- <ng-container *ngIf=\"data.type == 'BUTTON'\">\n <select>\n <ng-container *ngFor=\"let style of styles\">\n <option (click)=\"changeButtonStyle(style)\" [value]=\"style.name\">{{style.name}}</option>\n </ng-container>\n <select>\n </ng-container> -->\n\n <ng-container *ngIf=\"data.type == 'BUTTON'\">\n <div class=\"field-container mb-2\">\n <div class=\"d-flex justify-content-between align-items-center\">\n <label class=\"link-text mb-1\">Button</label>\n <div class=\"colorType d-flex align-items-center justify-content-center\">\n <select class=\"border-0 w-100\" [(ngModel)]=\"data.buttonStyle.type\" (ngModelChange)=\"changeButtonStyle()\">\n <ng-container *ngFor=\"let type of buttonTypes\">\n <option [value]=\"type.type\">\n {{type.type | titlecase}}\n </option>\n </ng-container>\n </select>\n </div>\n </div>\n <div>\n <div class=\"preview d-flex justify-content-center\">\n <button class=\"btn-style w-80\" [style.borderRadius]=\"setBorderRadius()\" [style.border]=\"setBorder()\"\n [style.background]=\"setBackground()\">\n <span\n *ngIf=\"(data?.buttonStyle?.type === 'Text' || data?.buttonStyle?.type === 'Outline') && data?.buttonStyle?.colorType === 'Gradient'\"\n [ngStyle]=\"{\n 'background': 'linear-gradient(90deg, ' + data?.buttonStyle?.background + ' 0%, ' + data?.buttonStyle.secondaryBackground + ' 100%)'\n }\">\n {{ link.label ? link.label : \"Button Text\"}}\n </span>\n <span *ngIf=\"data?.style?.colorType == 'Solid' || data?.buttonStyle?.type == 'Solid'\"\n [style.color]=\"setColor()\">\n {{ link.label ? link.label : \"Button Text\"}}\n </span>\n <span *ngIf=\"data?.buttonStyle?.type === 'Text' || data?.buttonStyle?.type === 'Outline'\"\n [style.color]=\"setColor()\">\n {{ link.label ? link.label : \"Button Text\"}}\n </span>\n </button>\n\n </div>\n </div>\n </div>\n\n <div class=\"field-container\">\n <label class=\"link-text\">Button Style</label>\n <div class=\"color-container row\">\n <div class=\"color br-10\">\n <div class=\"color-top d-flex justify-content-between mb-2 align-items-center\">\n <div class=\"left-side\">Color</div>\n <div class=\"right-side\">\n <div class=\"colorType d-flex align-items-center justify-content-center w-100\">\n <select class=\"border-0 w-100\" [(ngModel)]=\"data.buttonStyle.colorType\"\n (ngModelChange)=\"changeButtonStyle()\">\n <ng-container *ngFor=\"let type of backgroundType\">\n <option style=\"padding: 10px;\">\n {{ type | titlecase }}</option>\n </ng-container>\n </select>\n </div>\n </div>\n </div>\n <div class=\"color-bottom\">\n <div class=\"mt-20\" *ngIf=\"data.buttonStyle.colorType === 'Solid'\">\n <div class=\"text-background\">\n <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.background\"\n (ngModelChange)=\"getContrastTextColor(data.buttonStyle.background)\" style=\"display: none;\"\n #colorInput>\n <div class=\"w-100 d-flex flex-column mt-2\">\n <label class=\"color-text mb-1 d-flex justify-content-center\"> Button Color</label>\n <div class=\"w-100 d-flex justify-content-center\">\n <div class=\"custom-input\" [style.background]=\"data.buttonStyle.background\"\n (click)=\"colorInput.click()\"></div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mt-20\" *ngIf=\"data.buttonStyle.colorType === 'Gradient'\">\n <div class=\"text-background\">\n <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.background\"\n (ngModelChange)=\"changeButtonStyle()\" style=\"display: none;\" #colorInput1>\n <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.secondaryBackground\"\n (ngModelChange)=\"changeButtonStyle()\" style=\"display: none;\" #colorInput>\n <div class=\"w-100 d-flex mt-2\">\n <div class=\"w-100 d-flex flex-column\">\n <label class=\"color-text mb-1 d-flex justify-content-center\">Color 1</label>\n <div class=\"d-flex justify-content-center\">\n <div class=\"custom-input\" [style.background]=\"data?.buttonStyle?.background\"\n (click)=\"colorInput1.click()\"></div>\n </div>\n </div>\n <div class=\"w-100 d-flex flex-column\">\n <label class=\"color-text mb-1 d-flex justify-content-center\">Color 2</label>\n <div class=\"d-flex justify-content-center\">\n <div class=\"custom-input\" [style.background]=\"data?.buttonStyle?.secondaryBackground\"\n (click)=\"colorInput.click()\"></div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"gradient-direction\">\n <div class=\"left-direction mt-3 mb-1\"> Direction</div>\n <div class=\"right-direction\">\n <div class=\"d-flex justify-content-center align-items-center\">\n <div class=\"box-shadow d-flex br-10 w-80\">\n <ng-container *ngFor=\"let direction of directionType\">\n <div class=\"color-box d-flex p-2 align-items-center justify-content-center br-10\"\n [ngClass]=\"{'selected' : data.buttonStyle?.gradientDirection === direction.type}\"\n (click)=\"data.buttonStyle.gradientDirection = direction.type;changeButtonStyle()\">\n <img class=\"w-10\" [src]=\"direction.icon\" alt=\"icon\"\n *ngIf=\"data.buttonStyle?.gradientDirection !== direction.type\" loading=\"lazy\">\n <img class=\"w-10\" [src]=\"direction.activeIcon\" alt=\"icon\"\n *ngIf=\"data.buttonStyle?.gradientDirection === direction.type\" loading=\"lazy\">\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mt-20\">\n <div class=\"text-background\">\n <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.textColor\"\n (ngModelChange)=\"changeButtonStyle()\" style=\"display: none;\" #colorInput3>\n <div class=\"w-100 d-flex flex-column mt-2\">\n <label class=\"color-text mb-1 d-flex justify-content-center\">Text Color</label>\n <div class=\"w-100 d-flex justify-content-center\">\n <div class=\"custom-input\" [style.background]=\"data.buttonStyle.textColor\"\n (click)=\"colorInput3.click()\"></div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"corner-radius bg-white p-2 br-10 d-flex justify-content-between\"\n *ngIf=\"data.buttonStyle.type != 'Text'\">\n <div class=\"sub-text-1 d-flex align-items-center\">\n Corner Radius\n </div>\n <div class=\"d-flex justify-content-center align-items-center\">\n <div class=\"box-shadow d-flex br-10\">\n <ng-container *ngFor=\"let shape of buttonShapes\">\n <div class=\"color-box d-flex p-2 align-items-center justify-content-center br-10\"\n [ngClass]=\"{'selected' : data.buttonStyle.shape === shape.type}\"\n (click)=\"data.buttonStyle.shape = shape.type;changeButtonStyle()\">\n <img [src]=\"shape.icon\" alt=\"icon\" *ngIf=\"data.buttonStyle.shape !== shape.type\" loading=\"lazy\"\n class=\"transition-image\">\n <img [src]=\"shape.activeIcon\" alt=\"icon\" *ngIf=\"data.buttonStyle?.shape === shape.type\"\n loading=\"lazy\" class=\"transition-image\">\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"p-2 d-flex justify-content-between align-items-center mt-20\">\n <div class=\"fw-bold\">Show Icon</div>\n <div class=\"form-check form-switch ml-auto\">\n <input class=\"form-check-input switch-btn\" type=\"checkbox\" [(ngModel)]=\"link.showIcon\" role=\"switch\">\n </div>\n </div>\n <div>\n <!-- <p class=\"heading mb-0\">Image</p> -->\n <div class=\"upload-image cp\" *ngIf=\"link.showIcon && !link?.icon?.url\" (click)=\"updateImage()\">\n <img loading=\"lazy\"\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\"\n alt=\"\">\n <p class=\"upload-text mb-0\">Upload a file</p>\n <p class=\"upload-text mb-0\">or select an existing one</p>\n <span class=\"upload-text\">up to 32MB</span>\n </div>\n <div class=\"sec d-flex align-items-center\" *ngIf=\"link.showIcon && link?.icon?.url\">\n <ng-container *ngIf=\"!imgLoader\">\n <img [src]=\"link?.icon?.url\">\n <div class=\"repalce-image cursor-pointer\" (click)=\"updateImage()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" width=\"24\"\n height=\"24\" class=\"icon w-4 h-4\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\n d=\"m4 16 4.58579-4.5858c.78104-.781 2.04741-.781 2.82841 0L16 16m-2-2 1.5858-1.5858c.781-.781 2.0474-.781 2.8284 0L20 14m-6-6h.01M6 20h12c1.1046 0 2-.8954 2-2V6c0-1.10457-.8954-2-2-2H6c-1.10457 0-2 .89543-2 2v12c0 1.1046.89543 2 2 2Z\">\n </path>\n </svg>\n </div>\n\n <div class=\"delete-image cursor-pointer \" (click)=\"deleteImage()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"#ffffff\" viewBox=\"0 0 24 24\" width=\"24\"\n height=\"24\" class=\"icon h-4 w-4\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\n d=\"m19 7-.8673 12.1425C18.0579 20.1891 17.187 21 16.1378 21H7.86224c-1.04928 0-1.92016-.8109-1.99492-1.8575L5 7m5 4v6m4-6v6m1-10V4c0-.55228-.4477-1-1-1h-4c-.55228 0-1 .44772-1 1v3M4 7h16\">\n </path>\n </svg>\n </div>\n </ng-container>\n <ng-container *ngIf=\"imgLoader\">\n <div class=\"upload_spinner d-flex w-100 h-100 justify-content-center align-items-center\">\n <mat-spinner></mat-spinner>\n </div>\n </ng-container>\n </div>\n\n\n </div>\n\n <div class=\"fw-bold p-2 mb-2\">Icon Position</div>\n <div class=\"tabs d-flex px-2 gap-3 mb-2\" *ngIf=\"link.showIcon\">\n <div class=\"tab px-3 py-2\" *ngFor=\"let tab of ['left','right']\" (click)=\"link.icon.iconPosition = tab\"\n [class.selectedTab]=\"link?.icon?.iconPosition == tab\">\n {{tab | titlecase}}\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"data?.linkData?.length != 0\">\n\n\n <div class=\"groups cp\">\n <div *ngFor=\"let type of linkType\" [ngClass]=\"{'selectedType' : type.type === selectedType}\"\n (click)=\"changeType(type.type)\">{{type.type}}</div>\n </div>\n\n <div class=\"field-container mt-3\">\n <div *ngIf=\"link.linkType === RedirectionLink.Page\">\n <label class=\"input-label-1 mt-3 mb-2\">Select Page</label>\n <div class=\"drop-down-container w-100 d-flex mb-2\">\n <select [(ngModel)]=\"link.pageId\" (ngModelChange)=\"setRedirectUrl()\">\n <option value=\"\" selected>Select from your existing pages</option>\n <option *ngFor=\"let page of templatePage\" [value]=\"page.id\" style=\"padding: 10px;\">\n {{page.pageName}}</option>\n </select>\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\"\n alt=\"\">\n </div>\n </div>\n <!-- <div class=\"sub-text\">Select from your existing pages</div> -->\n </div>\n\n <div *ngIf=\"link.linkType === RedirectionLink.section\">\n <label class=\"mt-3 mb-2 input-label-1\">Section</label>\n <div class=\"drop-down-container w-100 d-flex mb-2\">\n <select [(ngModel)]=\"link.pageId\" style=\"cursor:pointer\">\n <option value=\"\" selected>Select the Section</option>\n <option *ngFor=\"let section of templatePage[0].components\" [value]=\"section.id\">{{section.sectionName}}\n </option>\n </select>\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\"\n alt=\"\">\n </div>\n </div>\n </div>\n\n <div\n *ngIf=\"link.linkType === RedirectionLink.External || link.linkType === RedirectionLink.Email || link.linkType === RedirectionLink.Phone\">\n <label class=\"mt-3 mb-2 input-label-1\">Select type</label>\n <div class=\"drop-down-container w-100 d-flex mb-2\">\n <select [(ngModel)]=\"link.linkType\" style=\"cursor:pointer\">\n <option value=\"\" selected>Select the Type</option>\n <option *ngFor=\"let type of externalLinkType\" [value]=\"type.type\">{{type.type}}</option>\n </select>\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\"\n alt=\"\">\n </div>\n </div>\n <label class=\"input-label mb-2\">{{link.linkType === RedirectionLink.External ? 'Website' : link.linkType ===\n RedirectionLink.Email ? 'Email Address' : 'Phone Number'}}</label>\n <input type=\"text\" class=\"input-text\" [(ngModel)]=\"link.redirectionUrl\"\n [placeholder]=\"link.linkType === RedirectionLink.External ? 'example : https://facebook.com': ''\">\n </div>\n\n <div class=\"d-flex justify-content-between mt-10\">\n <label class=\"input-label-2\">Open in a new browser tab</label>\n <div class=\"form-check form-switch ml-auto\">\n <input class=\"form-check-input switch-btn\" type=\"checkbox\" [(ngModel)]=\"link.newTab\" role=\"switch\">\n </div>\n </div>\n\n </div>\n\n <div class=\"footer w-100 align-items-center justify-content-center\">\n <button *ngIf=\"addLink\" (click)=\"addNewLink()\">Update Link</button>\n </div>\n\n </ng-container>\n\n </div>\n\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}.switch-btn{position:relative;z-index:10}.upload-image{border:3px dashed rgba(44,44,44,.6);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;margin:10px 10px 22px;border-radius:20px;box-shadow:#0000000d 0 1px 2px}.upload-image img{margin-bottom:8px;height:40px}.upload-text{background:var(--primary-bg-color);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:500}.sec{padding:10px 10px 22px;position:relative}.sec img{width:100%;height:200px;border-radius:20px}.delete-image{background-color:#d92d20;width:30px;height:30px;border-radius:6px;display:flex;justify-content:center;align-items:center;position:absolute;top:20px;right:20px}.repalce-image{display:flex;align-items:center;background:#fff;padding:2px;border-radius:6px;position:absolute;bottom:30px;left:20px}.selectedTab{background:#39393934;font-weight:700}.tab{border:1px solid rgba(44,44,44,.6);border-radius:12px}.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:50px}.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;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}.colorType{padding:3px 10px;box-shadow:0 0 4px #00000040;border-radius:10px;width:25%;border:1px solid #090981}.colorType select{background:transparent}.border-0{outline:unset}.transition-image{transition:opacity .3s ease-in-out,transform .3s ease-in-out}.color{background:#fff;padding:1rem}.custom-mat-form{width:100%;margin:10px 0;background-color:#f9f9f9;border-radius:8px}.custom-mat-form.mat-form-field-appearance-outline .mat-form-field-outline{color:#1976d2;border-color:#1976d2}.custom-mat-form .mat-form-field-label{color:#666;font-weight:500}.custom-mat-form .mat-select-trigger{padding:10px;font-size:14px;color:#333}::ng-deep .mat-select-panel{background-color:#fff;color:#333}::ng-deep .mat-option{font-size:14px;padding:10px 16px}::ng-deep .mat-option:hover{background-color:#e0f7fa}.color-container{padding:7px;gap:10px;border-radius:10px}.custom-input{height:35px;width:80%;border-radius:2rem;box-shadow:0 1px 3px #3c404326,0 1px 2px #3c404326}.outline-btn{border:2px solid #374151;color:#374151;background:transparent}.solid-btn{background-color:#374151;border:2px solid #374151;color:#fff}.text-btn{border:unset;color:#000}.btn-style{padding-top:5px;padding-bottom:5px;font-size:16px!important;margin-top:14px}.box-shadow{height:40px}.gradientStyle{-webkit-background-clip:text!important;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}\n"] }]
1435
+ args: [{ selector: 'simpo-link-editor', standalone: true, imports: [CommonModule, FormsModule, MatOptionModule, MatInputModule, MatSelectModule, MatIconModule, ButtonDirectiveDirective, MatSliderModule, MatProgressSpinner], template: "<section>\n <div class=\"header\">\n <p>{{data.type == 'BUTTON' ? \"Button\" : \"Link\"}} Settings</p>\n <mat-icon (click)=\"closeDialog()\" class=\"f-18 d-flex align-items-center justify-content-center cp\">close</mat-icon>\n </div>\n\n <div class=\"body\">\n <div>\n <label class=\"link-text\">{{data.type == 'BUTTON' ? \"Button\" : \"Link\"}} Text</label><br>\n <input type=\"text\" class=\"input-text link-text-input\" [(ngModel)]=\"link.label\">\n <p class=\"desc\">This is the text that will be displayed to users</p>\n </div>\n\n <hr>\n\n <!-- <ng-container *ngIf=\"data.type == 'BUTTON'\">\n <select>\n <ng-container *ngFor=\"let style of styles\">\n <option (click)=\"changeButtonStyle(style)\" [value]=\"style.name\">{{style.name}}</option>\n </ng-container>\n <select>\n </ng-container> -->\n\n <ng-container *ngIf=\"data.type == 'BUTTON'\">\n <div class=\"field-container mb-2\">\n <div class=\"d-flex justify-content-between align-items-center\">\n <label class=\"link-text mb-1\">Button</label>\n <div class=\"colorType d-flex align-items-center justify-content-center\">\n <select class=\"border-0 w-100\" [(ngModel)]=\"data.buttonStyle.type\" (ngModelChange)=\"changeButtonStyle()\">\n <ng-container *ngFor=\"let type of buttonTypes\">\n <option [value]=\"type.type\">\n {{type.type | titlecase}}\n </option>\n </ng-container>\n </select>\n </div>\n </div>\n <div>\n <div class=\"preview d-flex justify-content-center\">\n <button class=\"btn-style w-80\" [style.borderRadius]=\"setBorderRadius()\" [style.border]=\"setBorder()\"\n [style.background]=\"setBackground()\">\n <span\n *ngIf=\"(data?.buttonStyle?.type === 'Text' || data?.buttonStyle?.type === 'Outline') && data?.buttonStyle?.colorType === 'Gradient'\"\n [ngStyle]=\"{\n 'background': 'linear-gradient(90deg, ' + data?.buttonStyle?.background + ' 0%, ' + data?.buttonStyle.secondaryBackground + ' 100%)'\n }\">\n {{ link.label ? link.label : \"Button Text\"}}\n </span>\n <span *ngIf=\"data?.style?.colorType == 'Solid' || data?.buttonStyle?.type == 'Solid'\"\n [style.color]=\"setColor()\">\n {{ link.label ? link.label : \"Button Text\"}}\n </span>\n <span *ngIf=\"data?.buttonStyle?.type === 'Outline'\"\n [style.color]=\"setColor()\">\n {{ link.label ? link.label : \"Button Text\"}}\n </span>\n <span *ngIf=\"data?.buttonStyle?.type === 'Text'\"\n [style.color]=\"data.buttonStyle.background\">\n {{ link.label ? link.label : \"Button Text\"}}\n </span>\n </button>\n\n </div>\n </div>\n </div>\n\n <div class=\"field-container\">\n <label class=\"link-text\">Button Style</label>\n <div class=\"color-container row\">\n <div class=\"color br-10\">\n <div class=\"color-top d-flex justify-content-between mb-2 align-items-center\">\n <div class=\"left-side\">Color</div>\n <div class=\"right-side\">\n <div class=\"colorType d-flex align-items-center justify-content-center w-100\">\n <select class=\"border-0 w-100\" [(ngModel)]=\"data.buttonStyle.colorType\"\n (ngModelChange)=\"changeButtonStyle()\">\n <ng-container *ngFor=\"let type of backgroundType\">\n <option style=\"padding: 10px;\">\n {{ type | titlecase }}</option>\n </ng-container>\n </select>\n </div>\n </div>\n </div>\n <div class=\"color-bottom\">\n <div class=\"mt-20\" *ngIf=\"data.buttonStyle.colorType === 'Solid'\">\n <div class=\"text-background\">\n <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.background\"\n (ngModelChange)=\"getContrastTextColor(data.buttonStyle.background)\" style=\"display: none;\"\n #colorInput>\n <div class=\"w-100 d-flex flex-column mt-2\">\n <label class=\"color-text mb-1 d-flex justify-content-center\"> {{ getColorLabel()}}</label>\n <div class=\"w-100 d-flex justify-content-center\">\n <div class=\"custom-input\" [style.background]=\"data.buttonStyle.background\"\n (click)=\"colorInput.click()\"></div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mt-20\" *ngIf=\"data.buttonStyle.colorType === 'Gradient'\">\n <div class=\"text-background\">\n <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.background\"\n (ngModelChange)=\"changeButtonStyle()\" style=\"display: none;\" #colorInput1>\n <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.secondaryBackground\"\n (ngModelChange)=\"changeButtonStyle()\" style=\"display: none;\" #colorInput>\n <div class=\"w-100 d-flex mt-2\">\n <div class=\"w-100 d-flex flex-column\">\n <label class=\"color-text mb-1 d-flex justify-content-center\">Color 1</label>\n <div class=\"d-flex justify-content-center\">\n <div class=\"custom-input\" [style.background]=\"data?.buttonStyle?.background\"\n (click)=\"colorInput1.click()\"></div>\n </div>\n </div>\n <div class=\"w-100 d-flex flex-column\">\n <label class=\"color-text mb-1 d-flex justify-content-center\">Color 2</label>\n <div class=\"d-flex justify-content-center\">\n <div class=\"custom-input\" [style.background]=\"data?.buttonStyle?.secondaryBackground\"\n (click)=\"colorInput.click()\"></div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"gradient-direction\">\n <div class=\"left-direction mt-3 mb-1\"> Direction</div>\n <div class=\"right-direction\">\n <div class=\"d-flex justify-content-center align-items-center\">\n <div class=\"box-shadow d-flex br-10 w-80\">\n <ng-container *ngFor=\"let direction of directionType\">\n <div class=\"color-box d-flex p-2 align-items-center justify-content-center br-10\"\n [ngClass]=\"{'selected' : data.buttonStyle?.gradientDirection === direction.type}\"\n (click)=\"data.buttonStyle.gradientDirection = direction.type;changeButtonStyle()\">\n <img class=\"w-10\" [src]=\"direction.icon\" alt=\"icon\"\n *ngIf=\"data.buttonStyle?.gradientDirection !== direction.type\" loading=\"lazy\">\n <img class=\"w-10\" [src]=\"direction.activeIcon\" alt=\"icon\"\n *ngIf=\"data.buttonStyle?.gradientDirection === direction.type\" loading=\"lazy\">\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mt-20\" *ngIf=\"data.buttonStyle.type != 'Text'\">\n <div class=\"text-background\">\n <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.textColor\"\n (ngModelChange)=\"changeButtonStyle()\" style=\"display: none;\" #colorInput3>\n <div class=\"w-100 d-flex flex-column mt-2\">\n <label class=\"color-text mb-1 d-flex justify-content-center\">Text Color</label>\n <div class=\"w-100 d-flex justify-content-center\">\n <div class=\"custom-input\" [style.background]=\"data.buttonStyle.textColor\"\n (click)=\"colorInput3.click()\"></div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"corner-radius bg-white p-2 br-10 d-flex justify-content-between\"\n *ngIf=\"data.buttonStyle.type != 'Text'\">\n <div class=\"sub-text-1 d-flex align-items-center\">\n Corner Radius\n </div>\n <div class=\"d-flex justify-content-center align-items-center\">\n <div class=\"box-shadow d-flex br-10\">\n <ng-container *ngFor=\"let shape of buttonShapes\">\n <div class=\"color-box d-flex p-2 align-items-center justify-content-center br-10\"\n [ngClass]=\"{'selected' : data.buttonStyle.shape === shape.type}\"\n (click)=\"data.buttonStyle.shape = shape.type;changeButtonStyle()\">\n <img [src]=\"shape.icon\" alt=\"icon\" *ngIf=\"data.buttonStyle.shape !== shape.type\" loading=\"lazy\"\n class=\"transition-image\">\n <img [src]=\"shape.activeIcon\" alt=\"icon\" *ngIf=\"data.buttonStyle?.shape === shape.type\"\n loading=\"lazy\" class=\"transition-image\">\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"p-2 d-flex justify-content-between align-items-center mt-20\">\n <div class=\"fw-bold\">Show Icon</div>\n <div class=\"form-check form-switch ml-auto\">\n <input class=\"form-check-input switch-btn\" type=\"checkbox\" [(ngModel)]=\"link.showIcon\" role=\"switch\">\n </div>\n </div>\n <div>\n <!-- <p class=\"heading mb-0\">Image</p> -->\n <div class=\"upload-image cp\" *ngIf=\"link.showIcon && !link?.icon?.url\" (click)=\"updateImage()\">\n <img loading=\"lazy\"\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\"\n alt=\"\">\n <p class=\"upload-text mb-0\">Upload a file</p>\n <p class=\"upload-text mb-0\">or select an existing one</p>\n <span class=\"upload-text\">up to 32MB</span>\n </div>\n <div class=\"sec d-flex align-items-center\" *ngIf=\"link.showIcon && link?.icon?.url\">\n <ng-container *ngIf=\"!imgLoader\">\n <img [src]=\"link?.icon?.url\">\n <div class=\"repalce-image cursor-pointer\" (click)=\"updateImage()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" width=\"24\"\n height=\"24\" class=\"icon w-4 h-4\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\n d=\"m4 16 4.58579-4.5858c.78104-.781 2.04741-.781 2.82841 0L16 16m-2-2 1.5858-1.5858c.781-.781 2.0474-.781 2.8284 0L20 14m-6-6h.01M6 20h12c1.1046 0 2-.8954 2-2V6c0-1.10457-.8954-2-2-2H6c-1.10457 0-2 .89543-2 2v12c0 1.1046.89543 2 2 2Z\">\n </path>\n </svg>\n </div>\n\n <div class=\"delete-image cursor-pointer \" (click)=\"deleteImage()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"#ffffff\" viewBox=\"0 0 24 24\" width=\"24\"\n height=\"24\" class=\"icon h-4 w-4\" aria-hidden=\"true\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\n d=\"m19 7-.8673 12.1425C18.0579 20.1891 17.187 21 16.1378 21H7.86224c-1.04928 0-1.92016-.8109-1.99492-1.8575L5 7m5 4v6m4-6v6m1-10V4c0-.55228-.4477-1-1-1h-4c-.55228 0-1 .44772-1 1v3M4 7h16\">\n </path>\n </svg>\n </div>\n </ng-container>\n <ng-container *ngIf=\"imgLoader\">\n <div class=\"upload_spinner d-flex w-100 h-100 justify-content-center align-items-center\">\n <mat-spinner></mat-spinner>\n </div>\n </ng-container>\n </div>\n\n\n </div>\n\n <div class=\"fw-bold p-2 mb-2\">Icon Position</div>\n <div class=\"tabs d-flex px-2 gap-3 mb-2\" *ngIf=\"link.showIcon\">\n <div class=\"tab px-3 py-2\" *ngFor=\"let tab of ['left','right']\" (click)=\"link.icon.iconPosition = tab\"\n [class.selectedTab]=\"link?.icon?.iconPosition == tab\">\n {{tab | titlecase}}\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"data?.linkData?.length != 0\">\n\n\n <div class=\"groups cp\">\n <div *ngFor=\"let type of linkType\" [ngClass]=\"{'selectedType' : type.type === selectedType}\"\n (click)=\"changeType(type.type)\">{{type.type}}</div>\n </div>\n\n <div class=\"field-container mt-3\">\n <div *ngIf=\"link.linkType === RedirectionLink.Page\">\n <label class=\"input-label-1 mt-3 mb-2\">Select Page</label>\n <div class=\"drop-down-container w-100 d-flex mb-2\">\n <select [(ngModel)]=\"link.pageId\" (ngModelChange)=\"setRedirectUrl()\">\n <option value=\"\" selected>Select from your existing pages</option>\n <option *ngFor=\"let page of templatePage\" [value]=\"page.id\" style=\"padding: 10px;\">\n {{page.pageName}}</option>\n </select>\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\"\n alt=\"\">\n </div>\n </div>\n <!-- <div class=\"sub-text\">Select from your existing pages</div> -->\n </div>\n\n <div *ngIf=\"link.linkType === RedirectionLink.section\">\n <label class=\"mt-3 mb-2 input-label-1\">Section</label>\n <div class=\"drop-down-container w-100 d-flex mb-2\">\n <select [(ngModel)]=\"link.pageId\" style=\"cursor:pointer\">\n <option value=\"\" selected>Select the Section</option>\n <option *ngFor=\"let section of templatePage[0].components\" [value]=\"section.id\">{{section.sectionName}}\n </option>\n </select>\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\"\n alt=\"\">\n </div>\n </div>\n </div>\n\n <div\n *ngIf=\"link.linkType === RedirectionLink.External || link.linkType === RedirectionLink.Email || link.linkType === RedirectionLink.Phone\">\n <label class=\"mt-3 mb-2 input-label-1\">Select type</label>\n <div class=\"drop-down-container w-100 d-flex mb-2\">\n <select [(ngModel)]=\"link.linkType\" style=\"cursor:pointer\">\n <option value=\"\" selected>Select the Type</option>\n <option *ngFor=\"let type of externalLinkType\" [value]=\"type.type\">{{type.type}}</option>\n </select>\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\"\n alt=\"\">\n </div>\n </div>\n <label class=\"input-label mb-2\">{{link.linkType === RedirectionLink.External ? 'Website' : link.linkType ===\n RedirectionLink.Email ? 'Email Address' : 'Phone Number'}}</label>\n <input type=\"text\" class=\"input-text\" [(ngModel)]=\"link.redirectionUrl\"\n [placeholder]=\"link.linkType === RedirectionLink.External ? 'example : https://facebook.com': ''\">\n </div>\n\n <div class=\"d-flex justify-content-between mt-10\">\n <label class=\"input-label-2\">Open in a new browser tab</label>\n <div class=\"form-check form-switch ml-auto\">\n <input class=\"form-check-input switch-btn\" type=\"checkbox\" [(ngModel)]=\"link.newTab\" role=\"switch\">\n </div>\n </div>\n\n </div>\n\n <div class=\"footer w-100 align-items-center justify-content-center\">\n <button *ngIf=\"addLink\" (click)=\"addNewLink()\">Update Link</button>\n </div>\n\n </ng-container>\n\n </div>\n\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}.switch-btn{position:relative;z-index:10}.upload-image{border:3px dashed rgba(44,44,44,.6);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;margin:10px 10px 22px;border-radius:20px;box-shadow:#0000000d 0 1px 2px}.upload-image img{margin-bottom:8px;height:40px}.upload-text{background:var(--primary-bg-color);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:500}.sec{padding:10px 10px 22px;position:relative}.sec img{width:100%;height:200px;border-radius:20px}.delete-image{background-color:#d92d20;width:30px;height:30px;border-radius:6px;display:flex;justify-content:center;align-items:center;position:absolute;top:20px;right:20px}.repalce-image{display:flex;align-items:center;background:#fff;padding:2px;border-radius:6px;position:absolute;bottom:30px;left:20px}.selectedTab{background:#39393934;font-weight:700}.tab{border:1px solid rgba(44,44,44,.6);border-radius:12px}.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:50px}.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;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}.colorType{padding:3px 10px;box-shadow:0 0 4px #00000040;border-radius:10px;width:25%;border:1px solid #090981}.colorType select{background:transparent}.border-0{outline:unset}.transition-image{transition:opacity .3s ease-in-out,transform .3s ease-in-out}.color{background:#fff;padding:1rem}.custom-mat-form{width:100%;margin:10px 0;background-color:#f9f9f9;border-radius:8px}.custom-mat-form.mat-form-field-appearance-outline .mat-form-field-outline{color:#1976d2;border-color:#1976d2}.custom-mat-form .mat-form-field-label{color:#666;font-weight:500}.custom-mat-form .mat-select-trigger{padding:10px;font-size:14px;color:#333}::ng-deep .mat-select-panel{background-color:#fff;color:#333}::ng-deep .mat-option{font-size:14px;padding:10px 16px}::ng-deep .mat-option:hover{background-color:#e0f7fa}.color-container{padding:7px;gap:10px;border-radius:10px}.custom-input{height:35px;width:80%;border-radius:2rem;box-shadow:0 1px 3px #3c404326,0 1px 2px #3c404326}.outline-btn{border:2px solid #374151;color:#374151;background:transparent}.solid-btn{background-color:#374151;border:2px solid #374151;color:#fff}.text-btn{border:unset;color:#000}.btn-style{padding-top:5px;padding-bottom:5px;font-size:16px!important;margin-top:14px}.box-shadow{height:40px}.gradientStyle{-webkit-background-clip:text!important;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}\n"] }]
1421
1436
  }], ctorParameters: () => [{ type: ElementServiceService }, { type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
1422
1437
  type: Inject,
1423
1438
  args: [MAT_DIALOG_DATA]
@@ -1632,9 +1647,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
1632
1647
  }] } });
1633
1648
 
1634
1649
  class TextEditorComponent {
1635
- constructor(editorService, platformId) {
1650
+ constructor(editorService, platformId, ngZone) {
1636
1651
  this.editorService = editorService;
1637
1652
  this.platformId = platformId;
1653
+ this.ngZone = ngZone;
1638
1654
  this.value = '<p>Hello this is palash makhija</p>';
1639
1655
  this.valueChange = new EventEmitter();
1640
1656
  this.editable = false;
@@ -1655,7 +1671,6 @@ class TextEditorComponent {
1655
1671
  };
1656
1672
  this.selectedColorType = 'SOLID';
1657
1673
  this.primaryColor = '#000000';
1658
- this.secondaryColor = '#000000';
1659
1674
  this.savedRange = null;
1660
1675
  }
1661
1676
  ngOnInit() {
@@ -1750,68 +1765,67 @@ class TextEditorComponent {
1750
1765
  if (!isPlatformBrowser(this.platformId))
1751
1766
  return;
1752
1767
  const size = event.target.value;
1753
- // Apply a default size of 4 (needed for execCommand to work)
1754
- document.execCommand('fontSize', false, '4');
1755
- // Convert selected font elements to have actual font-size instead of "size" attribute
1756
- const elements = document.querySelectorAll("font[size='4']");
1757
- elements.forEach(el => {
1758
- const htmlElement = el; // ✅ Explicitly cast to HTMLElement
1759
- htmlElement.removeAttribute('size'); // Remove old size attribute
1760
- htmlElement.style.fontSize = size; // Apply CSS font size
1768
+ const selection = window.getSelection();
1769
+ if (!selection || selection.rangeCount === 0)
1770
+ return;
1771
+ const range = selection.getRangeAt(0);
1772
+ if (range.collapsed)
1773
+ return;
1774
+ this.ngZone.runOutsideAngular(() => {
1775
+ // Extract the selected content
1776
+ const selectedContent = range.extractContents();
1777
+ // Create a <span> to wrap the selection with desired font size
1778
+ const span = document.createElement('span');
1779
+ span.style.fontSize = size;
1780
+ span.appendChild(selectedContent);
1781
+ // Insert the styled span back into the range
1782
+ range.insertNode(span);
1783
+ // Reset the selection to the newly inserted content
1784
+ selection.removeAllRanges();
1785
+ const newRange = document.createRange();
1786
+ newRange.selectNodeContents(span);
1787
+ selection.addRange(newRange);
1788
+ // Emit new value asynchronously to nicely sync with Angular's change detection
1789
+ setTimeout(() => {
1790
+ this.ngZone.run(() => {
1791
+ this.toolbarData.selectedSize = size;
1792
+ this.valueChange.emit(this.editor.nativeElement.innerHTML);
1793
+ });
1794
+ }, 0);
1761
1795
  });
1762
- this.toolbarData.selectedSize = size;
1763
- this.valueChange.emit(this.editor.nativeElement.innerHTML);
1764
- // this.show = false; // Hide toolbar after action
1765
1796
  }
1766
1797
  changeColor(event) {
1767
1798
  if (!isPlatformBrowser(this.platformId))
1768
1799
  return;
1769
- this.restoreSelection(); // Restore selection before touching DOM
1770
1800
  const color = event.target.value;
1771
- // Grab current selection
1772
1801
  const selection = window.getSelection();
1773
- if (selection && selection.rangeCount > 0) {
1774
- const range = selection.getRangeAt(0);
1775
- let targetNode = range.commonAncestorContainer;
1776
- if (!targetNode)
1777
- return;
1778
- // If it's a text node, work with its parent element
1779
- if (targetNode.nodeType === Node.TEXT_NODE && targetNode.parentElement) {
1780
- targetNode = targetNode.parentElement;
1781
- }
1782
- if (targetNode instanceof HTMLElement) {
1783
- const el = targetNode;
1784
- // 1) If it *has* gradient styling, strip it off and immediately apply your solid color
1785
- const hasGradient = el.style.backgroundClip === 'text' ||
1786
- el.style.webkitBackgroundClip === 'text';
1787
- if (hasGradient) {
1788
- el.style.background = '';
1789
- el.style.backgroundClip = '';
1790
- el.style.webkitBackgroundClip = '';
1791
- el.style.webkitTextFillColor = '';
1792
- el.style.color = color;
1793
- this.valueChange.emit(this.editor.nativeElement.innerHTML);
1802
+ if (!selection || selection.rangeCount === 0)
1803
+ return;
1804
+ const range = selection.getRangeAt(0);
1805
+ if (range.collapsed)
1806
+ return;
1807
+ this.ngZone.runOutsideAngular(() => {
1808
+ // DOM mutation and selection restoration logic here, e.g.:
1809
+ // Extract selection
1810
+ const selectedContent = range.extractContents();
1811
+ // Remove old gradient spans as needed (same logic)
1812
+ const span = document.createElement('span');
1813
+ span.style.color = color;
1814
+ span.appendChild(selectedContent);
1815
+ range.insertNode(span);
1816
+ // Reset selection on new span
1817
+ selection.removeAllRanges();
1818
+ const newRange = document.createRange();
1819
+ newRange.selectNodeContents(span);
1820
+ selection.addRange(newRange);
1821
+ // Emit new value with a slight delay to avoid change detection clash
1822
+ setTimeout(() => {
1823
+ this.ngZone.run(() => {
1794
1824
  this.toolbarData.selectedColor = color;
1795
- return;
1796
- }
1797
- // 2) If *no* gradient styling, look for any <span> wrappers and unwrap them
1798
- // so that our execCommand('foreColor') can cleanly apply to plain text
1799
- }
1800
- }
1801
- const spans = this.editor.nativeElement.querySelectorAll('span');
1802
- spans.forEach((span) => {
1803
- // Only unwrap spans that *don’t* carry gradient—i.e. strips any residual tags
1804
- const parent = span.parentNode;
1805
- while (span.firstChild) {
1806
- parent.insertBefore(span.firstChild, span);
1807
- }
1808
- parent.removeChild(span);
1825
+ this.valueChange.emit(this.editor.nativeElement.innerHTML);
1826
+ });
1827
+ }, 0);
1809
1828
  });
1810
- // 3) Finally, use the legacy execCommand for solid color
1811
- document.execCommand('foreColor', false, color);
1812
- // Update toolbar state
1813
- this.toolbarData.selectedColor = color;
1814
- this.valueChange.emit(this.editor.nativeElement.innerHTML);
1815
1829
  }
1816
1830
  updateText(event) {
1817
1831
  // console.log(this.editor.nativeElement.innerHTML)
@@ -1822,8 +1836,7 @@ class TextEditorComponent {
1822
1836
  this.formatText('formatBlock', selectedValue);
1823
1837
  }
1824
1838
  openColorPicker() {
1825
- // this.colorPicker.nativeElement.click(); // Programmatically trigger input
1826
- this.saveSelection(); // Save the current selection
1839
+ this.saveSelection();
1827
1840
  }
1828
1841
  readFormattingProperties() {
1829
1842
  if (!isPlatformBrowser(this.platformId))
@@ -1881,9 +1894,27 @@ class TextEditorComponent {
1881
1894
  };
1882
1895
  }
1883
1896
  changeGradientColor() {
1884
- this.restoreSelection(); // Restore the selection before applying gradient
1885
- const color = `linear-gradient(90deg, ${this.primaryColor} 0%, ${this.secondaryColor} 100%)`;
1886
- this.applyGradientToText(color);
1897
+ this.ngZone.runOutsideAngular(() => {
1898
+ // Restore previous selection first
1899
+ this.restoreSelection();
1900
+ // Wait a little for browser selection update before saving again and applying gradient
1901
+ setTimeout(() => {
1902
+ // Save current selection fresh, after restore has settled
1903
+ this.saveSelection();
1904
+ // Build the gradient string
1905
+ const gradient = `linear-gradient(to right, ${this.primaryColor} 0%, ${this.secondaryColor} 75%`;
1906
+ // Apply the gradient styling wrapped inside the selected text
1907
+ this.applyGradientToText(gradient);
1908
+ // Restore the selection explicitly again after DOM mutation
1909
+ this.restoreSelection();
1910
+ // Emit updated HTML content after a short delay inside Angular zone (safe for change detection)
1911
+ setTimeout(() => {
1912
+ this.ngZone.run(() => {
1913
+ this.valueChange.emit(this.editor.nativeElement.innerHTML);
1914
+ });
1915
+ }, 0);
1916
+ }, 10); // 10ms delay (adjustable if needed)
1917
+ });
1887
1918
  }
1888
1919
  applyGradientToText(gradientValue) {
1889
1920
  if (!isPlatformBrowser(this.platformId))
@@ -1891,37 +1922,35 @@ class TextEditorComponent {
1891
1922
  const selection = window.getSelection();
1892
1923
  if (!selection || selection.rangeCount === 0)
1893
1924
  return;
1894
- // Get the current selection range
1895
1925
  const range = selection.getRangeAt(0);
1896
- // Check if the range is valid for wrapping
1897
1926
  if (!range || range.collapsed)
1898
1927
  return;
1899
- // Extract the selected content
1900
1928
  const selectedContent = range.extractContents();
1929
+ // Clean up spans without gradient style first
1901
1930
  const spans = this.editor.nativeElement.querySelectorAll('span');
1902
1931
  spans.forEach((span) => {
1903
- // Only unwrap spans that *don’t* carry gradient—i.e. strips any residual tags
1904
- const parent = span.parentNode;
1905
- while (span.firstChild) {
1906
- parent.insertBefore(span.firstChild, span);
1932
+ if (span.style.backgroundClip === 'text' ||
1933
+ span.style.webkitBackgroundClip === 'text') {
1934
+ const parent = span.parentNode;
1935
+ while (span.firstChild) {
1936
+ parent.insertBefore(span.firstChild, span);
1937
+ }
1938
+ parent.removeChild(span);
1907
1939
  }
1908
- parent.removeChild(span);
1909
1940
  });
1910
- // Create a new <span> element to wrap the selected text
1911
1941
  const span = document.createElement('span');
1912
- span.style.background = gradientValue;
1942
+ span.style['background-image'] = gradientValue;
1913
1943
  span.style.backgroundClip = 'text';
1914
1944
  span.style.webkitBackgroundClip = 'text';
1915
1945
  span.style.color = 'transparent';
1916
1946
  span.style.webkitTextFillColor = 'transparent';
1917
- // Append the selected content to the <span>
1947
+ span.style.inlineSize = 'block';
1918
1948
  span.appendChild(selectedContent);
1919
- // Insert the <span> back into the range
1920
1949
  range.insertNode(span);
1921
- // Clear the selection
1922
1950
  selection.removeAllRanges();
1923
- // Emit the updated HTML content
1924
- this.valueChange.emit(this.editor.nativeElement.innerHTML);
1951
+ const newRange = document.createRange();
1952
+ newRange.selectNodeContents(span);
1953
+ selection.addRange(newRange);
1925
1954
  }
1926
1955
  regenerateText() {
1927
1956
  let payload = {
@@ -1974,8 +2003,8 @@ class TextEditorComponent {
1974
2003
  }
1975
2004
  return this.value;
1976
2005
  }
1977
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextEditorComponent, deps: [{ token: ElementServiceService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
1978
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TextEditorComponent, isStandalone: true, selector: "simpo-text-editor", inputs: { value: "value", editable: "editable", sectionId: "sectionId", label: "label" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "editor", first: true, predicate: ["editor"], descendants: true }, { propertyName: "colorPicker", first: true, predicate: ["colorPicker"], descendants: true }, { propertyName: "parentElement", first: true, predicate: ["parentElement"], descendants: true }, { propertyName: "suggestion", first: true, predicate: ["suggestion"], descendants: true }], ngImport: i0, template: "<div class=\"editor-container\" [ngClass]=\"{'border': editable}\" #parentElement [class.d-none]=\"!editable && getText() == ''\">\n <div [contenteditable]=\"editable\" [(ngModel)]=\"value\" class=\"editable-text\" (mouseup)=\"showToolbar($event)\" #editor\n (ngModelChange)=\"updateText($event)\" (mousedown)=\"hideToolbar($event)\" (paste)=\"onPaste($event)\">\n </div>\n\n <div class=\"toolbar\" *ngIf=\"editable && show\" [ngStyle]=\"{'top.px': toolbarY}\" [style.right]=\"rightZero ? '0px' : 'auto'\" [style.left]=\"!rightZero ? '0px' : 'auto'\" #toolbar >\n <!-- <select class=\"tool\" (change)=\"onFormatChange($event)\" [(ngModel)]=\"toolbarData.selectedHeading\">\n <option value=\"H1\">Heading1</option>\n <option value=\"H2\">Heading2</option>\n <option value=\"H3\">Heading3</option>\n <option value=\"div\">Text</option>\n </select> -->\n\n <button class=\"tool\" (click)=\"formatText('bold')\" [ngClass]=\"{'selectedTool': toolbarData.isBold}\"><mat-icon> format_bold</mat-icon></button>\n <button class=\"tool\" (click)=\"formatText('italic')\" [ngClass]=\"{'selectedTool': toolbarData.isItalic}\"><mat-icon> format_italic</mat-icon></button>\n <button class=\"tool\" (click)=\"formatText('underline')\" [ngClass]=\"{'selectedTool': toolbarData.isUnderlined}\"><mat-icon> format_underlined</mat-icon></button>\n\n <select class=\"tool\" (change)=\"changeFontSize($event)\" [(ngModel)]=\"toolbarData.selectedSize\">\n <option value=\"\" selected>Default</option>\n <option value=\"clamp(0.75rem, 2vw, 1rem)\">Small</option>\n <option value=\"clamp(0.75rem, 2vw, 1.25rem)\">Medium</option>\n <option value=\"clamp(1rem, 3vw, 1.5rem)\">Semi Large</option>\n <option value=\"clamp(1.25rem, 4vw, 2rem)\">Large</option>\n <option value=\"clamp(2rem, 5vw, 3rem)\">Extra Large</option>\n <option value=\"clamp(3.1rem, 7vw, 4.5rem)\">Huge</option>\n </select>\n\n <button class=\"tool\" (click)=\"formatText('insertOrderedList')\" [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertOrderedList'}\"><mat-icon>format_list_numbered</mat-icon></button>\n <button class=\"tool\" (click)=\"formatText('insertUnorderedList')\" [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertUnorderedList'}\"><mat-icon> format_list_bulleted</mat-icon></button>\n\n <button class=\"tool\" (click)=\"formatText('justifyLeft')\" [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyLeft'}\"><mat-icon> format_align_left</mat-icon></button>\n <button class=\"tool\" (click)=\"formatText('justifyCenter')\" [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyCenter'}\"><mat-icon> format_align_center</mat-icon></button>\n <button class=\"tool\" (click)=\"formatText('justifyRight')\" [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyRight'}\"><mat-icon> format_align_right</mat-icon></button>\n\n <div class=\"colorType\">\n <button class=\"solid\" [ngClass]=\"{'solidColorSelected': selectedColorType === 'SOLID'}\" (click)=\"selectedColorType = 'SOLID'\">Solid</button>\n <button class=\"gradient\" [ngClass]=\"{'gradientColorSelected': selectedColorType === 'GRADIENT'}\" (click)=\"selectedColorType = 'GRADIENT'\">Gradient</button>\n </div>\n\n <button class=\"tool color-picker-btn\" (click)=\"openColorPicker()\" *ngIf=\"selectedColorType === 'SOLID'\">\n <mat-icon>format_color_text</mat-icon>\n <input type=\"color\" #colorPicker class=\"hidden-color-picker\" (input)=\"changeColor($event)\" [(ngModel)]=\"toolbarData.selectedColor\">\n </button>\n \n <div class=\"colorType\" *ngIf=\"selectedColorType === 'GRADIENT'\">\n <button class=\"tool color-picker-btn\" (click)=\"openColorPicker(); primaryColorPicker.click()\">\n <mat-icon [style.color]=\"primaryColor\">format_color_text</mat-icon>\n <input type=\"color\" #primaryColorPicker class=\"hidden-color-picker\" (input)=\"changeGradientColor()\" [(ngModel)]=\"primaryColor\">\n </button>\n <button class=\"tool color-picker-btn\" (click)=\"openColorPicker(); secondaryColorPicker.click()\">\n <mat-icon [style.color]=\"secondaryColor\">format_color_text</mat-icon>\n <input type=\"color\" #secondaryColorPicker class=\"hidden-color-picker\" (input)=\"changeGradientColor()\" [(ngModel)]=\"secondaryColor\">\n </button>\n </div>\n </div>\n\n <div class=\"suggestion-box\" [ngStyle]=\"{'top.px': suggestionY}\" [style.right]=\"rightZero ? '0px' : 'auto'\" [style.left]=\"!rightZero ? '0px' : 'auto'\" *ngIf=\"editable && label && showSuggestion\" #suggestion>\n <div class=\"suggestion\" (click)=\"regenerateText()\">\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/887493c1742273970151Frame%201244831740.png\" alt=\"\">\n <div>\n <p class=\"name\">Regenerate Text</p>\n <p class=\"desc\">Get a fresh variation of a current text</p>\n </div>\n </div>\n </div>\n</div>\n", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.editor-container{position:relative;display:inline-block;overflow:visible;width:100%}.editor-container div{outline:none}.editable-text{padding:4px;cursor:text}.toolbar{position:absolute;background:#fff;box-shadow:0 2px 5px #0003;display:flex;gap:5px;align-items:center;z-index:100000;box-shadow:#00000029 0 1px 4px;padding:5px 15px;border-radius:22px}.toolbar:hover{border:1px solid #ccc}.toolbar button{background:none;border:none;padding:5px 8px;cursor:pointer;font-weight:700;display:flex;align-items:center}.toolbar button:hover{background:#ddd}.toolbar select{padding:3px;border:none;outline:none;font-size:14px;font-weight:600;cursor:pointer}.toolbar input[type=color]{border:none;width:30px;height:30px;padding:0;cursor:pointer}.color-picker-btn{position:relative;background:none;border:none;cursor:pointer;padding:5px}.hidden-color-picker{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;cursor:pointer}.border,.border:hover{border:1px solid #E9E9E9!important;border-radius:8px}.selectedTool{background:var(--primary-bg-color)!important;color:#fff;border-radius:5px}p{margin-bottom:0rem!important}.suggestion-box{position:absolute;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #0003;z-index:10000;box-shadow:#00000029 0 1px 4px;padding:5px 15px;border-radius:10px}.suggestion{display:flex;gap:10px;width:307px;align-items:center;cursor:pointer}.suggestion img{border-radius:5px;width:32px;height:32px;background:#faf1fc;padding:3px}.suggestion .name{color:#000;font-family:var(--primary-font-family)}.suggestion .desc{color:#000;font-size:12px;color:#918585;font-family:var(--primary-font-family)}.colorType{display:flex;border:1px solid #E9E9E9;border-radius:5px;height:35px}.colorType .solid{border-right:1px solid #E9E9E9;font-size:14px!important;font-family:Mulish}.colorType .gradient{font-size:14px!important;font-family:Mulish}.solidColorSelected{background:var(--primary-bg-color)!important;color:#fff;border-top-left-radius:5px;border-bottom-left-radius:5px}.gradientColorSelected{background:var(--primary-bg-color)!important;color:#fff;border-top-right-radius:5px;border-bottom-right-radius:5px}@media screen and (max-width: 475px){.toolbar{max-width:100%;flex-wrap:wrap;row-gap:15px}.tool{width:max-content!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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.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: "directive", type: ContenteditableValueAccessor, selector: "[contenteditable][ngModel]", inputs: ["contenteditable"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
2006
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextEditorComponent, deps: [{ token: ElementServiceService }, { token: PLATFORM_ID }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
2007
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TextEditorComponent, isStandalone: true, selector: "simpo-text-editor", inputs: { value: "value", editable: "editable", sectionId: "sectionId", label: "label" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "editor", first: true, predicate: ["editor"], descendants: true }, { propertyName: "colorPicker", first: true, predicate: ["colorPicker"], descendants: true }, { propertyName: "parentElement", first: true, predicate: ["parentElement"], descendants: true }, { propertyName: "suggestion", first: true, predicate: ["suggestion"], descendants: true }], ngImport: i0, template: "<div class=\"editor-container\" [ngClass]=\"{'border': editable}\" #parentElement\n [class.d-none]=\"!editable && getText() == ''\">\n <div [contenteditable]=\"editable\" [(ngModel)]=\"value\" class=\"editable-text\" (mouseup)=\"showToolbar($event)\" #editor\n (ngModelChange)=\"updateText($event)\" (mousedown)=\"hideToolbar($event)\" (paste)=\"onPaste($event)\">\n </div>\n\n <div class=\"toolbar\" *ngIf=\"editable && show\" [ngStyle]=\"{'top.px': toolbarY}\"\n [style.right]=\"rightZero ? '0px' : 'auto'\" [style.left]=\"!rightZero ? '0px' : 'auto'\" #toolbar>\n <!-- <select class=\"tool\" (change)=\"onFormatChange($event)\" [(ngModel)]=\"toolbarData.selectedHeading\">\n <option value=\"H1\">Heading1</option>\n <option value=\"H2\">Heading2</option>\n <option value=\"H3\">Heading3</option>\n <option value=\"div\">Text</option>\n </select> -->\n\n <button class=\"tool\" (click)=\"formatText('bold')\" [ngClass]=\"{'selectedTool': toolbarData.isBold}\"><mat-icon>\n format_bold</mat-icon></button>\n <button class=\"tool\" (click)=\"formatText('italic')\" [ngClass]=\"{'selectedTool': toolbarData.isItalic}\"><mat-icon>\n format_italic</mat-icon></button>\n <button class=\"tool\" (click)=\"formatText('underline')\"\n [ngClass]=\"{'selectedTool': toolbarData.isUnderlined}\"><mat-icon> format_underlined</mat-icon></button>\n\n <select class=\"tool\" (change)=\"changeFontSize($event)\" [(ngModel)]=\"toolbarData.selectedSize\">\n <option value=\"\" selected>Default</option>\n <option value=\"clamp(0.75rem, 2vw, 1rem)\">Small</option>\n <option value=\"clamp(0.75rem, 2vw, 1.25rem)\">Medium</option>\n <option value=\"clamp(1rem, 3vw, 1.5rem)\">Semi Large</option>\n <option value=\"clamp(1.25rem, 4vw, 2rem)\">Large</option>\n <option value=\"clamp(2rem, 5vw, 3rem)\">Extra Large</option>\n <option value=\"clamp(3.1rem, 7vw, 4.5rem)\">Huge</option>\n </select>\n\n <button class=\"tool\" (click)=\"formatText('insertOrderedList')\"\n [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertOrderedList'}\"><mat-icon>format_list_numbered</mat-icon></button>\n <button class=\"tool\" (click)=\"formatText('insertUnorderedList')\"\n [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertUnorderedList'}\"><mat-icon>\n format_list_bulleted</mat-icon></button>\n\n <button class=\"tool\" (click)=\"formatText('justifyLeft')\"\n [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyLeft'}\"><mat-icon>\n format_align_left</mat-icon></button>\n <button class=\"tool\" (click)=\"formatText('justifyCenter')\"\n [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyCenter'}\"><mat-icon>\n format_align_center</mat-icon></button>\n <button class=\"tool\" (click)=\"formatText('justifyRight')\"\n [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyRight'}\"><mat-icon>\n format_align_right</mat-icon></button>\n\n <div class=\"colorType\">\n <button class=\"solid\" [ngClass]=\"{'solidColorSelected': selectedColorType === 'SOLID'}\"\n (click)=\"selectedColorType = 'SOLID'\">Solid</button>\n <button class=\"gradient\" [ngClass]=\"{'gradientColorSelected': selectedColorType === 'GRADIENT'}\"\n (click)=\"selectedColorType = 'GRADIENT'\">Gradient</button>\n </div>\n\n <button class=\"tool color-picker-btn\" (click)=\"openColorPicker()\" *ngIf=\"selectedColorType === 'SOLID'\">\n <mat-icon>format_color_text</mat-icon>\n <input type=\"color\" #colorPicker class=\"hidden-color-picker\" (input)=\"changeColor($event)\"\n [(ngModel)]=\"toolbarData.selectedColor\">\n </button>\n\n <div class=\"colorType\" *ngIf=\"selectedColorType === 'GRADIENT'\">\n <button class=\"tool color-picker-btn\" (click)=\"openColorPicker(); primaryColorPicker.click()\">\n <mat-icon [style.color]=\"primaryColor\">format_color_text</mat-icon>\n <input type=\"color\" #primaryColorPicker class=\"hidden-color-picker\" (input)=\"changeGradientColor()\"\n [(ngModel)]=\"primaryColor\">\n </button>\n <button class=\"tool color-picker-btn\" (click)=\"openColorPicker(); secondaryColorPicker.click()\">\n <mat-icon [style.color]=\"secondaryColor\">format_color_text</mat-icon>\n <input type=\"color\" #secondaryColorPicker class=\"hidden-color-picker\" (input)=\"changeGradientColor()\"\n [(ngModel)]=\"secondaryColor\">\n </button>\n </div>\n </div>\n\n <div class=\"suggestion-box\" [ngStyle]=\"{'top.px': suggestionY}\" [style.right]=\"rightZero ? '0px' : 'auto'\"\n [style.left]=\"!rightZero ? '0px' : 'auto'\" *ngIf=\"editable && label && showSuggestion\" #suggestion>\n <div class=\"suggestion\" (click)=\"regenerateText()\">\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/887493c1742273970151Frame%201244831740.png\"\n alt=\"\">\n <div>\n <p class=\"name\">Regenerate Text</p>\n <p class=\"desc\">Get a fresh variation of a current text</p>\n </div>\n </div>\n </div>\n</div>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.editor-container{position:relative;display:inline-block;overflow:visible;width:100%}.editor-container div{outline:none}.editable-text{padding:4px;cursor:text}.toolbar{position:absolute;background:#fff;box-shadow:0 2px 5px #0003;display:flex;gap:5px;align-items:center;z-index:100000;box-shadow:#00000029 0 1px 4px;padding:5px 15px;border-radius:22px}.toolbar:hover{border:1px solid #ccc}.toolbar button{background:none;border:none;padding:5px 8px;cursor:pointer;font-weight:700;display:flex;align-items:center}.toolbar button:hover{background:#ddd}.toolbar select{padding:3px;border:none;outline:none;font-size:14px;font-weight:600;cursor:pointer}.toolbar input[type=color]{border:none;width:30px;height:30px;padding:0;cursor:pointer}.color-picker-btn{position:relative;background:none;border:none;cursor:pointer;padding:5px}.hidden-color-picker{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;cursor:pointer}.border,.border:hover{border:1px solid #E9E9E9!important;border-radius:8px}.selectedTool{background:var(--primary-bg-color)!important;color:#fff;border-radius:5px}p{margin-bottom:0rem!important}.suggestion-box{position:absolute;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #0003;z-index:10000;box-shadow:#00000029 0 1px 4px;padding:5px 15px;border-radius:10px}.suggestion{display:flex;gap:10px;width:307px;align-items:center;cursor:pointer}.suggestion img{border-radius:5px;width:32px;height:32px;background:#faf1fc;padding:3px}.suggestion .name{color:#000;font-family:var(--primary-font-family)}.suggestion .desc{color:#000;font-size:12px;color:#918585;font-family:var(--primary-font-family)}.colorType{display:flex;border:1px solid #E9E9E9;border-radius:5px;height:35px}.colorType .solid{border-right:1px solid #E9E9E9;font-size:14px!important;font-family:Mulish}.colorType .gradient{font-size:14px!important;font-family:Mulish}.solidColorSelected{background:var(--primary-bg-color)!important;color:#fff;border-top-left-radius:5px;border-bottom-left-radius:5px}.gradientColorSelected{background:var(--primary-bg-color)!important;color:#fff;border-top-right-radius:5px;border-bottom-right-radius:5px}@media screen and (max-width: 475px){.toolbar{max-width:100%;flex-wrap:wrap;row-gap:15px}.tool{width:max-content!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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.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: "directive", type: ContenteditableValueAccessor, selector: "[contenteditable][ngModel]", inputs: ["contenteditable"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
1979
2008
  }
1980
2009
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextEditorComponent, decorators: [{
1981
2010
  type: Component,
@@ -1984,11 +2013,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
1984
2013
  FormsModule,
1985
2014
  ContenteditableValueAccessor,
1986
2015
  MatIconModule
1987
- ], template: "<div class=\"editor-container\" [ngClass]=\"{'border': editable}\" #parentElement [class.d-none]=\"!editable && getText() == ''\">\n <div [contenteditable]=\"editable\" [(ngModel)]=\"value\" class=\"editable-text\" (mouseup)=\"showToolbar($event)\" #editor\n (ngModelChange)=\"updateText($event)\" (mousedown)=\"hideToolbar($event)\" (paste)=\"onPaste($event)\">\n </div>\n\n <div class=\"toolbar\" *ngIf=\"editable && show\" [ngStyle]=\"{'top.px': toolbarY}\" [style.right]=\"rightZero ? '0px' : 'auto'\" [style.left]=\"!rightZero ? '0px' : 'auto'\" #toolbar >\n <!-- <select class=\"tool\" (change)=\"onFormatChange($event)\" [(ngModel)]=\"toolbarData.selectedHeading\">\n <option value=\"H1\">Heading1</option>\n <option value=\"H2\">Heading2</option>\n <option value=\"H3\">Heading3</option>\n <option value=\"div\">Text</option>\n </select> -->\n\n <button class=\"tool\" (click)=\"formatText('bold')\" [ngClass]=\"{'selectedTool': toolbarData.isBold}\"><mat-icon> format_bold</mat-icon></button>\n <button class=\"tool\" (click)=\"formatText('italic')\" [ngClass]=\"{'selectedTool': toolbarData.isItalic}\"><mat-icon> format_italic</mat-icon></button>\n <button class=\"tool\" (click)=\"formatText('underline')\" [ngClass]=\"{'selectedTool': toolbarData.isUnderlined}\"><mat-icon> format_underlined</mat-icon></button>\n\n <select class=\"tool\" (change)=\"changeFontSize($event)\" [(ngModel)]=\"toolbarData.selectedSize\">\n <option value=\"\" selected>Default</option>\n <option value=\"clamp(0.75rem, 2vw, 1rem)\">Small</option>\n <option value=\"clamp(0.75rem, 2vw, 1.25rem)\">Medium</option>\n <option value=\"clamp(1rem, 3vw, 1.5rem)\">Semi Large</option>\n <option value=\"clamp(1.25rem, 4vw, 2rem)\">Large</option>\n <option value=\"clamp(2rem, 5vw, 3rem)\">Extra Large</option>\n <option value=\"clamp(3.1rem, 7vw, 4.5rem)\">Huge</option>\n </select>\n\n <button class=\"tool\" (click)=\"formatText('insertOrderedList')\" [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertOrderedList'}\"><mat-icon>format_list_numbered</mat-icon></button>\n <button class=\"tool\" (click)=\"formatText('insertUnorderedList')\" [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertUnorderedList'}\"><mat-icon> format_list_bulleted</mat-icon></button>\n\n <button class=\"tool\" (click)=\"formatText('justifyLeft')\" [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyLeft'}\"><mat-icon> format_align_left</mat-icon></button>\n <button class=\"tool\" (click)=\"formatText('justifyCenter')\" [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyCenter'}\"><mat-icon> format_align_center</mat-icon></button>\n <button class=\"tool\" (click)=\"formatText('justifyRight')\" [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyRight'}\"><mat-icon> format_align_right</mat-icon></button>\n\n <div class=\"colorType\">\n <button class=\"solid\" [ngClass]=\"{'solidColorSelected': selectedColorType === 'SOLID'}\" (click)=\"selectedColorType = 'SOLID'\">Solid</button>\n <button class=\"gradient\" [ngClass]=\"{'gradientColorSelected': selectedColorType === 'GRADIENT'}\" (click)=\"selectedColorType = 'GRADIENT'\">Gradient</button>\n </div>\n\n <button class=\"tool color-picker-btn\" (click)=\"openColorPicker()\" *ngIf=\"selectedColorType === 'SOLID'\">\n <mat-icon>format_color_text</mat-icon>\n <input type=\"color\" #colorPicker class=\"hidden-color-picker\" (input)=\"changeColor($event)\" [(ngModel)]=\"toolbarData.selectedColor\">\n </button>\n \n <div class=\"colorType\" *ngIf=\"selectedColorType === 'GRADIENT'\">\n <button class=\"tool color-picker-btn\" (click)=\"openColorPicker(); primaryColorPicker.click()\">\n <mat-icon [style.color]=\"primaryColor\">format_color_text</mat-icon>\n <input type=\"color\" #primaryColorPicker class=\"hidden-color-picker\" (input)=\"changeGradientColor()\" [(ngModel)]=\"primaryColor\">\n </button>\n <button class=\"tool color-picker-btn\" (click)=\"openColorPicker(); secondaryColorPicker.click()\">\n <mat-icon [style.color]=\"secondaryColor\">format_color_text</mat-icon>\n <input type=\"color\" #secondaryColorPicker class=\"hidden-color-picker\" (input)=\"changeGradientColor()\" [(ngModel)]=\"secondaryColor\">\n </button>\n </div>\n </div>\n\n <div class=\"suggestion-box\" [ngStyle]=\"{'top.px': suggestionY}\" [style.right]=\"rightZero ? '0px' : 'auto'\" [style.left]=\"!rightZero ? '0px' : 'auto'\" *ngIf=\"editable && label && showSuggestion\" #suggestion>\n <div class=\"suggestion\" (click)=\"regenerateText()\">\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/887493c1742273970151Frame%201244831740.png\" alt=\"\">\n <div>\n <p class=\"name\">Regenerate Text</p>\n <p class=\"desc\">Get a fresh variation of a current text</p>\n </div>\n </div>\n </div>\n</div>\n", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.editor-container{position:relative;display:inline-block;overflow:visible;width:100%}.editor-container div{outline:none}.editable-text{padding:4px;cursor:text}.toolbar{position:absolute;background:#fff;box-shadow:0 2px 5px #0003;display:flex;gap:5px;align-items:center;z-index:100000;box-shadow:#00000029 0 1px 4px;padding:5px 15px;border-radius:22px}.toolbar:hover{border:1px solid #ccc}.toolbar button{background:none;border:none;padding:5px 8px;cursor:pointer;font-weight:700;display:flex;align-items:center}.toolbar button:hover{background:#ddd}.toolbar select{padding:3px;border:none;outline:none;font-size:14px;font-weight:600;cursor:pointer}.toolbar input[type=color]{border:none;width:30px;height:30px;padding:0;cursor:pointer}.color-picker-btn{position:relative;background:none;border:none;cursor:pointer;padding:5px}.hidden-color-picker{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;cursor:pointer}.border,.border:hover{border:1px solid #E9E9E9!important;border-radius:8px}.selectedTool{background:var(--primary-bg-color)!important;color:#fff;border-radius:5px}p{margin-bottom:0rem!important}.suggestion-box{position:absolute;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #0003;z-index:10000;box-shadow:#00000029 0 1px 4px;padding:5px 15px;border-radius:10px}.suggestion{display:flex;gap:10px;width:307px;align-items:center;cursor:pointer}.suggestion img{border-radius:5px;width:32px;height:32px;background:#faf1fc;padding:3px}.suggestion .name{color:#000;font-family:var(--primary-font-family)}.suggestion .desc{color:#000;font-size:12px;color:#918585;font-family:var(--primary-font-family)}.colorType{display:flex;border:1px solid #E9E9E9;border-radius:5px;height:35px}.colorType .solid{border-right:1px solid #E9E9E9;font-size:14px!important;font-family:Mulish}.colorType .gradient{font-size:14px!important;font-family:Mulish}.solidColorSelected{background:var(--primary-bg-color)!important;color:#fff;border-top-left-radius:5px;border-bottom-left-radius:5px}.gradientColorSelected{background:var(--primary-bg-color)!important;color:#fff;border-top-right-radius:5px;border-bottom-right-radius:5px}@media screen and (max-width: 475px){.toolbar{max-width:100%;flex-wrap:wrap;row-gap:15px}.tool{width:max-content!important}}\n"] }]
2016
+ ], template: "<div class=\"editor-container\" [ngClass]=\"{'border': editable}\" #parentElement\n [class.d-none]=\"!editable && getText() == ''\">\n <div [contenteditable]=\"editable\" [(ngModel)]=\"value\" class=\"editable-text\" (mouseup)=\"showToolbar($event)\" #editor\n (ngModelChange)=\"updateText($event)\" (mousedown)=\"hideToolbar($event)\" (paste)=\"onPaste($event)\">\n </div>\n\n <div class=\"toolbar\" *ngIf=\"editable && show\" [ngStyle]=\"{'top.px': toolbarY}\"\n [style.right]=\"rightZero ? '0px' : 'auto'\" [style.left]=\"!rightZero ? '0px' : 'auto'\" #toolbar>\n <!-- <select class=\"tool\" (change)=\"onFormatChange($event)\" [(ngModel)]=\"toolbarData.selectedHeading\">\n <option value=\"H1\">Heading1</option>\n <option value=\"H2\">Heading2</option>\n <option value=\"H3\">Heading3</option>\n <option value=\"div\">Text</option>\n </select> -->\n\n <button class=\"tool\" (click)=\"formatText('bold')\" [ngClass]=\"{'selectedTool': toolbarData.isBold}\"><mat-icon>\n format_bold</mat-icon></button>\n <button class=\"tool\" (click)=\"formatText('italic')\" [ngClass]=\"{'selectedTool': toolbarData.isItalic}\"><mat-icon>\n format_italic</mat-icon></button>\n <button class=\"tool\" (click)=\"formatText('underline')\"\n [ngClass]=\"{'selectedTool': toolbarData.isUnderlined}\"><mat-icon> format_underlined</mat-icon></button>\n\n <select class=\"tool\" (change)=\"changeFontSize($event)\" [(ngModel)]=\"toolbarData.selectedSize\">\n <option value=\"\" selected>Default</option>\n <option value=\"clamp(0.75rem, 2vw, 1rem)\">Small</option>\n <option value=\"clamp(0.75rem, 2vw, 1.25rem)\">Medium</option>\n <option value=\"clamp(1rem, 3vw, 1.5rem)\">Semi Large</option>\n <option value=\"clamp(1.25rem, 4vw, 2rem)\">Large</option>\n <option value=\"clamp(2rem, 5vw, 3rem)\">Extra Large</option>\n <option value=\"clamp(3.1rem, 7vw, 4.5rem)\">Huge</option>\n </select>\n\n <button class=\"tool\" (click)=\"formatText('insertOrderedList')\"\n [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertOrderedList'}\"><mat-icon>format_list_numbered</mat-icon></button>\n <button class=\"tool\" (click)=\"formatText('insertUnorderedList')\"\n [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertUnorderedList'}\"><mat-icon>\n format_list_bulleted</mat-icon></button>\n\n <button class=\"tool\" (click)=\"formatText('justifyLeft')\"\n [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyLeft'}\"><mat-icon>\n format_align_left</mat-icon></button>\n <button class=\"tool\" (click)=\"formatText('justifyCenter')\"\n [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyCenter'}\"><mat-icon>\n format_align_center</mat-icon></button>\n <button class=\"tool\" (click)=\"formatText('justifyRight')\"\n [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyRight'}\"><mat-icon>\n format_align_right</mat-icon></button>\n\n <div class=\"colorType\">\n <button class=\"solid\" [ngClass]=\"{'solidColorSelected': selectedColorType === 'SOLID'}\"\n (click)=\"selectedColorType = 'SOLID'\">Solid</button>\n <button class=\"gradient\" [ngClass]=\"{'gradientColorSelected': selectedColorType === 'GRADIENT'}\"\n (click)=\"selectedColorType = 'GRADIENT'\">Gradient</button>\n </div>\n\n <button class=\"tool color-picker-btn\" (click)=\"openColorPicker()\" *ngIf=\"selectedColorType === 'SOLID'\">\n <mat-icon>format_color_text</mat-icon>\n <input type=\"color\" #colorPicker class=\"hidden-color-picker\" (input)=\"changeColor($event)\"\n [(ngModel)]=\"toolbarData.selectedColor\">\n </button>\n\n <div class=\"colorType\" *ngIf=\"selectedColorType === 'GRADIENT'\">\n <button class=\"tool color-picker-btn\" (click)=\"openColorPicker(); primaryColorPicker.click()\">\n <mat-icon [style.color]=\"primaryColor\">format_color_text</mat-icon>\n <input type=\"color\" #primaryColorPicker class=\"hidden-color-picker\" (input)=\"changeGradientColor()\"\n [(ngModel)]=\"primaryColor\">\n </button>\n <button class=\"tool color-picker-btn\" (click)=\"openColorPicker(); secondaryColorPicker.click()\">\n <mat-icon [style.color]=\"secondaryColor\">format_color_text</mat-icon>\n <input type=\"color\" #secondaryColorPicker class=\"hidden-color-picker\" (input)=\"changeGradientColor()\"\n [(ngModel)]=\"secondaryColor\">\n </button>\n </div>\n </div>\n\n <div class=\"suggestion-box\" [ngStyle]=\"{'top.px': suggestionY}\" [style.right]=\"rightZero ? '0px' : 'auto'\"\n [style.left]=\"!rightZero ? '0px' : 'auto'\" *ngIf=\"editable && label && showSuggestion\" #suggestion>\n <div class=\"suggestion\" (click)=\"regenerateText()\">\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/887493c1742273970151Frame%201244831740.png\"\n alt=\"\">\n <div>\n <p class=\"name\">Regenerate Text</p>\n <p class=\"desc\">Get a fresh variation of a current text</p>\n </div>\n </div>\n </div>\n</div>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.editor-container{position:relative;display:inline-block;overflow:visible;width:100%}.editor-container div{outline:none}.editable-text{padding:4px;cursor:text}.toolbar{position:absolute;background:#fff;box-shadow:0 2px 5px #0003;display:flex;gap:5px;align-items:center;z-index:100000;box-shadow:#00000029 0 1px 4px;padding:5px 15px;border-radius:22px}.toolbar:hover{border:1px solid #ccc}.toolbar button{background:none;border:none;padding:5px 8px;cursor:pointer;font-weight:700;display:flex;align-items:center}.toolbar button:hover{background:#ddd}.toolbar select{padding:3px;border:none;outline:none;font-size:14px;font-weight:600;cursor:pointer}.toolbar input[type=color]{border:none;width:30px;height:30px;padding:0;cursor:pointer}.color-picker-btn{position:relative;background:none;border:none;cursor:pointer;padding:5px}.hidden-color-picker{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;cursor:pointer}.border,.border:hover{border:1px solid #E9E9E9!important;border-radius:8px}.selectedTool{background:var(--primary-bg-color)!important;color:#fff;border-radius:5px}p{margin-bottom:0rem!important}.suggestion-box{position:absolute;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #0003;z-index:10000;box-shadow:#00000029 0 1px 4px;padding:5px 15px;border-radius:10px}.suggestion{display:flex;gap:10px;width:307px;align-items:center;cursor:pointer}.suggestion img{border-radius:5px;width:32px;height:32px;background:#faf1fc;padding:3px}.suggestion .name{color:#000;font-family:var(--primary-font-family)}.suggestion .desc{color:#000;font-size:12px;color:#918585;font-family:var(--primary-font-family)}.colorType{display:flex;border:1px solid #E9E9E9;border-radius:5px;height:35px}.colorType .solid{border-right:1px solid #E9E9E9;font-size:14px!important;font-family:Mulish}.colorType .gradient{font-size:14px!important;font-family:Mulish}.solidColorSelected{background:var(--primary-bg-color)!important;color:#fff;border-top-left-radius:5px;border-bottom-left-radius:5px}.gradientColorSelected{background:var(--primary-bg-color)!important;color:#fff;border-top-right-radius:5px;border-bottom-right-radius:5px}@media screen and (max-width: 475px){.toolbar{max-width:100%;flex-wrap:wrap;row-gap:15px}.tool{width:max-content!important}}\n"] }]
1988
2017
  }], ctorParameters: () => [{ type: ElementServiceService }, { type: Object, decorators: [{
1989
2018
  type: Inject,
1990
2019
  args: [PLATFORM_ID]
1991
- }] }], propDecorators: { toolbar: [{
2020
+ }] }, { type: i0.NgZone }], propDecorators: { toolbar: [{
1992
2021
  type: ViewChild,
1993
2022
  args: ['toolbar', { static: false }]
1994
2023
  }], editor: [{
@@ -4963,8 +4992,8 @@ class SpacingAroundDirective {
4963
4992
  this.el.nativeElement.style.setProperty("padding-bottom", '1rem');
4964
4993
  }
4965
4994
  else {
4966
- this.el.nativeElement.style.setProperty("padding-left", SPACINGALIGN[this.layout?.spacingAround]);
4967
- this.el.nativeElement.style.setProperty("padding-right", SPACINGALIGN[this.layout?.spacingAround]);
4995
+ this.el.nativeElement.style.setProperty("padding-top", '0rem');
4996
+ this.el.nativeElement.style.setProperty("padding-bottom", '0rem');
4968
4997
  }
4969
4998
  }
4970
4999
  this.childDiv?.style.setProperty("border", this.getBorderColor(this.backgroundInfo?.color || '#ffffff'));
@@ -5636,6 +5665,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
5636
5665
  type: Input
5637
5666
  }] } });
5638
5667
 
5668
+ class SpacingDirective {
5669
+ constructor(el) {
5670
+ this.el = el;
5671
+ }
5672
+ ngOnChanges() {
5673
+ this.applySpacing();
5674
+ }
5675
+ applySpacing() {
5676
+ if (this.spacing) {
5677
+ applySpacing(this.el.nativeElement, this.spacing);
5678
+ }
5679
+ }
5680
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpacingDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
5681
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: SpacingDirective, isStandalone: true, selector: "[simpoSpacing]", inputs: { spacing: ["simpoSpacing", "spacing"] }, usesOnChanges: true, ngImport: i0 }); }
5682
+ }
5683
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpacingDirective, decorators: [{
5684
+ type: Directive,
5685
+ args: [{
5686
+ selector: '[simpoSpacing]',
5687
+ standalone: true,
5688
+ }]
5689
+ }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { spacing: [{
5690
+ type: Input,
5691
+ args: ['simpoSpacing']
5692
+ }] } });
5693
+
5639
5694
  class ImageCarouselSectionComponent extends BaseSection {
5640
5695
  // content: any;
5641
5696
  constructor(_eventService) {
@@ -5657,6 +5712,11 @@ class ImageCarouselSectionComponent extends BaseSection {
5657
5712
  get stylesLayout() {
5658
5713
  return { ...this.style?.layout };
5659
5714
  }
5715
+ get spacingLayout() {
5716
+ // if(this.data?.styles?.borderLessImage)
5717
+ // return undefined
5718
+ return { ...this.style?.layout?.spacing };
5719
+ }
5660
5720
  getPrevImage(index) {
5661
5721
  const prevIndex = (index - 1 + (this.content?.listItem?.data.length || 0)) % (this.content?.listItem.data.length || 0);
5662
5722
  return this.content?.listItem.data[prevIndex].image;
@@ -5677,9 +5737,9 @@ class ImageCarouselSectionComponent extends BaseSection {
5677
5737
  }, 100);
5678
5738
  }
5679
5739
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageCarouselSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
5680
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImageCarouselSectionComponent, isStandalone: true, selector: "simpo-image-carousel-section", inputs: { data: "data", index: "index", customClass: "customClass", nextComponentColor: "nextComponentColor", edit: "edit", delete: "delete" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"container-fluid\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\n [attr.style]=\"customClass\">\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\">\n <div *ngFor=\"let text of data?.content?.inputText\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.corners\"\n [ngClass]=\"{'px-0 py-0': style?.fullWidth, 'image-screen': style?.layout?.fit === 'screen' && style?.fullWidth, 'img-screen-notext': style?.layout?.fit === 'screen' && style?.fullWidth && text.value === ''}\"\n [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\n <div class=\"row mlr-0 w-100\" *ngIf=\"data?.content?.inputText?.length\" [id]=\"data?.id\"\n [simpoAnimation]=\"style?.animation\">\n <div *ngFor=\"let text of data?.content?.inputText\">\n <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\" *ngIf=\"edit || text.value\">\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n\n <div id=\"carouselExampleCaptions\" class=\"carousel slide\" data-bs-ride=\"carousel\"\n [ngClass]=\"{'mb-0 px-0 py-0': style?.fullWidth, 'mb-1': !style?.fullWidth}\">\n <div class=\"carousel-inner\">\n <div class=\"carousel-item\" *ngFor=\"let img of content?.listItem?.data; let i = index\"\n [class.active]=\"i === 0\">\n <div class=\"row m-0\">\n <div class=\"col d-flex p-0\" *ngIf=\"screenWidth >= 475\">\n <!-- <img loading=\"lazy\" class=\"d-block position-relative\" style=\"width: 20%; left: -20px\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\n <img loading=\"lazy\"\n [ngClass]=\"{'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\"\n *ngIf=\"!style?.fullWidth\" [simpoImageDirective]=\"style?.image\"\n class=\"d-block position-relative blur\"\n style=\"object-fit: cover !important;width: 100%;max-width: 20%; left: -20px\"\n [src]=\"getPrevImage(i)?.url\" [alt]=\"getPrevImage(i)?.altText\" [simpoCorner]=\"style?.corners\"\n [id]=\"data?.id\" [simpoObjectPosition]=\"getPrevImage(i)?.position\" loading=\"lazy\"\n [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n <img loading=\"lazy\"\n [ngClass]=\"{'full-width-image': style?.fullWidth, 'not-full-width': !style?.fullWidth, 'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\"\n [simpoImageDirective]=\"style?.image\" class=\"d-block image-height-80vh\"\n [class]=\"data?.id+img.image.id\" [src]=\"img.image.url\" [alt]=\"img.image.altText\"\n [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"\n loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n <!-- <img loading=\"lazy\" class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\n <img loading=\"lazy\"\n [ngClass]=\"{'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\"\n *ngIf=\"!style?.fullWidth\" [simpoImageDirective]=\"style?.image\"\n class=\"d-block position-relative blur\"\n style=\"object-fit: cover !important;width: 100%; max-width: 20%;right: -20px;\"\n [src]=\"getNextImage(i)?.url\" [alt]=\"getNextImage(i)?.altText\" [simpoCorner]=\"style?.corners\"\n [id]=\"data?.id\" [simpoObjectPosition]=\"getNextImage(i)?.position\" loading=\"lazy\"\n [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n </div>\n <div class=\"col d-flex\" *ngIf=\"screenWidth < 475\">\n <img loading=\"lazy\" class=\"d-block w-100 image-height-40vh\" [class]=\"data?.id+img.image.id\"\n [src]=\"img.image.url\" [alt]=\"img.image.altText\" [id]=\"data?.id\"\n [simpoObjectPosition]=\"img?.image?.position\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\n [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n </div>\n </div>\n </div>\n </div>\n <a class=\"carousel-control-prev\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"prev\">\n <span class=\"carousel-control-prev-icon previous-icon d-flex align-items-center justify-content-center\" aria-hidden=\"true\">\n <mat-icon class=\"icon d-flex align-items-center justify-content-center\">keyboard_arrow_left</mat-icon>\n </span>\n <span class=\"sr-only\">Previous</span>\n\n </a>\n <a class=\"carousel-control-next\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"next\">\n <span class=\"carousel-control-next-icon previous-icon d-flex align-items-center justify-content-center\" aria-hidden=\"true\">\n <mat-icon class=\"icon d-flex align-items-center justify-content-center\">keyboard_arrow_right</mat-icon>\n </span>\n <span class=\"sr-only\">Next</span>\n\n </a>\n </div>\n </div>\n </div>\n\n </div>\n <ng-container *ngIf=\"style?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n</section>\n", styles: [".mb-1{margin-bottom:1.5rem!important}.previous-icon{width:65px;height:65px}.image-height-40vh{height:40vh}.full-width-image{width:100%;height:70vh}.previous-icon{background:#fff;border-radius:50%}.not-full-width{width:60%}.icon{color:#000!important;font-size:40px!important}.image-height-content{height:70vh}.image-height-screen{height:calc(90vh + -0px);min-height:0px!important}.image-screen{height:calc(110vh + -0px);min-height:0px!important}.img-screen-notext{height:calc(90vh + -0px);min-height:0px!important}.btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.blur{filter:blur(5px)}@media only screen and (max-width: 475px){.previous-icon{width:44%}.image-height-40vh{padding:0;margin-bottom:10%}}.mlr-0{margin-left:0;margin-right:0}li{list-style:none}@media only screen and (max-width: 475px){.carousel-control-prev,.carousel-control-next{display:none!important}}.caratlane-indicator{display:flex;align-items:center;justify-content:center;background:#1e1f21b3;border-radius:18px;min-width:50px;height:32px;padding:0 16px;font-size:1rem;font-weight:600;color:#fff;margin:18px auto 0;box-shadow:0 2px 8px #151d481a;letter-spacing:1px}.caratlane-indicator .current{font-weight:700;font-size:1rem;color:#fff}.caratlane-indicator .divider,.caratlane-indicator .total{font-weight:500;color:#fff;opacity:.9;margin-left:2px}.caratlane-indicator{position:absolute;bottom:20px;left:50%;transform:translate(-50%);background:#0009;color:#fff;padding:8px 16px;border-radius:20px;font-size:14px;font-weight:500;z-index:10;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);min-width:45px;text-align:center}@media (max-width: 768px){.caratlane-indicator{bottom:15px;padding:6px 12px;font-size:12px}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type:
5740
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImageCarouselSectionComponent, isStandalone: true, selector: "simpo-image-carousel-section", inputs: { data: "data", index: "index", customClass: "customClass", nextComponentColor: "nextComponentColor", edit: "edit", delete: "delete" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"container-fluid\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\n [attr.style]=\"customClass\">\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\">\n <div *ngFor=\"let text of data?.content?.inputText\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.corners\"\n [ngClass]=\"{'px-0 py-0': style?.fullWidth, 'image-screen': style?.layout?.fit === 'screen' && style?.fullWidth, 'img-screen-notext': style?.layout?.fit === 'screen' && style?.fullWidth && text.value === ''}\"\n [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\" [simpoSpacing]=\"spacingLayout\">\n <div class=\"row mlr-0 w-100\" *ngIf=\"data?.content?.inputText?.length\" [id]=\"data?.id\"\n [simpoAnimation]=\"style?.animation\">\n <div *ngFor=\"let text of data?.content?.inputText\">\n <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\" *ngIf=\"edit || text.value\">\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n\n <div id=\"carouselExampleCaptions\" class=\"carousel slide\" [simpoLayout]=\"style?.layout\"\n [ngClass]=\"{'mb-0 px-0 py-0': style?.fullWidth, 'mb-md-1 mb-sm-0 mb-lg-1': !style?.fullWidth}\">\n <div class=\"carousel-inner\">\n <!-- data-bs-ride=\"carousel\" -->\n <div class=\"carousel-item\" *ngFor=\"let img of content?.listItem?.data; let i = index\"\n [class.active]=\"i === 0\">\n <div class=\"row m-0\">\n <div class=\"col d-flex p-0\" *ngIf=\"screenWidth >= 475\">\n <!-- <img loading=\"lazy\" class=\"d-block position-relative\" style=\"width: 20%; left: -20px\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\n <img loading=\"lazy\"\n [ngClass]=\"{'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\"\n *ngIf=\"!style?.fullWidth\" [simpoImageDirective]=\"style?.image\"\n class=\"d-block position-relative blur\"\n style=\"object-fit: cover !important;width: 100%;max-width: 20%; left: -20px\"\n [src]=\"getPrevImage(i)?.url\" [alt]=\"getPrevImage(i)?.altText\" [simpoCorner]=\"style?.corners\"\n [id]=\"data?.id\" [simpoObjectPosition]=\"getPrevImage(i)?.position\" loading=\"lazy\"\n [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n <img loading=\"lazy\"\n [ngClass]=\"{'full-width-image': style?.fullWidth, 'not-full-width': !style?.fullWidth, 'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\"\n [simpoImageDirective]=\"style?.image\" class=\"d-block image-height-80vh\"\n [class]=\"data?.id+img.image.id\" [src]=\"img.image.url\" [alt]=\"img.image.altText\"\n [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"\n loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n <!-- <img loading=\"lazy\" class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\n <img loading=\"lazy\"\n [ngClass]=\"{'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\"\n *ngIf=\"!style?.fullWidth\" [simpoImageDirective]=\"style?.image\"\n class=\"d-block position-relative blur\"\n style=\"object-fit: cover !important;width: 100%; max-width: 20%;right: -20px;\"\n [src]=\"getNextImage(i)?.url\" [alt]=\"getNextImage(i)?.altText\" [simpoCorner]=\"style?.corners\"\n [id]=\"data?.id\" [simpoObjectPosition]=\"getNextImage(i)?.position\" loading=\"lazy\"\n [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n </div>\n <div class=\"col d-flex p-0\" *ngIf=\"screenWidth < 475\">\n <img loading=\"lazy\" class=\"d-block w-100 image-height-40vh\" [class]=\"data?.id+img.image.id\"\n [src]=\"img.image.url\" [alt]=\"img.image.altText\" [id]=\"data?.id\"\n [simpoObjectPosition]=\"img?.image?.position\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\n [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n </div>\n </div>\n </div>\n </div>\n <a class=\"carousel-control-prev\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"prev\">\n <span class=\"carousel-control-prev-icon previous-icon d-flex align-items-center justify-content-center\" aria-hidden=\"true\">\n <mat-icon class=\"icon d-flex align-items-center justify-content-center\">keyboard_arrow_left</mat-icon>\n </span>\n <span class=\"sr-only\">Previous</span>\n\n </a>\n <a class=\"carousel-control-next\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"next\">\n <span class=\"carousel-control-next-icon previous-icon d-flex align-items-center justify-content-center\" aria-hidden=\"true\">\n <mat-icon class=\"icon d-flex align-items-center justify-content-center\">keyboard_arrow_right</mat-icon>\n </span>\n <span class=\"sr-only\">Next</span>\n\n </a>\n </div>\n </div>\n </div>\n\n </div>\n <ng-container *ngIf=\"style?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n</section>\n", styles: [".mb-1{margin-bottom:1.5rem!important}.previous-icon{width:65px;height:65px}.image-height-40vh{height:40vh}.full-width-image{width:100%;height:70vh}.previous-icon{background:#fff;border-radius:50%}.not-full-width{width:60%}.icon{color:#000!important;font-size:40px!important}.image-height-content{height:70vh}.image-height-screen{height:calc(90vh + -0px);min-height:0px!important}.image-screen{height:calc(110vh + -0px);min-height:0px!important}.img-screen-notext{height:calc(90vh + -0px);min-height:0px!important}.btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.blur{filter:blur(5px)}@media only screen and (max-width: 475px){.previous-icon{width:100%;height:45px!important}.image-height-40vh{padding:0}}.mlr-0{margin-left:0;margin-right:0}li{list-style:none}.caratlane-indicator{display:flex;align-items:center;justify-content:center;background:#1e1f21b3;border-radius:18px;min-width:50px;height:32px;padding:0 16px;font-size:1rem;font-weight:600;color:#fff;margin:18px auto 0;box-shadow:0 2px 8px #151d481a;letter-spacing:1px}.caratlane-indicator .current{font-weight:700;font-size:1rem;color:#fff}.caratlane-indicator .divider,.caratlane-indicator .total{font-weight:500;color:#fff;opacity:.9;margin-left:2px}.caratlane-indicator{position:absolute;bottom:20px;left:50%;transform:translate(-50%);background:#0009;color:#fff;padding:8px 16px;border-radius:20px;font-size:14px;font-weight:500;z-index:10;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);min-width:45px;text-align:center}@media (max-width: 768px){.caratlane-indicator{bottom:15px;padding:6px 12px;font-size:12px}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type:
5681
5741
  //directive
5682
- AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }] }); }
5742
+ AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: SpacingDirective, selector: "[simpoSpacing]", inputs: ["simpoSpacing"] }] }); }
5683
5743
  }
5684
5744
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageCarouselSectionComponent, decorators: [{
5685
5745
  type: Component,
@@ -5701,8 +5761,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
5701
5761
  ObjectPositionDirective,
5702
5762
  ContentTitleDirective,
5703
5763
  ImageEditorDirective,
5704
- SpacingAroundDirective
5705
- ], template: "<section class=\"container-fluid\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\n [attr.style]=\"customClass\">\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\">\n <div *ngFor=\"let text of data?.content?.inputText\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.corners\"\n [ngClass]=\"{'px-0 py-0': style?.fullWidth, 'image-screen': style?.layout?.fit === 'screen' && style?.fullWidth, 'img-screen-notext': style?.layout?.fit === 'screen' && style?.fullWidth && text.value === ''}\"\n [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\n <div class=\"row mlr-0 w-100\" *ngIf=\"data?.content?.inputText?.length\" [id]=\"data?.id\"\n [simpoAnimation]=\"style?.animation\">\n <div *ngFor=\"let text of data?.content?.inputText\">\n <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\" *ngIf=\"edit || text.value\">\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n\n <div id=\"carouselExampleCaptions\" class=\"carousel slide\" data-bs-ride=\"carousel\"\n [ngClass]=\"{'mb-0 px-0 py-0': style?.fullWidth, 'mb-1': !style?.fullWidth}\">\n <div class=\"carousel-inner\">\n <div class=\"carousel-item\" *ngFor=\"let img of content?.listItem?.data; let i = index\"\n [class.active]=\"i === 0\">\n <div class=\"row m-0\">\n <div class=\"col d-flex p-0\" *ngIf=\"screenWidth >= 475\">\n <!-- <img loading=\"lazy\" class=\"d-block position-relative\" style=\"width: 20%; left: -20px\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\n <img loading=\"lazy\"\n [ngClass]=\"{'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\"\n *ngIf=\"!style?.fullWidth\" [simpoImageDirective]=\"style?.image\"\n class=\"d-block position-relative blur\"\n style=\"object-fit: cover !important;width: 100%;max-width: 20%; left: -20px\"\n [src]=\"getPrevImage(i)?.url\" [alt]=\"getPrevImage(i)?.altText\" [simpoCorner]=\"style?.corners\"\n [id]=\"data?.id\" [simpoObjectPosition]=\"getPrevImage(i)?.position\" loading=\"lazy\"\n [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n <img loading=\"lazy\"\n [ngClass]=\"{'full-width-image': style?.fullWidth, 'not-full-width': !style?.fullWidth, 'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\"\n [simpoImageDirective]=\"style?.image\" class=\"d-block image-height-80vh\"\n [class]=\"data?.id+img.image.id\" [src]=\"img.image.url\" [alt]=\"img.image.altText\"\n [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"\n loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n <!-- <img loading=\"lazy\" class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\n <img loading=\"lazy\"\n [ngClass]=\"{'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\"\n *ngIf=\"!style?.fullWidth\" [simpoImageDirective]=\"style?.image\"\n class=\"d-block position-relative blur\"\n style=\"object-fit: cover !important;width: 100%; max-width: 20%;right: -20px;\"\n [src]=\"getNextImage(i)?.url\" [alt]=\"getNextImage(i)?.altText\" [simpoCorner]=\"style?.corners\"\n [id]=\"data?.id\" [simpoObjectPosition]=\"getNextImage(i)?.position\" loading=\"lazy\"\n [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n </div>\n <div class=\"col d-flex\" *ngIf=\"screenWidth < 475\">\n <img loading=\"lazy\" class=\"d-block w-100 image-height-40vh\" [class]=\"data?.id+img.image.id\"\n [src]=\"img.image.url\" [alt]=\"img.image.altText\" [id]=\"data?.id\"\n [simpoObjectPosition]=\"img?.image?.position\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\n [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n </div>\n </div>\n </div>\n </div>\n <a class=\"carousel-control-prev\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"prev\">\n <span class=\"carousel-control-prev-icon previous-icon d-flex align-items-center justify-content-center\" aria-hidden=\"true\">\n <mat-icon class=\"icon d-flex align-items-center justify-content-center\">keyboard_arrow_left</mat-icon>\n </span>\n <span class=\"sr-only\">Previous</span>\n\n </a>\n <a class=\"carousel-control-next\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"next\">\n <span class=\"carousel-control-next-icon previous-icon d-flex align-items-center justify-content-center\" aria-hidden=\"true\">\n <mat-icon class=\"icon d-flex align-items-center justify-content-center\">keyboard_arrow_right</mat-icon>\n </span>\n <span class=\"sr-only\">Next</span>\n\n </a>\n </div>\n </div>\n </div>\n\n </div>\n <ng-container *ngIf=\"style?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n</section>\n", styles: [".mb-1{margin-bottom:1.5rem!important}.previous-icon{width:65px;height:65px}.image-height-40vh{height:40vh}.full-width-image{width:100%;height:70vh}.previous-icon{background:#fff;border-radius:50%}.not-full-width{width:60%}.icon{color:#000!important;font-size:40px!important}.image-height-content{height:70vh}.image-height-screen{height:calc(90vh + -0px);min-height:0px!important}.image-screen{height:calc(110vh + -0px);min-height:0px!important}.img-screen-notext{height:calc(90vh + -0px);min-height:0px!important}.btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.blur{filter:blur(5px)}@media only screen and (max-width: 475px){.previous-icon{width:44%}.image-height-40vh{padding:0;margin-bottom:10%}}.mlr-0{margin-left:0;margin-right:0}li{list-style:none}@media only screen and (max-width: 475px){.carousel-control-prev,.carousel-control-next{display:none!important}}.caratlane-indicator{display:flex;align-items:center;justify-content:center;background:#1e1f21b3;border-radius:18px;min-width:50px;height:32px;padding:0 16px;font-size:1rem;font-weight:600;color:#fff;margin:18px auto 0;box-shadow:0 2px 8px #151d481a;letter-spacing:1px}.caratlane-indicator .current{font-weight:700;font-size:1rem;color:#fff}.caratlane-indicator .divider,.caratlane-indicator .total{font-weight:500;color:#fff;opacity:.9;margin-left:2px}.caratlane-indicator{position:absolute;bottom:20px;left:50%;transform:translate(-50%);background:#0009;color:#fff;padding:8px 16px;border-radius:20px;font-size:14px;font-weight:500;z-index:10;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);min-width:45px;text-align:center}@media (max-width: 768px){.caratlane-indicator{bottom:15px;padding:6px 12px;font-size:12px}}\n"] }]
5764
+ SpacingAroundDirective,
5765
+ SpacingDirective,
5766
+ ], template: "<section class=\"container-fluid\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\n [attr.style]=\"customClass\">\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\">\n <div *ngFor=\"let text of data?.content?.inputText\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.corners\"\n [ngClass]=\"{'px-0 py-0': style?.fullWidth, 'image-screen': style?.layout?.fit === 'screen' && style?.fullWidth, 'img-screen-notext': style?.layout?.fit === 'screen' && style?.fullWidth && text.value === ''}\"\n [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\" [simpoSpacing]=\"spacingLayout\">\n <div class=\"row mlr-0 w-100\" *ngIf=\"data?.content?.inputText?.length\" [id]=\"data?.id\"\n [simpoAnimation]=\"style?.animation\">\n <div *ngFor=\"let text of data?.content?.inputText\">\n <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\" *ngIf=\"edit || text.value\">\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n\n <div id=\"carouselExampleCaptions\" class=\"carousel slide\" [simpoLayout]=\"style?.layout\"\n [ngClass]=\"{'mb-0 px-0 py-0': style?.fullWidth, 'mb-md-1 mb-sm-0 mb-lg-1': !style?.fullWidth}\">\n <div class=\"carousel-inner\">\n <!-- data-bs-ride=\"carousel\" -->\n <div class=\"carousel-item\" *ngFor=\"let img of content?.listItem?.data; let i = index\"\n [class.active]=\"i === 0\">\n <div class=\"row m-0\">\n <div class=\"col d-flex p-0\" *ngIf=\"screenWidth >= 475\">\n <!-- <img loading=\"lazy\" class=\"d-block position-relative\" style=\"width: 20%; left: -20px\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\n <img loading=\"lazy\"\n [ngClass]=\"{'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\"\n *ngIf=\"!style?.fullWidth\" [simpoImageDirective]=\"style?.image\"\n class=\"d-block position-relative blur\"\n style=\"object-fit: cover !important;width: 100%;max-width: 20%; left: -20px\"\n [src]=\"getPrevImage(i)?.url\" [alt]=\"getPrevImage(i)?.altText\" [simpoCorner]=\"style?.corners\"\n [id]=\"data?.id\" [simpoObjectPosition]=\"getPrevImage(i)?.position\" loading=\"lazy\"\n [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n <img loading=\"lazy\"\n [ngClass]=\"{'full-width-image': style?.fullWidth, 'not-full-width': !style?.fullWidth, 'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\"\n [simpoImageDirective]=\"style?.image\" class=\"d-block image-height-80vh\"\n [class]=\"data?.id+img.image.id\" [src]=\"img.image.url\" [alt]=\"img.image.altText\"\n [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"\n loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n <!-- <img loading=\"lazy\" class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\n <img loading=\"lazy\"\n [ngClass]=\"{'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\"\n *ngIf=\"!style?.fullWidth\" [simpoImageDirective]=\"style?.image\"\n class=\"d-block position-relative blur\"\n style=\"object-fit: cover !important;width: 100%; max-width: 20%;right: -20px;\"\n [src]=\"getNextImage(i)?.url\" [alt]=\"getNextImage(i)?.altText\" [simpoCorner]=\"style?.corners\"\n [id]=\"data?.id\" [simpoObjectPosition]=\"getNextImage(i)?.position\" loading=\"lazy\"\n [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n </div>\n <div class=\"col d-flex p-0\" *ngIf=\"screenWidth < 475\">\n <img loading=\"lazy\" class=\"d-block w-100 image-height-40vh\" [class]=\"data?.id+img.image.id\"\n [src]=\"img.image.url\" [alt]=\"img.image.altText\" [id]=\"data?.id\"\n [simpoObjectPosition]=\"img?.image?.position\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\n [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n </div>\n </div>\n </div>\n </div>\n <a class=\"carousel-control-prev\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"prev\">\n <span class=\"carousel-control-prev-icon previous-icon d-flex align-items-center justify-content-center\" aria-hidden=\"true\">\n <mat-icon class=\"icon d-flex align-items-center justify-content-center\">keyboard_arrow_left</mat-icon>\n </span>\n <span class=\"sr-only\">Previous</span>\n\n </a>\n <a class=\"carousel-control-next\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"next\">\n <span class=\"carousel-control-next-icon previous-icon d-flex align-items-center justify-content-center\" aria-hidden=\"true\">\n <mat-icon class=\"icon d-flex align-items-center justify-content-center\">keyboard_arrow_right</mat-icon>\n </span>\n <span class=\"sr-only\">Next</span>\n\n </a>\n </div>\n </div>\n </div>\n\n </div>\n <ng-container *ngIf=\"style?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n</section>\n", styles: [".mb-1{margin-bottom:1.5rem!important}.previous-icon{width:65px;height:65px}.image-height-40vh{height:40vh}.full-width-image{width:100%;height:70vh}.previous-icon{background:#fff;border-radius:50%}.not-full-width{width:60%}.icon{color:#000!important;font-size:40px!important}.image-height-content{height:70vh}.image-height-screen{height:calc(90vh + -0px);min-height:0px!important}.image-screen{height:calc(110vh + -0px);min-height:0px!important}.img-screen-notext{height:calc(90vh + -0px);min-height:0px!important}.btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.blur{filter:blur(5px)}@media only screen and (max-width: 475px){.previous-icon{width:100%;height:45px!important}.image-height-40vh{padding:0}}.mlr-0{margin-left:0;margin-right:0}li{list-style:none}.caratlane-indicator{display:flex;align-items:center;justify-content:center;background:#1e1f21b3;border-radius:18px;min-width:50px;height:32px;padding:0 16px;font-size:1rem;font-weight:600;color:#fff;margin:18px auto 0;box-shadow:0 2px 8px #151d481a;letter-spacing:1px}.caratlane-indicator .current{font-weight:700;font-size:1rem;color:#fff}.caratlane-indicator .divider,.caratlane-indicator .total{font-weight:500;color:#fff;opacity:.9;margin-left:2px}.caratlane-indicator{position:absolute;bottom:20px;left:50%;transform:translate(-50%);background:#0009;color:#fff;padding:8px 16px;border-radius:20px;font-size:14px;font-weight:500;z-index:10;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);min-width:45px;text-align:center}@media (max-width: 768px){.caratlane-indicator{bottom:15px;padding:6px 12px;font-size:12px}}\n"] }]
5706
5767
  }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
5707
5768
  type: Input
5708
5769
  }], index: [{
@@ -5965,7 +6026,7 @@ class ServiceSectionComponent extends BaseSection {
5965
6026
  }, 100);
5966
6027
  }
5967
6028
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ServiceSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
5968
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ServiceSectionComponent, isStandalone: true, selector: "simpo-service-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\n [attr.style]=\"customClass\">\n <div [spacingAround]=\"stylesLayout\">\n <div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.corners\">\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\n <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\n [simpoLayout]=\"style?.layout\">\n <div class=\"w-100\" *ngFor=\"let text of data?.content?.inputText\">\n <div [simpoContentTitleSpace]=\"headingSpace\"\n [ngClass]=\"text.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\n [class.row-scroll]=\"style?.direction === 'ROW'\" #container>\n <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\n *ngFor=\"let service of content?.listItem?.data\">\n <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\n <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-below-image-card>\n </ng-container>\n <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\n <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-top-of-image-card>\n </ng-container>\n <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\n <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-covering-image-card>\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display d-flex mt-3 gap-2\"\n [simpoContainerAlignment]=\"stylesLayout\">\n <div *ngFor=\"let button of data?.action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n\n <ng-container *ngIf=\"style?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n</section>", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.row-scroll{flex-wrap:nowrap!important;width:100%;overflow-x:scroll}.button-display{display:flex;flex-wrap:wrap;gap:10px}@media screen and (min-width: 760px){.cards{padding-bottom:24px;margin-bottom:10px}}@media screen and (max-width: 475px){.cards{padding:5px 8px 10px!important}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: BelowImageCardComponent, selector: "simpo-below-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit"] }, { kind: "component", type: TopOfImageCardComponent, selector: "simpo-top-of-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit"] }, { kind: "component", type: CoveringImageCardComponent, selector: "simpo-covering-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
6029
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ServiceSectionComponent, isStandalone: true, selector: "simpo-service-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\n [attr.style]=\"customClass\">\n <div [spacingAround]=\"stylesLayout\">\n <div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.corners\">\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\n <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\n [simpoLayout]=\"style?.layout\">\n <div class=\"w-100\" *ngFor=\"let text of data?.content?.inputText\">\n <div [simpoContentTitleSpace]=\"headingSpace\"\n [ngClass]=\"text.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\n [class.row-scroll]=\"style?.direction === 'ROW'\" #container>\n <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\n *ngFor=\"let service of content?.listItem?.data\">\n <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\n <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-below-image-card>\n </ng-container>\n <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\n <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-top-of-image-card>\n </ng-container>\n <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\n <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-covering-image-card>\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display d-flex mt-3 gap-2\"\n [simpoContainerAlignment]=\"stylesLayout\">\n <div *ngFor=\"let button of data?.action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n\n <ng-container *ngIf=\"style?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n</section>", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.row-scroll{flex-wrap:nowrap!important;width:100%;overflow-x:scroll}.button-display{display:flex;flex-wrap:wrap;gap:10px}@media screen and (min-width: 760px){.cards{padding-bottom:24px;margin-bottom:10px}}@media screen and (max-width: 475px){.cards{padding:5px 8px 10px!important}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: BelowImageCardComponent, selector: "simpo-below-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit"] }, { kind: "component", type: TopOfImageCardComponent, selector: "simpo-top-of-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit"] }, { kind: "component", type: CoveringImageCardComponent, selector: "simpo-covering-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
5969
6030
  //directive
5970
6031
  ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }] }); }
5971
6032
  }
@@ -5999,7 +6060,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
5999
6060
  SpacingHorizontalDirective,
6000
6061
  SpacingAroundDirective,
6001
6062
  SimpoContainerAligment
6002
- ], template: "<section [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\n [attr.style]=\"customClass\">\n <div [spacingAround]=\"stylesLayout\">\n <div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.corners\">\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\n <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\n [simpoLayout]=\"style?.layout\">\n <div class=\"w-100\" *ngFor=\"let text of data?.content?.inputText\">\n <div [simpoContentTitleSpace]=\"headingSpace\"\n [ngClass]=\"text.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\n [class.row-scroll]=\"style?.direction === 'ROW'\" #container>\n <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\n *ngFor=\"let service of content?.listItem?.data\">\n <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\n <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-below-image-card>\n </ng-container>\n <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\n <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-top-of-image-card>\n </ng-container>\n <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\n <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-covering-image-card>\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display d-flex mt-3 gap-2\"\n [simpoContainerAlignment]=\"stylesLayout\">\n <div *ngFor=\"let button of data?.action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n\n <ng-container *ngIf=\"style?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n</section>", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.row-scroll{flex-wrap:nowrap!important;width:100%;overflow-x:scroll}.button-display{display:flex;flex-wrap:wrap;gap:10px}@media screen and (min-width: 760px){.cards{padding-bottom:24px;margin-bottom:10px}}@media screen and (max-width: 475px){.cards{padding:5px 8px 10px!important}}\n"] }]
6063
+ ], template: "<section [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\n [attr.style]=\"customClass\">\n <div [spacingAround]=\"stylesLayout\">\n <div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.corners\">\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\n <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\n [simpoLayout]=\"style?.layout\">\n <div class=\"w-100\" *ngFor=\"let text of data?.content?.inputText\">\n <div [simpoContentTitleSpace]=\"headingSpace\"\n [ngClass]=\"text.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\n [class.row-scroll]=\"style?.direction === 'ROW'\" #container>\n <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\n *ngFor=\"let service of content?.listItem?.data\">\n <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\n <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-below-image-card>\n </ng-container>\n <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\n <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-top-of-image-card>\n </ng-container>\n <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\n <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-covering-image-card>\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display d-flex mt-3 gap-2\"\n [simpoContainerAlignment]=\"stylesLayout\">\n <div *ngFor=\"let button of data?.action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n\n <ng-container *ngIf=\"style?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n</section>", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.row-scroll{flex-wrap:nowrap!important;width:100%;overflow-x:scroll}.button-display{display:flex;flex-wrap:wrap;gap:10px}@media screen and (min-width: 760px){.cards{padding-bottom:24px;margin-bottom:10px}}@media screen and (max-width: 475px){.cards{padding:5px 8px 10px!important}}\n"] }]
6003
6064
  }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
6004
6065
  type: Input
6005
6066
  }], index: [{
@@ -6577,13 +6638,14 @@ class checkItemAlreadyAdded {
6577
6638
  class RestService {
6578
6639
  constructor(http,
6579
6640
  // private readonly eventService: EventsService,
6580
- BASE_URL, ECOMMERCE_URL, CMIS_URL, cookieService, storage) {
6641
+ BASE_URL, ECOMMERCE_URL, CMIS_URL, cookieService, storage, PASSBOOK_URL) {
6581
6642
  this.http = http;
6582
6643
  this.BASE_URL = BASE_URL;
6583
6644
  this.ECOMMERCE_URL = ECOMMERCE_URL;
6584
6645
  this.CMIS_URL = CMIS_URL;
6585
6646
  this.cookieService = cookieService;
6586
6647
  this.storage = storage;
6648
+ this.PASSBOOK_URL = PASSBOOK_URL;
6587
6649
  // private BASE_URL: string = "https://dev-api.simpo.ai/";
6588
6650
  // private ECOMMERCE_URL: string = "https://dev-ecommerce.simpo.ai/";
6589
6651
  // private CMIS_URL: string = "https://api-cmis.tejsoft.com/"; //production
@@ -6592,7 +6654,6 @@ class RestService {
6592
6654
  this.environmentTypeSubscriber = null;
6593
6655
  this.isJewellery = false;
6594
6656
  this.orraBaseUrl = 'https://stageapi-orra.letsmobility.com/';
6595
- this.passBookUrl = "https://prod-passbook.simpo.ai/";
6596
6657
  // this.environmentTypeSubscriber = this.eventService.environmentType.subscribe((response) => {
6597
6658
  // if (response == "DEV") {
6598
6659
  // this.BASE_URL = "https://dev-api.simpo.ai/";
@@ -6608,6 +6669,7 @@ class RestService {
6608
6669
  // }
6609
6670
  // })
6610
6671
  }
6672
+ // passBookUrl: string = "https://prod-passbook.simpo.ai/";
6611
6673
  getBusinessDetails() {
6612
6674
  // this.businessDetails = localStorage.getItem("bDetails");
6613
6675
  // if(this.businessDetails != null) {
@@ -6639,13 +6701,13 @@ class RestService {
6639
6701
  const headers = new HttpHeaders({
6640
6702
  'Authorization': `Bearer ${token}`
6641
6703
  });
6642
- return this.http.post(this.passBookUrl + `passbook/manual/payment/status?paymentOrderId=${orderId}`, {}, { headers: headers });
6704
+ return this.http.post(this.PASSBOOK_URL + `passbook/manual/payment/status?paymentOrderId=${orderId}`, {}, { headers: headers });
6643
6705
  }
6644
6706
  getProductBySelectedCategory(categoryId) {
6645
6707
  return this.http.get(this.BASE_URL + `ecommerce/product/${categoryId}`);
6646
6708
  }
6647
6709
  getAllSchemes(userId, storeId) {
6648
- return this.http.get(this.passBookUrl + `ext/connect/simpo/user?userId=${userId}&storeId=${storeId}`);
6710
+ return this.http.get(this.PASSBOOK_URL + `ext/connect/simpo/user?userId=${userId}&storeId=${storeId}`);
6649
6711
  }
6650
6712
  getAllRedemptionSchemes() {
6651
6713
  return this.http.get(this.orraBaseUrl + `passBook/redemption/amount/check?userCode=C_000313885`);
@@ -7006,10 +7068,10 @@ class RestService {
7006
7068
  return map;
7007
7069
  }
7008
7070
  generateToken(bId, userId) {
7009
- return this.http.post(this.passBookUrl + `ext/connect/simpo/token?businessId=${bId}&userId=${userId}&userType=EXTERNAL_USER`, {});
7071
+ return this.http.post(this.PASSBOOK_URL + `ext/connect/simpo/token?businessId=${bId}&userId=${userId}&userType=EXTERNAL_USER`, {});
7010
7072
  }
7011
7073
  getAllEnrolledSchemes(payload) {
7012
- return this.http.put(this.passBookUrl + 'ext/connect/simpo/scheme/list', payload);
7074
+ return this.http.put(this.PASSBOOK_URL + 'ext/connect/simpo/scheme/list', payload);
7013
7075
  }
7014
7076
  enrollScheme(payload, checkCharges) {
7015
7077
  const token = this.getToken();
@@ -7017,10 +7079,10 @@ class RestService {
7017
7079
  'Authorization': `Bearer ${token}`
7018
7080
  });
7019
7081
  if (checkCharges) {
7020
- return this.http.post(this.passBookUrl + 'passbook/cart/initiate/payment?manualPay=true', payload, { headers: headers });
7082
+ return this.http.post(this.PASSBOOK_URL + 'passbook/cart/initiate/payment?manualPay=true', payload, { headers: headers });
7021
7083
  }
7022
7084
  else {
7023
- return this.http.post(this.passBookUrl + 'passbook/initiate/payment?manualPay=true', payload, { headers: headers });
7085
+ return this.http.post(this.PASSBOOK_URL + 'passbook/initiate/payment?manualPay=true', payload, { headers: headers });
7024
7086
  }
7025
7087
  }
7026
7088
  getBenefitSlab(passbookId) {
@@ -7028,7 +7090,7 @@ class RestService {
7028
7090
  const headers = new HttpHeaders({
7029
7091
  'Authorization': `Bearer ${token}`
7030
7092
  });
7031
- return this.http.post(this.passBookUrl + `passbook/benefit/percentages?passbookId=${passbookId}`, {}, { headers: headers });
7093
+ return this.http.post(this.PASSBOOK_URL + `passbook/benefit/percentages?passbookId=${passbookId}`, {}, { headers: headers });
7032
7094
  }
7033
7095
  getAllStaffList() {
7034
7096
  return this.http.get(this.BASE_URL + `staff/staff/list/${localStorage.getItem('businessId')}?isPagination=false`);
@@ -7038,7 +7100,7 @@ class RestService {
7038
7100
  const headers = new HttpHeaders({
7039
7101
  'Authorization': `Bearer ${token}`
7040
7102
  });
7041
- return this.http.put(this.passBookUrl + `passbook/request/redemption?passBookId=${passbookId}`, {}, { headers: headers });
7103
+ return this.http.put(this.PASSBOOK_URL + `passbook/request/redemption?passBookId=${passbookId}`, {}, { headers: headers });
7042
7104
  }
7043
7105
  PassbookAppStatus(bId) {
7044
7106
  return this.http.get(this.BASE_URL + `app/app/check-app?businessId=${bId}&appName=Passbook`);
@@ -7048,7 +7110,7 @@ class RestService {
7048
7110
  const headers = new HttpHeaders({
7049
7111
  'Authorization': `Bearer ${token}`
7050
7112
  });
7051
- return this.http.get(this.passBookUrl + `passbook/payment/dues?page=0&size=1000&businessId=${bId}&userId=${userId}`, { headers: headers });
7113
+ return this.http.get(this.PASSBOOK_URL + `passbook/payment/dues?page=0&size=1000&businessId=${bId}&userId=${userId}`, { headers: headers });
7052
7114
  }
7053
7115
  getToken() {
7054
7116
  let token = this.cookieService.get('passBookToken');
@@ -7059,15 +7121,15 @@ class RestService {
7059
7121
  const headers = new HttpHeaders({
7060
7122
  'Authorization': `Bearer ${token}`
7061
7123
  });
7062
- return this.http.put(this.passBookUrl + `dashboard/v3/transactions/page`, payload, { headers: headers });
7124
+ return this.http.put(this.PASSBOOK_URL + `dashboard/v3/transactions/page`, payload, { headers: headers });
7063
7125
  }
7064
7126
  getSchemeDetails(schemeId) {
7065
- return this.http.post(this.passBookUrl + `ext/connect/simpo/get/scheme?id=${schemeId}`, {});
7127
+ return this.http.post(this.PASSBOOK_URL + `ext/connect/simpo/get/scheme?id=${schemeId}`, {});
7066
7128
  }
7067
7129
  getMetalPrice(storeId) {
7068
- return this.http.get(this.passBookUrl + `ext/connect/simpo/metal/prices?id=${storeId}`);
7130
+ return this.http.get(this.PASSBOOK_URL + `ext/connect/simpo/metal/prices?id=${storeId}`);
7069
7131
  }
7070
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestService, deps: [{ token: i1.HttpClient }, { token: API_URL }, { token: ECOMMERCE_URL }, { token: CMIS_URL }, { token: i2$3.CookieService }, { token: LOCAL_STORAGE }], target: i0.ɵɵFactoryTarget.Injectable }); }
7132
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestService, deps: [{ token: i1.HttpClient }, { token: API_URL }, { token: ECOMMERCE_URL }, { token: CMIS_URL }, { token: i2$3.CookieService }, { token: LOCAL_STORAGE }, { token: PASSBOOK_URL }], target: i0.ɵɵFactoryTarget.Injectable }); }
7071
7133
  static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestService, providedIn: 'root' }); }
7072
7134
  }
7073
7135
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestService, decorators: [{
@@ -7087,6 +7149,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
7087
7149
  }] }, { type: i2$3.CookieService }, { type: undefined, decorators: [{
7088
7150
  type: Inject,
7089
7151
  args: [LOCAL_STORAGE]
7152
+ }] }, { type: undefined, decorators: [{
7153
+ type: Inject,
7154
+ args: [PASSBOOK_URL]
7090
7155
  }] }] });
7091
7156
 
7092
7157
  class Cart {
@@ -9732,32 +9797,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
9732
9797
  type: Input
9733
9798
  }] } });
9734
9799
 
9735
- class SpacingDirective {
9736
- constructor(el) {
9737
- this.el = el;
9738
- }
9739
- ngOnChanges() {
9740
- this.applySpacing();
9741
- }
9742
- applySpacing() {
9743
- if (this.spacing) {
9744
- applySpacing(this.el.nativeElement, this.spacing);
9745
- }
9746
- }
9747
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpacingDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
9748
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: SpacingDirective, isStandalone: true, selector: "[simpoSpacing]", inputs: { spacing: ["simpoSpacing", "spacing"] }, usesOnChanges: true, ngImport: i0 }); }
9749
- }
9750
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpacingDirective, decorators: [{
9751
- type: Directive,
9752
- args: [{
9753
- selector: '[simpoSpacing]',
9754
- standalone: true,
9755
- }]
9756
- }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { spacing: [{
9757
- type: Input,
9758
- args: ['simpoSpacing']
9759
- }] } });
9760
-
9761
9800
  class HeightDirective {
9762
9801
  constructor(el) {
9763
9802
  this.el = el;
@@ -11836,7 +11875,6 @@ class LogoShowcaseComponent extends BaseSection {
11836
11875
  this.logoSpeedClass = this.styles?.logoSpeed || logoSpeed.Normal;
11837
11876
  this.logoDirectionClass = this.styles?.logoDirection || logoDirection.Left;
11838
11877
  this.isFullWidth = this.styles?.fullWidth || true;
11839
- console.log(this.content);
11840
11878
  }
11841
11879
  get stylesLayout() {
11842
11880
  return { ...this.styles?.layout };
@@ -11844,13 +11882,13 @@ class LogoShowcaseComponent extends BaseSection {
11844
11882
  get animationDuration() {
11845
11883
  switch (this.styles?.logoSpeed) {
11846
11884
  case '4s':
11847
- return logoSpeed.Slow;
11885
+ return '6s';
11848
11886
  case '3s':
11849
- return logoSpeed.Normal;
11887
+ return '5s';
11850
11888
  case '2s':
11851
- return logoSpeed.Fast;
11889
+ return '4s';
11852
11890
  case '1s':
11853
- return logoSpeed.VeryFast;
11891
+ return '3s';
11854
11892
  }
11855
11893
  return logoSpeed.Normal;
11856
11894
  }
@@ -11892,11 +11930,11 @@ class LogoShowcaseComponent extends BaseSection {
11892
11930
  }
11893
11931
  }
11894
11932
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LogoShowcaseComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
11895
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LogoShowcaseComponent, isStandalone: true, selector: "simpo-logo-showcase", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"styles?.showCaseType==='Grid'\">\n <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\n [attr.style]=\"customClass\">\n <div class=\"py-3 w-100 \" [simpoBackground]=\"styles?.background\"\n [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\n #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\n [spacingHorizontal]=\"stylesLayout\">\n <div class=\"row g-5 gridtext \" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\n *ngIf=\"styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'\"\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\">\n\n <div class=\"col-6 gridimg w-full mb-20 content-side\" [id]=\"data?.id\"\n [simpoContentAlignment]=\"styles?.contentAlignment\">\n <div *ngFor=\"let item of content?.inputText\">\n <ng-container *ngIf=\"edit || item.value\">\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </ng-container>\n </div>\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\n <div *ngFor=\"let button of data?.action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\n [color]=\"data?.styles?.background?.accentColor\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-wrap flex-1 width-max\">\n <div class=\"slider flex overflow-hidden w-full\">\n <div class=\"slider-track\" *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\n <ng-container\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n class=\"logo-img d-flex justify-content-center align-items-center\"\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\n [showIcon]=\"content?.display?.showIcon\">\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"slider-track w-full\"\n *ngIf=\"!content?.display?.showIcon && content?.display?.showText\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\n *ngFor=\"let item of content?.listItem?.data\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n <div class=\"slider-track w-full\"\n *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides d-flex\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\n *ngFor=\"let item of content?.listItem?.data\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic','flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\n <ng-container\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n class=\"logo-img d-flex justify-content-center align-items-center\"\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\n [showIcon]=\"content?.display?.showIcon\">\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\n </div>\n </ng-container>\n\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\n *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\n <div class=\"px-5 mb-20 content-side\" [id]=\"data?.id\"\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\n <div *ngFor=\"let item of content?.inputText\">\n <ng-container *ngIf=\"edit || item.value\">\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </ng-container>\n </div>\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\n <div *ngFor=\"let button of data?.action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\n [color]=\"data?.styles?.background?.accentColor\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n </div>\n </div>\n <div class=\"col-lg-12 flex flex-wrap items-center w-full gap-2 justify-center\">\n <!-- flex flex-wrap items-center w-full gap-2 justify-center -->\n <div class=\"slider flex overflow-hidden w-full\">\n <div class=\"slider-track w-full\"\n *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\n *ngFor=\"let item of content?.listItem?.data; let i = index\">\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\n <ng-container\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n class=\"logo-img d-flex justify-content-center align-items-center\"\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\n [showIcon]=\"content?.display?.showIcon\">\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"slider-track w-full\"\n *ngIf=\"!content?.display?.showIcon && content?.display?.showText\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\n *ngFor=\"let item of content?.listItem?.data\">\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n <div class=\"slider-track w-full\"\n *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides d-flex align-items-center\" [simpoCorner]=\"styles?.corners\"\n *ngFor=\"let item of content?.listItem?.data\" [id]=\"data?.id\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\n <ng-container\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n class=\"logo-img d-flex justify-content-center align-items-center\"\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\n [showIcon]=\"content?.display?.showIcon\">\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\n </div>\n </ng-container>\n <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText[0].value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n </div>\n <!-- </div> -->\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n </div>\n</div>\n\n<div *ngIf=\"styles?.showCaseType==='Carousal'\">\n <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\n\n <div class=\"w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\n [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\"\n [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [simpoBackground]=\"styles?.background\">\n <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\n [simpoLayout]=\"styles?.layout\">\n <div class=\"mainsec content-side\" [id]=\"data?.id\"\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\n\n <div *ngFor=\"let item of content?.inputText\">\n <ng-container *ngIf=\"edit || item.value\">\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </ng-container>\n </div>\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"gap-2 d-md-flex mt-15\" [ngClass]=\"[\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\n ]\">\n <div *ngFor=\"let button of data?.action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\n [color]=\"data?.styles?.background?.accentColor\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n </div>\n\n <div [ngClass]=\"{\n 'fullwidth flex-1 inline-edit ': styles?.fullWidth,\n 'nofullwidth flex-1 inline-edit ': !styles?.fullWidth\n }\">\n <div class=\"masking\">\n\n <div class=\"slider animation \" [style.animationDuration]=\"animationDuration\"\n [style.animationDirection]=\"animationDirection\">\n <div class=\"slider-track2\"\n *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\n <div class=\"slides2\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\"\n [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\n [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\n <ng-container\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n class=\"logo-img d-flex justify-content-center align-items-center\"\n [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n [sectionId]=\"data?.id\" [showIcon]=\"content?.display?.showIcon\">\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"slider-track2\"\n *ngIf=\"content?.display?.showText && !content?.display?.showIcon\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\n *ngFor=\"let item of content?.listItem?.data\">\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n <div class=\"slider-track2 d-flex w-full\"\n *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides d-flex\" [simpoCorner]=\"styles?.corners\"\n *ngFor=\"let item of content?.listItem?.data\" [id]=\"data?.id\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'align-items-start': styles?.layout?.align === 'left', 'align-items-center': styles?.layout?.align === 'center', 'align-items-end': styles?.layout?.align === 'right' , 'flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\"\n [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\n [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\n <ng-container\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n class=\"logo-img d-flex justify-content-center align-items-center\"\n [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n [sectionId]=\"data?.id\" [showIcon]=\"content?.display?.showIcon\">\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\n </div>\n </ng-container>\n <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText[0].value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n </div>\n</div>", styles: [".masking{mask:linear-gradient(90deg,transparent,white 5%,white 95%,transparent);overflow:hidden;width:100%}.sliderdad{width:100%;display:flex}@media (min-width: 860px){.nofullwidth{overflow:hidden}}.slider-track2{min-width:max-content;translate:none;rotate:none;scale:none;gap:1rem;justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex}.mainsec{gap:2rem;flex-direction:column;display:flex}.slider-track2.logotype-boxed{gap:1rem}.slider-track2.logotype-basic{gap:5rem}.slides2.logotype-boxed{padding:1.5rem 1.25rem;--tw-bg-opacity: .05;flex-shrink:0;width:auto;height:auto;display:flex;position:relative;box-shadow:#0000002e 0 2px 4px;margin:10px 5px}.slides2.logotype-basic{flex-shrink:0;width:auto;height:auto;display:flex;position:relative}.slides2.img{height:100%;max-width:100%;border-style:solid}@keyframes scrollLeft{0%{transform:translateZ(0)}to{transform:translate3d(-100%,0,0)}}@keyframes scrollRight{0%{transform:translate3d(-100%,0,0)}to{transform:translateZ(0)}}.animation{animation:scrollLeft linear infinite}.slider-track{justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex;gap:10px}.slider-track.logotype-basic{gap:5rem}.slider-track.logotype-boxed{gap:1rem}.slides.logotype-basic{flex-shrink:0;width:auto;min-height:5rem;height:auto;display:flex;position:relative}.slides.logotype-boxed{padding:1.5rem .625rem;--tw-bg-opacity: .05;box-shadow:#0000002e 0 2px 4px;width:auto;height:auto;display:flex;align-items:center;margin:10px 5px}.width-max{width:max-content;max-width:50%}.slides.texttype-boxed{padding:1.5rem .625rem;justify-content:center;width:auto;display:flex;position:relative;box-shadow:#0000002e 0 2px 4px;margin:10px 5px;align-items:center}.slides.texttype-boxed:hover{--tw-bg-opacity: .05;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.slides.img{border-style:solid;max-width:100%;height:100%}@media only screen and (max-width: 500px){.col-xxl-8{padding-left:0!important;padding-right:0!important}.mainsec{padding-right:2rem!important;padding-left:2rem!important}.col-7{min-width:50%;width:100%;max-width:100%}.col-5{width:100%}.slides img{width:88%}.gridtext{flex-direction:column!important}.gridtext .gridimg{width:100%!important}.gridtext .width-max{max-width:100%!important}}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-20{margin-top:20px}.mb-20{margin-bottom:20px}.row{margin-left:0;margin-right:0}\n"], dependencies: [{ kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: IconDirectiveDirective, selector: "[simpoIconDirective]", inputs: ["simpoIconDirective", "iconId"] }] }); }
11933
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LogoShowcaseComponent, isStandalone: true, selector: "simpo-logo-showcase", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"styles?.showCaseType==='Grid'\">\n <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\n [attr.style]=\"customClass\">\n <div class=\"py-3 w-100 \" [simpoBackground]=\"styles?.background\"\n [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\n #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\n [spacingHorizontal]=\"stylesLayout\">\n <div class=\"row g-5 gridtext \" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\n *ngIf=\"styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'\"\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\">\n\n <div class=\"col-6 gridimg w-full mb-20 content-side\" [id]=\"data?.id\"\n [simpoContentAlignment]=\"styles?.contentAlignment\">\n <div *ngFor=\"let item of content?.inputText\">\n <ng-container *ngIf=\"edit || item.value\">\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </ng-container>\n </div>\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\n <div *ngFor=\"let button of data?.action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\n [color]=\"data?.styles?.background?.accentColor\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-wrap flex-1 width-max\">\n <div class=\"slider flex w-full\">\n <!-- overflow-hidden -->\n <div class=\"slider-track\" *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\"\n [showIcon]=\"content?.display?.showIcon\">\n <ng-container\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n class=\"logo-img d-flex justify-content-center align-items-center\"\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\n [showIcon]=\"content?.display?.showIcon\">\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"slider-track w-full\"\n *ngIf=\"!content?.display?.showIcon && content?.display?.showText\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\n *ngFor=\"let item of content?.listItem?.data\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n <div class=\"slider-track w-full\"\n *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides d-flex\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\n *ngFor=\"let item of content?.listItem?.data\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic','flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\"\n [showIcon]=\"content?.display?.showIcon\">\n <ng-container\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n class=\"logo-img d-flex justify-content-center align-items-center\"\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\n [showIcon]=\"content?.display?.showIcon\">\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\n </div>\n </ng-container>\n\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\n *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\n <div class=\"px-5 mb-20 content-side\" [id]=\"data?.id\"\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\n <div *ngFor=\"let item of content?.inputText\">\n <ng-container *ngIf=\"edit || item.value\">\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </ng-container>\n </div>\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\n <div *ngFor=\"let button of data?.action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\n [color]=\"data?.styles?.background?.accentColor\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n </div>\n </div>\n <div class=\"col-lg-12 flex flex-wrap items-center w-full gap-2 justify-center\">\n <!-- flex flex-wrap items-center w-full gap-2 justify-center -->\n <div class=\"slider flex w-full\">\n <!-- overflow-hidden -->\n <div class=\"slider-track w-full\"\n *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\n *ngFor=\"let item of content?.listItem?.data; let i = index\">\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\"\n [showIcon]=\"content?.display?.showIcon\">\n <ng-container\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n class=\"logo-img d-flex justify-content-center align-items-center\"\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\n [showIcon]=\"content?.display?.showIcon\">\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"slider-track w-full\"\n *ngIf=\"!content?.display?.showIcon && content?.display?.showText\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\n *ngFor=\"let item of content?.listItem?.data\">\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n <div class=\"slider-track w-full\"\n *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides d-flex align-items-center\" [simpoCorner]=\"styles?.corners\"\n *ngFor=\"let item of content?.listItem?.data\" [id]=\"data?.id\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\"\n [showIcon]=\"content?.display?.showIcon\">\n <ng-container\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n class=\"logo-img d-flex justify-content-center align-items-center\"\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\n [showIcon]=\"content?.display?.showIcon\">\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\n </div>\n </ng-container>\n <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText[0].value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n </div>\n <!-- </div> -->\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n </div>\n</div>\n\n<div *ngIf=\"styles?.showCaseType==='Carousal'\">\n <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\n\n <div class=\"w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\n [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\"\n [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [simpoBackground]=\"styles?.background\">\n <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\n [simpoLayout]=\"styles?.layout\">\n <div class=\"mainsec content-side\" [id]=\"data?.id\"\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\n\n <div *ngFor=\"let item of content?.inputText\">\n <ng-container *ngIf=\"edit || item.value\">\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </ng-container>\n </div>\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"gap-2 d-md-flex mt-15\" [ngClass]=\"[\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\n ]\">\n <div *ngFor=\"let button of data?.action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\n [color]=\"data?.styles?.background?.accentColor\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n </div>\n\n <div [ngClass]=\"{\n 'fullwidth flex-1 inline-edit ': styles?.fullWidth,\n 'nofullwidth flex-1 inline-edit ': !styles?.fullWidth\n }\">\n <div class=\"masking\">\n\n <div class=\"slider animation \" [style.animationDuration]=\"animationDuration\"\n [style.animationDirection]=\"animationDirection\">\n <div class=\"slider-track2\"\n *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\n <div class=\"slides2\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\"\n [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\n [class]=\"data?.id+(item?.icon?.id || '')\"\n [showIcon]=\"content?.display?.showIcon\">\n <ng-container\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n class=\"logo-img d-flex justify-content-center align-items-center\"\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n [sectionId]=\"data?.id\" [showIcon]=\"content?.display?.showIcon\">\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"slider-track2\"\n *ngIf=\"content?.display?.showText && !content?.display?.showIcon\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\n *ngFor=\"let item of content?.listItem?.data\">\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n <div class=\"slider-track2 d-flex w-full\"\n *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides d-flex\" [simpoCorner]=\"styles?.corners\"\n *ngFor=\"let item of content?.listItem?.data\" [id]=\"data?.id\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'align-items-start': styles?.layout?.align === 'left', 'align-items-center': styles?.layout?.align === 'center', 'align-items-end': styles?.layout?.align === 'right' , 'flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\"\n [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\n [class]=\"data?.id+(item?.icon?.id || '')\"\n [showIcon]=\"content?.display?.showIcon\">\n <ng-container\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n class=\"logo-img d-flex justify-content-center align-items-center\"\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n [sectionId]=\"data?.id\" [showIcon]=\"content?.display?.showIcon\">\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\n </div>\n </ng-container>\n <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText[0].value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n </div>\n</div>", styles: [".masking{mask:linear-gradient(90deg,transparent,white 5%,white 95%,transparent);overflow:hidden;width:100%}.sliderdad{width:100%;display:flex}@media (min-width: 860px){.nofullwidth{overflow:hidden}}.slider-track2{min-width:max-content;translate:none;rotate:none;scale:none;gap:1rem;justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex}.mainsec{gap:2rem;flex-direction:column;display:flex}.slider-track2.logotype-boxed{gap:1rem}.slider-track2.logotype-basic{gap:5rem}.slides2.logotype-boxed{padding:1.5rem 1.25rem;--tw-bg-opacity: .05;flex-shrink:0;width:auto;height:auto;display:flex;position:relative;box-shadow:#0000002e 0 2px 4px;margin:10px 5px}.slides2.logotype-basic{flex-shrink:0;width:auto;height:auto;display:flex;position:relative}.slides2.img{height:100%;max-width:100%;border-style:solid}@keyframes scrollLeft{0%{transform:translate3d(100%,0,0)}to{transform:translate3d(-100%,0,0)}}@keyframes scrollRight{0%{transform:translate3d(-100%,0,0)}to{transform:translate3d(100%,0,0)}}.animation{animation:scrollLeft linear infinite}.slider-track{justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex;gap:10px}.slider-track.logotype-basic{gap:5rem}.slider-track.logotype-boxed{gap:1rem}.slides.logotype-basic{flex-shrink:0;width:auto;min-height:5rem;height:auto;display:flex;position:relative}.slides.logotype-boxed{padding:1.5rem .625rem;--tw-bg-opacity: .05;box-shadow:#0000002e 0 2px 4px;width:auto;height:auto;display:flex;align-items:center;margin:10px 5px}.width-max{width:max-content;max-width:50%}.slides.texttype-boxed{padding:1.5rem .625rem;justify-content:center;width:auto;display:flex;position:relative;box-shadow:#0000002e 0 2px 4px;margin:10px 5px;align-items:center}.slides.texttype-boxed:hover{--tw-bg-opacity: .05;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.slides.img{border-style:solid;max-width:100%;height:100%}@media only screen and (max-width: 500px){.col-xxl-8{padding-left:0!important;padding-right:0!important}.mainsec{padding-right:2rem!important;padding-left:2rem!important}.col-7{min-width:50%;width:100%;max-width:100%}.col-5{width:100%}.slides img{width:88%}.gridtext{flex-direction:column!important}.gridtext .gridimg{width:100%!important}.gridtext .width-max{max-width:100%!important}}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-20{margin-top:20px}.mb-20{margin-bottom:20px}.row{margin-left:0;margin-right:0}\n"], dependencies: [{ kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: IconDirectiveDirective, selector: "[simpoIconDirective]", inputs: ["simpoIconDirective", "iconId"] }] }); }
11896
11934
  }
11897
11935
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LogoShowcaseComponent, decorators: [{
11898
11936
  type: Component,
11899
- args: [{ selector: 'simpo-logo-showcase', standalone: true, imports: [SimpoButtonComponent, SimpoElementsModule, SanitizeHtmlPipe, TextEditorComponent, SimpoComponentModule, CommonModule, MatGridListModule, AnimationDirective, BackgroundDirective, ContentFitDirective, BorderDirective, BannerContentFitDirective, ButtonDirectiveDirective, ColumnDirectiveDirective, ContainerFitDirective, CornerDirective, simpoConetenAlignmentDirective, SimpoFooterLayoutDirective, HoverDirective, ImageDirectiveDirective, OverlayDirective, PositionLayoutDirectiveDirective, TextBackgroundDirectiveDirective, SpacingHorizontalDirective, ObjectPositionDirective, ImageEditorDirective, IconDirectiveDirective], template: "<div *ngIf=\"styles?.showCaseType==='Grid'\">\n <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\n [attr.style]=\"customClass\">\n <div class=\"py-3 w-100 \" [simpoBackground]=\"styles?.background\"\n [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\n #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\n [spacingHorizontal]=\"stylesLayout\">\n <div class=\"row g-5 gridtext \" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\n *ngIf=\"styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'\"\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\">\n\n <div class=\"col-6 gridimg w-full mb-20 content-side\" [id]=\"data?.id\"\n [simpoContentAlignment]=\"styles?.contentAlignment\">\n <div *ngFor=\"let item of content?.inputText\">\n <ng-container *ngIf=\"edit || item.value\">\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </ng-container>\n </div>\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\n <div *ngFor=\"let button of data?.action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\n [color]=\"data?.styles?.background?.accentColor\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-wrap flex-1 width-max\">\n <div class=\"slider flex overflow-hidden w-full\">\n <div class=\"slider-track\" *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\n <ng-container\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n class=\"logo-img d-flex justify-content-center align-items-center\"\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\n [showIcon]=\"content?.display?.showIcon\">\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"slider-track w-full\"\n *ngIf=\"!content?.display?.showIcon && content?.display?.showText\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\n *ngFor=\"let item of content?.listItem?.data\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n <div class=\"slider-track w-full\"\n *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides d-flex\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\n *ngFor=\"let item of content?.listItem?.data\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic','flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\n <ng-container\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n class=\"logo-img d-flex justify-content-center align-items-center\"\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\n [showIcon]=\"content?.display?.showIcon\">\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\n </div>\n </ng-container>\n\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\n *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\n <div class=\"px-5 mb-20 content-side\" [id]=\"data?.id\"\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\n <div *ngFor=\"let item of content?.inputText\">\n <ng-container *ngIf=\"edit || item.value\">\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </ng-container>\n </div>\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\n <div *ngFor=\"let button of data?.action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\n [color]=\"data?.styles?.background?.accentColor\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n </div>\n </div>\n <div class=\"col-lg-12 flex flex-wrap items-center w-full gap-2 justify-center\">\n <!-- flex flex-wrap items-center w-full gap-2 justify-center -->\n <div class=\"slider flex overflow-hidden w-full\">\n <div class=\"slider-track w-full\"\n *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\n *ngFor=\"let item of content?.listItem?.data; let i = index\">\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\n <ng-container\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n class=\"logo-img d-flex justify-content-center align-items-center\"\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\n [showIcon]=\"content?.display?.showIcon\">\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"slider-track w-full\"\n *ngIf=\"!content?.display?.showIcon && content?.display?.showText\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\n *ngFor=\"let item of content?.listItem?.data\">\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n <div class=\"slider-track w-full\"\n *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides d-flex align-items-center\" [simpoCorner]=\"styles?.corners\"\n *ngFor=\"let item of content?.listItem?.data\" [id]=\"data?.id\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\n <ng-container\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n class=\"logo-img d-flex justify-content-center align-items-center\"\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\n [showIcon]=\"content?.display?.showIcon\">\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\n </div>\n </ng-container>\n <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText[0].value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n </div>\n <!-- </div> -->\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n </div>\n</div>\n\n<div *ngIf=\"styles?.showCaseType==='Carousal'\">\n <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\n\n <div class=\"w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\n [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\"\n [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [simpoBackground]=\"styles?.background\">\n <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\n [simpoLayout]=\"styles?.layout\">\n <div class=\"mainsec content-side\" [id]=\"data?.id\"\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\n\n <div *ngFor=\"let item of content?.inputText\">\n <ng-container *ngIf=\"edit || item.value\">\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </ng-container>\n </div>\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"gap-2 d-md-flex mt-15\" [ngClass]=\"[\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\n ]\">\n <div *ngFor=\"let button of data?.action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\n [color]=\"data?.styles?.background?.accentColor\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n </div>\n\n <div [ngClass]=\"{\n 'fullwidth flex-1 inline-edit ': styles?.fullWidth,\n 'nofullwidth flex-1 inline-edit ': !styles?.fullWidth\n }\">\n <div class=\"masking\">\n\n <div class=\"slider animation \" [style.animationDuration]=\"animationDuration\"\n [style.animationDirection]=\"animationDirection\">\n <div class=\"slider-track2\"\n *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\n <div class=\"slides2\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\"\n [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\n [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\n <ng-container\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n class=\"logo-img d-flex justify-content-center align-items-center\"\n [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n [sectionId]=\"data?.id\" [showIcon]=\"content?.display?.showIcon\">\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"slider-track2\"\n *ngIf=\"content?.display?.showText && !content?.display?.showIcon\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\n *ngFor=\"let item of content?.listItem?.data\">\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n <div class=\"slider-track2 d-flex w-full\"\n *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides d-flex\" [simpoCorner]=\"styles?.corners\"\n *ngFor=\"let item of content?.listItem?.data\" [id]=\"data?.id\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'align-items-start': styles?.layout?.align === 'left', 'align-items-center': styles?.layout?.align === 'center', 'align-items-end': styles?.layout?.align === 'right' , 'flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\"\n [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\n [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\n <ng-container\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n class=\"logo-img d-flex justify-content-center align-items-center\"\n [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n [sectionId]=\"data?.id\" [showIcon]=\"content?.display?.showIcon\">\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\n </div>\n </ng-container>\n <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText[0].value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n </div>\n</div>", styles: [".masking{mask:linear-gradient(90deg,transparent,white 5%,white 95%,transparent);overflow:hidden;width:100%}.sliderdad{width:100%;display:flex}@media (min-width: 860px){.nofullwidth{overflow:hidden}}.slider-track2{min-width:max-content;translate:none;rotate:none;scale:none;gap:1rem;justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex}.mainsec{gap:2rem;flex-direction:column;display:flex}.slider-track2.logotype-boxed{gap:1rem}.slider-track2.logotype-basic{gap:5rem}.slides2.logotype-boxed{padding:1.5rem 1.25rem;--tw-bg-opacity: .05;flex-shrink:0;width:auto;height:auto;display:flex;position:relative;box-shadow:#0000002e 0 2px 4px;margin:10px 5px}.slides2.logotype-basic{flex-shrink:0;width:auto;height:auto;display:flex;position:relative}.slides2.img{height:100%;max-width:100%;border-style:solid}@keyframes scrollLeft{0%{transform:translateZ(0)}to{transform:translate3d(-100%,0,0)}}@keyframes scrollRight{0%{transform:translate3d(-100%,0,0)}to{transform:translateZ(0)}}.animation{animation:scrollLeft linear infinite}.slider-track{justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex;gap:10px}.slider-track.logotype-basic{gap:5rem}.slider-track.logotype-boxed{gap:1rem}.slides.logotype-basic{flex-shrink:0;width:auto;min-height:5rem;height:auto;display:flex;position:relative}.slides.logotype-boxed{padding:1.5rem .625rem;--tw-bg-opacity: .05;box-shadow:#0000002e 0 2px 4px;width:auto;height:auto;display:flex;align-items:center;margin:10px 5px}.width-max{width:max-content;max-width:50%}.slides.texttype-boxed{padding:1.5rem .625rem;justify-content:center;width:auto;display:flex;position:relative;box-shadow:#0000002e 0 2px 4px;margin:10px 5px;align-items:center}.slides.texttype-boxed:hover{--tw-bg-opacity: .05;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.slides.img{border-style:solid;max-width:100%;height:100%}@media only screen and (max-width: 500px){.col-xxl-8{padding-left:0!important;padding-right:0!important}.mainsec{padding-right:2rem!important;padding-left:2rem!important}.col-7{min-width:50%;width:100%;max-width:100%}.col-5{width:100%}.slides img{width:88%}.gridtext{flex-direction:column!important}.gridtext .gridimg{width:100%!important}.gridtext .width-max{max-width:100%!important}}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-20{margin-top:20px}.mb-20{margin-bottom:20px}.row{margin-left:0;margin-right:0}\n"] }]
11937
+ args: [{ selector: 'simpo-logo-showcase', standalone: true, imports: [SimpoButtonComponent, SimpoElementsModule, TextEditorComponent, SimpoComponentModule, CommonModule, MatGridListModule, AnimationDirective, BackgroundDirective, ContentFitDirective, BorderDirective, BannerContentFitDirective, ButtonDirectiveDirective, ColumnDirectiveDirective, ContainerFitDirective, CornerDirective, simpoConetenAlignmentDirective, SimpoFooterLayoutDirective, HoverDirective, ImageDirectiveDirective, OverlayDirective, PositionLayoutDirectiveDirective, TextBackgroundDirectiveDirective, SpacingHorizontalDirective, ObjectPositionDirective, ImageEditorDirective, IconDirectiveDirective], template: "<div *ngIf=\"styles?.showCaseType==='Grid'\">\n <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\n [attr.style]=\"customClass\">\n <div class=\"py-3 w-100 \" [simpoBackground]=\"styles?.background\"\n [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\n #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\n [spacingHorizontal]=\"stylesLayout\">\n <div class=\"row g-5 gridtext \" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\n *ngIf=\"styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'\"\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\">\n\n <div class=\"col-6 gridimg w-full mb-20 content-side\" [id]=\"data?.id\"\n [simpoContentAlignment]=\"styles?.contentAlignment\">\n <div *ngFor=\"let item of content?.inputText\">\n <ng-container *ngIf=\"edit || item.value\">\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </ng-container>\n </div>\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\n <div *ngFor=\"let button of data?.action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\n [color]=\"data?.styles?.background?.accentColor\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n </div>\n </div>\n <div class=\"d-flex flex-wrap flex-1 width-max\">\n <div class=\"slider flex w-full\">\n <!-- overflow-hidden -->\n <div class=\"slider-track\" *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\"\n [showIcon]=\"content?.display?.showIcon\">\n <ng-container\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n class=\"logo-img d-flex justify-content-center align-items-center\"\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\n [showIcon]=\"content?.display?.showIcon\">\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"slider-track w-full\"\n *ngIf=\"!content?.display?.showIcon && content?.display?.showText\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\n *ngFor=\"let item of content?.listItem?.data\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n <div class=\"slider-track w-full\"\n *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides d-flex\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\n *ngFor=\"let item of content?.listItem?.data\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic','flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\"\n [showIcon]=\"content?.display?.showIcon\">\n <ng-container\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n class=\"logo-img d-flex justify-content-center align-items-center\"\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\n [showIcon]=\"content?.display?.showIcon\">\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\n </div>\n </ng-container>\n\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\n *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\n <div class=\"px-5 mb-20 content-side\" [id]=\"data?.id\"\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\n <div *ngFor=\"let item of content?.inputText\">\n <ng-container *ngIf=\"edit || item.value\">\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </ng-container>\n </div>\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\n <div *ngFor=\"let button of data?.action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\n [color]=\"data?.styles?.background?.accentColor\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n </div>\n </div>\n <div class=\"col-lg-12 flex flex-wrap items-center w-full gap-2 justify-center\">\n <!-- flex flex-wrap items-center w-full gap-2 justify-center -->\n <div class=\"slider flex w-full\">\n <!-- overflow-hidden -->\n <div class=\"slider-track w-full\"\n *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\n *ngFor=\"let item of content?.listItem?.data; let i = index\">\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\"\n [showIcon]=\"content?.display?.showIcon\">\n <ng-container\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n class=\"logo-img d-flex justify-content-center align-items-center\"\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\n [showIcon]=\"content?.display?.showIcon\">\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"slider-track w-full\"\n *ngIf=\"!content?.display?.showIcon && content?.display?.showText\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\n *ngFor=\"let item of content?.listItem?.data\">\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n <div class=\"slider-track w-full\"\n *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides d-flex align-items-center\" [simpoCorner]=\"styles?.corners\"\n *ngFor=\"let item of content?.listItem?.data\" [id]=\"data?.id\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\"\n [showIcon]=\"content?.display?.showIcon\">\n <ng-container\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n class=\"logo-img d-flex justify-content-center align-items-center\"\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\n [showIcon]=\"content?.display?.showIcon\">\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\n </div>\n </ng-container>\n <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText[0].value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n </div>\n <!-- </div> -->\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n </div>\n</div>\n\n<div *ngIf=\"styles?.showCaseType==='Carousal'\">\n <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\n\n <div class=\"w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\n [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\"\n [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [simpoBackground]=\"styles?.background\">\n <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\n [simpoLayout]=\"styles?.layout\">\n <div class=\"mainsec content-side\" [id]=\"data?.id\"\n [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\n\n <div *ngFor=\"let item of content?.inputText\">\n <ng-container *ngIf=\"edit || item.value\">\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </ng-container>\n </div>\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"gap-2 d-md-flex mt-15\" [ngClass]=\"[\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\n ]\">\n <div *ngFor=\"let button of data?.action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\n [color]=\"data?.styles?.background?.accentColor\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n </div>\n\n <div [ngClass]=\"{\n 'fullwidth flex-1 inline-edit ': styles?.fullWidth,\n 'nofullwidth flex-1 inline-edit ': !styles?.fullWidth\n }\">\n <div class=\"masking\">\n\n <div class=\"slider animation \" [style.animationDuration]=\"animationDuration\"\n [style.animationDirection]=\"animationDirection\">\n <div class=\"slider-track2\"\n *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\n <div class=\"slides2\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\n [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\n *ngFor=\"let item of content?.listItem?.data;let i = index\">\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\"\n [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\n [class]=\"data?.id+(item?.icon?.id || '')\"\n [showIcon]=\"content?.display?.showIcon\">\n <ng-container\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n class=\"logo-img d-flex justify-content-center align-items-center\"\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n [sectionId]=\"data?.id\" [showIcon]=\"content?.display?.showIcon\">\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"slider-track2\"\n *ngIf=\"content?.display?.showText && !content?.display?.showIcon\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\n *ngFor=\"let item of content?.listItem?.data\">\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n <div class=\"slider-track2 d-flex w-full\"\n *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\n [ngClass]=\"{'gap-0': styles?.removeGaps}\">\n <div class=\"slides d-flex\" [simpoCorner]=\"styles?.corners\"\n *ngFor=\"let item of content?.listItem?.data\" [id]=\"data?.id\"\n [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'align-items-start': styles?.layout?.align === 'left', 'align-items-center': styles?.layout?.align === 'center', 'align-items-end': styles?.layout?.align === 'right' , 'flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\n <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\n *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\"\n [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\n [class]=\"data?.id+(item?.icon?.id || '')\"\n [showIcon]=\"content?.display?.showIcon\">\n <ng-container\n *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\n <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\n [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\n class=\"logo-img d-flex justify-content-center align-items-center\"\n [style.background]=\"item?.icon?.showBackground ? getIconBackground(item?.icon) : 'transparent'\"\n [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\n [sectionId]=\"data?.id\" [showIcon]=\"content?.display?.showIcon\">\n <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\n [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\n [class.w-100]=\"!item?.icon?.showBackground\"></div>\n </div>\n </ng-container>\n <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText[0].value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n </div>\n</div>", styles: [".masking{mask:linear-gradient(90deg,transparent,white 5%,white 95%,transparent);overflow:hidden;width:100%}.sliderdad{width:100%;display:flex}@media (min-width: 860px){.nofullwidth{overflow:hidden}}.slider-track2{min-width:max-content;translate:none;rotate:none;scale:none;gap:1rem;justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex}.mainsec{gap:2rem;flex-direction:column;display:flex}.slider-track2.logotype-boxed{gap:1rem}.slider-track2.logotype-basic{gap:5rem}.slides2.logotype-boxed{padding:1.5rem 1.25rem;--tw-bg-opacity: .05;flex-shrink:0;width:auto;height:auto;display:flex;position:relative;box-shadow:#0000002e 0 2px 4px;margin:10px 5px}.slides2.logotype-basic{flex-shrink:0;width:auto;height:auto;display:flex;position:relative}.slides2.img{height:100%;max-width:100%;border-style:solid}@keyframes scrollLeft{0%{transform:translate3d(100%,0,0)}to{transform:translate3d(-100%,0,0)}}@keyframes scrollRight{0%{transform:translate3d(-100%,0,0)}to{transform:translate3d(100%,0,0)}}.animation{animation:scrollLeft linear infinite}.slider-track{justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex;gap:10px}.slider-track.logotype-basic{gap:5rem}.slider-track.logotype-boxed{gap:1rem}.slides.logotype-basic{flex-shrink:0;width:auto;min-height:5rem;height:auto;display:flex;position:relative}.slides.logotype-boxed{padding:1.5rem .625rem;--tw-bg-opacity: .05;box-shadow:#0000002e 0 2px 4px;width:auto;height:auto;display:flex;align-items:center;margin:10px 5px}.width-max{width:max-content;max-width:50%}.slides.texttype-boxed{padding:1.5rem .625rem;justify-content:center;width:auto;display:flex;position:relative;box-shadow:#0000002e 0 2px 4px;margin:10px 5px;align-items:center}.slides.texttype-boxed:hover{--tw-bg-opacity: .05;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.slides.img{border-style:solid;max-width:100%;height:100%}@media only screen and (max-width: 500px){.col-xxl-8{padding-left:0!important;padding-right:0!important}.mainsec{padding-right:2rem!important;padding-left:2rem!important}.col-7{min-width:50%;width:100%;max-width:100%}.col-5{width:100%}.slides img{width:88%}.gridtext{flex-direction:column!important}.gridtext .gridimg{width:100%!important}.gridtext .width-max{max-width:100%!important}}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-20{margin-top:20px}.mb-20{margin-bottom:20px}.row{margin-left:0;margin-right:0}\n"] }]
11900
11938
  }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
11901
11939
  type: Input
11902
11940
  }], index: [{
@@ -14135,7 +14173,7 @@ class FooterComponent extends BaseSection {
14135
14173
  });
14136
14174
  }
14137
14175
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FooterComponent, deps: [{ token: EventsService }, { token: RestService }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
14138
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FooterComponent, isStandalone: true, selector: "simpo-footer", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" simpoHover\n(hovering)=\"showEditTabs($event)\"[spacingHorizontal]=\"stylesLayout\" [simpoBackground]=\"style?.background\" [simpoLayout]=\"style?.layout\" [id]=\"data?.id\"\n[style.border]=\"'2px solid' + style?.background?.accentColor\">\n <div>\n <ng-container *ngIf=\"style?.footerType == 'Footer1'\">\n <ng-container *ngTemplateOutlet=\"Footer1\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"style?.footerType == 'Footer2'\">\n <ng-container *ngTemplateOutlet=\"Footer2\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"style?.footerType == 'Footer3'\">\n <ng-container *ngTemplateOutlet=\"Footer3\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"style?.footerType == 'Footer4'\">\n <ng-container *ngTemplateOutlet=\"Footer4\"></ng-container>\n </ng-container>\n </div>\n\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n\n</section>\n\n<ng-template #Footer1>\n <div class=\"row align-items-center\">\n <div class=\"col-md-4\">\n <div>\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\n </div>\n <div>\n <ng-container *ngTemplateOutlet=\"descSection\"></ng-container>\n </div>\n <div *ngIf=\"content?.socialLinks?.display && screenWidth > 475\">\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n </div>\n </div>\n <div class=\"col-md-8\">\n <div class=\"row\">\n <ng-container *ngTemplateOutlet=\"foldersVertical\"></ng-container>\n </div>\n <div *ngIf=\"content?.socialLinks?.display && screenWidth < 475\" class=\"d-flex justify-content-center\">\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n </div>\n </div>\n </div>\n <hr *ngIf=\"content?.displayBranding\">\n <div *ngIf=\"content?.displayBranding\">\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #Footer2>\n <div class=\"row align-items-center\">\n <div class=\"col-md-3\">\n <div>\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\n </div>\n <div>\n <ng-container *ngTemplateOutlet=\"descSection\"></ng-container>\n </div>\n <div *ngIf=\"content?.socialLinks?.display && screenWidth > 475\">\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n </div>\n </div>\n <div class=\"col-md-9\">\n <div class=\"row\">\n <ng-container *ngTemplateOutlet=\"pagesHorizontal\"></ng-container>\n </div>\n <div *ngIf=\"content?.socialLinks?.display && screenWidth < 475\" class=\"d-flex justify-content-center\">\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n </div>\n </div>\n </div>\n <hr *ngIf=\"content?.displayBranding\">\n <div *ngIf=\"content?.displayBranding\">\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #Footer3>\n <div class=\"row\" [class.align-items-start]=\"screenWidth < 475\">\n <ng-container *ngTemplateOutlet=\"foldersVertical\"></ng-container>\n </div>\n <hr>\n <div class=\"row justify-content-between\">\n <div class=\"col-md-4\" [class.w-30]=\"screenWidth < 475\">\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\n </div>\n <div class=\"col-md-4 d-flex justify-content-center align-items-start\" *ngIf=\"content?.socialLinks?.display\"\n [class.w-30]=\"screenWidth < 475\">\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n </div>\n <div class=\"col-md-4 d-flex justify-content-end\" *ngIf=\"content?.displayBranding\" [class.w-30]=\"screenWidth < 475\">\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n </div>\n </div>\n\n</ng-template>\n\n<ng-template #Footer4>\n <div class=\"row align-items-center\">\n <ng-container *ngTemplateOutlet=\"pagesHorizontal\"></ng-container>\n </div>\n <hr>\n <div class=\"row justify-content-between\">\n <div class=\"col-md-4\">\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\n </div>\n <div class=\"col-md-4 d-flex justify-content-center align-items-start\" *ngIf=\"content?.socialLinks?.display\">\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n </div>\n <div class=\"col-md-4 d-flex justify-content-end\" *ngIf=\"content?.displayBranding\">\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n </div>\n </div>\n\n</ng-template>\n\n<ng-template #logoSection>\n <div class=\"d-flex\" [class.justify-content-center]=\"screenWidth < 475\">\n <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer mb-4\"\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\n </div>\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"style?.background?.color\">\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\n </div>\n </div>\n <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer mb-4\"\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\n loading=\"lazy\">\n </div>\n </div>\n</ng-template>\n\n<ng-template #descSection>\n <ng-container *ngIf = \"content?.additionalDetails as textItem\" >\n <simpo-text-editor [(value)]=\"textItem.value \" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [label]=\"content?.additionalDetails?.label || ''\"></simpo-text-editor>\n </ng-container> <!-- <div class=\"description\" [innerHTML]=\"content?.additionalDetails?.value ?? '' | sanitizeHtml\"></div> -->\n</ng-template>\n\n<ng-template #socialIcons>\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\n <div class=\"d-flex mt-0 gap-1\" *ngIf=\"content?.socialLinks?.display\">\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\n <div class=\"icons\">\n <simpo-socia-icons [iconColor]=\"data?.styles?.background?.accentColor\" [socialIconData]=\"item\"\n [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\n </div>\n </ng-container>\n </div>\n </div>\n</ng-template>\n\n<ng-template #branding>\n <div class=\"heading-small text-center branding-text\">Made with <a class=\"branding-text fw-600\"\n href=\"https://simpo.ai\" target=\"_blank\">Simpo</a></div>\n</ng-template>\n\n<ng-template #pagesHorizontal>\n <div class=\"col-md-3 mb-3 pageType\" *ngFor=\"let page of pages\" [class.w-50]=\"screenWidth < 475\" [class.text-center]=\"screenWidth < 475\" (click)=\"redirectToPage(page)\">\n {{page.pageName}}\n </div>\n</ng-template>\n\n<!-- <ng-template #pagesVertical>\n <div class=\"page-container col-md-3 mb-3\" [class.w-50]=\"screenWidth < 475\">\n <div class=\"pageType mb-3\">{{pageLink}}</div>\n <ng-container *ngFor=\"let page of pages\">\n <div class=\"pages mb-2\" (click)=\"redirectToPage(page)\">{{page?.pageName}}</div>\n </ng-container>\n </div>\n</ng-template> -->\n\n<ng-template #foldersVertical>\n <div class=\"page-container col-md-3 mb-3\" *ngFor=\"let folder of content?.folder;let folderIndex = index\" [class.w-50]=\"screenWidth < 475\">\n <simpo-text-editor [(value)]=\"folder.label\" [editable]=\"edit || false\" [sectionId]=\"data?.id\"></simpo-text-editor>\n <div class=\"mt-15\">\n <ng-container *ngFor=\"let page of folder.links;let linkIndex = index\">\n <div class=\"folder-page\" [ngClass]=\"{'hoverWhenEditable' : edit}\">\n <div class=\"pages mb-2\" (click)=\"redirectTo(page)\" [style.color]=\"style?.background?.accentColor\">{{page.label}}</div>\n <mat-icon (click)=\"deleteFolderLinks(folderIndex, linkIndex)\" [style.color]=\"style?.background?.accentColor\">delete</mat-icon>\n </div>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"edit ? addLinks : null; context: {data: folderIndex}\"></ng-container>\n </div>\n </div>\n <div class=\"col-md-3\" *ngIf=\"(content?.folder?.length || 0) < 4\" [class.w-50]=\"screenWidth < 475\">\n <ng-container *ngTemplateOutlet=\"edit ? addFolder : null\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #addLinks let-folderIndex=\"data\">\n <div class=\"addLinks\" (click)=\"createNewLink(folderIndex)\">\n <mat-icon>add</mat-icon>\n </div>\n</ng-template>\n\n<ng-template #addFolder>\n <div class=\"addLinks h-100\" (click)=\"createNewFolder()\">\n <mat-icon>add</mat-icon>\n </div>\n</ng-template>\n", styles: [".total-container{height:auto;position:relative}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.pageType{font-size:.9rem;font-weight:600;line-height:22px;color:#87769d}.pages{font-size:.9rem;font-weight:400;line-height:22px;cursor:pointer;color:#87769d}.branding-text{font-size:16px;font-weight:400;line-height:22px;text-decoration:unset}.fw-600{font-weight:600!important}.w-50{width:50%!important}.w-30{width:30%!important}.align-items-start{align-items:start!important}.mt-15{margin-top:15px}.folder-page{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.folder-page mat-icon{font-size:17px;display:flex;align-items:center;justify-content:center;display:none}.hoverWhenEditable:hover{border:1px solid #E9E9E9;border-radius:5px;cursor:pointer}.hoverWhenEditable:hover mat-icon{display:inline}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px}.addLinks mat-icon{border:1px solid rgb(219,223,225);display:flex;border-radius:100%;align-items:center;justify-content:center;font-size:16px;color:#dbdfe1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type:
14176
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FooterComponent, isStandalone: true, selector: "simpo-footer", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" simpoHover\n(hovering)=\"showEditTabs($event)\" [spacingHorizontal]=\"stylesLayout\" [simpoBackground]=\"style?.background\" [simpoLayout]=\"style?.layout\" [id]=\"data?.id\">\n <div>\n <ng-container *ngIf=\"style?.footerType == 'Footer1'\">\n <ng-container *ngTemplateOutlet=\"Footer1\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"style?.footerType == 'Footer2'\">\n <ng-container *ngTemplateOutlet=\"Footer2\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"style?.footerType == 'Footer3'\">\n <ng-container *ngTemplateOutlet=\"Footer3\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"style?.footerType == 'Footer4'\">\n <ng-container *ngTemplateOutlet=\"Footer4\"></ng-container>\n </ng-container>\n </div>\n\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n\n</section>\n\n<ng-template #Footer1>\n <div class=\"row align-items-center\">\n <div class=\"col-md-4\">\n <div>\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\n </div>\n <div>\n <ng-container *ngTemplateOutlet=\"descSection\"></ng-container>\n </div>\n <div *ngIf=\"content?.socialLinks?.display && screenWidth > 475\">\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n </div>\n </div>\n <div class=\"col-md-8\">\n <div class=\"row\">\n <ng-container *ngTemplateOutlet=\"foldersVertical\"></ng-container>\n </div>\n <div *ngIf=\"content?.socialLinks?.display && screenWidth < 475\" class=\"d-flex justify-content-center\">\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n </div>\n </div>\n </div>\n <hr *ngIf=\"content?.displayBranding\">\n <div *ngIf=\"content?.displayBranding\">\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #Footer2>\n <div class=\"row align-items-center\">\n <div class=\"col-md-3\">\n <div>\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\n </div>\n <div>\n <ng-container *ngTemplateOutlet=\"descSection\"></ng-container>\n </div>\n <div *ngIf=\"content?.socialLinks?.display && screenWidth > 475\">\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n </div>\n </div>\n <div class=\"col-md-9\">\n <div class=\"row\">\n <ng-container *ngTemplateOutlet=\"pagesHorizontal\"></ng-container>\n </div>\n <div *ngIf=\"content?.socialLinks?.display && screenWidth < 475\" class=\"d-flex justify-content-center\">\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n </div>\n </div>\n </div>\n <hr *ngIf=\"content?.displayBranding\">\n <div *ngIf=\"content?.displayBranding\">\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #Footer3>\n <div class=\"row\" [class.align-items-start]=\"screenWidth < 475\">\n <ng-container *ngTemplateOutlet=\"foldersVertical\"></ng-container>\n </div>\n <hr>\n <div class=\"row justify-content-between\">\n <div class=\"col-md-4\" [class.w-30]=\"screenWidth < 475\">\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\n </div>\n <div class=\"col-md-4 d-flex justify-content-center align-items-start\" *ngIf=\"content?.socialLinks?.display\"\n [class.w-30]=\"screenWidth < 475\">\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n </div>\n <div class=\"col-md-4 d-flex justify-content-end\" *ngIf=\"content?.displayBranding\" [class.w-30]=\"screenWidth < 475\">\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n </div>\n </div>\n\n</ng-template>\n\n<ng-template #Footer4>\n <div class=\"row align-items-center\">\n <ng-container *ngTemplateOutlet=\"pagesHorizontal\"></ng-container>\n </div>\n <hr>\n <div class=\"row justify-content-between\">\n <div class=\"col-md-4\">\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\n </div>\n <div class=\"col-md-4 d-flex justify-content-center align-items-start\" *ngIf=\"content?.socialLinks?.display\">\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n </div>\n <div class=\"col-md-4 d-flex justify-content-end\" *ngIf=\"content?.displayBranding\">\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n </div>\n </div>\n\n</ng-template>\n\n<ng-template #logoSection>\n <div class=\"d-flex\" [class.justify-content-center]=\"screenWidth < 475\">\n <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer mb-4\"\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\n </div>\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"style?.background?.color\">\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\n </div>\n </div>\n <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer mb-4\"\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\n loading=\"lazy\">\n </div>\n </div>\n</ng-template>\n\n<ng-template #descSection>\n <ng-container *ngIf = \"content?.additionalDetails as textItem\" >\n <simpo-text-editor [(value)]=\"textItem.value \" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [label]=\"content?.additionalDetails?.label || ''\"></simpo-text-editor>\n </ng-container> <!-- <div class=\"description\" [innerHTML]=\"content?.additionalDetails?.value ?? '' | sanitizeHtml\"></div> -->\n</ng-template>\n\n<ng-template #socialIcons>\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\n <div class=\"d-flex mt-0 gap-1\" *ngIf=\"content?.socialLinks?.display\">\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\n <div class=\"icons\">\n <simpo-socia-icons [iconColor]=\"data?.styles?.background?.accentColor\" [socialIconData]=\"item\"\n [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\n </div>\n </ng-container>\n </div>\n </div>\n</ng-template>\n\n<ng-template #branding>\n <div class=\"heading-small text-center branding-text\">Made with <a class=\"branding-text fw-600\"\n href=\"https://simpo.ai\" target=\"_blank\">Simpo</a></div>\n</ng-template>\n\n<ng-template #pagesHorizontal>\n <div class=\"col-md-3 mb-3 pageType\" *ngFor=\"let page of pages\" [class.w-50]=\"screenWidth < 475\" [class.text-center]=\"screenWidth < 475\" (click)=\"redirectToPage(page)\">\n {{page.pageName}}\n </div>\n</ng-template>\n\n<!-- <ng-template #pagesVertical>\n <div class=\"page-container col-md-3 mb-3\" [class.w-50]=\"screenWidth < 475\">\n <div class=\"pageType mb-3\">{{pageLink}}</div>\n <ng-container *ngFor=\"let page of pages\">\n <div class=\"pages mb-2\" (click)=\"redirectToPage(page)\">{{page?.pageName}}</div>\n </ng-container>\n </div>\n</ng-template> -->\n\n<ng-template #foldersVertical>\n <div class=\"page-container col-md-3 mb-3\" *ngFor=\"let folder of content?.folder;let folderIndex = index\" [class.w-50]=\"screenWidth < 475\">\n <simpo-text-editor [(value)]=\"folder.label\" [editable]=\"edit || false\" [sectionId]=\"data?.id\"></simpo-text-editor>\n <div class=\"mt-15\">\n <ng-container *ngFor=\"let page of folder.links;let linkIndex = index\">\n <div class=\"folder-page\" [ngClass]=\"{'hoverWhenEditable' : edit}\">\n <div class=\"pages mb-2\" (click)=\"redirectTo(page)\" [style.color]=\"style?.background?.accentColor\">{{page.label}}</div>\n <mat-icon (click)=\"deleteFolderLinks(folderIndex, linkIndex)\" [style.color]=\"style?.background?.accentColor\">delete</mat-icon>\n </div>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"edit ? addLinks : null; context: {data: folderIndex}\"></ng-container>\n </div>\n </div>\n <div class=\"col-md-3\" *ngIf=\"(content?.folder?.length || 0) < 4\" [class.w-50]=\"screenWidth < 475\">\n <ng-container *ngTemplateOutlet=\"edit ? addFolder : null\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #addLinks let-folderIndex=\"data\">\n <div class=\"addLinks\" (click)=\"createNewLink(folderIndex)\">\n <mat-icon>add</mat-icon>\n </div>\n</ng-template>\n\n<ng-template #addFolder>\n <div class=\"addLinks h-100\" (click)=\"createNewFolder()\">\n <mat-icon>add</mat-icon>\n </div>\n</ng-template>\n", styles: [".total-container{height:auto;position:relative}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.pageType{font-size:.9rem;font-weight:600;line-height:22px;color:#87769d}.pages{font-size:.9rem;font-weight:400;line-height:22px;cursor:pointer;color:#87769d}.branding-text{font-size:16px;font-weight:400;line-height:22px;text-decoration:unset}.fw-600{font-weight:600!important}.w-50{width:50%!important}.w-30{width:30%!important}.align-items-start{align-items:start!important}.mt-15{margin-top:15px}.folder-page{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.folder-page mat-icon{font-size:17px;display:flex;align-items:center;justify-content:center;display:none}.hoverWhenEditable:hover{border:1px solid #E9E9E9;border-radius:5px;cursor:pointer}.hoverWhenEditable:hover mat-icon{display:inline}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px}.addLinks mat-icon{border:1px solid rgb(219,223,225);display:flex;border-radius:100%;align-items:center;justify-content:center;font-size:16px;color:#dbdfe1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type:
14139
14177
  //directives
14140
14178
  SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }] }); }
14141
14179
  }
@@ -14155,7 +14193,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
14155
14193
  ContentFitDirective,
14156
14194
  TextEditorComponent,
14157
14195
  HoverDirective
14158
- ], template: "<section class=\"total-container\" simpoHover\n(hovering)=\"showEditTabs($event)\"[spacingHorizontal]=\"stylesLayout\" [simpoBackground]=\"style?.background\" [simpoLayout]=\"style?.layout\" [id]=\"data?.id\"\n[style.border]=\"'2px solid' + style?.background?.accentColor\">\n <div>\n <ng-container *ngIf=\"style?.footerType == 'Footer1'\">\n <ng-container *ngTemplateOutlet=\"Footer1\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"style?.footerType == 'Footer2'\">\n <ng-container *ngTemplateOutlet=\"Footer2\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"style?.footerType == 'Footer3'\">\n <ng-container *ngTemplateOutlet=\"Footer3\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"style?.footerType == 'Footer4'\">\n <ng-container *ngTemplateOutlet=\"Footer4\"></ng-container>\n </ng-container>\n </div>\n\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n\n</section>\n\n<ng-template #Footer1>\n <div class=\"row align-items-center\">\n <div class=\"col-md-4\">\n <div>\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\n </div>\n <div>\n <ng-container *ngTemplateOutlet=\"descSection\"></ng-container>\n </div>\n <div *ngIf=\"content?.socialLinks?.display && screenWidth > 475\">\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n </div>\n </div>\n <div class=\"col-md-8\">\n <div class=\"row\">\n <ng-container *ngTemplateOutlet=\"foldersVertical\"></ng-container>\n </div>\n <div *ngIf=\"content?.socialLinks?.display && screenWidth < 475\" class=\"d-flex justify-content-center\">\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n </div>\n </div>\n </div>\n <hr *ngIf=\"content?.displayBranding\">\n <div *ngIf=\"content?.displayBranding\">\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #Footer2>\n <div class=\"row align-items-center\">\n <div class=\"col-md-3\">\n <div>\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\n </div>\n <div>\n <ng-container *ngTemplateOutlet=\"descSection\"></ng-container>\n </div>\n <div *ngIf=\"content?.socialLinks?.display && screenWidth > 475\">\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n </div>\n </div>\n <div class=\"col-md-9\">\n <div class=\"row\">\n <ng-container *ngTemplateOutlet=\"pagesHorizontal\"></ng-container>\n </div>\n <div *ngIf=\"content?.socialLinks?.display && screenWidth < 475\" class=\"d-flex justify-content-center\">\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n </div>\n </div>\n </div>\n <hr *ngIf=\"content?.displayBranding\">\n <div *ngIf=\"content?.displayBranding\">\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #Footer3>\n <div class=\"row\" [class.align-items-start]=\"screenWidth < 475\">\n <ng-container *ngTemplateOutlet=\"foldersVertical\"></ng-container>\n </div>\n <hr>\n <div class=\"row justify-content-between\">\n <div class=\"col-md-4\" [class.w-30]=\"screenWidth < 475\">\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\n </div>\n <div class=\"col-md-4 d-flex justify-content-center align-items-start\" *ngIf=\"content?.socialLinks?.display\"\n [class.w-30]=\"screenWidth < 475\">\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n </div>\n <div class=\"col-md-4 d-flex justify-content-end\" *ngIf=\"content?.displayBranding\" [class.w-30]=\"screenWidth < 475\">\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n </div>\n </div>\n\n</ng-template>\n\n<ng-template #Footer4>\n <div class=\"row align-items-center\">\n <ng-container *ngTemplateOutlet=\"pagesHorizontal\"></ng-container>\n </div>\n <hr>\n <div class=\"row justify-content-between\">\n <div class=\"col-md-4\">\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\n </div>\n <div class=\"col-md-4 d-flex justify-content-center align-items-start\" *ngIf=\"content?.socialLinks?.display\">\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n </div>\n <div class=\"col-md-4 d-flex justify-content-end\" *ngIf=\"content?.displayBranding\">\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n </div>\n </div>\n\n</ng-template>\n\n<ng-template #logoSection>\n <div class=\"d-flex\" [class.justify-content-center]=\"screenWidth < 475\">\n <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer mb-4\"\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\n </div>\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"style?.background?.color\">\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\n </div>\n </div>\n <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer mb-4\"\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\n loading=\"lazy\">\n </div>\n </div>\n</ng-template>\n\n<ng-template #descSection>\n <ng-container *ngIf = \"content?.additionalDetails as textItem\" >\n <simpo-text-editor [(value)]=\"textItem.value \" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [label]=\"content?.additionalDetails?.label || ''\"></simpo-text-editor>\n </ng-container> <!-- <div class=\"description\" [innerHTML]=\"content?.additionalDetails?.value ?? '' | sanitizeHtml\"></div> -->\n</ng-template>\n\n<ng-template #socialIcons>\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\n <div class=\"d-flex mt-0 gap-1\" *ngIf=\"content?.socialLinks?.display\">\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\n <div class=\"icons\">\n <simpo-socia-icons [iconColor]=\"data?.styles?.background?.accentColor\" [socialIconData]=\"item\"\n [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\n </div>\n </ng-container>\n </div>\n </div>\n</ng-template>\n\n<ng-template #branding>\n <div class=\"heading-small text-center branding-text\">Made with <a class=\"branding-text fw-600\"\n href=\"https://simpo.ai\" target=\"_blank\">Simpo</a></div>\n</ng-template>\n\n<ng-template #pagesHorizontal>\n <div class=\"col-md-3 mb-3 pageType\" *ngFor=\"let page of pages\" [class.w-50]=\"screenWidth < 475\" [class.text-center]=\"screenWidth < 475\" (click)=\"redirectToPage(page)\">\n {{page.pageName}}\n </div>\n</ng-template>\n\n<!-- <ng-template #pagesVertical>\n <div class=\"page-container col-md-3 mb-3\" [class.w-50]=\"screenWidth < 475\">\n <div class=\"pageType mb-3\">{{pageLink}}</div>\n <ng-container *ngFor=\"let page of pages\">\n <div class=\"pages mb-2\" (click)=\"redirectToPage(page)\">{{page?.pageName}}</div>\n </ng-container>\n </div>\n</ng-template> -->\n\n<ng-template #foldersVertical>\n <div class=\"page-container col-md-3 mb-3\" *ngFor=\"let folder of content?.folder;let folderIndex = index\" [class.w-50]=\"screenWidth < 475\">\n <simpo-text-editor [(value)]=\"folder.label\" [editable]=\"edit || false\" [sectionId]=\"data?.id\"></simpo-text-editor>\n <div class=\"mt-15\">\n <ng-container *ngFor=\"let page of folder.links;let linkIndex = index\">\n <div class=\"folder-page\" [ngClass]=\"{'hoverWhenEditable' : edit}\">\n <div class=\"pages mb-2\" (click)=\"redirectTo(page)\" [style.color]=\"style?.background?.accentColor\">{{page.label}}</div>\n <mat-icon (click)=\"deleteFolderLinks(folderIndex, linkIndex)\" [style.color]=\"style?.background?.accentColor\">delete</mat-icon>\n </div>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"edit ? addLinks : null; context: {data: folderIndex}\"></ng-container>\n </div>\n </div>\n <div class=\"col-md-3\" *ngIf=\"(content?.folder?.length || 0) < 4\" [class.w-50]=\"screenWidth < 475\">\n <ng-container *ngTemplateOutlet=\"edit ? addFolder : null\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #addLinks let-folderIndex=\"data\">\n <div class=\"addLinks\" (click)=\"createNewLink(folderIndex)\">\n <mat-icon>add</mat-icon>\n </div>\n</ng-template>\n\n<ng-template #addFolder>\n <div class=\"addLinks h-100\" (click)=\"createNewFolder()\">\n <mat-icon>add</mat-icon>\n </div>\n</ng-template>\n", styles: [".total-container{height:auto;position:relative}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.pageType{font-size:.9rem;font-weight:600;line-height:22px;color:#87769d}.pages{font-size:.9rem;font-weight:400;line-height:22px;cursor:pointer;color:#87769d}.branding-text{font-size:16px;font-weight:400;line-height:22px;text-decoration:unset}.fw-600{font-weight:600!important}.w-50{width:50%!important}.w-30{width:30%!important}.align-items-start{align-items:start!important}.mt-15{margin-top:15px}.folder-page{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.folder-page mat-icon{font-size:17px;display:flex;align-items:center;justify-content:center;display:none}.hoverWhenEditable:hover{border:1px solid #E9E9E9;border-radius:5px;cursor:pointer}.hoverWhenEditable:hover mat-icon{display:inline}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px}.addLinks mat-icon{border:1px solid rgb(219,223,225);display:flex;border-radius:100%;align-items:center;justify-content:center;font-size:16px;color:#dbdfe1}\n"] }]
14196
+ ], template: "<section class=\"total-container\" simpoHover\n(hovering)=\"showEditTabs($event)\" [spacingHorizontal]=\"stylesLayout\" [simpoBackground]=\"style?.background\" [simpoLayout]=\"style?.layout\" [id]=\"data?.id\">\n <div>\n <ng-container *ngIf=\"style?.footerType == 'Footer1'\">\n <ng-container *ngTemplateOutlet=\"Footer1\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"style?.footerType == 'Footer2'\">\n <ng-container *ngTemplateOutlet=\"Footer2\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"style?.footerType == 'Footer3'\">\n <ng-container *ngTemplateOutlet=\"Footer3\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"style?.footerType == 'Footer4'\">\n <ng-container *ngTemplateOutlet=\"Footer4\"></ng-container>\n </ng-container>\n </div>\n\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n\n</section>\n\n<ng-template #Footer1>\n <div class=\"row align-items-center\">\n <div class=\"col-md-4\">\n <div>\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\n </div>\n <div>\n <ng-container *ngTemplateOutlet=\"descSection\"></ng-container>\n </div>\n <div *ngIf=\"content?.socialLinks?.display && screenWidth > 475\">\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n </div>\n </div>\n <div class=\"col-md-8\">\n <div class=\"row\">\n <ng-container *ngTemplateOutlet=\"foldersVertical\"></ng-container>\n </div>\n <div *ngIf=\"content?.socialLinks?.display && screenWidth < 475\" class=\"d-flex justify-content-center\">\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n </div>\n </div>\n </div>\n <hr *ngIf=\"content?.displayBranding\">\n <div *ngIf=\"content?.displayBranding\">\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #Footer2>\n <div class=\"row align-items-center\">\n <div class=\"col-md-3\">\n <div>\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\n </div>\n <div>\n <ng-container *ngTemplateOutlet=\"descSection\"></ng-container>\n </div>\n <div *ngIf=\"content?.socialLinks?.display && screenWidth > 475\">\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n </div>\n </div>\n <div class=\"col-md-9\">\n <div class=\"row\">\n <ng-container *ngTemplateOutlet=\"pagesHorizontal\"></ng-container>\n </div>\n <div *ngIf=\"content?.socialLinks?.display && screenWidth < 475\" class=\"d-flex justify-content-center\">\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n </div>\n </div>\n </div>\n <hr *ngIf=\"content?.displayBranding\">\n <div *ngIf=\"content?.displayBranding\">\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #Footer3>\n <div class=\"row\" [class.align-items-start]=\"screenWidth < 475\">\n <ng-container *ngTemplateOutlet=\"foldersVertical\"></ng-container>\n </div>\n <hr>\n <div class=\"row justify-content-between\">\n <div class=\"col-md-4\" [class.w-30]=\"screenWidth < 475\">\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\n </div>\n <div class=\"col-md-4 d-flex justify-content-center align-items-start\" *ngIf=\"content?.socialLinks?.display\"\n [class.w-30]=\"screenWidth < 475\">\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n </div>\n <div class=\"col-md-4 d-flex justify-content-end\" *ngIf=\"content?.displayBranding\" [class.w-30]=\"screenWidth < 475\">\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n </div>\n </div>\n\n</ng-template>\n\n<ng-template #Footer4>\n <div class=\"row align-items-center\">\n <ng-container *ngTemplateOutlet=\"pagesHorizontal\"></ng-container>\n </div>\n <hr>\n <div class=\"row justify-content-between\">\n <div class=\"col-md-4\">\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\n </div>\n <div class=\"col-md-4 d-flex justify-content-center align-items-start\" *ngIf=\"content?.socialLinks?.display\">\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\n </div>\n <div class=\"col-md-4 d-flex justify-content-end\" *ngIf=\"content?.displayBranding\">\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\n </div>\n </div>\n\n</ng-template>\n\n<ng-template #logoSection>\n <div class=\"d-flex\" [class.justify-content-center]=\"screenWidth < 475\">\n <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer mb-4\"\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\n </div>\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"style?.background?.color\">\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\n </div>\n </div>\n <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer mb-4\"\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\n loading=\"lazy\">\n </div>\n </div>\n</ng-template>\n\n<ng-template #descSection>\n <ng-container *ngIf = \"content?.additionalDetails as textItem\" >\n <simpo-text-editor [(value)]=\"textItem.value \" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [label]=\"content?.additionalDetails?.label || ''\"></simpo-text-editor>\n </ng-container> <!-- <div class=\"description\" [innerHTML]=\"content?.additionalDetails?.value ?? '' | sanitizeHtml\"></div> -->\n</ng-template>\n\n<ng-template #socialIcons>\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\n <div class=\"d-flex mt-0 gap-1\" *ngIf=\"content?.socialLinks?.display\">\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\n <div class=\"icons\">\n <simpo-socia-icons [iconColor]=\"data?.styles?.background?.accentColor\" [socialIconData]=\"item\"\n [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\n </div>\n </ng-container>\n </div>\n </div>\n</ng-template>\n\n<ng-template #branding>\n <div class=\"heading-small text-center branding-text\">Made with <a class=\"branding-text fw-600\"\n href=\"https://simpo.ai\" target=\"_blank\">Simpo</a></div>\n</ng-template>\n\n<ng-template #pagesHorizontal>\n <div class=\"col-md-3 mb-3 pageType\" *ngFor=\"let page of pages\" [class.w-50]=\"screenWidth < 475\" [class.text-center]=\"screenWidth < 475\" (click)=\"redirectToPage(page)\">\n {{page.pageName}}\n </div>\n</ng-template>\n\n<!-- <ng-template #pagesVertical>\n <div class=\"page-container col-md-3 mb-3\" [class.w-50]=\"screenWidth < 475\">\n <div class=\"pageType mb-3\">{{pageLink}}</div>\n <ng-container *ngFor=\"let page of pages\">\n <div class=\"pages mb-2\" (click)=\"redirectToPage(page)\">{{page?.pageName}}</div>\n </ng-container>\n </div>\n</ng-template> -->\n\n<ng-template #foldersVertical>\n <div class=\"page-container col-md-3 mb-3\" *ngFor=\"let folder of content?.folder;let folderIndex = index\" [class.w-50]=\"screenWidth < 475\">\n <simpo-text-editor [(value)]=\"folder.label\" [editable]=\"edit || false\" [sectionId]=\"data?.id\"></simpo-text-editor>\n <div class=\"mt-15\">\n <ng-container *ngFor=\"let page of folder.links;let linkIndex = index\">\n <div class=\"folder-page\" [ngClass]=\"{'hoverWhenEditable' : edit}\">\n <div class=\"pages mb-2\" (click)=\"redirectTo(page)\" [style.color]=\"style?.background?.accentColor\">{{page.label}}</div>\n <mat-icon (click)=\"deleteFolderLinks(folderIndex, linkIndex)\" [style.color]=\"style?.background?.accentColor\">delete</mat-icon>\n </div>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"edit ? addLinks : null; context: {data: folderIndex}\"></ng-container>\n </div>\n </div>\n <div class=\"col-md-3\" *ngIf=\"(content?.folder?.length || 0) < 4\" [class.w-50]=\"screenWidth < 475\">\n <ng-container *ngTemplateOutlet=\"edit ? addFolder : null\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #addLinks let-folderIndex=\"data\">\n <div class=\"addLinks\" (click)=\"createNewLink(folderIndex)\">\n <mat-icon>add</mat-icon>\n </div>\n</ng-template>\n\n<ng-template #addFolder>\n <div class=\"addLinks h-100\" (click)=\"createNewFolder()\">\n <mat-icon>add</mat-icon>\n </div>\n</ng-template>\n", styles: [".total-container{height:auto;position:relative}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.pageType{font-size:.9rem;font-weight:600;line-height:22px;color:#87769d}.pages{font-size:.9rem;font-weight:400;line-height:22px;cursor:pointer;color:#87769d}.branding-text{font-size:16px;font-weight:400;line-height:22px;text-decoration:unset}.fw-600{font-weight:600!important}.w-50{width:50%!important}.w-30{width:30%!important}.align-items-start{align-items:start!important}.mt-15{margin-top:15px}.folder-page{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.folder-page mat-icon{font-size:17px;display:flex;align-items:center;justify-content:center;display:none}.hoverWhenEditable:hover{border:1px solid #E9E9E9;border-radius:5px;cursor:pointer}.hoverWhenEditable:hover mat-icon{display:inline}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px}.addLinks mat-icon{border:1px solid rgb(219,223,225);display:flex;border-radius:100%;align-items:center;justify-content:center;font-size:16px;color:#dbdfe1}\n"] }]
14159
14197
  }], ctorParameters: () => [{ type: EventsService }, { type: RestService }, { type: i1$1.MatDialog }], propDecorators: { data: [{
14160
14198
  type: Input
14161
14199
  }], index: [{
@@ -14405,7 +14443,6 @@ class HeaderSectionComponent {
14405
14443
  this.isScrolled = window.scrollY > 50;
14406
14444
  }
14407
14445
  ngOnInit() {
14408
- console.log('222,this is the first step');
14409
14446
  this.content = this.data?.content;
14410
14447
  this.style = this.data?.styles;
14411
14448
  this.action = this.data?.action;
@@ -14429,7 +14466,6 @@ class HeaderSectionComponent {
14429
14466
  this.getParentHeight();
14430
14467
  }, 1000);
14431
14468
  });
14432
- console.log('111', this.childContainer.nativeElement);
14433
14469
  this.resizeObserver.observe(this.childContainer.nativeElement);
14434
14470
  }
14435
14471
  checkPassbookApp() {
@@ -14603,7 +14639,7 @@ class HeaderSectionComponent {
14603
14639
  this.router.navigate(['/login']);
14604
14640
  }
14605
14641
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderSectionComponent, deps: [{ token: EventsService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: i1$1.MatDialog }, { token: StorageServiceService }, { token: RestService }, { token: EventsService }, { token: LOCAL_STORAGE }], target: i0.ɵɵFactoryTarget.Component }); }
14606
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeaderSectionComponent, isStandalone: true, selector: "simpo-header-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\n <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\n [class.margin-bottom]=\"isHeaderSticky && isEcommerceWebsite && isMobile\">\n <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\n [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\n simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\n (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\n <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\n <ng-container *ngIf=\"style?.headline?.display\">\n <div>\n <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\n </div>\n </ng-container>\n <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\n </div>\n <!-- <div class=\"input-group mx-2 mb-2 w-98\" *ngIf=\"isMobile && isEcommerceWebsite\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\n <mat-icon class=\"h-100\"\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"style?.background?.color\">search</mat-icon>\n </div> -->\n <ng-container *ngIf=\"isEcommerceWebsite && !isMobile\">\n <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n </div>\n\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\n <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\n </ng-container>\n</section>\n\n<ng-template #header1Template>\n <div class=\"header1\">\n <div>\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 95 : ''\">\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\">menu</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header2Template>\n <div class=\"header1\">\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"text-end\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header3Template>\n <div class=\"header1\">\n <div>\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n </ng-container>\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header4Template>\n <div class=\"header1\">\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container> </ng-container>\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"text-end\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n\n </div>\n</ng-template>\n\n<ng-template #logoSectionTemplate>\n <div class=\"d-flex gap-3 align-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\n (click)=\"!edit ? goToHome() : ''\">\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\n </div>\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\n </div>\n </div>\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <!-- </div> -->\n</ng-template>\n\n<ng-template #pageLinksTemplate>\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\n <div class=\"d-flex gap-3\"\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\n <ng-container *ngFor=\"let item of getNavbarButton\">\n <ng-container *ngIf=\"item.showHeader\">\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\n </ng-container>\n </ng-container>\n </div>\n\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\n <div class=\"position-relative\">\n <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\n [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n {{link | lowercase | titlecase}}\n </button>\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\n </div>\n </div>\n </ng-container>\n </ng-container>\n\n </div>\n\n\n</ng-template>\n\n<ng-template #buttonsTemplate>\n <div class=\"d-flex\">\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\n <div *ngFor=\"let button of action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\n (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\" [style.borderColor]=\"backgroundInfo?.accentColor\">\n <mat-icon>person_outline</mat-icon>\n Login\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn && !isMobile\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n </div>\n </div>\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\n [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\n</ng-template>\n\n<ng-template #mobileFooterTemplate>\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\n <div class=\"icons\" (click)=\"goToHome()\">\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\n <span [simpoColor]=\"simpoColor\">Home</span>\n </div>\n <div class=\"icons\" (click)=\"searchProducts()\">\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\n <span [simpoColor]=\"simpoColor\">Shop</span>\n </div>\n <div class=\"icons\" (click)=\"goToWishlist()\">\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\n </div>\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\n <span [simpoColor]=\"simpoColor\">Cart</span>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #ecommerceButtonsTemplate>\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\n <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\n </div> -->\n <div class=\"w-75 d-flex align-items-center\">\n <div class=\"input-group w-75 ml-2\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\n [style.color]=\"backgroundInfo?.accentColor\">\n <mat-icon class=\"h-100\"\n [ngStyle]=\"{'background' : backgroundInfo.background?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\n </div>\n <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"schemeAvailable\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\n height=\"30\" version=\"1.1\">\n <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\n <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path\n d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path\n d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\n [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n </g>\n </svg>\n <div [style.color]=\"accentColor\">Schemes</div>\n </div>\n </div>\n <div class=\"d-flex gap-3 align-items-center\">\n <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\n <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\n <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\n </div>\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\n Pincode\n </div>\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\n getPincode}}</div>\n\n <!-- (mouseleave)=\"showPincodeInput = false\" -->\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your PIN Code unlocks\n </div>\n <div class=\"sub-text text-center f-14 pincode-text\">\n Fastest delivery date, Try-at-Home availability,\n Nearest store and In-store design!\n </div>\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\n [class.error-border]=\"pinError\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\n class=\"w-75 p-0\">\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\n </div>\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\n Please enter a valid pincode\n </div>\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\n </div>\n <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\n {{getCartItemsCount}}</div>\n </div>\n <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\n stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\n </div>\n <!-- (mouseleave)=\"showLogin = false\" -->\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your Account\n </div>\n <div class=\"sub-text text-center f-14\">\n Access account & manage your orders.\n </div>\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"style?.background?.color\">Sign Up</div>\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\n </div>\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n </div>\n <!-- <div> -->\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\n <!-- </div> -->\n </div>\n</ng-template>\n\n<ng-template #navbarLinksTemplate>\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\n [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\n <ng-container *ngFor=\"let item of getNavbarButton\">\n <ng-container *ngIf=\"item.showHeader\">\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\n </ng-container>\n </ng-container>\n\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\n <div class=\"position-relative\">\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n {{link | uppercase}}\n </button>\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\n [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\n <div class=\"offcanvas-header\">\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\n <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\n </div>\n <div class=\"offcanvas-body\">\n <div class=\"pages\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </div>\n </div>\n <div class=\"offcanvas-footer\">\n <div class=\"canvas-button\">\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\n </div>\n </div>\n</div>\n\n<ng-template #ecomProfileTemplate>\n <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-16 py-1\"\n (click)=\"showSearchBarMobile = !showSearchBarMobile\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\n\n\n <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\">\n\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n</ng-template>\n\n<ng-template #mobileLogoSectionTemplate>\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\n </div>\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\n </div>\n </div>\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <!-- </div> -->\n</ng-template>\n\n<ng-template #categoriesHeader>\n <div class=\"categories-header d-flex gap-3 py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\n [spacingHorizontal]=\"stylesLayout\" [style.background]=\"data?.styles?.headline?.color\">\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\n [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\n (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\">\n {{ele?.categoryName | titlecase}}\n </div>\n <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\n *ngIf=\"collectionList?.collections?.length > 0\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\n [simpoColor]=\"data?.styles?.headline?.color\">\n Collections\n </div>\n </div>\n <!-- (mouseleave)=\"showList = false\" -->\n <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\n <div class=\"row w-100 h-100\">\n <div class=\"col-7 row\">\n <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\n <div class=\"list-header mb-3\">By Price</div>\n <div class=\"d-flex flex-column gap-3 list-item\">\n <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\n <div class=\"each-price cursor-pointer\"\n (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\n {{price | titlecase}}\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"col-4 h-100 overflow-scroll\"\n *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\n <div class=\"list-header mb-3\">By Style</div>\n <div class=\"d-flex flex-column gap-3 list-item\">\n <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\n <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\n |\n titlecase}}</div>\n </ng-container>\n </div>\n </div>\n <div class=\"col-4\" *ngIf=\"toShowInJewellery\">\n <div class=\"list-header mb-3\">By Metal & Stone</div>\n <div class=\"d-flex flex-column gap-3 list-item\">\n <ng-container *ngFor=\"let collection of byMetalAndStone\">\n <div class=\"d-flex gap-2 align-items-center\">\n <div style=\"width: 15px;height: 20px;\">\n <img [src]=\"collection.imageUrl\" alt=\"\" class=\"w-100\">\n </div>\n <div class=\"each-price cursor-pointer\">{{collection.name\n |\n titlecase}}</div>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\n <ng-container *ngFor=\"let image of selectedCategory?.imageUrls | slice:0:2; let i = index\">\n <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\n <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\" (click)=\"filterByCategory()\">\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <!-- (mouseleave)=\"showCollections = false\" -->\n <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\n <div class=\"row w-100 h-100\">\n <div class=\"col-7 row\">\n <ng-container *ngFor=\"let collection of collectionList?.collections\">\n <div class=\"collection row col-3 align-items-center\"\n (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\n <div class=\"col-imag col-4\">\n <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\n </div>\n <div class=\"col-8 text-overflow\">\n {{collection?.collectionName | titlecase}}\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls\">\n <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls) | slice:0:2; let i = index\">\n <div class=\"image-container h-100 col-6 position-relative\" *ngIf=\"image\"\n (click)=\"applyFilterToList(image, 'collections')\">\n <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\n <div class=\"text-center p-2 btm-col-name position-absolute\"\n [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #mobileCategoryHeader>\n <div class=\"categories-header d-flex gap-3 py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\n [spacingHorizontal]=\"stylesLayout\">\n <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\n <div class=\"cat-img d-flex justify-content-center align-items-center\">\n <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\n </div>\n <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\n </div>\n </div>\n</ng-template>", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{height:44px;gap:26px!important}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.mob-form-control{position:absolute;right:10px;width:95%;top:85px;border-radius:12px!important}.categories-header{height:unset!important;margin-top:var(--margin-top)}.w-98{width:98%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:1000000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:8px}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:-15px;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i4.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i4.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId", "accentColor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky", "categoryHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: MovingTextComponent, selector: "simpo-moving-text", inputs: ["data", "edit", "delete", "customClass", "index"] }] }); }
14642
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeaderSectionComponent, isStandalone: true, selector: "simpo-header-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\n <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\n [class.margin-bottom]=\"isHeaderSticky && isMobile && !isEcommerceWebsite\">\n <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\n [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\n simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\n (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\n <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\n <ng-container *ngIf=\"style?.headline?.display\">\n <div>\n <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\n </div>\n </ng-container>\n <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\n </div>\n <!-- <div class=\"input-group mx-2 mb-2 w-98\" *ngIf=\"isMobile && isEcommerceWebsite\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\n <mat-icon class=\"h-100\"\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"style?.background?.color\">search</mat-icon>\n </div> -->\n <ng-container *ngIf=\"isEcommerceWebsite && !isMobile\">\n <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n </div>\n\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\n <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\n </ng-container>\n</section>\n\n<ng-template #header1Template>\n <div class=\"header1\">\n <div>\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 95 : ''\">\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\">menu</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header2Template>\n <div class=\"header1\">\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"text-end\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header3Template>\n <div class=\"header1\">\n <div>\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n </ng-container>\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header4Template>\n <div class=\"header1\">\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container> </ng-container>\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"text-end\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n\n </div>\n</ng-template>\n\n<ng-template #logoSectionTemplate>\n <div class=\"d-flex gap-3 align-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\n (click)=\"!edit ? goToHome() : ''\">\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\n </div>\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\n </div>\n </div>\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <!-- </div> -->\n</ng-template>\n\n<ng-template #pageLinksTemplate>\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\n <div class=\"d-flex gap-3\"\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\n <ng-container *ngFor=\"let item of getNavbarButton\">\n <ng-container *ngIf=\"item.showHeader\">\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\n </ng-container>\n </ng-container>\n </div>\n\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\n <div class=\"position-relative\">\n <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\n [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n {{link | lowercase | titlecase}}\n </button>\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\n </div>\n </div>\n </ng-container>\n </ng-container>\n\n </div>\n\n\n</ng-template>\n\n<ng-template #buttonsTemplate>\n <div class=\"d-flex\">\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\n <div *ngFor=\"let button of action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\n (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\" [style.borderColor]=\"backgroundInfo?.accentColor\">\n <mat-icon>person_outline</mat-icon>\n Login\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn && !isMobile\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n </div>\n </div>\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\n [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\n</ng-template>\n\n<ng-template #mobileFooterTemplate>\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\n <div class=\"icons\" (click)=\"goToHome()\">\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\n <span [simpoColor]=\"simpoColor\">Home</span>\n </div>\n <div class=\"icons\" (click)=\"searchProducts()\">\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\n <span [simpoColor]=\"simpoColor\">Shop</span>\n </div>\n <div class=\"icons\" (click)=\"goToWishlist()\">\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\n </div>\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\n <span [simpoColor]=\"simpoColor\">Cart</span>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #ecommerceButtonsTemplate>\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\n <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\n </div> -->\n <div class=\"w-75 d-flex align-items-center\">\n <div class=\"input-group w-75 ml-2\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\n [style.color]=\"backgroundInfo?.accentColor\">\n <mat-icon class=\"h-100\"\n [ngStyle]=\"{'background' : backgroundInfo.background?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\n </div>\n <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"schemeAvailable\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\n height=\"30\" version=\"1.1\">\n <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\n <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path\n d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path\n d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\n [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n </g>\n </svg>\n <div [style.color]=\"accentColor\">Schemes</div>\n </div>\n </div>\n <div class=\"d-flex gap-3 align-items-center\">\n <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\n <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\n <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\n </div>\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\n Pincode\n </div>\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\n getPincode}}</div>\n\n <!-- (mouseleave)=\"showPincodeInput = false\" -->\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your PIN Code unlocks\n </div>\n <div class=\"sub-text text-center f-14 pincode-text\">\n Fastest delivery date, Try-at-Home availability,\n Nearest store and In-store design!\n </div>\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\n [class.error-border]=\"pinError\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\n class=\"w-75 p-0\">\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\n </div>\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\n Please enter a valid pincode\n </div>\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\n </div>\n <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\n {{getCartItemsCount}}</div>\n </div>\n <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\n stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\n </div>\n <!-- (mouseleave)=\"showLogin = false\" -->\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your Account\n </div>\n <div class=\"sub-text text-center f-14\">\n Access account & manage your orders.\n </div>\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"style?.background?.color\">Sign Up</div>\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\n </div>\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n </div>\n <!-- <div> -->\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\n <!-- </div> -->\n </div>\n</ng-template>\n\n<ng-template #navbarLinksTemplate>\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\n [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\n <ng-container *ngFor=\"let item of getNavbarButton\">\n <ng-container *ngIf=\"item.showHeader\">\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\n </ng-container>\n </ng-container>\n\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\n <div class=\"position-relative\">\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n {{link | uppercase}}\n </button>\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\n [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\n <div class=\"offcanvas-header\">\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\n <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\n </div>\n <div class=\"offcanvas-body\">\n <div class=\"pages\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </div>\n </div>\n <div class=\"offcanvas-footer\">\n <div class=\"canvas-button\">\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\n </div>\n </div>\n</div>\n\n<ng-template #ecomProfileTemplate>\n <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-16 py-1\"\n (click)=\"showSearchBarMobile = !showSearchBarMobile\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\n\n\n <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\">\n\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n</ng-template>\n\n<ng-template #mobileLogoSectionTemplate>\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\n </div>\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\n </div>\n </div>\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <!-- </div> -->\n</ng-template>\n\n<ng-template #categoriesHeader>\n <div class=\"categories-header d-flex gap-3 py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\n [spacingHorizontal]=\"stylesLayout\" [style.background]=\"data?.styles?.headline?.color\">\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\n [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\n (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\">\n {{ele?.categoryName | titlecase}}\n </div>\n <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\n *ngIf=\"collectionList?.collections?.length > 0\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\n [simpoColor]=\"data?.styles?.headline?.color\">\n Collections\n </div>\n </div>\n <!-- (mouseleave)=\"showList = false\" -->\n <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\n <div class=\"row w-100 h-100\">\n <div class=\"col-7 row\">\n <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\n <div class=\"list-header mb-3\">By Price</div>\n <div class=\"d-flex flex-column gap-3 list-item\">\n <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\n <div class=\"each-price cursor-pointer\"\n (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\n {{price | titlecase}}\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"col-4 h-100 overflow-scroll\"\n *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\n <div class=\"list-header mb-3\">By Style</div>\n <div class=\"d-flex flex-column gap-3 list-item\">\n <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\n <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\n |\n titlecase}}</div>\n </ng-container>\n </div>\n </div>\n <div class=\"col-4\" *ngIf=\"toShowInJewellery\">\n <div class=\"list-header mb-3\">By Metal & Stone</div>\n <div class=\"d-flex flex-column gap-3 list-item\">\n <ng-container *ngFor=\"let collection of byMetalAndStone\">\n <div class=\"d-flex gap-2 align-items-center\">\n <div style=\"width: 15px;height: 20px;\">\n <img [src]=\"collection.imageUrl\" alt=\"\" class=\"w-100\">\n </div>\n <div class=\"each-price cursor-pointer\">{{collection.name\n |\n titlecase}}</div>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\n <ng-container *ngFor=\"let image of selectedCategory?.imageUrls | slice:0:2; let i = index\">\n <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\n <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\" (click)=\"filterByCategory()\">\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <!-- (mouseleave)=\"showCollections = false\" -->\n <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\n <div class=\"row w-100 h-100\">\n <div class=\"col-7 row\">\n <ng-container *ngFor=\"let collection of collectionList?.collections\">\n <div class=\"collection row col-3 align-items-center\"\n (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\n <div class=\"col-imag col-4\">\n <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\n </div>\n <div class=\"col-8 text-overflow\">\n {{collection?.collectionName | titlecase}}\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls\">\n <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls) | slice:0:2; let i = index\">\n <div class=\"image-container h-100 col-6 position-relative\" *ngIf=\"image\"\n (click)=\"applyFilterToList(image, 'collections')\">\n <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\n <div class=\"text-center p-2 btm-col-name position-absolute\"\n [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #mobileCategoryHeader>\n <div class=\"categories-header d-flex gap-3 py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\n [spacingHorizontal]=\"stylesLayout\">\n <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\n <div class=\"cat-img d-flex justify-content-center align-items-center\">\n <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\n </div>\n <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\n </div>\n </div>\n</ng-template>", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{height:44px;gap:26px!important}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.mob-form-control{position:absolute;right:10px;width:95%;top:85px;border-radius:12px!important}.categories-header{height:unset!important;margin-top:var(--margin-top)}.w-98{width:98%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:1000000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:8px}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:-15px;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i4.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i4.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId", "accentColor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky", "categoryHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: MovingTextComponent, selector: "simpo-moving-text", inputs: ["data", "edit", "delete", "customClass", "index"] }] }); }
14607
14643
  }
14608
14644
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderSectionComponent, decorators: [{
14609
14645
  type: Component,
@@ -14627,7 +14663,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
14627
14663
  SpacingHorizontalDirective,
14628
14664
  MovingTextComponent,
14629
14665
  ContentFitDirective,
14630
- ], template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\n <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\n [class.margin-bottom]=\"isHeaderSticky && isEcommerceWebsite && isMobile\">\n <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\n [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\n simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\n (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\n <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\n <ng-container *ngIf=\"style?.headline?.display\">\n <div>\n <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\n </div>\n </ng-container>\n <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\n </div>\n <!-- <div class=\"input-group mx-2 mb-2 w-98\" *ngIf=\"isMobile && isEcommerceWebsite\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\n <mat-icon class=\"h-100\"\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"style?.background?.color\">search</mat-icon>\n </div> -->\n <ng-container *ngIf=\"isEcommerceWebsite && !isMobile\">\n <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n </div>\n\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\n <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\n </ng-container>\n</section>\n\n<ng-template #header1Template>\n <div class=\"header1\">\n <div>\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 95 : ''\">\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\">menu</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header2Template>\n <div class=\"header1\">\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"text-end\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header3Template>\n <div class=\"header1\">\n <div>\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n </ng-container>\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header4Template>\n <div class=\"header1\">\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container> </ng-container>\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"text-end\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n\n </div>\n</ng-template>\n\n<ng-template #logoSectionTemplate>\n <div class=\"d-flex gap-3 align-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\n (click)=\"!edit ? goToHome() : ''\">\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\n </div>\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\n </div>\n </div>\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <!-- </div> -->\n</ng-template>\n\n<ng-template #pageLinksTemplate>\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\n <div class=\"d-flex gap-3\"\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\n <ng-container *ngFor=\"let item of getNavbarButton\">\n <ng-container *ngIf=\"item.showHeader\">\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\n </ng-container>\n </ng-container>\n </div>\n\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\n <div class=\"position-relative\">\n <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\n [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n {{link | lowercase | titlecase}}\n </button>\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\n </div>\n </div>\n </ng-container>\n </ng-container>\n\n </div>\n\n\n</ng-template>\n\n<ng-template #buttonsTemplate>\n <div class=\"d-flex\">\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\n <div *ngFor=\"let button of action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\n (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\" [style.borderColor]=\"backgroundInfo?.accentColor\">\n <mat-icon>person_outline</mat-icon>\n Login\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn && !isMobile\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n </div>\n </div>\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\n [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\n</ng-template>\n\n<ng-template #mobileFooterTemplate>\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\n <div class=\"icons\" (click)=\"goToHome()\">\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\n <span [simpoColor]=\"simpoColor\">Home</span>\n </div>\n <div class=\"icons\" (click)=\"searchProducts()\">\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\n <span [simpoColor]=\"simpoColor\">Shop</span>\n </div>\n <div class=\"icons\" (click)=\"goToWishlist()\">\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\n </div>\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\n <span [simpoColor]=\"simpoColor\">Cart</span>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #ecommerceButtonsTemplate>\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\n <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\n </div> -->\n <div class=\"w-75 d-flex align-items-center\">\n <div class=\"input-group w-75 ml-2\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\n [style.color]=\"backgroundInfo?.accentColor\">\n <mat-icon class=\"h-100\"\n [ngStyle]=\"{'background' : backgroundInfo.background?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\n </div>\n <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"schemeAvailable\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\n height=\"30\" version=\"1.1\">\n <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\n <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path\n d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path\n d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\n [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n </g>\n </svg>\n <div [style.color]=\"accentColor\">Schemes</div>\n </div>\n </div>\n <div class=\"d-flex gap-3 align-items-center\">\n <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\n <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\n <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\n </div>\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\n Pincode\n </div>\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\n getPincode}}</div>\n\n <!-- (mouseleave)=\"showPincodeInput = false\" -->\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your PIN Code unlocks\n </div>\n <div class=\"sub-text text-center f-14 pincode-text\">\n Fastest delivery date, Try-at-Home availability,\n Nearest store and In-store design!\n </div>\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\n [class.error-border]=\"pinError\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\n class=\"w-75 p-0\">\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\n </div>\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\n Please enter a valid pincode\n </div>\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\n </div>\n <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\n {{getCartItemsCount}}</div>\n </div>\n <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\n stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\n </div>\n <!-- (mouseleave)=\"showLogin = false\" -->\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your Account\n </div>\n <div class=\"sub-text text-center f-14\">\n Access account & manage your orders.\n </div>\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"style?.background?.color\">Sign Up</div>\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\n </div>\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n </div>\n <!-- <div> -->\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\n <!-- </div> -->\n </div>\n</ng-template>\n\n<ng-template #navbarLinksTemplate>\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\n [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\n <ng-container *ngFor=\"let item of getNavbarButton\">\n <ng-container *ngIf=\"item.showHeader\">\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\n </ng-container>\n </ng-container>\n\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\n <div class=\"position-relative\">\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n {{link | uppercase}}\n </button>\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\n [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\n <div class=\"offcanvas-header\">\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\n <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\n </div>\n <div class=\"offcanvas-body\">\n <div class=\"pages\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </div>\n </div>\n <div class=\"offcanvas-footer\">\n <div class=\"canvas-button\">\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\n </div>\n </div>\n</div>\n\n<ng-template #ecomProfileTemplate>\n <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-16 py-1\"\n (click)=\"showSearchBarMobile = !showSearchBarMobile\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\n\n\n <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\">\n\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n</ng-template>\n\n<ng-template #mobileLogoSectionTemplate>\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\n </div>\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\n </div>\n </div>\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <!-- </div> -->\n</ng-template>\n\n<ng-template #categoriesHeader>\n <div class=\"categories-header d-flex gap-3 py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\n [spacingHorizontal]=\"stylesLayout\" [style.background]=\"data?.styles?.headline?.color\">\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\n [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\n (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\">\n {{ele?.categoryName | titlecase}}\n </div>\n <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\n *ngIf=\"collectionList?.collections?.length > 0\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\n [simpoColor]=\"data?.styles?.headline?.color\">\n Collections\n </div>\n </div>\n <!-- (mouseleave)=\"showList = false\" -->\n <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\n <div class=\"row w-100 h-100\">\n <div class=\"col-7 row\">\n <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\n <div class=\"list-header mb-3\">By Price</div>\n <div class=\"d-flex flex-column gap-3 list-item\">\n <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\n <div class=\"each-price cursor-pointer\"\n (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\n {{price | titlecase}}\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"col-4 h-100 overflow-scroll\"\n *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\n <div class=\"list-header mb-3\">By Style</div>\n <div class=\"d-flex flex-column gap-3 list-item\">\n <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\n <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\n |\n titlecase}}</div>\n </ng-container>\n </div>\n </div>\n <div class=\"col-4\" *ngIf=\"toShowInJewellery\">\n <div class=\"list-header mb-3\">By Metal & Stone</div>\n <div class=\"d-flex flex-column gap-3 list-item\">\n <ng-container *ngFor=\"let collection of byMetalAndStone\">\n <div class=\"d-flex gap-2 align-items-center\">\n <div style=\"width: 15px;height: 20px;\">\n <img [src]=\"collection.imageUrl\" alt=\"\" class=\"w-100\">\n </div>\n <div class=\"each-price cursor-pointer\">{{collection.name\n |\n titlecase}}</div>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\n <ng-container *ngFor=\"let image of selectedCategory?.imageUrls | slice:0:2; let i = index\">\n <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\n <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\" (click)=\"filterByCategory()\">\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <!-- (mouseleave)=\"showCollections = false\" -->\n <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\n <div class=\"row w-100 h-100\">\n <div class=\"col-7 row\">\n <ng-container *ngFor=\"let collection of collectionList?.collections\">\n <div class=\"collection row col-3 align-items-center\"\n (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\n <div class=\"col-imag col-4\">\n <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\n </div>\n <div class=\"col-8 text-overflow\">\n {{collection?.collectionName | titlecase}}\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls\">\n <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls) | slice:0:2; let i = index\">\n <div class=\"image-container h-100 col-6 position-relative\" *ngIf=\"image\"\n (click)=\"applyFilterToList(image, 'collections')\">\n <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\n <div class=\"text-center p-2 btm-col-name position-absolute\"\n [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #mobileCategoryHeader>\n <div class=\"categories-header d-flex gap-3 py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\n [spacingHorizontal]=\"stylesLayout\">\n <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\n <div class=\"cat-img d-flex justify-content-center align-items-center\">\n <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\n </div>\n <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\n </div>\n </div>\n</ng-template>", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{height:44px;gap:26px!important}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.mob-form-control{position:absolute;right:10px;width:95%;top:85px;border-radius:12px!important}.categories-header{height:unset!important;margin-top:var(--margin-top)}.w-98{width:98%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:1000000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:8px}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:-15px;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}\n"] }]
14666
+ ], template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\n <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\n [class.margin-bottom]=\"isHeaderSticky && isMobile && !isEcommerceWebsite\">\n <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\n [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\n simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\n (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\n <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\n <ng-container *ngIf=\"style?.headline?.display\">\n <div>\n <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\n </div>\n </ng-container>\n <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\n </div>\n <!-- <div class=\"input-group mx-2 mb-2 w-98\" *ngIf=\"isMobile && isEcommerceWebsite\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\n <mat-icon class=\"h-100\"\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"style?.background?.color\">search</mat-icon>\n </div> -->\n <ng-container *ngIf=\"isEcommerceWebsite && !isMobile\">\n <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n </div>\n\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\n <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\n </ng-container>\n</section>\n\n<ng-template #header1Template>\n <div class=\"header1\">\n <div>\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 95 : ''\">\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\">menu</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header2Template>\n <div class=\"header1\">\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"text-end\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header3Template>\n <div class=\"header1\">\n <div>\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n </ng-container>\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header4Template>\n <div class=\"header1\">\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container> </ng-container>\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"text-end\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n\n </div>\n</ng-template>\n\n<ng-template #logoSectionTemplate>\n <div class=\"d-flex gap-3 align-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\n (click)=\"!edit ? goToHome() : ''\">\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\n </div>\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\n </div>\n </div>\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <!-- </div> -->\n</ng-template>\n\n<ng-template #pageLinksTemplate>\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\n <div class=\"d-flex gap-3\"\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\n <ng-container *ngFor=\"let item of getNavbarButton\">\n <ng-container *ngIf=\"item.showHeader\">\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\n </ng-container>\n </ng-container>\n </div>\n\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\n <div class=\"position-relative\">\n <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\n [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n {{link | lowercase | titlecase}}\n </button>\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\n </div>\n </div>\n </ng-container>\n </ng-container>\n\n </div>\n\n\n</ng-template>\n\n<ng-template #buttonsTemplate>\n <div class=\"d-flex\">\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\n <div *ngFor=\"let button of action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\n (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\" [style.borderColor]=\"backgroundInfo?.accentColor\">\n <mat-icon>person_outline</mat-icon>\n Login\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn && !isMobile\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n </div>\n </div>\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\n [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\n</ng-template>\n\n<ng-template #mobileFooterTemplate>\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\n <div class=\"icons\" (click)=\"goToHome()\">\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\n <span [simpoColor]=\"simpoColor\">Home</span>\n </div>\n <div class=\"icons\" (click)=\"searchProducts()\">\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\n <span [simpoColor]=\"simpoColor\">Shop</span>\n </div>\n <div class=\"icons\" (click)=\"goToWishlist()\">\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\n </div>\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\n <span [simpoColor]=\"simpoColor\">Cart</span>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #ecommerceButtonsTemplate>\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\n <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\n </div> -->\n <div class=\"w-75 d-flex align-items-center\">\n <div class=\"input-group w-75 ml-2\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\n [style.color]=\"backgroundInfo?.accentColor\">\n <mat-icon class=\"h-100\"\n [ngStyle]=\"{'background' : backgroundInfo.background?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\n </div>\n <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"schemeAvailable\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\n height=\"30\" version=\"1.1\">\n <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\n <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path\n d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path\n d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\n [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n </g>\n </svg>\n <div [style.color]=\"accentColor\">Schemes</div>\n </div>\n </div>\n <div class=\"d-flex gap-3 align-items-center\">\n <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\n <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\n <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\n </div>\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\n Pincode\n </div>\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\n getPincode}}</div>\n\n <!-- (mouseleave)=\"showPincodeInput = false\" -->\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your PIN Code unlocks\n </div>\n <div class=\"sub-text text-center f-14 pincode-text\">\n Fastest delivery date, Try-at-Home availability,\n Nearest store and In-store design!\n </div>\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\n [class.error-border]=\"pinError\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\n class=\"w-75 p-0\">\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\n </div>\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\n Please enter a valid pincode\n </div>\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\n </div>\n <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\n {{getCartItemsCount}}</div>\n </div>\n <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\n stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\n </div>\n <!-- (mouseleave)=\"showLogin = false\" -->\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your Account\n </div>\n <div class=\"sub-text text-center f-14\">\n Access account & manage your orders.\n </div>\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"style?.background?.color\">Sign Up</div>\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\n </div>\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n </div>\n <!-- <div> -->\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\n <!-- </div> -->\n </div>\n</ng-template>\n\n<ng-template #navbarLinksTemplate>\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\n [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\n <ng-container *ngFor=\"let item of getNavbarButton\">\n <ng-container *ngIf=\"item.showHeader\">\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\n </ng-container>\n </ng-container>\n\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\n <div class=\"position-relative\">\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n {{link | uppercase}}\n </button>\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\n [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\n <div class=\"offcanvas-header\">\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\n <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\n </div>\n <div class=\"offcanvas-body\">\n <div class=\"pages\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </div>\n </div>\n <div class=\"offcanvas-footer\">\n <div class=\"canvas-button\">\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\n </div>\n </div>\n</div>\n\n<ng-template #ecomProfileTemplate>\n <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-16 py-1\"\n (click)=\"showSearchBarMobile = !showSearchBarMobile\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\n\n\n <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\">\n\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n</ng-template>\n\n<ng-template #mobileLogoSectionTemplate>\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\n </div>\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\n </div>\n </div>\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <!-- </div> -->\n</ng-template>\n\n<ng-template #categoriesHeader>\n <div class=\"categories-header d-flex gap-3 py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\n [spacingHorizontal]=\"stylesLayout\" [style.background]=\"data?.styles?.headline?.color\">\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\n [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\n (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\">\n {{ele?.categoryName | titlecase}}\n </div>\n <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\n *ngIf=\"collectionList?.collections?.length > 0\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\n [simpoColor]=\"data?.styles?.headline?.color\">\n Collections\n </div>\n </div>\n <!-- (mouseleave)=\"showList = false\" -->\n <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\n <div class=\"row w-100 h-100\">\n <div class=\"col-7 row\">\n <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\n <div class=\"list-header mb-3\">By Price</div>\n <div class=\"d-flex flex-column gap-3 list-item\">\n <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\n <div class=\"each-price cursor-pointer\"\n (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\n {{price | titlecase}}\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"col-4 h-100 overflow-scroll\"\n *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\n <div class=\"list-header mb-3\">By Style</div>\n <div class=\"d-flex flex-column gap-3 list-item\">\n <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\n <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\n |\n titlecase}}</div>\n </ng-container>\n </div>\n </div>\n <div class=\"col-4\" *ngIf=\"toShowInJewellery\">\n <div class=\"list-header mb-3\">By Metal & Stone</div>\n <div class=\"d-flex flex-column gap-3 list-item\">\n <ng-container *ngFor=\"let collection of byMetalAndStone\">\n <div class=\"d-flex gap-2 align-items-center\">\n <div style=\"width: 15px;height: 20px;\">\n <img [src]=\"collection.imageUrl\" alt=\"\" class=\"w-100\">\n </div>\n <div class=\"each-price cursor-pointer\">{{collection.name\n |\n titlecase}}</div>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\n <ng-container *ngFor=\"let image of selectedCategory?.imageUrls | slice:0:2; let i = index\">\n <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\n <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\" (click)=\"filterByCategory()\">\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <!-- (mouseleave)=\"showCollections = false\" -->\n <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\n <div class=\"row w-100 h-100\">\n <div class=\"col-7 row\">\n <ng-container *ngFor=\"let collection of collectionList?.collections\">\n <div class=\"collection row col-3 align-items-center\"\n (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\n <div class=\"col-imag col-4\">\n <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\n </div>\n <div class=\"col-8 text-overflow\">\n {{collection?.collectionName | titlecase}}\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls\">\n <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls) | slice:0:2; let i = index\">\n <div class=\"image-container h-100 col-6 position-relative\" *ngIf=\"image\"\n (click)=\"applyFilterToList(image, 'collections')\">\n <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\n <div class=\"text-center p-2 btm-col-name position-absolute\"\n [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #mobileCategoryHeader>\n <div class=\"categories-header d-flex gap-3 py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\n [spacingHorizontal]=\"stylesLayout\">\n <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\n <div class=\"cat-img d-flex justify-content-center align-items-center\">\n <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\n </div>\n <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\n </div>\n </div>\n</ng-template>", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{height:44px;gap:26px!important}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.mob-form-control{position:absolute;right:10px;width:95%;top:85px;border-radius:12px!important}.categories-header{height:unset!important;margin-top:var(--margin-top)}.w-98{width:98%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:1000000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:8px}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:-15px;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}\n"] }]
14631
14667
  }], ctorParameters: () => [{ type: EventsService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i1$1.MatDialog }, { type: StorageServiceService }, { type: RestService }, { type: EventsService }, { type: undefined, decorators: [{
14632
14668
  type: Inject,
14633
14669
  args: [LOCAL_STORAGE]
@@ -21611,5 +21647,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
21611
21647
  * Generated bundle index. Do not edit.
21612
21648
  */
21613
21649
 
21614
- export { API_URL, AddNewSectionComponent, AlignContent, AlignmentDirective, AnimationDirective, AppointmentFormComponent, AuthenticateUserComponent, AuthenticationRequiredComponent, BANNERALIGNMENT, BANNERHALIGN, BUCKET_URL, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BookAppointmentComponent, BorderDirective, ButtonDirectiveDirective, CMIS_URL, CarouselBannerComponent, Cart, CartComponent, Category, CategoryProductComponent, ChannelType, CheckoutComponent, ChooseUsSectionComponent, Collection, ColorDirective, ColumnDirectiveDirective, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, CustomerReviewComponent, DeviderType, ECOMMERCE_URL, EndUserService, EnrollmentFormComponent, EventsService, FaqSectionComponent, FeaturedCategoryComponent, FeaturedCollectionComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterComponent, FooterSectionComponent, FooterType, FooterTypes, GradientDirection, HALIGN, HEADER_STYLING, HeaderButtonStyle, HeaderSectionComponent, HeaderTextComponent, Header_Type, HeightDirective, HoverAnimationDirective, HoverDirective, IconDirectiveDirective, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LOCAL_STORAGE, LocationSectionComponent, LogoGalleryComponent, LogoShowcaseComponent, MapType, MergeHeaderDirective, MovingTextComponent, NavbarSectionComponent, NewCollectionComponent, NewServicesComponent, NewTestimonialsComponent, NewsLetterComponentComponent, ObjectPositionDirective, OverlayDirective, OverlayValue, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, Product, ProductCardTheme, ProductCategoryListComponent, ProductDescComponent, ProductListComponent, PropertyComponentComponent, PropertyListComponent, RecentBlogPostSectionComponent, RedirectionLinkType, RegistrationFormComponent, RemoveCarouselDirective, ReturnsCalculatorComponent, SPACING$1 as SPACING, SPACINGALIGN, SanitizeHtmlPipe, SchemeDetailComponent, SchemesComponent, ServiceSectionComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, SpacingAroundDirective, SpacingDirective, StoreListComponent, StorePageComponent, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialSectionComponent, TestimonialVideoComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, TranslateOnhoverDirective, UserProfileComponent, UspVideoSectionComponent, VALIGN, VerifyComponent, VideoSectionComponent, ViewBlogComponent, WhislistComponent, animation, applySpacing, applyStyle, cartType, checkItemAlreadyAdded, contentAlignment, fitContent, fitScreen, fontSize, headlineAnimationType, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective, svgData, syncItemToServerDBRequest };
21650
+ export { API_URL, AddNewSectionComponent, AlignContent, AlignmentDirective, AnimationDirective, AppointmentFormComponent, AuthenticateUserComponent, AuthenticationRequiredComponent, BANNERALIGNMENT, BANNERHALIGN, BUCKET_URL, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BookAppointmentComponent, BorderDirective, ButtonDirectiveDirective, CMIS_URL, CarouselBannerComponent, Cart, CartComponent, Category, CategoryProductComponent, ChannelType, CheckoutComponent, ChooseUsSectionComponent, Collection, ColorDirective, ColumnDirectiveDirective, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, CustomerReviewComponent, DeviderType, ECOMMERCE_URL, EndUserService, EnrollmentFormComponent, EventsService, FaqSectionComponent, FeaturedCategoryComponent, FeaturedCollectionComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterComponent, FooterSectionComponent, FooterType, FooterTypes, GradientDirection, HALIGN, HEADER_STYLING, HeaderButtonStyle, HeaderSectionComponent, HeaderTextComponent, Header_Type, HeightDirective, HoverAnimationDirective, HoverDirective, IconDirectiveDirective, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LOCAL_STORAGE, LocationSectionComponent, LogoGalleryComponent, LogoShowcaseComponent, MapType, MergeHeaderDirective, MovingTextComponent, NavbarSectionComponent, NewCollectionComponent, NewServicesComponent, NewTestimonialsComponent, NewsLetterComponentComponent, ObjectPositionDirective, OverlayDirective, OverlayValue, PASSBOOK_URL, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, Product, ProductCardTheme, ProductCategoryListComponent, ProductDescComponent, ProductListComponent, PropertyComponentComponent, PropertyListComponent, RecentBlogPostSectionComponent, RedirectionLinkType, RegistrationFormComponent, RemoveCarouselDirective, ReturnsCalculatorComponent, SPACING$1 as SPACING, SPACINGALIGN, SanitizeHtmlPipe, SchemeDetailComponent, SchemesComponent, ServiceSectionComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, SpacingAroundDirective, SpacingDirective, StoreListComponent, StorePageComponent, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialSectionComponent, TestimonialVideoComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, TranslateOnhoverDirective, UserProfileComponent, UspVideoSectionComponent, VALIGN, VerifyComponent, VideoSectionComponent, ViewBlogComponent, WhislistComponent, animation, applySpacing, applyStyle, cartType, checkItemAlreadyAdded, contentAlignment, fitContent, fitScreen, fontSize, headlineAnimationType, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective, svgData, syncItemToServerDBRequest };
21615
21651
  //# sourceMappingURL=simpo-component-library.mjs.map