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

package/es/panel-component/app-extend-menu/bottom-side-menu/bottom-side-menu.controller.d.ts

@@ -0,0 +1,10 @@
+import { ExtendMenuBaseController } from '../extend-menu-base/extend-menu-base.controller';
+/**
+ * @description 底部菜单
+ * @export
+ * @class BottomSideMenuController
+ * @extends {ExtendMenuBaseController}
+ */
+export declare class BottomSideMenuController extends ExtendMenuBaseController {
+    protected appMenuName: string;
+}

package/es/panel-component/app-extend-menu/bottom-side-menu/bottom-side-menu.controller.mjs

@@ -0,0 +1,17 @@
+import { ExtendMenuBaseController } from '../extend-menu-base/extend-menu-base.controller.mjs';
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class BottomSideMenuController extends ExtendMenuBaseController {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "appMenuName", "bottomsidemenu");
+  }
+}
+
+export { BottomSideMenuController };

package/es/panel-component/app-extend-menu/bottom-side-menu/bottom-side-menu.css

@@ -0,0 +1 @@
+.ibiz-bottom-side-menu{width:100%;height:100%}.ibiz-col--self-align>.ibiz-bottom-side-menu{width:100%;height:100%}

package/es/panel-component/app-extend-menu/bottom-side-menu/bottom-side-menu.d.ts

