@ibiz-template/vue3-components 0.7.41-alpha.37 → 0.7.41-alpha.39

package/es/util/inline-ai-util/inline-ai-util.mjs

@@ -0,0 +1,145 @@
+import { h, createApp } from 'vue';
+import ContextMenu from '@imengyu/vue3-context-menu';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { InlineAITextArea } from './inline-ai-textarea/inline-ai-textarea.mjs';
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class InLineAIUtil {
+  /**
+   * Creates an instance of InLineAIUtil.
+   * @memberof InLineAIUtil
+   */
+  constructor() {
+    __publicField(this, "currentApp", null);
+    __publicField(this, "container", null);
+    __publicField(this, "ns", useNamespace("inline-ai-container"));
+  }
+  /**
+   * 计算上下文菜单
+   * @param deACMode
+   * @param clickCallBack
+   * @returns
+   */
+  calcContextMenus(deACMode, clickCallBack) {
+    var _a, _b;
+    const menus = [];
+    if (!deACMode || !deACMode.deuiactionGroup || !deACMode.deuiactionGroup.uiactionGroupDetails)
+      return menus;
+    (_b = (_a = deACMode.deuiactionGroup) == null ? void 0 : _a.uiactionGroupDetails) == null ? void 0 : _b.forEach((item) => {
+      var _a2, _b2, _c;
+      const menuItem = {};
+      if (item.detailType === "DEUIACTION" && ((_a2 = item.uiactionId) == null ? void 0 : _a2.startsWith("inline"))) {
+        if (item.showCaption && item.caption) {
+          menuItem.label = item.caption;
+        }
+        if (item.sysImage && item.showIcon) {
+          menuItem.icon = h("iBizIcon", {
+            icon: item.sysImage
+          });
+        }
+        menuItem.clickClose = true;
+        const { uiactionId } = item;
+        if (uiactionId) {
+          menuItem.onClick = () => {
+            clickCallBack(uiactionId);
+          };
+        }
+        menus.push(menuItem);
+      } else if (item.detailType === "DEUIACTIONGROUP" && item.refUIActionGroup && ((_b2 = item.refUIActionGroup.id) == null ? void 0 : _b2.startsWith("inline"))) {
+        menuItem.label = item.refUIActionGroup.name;
+        const menuItems = (_c = item.refUIActionGroup.uiactionGroupDetails) == null ? void 0 : _c.filter((detail) => {
+          var _a3;
+          return detail.detailType === "DEUIACTION" && ((_a3 = detail.uiactionId) == null ? void 0 : _a3.startsWith("inline"));
+        }).map((detail) => {
+          return {
+            label: detail.showCaption ? detail.caption : void 0,
+            icon: detail.showIcon && detail.sysImage ? h("iBizIcon", {
+              icon: detail.sysImage
+            }) : void 0,
+            clickableWhenHasChildren: true,
+            onClick: () => {
+              ContextMenu.closeContextMenu();
+              clickCallBack(detail.uiactionId);
+            }
+          };
+        });
+        menuItem.children = menuItems;
+        menus.push(menuItem);
+      }
+    });
+    return menus;
+  }
+  /**
+   * 显示上下文菜单
+   * @param x 距离左侧距离
+   * @param y 距离上方距离
+   * @param menus 菜单集合
+   */
+  showContextMenus(x, y, menus) {
+    ContextMenu.showContextMenu({
+      x,
+      y,
+      customClass: this.ns.b("context-menu"),
+      items: menus
+    });
+  }
+  /**
+   * 销毁组件实例
+   */
+  destroyInlineAIComponent() {
+    if (this.currentApp && this.container) {
+      this.currentApp.unmount();
+      this.currentApp = null;
+    }
+    if (this.container && document.body.contains(this.container)) {
+      document.body.removeChild(this.container);
+      this.container = null;
+    }
+  }
+  /**
+   *  显示AI聊天组件
+   * @param selectText
+   * @param options
+   * @returns
+   */
+  showAIChat(context, params, data, selectText, deACMode, options) {
+    this.destroyInlineAIComponent();
+    this.container = document.createElement("div");
+    this.container.id = this.ns.b();
+    this.container.className = this.ns.b();
+    document.body.appendChild(this.container);
+    const { editor } = params;
+    const { insertText, replaceSelectionText, restoreSelection } = editor;
+    delete params.editor;
+    const unMountAIChat = () => {
+      this.destroyInlineAIComponent();
+    };
+    this.currentApp = createApp(InlineAITextArea, {
+      context,
+      params,
+      data,
+      content: selectText,
+      deACMode,
+      options,
+      insertText: insertText.bind(editor),
+      replaceSelectionText: replaceSelectionText.bind(editor),
+      restoreSelection: restoreSelection.bind(editor),
+      unMountAIChat
+    });
+    this.currentApp.mount(this.container);
+  }
+  /**
+   * 隐藏AI聊天组件
+   */
+  hideAIChat() {
+    this.destroyInlineAIComponent();
+  }
+}
+
+export { InLineAIUtil };

