cnhis-design-vue 3.1.18-beta.0 → 3.1.18-beta.10

package/es/components/form-config/src/constants/index.js

@@ -1,60 +1 @@
-const WidgetTextMap = /* @__PURE__ */ new Map([
-  ["LINE_BAR", "\u5206\u7EBF\u680F"],
-  ["NEWLINE", "\u5206\u884C\u7B26"]
-]);
-var EditAbleField = /* @__PURE__ */ ((EditAbleField2) => {
-  EditAbleField2["NAME"] = "name";
-  EditAbleField2["NOTES"] = "notes";
-  EditAbleField2["DEFAULT_VALUE"] = "defaultValue";
-  EditAbleField2["LAYOUT_WIDTH_ENUM"] = "layoutWidthEnum";
-  EditAbleField2["DESC"] = "desc";
-  EditAbleField2["DEFAULT_EXPAND"] = "defaultExpand";
-  EditAbleField2["FOLD"] = "fold";
-  EditAbleField2["REQUIRED"] = "required";
-  EditAbleField2["EDITABLE"] = "editable";
-  return EditAbleField2;
-})(EditAbleField || {});
-function widgetWidthOptionConfig() {
-  return {
-    option: [
-      { text: "\u6574\u884C", value: "ALL_LINE" },
-      { text: "\u534A\u884C", value: "HALF_LINE" },
-      { text: "5/6", value: "FIVE_SIX" },
-      { text: "2/3", value: "TWO_THREE" },
-      { text: "1/3", value: "ONE_THREE" },
-      { text: "3/4", value: "THREE_FOUR" },
-      { text: "1/4", value: "ONE_FOUR" },
-      { text: "1/6", value: "ONE_SIX" },
-      { text: "1/8", value: "ONE_EIGHT" }
-    ]
-  };
-}
-function isShowOptionConfig() {
-  return {
-    open: { describe: "\u9ED8\u8BA4\u5C55\u5F00", value: true },
-    close: { describe: "\u9ED8\u8BA4\u6536\u8D77", value: false }
-  };
-}
-function isNotFoldOptionConfig() {
-  return {
-    open: { describe: "\u53EF\u6298\u53E0", value: true },
-    close: { describe: "\u4E0D\u53EF\u6298\u53E0", value: false }
-  };
-}
-function isEditOptionConfig() {
-  return {
-    open: { describe: "\u53EF\u7F16\u8F91", value: true },
-    close: { describe: "\u4E0D\u53EF\u7F16\u8F91", value: false }
-  };
-}
-function isNullOptionConfig() {
-  return {
-    open: { describe: "\u5FC5\u586B", value: true },
-    close: { describe: "\u4E0D\u5FC5\u586B", value: false }
-  };
-}
-const InjectionFieldList = Symbol("InjectionFieldList");
-const InjectionMaterialList = Symbol("InjectionMaterialList");
-const InjectionActiveFieldItem = Symbol("InjectionActiveFieldItem");
-
-export { EditAbleField, InjectionActiveFieldItem, InjectionFieldList, InjectionMaterialList, WidgetTextMap, isEditOptionConfig, isNotFoldOptionConfig, isNullOptionConfig, isShowOptionConfig, widgetWidthOptionConfig };
+export { EditAbleField, InjectionActiveFieldItem, InjectionFieldList, InjectionMaterialList, WidgetTextMap, isEditOptionConfig, isNotFoldOptionConfig, isNullOptionConfig, isShowOptionConfig, widgetWidthOptionConfig } from './index2.js';

package/es/components/form-config/src/constants/index2.js

