@ibiz-template/vue3-components 0.7.41-alpha.2 → 0.7.41-alpha.21

package/lib/control/tab-exp-panel/tab-exp-panel.cjs

@@ -5,6 +5,7 @@ var vue3Util = require('@ibiz-template/vue3-util');
 require('./tab-exp-panel.css');
 var runtime = require('@ibiz-template/runtime');
 var vueRouter = require('vue-router');
+var ramda = require('ramda');
 
 "use strict";
 function _isSlot(s) {
@@ -53,6 +54,19 @@ const TabExpPanelControl = /* @__PURE__ */ vue.defineComponent({
     var _a;
     const c = vue3Util.useControlController((...args) => new runtime.TabExpPanelController(...args));
     const ns = vue3Util.useNamespace("control-".concat(c.model.controlType.toLowerCase()));
+    const counterData = vue.ref({});
+    const fn = (counter) => {
+      counterData.value = counter;
+    };
+    c.evt.on("onCreated", () => {
+      if (c.counter) {
+        c.counter.onChange(fn, true);
+      }
+    });
+    vue.onUnmounted(() => {
+      var _a2;
+      (_a2 = c.counter) == null ? void 0 : _a2.offChange(fn);
+    });
     const handleTabChange = () => {
       c.handleTabChange();
     };
@@ -86,6 +100,7 @@ const TabExpPanelControl = /* @__PURE__ */ vue.defineComponent({
       c,
       ns,
       tabPosition,
+      counterData,
       handleTabChange
     };
   },
@@ -104,6 +119,7 @@ const TabExpPanelControl = /* @__PURE__ */ vue.defineComponent({
         "tabPosition": this.tabPosition,
         "onTabChange": this.handleTabChange
       }, _isSlot(_slot = tabPages.map((tab) => {
+        const counterNum = tab.counterId ? this.counterData[tab.counterId] : void 0;
         return vue.createVNode(vue.resolveComponent("el-tab-pane"), {
           "class": [this.ns.e("tab-item")],
           "label": tab.caption,
@@ -114,7 +130,10 @@ const TabExpPanelControl = /* @__PURE__ */ vue.defineComponent({
               "class": [...tab.class]
             }, [this.c.isShowIcon && vue.createVNode(vue.resolveComponent("iBizIcon"), {
               "icon": tab.sysImage
-            }, null), this.c.isShowCaption && tab.caption]);
+            }, null), this.c.isShowCaption && tab.caption, !ramda.isNil(counterNum) && vue.createVNode(vue.resolveComponent("iBizBadge"), {
+              "class": this.ns.e("counter"),
+              "value": counterNum
+            }, null)]);
           }
         });
       })) ? _slot : {

package/lib/control/tab-exp-panel/tab-exp-panel.css

@@ -1 +1 @@
-.ibiz-control-tabexppanel{--ibiz-control-tabexppanel-color:var(--ibiz-color-text-2);--ibiz-control-tabexppanel-hover-color:var(--ibiz-color-text-0);--ibiz-control-tabexppanel-active-color:var(--ibiz-color-primary);--ibiz-control-tabexppanel-bar-color:var(--ibiz-color-primary)}.ibiz-control-tabexppanel .el-tabs .el-tabs__header{margin:var(--ibiz-spacing-none)}.ibiz-control-tabexppanel .el-tabs .el-tabs__header .el-tabs__nav-wrap{margin:var(--ibiz-spacing-none)}.ibiz-control-tabexppanel .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__active-bar{background-color:var(--ibiz-control-tabexppanel-bar-color)}.ibiz-control-tabexppanel .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item{font-size:var(--ibiz-font-size-regular);color:var(--ibiz-control-tabexppanel-color)}.ibiz-control-tabexppanel .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item:hover{color:var(--ibiz-control-tabexppanel-hover-color)}.ibiz-control-tabexppanel .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item.is-active{color:var(--ibiz-control-tabexppanel-active-color)}.ibiz-control-tabexppanel .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item.is-top:last-child{padding-right:var(--ibiz-spacing-none)}.ibiz-control-tabexppanel .el-tabs.el-tabs--bottom,.ibiz-control-tabexppanel .el-tabs.el-tabs--top{padding-left:var(--ibiz-spacing-base)}.ibiz-control-tabexppanel .el-tabs__item{padding:var(--ibiz-spacing-base)}
+.ibiz-control-tabexppanel{--ibiz-control-tabexppanel-color:var(--ibiz-color-text-2);--ibiz-control-tabexppanel-hover-color:var(--ibiz-color-text-0);--ibiz-control-tabexppanel-active-color:var(--ibiz-color-primary);--ibiz-control-tabexppanel-bar-color:var(--ibiz-color-primary)}.ibiz-control-tabexppanel .el-tabs .el-tabs__header{margin:var(--ibiz-spacing-none)}.ibiz-control-tabexppanel .el-tabs .el-tabs__header .el-tabs__nav-wrap{margin:var(--ibiz-spacing-none)}.ibiz-control-tabexppanel .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__active-bar{background-color:var(--ibiz-control-tabexppanel-bar-color)}.ibiz-control-tabexppanel .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item{font-size:var(--ibiz-font-size-regular);color:var(--ibiz-control-tabexppanel-color)}.ibiz-control-tabexppanel .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item:hover{color:var(--ibiz-control-tabexppanel-hover-color)}.ibiz-control-tabexppanel .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item.is-active{color:var(--ibiz-control-tabexppanel-active-color)}.ibiz-control-tabexppanel .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item.is-top:last-child{padding-right:var(--ibiz-spacing-none)}.ibiz-control-tabexppanel .el-tabs.el-tabs--bottom,.ibiz-control-tabexppanel .el-tabs.el-tabs--top{padding-left:var(--ibiz-spacing-base)}.ibiz-control-tabexppanel .el-tabs__item{padding:var(--ibiz-spacing-base)}.ibiz-control-tabexppanel__counter{margin-left:var(--ibiz-spacing-tight)}

package/lib/control/toolbar/toolbar.cjs

@@ -55,7 +55,7 @@ const ToolbarControl = /* @__PURE__ */ vue.defineComponent({
       required: true
     },
     /**
-     * @description 绘制模式
+     * @description 绘制模式，可选值为DESIGN、RUNTIME，默认值为RUNTIME
      */
     runMode: {
       type: String,
@@ -135,121 +135,59 @@ const ToolbarControl = /* @__PURE__ */ vue.defineComponent({
         })]);
       });
     };
