@yoobic/yobi 8.2.0-4 → 8.2.0-7

package/dist/cjs/yoo-zoom.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-dba6038f.js');
+const index$1 = require('./index-11911d9b.js');
 const lodash = require('./lodash-597bda6d.js');
 const annotationsHelpers = require('./annotations-helpers-45b1c2e4.js');
 const hammerHelpers = require('./hammer-helpers-e8117959.js');

package/dist/collection/collection-manifest.json

@@ -36,6 +36,7 @@
     "./components/1.atoms/tag/tag.js",
     "./components/1.atoms/text/text.js",
     "./components/1.atoms/truncate/truncate.js",
+    "./components/1.atoms/truncated-line/truncated-line.js",
     "./components/2.molecules/accordion/accordion.js",
     "./components/2.molecules/action-sheet/action-sheet.js",
     "./components/2.molecules/action-sheet-controller/action-sheet-controller.js",

package/dist/collection/components/1.atoms/navbar/navbar.css

@@ -255,6 +255,10 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   padding-right: var(--spacing-08, 0.5rem);
 }
 
+:host(.grid.form.web.search-only) {
+  z-index: 20004;
+}
+
 :host(.overflow-hidden) .center-container {
   overflow: hidden;
 }

package/dist/collection/components/1.atoms/tabs/tabs.css