@@ -0,0 +1,60 @@
+const WidgetTextMap = /* @__PURE__ */ new Map([
+  ["LINE_BAR", "\u5206\u7EBF\u680F"],
+  ["NEWLINE", "\u5206\u884C\u7B26"]
+]);
+var EditAbleField = /* @__PURE__ */ ((EditAbleField2) => {
+  EditAbleField2["NAME"] = "name";
+  EditAbleField2["NOTES"] = "notes";
+  EditAbleField2["DEFAULT_VALUE"] = "defaultValue";
+  EditAbleField2["LAYOUT_WIDTH_ENUM"] = "layoutWidthEnum";
+  EditAbleField2["DESC"] = "desc";
+  EditAbleField2["DEFAULT_EXPAND"] = "defaultExpand";
+  EditAbleField2["FOLD"] = "fold";
+  EditAbleField2["REQUIRED"] = "required";
+  EditAbleField2["EDITABLE"] = "editable";
+  return EditAbleField2;
+})(EditAbleField || {});
+function widgetWidthOptionConfig() {
+  return {
+    option: [
+      { text: "\u6574\u884C", value: "ALL_LINE" },
+      { text: "\u534A\u884C", value: "HALF_LINE" },
+      { text: "5/6", value: "FIVE_SIX" },
+      { text: "2/3", value: "TWO_THREE" },
+      { text: "1/3", value: "ONE_THREE" },
+      { text: "3/4", value: "THREE_FOUR" },
+      { text: "1/4", value: "ONE_FOUR" },
+      { text: "1/6", value: "ONE_SIX" },
+      { text: "1/8", value: "ONE_EIGHT" }
+    ]
+  };
+}
+function isShowOptionConfig() {
+  return {
+    open: { describe: "\u9ED8\u8BA4\u5C55\u5F00", value: true },
+    close: { describe: "\u9ED8\u8BA4\u6536\u8D77", value: false }
+  };
+}
+function isNotFoldOptionConfig() {
+  return {
+    open: { describe: "\u53EF\u6298\u53E0", value: true },
+    close: { describe: "\u4E0D\u53EF\u6298\u53E0", value: false }
+  };
+}
+function isEditOptionConfig() {
+  return {
+    open: { describe: "\u53EF\u7F16\u8F91", value: true },
+    close: { describe: "\u4E0D\u53EF\u7F16\u8F91", value: false }
+  };
+}
+function isNullOptionConfig() {
+  return {
+    open: { describe: "\u5FC5\u586B", value: true },
+    close: { describe: "\u4E0D\u5FC5\u586B", value: false }
+  };
+}
+const InjectionFieldList = Symbol("InjectionFieldList");
+const InjectionMaterialList = Symbol("InjectionMaterialList");
+const InjectionActiveFieldItem = Symbol("InjectionActiveFieldItem");
+
+export { EditAbleField, InjectionActiveFieldItem, InjectionFieldList, InjectionMaterialList, WidgetTextMap, isEditOptionConfig, isNotFoldOptionConfig, isNullOptionConfig, isShowOptionConfig, widgetWidthOptionConfig };

package/es/components/form-config/src/hooks/index.js

@@ -1,3 +1,3 @@
 export { usePresetRenderer } from './usePresetRenderer.js';
-export { useSortableConfig } from './useSortalbeConfig.js';
-export { useConfigurationField } from './useConfigurationField.js';
+export { useSortableConfig } from './useSortalbeConfig2.js';
+export { useConfigurationField } from './useConfigurationField2.js';

package/es/components/form-config/src/hooks/useConfigurationField.js

