simpo-component-library 3.6.563 → 3.6.565

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 (26) hide show
  1. package/esm2022/lib/ecommerce/sections/small-product-listing/small-product-listing.component.mjs +2 -2
  2. package/esm2022/lib/sections/blog-list/blog-list.component.mjs +3 -3
  3. package/esm2022/lib/sections/contact-us/contact-us.component.mjs +13 -3
  4. package/esm2022/lib/sections/view-blog/view-blog.component.mjs +3 -3
  5. package/fesm2022/simpo-component-library.mjs +17 -7
  6. package/fesm2022/simpo-component-library.mjs.map +1 -1
  7. package/lib/directive/background-directive.d.ts +1 -1
  8. package/lib/directive/button-directive.directive.d.ts +1 -1
  9. package/lib/directive/color.directive.d.ts +1 -1
  10. package/lib/ecommerce/sections/featured-category/featured-category.component.d.ts +1 -1
  11. package/lib/ecommerce/sections/featured-category/featured-collection.component.d.ts +1 -1
  12. package/lib/ecommerce/sections/new-collection/new-collection.component.d.ts +2 -2
  13. package/lib/ecommerce/sections/product-desc/product-desc.component.d.ts +1 -1
  14. package/lib/ecommerce/sections/product-list/product-list.component.d.ts +1 -1
  15. package/lib/ecommerce/sections/store-list/store-list.component.d.ts +1 -1
  16. package/lib/ecommerce/sections/store-page/store-page.component.d.ts +1 -1
  17. package/lib/sections/banner-grid-section/banner-grid-section.component.d.ts +1 -1
  18. package/lib/sections/contact-us/contact-us.component.d.ts +3 -2
  19. package/lib/sections/faq-section/faq-section.component.d.ts +1 -1
  20. package/lib/sections/header-section/header-section.component.d.ts +1 -1
  21. package/lib/sections/image-grid-section/image-grid-section.component.d.ts +1 -1
  22. package/lib/sections/moving-text/moving-text.component.d.ts +1 -1
  23. package/lib/sections/pricing-section/pricing-section.component.d.ts +2 -2
  24. package/package.json +1 -1
  25. package/simpo-component-library-3.6.565.tgz +0 -0
  26. package/simpo-component-library-3.6.563.tgz +0 -0
@@ -10132,6 +10132,16 @@ class ContactUsComponent extends BaseSection {
10132
10132
  }
10133
10133
  canShowContactField(field) {
10134
10134
  return Object.hasOwn(field, "status") ? field.status : true;
10135
+ // return (
10136
+ // (Object.hasOwn(field, 'status') ? field.status : true) ||
10137
+ // (field?.options?.length > 0)
10138
+ // );
10139
+ }
10140
+ shouldShowDropdown(field) {
10141
+ return (field?.type === 'dropdown' &&
10142
+ Array.isArray(field.options) &&
10143
+ field.options.length > 0 &&
10144
+ this.canShowContactField(field));
10135
10145
  }
