aloha-vue 1.0.122 → 1.0.124

package/docs/src/components/TheMenu/TheMenu.js

@@ -148,6 +148,20 @@ export default {
           },
           icon: "Duplicate",
         },
+        {
+          id: "accordion2",
+          label: "Accordion seeeeeehr lange name",
+          icon: "Duplicate",
+          children: [
+            {
+              id: "accordion3",
+              label: "Accordion seeeeeehr lange name",
+              to: {
+                name: "PageAccordion",
+              },
+            },
+          ],
+        },
         {
           id: "alert",
           label: "Alert",

package/docs/src/components/TheMenu/TheMenu.pug

@@ -2,6 +2,7 @@ a-menu(
   :data="menuItems"
   button-toggle-visible="always"
   :is-blocker-clickable="true"
+  :is-breadcrumbs-link-truncated="false"
   key-children="children"
   key-slot="slot"
 )
@@ -11,11 +12,3 @@ a-menu(
     span(
       v-html="label"
     )
-
-//.the_menu
-//  ul.the_menu__ul
-//    the-menu-item(
-//      v-for="item in menuItems"
-//      :key="item.id"
-//      :data="item"
-//    )

package/docs/src/views/PageTable/PageTable.js

@@ -23,6 +23,7 @@ export default {
           grow: 2,
           footerSlot: "footerAloha",
           class: "a_justify_content_end",
+          isRender: true,
         },
         {
           label: "Aloha frei dsfdsfdsf sdfdsfdsfdsfsd",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "aloha-vue",
   "description": "Project aloha",
-  "version": "1.0.122",
+  "version": "1.0.124",
   "author": "Ilia Brykin",
   "scripts": {
     "build-icons": "node scriptsNode/iconsSvgToJs.js bootstrap3 && node scriptsNode/iconsSvgToJs.js bootstrap-1-9-1"

package/src/AMenu/AMenu.js

@@ -32,17 +32,17 @@ export default {
       required: false,
       default: 991,
     },
+    buttonToggleClass: {
+      type: [String, Object],
+      required: false,
+      default: "a_btn a_btn_secondary",
+    },
     buttonToggleVisible: {
       type: String,
       required: false,
       default: "always",
       validator: value => ["always", "mobile", "desktop"].indexOf(value) !== -1,
     },
-    buttonToggleClass: {
-      type: [String, Object],
-      required: false,
-      default: "a_btn a_btn_secondary",
-    },
     data: {
       type: Array,
       required: false,
@@ -62,6 +62,16 @@ export default {
       required: false,
       default: true,
     },
+    isBreadcrumbsLinkTruncated: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    isLinkTruncated: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     isOpenDefault: {
       type: Boolean,
       required: false,
@@ -72,6 +82,11 @@ export default {
       required: false,
       default: true,
     },
+    keyChildren: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
     keyGroup: {
       type: String,
       required: false,
@@ -82,11 +97,6 @@ export default {
       required: false,
       default: "icon",
     },
-    keyChildren: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
     keyId: {
       type: String,
       required: false,
@@ -114,6 +124,8 @@ export default {
     },
   },
   setup(props) {
+    const isLinkTruncated = toRef(props, "isLinkTruncated");
+
     const {
       dataKeyById,
       dataProParent,
@@ -169,6 +181,7 @@ export default {
       }
     });
 
+    provide("isLinkTruncated", computed(() => isLinkTruncated.value));
     provide("clickMenuLink", clickMenuLink);
     provide("togglePanel", togglePanel);
 
@@ -213,6 +226,7 @@ export default {
             isBreadcrumbsAll: this.isBreadcrumbsAll,
             panelParentsOpen: this.panelParentsOpen,
             isSearchActive: this.isSearchActive,
+            isBreadcrumbsLinkTruncated: this.isBreadcrumbsLinkTruncated,
           }),
         ]),
         h("div", {

package/src/AMenu/AMenuBreadcrumbs.js

@@ -20,6 +20,10 @@ export default {
       type: Boolean,
       required: true,
     },
+    isBreadcrumbsLinkTruncated: {
+      type: Boolean,
+      required: true,
+    },
     isSearchActive: {
       type: Boolean,
       required: true,
@@ -76,6 +80,7 @@ export default {
         return h(AMenuBreadcrumbsItem, {
           label: breadcrumbsItem.label,
           panelParentId: breadcrumbsItem.panelParentId,
+          isBreadcrumbsLinkTruncated: this.isBreadcrumbsLinkTruncated,
         });
       }),
     ]);

package/src/AMenu/AMenuBreadcrumbsItem.js

@@ -13,6 +13,10 @@ export default {
       type: [String, Number],
       required: true,
     },
+    isBreadcrumbsLinkTruncated: {
+      type: Boolean,
+      required: true,
+    },
     panelParentId: {
       type: [String, Number],
       required: true,
@@ -53,8 +57,19 @@ export default {
         class: "a_mr_2",
       }),
       h("span", {
-        ariaHidden: true,
-      }, this.label),
+        class: {
+          a_menu__link__text_truncated: this.isBreadcrumbsLinkTruncated,
+        },
+      }, [
+        h("span", {
+          ariaHidden: true,
+        }, this.label),
+        h("span", {
+          class: "a_position_absolute_all",
+          ariaHidden: true,
+          title: this.label
+        }),
+      ]),
     ]);
   },
 };

