@ibiz-template/vue3-components 0.7.41-alpha.102 → 0.7.41-alpha.103

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

@@ -248,17 +248,20 @@ const AppMenuControl = /* @__PURE__ */ vue.defineComponent({
       } = menu;
       return vue.createVNode(vue.resolveComponent("el-menu-item-group"), {
         "title": core.showTitle(tooltip),
-        "class": [ns.b("groupmenu"), "".concat((sysCss == null ? void 0 : sysCss.cssName) || "")]
+        "class": [ns.b("groupmenu"), semanticClass("groupmenu", menu), "".concat((sysCss == null ? void 0 : sysCss.cssName) || "")],
+        "style": semanticStyle("groupmenu", menu)
       }, {
         title: () => {
           const provider = c.itemProviders[id];
           if (provider && provider.renderText)
             return provider.renderText(menu, c);
           return [sysImage && vue.createVNode(vue.resolveComponent("iBizIcon"), {
-            "class": ns.e("icon"),
+            "class": [ns.e("icon"), semanticClass("groupitem.icon", menu)],
+            "style": semanticStyle("groupitem.icon", menu),
             "icon": sysImage
           }, null), vue.createVNode("span", {
-            "class": ns.e("caption")
+            "class": [ns.e("caption"), semanticClass("groupitem.caption", menu)],
+            "style": semanticStyle("groupitem.caption", menu)
           }, [caption]), counterId ? vue.createVNode(vue.resolveComponent("iBizBadge"), {
             "class": [ns.e("counter"), semanticClass("item.counter", menu)],
             "style": semanticStyle("item.counter", menu),
@@ -284,7 +287,7 @@ const AppMenuControl = /* @__PURE__ */ vue.defineComponent({
       return vue.createVNode(vue.resolveComponent("el-sub-menu"), {
         "index": id,
         "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") : "")],
+        "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") : ""), semanticClass("popup", menu)],
         "title": core.showTitle(tooltip),
         "style": semanticStyle("submenu", menu),
         "class": [ns.b("submenu"), semanticClass("submenu", menu), "".concat((sysCss == null ? void 0 : sysCss.cssName) || "")]
@@ -297,8 +300,8 @@ const AppMenuControl = /* @__PURE__ */ vue.defineComponent({
           if (props.collapse) {
             if (sysImage)
               return vue.createVNode(vue.resolveComponent("iBizIcon"), {
-                "class": [ns.e("icon"), semanticClass("submenu.icon", menu)],
-                "style": semanticStyle("submenu.icon", menu),
+                "class": [ns.e("icon"), semanticClass("subitem.icon", menu)],
+                "style": semanticStyle("subitem.icon", menu),
                 "icon": sysImage
               }, null);
             return [isFirst ? caption == null ? void 0 : caption.slice(0, 1) : caption, isFirst ? null : vue.createVNode("ion-icon", {
@@ -306,12 +309,12 @@ const AppMenuControl = /* @__PURE__ */ vue.defineComponent({
             }, null)];
           }
           return [sysImage && vue.createVNode(vue.resolveComponent("iBizIcon"), {
-            "class": [ns.e("icon"), semanticClass("submenu.icon", menu)],
-            "style": semanticStyle("submenu.icon", menu),
+            "class": [ns.e("icon"), semanticClass("subitem.icon", menu)],
+            "style": semanticStyle("subitem.icon", menu),
             "icon": sysImage
           }, null), vue.createVNode("span", {
-            "class": [ns.e("caption"), semanticClass("submenu.content", menu)],
-            "style": semanticStyle("submenu.content", menu)
+            "class": [ns.e("caption"), semanticClass("subitem.caption", menu)],
+            "style": semanticStyle("subitem.caption", menu)
           }, [caption]), counterId ? vue.createVNode(vue.resolveComponent("iBizBadge"), {
             "class": [ns.e("counter"), semanticClass("item.counter", menu)],
             "style": semanticStyle("item.counter", menu),
@@ -340,8 +343,8 @@ const AppMenuControl = /* @__PURE__ */ vue.defineComponent({
           "style": semanticStyle("item.icon", menu),
           "icon": sysImage
         }, null) : null, vue.createVNode("span", {
-          "class": [ns.e("caption"), semanticClass("item.content", menu)],
-          "style": semanticStyle("item.content", menu)
+          "class": [ns.e("caption"), semanticClass("item.caption", menu)],
+          "style": semanticStyle("item.caption", menu)
         }, [caption]), counterId ? vue.createVNode(vue.resolveComponent("iBizBadge"), {
           "class": [ns.e("counter"), semanticClass("item.counter", menu)],
           "style": semanticStyle("item.counter", menu),
@@ -453,9 +456,9 @@ const AppMenuControl = /* @__PURE__ */ vue.defineComponent({
         var _a2;
         return [this.c.state.isCreated && vue.createVNode(vue.resolveComponent("el-menu"), vue.mergeProps({
           "key": this.key,
-          "class": this.semanticClass("content"),
+          "class": [this.ns.e("content"), 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") : "")],
+          "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") : ""), this.semanticClass("popup")],
           "default-active": this.defaultActive,
           "default-openeds": this.defaultOpens,
           "collapse": this.collapse,
@@ -473,7 +476,8 @@ const AppMenuControl = /* @__PURE__ */ vue.defineComponent({
             return (_a3 = this.c.model.appMenuItems) == null ? void 0 : _a3.map((menu) => this.renderMenu(true, menu));
           }
         }), this.c.model.enableCustomized && vue.createVNode(customMenuDesign.MenuDesign, {
-          "class": [this.ns.b("menu-set"), this.ns.is("collapse", this.collapse), this.ns.is("horizontal", this.c.view.model.mainMenuAlign === "TOP")],
+          "class": [this.ns.b("menu-set"), this.ns.is("collapse", this.collapse), this.ns.is("horizontal", this.c.view.model.mainMenuAlign === "TOP"), this.semanticClass("design")],
+          "style": this.semanticStyle("design"),
           "controller": this.c,
           "onSaved": this.configSaves,
           "onReset": this.configReset

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

@@ -1 +1 @@
-.ibiz-control-appmenu{position:relative;width:100%;height:100%;--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-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-size:var(--ibiz-width-icon-medium);--ibiz-control-appmenu-item-counter-height:20px;--ibiz-control-appmenu-item-counter-color:var(--ibiz-color-danger-text);--ibiz-control-appmenu-item-counter-bg-color:var(--ibiz-color-danger);--ibiz-control-appmenu-item-counter-padding:var(--ibiz-spacing-none) var(--ibiz-spacing-tight);--ibiz-control-appmenu-item-counter-gap:5px;--ibiz-control-appmenu-item-counter-border-radius:var(--ibiz-border-radius-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-collapse-height:var(--ibiz-spacing-super-loose)}.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-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:2px}.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:calc(2 * var(--ibiz-control-appmenu-item-icon-width))}.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:var(--ibiz-control-appmenu-item-counter-gap);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-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-item-counter-height:20px;--ibiz-control-appmenu-item-counter-color:var(--ibiz-color-danger-text);--ibiz-control-appmenu-item-counter-bg-color:var(--ibiz-color-danger);--ibiz-control-appmenu-item-counter-padding:var(--ibiz-spacing-none) var(--ibiz-spacing-tight);--ibiz-control-appmenu-item-counter-gap:5px;--ibiz-control-appmenu-item-counter-border-radius:var(--ibiz-border-radius-medium)}.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-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-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-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:var(--ibiz-control-appmenu-item-counter-gap);height:var(--ibiz-control-appmenu-item-counter-height);padding:var(--ibiz-control-appmenu-item-counter-padding);line-height:initial;color:var(--ibiz-control-appmenu-item-counter-color);background-color:var(--ibiz-control-appmenu-item-counter-bg-color);border-radius:var(--ibiz-control-appmenu-item-counter-border-radius);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-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-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-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)}
+.ibiz-control-appmenu{position:relative;width:100%;height:100%;--ibiz-control-appmenu-scorll-color:var(--ibiz-color-scroll-menu);--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-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-size:var(--ibiz-width-icon-medium);--ibiz-control-appmenu-item-counter-height:20px;--ibiz-control-appmenu-item-counter-color:var(--ibiz-color-danger-text);--ibiz-control-appmenu-item-counter-bg-color:var(--ibiz-color-danger);--ibiz-control-appmenu-item-counter-padding:var(--ibiz-spacing-none) var(--ibiz-spacing-tight);--ibiz-control-appmenu-item-counter-gap:5px;--ibiz-control-appmenu-item-counter-border-radius:var(--ibiz-border-radius-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-collapse-height:var(--ibiz-spacing-super-loose);--ibiz-control-appmenu-design-font-size:var(--ibiz-font-size-header-5);--ibiz-control-appmenu-design-bottom:var(--ibiz-spacing-tight);--ibiz-control-appmenu-design-left:var(--ibiz-spacing-base-tight);--ibiz-control-appmenu-design-right:var(--ibiz-spacing-base-tight);--ibiz-control-appmenu-design-height:var(--ibiz-spacing-super-loose)}.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-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-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;line-height:var(--ibiz-control-appmenu-item-height);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:2px}.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:calc(2 * var(--ibiz-control-appmenu-item-icon-width))}.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 .el-menu--horizontal .ibiz-control-appmenu__counter{position:unset;margin-left:var(--ibiz-control-appmenu-item-counter-gap);transform:none}.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:var(--ibiz-control-appmenu-item-counter-gap);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-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-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-item-counter-height:20px;--ibiz-control-appmenu-item-counter-color:var(--ibiz-color-danger-text);--ibiz-control-appmenu-item-counter-bg-color:var(--ibiz-color-danger);--ibiz-control-appmenu-item-counter-padding:var(--ibiz-spacing-none) var(--ibiz-spacing-tight);--ibiz-control-appmenu-item-counter-gap:5px;--ibiz-control-appmenu-item-counter-border-radius:var(--ibiz-border-radius-medium)}.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-scorll-color:var(--ibiz-color-scroll-menu);--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-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-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:var(--ibiz-control-appmenu-item-counter-gap);height:var(--ibiz-control-appmenu-item-counter-height);padding:var(--ibiz-control-appmenu-item-counter-padding);line-height:initial;color:var(--ibiz-control-appmenu-item-counter-color);background-color:var(--ibiz-control-appmenu-item-counter-bg-color);border-radius:var(--ibiz-control-appmenu-item-counter-border-radius);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-control-appmenu-design-bottom);left:var(--ibiz-control-appmenu-design-left);font-size:var(--ibiz-control-appmenu-design-font-size);cursor:pointer}.ibiz-control-appmenu .ibiz-control-appmenu-menu-set.is-horizontal{right:var(--ibiz-control-appmenu-design-right);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-control-appmenu-design-right);bottom:var(--ibiz-control-appmenu-collapse-height);display:flex;justify-content:center;cursor:pointer}.ibiz-control-appmenu.is-collapse.is-show-menu-design>.el-menu{height:calc(100% - var(--ibiz-control-appmenu-design-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-scorll-color:var(--ibiz-color-scroll-menu);--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-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-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/app-menu-icon-view/app-menu-icon-view.cjs

@@ -54,6 +54,10 @@ const AppMenuIconViewControl = /* @__PURE__ */ vue.defineComponent({
     var _a;
     const c = vue3Util.useControlController((...args) => new runtime.AppMenuIconViewController(...args));
     const ns = vue3Util.useNamespace("control-".concat(c.model.controlType.toLowerCase(), "-iconview"));
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(c);
     const defaultActive = vue.ref("");
     const defaultOpens = vue.ref([]);
     (_a = c.model.appMenuItems) == null ? void 0 : _a.forEach((item) => {
@@ -70,7 +74,8 @@ const AppMenuIconViewControl = /* @__PURE__ */ vue.defineComponent({
         return null;
       }
       return vue.createVNode("div", {
-        "class": [ns.b("item"), ns.is("disabled", !item.appFuncId)],
+        "class": [ns.b("item"), ns.is("disabled", !item.appFuncId), semanticClass("item", item)],
+        "style": semanticStyle("item", item),
         "title": core.showTitle(item.tooltip || item.caption),
         "onClick": (event) => {
           if (item.appFuncId) {
@@ -78,10 +83,12 @@ const AppMenuIconViewControl = /* @__PURE__ */ vue.defineComponent({
           }
         }
       }, [vue.createVNode(vue.resolveComponent("iBizIcon"), {
-        "class": ns.be("item", "icon"),
+        "class": [ns.be("item", "icon"), semanticClass("item.icon", item)],
+        "style": semanticStyle("item.icon", item),
         "icon": item.sysImage
       }, null), vue.createVNode("span", {
-        "class": ns.be("item", "label")
+        "class": [ns.be("item", "label"), semanticClass("item.caption")],
+        "style": semanticStyle("item.caption")
       }, [item.caption])]);
     };
     const renderGroup = (item) => {
@@ -90,7 +97,8 @@ const AppMenuIconViewControl = /* @__PURE__ */ vue.defineComponent({
         return null;
       }
       return vue.createVNode(vue.resolveComponent("el-collapse-item"), {
-        "class": ns.b("group"),
+        "class": [ns.b("group"), semanticClass("group", item)],
+        "style": semanticStyle("group", item),
         "name": item.id,
         "title": core.showTitle(item.caption)
       }, {
@@ -109,7 +117,9 @@ const AppMenuIconViewControl = /* @__PURE__ */ vue.defineComponent({
       defaultOpens,
       onClick,
       renderGroup,
-      renderItem
+      renderItem,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -122,7 +132,8 @@ const AppMenuIconViewControl = /* @__PURE__ */ vue.defineComponent({
     if (state.isCreated && ((_a = model.appMenuItems) == null ? void 0 : _a.length)) {
       let _slot;
       content = vue.createVNode(vue.resolveComponent("el-collapse"), {
-        "class": this.ns.e("content"),
+        "class": [this.ns.e("content"), this.semanticClass("content")],
+        "style": this.semanticStyle("content"),
         "modelValue": this.defaultOpens,
         "onUpdate:modelValue": ($event) => this.defaultOpens = $event
       }, _isSlot(_slot = model.appMenuItems.map((item) => {
@@ -135,7 +146,8 @@ const AppMenuIconViewControl = /* @__PURE__ */ vue.defineComponent({
       });
     }
     return vue.createVNode(vue.resolveComponent("iBizControlBase"), {
-      "class": [this.ns.b()],
+      "class": [this.ns.b(), this.semanticClass("root")],
+      "style": this.semanticStyle("root"),
       "controller": this.c
     }, _isSlot(content) ? content : {
       default: () => [content]

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

@@ -1 +1 @@
-@charset "UTF-8";.ibiz-control-appmenu-iconview{--ibiz-control-appmenu-iconview-icon-width:20px;--ibiz-control-appmenu-iconview-icon-height:20px;--ibiz-control-appmenu-iconview-icon-margin:0 5px 0 0;--ibiz-control-appmenu-iconview-selected-color:var(--ibiz-color-primary);--ibiz-control-appmenu-iconview-selected-bg-color:var(--ibiz-color-primary-light-9);--ibiz-control-appmenu-iconview-selected-border-color:var(--ibiz-color-primary);--ibiz-control-appmenu-iconview-hover-color:var(--ibiz-color-primary);--ibiz-control-appmenu-iconview-hover-bg-color:var(--ibiz-color-white);--ibiz-control-appmenu-iconview-hover-border-color:var(--ibiz-color-primary);--ibiz-control-appmenu-iconview-disabled-color:var(--ibiz-disabled-text-color);--ibiz-control-appmenu-iconview-disabled-bg-color:var(--ibiz-disabled-bg-color);--ibiz-control-appmenu-iconview-disabled-border-color:var(--ibiz-disabled-border-color);--ibiz-control-appmenu-iconview-padding:var(--ibiz-padding);--ibiz-control-appmenu-iconview-font-size:var(--ibiz-font-size-base);--ibiz-control-appmenu-iconview-color:var(--ibiz-text-color)}.ibiz-control-appmenu-iconview__content{width:100%;height:100%}.ibiz-control-appmenu-iconview-item{display:flex;flex-direction:column;flex-shrink:0;align-items:center;justify-content:center;width:135px;height:135px;margin:15px;font:var(--ibiz-control-appmenu-iconview-font-size);color:var(--ibiz-control-appmenu-iconview-color);cursor:pointer;border:1px solid var(--ibiz-border-color)}.ibiz-control-appmenu-iconview-item__icon{width:50px;height:50px;margin-bottom:5px;font-size:50px}.ibiz-control-appmenu-iconview-item:hover{color:var(--ibiz-control-appmenu-iconview-hover-color);background-color:var(--ibiz-control-appmenu-iconview-hover-bg-color);border-color:var(--ibiz-control-appmenu-iconview-hover-border-color)}.ibiz-control-appmenu-iconview-item.is-disabled{color:var(--ibiz-control-appmenu-iconview-disabled-color);cursor:not-allowed;background-color:var(--ibiz-control-appmenu-iconview-disabled-bg-color);border-color:var(--ibiz-control-appmenu-iconview-disabled-border-color)}.ibiz-control-appmenu-iconview-group .el-collapse-item__content{display:flex;flex-wrap:wrap}
+.ibiz-control-appmenu-iconview{--ibiz-control-appmenu-iconview-item-width:135px;--ibiz-control-appmenu-iconview-item-height:135px;--ibiz-control-appmenu-iconview-item-margin:15px;--ibiz-control-appmenu-iconview-item-icon-size:50px;--ibiz-control-appmenu-iconview-item-icon-gap:5px;--ibiz-control-appmenu-iconview-item-font-size:var(--ibiz-font-size-base);--ibiz-control-appmenu-iconview-item-color:var(--ibiz-text-color);--ibiz-control-appmenu-iconview-item-border-color:var(--ibiz-border-color);--ibiz-control-appmenu-iconview-item-hover-color:var(--ibiz-color-primary);--ibiz-control-appmenu-iconview-item-hover-bg-color:var(--ibiz-color-white);--ibiz-control-appmenu-iconview-item-hover-border-color:var(--ibiz-color-primary);--ibiz-control-appmenu-iconview-item-disabled-color:var(--ibiz-disabled-text-color);--ibiz-control-appmenu-iconview-item-disabled-bg-color:var(--ibiz-disabled-bg-color);--ibiz-control-appmenu-iconview-item-disabled-border-color:var(--ibiz-disabled-border-color)}.ibiz-control-appmenu-iconview__content{width:100%;height:100%}.ibiz-control-appmenu-iconview-item{display:flex;flex-direction:column;flex-shrink:0;align-items:center;justify-content:center;width:var(--ibiz-control-appmenu-iconview-item-width);height:var(--ibiz-control-appmenu-iconview-item-height);margin:var(--ibiz-control-appmenu-iconview-item-margin);font:var(--ibiz-control-appmenu-iconview-item-font-size);color:var(--ibiz-control-appmenu-iconview-item-color);cursor:pointer;border:1px solid var(--ibiz-control-appmenu-iconview-item-border-color)}.ibiz-control-appmenu-iconview-item__icon{width:var(--ibiz-control-appmenu-iconview-item-icon-size);height:var(--ibiz-control-appmenu-iconview-item-icon-size);margin-bottom:var(--ibiz-control-appmenu-iconview-item-icon-gap);font-size:var(--ibiz-control-appmenu-iconview-item-icon-size)}.ibiz-control-appmenu-iconview-item:hover{color:var(--ibiz-control-appmenu-iconview-item-hover-color);background-color:var(--ibiz-control-appmenu-iconview-item-hover-bg-color);border-color:var(--ibiz-control-appmenu-iconview-item-hover-border-color)}.ibiz-control-appmenu-iconview-item.is-disabled{color:var(--ibiz-control-appmenu-iconview-item-disabled-color);cursor:not-allowed;background-color:var(--ibiz-control-appmenu-iconview-item-disabled-bg-color);border-color:var(--ibiz-control-appmenu-iconview-item-disabled-border-color)}.ibiz-control-appmenu-iconview-group .el-collapse-item__content{display:flex;flex-wrap:wrap}

package/lib/control/dashboard/custom-dashboard-container/custom-dashboard-container.cjs

@@ -166,7 +166,7 @@ const CustomDashboardContainer = /* @__PURE__ */ vue.defineComponent({
     return vue.withDirectives(vue.createVNode("div", {
       "class": [this.ns.b()]
     }, [this.customC.showDesignBtn ? vue.createVNode("div", {
-      "class": [this.ns.b("build-btn"), this.semanticClass("custom")],
+      "class": [this.ns.b("build-btn"), this.semanticClass("design")],
       "style": this.semanticStyle("custom")
     }, [this.showTypeDir ? vue.createVNode("div", null, [this.showFilter ? vue.createVNode(vue.resolveComponent("el-button"), {
       "class": this.ns.b("deisgn-btn"),

package/lib/control/dashboard/dashboard.cjs

@@ -175,7 +175,8 @@ const DashboardControl = /* @__PURE__ */ vue.defineComponent({
     const renderDefaultContent = () => {
       return vue.createVNode(vue.resolveComponent("iBizRow"), {
         "ref": "dashboardRef",
-        "class": [this.ns.b()],
+        "class": [this.ns.b(), this.semanticClass("content")],
+        "style": this.semanticStyle("content"),
         "layout": model.layout
       }, {
         default: () => {
@@ -224,7 +225,17 @@ const DashboardControl = /* @__PURE__ */ vue.defineComponent({
           };
         }),
         "anchorTargetEle": this.dashboardRef,
-        "navBarConfig": this.calcNavBarConfig()
+        "navBarConfig": this.calcNavBarConfig(),
+        "semantic": {
+          anchor: {
+            class: this.semanticClass("anchor"),
+            style: this.semanticStyle("anchor")
+          },
+          "anchor.item": {
+            class: this.semanticClass("anchor.item"),
+            style: this.semanticStyle("anchor.item")
+          }
+        }
       }, _isSlot(_slot3 = renderDefaultContent()) ? _slot3 : {
         default: () => [_slot3]
       });

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

@@ -35,6 +35,10 @@ const AppMenuPortletControl = /* @__PURE__ */ vue.defineComponent({
     var _a;
     const c = vue3Util.useControlController((...args) => new runtime.AppMenuIconViewController(...args));
     const ns = vue3Util.useNamespace("control-".concat(c.model.controlType.toLowerCase(), "-portlet"));
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(c);
     const defaultActive = vue.ref("");
     const defaultOpens = vue.ref([]);
     (_a = c.model.appMenuItems) == null ? void 0 : _a.forEach((item) => {
@@ -54,7 +58,8 @@ const AppMenuPortletControl = /* @__PURE__ */ vue.defineComponent({
         counterId
       } = item;
       return vue.createVNode("div", {
-        "class": [ns.b("item"), ns.is("disabled", !item.appFuncId)],
+        "class": [ns.b("item"), ns.is("disabled", !item.appFuncId), semanticClass("item", item)],
+        "style": semanticStyle("item", item),
         "title": core.showTitle(item.tooltip || item.caption),
         "onClick": (event) => {
           if (item.appFuncId) {
@@ -62,13 +67,16 @@ const AppMenuPortletControl = /* @__PURE__ */ vue.defineComponent({
           }
         }
       }, [vue.createVNode(vue.resolveComponent("iBizIcon"), {
-        "class": ns.be("item", "icon"),
+        "class": [ns.be("item", "icon"), semanticClass("item.icon", item)],
+        "style": semanticStyle("item.icon", item),
         "icon": item.sysImage
       }, null), counterId ? vue.createVNode(vue.resolveComponent("iBizBadge"), {
-        "class": ns.e("counter"),
+        "class": [ns.e("counter"), semanticClass("item.counter", item)],
+        "style": semanticStyle("item.counter", item),
         "value": c.state.counterData[counterId]
       }, null) : null, vue.createVNode("span", {
-        "class": ns.be("item", "label")
+        "class": [ns.be("item", "label"), semanticClass("item.caption")],
+        "style": semanticStyle("item.caption")
       }, [item.caption])]);
     };
     const renderGroup = (item) => {
@@ -83,18 +91,22 @@ const AppMenuPortletControl = /* @__PURE__ */ vue.defineComponent({
         counterId
       } = item;
       return vue.createVNode(vue.resolveComponent("el-collapse-item"), {
-        "class": ns.b("group"),
+        "class": [ns.b("group"), semanticClass("group", item)],
+        "style": semanticStyle("group", item),
         "name": item.id,
         "title": core.showTitle(item.caption)
       }, {
         title: () => {
           return [vue.createVNode(vue.resolveComponent("iBizIcon"), {
-            "class": ns.be("group", "icon"),
+            "class": [ns.be("group", "icon"), semanticClass("group.icon", item)],
+            "style": semanticStyle("group.icon", item),
             "icon": item.sysImage
           }, null), vue.createVNode("span", {
-            "class": ns.be("group", "label")
+            "class": [ns.be("group", "label"), semanticClass("group.caption", item)],
+            "style": semanticStyle("group.caption", item)
           }, [item.caption]), counterId ? vue.createVNode(vue.resolveComponent("iBizBadge"), {
-            "class": ns.e("counter"),
+            "class": [ns.e("counter"), semanticClass("group.counter", item)],
+            "style": semanticStyle("group.counter", item),
             "value": c.state.counterData[counterId]
           }, null) : null];
         },
@@ -113,7 +125,9 @@ const AppMenuPortletControl = /* @__PURE__ */ vue.defineComponent({
       defaultOpens,
       onClick,
       renderGroup,
-      renderItem
+      renderItem,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -126,7 +140,7 @@ const AppMenuPortletControl = /* @__PURE__ */ vue.defineComponent({
     if (state.isCreated && ((_a = model.appMenuItems) == null ? void 0 : _a.length)) {
       let _slot;
       content = vue.createVNode(vue.resolveComponent("el-collapse"), {
-        "class": this.ns.e("content"),
+        "class": [this.ns.e("content"), this.semanticClass("content")],
         "modelValue": this.defaultOpens,
         "onUpdate:modelValue": ($event) => this.defaultOpens = $event
       }, _isSlot(_slot = model.appMenuItems.map((item) => {
@@ -139,7 +153,7 @@ const AppMenuPortletControl = /* @__PURE__ */ vue.defineComponent({
       });
     }
     return vue.createVNode(vue.resolveComponent("iBizControlBase"), {
-      "class": [this.ns.b()],
+      "class": [this.ns.b(), this.semanticClass("root")],
       "controller": this.c
     }, _isSlot(content) ? content : {
       default: () => [content]

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

@@ -1 +1 @@
-.ibiz-control-appmenu-portlet{--ibiz-control-appmenu-portlet-margin:var(--ibiz-spacing-base-tight);--ibiz-control-appmenu-portlet-border-color:var(--ibiz-color-primary);--ibiz-control-appmenu-portlet-bg-color:var(--ibiz-color-bg-0);--ibiz-control-appmenu-portlet-padding:var(--ibiz-spacing-base-tight);--ibiz-control-appmenu-portlet-content-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);--ibiz-control-appmenu-portlet-counter-gap:var(--ibiz-spacing-tight);padding:var(--ibiz-control-appmenu-portlet-content-padding)}.ibiz-control-appmenu-portlet__content{display:flex;flex-wrap:wrap;width:100%}.ibiz-control-appmenu-portlet-item{position:relative;display:flex;flex-direction:column;flex-shrink:0;align-items:flex-start;justify-content:center;width:calc(25% - var(--ibiz-control-appmenu-portlet-margin) * 2);padding:var(--ibiz-control-appmenu-portlet-padding);margin:var(--ibiz-control-appmenu-portlet-margin);cursor:pointer;background-color:var(--ibiz-control-appmenu-portlet-bg-color)}.ibiz-control-appmenu-portlet-item::before{position:absolute;left:0;width:4px;height:100%;content:"";background-color:var(--ibiz-control-appmenu-portlet-border-color)}.ibiz-control-appmenu-portlet-item .ibiz-control-appmenu-portlet__counter{position:absolute;top:var(--ibiz-control-appmenu-portlet-counter-gap);right:var(--ibiz-control-appmenu-portlet-counter-gap)}.ibiz-control-appmenu-portlet-group{width:100%}.ibiz-control-appmenu-portlet-group .el-collapse-item__header .ibiz-control-appmenu-portlet__counter{margin-left:var(--ibiz-control-appmenu-portlet-counter-gap)}.ibiz-control-appmenu-portlet-group .el-collapse-item__content{display:flex;flex-wrap:wrap}.ibiz-control-appmenu-portlet-group__icon{display:flex;margin-right:var(--ibiz-spacing-extra-tight);font-size:var(--ibiz-font-size-regular)}
+.ibiz-control-appmenu-portlet{--ibiz-control-appmenu-portlet-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);--ibiz-control-appmenu-portlet-group-icon-gap:var(--ibiz-spacing-extra-tight);--ibiz-control-appmenu-portlet-group-icon-size:var(--ibiz-font-size-regular);--ibiz-control-appmenu-portlet-item-padding:var(--ibiz-spacing-base-tight);--ibiz-control-appmenu-portlet-item-margin:var(--ibiz-spacing-base-tight);--ibiz-control-appmenu-portlet-item-bg-color:var(--ibiz-color-bg-0);--ibiz-control-appmenu-portlet-item-border-color:var(--ibiz-color-primary);--ibiz-control-appmenu-portlet-counter-gap:var(--ibiz-spacing-tight);padding:var(--ibiz-control-appmenu-portlet-padding)}.ibiz-control-appmenu-portlet__content{display:flex;flex-wrap:wrap;width:100%}.ibiz-control-appmenu-portlet-item{position:relative;display:flex;flex-direction:column;flex-shrink:0;align-items:flex-start;justify-content:center;width:calc(25% - var(--ibiz-control-appmenu-portlet-item-margin) * 2);padding:var(--ibiz-control-appmenu-portlet-item-padding);margin:var(--ibiz-control-appmenu-portlet-item-margin);cursor:pointer;background-color:var(--ibiz-control-appmenu-portlet-item-bg-color)}.ibiz-control-appmenu-portlet-item::before{position:absolute;left:0;width:4px;height:100%;content:"";background-color:var(--ibiz-control-appmenu-portlet-item-border-color)}.ibiz-control-appmenu-portlet-item .ibiz-control-appmenu-portlet__counter{position:absolute;top:var(--ibiz-control-appmenu-portlet-counter-gap);right:var(--ibiz-control-appmenu-portlet-counter-gap)}.ibiz-control-appmenu-portlet-group{width:100%}.ibiz-control-appmenu-portlet-group .el-collapse-item__header .ibiz-control-appmenu-portlet__counter{margin-left:var(--ibiz-control-appmenu-portlet-counter-gap)}.ibiz-control-appmenu-portlet-group .el-collapse-item__content{display:flex;flex-wrap:wrap}.ibiz-control-appmenu-portlet-group__icon{display:flex;margin-right:var(--ibiz-control-appmenu-portlet-group-icon-gap);font-size:var(--ibiz-control-appmenu-portlet-group-icon-size)}

package/lib/control/data-view/data-view.cjs

@@ -201,11 +201,12 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
     const renderNewCard = (group) => {
       return vue.createVNode(vue.resolveComponent("el-card"), {
         "shadow": "hover",
-        "class": [ns.b("item"), ns.be("item", "new")],
+        "class": [ns.b("item"), ns.be("item", "new"), semanticClass("new")],
         "title": ibiz.i18n.t("app.newlyBuild"),
         "body-style": {
           width: c.model.cardWidth ? "".concat(c.model.cardWidth, "px") : "auto",
-          height: c.model.cardHeight ? "".concat(c.model.cardHeight, "px") : "auto"
+          height: c.model.cardHeight ? "".concat(c.model.cardHeight, "px") : "auto",
+          ...semanticStyle("new")
         },
         "onClick": (event) => {
           c.onClickNew(event, group == null ? void 0 : group.key);
@@ -293,10 +294,11 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
           "d": "M1 2a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zM1 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-4 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-4 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"
         }, null)])])]), cardStyle.value === "style2" && !c.state.singleSelect && vue.createVNode(vue.resolveComponent("el-checkbox"), {
           "size": "large",
-          "class": ns.bem("item", "content", "checkbox"),
           "modelValue": isSelected(item),
+          "onChange": () => toggleSelection(item),
+          "style": semanticStyle("item.checkbox"),
           "onClick": (e) => e.stopPropagation(),
-          "onChange": () => toggleSelection(item)
+          "class": [ns.bem("item", "content", "checkbox"), semanticClass("item.checkbox")]
         }, null), panel ? renderPanelItem(item, panel) : renderDefaultItem(item)])]
       });
     };
@@ -327,8 +329,12 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
             "class": ns.e("layout-col")
           }, {
             default: () => [vue.createVNode("div", {
-              "style": semanticStyle("item"),
-              "class": [ns.b("scroll-item"), semanticClass("item")]
+              "style": semanticStyle("item", {
+                data: [element]
+              }),
+              "class": [ns.b("scroll-item"), semanticClass("item", {
+                data: [element]
+              })]
             }, [renderCard(element)])]
           }),
           footer: () => {
@@ -341,8 +347,7 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
                 "class": ns.e("layout-col")
               }, {
                 default: () => [vue.createVNode("div", {
-                  "style": semanticStyle("item"),
-                  "class": [ns.b("scroll-item"), semanticClass("item")]
+                  "class": ns.b("scroll-item")
                 }, [renderNewCard(group)])]
               });
           }
@@ -358,14 +363,17 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
         item: ({
           element
         }) => vue.createVNode("div", {
-          "style": semanticStyle("item"),
-          "class": [ns.b("scroll-item"), semanticClass("item")]
+          "style": semanticStyle("item", {
+            data: [element]
+          }),
+          "class": [ns.b("scroll-item"), semanticClass("item", {
+            data: [element]
+          })]
         }, [renderCard(element)]),
         footer: () => {
           if (c.enableNew && !c.state.readonly)
             return vue.createVNode("div", {
-              "style": semanticStyle("item"),
-              "class": [ns.b("scroll-item"), semanticClass("item")]
+              "class": ns.b("scroll-item")
             }, [renderNewCard(group)]);
         }
       });
@@ -380,13 +388,14 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
       }, [vue.createVNode("div", {
         "class": ns.be("group-content", "item-header")
       }, [vue.createVNode("span", {
-        "class": ns.be("group-content", "item-title")
+        "class": [semanticClass("group.title"), ns.be("group-content", "item-title")],
+        "style": semanticStyle("group.title")
       }, [group.caption]), vue.createVNode("span", {
         "class": ns.be("group-content", "item-action")
       }, [c.model.groupUIActionGroup && group.groupActionGroupState && vue.createVNode(vue.resolveComponent("iBizActionToolbar"), {
         "zIndex": c.state.zIndex,
-        "class": [ns.be("group-content", "header-actions"), semanticClass("group.action")],
         "style": semanticStyle("group.action"),
+        "class": [ns.be("group-content", "header-actions"), semanticClass("group.action")],
         "action-details": c.model.groupUIActionGroup.uiactionGroupDetails,
         "actions-state": group.groupActionGroupState,
         "onActionClick": (detail, event) => {
@@ -471,7 +480,8 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
       if (!ctrlModel)
         return;
       return vue.createVNode("div", {
-        "class": [ns.e("batchtoolbar"), ns.is("show", c.showBatchToolbar)]
+        "class": [ns.e("batchtoolbar"), semanticClass("batchtoolbar"), ns.is("show", c.showBatchToolbar)],
+        "style": semanticStyle("batchtoolbar")
       }, [vue.createVNode(vue.resolveComponent("iBizToolbarControl"), {
         "modelData": ctrlModel,
         "context": c.context,
@@ -588,8 +598,7 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
           "class": ns.e("layout-col")
         }, {
           default: () => [vue.createVNode("div", {
-            "style": semanticStyle("item"),
-            "class": [ns.b("scroll-item"), semanticClass("item")]
+            "class": ns.b("scroll-item")
           }, [renderSkeletonItem()])]
         }))]);
       }
@@ -598,8 +607,7 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
       }, [Array.from({
         length: count
       }, () => vue.createVNode("div", {
-        "style": semanticStyle("item"),
-        "class": [ns.b("scroll-item"), semanticClass("item")]
+        "class": ns.b("scroll-item")
       }, [renderSkeletonItem()]))]);
     };
     const renderGroupSkeleton = () => {
@@ -697,6 +705,8 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
       const id = searchbar.name || searchbar.id;
       const provider = c.view.providers[id];
       return vue.h(vue.resolveComponent((provider == null ? void 0 : provider.component) || "IBizControlShell"), {
+        class: [ns.e("searchbar"), semanticClass("searchbar")],
+        style: semanticStyle(searchbar),
         context: c.view.context,
         params: c.view.params,
         modelData: searchbar,

package/lib/control/data-view/data-view.css

@@ -1 +1 @@
-.ibiz-control-dataview{--ibiz-control-dataview-bg-color:transparent;--ibiz-control-dataview-icon-color:var(--ibiz-color-text-2);--ibiz-control-dataview-hover-color:var(--ibiz-color-primary-hover);--ibiz-control-dataview-icon-size:var(--ibiz-font-size-header-3);--ibiz-control-dataview-padding:var(--ibiz-spacing-none);--ibiz-control-dataview-border-color:var(--ibiz-color-border);--ibiz-control-dataview-font-size:var(--ibiz-font-size-regular);--ibiz-control-dataview-font-weight:var(--ibiz-font-weight-regular);--ibiz-control-dataview-content-bg-color:var(--ibiz-control-dataview-bg-color);--ibiz-control-dataview-content-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);--ibiz-control-dataview-group-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-group-font-size:var(--ibiz-font-size-header-5);--ibiz-control-dataview-group-padding:var(--ibiz-spacing-base-tight);--ibiz-control-dataview-group-font-weight:var(--ibiz-font-weight-bold);--ibiz-control-dataview-group-border-color:var(--ibiz-control-dataview-border-color);--ibiz-control-dataview-item-bg-color:transparent;--ibiz-control-dataview-item-padding:var(--ibiz-spacing-base);--ibiz-control-dataview-item-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-item-font-size:var(--ibiz-font-size-header-6);--ibiz-control-dataview-item-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-control-dataview-item-active-bg-color:var(--ibiz-color-fill-2);--ibiz-control-dataview-item-font-weight:var(--ibiz-control-dataview-font-weight);--ibiz-control-dataview-item-border-color:var(--ibiz-control-dataview-border-color);display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:flex-start;position:relative;height:100%;padding:var(--ibiz-control-dataview-padding);background-color:var(--ibiz-control-dataview-bg-color)}.ibiz-control-dataview__nav-icon{position:absolute;top:20px;right:10px;color:var(--ibiz-control-dataview-icon-color);cursor:pointer}.ibiz-control-dataview__nav-icon:hover{color:var(--ibiz-control-dataview-hover-color)}.ibiz-control-dataview__drag-icon{cursor:move;visibility:hidden}.ibiz-control-dataview__content{flex-grow:1;height:100%;padding:var(--ibiz-control-dataview-content-padding);overflow:auto;background-color:var(--ibiz-control-dataview-content-bg-color)}.ibiz-control-dataview__content--icon{text-align:center}.ibiz-control-dataview__content--icon i{font-size:var(--ibiz-control-dataview-icon-size);color:var(--ibiz-control-dataview-icon-color);cursor:pointer}.ibiz-control-dataview__content--icon i:hover{color:var(--ibiz-control-dataview-hover-color)}.ibiz-control-dataview__pagination{flex-shrink:0}.ibiz-control-dataview__layout-row{padding:var(--ibiz-spacing-base-tight)}.ibiz-control-dataview__layout-col{padding:0 var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base-tight) 0}.ibiz-control-dataview__layout-flex{display:flex;flex-wrap:wrap;gap:var(--ibiz-spacing-tight);align-content:flex-start;overflow:auto}.ibiz-control-dataview__batchtoolbar{display:none;padding:0 var(--ibiz-spacing-base);margin:var(--ibiz-spacing-extra-tight) 0}.ibiz-control-dataview__batchtoolbar .ibiz-control-toolbar{gap:var(--ibiz-spacing-tight)}.ibiz-control-dataview__batchtoolbar .ibiz-control-toolbar__item{margin:0}.ibiz-control-dataview__batchtoolbar.is-show{display:block}.ibiz-control-dataview__quicktoolbar{display:flex;justify-content:center;width:100%}.ibiz-control-dataview-item{color:var(--ibiz-control-dataview-item-text-color);cursor:pointer;background-color:var(--ibiz-control-dataview-item-bg-color)}.ibiz-control-dataview-item:hover{background-color:var(--ibiz-control-dataview-item-hover-bg-color)}.ibiz-control-dataview-item:hover .ibiz-control-dataview__drag-icon{visibility:visible}.ibiz-control-dataview-item__new{color:var(--ibiz-color-text-3);border:2px dashed var(--ibiz-control-dataview-item-border-color)}.ibiz-control-dataview-item__new .el-card__body{display:flex;align-items:center;justify-content:center}.ibiz-control-dataview-item__content{display:flex;align-items:center;width:100%;height:100%}.ibiz-control-dataview-item__content--checkbox{flex-shrink:0;margin-right:var(--ibiz-spacing-tight)!important}.ibiz-control-dataview-item.is-active{background-color:var(--ibiz-control-dataview-item-active-bg-color)}.ibiz-control-dataview-item-content{flex-grow:1}.ibiz-control-dataview-item-content__top--title{text-align:center}.ibiz-control-dataview-item-content__top--description{min-width:150px;text-align:justify;text-justify:newspaper;word-break:break-all}.ibiz-control-dataview-item-content__bottom{display:flex;align-items:center;justify-content:center;padding:var(--ibiz-spacing-tight);margin-top:var(--ibiz-spacing-tight);border-top:1px solid var(--ibiz-control-dataview-item-border-color)}.ibiz-control-dataview-item-content__bottom--actions{display:flex;-moz-column-gap:var(--ibiz-spacing-extra-tight);column-gap:var(--ibiz-spacing-extra-tight);justify-content:center}.ibiz-control-dataview-item-content__bottom--actions .ibiz-action-toolbar__item{margin:0}.ibiz-control-dataview-item-content__bottom--actions .ibiz-action-toolbar__item--label.is-has-caption{margin:0}.ibiz-control-dataview-group-content{width:100%}.ibiz-control-dataview-group-content__item .el-collapse-item__content{display:flex;flex-wrap:wrap}.ibiz-control-dataview-group-content__item--empty{width:100%;text-align:center}.ibiz-control-dataview-group-content__item.is-collapse .ibiz-control-dataview-group-content__item-content{height:0;overflow:hidden}.ibiz-control-dataview-group-content__item-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--ibiz-control-dataview-group-padding);margin-bottom:var(--ibiz-spacing-tight);border-bottom:1px solid var(--ibiz-control-dataview-group-border-color)}.ibiz-control-dataview-group-content__item-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--ibiz-control-dataview-group-font-size);font-weight:var(--ibiz-control-dataview-group-font-weight);color:var(--ibiz-control-dataview-group-text-color)}
+.ibiz-control-dataview{--ibiz-control-dataview-bg-color:transparent;--ibiz-control-dataview-icon-color:var(--ibiz-color-text-2);--ibiz-control-dataview-hover-color:var(--ibiz-color-primary-hover);--ibiz-control-dataview-icon-size:var(--ibiz-font-size-header-3);--ibiz-control-dataview-padding:var(--ibiz-spacing-none);--ibiz-control-dataview-border-color:var(--ibiz-color-border);--ibiz-control-dataview-font-size:var(--ibiz-font-size-regular);--ibiz-control-dataview-font-weight:var(--ibiz-font-weight-regular);--ibiz-control-dataview-content-bg-color:var(--ibiz-control-dataview-bg-color);--ibiz-control-dataview-content-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);--ibiz-control-dataview-group-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-group-font-size:var(--ibiz-font-size-header-5);--ibiz-control-dataview-group-padding:var(--ibiz-spacing-base-tight);--ibiz-control-dataview-group-font-weight:var(--ibiz-font-weight-bold);--ibiz-control-dataview-group-border-color:var(--ibiz-control-dataview-border-color);--ibiz-control-dataview-item-bg-color:transparent;--ibiz-control-dataview-item-padding:var(--ibiz-spacing-base);--ibiz-control-dataview-item-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-item-font-size:var(--ibiz-font-size-header-6);--ibiz-control-dataview-item-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-control-dataview-item-active-bg-color:var(--ibiz-color-fill-2);--ibiz-control-dataview-item-font-weight:var(--ibiz-control-dataview-font-weight);--ibiz-control-dataview-item-border-color:var(--ibiz-control-dataview-border-color);display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:flex-start;position:relative;height:100%;padding:var(--ibiz-control-dataview-padding);background-color:var(--ibiz-control-dataview-bg-color)}.ibiz-control-dataview__nav-icon{position:absolute;top:20px;right:10px;color:var(--ibiz-control-dataview-icon-color);cursor:pointer}.ibiz-control-dataview__nav-icon:hover{color:var(--ibiz-control-dataview-hover-color)}.ibiz-control-dataview__drag-icon{cursor:move;visibility:hidden}.ibiz-control-dataview__layout-content{display:flex;flex-direction:column;height:100%}.ibiz-control-dataview__content{flex-grow:1;height:100%;padding:var(--ibiz-control-dataview-content-padding);overflow:auto;background-color:var(--ibiz-control-dataview-content-bg-color)}.ibiz-control-dataview__content--icon{text-align:center}.ibiz-control-dataview__content--icon i{font-size:var(--ibiz-control-dataview-icon-size);color:var(--ibiz-control-dataview-icon-color);cursor:pointer}.ibiz-control-dataview__content--icon i:hover{color:var(--ibiz-control-dataview-hover-color)}.ibiz-control-dataview__pagination{flex-shrink:0}.ibiz-control-dataview__layout-row{padding:var(--ibiz-spacing-base-tight)}.ibiz-control-dataview__layout-col{padding:0 var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base-tight) 0}.ibiz-control-dataview__layout-flex{display:flex;flex-wrap:wrap;gap:var(--ibiz-spacing-tight);align-content:flex-start;overflow:auto}.ibiz-control-dataview__batchtoolbar{display:none;padding:0 var(--ibiz-spacing-base);margin:var(--ibiz-spacing-extra-tight) 0}.ibiz-control-dataview__batchtoolbar .ibiz-control-toolbar{gap:var(--ibiz-spacing-tight)}.ibiz-control-dataview__batchtoolbar .ibiz-control-toolbar__item{margin:0}.ibiz-control-dataview__batchtoolbar.is-show{display:block}.ibiz-control-dataview__quicktoolbar{display:flex;justify-content:center;width:100%}.ibiz-control-dataview-item{color:var(--ibiz-control-dataview-item-text-color);cursor:pointer;background-color:var(--ibiz-control-dataview-item-bg-color)}.ibiz-control-dataview-item:hover{background-color:var(--ibiz-control-dataview-item-hover-bg-color)}.ibiz-control-dataview-item:hover .ibiz-control-dataview__drag-icon{visibility:visible}.ibiz-control-dataview-item__new{color:var(--ibiz-color-text-3);border:2px dashed var(--ibiz-control-dataview-item-border-color)}.ibiz-control-dataview-item__new .el-card__body{display:flex;align-items:center;justify-content:center}.ibiz-control-dataview-item__content{display:flex;align-items:center;width:100%;height:100%}.ibiz-control-dataview-item__content--checkbox{flex-shrink:0;margin-right:var(--ibiz-spacing-tight)!important}.ibiz-control-dataview-item.is-active{background-color:var(--ibiz-control-dataview-item-active-bg-color)}.ibiz-control-dataview-item-content{flex-grow:1}.ibiz-control-dataview-item-content__top--title{text-align:center}.ibiz-control-dataview-item-content__top--description{min-width:150px;text-align:justify;text-justify:newspaper;word-break:break-all}.ibiz-control-dataview-item-content__bottom{display:flex;align-items:center;justify-content:center;padding:var(--ibiz-spacing-tight);margin-top:var(--ibiz-spacing-tight);border-top:1px solid var(--ibiz-control-dataview-item-border-color)}.ibiz-control-dataview-item-content__bottom--actions{display:flex;-moz-column-gap:var(--ibiz-spacing-extra-tight);column-gap:var(--ibiz-spacing-extra-tight);justify-content:center}.ibiz-control-dataview-item-content__bottom--actions .ibiz-action-toolbar__item{margin:0}.ibiz-control-dataview-item-content__bottom--actions .ibiz-action-toolbar__item--label.is-has-caption{margin:0}.ibiz-control-dataview-group-content{width:100%}.ibiz-control-dataview-group-content__item .el-collapse-item__content{display:flex;flex-wrap:wrap}.ibiz-control-dataview-group-content__item--empty{width:100%;text-align:center}.ibiz-control-dataview-group-content__item.is-collapse .ibiz-control-dataview-group-content__item-content{height:0;overflow:hidden}.ibiz-control-dataview-group-content__item-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--ibiz-control-dataview-group-padding);margin-bottom:var(--ibiz-spacing-tight);border-bottom:1px solid var(--ibiz-control-dataview-group-border-color)}.ibiz-control-dataview-group-content__item-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--ibiz-control-dataview-group-font-size);font-weight:var(--ibiz-control-dataview-group-font-weight);color:var(--ibiz-control-dataview-group-text-color)}