10136
10146
  getCardStyle() {
10137
10147
  let style = {
@@ -10163,7 +10173,7 @@ class ContactUsComponent extends BaseSection {
10163
10173
  return this.styles?.layout?.align === 'left' ? 'justify-content-start' : this.styles?.layout?.align === 'right' ? 'justify-content-end' : 'justify-content-center';
10164
10174
  }
10165
10175
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContactUsComponent, deps: [{ token: EventsService }, { token: PLATFORM_ID }, { token: i2$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
10166
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ContactUsComponent, isStandalone: true, selector: "simpo-contact-us", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "screenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\">\r\n <div class=\"main-container\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [attr.style]=\"customClass\">\r\n <div *ngIf=\"content?.image?.showImage === false\" class=\"w-100\" [id]=\"data?.id\" #mainContainer\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row g-5 my-0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"col-12 d-flex justify-content-evenly mt-3\" [class.gap-3]=\"screenWidth > 475\" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{'align-items-center text-center': styles?.positionLayout?.value === 'top'}\">\r\n <div class=\"d-flex flex-column col-5 content-side\"\r\n [class.col-lg-8]=\"!content?.image?.showImage && styles?.positionLayout?.value === 'top'\">\r\n <div *ngFor=\"let item of content?.inputText\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"col-5 d-flex flex-wrap \" style=\"gap: 1rem;height: fit-content;\" [ngStyle]=\"getCardStyle()\"\r\n [class.col-lg-8]=\"!content?.image?.showImage && styles?.positionLayout?.value === 'top'\">\r\n <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\"\r\n [feild]=\"feild\"\r\n [bgColor]=\"styles?.contentBackground?.display ? styles?.contentBackground?.style == 'black' ? '#000000' : '#ffffff' : styles?.background?.color\"\r\n [sectionId]=\"data?.id\" *ngIf=\"canShowContactField(feild)\"></simpo-input-fields>\r\n </ng-container>\r\n <div class=\"custom-btn d-flex w-100\" [class]=\"getAlignment()\">\r\n <button class=\"send-btn\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"buttonClick()\">\r\n <div>{{button?.content?.label}}</div>\r\n <div class=\"btn-icon\" *ngIf=\"button?.content?.showIcon\" [ngStyle]=\"{\r\n 'background': button?.styles?.textColor,\r\n 'mask-image': 'url(' + button?.content?.icon?.url + ')',\r\n 'mask-repeat': 'no-repeat',\r\n 'mask-size': 'cover',\r\n 'width': '25px',\r\n 'height': '25px',\r\n }\">\r\n </div>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"content?.image?.showImage\" class=\"col-xxl-8 py-5 w-100\" [id]=\"data?.id\" #mainContainer\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"gap-5 mobile-display\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'align-items-center text-center': styles?.positionLayout?.value === 'top'}\">\r\n <div class=\"col-10 col-sm-8 col-lg-6 mobile-image\" *ngIf=\"content?.image?.showImage\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [id]=\"data?.id\" [appImageEditor]=\"edit || false\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [simpoImageDirective]=\"styles?.image\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid\"\r\n [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n </div>\r\n <div class=\"d-flex flex-column mobile-text\" style=\"width: 46%;\"\r\n [ngClass]=\"{'pt-5': styles?.positionLayout?.value === 'top'}\" [id]=\"data?.id\" [ngStyle]=\"getCardStyle()\">\r\n <div class=\"d-flex flex-column content-side\">\r\n <div *ngFor=\"let item of content?.inputText\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-start align-items-end\" style=\"gap: 1rem;height: fit-content;\">\r\n <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\"\r\n [feild]=\"feild\" [bgColor]=\"styles?.background?.color\" [sectionId]=\"data?.id\"></simpo-input-fields>\r\n </ng-container>\r\n </div>\r\n <div class=\"custom-btn d-flex w-100\" [class]=\"getAlignment()\">\r\n <button class=\"send-btn gap-2\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\"\r\n [class.flex-row-reverse]=\"button?.content?.icon?.iconPosition === 'left'\" (click)=\"buttonClick()\">\r\n <div>{{button?.content?.label}}</div>\r\n <div class=\"btn-icon\" *ngIf=\"button?.content?.showIcon\" [ngStyle]=\"{\r\n 'background': button?.styles?.textColor,\r\n 'mask-image': 'url(' + button?.content?.icon?.url + ')',\r\n 'mask-repeat': 'no-repeat',\r\n 'mask-size': 'cover',\r\n 'width': '25px',\r\n 'height': '25px',\r\n }\">\r\n </div>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".send-btn{font-size:16px!important;font-weight:600;padding:.5rem 2rem!important;display:inline-flex;align-items:center;justify-content:center;width:max-content!important;margin-top:1rem;min-width:20%}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.w-100{width:100%}.custom-btn{white-space:nowrap}@media only screen and (max-width: 475px){.col-12{display:flex;flex-direction:column}.custom-btn{width:50%;white-space:nowrap}.pt-5{width:100%}.pt-5 div{font-size:24px}.col-5{width:100%}.send-btn{margin-left:0}.mobile-display{display:flex!important;flex-direction:column!important}.mobile-image{width:100%!important;padding:0!important}.mobile-text{width:100%!important;margin-top:3rem}.mobile-text .d-flex div{font-size:24px}}.gap-3{gap:3rem!important}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: InputFieldsComponent, selector: "simpo-input-fields", inputs: ["feild", "opacity", "bgColor", "sectionId"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type:
10176
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ContactUsComponent, isStandalone: true, selector: "simpo-contact-us", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "screenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\">\r\n <div class=\"main-container\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [attr.style]=\"customClass\">\r\n <div *ngIf=\"content?.image?.showImage === false\" class=\"w-100\" [id]=\"data?.id\" #mainContainer\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row g-5 my-0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"col-12 d-flex justify-content-evenly mt-3\" [class.gap-3]=\"screenWidth > 475\" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{'align-items-center text-center': styles?.positionLayout?.value === 'top'}\">\r\n <div class=\"d-flex flex-column col-5 content-side\"\r\n [class.col-lg-8]=\"!content?.image?.showImage && styles?.positionLayout?.value === 'top'\">\r\n <div *ngFor=\"let item of content?.inputText\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"col-5 d-flex flex-wrap \" style=\"gap: 1rem;height: fit-content;\" [ngStyle]=\"getCardStyle()\"\r\n [class.col-lg-8]=\"!content?.image?.showImage && styles?.positionLayout?.value === 'top'\">\r\n <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\" [feild]=\"feild\"\r\n [bgColor]=\"styles?.contentBackground?.display ? styles?.contentBackground?.style == 'black' ? '#000000' : '#ffffff' : styles?.background?.color\"\r\n [sectionId]=\"data?.id\" *ngIf=\"shouldShowDropdown(feild)\"></simpo-input-fields>\r\n </ng-container>\r\n <div class=\"custom-btn d-flex w-100\" [class]=\"getAlignment()\">\r\n <button class=\"send-btn\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"buttonClick()\">\r\n <div>{{button?.content?.label}}</div>\r\n <div class=\"btn-icon\" *ngIf=\"button?.content?.showIcon\" [ngStyle]=\"{\r\n 'background': button?.styles?.textColor,\r\n 'mask-image': 'url(' + button?.content?.icon?.url + ')',\r\n 'mask-repeat': 'no-repeat',\r\n 'mask-size': 'cover',\r\n 'width': '25px',\r\n 'height': '25px',\r\n }\">\r\n </div>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"content?.image?.showImage\" class=\"col-xxl-8 py-5 w-100\" [id]=\"data?.id\" #mainContainer\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"gap-5 mobile-display\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'align-items-center text-center': styles?.positionLayout?.value === 'top'}\">\r\n <div class=\"col-10 col-sm-8 col-lg-6 mobile-image\" *ngIf=\"content?.image?.showImage\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [id]=\"data?.id\" [appImageEditor]=\"edit || false\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [simpoImageDirective]=\"styles?.image\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid\"\r\n [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n </div>\r\n <div class=\"d-flex flex-column mobile-text\" style=\"width: 46%;\"\r\n [ngClass]=\"{'pt-5': styles?.positionLayout?.value === 'top'}\" [id]=\"data?.id\" [ngStyle]=\"getCardStyle()\">\r\n <div class=\"d-flex flex-column content-side\">\r\n <div *ngFor=\"let item of content?.inputText\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-start align-items-end\" style=\"gap: 1rem;height: fit-content;\">\r\n <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n <ng-container *ngIf=\"feild.options?.length != 0\">\r\n <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\"\r\n [feild]=\"feild\" [bgColor]=\"styles?.background?.color\" [sectionId]=\"data?.id\"></simpo-input-fields>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"custom-btn d-flex w-100\" [class]=\"getAlignment()\">\r\n <button class=\"send-btn gap-2\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\"\r\n [class.flex-row-reverse]=\"button?.content?.icon?.iconPosition === 'left'\" (click)=\"buttonClick()\">\r\n <div>{{button?.content?.label}}</div>\r\n <div class=\"btn-icon\" *ngIf=\"button?.content?.showIcon\" [ngStyle]=\"{\r\n 'background': button?.styles?.textColor,\r\n 'mask-image': 'url(' + button?.content?.icon?.url + ')',\r\n 'mask-repeat': 'no-repeat',\r\n 'mask-size': 'cover',\r\n 'width': '25px',\r\n 'height': '25px',\r\n }\">\r\n </div>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".send-btn{font-size:16px!important;font-weight:600;padding:.5rem 2rem!important;display:inline-flex;align-items:center;justify-content:center;width:max-content!important;margin-top:1rem;min-width:20%}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.w-100{width:100%}.custom-btn{white-space:nowrap}@media only screen and (max-width: 475px){.col-12{display:flex;flex-direction:column}.custom-btn{width:50%;white-space:nowrap}.pt-5{width:100%}.pt-5 div{font-size:24px}.col-5{width:100%}.send-btn{margin-left:0}.mobile-display{display:flex!important;flex-direction:column!important}.mobile-image{width:100%!important;padding:0!important}.mobile-text{width:100%!important;margin-top:3rem}.mobile-text .d-flex div{font-size:24px}}.gap-3{gap:3rem!important}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: InputFieldsComponent, selector: "simpo-input-fields", inputs: ["feild", "opacity", "bgColor", "sectionId"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type:
10167
10177
  //directive
10168
10178
  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: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }] }); }
10169
10179
  }
@@ -10202,7 +10212,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
10202
10212
  SimpoContainerAligment,
10203
10213
  ButtonEditorDirective,
10204
10214
  ImageEditorDirective