@@ -1,52 +1 @@
-import { EditAbleField, widgetWidthOptionConfig, isShowOptionConfig, isNotFoldOptionConfig, isEditOptionConfig, isNullOptionConfig } from '../constants/index.js';
-
-function useConfigurationField() {
-  const fieldMap = /* @__PURE__ */ new Map([
-    [EditAbleField.NAME, { alias: "\u540D\u79F0", elem_width: 6, is_null: "0", html_type: "INPUT" }],
-    [EditAbleField.NOTES, { alias: "\u95EE\u53F7\u63D0\u793A", elem_width: 6, html_type: "INPUT" }],
-    [
-      EditAbleField.DEFAULT_VALUE,
-      { alias: "\u9ED8\u8BA4\u503C", elem_width: 6, html_type: "INPUT", validate: { max_length: 20 } }
-    ],
-    [
-      EditAbleField.LAYOUT_WIDTH_ENUM,
-      { alias: "\u5BBD\u5EA6", fieldType: "number", html_type: "SELECT", elem_width: 6, ...widgetWidthOptionConfig() }
-    ],
-    [EditAbleField.DESC, { alias: "\u8BF4\u660E\u6587\u672C", elem_width: 6, html_type: "INPUT", validate: { max_length: 30 } }],
-    [
-      EditAbleField.DEFAULT_EXPAND,
-      { alias: "\u662F\u5426\u9ED8\u8BA4\u5C55\u5F00", html_type: "SWITCH", elem_width: 6, ...isShowOptionConfig() }
-    ],
-    [EditAbleField.FOLD, { alias: "\u662F\u5426\u53EF\u6298\u53E0", html_type: "SWITCH", elem_width: 6, ...isNotFoldOptionConfig() }],
-    [EditAbleField.EDITABLE, { alias: "\u662F\u5426\u53EF\u7F16\u8F91", html_type: "SWITCH", elem_width: 6, ...isEditOptionConfig() }],
-    [EditAbleField.REQUIRED, { alias: "\u662F\u5426\u5FC5\u586B", html_type: "SWITCH", elem_width: 6, ...isNullOptionConfig() }]
-  ]);
-  function generateFieldListByKeys(keyList) {
-    return keyList.map((key) => {
-      return { ...fieldMap.get(key), val_key: key };
-    });
-  }
-  function generateFieldListByFieldItem(fieldItem) {
-    const htmlMap = new Map([
-      [
-        "LINE_BAR",
-        [EditAbleField.NAME, EditAbleField.LAYOUT_WIDTH_ENUM, EditAbleField.DEFAULT_EXPAND, EditAbleField.FOLD]
-      ],
-      ...["NEWLINE", "COMPLEX", "COMBINATION"].map((key) => [key, [EditAbleField.NAME, EditAbleField.LAYOUT_WIDTH_ENUM]])
-    ]);
-    const defaultItems = [
-      EditAbleField.NAME,
-      EditAbleField.DEFAULT_VALUE,
-      EditAbleField.LAYOUT_WIDTH_ENUM,
-      EditAbleField.DESC,
-      EditAbleField.NOTES,
-      EditAbleField.EDITABLE,
-      EditAbleField.REQUIRED
-    ];
-    const keys = htmlMap.get(fieldItem.type) || defaultItems;
-    return generateFieldListByKeys(keys);
-  }
-  return { generateFieldListByKeys, generateFieldListByFieldItem };
-}
-
-export { useConfigurationField };
+export { useConfigurationField } from './useConfigurationField2.js';

package/es/components/form-config/src/hooks/useConfigurationField2.js

@@ -0,0 +1,52 @@
+import { EditAbleField, widgetWidthOptionConfig, isShowOptionConfig, isNotFoldOptionConfig, isEditOptionConfig, isNullOptionConfig } from '../constants/index2.js';
+
+function useConfigurationField() {
+  const fieldMap = /* @__PURE__ */ new Map([
+    [EditAbleField.NAME, { alias: "\u540D\u79F0", elem_width: 6, is_null: "0", html_type: "INPUT" }],
+    [EditAbleField.NOTES, { alias: "\u95EE\u53F7\u63D0\u793A", elem_width: 6, html_type: "INPUT" }],
+    [
+      EditAbleField.DEFAULT_VALUE,
+      { alias: "\u9ED8\u8BA4\u503C", elem_width: 6, html_type: "INPUT", validate: { max_length: 20 } }
+    ],
+    [
+      EditAbleField.LAYOUT_WIDTH_ENUM,
+      { alias: "\u5BBD\u5EA6", fieldType: "number", html_type: "SELECT", elem_width: 6, ...widgetWidthOptionConfig() }
+    ],
+    [EditAbleField.DESC, { alias: "\u8BF4\u660E\u6587\u672C", elem_width: 6, html_type: "INPUT", validate: { max_length: 30 } }],
+    [
+      EditAbleField.DEFAULT_EXPAND,
+      { alias: "\u662F\u5426\u9ED8\u8BA4\u5C55\u5F00", html_type: "SWITCH", elem_width: 6, ...isShowOptionConfig() }
+    ],
+    [EditAbleField.FOLD, { alias: "\u662F\u5426\u53EF\u6298\u53E0", html_type: "SWITCH", elem_width: 6, ...isNotFoldOptionConfig() }],
+    [EditAbleField.EDITABLE, { alias: "\u662F\u5426\u53EF\u7F16\u8F91", html_type: "SWITCH", elem_width: 6, ...isEditOptionConfig() }],
+    [EditAbleField.REQUIRED, { alias: "\u662F\u5426\u5FC5\u586B", html_type: "SWITCH", elem_width: 6, ...isNullOptionConfig() }]
+  ]);
+  function generateFieldListByKeys(keyList) {
+    return keyList.map((key) => {
+      return { ...fieldMap.get(key), val_key: key };
+    });
+  }
+  function generateFieldListByFieldItem(fieldItem) {
+    const htmlMap = new Map([
+      [
+        "LINE_BAR",
+        [EditAbleField.NAME, EditAbleField.LAYOUT_WIDTH_ENUM, EditAbleField.DEFAULT_EXPAND, EditAbleField.FOLD]
+      ],
+      ...["NEWLINE", "COMPLEX", "COMBINATION"].map((key) => [key, [EditAbleField.NAME, EditAbleField.LAYOUT_WIDTH_ENUM]])
+    ]);
+    const defaultItems = [
+      EditAbleField.NAME,
+      EditAbleField.DEFAULT_VALUE,
+      EditAbleField.LAYOUT_WIDTH_ENUM,
+      EditAbleField.DESC,
+      EditAbleField.NOTES,
+      EditAbleField.EDITABLE,
+      EditAbleField.REQUIRED
+    ];
+    const keys = htmlMap.get(fieldItem.type) || defaultItems;
+    return generateFieldListByKeys(keys);
+  }
+  return { generateFieldListByKeys, generateFieldListByFieldItem };
+}
+
+export { useConfigurationField };

