import { Component, Input, HostListener, Inject, PLATFORM_ID } from '@angular/core';
import { SimpoElementsModule } from './../../elements/index';
import { CommonModule } from '@angular/common';
import { SimpoComponentModule } from '../../components/index';
import { MatGridListModule } from '@angular/material/grid-list';
import { SimpoButtonComponent } from '../../elements/simpo-button/simpo-button.component';
import { AnimationDirective } from '../../directive/animation-directive';
import { BackgroundDirective } from '../../directive/background-directive';
import { ContentFitDirective } from '../../directive/content-fit-directive';
import { BannerContentFitDirective } from '../../directive/banner-content-fit-directive';
import { BorderDirective } from '../../directive/border-directive';
import { ButtonDirectiveDirective } from '../../directive/button-directive.directive';
import { ColumnDirectiveDirective } from '../../directive/column-directive.directive';
import { ContainerFitDirective } from '../../directive/container-fir.directive';
import { simpoConetenAlignmentDirective } from '../../directive/content-alignment-directive';
import { CornerDirective } from '../../directive/corner-directive';
import { SimpoFooterLayoutDirective } from '../../directive/footer-layout-directive';
import { HoverDirective } from '../../directive/hover-element-directive';
import { ImageDirectiveDirective } from '../../directive/image-directive.directive';
import { OverlayDirective } from '../../directive/overlay-directive';
import { PositionLayoutDirectiveDirective } from '../../directive/position-layout-directive.directive';
import { TextBackgroundDirectiveDirective } from '../../directive/text-background-directive.directive';
import { ObjectPositionDirective } from './../../directive/image-position.directive';
import BaseSection from '../BaseSection';
import { isPlatformBrowser } from '@angular/common';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { SanitizeHtmlPipe } from '../../services/sanitizeHtml';
import { TextEditorComponent } from '../../elements/text-editor/text-editor.component';
import { SpacingHorizontalDirective } from '../../directive/spacing-horizontal.directive';
import { SpacingAroundDirective } from '../../directive/spacing-around.directive';
import { SimpoContainerAligment } from '../../directive/container-alignment.directive';
import { ButtonEditorDirective } from '../../directive/button-editor.directive';
import { ImageEditorDirective } from '../../directive/image-editor.directive';
import * as i0 from "@angular/core";
import * as i1 from "./../../services/events.service";
import * as i2 from "@angular/material/snack-bar";
import * as i3 from "../../elements/svg-divider/svg-divider.component";
import * as i4 from "@angular/common";
import * as i5 from "../../components/hover-elements/hover-elements.component";
import * as i6 from "../../components/delete-hover-element/delete-hover-element.component";
import * as i7 from "../../components/input-fields/input-fields.component";
export class ContactUsComponent extends BaseSection {
    // buttonId: string = '';
    constructor(_eventService, platformId, snackBar) {
        super();
        this._eventService = _eventService;
        this.platformId = platformId;
        this.snackBar = snackBar;
    }
    ngOnInit() {
        this.deleteSelected = this.delete;
        this.content = this.data?.content;
        this.styles = this.data?.styles;
        this.button = this.data?.action?.buttons[0];
        // this.buttonId = (this.data ? this.data.id : '') + (this.button ? this.button.id : '');
        if (!this.styles || !this.content)
            return;
        if (isPlatformBrowser(this.platformId)) {
            this.screenSize();
            window.addEventListener('resize', () => {
                this.screenSize();
            });
        }
    }
    get stylesLayout() {
        return { ...this.styles?.layout };
    }
    screenSize() {
        this.screenWidth = window.innerWidth;
    }
    getWidthByField(field) {
        let width = this.screenWidth > 475 ? '48' : '100';
        let contactWidth = this.screenWidth > 475 ? '97' : '100';
        if (this.edit)
            field.inputValue = '';
        if (field.type == "address") {
            return ((this.content?.contactField.fields.filter((add) => add.type == "address").length ?? 1) % 2) ? contactWidth : width;
        }
        if (field.type === 'textArea') {
            width = '100';
        }
        return field.type == "desc" ? contactWidth : width;
    }
    buttonClick() {
        if (this.content) {
            for (let field of this.content?.contactField?.fields) {
                if (field.required && !field.inputValue) {
                    this.snackBar.open('Please fill mandatory fields', 'close', { duration: 1500 });
                    return;
                }
            }
            this._eventService.contactFormData.emit({ data: this.content?.contactField.fields, successMessage: this.data?.content.contactField.successMessage });
        }
        else {
            this.snackBar.open('Please fill mandatory fields', 'close', { duration: 1500 });
        }
    }
    editSection() {
        if (window.innerWidth <= 475)
            return;
        this._eventService.toggleEditorEvent.emit(false);
        setTimeout(() => {
            this._eventService.editSection.emit({ data: this.data });
        }, 100);
    }
    canShowContactField(field) {
        return Object.hasOwn(field, "status") ? field.status : true;
        // return (
        //   (Object.hasOwn(field, 'status') ? field.status : true) ||
        //   (field?.options?.length > 0)
        // );
    }
    shouldShowDropdown(field) {
        return (field?.type === 'dropdown' &&
            Array.isArray(field.options) &&
            field.options.length > 0 &&
            this.canShowContactField(field));
    }
    getCardStyle() {
        let style = {
            "padding": "1rem",
            "border-radius": "10px"
        };
        if (this.data?.styles?.contentBackground?.display) {
            if (this.data?.styles?.contentBackground?.style == 'black') {
                return { ...style, "background": "#000000AB", "color": "#ffffff" };
            }
            else {
                return { ...style, "background": "#ffffff", "color": "#000000" };
            }
        }
        return {};
    }
    getTextColor(bgColor) {
        if (bgColor) {
            const threshold = 130; // Adjust this threshold as needed
            const r = parseInt(bgColor.slice(1, 3), 16);
            const g = parseInt(bgColor.slice(3, 5), 16);
            const b = parseInt(bgColor.slice(5, 7), 16);
            const brightness = (r * 299 + g * 587 + b * 114) / 1000;
            return brightness > threshold ? '#000000' : '#ffffff';
        }
        return "#ffffff;";
    }
    getAlignment() {
        return this.styles?.layout?.align === 'left' ? 'justify-content-start' : this.styles?.layout?.align === 'right' ? 'justify-content-end' : 'justify-content-center';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContactUsComponent, deps: [{ token: i1.EventsService }, { token: PLATFORM_ID }, { token: i2.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
    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\" 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; let i = index\"\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\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\" [isRTE]=\"item.isRTE\"></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\"></simpo-input-fields>\r\n                <!-- *ngIf=\"shouldShowDropdown(feild)\" -->\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      <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?.layout?.fit !== 'screen' && (styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'), 'align-items-center text-center': styles?.layout?.fit !== 'screen' && 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; let i = index\"\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\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\" [isRTE]=\"item.isRTE\"></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;padding:0 14px}.mobile-text .d-flex div{font-size:24px}}.gap-3{gap:3rem!important}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: i3.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: i5.HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: i6.DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7.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", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: 
                //directive
                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", "itemIndex"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData", "itemIndex"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContactUsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'simpo-contact-us', standalone: true, imports: [
                        SimpoElementsModule,
                        CommonModule,
                        SimpoComponentModule,
                        MatGridListModule,
                        SimpoButtonComponent,
                        TextEditorComponent,
                        //directive
                        AnimationDirective,
                        BackgroundDirective,
                        BannerContentFitDirective,
                        BorderDirective,
                        ButtonDirectiveDirective,
                        ColumnDirectiveDirective,
                        ContainerFitDirective,
                        simpoConetenAlignmentDirective,
                        ContentFitDirective,
                        CornerDirective,
                        SimpoFooterLayoutDirective,
                        HoverDirective,
                        ImageDirectiveDirective,
                        OverlayDirective,
                        PositionLayoutDirectiveDirective,
                        TextBackgroundDirectiveDirective,
                        ObjectPositionDirective,
                        ButtonDirectiveDirective,
                        MatSnackBarModule,
                        SanitizeHtmlPipe,
                        SpacingHorizontalDirective,
                        SpacingAroundDirective,
                        SimpoContainerAligment,
                        ButtonEditorDirective,
                        ImageEditorDirective
                    ], 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\" 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; let i = index\"\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\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\" [isRTE]=\"item.isRTE\"></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\"></simpo-input-fields>\r\n                <!-- *ngIf=\"shouldShowDropdown(feild)\" -->\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      <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?.layout?.fit !== 'screen' && (styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'), 'align-items-center text-center': styles?.layout?.fit !== 'screen' && 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; let i = index\"\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\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\" [isRTE]=\"item.isRTE\"></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;padding:0 14px}.mobile-text .d-flex div{font-size:24px}}.gap-3{gap:3rem!important}\n"] }]
        }], ctorParameters: () => [{ type: i1.EventsService }, { type: Object, decorators: [{
                    type: Inject,
                    args: [PLATFORM_ID]
                }] }, { type: i2.MatSnackBar }], propDecorators: { data: [{
                type: Input
            }], index: [{
                type: Input
            }], edit: [{
                type: Input
            }], delete: [{
                type: Input
            }], customClass: [{
                type: Input
            }], nextComponentColor: [{
                type: Input
            }], screenSize: [{
                type: HostListener,
                args: ['window:resize', ['$event']]
            }] } });
//# sourceMappingURL=data:application/json;base64, 