import { __decorate } from "tslib";
import { Component, OnInit, Input, Output, Renderer2, ViewChild, ElementRef, EventEmitter } from '@angular/core';
import { EwMaDesignService } from '../../../ew-ma-design.service';
let RegisterFormPreviewComponent = class RegisterFormPreviewComponent {
    /**
     * @description
     * constructor
     */
    constructor(designService, renderer, el) {
        this.designService = designService;
        this.renderer = renderer;
        this.el = el;
        /**
        * Current Preview Layout
        */
        this.currentPreviewLayout = "desktop";
        /**
         * @description
         * Meta data values for local component
         */
        this.meta_data = '';
        /**
         * @description
         * Form refernce
         */
        this.regForm = '';
        this.regFormRawValue = '';
        this.regFormOldRawValue = '';
        this.changeDetected = false;
        this.uniqueClass = '';
        this.ewTemplateStyle = '';
        this.styleRef = '';
        this.ewFontSize = '';
        this.ewFontSizeOldValue = '';
        this.ewTopMargin = '';
        this.ewTopMarginOldValue = '';
        this.ewBtnTextfontsize = '';
        this.ewBtnTextfontsizeOldValue = '';
        this.ewBtnSubfontsize = '';
        this.ewBtnSubfontsizeOldValue = '';
        this.onClick = new EventEmitter();
    }
    /**
     * NgOnint hook
     */
    ngOnInit() {
        this.timestampID = new Date().getUTCMilliseconds();
        //if(this.regForm == undefined){
        this.regForm = JSON.parse(localStorage.getItem('registrationFormData' + this.designService.eventId));
        //}
        this.meta_data = this.data.meta_data;
        if (Object.keys(this.meta_data).length === 0) {
            //Init Default Values
            this.meta_data.label = "Registration Form Style";
            this.meta_data.key = "reg_form_style";
            this.data.meta_data.reg_form_content_border_directions = "ew_no_border";
            this.data.meta_data.reg_form_margin_top = 30;
            this.data.meta_data.mobile_reg_form_margin_top = 30;
            this.data.meta_data.reg_form_padding_top = 20;
            this.data.meta_data.reg_form_padding_right = 20;
            this.data.meta_data.reg_form_padding_bottom = 20;
            this.data.meta_data.reg_form_padding_left = 20;
            this.data.meta_data.reg_form_btn_bg_color = "rgb(0,154,255)";
            this.data.meta_data.reg_form_btn_text_color = this.regForm.page_setting.typography.primary.color;
            ;
            this.data.meta_data.reg_form_sub_btn_text_color = this.regForm.page_setting.typography.primary.color;
            ;
            this.data.meta_data.reg_form_btn_font_size = "22";
            this.data.meta_data.reg_form_btn_mobile_font_size = "22";
            this.data.meta_data.reg_form_sub_btn_text_size = "14";
            this.data.meta_data.reg_form_sub_btn_mobile_text_size = "14";
            this.data.meta_data.reg_form_gdpr_text_color = this.regForm.page_setting.typography.primary.color;
            this.data.meta_data.reg_form_btn_radius = 10;
            this.data.meta_data.reg_form_btn_border_directions = "ew_no_border";
            this.data.meta_data.reg_form_btn_border_style = "solid";
            this.data.meta_data.reg_form_btn_border_size = "1";
            this.data.meta_data.reg_form_btn_border_color = "rgb(0, 0, 0)";
            this.data.meta_data.box_shadow = "ew-no-shadow";
            this.data.meta_data.custom_class = "";
            this.data.meta_data.reg_form_inputs_radius = 10;
            this.data.meta_data.reg_form_inputs_text_color = this.regForm.page_setting.typography.primary.color;
            this.data.meta_data.reg_form_inputs_bg_color = "rgba(255, 255, 255,1)";
            this.data.meta_data.reg_form_inputs_border_size = 1;
            this.data.meta_data.reg_form_inputs_border_color = "rgb(118,118,118)";
            this.data.meta_data.reg_form_width = "100";
            this.data.meta_data.reg_popup_inputs_fonts = this.regForm.page_setting.typography.primary.font_family;
            this.data.meta_data.reg_popup_inputs_font_variant = this.regForm.page_setting.typography.primary.font_weight;
            this.data.meta_data.reg_popup_inputs_font_size = "15";
            this.data.meta_data.reg_popup_inputs_mobile_font_size = "15";
            this.data.meta_data.reg_popup_inputs_text_color = this.regForm.page_setting.typography.primary.color;
            this.data.meta_data.reg_form_border_radius = "0";
            this.data.meta_data.reg_form_border_color = "rgb(0, 0, 0)";
            this.data.meta_data.reg_form_border_size = "1";
            this.data.meta_data.reg_form_border_style = "solid";
            this.data.meta_data.reg_popup_inputs_text_align = "left";
            this.data.meta_data.reg_popup_box_align = "margin-left: auto;margin-right: auto;";
            this.data.meta_data.reg_form_btn_font_family = this.regForm.page_setting.typography.primary.font_family;
            this.data.meta_data.reg_form_btn_font_variant = this.regForm.page_setting.typography.primary.font_weight;
            this.data.meta_data.hide_desktop = (this.data.meta_data.hide_desktop) ? this.data.meta_data.hide_desktop : true;
            this.data.meta_data.hide_mobile = (this.data.meta_data.hide_mobile) ? this.data.meta_data.hide_mobile : true;
            setTimeout(() => this.designService.scrollToView(this.wrapEleRef), 0);
            this.uniqueClass = this.getUniqueClass();
            this.data.meta_data.unique_class = this.uniqueClass;
        }
        else {
            this.uniqueClass = this.data.meta_data.unique_class;
        }
        //this.renderer.removeChild(this.el.nativeElement, this.styleRef);
        this.styleRef = this.renderer.createElement('style');
        this.currentPreviewLayout = localStorage.getItem('currentPreviewLayout');
        //this.ewTemplateStyle='.'+this.uniqueClass+'[style]{font-size: '+this.data.meta_data.font_size+'px;margin-top: '+this.data.meta_data.event_schedule_margin_top+'px;}';
        this.ewTemplateStyle = '.' + this.uniqueClass + '[style]{ margin-top: ' + this.data.meta_data.reg_form_margin_top + 'px;}';
        this.ewTemplateStyle += '.' + this.uniqueClass + ' .inputs-unique-for-mobile-size { font-size: ' + this.data.meta_data.reg_popup_inputs_font_size + 'px;}';
        this.ewTemplateStyle += '.' + this.uniqueClass + ' .btn-text-unique-for-mobile-size { font-size: ' + this.data.meta_data.reg_form_btn_font_size + 'px;}';
        this.ewTemplateStyle += '.' + this.uniqueClass + ' .btn-sub-text-unique-for-mobile-size { font-size: ' + this.data.meta_data.reg_form_sub_btn_text_size + 'px;}';
        const text = this.renderer.createText(this.ewTemplateStyle);
        this.renderer.appendChild(this.styleRef, text);
        this.renderer.appendChild(this.el.nativeElement, this.styleRef);
        let scriptRef = this.renderer.createElement('script');
        const labelScript = this.renderer.createText('function toggleInputLabel(elmnt) {	var inputValue=elmnt.value;		var parentEle=elmnt.parentElement;		if(inputValue){		parentEle.classList.add("ew-hide-label");		}else{		parentEle.classList.remove("ew-hide-label");		}			}');
        this.renderer.appendChild(scriptRef, labelScript);
        this.renderer.appendChild(this.el.nativeElement, scriptRef);
    }
    /**
    * Get the current value of Preview Layout style
    */
    ngDoCheck() {
        var _a, _b, _c, _d;
        this.currentPreviewLayout = localStorage.getItem('currentPreviewLayout');
        this.regFormRawValue = localStorage.getItem('registrationFormData' + this.designService.eventId);
        if (this.regFormRawValue !== this.regFormOldRawValue) {
            this.changeDetected = true;
            this.regFormOldRawValue = this.regFormRawValue;
        }
        let inputsFontSizeValueVersion = (this.currentPreviewLayout == 'desktop') ? this.data.meta_data.reg_popup_inputs_font_size : (_a = this.data.meta_data) === null || _a === void 0 ? void 0 : _a.reg_popup_inputs_mobile_font_size;
        this.ewFontSize = inputsFontSizeValueVersion;
        let topMarginValueVersion = (this.currentPreviewLayout == 'desktop') ? this.data.meta_data.reg_form_margin_top : (_b = this.data.meta_data) === null || _b === void 0 ? void 0 : _b.mobile_reg_form_margin_top;
        this.ewTopMargin = topMarginValueVersion;
        let btnTextfontsizeValueVersion = (this.currentPreviewLayout == 'desktop') ? this.data.meta_data.reg_form_btn_font_size : this.data.meta_data.reg_form_btn_mobile_font_size;
        this.ewBtnTextfontsize = btnTextfontsizeValueVersion;
        let btnSubTextfontsizeValueVersion = (this.currentPreviewLayout == 'desktop') ? this.data.meta_data.reg_form_sub_btn_text_size : this.data.meta_data.reg_form_sub_btn_mobile_font_size;
        this.ewBtnSubfontsize = btnSubTextfontsizeValueVersion;
        if (this.ewFontSize !== this.ewFontSizeOldValue) {
            this.changeDetected = true;
            this.ewFontSizeOldValue = this.ewFontSize;
        }
        if (this.ewTopMargin !== this.ewTopMarginOldValue) {
            this.changeDetected = true;
            this.ewTopMarginOldValue = this.ewTopMargin;
        }
        if (this.ewBtnTextfontsize !== this.ewBtnTextfontsizeOldValue) {
            this.changeDetected = true;
            this.ewBtnTextfontsizeOldValue = this.ewBtnTextfontsize;
        }
        if (this.ewBtnSubfontsize !== this.ewBtnSubfontsizeOldValue) {
            this.changeDetected = true;
            this.ewBtnSubfontsizeOldValue = this.ewBtnSubfontsize;
        }
        if (this.changeDetected) {
            this.regForm = JSON.parse(localStorage.getItem('registrationFormData' + this.designService.eventId));
            this.ewTemplateStyle = '.' + this.uniqueClass + '[style]{ margin-top: ' + topMarginValueVersion + 'px;}';
            this.ewTemplateStyle += '.' + this.uniqueClass + ' .inputs-unique-for-mobile-size { font-size: ' + inputsFontSizeValueVersion + 'px;}';
            this.ewTemplateStyle += '.' + this.uniqueClass + ' .btn-text-unique-for-mobile-size { font-size: ' + btnTextfontsizeValueVersion + 'px;}';
            this.ewTemplateStyle += '.' + this.uniqueClass + ' .btn-sub-text-unique-for-mobile-size { font-size: ' + btnSubTextfontsizeValueVersion + 'px;}';
            this.ewTemplateStyle += '@media only screen and (max-width: 767px) { .' + this.uniqueClass + '[style]{ margin-top: ' + ((_c = this.data.meta_data) === null || _c === void 0 ? void 0 : _c.reg_popup_inputs_font_size) + 'px;} .' + this.uniqueClass + ' .inputs-unique-for-mobile-size { font-size: ' + ((_d = this.data.meta_data) === null || _d === void 0 ? void 0 : _d.reg_popup_inputs_mobile_font_size) + 'px;} .' + this.uniqueClass + ' .btn-text-unique-for-mobile-size { font-size: ' + this.data.meta_data.reg_form_btn_mobile_font_size + 'px;}.' + this.uniqueClass + ' .btn-sub-text-unique-for-mobile-size { font-size: ' + this.data.meta_data.reg_form_sub_btn_mobile_font_size + 'px;}}';
            const text = this.renderer.createText(this.ewTemplateStyle);
            this.renderer.removeChild(this.el.nativeElement, this.styleRef);
            this.styleRef = this.renderer.createElement('style');
            this.renderer.appendChild(this.styleRef, text);
            this.renderer.appendChild(this.el.nativeElement, this.styleRef);
        }
        this.changeDetected = false;
    }
    openConfigPanel() {
        this.onClick.emit();
    }
    ewFormSubmit() {
        //return 'register-form--'+this.timestampID;
        return 'ewFormSubmit("register-form--' + this.timestampID + '")';
    }
    /**
     * generate unique class
     */
    getUniqueClass() {
        return "ew-unique-register-form--" + Math.floor(Math.random() * (999999 - 100000)) + 100000;
    }
};
RegisterFormPreviewComponent.ctorParameters = () => [
    { type: EwMaDesignService },
    { type: Renderer2 },
    { type: ElementRef }
];
__decorate([
    ViewChild('wrapElement')
], RegisterFormPreviewComponent.prototype, "wrapEleRef", void 0);
__decorate([
    Input()
], RegisterFormPreviewComponent.prototype, "regForm", void 0);
__decorate([
    Input()
], RegisterFormPreviewComponent.prototype, "data", void 0);
__decorate([
    Output()
], RegisterFormPreviewComponent.prototype, "onClick", void 0);
RegisterFormPreviewComponent = __decorate([
    Component({
        selector: 'ew-element-register-form-preview',
        template: "<!-- [ngStyle]=\"{\r\n    'margin-top': meta_data?.reg_form_margin_top + 'px'\r\n    \r\n  }\" \r\nclass=\"register-form--{{timestampID}}\"\r\n-->\r\n\r\n\r\n<!-- <div\r\n  #wrapElement\r\n  class=\"common-elements-wrapper registration-form-elements-wrapper\"\r\n [ngClass]=\"{\r\n   'selected-layer': data.focused\r\n  }\"\r\n>\r\n\r\n\r\n   <form \r\n    class=\"register-form--checking\"\r\n    \r\n    >\r\n      <div class=\"custom-preview-form form-title-border {{uniqueClass}} {{meta_data?.reg_form_content_border_directions}}\" \r\n        (click)=\"openConfigPanel()\"\r\n        [ngStyle]=\"{\r\n          'background-color': meta_data?.reg_form_popup_content_bg_color\r\n          \r\n        }\"\r\n        [style.padding-top]=\"meta_data?.reg_form_padding_top + 'px'\"\r\n        [style.padding-bottom]=\"meta_data?.reg_form_padding_bottom + 'px'\"\r\n        [style.padding-right]=\"meta_data?.reg_form_padding_right + 'px'\"\r\n        [style.padding-left]=\"meta_data?.reg_form_padding_left + 'px'\"\r\n\r\n        [style.border-radius]=\"meta_data?.reg_form_border_radius + 'px'\"\r\n        [style.border-color]=\"meta_data?.reg_form_border_color\"\r\n        [style.border-width]=\"meta_data?.reg_form_border_size + 'px'\"\r\n        [style.border-style]=\"meta_data?.reg_form_border_style\"       \r\n      >\r\n      \r\n      <div class=\"custom-form-area\" [style]=\"meta_data?.reg_popup_box_align\"\r\n        [ngStyle]=\"{\r\n          'width': meta_data.reg_form_width +'%'\r\n          \r\n        }\"        \r\n        >\r\n        \r\n        \r\n        <span  *ngFor=\"let field of regForm?.registration.form_field\">\r\n          <mat-form-field floatLabel=\"never\" class=\"ew-field-no-label inputs-unique-for-mobile-size\" *ngIf=\"((field.type !== 'S') && (field.status == false || field.status == undefined))\" >\r\n              <mat-label \r\n                [style.color]=\"meta_data.reg_popup_inputs_text_color\"\r\n                [style.font-family]=\"meta_data.reg_popup_inputs_fonts\"\r\n                [style.text-align]=\"meta_data.reg_popup_inputs_text_align\"                \r\n              >\r\n                {{field.placeholder_txt}} {{ (field.required == false) ? '*' : ''}}\r\n              </mat-label>\r\n              <input matInput placeholder=\"{{field.placeholder_txt}}\" \r\n\r\n              [attr.is_required]=\"(field.required == false) ? 1 :0\"\r\n              [attr.name]=\"'ewp_custom_field_'+field.ewp_field_id\" \r\n\r\n              [ngStyle]=\"{\r\n                  'background-color': meta_data.reg_popup_inputs_bg_color,\r\n                  'border-color': meta_data.reg_form_inputs_border_color\r\n              }\"\r\n              \r\n              [style.border-radius]=\"meta_data?.reg_form_inputs_radius + 'px'\"\r\n              style=\"border:1px solid;height: 55px;\">\r\n          </mat-form-field>\r\n\r\n          <mat-form-field *ngIf=\"((field.type == 'S') && field.status !== false)\" class=\"inputs-unique-for-mobile-size builder-preview-form-select ew-field-no-label \" floatLabel=\"never\">\r\n              <mat-select matInput placeholder=\"{{field.placeholder_txt}}\" \r\n\r\n                [attr.is_required]=\"(field.required == false) ? 1 :0\"                \r\n                [attr.name]=\"'ewp_custom_field_'+field.ewp_field_id\"\r\n\r\n                style=\"border:1px solid;height: 55px;\"\r\n                [style.border-radius]=\"meta_data?.reg_form_inputs_radius + 'px'\"\r\n                [ngStyle]=\"{\r\n                    'text-align': meta_data.reg_popup_inputs_text_align,\r\n                    'background-color': meta_data.reg_popup_inputs_bg_color,\r\n                    'border-color': meta_data.reg_form_inputs_border_color,\r\n                    \r\n                    'font-family': meta_data.reg_popup_inputs_fonts\r\n                }\"\r\n              >\r\n                \r\n              </mat-select>\r\n          </mat-form-field>\r\n\r\n        </span>\r\n      \r\n        <div class=\"coonfirmation-section-custom\" *ngIf=\"(!regForm?.registration.gdpr_consent.status)\">\r\n            <mat-checkbox class=\"example-margin\" name=\"chd_gdpr\" [attr.gdpr_mandatory]=\"(regForm?.registration.gdpr_required) ? 'false':'true'\"> \r\n              <span \r\n              [style.color]=\"meta_data?.reg_form_gdpr_text_color\">\r\n               {{regForm?.registration.gdpr_consent.text}}</span>\r\n            </mat-checkbox>\r\n        </div>\r\n        \r\n        <button  class=\"large-btn-ew {{meta_data?.reg_form_btn_border_directions}}\" mat-flat-button color=\"accent\" \r\n\r\n          [style.border-radius]=\"meta_data?.reg_form_btn_radius + 'px'\"\r\n          [style.border-color]=\"meta_data?.reg_form_btn_border_color\"\r\n          [style.border-width]=\"meta_data?.reg_form_btn_border_size + 'px'\"\r\n          [style.border-style]=\"meta_data?.reg_form_btn_border_style\"\r\n\r\n          type=\"button\"\r\n          onclick='ewFormSubmit(\"register-form--checking\")'\r\n\r\n          style=\"height: auto;padding:15px 30px 15px 30px;\"\r\n          [ngStyle]=\"{\r\n              'background-color': meta_data?.reg_form_btn_bg_color,\r\n              'color': meta_data?.reg_form_btn_text_color,\r\n              'font-family': meta_data.reg_form_btn_font_family\r\n          }\"\r\n          >\r\n          <span class=\"text-builder-btn btn-text-unique-for-mobile-size\" \r\n            >\r\n            {{regForm?.registration.submit_button.text}}\r\n          </span>\r\n          <span class=\"sub-text-builder-btn btn-sub-text-unique-for-mobile-size\" \r\n            *ngIf=\"(regForm?.registration.submit_button_sub_text.text.length)\"\r\n            style=\"line-height: normal; font-weight: 400;margin-top:8px ;\"\r\n            [ngStyle]=\"{\r\n                'color': meta_data.reg_form_sub_btn_text_color,\r\n                'font-family': meta_data.reg_form_btn_font_family\r\n            }\"\r\n            >\r\n            {{regForm?.registration.submit_button_sub_text.text}}\r\n          </span>\r\n        </button>\r\n      </div>\r\n    </div>\r\n    </form>\r\n    <ng-content></ng-content>\r\n  </div> -->\r\n\r\n\r\n  \r\n\r\n\r\n<div\r\n  #wrapElement\r\n  class=\"common-elements-wrapper registration-form-elements-wrapper\"\r\n [ngClass]=\"{\r\n   'selected-layer': data.focused,\r\n   'element-wrapper-visibilty': data.meta_data?.hide_desktop==false || data.meta_data?.hide_mobile==false,\r\n\t\t'desktop-only': data.meta_data?.hide_mobile==true && data.meta_data?.hide_desktop==false,\r\n\t\t'mobile-only': data.meta_data?.hide_desktop==true && data.meta_data?.hide_mobile==false\r\n  }\"\r\n>\r\n<div class=\"visibilty-area-label\" *ngIf=\"(data.meta_data?.hide_desktop==false || data.meta_data?.hide_mobile==false)\">{{ ((data.meta_data?.hide_desktop==false)?'BUILDER.ELEMENTS.DESKTOP_ONLY':((data.meta_data?.hide_mobile==false)?'BUILDER.ELEMENTS.MOBILE_ONLY':'')) | translate }}</div>\r\n<div class=\"visibility-device-icon\" *ngIf=\"(data.meta_data?.hide_desktop==false || data.meta_data?.hide_mobile==false)\">\r\n  <mat-icon class=\"mat-icon notranslate material-icons mat-icon-no-color\" style=\"font-size: 2rem;top: 5px;position: relative;\" *ngIf=\"(this.currentPreviewLayout=='mobile' && data.meta_data?.hide_mobile==false)\">smartphone</mat-icon>\r\n  <mat-icon class=\"mat-icon notranslate material-icons mat-icon-no-color\" style=\"font-size: 2rem;top: 5px;position: relative;\" *ngIf=\"(this.currentPreviewLayout=='desktop' && data.meta_data?.hide_desktop==false)\">laptop</mat-icon>\r\n</div>\r\n   <form \r\n      class=\"ew-register-form--{{timestampID}}\"\r\n      attr.ew-unique-class=\"ew-register-form--{{timestampID}}\"\r\n    >\r\n    \r\n      <div class=\"custom-preview-form form-title-border {{data.meta_data?.custom_class}}  {{data.meta_data?.box_shadow}} {{uniqueClass}} {{meta_data?.reg_form_content_border_directions}}\" \r\n        (click)=\"openConfigPanel()\"\r\n        [ngStyle]=\"{\r\n          'background-color': meta_data?.reg_form_popup_content_bg_color\r\n          \r\n        }\"\r\n        [style.padding-top]=\"meta_data?.reg_form_padding_top + 'px'\"\r\n        [style.padding-bottom]=\"meta_data?.reg_form_padding_bottom + 'px'\"\r\n        [style.padding-right]=\"meta_data?.reg_form_padding_right + 'px'\"\r\n        [style.padding-left]=\"meta_data?.reg_form_padding_left + 'px'\"\r\n\r\n        [style.border-radius]=\"meta_data?.reg_form_border_radius + 'px'\"\r\n        [style.border-color]=\"meta_data?.reg_form_border_color\"\r\n        [style.border-width]=\"meta_data?.reg_form_border_size + 'px'\"\r\n        [style.border-style]=\"meta_data?.reg_form_border_style\"       \r\n      >\r\n\r\n      <div class=\"custom-form-area disableClick\" [style]=\"meta_data?.reg_popup_box_align\"\r\n        [ngStyle]=\"{\r\n          'width': meta_data.reg_form_width +'%'\r\n          \r\n        }\"        \r\n        >\r\n        \r\n        <span  *ngFor=\"let field of regForm?.registration.form_field\" class=\"custom-field-wrapper\"\r\n          [ngClass]=\"['sGFfonte-' + data.meta_data?.reg_popup_inputs_font_variant]\"\r\n        >\r\n\r\n          <div class=\"ew-custom-input-preview {{ (field.type == 'P' ) ? 'ew-custom-phone-input-preview': ''}}\"\r\n            *ngIf=\"((field.type !== 'H') && (field.type !== 'S') && (field.status == false))\"\r\n          >\r\n          \r\n            <input  \r\n              style=\"height: 55px;border-style:solid; margin-top: 10px !important; \"\r\n              autocomplete=\"off\"\r\n              [attr.field_type]=\"field.type\"\r\n\r\n              onkeyup=\"toggleInputLabel(this)\"\r\n              type=\"{{ (field.type == 'N' || field.type == 'P') ? 'number': 'text' }}\" \r\n\r\n              [attr.is_required]=\"(field.required == false) ? 1 :0\"\r\n              [attr.full_name_required]=\"(field.full_name_required == false) ? 1 :0 \"\r\n              [attr.name]=\"'ewp_custom_field_'+field.ewp_field_id\"\r\n              \r\n              [style.border-radius]=\"meta_data?.reg_form_inputs_radius + 'px'\"\r\n              [ngStyle]=\"{\r\n                  'background-color': (meta_data?.reg_popup_inputs_bg_color)? meta_data?.reg_popup_inputs_bg_color:'',\r\n                  'border-color': meta_data.reg_form_inputs_border_color\r\n              }\"\r\n              [style.border-width]=\"meta_data?.reg_form_inputs_border_size + 'px'\"\r\n              [style.text-align]=\"meta_data.reg_popup_inputs_text_align\" \r\n            >\r\n            <!-- [attr.id]=\"'ewp_custom_field_'+field.ewp_field_id\" -->\r\n            \r\n            <label\r\n              [ngClass]=\"['sGFfonte-' + data.meta_data?.reg_popup_inputs_font_variant]\"\r\n              style=\"width: auto;cursor: text;\"\r\n              class=\"inputs-unique-for-mobile-size\"\r\n\r\n              [attr.for]=\"'ewp_custom_field_'+field.ewp_field_id\"\r\n              [style.color]=\"meta_data.reg_popup_inputs_text_color\"\r\n              [style.font-family]=\"meta_data.reg_popup_inputs_fonts\"\r\n              [style.text-align]=\"meta_data.reg_popup_inputs_text_align\"              \r\n            >\r\n              {{field.placeholder_txt}} {{ (field.required == false) ? '*' : ''}}\r\n            </label>\r\n            <div class=\"ew-custom-inputs-validation-message\" style=\"display: none;\">{{field.validation_txt}}</div>\r\n          </div>\r\n          \r\n          <mat-form-field *ngIf=\"((field.type == 'S') && field.status == false)\"  class=\"ew-mat-select-conversion inputs-unique-for-mobile-size builder-preview-form-select ew-field-no-label \" floatLabel=\"never\">\r\n            <mat-select  \r\n              [ngClass]=\"['sGFfonte-' + data.meta_data?.reg_popup_inputs_font_variant]\"\r\n              [value]=\"field.placeholder_txt\"\r\n              \r\n              [attr.is_required]=\"(field.required == false) ? 1 :0\"                \r\n              [attr.name]=\"'ewp_custom_field_'+field.ewp_field_id\"\r\n\r\n              style=\"border:1px solid;height: 55px;margin-top: 10px !important;\"\r\n              [style.border-radius]=\"meta_data?.reg_form_inputs_radius + 'px'\"\r\n              [ngStyle]=\"{\r\n                  'text-align': meta_data.reg_popup_inputs_text_align,\r\n                  'background-color': (meta_data?.reg_popup_inputs_bg_color)?meta_data?.reg_popup_inputs_bg_color:'white',\r\n                  'border-color': meta_data.reg_form_inputs_border_color,\r\n                  'color': meta_data.reg_popup_inputs_text_color,\r\n                  'font-family': meta_data.reg_popup_inputs_fonts,\r\n                  'font-size': meta_data.reg_popup_inputs_font_size+'px'\r\n              }\"\r\n            >\r\n              \r\n              <mat-option [value]=\"field.placeholder_txt\">{{field.placeholder_txt}} {{ (field.required == false) ? '*' : ''}}</mat-option>\r\n\r\n              <mat-option *ngFor=\"let opt of field.options\" [value]=\"opt.option_val\">\r\n                {{opt.option_txt}}\r\n              </mat-option>\r\n              \r\n            </mat-select>\r\n          </mat-form-field>\r\n\r\n          <div *ngIf=\"((field.type == 'S') && field.status == false)\"\r\n            class=\"ew-custom-form-select u-customDropdown--old\"\r\n            [ngClass]=\"['sGFfonte-' + data.meta_data?.reg_popup_inputs_font_variant]\"\r\n            [attr.is_required]=\"(field.required == false) ? 1 :0\"                \r\n            [attr.name]=\"'ewp_custom_field_'+field.ewp_field_id\"\r\n\r\n            style=\"border:1px solid;height: 55px;margin-top: 10px !important;display: none;\"\r\n            [style.border-radius]=\"meta_data?.reg_form_inputs_radius + 'px'\"\r\n            [ngStyle]=\"{\r\n                'text-align': meta_data.reg_popup_inputs_text_align,\r\n                'background-color': (meta_data?.reg_popup_inputs_bg_color)?meta_data?.reg_popup_inputs_bg_color:'white',\r\n                'border-color': meta_data.reg_form_inputs_border_color,\r\n                'color': meta_data.reg_popup_inputs_text_color,\r\n                'font-family': meta_data.reg_popup_inputs_fonts\r\n            }\"\r\n            >\r\n            <!-- ew-custom-nice-select -->\r\n            <div class=\"ew-custom-nice-select\" style=\"display:none\">\r\n              <select  [attr.name]=\"'ewp_custom_field_'+field.ewp_field_id\">\r\n                <option value=\"-1\" selected=\"selected\">{{field.placeholder_txt}} {{ (field.required == false) ? '*' : ''}}</option>\r\n                  <option *ngFor=\"let opt of field.options\" [value]=\"(opt.option_val) ? opt.option_val : opt.option_txt\">{{opt.option_txt}}</option>\r\n              </select>\r\n            </div>\r\n            \r\n            <!-- <div class=\"ew-custom-inputs-validation-message\" style=\"display: none;\">{{field.validation_txt}}</div> -->\r\n          </div>\r\n\r\n        </span>\r\n      \r\n        <div class=\"coonfirmation-section-custom custom-gdpr-wrapper\" *ngIf=\"(!regForm?.registration.gdpr_status)\">\r\n            <input \r\n              name=\"chd_gdpr\" \r\n              [attr.gdpr_mandatory]=\"(regForm?.registration.gdpr_required) ? 'false':'true'\"\r\n\r\n              style=\"width: 23px;height: 17px;margin-right: 6px;margin-top: 0 !important;\" \r\n              type=\"checkbox\"\r\n            >\r\n            <label \r\n              [ngClass]=\"['sGFfonte-' + data.meta_data?.reg_popup_inputs_font_variant]\"\r\n              [style.font-family]=\"meta_data.reg_popup_inputs_fonts\"\r\n              [style.color]=\"meta_data?.reg_form_gdpr_text_color\">\r\n               {{regForm?.registration.gdpr_consent}}\r\n            </label>\r\n\r\n        </div>\r\n\r\n        \r\n\r\n        <!-- onclick='ewFormSubmit(\"register-form--checking\")' -->\r\n        <button  class=\"ew-form-sumit-button large-btn-ew {{meta_data?.reg_form_btn_border_directions}}\"\r\n          [ngClass]=\"['sGFfonte-' + data.meta_data?.reg_form_btn_font_variant]\"\r\n          [style.border-radius]=\"meta_data?.reg_form_btn_radius + 'px'\"\r\n          [style.border-color]=\"meta_data?.reg_form_btn_border_color\"\r\n          [style.border-width]=\"meta_data?.reg_form_btn_border_size + 'px'\"\r\n          [style.border-style]=\"meta_data?.reg_form_btn_border_style\"\r\n\r\n          type=\"button\"\r\n\r\n          style=\"margin-top: 10px !important; width: 100%;outline: none;height: auto;padding:15px 30px 15px 30px;\"\r\n          [ngStyle]=\"{\r\n              'background-color': meta_data?.reg_form_btn_bg_color,\r\n              'color': meta_data?.reg_form_btn_text_color,\r\n              'font-family': meta_data.reg_form_btn_font_family\r\n          }\"\r\n          >\r\n          <span class=\"text-builder-btn btn-text-unique-for-mobile-size\" \r\n            >\r\n            {{regForm?.registration.submit_button.text}}\r\n          </span>\r\n          <span class=\"sub-text-builder-btn btn-sub-text-unique-for-mobile-size\" \r\n            *ngIf=\"(regForm?.registration.submit_button_sub_text.text.length)\"\r\n            style=\"line-height: normal; font-weight: 400;margin-top:8px ;\"\r\n            [ngStyle]=\"{\r\n                'color': meta_data.reg_form_sub_btn_text_color,\r\n                'font-family': meta_data.reg_form_btn_font_family\r\n            }\"\r\n            >\r\n            {{regForm?.registration.submit_button_sub_text.text}}\r\n          </span>\r\n        </button>\r\n      </div>\r\n    </div>\r\n    </form>\r\n    <ng-content></ng-content>\r\n  </div>\r\n",
        styles: [""]
    })
], RegisterFormPreviewComponent);
export { RegisterFormPreviewComponent };
//# sourceMappingURL=data:application/json;base64, 