@ibiz-template/vue3-components 0.7.40-alpha.9 → 0.7.41-alpha.0

package/lib/editor/data-picker/ibiz-transfer-picker/components/transfer/transfer-util.cjs

@@ -0,0 +1,108 @@
+'use strict';
+
+var vue = require('vue');
+var _interface = require('./interface.cjs');
+
+"use strict";
+const usePropsAlias = (props) => {
+  const initProps = {
+    label: "label",
+    key: "key",
+    disabled: "disabled"
+  };
+  return vue.computed(() => ({
+    ...initProps,
+    ...props.props
+  }));
+};
+const useComputedData = (props) => {
+  const propsAlias = usePropsAlias(props);
+  const dataObj = vue.computed(
+    () => props.data.reduce(
+      // eslint-disable-next-line no-return-assign, no-param-reassign
+      (o, cur) => (o[cur[propsAlias.value.key]] = cur) && o,
+      {}
+    )
+  );
+  const sourceData = vue.computed(
+    () => props.data.filter(
+      (item) => !props.modelValue.includes(item[propsAlias.value.key])
+    )
+  );
+  const targetData = vue.computed(() => {
+    if (props.targetOrder === "original") {
+      return props.data.filter(
+        (item) => props.modelValue.includes(item[propsAlias.value.key])
+      );
+    }
+    return props.modelValue.reduce((arr, cur) => {
+      const val = dataObj.value[cur];
+      if (val) {
+        arr.push(val);
+      }
+      return arr;
+    }, []);
+  });
+  return {
+    sourceData,
+    targetData
+  };
+};
+const useCheckedChange = (checkedState, emit) => {
+  const onSourceCheckedChange = (val, movedKeys) => {
+    checkedState.leftChecked = val;
+    if (!movedKeys)
+      return;
+    emit(_interface.LEFT_CHECK_CHANGE_EVENT, val, movedKeys);
+  };
+  const onTargetCheckedChange = (val, movedKeys) => {
+    checkedState.rightChecked = val;
+    if (!movedKeys)
+      return;
+    emit(_interface.RIGHT_CHECK_CHANGE_EVENT, val, movedKeys);
+  };
+  return {
+    onSourceCheckedChange,
+    onTargetCheckedChange
+  };
+};
+const useMove = (props, checkedState, emit) => {
+  const propsAlias = usePropsAlias(props);
+  const _emit = (value, direction, movedKeys) => {
+    emit(_interface.UPDATE_MODEL_EVENT, value);
+    emit(_interface.CHANGE_EVENT, value, direction, movedKeys);
+  };
+  const addToLeft = () => {
+    const currentValue = props.modelValue.slice();
+    checkedState.rightChecked.forEach((item) => {
+      const index = currentValue.indexOf(item);
+      if (index > -1) {
+        currentValue.splice(index, 1);
+      }
+    });
+    _emit(currentValue, "left", checkedState.rightChecked);
+  };
+  const addToRight = () => {
+    let currentValue = props.modelValue.slice();
+    const itemsToBeMoved = props.data.filter((item) => {
+      const itemKey = item[propsAlias.value.key];
+      return checkedState.leftChecked.includes(itemKey) && !props.modelValue.includes(itemKey);
+    }).map((item) => item[propsAlias.value.key]);
+    currentValue = props.targetOrder === "unshift" ? itemsToBeMoved.concat(currentValue) : currentValue.concat(itemsToBeMoved);
+    if (props.targetOrder === "original") {
+      currentValue = props.data.filter(
+        (item) => currentValue.includes(item[propsAlias.value.key])
+      ).map((item) => item[propsAlias.value.key]);
+    }
+    _emit(currentValue, "right", checkedState.leftChecked);
+  };
+  return {
+    addToLeft,
+    addToRight
+  };
+};
+
+exports.useCheckedChange = useCheckedChange;
+exports.useComputedData = useComputedData;
+exports.useMove = useMove;
+exports.usePropsAlias = usePropsAlias;

package/lib/editor/data-picker/ibiz-transfer-picker/components/transfer/transfer.cjs

