@ibiz-template/vue3-components 0.7.16 → 0.7.17

package/lib/control/app-menu/custom-menu-design/custom-menu-design.cjs

@@ -0,0 +1,282 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./custom-menu-design.css');
+var core = require('@ibiz-template/core');
+var lodashEs = require('lodash-es');
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+function renderByProvider(itemId, c) {
+  const itemModel = c.allAppMenuItems.find((item) => item.id === itemId);
+  if (!itemModel) {
+    throw new core.RuntimeError("\u6CA1\u627E\u5230\u83DC\u5355\u9879\u6A21\u578B".concat(itemId));
+  }
+  const provider = c.itemProviders[itemId];
+  if (!provider.renderText) {
+    throw new core.RuntimeError("".concat(itemId, "\u7684\u9002\u914D\u5668\u6CA1\u6709renderText\u65B9\u6CD5"));
+  }
+  return provider.renderText(itemModel, c);
+}
+const MenuDesign = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizMenuDesign",
+  props: {
+    controller: {
+      type: Object,
+      required: true
+    },
+    menus: {
+      type: Array,
+      required: true
+    }
+  },
+  emits: ["saved", "reset"],
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("menu-design");
+    const c = props.controller;
+    const loading = vue.ref(false);
+    const visible = vue.ref(false);
+    const configs = vue.ref([]);
+    const stopExpand = (event) => {
+      event.stopPropagation();
+    };
+    const handleMenusSaveData = (items) => {
+      const tempItems = [];
+      items.forEach((item) => {
+        var _a;
+        const config = {
+          key: item.key,
+          name: item.label,
+          type: item.itemType,
+          visible: item.config.visible,
+          disabled: item.config.disabled
+        };
+        if ((_a = item.children) == null ? void 0 : _a.length) {
+          config.children = handleMenusSaveData(item.children);
+        }
+        tempItems.push(config);
+      });
+      return tempItems;
+    };
+    const collapseGroup = (menu) => {
+      menu.isCollapse = !menu.isCollapse;
+    };
+    const flattenConfigs = (items) => {
+      const result = [];
+      items.forEach((item) => {
+        result.push(item);
+        if (item.children && item.children.length > 0) {
+          const tempResult = flattenConfigs(item.children);
+          result.push(...tempResult);
+        }
+      });
+      return result;
+    };
+    const mergeMenusConfig = (items) => {
+      let customConfig = [];
+      if (c.saveConfigs && c.saveConfigs.length > 0) {
+        customConfig = flattenConfigs(c.saveConfigs);
+      }
+      return items.map((item) => {
+        var _a;
+        const target = customConfig.find((_item) => {
+          return _item.key === item.key;
+        });
+        const data = {
+          ...item,
+          isCollapse: true,
+          config: {
+            visible: true,
+            disabled: false
+          }
+        };
+        if ((_a = item.children) == null ? void 0 : _a.length) {
+          data.children = mergeMenusConfig(item.children);
+        }
+        if (target) {
+          Object.assign(data, {
+            config: {
+              visible: target.visible,
+              disabled: target.disabled
+            }
+          });
+        }
+        return data;
+      });
+    };
+    const onReset = async () => {
+      c.saveConfigs = [];
+      await c.customController.resetCustomModelData();
+      configs.value = mergeMenusConfig(lodashEs.cloneDeep(props.menus));
+      emit("reset");
+    };
+    const onSave = async () => {
+      loading.value = true;
+      const saveConfig = handleMenusSaveData(configs.value);
+      await c.customController.saveCustomModelData(saveConfig);
+      c.saveConfigs = saveConfig;
+      loading.value = false;
+      emit("saved", saveConfig);
+    };
+    const renderMenuItem = (menu) => {
+      var _a;
+      if (!((_a = c.state.menuItemsState[menu.key]) == null ? void 0 : _a.visible)) {
+        return;
+      }
+      if (menu.itemType === "MENUITEM") {
+        let content;
+        const provider = c.itemProviders[menu.key];
+        if (provider && provider.renderText) {
+          content = renderByProvider(menu.key, c);
+        } else {
+          content = [menu.image ? vue.createVNode(vue.resolveComponent("iBizIcon"), {
+            "class": ns.e("icon"),
+            "icon": menu.image
+          }, null) : null, vue.createVNode("span", null, [menu.label])];
+        }
+        return content;
+      }
+      if (menu.itemType === "SEPERATOR") {
+        const direction = c.view.model.mainMenuAlign === "TOP" ? "vertical" : "horizontal";
+        return vue.createVNode("div", {
+          "class": ns.be("content", "menu-seperator")
+        }, [vue.createVNode(vue.resolveComponent("el-divider"), {
+          "direction": direction,
+          "class": ns.e("separator"),
+          "id": menu.key
+        }, null)]);
+      }
+    };
+    const renderGroupIcon = (item) => {
+      if (item.children && item.children.length > 0) {
+        if (item.isCollapse) {
+          return vue.createVNode("i", {
+            "class": [ns.be("menu-set-drawer", "group-icon"), "fa fa-caret-right"],
+            "aria-hidden": "true"
+          }, null);
+        }
+        return vue.createVNode("i", {
+          "class": [ns.be("menu-set-drawer", "group-icon"), "fa fa-sort-down"],
+          "aria-hidden": "true"
+        }, null);
+      }
+      return null;
+    };
+    const renderMenuList = (items) => {
+      return items.map((item) => {
+        const content = renderMenuItem(item);
+        if (!content)
+          return null;
+        return vue.createVNode("div", {
+          "class": ns.be("content", "menu-item")
+        }, [vue.createVNode("div", {
+          "class": [ns.be("content", "menu-item-content"), ns.is("is-menuitem", item.itemType === "MENUITEM")]
+        }, [vue.createVNode("div", {
+          "class": ns.bem("content", "menu-item-content", "label"),
+          "onClick": () => collapseGroup(item)
+        }, [renderGroupIcon(item), vue.createVNode("div", {
+          "class": ns.bem("content", "menu-item-content", "label-content")
+        }, [content])]), item.itemType !== "SEPERATOR" ? vue.createVNode("div", {
+          "class": ns.bem("content", "menu-item-content", "checks")
+        }, [vue.createVNode(vue.resolveComponent("el-checkbox"), {
+          "modelValue": item.config.visible,
+          "onUpdate:modelValue": ($event) => item.config.visible = $event,
+          "onClick": stopExpand,
+          "label": "\u663E\u793A",
+          "size": "large"
+        }, null), vue.createVNode(vue.resolveComponent("el-checkbox"), {
+          "modelValue": item.config.disabled,
+          "onUpdate:modelValue": ($event) => item.config.disabled = $event,
+          "onClick": stopExpand,
+          "label": "\u7981\u7528",
+          "size": "large"
+        }, null)]) : null]), item.children && item.children.length > 0 ? vue.createVNode("div", {
+          "class": [ns.bem("content", "menu-item", "children"), ns.is("collapse", item.isCollapse)]
+        }, [renderMenuList(item.children)]) : null]);
+      });
+    };
+    const renderHeader = () => {
+      let _slot, _slot2;
+      return vue.createVNode("div", {
+        "class": ns.b("header")
+      }, [vue.createVNode("div", {
+        "class": ns.be("header", "caption")
+      }, [ibiz.i18n.t("control.menuDesign.customMenu")]), vue.createVNode("div", {
+        "class": ns.be("header", "actions")
+      }, [vue.createVNode(vue.resolveComponent("el-button"), {
+        "onClick": onReset,
+        "loading": loading.value
+      }, _isSlot(_slot = ibiz.i18n.t("control.menuDesign.reset")) ? _slot : {
+        default: () => [_slot]
+      }), vue.createVNode(vue.resolveComponent("el-button"), {
+        "onClick": onSave,
+        "loading": loading.value
+      }, _isSlot(_slot2 = ibiz.i18n.t("control.menuDesign.save")) ? _slot2 : {
+        default: () => [_slot2]
+      })])]);
+    };
+    const renderContent = () => {
+      return vue.createVNode("div", {
+        "class": ns.b("content")
+      }, [renderMenuList(configs.value)]);
+    };
+    const openDesign = () => {
+      configs.value = mergeMenusConfig(lodashEs.cloneDeep(props.menus));
+      visible.value = true;
+    };
+    return {
+      ns,
+      c,
+      configs,
+      visible,
+      loading,
+      onReset,
+      renderContent,
+      renderHeader,
+      onSave,
+      openDesign
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "class": this.ns.b()
+    }, [vue.createVNode("div", {
+      "title": ibiz.i18n.t("control.menu.menuSetting"),
+      "onClick": this.openDesign
+    }, [vue.createVNode("svg", {
+      "viewBox": "0 0 16 16",
+      "xmlns": "http://www.w3.org/2000/svg",
+      "height": "1em",
+      "width": "1em",
+      "preserveAspectRatio": "xMidYMid meet",
+      "focusable": "false",
+      "fill": "currentColor"
+    }, [vue.createVNode("g", {
+      "id": "augaction/settings",
+      "stroke-width": "1",
+      "fill-rule": "evenodd"
+    }, [vue.createVNode("path", {
+      "d": "M11.405 13.975l3.398-5.889L11.405 2.2H4.607L1.208 8.087l3.399 5.889h6.798zm1.023-12.4l3.43 5.938c.205.356.205.793 0 1.149l-3.43 5.938a1.147 1.147 0 0 1-.993.574H4.577c-.41 0-.789-.218-.994-.573L.153 8.66a1.153 1.153 0 0 1 0-1.147l3.43-5.94c.205-.356.584-.575.994-.575h6.858c.409 0 .788.22.993.576zM8.006 9.879c.988 0 1.792-.804 1.792-1.792s-.804-1.792-1.792-1.792-1.792.804-1.792 1.792.804 1.792 1.792 1.792zm0-4.784a2.993 2.993 0 1 1-.002 5.985 2.993 2.993 0 0 1 .002-5.985z",
+      "id": "aug\u5F62\u72B6\u7ED3\u5408"
+    }, null)])])]), vue.createVNode(vue.resolveComponent("el-drawer"), {
+      "modelValue": this.visible,
+      "onUpdate:modelValue": ($event) => this.visible = $event,
+      "append-to-body": true,
+      "custom-class": this.ns.b("menu-set-drawer")
+    }, {
+      default: () => {
+        return this.renderContent();
+      },
+      header: () => {
+        return this.renderHeader();
+      }
+    })]);
+  }
+});
+
+exports.MenuDesign = MenuDesign;