package/es/components/form-config/src/hooks/usePresetRenderer.js

@@ -1,10 +1,5 @@
 import { isString, isArray, isFunction } from 'lodash-es';
 import { computed } from 'vue';
-import 'naive-ui';
-import '../../../index.js';
-import 'vuedraggable';
-import '../utils/index.js';
-import '@vicons/ionicons5';
 import ComplexNode from '../components/renderer/ComplexNode.js';
 import DefaultNode from '../components/renderer/DefaultNode.js';
 

package/es/components/form-config/src/hooks/useSortalbeConfig.js

@@ -1,27 +1 @@
-function useSortableConfig() {
-  let timer = null;
-  function onChoose({ target, item }) {
-    timer = setTimeout(() => {
-      target.classList.add("is-choosing-area");
-      item.classList.add("is-choosing");
-    }, 200);
-  }
-  function onUnchoose({ from, to, target, item }) {
-    clearTimeout(timer);
-    [from, to, target].forEach((ele) => {
-      ele.classList.remove("is-choosing-area");
-    });
-    item.classList.remove("is-choosing");
-  }
-  let prevTo;
-  function onMove({ to, from }) {
-    prevTo == null ? void 0 : prevTo.classList.remove("is-choosing-area");
-    prevTo = to;
-    to !== from && from.classList.remove("is-choosing-area");
-    to.classList.add("is-choosing-area");
-  }
-  const getCommonConfig = () => ({ onMove, onChoose, onUnchoose, tag: "section", animation: "150", "item-key": "key" });
-  return { getCommonConfig };
-}
-
-export { useSortableConfig };
+export { useSortableConfig } from './useSortalbeConfig2.js';

package/es/components/form-config/src/hooks/useSortalbeConfig2.js

@@ -0,0 +1,27 @@
+function useSortableConfig() {
+  let timer = null;
+  function onChoose({ target, item }) {
+    timer = setTimeout(() => {
+      target.classList.add("is-choosing-area");
+      item.classList.add("is-choosing");
+    }, 200);
+  }
+  function onUnchoose({ from, to, target, item }) {
+    clearTimeout(timer);
+    [from, to, target].forEach((ele) => {
+      ele.classList.remove("is-choosing-area");
+    });
+    item.classList.remove("is-choosing");
+  }
+  let prevTo;
+  function onMove({ to, from }) {
+    prevTo == null ? void 0 : prevTo.classList.remove("is-choosing-area");
+    prevTo = to;
+    to !== from && from.classList.remove("is-choosing-area");
+    to.classList.add("is-choosing-area");
+  }
+  const getCommonConfig = () => ({ onMove, onChoose, onUnchoose, tag: "section", animation: "150", "item-key": "key" });
+  return { getCommonConfig };
+}
+
+export { useSortableConfig };

package/es/components/form-config/src/utils/index.js