@@ -0,0 +1,148 @@
+'use strict';
+
+var vue = require('vue');
+var ramda = require('ramda');
+var vue3Util = require('@ibiz-template/vue3-util');
+var transferUtil = require('./transfer-util.cjs');
+var _interface = require('./interface.cjs');
+var transferPanel = require('../transfer-panel/transfer-panel.cjs');
+var icon = require('./icon.cjs');
+require('./transfer.css');
+
+"use strict";
+const TransferSelect = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizTransfer",
+  props: _interface.transferProps,
+  emits: _interface.transferEmits,
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const ns = vue3Util.useNamespace("transfer");
+    const checkedState = vue.reactive({
+      leftChecked: [],
+      rightChecked: []
+    });
+    const propsAlias = transferUtil.usePropsAlias(props);
+    const {
+      sourceData,
+      targetData
+    } = transferUtil.useComputedData(props);
+    const {
+      onSourceCheckedChange,
+      onTargetCheckedChange
+    } = transferUtil.useCheckedChange(checkedState, emit);
+    const {
+      addToLeft,
+      addToRight
+    } = transferUtil.useMove(props, checkedState, emit);
+    const leftPanel = vue.ref();
+    const rightPanel = vue.ref();
+    const clearQuery = (which) => {
+      switch (which) {
+        case "left":
+          leftPanel.value.query = "";
+          break;
+        case "right":
+          rightPanel.value.query = "";
+          break;
+        default:
+          break;
+      }
+    };
+    const onLeftAcSearch = (query) => {
+      emit("leftAcSearch", query);
+    };
+    const hasButtonTexts = vue.computed(() => props.buttonTexts.length === 2);
+    const leftPanelTitle = vue.computed(() => props.titles[0] || "\u53EF\u9009\u5217\u8868");
+    const rightPanelTitle = vue.computed(() => props.titles[1] || "\u5DF2\u9009\u5217\u8868");
+    const panelFilterPlaceholder = vue.computed(() => props.filterPlaceholder || "\u8BF7\u8F93\u5165");
+    const optionRender = vue.computed(() => (option) => {
+      var _a;
+      if (props.renderContent)
+        return props.renderContent(vue.h, option);
+      const defaultSlotVNodes = (((_a = slots.default) == null ? void 0 : _a.call(slots, {
+        option
+      })) || []).filter((node) => node.type !== Comment);
+      if (defaultSlotVNodes.length) {
+        return defaultSlotVNodes;
+      }
+      return vue.h("span", option[propsAlias.value.label] || option[propsAlias.value.key]);
+    });
+    return {
+      ns,
+      targetData,
+      rightPanelTitle,
+      optionRender,
+      panelFilterPlaceholder,
+      leftPanelTitle,
+      sourceData,
+      leftPanel,
+      rightPanel,
+      hasButtonTexts,
+      checkedState,
+      addToLeft,
+      addToRight,
+      clearQuery,
+      onLeftAcSearch,
+      onSourceCheckedChange,
+      onTargetCheckedChange
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "class": this.ns.b()
+    }, [vue.createVNode(transferPanel.TransferPanel, {
+      "ref": "leftPanel",
+      "data": this.sourceData,
+      "readonly": this.readonly,
+      "optionRender": this.optionRender,
+      "placeholder": this.panelFilterPlaceholder,
+      "title": this.leftPanelTitle,
+      "filterable": this.filterable,
+      "format": this.format,
+      "enableAcSearch": this.enableRemoteSearch,
+      "loading": this.loading,
+      "filterMethod": this.filterMethod,
+      "defaultChecked": this.leftDefaultChecked,
+      "onAcSearch": this.onLeftAcSearch,
+      "props": this.props,
+      "onCheckedChange": this.onSourceCheckedChange
+    }, null), vue.createVNode("div", {
+      "class": this.ns.e("buttons")
+    }, [vue.createVNode(vue.resolveComponent("el-button"), {
+      "class": [this.ns.e("button"), this.ns.is("with-texts", this.hasButtonTexts)],
+      "type": "primary",
+      "disabled": !!ramda.isEmpty(this.checkedState.rightChecked) || this.readonly,
+      "onClick": this.addToLeft
+    }, {
+      default: () => [vue.createVNode(vue.resolveComponent("el-icon"), null, {
+        default: () => icon.arrowLeft()
+      }), this.buttonTexts[0] !== void 0 ? vue.createVNode("span", null, [this.buttonTexts[0]]) : null]
+    }), vue.createVNode(vue.resolveComponent("el-button"), {
+      "class": [this.ns.e("button"), this.ns.is("with-texts", this.hasButtonTexts)],
+      "type": "primary",
+      "disabled": !!ramda.isEmpty(this.checkedState.leftChecked) || this.readonly,
+      "onClick": this.addToRight
+    }, {
+      default: () => [this.buttonTexts[1] !== void 0 ? vue.createVNode("span", null, [this.buttonTexts[1]]) : null, vue.createVNode(vue.resolveComponent("el-icon"), null, {
+        default: () => icon.arrowRight()
+      })]
+    })]), vue.createVNode(transferPanel.TransferPanel, {
+      "ref": "rightPanel",
+      "data": this.targetData,
+      "readonly": this.readonly,
+      "optionRender": this.optionRender,
+      "placeholder": this.panelFilterPlaceholder,
+      "filterable": this.filterable,
+      "format": this.format,
+      "filterMethod": this.filterMethod,
+      "title": this.rightPanelTitle,
+      "defaultChecked": this.rightDefaultChecked,
+      "props": this.props,
+      "onCheckedChange": this.onTargetCheckedChange
+    }, null)]);
+  }
+});
+
+exports.TransferSelect = TransferSelect;