package/lib/control/app-menu/custom-menu-design/custom-menu-design.css

@@ -0,0 +1 @@
+.ibiz-menu-design-menu-set-drawer{background-color:#fff}.ibiz-menu-design-menu-set-drawer .el-drawer__header{padding:20px 0 0;margin-bottom:0}.ibiz-menu-design-menu-set-drawer__group-icon{cursor:pointer}.ibiz-menu-design-menu-set-drawer .ibiz-menu-design-content{height:100%;padding:var(--ibiz-spacing-base);overflow:auto}.ibiz-menu-design-content__menu-item--children{padding-left:32px}.ibiz-menu-design-content__menu-item--children.is-collapse{height:0;overflow:hidden}.ibiz-menu-design-content__menu-item-content{display:flex;align-items:center;width:100%;height:40px;padding:0 var(--ibiz-spacing-base-tight)}.ibiz-menu-design-content__menu-item-content.is-is-menuitem:hover{background-color:var(--ibiz-color-bg-0)}.ibiz-menu-design-content__menu-item-content--label{display:flex;flex:1;align-items:center;color:var(--ibiz-color-black)}.ibiz-menu-design-content__menu-item-content--label i{width:16px;text-align:center}.ibiz-menu-design-content__menu-item-content--label-content{display:flex;flex:1;flex-direction:row;align-items:center;justify-content:left;margin-left:5px;font-size:var(--ibiz-font-size-header-6)}.ibiz-menu-design-content__menu-item-content--checks{display:flex;flex:0;flex-direction:row}.ibiz-menu-design-content__menu-seperator{display:flex;flex-direction:row;align-items:center;width:100%}.ibiz-menu-design-menu-set-drawer .ibiz-menu-design-content .ibiz-menu-design__icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-width-icon-large);height:var(--ibiz-width-icon-large);margin-right:var(--ibiz-spacing-tight)}.ibiz-menu-design-menu-set-drawer .ibiz-menu-design-content .ibiz-menu-design__drag-icon{position:absolute;left:var(--ibiz-spacing-tight);display:none;fill:var(--ibiz-color-primary-hover)}.ibiz-menu-design-menu-set-drawer .ibiz-menu-design-header{height:64px;padding:20px;border-bottom:1px solid var(--ibiz-color-border);display:flex;align-items:center;justify-content:space-between}.ibiz-menu-design-header__caption{padding:0 var(--ibiz-spacing-base)}.ibiz-menu-design-header__text{position:relative;height:100%;padding-left:var(--ibiz-spacing-base);font-size:var(--ibiz-font-size-header-5);font-weight:var(--ibiz-font-weight-regular);color:var(--ibiz-color-text-0);display:flex;align-items:center;justify-content:flex-start}.ibiz-menu-design-header__text::before{position:absolute;top:50%;left:0;width:4px;height:20px;content:"";background-color:var(--ibiz-color-primary);border-radius:2px;transform:translateY(-50%)}.ibiz-menu-design-header__menu-design-action{margin-right:64px}

package/lib/control/app-menu/index.cjs

@@ -6,11 +6,13 @@ var runtime = require('@ibiz-template/runtime');
 var vue3Util = require('@ibiz-template/vue3-util');
 var appMenu = require('./app-menu.cjs');
 var appMenu_provider = require('./app-menu.provider.cjs');
+var customMenuDesign = require('./custom-menu-design/custom-menu-design.cjs');
 
 "use strict";
 const IBizAppMenuControl = vue3Util.withInstall(
   appMenu.AppMenuControl,
   function(v) {
+    v.component(customMenuDesign.MenuDesign.name, customMenuDesign.MenuDesign);
     v.component(appMenu.AppMenuControl.name, appMenu.AppMenuControl);
     runtime.registerControlProvider(runtime.ControlType.APP_MENU, () => new appMenu_provider.AppMenuProvider());
   }

package/lib/control/kanban/kanban.cjs

@@ -288,7 +288,7 @@ const KanbanControl = /* @__PURE__ */ vue.defineComponent({
       return vue.createVNode("span", {
         "class": ns.be("group", "header-right"),
         "onClick": (event) => stopPropagation(event)
-      }, [c.enableNew && vue.createVNode(vue.resolveComponent("el-button"), {
+      }, [c.enableNew && !c.state.readonly && vue.createVNode(vue.resolveComponent("el-button"), {
         "class": ns.be("group", "header-new"),
         "text": true,
         "circle": true,
@@ -361,7 +361,7 @@ const KanbanControl = /* @__PURE__ */ vue.defineComponent({
           "modelValue": group.children,
           "group": c.model.id,
           "itemKey": "srfkey",
-          "disabled": disabled.value,
+          "disabled": disabled.value || c.state.readonly,
           "onChange": (evt) => onChange(evt, group.key)
         }, {
           item: ({

package/lib/control/toolbar/toolbar.cjs

@@ -101,6 +101,7 @@ const ToolbarControl = /* @__PURE__ */ vue.defineComponent({
       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": 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))]
       }, {

package/lib/control/toolbar/toolbar.css

@@ -1 +1 @@
-@charset "UTF-8";.ibiz-control-toolbar{--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-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>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}.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.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 .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-color-primary-text);background-color:var(--ibiz-color-primary);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}.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>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-margin:0 var(--ibiz-spacing-extra-tight);--ibiz-control-toolbar-item-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);--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 .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}.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.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}
+@charset "UTF-8";.ibiz-control-toolbar{--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-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>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}.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.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-color-primary-text);background-color:var(--ibiz-color-primary);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}.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>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-margin:0 var(--ibiz-spacing-extra-tight);--ibiz-control-toolbar-item-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);--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}.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.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}