@yoobic/yobi 8.2.0-5 → 8.2.0-8

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 → segmented-control/segmented-control.css}

@@ -202,6 +202,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* spacing for padding, margin, etc... */
 /* shadow */
 :host {
+  position: relative;
   display: flex;
   justify-content: space-between;
   width: 100%;
@@ -212,22 +213,33 @@ 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;
 }
 :host .segment-container .segment-content {
+  z-index: 1;
   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 .segment-content input {
+  position: fixed;
+  opacity: 0;
+  pointer-events: none;
 }
 :host .segment-container .separator {
   height: 60%;
@@ -246,11 +258,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .segment-container:last-of-type .separator {
   display: none;
 }
-:host .segment-container.active {
-  background: var(--app-color, #5a30f4);
-  border-radius: var(--border-radius-08, 0.5rem);
-  box-shadow: var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));
-}
 :host .segment-container.active h3 {
   color: var(--light, #ffffff);
 }
@@ -270,6 +277,30 @@ 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)));
+}
+
+:host([animated]) .segment-content h3 {
+  transition: color 0.3s ease-in-out;
+}
+:host([animated]) .active-background {
+  transition: all 0.3s ease-in-out;
+}
+
+.active-background {
+  position: absolute;
+  height: 87%;
+  margin: var(--spacing-02, 0.125rem) 0;
+  background: var(--app-color, #5a30f4);
+  border-radius: var(--border-radius-08, 0.5rem);
+  box-shadow: var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));
 }

package/dist/collection/components/2.molecules/{segment/segment.js → segmented-control/segmented-control.js}

@@ -1,10 +1,11 @@
-import { translate } from '@shared/utils';
-import { Component, Event, h, Host, Prop, State, Watch } from '@stencil/core';
-export class YooSegmentComponent {
+import { resizeObserve, translate } from '@shared/utils';
+import { Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';
+export class YooSegmentedControlComponent {
   constructor() {
     this.values = [];
     this.size = 'medium';
     this.initialIndex = 0;
+    this.animated = true;
     this.selectedIndex = this.initialIndex;
   }
   onIndexUpdated() {
@@ -14,8 +15,20 @@ export class YooSegmentComponent {
     var _a, _b;
     return ((_b = (_a = this.values[index]) === null || _a === void 0 ? void 0 : _a.icon) === null || _b === void 0 ? void 0 : _b.length) > 0;
   }
-  onSegmentClick(index) {
+  componentDidLoad() {
+    resizeObserve(this.host, this.moveActiveBackground.bind(this));
+    this.moveActiveBackground();
+  }
+  moveActiveBackground() {
+    var _a, _b;
+    this.activeBackgroundEl.style.width = `${(_a = this.activeElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width}px`;
+    this.activeBackgroundEl.style.marginLeft = `${(_b = this.activeElement) === null || _b === void 0 ? void 0 : _b.offsetLeft}px`;
+  }
+  onSegmentClick(ev, index) {
     if (!this.readonly) {
+      const target = ev.target;
+      this.activeElement = target.closest('.segment-container');
+      this.moveActiveBackground();
       this.selectedIndex = index;
       this.segmentSelected.emit(index);
     }
@@ -24,7 +37,7 @@ 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: (ev) => this.onSegmentClick(ev, index), ref: el => this.selectedIndex === index ? this.activeElement = el : '', style: { width: `${100 / (this.values.length || 1)}%` } },
           this.renderSegment(value, index),
           h("slot", { name: value.id }),
           h("div", { class: {
@@ -36,20 +49,23 @@ export class YooSegmentComponent {
   }
   renderSegment(value, index) {
     return (h("div", { class: "segment-content" },
+      h("input", { checked: this.selectedIndex === index, name: `${index}`, type: "radio", value: index }),
       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() {
-    return h(Host, { style: { maxWidth: this.maxWidth ? this.maxWidth + 'px' : null } }, this.renderSegments());
+    return h(Host, { style: { maxWidth: this.maxWidth ? this.maxWidth + 'px' : null } },
+      this.renderSegments(),
+      h("span", { ref: el => this.activeBackgroundEl = el, class: "active-background" }));
   }
-  static get is() { return "yoo-segment"; }
+  static get is() { return "yoo-segmented-control"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["segment.scss"]
+    "$": ["segmented-control.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["segment.css"]
+    "$": ["segmented-control.css"]
   }; }
   static get properties() { return {
     "values": {
@@ -147,6 +163,24 @@ export class YooSegmentComponent {
       },
       "attribute": "max-width",
       "reflect": false
+    },
+    "animated": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "animated",
+      "reflect": true,
+      "defaultValue": "true"
     }
   }; }
   static get states() { return {
@@ -168,6 +202,7 @@ export class YooSegmentComponent {
         "references": {}
       }
     }]; }
+  static get elementRef() { return "host"; }
   static get watchers() { return [{
       "propName": "initialIndex",
       "methodName": "onIndexUpdated"

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-audience/form-audience.css

@@ -228,8 +228,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   flex-direction: row;
   align-items: center;
 }
-:host .outer-container .segment-container .segment,
-:host .outer-container .radio-container .segment {
+:host .outer-container .segment-container yoo-segmented-control,
+:host .outer-container .radio-container yoo-segmented-control {
   max-width: 18.75rem;
   margin-right: var(--spacing-16, 1rem);
 }

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

@@ -325,7 +325,7 @@ export class YooFormAudienceComponent {
     const index = this.targetValues.findIndex((v) => v.id === target);
     return this.enableTarget && h("yoo-form-input-container", { class: "bordered", hideOptional: true, field: { title: translate('AUDIENCETARGET') } },
       h("div", { class: "segment-container" },
-        h("yoo-segment", { readonly: this.readonly, size: "medium", class: "segment", values: this.targetValues, initialIndex: index, onSegmentSelected: (ev) => this.onTargetChanged(ev) }),
+        h("yoo-segmented-control", { readonly: this.readonly, values: this.targetValues, initialIndex: index, onSegmentSelected: (ev) => this.onTargetChanged(ev) }),
         this.renderHelp(`AUDIENCETARGET${target.toUpperCase()}HELP`)));
   }
   renderStoreTarget() {

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-dynamic/form-dynamic.js

@@ -4157,7 +4157,7 @@ export class YooFormDynamicComponent {
         break;
       case FormFieldType.segment:
         {
-          TagType = 'yoo-segment';
+          TagType = 'yoo-segmented-control';
           let initialIndex = 0;
           if (value) {
             initialIndex = field.values.findIndex((v) => v.id === value);