@@ -1,26 +1 @@
-import { ref } from 'vue';
-
-function layoutWidthEnum2Column(layoutWidthEnum) {
-  const transferMap = {
-    ALL_LINE: 24,
-    HALF_LINE: 12,
-    FIVE_SIX: 20,
-    TWO_THREE: 16,
-    ONE_THREE: 8,
-    THREE_FOUR: 18,
-    ONE_FOUR: 6,
-    ONE_SIX: 4,
-    ONE_EIGHT: 3
-  };
-  return transferMap[layoutWidthEnum] || 12;
-}
-const hovering = ref();
-function bindHover(fieldItem) {
-  return {
-    onMouseenter: () => hovering.value = fieldItem,
-    onMouseleave: () => hovering.value = void 0,
-    "is-hovering": hovering.value === fieldItem
-  };
-}
-
-export { bindHover, layoutWidthEnum2Column };
+export { bindHover, layoutWidthEnum2Column } from './index2.js';

package/es/components/form-config/src/utils/index2.js

@@ -0,0 +1,26 @@
+import { ref } from 'vue';
+
+function layoutWidthEnum2Column(layoutWidthEnum) {
+  const transferMap = {
+    ALL_LINE: 24,
+    HALF_LINE: 12,
+    FIVE_SIX: 20,
+    TWO_THREE: 16,
+    ONE_THREE: 8,
+    THREE_FOUR: 18,
+    ONE_FOUR: 6,
+    ONE_SIX: 4,
+    ONE_EIGHT: 3
+  };
+  return transferMap[layoutWidthEnum] || 12;
+}
+const hovering = ref();
+function bindHover(fieldItem) {
+  return {
+    onMouseenter: () => hovering.value = fieldItem,
+    onMouseleave: () => hovering.value = void 0,
+    "is-hovering": hovering.value === fieldItem
+  };
+}
+
+export { bindHover, layoutWidthEnum2Column };

package/es/components/form-config/style/index.css

