@kre-form/ant
Version:
661 lines • 120 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Input, Output, EventEmitter, } from "@angular/core";
import { FormGroup } from "@angular/forms";
import { clone, KreFormCommonService, } from "@kre-form/core";
import { NzModalService } from "ng-zorro-antd/modal";
import { NzMessageService } from "ng-zorro-antd/message";
import * as _ from "lodash";
import { KreFormAntService } from "../../tools/service";
import { KreDialogService } from "../../service/dialog.service";
import { DataService } from "../../service/data.service";
import { KreAntCommonService } from "../../tools/commonService";
import { KreTransferService } from "../../tools/transferService";
import { KreDesginToFormService } from "../../tools/tableFieldService";
import { KreFormDSField } from "../field/index.component";
import { KreFormDSFieldLabel } from "../field-label/index.component";
import { KreFormDesignTable } from "../table/table.component";
import { KreFormDesignTables } from "../tables/table.component";
export class KreFormDesignDetail {
/**
* @param {?} message
* @param {?} modalService
* @param {?} kreFormAntService
* @param {?} kreDialogService
* @param {?} dataService
* @param {?} kreAntCommonService
* @param {?} kreTransferService
* @param {?} kreDesginToFormService
* @param {?} kreFormCommonService
*/
constructor(message, modalService, kreFormAntService, kreDialogService, dataService, kreAntCommonService, kreTransferService, kreDesginToFormService, kreFormCommonService) {
this.message = message;
this.modalService = modalService;
this.kreFormAntService = kreFormAntService;
this.kreDialogService = kreDialogService;
this.dataService = dataService;
this.kreAntCommonService = kreAntCommonService;
this.kreTransferService = kreTransferService;
this.kreDesginToFormService = kreDesginToFormService;
this.kreFormCommonService = kreFormCommonService;
this.formCode = "";
this.layout = true;
this.api = {
tables: { url: "assets/mockData/business.json" },
form: { url: "assets/mockData/formInfo.json" },
};
this.saveEvent = new EventEmitter();
this.cancelEvent = new EventEmitter();
this.previewEvent = new EventEmitter();
this.pageStatus = 1;
this.form_model = {};
this.form_group = new FormGroup({});
this.form_fields = [];
this.kreFormInfo = {};
this.business_tables = {
primary: {},
child: { single: [], multiple: [] },
};
this.layout_column = "layout-column-3";
this.layout_row = "layout-row-1";
this.table_Data = [];
}
/**
* @return {?}
*/
ngOnInit() {
this.kreFormAntService.btnEvent.subscribe((/**
* @param {?} res
* @return {?}
*/
(res) => {
switch (res["type"]) {
case "delete":
this.modalService.confirm({
nzTitle: "提示",
nzContent: "您确定要删除选中的字段？",
nzOnOk: (/**
* @return {?}
*/
() => {
this.groupBtnDeleteFields(res["field"]);
}),
});
break;
case "up":
case "down":
this.groupBtnMoveUpOrDown(res["field"], res["type"]);
break;
case "item":
this.groupBtnTableFields(res["field"]);
break;
case "remark":
case "line":
this.groupBtnAddLineRemark(res["field"], res["type"]);
break;
default:
break;
}
}));
this.kreFormAntService.fieldEvent.subscribe((/**
* @param {?} res
* @return {?}
*/
(res) => {
/** @type {?} */
let sign = res["sign"];
if (sign == "edit") {
this.editFormFieldConfig(res["field"]);
}
else if (sign == "delete") {
this.modalService.confirm({
nzTitle: "提示",
nzContent: "您确定要删除该字段？",
nzOnOk: (/**
* @return {?}
*/
() => {
this.deleteFormFieldConfig(res["field"]);
}),
});
}
}));
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (changes.formCode) {
this.initTablesInfo();
}
}
/**
* @return {?}
*/
ngOnDestroy() { }
/*按钮区域---begin*/
/**
* @return {?}
*/
btnSave() {
this.kreFormInfo.fields = clone(this.form_fields);
if (this.kreFormInfo.fields !== null &&
this.kreFormInfo.fields !== undefined) {
this.kreFormCommonService.initFormFieldProperty(this.kreFormInfo.fields);
}
this.saveEvent.emit(JSON.stringify(this.kreFormInfo));
}
/**
* @return {?}
*/
btnCancel() { }
/**
* @return {?}
*/
btnPreview() {
this.kreFormInfo.fields = clone(this.form_fields);
if (this.kreFormInfo.fields !== null &&
this.kreFormInfo.fields !== undefined) {
this.kreFormCommonService.initFormFieldProperty(this.kreFormInfo.fields);
}
this.previewEvent.emit(JSON.stringify(this.kreFormInfo));
}
/**
* @return {?}
*/
btnDelete() {
this.modalService.confirm({
nzTitle: "提示",
nzContent: "您确定要删除选中的字段？",
nzOnOk: (/**
* @return {?}
*/
() => {
this.getCheckFields().forEach((/**
* @param {?} item
* @return {?}
*/
(item) => {
this.form_fields.forEach((/**
* @param {?} field
* @param {?} index
* @param {?} object
* @return {?}
*/
(field, index, object) => {
if (field.key === item.field.key &&
_.get(field, "templateOptions.isButintin") != true) {
object.splice(index, 1);
}
}));
}));
this.initTableFieldStatus();
}),
});
}
/**
* @return {?}
*/
btnMoveUp() {
this.getCheckFields().forEach((/**
* @param {?} item
* @return {?}
*/
(item) => {
if (item.index > 0) {
this.form_fields.splice(item.index, 1);
this.form_fields.splice(item.index - 1, 0, item.field);
}
}));
}
/**
* @return {?}
*/
btnMoveDown() {
this.getCheckFields()
.reverse()
.forEach((/**
* @param {?} item
* @return {?}
*/
(item) => {
if (item.index < this.form_fields.length - 1) {
this.form_fields.splice(item.index, 1);
this.form_fields.splice(item.index + 1, 0, item.field);
}
}));
}
/**
* @return {?}
*/
btnAddFields() {
this.selectTableFields();
}
/**
* @return {?}
*/
btnAddRemark() {
this.kreTransferService.transferLabelToForm(this.form_fields, this.getCheckFields());
}
/**
* @return {?}
*/
btnAddLine() {
this.kreTransferService.transferLineToForm(this.form_fields, this.getCheckFields());
}
/**
* @return {?}
*/
btnAddGroup() {
/** @type {?} */
let tablecode = this.getTableMultipleCode();
if (tablecode == null || tablecode == "") {
this.message.warning("当前业务表没有相关联的多表单记录，故不能添加多记录区域！");
return;
}
if (this.business_tables &&
this.business_tables.child &&
this.business_tables.child.multiple &&
this.business_tables.child.multiple.length > 0) {
if (this.business_tables.child.multiple.some((/**
* @param {?} item
* @return {?}
*/
(item) => {
return item.tableQuote !== true;
}))) {
this.kreDialogService.CreateModelDialog({
nzTitle: "编辑",
size: "large",
nzContent: KreFormDesignTables,
}, { businessTable: this.business_tables, tableType: "single" }, (/**
* @param {?} instance
* @param {?} modal
* @return {?}
*/
(instance, modal) => {
modal.destroy();
this.kreTransferService.transferGroupToForm(this.form_fields, this.getCheckFields(), instance.radioValue);
this.initTableFieldStatus();
}));
}
}
}
/**
* @param {?} type
* @return {?}
*/
btnColumn(type) {
this.kreFormInfo.column = `layout-column-${type}`;
this.layout_column = this.kreFormInfo.column;
}
/**
* @param {?} type
* @return {?}
*/
btnRow(type) {
this.kreFormInfo.row = `layout-row-${type}`;
this.layout_row = this.kreFormInfo.row;
}
/**
* @return {?}
*/
getCheckFields() {
/** @type {?} */
let checkedField = [];
this.form_fields.forEach((/**
* @param {?} item
* @param {?} index
* @return {?}
*/
(item, index) => {
if (item.checked) {
checkedField.push({ index: index, field: item });
}
}));
return checkedField;
}
/*按钮区域---end*/
/**
* @param {?} groupField
* @param {?} type
* @return {?}
*/
groupBtnMoveUpOrDown(groupField, type) {
if (!_.get(groupField, "fieldArray.fieldGroup") ||
_.get(groupField, "fieldArray.fieldGroup").length < 1) {
groupField.fieldArray = {
fieldGroup: [],
};
}
/** @type {?} */
let res = this.kreTransferService.groupFieldMoveUpOrDown(this.form_fields, groupField, type);
if (res != null) {
this.form_fields = res;
if (groupField.key !== null && groupField.key !== undefined) {
this.form_model[groupField.key] = [{}];
}
}
}
/**
* @param {?} groupField
* @param {?} type
* @return {?}
*/
groupBtnAddLineRemark(groupField, type) {
if (!_.get(groupField, "fieldArray.fieldGroup") ||
_.get(groupField, "fieldArray.fieldGroup").length < 1) {
groupField.fieldArray = {
fieldGroup: [],
};
}
/** @type {?} */
let res = null;
if (type === "line") {
res = this.kreTransferService.groupTransferLineToForm(this.form_fields, groupField);
}
else if (type === "remark") {
res = this.kreTransferService.groupTransferRemarkToForm(this.form_fields, groupField);
}
if (res != null) {
this.form_fields = res;
if (groupField.key !== null && groupField.key !== undefined) {
this.form_model[groupField.key] = [{}];
}
}
}
/**
* @param {?} groupField
* @return {?}
*/
groupBtnTableFields(groupField) {
this.kreDialogService.CreateModelDialog({
nzTitle: "编辑",
size: "large",
nzContent: KreFormDesignTable,
}, {
businessTable: this.business_tables,
tableType: "multiple",
fieldConfig: groupField,
}, (/**
* @param {?} instance
* @param {?} modal
* @return {?}
*/
(instance, modal) => {
modal.destroy();
/** @type {?} */
let res = this.kreTransferService.groupTransferSelectFieldToForm(this.form_fields, groupField, this.getCheckFields(), this.business_tables, instance.mapOfCheckedId);
if (res != null) {
this.form_fields = res;
if (groupField.key !== null && groupField.key !== undefined) {
this.form_model[groupField.key] = [{}];
}
}
this.initTableFieldStatus();
}));
}
/**
* @param {?} groupField
* @return {?}
*/
groupBtnDeleteFields(groupField) {
if (!_.get(groupField, "fieldArray.fieldGroup") ||
_.get(groupField, "fieldArray.fieldGroup").length < 1) {
return;
}
/** @type {?} */
let res = this.kreTransferService.groupTransferDeleteForm(this.form_fields, groupField);
if (res != null) {
this.form_fields = res;
if (groupField.key !== null && groupField.key !== undefined) {
this.form_model[groupField.key] = [{}];
}
}
this.initTableFieldStatus();
}
/**
* @return {?}
*/
initTablesInfo() {
this.business_tables;
this.dataService
.getBusinessTables(this.api.tables.url, { formcode: this.formCode })
.subscribe((/**
* @param {?} res
* @return {?}
*/
(res) => {
if (res != null) {
this.business_tables = res;
this.initFormInfo();
}
}));
}
/**
* @return {?}
*/
initFormInfo() {
this.dataService
.getFormInfo(this.api.form.url, { formcode: this.formCode })
.subscribe((/**
* @param {?} res
* @return {?}
*/
(res) => {
this.kreFormInfo = {
code: res.code,
name: res.name,
type: res.type,
fields: res.fields,
};
if (this.kreFormInfo.fields !== null &&
this.kreFormInfo.fields !== undefined) {
this.kreFormCommonService.initFormFieldModel(this.kreFormInfo.fields, this.form_model);
this.form_fields = this.kreFormInfo.fields;
}
if (res.column != undefined && res.column != null && res.column != "") {
this.kreFormInfo.column = res.column;
}
else {
this.kreFormInfo.column = "layout-column-3";
}
if (res.row != undefined && res.row != null && res.row != "") {
this.kreFormInfo.row = res.row;
}
else {
this.kreFormInfo.row = "layout-row-1";
}
if (this.kreFormInfo.column != undefined &&
this.kreFormInfo.column != null &&
this.kreFormInfo.row != undefined &&
this.kreFormInfo.row != null) {
this.layout_column = this.kreFormInfo.column;
this.layout_row = this.kreFormInfo.row;
this.kreDesginToFormService.initFormFieldByTables(this.business_tables, this.form_fields);
this.initTableFieldStatus();
}
}));
}
/**
* @return {?}
*/
initTableFieldStatus() {
this.kreDesginToFormService.initTableStatus(this.business_tables, this.form_fields);
this.initTablesData();
}
/**
* @return {?}
*/
initTablesData() {
this.table_Data = [];
/** @type {?} */
let business = clone(this.business_tables);
/** @type {?} */
let tables = [];
if (!business)
return;
if (business.primary && business.primary != null) {
tables = [
{
tableType: "primary",
tableLabel: "主表",
tableCode: business.primary["tableCode"],
tableName: business.primary["tableName"],
tableFields: business.primary["tableFields"],
},
];
}
if (business.child &&
business.child != null &&
business.child.single &&
business.child.single != null &&
business.child.single.length > 0) {
if (Array.isArray(business.child.single)) {
business.child.single.forEach((/**
* @param {?} item
* @return {?}
*/
(item) => {
tables.push({
tableType: "single",
tableLabel: "单记录子表",
tableCode: item["tableCode"],
tableName: item["tableName"],
tableFields: item["tableFields"],
});
}));
}
}
if (business.child &&
business.child != null &&
business.child.multiple &&
business.child.multiple != null &&
business.child.multiple.length > 0) {
if (Array.isArray(business.child.multiple)) {
business.child.multiple.forEach((/**
* @param {?} item
* @return {?}
*/
(item) => {
tables.push({
tableType: "multiple",
tablelabel: "多记录子表",
tableCode: item["tableCode"],
tableName: item["tableName"],
tableFields: item["tableFields"],
});
}));
}
}
this.table_Data = tables;
}
//表单选择
/**
* @return {?}
*/
selectTableFields() {
this.kreDialogService.CreateModelDialog({
nzTitle: "编辑",
size: "large",
nzContent: KreFormDesignTable,
}, { businessTable: this.business_tables, tableType: "single" }, (/**
* @param {?} instance
* @param {?} modal
* @return {?}
*/
(instance, modal) => {
modal.destroy();
this.kreTransferService.transferSelectFieldToForm(this.form_fields, this.getCheckFields(), this.business_tables, instance.mapOfCheckedId);
this.initTableFieldStatus();
}));
}
/**
* @return {?}
*/
getTableMultipleCode() {
/** @type {?} */
let resTableCode = "";
if (this.business_tables &&
this.business_tables.child &&
this.business_tables.child.multiple &&
this.business_tables.child.multiple.length > 0) {
this.business_tables.child.multiple.forEach((/**
* @param {?} item
* @return {?}
*/
(item) => {
if (item.tablequote !== true && resTableCode == "") {
resTableCode = item.tablecode;
}
}));
}
return resTableCode;
}
//修改Field
/**
* @param {?} field
* @return {?}
*/
editFormFieldConfig(field) {
/** @type {?} */
let content;
/** @type {?} */
let title = "";
if (field.type === "html") {
title = "编辑片段文本描述";
content = KreFormDSFieldLabel;
}
else {
title = "编辑字段 - " + _.get(field, "templateOptions.label");
content = KreFormDSField;
}
this.kreDialogService.CreateModelDialog({
nzTitle: title,
size: "large",
nzContent: content,
}, { field: clone(field) }, (/**
* @param {?} instance
* @param {?} modal
* @return {?}
*/
(instance, modal) => {
if (instance.checkSave()) {
/** @type {?} */
let result = this.kreTransferService.editFormFieldInfo(this.form_fields, instance.formField);
if (result != null) {
this.form_fields = result.formFileds;
if (result.groupKey != null && result.groupKey != "") {
this.form_model[result.groupKey] = [{}];
}
}
modal.destroy();
}
}));
}
//删除Field
/**
* @param {?} field
* @return {?}
*/
deleteFormFieldConfig(field) {
/** @type {?} */
let result = this.kreTransferService.deleteFormFieldInfo(this.form_fields, field);
if (result != null) {
this.form_fields = result.formFileds;
if (result.groupKey != null && result.groupKey != "") {
this.form_model[result.groupKey] = [{}];
}
this.initTableFieldStatus();
}
}
}
KreFormDesignDetail.decorators = [
{ type: Component, args: [{
selector: "kreform-design",
template: "<div class=\"design\">\n <div class=\"layout\">\n <ng-container *ngIf=\"layout==true\">\n <div class=\"layout-column\">\n <div class=\"title\">\n \u9009\u62E9\u5E03\u5C40\u6837\u5F0F\n </div>\n <ul>\n <li (click)=\"btnColumn(3)\">\n <div [class]=\"layout_column==='layout-column-3'?'select':''\"><i class=\" icon-threeL\">\n </i></div>\n <span>\u4E09\u5217</span>\n </li>\n <li (click)=\"btnColumn(2)\">\n <div [class]=\"layout_column==='layout-column-2'?'select':''\"><i class=\" icon-towL\"></i>\n </div>\n <span>\u4FE9\u5217</span>\n </li>\n <li (click)=\"btnColumn(1)\">\n <div [class]=\"layout_column==='layout-column-1'?'select':''\">\n <i class=\"icon-oneL\"></i></div>\n <span>\u4E00\u5217</span>\n </li>\n </ul>\n </div>\n\n <div class=\"layout-row\">\n <div class=\"title\">\n \u9009\u62E9\u8868\u5355\u6837\u5F0F\n </div>\n <ul>\n <li (click)=\"btnRow(1)\">\n <div [class]=\"layout_row==='layout-row-1'?'select':''\"></div>\n <span>\u6C34\u5E73</span>\n </li>\n <li (click)=\"btnRow(2)\">\n <div [class]=\"layout_row==='layout-row-2'?'select':''\"></div>\n <span>\u5782\u76F4</span>\n </li>\n </ul>\n </div>\n\n <div class=\"layout-el\">\n <div class=\"title\">\n \u8868\u5355\u7F16\u8F91\n </div>\n <ul>\n <li (click)=\"btnAddFields()\"><i class=\"icon-TianJiaZiDuan\"></i>\u6DFB\u52A0\u5B57\u6BB5</li>\n <li (click)=\"btnAddRemark()\"><i class=\"icon-other-WenBen\"></i>\u6DFB\u52A0\u6587\u672C</li>\n <li (click)=\"btnAddLine()\"><i class=\"icon-FenGeXian\"></i>\u6DFB\u52A0\u5206\u5272\u7EBF</li>\n <li (click)=\"btnAddGroup()\"><i class=\"icon-DuoJiLuQu\"></i>\u6DFB\u52A0\u591A\u8BB0\u5F55\u533A</li>\n </ul>\n </div>\n </ng-container>\n <ng-content select=\"[name=design-layout]\"></ng-content>\n </div>\n\n <div class=\"panel\">\n <div class=\"krebutton\">\n <div>\n <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"btnSave()\">\u4FDD\u5B58</button>\n <button nz-button nzType=\"primary\" nzSize=\"small\" (click)=\"btnPreview()\"><i\n class=\"icon-fwb-yulan\"></i>\u9884\u89C8</button>\n </div>\n <div>\n <button nz-button nzType=\"primary\" nzSize=\"small\" nzGhost (click)=\"btnDelete()\"><i\n class=\"icon-N_delete2\"></i>\u5220\u9664</button>\n <button nz-button nzType=\"primary\" nzSize=\"small\" nzGhost (click)=\"btnMoveUp()\"><i\n class=\"icon-ShangYi\"></i>\u4E0A\u79FB</button>\n <button nz-button nzType=\"primary\" nzSize=\"small\" nzGhost (click)=\"btnMoveDown()\"><i\n class=\"icon-XiaYi\"></i>\u4E0B\u79FB</button>\n </div>\n </div>\n <div class=\"kreform scrollbar\">\n <form [formGroup]=\"form_group\" [class]=\"kreFormInfo?.column +' '+ kreFormInfo?.row\" nz-form>\n <kreform [fields]=\"form_fields\" [status]=\"1\" [form]=\"form_group\" [model]=\"form_model\">\n </kreform>\n </form>\n </div>\n </div>\n</div>\n<!-- <kreform-drawer [(ngModel)]=\"table_Data\"></kreform-drawer> -->",
providers: [DataService, KreAntCommonService, KreTransferService],
styles: [":host ::ng-deep{width:100%;display:flex;height:100%;background-color:#f3f3f3}:host ::ng-deep .ant-input[disabled]{color:rgba(0,0,0,.25);background-color:#f3f3f3;cursor:not-allowed;opacity:1;border:0}:host ::ng-deep .design{display:flex;flex:1}:host ::ng-deep .design .layout{float:left;width:240px;background-color:#fff;padding:15px 20px 0}:host ::ng-deep .design .layout .title{font-size:14px;color:#9b9b9b;margin-bottom:10px}:host ::ng-deep .design .layout ul{list-style:none;margin:0;padding:0}:host ::ng-deep .design .layout ul li{margin:0;padding:0;cursor:pointer}:host ::ng-deep .design .layout-column ul{display:inline-block;width:100%}:host ::ng-deep .design .layout-column ul li{float:left;text-align:center}:host ::ng-deep .design .layout-column ul li div{width:56px;height:56px;line-height:63px;border-radius:4px;background-color:#ececec;margin-bottom:5px}:host ::ng-deep .design .layout-column ul li div i{color:#bfbfbf;font-size:24px}:host ::ng-deep .design .layout-column ul li div span{width:100%;display:inline-block;color:#323232}:host ::ng-deep .design .layout-column ul li:nth-child(1),:host ::ng-deep .design .layout-column ul li:nth-child(2){margin:0 15px 0 0}:host ::ng-deep .design .layout-row ul{display:inline-block;width:100%}:host ::ng-deep .design .layout-row ul li{float:left;text-align:center}:host ::ng-deep .design .layout-row ul li div{width:90px;height:32px;line-height:32px;border-radius:4px;background-color:#ececec;margin-bottom:5px;cursor:pointer}:host ::ng-deep .design .layout-row ul li div i{color:#bfbfbf;font-size:24px}:host ::ng-deep .design .layout-row ul li div span{width:100%;display:inline-block;color:#323232}:host ::ng-deep .design .layout-row ul li:nth-child(1){margin:0 15px 0 0}:host ::ng-deep .design .layout-el li{width:200px;height:33px;line-height:33px;border-radius:4px;border:1px solid #dcdce0;background-color:#fff;margin:0 0 10px!important;font-size:13px;color:#323232}:host ::ng-deep .design .layout-el li i{margin:0 8px;font-size:14px;color:#bfbfbf}:host ::ng-deep .design .layout-el li:hover{background-color:#71a9ff;cursor:pointer;color:#fff}:host ::ng-deep .design .layout-el li:hover i{color:#fff}:host ::ng-deep .design .panel{flex:1;float:left;margin:0 0 0 20px;padding:0;display:flex;flex-direction:column;border-radius:4px;border:1px solid #dcdce0;background-color:#fff}:host ::ng-deep .design .panel .krebutton{padding:10px;width:100%;text-align:right;border-bottom:1px solid #d9d9d9;font-size:13px;display:flex}:host ::ng-deep .design .panel .krebutton button{margin:0 6px 0 0;font-size:12px}:host ::ng-deep .design .panel .krebutton button i{margin:0 5px 0 0;font-size:14px}:host ::ng-deep .design .panel .krebutton div{flex:1;float:left}:host ::ng-deep .design .panel .krebutton div:nth-child(1){text-align:left}:host ::ng-deep .design .panel .krebutton div:nth-child(2){text-align:right}:host ::ng-deep .design .panel .kreform{width:100%;height:100%;display:inline-block;margin:0;padding:20px;overflow-y:auto}:host ::ng-deep .design .panel .kreform krefield-checkbox,:host ::ng-deep .design .panel .kreform krefield-datetime,:host ::ng-deep .design .panel .kreform krefield-html,:host ::ng-deep .design .panel .kreform krefield-image,:host ::ng-deep .design .panel .kreform krefield-line,:host ::ng-deep .design .panel .kreform krefield-lookup,:host ::ng-deep .design .panel .kreform krefield-number,:host ::ng-deep .design .panel .kreform krefield-password,:host ::ng-deep .design .panel .kreform krefield-radio,:host ::ng-deep .design .panel .kreform krefield-select,:host ::ng-deep .design .panel .kreform krefield-text,:host ::ng-deep .design .panel .kreform krefield-textarea,:host ::ng-deep .design .panel .kreform krefield-texti18n,:host ::ng-deep .design .panel .kreform krefield-upload,:host ::ng-deep .design .panel .kreform krefield-wrapper,:host ::ng-deep .design .panel .kreform kreform-repeat{display:flex;width:100%}:host ::ng-deep .design .panel .kreform krefield-checkbox .fieldOperational,:host ::ng-deep .design .panel .kreform krefield-datetime .fieldOperational,:host ::ng-deep .design .panel .kreform krefield-html .fieldOperational,:host ::ng-deep .design .panel .kreform krefield-image .fieldOperational,:host ::ng-deep .design .panel .kreform krefield-line .fieldOperational,:host ::ng-deep .design .panel .kreform krefield-lookup .fieldOperational,:host ::ng-deep .design .panel .kreform krefield-number .fieldOperational,:host ::ng-deep .design .panel .kreform krefield-password .fieldOperational,:host ::ng-deep .design .panel .kreform krefield-radio .fieldOperational,:host ::ng-deep .design .panel .kreform krefield-select .fieldOperational,:host ::ng-deep .design .panel .kreform krefield-text .fieldOperational,:host ::ng-deep .design .panel .kreform krefield-textarea .fieldOperational,:host ::ng-deep .design .panel .kreform krefield-texti18n .fieldOperational,:host ::ng-deep .design .panel .kreform krefield-upload .fieldOperational,:host ::ng-deep .design .panel .kreform krefield-wrapper .fieldOperational,:host ::ng-deep .design .panel .kreform kreform-repeat .fieldOperational{display:flex;width:560px;margin:0 0 10px}:host ::ng-deep .design .panel .kreform krefield-checkbox .fieldOperational .fieldcheckbox,:host ::ng-deep .design .panel .kreform krefield-datetime .fieldOperational .fieldcheckbox,:host ::ng-deep .design .panel .kreform krefield-html .fieldOperational .fieldcheckbox,:host ::ng-deep .design .panel .kreform krefield-image .fieldOperational .fieldcheckbox,:host ::ng-deep .design .panel .kreform krefield-line .fieldOperational .fieldcheckbox,:host ::ng-deep .design .panel .kreform krefield-lookup .fieldOperational .fieldcheckbox,:host ::ng-deep .design .panel .kreform krefield-number .fieldOperational .fieldcheckbox,:host ::ng-deep .design .panel .kreform krefield-password .fieldOperational .fieldcheckbox,:host ::ng-deep .design .panel .kreform krefield-radio .fieldOperational .fieldcheckbox,:host ::ng-deep .design .panel .kreform krefield-select .fieldOperational .fieldcheckbox,:host ::ng-deep .design .panel .kreform krefield-text .fieldOperational .fieldcheckbox,:host ::ng-deep .design .panel .kreform krefield-textarea .fieldOperational .fieldcheckbox,:host ::ng-deep .design .panel .kreform krefield-texti18n .fieldOperational .fieldcheckbox,:host ::ng-deep .design .panel .kreform krefield-upload .fieldOperational .fieldcheckbox,:host ::ng-deep .design .panel .kreform krefield-wrapper .fieldOperational .fieldcheckbox,:host ::ng-deep .design .panel .kreform kreform-repeat .fieldOperational .fieldcheckbox{width:50px;font-size:13px;line-height:17px;color:#323232;text-align:right;vertical-align:middle;float:left;box-sizing:border-box;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-ms-grid-row-align:center;align-self:center;margin:0 10px 0 0}:host ::ng-deep .design .panel .kreform krefield-checkbox .fieldOperational .fieldControl,:host ::ng-deep .design .panel .kreform krefield-datetime .fieldOperational .fieldControl,:host ::ng-deep .design .panel .kreform krefield-html .fieldOperational .fieldControl,:host ::ng-deep .design .panel .kreform krefield-image .fieldOperational .fieldControl,:host ::ng-deep .design .panel .kreform krefield-line .fieldOperational .fieldControl,:host ::ng-deep .design .panel .kreform krefield-lookup .fieldOperational .fieldControl,:host ::ng-deep .design .panel .kreform krefield-number .fieldOperational .fieldControl,:host ::ng-deep .design .panel .kreform krefield-password .fieldOperational .fieldControl,:host ::ng-deep .design .panel .kreform krefield-radio .fieldOperational .fieldControl,:host ::ng-deep .design .panel .kreform krefield-select .fieldOperational .fieldControl,:host ::ng-deep .design .panel .kreform krefield-text .fieldOperational .fieldControl,:host ::ng-deep .design .panel .kreform krefield-textarea .fieldOperational .fieldControl,:host ::ng-deep .design .panel .kreform krefield-texti18n .fieldOperational .fieldControl,:host ::ng-deep .design .panel .kreform krefield-upload .fieldOperational .fieldControl,:host ::ng-deep .design .panel .kreform krefield-wrapper .fieldOperational .fieldControl,:host ::ng-deep .design .panel .kreform kreform-repeat .fieldOperational .fieldControl{flex:1;display:flex;align-self:center;position:relative}:host ::ng-deep .design .panel .kreform krefield-checkbox .fieldOperational .fieldControl .label,:host ::ng-deep .design .panel .kreform krefield-datetime .fieldOperational .fieldControl .label,:host ::ng-deep .design .panel .kreform krefield-html .fieldOperational .fieldControl .label,:host ::ng-deep .design .panel .kreform krefield-image .fieldOperational .fieldControl .label,:host ::ng-deep .design .panel .kreform krefield-line .fieldOperational .fieldControl .label,:host ::ng-deep .design .panel .kreform krefield-lookup .fieldOperational .fieldControl .label,:host ::ng-deep .design .panel .kreform krefield-number .fieldOperational .fieldControl .label,:host ::ng-deep .design .panel .kreform krefield-password .fieldOperational .fieldControl .label,:host ::ng-deep .design .panel .kreform krefield-radio .fieldOperational .fieldControl .label,:host ::ng-deep .design .panel .kreform krefield-select .fieldOperational .fieldControl .label,:host ::ng-deep .design .panel .kreform krefield-text .fieldOperational .fieldControl .label,:host ::ng-deep .design .panel .kreform krefield-textarea .fieldOperational .fieldControl .label,:host ::ng-deep .design .panel .kreform krefield-texti18n .fieldOperational .fieldControl .label,:host ::ng-deep .design .panel .kreform krefield-upload .fieldOperational .fieldControl .label,:host ::ng-deep .design .panel .kreform krefield-wrapper .fieldOperational .fieldControl .label,:host ::ng-deep .design .panel .kreform kreform-repeat .fieldOperational .fieldControl .label{width:120px;font-size:13px;line-height:17px;color:#323232;text-align:right;vertical-align:middle;float:left;box-sizing:border-box;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-ms-grid-row-align:center;align-self:center}:host ::ng-deep .design .panel .kreform krefield-checkbox .fieldOperational .fieldControl .label span,:host ::ng-deep .design .panel .kreform krefield-datetime .fieldOperational .fieldControl .label span,:host ::ng-deep .design .panel .kreform krefield-html .fieldOperational .fieldControl .label span,:host ::ng-deep .design .panel .kreform krefield-image .fieldOperational .fieldControl .label span,:host ::ng-deep .design .panel .kreform krefield-line .fieldOperational .fieldControl .label span,:host ::ng-deep .design .panel .kreform krefield-lookup .fieldOperational .fieldControl .label span,:host ::ng-deep .design .panel .kreform krefield-number .fieldOperational .fieldControl .label span,:host ::ng-deep .design .panel .kreform krefield-password .fieldOperational .fieldControl .label span,:host ::ng-deep .design .panel .kreform krefield-radio .fieldOperational .fieldControl .label span,:host ::ng-deep .design .panel .kreform krefield-select .fieldOperational .fieldControl .label span,:host ::ng-deep .design .panel .kreform krefield-text .fieldOperational .fieldControl .label span,:host ::ng-deep .design .panel .kreform krefield-textarea .fieldOperational .fieldControl .label span,:host ::ng-deep .design .panel .kreform krefield-texti18n .fieldOperational .fieldControl .label span,:host ::ng-deep .design .panel .kreform krefield-upload .fieldOperational .fieldControl .label span,:host ::ng-deep .design .panel .kreform krefield-wrapper .fieldOperational .fieldControl .label span,:host ::ng-deep .design .panel .kreform kreform-repeat .fieldOperational .fieldControl .label span{color:red;margin-right:3px}:host ::ng-deep .design .panel .kreform krefield-checkbox .fieldOperational .fieldControl .label::after,:host ::ng-deep .design .panel .kreform krefield-datetime .fieldOperational .fieldControl .label::after,:host ::ng-deep .design .panel .kreform krefield-html .fieldOperational .fieldControl .label::after,:host ::ng-deep .design .panel .kreform krefield-image .fieldOperational .fieldControl .label::after,:host ::ng-deep .design .panel .kreform krefield-line .fieldOperational .fieldControl .label::after,:host ::ng-deep .design .panel .kreform krefield-lookup .fieldOperational .fieldControl .label::after,:host ::ng-deep .design .panel .kreform krefield-number .fieldOperational .fieldControl .label::after,:host ::ng-deep .design .panel .kreform krefield-password .fieldOperational .fieldControl .label::after,:host ::ng-deep .design .panel .kreform krefield-radio .fieldOperational .fieldControl .label::after,:host ::ng-deep .design .panel .kreform krefield-select .fieldOperational .fieldControl .label::after,:host ::ng-deep .design .panel .kreform krefield-text .fieldOperational .fieldControl .label::after,:host ::ng-deep .design .panel .kreform krefield-textarea .fieldOperational .fieldControl .label::after,:host ::ng-deep .design .panel .kreform krefield-texti18n .fieldOperational .fieldControl .label::after,:host ::ng-deep .design .panel .kreform krefield-upload .fieldOperational .fieldControl .label::after,:host ::ng-deep .design .panel .kreform krefield-wrapper .fieldOperational .fieldControl .label::after,:host ::ng-deep .design .panel .kreform kreform-repeat .fieldOperational .fieldControl .label::after{content:\"\uFF1A\"}:host ::ng-deep .design .panel .kreform krefield-checkbox .fieldOperational .fieldControl .control,:host ::ng-deep .design .panel .kreform krefield-datetime .fieldOperational .fieldControl .control,:host ::ng-deep .design .panel .kreform krefield-html .fieldOperational .fieldControl .control,:host ::ng-deep .design .panel .kreform krefield-image .fieldOperational .fieldControl .control,:host ::ng-deep .design .panel .kreform krefield-line .fieldOperational .fieldControl .control,:host ::ng-deep .design .panel .kreform krefield-lookup .fieldOperational .fieldControl .control,:host ::ng-deep .design .panel .kreform krefield-number .fieldOperational .fieldControl .control,:host ::ng-deep .design .panel .kreform krefield-password .fieldOperational .fieldControl .control,:host ::ng-deep .design .panel .kreform krefield-radio .fieldOperational .fieldControl .control,:host ::ng-deep .design .panel .kreform krefield-select .fieldOperational .fieldControl .control,:host ::ng-deep .design .panel .kreform krefield-text .fieldOperational .fieldControl .control,:host ::ng-deep .design .panel .kreform krefield-textarea .fieldOperational .fieldControl .control,:host ::ng-deep .design .panel .kreform krefield-texti18n .fieldOperational .fieldControl .control,:host ::ng-deep .design .panel .kreform krefield-upload .fieldOperational .fieldControl .control,:host ::ng-deep .design .panel .kreform krefield-wrapper .fieldOperational .fieldControl .control,:host ::ng-deep .design .panel .kreform kreform-repeat .fieldOperational .fieldControl .control{flex:1;padding:10px 10px 10px 0}:host ::ng-deep .design .panel .kreform krefield-checkbox .fieldOperational .fieldControl .control .ant-checkbox-group,:host ::ng-deep .design .panel .kreform krefield-checkbox .fieldOperational .fieldControl .control .ant-checkbox-wrapper,:host ::ng-deep .design .panel .kreform krefield-checkbox .fieldOperational .fieldControl .control .ant-radio-group,:host ::ng-deep .design .panel .kreform krefield-checkbox .fieldOperational .fieldControl .control .ant-radio-wrapper,:host ::ng-deep .design .panel .kreform krefield-datetime .fieldOperational .fieldControl .control .ant-checkbox-group,:host ::ng-deep .design .panel .kreform krefield-datetime .fieldOperational .fieldControl .control .ant-checkbox-wrapper,:host ::ng-deep .design .panel .kreform krefield-datetime .fieldOperational .fieldControl .control .ant-radio-group,:host ::ng-deep .design .panel .kreform krefield-datetime .fieldOperational .fieldControl .control .ant-radio-wrapper,:host ::ng-deep .design .panel .kreform krefield-html .fieldOperational .fieldControl .control .ant-checkbox-group,:host ::ng-deep .design .panel .kreform krefield-html .fieldOperational .fieldControl .control .ant-checkbox-wrapper,:host ::ng-deep .design .panel .kreform krefield-html .fieldOperational .fieldControl .control .ant-radio-group,:host ::ng-deep .design .panel .kreform krefield-html .fieldOperational .fieldControl .control .ant-radio-wrapper,:host ::ng-deep .design .panel .kreform krefield-image .fieldOperational .fieldControl .control .ant-checkbox-group,:host ::ng-deep .design .panel .kreform krefield-image .fieldOperational .fieldControl .control .ant-checkbox-wrapper,:host ::ng-deep .design .panel .kreform krefield-image .fieldOperational .fieldControl .control .ant-radio-group,:host ::ng-deep .design .panel .kreform krefield-image .fieldOperational .fieldControl .control .ant-radio-wrapper,:host ::ng-deep .design .panel .kreform krefield-line .fieldOperational .fieldControl .control .ant-checkbox-group,:host ::ng-deep .design .panel .kreform krefield-line .fieldOperational .fieldControl .control .ant-checkbox-wrapper,:host ::ng-deep .design .panel .kreform krefield-line .fieldOperational .fieldControl .control .ant-radio-group,:host ::ng-deep .design .panel .kreform krefield-line .fieldOperational .fieldControl .control .ant-radio-wrapper,:host ::ng-deep .design .panel .kreform krefield-lookup .fieldOperational .fieldControl .control .ant-checkbox-group,:host ::ng-deep .design .panel .kreform krefield-lookup .fieldOperational .fieldControl .control .ant-checkbox-wrapper,:host ::ng-deep .design .panel .kreform krefield-lookup .fieldOperational .fieldControl .control .ant-radio-group,:host ::ng-deep .design .panel .kreform krefield-lookup .fieldOperational .fieldControl .control .ant-radio-wrapper,:host ::ng-deep .design .panel .kreform krefield-number .fieldOperational .fieldControl .control .ant-checkbox-group,:host ::ng-deep .design .panel .kreform krefield-number .fieldOperational .fieldControl .control .ant-checkbox-wrapper,:host ::ng-deep .design .panel .kreform krefield-number .fieldOperational .fieldControl .control .ant-radio-group,:host ::ng-deep .design .panel .kreform krefield-number .fieldOperational .fieldControl .control .ant-radio-wrapper,:host ::ng-deep .design .panel .kreform krefield-password .fieldOperational .fieldControl .control .ant-checkbox-group,:host ::ng-deep .design .panel .kreform krefield-password .fieldOperational .fieldControl .control .ant-checkbox-wrapper,:host ::ng-deep .design .panel .kreform krefield-password .fieldOperational .fieldControl .control .ant-radio-group,:host ::ng-deep .design .panel .kreform krefield-password .fieldOperational .fieldControl .control .ant-radio-wrapper,:host ::ng-deep .design .panel .kreform krefield-radio .fieldOperational .fieldControl .control .ant-checkbox-group,:host ::ng-deep .design .panel .kreform krefield-radio .fieldOperational .fieldControl .control .ant-checkbox-wrapper,:host ::ng-deep .design .panel .kreform krefield-radio .fieldOperational .fieldControl .control .ant-radio-group,:host ::ng-deep .design .panel .kreform krefield-radio .fieldOperational .fieldControl .control .ant-radio-wrapper,:host ::ng-deep .design .panel .kreform krefield-select .fieldOperational .fieldControl .control .ant-checkbox-group,:host ::ng-deep .design .panel .kreform krefield-select .fieldOperational .fieldControl .control .ant-checkbox-wrapper,:host ::ng-deep .design .panel .kreform krefield-select .fieldOperational .fieldControl .control .ant-radio-group,:host ::ng-deep .design .panel .kreform krefield-select .fieldOperational .fieldControl .control .ant-radio-wrapper,:host ::ng-deep .design .panel .kreform krefield-text .fieldOperational .fieldControl .control .ant-checkbox-group,:host ::ng-deep .design .panel .kreform krefield-text .fieldOperational .fieldControl .control .ant-checkbox-wrapper,:host ::ng-deep .design .panel .kreform krefield-text .fieldOperational .fieldControl .control .ant-radio-group,:host ::ng-deep .design .panel .kreform krefield-text .fieldOperational .fieldControl .control .ant-radio-wrapper,:host ::ng-deep .design .panel .kreform krefield-textarea .fieldOperational .fieldControl .control .ant-checkbox-group,:host ::ng-deep .design .panel .kreform krefield-textarea .fieldOperational .fieldControl .control .ant-checkbox-wrapper,:host ::ng-deep .design .panel .kreform krefield-textarea .fieldOperational .fieldControl .control .ant-radio-group,:host ::ng-deep .design .panel .kreform krefield-textarea .fieldOperational .fieldControl .control .ant-radio-wrapper,:host ::ng-deep .design .panel .kreform krefield-texti18n .fieldOperational .fieldControl .control .ant-checkbox-group,:host ::ng-deep .design .panel .kreform krefield-texti18n .fieldOperational .fieldControl .control .ant-checkbox-wrapper,:host ::ng-deep .design .panel .kreform krefield-texti18n .fieldOperational .fieldControl .control .ant-radio-group,:host ::ng-deep .design .panel .kreform krefield-texti18n .fieldOperational .fieldControl .control .ant-radio-wrapper,:host ::ng-deep .design .panel .kreform krefield-upload .fieldOperational .fieldControl .control .ant-checkbox-group,:host ::ng-deep .design .panel .kreform krefield-upload .fieldOperational .fieldControl .control .ant-checkbox-wrapper,:host ::ng-deep .design .panel .kreform krefield-upload .fieldOperational .fieldControl .control .ant-radio-group,:host ::ng-deep .design .panel .kreform krefield-upload .fieldOperational .fieldControl .control .ant-radio-wrapper,:host ::ng-deep .design .panel .kreform krefield-wrapper .fieldOperational .fieldControl .control .ant-checkbox-group,:host ::ng-deep .design .panel .kreform krefield-wrapper .fieldOperational .fieldControl .control .ant-checkbox-wrapper,:host ::ng-deep .design .panel .kreform krefield-wrapper .fieldOperational .fieldControl .control .ant-radio-group,:host ::ng-deep .design .panel .kreform krefield-wrapper .fieldOperational .fieldControl .control .ant-radio-wrapper,:host ::ng-deep .design .panel .kreform kreform-repeat .fieldOperational .fieldControl .control .ant-checkbox-group,:host ::ng-deep .design .panel .kreform kreform-repeat .fieldOperational .fieldControl .control .ant-checkbox-wrapper,:host ::ng-deep .design .panel .kreform kreform-repeat .fieldOperational .fieldControl .control .ant-radio-group,:host ::ng-deep .design .panel .kreform kreform-repeat .fieldOperational .fieldControl .control .ant-radio-wrapper{height:32px;line-height:32px}:host ::ng-deep .design .panel .kreform krefield-checkbox .fieldOperational .fieldControl .fieldButton,:host ::ng-deep .design .panel .kreform krefield-datetime .fieldOperational .fieldControl .fieldButton,:host ::ng-deep .design .panel .kreform krefield-html .fieldOperational .fieldControl .fieldButton,:host ::ng-deep .design .panel .kreform krefield-image .fieldOperational .fieldControl .fieldButton,:host ::ng-deep .design .panel .kreform krefield-line .fieldOperational .fieldControl .fieldButton,:host ::ng-deep .design .panel .kreform krefield-lookup .fieldOperational .fieldControl .fieldButton,:host ::ng-deep .design .panel .kreform krefield-number .fieldOperational .fieldControl .fieldButton,:host ::ng-deep .design .panel .kreform krefield-password .fieldOperational .fieldControl .fieldButton,:host ::ng-deep .design .panel .kreform krefield-radio .fieldOperational .fieldControl .fieldButton,:host ::ng-deep .design .panel .kreform krefield-select .fieldOperational .fieldControl .fieldButton,:host ::ng-deep .design .panel .kreform krefield-text .fieldOperational .fieldControl .fieldButton,:host ::ng-deep .design .panel .kreform krefield-textarea .fieldOperational .fieldControl .fieldButton,:host ::ng-deep .design .panel .kreform krefield-texti18n .fieldOperational .fieldControl .fieldButton,:host ::ng-deep .design .panel .kreform krefield-upload .fieldOperational .fieldControl .fieldButton,:host ::ng-deep .design .panel .kreform krefield-wrapper .fieldOperational .fieldControl .fieldButton,:host ::ng-deep .design .panel .kreform kreform-repeat .fieldOperational .fieldControl .fieldButton{display:none;border-radius:2px;border:1px solid #ffca5e;background-color:rgba(255,202,94,.2);background-size:cover;width:100%;position:absolute;height:100%;text-align:right}:host ::ng-deep .design .panel .kreform krefield-checkbox .fieldOperational .fieldControl .fi