@yoobic/yobi 8.2.0-5 → 8.2.0-8

package/dist/collection/components/form/form-missing-word/form-missing-word.js

@@ -95,7 +95,7 @@ export class YooFormMissingWordComponent {
     this.initGame();
   }
   showWarning() {
-    var _a;
+    var _a, _b, _c;
     const hasDuplicateValues = hasDuplicates(this.values);
     if (hasDuplicateValues) {
       const duplicateValue = getDuplicatedValue(this.values);
@@ -104,21 +104,16 @@ export class YooFormMissingWordComponent {
         this.sentence.replace(`[[${duplicateValueIndex}]]`, '');
       }
     }
-    const newValuesLength = (_a = this.values) === null || _a === void 0 ? void 0 : _a.map((v) => !isValueATranslationKey(v) && v.length);
+    const missingValues = !((_a = this.answer) === null || _a === void 0 ? void 0 : _a.length) && !!((_b = this.values) === null || _b === void 0 ? void 0 : _b.length);
+    const newValuesLength = (_c = this.values) === null || _c === void 0 ? void 0 : _c.map((v) => !isValueATranslationKey(v) && v.length);
     const hasTooLongValues = newValuesLength === null || newValuesLength === void 0 ? void 0 : newValuesLength.some((n) => n > MAX_TAGS_CHARACTERS);
-    const bannerMessage = hasTooLongValues ? 'MAXCHARACTERSREACHEDFORVALUES' : hasDuplicateValues ? 'NODUPLICATEVALUES' : '';
-    const showBanner = hasDuplicateValues || hasTooLongValues;
+    const bannerMessage = hasTooLongValues ? 'MAXCHARACTERSREACHEDFORVALUES' : hasDuplicateValues ? 'NODUPLICATEVALUES' : missingValues ? 'NOMISSINGVALUES' : '';
+    const showBanner = hasDuplicateValues || hasTooLongValues || missingValues;
     showWarningAlert(this.host, showBanner, bannerMessage);
   }
   initGame() {
-    var _a;
     this.tags = initTags(this.tagConfig, this.zonesConfig);
-    if (!((_a = this.answer) === null || _a === void 0 ? void 0 : _a.length)) {
-      showWarningAlert(this.host, true, 'NOMISSINGVALUES');
-    }
-    else {
-      this.showWarning();
-    }
+    this.showWarning();
   }
   getColorTag(tagValue) {
     if (this.readonly && checkArray(this.value) && this.answer) {

package/dist/collection/components/form/form-multi-input/form-multi-input.js

@@ -1,4 +1,4 @@
-import { getUUID, isValueATranslationKey, isWeb, translate } from '@shared/utils';
+import { debounce, getUUID, isValueATranslationKey, isWeb, translate } from '@shared/utils';
 import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 import { isEqual } from 'lodash-es';
 import Sortable from 'sortablejs';
@@ -31,6 +31,13 @@ export class YooFormMultiInputComponent {
     this.dragAndDropPendingEvent = null;
     this.dragAndDropPendingEventTimeout = null;
     this.sortables = [];
+    this.setValueAndEmitChanges = debounce((value, skipValueAssignment = false) => {
+      if (!skipValueAssignment) {
+        this.value = value;
+      }
+      const finalValue = this.isSimpleArray ? this.value[0] : this.value;
+      setValueAndValidateInput(finalValue, this, false, true, true);
+    }, 500);
   }
   async reset(keys) {
     this.cells = this.getCells();
@@ -402,13 +409,6 @@ export class YooFormMultiInputComponent {
     ev.stopPropagation();
     this.translationValueUpdated.emit(ev.detail);
   }
-  setValueAndEmitChanges(value, skipValueAssignment = false) {
-    if (!skipValueAssignment) {
-      this.value = value;
-    }
-    const finalValue = this.isSimpleArray ? this.value[0] : this.value;
-    setValueAndValidateInput(finalValue, this, false, true, true);
-  }
   isLinkedList() {
     return this.columns.some((c) => c.linkedRow);
   }

package/dist/collection/components/form/form-permissions/form-permissions.js

@@ -96,7 +96,7 @@ export class YooFormPermissionsComponent {
                 }
                 values.push({ label: `ROLE${role.toUpperCase()}` });
               });
-              element = document.createElement('yoo-segment');
+              element = document.createElement('yoo-segmented-control');
               element.values = values;
               element.initialIndex = selectedIndex;
               element.size = 'large';

package/dist/collection/components/form/form-swipe-cards/form-swipe-cards.js

@@ -123,13 +123,7 @@ export class YooFormSwipeCardsComponent {
     if (!this.showInstructionView) {
       this.initDraggable();
     }
-    const showCategoriesWarning = this.livePreview && !this.hasTwoCategories;
-    if (showCategoriesWarning) {
-      showWarningAlert(this.host, true, 'NOTFULFILLEDCATEGORIES');
-    }
-    else {
-      this.showValuesWarning();
-    }
+    this.showWarnings();
   }
   updateCardsData() {
     if (this.hasDataChanged) {
@@ -156,10 +150,14 @@ export class YooFormSwipeCardsComponent {
     return (_a = this.cardsElements) === null || _a === void 0 ? void 0 : _a.find((cardElement) => (cardElement === null || cardElement === void 0 ? void 0 : cardElement.id) === id);
   }
   spyOnValuesChanged() {
-    this.showValuesWarning();
+    this.showWarnings();
   }
-  showValuesWarning() {
-    if (this.hasTwoCategories && this.livePreview) {
+  showWarnings() {
+    var _a;
+    if (((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) && this.livePreview && !this.hasTwoCategories) {
+      showWarningAlert(this.host, true, 'NOTFULFILLEDCATEGORIES');
+    }
+    else if (this.hasTwoCategories && this.livePreview) {
       this.hasEmptyValues = !!this.numberEmptyItems.text || !!this.numberEmptyItems.image;
       this.hasDuplicatesValues = this.hasText && hasDuplicates(this.values);
       let showAlert = this.hasEmptyValues || this.hasDuplicatesValues;

package/dist/collection/components/form/form-text-area/form-text-area.js

@@ -57,6 +57,10 @@ export class YooFormTextAreaComponent {
     }
     return false;
   }
+  async getText() {
+    var _a;
+    return (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.innerText;
+  }
   async updateValueAndFocus(value, insert) {
     if (insert) {
       const { insertElement, offset } = getInsertElementProp(this.host, this.inputEl);
@@ -173,7 +177,8 @@ export class YooFormTextAreaComponent {
     this.updateSegmentsCountDebounce();
   }
   onParagraphInputChanged(ev) {
-    if ((ev === null || ev === void 0 ? void 0 : ev.inputType) === 'insertCompositionText') {
+    var _a;
+    if ((ev === null || ev === void 0 ? void 0 : ev.inputType) === 'insertCompositionText' && ((_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.innerText.length) > 1) {
       return;
     }
     // Clean up random BR and FONT injected
@@ -1175,6 +1180,22 @@ export class YooFormTextAreaComponent {
         "tags": []
       }
     },
+    "getText": {
+      "complexType": {
+        "signature": "() => Promise<string>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<string>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
     "updateValueAndFocus": {
       "complexType": {
         "signature": "(value: string, insert?: boolean) => Promise<void>",

package/dist/collection/components/form-creator/form-creator/form-creator.js

@@ -1858,7 +1858,7 @@ export class YooFormCreatorComponent {
     ];
     return (h("div", { class: "logic-container" },
       h("yoo-ion-scroll", { forceOverscroll: false, onClick: (ev) => ev.stopPropagation() },
-        h("yoo-accordion", { maxTitleCharacters: 18, entries: entries, iconPairLeft: ARROW_PAIR, allowMultipleSelection: true }, CONDITION_TYPES.map((condition, conditionIndex) => (h("div", { slot: entries[conditionIndex].title },
+        h("yoo-accordion", { entries: entries, iconPairLeft: ARROW_PAIR, allowMultipleSelection: true }, CONDITION_TYPES.map((condition, conditionIndex) => (h("div", { slot: entries[conditionIndex].title },
           h("div", { class: "condition-block-selection", ref: (el) => (this.newFieldContainerBlocks[conditionIndex] = el) },
             condition === 'conditions' && this.renderNewConditionBlocks(condition),
             condition === 'restrictions' && this.renderRestrictionConditions(condition)))))))));

package/dist/collection/components/form-creator/form-creator-field-selector/form-creator-field-selector.js

@@ -159,7 +159,7 @@ export class YooFormCreatorFieldSelectorComponent {
   }
   render() {
     var _a;
-    return (h("yoo-accordion", { class: "sub-accordion master-search", entries: this.entries, masterSearch: true, masterTitle: this.masterTitle.toUpperCase(), iconPairLeft: ARROW_PAIR, showBottomBorder: true, allowMultipleSelection: true, onSearchInputChanged: (ev) => this.onSearchFilterChange(ev), maxTitleCharacters: 30, forceEntryUpdate: true },
+    return (h("yoo-accordion", { class: "sub-accordion master-search", entries: this.entries, masterSearch: true, masterTitle: this.masterTitle.toUpperCase(), iconPairLeft: ARROW_PAIR, showBottomBorder: true, allowMultipleSelection: true, onSearchInputChanged: (ev) => this.onSearchFilterChange(ev), forceEntryUpdate: true },
       h("slot", { slot: "header", name: "header" }),
       this.categories.map((category, categoryIndex) => {
         var _a;

package/dist/collection/components/grid/ag-grid/ag-grid.js

@@ -64,7 +64,6 @@ export class YooAgGridComponent {
         cellRendererParams: c.cellRendererParams ? { ...c.cellRendererParams, innerRenderer: getRenderer(c.cellRendererParams.innerRenderer) } : null,
         cellEditor: c.editable ? (isString(c.cellEditor) || !c.cellEditor ? getEditor(c.cellEditor) : c.cellEditor) : null,
         comparator: c.comparator ? getComparator(c.comparator) : null
-        // headerComponent: isString(c.headerComponent) ? getHeaderComponent(c.headerComponent as TGridColumnHeader) : null
       };
       if (c.type === 'rightAligned') {
         finalColDef.headerClass = 'ag-right-aligned-header';

package/dist/collection/components/grid/grid/grid.js

@@ -867,7 +867,6 @@ export class YooGridComponent {
         this.setFormFieldValue();
       },
       onFirstDataRendered: () => {
-        // params
         setTimeout(() => {
           if (this.sizeColumnsToFit && !this.disconnected) {
             this.gridApi.sizeColumnsToFit();
@@ -882,7 +881,9 @@ export class YooGridComponent {
           return [];
         }
       },
-      isServerSideGroup: this.isTree() ? (item) => !(item && (item.isLeaf)) : null,
+      isServerSideGroup: this.isTree() ? (item) => {
+        return !(item === null || item === void 0 ? void 0 : item.isLeaf);
+      } : null,
       getServerSideGroupKey: this.isTree()
         ? (dataItem) => {
           return dataItem._id;
@@ -892,7 +893,6 @@ export class YooGridComponent {
     if (this.isTree()) {
       this.finalGridConfig.groupDisplayType = 'custom';
       this.finalGridConfig.serverSideStoreType = 'full';
-      // this.finalGridConfig.groupSuppressAutoColumn = true;
     }
     this.finalGridConfig.rowModelType = this.finalGridConfig.rowModelType || 'serverSide';
     if (this.gridDomLayout) {

package/dist/collection/components/grid/grid-calendar/grid-calendar.js

@@ -270,7 +270,7 @@ export class YooGridCalendarComponent {
         }
         : {
           datePicker: {
-            text: ((_a = translate('CALENDAR')) === null || _a === void 0 ? void 0 : _a.substring(0, 4)) + '...',
+            text: ((_a = translate('YOOBICCALENDAR')) === null || _a === void 0 ? void 0 : _a.substring(0, 4)) + '...',
             // icon: 'calendar',
             click: () => {
               this.showMobileCalendar = !this.showMobileCalendar;

package/dist/collection/feature-communicate/chat/card-chat/card-chat.css

@@ -218,11 +218,10 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   justify-content: space-between;
   width: 100%;
 }
-:host #content #heading yoo-truncate {
+:host #content #heading yoo-truncated-line {
+  width: calc(100% - (var(--logo-05, 3rem) + var(--spacing-08, 0.5rem)));
   margin-right: var(--spacing-02, 0.125rem);
-  overflow: hidden;
   font-size: var(--font-size-18, 1.125rem);
-  --max-lines: 1;
 }
 :host #content #heading span {
   display: contents;
@@ -238,8 +237,11 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   align-items: center;
   width: 100%;
 }
-:host #content #message yoo-truncate {
+:host #content #message yoo-truncated-line {
+  width: 100%;
   color: var(--text-color, #807f83);
   font-size: var(--font-size-16, 1rem);
-  --max-lines: 1;
+}
+:host #content #message yoo-icon + yoo-truncated-line {
+  width: calc(100% - (var(--icon-size-01, 1rem) + var(--spacing-04, 0.25rem)));
 }

package/dist/collection/feature-communicate/chat/card-chat/card-chat.js

@@ -8,14 +8,14 @@ export class YooCardChatComponent {
   renderHeader() {
     const { title, lastMessageDate } = this.entry || {};
     return h("section", { id: "heading" },
-      h("yoo-truncate", null, title),
+      h("yoo-truncated-line", { content: title, withTooltip: false }),
       h("span", null, lastMessageDate));
   }
   renderMessage() {
     const { prefixes, lastMessage } = this.entry || {};
     return h("section", { id: "message" }, prefixes === null || prefixes === void 0 ? void 0 :
       prefixes.map((prefix) => h("yoo-icon", { size: "small", name: prefix.icon, color: prefix.color })),
-      lastMessage && h("yoo-truncate", null, lastMessage));
+      lastMessage && h("yoo-truncated-line", { content: lastMessage, withTooltip: false }));
   }
   renderAvatars() {
     const { users, imgSrc } = this.entry || {};

package/dist/collection/feature-communicate/chat/chat/chat.css

@@ -353,6 +353,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --stroke-width-circle: var(--spacing-04, 0.25rem);
 }
 :host .heading-container {
+  width: calc(100% - var(--logo-05, 3rem));
   font-weight: bold;
   line-height: normal;
 }
@@ -363,6 +364,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   font-size: var(--font-size-14, 0.875rem);
 }
 :host .heading-container .subheading {
+  width: calc(100% - var(--logo-05, 3rem));
   color: var(--stable, #adadad);
   font-weight: normal;
   font-size: var(--font-size-14, 0.875rem);

package/dist/collection/feature-communicate/chat/chat/chat.js

@@ -41,10 +41,11 @@ export class YooChatComponent {
     this.onToggleView();
   }
   onInputFocused() {
+    var _a;
     this.inputFocused = true;
     this.scrollBottomOnKeyboradShown = true;
     !isNativeMobile() && (this.oldestMostRecentMessageToken = null);
-    this.scroll.scrollToBottom(250);
+    (_a = this.scroll) === null || _a === void 0 ? void 0 : _a.scrollToBottom(250);
   }
   onMediaLoading(event) {
     this.showLoader = event === null || event === void 0 ? void 0 : event.detail;
@@ -423,8 +424,9 @@ export class YooChatComponent {
             h("yoo-icon", { size: popupMode ? 'small' : undefined, name: this.closeIcon ? this.closeIcon : 'left', color: textColor })))),
         this.background ? h("yoo-avatar", { size: avatarSize, imgSrc: this.background }) : this.renderAvatars(),
         h("div", { class: { 'heading-container': true, 'light small': popupMode, clickable: !this.background && ((_d = this.users) === null || _d === void 0 ? void 0 : _d.length) === 1 }, onClick: () => this.onHeadingClicked() },
-          h("yoo-truncate", null, this.heading),
-          !this.isMultiple && !popupMode && h("yoo-truncate", { class: "subheading" }, translate(this.isOnline ? 'ONLINE' : 'OFFLINE'))),
+          h("yoo-truncated-line", { content: this.heading, tooltipPlacement: "bottom" }),
+          !this.isMultiple && !popupMode &&
+            h("yoo-truncated-line", { class: "subheading", content: translate(this.isOnline ? 'ONLINE' : 'OFFLINE'), tooltipPlacement: "bottom" })),
         h("yoo-items", { slot: "end" },
           this.canVideoCall && !popupMode && (h("yoo-button", { size: popupMode ? 'small' : undefined, color: textColor, fill: "transparent", shape: "circular", rippleType: "unbounded", onClick: () => this.startVideocall.emit(true) },
             h("yoo-icon", { size: popupMode ? 'small' : undefined, name: "videocamera", color: popupMode ? textColor : 'app-color' }))),

package/dist/collection/feature-communicate/chat/chat-message-dialog/chat-message-dialog.css

@@ -206,6 +206,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   grid-template-rows: auto auto auto 1fr;
   height: 100%;
 }
+:host .outer-container yoo-header > yoo-navbar > yoo-truncated-line {
+  text-align: center;
+}
 :host .outer-container section {
   box-sizing: border-box;
   padding: 0 var(--spacing-16, 1rem);

package/dist/collection/feature-communicate/chat/chat-message-dialog/chat-message-dialog.js

@@ -23,7 +23,7 @@ export class YooChatMessageDialogComponent {
         h("yoo-items", { slot: "start" },
           h("yoo-button", { color: "text-color", rippleType: "unbounded", fill: "transparent", shape: "circular", onClick: () => closeModal(null) },
             h("yoo-icon", { name: "close" }))),
-        h("yoo-truncate", null, translate(this.heading))));
+        h("yoo-truncated-line", { content: translate(this.heading), withTooltip: false })));
   }
   renderRow(item) {
     const { readTime, receivedBy } = item || {};

package/dist/collection/feature-learn/incentive/card-recommendation/card-recommendation.css

@@ -278,11 +278,13 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   flex-direction: row;
   align-items: center;
 }
+:host([type=lesson]) .outer-container .content-container .title-container yoo-icon + .lesson-title {
+  width: calc(100% - (var(--icon-size-01, 1rem) + var(--spacing-08, 0.5rem)));
+}
 :host([type=lesson]) .outer-container .content-container .title-container .lesson-title {
   margin-left: var(--spacing-08, 0.5rem);
   font-size: var(--font-size-14, 0.875rem);
   text-align: left;
-  --max-lines: 1;
 }
 :host([type=lesson]) .outer-container .content-container .points {
   margin-left: var(--spacing-24, 1.5rem);

package/dist/collection/feature-learn/incentive/card-recommendation/card-recommendation.js

@@ -30,11 +30,11 @@ export class YooCardRecommendationComponent {
         h("yoo-tag", { class: "img-tag", color: "app-color", size: "small" },
           h("yoo-icon", { slot: "start", size: "small", name: "lesson", color: "light" }),
           translate('LESSON')),
-        ((_a = this.actualPlan) === null || _a === void 0 ? void 0 : _a.title) && h("yoo-truncate", { class: "course-title" }, translateMulti(this.actualPlan.title))),
+        ((_a = this.actualPlan) === null || _a === void 0 ? void 0 : _a.title) && h("yoo-truncated-line", { class: "course-title", content: translateMulti(this.actualPlan.title), tooltipPlacement: "top" })),
       h("div", { class: "content-container" },
         h("div", { class: "title-container" },
           (lesson === null || lesson === void 0 ? void 0 : lesson.lessonType) && h("yoo-icon", { size: "small", name: getLessonTypeIcon(lesson.lessonType), color: "app-color" }),
-          (lesson === null || lesson === void 0 ? void 0 : lesson.title) && h("yoo-truncate", { class: "lesson-title" }, translateMulti(lesson.title))),
+          (lesson === null || lesson === void 0 ? void 0 : lesson.title) && h("yoo-truncated-line", { class: "lesson-title", content: translateMulti(lesson.title), tooltipPlacement: "top" })),
         (lesson === null || lesson === void 0 ? void 0 : lesson.points) &&
           h("yoo-tag", { class: "points", noBackground: true, color: "dark", size: "medium" },
             h("yoo-icon", { slot: "start", size: "small", name: "star", color: "app-color" }),
@@ -56,7 +56,7 @@ export class YooCardRecommendationComponent {
         h("yoo-tag", { class: "lessons-tag", color: "light", noBackground: true, size: "small" },
           h("yoo-icon", { slot: "start", size: "small", name: "lesson", color: "light" }),
           `${lessonsCount || 0} ${lessonLabel}`),
-        ((_b = this.actualPlan) === null || _b === void 0 ? void 0 : _b.title) && h("yoo-truncate", { class: "course-title" }, translateMulti(this.actualPlan.title)))));
+        ((_b = this.actualPlan) === null || _b === void 0 ? void 0 : _b.title) && h("yoo-truncated-line", { class: "course-title", content: translateMulti(this.actualPlan.title), tooltipPlacement: "top" }))));
   }
   render() {
     return this.entry ? (this.type === 'lesson' ? this.renderLessonRecommendation() : this.renderCourseRecommendation()) : null;

package/dist/collection/feature-learn/learning/section-list/section-list.js

@@ -434,9 +434,9 @@ export class YooSectionListComponent {
         h("div", { class: "title-container" },
           item.user && h("yoo-avatars", { layout: "list", users: [item.user], size: "small" }),
           item.title && h("div", { class: "title" },
-            h("yoo-truncate", { innerHTML: translateMulti(item.title) })),
+            h("yoo-truncated-line", { content: translateMulti(item.title) })),
           item.text && h("div", { class: "description" },
-            h("yoo-truncate", null, translateMulti(item.text)))),
+            h("yoo-truncated-line", { content: translateMulti(item.text) }))),
         h("div", { class: "info-container" }, item.columns && item.columns.map((column) => this.renderSectionItemColumn(column))),
         !this.disableSortable && !this.isReadonly && h("div", { class: "draggable" },
           h("yoo-icon", { name: "draggable", color: "text-color", size: "medium" })),

package/dist/collection/feature-operate/campaign/campaign-heading/campaign-heading.js

@@ -28,7 +28,7 @@ export class YooCampaignHeadingComponent {
         h("yoo-avatar", { size: "extra-extra-large", frame: "square", icon: this.campaign.processIcon, color: this.campaign.color }))),
       h("div", { class: "left-part" },
         h("div", { class: "title-container" }, translateMulti(this.campaign.title)),
-        h("yoo-truncate", { class: "description-container", maxLength: 80, showEllipsisButton: true, content: translateMulti(this.campaign.text) }),
+        h("yoo-truncated-line", { class: "description-container", content: translateMulti(this.campaign.text) }),
         this.renderTagsContainer()),
       h("div", { class: "right-part" }, this.canEdit && h("yoo-button", { onClick: () => this.edited.emit(true) }, translate('YOOBICEDIT')))));
   }

package/dist/collection/feature-operate/campaign/detail-bar/detail-bar.js

@@ -32,17 +32,16 @@ export class YooDetailBarComponent {
       return groups === null || groups === void 0 ? void 0 : groups.map((group) => {
         var _a;
         const groupTitleOrId = group.title || group._id;
-        return (h("yoo-tooltip", { content: groupTitleOrId, placement: "right" },
-          h("div", { class: "sub-section" },
-            h("yoo-avatar", { size: "small", imgSrc: (_a = group.icon) === null || _a === void 0 ? void 0 : _a._downloadURL, iconText: groupTitleOrId }),
-            h("yoo-truncate", { maxLength: 21, content: `${groupTitleOrId}` }))));
+        return (h("div", { class: "sub-section" },
+          h("yoo-avatar", { size: "small", imgSrc: (_a = group.icon) === null || _a === void 0 ? void 0 : _a._downloadURL, iconText: groupTitleOrId }),
+          h("yoo-truncated-line", { content: `${groupTitleOrId}` })));
       });
     }
   }
   getRoles() {
     var _a;
     return (_a = this.roles) === null || _a === void 0 ? void 0 : _a.map((role) => (h("div", { class: "sub-section" },
-      h("yoo-truncate", { maxLength: 21, content: translate(role) }))));
+      h("yoo-truncated-line", { content: translate(role) }))));
   }
   getFieldsLength() {
     var _a;
@@ -117,7 +116,7 @@ export class YooDetailBarComponent {
   renderTruncateContent(title = '', text) {
     return (h("div", { class: "sub-section-content" },
       h("span", { class: "section-subtitle" }, `${translate(title)}: `),
-      h("yoo-truncate", { showEllipsisButton: true, maxLength: 65, content: translateMulti(text) })));
+      h("yoo-truncated-line", { content: translateMulti(text) })));
   }
   renderContent(title, text) {
     return (h("div", { class: "sub-section-content" },

package/dist/collection/feature-platform/menu/side-menu/side-menu.css

@@ -341,6 +341,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   justify-content: space-between;
   box-sizing: border-box;
   width: 100%;
+  max-width: 100%;
   height: 2rem;
   margin-bottom: var(--spacing-08, 0.5rem);
   padding-left: var(--spacing-04, 0.25rem);
@@ -356,11 +357,10 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host .avatar-container .profile-avatar-and-name {
   display: flex;
+  width: calc(100% - (var(--icon-size-02, 1.5rem) + var(--spacing-08, 0.5rem)));
 }
 :host .avatar-container .profile-avatar-and-name .user-name {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+  width: calc(100% - (var(--icon-size-02, 1.5rem) + var(--spacing-08, 0.5rem)));
   margin-left: var(--spacing-08, 0.5rem);
   color: var(--dark, #000000);
 }

package/dist/collection/feature-platform/menu/side-menu/side-menu.js

@@ -134,7 +134,7 @@ export class YooSideMenuComponent {
         entries[this.selectedIndex].selected = true;
       }
       const isCustomTheme = getSession().isCustomTheme;
-      return (h("yoo-accordion", { class: { 'side-menu': !isSubMenu, 'side-menu-sub': isSubMenu, 'custom-theme': isCustomTheme }, forceEntryUpdate: true, entries: entries, maxTitleCharacters: !isSubMenu ? 18 : undefined, iconPairRight: ['arrow-down', 'arrow-up'], allowMultipleSelection: false, isSubMenu: isSubMenu, onAccordionSelected: (ev) => {
+      return (h("yoo-accordion", { class: { 'side-menu': !isSubMenu, 'side-menu-sub': isSubMenu, 'custom-theme': isCustomTheme }, forceEntryUpdate: true, entries: entries, iconPairRight: ['arrow-down', 'arrow-up'], allowMultipleSelection: false, isSubMenu: isSubMenu, onAccordionSelected: (ev) => {
           if (!isSubMenu) {
             this.selectedIndex = ev.detail.selected ? ev.detail.index : undefined;
           }
@@ -203,7 +203,7 @@ export class YooSideMenuComponent {
       h("div", { class: "profile-avatar-and-name" },
         h("yoo-avatar", { size: "small", user: this.user, isOnline: true }),
         this.user && (h("div", { class: "user-name" },
-          h("yoo-truncate", { content: `${this.user.firstName} ${this.user.lastName}`, maxLength: 14 })))),
+          h("yoo-truncated-line", { withTooltip: false, content: `${this.user.firstName} ${this.user.lastName}` })))),
       h("yoo-icon", { name: this.isContextMenuOpen ? 'arrow-up' : 'arrow-down', color: "stable" })
     ]);
   }

package/dist/collection/feature-platform/menu/side-menu-tree/side-menu-tree.js

@@ -70,7 +70,7 @@ export class YooSideMenuTreeComponent {
   }
   renderTitle(header) {
     return (h("yoo-header", { class: "secondary no-border" },
-      h("yoo-truncate", { class: "align-left" }, translate(header))));
+      h("yoo-truncated-line", { content: translate(header), class: "align-left" })));
   }
   render() {
     const subItems = (this.subItems || []).filter((item) => { var _a; return !(!item || ((_a = item === null || item === void 0 ? void 0 : item.badge) === null || _a === void 0 ? void 0 : _a.text) === '0'); });

package/dist/collection/utils/helpers/draggable-tags-helpers.js

@@ -30,7 +30,7 @@ export async function showWarningAlert(container, showBanner = true, messageKey
       backgroundColor: `var(--${backgroundColor})`,
       height: 'auto',
       opacity: '1',
-      padding: `${messageKey ? 'var(--spacing-08)' : '0'}`
+      padding: `${showBanner ? 'var(--spacing-08)' : '0'}`
     };
     const content = bannerElement.querySelector('p[slot="content"]');
     content.innerHTML = translate(messageKey);

package/dist/design-system/{camera-helpers-d613db66.js → camera-helpers-9dd60aa7.js}

@@ -1,4 +1,4 @@
-import { c2 as cordova, c3 as IonicNativePlugin, ce as cordovaPropertyGet, cf as cordovaPropertySet, cg as registerPlugin, _ as getSession, ch as isIonic, d as isNativeMobile, ci as Device, e as isAndroid, v as isIOS, cj as getMediaDevices, n as showModal, m as getModalAnimation, o as isWeb } from './index-504f216f.js';
+import { c2 as cordova, c3 as IonicNativePlugin, ce as cordovaPropertyGet, cf as cordovaPropertySet, cg as registerPlugin, _ as getSession, ch as isIonic, d as isNativeMobile, ci as Device, e as isAndroid, v as isIOS, cj as getMediaDevices, n as showModal, m as getModalAnimation, o as isWeb } from './index-5e194889.js';
 
 var __extends$2 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -205,7 +205,7 @@ var CameraResultType;
 })(CameraResultType || (CameraResultType = {}));
 
 const Camera = registerPlugin('Camera', {
-    web: () => import('./web-316c8cbf.js').then(m => new m.CameraWeb()),
+    web: () => import('./web-38cbb94f.js').then(m => new m.CameraWeb()),
 });
 
 var __extends = (undefined && undefined.__extends) || (function () {

package/dist/design-system/{chat-helpers-89870b70.js → chat-helpers-dca94274.js}

@@ -1,4 +1,4 @@
-import { al as is24Hour, am as isFile, n as showModal, o as isWeb } from './index-504f216f.js';
+import { al as is24Hour, am as isFile, n as showModal, o as isWeb } from './index-5e194889.js';
 import { a as isArray } from './lodash-494e728c.js';
 
 /**

package/dist/design-system/{common-helpers-b49fc758.js → common-helpers-98c37d9c.js}

@@ -1,4 +1,4 @@
-import { m as getModalAnimation, t as translate, n as showModal, o as isWeb, p as debounce, q as querySelectorDeep$1, d as isNativeMobile, S as ScreenOrientation, r as findParent, u as isIphoneX, f as isIpadPro, j as isTablet, c as isFullScreenFalse, v as isIOS, e as isAndroid, w as setAnimation, x as animations, y as getCssColor, Y as YOOBICON_ENTITIES_MAP, z as startOf, A as isDateBefore, B as dateDiffInCalendarDays, D as isDateAfter, E as getAsyncExtraData, F as isNativeFilePath, G as cleanupWKWebViewFilePath, k as Cloudinary, H as getProtocol, C as CloudinaryGradientLayer } from './index-504f216f.js';
+import { m as getModalAnimation, t as translate, n as showModal, o as isWeb, p as debounce, q as querySelectorDeep$1, d as isNativeMobile, S as ScreenOrientation, r as findParent, u as isIphoneX, f as isIpadPro, j as isTablet, c as isFullScreenFalse, v as isIOS, e as isAndroid, w as setAnimation, x as animations, y as getCssColor, Y as YOOBICON_ENTITIES_MAP, z as startOf, A as isDateBefore, B as dateDiffInCalendarDays, D as isDateAfter, E as getAsyncExtraData, F as isNativeFilePath, G as cleanupWKWebViewFilePath, k as Cloudinary, H as getProtocol, C as CloudinaryGradientLayer } from './index-5e194889.js';
 import { A as get } from './lodash-494e728c.js';
 
 function getDefaultModalAnimation() {