package/lib/editor/data-picker/ibiz-transfer-picker/components/transfer/transfer.css

@@ -0,0 +1 @@
+.ibiz-transfer__buttons{display:inline-block;padding:0 1.875rem;vertical-align:middle}.ibiz-transfer__button{vertical-align:top}.ibiz-transfer__button:nth-child(2){margin:0 0 0 10px}.ibiz-transfer__button i,.ibiz-transfer__button span{font-size:var(--ibiz-font-size-header-6)}.ibiz-transfer__button .el-icon{font-size:var(--ibiz-font-size-regular)}

package/lib/editor/data-picker/ibiz-transfer-picker/components/transfer-panel/icon.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var vue = require('vue');
+
+"use strict";
+const Search = () => vue.createVNode("svg", {
+  "xmlns": "http://www.w3.org/2000/svg",
+  "viewBox": "0 0 1024 1024"
+}, [vue.createVNode("path", {
+  "fill": "currentColor",
+  "d": "m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704"
+}, null)]);
+
+exports.Search = Search;

package/lib/editor/data-picker/ibiz-transfer-picker/components/transfer-panel/interface.cjs

@@ -0,0 +1,58 @@
+'use strict';
+
+var lodashEs = require('lodash-es');
+
+"use strict";
+const CHECKED_CHANGE_EVENT = "checkedChange";
+const AC_SEARCH = "acSearch";
+const transferCheckedChangeFn = (value, movedKeys) => [value, movedKeys].every(lodashEs.isArray) || lodashEs.isArray(value) && lodashEs.isNil(movedKeys);
+const transferPanelProps = {
+  data: {
+    type: Array,
+    default: () => []
+  },
+  optionRender: {
+    type: Function
+  },
+  placeholder: String,
+  title: String,
+  filterable: Boolean,
+  enableAcSearch: Boolean,
+  format: {
+    type: Object,
+    default: () => ({})
+  },
+  filterMethod: {
+    type: Function
+  },
+  defaultChecked: {
+    type: Array,
+    default: () => []
+  },
+  props: {
+    type: Object,
+    default: () => ({
+      label: "label",
+      key: "key",
+      disabled: "disabled"
+    })
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  }
+};
+const transferPanelEmits = {
+  [CHECKED_CHANGE_EVENT]: transferCheckedChangeFn,
+  [AC_SEARCH]: (query) => query
+};
+
+exports.AC_SEARCH = AC_SEARCH;
+exports.CHECKED_CHANGE_EVENT = CHECKED_CHANGE_EVENT;
+exports.transferCheckedChangeFn = transferCheckedChangeFn;
+exports.transferPanelEmits = transferPanelEmits;
+exports.transferPanelProps = transferPanelProps;

package/lib/editor/data-picker/ibiz-transfer-picker/components/transfer-panel/transfer-panel-util.cjs

