@ibiz-template/vue3-components 0.7.37-alpha.5 → 0.7.38-alpha.21

package/es/view-engine/tree-exp-view.engine.mjs

@@ -1,4 +1,5 @@
 import { SysUIActionTag } from '@ibiz-template/runtime';
+import { RuntimeError } from '@ibiz-template/core';
 import { ExpViewEngine } from './exp-view.engine.mjs';
 
 "use strict";
@@ -42,6 +43,40 @@ class TreeExpViewEngine extends ExpViewEngine {
       await this.tree.refreshNodeChildren(args.data[0], true);
       return null;
     }
+    if (key === SysUIActionTag.EXPAND) {
+      const { data = [] } = args;
+      const { srfcollapsetag } = args.params || {};
+      let tag = srfcollapsetag || "";
+      if (!tag && data.length > 0) {
+        tag = data[0].srfnodeid;
+      }
+      if (!tag) {
+        throw new RuntimeError(ibiz.i18n.t("viewEngine.noExpandTag"));
+      }
+      this.tree.changeCollapse({ tag, expand: true });
+      return null;
+    }
+    if (key === SysUIActionTag.COLLAPSE) {
+      const { data = [] } = args;
+      const { srfcollapsetag } = args.params || {};
+      let tag = srfcollapsetag || "";
+      if (!tag && data.length > 0) {
+        tag = data[0].srfnodeid;
+      }
+      if (!tag) {
+        throw new RuntimeError(ibiz.i18n.t("viewEngine.noCollapseTag"));
+      }
+      this.tree.changeCollapse({ tag, expand: false });
+      return null;
+    }
+    if (key === SysUIActionTag.EXPANDALL) {
+      this.tree.changeCollapse({ expand: true });
+      return null;
+    }
+    if (key === SysUIActionTag.COLLAPSEALL) {
+      this.tree.changeCollapse({ expand: false });
+      return null;
+    }
     return super.call(key, args);
   }
 }

package/es/view-engine/tree-grid-view.engine.d.ts

