@skireal/form-builder
Version:
Form builder for Angular apps
1 lines • 109 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"FormBuilderModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":24,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"FormBuilderComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","name":"ɵi"},{"__symbolic":"reference","name":"ɵj"},{"__symbolic":"reference","name":"ɵk"},{"__symbolic":"reference","name":"ɵl"},{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","name":"ɵn"},{"__symbolic":"reference","name":"ɵo"},{"__symbolic":"reference","name":"ɵp"},{"__symbolic":"reference","name":"ɵq"},{"__symbolic":"reference","name":"ɵr"},{"__symbolic":"reference","name":"ɵs"},{"__symbolic":"reference","name":"ɵt"},{"__symbolic":"reference","name":"ɵu"},{"__symbolic":"reference","name":"ɵv"},{"__symbolic":"reference","name":"ɵw"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":46,"character":12},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":46,"character":26},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":46,"character":39},{"__symbolic":"reference","module":"@angular/cdk/drag-drop","name":"DragDropModule","line":46,"character":60}],"exports":[{"__symbolic":"reference","name":"FormBuilderComponent"}],"providers":[],"bootstrap":[{"__symbolic":"reference","name":"FormBuilderComponent"}],"entryComponents":[{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","name":"ɵk"}]}]}],"members":{}},"FormBuilderComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"form-builder","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":7,"character":17},"member":"None"},"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","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%}}"]}]}],"members":{"enableGeneralFields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"enableConditionalLogicBlocks":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"isSurvey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"incomingFormData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"enableSetValidationOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"locale":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"jsonCreated":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":17,"character":3}}]}],"ngOnInit":[{"__symbolic":"method"}],"onSaveClicked":[{"__symbolic":"method"}]}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":20,"character":1},"arguments":[{"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:3rem;margin-bottom:10px;margin-top:10px}.form-builder__test-form__step{text-align:center;text-transform:uppercase;margin-bottom:25px}.form-builder__test-form__body{min-height:200px;padding-left:20px;padding-right:20px}.form-builder__test-form__footer{padding-left:20px;padding-right:20px}.form-builder__test-form__block{background-color:rgba(148,169,160,.15);padding-bottom:40px;padding-top:33px;position:relative;margin-bottom:20px;border:1px solid #e5e7ebba;border-radius:5px}.form-builder__test-form__block:hover{background-color:rgba(148,169,160,.08)}.form-builder__test-form__block:hover .form-builder__test-form__field-toolbar{opacity:1}.form-builder__test-form__block--editing,.form-builder__test-form__block--editing:hover{background-color:rgba(169,157,184,.5)}.form-builder__test-form__field{padding-left:60px;padding-right:60px}@media screen and (max-width:768px){.form-builder__test-form__field{padding-left:20px;padding-right:20px}}.form-builder__test-form__field-label{position:absolute;right:10px;top:5px;display:flex;align-items:flex-start}.form-builder__test-form__field-toolbar{opacity:0;transition:.2s;position:absolute;left:10px;top:7px;display:flex}.form-builder__test-form__field-toolbar-icon{display:block;margin-right:5px;cursor:pointer;position:relative;padding:2px}.form-builder__test-form__field-toolbar-icon:before{content:attr(data-tooltip);position:absolute;left:50%;transform:translate(-50%,-100%);top:0;background:rgba(0,0,0,.8);color:#fff;padding:4px 8px;border-radius:4px;font-size:14px;white-space:nowrap;visibility:hidden;opacity:0;transition:opacity .3s,visibility .3s;z-index:1}.form-builder__test-form__field-toolbar-icon:hover:before{visibility:visible;opacity:1}.form-builder__test-form__field-toolbar-icon:last-child{margin-right:0}.form-builder__test-form__field-toolbar-icon .form-builder__bi:before{font-size:16px}.form-builder__test-form__field-toolbar-icon--move{cursor:move}.form-builder__test-form__label{padding-left:60px;padding-right:60px}@media screen and (max-width:768px){.form-builder__test-form__label{padding-left:20px;padding-right:20px}}.form-builder__test-form__buttons{display:flex;margin-bottom:30px;justify-content:flex-start;flex-wrap:wrap;gap:10px}.form-builder__test-form__buttons .form-builder__btn:last-child{margin-right:0}.form-builder__test-form__stepButtons{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}.form-builder__test-form__stepButton:last-child{margin-right:0}.form-builder__test-form .form-builder__form-check-label{pointer-events:none}.form-builder__test-form .form-builder__form-check{background-color:#fff}.form-builder__test-form .form-builder__form-check input{pointer-events:none}.cdk-drop-list-dragging .cdk-drag{transition:transform 250ms cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .1s cubic-bezier(0,0,.2,1)}.cdk-drag-placeholder{opacity:0}.cdk-drag-preview{background-color:#fff;transition:transform 250ms cubic-bezier(0,0,.2,1)}.form-builder__test-form__block.cdk-drag-preview{box-sizing:border-box;background-color:rgba(148,169,160,.7)}.form-builder__stepButton{position:relative}.form-builder__stepButton:hover .form-builder__stepButton__toolbar{opacity:.8;pointer-events:auto}.form-builder__stepButton__toolbar{display:grid;grid-template-columns:repeat(2,.4fr);grid-gap:5px;justify-content:center;position:absolute;left:0;top:100%;opacity:0;transition:.2s;z-index:1;width:100%;margin-right:-5px;pointer-events:none;background-color:#fff}.form-builder__stepButton__toolbar-icon{display:flex;justify-content:center;align-items:center;cursor:pointer;position:relative;padding:2px}.form-builder__stepButton__toolbar-icon:before{content:attr(data-tooltip);position:absolute;left:50%;transform:translate(-50%,0);top:100%;background:rgba(0,0,0,.8);color:#fff;padding:4px 8px;border-radius:4px;font-size:14px;white-space:nowrap;visibility:hidden;opacity:0;transition:opacity .3s,visibility .3s;z-index:1;pointer-events:none}.form-builder__stepButton__toolbar-icon:hover:before{visibility:visible;opacity:1}.form-builder__stepButton__toolbar-icon .form-builder__bi:before{font-size:16px}.form-builder__stepButton__toolbar-icon--disabled{opacity:.5;pointer-events:none}.form-builder__stepButton--active .form-builder__btn-secondary{background-color:#94a9a0;border-color:#94a9a0}.form-builder__qe-scale__container h3{font-size:1.1em}.form-builder__qe-scale__child h3{font-size:1em}.form-builder__field-label{padding:2px 6px;font-size:12px;border-radius:4px;margin-right:6px;color:#fff;white-space:nowrap;display:flex;align-items:center;justify-content:center}@media screen and (max-width:450px){.form-builder__field-label:not(.form-builder__field-label--title){font-size:0;width:16px;padding:0;height:16px;margin-right:2px}}.form-builder__field-label:last-child{margin-right:0}.form-builder__field-label--required{background-color:#d9534f}.form-builder__field-label--active{background-color:#5cb85c}.form-builder__field-label--other{background-color:#0275d8}.form-builder__field-label--na{background-color:#ce9229}.form-builder__field-label--feedback{background-color:#19a99d}.form-builder__field-label--title{background:rgba(0,0,0,.8);padding:4px 8px;font-size:14px}"]}]}],"members":{"enableGeneralFields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"enableConditionalLogicBlocks":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"isSurvey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"incomingFormData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"enableSetValidationOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"locale":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":3}}]}],"saveClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":44,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵe"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"createForm":[{"__symbolic":"method"}],"removeField":[{"__symbolic":"method"}],"copyField":[{"__symbolic":"method"}],"insertConditionalLogicBlock":[{"__symbolic":"method"}],"removeConditionalLogicBlock":[{"__symbolic":"method"}],"goToStep":[{"__symbolic":"method"}],"goToNextStep":[{"__symbolic":"method"}],"goToPreviousStep":[{"__symbolic":"method"}],"saveCurrentStepData":[{"__symbolic":"method"}],"updateSpecialFieldStates":[{"__symbolic":"method"}],"updateFeedBackTextFields":[{"__symbolic":"method"}],"findFieldInSteps":[{"__symbolic":"method"}],"updateRequiredFields":[{"__symbolic":"method"}],"insertFormData":[{"__symbolic":"method"}],"saveForm":[{"__symbolic":"method"}],"preventDefault":[{"__symbolic":"method"}],"onDrop":[{"__symbolic":"method"}],"copyStep":[{"__symbolic":"method"}],"moveStep":[{"__symbolic":"method"}],"deleteStepConfirmation":[{"__symbolic":"method"}],"deleteStep":[{"__symbolic":"method"}],"updateStep":[{"__symbolic":"method"}],"isFieldUnique":[{"__symbolic":"method"}],"toggleSidebar":[{"__symbolic":"method"}],"toggleFieldsInsertingSidebar":[{"__symbolic":"method"}],"toggleFieldPropertiesSidebar":[{"__symbolic":"method"}],"onPropertiesSave":[{"__symbolic":"method"}],"onPropertiesSaveAfterEdit":[{"__symbolic":"method"}],"addUsedFieldType":[{"__symbolic":"method"}],"initializeUsedFieldTypes":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":19,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":26,"character":26}]}],"createFormGroup":[{"__symbolic":"method"}],"generateFormGroupConfig":[{"__symbolic":"method"}],"createControlForField":[{"__symbolic":"method"}],"createFormGroupForObject":[{"__symbolic":"method"}],"createControl":[{"__symbolic":"method"}],"createFormArray":[{"__symbolic":"method"}],"addControlToFormArray":[{"__symbolic":"method"}],"removeControlFromFormArray":[{"__symbolic":"method"}],"createGroupForArray":[{"__symbolic":"method"}],"saveFieldProperties":[{"__symbolic":"method"}],"generateUniqueId":[{"__symbolic":"method"}],"setFieldsToCreate":[{"__symbolic":"method"}],"getFieldsToCreate":[{"__symbolic":"method"}],"getRequiredFields":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":5,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"setFormData":[{"__symbolic":"method"}],"getFormData":[{"__symbolic":"method"}],"prepareFormData":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"ɵd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":9,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ApplicationRef","line":16,"character":20},{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":17,"character":38},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":18,"character":22}]}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"ɵe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":3,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"setLocale":[{"__symbolic":"method"}],"getCurrentLocale":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"ɵf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":18,"character":1},"arguments":[{"selector":"app-ui-fields-inserting","template":"<div>\n <button type=\"button\" class=\"form-builder__close-btn\" aria-label=\"Close\" (click)=\"closeSidebar()\">\n <span aria-hidden=\"true\">×</span>\n </button>\n <div class=\"form-builder__field-selector\">\n <div class=\"form-builder__field-selector__column\">\n <h2>{{ \"Select a type of Field\" | localized }}</h2>\n <ul>\n <li\n class=\"form-builder__field-selector__item\"\n *ngFor=\"let fieldType of availableFieldTypes\"\n [ngClass]=\"{\n 'form-builder__field-selector__item--selected': selectedFieldType === fieldType\n }\"\n (click)=\"selectField(fieldType)\">\n {{ fieldLabels[fieldType] | localized }}\n </li>\n </ul>\n </div>\n <div class=\"form-builder__field-selector__column\">\n <h2>{{ \"Add Options\" | localized }}</h2>\n\n <ng-container *ngIf=\"selectedFieldType\">\n <h3>{{ fieldLabels[selectedFieldType] | localized }}</h3>\n <div>\n <div>\n <app-form-field-properties\n [propertyForm]=\"propertyForm\"\n [selectedFieldType]=\"selectedFieldType\"\n [enableSetValidationOptions]=\"enableSetValidationOptions\"\n [isSurvey]=\"isSurvey\"\n [needContactDefaultValue]=\"needContactDefaultValue\"\n [hasFeedBackText]=\"hasFeedBackText\"></app-form-field-properties>\n </div>\n <div class=\"form-builder__field-selector__buttons\">\n <button\n type=\"button\"\n class=\"form-builder__btn form-builder__btn-secondary\"\n (click)=\"closeSidebar()\">\n {{ \"Cancel\" | localized }}\n </button>\n <button\n type=\"button\"\n class=\"form-builder__btn form-builder__btn-primary\"\n (click)=\"saveFieldProperties()\">\n {{ \"Save\" | localized }}\n </button>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n</div>\n","styles":[".form-builder__field-selector{display:flex}.form-builder__field-selector .form-builder__form-group{margin-bottom:10px}.form-builder__field-selector__column:first-child{width:45%;padding-right:20px}.form-builder__field-selector__column:last-child{width:55%;padding-left:20px}.form-builder__field-selector__column h2{text-align:center}.form-builder__field-selector__column h3::first-letter{text-transform:uppercase}.form-builder__field-selector__item{cursor:pointer;font-size:18px;transition:.2s;background-color:transparent;padding:5px 20px 5px 30px}.form-builder__field-selector__item::first-letter{text-transform:uppercase}.form-builder__field-selector__item:hover{background-color:rgba(148,169,160,.3)}.form-builder__field-selector__item--selected{font-weight:700}.form-builder__field-selector__buttons{margin-top:20px;display:flex;align-items:center;justify-content:flex-end;position:sticky;bottom:0}.form-builder__field-selector__buttons .form-builder__btn{margin-right:10px}.form-builder__field-selector__buttons .form-builder__btn:last-child{margin-right:0}li{list-style:none}ul{padding-left:0}.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__close-btn{background:0 0;border:none;font-size:24px;line-height:1;color:#000;cursor:pointer;position:absolute;top:10px;right:10px}"]}]}],"members":{"propertiesSaved":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":24,"character":3}}]}],"sidebarClosed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":25,"character":3}}]}],"isGeneral":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"enableSetValidationOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"isSurvey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"usedFieldTypes":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"needContactDefaultValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"hasFeedBackText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":42,"character":16},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"ɵg"}]}],"ngOnInit":[{"__symbolic":"method"}],"setAvailableFieldTypes":[{"__symbolic":"method"}],"selectField":[{"__symbolic":"method"}],"resetFormAndSelectField":[{"__symbolic":"method"}],"hasFilledRequiredFields":[{"__symbolic":"method"}],"setDefaultOptionValues":[{"__symbolic":"method"}],"createPropertyForm":[{"__symbolic":"method"}],"setDefaultValues":[{"__symbolic":"method"}],"saveFieldProperties":[{"__symbolic":"method"}],"getRequiredFields":[{"__symbolic":"method"}],"getMissingFields":[{"__symbolic":"method"}],"isFieldArrayInvalid":[{"__symbolic":"method"}],"closeSidebar":[{"__symbolic":"method"}]}},"ɵg":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":5,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵe"}]}],"getMissingFieldsMessage":[{"__symbolic":"method"}],"getFieldNameById":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"ɵh":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":20,"character":1},"arguments":[{"selector":"app-ui-field-properties","template":"<div class=\"form-builder__properties-form\">\n <button type=\"button\" class=\"form-builder__close-btn\" aria-label=\"Close\" (click)=\"closeSidebar()\">\n <span aria-hidden=\"true\">×</span>\n </button>\n <h2>{{ \"Edit Field Properties\" | localized }}</h2>\n <h3>{{ fieldLabels[selectedFieldType] | localized }}</h3>\n\n <app-form-field-properties\n [propertyForm]=\"propertyForm\"\n [selectedFieldType]=\"selectedFieldType\"\n [enableSetValidationOptions]=\"enableSetValidationOptions\"\n [isEditFieldProperties]=\"true\"\n [currentStep]=\"currentStep\"\n [stepsLength]=\"stepsLength\"\n [isSurvey]=\"isSurvey\"\n [needContactDefaultValue]=\"needContactDefaultValue\"\n [hasFeedBackText]=\"hasFeedBackText\"></app-form-field-properties>\n\n <div class=\"form-builder__form-buttons\">\n <button\n type=\"button\"\n class=\"form-builder__btn form-builder__btn-secondary\"\n (click)=\"closeSidebar()\">\n {{ \"Cancel\" | localized }}\n </button>\n <button\n type=\"button\"\n class=\"form-builder__btn form-builder__btn-primary\"\n (click)=\"saveFieldProperties()\">\n {{ \"Save\" | localized }}\n </button>\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__form-buttons{display:flex;align-items:center;justify-content:flex-end;margin-bottom:5px;margin-top:20px;position:sticky;bottom:0}.form-builder__form-buttons .form-builder__btn{margin-right:10px}.form-builder__form-buttons .form-builder__btn:last-child{margin-right:0}.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__close-btn{background:0 0;border:none;font-size:24px;line-height:1;color:#000;cursor:pointer;position:absolute;top:10px;right:10px}"]}]}],"members":{"propertiesSaved":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":26,"character":3}}]}],"sidebarClosed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":27,"character":3}}]}],"enableSetValidationOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"isSurvey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","e