@@ -0,0 +1,133 @@
+'use strict';
+
+var vue = require('vue');
+var lodashEs = require('lodash-es');
+var _interface = require('./interface.cjs');
+
+"use strict";
+const usePropsAlias = (props) => {
+  const initProps = {
+    label: "label",
+    key: "key",
+    disabled: "disabled"
+  };
+  return vue.computed(() => ({
+    ...initProps,
+    ...props.props
+  }));
+};
+const useCheck = (props, panelState, emit) => {
+  const propsAlias = usePropsAlias(props);
+  const filteredData = vue.ref([]);
+  const checkableData = vue.computed(
+    () => filteredData.value.filter((item) => {
+      return !item[propsAlias.value.disabled];
+    })
+  );
+  const checkedSummary = vue.computed(() => {
+    const checkedLength = panelState.checked.length;
+    const dataLength = props.data.length;
+    const { noChecked, hasChecked } = props.format;
+    if (noChecked && hasChecked) {
+      return checkedLength > 0 ? hasChecked.replace(/\${checked}/g, checkedLength.toString()).replace(/\${total}/g, dataLength.toString()) : noChecked.replace(/\${total}/g, dataLength.toString());
+    }
+    return "".concat(checkedLength, "/").concat(dataLength);
+  });
+  const isIndeterminate = vue.computed(() => {
+    const checkedLength = panelState.checked.length;
+    return checkedLength > 0 && checkedLength < checkableData.value.length;
+  });
+  const handleFilteredData = (value = "") => {
+    filteredData.value = props.data.filter((item) => {
+      if (lodashEs.isFunction(props.filterMethod)) {
+        return props.filterMethod(value, item);
+      }
+      const label = String(
+        item[propsAlias.value.label] || item[propsAlias.value.key]
+      );
+      return label.toLowerCase().includes(value.toLowerCase());
+    });
+  };
+  const onInputChange = async (value) => {
+    if (props.enableAcSearch) {
+      emit("acSearch", value);
+    } else {
+      handleFilteredData(value);
+    }
+  };
+  const updateAllChecked = () => {
+    const checkableDataKeys = checkableData.value.map(
+      (item) => item[propsAlias.value.key]
+    );
+    panelState.allChecked = checkableDataKeys.length > 0 && checkableDataKeys.every(
+      (item) => panelState.checked.includes(item)
+    );
+  };
+  const handleAllCheckedChange = (value) => {
+    panelState.checked = value ? checkableData.value.map((item) => item[propsAlias.value.key]) : [];
+  };
+  vue.watch(
+    () => panelState.checked,
+    (val, oldVal) => {
+      updateAllChecked();
+      if (panelState.checkChangeByUser) {
+        const movedKeys = val.concat(oldVal).filter((v) => !val.includes(v) || !oldVal.includes(v));
+        emit(_interface.CHECKED_CHANGE_EVENT, val, movedKeys);
+      } else {
+        emit(_interface.CHECKED_CHANGE_EVENT, val);
+        panelState.checkChangeByUser = true;
+      }
+    }
+  );
+  vue.watch(checkableData, () => {
+    updateAllChecked();
+  });
+  vue.watch(
+    () => props.data,
+    () => {
+      handleFilteredData(panelState.query);
+      const checked = [];
+      const filteredDataKeys = filteredData.value.map(
+        (item) => item[propsAlias.value.key]
+      );
+      panelState.checked.forEach((item) => {
+        if (filteredDataKeys.includes(item)) {
+          checked.push(item);
+        }
+      });
+      panelState.checkChangeByUser = false;
+      panelState.checked = checked;
+    }
+  );
+  vue.watch(
+    () => props.defaultChecked,
+    (val) => {
+      const checked = [];
+      const checkableDataKeys = props.data.map(
+        (item) => item[propsAlias.value.key]
+      );
+      val.forEach((item) => {
+        if (checkableDataKeys.includes(item)) {
+          checked.push(item);
+        }
+      });
+      panelState.checkChangeByUser = false;
+      panelState.checked = checked;
+    },
+    {
+      immediate: true
+    }
+  );
+  return {
+    filteredData,
+    checkableData,
+    checkedSummary,
+    isIndeterminate,
+    onInputChange,
+    updateAllChecked,
+    handleAllCheckedChange
+  };
+};
+
+exports.useCheck = useCheck;
+exports.usePropsAlias = usePropsAlias;

package/lib/editor/data-picker/ibiz-transfer-picker/components/transfer-panel/transfer-panel.cjs

