simpo-component-library 3.6.466 → 3.6.467

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 (29) hide show
  1. package/esm2022/lib/directive/image-directive.directive.mjs +5 -2
  2. package/esm2022/lib/directive/spacing-around.directive.mjs +3 -3
  3. package/esm2022/lib/elements/link-editor/link-editor.component.mjs +13 -4
  4. package/esm2022/lib/sections/footer/footer.component.mjs +3 -3
  5. package/esm2022/lib/sections/header-section/header-section.component.mjs +3 -3
  6. package/esm2022/lib/sections/image-carousel-section/image-carousel-section.component.mjs +12 -5
  7. package/esm2022/lib/sections/logo-showcase/logo-showcase.component.mjs +7 -7
  8. package/esm2022/lib/sections/service-section/service-section.component.mjs +3 -3
  9. package/fesm2022/simpo-component-library.mjs +66 -48
  10. package/fesm2022/simpo-component-library.mjs.map +1 -1
  11. package/lib/directive/background-directive.d.ts +1 -1
  12. package/lib/directive/button-directive.directive.d.ts +1 -1
  13. package/lib/directive/color.directive.d.ts +1 -1
  14. package/lib/ecommerce/sections/new-collection/new-collection.component.d.ts +1 -1
  15. package/lib/ecommerce/sections/product-desc/product-desc.component.d.ts +1 -1
  16. package/lib/ecommerce/sections/product-list/product-list.component.d.ts +1 -1
  17. package/lib/ecommerce/sections/store-list/store-list.component.d.ts +1 -1
  18. package/lib/ecommerce/sections/store-page/store-page.component.d.ts +1 -1
  19. package/lib/elements/link-editor/link-editor.component.d.ts +2 -1
  20. package/lib/sections/banner-grid-section/banner-grid-section.component.d.ts +1 -1
  21. package/lib/sections/contact-us/contact-us.component.d.ts +1 -1
  22. package/lib/sections/header-section/header-section.component.d.ts +1 -1
  23. package/lib/sections/image-carousel-section/image-carousel-section.component.d.ts +2 -1
  24. package/lib/sections/logo-showcase/logo-showcase.component.d.ts +2 -2
  25. package/lib/sections/moving-text/moving-text.component.d.ts +1 -1
  26. package/lib/sections/pricing-section/pricing-section.component.d.ts +1 -1
  27. package/package.json +1 -1
  28. package/simpo-component-library-3.6.467.tgz +0 -0
  29. 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
  }
@@ -1323,9 +1326,18 @@ class LinkEditorComponent {
1323
1326
  addNewLink() {
1324
1327
  this.dialogRef.close({ link: this.link });
1325
1328
  }
1329
+ getColorLabel() {
1330
+ if (this.data.buttonStyle?.type == 'Outline') {
1331
+ return 'Outline Color';
1332
+ }
1333
+ else if (this.data.buttonStyle?.type == 'Text') {
1334
+ return 'Text Color';
1335
+ }
1336
+ return 'Button Color';
1337
+ }
1326
1338
  changeButtonStyle() {
1327
1339
  // debugger
1328
- if (this.data?.buttonStyle?.type == 'Outline') {
1340
+ if (this.data?.buttonStyle?.type == 'Outline' || this.data?.buttonStyle?.type == 'Text') {
1329
1341
  this.backgroundType = ['Solid'];
1330
1342
  this.data.buttonStyle.colorType = 'Solid';
1331
1343
  }
@@ -1413,11 +1425,11 @@ class LinkEditorComponent {
1413
1425
  }
1414
1426
  }
1415
1427
  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"] }] }); }
1428
+ 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
1429
  }
1418
1430
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LinkEditorComponent, decorators: [{
1419
1431
  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"] }]
1432
+ 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
1433
  }], ctorParameters: () => [{ type: ElementServiceService }, { type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
1422
1434
  type: Inject,
1423
1435
  args: [MAT_DIALOG_DATA]
@@ -4963,8 +4975,8 @@ class SpacingAroundDirective {
4963
4975
  this.el.nativeElement.style.setProperty("padding-bottom", '1rem');
4964
4976
  }
4965
4977
  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]);
4978
+ this.el.nativeElement.style.setProperty("padding-top", '0rem');
4979
+ this.el.nativeElement.style.setProperty("padding-bottom", '0rem');
4968
4980
  }
4969
4981
  }
4970
4982
  this.childDiv?.style.setProperty("border", this.getBorderColor(this.backgroundInfo?.color || '#ffffff'));
@@ -5636,6 +5648,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
5636
5648
  type: Input
5637
5649
  }] } });
5638
5650
 