10205
- ], template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\">\r\n <div class=\"main-container\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [attr.style]=\"customClass\">\r\n <div *ngIf=\"content?.image?.showImage === false\" class=\"w-100\" [id]=\"data?.id\" #mainContainer\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row g-5 my-0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"col-12 d-flex justify-content-evenly mt-3\" [class.gap-3]=\"screenWidth > 475\" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{'align-items-center text-center': styles?.positionLayout?.value === 'top'}\">\r\n <div class=\"d-flex flex-column col-5 content-side\"\r\n [class.col-lg-8]=\"!content?.image?.showImage && styles?.positionLayout?.value === 'top'\">\r\n <div *ngFor=\"let item of content?.inputText\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"col-5 d-flex flex-wrap \" style=\"gap: 1rem;height: fit-content;\" [ngStyle]=\"getCardStyle()\"\r\n [class.col-lg-8]=\"!content?.image?.showImage && styles?.positionLayout?.value === 'top'\">\r\n <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\"\r\n [feild]=\"feild\"\r\n [bgColor]=\"styles?.contentBackground?.display ? styles?.contentBackground?.style == 'black' ? '#000000' : '#ffffff' : styles?.background?.color\"\r\n [sectionId]=\"data?.id\" *ngIf=\"canShowContactField(feild)\"></simpo-input-fields>\r\n </ng-container>\r\n <div class=\"custom-btn d-flex w-100\" [class]=\"getAlignment()\">\r\n <button class=\"send-btn\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"buttonClick()\">\r\n <div>{{button?.content?.label}}</div>\r\n <div class=\"btn-icon\" *ngIf=\"button?.content?.showIcon\" [ngStyle]=\"{\r\n 'background': button?.styles?.textColor,\r\n 'mask-image': 'url(' + button?.content?.icon?.url + ')',\r\n 'mask-repeat': 'no-repeat',\r\n 'mask-size': 'cover',\r\n 'width': '25px',\r\n 'height': '25px',\r\n }\">\r\n </div>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"content?.image?.showImage\" class=\"col-xxl-8 py-5 w-100\" [id]=\"data?.id\" #mainContainer\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"gap-5 mobile-display\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'align-items-center text-center': styles?.positionLayout?.value === 'top'}\">\r\n <div class=\"col-10 col-sm-8 col-lg-6 mobile-image\" *ngIf=\"content?.image?.showImage\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [id]=\"data?.id\" [appImageEditor]=\"edit || false\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [simpoImageDirective]=\"styles?.image\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid\"\r\n [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n </div>\r\n <div class=\"d-flex flex-column mobile-text\" style=\"width: 46%;\"\r\n [ngClass]=\"{'pt-5': styles?.positionLayout?.value === 'top'}\" [id]=\"data?.id\" [ngStyle]=\"getCardStyle()\">\r\n <div class=\"d-flex flex-column content-side\">\r\n <div *ngFor=\"let item of content?.inputText\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-start align-items-end\" style=\"gap: 1rem;height: fit-content;\">\r\n <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\"\r\n [feild]=\"feild\" [bgColor]=\"styles?.background?.color\" [sectionId]=\"data?.id\"></simpo-input-fields>\r\n </ng-container>\r\n </div>\r\n <div class=\"custom-btn d-flex w-100\" [class]=\"getAlignment()\">\r\n <button class=\"send-btn gap-2\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\"\r\n [class.flex-row-reverse]=\"button?.content?.icon?.iconPosition === 'left'\" (click)=\"buttonClick()\">\r\n <div>{{button?.content?.label}}</div>\r\n <div class=\"btn-icon\" *ngIf=\"button?.content?.showIcon\" [ngStyle]=\"{\r\n 'background': button?.styles?.textColor,\r\n 'mask-image': 'url(' + button?.content?.icon?.url + ')',\r\n 'mask-repeat': 'no-repeat',\r\n 'mask-size': 'cover',\r\n 'width': '25px',\r\n 'height': '25px',\r\n }\">\r\n </div>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".send-btn{font-size:16px!important;font-weight:600;padding:.5rem 2rem!important;display:inline-flex;align-items:center;justify-content:center;width:max-content!important;margin-top:1rem;min-width:20%}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.w-100{width:100%}.custom-btn{white-space:nowrap}@media only screen and (max-width: 475px){.col-12{display:flex;flex-direction:column}.custom-btn{width:50%;white-space:nowrap}.pt-5{width:100%}.pt-5 div{font-size:24px}.col-5{width:100%}.send-btn{margin-left:0}.mobile-display{display:flex!important;flex-direction:column!important}.mobile-image{width:100%!important;padding:0!important}.mobile-text{width:100%!important;margin-top:3rem}.mobile-text .d-flex div{font-size:24px}}.gap-3{gap:3rem!important}\n"] }]
10215
+ ], template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\">\r\n <div class=\"main-container\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [attr.style]=\"customClass\">\r\n <div *ngIf=\"content?.image?.showImage === false\" class=\"w-100\" [id]=\"data?.id\" #mainContainer\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row g-5 my-0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"col-12 d-flex justify-content-evenly mt-3\" [class.gap-3]=\"screenWidth > 475\" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{'align-items-center text-center': styles?.positionLayout?.value === 'top'}\">\r\n <div class=\"d-flex flex-column col-5 content-side\"\r\n [class.col-lg-8]=\"!content?.image?.showImage && styles?.positionLayout?.value === 'top'\">\r\n <div *ngFor=\"let item of content?.inputText\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"col-5 d-flex flex-wrap \" style=\"gap: 1rem;height: fit-content;\" [ngStyle]=\"getCardStyle()\"\r\n [class.col-lg-8]=\"!content?.image?.showImage && styles?.positionLayout?.value === 'top'\">\r\n <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\" [feild]=\"feild\"\r\n [bgColor]=\"styles?.contentBackground?.display ? styles?.contentBackground?.style == 'black' ? '#000000' : '#ffffff' : styles?.background?.color\"\r\n [sectionId]=\"data?.id\" *ngIf=\"shouldShowDropdown(feild)\"></simpo-input-fields>\r\n </ng-container>\r\n <div class=\"custom-btn d-flex w-100\" [class]=\"getAlignment()\">\r\n <button class=\"send-btn\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"buttonClick()\">\r\n <div>{{button?.content?.label}}</div>\r\n <div class=\"btn-icon\" *ngIf=\"button?.content?.showIcon\" [ngStyle]=\"{\r\n 'background': button?.styles?.textColor,\r\n 'mask-image': 'url(' + button?.content?.icon?.url + ')',\r\n 'mask-repeat': 'no-repeat',\r\n 'mask-size': 'cover',\r\n 'width': '25px',\r\n 'height': '25px',\r\n }\">\r\n </div>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"content?.image?.showImage\" class=\"col-xxl-8 py-5 w-100\" [id]=\"data?.id\" #mainContainer\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"gap-5 mobile-display\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'align-items-center text-center': styles?.positionLayout?.value === 'top'}\">\r\n <div class=\"col-10 col-sm-8 col-lg-6 mobile-image\" *ngIf=\"content?.image?.showImage\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [id]=\"data?.id\" [appImageEditor]=\"edit || false\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [simpoImageDirective]=\"styles?.image\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid\"\r\n [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n </div>\r\n <div class=\"d-flex flex-column mobile-text\" style=\"width: 46%;\"\r\n [ngClass]=\"{'pt-5': styles?.positionLayout?.value === 'top'}\" [id]=\"data?.id\" [ngStyle]=\"getCardStyle()\">\r\n <div class=\"d-flex flex-column content-side\">\r\n <div *ngFor=\"let item of content?.inputText\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-start align-items-end\" style=\"gap: 1rem;height: fit-content;\">\r\n <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n <ng-container *ngIf=\"feild.options?.length != 0\">\r\n <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\"\r\n [feild]=\"feild\" [bgColor]=\"styles?.background?.color\" [sectionId]=\"data?.id\"></simpo-input-fields>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"custom-btn d-flex w-100\" [class]=\"getAlignment()\">\r\n <button class=\"send-btn gap-2\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\"\r\n [class.flex-row-reverse]=\"button?.content?.icon?.iconPosition === 'left'\" (click)=\"buttonClick()\">\r\n <div>{{button?.content?.label}}</div>\r\n <div class=\"btn-icon\" *ngIf=\"button?.content?.showIcon\" [ngStyle]=\"{\r\n 'background': button?.styles?.textColor,\r\n 'mask-image': 'url(' + button?.content?.icon?.url + ')',\r\n 'mask-repeat': 'no-repeat',\r\n 'mask-size': 'cover',\r\n 'width': '25px',\r\n 'height': '25px',\r\n }\">\r\n </div>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".send-btn{font-size:16px!important;font-weight:600;padding:.5rem 2rem!important;display:inline-flex;align-items:center;justify-content:center;width:max-content!important;margin-top:1rem;min-width:20%}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.w-100{width:100%}.custom-btn{white-space:nowrap}@media only screen and (max-width: 475px){.col-12{display:flex;flex-direction:column}.custom-btn{width:50%;white-space:nowrap}.pt-5{width:100%}.pt-5 div{font-size:24px}.col-5{width:100%}.send-btn{margin-left:0}.mobile-display{display:flex!important;flex-direction:column!important}.mobile-image{width:100%!important;padding:0!important}.mobile-text{width:100%!important;margin-top:3rem}.mobile-text .d-flex div{font-size:24px}}.gap-3{gap:3rem!important}\n"] }]
10206
10216
  }], ctorParameters: () => [{ type: EventsService }, { type: Object, decorators: [{
10207
10217
  type: Inject,
10208
10218
  args: [PLATFORM_ID]
@@ -10964,7 +10974,7 @@ class BlogListComponent extends BaseSection {
10964
10974
  }, 100);
10965
10975
  }
10966
10976
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BlogListComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
10967
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BlogListComponent, isStandalone: true, selector: "simpo-blog-list", inputs: { responseData: "responseData", index: "index", edit: "edit", customClass: "customClass", data: "data", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" class=\"total-container\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" *ngIf=\"(responseData?.length || 0) > 0;else elseBlock\" [attr.style]=\"customClass\">\r\n <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\"\r\n [simpoAnimation]=\"style?.animation\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"container-fluid\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row gap-20\">\r\n <div [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\" *ngFor=\"let content of responseData\"\r\n class=\"d-flex\">\r\n <a [routerLink]=\"['/blog', content.newPostTitle]\" (click)=\"getBlogById(content.articleSlug)\">\r\n <div class=\"cards h-100\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\">\r\n <img loading=\"lazy\" [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n [simpoCorner]=\"style?.corners\" alt=\"\" *ngIf=\"content.img\" loading=\"lazy\">\r\n <img loading=\"lazy\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\"\r\n alt=\"\" *ngIf=\"!content.img\" loading=\"lazy\">\r\n <div class=\"p-30\">\r\n <div class=\"d-flex flex-wrap align-items-center gap-2\">\r\n <ng-container *ngFor=\"let tag of content?.tags | slice:0:4\">\r\n <p class=\"mb-0 p-2 border\">{{ tag }}</p>\r\n </ng-container>\r\n </div>\r\n <div class=\"heading-medium title mt-2 fs-20\" *ngIf=\"blogContent?.display?.showHeading\">\r\n {{content.postTitle.length > 100 ? content.postTitle.substring(0,100)+'...\"' : content.postTitle}}\r\n <!-- {{content.postTitle}} -->\r\n </div>\r\n <ng-container>\r\n <div class=\"body-large mt-4 pb-15\" *ngIf=\"blogContent?.display?.showContent\">\r\n {{ content.postSummary.length > 250 ? content.postSummary.substring(0, 250) + '...' :\r\n content.postSummary }}\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end p-2 align-items-center\" *ngIf=\"content?.author?.content && content?.author?.content.length > 0\">\r\n <p>- {{content?.author?.content | titlecase}}</p>\r\n </div>\r\n\r\n <!-- <div class=\"authors\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n <div>\r\n <mat-icon>person</mat-icon> &nbsp;&nbsp;<span class=\"body-large\">{{content?.author?.content | titlecase}}</span>\r\n </div>\r\n <div class=\"calendar_today\">\r\n <mat-icon>calendar_today</mat-icon> &nbsp;&nbsp; <span class=\"body-large\">{{content.createdTimeStamp |\r\n date:'EEEE, MMM, d, y'}}</span>\r\n </div>\r\n </div>\r\n <div class=\"button heading-large\" (click)=\"getBlogById(content.newPostTitle)\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n Read More <mat-icon>arrow_right_alt</mat-icon>\r\n </div> -->\r\n </div>\r\n </div>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n</section>\r\n<ng-template #elseBlock>\r\n <div class=\"no-blog-text heading-medium\">Sorry there are no blog posts.</div>\r\n</ng-template>", styles: [".cards{box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.cards img{width:100%;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.p-30{padding:10px 15px 0}.border{border:1px solid;border-radius:8px}.authors{display:flex;gap:35px;margin-top:40px}.authors div{display:flex}.authors .calendar_today{align-items:center}.authors .calendar_today mat-icon{font-size:20px}.button{font-size:15px;display:flex;align-items:center;gap:10px;cursor:pointer;font-family:interReg;font-weight:500;justify-content:end}.mt-20{margin-top:20px}.total-container{position:relative;height:auto}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.no-blog-text{font-size:24px;line-height:36px;height:40vh;display:flex;align-items:center;justify-content:center}.justify-content-right{justify-content:right}.h-100{height:100%}.gap-20{gap:20px 0px!important}.fs-20{font-size:20px!important}.pb-15{padding-bottom:15px}.ar-none{aspect-ratio:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
10977
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BlogListComponent, isStandalone: true, selector: "simpo-blog-list", inputs: { responseData: "responseData", index: "index", edit: "edit", customClass: "customClass", data: "data", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" class=\"total-container\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" *ngIf=\"(responseData?.length || 0) > 0;else elseBlock\" [attr.style]=\"customClass\">\r\n <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\"\r\n [simpoAnimation]=\"style?.animation\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"container-fluid\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row gap-20\">\r\n <div [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\" *ngFor=\"let content of responseData\"\r\n class=\"d-flex\">\r\n <a [routerLink]=\"['/blog', content.newPostTitle]\" (click)=\"getBlogById(content.articleSlug)\">\r\n <div class=\"cards h-100\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\">\r\n <img loading=\"lazy\" [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n [simpoCorner]=\"style?.corners\" alt=\"\" *ngIf=\"content.img\" loading=\"lazy\">\r\n <img loading=\"lazy\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\"\r\n alt=\"\" *ngIf=\"!content.img\" loading=\"lazy\">\r\n <div class=\"p-30\">\r\n <!-- <div class=\"d-flex flex-wrap align-items-center gap-2\">\r\n <ng-container *ngFor=\"let tag of content?.tags | slice:0:4\">\r\n <p class=\"mb-0 p-2 border\">{{ tag }}</p>\r\n </ng-container>\r\n </div> -->\r\n <div class=\"heading-medium title mt-2 fs-20\" *ngIf=\"blogContent?.display?.showHeading\">\r\n {{content.postTitle.length > 100 ? content.postTitle.substring(0,100)+'...\"' : content.postTitle}}\r\n <!-- {{content.postTitle}} -->\r\n </div>\r\n <ng-container>\r\n <div class=\"body-large mt-4 pb-15\" *ngIf=\"blogContent?.display?.showContent\">\r\n {{ content.postSummary.length > 250 ? content.postSummary.substring(0, 250) + '...' :\r\n content.postSummary }}\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end p-2 align-items-center\" *ngIf=\"content?.author?.content && content?.author?.content.length > 0\">\r\n <p>- {{content?.author?.content | titlecase}}</p>\r\n </div>\r\n\r\n <!-- <div class=\"authors\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n <div>\r\n <mat-icon>person</mat-icon> &nbsp;&nbsp;<span class=\"body-large\">{{content?.author?.content | titlecase}}</span>\r\n </div>\r\n <div class=\"calendar_today\">\r\n <mat-icon>calendar_today</mat-icon> &nbsp;&nbsp; <span class=\"body-large\">{{content.createdTimeStamp |\r\n date:'EEEE, MMM, d, y'}}</span>\r\n </div>\r\n </div>\r\n <div class=\"button heading-large\" (click)=\"getBlogById(content.newPostTitle)\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n Read More <mat-icon>arrow_right_alt</mat-icon>\r\n </div> -->\r\n </div>\r\n </div>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n</section>\r\n<ng-template #elseBlock>\r\n <div class=\"no-blog-text heading-medium\">Sorry there are no blog posts.</div>\r\n</ng-template>", styles: [".cards{box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.cards img{width:100%;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.p-30{padding:10px 15px 0}.border{border:1px solid;border-radius:8px}.authors{display:flex;gap:35px;margin-top:40px}.authors div{display:flex}.authors .calendar_today{align-items:center}.authors .calendar_today mat-icon{font-size:20px}.button{font-size:15px;display:flex;align-items:center;gap:10px;cursor:pointer;font-family:interReg;font-weight:500;justify-content:end}.mt-20{margin-top:20px}.total-container{position:relative;height:auto}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.no-blog-text{font-size:24px;line-height:36px;height:40vh;display:flex;align-items:center;justify-content:center}.justify-content-right{justify-content:right}.h-100{height:100%}.gap-20{gap:20px 0px!important}.fs-20{font-size:20px!important}.pb-15{padding-bottom:15px}.ar-none{aspect-ratio:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
10968
10978
  }
10969
10979
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BlogListComponent, decorators: [{
10970
10980
  type: Component,
@@ -10981,7 +10991,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
10981
10991
  HoverDirective,
10982
10992
  HoverElementsComponent,
10983
10993
  MatIcon, SvgDividerComponent,
10984
- SpacingHorizontalDirective, RouterLink], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" class=\"total-container\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" *ngIf=\"(responseData?.length || 0) > 0;else elseBlock\" [attr.style]=\"customClass\">\r\n <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\"\r\n [simpoAnimation]=\"style?.animation\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"container-fluid\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row gap-20\">\r\n <div [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\" *ngFor=\"let content of responseData\"\r\n class=\"d-flex\">\r\n <a [routerLink]=\"['/blog', content.newPostTitle]\" (click)=\"getBlogById(content.articleSlug)\">\r\n <div class=\"cards h-100\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\">\r\n <img loading=\"lazy\" [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n [simpoCorner]=\"style?.corners\" alt=\"\" *ngIf=\"content.img\" loading=\"lazy\">\r\n <img loading=\"lazy\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\"\r\n alt=\"\" *ngIf=\"!content.img\" loading=\"lazy\">\r\n <div class=\"p-30\">\r\n <div class=\"d-flex flex-wrap align-items-center gap-2\">\r\n <ng-container *ngFor=\"let tag of content?.tags | slice:0:4\">\r\n <p class=\"mb-0 p-2 border\">{{ tag }}</p>\r\n </ng-container>\r\n </div>\r\n <div class=\"heading-medium title mt-2 fs-20\" *ngIf=\"blogContent?.display?.showHeading\">\r\n {{content.postTitle.length > 100 ? content.postTitle.substring(0,100)+'...\"' : content.postTitle}}\r\n <!-- {{content.postTitle}} -->\r\n </div>\r\n <ng-container>\r\n <div class=\"body-large mt-4 pb-15\" *ngIf=\"blogContent?.display?.showContent\">\r\n {{ content.postSummary.length > 250 ? content.postSummary.substring(0, 250) + '...' :\r\n content.postSummary }}\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end p-2 align-items-center\" *ngIf=\"content?.author?.content && content?.author?.content.length > 0\">\r\n <p>- {{content?.author?.content | titlecase}}</p>\r\n </div>\r\n\r\n <!-- <div class=\"authors\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n <div>\r\n <mat-icon>person</mat-icon> &nbsp;&nbsp;<span class=\"body-large\">{{content?.author?.content | titlecase}}</span>\r\n </div>\r\n <div class=\"calendar_today\">\r\n <mat-icon>calendar_today</mat-icon> &nbsp;&nbsp; <span class=\"body-large\">{{content.createdTimeStamp |\r\n date:'EEEE, MMM, d, y'}}</span>\r\n </div>\r\n </div>\r\n <div class=\"button heading-large\" (click)=\"getBlogById(content.newPostTitle)\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n Read More <mat-icon>arrow_right_alt</mat-icon>\r\n </div> -->\r\n </div>\r\n </div>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n</section>\r\n<ng-template #elseBlock>\r\n <div class=\"no-blog-text heading-medium\">Sorry there are no blog posts.</div>\r\n</ng-template>", styles: [".cards{box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.cards img{width:100%;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.p-30{padding:10px 15px 0}.border{border:1px solid;border-radius:8px}.authors{display:flex;gap:35px;margin-top:40px}.authors div{display:flex}.authors .calendar_today{align-items:center}.authors .calendar_today mat-icon{font-size:20px}.button{font-size:15px;display:flex;align-items:center;gap:10px;cursor:pointer;font-family:interReg;font-weight:500;justify-content:end}.mt-20{margin-top:20px}.total-container{position:relative;height:auto}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.no-blog-text{font-size:24px;line-height:36px;height:40vh;display:flex;align-items:center;justify-content:center}.justify-content-right{justify-content:right}.h-100{height:100%}.gap-20{gap:20px 0px!important}.fs-20{font-size:20px!important}.pb-15{padding-bottom:15px}.ar-none{aspect-ratio:0!important}\n"] }]
10994
+ SpacingHorizontalDirective, RouterLink], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" class=\"total-container\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" *ngIf=\"(responseData?.length || 0) > 0;else elseBlock\" [attr.style]=\"customClass\">\r\n <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\"\r\n [simpoAnimation]=\"style?.animation\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"container-fluid\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row gap-20\">\r\n <div [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\" *ngFor=\"let content of responseData\"\r\n class=\"d-flex\">\r\n <a [routerLink]=\"['/blog', content.newPostTitle]\" (click)=\"getBlogById(content.articleSlug)\">\r\n <div class=\"cards h-100\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\">\r\n <img loading=\"lazy\" [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n [simpoCorner]=\"style?.corners\" alt=\"\" *ngIf=\"content.img\" loading=\"lazy\">\r\n <img loading=\"lazy\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\"\r\n alt=\"\" *ngIf=\"!content.img\" loading=\"lazy\">\r\n <div class=\"p-30\">\r\n <!-- <div class=\"d-flex flex-wrap align-items-center gap-2\">\r\n <ng-container *ngFor=\"let tag of content?.tags | slice:0:4\">\r\n <p class=\"mb-0 p-2 border\">{{ tag }}</p>\r\n </ng-container>\r\n </div> -->\r\n <div class=\"heading-medium title mt-2 fs-20\" *ngIf=\"blogContent?.display?.showHeading\">\r\n {{content.postTitle.length > 100 ? content.postTitle.substring(0,100)+'...\"' : content.postTitle}}\r\n <!-- {{content.postTitle}} -->\r\n </div>\r\n <ng-container>\r\n <div class=\"body-large mt-4 pb-15\" *ngIf=\"blogContent?.display?.showContent\">\r\n {{ content.postSummary.length > 250 ? content.postSummary.substring(0, 250) + '...' :\r\n content.postSummary }}\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"d-flex justify-content-end p-2 align-items-center\" *ngIf=\"content?.author?.content && content?.author?.content.length > 0\">\r\n <p>- {{content?.author?.content | titlecase}}</p>\r\n </div>\r\n\r\n <!-- <div class=\"authors\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n <div>\r\n <mat-icon>person</mat-icon> &nbsp;&nbsp;<span class=\"body-large\">{{content?.author?.content | titlecase}}</span>\r\n </div>\r\n <div class=\"calendar_today\">\r\n <mat-icon>calendar_today</mat-icon> &nbsp;&nbsp; <span class=\"body-large\">{{content.createdTimeStamp |\r\n date:'EEEE, MMM, d, y'}}</span>\r\n </div>\r\n </div>\r\n <div class=\"button heading-large\" (click)=\"getBlogById(content.newPostTitle)\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n Read More <mat-icon>arrow_right_alt</mat-icon>\r\n </div> -->\r\n </div>\r\n </div>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n</section>\r\n<ng-template #elseBlock>\r\n <div class=\"no-blog-text heading-medium\">Sorry there are no blog posts.</div>\r\n</ng-template>", styles: [".cards{box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.cards img{width:100%;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.p-30{padding:10px 15px 0}.border{border:1px solid;border-radius:8px}.authors{display:flex;gap:35px;margin-top:40px}.authors div{display:flex}.authors .calendar_today{align-items:center}.authors .calendar_today mat-icon{font-size:20px}.button{font-size:15px;display:flex;align-items:center;gap:10px;cursor:pointer;font-family:interReg;font-weight:500;justify-content:end}.mt-20{margin-top:20px}.total-container{position:relative;height:auto}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.no-blog-text{font-size:24px;line-height:36px;height:40vh;display:flex;align-items:center;justify-content:center}.justify-content-right{justify-content:right}.h-100{height:100%}.gap-20{gap:20px 0px!important}.fs-20{font-size:20px!important}.pb-15{padding-bottom:15px}.ar-none{aspect-ratio:0!important}\n"] }]
10985
10995
  }], ctorParameters: () => [{ type: EventsService }], propDecorators: { responseData: [{
10986
10996
  type: Input
10987
10997
  }], index: [{
@@ -11929,11 +11939,11 @@ class ViewBlogComponent {
11929
11939
  // this._eventService.toggleEditorEvent.emit(false);
11930
11940
  }
11931
11941
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ViewBlogComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
11932
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ViewBlogComponent, isStandalone: true, selector: "simpo-view-blog", inputs: { responseData: "responseData" }, ngImport: i0, template: "<section class=\"main-section\">\n <div class=\"blog-details\">\n <!-- <h1 class=\"blog-title\">{{responseData.postTitle}}</h1> -->\n <div style=\"margin-top: 20px;\">\n <ng-container *ngFor=\"let item of responseData?.blocks\">\n <div *ngIf=\"item.type=='header'\">\n <h1 *ngIf=\"item.data.level==1\" [innerHTML]=\"item.data.text\"></h1>\n <h2 *ngIf=\"item.data.level==2\" [innerHTML]=\"item.data.text\"></h2>\n <h3 *ngIf=\"item.data.level==3\" [innerHTML]=\"item.data.text\"></h3>\n <h4 *ngIf=\"item.data.level==4\" [innerHTML]=\"item.data.text\"></h4>\n <h5 *ngIf=\"item.data.level==5\" [innerHTML]=\"item.data.text\"></h5>\n <h6 *ngIf=\"item.data.level==6\" [innerHTML]=\"item.data.text\"></h6>\n </div>\n <div *ngIf=\"item.type=='paragraph'\">\n <p class=\"inner-text\" [innerHTML]=\"item.data.text\"></p>\n </div>\n <div *ngIf=\"item.type=='list'\">\n <div *ngIf=\"item.type=='list'\">\n <div *ngIf=\"item.data.style=='ordered'\">\n <ol class=\"list-style\">\n <ng-container *ngFor=\"let list of item.data.items\">\n <li>{{ list }}</li>\n </ng-container>\n </ol>\n </div>\n <div *ngIf=\"item.data.style=='unordered'\">\n <ul class=\"list-style\">\n <ng-container *ngFor=\"let list of item.data.items\">\n <li>{{ list }}</li>\n </ng-container>\n </ul>\n </div>\n </div>\n </div>\n <div *ngIf=\"item.type=='delimiter'\" class=\"ce-delimiter\">\n </div>\n <div *ngIf=\"item.type=='image'\" class=\"image-container\">\n <img loading=\"lazy\" [src]=\"item.data.file.url\" alt=\"\" loading=\"lazy\">\n </div>\n <div *ngIf=\"item.type=='table'\">\n\n <table>\n <ng-container *ngFor=\"let data of item.data.content\">\n <tr>\n <ng-container *ngFor=\"let item of data\">\n <td>{{ item }}</td>\n </ng-container>\n </tr>\n </ng-container>\n </table>\n\n </div>\n </ng-container>\n </div>\n </div>\n</section>\n", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.main-section{padding:5%;background-color:#fff}.blog-details{width:60%;margin:0 auto}.delimiter{display:flex;justify-content:center}.ce-delimiter:before{display:inline-block;content:\"***\";font-size:30px;line-height:65px;height:30px;letter-spacing:.2em}p{line-height:1.6em}.back-text{@include body16r();margin-left:9px;margin-top:1px;cursor:pointer}table{border-collapse:collapse;width:100%}th,td{border:1px solid black;text-align:center}.header{margin-top:8px;margin-bottom:14px;padding-left:20px}.header img,.configuration-tab img{cursor:pointer}.blogs-totalsection{background:#eee;position:absolute;top:55px;height:calc(100vh - 55px);width:81.7%;z-index:10;overflow-y:scroll;padding:14px}.blog-title{line-height:35px}.image-container{width:100%;margin:10px 0}.image-container img{width:100%}h1,h2,h3,h4,h5,h6{padding:.6em 0 3px}.h1,.h2,.h3,h1,h2,h3{margin-top:0}.list-style li{text-align:left}@media only screen and (max-width :500px){.blog-details{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
11942
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ViewBlogComponent, isStandalone: true, selector: "simpo-view-blog", inputs: { responseData: "responseData" }, ngImport: i0, template: "<section class=\"main-section\">\n <div class=\"blog-details\">\n <!-- <h1 class=\"blog-title\">{{responseData.postTitle}}</h1> -->\n <div style=\"margin-top: 20px;\">\n <ng-container *ngFor=\"let item of responseData?.blocks\">\n <div *ngIf=\"item.type=='header'\">\n <h1 *ngIf=\"item.data.level==1\" [innerHTML]=\"item.data.text\"></h1>\n <h2 *ngIf=\"item.data.level==2\" [innerHTML]=\"item.data.text\"></h2>\n <h3 *ngIf=\"item.data.level==3\" [innerHTML]=\"item.data.text\"></h3>\n <h4 *ngIf=\"item.data.level==4\" [innerHTML]=\"item.data.text\"></h4>\n <h5 *ngIf=\"item.data.level==5\" [innerHTML]=\"item.data.text\"></h5>\n <h6 *ngIf=\"item.data.level==6\" [innerHTML]=\"item.data.text\"></h6>\n </div>\n <div *ngIf=\"item.type=='paragraph'\">\n <p class=\"inner-text\" [innerHTML]=\"item.data.text\"></p>\n </div>\n <div *ngIf=\"item.type=='list'\">\n <div *ngIf=\"item.type=='list'\">\n <div *ngIf=\"item.data.style=='ordered'\">\n <ol class=\"list-style\">\n <ng-container *ngFor=\"let list of item.data.items\">\n <li [innerHTML]=\"list\"></li>\n </ng-container>\n </ol>\n </div>\n <div *ngIf=\"item.data.style=='unordered'\">\n <ul class=\"list-style\">\n <ng-container *ngFor=\"let list of item.data.items\">\n <li [innerHTML]=\"list\"></li>\n </ng-container>\n </ul>\n </div>\n </div>\n </div>\n <div *ngIf=\"item.type=='delimiter'\" class=\"ce-delimiter\">\n </div>\n <div *ngIf=\"item.type=='image'\" class=\"image-container\">\n <img loading=\"lazy\" [src]=\"item.data.file.url\" alt=\"\" loading=\"lazy\">\n </div>\n <div *ngIf=\"item.type=='table'\">\n\n <table>\n <ng-container *ngFor=\"let data of item.data.content\">\n <tr>\n <ng-container *ngFor=\"let item of data\">\n <td [innerHTML]=\"item\"></td>\n </ng-container>\n </tr>\n </ng-container>\n </table>\n\n </div>\n </ng-container>\n </div>\n </div>\n</section>\n", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.main-section{padding:5%;background-color:#fff}.blog-details{width:60%;margin:0 auto}.delimiter{display:flex;justify-content:center}.ce-delimiter:before{display:inline-block;content:\"***\";font-size:30px;line-height:65px;height:30px;letter-spacing:.2em}p{line-height:1.6em}.back-text{@include body16r();margin-left:9px;margin-top:1px;cursor:pointer}table{border-collapse:collapse;width:100%}th,td{border:1px solid black;text-align:center}.header{margin-top:8px;margin-bottom:14px;padding-left:20px}.header img,.configuration-tab img{cursor:pointer}.blogs-totalsection{background:#eee;position:absolute;top:55px;height:calc(100vh - 55px);width:81.7%;z-index:10;overflow-y:scroll;padding:14px}.blog-title{line-height:35px}.image-container{width:100%;margin:10px 0}.image-container img{width:100%}h1,h2,h3,h4,h5,h6{padding:.6em 0 3px}.h1,.h2,.h3,h1,h2,h3{margin-top:0}.list-style li{text-align:left}@media only screen and (max-width :500px){.blog-details{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
11933
11943
  }
11934
11944
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ViewBlogComponent, decorators: [{
11935
11945
  type: Component,
11936
- args: [{ selector: 'simpo-view-blog', standalone: true, imports: [CommonModule], template: "<section class=\"main-section\">\n <div class=\"blog-details\">\n <!-- <h1 class=\"blog-title\">{{responseData.postTitle}}</h1> -->\n <div style=\"margin-top: 20px;\">\n <ng-container *ngFor=\"let item of responseData?.blocks\">\n <div *ngIf=\"item.type=='header'\">\n <h1 *ngIf=\"item.data.level==1\" [innerHTML]=\"item.data.text\"></h1>\n <h2 *ngIf=\"item.data.level==2\" [innerHTML]=\"item.data.text\"></h2>\n <h3 *ngIf=\"item.data.level==3\" [innerHTML]=\"item.data.text\"></h3>\n <h4 *ngIf=\"item.data.level==4\" [innerHTML]=\"item.data.text\"></h4>\n <h5 *ngIf=\"item.data.level==5\" [innerHTML]=\"item.data.text\"></h5>\n <h6 *ngIf=\"item.data.level==6\" [innerHTML]=\"item.data.text\"></h6>\n </div>\n <div *ngIf=\"item.type=='paragraph'\">\n <p class=\"inner-text\" [innerHTML]=\"item.data.text\"></p>\n </div>\n <div *ngIf=\"item.type=='list'\">\n <div *ngIf=\"item.type=='list'\">\n <div *ngIf=\"item.data.style=='ordered'\">\n <ol class=\"list-style\">\n <ng-container *ngFor=\"let list of item.data.items\">\n <li>{{ list }}</li>\n </ng-container>\n </ol>\n </div>\n <div *ngIf=\"item.data.style=='unordered'\">\n <ul class=\"list-style\">\n <ng-container *ngFor=\"let list of item.data.items\">\n <li>{{ list }}</li>\n </ng-container>\n </ul>\n </div>\n </div>\n </div>\n <div *ngIf=\"item.type=='delimiter'\" class=\"ce-delimiter\">\n </div>\n <div *ngIf=\"item.type=='image'\" class=\"image-container\">\n <img loading=\"lazy\" [src]=\"item.data.file.url\" alt=\"\" loading=\"lazy\">\n </div>\n <div *ngIf=\"item.type=='table'\">\n\n <table>\n <ng-container *ngFor=\"let data of item.data.content\">\n <tr>\n <ng-container *ngFor=\"let item of data\">\n <td>{{ item }}</td>\n </ng-container>\n </tr>\n </ng-container>\n </table>\n\n </div>\n </ng-container>\n </div>\n </div>\n</section>\n", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.main-section{padding:5%;background-color:#fff}.blog-details{width:60%;margin:0 auto}.delimiter{display:flex;justify-content:center}.ce-delimiter:before{display:inline-block;content:\"***\";font-size:30px;line-height:65px;height:30px;letter-spacing:.2em}p{line-height:1.6em}.back-text{@include body16r();margin-left:9px;margin-top:1px;cursor:pointer}table{border-collapse:collapse;width:100%}th,td{border:1px solid black;text-align:center}.header{margin-top:8px;margin-bottom:14px;padding-left:20px}.header img,.configuration-tab img{cursor:pointer}.blogs-totalsection{background:#eee;position:absolute;top:55px;height:calc(100vh - 55px);width:81.7%;z-index:10;overflow-y:scroll;padding:14px}.blog-title{line-height:35px}.image-container{width:100%;margin:10px 0}.image-container img{width:100%}h1,h2,h3,h4,h5,h6{padding:.6em 0 3px}.h1,.h2,.h3,h1,h2,h3{margin-top:0}.list-style li{text-align:left}@media only screen and (max-width :500px){.blog-details{width:100%}}\n"] }]
11946
+ args: [{ selector: 'simpo-view-blog', standalone: true, imports: [CommonModule], template: "<section class=\"main-section\">\n <div class=\"blog-details\">\n <!-- <h1 class=\"blog-title\">{{responseData.postTitle}}</h1> -->\n <div style=\"margin-top: 20px;\">\n <ng-container *ngFor=\"let item of responseData?.blocks\">\n <div *ngIf=\"item.type=='header'\">\n <h1 *ngIf=\"item.data.level==1\" [innerHTML]=\"item.data.text\"></h1>\n <h2 *ngIf=\"item.data.level==2\" [innerHTML]=\"item.data.text\"></h2>\n <h3 *ngIf=\"item.data.level==3\" [innerHTML]=\"item.data.text\"></h3>\n <h4 *ngIf=\"item.data.level==4\" [innerHTML]=\"item.data.text\"></h4>\n <h5 *ngIf=\"item.data.level==5\" [innerHTML]=\"item.data.text\"></h5>\n <h6 *ngIf=\"item.data.level==6\" [innerHTML]=\"item.data.text\"></h6>\n </div>\n <div *ngIf=\"item.type=='paragraph'\">\n <p class=\"inner-text\" [innerHTML]=\"item.data.text\"></p>\n </div>\n <div *ngIf=\"item.type=='list'\">\n <div *ngIf=\"item.type=='list'\">\n <div *ngIf=\"item.data.style=='ordered'\">\n <ol class=\"list-style\">\n <ng-container *ngFor=\"let list of item.data.items\">\n <li [innerHTML]=\"list\"></li>\n </ng-container>\n </ol>\n </div>\n <div *ngIf=\"item.data.style=='unordered'\">\n <ul class=\"list-style\">\n <ng-container *ngFor=\"let list of item.data.items\">\n <li [innerHTML]=\"list\"></li>\n </ng-container>\n </ul>\n </div>\n </div>\n </div>\n <div *ngIf=\"item.type=='delimiter'\" class=\"ce-delimiter\">\n </div>\n <div *ngIf=\"item.type=='image'\" class=\"image-container\">\n <img loading=\"lazy\" [src]=\"item.data.file.url\" alt=\"\" loading=\"lazy\">\n </div>\n <div *ngIf=\"item.type=='table'\">\n\n <table>\n <ng-container *ngFor=\"let data of item.data.content\">\n <tr>\n <ng-container *ngFor=\"let item of data\">\n <td [innerHTML]=\"item\"></td>\n </ng-container>\n </tr>\n </ng-container>\n </table>\n\n </div>\n </ng-container>\n </div>\n </div>\n</section>\n", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.main-section{padding:5%;background-color:#fff}.blog-details{width:60%;margin:0 auto}.delimiter{display:flex;justify-content:center}.ce-delimiter:before{display:inline-block;content:\"***\";font-size:30px;line-height:65px;height:30px;letter-spacing:.2em}p{line-height:1.6em}.back-text{@include body16r();margin-left:9px;margin-top:1px;cursor:pointer}table{border-collapse:collapse;width:100%}th,td{border:1px solid black;text-align:center}.header{margin-top:8px;margin-bottom:14px;padding-left:20px}.header img,.configuration-tab img{cursor:pointer}.blogs-totalsection{background:#eee;position:absolute;top:55px;height:calc(100vh - 55px);width:81.7%;z-index:10;overflow-y:scroll;padding:14px}.blog-title{line-height:35px}.image-container{width:100%;margin:10px 0}.image-container img{width:100%}h1,h2,h3,h4,h5,h6{padding:.6em 0 3px}.h1,.h2,.h3,h1,h2,h3{margin-top:0}.list-style li{text-align:left}@media only screen and (max-width :500px){.blog-details{width:100%}}\n"] }]
11937
11947
  }], ctorParameters: () => [{ type: EventsService }], propDecorators: { responseData: [{
11938
11948
  type: Input
11939
11949
  }] } });
@@ -16769,7 +16779,7 @@ class SmallProductListingComponent {
16769
16779
  return (((product?.price?.value - product?.price?.discountedPrice) / product?.price?.value) * 100).toFixed(0);
16770
16780
  }
16771
16781
  goToProductDetail(product) {
16772
- this.router.navigate([`details`], { queryParams: { id: product.itemId } });
16782
+ this.router.navigate([`details`], { queryParams: { id: product.itemId, varientId: product.varientId } });
16773
16783
  }
16774
16784
  getSupportingColor(color) {
16775
16785
  let hex = color;