@@ -0,0 +1,118 @@
+'use strict';
+
+var vue = require('vue');
+var ramda = require('ramda');
+var vue3Util = require('@ibiz-template/vue3-util');
+var _interface = require('./interface.cjs');
+var transferPanelUtil = require('./transfer-panel-util.cjs');
+var icon = require('./icon.cjs');
+require('./transfer-panel.css');
+
+"use strict";
+const TransferPanel = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizTransferPanel",
+  props: _interface.transferPanelProps,
+  emits: _interface.transferPanelEmits,
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const ns = vue3Util.useNamespace("transfer-panel");
+    const panelState = vue.reactive({
+      checked: [],
+      allChecked: false,
+      query: "",
+      checkChangeByUser: true
+    });
+    const propsAlias = transferPanelUtil.usePropsAlias(props);
+    const {
+      filteredData,
+      checkedSummary,
+      isIndeterminate,
+      onInputChange,
+      handleAllCheckedChange
+    } = transferPanelUtil.useCheck(props, panelState, emit);
+    const hasNoMatch = vue.computed(() => !ramda.isEmpty(panelState.query) && ramda.isEmpty(filteredData.value));
+    const hasFooter = vue.computed(() => !(slots.default && ramda.isEmpty(slots.default()[0].children)));
+    const {
+      checked,
+      allChecked,
+      query
+    } = vue.toRefs(panelState);
+    return {
+      ns,
+      query,
+      allChecked,
+      checkedSummary,
+      hasNoMatch,
+      hasFooter,
+      checked,
+      filteredData,
+      propsAlias,
+      isIndeterminate,
+      onInputChange,
+      handleAllCheckedChange
+    };
+  },
+  render() {
+    var _a, _b;
+    return vue.createVNode("div", {
+      "class": this.ns.b()
+    }, [vue.createVNode("p", {
+      "class": this.ns.e("header")
+    }, [vue.createVNode(vue.resolveComponent("el-checkbox"), {
+      "modelValue": this.allChecked,
+      "onUpdate:modelValue": ($event) => this.allChecked = $event,
+      "disabled": this.readonly,
+      "indeterminate": this.isIndeterminate,
+      "validateEvent": false,
+      "onChange": this.handleAllCheckedChange
+    }, {
+      default: () => [this.title, vue.createVNode("span", null, [this.checkedSummary])]
+    })]), vue.createVNode("div", {
+      "class": [this.ns.e("body"), this.ns.is("with-footer", this.hasFooter)]
+    }, [this.filterable ? vue.createVNode(vue.resolveComponent("el-input"), {
+      "modelValue": this.query,
+      "onUpdate:modelValue": ($event) => this.query = $event,
+      "readonly": this.readonly,
+      "class": this.ns.e("filter"),
+      "size": "default",
+      "placeholder": this.placeholder,
+      "prefixIcon": () => icon.Search(),
+      "clearable": true,
+      "validateEvent": false,
+      "onInput": this.onInputChange
+    }, null) : null, vue.withDirectives(vue.createVNode("div", {
+      "class": [this.ns.e("content"), this.ns.is("filterable", this.filterable)]
+    }, [!this.hasNoMatch && !ramda.isEmpty(this.data) ? vue.createVNode(vue.resolveComponent("el-checkbox-group"), {
+      "modelValue": this.checked,
+      "onUpdate:modelValue": ($event) => this.checked = $event,
+      "validateEvent": false,
+      "disabled": this.readonly,
+      "class": [this.ns.e("list")]
+    }, {
+      default: () => {
+        return this.filteredData.map((item) => {
+          return vue.createVNode(vue.resolveComponent("el-checkbox"), {
+            "class": this.ns.e("item"),
+            "key": item[this.propsAlias.key],
+            "label": item[this.propsAlias.key],
+            "disabled": !!item[this.propsAlias.disabled],
+            "validateEvent": false
+          }, {
+            default: () => {
+              var _a2;
+              return [(_a2 = this.optionRender) == null ? void 0 : _a2.call(this, item)];
+            }
+          });
+        });
+      }
+    }) : vue.createVNode("div", {
+      "class": this.ns.e("empty")
+    }, [this.$slots.empty ? (_b = (_a = this.$slots).empty) == null ? void 0 : _b.call(_a) : vue.createVNode(vue.resolveComponent("iBizNoData"), {
+      "class": this.ns.em("empty", "no-data")
+    }, null)])]), [[vue.resolveDirective("loading"), this.enableAcSearch && this.loading]])])]);
+  }
+});
+
+exports.TransferPanel = TransferPanel;

package/lib/editor/data-picker/ibiz-transfer-picker/components/transfer-panel/transfer-panel.css

