import { __decorate } from "tslib";
import { Component, OnInit, Input, Renderer2, ElementRef } from '@angular/core';
import { EwMaDesignService } from '../../../ew-ma-design.service';
let RegisterFormWidgetPreviewComponent = class RegisterFormWidgetPreviewComponent {
    constructor(renderer, el, designService) {
        this.renderer = renderer;
        this.el = el;
        this.designService = designService;
        /**
         * @description
         * Form refernce
         */
        this.widgetForm = '';
        this.regForm = '';
        this.regFormRawValue = '';
        this.regFormOldRawValue = '';
        this.changeDetected = false;
    }
    ngOnInit() {
        this.timestampID = new Date().getUTCMilliseconds();
        if (this.regForm == undefined) {
            this.regForm = JSON.parse(localStorage.getItem('widgetFormData' + this.designService.eventId));
        }
        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() {
        this.regFormRawValue = localStorage.getItem('widgetFormData' + this.designService.eventId);
        if (this.regFormRawValue !== this.regFormOldRawValue) {
            this.changeDetected = true;
            this.regFormOldRawValue = this.regFormRawValue;
        }
        if (this.changeDetected) {
            this.regForm = JSON.parse(localStorage.getItem('widgetFormData' + this.designService.eventId));
        }
        this.changeDetected = false;
    }
};
RegisterFormWidgetPreviewComponent.ctorParameters = () => [
    { type: Renderer2 },
    { type: ElementRef },
    { type: EwMaDesignService }
];
__decorate([
    Input()
], RegisterFormWidgetPreviewComponent.prototype, "widgetForm", void 0);
RegisterFormWidgetPreviewComponent = __decorate([
    Component({
        selector: 'ew-element-register-form-widget-preview',
        template: "<!-- <form id=\"register-form--{{timestampID}}\">\r\n    <span  *ngFor=\"let field of regForm?.registration.form_field\">\r\n        <mat-form-field floatLabel=\"never\" class=\"ew-field-no-label\" *ngIf=\"((field.type !== 'S') && (field.status == false || field.status == undefined))\" >\r\n            <mat-label \r\n                [style.color]=\"widgetForm?.widget.element.form_style.text_color\"             \r\n                style=\"font-size: 14px;\"\r\n            >\r\n              {{field.placeholder_txt}} {{ (field.required == false) ? '*' : ''}}\r\n            </mat-label>\r\n            <input matInput placeholder=\"{{field.placeholder_txt}}\" \r\n                style=\"border: 1px solid #C7C7C7;color: #000000; font-size: 14px; height: 50px; border-radius:3px;\"\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': widgetForm?.widget.element.form_style.input_color\r\n                }\"\r\n            >\r\n        </mat-form-field>\r\n\r\n        <mat-form-field *ngIf=\"((field.type == 'S') && field.status !== false)\" class=\"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 #C7C7C7;color: #000000; font-size: 14px; height: 50px; border-radius:3px;\"\r\n                [ngStyle]=\"{\r\n                    'background-color': widgetForm?.widget.element.form_style.input_color\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=\"info-check-desc\" *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]=\"widgetForm?.widget.element.form_style.gdpr_text_color\">\r\n           {{regForm?.registration.gdpr_consent.text}}</span>\r\n        </mat-checkbox>\r\n    </div>\r\n    <div class=\"widget-action-registration\">\r\n        <button mat-flat-button color=\"accent\"       \r\n            [ngStyle]=\"{\r\n                'background-color': widgetForm?.widget.element.form_style.button_color,\r\n                'color': widgetForm?.widget.element.form_style.button_text_color,\r\n                'font-size': widgetForm?.widget.element.form_style.button_font_size +'px'\r\n            }\"           \r\n        >\r\n            {{regForm?.registration.submit_button.text}}            \r\n        </button>\r\n    </div>\r\n</form> -->\r\n\r\n\r\n\r\n\r\n<!-- class=\"ew-widget-form-unique-wrapper\" [attr.ew-unique-class]=\"ew-widget-form-unique-wrapper\" -->\r\n<form \r\n  class=\"ew-register-form--{{timestampID}}\"\r\n  attr.ew-unique-class=\"ew-register-form--{{timestampID}}\"\r\n>\r\n    <div class=\"ew-widget-action-registration custom-preview-form form-title-border\">\r\n      <div class=\"custom-form-area disableClick\">\r\n        \r\n        <span  *ngFor=\"let field of regForm?.registration.form_field\" class=\"custom-field-wrapper\">\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=\"border: 1px solid #C7C7C7;color: #000000; font-size: 14px; height: 50px; border-radius:3px; margin-top: 10px !important;\"\r\n                autocomplete=\"off\"\r\n              \r\n                onkeyup=\"toggleInputLabel(this)\"\r\n                type=\"{{ (field.type == 'N' || field.type == 'P') ? 'number': 'text' }}\" \r\n                [attr.field_type]=\"field.type\"\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                [attr.id]=\"'ewp_custom_field_'+field.ewp_field_id\"\r\n                [ngStyle]=\"{\r\n                    'background-color': widgetForm?.widget.element.form_style.input_color\r\n                }\"\r\n            >\r\n            <label\r\n              style=\"width: auto;cursor: text;font-size: 14px;\"\r\n              class=\"inputs-unique-for-mobile-size\"\r\n              [style.color]=\"widgetForm?.widget.element.form_style.text_color\"\r\n              [attr.for]=\"'ewp_custom_field_'+field.ewp_field_id\"\r\n              \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                [value]=\"field.placeholder_txt\"                \r\n                [attr.is_required]=\"(field.required == false) ? 1 :0\"                \r\n                [attr.name]=\"'ewp_custom_field_'+field.ewp_field_id\"\r\n                style=\"border: 1px solid #C7C7C7;color: #000000; font-size: 14px; height: 50px; border-radius:3px;margin-top: 10px !important;\"\r\n                [ngStyle]=\"{\r\n                    'background-color': widgetForm?.widget.element.form_style.input_color\r\n                }\"\r\n                [style.color]=\"widgetForm?.widget.element.form_style.text_color\"\r\n            >\r\n              \r\n              <mat-option \r\n                [value]=\"field.placeholder_txt\"\r\n                \r\n              >\r\n                {{field.placeholder_txt}} {{ (field.required == false) ? '*' : ''}}\r\n              </mat-option>\r\n\r\n              <mat-option *ngFor=\"let opt of field.options\" [value]=\"opt.option_val\"\r\n               \r\n              >\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-ns-for-widget-wrapper u-customDropdown--old\"\r\n                style=\"display: none;border: 1px solid #C7C7C7;font-size: 14px; height: 50px; border-radius:3px;margin-top: 10px !important;\"\r\n                [attr.is_required]=\"(field.required == false) ? 1 :0\"                \r\n                [attr.name]=\"'ewp_custom_field_'+field.ewp_field_id\"\r\n                [ngStyle]=\"{\r\n                    'background-color': widgetForm?.widget.element.form_style.input_color\r\n                }\"\r\n                [style.color]=\"widgetForm?.widget.element.form_style.text_color\"\r\n            >\r\n            <div class=\"ew-custom-ns-for-widget\" \r\n              style=\"display: none;border: 1px solid #C7C7C7; font-size: 14px; height: 50px; border-radius:3px;margin-top: 10px !important;\"\r\n              [ngStyle]=\"{\r\n                  'background-color': widgetForm?.widget.element.form_style.input_color\r\n              }\"\r\n              [style.color]=\"widgetForm?.widget.element.form_style.text_color\"\r\n            >\r\n              <select  [attr.name]=\"'ewp_custom_field_'+field.ewp_field_id\"\r\n                  [ngStyle]=\"{\r\n                    'background-color': widgetForm?.widget.element.form_style.input_color\r\n                }\"\r\n                [style.color]=\"widgetForm?.widget.element.form_style.text_color\"\r\n              >\r\n                <option value=\"-1\" selected=\"selected\"\r\n                  >{{field.placeholder_txt}} {{ (field.required == false) ? '*' : ''}}\r\n                </option>\r\n                <option *ngFor=\"let opt of field.options\" [value]=\"(opt.option_val) ? opt.option_val : opt.option_txt\"\r\n                  \r\n                >\r\n                  {{opt.option_txt}}\r\n                </option>\r\n\r\n              </select>\r\n            </div>\r\n            \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                [style.color]=\"widgetForm?.widget.element.form_style.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        <button  class=\"widget-action-registration ew-form-sumit-button large-btn-ew\"\r\n            type=\"button\"\r\n            style=\"line-height: normal;border:0;margin-top: 10px !important; width: 100%;outline: none;height: auto;padding:15px 30px 15px 30px;\"\r\n          \r\n            [ngStyle]=\"{\r\n                'background-color': widgetForm?.widget.element.form_style.button_color,\r\n                'color': widgetForm?.widget.element.form_style.button_text_color,\r\n                'font-size': widgetForm?.widget.element.form_style.button_font_size +'px'\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",
        styles: [""]
    })
], RegisterFormWidgetPreviewComponent);
export { RegisterFormWidgetPreviewComponent };
//# sourceMappingURL=data:application/json;base64, 