@@ -1,4 +1,4 @@
-import { ViewController, ITreeGridViewEvent, ITreeGridViewState } from '@ibiz-template/runtime';
+import { ViewController, ITreeGridViewEvent, ITreeGridViewState, TreeGridController } from '@ibiz-template/runtime';
 import { IAppDETreeGridView } from '@ibiz/model-core';
 import { GridViewEngine } from './grid-view.engine';
 export declare class TreeGridViewEngine extends GridViewEngine {
@@ -13,5 +13,7 @@ export declare class TreeGridViewEngine extends GridViewEngine {
      * @memberof TreeGridViewEngine
      */
     get xdataControlName(): string;
+    get treeGrid(): TreeGridController;
     onCreated(): Promise<void>;
+    call(key: string, args: any): Promise<IData | null | undefined>;
 }

package/es/view-engine/tree-grid-view.engine.mjs

@@ -1,3 +1,5 @@
+import { SysUIActionTag } from '@ibiz-template/runtime';
+import { RuntimeError } from '@ibiz-template/core';
 import { GridViewEngine } from './grid-view.engine.mjs';
 
 "use strict";
@@ -14,6 +16,9 @@ class TreeGridViewEngine extends GridViewEngine {
   get xdataControlName() {
     return "treegrid";
   }
+  get treeGrid() {
+    return this.view.getController("treegrid");
+  }
   async onCreated() {
     await super.onCreated();
     if (!this.view.slotProps.treegrid) {
@@ -22,6 +27,50 @@ class TreeGridViewEngine extends GridViewEngine {
       Object.assign(this.view.slotProps.treegrid, this.view.slotProps.grid);
     }
   }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
+  async call(key, args) {
+    if (key === SysUIActionTag.EXPAND) {
+      const { srfcollapsetag } = args.params || {};
+      let tag = srfcollapsetag || "";
+      if (!tag) {
+        const { selectedData } = this.treeGrid.state;
+        const selectedGroup = selectedData.filter((x) => x.hasChildren);
+        if (selectedGroup.length > 0) {
+          tag = selectedGroup[0].srfkey;
+        }
+      }
+      if (!tag) {
+        throw new RuntimeError(ibiz.i18n.t("viewEngine.noExpandTag"));
+      }
+      this.treeGrid.changeCollapse({ tag, expand: true });
+      return null;
+    }
+    if (key === SysUIActionTag.COLLAPSE) {
+      const { srfcollapsetag } = args.params || {};
+      let tag = srfcollapsetag || "";
+      if (!tag) {
+        const { selectedData } = this.treeGrid.state;
+        const selectedGroup = selectedData.filter((x) => x.hasChildren);
+        if (selectedGroup.length > 0) {
+          tag = selectedGroup[0].srfkey;
+        }
+      }
+      if (!tag) {
+        throw new RuntimeError(ibiz.i18n.t("viewEngine.noCollapseTag"));
+      }
+      this.treeGrid.changeCollapse({ tag, expand: false });
+      return null;
+    }
+    if (key === SysUIActionTag.EXPANDALL) {
+      this.treeGrid.changeCollapse({ expand: true });
+      return null;
+    }
+    if (key === SysUIActionTag.COLLAPSEALL) {
+      this.treeGrid.changeCollapse({ expand: false });
+      return null;
+    }
+    return super.call(key, args);
+  }
 }
 
 export { TreeGridViewEngine };

package/es/view-engine/tree-view.engine.mjs

@@ -1,4 +1,5 @@
 import { MDViewEngine, SysUIActionTag } from '@ibiz-template/runtime';
+import { RuntimeError } from '@ibiz-template/core';
 
 "use strict";
 class TreeViewEngine extends MDViewEngine {
@@ -30,6 +31,40 @@ class TreeViewEngine extends MDViewEngine {
       await this.tree.refreshNodeChildren(args.data[0], true);
       return null;
     }
+    if (key === SysUIActionTag.EXPAND) {
+      const { data = [] } = args;
+      const { srfcollapsetag } = args.params || {};
+      let tag = srfcollapsetag || "";
+      if (!tag && data.length > 0) {
+        tag = data[0].srfnodeid;
+      }
+      if (!tag) {
+        throw new RuntimeError(ibiz.i18n.t("viewEngine.noExpandTag"));
+      }
+      this.tree.changeCollapse({ tag, expand: true });
+      return null;
+    }
+    if (key === SysUIActionTag.COLLAPSE) {
+      const { data = [] } = args;
+      const { srfcollapsetag } = args.params || {};
+      let tag = srfcollapsetag || "";
+      if (!tag && data.length > 0) {
+        tag = data[0].srfnodeid;
+      }
+      if (!tag) {
+        throw new RuntimeError(ibiz.i18n.t("viewEngine.noCollapseTag"));
+      }
+      this.tree.changeCollapse({ tag, expand: false });
+      return null;
+    }
+    if (key === SysUIActionTag.EXPANDALL) {
+      this.tree.changeCollapse({ expand: true });
+      return null;
+    }
+    if (key === SysUIActionTag.COLLAPSEALL) {
+      this.tree.changeCollapse({ expand: false });
+      return null;
+    }
     return super.call(key, args);
   }
 }

package/es/web-app/App.mjs

@@ -1,5 +1,5 @@
-import { onUnmounted, resolveComponent, createVNode, defineComponent } from 'vue';
-import { ViewMode, Modal } from '@ibiz-template/runtime';
+import { defineComponent, onUnmounted, createVNode, resolveComponent } from 'vue';
+import { Modal, ViewMode } from '@ibiz-template/runtime';
 import { AppHooks } from '@ibiz-template/vue3-util';
 import './App.css';
 

package/es/web-app/components/modal-router-shell/modal-router-shell.mjs

@@ -1,4 +1,4 @@
-import { ref, toRaw, onUnmounted, createVNode, defineComponent } from 'vue';
+import { defineComponent, ref, toRaw, onUnmounted, createVNode } from 'vue';
 import { parseRouteViewData, createOverlayView, routerCallback, route2routePath } from '@ibiz-template/vue3-util';
 import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router';
 import { IBizContext } from '@ibiz-template/core';

package/es/web-app/components/router-shell/router-shell.mjs

@@ -1,7 +1,7 @@
-import { ref, toRaw, onUnmounted, watch, onActivated, onDeactivated, Fragment, resolveComponent, h, createVNode, defineComponent } from 'vue';
+import { defineComponent, ref, toRaw, onUnmounted, watch, onActivated, onDeactivated, createVNode, Fragment, h, resolveComponent } from 'vue';
 import { parseRouteViewData } from '@ibiz-template/vue3-util';
 import { useRoute, useRouter } from 'vue-router';
-import { ViewMode, Modal, RouteConst } from '@ibiz-template/runtime';
+import { Modal, ViewMode, RouteConst } from '@ibiz-template/runtime';
 import { IBizContext } from '@ibiz-template/core';
 import { mergeDeepLeft } from 'ramda';
 

package/es/web-app/guard/auth-guard/auth-guard.mjs

@@ -173,11 +173,10 @@ class AuthGuard {
     }
   }
   async initTheme(appModel) {
-    if (!appModel.appUIThemes) {
-      const module = await import('@ibiz-template/web-theme');
-      const theme = module.default || module;
-      AppHooks.useComponent.callSync(null, theme);
-    } else {
+    const module = await import('@ibiz-template/web-theme');
+    const theme = module.default || module;
+    AppHooks.useComponent.callSync(null, theme);
+    if (appModel.appUIThemes) {
       await this.loadTheme();
     }
   }

package/es/web-app/guard/auth-guard/dyna-auth-guard.mjs

@@ -48,11 +48,10 @@ class DynaAuthGuard extends AuthGuard {
         });
         i18n.global.mergeLocaleMessage(lang, data);
       }