package/es/web-app/main.mjs

@@ -21,6 +21,7 @@ import { NotificationUtil } from '../util/notification-util/notification-util.mj
 import { LoadingUtil } from '../util/loading-util/loading-util.mjs';
 import { NoticeUtil } from '../util/notice-util/notice-util.mjs';
 import { OverlayController } from '../util/overlay-controller/overlay-controller.mjs';
+import { InLineAIUtil } from '../util/inline-ai-util/inline-ai-util.mjs';
 import { FullscreenUtil } from '../util/fullscreen/fullscreen-util.mjs';
 
 "use strict";
@@ -81,6 +82,7 @@ async function runApp(plugins, opts) {
   ibiz.loading = new LoadingUtil();
   ibiz.notice = new NoticeUtil();
   ibiz.overlay = new OverlayController();
+  ibiz.inLineAIUtil = new InLineAIUtil();
   ibiz.util.text.format = (value, code) => {
     return app.config.globalProperties.$textFormat(value, code);
   };

package/lib/control/form/form-detail/form-item/form-item-container/form-item-container.cjs

@@ -56,7 +56,7 @@ const IBizFormItemContainer = /* @__PURE__ */ vue.defineComponent({
           }, null);
       }
     };
-    const renderInputTip = () => {
+    const renderTipsIcon = () => {
       return vue.createVNode(vue.resolveComponent("el-tooltip"), {
         "effect": "light",
         "visible": visible.value,
@@ -66,16 +66,42 @@ const IBizFormItemContainer = /* @__PURE__ */ vue.defineComponent({
         "placement": labelPos === "RIGHT" ? "right" : "left"
       }, {
         default: () => {
-          return vue.createVNode("div", {
-            "class": [ns.em("label", "content"), ns.is("tooltip", enableInputTip)]
-          }, [enableInputTip && ibiz.config.form.showTipsIcon && vue.createVNode("ion-icon", {
+          return vue.createVNode("ion-icon", {
             "name": "bulb-outline",
             "class": ns.em("label", "icon")
-          }, null), sysImage && vue.createVNode(vue3Util.IBizIcon, {
+          }, null);
+        },
+        content: () => {
+          return vue.createVNode("div", {
+            "class": ns.em("popper", "content")
+          }, [vue.createVNode("div", {
+            "class": ns.em("popper", "tooltip")
+          }, [renderTipContent()]), c.state.inputTipUrl && vue.createVNode("a", {
+            "target": "_blank",
+            "href": c.state.inputTipUrl,
+            "title": ibiz.i18n.t("component.formItemContainer.more")
+          }, [ibiz.i18n.t("component.formItemContainer.more")])]);
+        }
+      });
+    };
+    const renderLabelWithoutTips = () => {
+      return vue.createVNode(vue.resolveComponent("el-tooltip"), {
+        "effect": "light",
+        "visible": visible.value,
+        "onUpdate:visible": ($event) => visible.value = $event,
+        "popper-class": [ns.e("popper"), ns.is(ibiz.config.tooltiprendermode.toLowerCase(), true)],
+        "disabled": !enableInputTip,
+        "placement": labelPos === "RIGHT" ? "right" : "left"
+      }, {
+        default: () => {
+          return vue.createVNode("div", {
+            "class": [ns.em("label", "content"), ns.is("tooltip", enableInputTip)]
+          }, [sysImage && vue.createVNode(vue3Util.IBizIcon, {
             "class": ns.em("label", "icon"),
             "icon": sysImage
           }, null), vue.createVNode("div", {
-            "class": ns.em("label", "text")
+            "class": ns.em("label", "text"),
+            "title": enableInputTip ? void 0 : core.showTitle(c.labelCaption)
           }, [c.labelCaption])]);
         },
         content: () => {
@@ -92,10 +118,18 @@ const IBizFormItemContainer = /* @__PURE__ */ vue.defineComponent({
       });
     };
     const renderLabel = () => {
+      const showTipsIcon = enableInputTip && ibiz.config.form.showTipsIcon;
       return vue.createVNode("div", {
-        "title": enableInputTip ? void 0 : core.showTitle(c.labelCaption),
         "class": [ns.e("label"), ...c.labelClass || []]
-      }, [renderInputTip()]);
+      }, [showTipsIcon && vue.createVNode("div", {
+        "class": [ns.em("label", "content"), ns.is("tooltip", enableInputTip)]
+      }, [renderTipsIcon(), sysImage && vue.createVNode(vue3Util.IBizIcon, {
+        "class": ns.em("label", "icon"),
+        "icon": sysImage
+      }, null), vue.createVNode("div", {
+        "class": ns.em("label", "text"),
+        "title": core.showTitle(c.labelCaption)
+      }, [c.labelCaption])]), !showTipsIcon && renderLabelWithoutTips()]);
     };
     return {
       ns,

package/lib/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/form-mdctrl-repeater.cjs

@@ -6,6 +6,7 @@ var vue3Util = require('@ibiz-template/vue3-util');
 var repeaterSingleForm = require('./repeater-single-form/repeater-single-form.cjs');
 var repeaterMultiForm = require('./repeater-multi-form/repeater-multi-form.cjs');
 var repeaterGrid = require('./repeater-grid/repeater-grid.cjs');
+var repeaterGrid2 = require('./repeater-grid2/repeater-grid2.cjs');
 
 "use strict";
 const FormMDCtrlRepeater = /* @__PURE__ */ vue.defineComponent({
@@ -27,6 +28,7 @@ const FormMDCtrlRepeater = /* @__PURE__ */ vue.defineComponent({
     };
   },
   render() {
+    var _a;
     const classNames = [this.ns.b()];
     switch (this.controller.repeaterStyle) {
       case "MultiForm":
@@ -36,6 +38,14 @@ const FormMDCtrlRepeater = /* @__PURE__ */ vue.defineComponent({
           "controller": this.controller
         }, null);
       case "Grid":
+        const gridStyle = (_a = this.controller.model.ctrlParams) == null ? void 0 : _a.gridStyle;
+        if (gridStyle === "style2") {
+          return vue.createVNode(repeaterGrid2.RepeaterGrid2, {
+            "class": classNames,
+            "controller": this.controller,
+            "onChange": this.onDataChange
+          }, null);
+        }
         return vue.createVNode(repeaterGrid.RepeaterGrid, {
           "class": classNames,
           "controller": this.controller,

package/lib/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-grid2/repeater-grid2.cjs

@@ -0,0 +1,311 @@
+'use strict';
+
+var vue = require('vue');
+var sortable_esm = require('../../../../../../node_modules/.pnpm/sortablejs@1.15.6/node_modules/sortablejs/modular/sortable.esm.cjs');
+var runtime = require('@ibiz-template/runtime');
+var qxUtil = require('qx-util');
+var vue3Util = require('@ibiz-template/vue3-util');
+var core = require('@ibiz-template/core');
+var formMdctrlRepeater_util = require('../form-mdctrl-repeater.util.cjs');
+require('./repeater-grid2.css');
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+const RepeaterGrid2 = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizRepeaterGrid2",
+  props: {
+    controller: {
+      type: runtime.FormMDCtrlRepeaterController,
+      required: true
+    }
+  },
+  emits: {
+    change: (_value) => true
+  },
+  setup(props, {
+    emit
+  }) {
+    var _a, _b;
+    const ns = vue3Util.useNamespace("repeater-grid2");
+    const formItems = [];
+    const tableRef = vue.ref();
+    const tableKey = vue.ref(qxUtil.createUUID());
+    const chunkSize = ((_a = props.controller.model.ctrlParams) == null ? void 0 : _a.chunkSize) ? Number((_b = props.controller.model.ctrlParams) == null ? void 0 : _b.chunkSize) : 100;
+    const {
+      renderItems,
+      loadMore,
+      updateTotalItems
+    } = formMdctrlRepeater_util.useLoadMore(props.controller.value, chunkSize);
+    core.recursiveIterate(props.controller.repeatedForm, (item) => {
+      var _a2;
+      if (item.detailType === "FORMITEM") {
+        if (((_a2 = item.editor) == null ? void 0 : _a2.editorType) !== "HIDDEN") {
+          formItems.push(item);
+        }
+      }
+    }, {
+      childrenFields: ["deformPages", "deformTabPages", "deformDetails"]
+    });
+    const onSingleValueChange = (value, index) => {
+      const arrData = [...props.controller.value || []];
+      arrData[index] = value;
+      emit("change", arrData);
+    };
+    const ctx = vue3Util.useCtx();
+    const formControllers = vue.reactive([]);
+    const addFormController = async (data = {}) => {
+      const formC = new runtime.EditFormController(props.controller.repeatedForm, props.controller.context, props.controller.params, ctx);
+      formC.state.isSimple = true;
+      await formC.created();
+      formC.setSimpleData(data);
+      formControllers.push(formC);
+      props.controller.setRepeaterController("".concat(formControllers.length - 1), formC);
+      formC.evt.on("onFormDataChange", (event) => {
+        const item = event.data[0];
+        const formData = item instanceof runtime.ControlVO ? item.clone() : {
+          ...item
+        };
+        const index = formControllers.indexOf(formC);
+        onSingleValueChange(formData, index);
+      });
+    };
+    vue.watch(() => props.controller.value, (newVal) => {
+      if (newVal && newVal.length > 0) {
+        newVal.forEach((item, index) => {
+          const formC = formControllers[index];
+          if (formC) {
+            const changeVal = item || {};
+            const find = Object.keys(formC.data).find((key) => {
+              return changeVal[key] !== formC.data[key];
+            });
+            if (find) {
+              formC.setSimpleData(changeVal);
+            }
+          } else {
+            addFormController(item);
+          }
+        });
+      }
+      updateTotalItems(newVal || []);
+    }, {
+      immediate: true,
+      deep: true
+    });
+    let sortable;
+    const rowDrop = () => {
+      var _a2, _b2;
+      const wrapper = (_b2 = (_a2 = tableRef.value) == null ? void 0 : _a2.$el) == null ? void 0 : _b2.querySelector(".el-table__body-wrapper tbody");
+      if (!wrapper || !props.controller.enableSort)
+        return;
+      sortable = sortable_esm.default.create(wrapper, {
+        animation: 150,
+        handle: ".".concat(ns.e("drag-icon")),
+        ghostClass: "".concat(ns.e("sortable-ghost")),
+        onEnd({
+          newIndex,
+          oldIndex
+        }) {
+          props.controller.dragChange(oldIndex, newIndex);
+          tableKey.value = qxUtil.createUUID();
+        }
+      });
+    };
+    vue.watch(() => tableRef.value, () => {
+      if (!props.controller.enableSort)
+        return;
+      tableRef.value ? rowDrop() : sortable == null ? void 0 : sortable.destroy();
+    });
+    vue.onUnmounted(() => sortable == null ? void 0 : sortable.destroy());
+    const renderRemoveBtn = (index) => {
+      if (ibiz.config.form.mdCtrlConfirmBeforeRemove) {
+        return vue.createVNode(vue.resolveComponent("el-popconfirm"), {
+          "title": ibiz.i18n.t("control.form.repeaterGrid.promptInformation"),
+          "confirm-button-text": ibiz.i18n.t("app.confirm"),
+          "cancel-button-text": ibiz.i18n.t("app.cancel"),
+          "onConfirm": () => {
+            props.controller.remove(index);
+            formControllers.splice(index, 1);
+          }
+        }, {
+          reference: () => {
+            return vue.createVNode("ion-icon", {
+              "name": "remove-outline",
+              "title": ibiz.i18n.t("app.delete"),
+              "class": ns.b("remove-btn")
+            }, null);
+          }
+        });
+      }
+      return vue.createVNode("ion-icon", {
+        "name": "remove-outline",
+        "title": ibiz.i18n.t("app.delete"),
+        "class": ns.b("remove-btn"),
+        "onClick": () => {
+          props.controller.remove(index);
+          formControllers.splice(index, 1);
+        }
+      }, null);
+    };
+    return {
+      ns,
+      tableRef,
+      tableKey,
+      formItems,
+      renderItems,
+      formControllers,
+      renderRemoveBtn,
+      loadMore
+    };
+  },
+  render() {
+    var _a;
+    const tableHeight = (_a = this.controller.model.layoutPos) == null ? void 0 : _a.height;
+    const heightObject = tableHeight ? {
+      height: tableHeight
+    } : {};
+    const isEmpty = this.renderItems.length === 0;
+    return vue.createVNode("div", {
+      "class": this.ns.b()
+    }, [vue.createVNode(vue.resolveComponent("el-table"), vue.mergeProps({
+      "ref": "tableRef",
+      "key": this.tableKey,
+      "show-header": true,
+      "class": this.ns.e("table"),
+      "data": isEmpty && this.controller.enableCreate ? [{}] : this.renderItems,
+      "cell-class-name": ({
+        columnIndex
+      }) => {
+        const shouldShowIndex = this.controller.enableSort ? columnIndex === 1 : columnIndex === 0;
+        return shouldShowIndex ? this.ns.b("index") : "";
+      }
+    }, heightObject), {
+      default: () => {
+        return [this.controller.enableSort && vue.createVNode(vue.resolveComponent("el-table-column"), {
+          "width": 26,
+          "type": "default"
+        }, {
+          default: () => {
+            if (isEmpty) {
+              return "";
+            }
+            return vue.createVNode("svg", {
+              "viewBox": "0 0 16 16",
+              "xmlns": "http://www.w3.org/2000/svg",
+              "height": "1em",
+              "width": "1em",
+              "class": this.ns.e("drag-icon"),
+              "preserveAspectRatio": "xMidYMid meet",
+              "focusable": "false"
+            }, [vue.createVNode("g", {
+              "stroke-width": "1",
+              "fill-rule": "evenodd"
+            }, [vue.createVNode("g", {
+              "transform": "translate(5 1)",
+              "fill-rule": "nonzero"
+            }, [vue.createVNode("path", {
+              "d": "M1 2a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zM1 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-4 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-4 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"
+            }, null)])])]);
+          }
+        }), vue.createVNode(vue.resolveComponent("el-table-column"), {
+          "type": "index",
+          "width": 66,
+          "align": "center"
+        }, {
+          default: (opts) => {
+            if (isEmpty) {
+              return "";
+            }
+            const {
+              $index
+            } = opts;
+            return vue.createVNode("span", null, [$index + 1]);
+          }
+        }), this.formItems.length > 0 && this.formItems.map((item) => {
+          const width = item.labelWidth;
+          let widthName = "width";
+          let columnWidth = "";
+          if (typeof width === "number") {
+            if (width === 1) {
+              widthName = "min-width";
+            }
+            columnWidth = "".concat(width, "px");
+          }
+          return vue.createVNode(vue.resolveComponent("el-table-column"), vue.mergeProps({
+            "label": item.caption,
+            "prop": item.id
+          }, {
+            [widthName]: columnWidth
+          }, {
+            "align": "center"
+          }), {
+            default: (opts) => {
+              if (isEmpty) {
+                return "";
+              }
+              const {
+                $index
+              } = opts;
+              const formC = vue.toRaw(this.formControllers[$index]);
+              if (!formC || !formC.state.isLoaded) {
+                return vue.createVNode("div", null, [ibiz.i18n.t("control.form.repeaterGrid.absentOrLoad")]);
+              }
+              const formItemC = formC.formItems.find((x) => x.name === item.id);
+              let editor = null;
+              if (!formItemC.editorProvider) {
+                editor = vue.createVNode(vue.resolveComponent("not-supported-editor"), {
+                  "modelData": item.editor
+                }, null);
+              } else {
+                const component = vue.resolveComponent(formItemC.editorProvider.formEditor);
+                editor = vue.h(component, {
+                  value: formItemC.value,
+                  data: formItemC.data,
+                  controller: formItemC.editor,
+                  disabled: formItemC.state.disabled,
+                  readonly: formItemC.state.readonly,
+                  onChange: (val, name) => {
+                    formItemC.setDataValue(val, name);
+                  }
+                });
+              }
+              return vue.createVNode(vue.resolveComponent("iBizGridEditItem"), {
+                "error": formItemC.state.error,
+                "required": formItemC.state.required
+              }, _isSlot(editor) ? editor : {
+                default: () => [editor]
+              });
+            }
+          });
+        }), (this.controller.enableCreate || this.controller.enableDelete) && vue.createVNode(vue.resolveComponent("el-table-column"), {
+          "width": 80,
+          "align": "center"
+        }, {
+          default: (opts) => {
+            const {
+              $index
+            } = opts;
+            return vue.createVNode("div", {
+              "class": this.ns.b("action-group")
+            }, [this.controller.enableCreate && vue.createVNode("ion-icon", {
+              "name": "add-outline",
+              "title": ibiz.i18n.t("app.add"),
+              "class": this.ns.b("add-btn"),
+              "onClick": () => {
+                this.controller.create(isEmpty ? 0 : $index + 1);
+              }
+            }, null), this.controller.enableDelete && !isEmpty && this.renderRemoveBtn($index)]);
+          }
+        })];
+      },
+      append: () => {
+        return [tableHeight && vue.withDirectives(vue.createVNode("div", {
+          "infinite-scroll-distance": 20
+        }, null), [[vue.resolveDirective("infinite-scroll"), () => this.loadMore()]])];
+      }
+    })]);
+  }
+});
+
+exports.RepeaterGrid2 = RepeaterGrid2;

package/lib/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-grid2/repeater-grid2.css

@@ -0,0 +1 @@
+.ibiz-repeater-grid2{--ibiz-repeater-grid2-row-height:57px;--ibiz-repeater-grid2-index-cell-padding:var(--ibiz-spacing-extra-tight);--ibiz-repeater-grid2-btn-size:var(--ibiz-width-icon-large);--ibiz-repeater-grid2-btn-color:var(--ibiz-color-text-2);--ibiz-repeater-grid2-btn-border:1px solid var(--ibiz-color-border);--ibiz-repeater-grid2-btn-margin-left:var(--ibiz-spacing-tight);--ibiz-repeater-grid2-btn-hover-color:var(--ibiz-color-primary-hover);--ibiz-repeater-grid2-btn-hover-border:1px solid var(--ibiz-color-primary-hover);position:relative;width:100%;--ibiz-grid-column-justify-content:center}.ibiz-repeater-grid2__drag-icon{cursor:move}.ibiz-repeater-grid2__sortable-ghost{opacity:.5}.ibiz-repeater-grid2 .el-table__row{height:var(--ibiz-repeater-grid2-row-height)}.ibiz-repeater-grid2-index .cell{padding:var(--ibiz-repeater-grid2-index-cell-padding)}.ibiz-repeater-grid2-action-group{display:flex;align-items:center;justify-content:center}.ibiz-repeater-grid2-action-group ion-icon{font-size:var(--ibiz-repeater-grid2-btn-size);color:var(--ibiz-repeater-grid2-btn-color);cursor:pointer;border:var(--ibiz-repeater-grid2-btn-border)}.ibiz-repeater-grid2-action-group ion-icon+ion-icon{margin-left:var(--ibiz-repeater-grid2-btn-margin-left)}.ibiz-repeater-grid2-action-group ion-icon:hover{color:var(--ibiz-repeater-grid2-btn-hover-color);border:var(--ibiz-repeater-grid2-btn-hover-border)}