@ibiz-template/vue3-components 0.7.41-alpha.97 → 0.7.41-alpha.99

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

@@ -14,9 +14,8 @@ function _isSlot(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
 }
 function renderAttrs(model, params) {
-  var _a;
   const attrs = {};
-  (_a = model.controlAttributes) == null ? void 0 : _a.forEach((item) => {
+  runtime.filterPresetAttrs(model.controlAttributes).forEach((item) => {
     if (item.attrName && item.attrValue) {
       attrs[item.attrName] = runtime.ScriptFactory.execSingleLine(item.attrValue, {
         ...params
@@ -103,6 +102,10 @@ const AppMenuControl = /* @__PURE__ */ vue.defineComponent({
   setup(props) {
     const c = vue3Util.useControlController((...args) => new runtime.AppMenuController(...args));
     const ns = vue3Util.useNamespace("control-".concat(c.model.controlType.toLowerCase()));
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(c);
     const saveConfigs = vue.ref([]);
     const defaultActive = vue.ref("");
     const defaultOpens = vue.ref([]);
@@ -282,7 +285,8 @@ const AppMenuControl = /* @__PURE__ */ vue.defineComponent({
         "teleported": true,
         "popper-class": [ns.b("popup-container"), ns.be("popup-container", (_a = c.model.appMenuStyle) == null ? void 0 : _a.toLowerCase()), ns.b("".concat(c.model.codeName.toLowerCase(), "--popper")), "".concat(((_b = c.model.sysCss) == null ? void 0 : _b.cssName) ? "".concat((_c = c.model.sysCss) == null ? void 0 : _c.cssName, "--popper") : ""), "".concat((sysCss == null ? void 0 : sysCss.cssName) ? "".concat(sysCss == null ? void 0 : sysCss.cssName, "--popper") : "")],
         "title": core.showTitle(tooltip),
-        "class": [ns.b("submenu"), "".concat((sysCss == null ? void 0 : sysCss.cssName) || "")]
+        "style": semanticStyle("submenu", menu),
+        "class": [ns.b("submenu"), semanticClass("submenu", menu), "".concat((sysCss == null ? void 0 : sysCss.cssName) || "")]
       }, {
         default: () => appMenuItems.map((item) => renderMenu(false, item)),
         title: () => {
@@ -292,7 +296,8 @@ const AppMenuControl = /* @__PURE__ */ vue.defineComponent({
           if (props.collapse) {
             if (sysImage)
               return vue.createVNode(vue.resolveComponent("iBizIcon"), {
-                "class": ns.e("icon"),
+                "class": [ns.e("icon"), semanticClass("submenu.icon", menu)],
+                "style": semanticStyle("submenu.icon", menu),
                 "icon": sysImage
               }, null);
             return [isFirst ? caption == null ? void 0 : caption.slice(0, 1) : caption, isFirst ? null : vue.createVNode("ion-icon", {
@@ -300,12 +305,15 @@ const AppMenuControl = /* @__PURE__ */ vue.defineComponent({
             }, null)];
           }
           return [sysImage && vue.createVNode(vue.resolveComponent("iBizIcon"), {
-            "class": ns.e("icon"),
+            "class": [ns.e("icon"), semanticClass("submenu.icon", menu)],
+            "style": semanticStyle("submenu.icon", menu),
             "icon": sysImage
           }, null), vue.createVNode("span", {
-            "class": ns.e("caption")
+            "class": [ns.e("caption"), semanticClass("submenu.content", menu)],
+            "style": semanticStyle("submenu.content", menu)
           }, [caption]), counterId ? vue.createVNode(vue.resolveComponent("iBizBadge"), {
-            "class": ns.e("counter"),
+            "class": [ns.e("counter"), semanticClass("counter", menu)],
+            "style": semanticStyle("counter", menu),
             "value": c.state.counterData[counterId]
           }, null) : null];
         }
@@ -327,17 +335,21 @@ const AppMenuControl = /* @__PURE__ */ vue.defineComponent({
         content = provider.renderText(menu, c);
       } else if (!(isFirst && props.collapse)) {
         content = [sysImage ? vue.createVNode(vue.resolveComponent("iBizIcon"), {
-          "class": ns.e("icon"),
+          "class": [ns.e("icon"), semanticClass("item.icon", menu)],
+          "style": semanticStyle("item.icon", menu),
           "icon": sysImage
         }, null) : null, vue.createVNode("span", {
-          "class": ns.e("caption")
+          "class": [ns.e("caption"), semanticClass("item.content", menu)],
+          "style": semanticStyle("item.content", menu)
         }, [caption]), counterId ? vue.createVNode(vue.resolveComponent("iBizBadge"), {
-          "class": ns.e("counter"),
+          "class": [ns.e("counter"), semanticClass("counter", menu)],
+          "style": semanticStyle("counter", menu),
           "value": c.state.counterData[counterId]
         }, null) : null];
       } else {
         content = [sysImage ? vue.createVNode(vue.resolveComponent("iBizIcon"), {
-          "class": ns.e("icon"),
+          "class": [ns.e("icon"), semanticClass("item.icon", menu)],
+          "style": semanticStyle("item.icon", menu),
           "icon": sysImage
         }, null) : caption == null ? void 0 : caption.slice(0, 1)];
       }
@@ -345,7 +357,8 @@ const AppMenuControl = /* @__PURE__ */ vue.defineComponent({
         "index": id,
         "disabled": !appFuncId,
         "title": core.showTitle(tooltip),
-        "class": [ns.e("item"), "".concat((sysCss == null ? void 0 : sysCss.cssName) || "")]
+        "class": [ns.e("item"), semanticClass("item", menu), "".concat((sysCss == null ? void 0 : sysCss.cssName) || "")],
+        "style": semanticStyle("item", menu)
       }, _isSlot(content) ? content : {
         default: () => [content]
       }) : vue.createVNode(vue.resolveComponent("el-tooltip"), {
@@ -357,7 +370,8 @@ const AppMenuControl = /* @__PURE__ */ vue.defineComponent({
         default: () => [vue.createVNode(vue.resolveComponent("el-menu-item"), {
           "index": id,
           "disabled": !appFuncId,
-          "class": [ns.e("item"), "".concat((sysCss == null ? void 0 : sysCss.cssName) || "")]
+          "class": [ns.e("item"), semanticClass("item", menu), "".concat((sysCss == null ? void 0 : sysCss.cssName) || "")],
+          "style": semanticStyle("item", menu)
         }, _isSlot(content) ? content : {
           default: () => [content]
         })]
@@ -368,7 +382,8 @@ const AppMenuControl = /* @__PURE__ */ vue.defineComponent({
       return vue.createVNode(vue.resolveComponent("el-divider"), {
         "id": menu.id,
         "direction": direction,
-        "class": ns.em("separator", direction)
+        "class": [ns.em("separator", direction), semanticClass("divider", menu)],
+        "style": semanticStyle("divider", menu)
       }, null);
     };
     const renderRawitem = (menu) => {
@@ -380,7 +395,8 @@ const AppMenuControl = /* @__PURE__ */ vue.defineComponent({
       return vue.createVNode(vue.resolveComponent("el-menu-item"), {
         "index": id,
         "title": core.showTitle(tooltip),
-        "class": [ns.e("rawitem"), "".concat((sysCss == null ? void 0 : sysCss.cssName) || "")]
+        "class": [ns.e("rawitem"), semanticClass("rawitem", menu), "".concat((sysCss == null ? void 0 : sysCss.cssName) || "")],
+        "style": semanticStyle("rawitem", menu)
       }, {
         default: () => [vue.createVNode(vue.resolveComponent("iBizRawItem"), {
           "rawItem": menu
@@ -419,20 +435,25 @@ const AppMenuControl = /* @__PURE__ */ vue.defineComponent({
       renderMenu,
       ellipsisSvg,
       configSaves,
-      configReset
+      configReset,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
     var _a, _b;
     return vue.createVNode(vue.resolveComponent("iBizControlBase"), {
       "ref": "menuRef",
-      "class": [this.ns.b(), this.ns.m(this.menuMode), this.ns.b("".concat(this.c.model.codeName.toLowerCase())), this.ns.b((_a = this.c.model.appMenuStyle) == null ? void 0 : _a.toLowerCase()), this.ns.is("collapse", this.collapse), this.ns.is("show-collapse", this.isShowCollapse), this.ns.is("show-menu-design", this.c.model.enableCustomized), this.ns.is("scroll", this.hasScroll), "".concat(((_b = this.c.model.sysCss) == null ? void 0 : _b.cssName) || "")],
+      "class": [this.ns.b(), this.semanticClass("root"), this.ns.m(this.menuMode), this.ns.b("".concat(this.c.model.codeName.toLowerCase())), this.ns.b((_a = this.c.model.appMenuStyle) == null ? void 0 : _a.toLowerCase()), this.ns.is("collapse", this.collapse), this.ns.is("show-collapse", this.isShowCollapse), this.ns.is("show-menu-design", this.c.model.enableCustomized), this.ns.is("scroll", this.hasScroll), "".concat(((_b = this.c.model.sysCss) == null ? void 0 : _b.cssName) || "")],
+      "style": this.semanticStyle("root"),
       "controller": this.c
     }, {
       default: () => {
         var _a2;
         return [this.c.state.isCreated && vue.createVNode(vue.resolveComponent("el-menu"), vue.mergeProps({
           "key": this.key,
+          "class": this.semanticClass("content"),
+          "style": this.semanticStyle("content"),
           "popper-class": [this.ns.b("popper"), this.ns.b("".concat(this.c.model.codeName.toLowerCase(), "--popper")), "".concat(((_a2 = this.c.model.sysCss) == null ? void 0 : _a2.cssName) ? "".concat(this.c.model.sysCss.cssName, "--popper") : "")],
           "default-active": this.defaultActive,
           "default-openeds": this.defaultOpens,
@@ -456,7 +477,8 @@ const AppMenuControl = /* @__PURE__ */ vue.defineComponent({
           "onSaved": this.configSaves,
           "onReset": this.configReset
         }, null), this.isShowCollapse && vue.createVNode("div", {
-          "class": [this.ns.b("collapse-icon"), this.ns.is("collapse", this.collapse)],
+          "class": [this.ns.b("collapse-icon"), this.semanticClass("collapse"), this.ns.is("collapse", this.collapse)],
+          "style": this.semanticStyle("collapse"),
           "onClick": () => {
             this.c.view.call(runtime.ViewCallTag.TOGGLE_COLLAPSE);
           }

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

@@ -1 +1 @@
-@charset "UTF-8";.ibiz-control-appmenu{position:relative;width:100%;height:100%;--ibiz-control-appmenu-collapse-item-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-control-appmenu-collapse-item-padding:var(--ibiz-spacing-base);--ibiz-control-appmenu-icon-width:var(--ibiz-width-icon-large);--ibiz-control-appmenu-icon-height:var(--ibiz-width-icon-large);--ibiz-control-appmenu-icon-margin:0 var(--ibiz-spacing-tight) 0 0;--ibiz-control-appmenu-icon-position:calc(var(--ibiz-spacing-base) - 2px);--ibiz-control-appmenu-icon-size:var(--ibiz-width-icon-medium);--ibiz-control-appmenu-collapse-height:var(--ibiz-spacing-super-loose);--ibiz-control-appmenu-scorll-color:var(--ibiz-color-scroll-menu);--ibiz-control-appmenu-item-selected-border-color:transparent;--ibiz-control-appmenu-item-selected-color:var(--ibiz-color-primary-active-text);--ibiz-control-appmenu-item-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-control-appmenu-item-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-padding:var(--ibiz-spacing-tight);--ibiz-control-appmenu-item-border-radius:var(--ibiz-border-radius-small);--ibiz-control-appmenu-item-border:2px solid var(--ibiz-color-text-1);--ibiz-control-appmenu-item-font-size:var(--ibiz-font-size-header-6);--ibiz-control-appmenu-item-height:42px;--ibiz-control-appmenu-item-gap:2px;--ibiz-control-appmenu-item-color:var(--ibiz-color-text-menu);--ibiz-control-appmenu-item-separator-color:var(--ibiz-color-scroll-menu);--ibiz-control-appmenu-item-horizontal-selected-color:var(--ibiz-color-primary-active-text);--ibiz-control-appmenu-item-horizontal-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-horizontal-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-control-appmenu-item-horizontal-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-horizontal-color:var(--ibiz-color-text-menu);--ibiz-control-appmenu-item-horizontal-font-size:var(--ibiz-font-size-header-5);--ibiz-control-appmenu-item-horizontal-height:100%;--ibiz-control-appmenu-item-horizontal-border-radius:0;--ibiz-control-appmenu-item-horizontal-padding:0 var(--ibiz-spacing-base-loose);--ibiz-control-appmenu-item-horizontal-padding-right:calc(var(--ibiz-width-icon-large) + var(--ibiz-spacing-base-loose));--ibiz-control-appmenu-item-horizontal-popup-height:40px}.ibiz-control-appmenu>.el-menu{height:100%;padding:var(--ibiz-spacing-none) var(--ibiz-spacing-base);overflow-y:auto;border-right:0;--el-menu-hover-text-color:var(--ibiz-control-appmenu-item-color);--el-menu-hover-bg-color:transparent;--ibiz-control-appmenu-item-selected-border-color:transparent;--ibiz-control-appmenu-item-selected-color:var(--ibiz-color-primary-active-text);--ibiz-control-appmenu-item-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-control-appmenu-item-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-padding:var(--ibiz-spacing-tight);--ibiz-control-appmenu-item-border-radius:var(--ibiz-border-radius-small);--ibiz-control-appmenu-item-border:2px solid var(--ibiz-color-text-1);--ibiz-control-appmenu-item-font-size:var(--ibiz-font-size-header-6);--ibiz-control-appmenu-item-height:42px;--ibiz-control-appmenu-item-gap:2px;--ibiz-control-appmenu-item-color:var(--ibiz-color-text-menu);--ibiz-control-appmenu-item-separator-color:var(--ibiz-color-scroll-menu);--ibiz-control-appmenu-item-horizontal-selected-color:var(--ibiz-color-primary-active-text);--ibiz-control-appmenu-item-horizontal-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-horizontal-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-control-appmenu-item-horizontal-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-horizontal-color:var(--ibiz-color-text-menu);--ibiz-control-appmenu-item-horizontal-font-size:var(--ibiz-font-size-header-5);--ibiz-control-appmenu-item-horizontal-height:100%;--ibiz-control-appmenu-item-horizontal-border-radius:0;--ibiz-control-appmenu-item-horizontal-padding:0 var(--ibiz-spacing-base-loose);--ibiz-control-appmenu-item-horizontal-padding-right:calc(var(--ibiz-width-icon-large) + var(--ibiz-spacing-base-loose));--ibiz-control-appmenu-item-horizontal-popup-height:40px}.ibiz-control-appmenu>.el-menu .ibiz-control-appmenu__rawitem{min-height:var(--ibiz-control-appmenu-item-height);line-height:var(--ibiz-control-appmenu-item-height)}.ibiz-control-appmenu>.el-menu .ibiz-control-appmenu__rawitem .ibiz-rawitem{display:flex;align-items:center;justify-content:flex-start;font-size:var(--ibiz-control-appmenu-item-font-size);color:var(--ibiz-control-appmenu-item-color)}.ibiz-control-appmenu>.el-menu .ibiz-control-appmenu__rawitem .ibiz-rawitem *{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-control-appmenu .ibiz-control-appmenu-groupmenu .el-menu-item-group__title{padding:var(--ibiz-spacing-extra-tight) 0 var(--ibiz-spacing-extra-tight) 10px;font-size:var(--ibiz-control-appmenu-item-font-size);color:var(--ibiz-control-appmenu-item-horizontal-color)}.ibiz-control-appmenu .ibiz-control-appmenu-groupmenu>ul>.el-menu-item{padding:0 var(--ibiz-spacing-extra-loose)}.ibiz-control-appmenu .ibiz-control-appmenu-groupmenu>ul>.el-divider{width:calc(100% - 40px);margin:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose)}.ibiz-control-appmenu .el-sub-menu .el-sub-menu__icon-arrow{right:10px;width:var(--ibiz-control-appmenu-icon-width);height:var(--ibiz-control-appmenu-icon-height);margin-top:-10px;font-size:var(--ibiz-control-appmenu-icon-width)}.ibiz-control-appmenu .el-sub-menu .el-menu-item{padding:calc(var(--ibiz-control-appmenu-item-padding) * .875) calc(var(--ibiz-control-appmenu-item-padding) * 2.5)}.ibiz-control-appmenu .el-sub-menu .el-sub-menu__title>.ibiz-control-appmenu__counter{right:30px}.ibiz-control-appmenu .el-menu--vertical{width:100%}.ibiz-control-appmenu .el-menu--vertical .el-menu-item,.ibiz-control-appmenu .el-menu--vertical .el-menu-item-group__title,.ibiz-control-appmenu .el-menu--vertical .el-sub-menu__title{display:flex;align-items:center;justify-content:flex-start;--el-menu-base-level-padding:var(--ibiz-control-appmenu-item-padding);width:100%;height:var(--ibiz-control-appmenu-item-height);font-size:var(--ibiz-control-appmenu-item-font-size);color:var(--ibiz-control-appmenu-item-color);white-space:nowrap;border-radius:var(--ibiz-control-appmenu-item-border-radius)}.ibiz-control-appmenu .el-menu--vertical .el-menu-item-group__title.is-active,.ibiz-control-appmenu .el-menu--vertical .el-menu-item.is-active,.ibiz-control-appmenu .el-menu--vertical .el-sub-menu__title.is-active{color:var(--ibiz-control-appmenu-item-selected-color)!important;background-color:var(--ibiz-control-appmenu-item-selected-bg-color)}.ibiz-control-appmenu .el-menu--vertical .el-menu-item-group__title:hover,.ibiz-control-appmenu .el-menu--vertical .el-menu-item:hover,.ibiz-control-appmenu .el-menu--vertical .el-sub-menu__title:hover{color:var(--ibiz-control-appmenu-item-hover-color);background-color:var(--ibiz-control-appmenu-item-hover-bg-color)}.ibiz-control-appmenu .el-menu--vertical .el-menu-item .ibiz-control-appmenu__caption,.ibiz-control-appmenu .el-menu--vertical .el-menu-item-group__title .ibiz-control-appmenu__caption,.ibiz-control-appmenu .el-menu--vertical .el-sub-menu__title .ibiz-control-appmenu__caption{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-control-appmenu .el-menu--vertical .el-menu-item+.el-menu-item{margin-top:var(--ibiz-control-appmenu-item-gap)}.ibiz-control-appmenu .el-menu--vertical .el-sub-menu+.el-menu-item{margin-top:var(--ibiz-control-appmenu-item-gap)}.ibiz-control-appmenu .el-menu--vertical .el-sub-menu+.el-sub-menu{margin-top:var(--ibiz-control-appmenu-item-gap)}.ibiz-control-appmenu .el-menu--vertical .el-menu-item+.el-sub-menu{margin-top:var(--ibiz-control-appmenu-item-gap)}.ibiz-control-appmenu .el-menu--vertical .el-sub-menu__title+.el-menu{margin-top:var(--ibiz-control-appmenu-item-gap)}.ibiz-control-appmenu .el-menu--vertical::-webkit-scrollbar-thumb{background-color:var(--ibiz-control-appmenu-scorll-color)}.ibiz-control-appmenu .el-menu--horizontal{align-items:center;height:100%;padding:var(--ibiz-spacing-none) var(--ibiz-spacing-base-tight);overflow-x:hidden;background-color:transparent;border-bottom:none}.ibiz-control-appmenu .el-menu--horizontal .el-menu-item,.ibiz-control-appmenu .el-menu--horizontal .el-sub-menu__title{height:var(--ibiz-control-appmenu-item-horizontal-height);padding:var(--ibiz-control-appmenu-item-horizontal-padding);font-size:var(--ibiz-control-appmenu-item-horizontal-font-size);line-height:var(--ibiz-control-appmenu-item-horizontal-height);color:var(--ibiz-control-appmenu-item-horizontal-color);white-space:nowrap;border-width:0;border-radius:var(--ibiz-control-appmenu-item-horizontal-border-radius)}.ibiz-control-appmenu .el-menu--horizontal .el-menu-item:hover,.ibiz-control-appmenu .el-menu--horizontal .el-sub-menu__title:hover{color:var(--ibiz-control-appmenu-item-horizontal-hover-color);background-color:var(--ibiz-control-appmenu-item-horizontal-hover-bg-color)}.ibiz-control-appmenu .el-menu--horizontal .el-menu-item.is-active,.ibiz-control-appmenu .el-menu--horizontal .el-sub-menu__title.is-active{color:var(--ibiz-control-appmenu-item-selected-color)!important;background-color:var(--ibiz-control-appmenu-item-horizontal-selected-bg-color);border-top:var(--ibiz-control-appmenu-item-border)}.ibiz-control-appmenu .el-menu--horizontal .el-menu-item .el-sub-menu__icon-arrow,.ibiz-control-appmenu .el-menu--horizontal .el-sub-menu__title .el-sub-menu__icon-arrow{right:var(--ibiz-control-appmenu-icon-position)}.ibiz-control-appmenu .el-menu--horizontal .el-sub-menu{height:var(--ibiz-control-appmenu-item-horizontal-height)}.ibiz-control-appmenu .el-menu--horizontal .el-sub-menu>.el-sub-menu__title{padding-right:var(--ibiz-control-appmenu-item-horizontal-padding-right)}.ibiz-control-appmenu .el-menu--horizontal>.el-sub-menu:hover .el-sub-menu__title{color:var(--ibiz-control-appmenu-item-horizontal-hover-color);background-color:var(--ibiz-control-appmenu-item-horizontal-hover-bg-color)}.ibiz-control-appmenu .el-menu--horizontal>.el-sub-menu.is-active .el-sub-menu__title{color:var(--ibiz-control-appmenu-item-horizontal-selected-color);background-color:var(--ibiz-control-appmenu-item-horizontal-selected-bg-color);border-top:var(--ibiz-control-appmenu-item-border);border-bottom:0}.ibiz-control-appmenu .el-menu--horizontal::-webkit-scrollbar-thumb{background-color:var(--ibiz-control-appmenu-scorll-color)}.ibiz-control-appmenu .el-menu--horizontal .el-divider--vertical{border-color:var(--ibiz-color-border)}.ibiz-control-appmenu__icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-appmenu-icon-width);height:var(--ibiz-control-appmenu-icon-height);margin:var(--ibiz-control-appmenu-icon-margin);font-size:var(--ibiz-control-appmenu-icon-size)}.ibiz-control-appmenu__icon>svg{max-width:var(--ibiz-control-appmenu-icon-width);max-height:var(--ibiz-control-appmenu-icon-height)}.ibiz-control-appmenu.is-collapse>.el-menu.el-menu--vertical{padding:0 var(--ibiz-spacing-tight)}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu__icon{margin:var(--ibiz-spacing-none)}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu__item{display:flex;align-items:center;justify-content:center;padding:var(--ibiz-spacing-none);margin-bottom:var(--ibiz-spacing-tight)}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu-tooltip{width:100%}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu-submenu{display:block}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu-submenu>.el-sub-menu__title{display:flex;align-items:center;justify-content:center;display:flex;align-items:center;justify-content:center;padding:var(--ibiz-spacing-none);margin-bottom:var(--ibiz-spacing-tight);white-space:nowrap;cursor:pointer}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu-submenu .ibiz-control-appmenu-submenu__item{padding:var(--ibiz-spacing-none)}.ibiz-control-appmenu.is-show-collapse>.el-menu{height:calc(100% - var(--ibiz-control-appmenu-collapse-height));padding:0 var(--ibiz-spacing-base)}.ibiz-control-appmenu .ibiz-control-appmenu__counter{position:absolute;top:50%;right:5px;transform:translateY(-50%)}.ibiz-control-appmenu.is-scroll .el-menu.el-menu--vertical{padding-right:var(--ibiz-spacing-extra-tight)}.ibiz-control-appmenu-popup-container{--el-menu-hover-text-color:var(--ibiz-control-appmenu-item-color);--el-menu-hover-bg-color:transparent;--ibiz-control-appmenu-item-selected-border-color:transparent;--ibiz-control-appmenu-item-selected-color:var(--ibiz-color-primary-active-text);--ibiz-control-appmenu-item-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-control-appmenu-item-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-padding:var(--ibiz-spacing-tight);--ibiz-control-appmenu-item-border-radius:var(--ibiz-border-radius-small);--ibiz-control-appmenu-item-border:2px solid var(--ibiz-color-text-1);--ibiz-control-appmenu-item-font-size:var(--ibiz-font-size-header-6);--ibiz-control-appmenu-item-height:42px;--ibiz-control-appmenu-item-gap:2px;--ibiz-control-appmenu-item-color:var(--ibiz-color-text-menu);--ibiz-control-appmenu-item-separator-color:var(--ibiz-color-scroll-menu);--ibiz-control-appmenu-item-horizontal-selected-color:var(--ibiz-color-primary-active-text);--ibiz-control-appmenu-item-horizontal-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-horizontal-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-control-appmenu-item-horizontal-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-horizontal-color:var(--ibiz-color-text-menu);--ibiz-control-appmenu-item-horizontal-font-size:var(--ibiz-font-size-header-5);--ibiz-control-appmenu-item-horizontal-height:100%;--ibiz-control-appmenu-item-horizontal-border-radius:0;--ibiz-control-appmenu-item-horizontal-padding:0 var(--ibiz-spacing-base-loose);--ibiz-control-appmenu-item-horizontal-padding-right:calc(var(--ibiz-width-icon-large) + var(--ibiz-spacing-base-loose));--ibiz-control-appmenu-item-horizontal-popup-height:40px}.ibiz-control-appmenu-popup-container .ibiz-control-appmenu__rawitem{min-height:var(--ibiz-control-appmenu-item-height);line-height:var(--ibiz-control-appmenu-item-height)}.ibiz-control-appmenu-popup-container .ibiz-control-appmenu__rawitem .ibiz-rawitem{display:flex;align-items:center;justify-content:flex-start;font-size:var(--ibiz-control-appmenu-item-font-size);color:var(--ibiz-control-appmenu-item-color)}.ibiz-control-appmenu-popup-container .ibiz-control-appmenu__rawitem .ibiz-rawitem *{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-control-appmenu-popup-container .ibiz-control-appmenu-popup-container__extview1.el-menu--popup-container .el-menu--popup{padding:var(--ibiz-spacing-extra-tight) 0!important}.ibiz-control-appmenu-popup-container.el-menu--popup-container{--ibiz-control-appmenu-collapse-item-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-control-appmenu-collapse-item-padding:var(--ibiz-spacing-base);--ibiz-control-appmenu-icon-width:var(--ibiz-width-icon-large);--ibiz-control-appmenu-icon-height:var(--ibiz-width-icon-large);--ibiz-control-appmenu-icon-margin:0 var(--ibiz-spacing-tight) 0 0;--ibiz-control-appmenu-icon-position:calc(var(--ibiz-spacing-base) - 2px);--ibiz-control-appmenu-icon-size:var(--ibiz-width-icon-medium);--ibiz-control-appmenu-collapse-height:var(--ibiz-spacing-super-loose);--ibiz-control-appmenu-scorll-color:var(--ibiz-color-scroll-menu);--ibiz-control-appmenu-item-selected-border-color:transparent;--ibiz-control-appmenu-item-selected-color:var(--ibiz-color-primary-active-text);--ibiz-control-appmenu-item-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-control-appmenu-item-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-padding:var(--ibiz-spacing-tight);--ibiz-control-appmenu-item-border-radius:var(--ibiz-border-radius-small);--ibiz-control-appmenu-item-border:2px solid var(--ibiz-color-text-1);--ibiz-control-appmenu-item-font-size:var(--ibiz-font-size-header-6);--ibiz-control-appmenu-item-height:42px;--ibiz-control-appmenu-item-gap:2px;--ibiz-control-appmenu-item-color:var(--ibiz-color-text-menu);--ibiz-control-appmenu-item-separator-color:var(--ibiz-color-scroll-menu);--ibiz-control-appmenu-item-horizontal-selected-color:var(--ibiz-color-primary-active-text);--ibiz-control-appmenu-item-horizontal-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-horizontal-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-control-appmenu-item-horizontal-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-horizontal-color:var(--ibiz-color-text-menu);--ibiz-control-appmenu-item-horizontal-font-size:var(--ibiz-font-size-header-5);--ibiz-control-appmenu-item-horizontal-height:100%;--ibiz-control-appmenu-item-horizontal-border-radius:0;--ibiz-control-appmenu-item-horizontal-padding:0 var(--ibiz-spacing-base-loose);--ibiz-control-appmenu-item-horizontal-padding-right:calc(var(--ibiz-width-icon-large) + var(--ibiz-spacing-base-loose));--ibiz-control-appmenu-item-horizontal-popup-height:40px;border:none;box-shadow:var(--ibiz-shadow-elevated)}.ibiz-control-appmenu-popup-container.el-menu--popup-container .el-menu--popup{max-height:100vh;padding:var(--ibiz-spacing-extra-tight);overflow:auto;background-color:var(--ibiz-color-primary)}.ibiz-control-appmenu-popup-container.el-menu--popup-container .el-menu--popup .ibiz-control-appmenu-groupmenu .el-menu-item-group__title{padding:var(--ibiz-spacing-extra-tight) 0 var(--ibiz-spacing-extra-tight) 10px;font-size:var(--ibiz-control-appmenu-item-font-size);color:var(--ibiz-control-appmenu-item-horizontal-color)}.ibiz-control-appmenu-popup-container.el-menu--popup-container .el-menu--popup .ibiz-control-appmenu-groupmenu>ul>.el-menu-item{padding:0 var(--ibiz-spacing-extra-loose)}.ibiz-control-appmenu-popup-container.el-menu--popup-container .el-menu--popup .ibiz-control-appmenu-groupmenu>ul>.el-divider{width:calc(100% - 40px);margin:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose)}.ibiz-control-appmenu-popup-container.el-menu--popup-container .el-menu--popup .el-menu-item,.ibiz-control-appmenu-popup-container.el-menu--popup-container .el-menu--popup .el-sub-menu__title{display:flex;align-items:center;justify-content:flex-start;width:100%;height:var(--ibiz-control-appmenu-item-horizontal-popup-height);font-size:var(--ibiz-control-appmenu-item-font-size);color:var(--ibiz-control-appmenu-item-horizontal-color);white-space:nowrap;border-radius:var(--ibiz-control-appmenu-item-horizontal-border-radius)}.ibiz-control-appmenu-popup-container.el-menu--popup-container .el-menu--popup .el-menu-item.is-active,.ibiz-control-appmenu-popup-container.el-menu--popup-container .el-menu--popup .el-sub-menu__title.is-active{color:var(--ibiz-control-appmenu-item-horizontal-selected-color);background-color:var(--ibiz-control-appmenu-item-horizontal-selected-bg-color)}.ibiz-control-appmenu-popup-container.el-menu--popup-container .el-menu--popup .el-menu-item:hover,.ibiz-control-appmenu-popup-container.el-menu--popup-container .el-menu--popup .el-sub-menu__title:hover{color:var(--ibiz-control-appmenu-item-hover-color);background-color:var(--ibiz-control-appmenu-item-hover-bg-color)}.ibiz-control-appmenu-popup-container.el-menu--popup-container .el-menu--popup .el-menu-item .el-icon,.ibiz-control-appmenu-popup-container.el-menu--popup-container .el-menu--popup .el-sub-menu__title .el-icon{display:none}.ibiz-control-appmenu-popup-container .ibiz-control-appmenu__counter{position:absolute;top:50%;right:5px;height:20px;padding:var(--ibiz-spacing-none) var(--ibiz-spacing-tight);line-height:initial;color:var(--ibiz-color-danger-text);background-color:var(--ibiz-color-danger);border-radius:var(--ibiz-border-radius-medium);transform:translateY(-50%)}.ibiz-control-appmenu .ibiz-control-appmenu-collapse-icon{position:absolute;right:var(--ibiz-spacing-base-tight);bottom:var(--ibiz-spacing-tight);font-size:var(--ibiz-font-size-header-5);cursor:pointer}.ibiz-control-appmenu .ibiz-control-appmenu-collapse-icon.is-collapse{transform:rotate(180deg)}.ibiz-control-appmenu .ibiz-control-appmenu-menu-set{position:absolute;bottom:var(--ibiz-spacing-tight);left:var(--ibiz-spacing-base-tight);font-size:var(--ibiz-font-size-header-5);cursor:pointer}.ibiz-control-appmenu .ibiz-control-appmenu-menu-set.is-horizontal{right:0;bottom:0;left:unset;display:flex;align-items:center;height:100%}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu-collapse-icon{right:0;width:100%;text-align:center}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu-menu-set{position:absolute;right:var(--ibiz-spacing-base-tight);bottom:calc(var(--ibiz-spacing-tight) + 32px);font-size:var(--ibiz-font-size-header-5);text-align:center;cursor:pointer}.ibiz-control-appmenu.is-collapse.is-show-menu-design>.el-menu{height:calc(100% - var(--ibiz-control-appmenu-collapse-height) - var(--ibiz-control-appmenu-collapse-height))}.ibiz-control-appmenu__separator--horizontal{margin:var(--ibiz-spacing-tight) 0;border-color:var(--ibiz-control-appmenu-item-separator-color)}.el-menu--horizontal.el-menu--popup-container:has(.ibiz-control-appmenu__item,.ibiz-control-appmenu-submenu){--ibiz-control-appmenu-collapse-item-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-control-appmenu-collapse-item-padding:var(--ibiz-spacing-base);--ibiz-control-appmenu-icon-width:var(--ibiz-width-icon-large);--ibiz-control-appmenu-icon-height:var(--ibiz-width-icon-large);--ibiz-control-appmenu-icon-margin:0 var(--ibiz-spacing-tight) 0 0;--ibiz-control-appmenu-icon-position:calc(var(--ibiz-spacing-base) - 2px);--ibiz-control-appmenu-icon-size:var(--ibiz-width-icon-medium);--ibiz-control-appmenu-collapse-height:var(--ibiz-spacing-super-loose);--ibiz-control-appmenu-scorll-color:var(--ibiz-color-scroll-menu);--ibiz-control-appmenu-item-selected-border-color:transparent;--ibiz-control-appmenu-item-selected-color:var(--ibiz-color-primary-active-text);--ibiz-control-appmenu-item-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-control-appmenu-item-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-padding:var(--ibiz-spacing-tight);--ibiz-control-appmenu-item-border-radius:var(--ibiz-border-radius-small);--ibiz-control-appmenu-item-border:2px solid var(--ibiz-color-text-1);--ibiz-control-appmenu-item-font-size:var(--ibiz-font-size-header-6);--ibiz-control-appmenu-item-height:42px;--ibiz-control-appmenu-item-gap:2px;--ibiz-control-appmenu-item-color:var(--ibiz-color-text-menu);--ibiz-control-appmenu-item-separator-color:var(--ibiz-color-scroll-menu);--ibiz-control-appmenu-item-horizontal-selected-color:var(--ibiz-color-primary-active-text);--ibiz-control-appmenu-item-horizontal-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-horizontal-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-control-appmenu-item-horizontal-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-horizontal-color:var(--ibiz-color-text-menu);--ibiz-control-appmenu-item-horizontal-font-size:var(--ibiz-font-size-header-5);--ibiz-control-appmenu-item-horizontal-height:100%;--ibiz-control-appmenu-item-horizontal-border-radius:0;--ibiz-control-appmenu-item-horizontal-padding:0 var(--ibiz-spacing-base-loose);--ibiz-control-appmenu-item-horizontal-padding-right:calc(var(--ibiz-width-icon-large) + var(--ibiz-spacing-base-loose));--ibiz-control-appmenu-item-horizontal-popup-height:40px;border:none;box-shadow:var(--ibiz-shadow-elevated)}.el-menu--horizontal.el-menu--popup-container:has(.ibiz-control-appmenu__item,.ibiz-control-appmenu-submenu) .el-menu--popup{padding:var(--ibiz-spacing-extra-tight);background-color:var(--ibiz-color-primary)}.el-menu--horizontal.el-menu--popup-container:has(.ibiz-control-appmenu__item,.ibiz-control-appmenu-submenu) .el-menu--popup .el-menu-item,.el-menu--horizontal.el-menu--popup-container:has(.ibiz-control-appmenu__item,.ibiz-control-appmenu-submenu) .el-menu--popup .el-sub-menu__title{display:flex;align-items:center;justify-content:flex-start;width:100%;height:var(--ibiz-control-appmenu-item-horizontal-popup-height);font-size:var(--ibiz-control-appmenu-item-font-size);color:var(--ibiz-control-appmenu-item-horizontal-color);white-space:nowrap;border-radius:var(--ibiz-control-appmenu-item-horizontal-border-radius)}.el-menu--horizontal.el-menu--popup-container:has(.ibiz-control-appmenu__item,.ibiz-control-appmenu-submenu) .el-menu--popup .el-menu-item.is-active,.el-menu--horizontal.el-menu--popup-container:has(.ibiz-control-appmenu__item,.ibiz-control-appmenu-submenu) .el-menu--popup .el-sub-menu__title.is-active{color:var(--ibiz-control-appmenu-item-horizontal-selected-color);background-color:var(--ibiz-control-appmenu-item-horizontal-selected-bg-color)}.el-menu--horizontal.el-menu--popup-container:has(.ibiz-control-appmenu__item,.ibiz-control-appmenu-submenu) .el-menu--popup .el-menu-item:hover,.el-menu--horizontal.el-menu--popup-container:has(.ibiz-control-appmenu__item,.ibiz-control-appmenu-submenu) .el-menu--popup .el-sub-menu__title:hover{color:var(--ibiz-control-appmenu-item-hover-color);background-color:var(--ibiz-control-appmenu-item-hover-bg-color)}.el-menu--horizontal.el-menu--popup-container:has(.ibiz-control-appmenu__item,.ibiz-control-appmenu-submenu) .el-menu--popup .el-menu-item .el-icon,.el-menu--horizontal.el-menu--popup-container:has(.ibiz-control-appmenu__item,.ibiz-control-appmenu-submenu) .el-menu--popup .el-sub-menu__title .el-icon{display:none}.el-menu--horizontal.el-menu--popup-container:has(.ibiz-control-appmenu__item,.ibiz-control-appmenu-submenu) .el-menu--popup .el-menu-item.is-disabled:hover{background-color:var(--ibiz-control-appmenu-item-hover-bg-color)!important}.el-menu--horizontal.el-menu--popup-container:has(.ibiz-control-appmenu__item,.ibiz-control-appmenu-submenu) .el-menu .el-sub-menu.is-active>.el-sub-menu__title{color:var(--ibiz-control-appmenu-item-horizontal-selected-color)}
+.ibiz-control-appmenu{position:relative;width:100%;height:100%;--ibiz-control-appmenu-collapse-item-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-control-appmenu-collapse-item-padding:var(--ibiz-spacing-base);--ibiz-control-appmenu-collapse-height:var(--ibiz-spacing-super-loose);--ibiz-control-appmenu-scorll-color:var(--ibiz-color-scroll-menu);--ibiz-control-appmenu-item-selected-border-color:transparent;--ibiz-control-appmenu-item-selected-color:var(--ibiz-color-primary-active-text);--ibiz-control-appmenu-item-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-control-appmenu-item-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-padding:var(--ibiz-spacing-tight);--ibiz-control-appmenu-item-border-radius:var(--ibiz-border-radius-small);--ibiz-control-appmenu-item-border:2px solid var(--ibiz-color-text-1);--ibiz-control-appmenu-item-font-size:var(--ibiz-font-size-header-6);--ibiz-control-appmenu-item-height:42px;--ibiz-control-appmenu-item-gap:2px;--ibiz-control-appmenu-item-color:var(--ibiz-color-text-menu);--ibiz-control-appmenu-item-horizontal-selected-color:var(--ibiz-color-primary-active-text);--ibiz-control-appmenu-item-horizontal-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-horizontal-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-control-appmenu-item-horizontal-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-horizontal-color:var(--ibiz-color-text-menu);--ibiz-control-appmenu-item-horizontal-font-size:var(--ibiz-font-size-header-5);--ibiz-control-appmenu-item-horizontal-height:100%;--ibiz-control-appmenu-item-horizontal-border-radius:0;--ibiz-control-appmenu-item-horizontal-padding:0 var(--ibiz-spacing-base-loose);--ibiz-control-appmenu-item-horizontal-padding-right:calc(var(--ibiz-width-icon-large) + var(--ibiz-spacing-base-loose));--ibiz-control-appmenu-item-horizontal-popup-height:40px;--ibiz-control-appmenu-submenu-gap:var(--ibiz-control-appmenu-item-gap);--ibiz-control-appmenu-item-icon-width:var(--ibiz-width-icon-large);--ibiz-control-appmenu-item-icon-height:var(--ibiz-width-icon-large);--ibiz-control-appmenu-item-icon-margin:0 var(--ibiz-spacing-tight) 0 0;--ibiz-control-appmenu-item-icon-position:calc(var(--ibiz-spacing-base) - 2px);--ibiz-control-appmenu-item-icon-size:var(--ibiz-width-icon-medium);--ibiz-control-appmenu-divider-color:var(--ibiz-color-scroll-menu);--ibiz-control-appmenu-divider-margin:var(--ibiz-spacing-tight) 0;--ibiz-control-appmenu-collapse-font-size:var(--ibiz-font-size-header-5);--ibiz-control-appmenu-collapse-bottom:var(--ibiz-spacing-tight);--ibiz-control-appmenu-collapse-right:var(--ibiz-spacing-base-tight)}.ibiz-control-appmenu>.el-menu{height:100%;padding:var(--ibiz-spacing-none) var(--ibiz-spacing-base);overflow-y:auto;border-right:0;--el-menu-hover-text-color:var(--ibiz-control-appmenu-item-color);--el-menu-hover-bg-color:transparent;--ibiz-control-appmenu-item-selected-border-color:transparent;--ibiz-control-appmenu-item-selected-color:var(--ibiz-color-primary-active-text);--ibiz-control-appmenu-item-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-control-appmenu-item-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-padding:var(--ibiz-spacing-tight);--ibiz-control-appmenu-item-border-radius:var(--ibiz-border-radius-small);--ibiz-control-appmenu-item-border:2px solid var(--ibiz-color-text-1);--ibiz-control-appmenu-item-font-size:var(--ibiz-font-size-header-6);--ibiz-control-appmenu-item-height:42px;--ibiz-control-appmenu-item-gap:2px;--ibiz-control-appmenu-item-color:var(--ibiz-color-text-menu);--ibiz-control-appmenu-item-horizontal-selected-color:var(--ibiz-color-primary-active-text);--ibiz-control-appmenu-item-horizontal-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-horizontal-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-control-appmenu-item-horizontal-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-horizontal-color:var(--ibiz-color-text-menu);--ibiz-control-appmenu-item-horizontal-font-size:var(--ibiz-font-size-header-5);--ibiz-control-appmenu-item-horizontal-height:100%;--ibiz-control-appmenu-item-horizontal-border-radius:0;--ibiz-control-appmenu-item-horizontal-padding:0 var(--ibiz-spacing-base-loose);--ibiz-control-appmenu-item-horizontal-padding-right:calc(var(--ibiz-width-icon-large) + var(--ibiz-spacing-base-loose));--ibiz-control-appmenu-item-horizontal-popup-height:40px}.ibiz-control-appmenu>.el-menu .ibiz-control-appmenu__rawitem{min-height:var(--ibiz-control-appmenu-item-height);line-height:var(--ibiz-control-appmenu-item-height)}.ibiz-control-appmenu>.el-menu .ibiz-control-appmenu__rawitem .ibiz-rawitem{display:flex;align-items:center;justify-content:flex-start;font-size:var(--ibiz-control-appmenu-item-font-size);color:var(--ibiz-control-appmenu-item-color)}.ibiz-control-appmenu>.el-menu .ibiz-control-appmenu__rawitem .ibiz-rawitem *{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-control-appmenu .ibiz-control-appmenu-groupmenu .el-menu-item-group__title{padding:var(--ibiz-spacing-extra-tight) 0 var(--ibiz-spacing-extra-tight) 10px;font-size:var(--ibiz-control-appmenu-item-font-size);color:var(--ibiz-control-appmenu-item-horizontal-color)}.ibiz-control-appmenu .ibiz-control-appmenu-groupmenu>ul>.el-menu-item{padding:0 var(--ibiz-spacing-extra-loose)}.ibiz-control-appmenu .ibiz-control-appmenu-groupmenu>ul>.el-divider{width:calc(100% - 40px);margin:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose)}.ibiz-control-appmenu .el-sub-menu .el-sub-menu__icon-arrow{right:10px;width:var(--ibiz-control-appmenu-item-icon-width);height:var(--ibiz-control-appmenu-item-icon-height);margin-top:-10px;font-size:var(--ibiz-control-appmenu-item-icon-width)}.ibiz-control-appmenu .el-sub-menu .el-menu-item{padding:calc(var(--ibiz-control-appmenu-item-padding) * .875) calc(var(--ibiz-control-appmenu-item-padding) * 2.5)}.ibiz-control-appmenu .el-sub-menu .el-sub-menu__title>.ibiz-control-appmenu__counter{right:30px}.ibiz-control-appmenu .el-menu--vertical{width:100%}.ibiz-control-appmenu .el-menu--vertical .el-menu-item,.ibiz-control-appmenu .el-menu--vertical .el-menu-item-group__title,.ibiz-control-appmenu .el-menu--vertical .el-sub-menu__title{display:flex;align-items:center;justify-content:flex-start;--el-menu-base-level-padding:var(--ibiz-control-appmenu-item-padding);width:100%;height:var(--ibiz-control-appmenu-item-height);font-size:var(--ibiz-control-appmenu-item-font-size);color:var(--ibiz-control-appmenu-item-color);white-space:nowrap;border-radius:var(--ibiz-control-appmenu-item-border-radius)}.ibiz-control-appmenu .el-menu--vertical .el-menu-item-group__title.is-active,.ibiz-control-appmenu .el-menu--vertical .el-menu-item.is-active,.ibiz-control-appmenu .el-menu--vertical .el-sub-menu__title.is-active{color:var(--ibiz-control-appmenu-item-selected-color)!important;background-color:var(--ibiz-control-appmenu-item-selected-bg-color)}.ibiz-control-appmenu .el-menu--vertical .el-menu-item-group__title:hover,.ibiz-control-appmenu .el-menu--vertical .el-menu-item:hover,.ibiz-control-appmenu .el-menu--vertical .el-sub-menu__title:hover{color:var(--ibiz-control-appmenu-item-hover-color);background-color:var(--ibiz-control-appmenu-item-hover-bg-color)}.ibiz-control-appmenu .el-menu--vertical .el-menu-item .ibiz-control-appmenu__caption,.ibiz-control-appmenu .el-menu--vertical .el-menu-item-group__title .ibiz-control-appmenu__caption,.ibiz-control-appmenu .el-menu--vertical .el-sub-menu__title .ibiz-control-appmenu__caption{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-control-appmenu .el-menu--vertical .el-menu-item+.el-menu-item{margin-top:var(--ibiz-control-appmenu-item-gap)}.ibiz-control-appmenu .el-menu--vertical .el-sub-menu+.el-menu-item{margin-top:var(--ibiz-control-appmenu-item-gap)}.ibiz-control-appmenu .el-menu--vertical .el-sub-menu+.el-sub-menu{margin-top:var(--ibiz-control-appmenu-submenu-gap)}.ibiz-control-appmenu .el-menu--vertical .el-menu-item+.el-sub-menu{margin-top:var(--ibiz-control-appmenu-submenu-gap)}.ibiz-control-appmenu .el-menu--vertical .el-sub-menu__title+.el-menu{margin-top:var(--ibiz-control-appmenu-item-gap)}.ibiz-control-appmenu .el-menu--vertical::-webkit-scrollbar-thumb{background-color:var(--ibiz-control-appmenu-scorll-color)}.ibiz-control-appmenu .el-menu--horizontal{align-items:center;height:100%;padding:var(--ibiz-spacing-none) var(--ibiz-spacing-base-tight);overflow-x:hidden;background-color:transparent;border-bottom:none}.ibiz-control-appmenu .el-menu--horizontal .el-menu-item,.ibiz-control-appmenu .el-menu--horizontal .el-sub-menu__title{height:var(--ibiz-control-appmenu-item-horizontal-height);padding:var(--ibiz-control-appmenu-item-horizontal-padding);font-size:var(--ibiz-control-appmenu-item-horizontal-font-size);line-height:var(--ibiz-control-appmenu-item-horizontal-height);color:var(--ibiz-control-appmenu-item-horizontal-color);white-space:nowrap;border-width:0;border-radius:var(--ibiz-control-appmenu-item-horizontal-border-radius)}.ibiz-control-appmenu .el-menu--horizontal .el-menu-item:hover,.ibiz-control-appmenu .el-menu--horizontal .el-sub-menu__title:hover{color:var(--ibiz-control-appmenu-item-horizontal-hover-color);background-color:var(--ibiz-control-appmenu-item-horizontal-hover-bg-color)}.ibiz-control-appmenu .el-menu--horizontal .el-menu-item.is-active,.ibiz-control-appmenu .el-menu--horizontal .el-sub-menu__title.is-active{color:var(--ibiz-control-appmenu-item-selected-color)!important;background-color:var(--ibiz-control-appmenu-item-horizontal-selected-bg-color);border-top:var(--ibiz-control-appmenu-item-border)}.ibiz-control-appmenu .el-menu--horizontal .el-menu-item .el-sub-menu__icon-arrow,.ibiz-control-appmenu .el-menu--horizontal .el-sub-menu__title .el-sub-menu__icon-arrow{right:var(--ibiz-control-appmenu-item-icon-position)}.ibiz-control-appmenu .el-menu--horizontal .el-sub-menu{height:var(--ibiz-control-appmenu-item-horizontal-height)}.ibiz-control-appmenu .el-menu--horizontal .el-sub-menu>.el-sub-menu__title{padding-right:var(--ibiz-control-appmenu-item-horizontal-padding-right)}.ibiz-control-appmenu .el-menu--horizontal>.el-sub-menu:hover .el-sub-menu__title{color:var(--ibiz-control-appmenu-item-horizontal-hover-color);background-color:var(--ibiz-control-appmenu-item-horizontal-hover-bg-color)}.ibiz-control-appmenu .el-menu--horizontal>.el-sub-menu.is-active .el-sub-menu__title{color:var(--ibiz-control-appmenu-item-horizontal-selected-color);background-color:var(--ibiz-control-appmenu-item-horizontal-selected-bg-color);border-top:var(--ibiz-control-appmenu-item-border);border-bottom:0}.ibiz-control-appmenu .el-menu--horizontal::-webkit-scrollbar-thumb{background-color:var(--ibiz-control-appmenu-scorll-color)}.ibiz-control-appmenu .el-menu--horizontal .el-divider--vertical{border-color:var(--ibiz-control-appmenu-divider-color)}.ibiz-control-appmenu__icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-appmenu-item-icon-width);height:var(--ibiz-control-appmenu-item-icon-height);margin:var(--ibiz-control-appmenu-item-icon-margin);font-size:var(--ibiz-control-appmenu-item-icon-size)}.ibiz-control-appmenu__icon>svg{max-width:var(--ibiz-control-appmenu-item-icon-width);max-height:var(--ibiz-control-appmenu-item-icon-height)}.ibiz-control-appmenu.is-collapse>.el-menu.el-menu--vertical{padding:0 var(--ibiz-spacing-tight)}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu__icon{margin:var(--ibiz-spacing-none)}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu__item{display:flex;align-items:center;justify-content:center;padding:var(--ibiz-spacing-none);margin-bottom:var(--ibiz-spacing-tight)}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu-tooltip{width:100%}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu-submenu{display:block}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu-submenu>.el-sub-menu__title{display:flex;align-items:center;justify-content:center;display:flex;align-items:center;justify-content:center;padding:var(--ibiz-spacing-none);margin-bottom:var(--ibiz-spacing-tight);white-space:nowrap;cursor:pointer}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu-submenu .ibiz-control-appmenu-submenu__item{padding:var(--ibiz-spacing-none)}.ibiz-control-appmenu.is-show-collapse>.el-menu{height:calc(100% - var(--ibiz-control-appmenu-collapse-height));padding:0 var(--ibiz-spacing-base)}.ibiz-control-appmenu .ibiz-control-appmenu__counter{position:absolute;top:50%;right:5px;transform:translateY(-50%)}.ibiz-control-appmenu.is-scroll .el-menu.el-menu--vertical{padding-right:var(--ibiz-spacing-extra-tight)}.ibiz-control-appmenu-popup-container{--el-menu-hover-text-color:var(--ibiz-control-appmenu-item-color);--el-menu-hover-bg-color:transparent;--ibiz-control-appmenu-item-selected-border-color:transparent;--ibiz-control-appmenu-item-selected-color:var(--ibiz-color-primary-active-text);--ibiz-control-appmenu-item-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-control-appmenu-item-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-padding:var(--ibiz-spacing-tight);--ibiz-control-appmenu-item-border-radius:var(--ibiz-border-radius-small);--ibiz-control-appmenu-item-border:2px solid var(--ibiz-color-text-1);--ibiz-control-appmenu-item-font-size:var(--ibiz-font-size-header-6);--ibiz-control-appmenu-item-height:42px;--ibiz-control-appmenu-item-gap:2px;--ibiz-control-appmenu-item-color:var(--ibiz-color-text-menu);--ibiz-control-appmenu-item-horizontal-selected-color:var(--ibiz-color-primary-active-text);--ibiz-control-appmenu-item-horizontal-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-horizontal-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-control-appmenu-item-horizontal-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-horizontal-color:var(--ibiz-color-text-menu);--ibiz-control-appmenu-item-horizontal-font-size:var(--ibiz-font-size-header-5);--ibiz-control-appmenu-item-horizontal-height:100%;--ibiz-control-appmenu-item-horizontal-border-radius:0;--ibiz-control-appmenu-item-horizontal-padding:0 var(--ibiz-spacing-base-loose);--ibiz-control-appmenu-item-horizontal-padding-right:calc(var(--ibiz-width-icon-large) + var(--ibiz-spacing-base-loose));--ibiz-control-appmenu-item-horizontal-popup-height:40px}.ibiz-control-appmenu-popup-container .ibiz-control-appmenu__rawitem{min-height:var(--ibiz-control-appmenu-item-height);line-height:var(--ibiz-control-appmenu-item-height)}.ibiz-control-appmenu-popup-container .ibiz-control-appmenu__rawitem .ibiz-rawitem{display:flex;align-items:center;justify-content:flex-start;font-size:var(--ibiz-control-appmenu-item-font-size);color:var(--ibiz-control-appmenu-item-color)}.ibiz-control-appmenu-popup-container .ibiz-control-appmenu__rawitem .ibiz-rawitem *{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-control-appmenu-popup-container .ibiz-control-appmenu-popup-container__extview1.el-menu--popup-container .el-menu--popup{padding:var(--ibiz-spacing-extra-tight) 0!important}.ibiz-control-appmenu-popup-container.el-menu--popup-container{--ibiz-control-appmenu-collapse-item-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-control-appmenu-collapse-item-padding:var(--ibiz-spacing-base);--ibiz-control-appmenu-collapse-height:var(--ibiz-spacing-super-loose);--ibiz-control-appmenu-scorll-color:var(--ibiz-color-scroll-menu);--ibiz-control-appmenu-item-selected-border-color:transparent;--ibiz-control-appmenu-item-selected-color:var(--ibiz-color-primary-active-text);--ibiz-control-appmenu-item-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-control-appmenu-item-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-padding:var(--ibiz-spacing-tight);--ibiz-control-appmenu-item-border-radius:var(--ibiz-border-radius-small);--ibiz-control-appmenu-item-border:2px solid var(--ibiz-color-text-1);--ibiz-control-appmenu-item-font-size:var(--ibiz-font-size-header-6);--ibiz-control-appmenu-item-height:42px;--ibiz-control-appmenu-item-gap:2px;--ibiz-control-appmenu-item-color:var(--ibiz-color-text-menu);--ibiz-control-appmenu-item-horizontal-selected-color:var(--ibiz-color-primary-active-text);--ibiz-control-appmenu-item-horizontal-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-horizontal-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-control-appmenu-item-horizontal-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-horizontal-color:var(--ibiz-color-text-menu);--ibiz-control-appmenu-item-horizontal-font-size:var(--ibiz-font-size-header-5);--ibiz-control-appmenu-item-horizontal-height:100%;--ibiz-control-appmenu-item-horizontal-border-radius:0;--ibiz-control-appmenu-item-horizontal-padding:0 var(--ibiz-spacing-base-loose);--ibiz-control-appmenu-item-horizontal-padding-right:calc(var(--ibiz-width-icon-large) + var(--ibiz-spacing-base-loose));--ibiz-control-appmenu-item-horizontal-popup-height:40px;--ibiz-control-appmenu-item-icon-width:var(--ibiz-width-icon-large);--ibiz-control-appmenu-item-icon-height:var(--ibiz-width-icon-large);--ibiz-control-appmenu-item-icon-margin:0 var(--ibiz-spacing-tight) 0 0;--ibiz-control-appmenu-item-icon-position:calc(var(--ibiz-spacing-base) - 2px);--ibiz-control-appmenu-item-icon-size:var(--ibiz-width-icon-medium);border:none;box-shadow:var(--ibiz-shadow-elevated)}.ibiz-control-appmenu-popup-container.el-menu--popup-container .el-menu--popup{max-height:100vh;padding:var(--ibiz-spacing-extra-tight);overflow:auto;background-color:var(--ibiz-color-primary)}.ibiz-control-appmenu-popup-container.el-menu--popup-container .el-menu--popup .ibiz-control-appmenu-groupmenu .el-menu-item-group__title{padding:var(--ibiz-spacing-extra-tight) 0 var(--ibiz-spacing-extra-tight) 10px;font-size:var(--ibiz-control-appmenu-item-font-size);color:var(--ibiz-control-appmenu-item-horizontal-color)}.ibiz-control-appmenu-popup-container.el-menu--popup-container .el-menu--popup .ibiz-control-appmenu-groupmenu>ul>.el-menu-item{padding:0 var(--ibiz-spacing-extra-loose)}.ibiz-control-appmenu-popup-container.el-menu--popup-container .el-menu--popup .ibiz-control-appmenu-groupmenu>ul>.el-divider{width:calc(100% - 40px);margin:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose)}.ibiz-control-appmenu-popup-container.el-menu--popup-container .el-menu--popup .el-menu-item,.ibiz-control-appmenu-popup-container.el-menu--popup-container .el-menu--popup .el-sub-menu__title{display:flex;align-items:center;justify-content:flex-start;width:100%;height:var(--ibiz-control-appmenu-item-horizontal-popup-height);font-size:var(--ibiz-control-appmenu-item-font-size);color:var(--ibiz-control-appmenu-item-horizontal-color);white-space:nowrap;border-radius:var(--ibiz-control-appmenu-item-horizontal-border-radius)}.ibiz-control-appmenu-popup-container.el-menu--popup-container .el-menu--popup .el-menu-item.is-active,.ibiz-control-appmenu-popup-container.el-menu--popup-container .el-menu--popup .el-sub-menu__title.is-active{color:var(--ibiz-control-appmenu-item-horizontal-selected-color);background-color:var(--ibiz-control-appmenu-item-horizontal-selected-bg-color)}.ibiz-control-appmenu-popup-container.el-menu--popup-container .el-menu--popup .el-menu-item:hover,.ibiz-control-appmenu-popup-container.el-menu--popup-container .el-menu--popup .el-sub-menu__title:hover{color:var(--ibiz-control-appmenu-item-hover-color);background-color:var(--ibiz-control-appmenu-item-hover-bg-color)}.ibiz-control-appmenu-popup-container.el-menu--popup-container .el-menu--popup .el-menu-item .el-icon,.ibiz-control-appmenu-popup-container.el-menu--popup-container .el-menu--popup .el-sub-menu__title .el-icon{display:none}.ibiz-control-appmenu-popup-container .ibiz-control-appmenu__counter{position:absolute;top:50%;right:5px;height:20px;padding:var(--ibiz-spacing-none) var(--ibiz-spacing-tight);line-height:initial;color:var(--ibiz-color-danger-text);background-color:var(--ibiz-color-danger);border-radius:var(--ibiz-border-radius-medium);transform:translateY(-50%)}.ibiz-control-appmenu .ibiz-control-appmenu-collapse-icon{position:absolute;right:var(--ibiz-control-appmenu-collapse-right);bottom:var(--ibiz-control-appmenu-collapse-bottom);font-size:var(--ibiz-control-appmenu-collapse-font-size);cursor:pointer}.ibiz-control-appmenu .ibiz-control-appmenu-collapse-icon.is-collapse{transform:rotate(180deg)}.ibiz-control-appmenu .ibiz-control-appmenu-menu-set{position:absolute;bottom:var(--ibiz-spacing-tight);left:var(--ibiz-spacing-base-tight);font-size:var(--ibiz-font-size-header-5);cursor:pointer}.ibiz-control-appmenu .ibiz-control-appmenu-menu-set.is-horizontal{right:0;bottom:0;left:unset;display:flex;align-items:center;height:100%}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu-collapse-icon{right:0;width:100%;text-align:center}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu-menu-set{position:absolute;right:var(--ibiz-spacing-base-tight);bottom:calc(var(--ibiz-spacing-tight) + 32px);font-size:var(--ibiz-font-size-header-5);text-align:center;cursor:pointer}.ibiz-control-appmenu.is-collapse.is-show-menu-design>.el-menu{height:calc(100% - var(--ibiz-control-appmenu-collapse-height) - var(--ibiz-control-appmenu-collapse-height))}.ibiz-control-appmenu__separator--horizontal{margin:var(--ibiz-control-appmenu-divider-margin);border-color:var(--ibiz-control-appmenu-divider-color)}.el-menu--horizontal.el-menu--popup-container:has(.ibiz-control-appmenu__item,.ibiz-control-appmenu-submenu){--ibiz-control-appmenu-collapse-item-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-control-appmenu-collapse-item-padding:var(--ibiz-spacing-base);--ibiz-control-appmenu-collapse-height:var(--ibiz-spacing-super-loose);--ibiz-control-appmenu-scorll-color:var(--ibiz-color-scroll-menu);--ibiz-control-appmenu-item-selected-border-color:transparent;--ibiz-control-appmenu-item-selected-color:var(--ibiz-color-primary-active-text);--ibiz-control-appmenu-item-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-control-appmenu-item-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-padding:var(--ibiz-spacing-tight);--ibiz-control-appmenu-item-border-radius:var(--ibiz-border-radius-small);--ibiz-control-appmenu-item-border:2px solid var(--ibiz-color-text-1);--ibiz-control-appmenu-item-font-size:var(--ibiz-font-size-header-6);--ibiz-control-appmenu-item-height:42px;--ibiz-control-appmenu-item-gap:2px;--ibiz-control-appmenu-item-color:var(--ibiz-color-text-menu);--ibiz-control-appmenu-item-horizontal-selected-color:var(--ibiz-color-primary-active-text);--ibiz-control-appmenu-item-horizontal-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-horizontal-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-control-appmenu-item-horizontal-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-horizontal-color:var(--ibiz-color-text-menu);--ibiz-control-appmenu-item-horizontal-font-size:var(--ibiz-font-size-header-5);--ibiz-control-appmenu-item-horizontal-height:100%;--ibiz-control-appmenu-item-horizontal-border-radius:0;--ibiz-control-appmenu-item-horizontal-padding:0 var(--ibiz-spacing-base-loose);--ibiz-control-appmenu-item-horizontal-padding-right:calc(var(--ibiz-width-icon-large) + var(--ibiz-spacing-base-loose));--ibiz-control-appmenu-item-horizontal-popup-height:40px;--ibiz-control-appmenu-item-icon-width:var(--ibiz-width-icon-large);--ibiz-control-appmenu-item-icon-height:var(--ibiz-width-icon-large);--ibiz-control-appmenu-item-icon-margin:0 var(--ibiz-spacing-tight) 0 0;--ibiz-control-appmenu-item-icon-position:calc(var(--ibiz-spacing-base) - 2px);--ibiz-control-appmenu-item-icon-size:var(--ibiz-width-icon-medium);border:none;box-shadow:var(--ibiz-shadow-elevated)}.el-menu--horizontal.el-menu--popup-container:has(.ibiz-control-appmenu__item,.ibiz-control-appmenu-submenu) .el-menu--popup{padding:var(--ibiz-spacing-extra-tight);background-color:var(--ibiz-color-primary)}.el-menu--horizontal.el-menu--popup-container:has(.ibiz-control-appmenu__item,.ibiz-control-appmenu-submenu) .el-menu--popup .el-menu-item,.el-menu--horizontal.el-menu--popup-container:has(.ibiz-control-appmenu__item,.ibiz-control-appmenu-submenu) .el-menu--popup .el-sub-menu__title{display:flex;align-items:center;justify-content:flex-start;width:100%;height:var(--ibiz-control-appmenu-item-horizontal-popup-height);font-size:var(--ibiz-control-appmenu-item-font-size);color:var(--ibiz-control-appmenu-item-horizontal-color);white-space:nowrap;border-radius:var(--ibiz-control-appmenu-item-horizontal-border-radius)}.el-menu--horizontal.el-menu--popup-container:has(.ibiz-control-appmenu__item,.ibiz-control-appmenu-submenu) .el-menu--popup .el-menu-item.is-active,.el-menu--horizontal.el-menu--popup-container:has(.ibiz-control-appmenu__item,.ibiz-control-appmenu-submenu) .el-menu--popup .el-sub-menu__title.is-active{color:var(--ibiz-control-appmenu-item-horizontal-selected-color);background-color:var(--ibiz-control-appmenu-item-horizontal-selected-bg-color)}.el-menu--horizontal.el-menu--popup-container:has(.ibiz-control-appmenu__item,.ibiz-control-appmenu-submenu) .el-menu--popup .el-menu-item:hover,.el-menu--horizontal.el-menu--popup-container:has(.ibiz-control-appmenu__item,.ibiz-control-appmenu-submenu) .el-menu--popup .el-sub-menu__title:hover{color:var(--ibiz-control-appmenu-item-hover-color);background-color:var(--ibiz-control-appmenu-item-hover-bg-color)}.el-menu--horizontal.el-menu--popup-container:has(.ibiz-control-appmenu__item,.ibiz-control-appmenu-submenu) .el-menu--popup .el-menu-item .el-icon,.el-menu--horizontal.el-menu--popup-container:has(.ibiz-control-appmenu__item,.ibiz-control-appmenu-submenu) .el-menu--popup .el-sub-menu__title .el-icon{display:none}.el-menu--horizontal.el-menu--popup-container:has(.ibiz-control-appmenu__item,.ibiz-control-appmenu-submenu) .el-menu--popup .el-menu-item.is-disabled:hover{background-color:var(--ibiz-control-appmenu-item-hover-bg-color)!important}.el-menu--horizontal.el-menu--popup-container:has(.ibiz-control-appmenu__item,.ibiz-control-appmenu-submenu) .el-menu .el-sub-menu.is-active>.el-sub-menu__title{color:var(--ibiz-control-appmenu-item-horizontal-selected-color)}

package/lib/control/calendar/calendar-util.cjs

@@ -38,7 +38,7 @@ function useCalendarLegend(ns) {
     () => getVarValue("".concat(ns.cssVarName("color-black")))
   );
   const getBkColor = (_index) => {
-    return bgColors[_index] || bgColors[0];
+    return bgColors[_index % bgColors.length] || bgColors[0];
   };
   const getActBdrColors = (_index) => {
     return actBdrColors[_index] || getVarValue("".concat(ns.cssVarName("color-primary")));

package/lib/control/calendar/calendar.cjs

@@ -7,6 +7,7 @@ var dayjs = require('dayjs');
 var lodashEs = require('lodash-es');
 var core = require('@ibiz-template/core');
 var index = require('./components/custom-calendar/index.cjs');
+var index$1 = require('./components/calendar-user2/index.cjs');
 var calendarUtil = require('./calendar-util.cjs');
 require('../../util/index.cjs');
 require('./calendar.css');
@@ -76,6 +77,10 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
     const {
       UIStore
     } = vue3Util.useUIStore();
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(c);
     const {
       getFontColor,
       getBkColor,
@@ -92,15 +97,13 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
       const result = !Object.values(c.loadMoreItems).some((item) => item.curPage < item.totalPage);
       return result;
     });
-    const monthLegendClick = (_item) => {
-      Object.assign(_item, {
-        isShow: !_item.isShow
-      });
+    const legendType = ["DAY", "WEEK", "MONTH", "USER2"];
+    const legends = vue.ref([]);
+    const onLegendClick = (item) => {
+      item.isShow = !item.isShow;
     };
-    const legendItems = vue.ref([]);
-    const legendType = ["DAY", "WEEK", "MONTH"];
     const calcLegend = () => {
-      legendItems.value = c.state.legends.map((_item, index) => {
+      legends.value = c.state.legends.map((_item, index) => {
         const tempItem = {
           ..._item,
           isShow: true
@@ -192,24 +195,32 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
       return false;
     };
     vue.watch(() => c.state.selectedDate, (newVal, oldVal) => {
-      if (timeRangeComparison(newVal, oldVal)) {
+      if (timeRangeComparison(newVal, oldVal))
+        return;
+      c.load();
+    });
+    vue.watch(() => c.state.timeRange, () => {
+      if (!c.state.isLoaded)
         return;
-      }
       c.load();
     });
+    const onTimeRangeChange = (date) => {
+      c.state.timeRange = date;
+    };
     const calcItemStyle = (data) => {
-      const _legend = legendItems.value.find((_item) => _item.id === data.itemType);
+      const _legend = legends.value.find((_item) => _item.id === data.itemType);
       return {
         color: data.color,
         backgroundColor: data.bkColor,
         ["".concat(ns.cssVarBlockName("item-color"))]: data.color,
-        ["".concat(ns.cssVarBlockName("item-active-border-color"))]: _legend == null ? void 0 : _legend.actBdrColor
+        ["".concat(ns.cssVarBlockName("item-active-border-color"))]: _legend == null ? void 0 : _legend.actBdrColor,
+        ...semanticStyle("item")
       };
     };
     const calcCalendarItems = (date) => {
       const weekRange = calendarUtil.getWeekRange(date);
       const calendarItems = c.state.items.filter((item) => {
-        const _legend = legendItems.value.find((legend) => legend.id === item.itemType);
+        const _legend = legends.value.find((legend) => legend.id === item.itemType);
         if (_legend && !_legend.isShow)
           return false;
         if (!showDateRange.value) {
@@ -233,7 +244,7 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
         });
       }
       return calendarItems.map((_item) => {
-        const targetLegend = legendItems.value.find((legendItem) => Object.is(legendItem.id, _item.itemType));
+        const targetLegend = legends.value.find((legendItem) => Object.is(legendItem.id, _item.itemType));
         if (!targetLegend)
           return _item;
         if (!_item.bkColor)
@@ -379,9 +390,11 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
     return {
       c,
       ns,
+      legends,
+      semanticClass,
+      semanticStyle,
       curPopover,
       calendarRef,
-      legendItems,
       popoverValue,
       showDateList,
       showDateRange,
@@ -389,8 +402,9 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
       disabledLodeMore,
       selectDate,
       calcItemStyle,
+      onLegendClick,
       handleScrollLoad,
-      monthLegendClick,
+      onTimeRangeChange,
       calcCalendarItems,
       onNodeContextmenu
     };
@@ -404,7 +418,7 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
       const findIndex = this.c.state.selectedData.findIndex((data) => {
         return data.deData.srfkey === item.deData.srfkey;
       });
-      const itemClass = [this.ns.b("item"), this.ns.is("active", findIndex !== -1), this.ns.is("begin-time", date && dayjs(date).isSame(item.beginTime, "day")), this.ns.is("hidden", this.showDateRange && !calendarUtil.isTimeBetween({
+      const itemClass = [this.ns.b("item"), this.semanticClass("item"), this.ns.is("active", findIndex !== -1), this.ns.is("begin-time", date && dayjs(date).isSame(item.beginTime, "day")), this.ns.is("hidden", this.showDateRange && !calendarUtil.isTimeBetween({
         beginTime: item.beginTime,
         endTime: item.endTime,
         date
@@ -432,7 +446,7 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
       const findIndex = this.c.state.selectedData.findIndex((data) => {
         return data.deData.srfkey === item.deData.srfkey;
       });
-      const itemClass = [this.ns.b("item"), this.ns.be("item", "default"), this.ns.is("active", findIndex !== -1), this.ns.is("begin-time", date && dayjs(date).isSame(item.beginTime, "day")), this.ns.is("hidden", this.showDateRange && !calendarUtil.isTimeBetween({
+      const itemClass = [this.ns.b("item"), this.semanticClass("item"), this.ns.be("item", "default"), this.ns.is("active", findIndex !== -1), this.ns.is("begin-time", date && dayjs(date).isSame(item.beginTime, "day")), this.ns.is("hidden", this.showDateRange && !calendarUtil.isTimeBetween({
         beginTime: item.beginTime,
         endTime: item.endTime,
         date
@@ -471,7 +485,8 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
         }, {
           reference: () => {
             return vue.createVNode("span", {
-              "class": this.ns.b("more")
+              "class": [this.ns.b("more"), this.semanticClass("more")],
+              "style": this.semanticStyle("more")
             }, ["+".concat(items.length - 1, " ").concat(ibiz.i18n.t("app.more"), "...")]);
           },
           default: () => {
@@ -491,11 +506,14 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
     };
     const renderElCalender = () => {
       return vue.createVNode("div", {
-        "class": [this.ns.b("content"), this.ns.is("show-date-range", this.showDateRange)]
+        "class": [this.ns.b("content"), this.semanticClass("content"), this.ns.is("show-date-range", this.showDateRange)],
+        "style": this.semanticStyle("content")
       }, [vue.createVNode(vue.resolveComponent("el-calendar"), {
+        "ref": "calendarRef",
         "modelValue": this.c.state.selectedDate,
         "onUpdate:modelValue": ($event) => this.c.state.selectedDate = $event,
-        "ref": "calendarRef"
+        "style": this.semanticStyle("month"),
+        "class": [this.ns.b("month"), this.semanticClass("month")]
       }, {
         header: ({
           date
@@ -504,26 +522,22 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
           return [vue.createVNode("span", {
             "class": this.ns.b("content-title")
           }, [date]), vue.createVNode("div", {
-            "class": this.ns.b("legend")
-          }, [this.legendItems && this.legendItems.length > 1 && this.legendItems.map((_legend) => {
-            var _a;
-            let label = _legend.name;
-            const _model = (_a = this.c.model.sysCalendarItems) == null ? void 0 : _a.find((_calendarItem) => _calendarItem.id === _legend.id);
-            if (_model == null ? void 0 : _model.nameLanguageRes) {
-              label = ibiz.i18n.t(_model.nameLanguageRes.lanResTag, _model.name);
-            }
+            "style": this.semanticStyle("legend"),
+            "class": [this.ns.b("legend"), this.semanticClass("legend")]
+          }, [this.legends && this.legends.length > 1 && this.legends.map((legend) => {
             return vue.createVNode("div", {
-              "class": [this.ns.be("legend", "item")],
-              "onClick": () => this.monthLegendClick(_legend)
+              "class": [this.ns.be("legend", "item"), this.semanticClass("legend.item")],
+              "style": this.semanticStyle("legend.item"),
+              "onClick": () => this.onLegendClick(legend)
             }, [vue.createVNode("div", {
               "class": this.ns.bem("legend", "item", "tip"),
               "style": {
-                background: _legend.isShow ? _legend == null ? void 0 : _legend.bkcolor : "var(".concat(this.ns.cssVarName("color-disabled-bg"), ")"),
-                color: _legend == null ? void 0 : _legend.color
+                background: legend.isShow ? legend == null ? void 0 : legend.bkcolor : "var(".concat(this.ns.cssVarName("color-disabled-bg"), ")"),
+                color: legend == null ? void 0 : legend.color
               }
             }, null), vue.createVNode("div", {
               "class": this.ns.bem("legend", "item", "text")
-            }, [label])]);
+            }, [legend.name])]);
           })]), vue.createVNode("div", {
             "class": this.ns.b("content-header")
           }, [vue.createVNode(vue.resolveComponent("el-date-picker"), {
@@ -600,25 +614,28 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
         default: () => [noDataSlots]
       });
     };
-    const renderWeekDay = () => {
-      const slots = {};
+    const renderSlots = () => {
       const {
-        sysCalendarItems
+        sysCalendarItems = []
       } = this.c.model;
-      slots.event = ({
-        data
-      }) => {
-        const targetCalendarItem = sysCalendarItems == null ? void 0 : sysCalendarItems.find((item) => {
-          return item.id === data.itemType;
-        });
-        if (targetCalendarItem && targetCalendarItem.layoutPanel) {
-          return renderPanelItem(data, targetCalendarItem.layoutPanel);
+      return {
+        event: ({
+          data
+        }) => {
+          const model = sysCalendarItems.find((item) => data.itemType === item.itemType);
+          if (model == null ? void 0 : model.layoutPanel)
+            return renderPanelItem(data, model.layoutPanel);
+          return renderDefaultItem(data);
         }
-        return renderDefaultItem(data);
       };
+    };
+    const renderWeekDay = () => {
+      let _slot6;
       return vue.createVNode("div", {
         "class": this.ns.b("content")
       }, [vue.createVNode(index.IBizCustomCalendar, {
+        "semanticClass": this.semanticClass,
+        "semanticStyle": this.semanticStyle,
         "modelValue": this.c.state.selectedDate,
         "onUpdate:modelValue": ($event) => this.c.state.selectedDate = $event,
         "showDetail": this.c.state.showDetail,
@@ -626,7 +643,7 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
         "ref": "calendarRef",
         "viewType": this.c.model.calendarStyle,
         "events": this.c.state.items,
-        "legends": this.legendItems,
+        "legends": this.legends,
         "multiple": !this.c.state.singleSelect,
         "selectedData": this.c.state.selectedData,
         "onEventClick": (value) => {
@@ -654,8 +671,8 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
           if (item && evt)
             this.onNodeContextmenu(item, evt);
         }
-      }, _isSlot(slots) ? slots : {
-        default: () => [slots]
+      }, _isSlot(_slot6 = renderSlots()) ? _slot6 : {
+        default: () => [_slot6]
       })]);
     };
     const renderTimeLine = () => {
@@ -663,7 +680,10 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
         "ref": "infiniteScroll",
         "class": this.ns.b("timeline-content"),
         "onScroll": lodashEs.debounce(this.handleScrollLoad, 300)
-      }, [vue.createVNode(vue.resolveComponent("el-timeline"), null, {
+      }, [vue.createVNode(vue.resolveComponent("el-timeline"), {
+        "style": this.semanticStyle("timeline"),
+        "class": [this.ns.e("timeline"), this.semanticClass("timeline")]
+      }, {
         default: () => [this.c.state.items.length > 0 ? this.c.state.items.map((item) => {
           var _a;
           const model = (_a = this.c.model.sysCalendarItems) == null ? void 0 : _a.find((calendarItems) => {
@@ -683,6 +703,7 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
       })]);
     };
     const renderCalendar = () => {
+      let _slot7;
       switch (this.c.model.calendarStyle) {
         case "TIMELINE":
           return renderTimeLine();
@@ -690,6 +711,19 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
         case "DAY":
         case "USER":
           return renderWeekDay();
+        case "USER2":
+          return vue.createVNode(index$1.IBizCalendarUser2, {
+            "legends": this.legends,
+            "items": this.c.state.items,
+            "semanticClass": this.semanticClass,
+            "semanticStyle": this.semanticStyle,
+            "timeRange": this.c.state.timeRange,
+            "title": this.c.state.calendarTitle,
+            "onLegendClick": this.onLegendClick,
+            "onTimeRangeChange": this.onTimeRangeChange
+          }, _isSlot(_slot7 = renderSlots()) ? _slot7 : {
+            default: () => [_slot7]
+          });
         case "MONTH":
         default:
           return renderElCalender();
@@ -702,7 +736,8 @@ const CalendarControl = /* @__PURE__ */ vue.defineComponent({
         var _a;
         return [vue.createVNode(vue.resolveComponent("iBizControlBase"), {
           "controller": this.c,
-          "class": this.ns.e((_a = this.c.model.calendarStyle) == null ? void 0 : _a.toLowerCase())
+          "class": [this.semanticClass("root"), this.ns.e((_a = this.c.model.calendarStyle) == null ? void 0 : _a.toLowerCase())],
+          "style": this.semanticStyle("root")
         }, {
           default: () => [renderCalendar(), this.c.state.enableNavView && this.c.state.showNavIcon ? !this.c.state.showNavView ? vue.createVNode("ion-icon", {
             "class": this.ns.e("nav-icon"),