@@ -0,0 +1 @@
+.ibiz-transfer-panel{--ibiz-transfer-panel-border-color:var(--ibiz-editor-default-border-color);--ibiz-transfer-panel-border-radius:var(--ibiz-border-radius-extra-small);--ibiz-transfer-panel-width:200px;--ibiz-transfer-panel-header-height:40px;--ibiz-transfer-panel-header-bg-color:var(--ibiz-color-fill-0);--ibiz-transfer-panel-footer-height:40px;--ibiz-transfer-panel-body-height:278px;--ibiz-transfer-panel-item-height:30px;--ibiz-transfer-panel-filter-height:32px;--ibiz-transfer-panel-spacing-base:var(--ibiz-spacing-base);position:relative;box-sizing:border-box;display:inline-block;width:var(--ibiz-transfer-panel-width);max-height:100%;overflow:hidden;text-align:left;vertical-align:middle;background:var(--ibiz-color-bg-2)}.ibiz-transfer-panel__header{box-sizing:border-box;display:flex;align-items:center;height:var(--ibiz-transfer-panel-header-height);padding-left:var(--ibiz-transfer-panel-spacing-base);margin:0;color:var(--ibiz-color-text-1);background:var(--ibiz-transfer-panel-header-bg-color);border:1px solid var(--ibiz-transfer-panel-border-color);border-top-left-radius:var(--ibiz-transfer-panel-border-radius);border-top-right-radius:var(--ibiz-transfer-panel-border-radius)}.ibiz-transfer-panel__header .el-checkbox{position:relative;display:flex;align-items:center;width:100%}.ibiz-transfer-panel__header .el-checkbox .el-checkbox__label{font-size:var(--ibiz-font-size-header-5);font-weight:400;color:var(--ibiz-color-text-1)}.ibiz-transfer-panel__header .el-checkbox .el-checkbox__label span{position:absolute;top:50%;right:var(--ibiz-transfer-panel-spacing-base);font-size:var(--ibiz-font-size-regular);font-weight:400;color:var(--ibiz-color-text-3);transform:translate3d(0,-50%,0)}.ibiz-transfer-panel__body{height:var(--ibiz-transfer-panel-body-height);overflow:hidden;border-right:1px solid var(--ibiz-transfer-panel-border-color);border-bottom:1px solid var(--ibiz-transfer-panel-border-color);border-left:1px solid var(--ibiz-transfer-panel-border-color);border-bottom-right-radius:var(--ibiz-transfer-panel-border-radius);border-bottom-left-radius:var(--ibiz-transfer-panel-border-radius)}.ibiz-transfer-panel__filter{--el-input-height:var(--ibiz-transfer-panel-filter-height);box-sizing:border-box;padding:var(--ibiz-transfer-panel-spacing-base);text-align:center}.ibiz-transfer-panel__filter .el-icon{font-size:inherit}.ibiz-transfer-panel__content{width:100%;height:var(--ibiz-transfer-panel-body-height);padding:6px 0}.ibiz-transfer-panel__content.is-filterable{height:calc(100% - var(--ibiz-transfer-panel-filter-height) - var(--ibiz-transfer-panel-spacing-base) * 2);padding-top:0}.ibiz-transfer-panel__list{box-sizing:border-box;height:100%;margin:0;overflow:auto;list-style:none}.ibiz-transfer-panel__item{height:var(--ibiz-transfer-panel-item-height);padding-left:var(--ibiz-transfer-panel-spacing-base);line-height:var(--ibiz-transfer-panel-item-height)}.ibiz-transfer-panel__item.el-checkbox{--el-checkbox-font-size:var(--ibiz-font-size-regular);display:flex;align-items:center;color:var(--ibiz-color-text-0)}.ibiz-transfer-panel__item.el-checkbox .el-checkbox__label{box-sizing:border-box;display:block;width:100%;padding-left:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-transfer-panel__item .el-checkbox__input{position:absolute}.ibiz-transfer-panel__empty{padding:6px 15px 0;margin:0;text-align:center}.ibiz-transfer-panel__empty .ibiz-no-data.el-empty{justify-content:flex-start;padding:0}.ibiz-transfer-panel__empty .ibiz-no-data .el-empty__image{width:52px}.ibiz-transfer-panel .el-checkbox__inner{width:1em;height:1em;border-radius:3px}.ibiz-transfer-panel .el-checkbox__label{padding-left:var(--ibiz-spacing-tight)}