5651
+ class SpacingDirective {
5652
+ constructor(el) {
5653
+ this.el = el;
5654
+ }
5655
+ ngOnChanges() {
5656
+ this.applySpacing();
5657
+ }
5658
+ applySpacing() {
5659
+ if (this.spacing) {
5660
+ applySpacing(this.el.nativeElement, this.spacing);
5661
+ }
5662
+ }
5663
+ 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 }); }
5664
+ 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 }); }
5665
+ }
5666
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpacingDirective, decorators: [{
5667
+ type: Directive,
5668
+ args: [{
5669
+ selector: '[simpoSpacing]',
5670
+ standalone: true,
5671
+ }]
5672
+ }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { spacing: [{
5673
+ type: Input,
5674
+ args: ['simpoSpacing']
5675
+ }] } });
5676
+
5639
5677
  class ImageCarouselSectionComponent extends BaseSection {
5640
5678
  // content: any;
5641
5679
  constructor(_eventService) {
@@ -5657,6 +5695,11 @@ class ImageCarouselSectionComponent extends BaseSection {
5657
5695
  get stylesLayout() {
5658
5696
  return { ...this.style?.layout };
5659
5697
  }
5698
+ get spacingLayout() {
5699
+ // if(this.data?.styles?.borderLessImage)
5700
+ // return undefined
5701
+ return { ...this.style?.layout?.spacing };
5702
+ }
5660
5703
  getPrevImage(index) {
5661
5704
  const prevIndex = (index - 1 + (this.content?.listItem?.data.length || 0)) % (this.content?.listItem.data.length || 0);
5662
5705
  return this.content?.listItem.data[prevIndex].image;
@@ -5677,9 +5720,9 @@ class ImageCarouselSectionComponent extends BaseSection {
5677
5720
  }, 100);
5678
5721
  }
5679
5722
  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:
5723
+ 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
5724
  //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"] }] }); }
5725
+ 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
5726
  }
5684
5727
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageCarouselSectionComponent, decorators: [{
5685
5728
  type: Component,
@@ -5701,8 +5744,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
5701
5744
  ObjectPositionDirective,
5702
5745
  ContentTitleDirective,
5703
5746
  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"] }]
5747
+ SpacingAroundDirective,
5748
+ SpacingDirective,
5749
+ ], 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
5750
  }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
5707
5751
  type: Input
5708
5752
  }], index: [{
@@ -5965,7 +6009,7 @@ class ServiceSectionComponent extends BaseSection {
5965
6009
  }, 100);
5966
6010
  }
5967
6011
  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:
6012
+ 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
6013
  //directive
5970
6014
  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
6015
  }
@@ -5999,7 +6043,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
5999
6043
  SpacingHorizontalDirective,
6000
6044
  SpacingAroundDirective,
6001
6045
  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"] }]
6046
+ ], 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
6047
  }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
6004
6048
  type: Input
6005
6049
  }], index: [{
@@ -9732,32 +9776,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
9732
9776
  type: Input
9733
9777
  }] } });
9734
9778
 
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
9779
  class HeightDirective {
9762
9780
  constructor(el) {
9763
9781
  this.el = el;
@@ -11844,13 +11862,13 @@ class LogoShowcaseComponent extends BaseSection {
11844
11862
  get animationDuration() {
11845
11863
  switch (this.styles?.logoSpeed) {
11846
11864
  case '4s':
11847
- return logoSpeed.Slow;
11865
+ return '6s';
11848
11866
  case '3s':
11849
- return logoSpeed.Normal;
11867
+ return '5s';
11850
11868
  case '2s':
11851
- return logoSpeed.Fast;
11869
+ return '4s';
11852
11870
  case '1s':
11853
- return logoSpeed.VeryFast;
11871
+ return '3s';
11854
11872
  }
11855
11873
  return logoSpeed.Normal;
11856
11874
  }
@@ -11892,11 +11910,11 @@ class LogoShowcaseComponent extends BaseSection {
11892
11910
  }
11893
11911
  }
11894
11912
  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"] }] }); }
11913
+ 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
11914
  }
11897
11915
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LogoShowcaseComponent, decorators: [{
11898
11916
  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"] }]
11917
+ 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 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
11918
  }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
11901
11919
  type: Input
11902
11920
  }], index: [{
@@ -14135,7 +14153,7 @@ class FooterComponent extends BaseSection {
14135
14153
  });
14136
14154
  }
14137
14155
  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:
14156
+ 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
14157
  //directives
14140
14158
  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
14159
  }
@@ -14155,7 +14173,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
14155
14173
  ContentFitDirective,
14156
14174
  TextEditorComponent,
14157
14175
  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"] }]
14176
+ ], 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
14177
  }], ctorParameters: () => [{ type: EventsService }, { type: RestService }, { type: i1$1.MatDialog }], propDecorators: { data: [{
14160
14178
  type: Input
14161
14179
  }], index: [{
@@ -14603,7 +14621,7 @@ class HeaderSectionComponent {
14603
14621
  this.router.navigate(['/login']);
14604
14622
  }
14605
14623
  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"] }] }); }
14624
+ 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
14625
  }
14608
14626
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderSectionComponent, decorators: [{
14609
14627
  type: Component,
@@ -14627,7 +14645,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
14627
14645
  SpacingHorizontalDirective,
14628
14646
  MovingTextComponent,
14629
14647
  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"] }]
14648
+ ], 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
14649
  }], 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
14650
  type: Inject,
14633
14651
  args: [LOCAL_STORAGE]