@skireal/form-builder/bundles/skireal-form-builder.umd.min.js

Form builder for Angular apps

!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("@angular/core"),require("@angular/forms"),require("@angular/cdk/drag-drop"),require("rxjs"),require("@angular/common")):"function"==typeof define&&define.amd?define("@skireal/form-builder",["exports","@angular/core","@angular/forms","@angular/cdk/drag-drop","rxjs","@angular/common"],o):o(((e=e||self).skireal=e.skireal||{},e.skireal["form-builder"]={}),e.ng.core,e.ng.forms,e.ng.cdk.dragDrop,e.rxjs,e.ng.common)}(this,(function(e,o,t,r,i,n){"use strict";
/*! *****************************************************************************
    Copyright (c) Microsoft Corporation.

    Permission to use, copy, modify, and/or distribute this software for any
    purpose with or without fee is hereby granted.

    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
    PERFORMANCE OF THIS SOFTWARE.
    ***************************************************************************** */var l=function(){return(l=Object.assign||function(e){for(var o,t=1,r=arguments.length;t<r;t++)for(var i in o=arguments[t])Object.prototype.hasOwnProperty.call(o,i)&&(e[i]=o[i]);return e}).apply(this,arguments)};function a(e,o,t,r){var i,n=arguments.length,l=n<3?o:null===r?r=Object.getOwnPropertyDescriptor(o,t):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,o,t,r);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(l=(n<3?i(l):n>3?i(o,t,l):i(o,t))||l);return n>3&&l&&Object.defineProperty(o,t,l),l}function d(e){var o="function"==typeof Symbol&&Symbol.iterator,t=o&&e[o],r=0;if(t)return t.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&r>=e.length&&(e=void 0),{value:e&&e[r++],done:!e}}};throw new TypeError(o?"Object is not iterable.":"Symbol.iterator is not defined.")}function s(e,o){var t="function"==typeof Symbol&&e[Symbol.iterator];if(!t)return e;var r,i,n=t.call(e),l=[];try{for(;(void 0===o||o-- >0)&&!(r=n.next()).done;)l.push(r.value)}catch(e){i={error:e}}finally{try{r&&!r.done&&(t=n.return)&&t.call(n)}finally{if(i)throw i.error}}return l}function c(){for(var e=[],o=0;o<arguments.length;o++)e=e.concat(s(arguments[o]));return e}var p,u,f,m,b=function(){function e(){this.enableGeneralFields=!0,this.enableConditionalLogicBlocks=!1,this.isSurvey=!0,this.incomingFormData="",this.enableSetValidationOptions=!1,this.locale={},this.jsonCreated=new o.EventEmitter,this.formData={formData:{steps:[],generalFields:[]},options:{name:"",type:"",country:""},uniqueFormData:[]}}return e.prototype.ngOnInit=function(){this.formData=JSON.parse(this.incomingFormData)},e.prototype.onSaveClicked=function(e){var o=JSON.stringify(e);this.jsonCreated.emit(o)},a([o.Input()],e.prototype,"enableGeneralFields",void 0),a([o.Input()],e.prototype,"enableConditionalLogicBlocks",void 0),a([o.Input()],e.prototype,"isSurvey",void 0),a([o.Input()],e.prototype,"incomingFormData",void 0),a([o.Input()],e.prototype,"enableSetValidationOptions",void 0),a([o.Input()],e.prototype,"locale",void 0),a([o.Output()],e.prototype,"jsonCreated",void 0),e=a([o.Component({selector:"form-builder",template:'<div>\n  <app-ui\n    (saveClicked)="onSaveClicked($event)"\n    [enableGeneralFields]="enableGeneralFields"\n    [enableConditionalLogicBlocks]="enableConditionalLogicBlocks"\n    [isSurvey]="isSurvey"\n    [incomingFormData]="formData"\n    [enableSetValidationOptions]="enableSetValidationOptions"\n    [locale]="locale">\n  </app-ui>\n</div>\n',encapsulation:o.ViewEncapsulation.None,styles:['@font-face{font-display:block;font-family:bootstrap-icons;src:url(https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/fonts/bootstrap-icons.woff2?dd67030699838ea613ee6dbda90effa6) format("woff2"),url(https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/fonts/bootstrap-icons.woff?dd67030699838ea613ee6dbda90effa6) format("woff")}:root{--fb-body-bg:#fff;--fb-body-color:#212529;--fb-border-radius:0.375rem;--fb-border-radius-lg:0.5rem;--fb-border-width:1px;--fb-border-color:#dee2e6;--fb-body-font-family:var(--fb-font-sans-serif);--fb-body-font-weight:400;--fb-body-line-height:1.5;--fb-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--fb-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}input.ng-invalid.ng-touched{border:1px solid red;box-shadow:0 0 0 .1rem rgba(255,76,76,.966)}.cdk-drag-preview{z-index:10000005!important}.form-builder__form-control{display:block;width:100%;height:auto;box-sizing:border-box;padding:6px 12px;font-size:16px;font-weight:400;line-height:1.5;text-align:start;color:#212529;background-color:#fff;border:.8px solid #dee2e6;border-radius:6px;box-shadow:none;cursor:text;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-builder__form-control-sm{padding:4px 8px;font-size:13px;border-radius:3px}.form-builder__form-select{display:block;align-items:center;box-sizing:border-box;width:100%;padding:6px 12px;overflow:visible;font-size:16px;font-weight:400;line-height:1.5;text-align:start;color:#212529;background-color:#fff;background-image:url("data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 16 16\'%3e%3cpath fill=\'none\' stroke=\'%23343a40\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'m2 5 6 6 6-6\'/%3e%3c/svg%3e");background-position:calc(100% - 12px) 50%;background-repeat:no-repeat;background-size:16px 12px;border:.8px solid #dee2e6;border-radius:6px;box-shadow:none;cursor:default;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;-webkit-appearance:none;-moz-appearance:none;appearance:none;pointer-events:auto}.form-builder__form-select:focus{border-color:#86b7fe;outline:0;box-shadow:0 0 0 .05rem rgba(13,110,253,.25)}.text-right{text-align:right!important}.text-left{text-align:left!important}.text-center{text-align:center!important}.form-builder__row .form-builder__col{flex-shrink:0;width:100%;max-width:100%;padding-right:12px;padding-left:12px}.form-builder__row{display:flex;flex-wrap:wrap;margin-left:-12px;margin-right:-12px}.form-builder__col{flex:1 0 0%}.p-0{padding:0!important}@media (min-width:1200px){.form-builder__col-xl-2{flex:0 0 auto;width:16.66666667%}}']})],e)}();!function(e){e.Text="text",e.Textarea="textarea",e.Date="date",e.Select="select",e.Number="number",e.Checkbox="checkbox",e.CheckboxGroup="checkbox-group",e.Radio="radio",e.NeedContact="need-contact",e.File="file",e.Password="password",e.Email="email",e.Phone="phone",e.Likert="likert",e.Csat="csat",e.CES="ces",e.NPS="nps",e.QE="qe",e.ContactName="contact-name",e.ContactSurname="contact-surname",e.ContactEmail="contact-email",e.ContactPhone="contact-phone",e.CountryDropdown="country-dropdown"}(f||(f={})),function(e){e.Required="required",e.MinLength="minlength",e.MaxLength="maxlength",e.Pattern="pattern",e.Email="email",e.Min="min",e.Max="max",e.RequiredTrue="requiredTrue"}(m||(m={}));var _=[f.Text,f.Textarea,f.Date,f.Select,f.Number,f.Checkbox,f.CheckboxGroup,f.Radio,f.NeedContact,f.File,f.Password,f.Email,f.Phone,f.Likert,f.Csat,f.CES,f.NPS,f.QE],g=[f.CountryDropdown,f.Text,f.Textarea,f.Date,f.Select,f.Checkbox,f.CheckboxGroup,f.Radio,f.Likert,f.Csat,f.CES,f.NPS,f.QE,f.NeedContact,f.ContactName,f.ContactSurname,f.ContactEmail,f.ContactPhone],h=((p={})[f.CountryDropdown]="Country",p[f.Text]="Text Input",p[f.Textarea]="Text Area",p[f.Date]="Date",p[f.Select]="Select",p[f.Number]="Number",p[f.Checkbox]="Checkbox",p[f.CheckboxGroup]="Checkboxes",p[f.Radio]="Radio",p[f.File]="File Attachment",p[f.Password]="Password",p[f.Email]="Email",p[f.Phone]="Phone Number",p[f.Likert]="Likert Scale",p[f.Csat]="CSAT Scale",p[f.CES]="CES Scale",p[f.NPS]="NPS Scale",p[f.QE]="QE Group",p[f.NeedContact]="Need Contact",p[f.ContactName]="Contact Name",p[f.ContactSurname]="Contact Surname",p[f.ContactEmail]="Contact Email",p[f.ContactPhone]="Contact Phone",p),v=[f.NeedContact,f.ContactName,f.ContactSurname,f.ContactEmail,f.ContactPhone],y=[m.Required,m.MinLength,m.MaxLength,m.Pattern,m.Email,m.Min,m.Max,m.RequiredTrue],x=[{id:"active",name:"Active",isArray:!1},{id:"classes",name:"Classes",isArray:!1,placeholder:"e.g., class1 class2"},{id:"placeholder",name:"Placeholder",isArray:!1},{id:"title",name:"Title",isArray:!1},{id:"description",name:"Description",isArray:!1},{id:"validators",name:"Validators",isArray:!0},{id:"required",name:"Required",isArray:!1},{id:"warningMessage",name:"Warning message",isArray:!1},{id:"analyticsTitle",name:"Analytics title",isArray:!1},{id:"step",name:"Move to step",isArray:!1}],F=((u={})[f.Text]=c(x,[{id:"feedBackText",name:"Use this field when creating feedback text",isArray:!1}]),u[f.Textarea]=c(x,[{id:"feedBackText",name:"Use this field when creating feedback text",isArray:!1}]),u[f.Date]=c(x),u[f.Select]=c(x,[{id:"options",name:"Options",isArray:!0},{id:"hasOther",name:"Has other",isArray:!1}]),u[f.Number]=c(x),u[f.Checkbox]=c(x),u[f.CheckboxGroup]=c(x,[{id:"options",name:"Options",isArray:!0},{id:"hasOther",name:"Has other",isArray:!1}]),u[f.Radio]=c(x,[{id:"options",name:"Options",isArray:!0},{id:"hasOther",name:"Has other",isArray:!1}]),u[f.NeedContact]=c(x,[{id:"options",name:"Options",isArray:!0},{id:"defaultValue",name:"Default value",isArray:!1}]),u[f.File]=c(x),u[f.Password]=c(x),u[f.Email]=c(x),u[f.Phone]=c(x),u[f.Likert]=c(x,[{id:"optionsTitle",name:"Options title",isArray:!1},{id:"options",name:"Options",isArray:!0},{id:"rows",name:"Rows",isArray:!0}]),u[f.Csat]=c(x,[{id:"firstAnswer",name:"First answer",isArray:!1},{id:"lastAnswer",name:"Last answer",isArray:!1},{id:"hasNA",name:"Has N/A",isArray:!1}]),u[f.CES]=c(x,[{id:"hasNA",name:"Has N/A",isArray:!1}]),u[f.NPS]=c(x,[{id:"comment",name:"Comment",isArray:!1,isObject:!0,objectFields:[{id:"commentTitle",name:"Comment Title",isArray:!1},{id:"commentSubtitle",name:"Comment Subtitle",isArray:!1},{id:"commentWarningMessage",name:"Comment Warning Message",isArray:!1}]},{id:"firstAnswer",name:"First answer",isArray:!1},{id:"lastAnswer",name:"Last answer",isArray:!1}]),u[f.QE]=c(x,[{id:"firstAnswer",name:"First answer",isArray:!1},{id:"lastAnswer",name:"Last answer",isArray:!1},{id:"qeScales",name:"QE scales",isArray:!0,children:[{id:"qeScaleChildren",name:"QE Scale Children",isArray:!0,parentArray:"qeScales"}]}]),u[f.ContactName]=c(x),u[f.ContactSurname]=c(x),u[f.ContactEmail]=c(x),u[f.ContactPhone]=c(x),u[f.CountryDropdown]=c(x),u),k=[],S={validators:["type","value","errormsg"],options:["name","value","country"],rows:["title"],qeScales:["title","subtitle","qeScaleChildren"],qeScaleChildren:["title"]},C={selectedField:{type:"",id:"",name:""},selectedCondition:"",conditionValue:"",selectedAction:"",selectedTargetField:"",type:"conditionalLogicBlock"},w={text:["equals","contains","is empty","is not empty"],checkbox:["is empty","is not empty"],number:["equals","not equals","greater","less","greater or equals","less or equals","is empty","is not empty"]},T=["select","checkbox-group","radio","likert","need-contact"],D=["required","requiredTrue","email"],I=["active","required","hasOther","hasNA"],z=["validators","options","rows","qeScales"],q={options:{country:"ZZ"}},O={placeholder:250,title:1e3,warningMessage:1e3,analyticsTitle:250},A={options:["name","value"],rows:["title"],qeScales:["title"]},B=function(){function e(e){this.fb=e,this.fieldsToCreate=[],this.fieldsToCreateSubject=new i.BehaviorSubject(this.fieldsToCreate)}return e.prototype.createFormGroup=function(e){var o=this.generateFormGroupConfig(e);return this.fb.group(o)},e.prototype.generateFormGroupConfig=function(e){var o,t,r={};try{for(var i=d(e),n=i.next();!n.done;n=i.next()){var l=n.value;r[l.id]=this.createControlForField(l)}}catch(e){o={error:e}}finally{try{n&&!n.done&&(t=i.return)&&t.call(i)}finally{if(o)throw o.error}}return r},e.prototype.createControlForField=function(e){return e.isArray?this.createFormArray():e.isObject&&e.objectFields?this.createFormGroupForObject(e.objectFields):this.createControl(e.defaultValue)},e.prototype.createFormGroupForObject=function(e){var o,t,r={};try{for(var i=d(e),n=i.next();!n.done;n=i.next()){var l=n.value;r[l.id]=this.createControlForField(l)}}catch(e){o={error:e}}finally{try{n&&!n.done&&(t=i.return)&&t.call(i)}finally{if(o)throw o.error}}return this.fb.group(r)},e.prototype.createControl=function(e){return void 0===e&&(e=""),this.fb.control(e)},e.prototype.createFormArray=function(){return this.fb.array([])},e.prototype.addControlToFormArray=function(e,o,t){var r=this.createGroupForArray(o,t);e.push(r)},e.prototype.removeControlFromFormArray=function(e,o){e.removeAt(o)},e.prototype.createGroupForArray=function(e,o){var t=this,r=this.fb.group({}),i=S[e]||[];return i?i.forEach((function(i){var n;if(o&&i in o)r.addControl(i,o[i]);else{var l=(null===(n=q[e])||void 0===n?void 0:n[i])||"";r.addControl(i,t.createControl(l))}})):console.log("Invalid controlName: "+e),r},e.prototype.saveFieldProperties=function(e,o){var t,r,i=this,n=l(l({},e.value),{validators:null===(t=e.value.validators)||void 0===t?void 0:t.filter((function(e){return Object.values(e).some((function(e){return""!==e}))})),type:o,id:this.generateUniqueId().toString(),options:null===(r=e.value.options)||void 0===r?void 0:r.map((function(e){return l(l({},e),{id:i.generateUniqueId().toString()})}))});(I.forEach((function(e){"boolean"!=typeof n[e]&&(n[e]=!1)})),"nps"===o&&e.value.comment)&&(Object.values(n.comment||{}).every((function(e){return""===e||null==e}))||(n.comment=l(l({},n.comment),{commentId:this.generateUniqueId().toString()})));return"qe"===o&&e.value.qeScales&&(n.qeScales=e.value.qeScales.map((function(e){var o;return l(l({},e),{id:i.generateUniqueId().toString(),qeScaleChildren:null===(o=e.qeScaleChildren)||void 0===o?void 0:o.map((function(e){return l(l({},e),{id:i.generateUniqueId().toString()})}))})}))),"likert"===o&&e.value.rows&&(n.rows=e.value.rows.map((function(e){return l(l({},e),{id:i.generateUniqueId().toString()})}))),n},e.prototype.generateUniqueId=function(){return Math.floor(1e8*Math.random()).toString()},e.prototype.setFieldsToCreate=function(e){this.fieldsToCreate=F[e],this.fieldsToCreateSubject.next(this.fieldsToCreate)},e.prototype.getFieldsToCreate=function(){return this.fieldsToCreateSubject.asObservable()},e.prototype.getRequiredFields=function(e){return c(["title","analyticsTitle"],{select:["options"],"checkbox-group":["options"],radio:["options"],likert:["options","rows"],qe:["qeScales"]}[e]||[])},e.ctorParameters=function(){return[{type:t.FormBuilder}]},e.ɵprov=o.ɵɵdefineInjectable({factory:function(){return new e(o.ɵɵinject(t.FormBuilder))},token:e,providedIn:"root"}),e=a([o.Injectable({providedIn:"root"})],e)}(),N={formData:{steps:[{addedFields:[{id:"id",name:"name",title:"title"}],conditionalLogicBlocks:[]}],generalFields:[]},options:{name:"formName",type:"formType",country:"NG"},uniqueFormData:[]},V=function(){function e(){this.formOptionsFull=new i.BehaviorSubject(N)}return e.prototype.setFormData=function(e){this.formOptionsFull.next(e)},e.prototype.getFormData=function(){return this.formOptionsFull.asObservable()},e.prototype.prepareFormData=function(e){var o=e;return e.formData.steps.forEach((function(e,t){var r=[];e.addedFields.forEach((function(e){var o,t,i,n=l({},e);"step"in n&&delete n.step,"need-contact"===n.type&&delete n.options;var a=null===(o=e.validators)||void 0===o?void 0:o.some((function(e){return"required"!==e.type})),d=null===(t=e.validators)||void 0===t?void 0:t.some((function(e){return"required"===e.type}));a&&!d&&(null===(i=n.validators)||void 0===i||i.push({type:"required",errormsg:"This field is required"})),r.push(n)})),o.formData.steps[t]={title:"Step "+(t+1),addedFields:r,conditionalLogicBlocks:e.conditionalLogicBlocks}})),o},e.ɵprov=o.ɵɵdefineInjectable({factory:function(){return new e},token:e,providedIn:"root"}),e=a([o.Injectable({providedIn:"root"})],e)}(),L=function(){function e(){this.message="Are you sure?",this.confirm=new o.EventEmitter}return e.prototype.ngOnInit=function(){},e.prototype.confirmAction=function(){this.confirm.emit(!0)},e.prototype.cancelAction=function(){this.confirm.emit(!1)},a([o.Input()],e.prototype,"message",void 0),a([o.Output()],e.prototype,"confirm",void 0),e=a([o.Component({selector:"app-confirmation-dialog",template:'<div class="form-builder__confirmation-dialog">\n  <div class="form-builder__confirmation-dialog__content">\n    <p>{{ message }}</p>\n    <div class="form-builder__confirmation-dialog__actions">\n      <button (click)="confirmAction()" class="form-builder__btn form-builder__btn-primary">\n        Yes\n      </button>\n      <button (click)="cancelAction()" class="form-builder__btn form-builder__btn-secondary">\n        No\n      </button>\n    </div>\n  </div>\n</div>\n',styles:[".form-builder__btn{display:inline-block;box-sizing:border-box;align-items:flex-start;padding:6px 12px;font-weight:400;text-align:center;-webkit-text-decoration:none #fff solid auto;text-decoration:none #fff solid auto;text-indent:0;text-shadow:none;text-transform:none;vertical-align:middle;word-spacing:normal;letter-spacing:normal;line-height:24px;color:#fff;background-color:rgba(169,157,184,.8);border:.8px solid rgba(169,157,184,.8);border-radius:6px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:auto;text-rendering:auto;-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}.form-builder__btn-sm{padding:3px 10px;font-size:.75rem}.form-builder__btn-primary{background-color:rgba(169,157,184,.8);border-color:rgba(169,157,184,.8)}.form-builder__btn-primary:active,.form-builder__btn-primary:hover{background-color:#a99db8;border-color:#a99db8}.form-builder__btn-secondary{background-color:rgba(148,169,160,.8);border-color:rgba(148,169,160,.8)}.form-builder__btn-secondary:active,.form-builder__btn-secondary:hover{background-color:#94a9a0;border-color:#94a9a0}.form-builder__btn-danger{background-color:rgba(230,88,88,.8);border-color:rgba(230,88,88,.8)}.form-builder__btn-danger:active,.form-builder__btn-danger:hover{background-color:#e65858;border-color:#e65858}.form-builder__btn-success{background-color:rgba(81,167,76,.8);border-color:rgba(81,167,76,.8)}.form-builder__btn-success:active,.form-builder__btn-success:hover{background-color:#51a74c;border-color:#51a74c}.form-builder__confirmation-dialog{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center;z-index:505}.form-builder__confirmation-dialog__actions{margin-bottom:5px;margin-top:5px;text-align:center}.form-builder__confirmation-dialog__actions .form-builder__btn{margin-right:10px}.form-builder__confirmation-dialog__actions .form-builder__btn:last-child{margin-right:0}.form-builder__confirmation-dialog__content{background:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.2);text-align:center}"]})],e)}(),E=function(){function e(e,o,t){this.appRef=e,this.componentFactoryResolver=o,this.injector=t,this.dialogComponentRef=null}return e.prototype.open=function(e){var o=this;return new Promise((function(t){var r=o.componentFactoryResolver.resolveComponentFactory(L);o.dialogComponentRef=r.create(o.injector),o.dialogComponentRef.instance.message=e,o.dialogComponentRef.instance.confirm.subscribe((function(e){t(e),o.close()})),o.appRef.attachView(o.dialogComponentRef.hostView);var i=o.dialogComponentRef.hostView.rootNodes[0];document.body.appendChild(i)}))},e.prototype.close=function(){this.dialogComponentRef&&(this.appRef.detachView(this.dialogComponentRef.hostView),this.dialogComponentRef.destroy(),this.dialogComponentRef=null)},e.ctorParameters=function(){return[{type:o.ApplicationRef},{type:o.ComponentFactoryResolver},{type:o.Injector}]},e.ɵprov=o.ɵɵdefineInjectable({factory:function(){return new e(o.ɵɵinject(o.ApplicationRef),o.ɵɵinject(o.ComponentFactoryResolver),o.ɵɵinject(o.INJECTOR))},token:e,providedIn:"root"}),e=a([o.Injectable({providedIn:"root"})],e)}(),P=function(){function e(){this.localeSubject=new i.BehaviorSubject({}),this.locale$=this.localeSubject.asObservable()}return e.prototype.setLocale=function(e){this.localeSubject.next(e)},e.prototype.getCurrentLocale=function(){return this.localeSubject.value},e.ɵprov=o.ɵɵdefineInjectable({factory:function(){return new e},token:e,providedIn:"root"}),e=a([o.Injectable({providedIn:"root"})],e)}(),R=function(){function e(e,t,r,i){this.uiFormService=e,this.formDataService=t,this.confirmationService=r,this.localeService=i,this.enableGeneralFields=!0,this.enableConditionalLogicBlocks=!1,this.isSurvey=!0,this.incomingFormData={formData:{steps:[],generalFields:[]},options:{name:"",type:"",country:""},uniqueFormData:[]},this.enableSetValidationOptions=!1,this.locale={},this.saveClicked=new o.EventEmitter,this.formFieldType=f,this.formData={formData:{steps:[],generalFields:[]},options:{name:"",type:"",country:""},uniqueFormData:[]},this.addedFields=[],this.generalFields=[],this.conditionalLogicBlocks=[],this.fieldLabels=h,this.currentStep=0,this.usedFieldTypes=[],this.isSidebarOpen=!1,this.isFieldsInsertingOpen=!1,this.isFieldPropertiesOpen=!1,this.isGeneral=!1,this.fieldToEdit={id:"",name:""},this.hasFeedBackText=!1,this.editedFieldId=null}return e.prototype.ngOnInit=function(){this.insertFormData(),this.createForm(),this.initializeUsedFieldTypes(this.addedFields),this.updateSpecialFieldStates(),this.locale&&this.localeService.setLocale(this.locale)},e.prototype.ngOnChanges=function(e){e.locale&&this.locale&&this.localeService.setLocale(this.locale)},e.prototype.createForm=function(){this.dynamicForm=this.uiFormService.createFormGroup(this.addedFields),this.enableGeneralFields&&(this.generalForm=this.uiFormService.createFormGroup(this.generalFields))},e.prototype.removeField=function(e,o){var t,r;o?(t=this.generalFields,r=this.generalForm):(t=this.addedFields,r=this.dynamicForm);var i=t.indexOf(e);if(-1!==i&&(t.splice(i,1),r.removeControl(e.id)),this.isFieldUnique(e.type)){var n=this.usedFieldTypes.indexOf(e.type);-1!==n&&this.usedFieldTypes.splice(n,1)}this.saveCurrentStepData()},e.prototype.copyField=function(e,o){var t,r;o?(t=this.generalFields,r=this.generalForm):(t=this.addedFields,r=this.dynamicForm);var i=l({},e);i.id=this.uiFormService.generateUniqueId(),i.feedBackText&&(i.feedBackText=!1);var n=t.indexOf(e);t.splice(n+1,0,i);var a=this.uiFormService.createControl();r.addControl(i.id,a),this.saveCurrentStepData()},e.prototype.insertConditionalLogicBlock=function(){var e=C;this.conditionalLogicBlocks.push(e),this.saveCurrentStepData()},e.prototype.removeConditionalLogicBlock=function(e){this.conditionalLogicBlocks.splice(e,1),this.saveCurrentStepData()},e.prototype.goToStep=function(e){this.currentStep=e,this.formData.formData.steps[this.currentStep]||(this.formData.formData.steps[this.currentStep]={addedFields:[],conditionalLogicBlocks:[]}),this.updateStep()},e.prototype.goToNextStep=function(){0!==this.addedFields.length&&(this.saveCurrentStepData(),this.currentStep++,this.goToStep(this.currentStep))},e.prototype.goToPreviousStep=function(){this.currentStep>0&&(this.saveCurrentStepData(),this.currentStep--,this.goToStep(this.currentStep))},e.prototype.saveCurrentStepData=function(){this.formData.formData.generalFields=c(this.generalFields),this.formData.formData.steps[this.currentStep]={addedFields:c(this.addedFields),conditionalLogicBlocks:c(this.conditionalLogicBlocks)},this.updateSpecialFieldStates()},e.prototype.updateSpecialFieldStates=function(){var e,o=this.findFieldInSteps(f.NeedContact);this.needContactDefaultValue=null===(e=o)||void 0===e?void 0:e.defaultValue,o&&void 0!==o.defaultValue&&!this.enableSetValidationOptions&&this.updateRequiredFields(o.defaultValue),this.updateFeedBackTextFields()},e.prototype.updateFeedBackTextFields=function(){var e,o,t,r;this.hasFeedBackText=!1;try{for(var i=d(this.formData.formData.steps),n=i.next();!n.done;n=i.next()){var l=n.value;try{for(var a=(t=void 0,d(l.addedFields)),s=a.next();!s.done;s=a.next()){var c=s.value;if(c.type&&[f.Text,f.Textarea].includes(c.type)&&c.feedBackText){this.hasFeedBackText=!0;break}}}catch(e){t={error:e}}finally{try{s&&!s.done&&(r=a.return)&&r.call(a)}finally{if(t)throw t.error}}if(this.hasFeedBackText)break}}catch(o){e={error:o}}finally{try{n&&!n.done&&(o=i.return)&&o.call(i)}finally{if(e)throw e.error}}},e.prototype.findFieldInSteps=function(e){var o,t;try{for(var r=d(this.formData.formData.steps),i=r.next();!i.done;i=r.next()){var n=i.value.addedFields.find((function(o){return o.type===e}));if(n)return n}}catch(e){o={error:e}}finally{try{i&&!i.done&&(t=r.return)&&t.call(r)}finally{if(o)throw o.error}}},e.prototype.updateRequiredFields=function(e){var o,t,r="1"===e;try{for(var i=d(this.formData.formData.steps),n=i.next();!n.done;n=i.next()){n.value.addedFields.forEach((function(e){e.type&&[f.ContactName,f.ContactSurname,f.ContactEmail].includes(e.type)&&(e.required=r)}))}}catch(e){o={error:e}}finally{try{n&&!n.done&&(t=i.return)&&t.call(i)}finally{if(o)throw o.error}}},e.prototype.insertFormData=function(){var e,o,t,r,i,n=this.incomingFormData;this.formData=n||{formData:{steps:[],generalFields:[]},options:{name:"",type:"",country:""},uniqueFormData:[]},this.addedFields=null!=(o=null===(e=this.formData.formData.steps[this.currentStep])||void 0===e?void 0:e.addedFields)?o:[],this.generalFields=null!=(t=this.formData.formData.generalFields)?t:[],this.conditionalLogicBlocks=null!=(i=null===(r=this.formData.formData.steps[this.currentStep])||void 0===r?void 0:r.conditionalLogicBlocks)?i:[]},e.prototype.saveForm=function(){this.saveCurrentStepData();var e=this.formDataService.prepareFormData(this.formData);this.formDataService.setFormData(e),this.saveClicked.emit(e)},e.prototype.preventDefault=function(e){e.preventDefault()},e.prototype.onDrop=function(e){var o=e.container.data;r.moveItemInArray(o,e.previousIndex,e.currentIndex),this.saveCurrentStepData()},e.prototype.copyStep=function(e){var o=this;if(0!==this.addedFields.length){var t=l({},this.formData.formData.steps[e]);t.addedFields=t.addedFields.map((function(e){return l(l({},e),{id:o.uiFormService.generateUniqueId()})})),this.formData.formData.steps.splice(e+1,0,t),this.goToStep(e+1),this.saveCurrentStepData()}},e.prototype.moveStep=function(e,o){var t,r;"next"===o?(t=s([this.formData.formData.steps[e+1],this.formData.formData.steps[e]],2),this.formData.formData.steps[e]=t[0],this.formData.formData.steps[e+1]=t[1]):"prev"===o&&(r=s([this.formData.formData.steps[e-1],this.formData.formData.steps[e]],2),this.formData.formData.steps[e]=r[0],this.formData.formData.steps[e-1]=r[1]),this.goToStep(e),this.saveCurrentStepData()},e.prototype.deleteStepConfirmation=function(e){var o=this,t=this.localeService.getCurrentLocale()["Are you sure you want to delete this step?"]||"Are you sure you want to delete this step?";this.confirmationService.open(t).then((function(t){t&&o.deleteStep(e)}))},e.prototype.deleteStep=function(e){this.formData.formData.steps.splice(e,1),this.currentStep>=e&&(this.currentStep=this.currentStep>0?this.currentStep-1:0),this.formData.formData.steps.length>0?this.updateStep():(this.addedFields=[],this.conditionalLogicBlocks=[],this.createForm()),this.saveCurrentStepData()},e.prototype.updateStep=function(){this.addedFields=this.formData.formData.steps[this.currentStep].addedFields,this.conditionalLogicBlocks=this.formData.formData.steps[this.currentStep].conditionalLogicBlocks,this.createForm()},e.prototype.isFieldUnique=function(e){return v.includes(e)},e.prototype.toggleSidebar=function(){this.isSidebarOpen=this.isFieldsInsertingOpen||this.isFieldPropertiesOpen},e.prototype.toggleFieldsInsertingSidebar=function(e){void 0===e&&(e=!1),this.isFieldsInsertingOpen=!this.isFieldsInsertingOpen,this.isFieldPropertiesOpen=!1,this.isGeneral=e,this.toggleSidebar()},e.prototype.toggleFieldPropertiesSidebar=function(e,o){this.isFieldPropertiesOpen=!this.isFieldPropertiesOpen,this.isFieldsInsertingOpen=!1,this.toggleSidebar(),this.fieldToEdit=e,this.isGeneral=o,this.editedFieldId=this.isFieldPropertiesOpen?e.id:null,this.isSidebarOpen||(this.editedFieldId=null)},e.prototype.onPropertiesSave=function(e){if(e){var o=this.uiFormService.createControl(e.defaultValue);this.isGeneral?(this.generalFields.push(e),this.generalForm.addControl(e.id,o)):(this.addedFields.push(e),this.dynamicForm.addControl(e.id,o)),this.addUsedFieldType(e.type),this.saveCurrentStepData()}},e.prototype.onPropertiesSaveAfterEdit=function(e){if(e){var o=void 0,t=(o=this.isGeneral?this.generalFields:this.addedFields).indexOf(this.fieldToEdit);if(-1!==t)if(e.step!==this.currentStep){o.splice(t,1);var r=e.step;this.formData.formData.steps[r].addedFields.push(e)}else o[t]=e;if(void 0!==e.defaultValue){var i=this.dynamicForm.get(e.id);i&&i.setValue(e.defaultValue)}this.saveCurrentStepData()}},e.prototype.addUsedFieldType=function(e){this.isFieldUnique(e)&&!this.usedFieldTypes.includes(e)&&this.usedFieldTypes.push(e)},e.prototype.initializeUsedFieldTypes=function(e){var o=this;e.forEach((function(e){o.addUsedFieldType(e.type)}))},e.ctorParameters=function(){return[{type:B},{type:V},{type:E},{type:P}]},a([o.Input()],e.prototype,"enableGeneralFields",void 0),a([o.Input()],e.prototype,"enableConditionalLogicBlocks",void 0),a([o.Input()],e.prototype,"isSurvey",void 0),a([o.Input()],e.prototype,"incomingFormData",void 0),a([o.Input()],e.prototype,"enableSetValidationOptions",void 0),a([o.Input()],e.prototype,"locale",void 0),a([o.Output()],e.prototype,"saveClicked",void 0),e=a([o.Component({selector:"app-ui",template:'<div class="form-builder__test-form">\r\n  <div class="form-builder__test-form__main" [ngClass]="{ collapsed: isSidebarOpen }">\r\n    <div class="form-builder__test-form__body">\r\n      <form\r\n        *ngIf="enableGeneralFields === true"\r\n        [formGroup]="generalForm"\r\n        cdkDropList\r\n        [cdkDropListData]="generalFields"\r\n        (cdkDropListDropped)="onDrop($event)">\r\n        <h3 *ngIf="generalFields.length" class="form-builder__test-form__step">\r\n          {{ "General Fields" | localized }}\r\n        </h3>\r\n        <ng-container *ngFor="let field of generalFields">\r\n          <div\r\n            class="form-builder__test-form__block"\r\n            [class.form-builder__test-form__block--editing]="field.id === editedFieldId"\r\n            cdkDrag>\r\n            <div class="form-builder__test-form__label">\r\n              <label class="form-builder__form-label">{{ field.title }}</label>\r\n            </div>\r\n            <div class="form-builder__test-form__field" [ngSwitch]="field.type">\r\n              <div class="form-builder__test-form__field-label">\r\n                <span>{{ fieldLabels[field.type] | localized }}</span>\r\n              </div>\r\n              <div class="form-builder__test-form__field-toolbar">\r\n                <span\r\n                  class="form-builder__test-form__field-toolbar-icon"\r\n                  [attr.data-tooltip]="\'Delete\' | localized"\r\n                  (click)="removeField(field, true)"\r\n                  ><i class="form-builder__bi form-builder__bi-trash"></i\r\n                ></span>\r\n                <span\r\n                  class="form-builder__test-form__field-toolbar-icon"\r\n                  [attr.data-tooltip]="\'Edit\' | localized"\r\n                  (click)="toggleFieldPropertiesSidebar(field, true)"\r\n                  ><i class="form-builder__bi form-builder__bi-pencil"></i\r\n                ></span>\r\n                <span\r\n                  class="form-builder__test-form__field-toolbar-icon"\r\n                  [attr.data-tooltip]="\'Copy\' | localized"\r\n                  (click)="copyField(field, true)"\r\n                  ><i class="form-builder__bi form-builder__bi-files"></i\r\n                ></span>\r\n                <span\r\n                  class="form-builder__test-form__field-toolbar-icon form-builder__test-form__field-toolbar-icon--move"\r\n                  [attr.data-tooltip]="\'Move\' | localized"\r\n                  cdkDragHandle>\r\n                  <i class="form-builder__bi form-builder__bi-arrows-move"></i>\r\n                </span>\r\n              </div>\r\n\r\n              <ng-container *ngSwitchCase="formFieldType.Select">\r\n                <select\r\n                  [id]="field.id"\r\n                  [formControlName]="field.id"\r\n                  (mousedown)="preventDefault($event)"\r\n                  class="form-builder__form-select">\r\n                  <option value="">{{ field.placeholder }}</option>\r\n                  <option *ngFor="let option of field.options" [value]="option.value">\r\n                    {{ option.label }}\r\n                  </option>\r\n                </select>\r\n              </ng-container>\r\n\r\n              <ng-container *ngSwitchCase="formFieldType.Checkbox">\r\n                <input\r\n                  [id]="field.id"\r\n                  type="checkbox"\r\n                  [formControlName]="field.id"\r\n                  class="form-builder__form-check-input" />\r\n              </ng-container>\r\n\r\n              <ng-container *ngSwitchDefault>\r\n                <input\r\n                  [id]="field.id"\r\n                  [type]="field.type"\r\n                  [formControlName]="field.id"\r\n                  class="form-builder__form-control"\r\n                  (mousedown)="preventDefault($event)"\r\n                  (click)="preventDefault($event)" />\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </form>\r\n      <form\r\n        [formGroup]="dynamicForm"\r\n        cdkDropList\r\n        [cdkDropListData]="addedFields"\r\n        (cdkDropListDropped)="onDrop($event)">\r\n        <h3 class="form-builder__test-form__step">\r\n          {{ "Step" | localized }} {{ currentStep + 1 }}\r\n        </h3>\r\n        <ng-container *ngFor="let field of addedFields">\r\n          <div\r\n            class="form-builder__test-form__block"\r\n            [class.form-builder__test-form__block--editing]="field.id === editedFieldId"\r\n            cdkDrag>\r\n            <div\r\n              class="form-builder__test-form__label"\r\n              *ngIf="\r\n                field.type !== formFieldType.Likert &&\r\n                field.type !== formFieldType.Csat &&\r\n                field.type !== formFieldType.CES &&\r\n                field.type !== formFieldType.QE &&\r\n                field.type !== formFieldType.NPS\r\n              ">\r\n              <label class="form-builder__form-label">{{ field.title }}</label>\r\n            </div>\r\n            <div class="form-builder__test-form__field" [ngSwitch]="field.type">\r\n              <div class="form-builder__test-form__field-label">\r\n                <span\r\n                  *ngIf="field.feedBackText"\r\n                  class="form-builder__field-label form-builder__field-label--feedback"\r\n                  >{{ "Feedback" | localized }}</span\r\n                >\r\n                <span\r\n                  *ngIf="field.required"\r\n                  class="form-builder__field-label form-builder__field-label--required"\r\n                  >{{ "Required" | localized }}</span\r\n                >\r\n                <span\r\n                  *ngIf="field.active"\r\n                  class="form-builder__field-label form-builder__field-label--active"\r\n                  >{{ "Active" | localized }}</span\r\n                >\r\n                <span\r\n                  *ngIf="field.hasOther"\r\n                  class="form-builder__field-label form-builder__field-label--other"\r\n                  >{{ "Has Other" | localized }}</span\r\n                >\r\n                <span\r\n                  *ngIf="field.hasNA"\r\n                  class="form-builder__field-label form-builder__field-label--na"\r\n                  >{{ "Has NA" | localized }}</span\r\n                >\r\n                <span class="form-builder__field-label form-builder__field-label--title">{{\r\n                  fieldLabels[field.type] | localized\r\n                }}</span>\r\n              </div>\r\n              <div class="form-builder__test-form__field-toolbar">\r\n                <span\r\n                  class="form-builder__test-form__field-toolbar-icon"\r\n                  [attr.data-tooltip]="\'Delete\' | localized"\r\n                  (click)="removeField(field, false)"\r\n                  ><i class="form-builder__bi form-builder__bi-trash"></i\r\n                ></span>\r\n                <span\r\n                  class="form-builder__test-form__field-toolbar-icon"\r\n                  [attr.data-tooltip]="\'Edit\' | localized"\r\n                  (click)="toggleFieldPropertiesSidebar(field, false)"\r\n                  ><i class="form-builder__bi form-builder__bi-pencil"></i\r\n                ></span>\r\n                <span\r\n                  *ngIf="!(field.type | isFieldUnique)"\r\n                  class="form-builder__test-form__field-toolbar-icon"\r\n                  [attr.data-tooltip]="\'Copy\' | localized"\r\n                  (click)="copyField(field, false)"\r\n                  ><i class="form-builder__bi form-builder__bi-files"></i\r\n                ></span>\r\n                <span\r\n                  class="form-builder__test-form__field-toolbar-icon form-builder__test-form__field-toolbar-icon--move"\r\n                  [attr.data-tooltip]="\'Move\' | localized"\r\n                  cdkDragHandle>\r\n                  <i class="form-builder__bi form-builder__bi-arrows-move"></i>\r\n                </span>\r\n              </div>\r\n              <ng-container *ngSwitchCase="formFieldType.Textarea">\r\n                <app-textarea [field]="field"></app-textarea>\r\n              </ng-container>\r\n              <ng-container *ngSwitchCase="formFieldType.Select">\r\n                <app-select [field]="field" [hasOptions]="true"></app-select>\r\n              </ng-container>\r\n              <ng-container *ngSwitchCase="formFieldType.CountryDropdown">\r\n                <app-select [field]="field" [hasOptions]="false"></app-select>\r\n              </ng-container>\r\n              <ng-container *ngSwitchCase="formFieldType.CheckboxGroup">\r\n                <app-checkbox-group [field]="field"></app-checkbox-group>\r\n              </ng-container>\r\n              <ng-container *ngSwitchCase="formFieldType.Checkbox">\r\n                <app-checkbox [field]="field"></app-checkbox>\r\n              </ng-container>\r\n              <ng-container *ngSwitchCase="formFieldType.Radio">\r\n                <app-radio [field]="field" [formGroup]="dynamicForm"></app-radio>\r\n              </ng-container>\r\n              <ng-container *ngSwitchCase="formFieldType.NeedContact">\r\n                <app-radio [field]="field" [formGroup]="dynamicForm"></app-radio>\r\n              </ng-container>\r\n              <ng-container *ngSwitchCase="formFieldType.Likert">\r\n                <app-likert [field]="field" в></app-likert>\r\n              </ng-container>\r\n              <ng-container *ngSwitchCase="formFieldType.Csat">\r\n                <app-csat [field]="field"></app-csat>\r\n              </ng-container>\r\n              <ng-container *ngSwitchCase="formFieldType.CES">\r\n                <app-csat [field]="field" [isCes]="true"></app-csat>\r\n              </ng-container>\r\n              <ng-container *ngSwitchCase="formFieldType.NPS">\r\n                <app-nps [field]="field"></app-nps>\r\n              </ng-container>\r\n              <ng-container *ngSwitchCase="formFieldType.QE">\r\n                <app-qe [field]="field"></app-qe>\r\n              </ng-container>\r\n              <ng-container *ngSwitchDefault>\r\n                <app-text [field]="field"></app-text>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </form>\r\n      <ng-container *ngIf="enableConditionalLogicBlocks">\r\n        <ng-container *ngFor="let block of conditionalLogicBlocks; let i = index">\r\n          <app-conditional-logic-block\r\n            [block]="block"\r\n            [addedFields]="addedFields"\r\n            (remove)="removeConditionalLogicBlock(i)">\r\n          </app-conditional-logic-block>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div class="form-builder__test-form__footer">\r\n      <div class="form-builder__test-form__buttons">\r\n        <button\r\n          class="form-builder__btn form-builder__btn-primary"\r\n          (click)="toggleFieldsInsertingSidebar(false)">\r\n          {{ "Insert Field" | localized }}\r\n        </button>\r\n        <ng-container *ngIf="enableGeneralFields">\r\n          <button\r\n            class="form-builder__btn form-builder__btn-primary"\r\n            (click)="toggleFieldsInsertingSidebar(true)">\r\n            {{ "Insert General Field" | localized }}\r\n          </button>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf="enableConditionalLogicBlocks">\r\n          <button\r\n            class="form-builder__btn form-builder__btn-primary"\r\n            (click)="insertConditionalLogicBlock()">\r\n            {{ "Insert Conditional Logic Block" | localized }}\r\n          </button>\r\n          <button\r\n            class="form-builder__btn form-builder__btn-primary"\r\n            (click)="saveCurrentStepData()"\r\n            [disabled]="!conditionalLogicBlocks.length">\r\n            {{ "Save Conditional Logic Blocks Data" | localized }}\r\n          </button>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <div class="form-builder__test-form__buttons">\r\n        <button\r\n          *ngIf="currentStep > 0"\r\n          class="form-builder__btn form-builder__btn-primary"\r\n          (click)="goToPreviousStep()">\r\n          {{ "Previous Step" | localized }}\r\n        </button>\r\n        <button class="form-builder__btn form-builder__btn-primary" (click)="goToNextStep()">\r\n          {{ "Next Step" | localized }}\r\n        </button>\r\n        <button class="form-builder__btn form-builder__btn-success" (click)="saveForm()">\r\n          {{ "Save" | localized }}\r\n        </button>\r\n      </div>\r\n\r\n      <ng-container *ngIf="formData.formData.steps as steps">\r\n        <ng-container *ngIf="steps.length > 0">\r\n          <span>{{ "Go to" | localized }}:</span>\r\n        </ng-container>\r\n        <div class="form-builder__test-form__stepButtons">\r\n          <div\r\n            class="form-builder__test-form__stepButton form-builder__stepButton"\r\n            [ngClass]="{ \'form-builder__stepButton--active\': i === currentStep }"\r\n            *ngFor="let step of steps; let i = index">\r\n            <div class="form-builder__stepButton__toolbar">\r\n              <span\r\n                class="form-builder__stepButton__toolbar-icon"\r\n                [attr.data-tooltip]="\'Move step\' | localized"\r\n                (click)="moveStep(i, \'prev\')"\r\n                [ngClass]="{ \'form-builder__stepButton__toolbar-icon--disabled\': i === 0 }"\r\n                ><i class="form-builder__bi form-builder__bi-arrow-left"></i\r\n              ></span>\r\n              <span\r\n                class="form-builder__stepButton__toolbar-icon"\r\n                [attr.data-tooltip]="\'Move step\' | localized"\r\n                (click)="moveStep(i, \'next\')"\r\n                [ngClass]="{\r\n                  \'form-builder__stepButton__toolbar-icon--disabled\': i === steps.length - 1\r\n                }"\r\n                ><i class="form-builder__bi form-builder__bi-arrow-right"></i\r\n              ></span>\r\n              <span\r\n                class="form-builder__stepButton__toolbar-icon"\r\n                [attr.data-tooltip]="\'Copy step\' | localized"\r\n                (click)="copyStep(i)"\r\n                ><i class="form-builder__bi form-builder__bi-files"></i\r\n              ></span>\r\n              <span\r\n                class="form-builder__stepButton__toolbar-icon"\r\n                [attr.data-tooltip]="\'Delete step\' | localized"\r\n                (click)="deleteStepConfirmation(i)"\r\n                [ngClass]="{\r\n                  \'form-builder__stepButton__toolbar-icon--disabled\': steps.length === 1\r\n                }"\r\n                ><i class="form-builder__bi form-builder__bi-trash"></i\r\n              ></span>\r\n            </div>\r\n            <button class="form-builder__btn form-builder__btn-secondary" (click)="goToStep(i)">\r\n              {{ "Step" | localized }} {{ i + 1 }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <div\r\n    class="form-builder__test-form__sidebar"\r\n    [ngClass]="{ \'form-builder__opened\': isSidebarOpen }">\r\n    <app-ui-fields-inserting\r\n      *ngIf="isFieldsInsertingOpen"\r\n      [isGeneral]="isGeneral"\r\n      [enableSetValidationOptions]="enableSetValidationOptions"\r\n      [isSurvey]="isSurvey"\r\n      [usedFieldTypes]="usedFieldTypes"\r\n      [needContactDefaultValue]="needContactDefaultValue"\r\n      [hasFeedBackText]="hasFeedBackText"\r\n      (propertiesSaved)="onPropertiesSave($event)"\r\n      (sidebarClosed)="toggleFieldsInsertingSidebar()">\r\n    </app-ui-fields-inserting>\r\n    <app-ui-field-properties\r\n      *ngIf="isFieldPropertiesOpen"\r\n      [field]="fieldToEdit"\r\n      [enableSetValidationOptions]="enableSetValidationOptions"\r\n      [isSurvey]="isSurvey"\r\n      [currentStep]="currentStep"\r\n      [stepsLength]="formData.formData.steps.length"\r\n      [needContactDefaultValue]="needContactDefaultValue"\r\n      [hasFeedBackText]="hasFeedBackText"\r\n      (propertiesSaved)="onPropertiesSaveAfterEdit($event)"\r\n      (sidebarClosed)="toggleFieldPropertiesSidebar()">\r\n    </app-ui-field-properties>\r\n  </div>\r\n</div>\r\n',styles:['@charset "UTF-8";.form-builder__bi::before,[class*=" form-builder__bi-"]::before,[class^=form-builder__bi-]::before{display:inline-block;font-family:bootstrap-icons!important;font-style:normal;font-weight:400!important;font-variant:normal;text-transform:none;line-height:1;vertical-align:-.125em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.form-builder__bi-arrow-right::before{content:""}.form-builder__bi-pencil::before{content:""}.form-builder__bi-trash::before{content:""}.form-builder__bi-files::before{content:""}.form-builder__bi-arrows-move::before{content:""}.form-builder__bi-arrow-left::before{content:""}.form-builder__btn{display:inline-block;box-sizing:border-box;align-items:flex-start;padding:6px 12px;font-weight:400;text-align:center;-webkit-text-decoration:none #fff solid auto;text-decoration:none #fff solid auto;text-indent:0;text-shadow:none;text-transform:none;vertical-align:middle;word-spacing:normal;letter-spacing:normal;line-height:18px;color:#fff;background-color:rgba(169,157,184,.8);border:.8px solid rgba(169,157,184,.8);border-radius:6px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:auto;text-rendering:auto;-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}.form-builder__btn-sm{padding:3px 10px;font-size:.75rem}.form-builder__btn-primary{background-color:rgba(169,157,184,.8);border-color:rgba(169,157,184,.8)}.form-builder__btn-primary:active,.form-builder__btn-primary:hover{background-color:#a99db8;border-color:#a99db8}.form-builder__btn-secondary{background-color:rgba(148,169,160,.8);border-color:rgba(148,169,160,.8)}.form-builder__btn-secondary:active,.form-builder__btn-secondary:hover{background-color:#94a9a0;border-color:#94a9a0}.form-builder__btn-danger{background-color:rgba(230,88,88,.8);border-color:rgba(230,88,88,.8)}.form-builder__btn-danger:active,.form-builder__btn-danger:hover{background-color:#e65858;border-color:#e65858}.form-builder__btn-success{background-color:rgba(81,167,76,.8);border-color:rgba(81,167,76,.8)}.form-builder__btn-success:active,.form-builder__btn-success:hover{background-color:#51a74c;border-color:#51a74c}.form-builder__test-form{display:flex;align-items:flex-start;justify-content:space-between;overflow:hidden;position:relative;padding-bottom:50px}.form-builder__test-form__header{padding-top:10px;padding-bottom:10px;margin-bottom:40px}.form-builder__test-form__main{flex-shrink:0;width:100%;transition:.3s}.form-builder__test-form__main.collapsed{flex-shrink:1;width:55%}.form-builder__test-form__main.collapsed .form-builder__field-label:not(.form-builder__field-label--title){font-size:0;width:16px;padding:0;height:16px;margin-right:2px}.form-builder__test-form__sidebar{background-color:#f7f7f7;padding:25px;position:fixed;width:45%;top:0;right:0;height:100%;visibility:hidden;transform:translateX(100%);transition:transform .3s;box-shadow:-2px 0 5px rgba(0,0,0,.2);z-index:500;min-height:100%;box-sizing:border-box;overflow-y:auto}@media screen and (max-width:1000px){.form-builder__test-form__main.collapsed,.form-builder__test-form__sidebar{width:100%}}@media screen and (max-width:450px){.form-builder__test-form__sidebar{padding:15px}}.form-builder__test-form__sidebar.form-builder__opened{visibility:visible;transform:translateX(0)}.form-builder__test-form__title{text-align:center;font-size