-    const renderSubmenu = (item) => {
-      const detoolbarItems = item.detoolbarItems || [];
-      const curVisible = c.state.buttonsState[item.id].visible;
-      const curDisabled = c.state.buttonsState[item.id].disabled;
-      if (!curVisible) {
+    const renderEmbedGroupDetail = (item, detail) => {
+      var _a2, _b;
+      let _slot2;
+      const actionId = detail.uiactionId;
+      const visible = (_a2 = c.state.buttonsState[detail.id]) == null ? void 0 : _a2.visible;
+      const provider = c.itemProviders[detail.id];
+      if (!visible) {
         return null;
       }
-      const ploading = detoolbarItems.findIndex((item2) => {
-        var _a2;
-        return (_a2 = c.state.buttonsState[item2.id]) == null ? void 0 : _a2.loading;
-      }) !== -1;
-      const pvisible = detoolbarItems.findIndex((item2) => {
-        var _a2;
-        return ((_a2 = c.state.buttonsState[item2.id]) == null ? void 0 : _a2.visible) === true;
-      }) !== -1;
-      if (!pvisible) {
-        return null;
+      if (provider) {
+        const component = vue.resolveComponent(provider.component);
+        return vue.h(component, {
+          key: detail.id,
+          class: [ns.e("item")],
+          item,
+          controller: c
+        });
       }
-      const pdisabled = curDisabled || detoolbarItems.findIndex((item2) => {
-        var _a2;
-        return ((_a2 = c.state.buttonsState[item2.id]) == null ? void 0 : _a2.disabled) === false;
-      }) === -1;
-      const groupButtonStyle = item.buttonStyle || "";
-      return vue.createVNode(vue.resolveComponent("el-sub-menu"), {
-        "class": [ns.b("submenu"), ns.em("item", groupButtonStyle.toLowerCase()), calcCssName(item)],
-        "index": item.id,
-        "disabled": pdisabled,
-        "title": core.showTitle(item.tooltip),
-        "popper-class": [ns.b("submenu-popper"), ns.bm("submenu-popper", toolbarStyle), ns.em("submenu-popper", groupButtonStyle.toLowerCase()), ns.bm("submenu-popper", calcCssName(item)), calcCssName(item)]
+      const buttonType = (_b = detail.buttonStyle) == null ? void 0 : _b.toLowerCase();
+      if (actionId === "exportexcel" || actionId === "gridview_exportaction") {
+        return vue.createVNode(exportExcel.IBizExportExcel, {
+          "class": [ns.e("menu-exportexcel"), ns.em("item", buttonType), calcCssName(detail)],
+          "mode": "menu",
+          "item": detail,
+          "btnContent": (barItem) => btnContent(barItem, c.state),
+          "size": btnSize.value,
+          "controller": c,
+          "onExportExcel": (e, data) => {
+            handleActionClick(detail, e, data);
+          }
+        }, null);
+      }
+      return vue.createVNode(vue.resolveComponent("el-menu-item"), {
+        "class": [ns.is("loading", c.state.buttonsState[detail.id].loading), ns.em("item", buttonType), calcCssName(detail)],
+        "index": "menuitem".concat(detail.id),
+        "disabled": c.state.buttonsState[detail.id].disabled,
+        "title": core.showTitle(detail.caption)
       }, {
-        default: () => {
-          return detoolbarItems.map((item2) => {
-            var _a2, _b;
-            const actionId = item2.uiactionId;
-            const visible = (_a2 = c.state.buttonsState[item2.id]) == null ? void 0 : _a2.visible;
-            const provider = c.itemProviders[item2.id];
-            if (!visible) {
-              return null;
-            }
-            if (provider) {
-              const component = vue.resolveComponent(provider.component);
-              return vue.h(component, {
-                key: item2.id,
-                class: [ns.e("item")],
-                item,
-                controller: c
-              });
-            }
-            if (item2.itemType === "SEPERATOR") {
+        default: () => [vue.createVNode(vue.resolveComponent("el-button"), {
+          "loading": c.state.buttonsState[detail.id].loading,
+          "onClick": (e) => {
+            if (!detail.uiactionId)
               return;
-            }
-            if (item2.itemType === "RAWITEM") {
-              return vue.createVNode(vue.resolveComponent("el-menu-item"), {
-                "index": "menuitem".concat(item2.id),
-                "title": core.showTitle(item2.tooltip)
-              }, {
-                default: () => [vue.createVNode(vue.resolveComponent("iBizRawItem"), {
-                  "rawItem": item2,
-                  "content": item2.rawItem.content,
-                  "class": ns.b("submenu-rawitem"),
-                  "onClick": (e) => handleClick(item2, e)
-                }, null)]
-              });
-            }
-            if (item2.itemType === "DEUIACTION") {
-              let _slot2;
-              const buttonType = (_b = item2.buttonStyle) == null ? void 0 : _b.toLowerCase();
-              if (actionId === "exportexcel" || actionId === "gridview_exportaction") {
-                return vue.createVNode(exportExcel.IBizExportExcel, {
-                  "class": [ns.e("menu-exportexcel"), ns.em("item", buttonType), calcCssName(item2)],
-                  "mode": "menu",
-                  "item": item2,
-                  "btnContent": (barItem) => btnContent(barItem, c.state),
-                  "size": btnSize.value,
-                  "controller": c,
-                  "onExportExcel": (e, data) => {
-                    handleClick(item2, e, data);
-                  }
-                }, null);
-              }
-              return vue.createVNode(vue.resolveComponent("el-menu-item"), {
-                "class": [ns.is("loading", c.state.buttonsState[item2.id].loading), ns.em("item", buttonType), calcCssName(item2)],
-                "index": "menuitem".concat(item2.id),
-                "disabled": c.state.buttonsState[item2.id].disabled,
-                "title": core.showTitle(item2.tooltip),
-                "onClick": (e) => handleClick(item2, e)
-              }, {
-                default: () => [vue.createVNode(vue.resolveComponent("el-button"), {
-                  "loading": c.state.buttonsState[item2.id].loading
-                }, _isSlot(_slot2 = btnContent(item2, c.state)) ? _slot2 : {
-                  default: () => [_slot2]
-                })]
-              });
-            }
-            if (item2.itemType === "ITEMS") {
-              return renderSubmenu(item2);
-            }
-            return null;
-          });
-        },
-        title: () => {
-          let _slot3;
-          return vue.createVNode(vue.resolveComponent("el-button"), {
-            "loading": ploading,
-            "disabled": pdisabled,
-            "type": buttonUtil.convertBtnType(groupButtonStyle)
-          }, _isSlot(_slot3 = btnContent(item, c.state)) ? _slot3 : {
-            default: () => [_slot3]
-          });
-        }
+            handleActionClick(detail, e);
+          }
+        }, _isSlot(_slot2 = btnContent(detail, c.state)) ? _slot2 : {
+          default: () => [_slot2]
+        })]
       });
     };
     const renderActionButton = (detail, type) => {
       if (c.state.buttonsState[detail.id].visible) {
-        let _slot4;
+        let _slot3;
         return vue.createVNode(vue.resolveComponent("el-button"), {
           "size": btnSize.value,
           "class": calcCssName(detail),
@@ -258,25 +196,25 @@ const ToolbarControl = /* @__PURE__ */ vue.defineComponent({
           "loading": c.state.buttonsState[detail.id].loading,
           "disabled": c.state.buttonsState[detail.id].disabled,
           "onClick": (e) => handleActionClick(detail, e)
-        }, _isSlot(_slot4 = btnContent(detail, c.state)) ? _slot4 : {
-          default: () => [_slot4]
+        }, _isSlot(_slot3 = btnContent(detail, c.state)) ? _slot3 : {
+          default: () => [_slot3]
         });
       }
       return null;
     };
     const renderDropdownItem = (detail) => {
       if (c.state.buttonsState[detail.id].visible) {
-        let _slot5;
+        let _slot4;
         const disabled = c.state.buttonsState[detail.id].disabled;
         return vue.createVNode(vue.resolveComponent("el-dropdown-item"), {
           "class": [ns2.be("dropdown-popper", "dropdown-item"), ns2.is("disabled", disabled), ns.em("item", buttonUtil.convertBtnType(detail.buttonStyle))]
-        }, _isSlot(_slot5 = renderActionButton(detail)) ? _slot5 : {
-          default: () => [_slot5]
+        }, _isSlot(_slot4 = renderActionButton(detail)) ? _slot4 : {
+          default: () => [_slot4]
         });
       }
       return null;
     };
-    const renderActionGroupItems = (item) => {
+    const renderActionGroupItems = (item, isEmbed) => {
       const {
         uiactionGroup
       } = item;
@@ -286,14 +224,37 @@ const ToolbarControl = /* @__PURE__ */ vue.defineComponent({
         } = uiactionGroup;
         const enableDropdown = uiactionGroupDetails.length > 0;
         const groupButtonStyle = item.buttonStyle || "";
+        if (isEmbed) {
+          const curDisabled = c.state.buttonsState[item.id].disabled;
+          const pdisabled = curDisabled || uiactionGroupDetails.findIndex((item2) => {
+            var _a2;
+            return ((_a2 = c.state.buttonsState[item2.id]) == null ? void 0 : _a2.disabled) === false;
+          }) === -1;
+          return vue.createVNode(vue.resolveComponent("el-sub-menu"), {
+            "class": [ns.b("submenu"), ns.be("submenu", "groupdetails"), ns.em("item", groupButtonStyle.toLowerCase()), calcCssName(item)],
+            "index": item.id,
+            "disabled": pdisabled,
+            "title": core.showTitle(item.tooltip),
+            "popper-class": [ns.b("submenu-popper"), ns.em("submenu-popper", "groupdetails"), ns.bm("submenu-popper", toolbarStyle), ns.em("submenu-popper", groupButtonStyle.toLowerCase()), ns.bm("submenu-popper", calcCssName(item)), calcCssName(item)]
+          }, {
+            default: () => {
+              return uiactionGroupDetails.map((detail) => {
+                return renderEmbedGroupDetail(item, detail);
+              });
+            },
+            title: () => {
+              return renderEmbedGroupDetail(item, item);
+            }
+          });
+        }
         return vue.createVNode(vue.resolveComponent("el-dropdown"), {
           "popper-class": [ns2.b("dropdown-popper"), ns2.bm("dropdown-popper", toolbarStyle), ns2.em("dropdown-popper", groupButtonStyle.toLowerCase()), ns2.bm("dropdown-popper", calcCssName(item))]
         }, {
           default: () => renderActionButton(item),
           dropdown: () => {
-            let _slot6;
-            return enableDropdown && vue.createVNode(vue.resolveComponent("el-dropdown-menu"), null, _isSlot(_slot6 = uiactionGroupDetails.map((detail) => renderDropdownItem(detail))) ? _slot6 : {
-              default: () => [_slot6]
+            let _slot5;
+            return enableDropdown && vue.createVNode(vue.resolveComponent("el-dropdown-menu"), null, _isSlot(_slot5 = uiactionGroupDetails.map((detail) => renderDropdownItem(detail))) ? _slot5 : {
+              default: () => [_slot5]
             });
           }
         });
@@ -310,7 +271,7 @@ const ToolbarControl = /* @__PURE__ */ vue.defineComponent({
       }
       return -1;
     };
-    const renderActionGroupItemx = (item) => {
+    const renderActionGroupItemx = (item, isEmbed) => {
       const {
         uiactionGroup
       } = item;
@@ -323,7 +284,26 @@ const ToolbarControl = /* @__PURE__ */ vue.defineComponent({
           const firstItem = uiactionGroupDetails[firstIndex];
           const remainders = uiactionGroupDetails.slice(firstIndex + 1).filter((_item) => !!c.state.buttonsState[_item.id].visible);
           const enableDropdown = remainders.length > 0;
-          const groupButtonStyle = item.buttonStyle || "";
+          let groupButtonStyle = item.buttonStyle || "";
+          if (isEmbed) {
+            groupButtonStyle = firstItem.buttonStyle || "";
+            return vue.createVNode(vue.resolveComponent("el-sub-menu"), {
+              "class": [ns.b("submenu"), ns.be("submenu", "groupdetails"), ns.em("item", groupButtonStyle.toLowerCase()), calcCssName(firstItem)],
+              "index": firstItem.id,
+              "disabled": c.state.buttonsState[firstItem.id].disabled,
+              "title": core.showTitle(firstItem.tooltip),
+              "popper-class": [ns.b("submenu-popper"), ns.be("submenu-popper", "groupdetails"), ns.bm("submenu-popper", toolbarStyle), ns.em("submenu-popper", groupButtonStyle.toLowerCase()), ns.bm("submenu-popper", calcCssName(firstItem)), calcCssName(firstItem)]
+            }, {
+              default: () => {
+                return remainders.map((detail) => {
+                  return renderEmbedGroupDetail(item, detail);
+                });
+              },
+              title: () => {
+                return renderEmbedGroupDetail(item, firstItem);
+              }
+            });
+          }
           return vue.createVNode(vue.resolveComponent("el-dropdown"), {
             "split-button": enableDropdown,
             "type": buttonUtil.convertBtnType(groupButtonStyle),
@@ -331,9 +311,9 @@ const ToolbarControl = /* @__PURE__ */ vue.defineComponent({
           }, {
             default: () => renderActionButton(firstItem, buttonUtil.convertBtnType(groupButtonStyle)),
             dropdown: () => {
-              let _slot7;
-              return enableDropdown && vue.createVNode(vue.resolveComponent("el-dropdown-menu"), null, _isSlot(_slot7 = remainders.map((detail) => renderDropdownItem(detail))) ? _slot7 : {
-                default: () => [_slot7]
+              let _slot6;
+              return enableDropdown && vue.createVNode(vue.resolveComponent("el-dropdown-menu"), null, _isSlot(_slot6 = remainders.map((detail) => renderDropdownItem(detail))) ? _slot6 : {
+                default: () => [_slot6]
               });
             }
           });
@@ -341,7 +321,7 @@ const ToolbarControl = /* @__PURE__ */ vue.defineComponent({
       }
       return null;
     };
-    const renderActionGroupItem = (item) => {
+    const renderActionGroupItem = (item, isEmbed) => {
       const {
         uiactionGroup
       } = item;
@@ -349,25 +329,145 @@ const ToolbarControl = /* @__PURE__ */ vue.defineComponent({
         const {
           uiactionGroupDetails
         } = uiactionGroup;
+        if (isEmbed) {
+          return uiactionGroupDetails.map((detail) => {
+            return renderEmbedGroupDetail(item, detail);
+          });
+        }
         return uiactionGroupDetails.map((detail) => vue.createVNode("div", {
           "class": [ns2.e("item-deuiaction"), ns.em("item", buttonUtil.convertBtnType(detail.buttonStyle))]
         }, [renderActionButton(detail)]));
       }
       return null;
     };
-    const renderActionGroup = (item) => {
+    const renderActionGroup = (item, isEmbed = false) => {
       const {
         groupExtractMode
       } = item;
       switch (groupExtractMode) {
         case "ITEMS":
-          return renderActionGroupItems(item);
+          return renderActionGroupItems(item, isEmbed);
         case "ITEMX":
-          return renderActionGroupItemx(item);
+          return renderActionGroupItemx(item, isEmbed);
         case "ITEM":
         default:
-          return renderActionGroupItem(item);
+          return renderActionGroupItem(item, isEmbed);
+      }
+    };
+    const renderSubmenu = (item) => {
+      const detoolbarItems = item.detoolbarItems || [];
+      const curVisible = c.state.buttonsState[item.id].visible;
+      const curDisabled = c.state.buttonsState[item.id].disabled;
+      if (!curVisible) {
+        return null;
+      }
+      const ploading = detoolbarItems.findIndex((item2) => {
+        var _a2;
+        return (_a2 = c.state.buttonsState[item2.id]) == null ? void 0 : _a2.loading;
+      }) !== -1;
+      const pvisible = detoolbarItems.findIndex((item2) => {
+        var _a2;
+        return ((_a2 = c.state.buttonsState[item2.id]) == null ? void 0 : _a2.visible) === true;
+      }) !== -1;
+      const pdisabled = curDisabled || detoolbarItems.findIndex((item2) => {
+        var _a2;
+        return ((_a2 = c.state.buttonsState[item2.id]) == null ? void 0 : _a2.disabled) === false;
+      }) === -1;
+      if (item.uiactionGroup && item.uiactionGroup.uiactionGroupDetails && item.uiactionGroup.uiactionGroupDetails.length > 0) {
+        return renderActionGroup(item, true);
+      }
+      if (!pvisible) {
+        return null;
       }
+      const groupButtonStyle = item.buttonStyle || "";
+      return vue.createVNode(vue.resolveComponent("el-sub-menu"), {
+        "class": [ns.b("submenu"), ns.em("item", groupButtonStyle.toLowerCase()), calcCssName(item)],
+        "index": item.id,
+        "disabled": pdisabled,
+        "title": core.showTitle(item.tooltip),
+        "popper-class": [ns.b("submenu-popper"), ns.bm("submenu-popper", toolbarStyle), ns.em("submenu-popper", groupButtonStyle.toLowerCase()), ns.bm("submenu-popper", calcCssName(item)), calcCssName(item)]
+      }, {
+        default: () => {
+          return detoolbarItems.map((item2) => {
+            var _a2, _b;
+            const actionId = item2.uiactionId;
+            const visible = (_a2 = c.state.buttonsState[item2.id]) == null ? void 0 : _a2.visible;
+            const provider = c.itemProviders[item2.id];
+            if (!visible) {
+              return null;
+            }
+            if (provider) {
+              const component = vue.resolveComponent(provider.component);
+              return vue.h(component, {
+                key: item2.id,
+                class: [ns.e("item")],
+                item,
+                controller: c
+              });
+            }
+            if (item2.itemType === "SEPERATOR") {
+              return;
+            }
+            if (item2.itemType === "RAWITEM") {
+              return vue.createVNode(vue.resolveComponent("el-menu-item"), {
+                "index": "menuitem".concat(item2.id),
+                "title": core.showTitle(item2.tooltip)
+              }, {
+                default: () => [vue.createVNode(vue.resolveComponent("iBizRawItem"), {
+                  "rawItem": item2,
+                  "content": item2.rawItem.content,
+                  "class": ns.b("submenu-rawitem"),
+                  "onClick": (e) => handleClick(item2, e)
+                }, null)]
+              });
+            }
+            if (item2.itemType === "DEUIACTION") {
+              let _slot7;
+              const buttonType = (_b = item2.buttonStyle) == null ? void 0 : _b.toLowerCase();
+              if (actionId === "exportexcel" || actionId === "gridview_exportaction") {
+                return vue.createVNode(exportExcel.IBizExportExcel, {
+                  "class": [ns.e("menu-exportexcel"), ns.em("item", buttonType), calcCssName(item2)],
+                  "mode": "menu",
+                  "item": item2,
+                  "btnContent": (barItem) => btnContent(barItem, c.state),
+                  "size": btnSize.value,
+                  "controller": c,
+                  "onExportExcel": (e, data) => {
+                    handleClick(item2, e, data);
+                  }
+                }, null);
+              }
+              return vue.createVNode(vue.resolveComponent("el-menu-item"), {
+                "class": [ns.is("loading", c.state.buttonsState[item2.id].loading), ns.em("item", buttonType), calcCssName(item2)],
+                "index": "menuitem".concat(item2.id),
+                "disabled": c.state.buttonsState[item2.id].disabled,
+                "title": core.showTitle(item2.tooltip),
+                "onClick": (e) => handleClick(item2, e)
+              }, {
+                default: () => [vue.createVNode(vue.resolveComponent("el-button"), {
+                  "loading": c.state.buttonsState[item2.id].loading
+                }, _isSlot(_slot7 = btnContent(item2, c.state)) ? _slot7 : {
+                  default: () => [_slot7]
+                })]
+              });
+            }
+            if (item2.itemType === "ITEMS") {
+              return renderSubmenu(item2);
+            }
+            return null;
+          });
+        },
+        title: () => {
+          let _slot8;
+          return vue.createVNode(vue.resolveComponent("el-button"), {
+            "loading": ploading,
+            "disabled": pdisabled,
+            "type": buttonUtil.convertBtnType(groupButtonStyle)
+          }, _isSlot(_slot8 = btnContent(item, c.state)) ? _slot8 : {
+            default: () => [_slot8]
+          });
+        }
+      });
     };
     const renderToolbarItem = (item) => {
       var _a2, _b;
@@ -406,7 +506,7 @@ const ToolbarControl = /* @__PURE__ */ vue.defineComponent({
         }, null)]);
       }
       if (item.itemType === "DEUIACTION") {
-        let _slot8;
+        let _slot9;
         const actionId = item.uiactionId;
         const buttonStyle = item.buttonStyle;
         if (actionId === "exportexcel" || actionId === "gridview_exportaction") {
@@ -441,12 +541,12 @@ const ToolbarControl = /* @__PURE__ */ vue.defineComponent({
           "loading": c.state.buttonsState[itemId].loading,
           "disabled": c.state.buttonsState[itemId].disabled,
           "onClick": (e) => handleClick(item, e)
-        }, _isSlot(_slot8 = btnContent(item, c.state)) ? _slot8 : {
-          default: () => [_slot8]
+        }, _isSlot(_slot9 = btnContent(item, c.state)) ? _slot9 : {
+          default: () => [_slot9]
         })]);
       }
       if (item.itemType === "ITEMS") {
-        let _slot9;
+        let _slot10;
         const groupItem = item;
         const groupButtonStyle = groupItem.buttonStyle || "";
         if (groupItem.groupExtractMode && groupItem.uiactionGroup) {
@@ -460,8 +560,8 @@ const ToolbarControl = /* @__PURE__ */ vue.defineComponent({
           "class": [ns.e("menu"), ns.em("menu", groupButtonStyle.toLowerCase()), calcCssName(item)],
           "ellipsis": false,
           "menu-trigger": "hover"
-        }, _isSlot(_slot9 = renderSubmenu(item)) ? _slot9 : {
-          default: () => [_slot9]
+        }, _isSlot(_slot10 = renderSubmenu(item)) ? _slot10 : {
+          default: () => [_slot10]
         });
       }
       return null;

package/lib/control/toolbar/toolbar.css

@@ -1 +1 @@
-@charset "UTF-8";.ibiz-control-toolbar{--ibiz-control-toolbar-item-color:var(--ibiz-color-primary-text);--ibiz-control-toolbar-item-bg-color:var(--ibiz-color-primary);--ibiz-control-toolbar-item-margin:0 var(--ibiz-spacing-extra-tight);--ibiz-control-toolbar-item-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);--ibiz-control-toolbar-item-disabled-button:rgba(var(--ibiz-grey-4), 0.5);--ibiz-control-toolbar-icon-max-width:var(--ibiz-width-icon-medium);--ibiz-control-toolbar-icon-max-height:var(--ibiz-width-icon-medium);--ibiz-control-toolbar-separator-color:var(--ibiz-color-fill-2);--ibiz-control-toolbar-menu-height:32px;--ibiz-control-toolbar-text-margin:0 0 0 var(--ibiz-spacing-extra-tight);display:flex;align-items:center}.ibiz-control-toolbar__item{display:flex;align-items:center;margin:var(--ibiz-control-toolbar-item-margin);overflow:hidden}.ibiz-control-toolbar__item .el-button{display:flex;align-items:center;justify-content:center;padding:var(--ibiz-control-toolbar-item-padding)}.ibiz-control-toolbar__item .el-button.is-disabled{background-color:var(--ibiz-control-toolbar-item-disabled-button)}.ibiz-control-toolbar__item .el-button>span{display:flex;align-items:center;justify-content:center;pointer-events:none;font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-toolbar-icon-max-width);height:var(--ibiz-control-toolbar-icon-max-height)}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-icon .ibiz-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-icon i{font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-icon img{display:inline-block;width:100%;height:100%}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-icon+.ibiz-toolbar-item-text{margin:var(--ibiz-control-toolbar-text-margin)}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-counter{margin-left:var(--ibiz-spacing-super-tight)}.ibiz-control-toolbar__item.is-loading .el-button .ibiz-icon{display:none}.ibiz-control-toolbar__item-separator{color:var(--ibiz-control-toolbar-separator-color)}.ibiz-control-toolbar__item-separator+.ibiz-control-toolbar__item-separator,.ibiz-control-toolbar__item-separator:first-child{display:none}.ibiz-control-toolbar__menu.el-menu{height:var(--ibiz-control-toolbar-menu-height);margin:var(--ibiz-control-toolbar-item-margin);border:none}.ibiz-control-toolbar__menu .el-sub-menu.is-disabled .el-sub-menu__title{opacity:1}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title{display:flex;align-items:center;justify-content:center;padding:0;font-size:var(--ibiz-font-size-regular);color:var(--ibiz-control-toolbar-item-color);background-color:var(--ibiz-control-toolbar-item-bg-color);border-bottom:none;border-radius:var(--ibiz-border-radius-small)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-sub-menu__icon-arrow{display:none}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button{display:flex;align-items:center;justify-content:center}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span{display:flex;align-items:center;justify-content:center;font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-toolbar-icon-max-width);height:var(--ibiz-control-toolbar-icon-max-height)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-icon .ibiz-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-icon i{font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-icon img{display:inline-block;width:100%;height:100%}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-icon+.ibiz-toolbar-item-text{margin:var(--ibiz-control-toolbar-text-margin)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-counter{margin-left:var(--ibiz-spacing-super-tight)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title>span{display:flex;align-items:center;justify-content:center;line-height:1}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title:hover{color:var(--ibiz-color-primary-hover-text);background-color:var(--ibiz-color-primary-hover)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu.is-active .el-sub-menu__title{color:var(--ibiz-color-primary-text)}.ibiz-control-toolbar-submenu-popper{--ibiz-control-toolbar-item-color:var(--ibiz-color-primary-text);--ibiz-control-toolbar-item-bg-color:var(--ibiz-color-primary);--ibiz-control-toolbar-item-margin:0 var(--ibiz-spacing-extra-tight);--ibiz-control-toolbar-item-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);--ibiz-control-toolbar-item-disabled-button:rgba(var(--ibiz-grey-4), 0.5);--ibiz-control-toolbar-icon-max-width:var(--ibiz-width-icon-medium);--ibiz-control-toolbar-icon-max-height:var(--ibiz-width-icon-medium);--ibiz-control-toolbar-separator-color:var(--ibiz-color-fill-2);--ibiz-control-toolbar-menu-height:32px;--ibiz-control-toolbar-text-margin:0 0 0 var(--ibiz-spacing-extra-tight);color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary)}.ibiz-control-toolbar-submenu-popper .el-menu .el-sub-menu.is-disabled .el-sub-menu__title{opacity:1}.ibiz-control-toolbar-submenu-popper .el-menu .ibiz-control-toolbar-submenu .el-sub-menu__title{padding:0 10px;font-size:var(--ibiz-font-size-regular);color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary)}.ibiz-control-toolbar-submenu-popper .el-menu .ibiz-control-toolbar-submenu .el-sub-menu__title:hover{color:var(--ibiz-color-primary-hover-text);background-color:var(--ibiz-color-primary-hover)}.ibiz-control-toolbar-submenu-popper .el-menu .ibiz-control-toolbar-submenu.is-active .el-sub-menu__title{color:var(--ibiz-color-primary-text)}.ibiz-control-toolbar-submenu-popper .el-menu .ibiz-control-toolbar-submenu-rawitem{color:var(--ibiz-color-primary-text)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item{font-size:var(--ibiz-font-size-regular);color:var(--ibiz-color-primary-text)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-toolbar-icon-max-width);height:var(--ibiz-control-toolbar-icon-max-height)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-icon .ibiz-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-icon i{font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-icon img{display:inline-block;width:100%;height:100%}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-icon+.ibiz-toolbar-item-text{margin:var(--ibiz-control-toolbar-text-margin)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-counter{margin-left:var(--ibiz-spacing-super-tight)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item.is-active{color:var(--ibiz-color-primary-text)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item:hover{color:var(--ibiz-color-primary-hover-text);background-color:var(--ibiz-color-primary-hover)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .el-button{justify-content:flex-start;width:100%;padding:0;--el-button-active-bg-color:transparent;--el-button-hover-bg-color:transparent;--el-button-bg-color:transparent;--el-mask-color-extra-light:transparent}.ibiz-control-toolbar-actions{display:flex;margin:var(--ibiz-control-toolbar-item-margin);white-space:normal;visibility:visible}.ibiz-control-toolbar-actions__extract-mode-itemx .el-button-group{display:flex;white-space:normal}.ibiz-control-toolbar-actions__extract-mode-itemx .el-button-group>.el-button{padding:var(--ibiz-spacing-none)}.ibiz-control-toolbar-actions__extract-mode-itemx .el-button-group>.el-button:nth-child(2):focus-visible{outline:0;outline-offset:0}.ibiz-control-toolbar-actions__item-deuiaction{display:flex;align-items:center;margin:var(--ibiz-control-toolbar-item-margin);overflow:hidden}.ibiz-control-toolbar-actions__item-deuiaction:first-child{margin-left:0}.ibiz-control-toolbar-actions__item-deuiaction:last-child{margin-right:0}.ibiz-control-toolbar-actions .el-button{display:flex;align-items:center;justify-content:center;padding:var(--ibiz-control-toolbar-item-padding);pointer-events:auto}.ibiz-control-toolbar-actions .el-button.is-disabled{background-color:var(--ibiz-control-toolbar-item-disabled-button)}.ibiz-control-toolbar-actions .el-button>span{display:flex;align-items:center;justify-content:center;pointer-events:none;font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar-actions .el-button>span .ibiz-toolbar-item-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-toolbar-icon-max-width);height:var(--ibiz-control-toolbar-icon-max-height)}.ibiz-control-toolbar-actions .el-button>span .ibiz-toolbar-item-icon .ibiz-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ibiz-control-toolbar-actions .el-button>span .ibiz-toolbar-item-icon i{font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar-actions .el-button>span .ibiz-toolbar-item-icon img{display:inline-block;width:100%;height:100%}.ibiz-control-toolbar-actions .el-button>span .ibiz-toolbar-item-icon+.ibiz-toolbar-item-text{margin:var(--ibiz-control-toolbar-text-margin)}.ibiz-control-toolbar-actions .el-button>span .ibiz-toolbar-item-counter{margin-left:var(--ibiz-spacing-super-tight)}.ibiz-control-toolbar-actions-dropdown-popper{--el-popover-padding:var(--ibiz-spacing-none);min-width:200px;--ibiz-control-toolbar-actions-popover-button-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);--ibiz-control-toolbar-actions-dropdown-item-height:36px}.ibiz-control-toolbar-actions-dropdown-popper__dropdown-item{height:var(--ibiz-control-toolbar-actions-dropdown-item-height)}.ibiz-control-toolbar-actions-dropdown-popper.is-disabled{display:none}.ibiz-control-toolbar-actions-dropdown-popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu__item{padding:var(--ibiz-spacing-none)}.ibiz-control-toolbar-actions-dropdown-popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu__item.is-disabled{background-color:transparent;opacity:.25}.ibiz-control-toolbar-actions-dropdown-popper .el-button{--el-button-active-bg-color:transparent;--el-button-hover-bg-color:transparent;--el-button-bg-color:transparent;--el-mask-color-extra-light:transparent;display:block;width:100%;padding:var(--ibiz-control-toolbar-actions-popover-button-padding);margin:var(--ibiz-spacing-none);color:var(--ibiz-color-primary-text);text-align:left;background-color:transparent;border-radius:0}.ibiz-control-toolbar-actions-dropdown-popper .el-button:hover{color:var(--ibiz-color-primary-text);background-color:transparent}.ibiz-control-toolbar-actions-dropdown-popper .el-button>span{font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar-actions-dropdown-popper .el-button>span .ibiz-toolbar-item-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-toolbar-icon-max-width);height:var(--ibiz-control-toolbar-icon-max-height)}.ibiz-control-toolbar-actions-dropdown-popper .el-button>span .ibiz-toolbar-item-icon .ibiz-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ibiz-control-toolbar-actions-dropdown-popper .el-button>span .ibiz-toolbar-item-icon i{font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar-actions-dropdown-popper .el-button>span .ibiz-toolbar-item-icon img{display:inline-block;width:100%;height:100%}.ibiz-control-toolbar-actions-dropdown-popper .el-button>span .ibiz-toolbar-item-icon+.ibiz-toolbar-item-text{margin:var(--ibiz-control-toolbar-text-margin)}.ibiz-control-toolbar-actions-dropdown-popper .el-button>span .ibiz-toolbar-item-counter{margin-left:var(--ibiz-spacing-super-tight)}
+@charset "UTF-8";.ibiz-control-toolbar{--ibiz-control-toolbar-item-color:var(--ibiz-color-primary-text);--ibiz-control-toolbar-item-bg-color:var(--ibiz-color-primary);--ibiz-control-toolbar-item-margin:0 var(--ibiz-spacing-extra-tight);--ibiz-control-toolbar-item-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);--ibiz-control-toolbar-item-disabled-button:rgba(var(--ibiz-grey-4), 0.5);--ibiz-control-toolbar-icon-max-width:var(--ibiz-width-icon-medium);--ibiz-control-toolbar-icon-max-height:var(--ibiz-width-icon-medium);--ibiz-control-toolbar-separator-color:var(--ibiz-color-fill-2);--ibiz-control-toolbar-menu-height:32px;--ibiz-control-toolbar-text-margin:0 0 0 var(--ibiz-spacing-extra-tight);display:flex;align-items:center}.ibiz-control-toolbar__item{display:flex;align-items:center;margin:var(--ibiz-control-toolbar-item-margin);overflow:hidden}.ibiz-control-toolbar__item .el-button{display:flex;align-items:center;justify-content:center;padding:var(--ibiz-control-toolbar-item-padding)}.ibiz-control-toolbar__item .el-button.is-disabled{background-color:var(--ibiz-control-toolbar-item-disabled-button)}.ibiz-control-toolbar__item .el-button>span{display:flex;align-items:center;justify-content:center;pointer-events:none;font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-toolbar-icon-max-width);height:var(--ibiz-control-toolbar-icon-max-height)}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-icon .ibiz-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-icon i{font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-icon img{display:inline-block;width:100%;height:100%}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-icon+.ibiz-toolbar-item-text{margin:var(--ibiz-control-toolbar-text-margin)}.ibiz-control-toolbar__item .el-button>span .ibiz-toolbar-item-counter{margin-left:var(--ibiz-spacing-super-tight)}.ibiz-control-toolbar__item.is-loading .el-button .ibiz-icon{display:none}.ibiz-control-toolbar__item-separator{color:var(--ibiz-control-toolbar-separator-color)}.ibiz-control-toolbar__item-separator+.ibiz-control-toolbar__item-separator,.ibiz-control-toolbar__item-separator:first-child{display:none}.ibiz-control-toolbar__menu.el-menu{height:var(--ibiz-control-toolbar-menu-height);margin:var(--ibiz-control-toolbar-item-margin);border:none}.ibiz-control-toolbar__menu .el-sub-menu.is-disabled .el-sub-menu__title{opacity:1}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title{display:flex;align-items:center;justify-content:center;padding:0;font-size:var(--ibiz-font-size-regular);color:var(--ibiz-control-toolbar-item-color);background-color:var(--ibiz-control-toolbar-item-bg-color);border-bottom:none;border-radius:var(--ibiz-border-radius-small)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-sub-menu__icon-arrow{display:none}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button{display:flex;align-items:center;justify-content:center}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span{display:flex;align-items:center;justify-content:center;font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-toolbar-icon-max-width);height:var(--ibiz-control-toolbar-icon-max-height)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-icon .ibiz-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-icon i{font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-icon img{display:inline-block;width:100%;height:100%}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-icon+.ibiz-toolbar-item-text{margin:var(--ibiz-control-toolbar-text-margin)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title .el-button>span .ibiz-toolbar-item-counter{margin-left:var(--ibiz-spacing-super-tight)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title>span{display:flex;align-items:center;justify-content:center;line-height:1}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu .el-sub-menu__title:hover{color:var(--ibiz-color-primary-hover-text);background-color:var(--ibiz-color-primary-hover)}.ibiz-control-toolbar__menu .ibiz-control-toolbar-submenu.is-active .el-sub-menu__title{color:var(--ibiz-color-primary-text)}.ibiz-control-toolbar-submenu-popper{--ibiz-control-toolbar-item-color:var(--ibiz-color-primary-text);--ibiz-control-toolbar-item-bg-color:var(--ibiz-color-primary);--ibiz-control-toolbar-item-margin:0 var(--ibiz-spacing-extra-tight);--ibiz-control-toolbar-item-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);--ibiz-control-toolbar-item-disabled-button:rgba(var(--ibiz-grey-4), 0.5);--ibiz-control-toolbar-icon-max-width:var(--ibiz-width-icon-medium);--ibiz-control-toolbar-icon-max-height:var(--ibiz-width-icon-medium);--ibiz-control-toolbar-separator-color:var(--ibiz-color-fill-2);--ibiz-control-toolbar-menu-height:32px;--ibiz-control-toolbar-text-margin:0 0 0 var(--ibiz-spacing-extra-tight);color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary)}.ibiz-control-toolbar-submenu-popper .el-menu .el-sub-menu.is-disabled .el-sub-menu__title{opacity:1}.ibiz-control-toolbar-submenu-popper .el-menu .ibiz-control-toolbar-submenu .el-sub-menu__title{padding:0 10px;font-size:var(--ibiz-font-size-regular);color:var(--ibiz-color-primary-text);background-color:var(--ibiz-color-primary)}.ibiz-control-toolbar-submenu-popper .el-menu .ibiz-control-toolbar-submenu .el-sub-menu__title:hover{color:var(--ibiz-color-primary-hover-text);background-color:var(--ibiz-color-primary-hover)}.ibiz-control-toolbar-submenu-popper .el-menu .ibiz-control-toolbar-submenu.is-active .el-sub-menu__title{color:var(--ibiz-color-primary-text)}.ibiz-control-toolbar-submenu-popper .el-menu .ibiz-control-toolbar-submenu-rawitem{color:var(--ibiz-color-primary-text)}.ibiz-control-toolbar-submenu-popper .el-menu .ibiz-control-toolbar-submenu__groupdetails .el-sub-menu__title .el-menu-item{padding:0}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item{font-size:var(--ibiz-font-size-regular);color:var(--ibiz-color-primary-text)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-toolbar-icon-max-width);height:var(--ibiz-control-toolbar-icon-max-height)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-icon .ibiz-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-icon i{font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-icon img{display:inline-block;width:100%;height:100%}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-icon+.ibiz-toolbar-item-text{margin:var(--ibiz-control-toolbar-text-margin)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .ibiz-toolbar-item-counter{margin-left:var(--ibiz-spacing-super-tight)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item.is-active{color:var(--ibiz-color-primary-text)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item:hover{color:var(--ibiz-color-primary-hover-text);background-color:var(--ibiz-color-primary-hover)}.ibiz-control-toolbar-submenu-popper .el-menu .el-menu-item .el-button{justify-content:flex-start;width:100%;padding:0;--el-button-active-bg-color:transparent;--el-button-hover-bg-color:transparent;--el-button-bg-color:transparent;--el-mask-color-extra-light:transparent}.ibiz-control-toolbar-actions{display:flex;margin:var(--ibiz-control-toolbar-item-margin);white-space:normal;visibility:visible}.ibiz-control-toolbar-actions__extract-mode-itemx .el-button-group{display:flex;white-space:normal}.ibiz-control-toolbar-actions__extract-mode-itemx .el-button-group>.el-button{padding:var(--ibiz-spacing-none)}.ibiz-control-toolbar-actions__extract-mode-itemx .el-button-group>.el-button:nth-child(2):focus-visible{outline:0;outline-offset:0}.ibiz-control-toolbar-actions__item-deuiaction{display:flex;align-items:center;margin:var(--ibiz-control-toolbar-item-margin);overflow:hidden}.ibiz-control-toolbar-actions__item-deuiaction:first-child{margin-left:0}.ibiz-control-toolbar-actions__item-deuiaction:last-child{margin-right:0}.ibiz-control-toolbar-actions .el-button{display:flex;align-items:center;justify-content:center;padding:var(--ibiz-control-toolbar-item-padding);pointer-events:auto}.ibiz-control-toolbar-actions .el-button.is-disabled{background-color:var(--ibiz-control-toolbar-item-disabled-button)}.ibiz-control-toolbar-actions .el-button>span{display:flex;align-items:center;justify-content:center;pointer-events:none;font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar-actions .el-button>span .ibiz-toolbar-item-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-toolbar-icon-max-width);height:var(--ibiz-control-toolbar-icon-max-height)}.ibiz-control-toolbar-actions .el-button>span .ibiz-toolbar-item-icon .ibiz-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ibiz-control-toolbar-actions .el-button>span .ibiz-toolbar-item-icon i{font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar-actions .el-button>span .ibiz-toolbar-item-icon img{display:inline-block;width:100%;height:100%}.ibiz-control-toolbar-actions .el-button>span .ibiz-toolbar-item-icon+.ibiz-toolbar-item-text{margin:var(--ibiz-control-toolbar-text-margin)}.ibiz-control-toolbar-actions .el-button>span .ibiz-toolbar-item-counter{margin-left:var(--ibiz-spacing-super-tight)}.ibiz-control-toolbar-actions-dropdown-popper{--el-popover-padding:var(--ibiz-spacing-none);min-width:200px;--ibiz-control-toolbar-actions-popover-button-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);--ibiz-control-toolbar-actions-dropdown-item-height:36px}.ibiz-control-toolbar-actions-dropdown-popper__dropdown-item{height:var(--ibiz-control-toolbar-actions-dropdown-item-height)}.ibiz-control-toolbar-actions-dropdown-popper.is-disabled{display:none}.ibiz-control-toolbar-actions-dropdown-popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu__item{padding:var(--ibiz-spacing-none)}.ibiz-control-toolbar-actions-dropdown-popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu__item.is-disabled{background-color:transparent;opacity:.25}.ibiz-control-toolbar-actions-dropdown-popper .el-button{--el-button-active-bg-color:transparent;--el-button-hover-bg-color:transparent;--el-button-bg-color:transparent;--el-mask-color-extra-light:transparent;display:block;width:100%;padding:var(--ibiz-control-toolbar-actions-popover-button-padding);margin:var(--ibiz-spacing-none);color:var(--ibiz-color-primary-text);text-align:left;background-color:transparent;border-radius:0}.ibiz-control-toolbar-actions-dropdown-popper .el-button:hover{color:var(--ibiz-color-primary-text);background-color:transparent}.ibiz-control-toolbar-actions-dropdown-popper .el-button>span{font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar-actions-dropdown-popper .el-button>span .ibiz-toolbar-item-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-toolbar-icon-max-width);height:var(--ibiz-control-toolbar-icon-max-height)}.ibiz-control-toolbar-actions-dropdown-popper .el-button>span .ibiz-toolbar-item-icon .ibiz-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ibiz-control-toolbar-actions-dropdown-popper .el-button>span .ibiz-toolbar-item-icon i{font-size:var(--ibiz-font-size-regular)}.ibiz-control-toolbar-actions-dropdown-popper .el-button>span .ibiz-toolbar-item-icon img{display:inline-block;width:100%;height:100%}.ibiz-control-toolbar-actions-dropdown-popper .el-button>span .ibiz-toolbar-item-icon+.ibiz-toolbar-item-text{margin:var(--ibiz-control-toolbar-text-margin)}.ibiz-control-toolbar-actions-dropdown-popper .el-button>span .ibiz-toolbar-item-counter{margin-left:var(--ibiz-spacing-super-tight)}