@@ -401,6 +401,8 @@ yoo-badge[shape=dot] {
 }
 .outer-container-vertical .tab-container {
   justify-content: left;
+  box-sizing: border-box;
+  width: 100%;
   height: 2.5rem;
   padding: var(--spacing-08, 0.5rem);
   color: var(--dark, #000000);
@@ -409,8 +411,8 @@ yoo-badge[shape=dot] {
 .outer-container-vertical .tab-container:hover {
   color: var(--app-color, #5a30f4);
 }
-.outer-container-vertical .tab-container .flex {
-  flex: 1;
+.outer-container-vertical .tab-container .full-width {
+  width: 100%;
 }
 .outer-container-vertical .tab-container yoo-icon {
   margin-right: var(--spacing-08, 0.5rem);
@@ -422,6 +424,15 @@ yoo-badge[shape=dot] {
 .outer-container-vertical .tab-container.active yoo-icon {
   fill: var(--app-color, #5a30f4);
 }
+.outer-container-vertical .tab-container .tab-title {
+  width: 100%;
+}
+.outer-container-vertical .tab-container .tab-title.plus-one {
+  width: calc(100% - 2rem);
+}
+.outer-container-vertical .tab-container .tab-title.sandwich {
+  width: calc(100% - 4rem);
+}
 .outer-container-vertical .tab-container + .tab-container {
   margin-top: var(--vertical-tab-gap);
 }

package/dist/collection/components/1.atoms/tabs/tabs.js

@@ -41,10 +41,6 @@ export class YooTabsComponent {
      * Initial index when the tabs is loaded.
      */
     this.initialIndex = 0;
-    /**
-     * Maximum amount of title characters before truncating it
-     */
-    this.maxTitleCharacters = 18;
     this.currentIndex = 0;
     this.tabElements = [];
     this.notifElements = [];
@@ -113,18 +109,23 @@ export class YooTabsComponent {
     }
   }
   renderTab(tab, index) {
-    var _a;
     const isActive = this.initialIndex === index;
     const icon = tab.icon;
     const tagColor = isActive ? 'app-color-10' : 'text-color-10';
     return [
       h("div", { key: 'tab_' + index, class: { 'tab-container': true, extra: index >= this.tabs.length, active: isActive }, onClick: (event) => this.tabClicked(index, event), ref: (el) => (this.tabElements[index] = el) },
-        h("span", { class: "flex" },
+        h("span", { class: "full-width" },
           this.showBadges && h("yoo-badge", { class: "margin-right", color: this.getBadgeColor(tab, index, isActive), shape: "circle", text: (index + 1).toLocaleString() }),
           icon && h("yoo-icon", { class: tab.iconColor, name: icon, size: tab.iconOnlySize || (this.vertical ? 'medium' : 'small') }),
-          this.vertical && ((_a = tab.title) === null || _a === void 0 ? void 0 : _a.length) > this.maxTitleCharacters ? (h("yoo-tooltip", { content: translateMulti(tab.title) },
-            h("yoo-truncate", { content: translateMulti(tab.title), maxLength: this.maxTitleCharacters }))) : (h("span", { class: "flex", innerHTML: translateMulti(tab.title) })),
-          this.isEditable && this.editableOptions && this.tabs.length > index && isWeb(this.host) && (h("yoo-context-menu", { class: "flex editable", contentButtons: this.editableOptions(index) },
+          this.vertical
+            ? h("div", { class: `full-width tab-title ${this.isEditable && this.editableOptions && this.tabs.length > index && icon
+                ? 'sandwich'
+                : this.isEditable && this.editableOptions && this.tabs.length > index || icon
+                  ? 'plus-one'
+                  : ''}` },
+              h("yoo-truncated-line", { tooltipPlacement: "right", content: translateMulti(tab.title) }))
+            : h("span", null, translateMulti(tab.title)),
+          this.isEditable && this.editableOptions && this.tabs.length > index && isWeb(this.host) && (h("yoo-context-menu", { class: "full-width editable", contentButtons: this.editableOptions(index) },
             h("yoo-icon", { class: tab.iconColor, size: tab.iconOnlySize || (this.vertical ? 'medium' : 'small'), name: "more" }))),
           this.isEditable && this.editableOptions && this.tabs.length > index && !isWeb(this.host) && (h("yoo-icon", { class: tab.iconColor, size: tab.iconOnlySize || (this.vertical ? 'medium' : 'small'), name: "more", onClick: () => this.onShowOptions(index) })),
           isNumber(tab.notif) && tab.notif > 0 && !this.isEditable && (h("yoo-badge", { ref: (el) => (this.notifElements[index] = el), color: tagColor, shape: "oval", text: pipes.number.transform(tab.notif, '', 0) })),
@@ -331,24 +332,6 @@ export class YooTabsComponent {
       "reflect": false,
       "defaultValue": "0"
     },
-    "maxTitleCharacters": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Maximum amount of title characters before truncating it"
-      },
-      "attribute": "max-title-characters",
-      "reflect": false,
-      "defaultValue": "18"
-    },
     "showBadges": {
       "type": "boolean",
       "mutable": false,

package/dist/collection/components/1.atoms/truncated-line/truncated-line.css

@@ -0,0 +1,219 @@
+/* app direction */
+/* border-radius */
+/* border-width */
+/* font family */
+/* font-size */
+/* font weights */
+/* icon size */
+/* used for logos */
+/* spacing for padding, margin, etc... */
+/* shadow */
+/* Z-Index (Ionic)
+--------------------------------------------------
+Grouped by elements which would be siblings */
+/* Hairlines width */
+/* Default Colors
+---------------------------------- */
+/* Private color variables */
+/* #3880ff; */
+/* #3880ff; */
+/* #3880ff; */
+/* #3880ff; */
+/* #3880ff;*/
+/* #3880ff; */
+/* #3880ff; */
+/* #3880ff; */
+/* #3880ff; */
+/* Color map should provide
+- base: main color to be used.
+- contrast: Color that will provide readable text against the base color
+- shade: 12% darker version of the base color (mix with black)
+- tint: 10% lighter version of the base color (mix with white) */
+/* Themed Colors
+
+ Default Foreground and Background Colors values
+ Allows users to override an foreground / background colors
+ $background-color-value:            $light !default;
+ $background-color-rgb:              255, 255, 255 !default; */
+/* Default Foreground and Background Colors
+-------------------------------------------------- */
+/* Default General Colors
+-------------------------------------------------- */
+/* Default List & List Items
+-------------------------------------------------- */
+/* Item Divider */
+/* iOS List & List Items
+-------------------------------------------------- */
+/* Default Toolbar
+--------------------------------------------------*/
+/* iOS Toolbar
+--------------------------------------------------*/
+/* Default Tabs & Tab bar
+--------------------------------------------------*/
+/* iOS Tabs & Tab bar
+--------------------------------------------------*/
+/* Function related variables
+--------------------------------------------------*/
+/* Gets the active color's css variable from a variation. Alpha is optional.
+--------------------------------------------------------------------------------------------
+Example usage:
+current-color(base) => var(--ion-color-base)
+current-color(contrast, 0.1) => rgba(var(--ion-color-contrast-rgb), 0.1)
+--------------------------------------------------------------------------------------------*/
+/* Gets the specific color's css variable from the name and variation. Alpha/rgb are optional.
+--------------------------------------------------------------------------------------------
+Example usage:
+ion-color(primary, base) => var(--ion-color-primary, #3880ff)
+ion-color(secondary, contrast) => var(--ion-color-secondary-contrast)
+ion-color(primary, base, 0.5) => rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.5)
+--------------------------------------------------------------------------------------------*/
+/* Mixes a color with black to create its shade.
+--------------------------------------------------------------------------------------------*/
+/*Mixes a color with white to create its tint.
+--------------------------------------------------------------------------------------------*/
+/* Converts a color to a comma separated rgb.
+--------------------------------------------------------------------------------------------*/
+/* Str functions.
+___________________________________________________________________________________________*/
+/* Creates a pulse animation.
+  @param {color} $begin-color [stable-20] - starting color for pulse.
+  @param {color} $end-color [stable-20] - ending color for pulse.
+  @author Ben Morgan
+  @author Damien Arondel 
+*/
+/* Execute a content if the hover state is supported.
+
+ @content the content to execute if relevant
+ @author Ben Morgan
+ @author Damien Arondel
+*/
+/* Properly hide overflow on rounded corner elements for Webkit based browsers.
+ This mixin must be used at the same level as `overflow: hidden` and `border-radius: ...`.
+
+ @link https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7
+ @author Ben Morgan
+ @author Damien Arondel
+*/
+/* Truncate every overflown elements with an ellipsis.
+ This mixin does not work with flex box on the same level.
+
+ @author Ben Morgan
+ @author Damien Arondel
+*/
+/* Truncate text at a specific number of lines.
+ */
+/* app direction */
+/* border-radius */
+/* border-width */
+/* font family */
+/* font-size */
+/* font weights */
+/* icon size */
+/* used for logos */
+/* spacing for padding, margin, etc... */
+/* shadow */
+/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
+/* Single side border-radius */
+/* Text Direction - ltr / rtl
+$app-direction: multi | rtl | ltr | null (default)
+multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.
+rtl: Always assumes rtl and only includes rtl css. No [dir] selectors.
+ltr: Always assumes ltr and only includes ltr css. No [dir] selectors.
+null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override ltr defaults.
+---------------------------------------------------------- */
+/* Add property horizontal
+ @param {string} $start
+ @param {string} $end
+----------------------------------------------------------*/
+/* Add property for all directions
+  @param {string} $prop
+  @param {string} $top
+  @param {string} $end
+  @param {string} $bottom
+  @param {string} $start
+  @param {boolean} $content include content or use default
+----------------------------------------------------------*/
+/* Add margin for all directions
+  @param {string} $top
+  @param {string} $end
+  @param {string} $bottom
+  @param {string} $start
+----------------------------------------------------------*/
+/* Add padding for all directions
+  @param {string} $top
+  @param {string} $end
+  @param {string} $bottom
+  @param {string} $start
+----------------------------------------------------------*/
+/*Font smoothing
+--------------------------------------------------*/
+/* SVG Background Image Mixin
+  @param {string} $svg
+----------------------------------------------------------*/
+/* Add padding horizontal
+  @param {string} $start
+  @param {string} $end
+----------------------------------------------------------*/
+/* Add margin horizontal
+ @param {string} $start
+ @param {string} $end
+----------------------------------------------------------*/
+/* Add safe area padding horizontal
+  @param {string} $start
+  @param {string} $end
+----------------------------------------------------------*/
+/* Add border radius for all directions
+  @param {string} $top-start
+  @param {string} $top-end
+  @param {string} $bottom-end
+  @param {string} $bottom-start
+----------------------------------------------------------*/
+/* Sets correct text align with support for old browsers
+  @param {string} $direction - text direction
+  @param {string} $decorator - !important
+----------------------------------------------------------*/
+/* Add position for all directions
+  @param {string} $top
+  @param {string} $end
+  @param {string} $bottom
+  @param {string} $start
+----------------------------------------------------------*/
+/* Add position horizontal
+  @param {string} $start - amount to position start
+  @param {string} $end - amount to left: 0; end
+----------------------------------------------------------*/
+/**
+ * NOTE DO NOT USE FOR NEW COMPONENTS
+ * LEGACY CODE -- Styles maintained only to prevent breaking changes
+ * For all Font Sizes please use the appropreate font-size-XX Variables.
+ */
+/**
+* Global style mixin for being able to change the background / font-color and border-color
+* programmatically using global classes
+*/
+/* app direction */
+/* border-radius */
+/* border-width */
+/* font family */
+/* font-size */
+/* font weights */
+/* icon size */
+/* used for logos */
+/* spacing for padding, margin, etc... */
+/* shadow */
+:host {
+  display: block;
+  width: 100%;
+}
+:host .content {
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+:host ::slotted(*) {
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

package/dist/collection/components/1.atoms/truncated-line/truncated-line.js

@@ -0,0 +1,105 @@
+import { isTruncated } from '@shared/utils';
+import { Component, h, Host, Prop, State } from '@stencil/core';
+//! Things to note:
+//* - This component is for single line ONLY
+//* - Width of the parent must be set for the css truncation to work, flex/flex-grow is not enough
+//* - When using @prop content, the text styling + line height is inherited
+//* - When not using @prop content, can only hold one child inside <slot />
+export class YooTruncatedLineComponent {
+  constructor() {
+    // Whether or not to render tooltip or just truncate
+    this.withTooltip = true;
+    // Placement on where the tooltip should pop up
+    this.tooltipPlacement = 'auto';
+    // Full text content to be truncated / tooltip
+    this.content = '';
+    this.renderContentWithTooltip = () => {
+      return (h("yoo-tooltip", { content: this.content, placement: this.tooltipPlacement }, this.renderContent()));
+    };
+    this.renderContent = () => {
+      return (h("div", { class: "content", ref: (el) => this.contentElement = el },
+        this.content,
+        h("slot", null)));
+    };
+  }
+  componentDidLoad() {
+    if (this.contentElement && (this.truncated !== isTruncated(this.contentElement))) {
+      this.truncated = isTruncated(this.contentElement);
+    }
+  }
+  render() {
+    return (h(Host, null, this.truncated && this.withTooltip ? this.renderContent() : this.renderContentWithTooltip()));
+  }
+  static get is() { return "yoo-truncated-line"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["truncated-line.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["truncated-line.css"]
+  }; }
+  static get properties() { return {
+    "withTooltip": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "with-tooltip",
+      "reflect": true,
+      "defaultValue": "true"
+    },
+    "tooltipPlacement": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Placement",
+        "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+        "references": {
+          "Placement": {
+            "location": "import",
+            "path": "tippy.js"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "tooltip-placement",
+      "reflect": false,
+      "defaultValue": "'auto'"
+    },
+    "content": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "content",
+      "reflect": false,
+      "defaultValue": "''"
+    }
+  }; }
+  static get states() { return {
+    "truncated": {}
+  }; }
+}

package/dist/collection/components/2.molecules/accordion/accordion.js

@@ -17,7 +17,6 @@ export class YooAccordionComponent {
      * Enable or disable multiple selection
      */
     this.allowMultipleSelection = false;
-    this.maxTitleCharacters = 17;
     /**
      * If true, each item will have a border bottom of 0.0625rem
      */
@@ -198,8 +197,7 @@ export class YooAccordionComponent {
           this.iconPairLeft && !masterTitle && this.renderIconPair(item, this.iconPairLeft),
           !!item.notif && !isNumber(item.notif) && h("yoo-badge", { class: "dot", shape: "dot" }),
           item.icon && h("yoo-icon", { name: item.icon, color: item.selected && !isNullOrUndefined(item.handler) ? 'app-color' : item.iconColor || 'text-color' }),
-          h("div", { class: { 'title': true, [item.color || '']: true } }, (title === null || title === void 0 ? void 0 : title.length) > this.maxTitleCharacters ? (h("yoo-tooltip", { content: title },
-            h("yoo-truncate", { content: title, maxLength: this.maxTitleCharacters }))) : (h("span", null, title))),
+          h("div", { class: { 'title': true, [item.color || '']: true } }, h("yoo-truncated-line", { tooltipPlacement: "right", content: title })),
           item.subItemCount > -1 && h("span", { class: "count" }, item.subItemCount)),
         h("div", { class: "right-container" },
           item.actionButtons && item.actionButtons.length > 0 && this.renderActionButton(item.actionButtons),
@@ -358,24 +356,6 @@ export class YooAccordionComponent {
         "text": "Icon pair to be toggled between the two supplied icons\n[0] --> non-selected state; [1] --> selected state;\npositioned to the right of the title"
       }
     },
-    "maxTitleCharacters": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "max-title-characters",
-      "reflect": false,
-      "defaultValue": "17"
-    },
     "showBottomBorder": {
       "type": "boolean",
       "mutable": false,

package/dist/collection/components/2.molecules/profile-list/profile-list.js

@@ -121,11 +121,10 @@ export class YooProfileListComponent {
     }
   }
   renderTruncate(content, icon) {
-    const charLength = isWeb(this.host) ? 83 : 38;
     return (h("div", { class: "user-info-list" },
       h("div", { class: "start-container" },
         h("yoo-icon", { name: icon, color: "dark" }),
-        h("yoo-truncate", { content: content, maxLength: charLength, showEllipsisIcon: true }))));
+        h("yoo-truncated-line", { content: content }))));
   }
   renderCollapsible(header, content) {
     return (h("yoo-collapsible", { hasArrowIcon: !!content.length, icon: "tag", iconColor: "dark", iconSize: "medium", slotHeader: true },

package/dist/collection/components/2.molecules/segment/segment.css

@@ -212,6 +212,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   position: relative;
   display: flex;
   align-items: center;
+  box-sizing: border-box;
   width: 100%;
   margin: var(--spacing-02, 0.125rem) 0;
 }
@@ -219,15 +220,19 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   display: flex;
   align-items: center;
   justify-content: center;
+  box-sizing: border-box;
   width: 100%;
   padding: var(--spacing-04, 0.25rem);
 }
 :host .segment-container .segment-content h3 {
+  box-sizing: border-box;
+  width: 100%;
   margin: 0;
   padding-left: var(--spacing-04, 0.25rem);
   color: var(--text-color, #807f83);
   font-weight: var(--font-weight-400, 400);
   font-size: var(--font-size-12, 0.75rem);
+  text-align: center;
 }
 :host .segment-container .separator {
   height: 60%;
@@ -270,6 +275,14 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   height: 2rem;
 }
 
+:host([size=medium]) yoo-icon + yoo-truncated-line,
+:host([size=small]) yoo-icon + yoo-truncated-line {
+  width: calc(100% - (var(--icon-size-01, 1rem) + var(--spacing-04, 0.25rem)));
+}
+
 :host([size=large]) .segment-container h3 {
   font-size: var(--font-size-14, 0.875rem);
+}
+:host([size=large]) .segment-container yoo-icon + yoo-truncated-line {
+  width: calc(100% - (var(--icon-size-02, 1.5rem) + var(--spacing-04, 0.25rem)));
 }

package/dist/collection/components/2.molecules/segment/segment.js

@@ -24,7 +24,10 @@ export class YooSegmentComponent {
     var _a;
     return (_a = this.values) === null || _a === void 0 ? void 0 : _a.map((value, index) => {
       if (value) {
-        return (h("div", { class: { 'segment-container': true, active: this.selectedIndex === index }, onClick: () => this.onSegmentClick(index) },
+        return (h("div", { class: {
+            'segment-container': true,
+            active: this.selectedIndex === index
+          }, onClick: () => this.onSegmentClick(index), style: { width: `${100 / (this.values.length || 1)}%` } },
           this.renderSegment(value, index),
           h("slot", { name: value.id }),
           h("div", { class: {
@@ -37,7 +40,7 @@ export class YooSegmentComponent {
   renderSegment(value, index) {
     return (h("div", { class: "segment-content" },
       value.icon && h("yoo-icon", { size: this.size === 'large' ? 'medium' : this.size === 'medium' ? 'small' : this.size, name: value.icon, color: index === this.selectedIndex ? 'light' : 'stable' }),
-      value.label && h("yoo-truncate", null,
+      value.label && h("yoo-truncated-line", null,
         h("h3", null, translate(value.label)))));
   }
   render() {

package/dist/collection/components/3.organisms/input-bar/input-bar.js

@@ -733,10 +733,14 @@ export class YooInputBarComponent {
     }
   }
   async onActionClick(preventFocusAfter = false) {
-    var _a, _b;
+    var _a, _b, _c;
     this.onVibrate();
-    if (this.hasTextInside || (this.value && this.value !== '')) {
-      const safeContent = await sanitizeHTML(this.value);
+    let text = this.value;
+    if (this.formTextArea) {
+      text = await ((_a = this.formTextArea) === null || _a === void 0 ? void 0 : _a.getText()) || text;
+    }
+    if (this.hasTextInside || (text && text !== '')) {
+      const safeContent = await sanitizeHTML(text);
       this.sendText.emit(safeContent);
       this.value = null;
       if (this.formTextArea) {
@@ -751,10 +755,10 @@ export class YooInputBarComponent {
     else {
       this.onImportPhotoFromLibrary();
     }
-    if (((_a = this.advancedOptions) === null || _a === void 0 ? void 0 : _a.keepFocusAfterAction) && this.formTextArea && !preventFocusAfter) {
+    if (((_b = this.advancedOptions) === null || _b === void 0 ? void 0 : _b.keepFocusAfterAction) && this.formTextArea && !preventFocusAfter) {
       this.formTextArea.setFocus();
     }
-    if (((_b = this.advancedOptions) === null || _b === void 0 ? void 0 : _b.blurAfterAction) && this.formTextArea) {
+    if (((_c = this.advancedOptions) === null || _c === void 0 ? void 0 : _c.blurAfterAction) && this.formTextArea) {
       this.formTextArea.setBlur();
     }
   }

package/dist/collection/components/form/form-autocomplete-dialog/form-autocomplete-dialog.js

@@ -355,7 +355,7 @@ export class YooFormAutocompleteDialogComponent {
         h("yoo-items", { slot: "start" },
           h("yoo-button", { color: "text-color", fill: "transparent", shape: "circular", rippleType: "unbounded", onClick: () => this.onCancel() },
             h("yoo-icon", { name: "close", color: "text-color" }))),
-        h("yoo-truncate", { onClick: () => this.onHeaderClick() }, this.initialLoadComplete && this.getDialogTitle()),
+        h("yoo-truncated-line", { onClick: () => this.onHeaderClick(), content: this.initialLoadComplete && this.getDialogTitle() }),
         h("yoo-items", { slot: "end", onClick: (ev) => this.onSave(ev) }, this.multiple && (h("yoo-button", { color: "app-color", fill: "transparent", animated: false }, translate('YOOBICDONE')))))));
   }
   renderExpandedGrid() {

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) {