@@ -1,158 +1 @@
-.form-config {
-  display: flex;
-  justify-content: space-between;
-}
-.form-config__material {
-  padding: 16px;
-  box-sizing: border-box;
-  flex-shrink: 0;
-  border-radius: 8px;
-  width: 200px;
-}
-.form-config__materialHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 40px;
-}
-.form-config__materialContent {
-  padding: 16px;
-  box-sizing: border-box;
-  flex-shrink: 0;
-  border-radius: 8px;
-  border: 1px dashed rgba(128, 128, 128, 0.35);
-  overflow-y: auto;
-  max-height: var(--max-height);
-  min-height: 200px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-.form-config__materialContentItem {
-  cursor: move;
-  justify-content: flex-start;
-  grid-column: span var(--item-column) / span var(--item-column);
-}
-.form-config__displayWrapper {
-  padding: 16px;
-  box-sizing: border-box;
-  flex-shrink: 0;
-  border-radius: 8px;
-  min-width: 400px;
-  flex: 1;
-  padding: 16px 0;
-}
-.form-config__displayHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 40px;
-}
-.form-config__displayContent {
-  padding: 16px;
-  box-sizing: border-box;
-  flex-shrink: 0;
-  border-radius: 8px;
-  border: 1px dashed rgba(128, 128, 128, 0.35);
-  overflow-y: auto;
-  max-height: var(--max-height);
-  height: fit-content;
-  display: grid !important;
-  grid-template-columns: repeat(24, minmax(0px, 1fr));
-  gap: 8px;
-}
-.form-config__displayContentItem {
-  grid-column: span var(--item-column) / span var(--item-column);
-  position: relative;
-}
-.form-config__config {
-  padding: 16px;
-  box-sizing: border-box;
-  flex-shrink: 0;
-  border-radius: 8px;
-  width: 240px;
-}
-.form-config__configHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 40px;
-}
-.form-config__configContent {
-  padding: 16px;
-  box-sizing: border-box;
-  flex-shrink: 0;
-  border-radius: 8px;
-  border: 1px dashed rgba(128, 128, 128, 0.35);
-  overflow-y: auto;
-  border: none;
-  max-height: var(--max-height);
-}
-.form-config__renderer {
-  cursor: move;
-  width: 100%;
-  height: 100%;
-  justify-content: flex-start;
-}
-.form-config__renderer--default {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  padding: 8px 0;
-  box-sizing: border-box;
-  user-select: none;
-  position: relative;
-}
-.form-config__renderer--complex {
-  border: 1px dashed skyblue;
-  border-radius: 8px;
-  padding: 8px;
-}
-.form-config__renderer--complexHeader {
-  display: flex;
-  justify-content: center;
-  padding: 8px;
-  margin-top: -8px;
-  position: relative;
-}
-.form-config__renderer--complex--grid {
-  display: grid !important;
-  grid-template-columns: repeat(24, minmax(0px, 1fr));
-  gap: 8px;
-  grid-column: span var(--item-column) / span var(--item-column);
-}
-.form-config__renderer--complex--flex {
-  display: flex;
-}
-.form-config .is-disabled {
-  background: #e5e5e5 !important;
-}
-.form-config .is-required {
-  padding-left: 16px !important;
-}
-.form-config .is-required::before {
-  position: absolute;
-  content: '*';
-  left: 8px;
-  color: red;
-}
-.form-config .is-active {
-  color: #5585f5 !important;
-}
-.form-config .is-choosing {
-  box-shadow: #5585f5 0 0 0 2px !important;
-  opacity: 0.7;
-}
-.form-config .is-choosing-area {
-  background: rgba(128, 128, 128, 0.1);
-}
-.form-config [is-hovering='true'] .form-config__renderer--closeButton {
-  visibility: visible;
-}
-.form-config .form-config__renderer--closeButton {
-  position: absolute;
-  visibility: hidden;
-  top: 50%;
-  transform: translateY(-50%);
-  right: 4px;
-}
+.form-config{display:flex;justify-content:space-between}.form-config__material{border-radius:8px;box-sizing:border-box;flex-shrink:0;padding:16px;width:200px}.form-config__materialHeader{align-items:center;display:flex;height:40px;justify-content:space-between}.form-config__materialContent{border:1px dashed hsla(0,0%,50%,.35);border-radius:8px;box-sizing:border-box;display:flex;flex-direction:column;flex-shrink:0;gap:8px;max-height:var(--max-height);min-height:200px;overflow-y:auto;padding:16px}.form-config__materialContentItem{cursor:move;grid-column:span var(--item-column) /span var(--item-column);justify-content:flex-start}.form-config__displayWrapper{border-radius:8px;box-sizing:border-box;flex-shrink:0;flex:1;min-width:400px;padding:16px 0}.form-config__displayHeader{align-items:center;display:flex;height:40px;justify-content:space-between}.form-config__displayContent{border:1px dashed hsla(0,0%,50%,.35);border-radius:8px;box-sizing:border-box;display:grid!important;flex-shrink:0;gap:8px;grid-template-columns:repeat(24,minmax(0,1fr));height:fit-content;max-height:var(--max-height);overflow-y:auto;padding:16px}.form-config__displayContentItem{grid-column:span var(--item-column) /span var(--item-column);position:relative}.form-config__config{border-radius:8px;box-sizing:border-box;flex-shrink:0;padding:16px;width:240px}.form-config__configHeader{align-items:center;display:flex;height:40px;justify-content:space-between}.form-config__configContent{border:none;border-radius:8px;box-sizing:border-box;flex-shrink:0;max-height:var(--max-height);overflow-y:auto;padding:16px}.form-config__renderer{cursor:move;height:100%;justify-content:flex-start;width:100%}.form-config__renderer--default{align-items:center;box-sizing:border-box;display:flex;padding:8px 0;position:relative;user-select:none;width:100%}.form-config__renderer--complex{border:1px dashed skyblue;border-radius:8px;padding:8px}.form-config__renderer--complexHeader{display:flex;justify-content:center;margin-top:-8px;padding:8px;position:relative}.form-config__renderer--complex--grid{display:grid!important;gap:8px;grid-column:span var(--item-column) /span var(--item-column);grid-template-columns:repeat(24,minmax(0,1fr))}.form-config__renderer--complex--flex{display:flex}.form-config .is-disabled{background:#e5e5e5!important}.form-config .is-required{padding-left:16px!important}.form-config .is-required:before{color:red;content:"*";left:8px;position:absolute}.form-config .is-active{color:#5585f5!important}.form-config .is-choosing{box-shadow:0 0 0 2px #5585f5!important;opacity:.7}.form-config .is-choosing-area{background:hsla(0,0%,50%,.1)}.form-config [is-hovering=true] .form-config__renderer--closeButton{visibility:visible}.form-config .form-config__renderer--closeButton{position:absolute;right:4px;top:50%;transform:translateY(-50%);visibility:hidden}