package/src/AMenu/AMenuPanelLink.js

@@ -63,6 +63,7 @@ export default {
     const dataProParentChildren = toRef(props, "dataProParentChildren");
 
     const togglePanel = inject("togglePanel");
+    const isLinkTruncated = inject("isLinkTruncated");
     const keySlot = inject("keySlot");
 
     const currentSlot = computed(() => {
@@ -147,6 +148,7 @@ export default {
       countChildren,
       currentSlot,
       icon,
+      isLinkTruncated,
       isLinkVisible,
       label,
       labelWithoutFilter,
@@ -192,13 +194,13 @@ export default {
         }) :
         this.item.to ?
           h(resolveComponent("RouterLink"), {
-            class: "a_menu__link",
+            class: "a_menu__link a_menu__link__text_truncated",
             to: this.item.to,
             tabindex: this.isPanelOpen ? 0 : -1,
             onClick: this.clickLink,
           }, () => ICON_AND_TEXT) :
           h("a", {
-            class: "a_menu__link a_menu__link_btn",
+            class: "a_menu__link a_menu__link_btn a_menu__link__text_truncated",
             ariaLabel: "Untermenü öffnen",
             role: "button",
             tabindex: this.isPanelOpen ? 0 : -1,

package/src/ATable/ATable.js

@@ -3,13 +3,13 @@ import {
   h,
   provide,
   ref,
-  toRef,
 } from "vue";
 
 import AGet from "../AGet/AGet";
 import ALoading from "../ALoading/ALoading";
 import ATableCountProPage from "./ATableCountProPage/ATableCountProPage";
 import ATableFilterCenter from "./ATableFilterCenter/ATableFilterCenter";
+import ATableFiltersTop from "./ATableFiltersTop/ATableFiltersTop";
 import ATableHeader from "./ATableHeader/ATableHeader";
 import ATablePagination from "./ATablePagination/ATablePagination";
 import ATablePreviewRight from "./ATablePreviewRight/ATablePreviewRight";
@@ -21,23 +21,22 @@ import MultipleActionAPI from "./compositionAPI/MultipleActionAPI";
 import PreviewAPI from "./compositionAPI/PreviewAPI";
 import RowsAPI from "./compositionAPI/RowsAPI";
 import ScrollControlAPI from "./compositionAPI/ScrollControlAPI";
+import TableColumnsAPI from "./compositionAPI/TableColumnsAPI";
+import TableColumnsVisibleAPI from "./compositionAPI/TableColumnsVisibleAPI";
 import TableFiltersAPI from "./compositionAPI/TableFiltersAPI";
+import TableColumnsVisibleFunctionAPI from "./compositionAPI/TableColumnsVisibleFunctionAPI";
 
 import {
   getModelColumnsOrderingDefault,
-  getModelColumnsVisibleDefault,
 } from "./utils/utils";
 import {
   cloneDeep,
-  forEach,
   get,
   isArray,
   isNil,
   isPlainObject,
-  keyBy,
   uniqueId,
 } from "lodash-es";
-import ATableFiltersTop from "./ATableFiltersTop/ATableFiltersTop";
 
 
 export default {
@@ -157,9 +156,9 @@ export default {
       default: () => [],
     },
     modelColumnsVisible: {
-      type: Array,
+      type: Object,
       required: false,
-      default: () => [],
+      default: () => ({}),
     },
     modelFilters: {
       type: Object,
@@ -262,30 +261,16 @@ export default {
     };
   },
   setup(props, context) {
-    const columns = toRef(props, "columns");
-
     const tableGrandparentRef = ref(undefined);
-    const modelColumnsOrderingLocal = ref([]);
 
-    const columnsKeyById = computed(() => {
-      return keyBy(columns.value, "id");
-    });
-    const columnsOrdered = computed(() => {
-      const COLUMNS = [];
-      forEach(modelColumnsOrderingLocal.value, columnId => {
-        COLUMNS.push(columnsKeyById.value[columnId]);
-      });
-      return COLUMNS;
-    });
+    const {
+      columnsOrdered,
+      modelColumnsOrderingLocal,
+    } = TableColumnsAPI(props);
 
-    const modelColumnsVisibleLocal = ref([]);
-    const modelColumnsVisibleMapping = computed(() => {
-      const MODEL_COLUMNS = {};
-      modelColumnsVisibleLocal.value.forEach(columnId => {
-        MODEL_COLUMNS[columnId] = true;
-      });
-      return MODEL_COLUMNS;
-    });
+    const {
+      modelColumnsVisibleLocal,
+    } = TableColumnsVisibleAPI();
 
     const {
       hasRows,
@@ -322,7 +307,15 @@ export default {
     } = ScrollControlAPI(props, context, {
       columnsOrdered,
       isMultipleActionsActive,
-      modelColumnsVisibleMapping,
+      modelColumnsVisibleLocal,
+    });
+
+    const {
+      changeModelColumnsVisible,
+      initModelColumnsVisibleLocal,
+    } = TableColumnsVisibleFunctionAPI(props, context, {
+      modelColumnsVisibleLocal,
+      checkVisibleColumns,
     });
 
     const {
@@ -371,7 +364,6 @@ export default {
       offset,
     });
 
-
     provide("changeModelIsTableWithoutScroll", changeModelIsTableWithoutScroll);
     provide("columnsOrdered", columnsOrdered);
     provide("columnsVisibleAdditionalSpaceForOneGrow", columnsVisibleAdditionalSpaceForOneGrow);
@@ -386,7 +378,6 @@ export default {
 
     provide("rowsLocal", rowsLocal);
     provide("modelColumnsVisibleLocal", modelColumnsVisibleLocal);
-    provide("modelColumnsVisibleMapping", modelColumnsVisibleMapping);
     provide("onUpdateModelFilters", onUpdateModelFilters);
     provide("updateDataKeyByIdFromFilter", updateDataKeyByIdFromFilter);
 
@@ -399,6 +390,8 @@ export default {
       modelColumnsOrderingLocal,
       modelColumnsVisibleLocal,
       modelIsTableWithoutScroll,
+      initModelColumnsVisibleLocal,
+      changeModelColumnsVisible,
 
       closePreview,
       closePreviewAll,
@@ -493,14 +486,6 @@ export default {
       }
     },
 
-    initModelColumnsVisibleLocal() {
-      if (this.modelColumnsVisible.length) {
-        this.modelColumnsVisibleLocal = cloneDeep(this.modelColumnsVisible);
-      } else {
-        this.changeModelColumnsVisible(getModelColumnsVisibleDefault(this.columns));
-      }
-    },
-
     changeModelSort({ sortId }) {
       if (this.modelSort === sortId) {
         this.modelSort = `-${ sortId }`;
@@ -516,12 +501,6 @@ export default {
       this.closePreviewAll();
     },
 
-    changeModelColumnsVisible(value) {
-      this.modelColumnsVisibleLocal = value;
-      this.$emit("update:modelColumnsVisible", cloneDeep(this.modelColumnsVisibleLocal));
-      this.checkVisibleColumns();
-    },
-
     changeColumnsOrdering({ modelColumnsOrderingLocal, columnIndexDraggable, columnIndexOver }) {
       if (columnIndexDraggable === columnIndexOver && !modelColumnsOrderingLocal) {
         return;

package/src/ATable/ATableHeaderTh/ATableHeaderTh.js

@@ -39,7 +39,6 @@ export default {
     "isColumnsDnd",
     "isLoadingOptions",
     "isLoadingTable",
-    "modelColumnsVisibleMapping",
   ],
   setup(props, context) {
     const {
@@ -181,6 +180,9 @@ export default {
     },
   },
   render() {
+    if (this.column.isRender === false) {
+      return "";
+    }
     return h("div", this.attributesForTh, [
       h(this.componentLocal, this.attributesForButton, [
         h(ATranslation, {

package/src/ATable/ATableHeaderThAction/ATableHeaderThAction.js

@@ -71,15 +71,17 @@ export default {
   },
   methods: {
     selectAllColumns() {
-      this.changeModelColumnsVisible(this.columnsOrdered.map(column => column.id));
+      const MODEL_COLUMNS_VISIBLE = {};
+      forEach(this.columnsOrdered, column => {
+        MODEL_COLUMNS_VISIBLE[column.id] = true;
+      });
+      this.changeModelColumnsVisible(MODEL_COLUMNS_VISIBLE);
     },
 
     deselectAllColumns() {
-      const MODEL_COLUMNS_VISIBLE = [];
+      const MODEL_COLUMNS_VISIBLE = {};
       forEach(this.columnsOrdered, column => {
-        if (column.locked) {
-          MODEL_COLUMNS_VISIBLE.push(column.id);
-        }
+        MODEL_COLUMNS_VISIBLE[column.id] = !!column.locked;
       });
       this.changeModelColumnsVisible(MODEL_COLUMNS_VISIBLE);
     },

package/src/ATable/ATableHeaderThAction/ATableHeaderThActionItem.js

@@ -49,7 +49,6 @@ export default {
     "isLoadingOptions",
     "isLoadingTable",
     "modelColumnsVisibleLocal",
-    "modelColumnsVisibleMapping",
     "tableId",
   ],
   setup(props, context) {
@@ -115,7 +114,7 @@ export default {
     },
 
     isColumnVisible() {
-      return this.modelColumnsVisibleMapping[this.columnId];
+      return this.modelColumnsVisibleLocal[this.columnId];
     },
 
     arrowButtons() {
@@ -184,12 +183,7 @@ export default {
     toggleColumnVisible($event) {
       $event.stopPropagation();
       const MODEL_COLUMNS = cloneDeep(this.modelColumnsVisibleLocal);
-      const INDEX = MODEL_COLUMNS.indexOf(this.columnId);
-      if (INDEX !== -1) {
-        MODEL_COLUMNS.splice(INDEX, 1);
-      } else {
-        MODEL_COLUMNS.push(this.columnId);
-      }
+      MODEL_COLUMNS[this.columnId] = !MODEL_COLUMNS[this.columnId];
       this.changeModelColumnsVisible(MODEL_COLUMNS);
     },
 
@@ -220,7 +214,6 @@ export default {
           columnIndex: columnIndexOver,
           iconKey: "down",
         }) }`;
-        console.log("NEW_ID", NEW_ID);
         setFocusToElement(NEW_ID);
       });
     },
@@ -230,6 +223,9 @@ export default {
     },
   },
   render() {
+    if (this.column.isRender === false) {
+      return "";
+    }
     return h("li", this.attributesLi, [
       h("div", {
         class: "a_dropdown__item_text a_table__th__dropdown_item a_text_nowrap",

package/src/ATable/ATableTd/ATableTd.js

@@ -45,7 +45,6 @@ export default {
   inject: [
     "columnsDefaultValue",
     "hasPreview",
-    "modelColumnsVisibleMapping",
     "onTogglePreview",
     "rowsLocal",
     "valuesForColumnDefault",
@@ -165,6 +164,9 @@ export default {
     },
   },
   render() {
+    if (this.column.isRender === false) {
+      return "";
+    }
     return h(
       "div", 
       this.attributesForTd,

package/src/ATable/compositionAPI/ColumnVisibleAPI.js

@@ -12,12 +12,15 @@ export default function ColumnVisibleAPI(props) {
   const column = toRef(props, "column");
   const columnIndex = toRef(props, "columnIndex");
   const indexFirstScrollInvisibleColumn = inject("indexFirstScrollInvisibleColumn", undefined);
-  const modelColumnsVisibleMapping = inject("modelColumnsVisibleMapping", {});
+  const modelColumnsVisibleLocal = inject("modelColumnsVisibleLocal", {});
   const modelIsTableWithoutScroll = inject("modelIsTableWithoutScroll");
 
 
   const isVisibleFromModel = computed(() => {
-    return !!modelColumnsVisibleMapping.value[column.value.id];
+    if (column.value.id in modelColumnsVisibleLocal.value) {
+      return !!modelColumnsVisibleLocal.value[column.value.id];
+    }
+    return !column.value.hide;
   });
 
   const isVisibleFromScroll = computed(() => {

package/src/ATable/compositionAPI/ScrollControlAPI.js

@@ -15,12 +15,23 @@ import {
 export default function ScrollControlAPI(props, { emit }, {
   columnsOrdered = computed(() => []),
   isMultipleActionsActive = ref(undefined),
-  modelColumnsVisibleMapping = computed(() => ({})),
+  modelColumnsVisibleLocal = ref({}),
 }) {
   const columnWidthDefault = toRef(props, "columnWidthDefault");
   const columnActionsWidth = toRef(props, "columnActionsWidth");
   const isActionColumnVisible = toRef(props, "isActionColumnVisible");
 
+  const isColumnVisible = ({ column }) => {
+    if (column.isRender === false) {
+      return false;
+    }
+    const COLUMN_ID = column.id;
+    if (COLUMN_ID in modelColumnsVisibleLocal.value) {
+      return !!modelColumnsVisibleLocal.value[COLUMN_ID];
+    }
+    return !column.hide;
+  };
+
   const columnActionsWidthLocal = computed(() => {
     if (isActionColumnVisible.value) {
       return columnActionsWidth.value;
@@ -65,7 +76,7 @@ export default function ScrollControlAPI(props, { emit }, {
       const COLUMNS_SCROLL_VISIBLE = [];
       for (let i = indexFirstScrollInvisibleColumn.value; i < columnsOrdered.value.length; i++) {
         const COLUMN = columnsOrdered.value[i];
-        if (modelColumnsVisibleMapping.value[COLUMN.id]) {
+        if (isColumnVisible({ column: COLUMN })) {
           COLUMNS_SCROLL_VISIBLE.push(cloneDeep(COLUMN));
         }
       }
@@ -80,7 +91,7 @@ export default function ScrollControlAPI(props, { emit }, {
     let indexFirstScrollInvisibleColumnLocal = 0;
     let sumGrows = 0;
     forEach(columnsOrdered.value, column => {
-      if (!modelColumnsVisibleMapping.value[column.id]) {
+      if (!isColumnVisible({ column })) {
         indexFirstScrollInvisibleColumnLocal++;
         return;
       }

package/src/ATable/compositionAPI/TableColumnsAPI.js

@@ -0,0 +1,74 @@
+import {
+  computed,
+  ref,
+  toRef,
+} from "vue";
+
+import {
+  cloneDeep,
+  forEach,
+  keyBy,
+} from "lodash-es";
+
+export default function TableColumnsAPI(props) {
+  const columns = toRef(props, "columns");
+
+  const modelColumnsOrderingLocal = ref([]);
+
+  const columnsKeyById = computed(() => {
+    return keyBy(columns.value, "id");
+  });
+
+  const columnIdsGroupByLocked = computed(() => {
+    const COLUMNS_GROUP_BY_LOCKED = {
+      true: [],
+      false: [],
+    };
+    forEach(columns.value, column => {
+      const COLUMN_ID = column.id;
+      if (column.locked) {
+        COLUMNS_GROUP_BY_LOCKED.true.push(COLUMN_ID);
+      } else {
+        COLUMNS_GROUP_BY_LOCKED.false.push(COLUMN_ID);
+      }
+    });
+    return COLUMNS_GROUP_BY_LOCKED;
+  });
+
+  const columnsOrdered = computed(() => {
+    const COLUMNS = [];
+    const COLUMNS_KEY_BY_ID = cloneDeep(columnsKeyById.value);
+    const MODEL_COLUMNS_ORDERING_LOCAL = cloneDeep(modelColumnsOrderingLocal.value);
+
+    forEach(columnIdsGroupByLocked.value.true, columnId => {
+      if (COLUMNS_KEY_BY_ID[columnId]) {
+        COLUMNS.push(COLUMNS_KEY_BY_ID[columnId]);
+        delete COLUMNS_KEY_BY_ID[columnId];
+
+        const INDEX_IN_MODEL_COLUMNS_ORDERING = MODEL_COLUMNS_ORDERING_LOCAL.indexOf(columnId);
+        if (INDEX_IN_MODEL_COLUMNS_ORDERING !== -1) {
+          MODEL_COLUMNS_ORDERING_LOCAL.splice(INDEX_IN_MODEL_COLUMNS_ORDERING, 1);
+        }
+      }
+    });
+
+    forEach(MODEL_COLUMNS_ORDERING_LOCAL, columnId => {
+      if (COLUMNS_KEY_BY_ID[columnId]) {
+        COLUMNS.push(COLUMNS_KEY_BY_ID[columnId]);
+        delete COLUMNS_KEY_BY_ID[columnId];
+      }
+    });
+
+    forEach(COLUMNS_KEY_BY_ID, column => {
+      COLUMNS.push(column);
+    });
+
+    return COLUMNS;
+  });
+
+  return {
+    columnsKeyById,
+    columnsOrdered,
+    modelColumnsOrderingLocal,
+  };
+}

package/src/ATable/compositionAPI/TableColumnsVisibleAPI.js

@@ -0,0 +1,11 @@
+import {
+  ref,
+} from "vue";
+
+export default function TableColumnsVisibleAPI() {
+  const modelColumnsVisibleLocal = ref({});
+
+  return {
+    modelColumnsVisibleLocal,
+  };
+}

package/src/ATable/compositionAPI/TableColumnsVisibleFunctionAPI.js

@@ -0,0 +1,40 @@
+import {
+  ref,
+  toRef,
+} from "vue";
+
+import {
+  getModelColumnsVisibleDefault,
+} from "../utils/utils";
+import {
+  cloneDeep,
+  size,
+} from "lodash-es";
+
+
+export default function TableColumnsVisibleFunctionAPI(props, { emit }, {
+  modelColumnsVisibleLocal = ref({}),
+  checkVisibleColumns = () => {},
+}) {
+  const modelColumnsVisible = toRef(props, "modelColumnsVisible");
+  const columns = toRef(props, "columns");
+
+  const changeModelColumnsVisible = value => {
+    modelColumnsVisibleLocal.value = value;
+    emit("update:modelColumnsVisible", cloneDeep(modelColumnsVisibleLocal.value));
+    checkVisibleColumns();
+  };
+
+  const initModelColumnsVisibleLocal = () => {
+    if (size(modelColumnsVisible.value)) {
+      modelColumnsVisibleLocal.value = cloneDeep(modelColumnsVisible.value);
+    } else {
+      changeModelColumnsVisible(getModelColumnsVisibleDefault(columns.value));
+    }
+  };
+
+  return {
+    changeModelColumnsVisible,
+    initModelColumnsVisibleLocal,
+  };
+}

package/src/ATable/utils/utils.js

@@ -3,11 +3,9 @@ import {
 } from "lodash-es";
 
 export function getModelColumnsVisibleDefault(columns) {
-  const MODEL_COLUMNS_VISIBLE = [];
+  const MODEL_COLUMNS_VISIBLE = {};
   columns.forEach(column => {
-    if (!column.hide) {
-      MODEL_COLUMNS_VISIBLE.push(column.id);
-    }
+    MODEL_COLUMNS_VISIBLE[column.id] = !column.hide;
   });
   return MODEL_COLUMNS_VISIBLE;
 }

package/src/styles/components/AMenu.scss

@@ -175,9 +175,6 @@ $a_menu_breakpoint_mobile: 991px;
   flex-basis: 10%;
   display: block;
   padding: var(--a_menu_link_padding_y) var(--a_menu_link_padding_x);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
   cursor: pointer;
   &,
   &:active,
@@ -196,6 +193,11 @@ $a_menu_breakpoint_mobile: 991px;
     box-shadow: inset 0 0 1px 4px var(--a_menu_icon_focus_shadow_color);
   }
 }
+.a_menu__link__text_truncated {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
 .a_menu__link_selected {
   background-color: var(--a_menu_link_selected_bg);
   color: var(--a_menu_link_selected_color);
@@ -354,3 +356,8 @@ $a_menu_breakpoint_mobile: 991px;
   text-align: center;
   font-size: 150%;
 }
+.a_menu__breadcrumbs__item {
+  position: relative;
+  display: flex;
+  align-items: center;
+}