@@ -0,0 +1,45 @@
+import { PropType } from 'vue';
+import { IPanelRawItem } from '@ibiz/model-core';
+import { BottomSideMenuController } from './bottom-side-menu.controller';
+import './bottom-side-menu.scss';
+/**
+ * 底部菜单
+ * @primary
+ * @description 首页视图扩展菜单底部菜单
+ * @panelitemparams {name:rendermode,parameterType:'BUTTON' | 'MENU',defaultvalue:'BUTTON',description:菜单项绘制模式，其中BUTTON表示按照按钮形态绘制、MENU表示按照菜单形态绘制}
+ * @primary
+ */
+export declare const BottomSideMenu: import("vue").DefineComponent<{
+    /**
+     * @description 模型数据
+     */
+    modelData: {
+        type: PropType<IPanelRawItem>;
+        required: true;
+    };
+    /**
+     * @description 底部菜单控制器
+     */
+    controller: {
+        type: typeof BottomSideMenuController;
+        required: true;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    state: import("../extend-menu-base/extend-menu-base.state").ExtendMenuBase;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * @description 模型数据
+     */
+    modelData: {
+        type: PropType<IPanelRawItem>;
+        required: true;
+    };
+    /**
+     * @description 底部菜单控制器
+     */
+    controller: {
+        type: typeof BottomSideMenuController;
+        required: true;
+    };
+}>>, {}, {}>;

package/es/panel-component/app-extend-menu/bottom-side-menu/bottom-side-menu.mjs

@@ -0,0 +1,56 @@
+import { resolveComponent, createVNode, defineComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { BottomSideMenuController } from './bottom-side-menu.controller.mjs';
+import './bottom-side-menu.css';
+
+"use strict";
+const BottomSideMenu = /* @__PURE__ */ defineComponent({
+  name: "IBizBottomSideMenu",
+  props: {
+    /**
+     * @description 模型数据
+     */
+    modelData: {
+      type: Object,
+      required: true
+    },
+    /**
+     * @description 底部菜单控制器
+     */
+    controller: {
+      type: BottomSideMenuController,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = useNamespace("bottom-side-menu");
+    const {
+      state
+    } = props.controller;
+    return {
+      ns,
+      state
+    };
+  },
+  render() {
+    if (!this.controller.appMenu) {
+      return null;
+    }
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [createVNode(resolveComponent("iBizCommonExtendMenu"), {
+      "renderMode": this.controller.rawItemParams.rendermode,
+      "items": this.state.items,
+      "menuItemsState": this.state.menuItemsState,
+      "providers": this.controller.itemProviders,
+      "position": "BOTTOM",
+      "layoutMode": this.controller.appMenu.layoutMode,
+      "layout": this.controller.appMenu.layout,
+      "onMenuItemClick": (item, event) => {
+        this.controller.handleClickMenuItem(item, event);
+      }
+    }, null)]);
+  }
+});
+
+export { BottomSideMenu };

package/es/panel-component/app-extend-menu/bottom-side-menu/bottom-side-menu.provider.d.ts

@@ -0,0 +1,7 @@
+import { IPanelItem } from '@ibiz/model-core';
+import { IPanelItemProvider, PanelController, PanelItemController } from '@ibiz-template/runtime';
+import { BottomSideMenuController } from './bottom-side-menu.controller';
+export declare class BottomSideMenuProvider implements IPanelItemProvider {
+    component: string;
+    createController(panelItem: IPanelItem, panel: PanelController, parent: PanelItemController | undefined): Promise<BottomSideMenuController>;
+}

package/es/panel-component/app-extend-menu/bottom-side-menu/bottom-side-menu.provider.mjs

@@ -0,0 +1,21 @@
+import { BottomSideMenuController } from './bottom-side-menu.controller.mjs';
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class BottomSideMenuProvider {
+  constructor() {
+    __publicField(this, "component", "IBizBottomSideMenu");
+  }
+  async createController(panelItem, panel, parent) {
+    const c = new BottomSideMenuController(panelItem, panel, parent);
+    await c.init();
+    return c;
+  }
+}
+
+export { BottomSideMenuProvider };

package/es/panel-component/app-extend-menu/bottom-side-menu/index.d.ts

@@ -0,0 +1,5 @@
+import { App } from 'vue';
+declare const _default: {
+    install(app: App): void;
+};
+export default _default;

package/es/panel-component/app-extend-menu/bottom-side-menu/index.mjs

@@ -0,0 +1,16 @@
+import { registerPanelItemProvider } from '@ibiz-template/runtime';
+import { BottomSideMenu } from './bottom-side-menu.mjs';
+import { BottomSideMenuProvider } from './bottom-side-menu.provider.mjs';
+
+"use strict";
+var IBizBottomSideMenu = {
+  install(app) {
+    app.component(BottomSideMenu.name, BottomSideMenu);
+    registerPanelItemProvider(
+      "RAWITEM_PREDEFINE_BOTTOM_SIDE_MENU",
+      () => new BottomSideMenuProvider()
+    );
+  }
+};
+
+export { IBizBottomSideMenu as default };

package/es/panel-component/app-extend-menu/extend-menu-base/common-extend-menu/common-extend-menu.css

@@ -0,0 +1 @@
+.ibiz-common-extend-menu{width:100%;height:100%}

package/es/panel-component/app-extend-menu/extend-menu-base/common-extend-menu/common-extend-menu.d.ts

@@ -0,0 +1,135 @@
+import { PropType } from 'vue';
+import { IAppMenuItem, ILayout } from '@ibiz/model-core';
+import { IAppMenuItemProvider } from '@ibiz-template/runtime';
+import './common-extend-menu.scss';
+/**
+ * 扩展基础菜单
+ * @primary
+ * @description 首页视图扩展基础菜单,通过菜单方向和菜单布局模式决定菜单整体呈现，菜单布局容器模型决定菜单内部呈现（若无值需根据方向做缺省处理）
+ * @primary
+ */
+export declare const CommonExtendMenu: import("vue").DefineComponent<{
+    /**
+     * @description 绘制模式，'BUTTON' | 'MENU': 按钮态(仅识别一层) | 常规菜单态
+     */
+    renderMode: {
+        type: PropType<"BUTTON" | "MENU">;
+        required: true;
+    };
+    /**
+     * @description 菜单项数据
+     */
+    items: {
+        type: PropType<IAppMenuItem[]>;
+        required: true;
+    };
+    /**
+     * @description 菜单项权限数据
+     */
+    menuItemsState: {
+        type: PropType<{
+            [p: string]: {
+                visible: boolean;
+                permitted: boolean;
+            };
+        }>;
+        required: true;
+    };
+    /**
+     * @description 菜单项适配器集合
+     */
+    providers: {
+        type: PropType<{
+            [key: string]: IAppMenuItemProvider;
+        }>;
+        required: true;
+    };
+    /**
+     * @description 菜单方向
+     */
+    position: {
+        type: PropType<"TOP" | "BOTTOM" | "LEFT" | "RIGHT">;
+        required: true;
+    };
+    /**
+     * @description 菜单布局模式,现阶段仅需识别FLEX（flex布局）和BORDER（边缘布局）
+     */
+    layoutMode: {
+        type: PropType<"TABLE_24COL" | "FLEX" | "TABLE" | "TABLE_12COL" | "BORDER" | "ABSOLUTE">;
+        default: string;
+    };
+    /**
+     * @description 菜单布局容器模型（按钮形态才识别）
+     */
+    layout: {
+        type: PropType<ILayout>;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    handleMenuItemClick: (menuItem: IAppMenuItem, event?: MouseEvent) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    /**
+     * @description 项点击事件
+     */
+    menuItemClick: (item: IAppMenuItem, event: MouseEvent) => true;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * @description 绘制模式，'BUTTON' | 'MENU': 按钮态(仅识别一层) | 常规菜单态
+     */
+    renderMode: {
+        type: PropType<"BUTTON" | "MENU">;
+        required: true;
+    };
+    /**
+     * @description 菜单项数据
+     */
+    items: {
+        type: PropType<IAppMenuItem[]>;
+        required: true;
+    };
+    /**
+     * @description 菜单项权限数据
+     */
+    menuItemsState: {
+        type: PropType<{
+            [p: string]: {
+                visible: boolean;
+                permitted: boolean;
+            };
+        }>;
+        required: true;
+    };
+    /**
+     * @description 菜单项适配器集合
+     */
+    providers: {
+        type: PropType<{
+            [key: string]: IAppMenuItemProvider;
+        }>;
+        required: true;
+    };
+    /**
+     * @description 菜单方向
+     */
+    position: {
+        type: PropType<"TOP" | "BOTTOM" | "LEFT" | "RIGHT">;
+        required: true;
+    };
+    /**
+     * @description 菜单布局模式,现阶段仅需识别FLEX（flex布局）和BORDER（边缘布局）
+     */
+    layoutMode: {
+        type: PropType<"TABLE_24COL" | "FLEX" | "TABLE" | "TABLE_12COL" | "BORDER" | "ABSOLUTE">;
+        default: string;
+    };
+    /**
+     * @description 菜单布局容器模型（按钮形态才识别）
+     */
+    layout: {
+        type: PropType<ILayout>;
+    };
+}>> & {
+    onMenuItemClick?: ((item: IAppMenuItem, event: MouseEvent) => any) | undefined;
+}, {
+    layoutMode: "TABLE_24COL" | "FLEX" | "TABLE" | "TABLE_12COL" | "BORDER" | "ABSOLUTE";
+}, {}>;

package/es/panel-component/app-extend-menu/extend-menu-base/common-extend-menu/common-extend-menu.mjs

@@ -0,0 +1,113 @@
+import { createVNode, defineComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import './common-extend-menu.css';
+import { ExtendButtonMenu } from '../extend-button-menu/extend-button-menu.mjs';
+import { ExtendStandardMenu } from '../extend-standard-menu/extend-standard-menu.mjs';
+
+"use strict";
+const CommonExtendMenu = /* @__PURE__ */ defineComponent({
+  name: "IBizCommonExtendMenu",
+  components: {
+    ExtendButtonMenu,
+    ExtendStandardMenu
+  },
+  props: {
+    /**
+     * @description 绘制模式，'BUTTON' | 'MENU': 按钮态(仅识别一层) | 常规菜单态
+     */
+    renderMode: {
+      type: String,
+      required: true
+    },
+    /**
+     * @description 菜单项数据
+     */
+    items: {
+      type: Object,
+      required: true
+    },
+    /**
+     * @description 菜单项权限数据
+     */
+    menuItemsState: {
+      type: Object,
+      required: true
+    },
+    /**
+     * @description 菜单项适配器集合
+     */
+    providers: {
+      type: Object,
+      required: true
+    },
+    /**
+     * @description 菜单方向
+     */
+    position: {
+      type: String,
+      required: true
+    },
+    /**
+     * @description 菜单布局模式,现阶段仅需识别FLEX（flex布局）和BORDER（边缘布局）
+     */
+    layoutMode: {
+      type: String,
+      default: "FLEX"
+    },
+    /**
+     * @description 菜单布局容器模型（按钮形态才识别）
+     */
+    layout: {
+      type: Object
+    }
+  },
+  emits: {
+    /**
+     * @description 项点击事件
+     */
+    menuItemClick: (item, event) => true
+  },
+  setup(props, {
+    emit
+  }) {
+    const ns = useNamespace("common-extend-menu");
+    const handleMenuItemClick = (menuItem, event) => {
+      if (!menuItem || (menuItem == null ? void 0 : menuItem.itemType) === "RAWITEM") {
+        return;
+      }
+      emit("menuItemClick", menuItem, event);
+    };
+    return {
+      ns,
+      handleMenuItemClick
+    };
+  },
+  render() {
+    var _a;
+    let content = createVNode(ExtendButtonMenu, {
+      "items": this.items,
+      "menuItemsState": this.menuItemsState,
+      "providers": this.providers,
+      "position": this.position,
+      "layoutMode": this.layoutMode,
+      "layout": this.layout,
+      "onMenuItemClick": this.handleMenuItemClick
+    }, null);
+    if (((_a = this.renderMode) == null ? void 0 : _a.toLocaleUpperCase()) === "MENU") {
+      content = createVNode(ExtendStandardMenu, {
+        "items": this.items,
+        "menuItemsState": this.menuItemsState,
+        "providers": this.providers,
+        "position": this.position,
+        "layoutMode": this.layoutMode,
+        "layout": this.layout,
+        "onMenuItemClick": this.handleMenuItemClick
+      }, null);
+    }
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [content]);
+  }
+});
+
+export { CommonExtendMenu };

package/es/panel-component/app-extend-menu/extend-menu-base/extend-button-menu/extend-button-menu.css

@@ -0,0 +1 @@
+.ibiz-extend-menu-button{--ibiz-extend-menu-button-padding:var(--ibiz-spacing-extra-tight) 0;--ibiz-extend-menu-button-font-size:var(--ibiz-font-size-header-6);--ibiz-extend-menu-button-rawitem-min-width:var(--ibiz-font-size-header-6);--ibiz-extend-menu-button-icon-width:var(--ibiz-width-icon-large);--ibiz-extend-menu-button-icon-height:var(--ibiz-width-icon-large);--ibiz-extend-menu-button-icon-size:var(--ibiz-width-icon-medium);--ibiz-extend-menu-button-text-margin:0 0 0 var(--ibiz-spacing-tight);--ibiz-extend-menu-button-content-padding:0 var(--ibiz-spacing-tight);--ibiz-extend-menu-button-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-extend-menu-button-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-extend-menu-button-active-color:var(--ibiz-color-primary-active-text);--ibiz-extend-menu-button-active-bg-color:var(--ibiz-color-primary-active);--ibiz-extend-menu-button-color:var(--ibiz-color-text-menu);--ibiz-extend-menu-button-item-height:42px;--ibiz-extend-menu-button-item-horizontal-min-width:200px;--ibiz-extend-menu-button-item-horizontal-margin:0 0 0 var(--ibiz-spacing-extra-tight);--ibiz-extend-menu-button-item-horizontal-separator-margin:0 var(--ibiz-spacing-tight);--ibiz-extend-menu-button-item-horizontal-font-size:var(--ibiz-font-size-header-5);--ibiz-extend-menu-button-item-vertical-margin:var(--ibiz-spacing-extra-tight) 0 0 0;--ibiz-extend-menu-button-item-vertical-separator-margin:var(--ibiz-spacing-tight) 0;--ibiz-extend-menu-button-item-separator-color:var(--ibiz-color-scroll-menu);width:100%;height:100%;padding:var(--ibiz-extend-menu-button-padding)}.ibiz-extend-menu-button__menuitem{width:100%;height:100%;font-size:var(--ibiz-extend-menu-button-font-size)}.ibiz-extend-menu-button__rawitem{width:100%;height:100%}.ibiz-extend-menu-button__rawitem .ibiz-rawitem{min-width:var(--ibiz-extend-menu-button-rawitem-min-width);font-size:initial;color:var(--ibiz-extend-menu-button-color)}.ibiz-extend-menu-button__separator--horizontal{margin:0}.ibiz-extend-menu-button__separator--vertical{margin:0}.ibiz-extend-menu-button__icon{display:flex;align-items:center;width:var(--ibiz-extend-menu-button-icon-width);height:var(--ibiz-extend-menu-button-icon-height);font-size:var(--ibiz-extend-menu-button-icon-size)}.ibiz-extend-menu-button__icon+.ibiz-extend-menu-button__caption{margin:var(--ibiz-extend-menu-button-text-margin)}.ibiz-extend-menu-button__content{display:flex;flex-wrap:nowrap;height:100%;padding:var(--ibiz-extend-menu-button-content-padding);overflow:auto}.ibiz-extend-menu-button__content--item{display:flex;align-items:center}.ibiz-extend-menu-button__content--item.is-show-arrow{position:relative}.ibiz-extend-menu-button__content--item.is-show-arrow .ibiz-extend-menu-button__menuitem::after{display:block;width:1em;height:1em;margin-left:auto;content:""}.ibiz-extend-menu-button__content--item.is-rotate-arrow svg{transform:rotate(180deg)}.ibiz-extend-menu-button__content--item-container{display:flex;align-items:center;height:100%}.ibiz-extend-menu-button__content--menuitem{height:var(--ibiz-extend-menu-button-item-height)}.ibiz-extend-menu-button__content--rawitem{height:var(--ibiz-extend-menu-button-item-height)}.ibiz-extend-menu-button__content--item-arrow{position:absolute;top:50%;right:15px;display:flex;align-items:center;justify-content:center;color:var(--ibiz-extend-menu-button-color);transform:translateY(-50%)}.ibiz-extend-menu-button__content--item-arrow svg{transition:transform .3s ease}.ibiz-extend-menu-button__content.is-horizontal{align-items:center}.ibiz-extend-menu-button__content.is-horizontal .ibiz-extend-menu-button__content--item{margin:var(--ibiz-extend-menu-button-item-horizontal-margin)}.ibiz-extend-menu-button__content.is-horizontal .ibiz-extend-menu-button__content--item:first-child{margin-left:0}.ibiz-extend-menu-button__content.is-horizontal .ibiz-extend-menu-button__content--item-container:not(:has(.el-divider)){min-width:var(--ibiz-extend-menu-button-item-horizontal-min-width)}.ibiz-extend-menu-button__content.is-horizontal .ibiz-extend-menu-button__content--seperator{width:auto;margin:var(--ibiz-extend-menu-button-item-horizontal-separator-margin)}.ibiz-extend-menu-button__content.is-horizontal .ibiz-extend-menu-button__content--seperator+.ibiz-extend-menu-button__content--item{margin-left:0}.ibiz-extend-menu-button__content.is-vertical{flex-direction:column}.ibiz-extend-menu-button__content.is-vertical .ibiz-extend-menu-button__content--item{margin:var(--ibiz-extend-menu-button-item-vertical-margin)}.ibiz-extend-menu-button__content.is-vertical .ibiz-extend-menu-button__content--item:first-child{margin-top:0}.ibiz-extend-menu-button__content.is-vertical .ibiz-extend-menu-button__content--seperator{margin:var(--ibiz-extend-menu-button-item-vertical-separator-margin)}.ibiz-extend-menu-button__content.is-vertical .ibiz-extend-menu-button__content--seperator+.ibiz-extend-menu-button__content--item{margin-top:0}.ibiz-extend-menu-button__content.is-vertical .ibiz-extend-menu-button__menuitem{justify-content:flex-start}.ibiz-extend-menu-button__content.is-vertical .ibiz-extend-menu-button__rawitem{justify-content:flex-start}.ibiz-extend-menu-button__content .el-button{--ibiz-color-primary-hover:var(--ibiz-extend-menu-button-active-bg-color);--ibiz-color-primary-hover-text:var(--ibiz-extend-menu-button-active-color);--ibiz-color-primary-active:var(--ibiz-extend-menu-button-hover-bg-color);--ibiz-color-primary-active-text:var(--ibiz-extend-menu-button-hover-color);--el-button-text-color:var(--ibiz-extend-menu-button-color)}.ibiz-extend-menu-button__content .el-button:focus{background-color:var(--ibiz-color-primary-active)}.ibiz-extend-menu-button__content .el-button:hover{background-color:var(--ibiz-color-primary-hover)}.ibiz-extend-menu-button.is-vertical{--ibiz-extend-menu-button-padding:var(--ibiz-spacing-tight) 0}.ibiz-extend-menu-button.is-vertical .ibiz-extend-menu-button__content,.ibiz-extend-menu-button.is-vertical .ibiz-extend-menu-button__content--item,.ibiz-extend-menu-button.is-vertical .ibiz-extend-menu-button__content--item-container{width:100%}.ibiz-extend-menu-button.is-horizontal .ibiz-extend-menu-button__menuitem{font-size:var(--ibiz-extend-menu-button-item-horizontal-font-size)}.ibiz-extend-menu-button.is-horizontal .ibiz-extend-menu-button__icon{justify-content:center}.ibiz-extend-menu-button-cascader-popover{--ibiz-extend-menu-button-padding:var(--ibiz-spacing-extra-tight) 0;--ibiz-extend-menu-button-font-size:var(--ibiz-font-size-header-6);--ibiz-extend-menu-button-rawitem-min-width:var(--ibiz-font-size-header-6);--ibiz-extend-menu-button-icon-width:var(--ibiz-width-icon-large);--ibiz-extend-menu-button-icon-height:var(--ibiz-width-icon-large);--ibiz-extend-menu-button-icon-size:var(--ibiz-width-icon-medium);--ibiz-extend-menu-button-text-margin:0 0 0 var(--ibiz-spacing-tight);--ibiz-extend-menu-button-content-padding:0 var(--ibiz-spacing-tight);--ibiz-extend-menu-button-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-extend-menu-button-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-extend-menu-button-active-color:var(--ibiz-color-primary-active-text);--ibiz-extend-menu-button-active-bg-color:var(--ibiz-color-primary-active);--ibiz-extend-menu-button-color:var(--ibiz-color-text-menu);--ibiz-extend-menu-button-item-height:42px;--ibiz-extend-menu-button-item-horizontal-min-width:200px;--ibiz-extend-menu-button-item-horizontal-margin:0 0 0 var(--ibiz-spacing-extra-tight);--ibiz-extend-menu-button-item-horizontal-separator-margin:0 var(--ibiz-spacing-tight);--ibiz-extend-menu-button-item-horizontal-font-size:var(--ibiz-font-size-header-5);--ibiz-extend-menu-button-item-vertical-margin:var(--ibiz-spacing-extra-tight) 0 0 0;--ibiz-extend-menu-button-item-vertical-separator-margin:var(--ibiz-spacing-tight) 0;--ibiz-extend-menu-button-item-separator-color:var(--ibiz-color-scroll-menu);--ibiz-extend-menu-button-popover-padding:var(--ibiz-spacing-super-tight) var(--ibiz-spacing-extra-tight);--ibiz-extend-menu-button-popover-min-width:200px;--ibiz-extend-menu-button-popover-z-index:3;--ibiz-extend-menu-button-popover-background:var(--ibiz-color-primary);--ibiz-extend-menu-button-content-padding:0;--ibiz-extend-menu-button-item-vertical-margin:0;z-index:var(--ibiz-extend-menu-button-popover-z-index);width:auto;padding:var(--ibiz-extend-menu-button-popover-padding);background-color:var(--ibiz-extend-menu-button-popover-background);box-shadow:var(--ibiz-shadow-elevated)}.ibiz-extend-menu-button-cascader-popover .ibiz-extend-menu-button__content{min-width:var(--ibiz-extend-menu-button-popover-min-width)}.ibiz-extend-menu-button-cascader-popover .ibiz-extend-menu-button__separator--horizontal{border-color:var(--ibiz-extend-menu-button-item-separator-color)}.ibiz-extend-menu-button-cascader-popover .ibiz-extend-menu-button__content,.ibiz-extend-menu-button-cascader-popover .ibiz-extend-menu-button__content--item,.ibiz-extend-menu-button-cascader-popover .ibiz-extend-menu-button__content--item-container{width:100%}.ibiz-extend-menu-button-border-popover{--ibiz-extend-menu-button-padding:var(--ibiz-spacing-extra-tight) 0;--ibiz-extend-menu-button-font-size:var(--ibiz-font-size-header-6);--ibiz-extend-menu-button-rawitem-min-width:var(--ibiz-font-size-header-6);--ibiz-extend-menu-button-icon-width:var(--ibiz-width-icon-large);--ibiz-extend-menu-button-icon-height:var(--ibiz-width-icon-large);--ibiz-extend-menu-button-icon-size:var(--ibiz-width-icon-medium);--ibiz-extend-menu-button-text-margin:0 0 0 var(--ibiz-spacing-tight);--ibiz-extend-menu-button-content-padding:0 var(--ibiz-spacing-tight);--ibiz-extend-menu-button-hover-color:var(--ibiz-color-primary-hover-text);--ibiz-extend-menu-button-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-extend-menu-button-active-color:var(--ibiz-color-primary-active-text);--ibiz-extend-menu-button-active-bg-color:var(--ibiz-color-primary-active);--ibiz-extend-menu-button-color:var(--ibiz-color-text-menu);--ibiz-extend-menu-button-item-height:42px;--ibiz-extend-menu-button-item-horizontal-min-width:200px;--ibiz-extend-menu-button-item-horizontal-margin:0 0 0 var(--ibiz-spacing-extra-tight);--ibiz-extend-menu-button-item-horizontal-separator-margin:0 var(--ibiz-spacing-tight);--ibiz-extend-menu-button-item-horizontal-font-size:var(--ibiz-font-size-header-5);--ibiz-extend-menu-button-item-vertical-margin:var(--ibiz-spacing-extra-tight) 0 0 0;--ibiz-extend-menu-button-item-vertical-separator-margin:var(--ibiz-spacing-tight) 0;--ibiz-extend-menu-button-item-separator-color:var(--ibiz-color-scroll-menu);--ibiz-extend-menu-button-popover-padding:var(--ibiz-spacing-super-tight) var(--ibiz-spacing-extra-tight);--ibiz-extend-menu-button-popover-min-width:200px;--ibiz-extend-menu-button-popover-z-index:3;--ibiz-extend-menu-button-popover-background:var(--ibiz-color-primary);--ibiz-extend-menu-button-content-padding:0;--ibiz-extend-menu-button-item-vertical-margin:0;z-index:var(--ibiz-extend-menu-button-popover-z-index);width:auto;padding:var(--ibiz-extend-menu-button-popover-padding);background-color:var(--ibiz-extend-menu-button-popover-background);box-shadow:var(--ibiz-shadow-elevated)}.ibiz-extend-menu-button-border-popover .ibiz-extend-menu-button__content{min-width:var(--ibiz-extend-menu-button-popover-min-width)}.ibiz-extend-menu-button-border-popover .ibiz-extend-menu-button__separator--horizontal{border-color:var(--ibiz-extend-menu-button-item-separator-color)}.ibiz-extend-menu-button-border-popover .ibiz-extend-menu-button__content,.ibiz-extend-menu-button-border-popover .ibiz-extend-menu-button__content--item,.ibiz-extend-menu-button-border-popover .ibiz-extend-menu-button__content--item-container{width:100%}.ibiz-extend-menu-button-border-popover .ibiz-extend-menu-button__content.is-horizontal .ibiz-extend-menu-button__content--item-arrow{transform:translateY(-50%) rotate(90deg)}.ibiz-extend-menu-button-border-popover.is-horizontal .ibiz-extend-menu-button__menuitem{font-size:var(--ibiz-extend-menu-button-item-horizontal-font-size)}.ibiz-extend-menu-button-border-popover.is-horizontal .ibiz-extend-menu-button__icon{justify-content:center}.ibiz-extend-menu-button-placehold{--ibiz-extend-menu-button-placehold-z-index:3;position:fixed;z-index:var(--ibiz-extend-menu-button-placehold-z-index);display:flex;align-items:center;justify-content:center;cursor:pointer}.ibiz-extend-menu-button-placehold__line{position:absolute}.ibiz-extend-menu-button-placehold__arrow{color:var(--ibiz-color-text-2)}.ibiz-extend-menu-button-placehold.is-left .ibiz-extend-menu-button-placehold__line{top:0;left:0;width:1px;height:100%}.ibiz-extend-menu-button-placehold.is-right .ibiz-extend-menu-button-placehold__line{top:0;right:0;width:1px;height:100%}.ibiz-extend-menu-button-placehold.is-right svg{transform:rotate(180deg)}.ibiz-extend-menu-button-placehold.is-top .ibiz-extend-menu-button-placehold__line{top:0;left:0;width:100%;height:1px}.ibiz-extend-menu-button-placehold.is-top svg{transform:rotate(90deg)}.ibiz-extend-menu-button-placehold.is-bottom .ibiz-extend-menu-button-placehold__line{bottom:0;left:0;width:100%;height:1px}.ibiz-extend-menu-button-placehold.is-bottom svg{transform:rotate(-90deg)}