-      if (!appModel.appUIThemes) {
-        const module = await import('@ibiz-template/web-theme');
-        const theme = module.default || module;
-        AppHooks.useComponent.callSync(null, theme);
-      } else {
+      const module = await import('@ibiz-template/web-theme');
+      const theme = module.default || module;
+      AppHooks.useComponent.callSync(null, theme);
+      if (appModel.appUIThemes) {
         await this.loadTheme();
       }
       if (app.model.title) {

package/es/web-app/router/index.mjs

@@ -1,4 +1,4 @@
-import { createWebHashHistory, createRouter } from 'vue-router';
+import { createRouter, createWebHashHistory } from 'vue-router';
 import { AppRedirectView } from '@ibiz-template/vue3-util';
 import { RouteConst } from '@ibiz-template/runtime';
 import NProgress from '../../node_modules/.pnpm/nprogress@0.2.0/node_modules/nprogress/nprogress.mjs';

package/lib/common/action-toolbar/action-toolbar.cjs

@@ -40,10 +40,11 @@ const IBizActionToolbar = /* @__PURE__ */ vue.defineComponent({
   setup(props, {
     emit
   }) {
+    var _a;
     const ns = vue3Util.useNamespace("action-toolbar");
     const dropdownRef = vue.ref();
     const popoverVisible = vue.ref(false);
-    props.actionDetails.forEach((detail) => {
+    (_a = props.actionDetails) == null ? void 0 : _a.forEach((detail) => {
       if (detail.capLanguageRes && detail.capLanguageRes.lanResTag) {
         detail.caption = ibiz.i18n.t(detail.capLanguageRes.lanResTag, detail.caption);
       }
@@ -92,6 +93,7 @@ const IBizActionToolbar = /* @__PURE__ */ vue.defineComponent({
     };
   },
   render() {
+    var _a;
     const details = this.actionDetails || [];
     const renderDivider = (isExpand) => {
       return vue.createVNode(vue.resolveComponent("el-divider"), {
@@ -102,7 +104,8 @@ const IBizActionToolbar = /* @__PURE__ */ vue.defineComponent({
     };
     const renderActions = (items, isExpand = true) => {
       return items.map((detail) => {
-        if (this.actionsState[detail.id].visible) {
+        var _a2;
+        if ((_a2 = this.actionsState[detail.id]) == null ? void 0 : _a2.visible) {
           return [detail.addSeparator && renderDivider(isExpand), vue.createVNode(vue.resolveComponent("el-button"), {
             "text": true,
             "size": "small",
@@ -162,7 +165,7 @@ const IBizActionToolbar = /* @__PURE__ */ vue.defineComponent({
         default: () => [_slot]
       })];
     };
-    if (!this.actionsState.visible) {
+    if (!((_a = this.actionsState) == null ? void 0 : _a.visible)) {
       return;
     }
     if (this.mode === "buttons") {

package/lib/common/anchor-container/anchor-bar-list/anchor-bar-list.cjs

@@ -0,0 +1,71 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./anchor-bar-list.css');
+
+"use strict";
+const IBizAnchorBarList = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizAnchorBarList",
+  props: {
+    anchorList: {
+      type: Array,
+      default: []
+    },
+    navBarStyle: {
+      type: String
+    },
+    navBarPos: {
+      type: String
+    },
+    selected: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["select"],
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("anchor-bar-list");
+    const select = vue.ref("");
+    const onSelect = (key) => {
+      emit("select", key);
+    };
+    const renderAnchorDefaultStyle = () => {
+      var _a, _b;
+      if (!select.value) {
+        select.value = (_b = (_a = props.anchorList) == null ? void 0 : _a[0]) == null ? void 0 : _b.id;
+      }
+      return props.anchorList.map((item) => {
+        return vue.createVNode("div", {
+          "class": [ns.e("item"), ns.is("selected", select.value === item.id)],
+          "title": item.title,
+          "onClick": () => onSelect(item.id)
+        }, [vue.createVNode("div", {
+          "class": ns.em("item", "title")
+        }, [item.title])]);
+      });
+    };
+    vue.watch(() => props.selected, (newVal) => {
+      select.value = newVal;
+    }, {
+      immediate: true
+    });
+    return {
+      ns,
+      renderAnchorDefaultStyle
+    };
+  },
+  render() {
+    let content = null;
+    if (this.navBarStyle === "DEFAULT" || !this.navBarStyle) {
+      content = this.renderAnchorDefaultStyle();
+    }
+    return vue.createVNode("div", {
+      "class": [this.ns.b(), this.ns.is("usermode", this.navBarPos === "USER" || this.navBarPos === "USER2")]
+    }, [content]);
+  }
+});
+
+exports.IBizAnchorBarList = IBizAnchorBarList;

package/lib/common/anchor-container/anchor-bar-list/anchor-bar-list.css

@@ -0,0 +1 @@
+.ibiz-anchor-bar-list{--ibiz-anchor-bar-item-height:32px;--ibiz-anchor-bar-selected-icon-width:4px;position:relative}.ibiz-anchor-bar-list__item{height:var(--ibiz-anchor-bar-item-height);padding-left:var(--ibiz-spacing-base);overflow:hidden;font-size:var(--ibiz-font-size-header-6);line-height:var(--ibiz-anchor-bar-item-height);color:var(--ibiz-color-text-3);text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.ibiz-anchor-bar-list__item--title{display:block;width:100%;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.ibiz-anchor-bar-list__item.is-selected{position:relative;font-size:var(--ibiz-font-size-header-5);font-weight:var(--ibiz-font-weight-bold);color:var(--ibiz-color-primary-active)}.ibiz-anchor-bar-list__item.is-selected::after{position:absolute;top:0;left:0;width:var(--ibiz-anchor-bar-selected-icon-width);height:100%;content:"";background-color:var(--ibiz-color-primary);border-radius:calc(var(--ibiz-anchor-bar-selected-icon-width)/ 2)}.ibiz-anchor-bar-list__item:hover{color:var(--ibiz-color-primary-hover)}.ibiz-anchor-bar-list::before{position:absolute;top:0;left:0;width:var(--ibiz-anchor-bar-selected-icon-width);height:100%;content:"";background-color:var(--ibiz-color-fill-0)}.ibiz-anchor-bar-list.is-usermode{display:flex;align-items:center;width:100%;height:100%}.ibiz-anchor-bar-list.is-usermode .ibiz-anchor-bar-list__item{display:flex;flex:1;align-items:center;justify-content:center;width:100%;height:100%;overflow:hidden;font-size:var(--ibiz-font-size-header-6);color:var(--ibiz-color-text-3);cursor:pointer}.ibiz-anchor-bar-list.is-usermode .ibiz-anchor-bar-list__item--title{display:block;width:100%;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}.ibiz-anchor-bar-list.is-usermode .ibiz-anchor-bar-list__item.is-selected{position:relative;font-size:var(--ibiz-font-size-header-5);font-weight:var(--ibiz-font-weight-bold);color:var(--ibiz-color-primary-active)}.ibiz-anchor-bar-list.is-usermode .ibiz-anchor-bar-list__item.is-selected::after{position:absolute;top:unset;bottom:0;left:0;width:100%;height:var(--ibiz-anchor-bar-selected-icon-width);content:"";background-color:var(--ibiz-color-primary);border-radius:calc(var(--ibiz-anchor-bar-selected-icon-width)/ 2)}.ibiz-anchor-bar-list.is-usermode .ibiz-anchor-bar-list__item:hover{color:var(--ibiz-color-primary-hover)}.ibiz-anchor-bar-list.is-usermode::before{position:absolute;top:unset;bottom:0;left:0;width:100%;height:var(--ibiz-anchor-bar-selected-icon-width);content:"";background-color:var(--ibiz-color-fill-0)}

package/lib/common/anchor-container/anchor-container.cjs

@@ -0,0 +1,157 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+var anchorBarList = require('./anchor-bar-list/anchor-bar-list.cjs');
+require('./anchor-container.css');
+
+"use strict";
+const IBizAnchorContainer = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizAnchorContainer",
+  components: {
+    IBizAnchorBarList: anchorBarList.IBizAnchorBarList
+  },
+  props: {
+    // 锚点列表，项值格式为{id:xx,text:xx}
+    anchorList: {
+      type: Array,
+      default: []
+    },
+    // 锚点目标元素
+    anchorTargetEle: {
+      type: Object,
+      required: true
+    },
+    // 锚点导航栏配置
+    navBarConfig: {
+      type: Object,
+      default: () => {
+      }
+    }
+  },
+  setup(props) {
+    const ns = vue3Util.useNamespace("anchor-container");
+    const timer = vue.ref();
+    const isClick = vue.ref(false);
+    const selected = vue.ref("");
+    const {
+      navBarPos = "USER",
+      navBarSysCss,
+      navBarWidth,
+      navBarStyle,
+      navbarHeight
+    } = props.navBarConfig;
+    const onSelect = (key) => {
+      clearInterval(timer.value);
+      const el = document.querySelector("#".concat(key));
+      isClick.value = true;
+      selected.value = key;
+      if (el) {
+        el.scrollIntoView({
+          behavior: "smooth",
+          block: "start"
+        });
+        timer.value = setTimeout(() => {
+          isClick.value = false;
+        }, 1e3);
+      }
+    };
+    const handleScroll = () => {
+      if (isClick.value)
+        return;
+      let closestDistance = Infinity;
+      let tempSelect = "";
+      for (let i = 0; i < props.anchorList.length; i++) {
+        const childElement = document.querySelector("#".concat(props.anchorList[i].id));
+        if (childElement) {
+          const rect = childElement.getBoundingClientRect();
+          const parentRect = props.anchorTargetEle.$el.getBoundingClientRect();
+          const relativeTop = rect.top - parentRect.top;
+          const isInView = rect.bottom > parentRect.top && rect.top < parentRect.bottom;
+          if (isInView && relativeTop >= 0 && relativeTop < closestDistance) {
+            closestDistance = relativeTop;
+            tempSelect = props.anchorList[i].id;
+          }
+        }
+      }
+      selected.value = tempSelect;
+    };
+    const style = () => {
+      const tempStyle = {};
+      if (navBarWidth) {
+        if (navBarWidth === 1) {
+          Object.assign(tempStyle, {
+            width: "auto"
+          });
+        } else {
+          Object.assign(tempStyle, {
+            width: "".concat(navBarWidth, "px"),
+            minWidth: "".concat(navBarWidth, "px"),
+            maxWidth: "".concat(navBarWidth, "px")
+          });
+        }
+      }
+      if (navbarHeight) {
+        if (navbarHeight === 1) {
+          Object.assign(tempStyle, {
+            height: "auto"
+          });
+        } else {
+          Object.assign(tempStyle, {
+            height: "".concat(navbarHeight, "px"),
+            minHeight: "".concat(navbarHeight, "px")
+          });
+        }
+      }
+      return tempStyle;
+    };
+    const target = vue.watch(() => {
+      if (props.anchorTargetEle && props.anchorTargetEle.$el) {
+        return props.anchorTargetEle.$el;
+      }
+      return null;
+    }, (newVal) => {
+      if (newVal) {
+        newVal.addEventListener("scroll", handleScroll);
+        newVal.classList.add("no-slider");
+        target();
+      }
+    }, {
+      immediate: true
+    });
+    vue.onUnmounted(() => {
+      var _a, _b;
+      if ((_a = props.anchorTargetEle) == null ? void 0 : _a.$el) {
+        ((_b = props.anchorTargetEle) == null ? void 0 : _b.$el).removeEventListener("scroll", handleScroll);
+      }
+    });
+    return {
+      ns,
+      selected,
+      navBarPos,
+      navBarStyle,
+      navBarSysCss,
+      style,
+      onSelect
+    };
+  },
+  render() {
+    var _a, _b;
+    return vue.createVNode("div", {
+      "class": [this.ns.b(), this.ns.is("".concat(this.navBarPos.toLowerCase()), true), this.ns.is("broadside", this.navBarPos !== "USER" && this.navBarPos !== "USER2"), this.ns.is("usermode", this.navBarPos === "USER" || this.navBarPos === "USER2"), this.ns.b("".concat(this.navBarStyle || "default").toLowerCase())]
+    }, [vue.createVNode("div", {
+      "class": [this.ns.e("anchor"), this.navBarSysCss],
+      "style": this.style()
+    }, [vue.createVNode(anchorBarList.IBizAnchorBarList, {
+      "anchorList": this.anchorList,
+      "navBarStyle": this.navBarStyle,
+      "navBarPos": this.navBarPos,
+      "selected": this.selected,
+      "onSelect": this.onSelect
+    }, null)]), vue.createVNode("div", {
+      "class": this.ns.e("content")
+    }, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)])]);
+  }
+});
+
+exports.IBizAnchorContainer = IBizAnchorContainer;

package/lib/common/anchor-container/anchor-container.css

@@ -0,0 +1 @@
+.ibiz-anchor-container{--ibiz-anchor-container-default-width:200px;--ibiz-anchor-container-min-height:60px;display:flex;gap:var(--ibiz-spacing-tight);width:100%;height:100%;padding:var(--ibiz-spacing-tight)}.ibiz-anchor-container__content{width:100%;height:100%;overflow:auto}.ibiz-anchor-container__content .no-slider{overflow:auto}.ibiz-anchor-container__content .no-slider::-webkit-scrollbar{background-color:transparent}.ibiz-anchor-container__content .no-slider::-webkit-scrollbar-thumb{background-color:transparent}.ibiz-anchor-container__content .no-slider::-webkit-scrollbar-track{background-color:transparent}.ibiz-anchor-container.is-broadside .ibiz-anchor-container__anchor{width:var(--ibiz-anchor-container-default-width);margin:var(--ibiz-spacing-base) var(--ibiz-spacing-tight);overflow:auto}.ibiz-anchor-container.is-topleft .ibiz-anchor-container__anchor{align-self:start}.ibiz-anchor-container.is-topright{flex-direction:row-reverse}.ibiz-anchor-container.is-topright .ibiz-anchor-container__anchor{align-self:start}.ibiz-anchor-container.is-middleleft .ibiz-anchor-container__anchor{align-self:center}.ibiz-anchor-container.is-middleright{flex-direction:row-reverse}.ibiz-anchor-container.is-middleright .ibiz-anchor-container__anchor{align-self:center}.ibiz-anchor-container.is-bottomleft .ibiz-anchor-container__anchor{align-self:end}.ibiz-anchor-container.is-bottomright{flex-direction:row-reverse}.ibiz-anchor-container.is-bottomright .ibiz-anchor-container__anchor{align-self:end}.ibiz-anchor-container.is-usermode{flex-direction:column}.ibiz-anchor-container.is-usermode .ibiz-anchor-container__anchor{display:flex;align-items:center;width:100%;min-height:var(--ibiz-anchor-container-min-height);padding:0 var(--ibiz-spacing-base);overflow:auto}.ibiz-anchor-container.is-user2{flex-direction:column-reverse}