@yoobic/yobi 8.2.0-5 → 8.2.0-6

package/dist/cjs/yoo-walkthrough.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');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-d82a50b9.js');

package/dist/cjs/yoo-web-menu.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-dba6038f.js');
-const commonHelpers = require('./common-helpers-aaf67fd5.js');
+const index$1 = require('./index-11911d9b.js');
+const commonHelpers = require('./common-helpers-1d02f971.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-d82a50b9.js');

package/dist/cjs/yoo-webcam.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');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-d82a50b9.js');

package/dist/cjs/yoo-welcome-banner.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-dba6038f.js');
-const commonHelpers = require('./common-helpers-aaf67fd5.js');
+const index$1 = require('./index-11911d9b.js');
+const commonHelpers = require('./common-helpers-1d02f971.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-d82a50b9.js');

package/dist/cjs/yoo-widget-chart.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');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-d82a50b9.js');

package/dist/cjs/yoo-widget-small-size.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');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-d82a50b9.js');

package/dist/cjs/yoo-widget-tab.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');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-d82a50b9.js');

package/dist/cjs/yoo-widget-tile.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');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-d82a50b9.js');

package/dist/cjs/yoo-workflow-state-dialog.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');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-d82a50b9.js');

package/dist/cjs/yoo-workflow-state.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');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-d82a50b9.js');

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

@@ -3,12 +3,12 @@
 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 workflow_interface = require('./workflow.interface-ffda8358.js');
-const commonHelpers = require('./common-helpers-aaf67fd5.js');
+const commonHelpers = require('./common-helpers-1d02f971.js');
 const index$4 = require('./index-9681c9e0.js');
-const index$2 = require('./index-9563be1f.js');
+const index$2 = require('./index-9ea49259.js');
 const index$3 = require('./index-9c56868f.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-d82a50b9.js');

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-c8609d4f.js');
-const index = require('./index-dba6038f.js');
+const index = require('./index-11911d9b.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-d82a50b9.js');

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 },