@yoobic/yobi 8.2.0-9 → 8.2.2

package/dist/collection/components/1.atoms/flip-card/flip-card.js

@@ -19,6 +19,9 @@ export class YooFlipCardComponent {
       !isCardLayout && Object.assign(cardInnerElement.style, { width: `${slotContents[0].clientWidth}px` });
     }
   }
+  async loadCard() {
+    this.cardLoaded = true;
+  }
   componentDidLoad() {
     this.initCardSize();
   }
@@ -138,6 +141,22 @@ export class YooFlipCardComponent {
         "text": "",
         "tags": []
       }
+    },
+    "loadCard": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
     }
   }; }
   static get elementRef() { return "host"; }

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

@@ -1,7 +1,7 @@
-import { cleanupWKWebViewFilePath, findParent, getAsyncExtraData, getKeyToCache, getURLs, isOffline, isYoobicSecuredDocTenant, setSecuredContent } from '@shared/utils';
+import { cleanupWKWebViewFilePath, getKeyToCache, getURLs, isOffline, isYoobicSecuredDocTenant, setSecuredContent } from '@shared/utils';
 import { Component, Element, forceUpdate, h, Host, Method, Prop, Watch } from '@stencil/core';
 import { getFromLocalForage } from '../../../utils/cache/localForage';
-import { querySelectorAllDeep, showSlidesMedia } from '../../../utils/helpers/common-helpers';
+import { openImageDetailFromRTE } from '../../../utils/helpers/common-helpers';
 export class YooMarkdownComponent {
   constructor() {
     this.linkPreviews = [];
@@ -17,26 +17,14 @@ export class YooMarkdownComponent {
     this.setContent();
   }
   onContentClick(e) {
-    var _a, _b, _c;
+    var _a;
     const targetElement = e.target;
     const isTargetImage = (targetElement === null || targetElement === void 0 ? void 0 : targetElement.tagName) === 'IMG' && ((_a = targetElement === null || targetElement === void 0 ? void 0 : targetElement.parentElement) === null || _a === void 0 ? void 0 : _a.tagName) !== 'A';
     if (isTargetImage) {
-      const lessonForm = (_b = findParent(this.host, 'yoo-form-dynamic')) === null || _b === void 0 ? void 0 : _b.classList.contains('lesson-form');
       e.stopPropagation();
       e.stopImmediatePropagation();
       e.preventDefault();
-      const imgs = Array.from(querySelectorAllDeep(this.contentDiv, 'img'));
-      const items = ((_c = imgs.map((e) => e === null || e === void 0 ? void 0 : e.src)) === null || _c === void 0 ? void 0 : _c.map(value => ({ value }))) || [];
-      const slideIndex = imgs === null || imgs === void 0 ? void 0 : imgs.indexOf(targetElement);
-      if (items === null || items === void 0 ? void 0 : items.length) {
-        showSlidesMedia({ items, isTagging: false, isReadonly: true, canAnnotate: false, currentSlideIndex: slideIndex });
-      }
-      if (!lessonForm) {
-        return;
-      }
-      if (slideIndex >= 0) {
-        getAsyncExtraData({ type: 'image-forms', params: { slideIndex, imgs } });
-      }
+      openImageDetailFromRTE(this.contentDiv, targetElement.src);
     }
   }
   async setContent() {

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

@@ -208,6 +208,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --bottom-shadow: 0 0.0625rem 0 0 var(--stable-light, #f1f1f1);
   --center-padding: 0 var(--spacing-16, 1rem);
   --flex-safe-area: var(--safe-area-inset-top);
+  --center-display: flex;
   z-index: 10;
   display: block;
   width: 100%;
@@ -247,8 +248,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 
 :host(.web.grid.form) .outer-container .top-container {
-  padding: 0;
-  padding-bottom: var(--spacing-08, 0.5rem);
+  padding: 0 0 var(--spacing-08, 0.5rem);
 }
 
 :host(.web.grid) .outer-container .top-container {
@@ -340,17 +340,18 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 
 :host([grid]) .top-container {
   display: grid;
+  grid-template-columns: var(--top-container-grid-template-columns);
 }
 :host([grid]) .end-container {
   justify-content: flex-end;
 }
 
-:host([grid][center-title]) .top-container {
-  grid-template-columns: repeat(3, 1fr);
+:host([grid][center-title]) {
+  --top-container-grid-template-columns: repeat(3, 1fr);
 }
 
-:host([grid]:not([center-title])) .top-container {
-  grid-template-columns: auto auto 1fr;
+:host([grid]:not([center-title])) {
+  --top-container-grid-template-columns: auto auto 1fr;
 }
 
 :host(.full-width) .top-container .start-container {
@@ -388,7 +389,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   align-items: center;
 }
 .top-container .center-container {
-  display: flex;
+  display: var(--center-display);
   flex: 1;
   flex-direction: row;
   align-items: center;

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

@@ -26,7 +26,7 @@ export class YooNavbarComponent {
       this.host.classList.add(backgroundClass);
       this.host.classList.remove(this.backgroundClass);
       const navButtons = Array.from(this.host.querySelectorAll('yoo-button'));
-      navButtons.forEach(button => button.color = button.color === this.buttonColor ? buttonColor : button.color);
+      navButtons.forEach((button) => (button.color = button.color === this.buttonColor ? buttonColor : button.color));
       this.backgroundClass = backgroundClass;
       this.buttonColor = buttonColor;
     }

package/dist/collection/components/1.atoms/progress-bar/progress-bar.css

@@ -253,7 +253,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   overflow: unset;
 }
 :host([shape=line]) svg:not(.has-markers) {
-  height: 0.25rem;
+  height: var(--spacing-04, 0.25rem);
 }
 :host([shape=line]) svg:not(.has-markers) line {
   stroke-width: var(--stroke-width-line);
@@ -262,8 +262,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   max-height: 10vh;
 }
 :host([shape=line]) svg.has-markers .marker {
-  font-size: 0.25rem;
-  transform: translateX(-0.5rem);
+  font-size: var(--spacing-04, 0.25rem);
+  transform: translateX(calc(var(--spacing-08, 0.5rem) * -1));
 }
 :host([shape=line]) span {
   width: 100%;
@@ -320,7 +320,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 
 :host([shape=semi-circle]) {
-  --progress-value-tsy: calc(-50% + .5rem);
+  --progress-value-tsy: calc(-50% + var(--spacing-08, 0.5rem));
 }
 
 :host([metric=points]) {
@@ -328,6 +328,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --trail-bar-display: none;
 }
 
-:host(.app-color) {
+:host([metric=step]) {
   --progress-bar-color: var(--app-color, #5a30f4);
 }

package/dist/collection/components/1.atoms/progress-bar/progress-bar.js

@@ -1,6 +1,6 @@
 import { gsapFromTo, isAnimationsDisabled, Linear } from '@shared/utils';
 import { Component, Element, Event, h, Host, Prop, Watch } from '@stencil/core';
-import { clamp, debounce, isFinite, isNull } from 'lodash-es';
+import { clamp, debounce, isFinite } from 'lodash-es';
 import { DEFAULT_COLOR_THRESHOLDS, DEFAULT_SHAPES } from './progress-bar.constants';
 export class YooProgressBarComponent {
   constructor() {
@@ -73,10 +73,6 @@ export class YooProgressBarComponent {
      * This property allow to display a number of decimal after the coma in the progress value display
      */
     this.numberDecimalAfterComaProgressValue = 0;
-    /**
-     * Used to modify the speed of the progress animation (in ms)
-     */
-    this.progressAnimationDuration = !this.isAnimated ? 0 : 1.25;
   }
   onProgressAnimationDurationChanged() {
     this.setProgress();
@@ -84,16 +80,6 @@ export class YooProgressBarComponent {
   onProgressValueChanged(_, currentValue) {
     this.setProgress(currentValue);
   }
-  onCurrentStepChanged(_, currentStep) {
-    this.setProgress(currentStep);
-  }
-  componentDidLoad() {
-    if (this.progressSVGElement) {
-      this.resizeListener = debounce(this.initProgressBar, 750).bind(this);
-      window.addEventListener('resize', this.resizeListener);
-      this.initProgressBar();
-    }
-  }
   get isAnimated() {
     return this.animated && !isAnimationsDisabled();
   }
@@ -116,6 +102,16 @@ export class YooProgressBarComponent {
     var _a;
     return this.isShape.line && !!((_a = this.markers) === null || _a === void 0 ? void 0 : _a.length);
   }
+  componentWillLoad() {
+    this.progressAnimationDuration = !this.isAnimated ? 0 : 1.25;
+  }
+  componentDidLoad() {
+    if (this.progressSVGElement) {
+      this.resizeListener = debounce(this.initProgressBar, 750).bind(this);
+      window.addEventListener('resize', this.resizeListener);
+      this.initProgressBar();
+    }
+  }
   initProgressBar() {
     if (this.progressSVGElement) {
       this.initSVGPaths();
@@ -143,13 +139,18 @@ export class YooProgressBarComponent {
   }
   setProgress(currentProgress = 0) {
     if (this.progressSVGElement) {
-      const toProgress = clamp(this.getValue(), 0, 100);
+      const getProgress = (progress = this.value) => {
+        const currentProgress = progress || 0;
+        const newProgress = this.maxValue ? (currentProgress / this.maxValue) * 100 : currentProgress;
+        return clamp(newProgress, 0, 100);
+      };
+      const getProgressPathLength = (progress = 0) => Math.round(progressBarElement.getTotalLength() * (1 - progress / 100)).toString();
+      const toProgress = getProgress();
       const progressBarElement = this.host.shadowRoot.querySelector('#progress');
       const valueElement = this.host.shadowRoot.querySelector('#value');
-      const fromProgress = currentProgress >= 0 ? clamp(this.getValue(currentProgress), 0, 100) : toProgress;
+      const fromProgress = this.disableBackProgressAnimation ? toProgress : getProgress(currentProgress);
       const decimalCoeff = Math.pow(10, this.numberDecimalAfterComaProgressValue);
-      const getProgressPathLength = (progress) => Math.round(progressBarElement.getTotalLength() * (1 - progress / 100)).toString();
-      !this.isShape.line && (progressBarElement.style.strokeDasharray = getProgressPathLength(0));
+      !this.isShape.line && (progressBarElement.style.strokeDasharray = getProgressPathLength());
       const animateProgressValue = (progress) => {
         progress = Math.round(progress * 100) / 100;
         let timelineProgressValue = Math.round((((this.isMetric.percentage ? toProgress : this.value) - fromProgress) * progress + fromProgress) * decimalCoeff) / decimalCoeff || 0;
@@ -174,7 +175,7 @@ export class YooProgressBarComponent {
       const fromAnimation = {
         attr: { x2: `${fromProgress}%` },
         ...(!this.isShape.line && {
-          strokeDashoffset: this.disableBackProgressAnimation ? getProgressPathLength(0) : getProgressPathLength(fromProgress)
+          strokeDashoffset: this.disableBackProgressAnimation ? getProgressPathLength() : getProgressPathLength(fromProgress)
         }),
         ...(this.disableBackProgressAnimation && {
           stroke: this.getProgressColor(0)
@@ -201,24 +202,11 @@ export class YooProgressBarComponent {
       progressBarElement && isFinite(toProgress) && isFinite(fromProgress) && gsapFromTo(progressBarElement, this.isAnimated ? this.progressAnimationDuration : 0, fromAnimation, toAnimation);
     }
   }
-  getValue(progress) {
-    let currentProgress = progress >= 0 && !isNull(progress) ? progress : this.value || 0;
-    if (this.isMetric.step && !!this.maxStep) {
-      currentProgress = progress >= 0 ? progress : this.currentStep;
-      return (currentProgress / this.maxStep) * 100;
-    }
-    else if (isFinite(this.maxValue) && !!this.maxValue) {
-      return (currentProgress / this.maxValue) * 100;
-    }
-    else {
-      return currentProgress;
-    }
-  }
   getLabelledValue(progress) {
     progress = progress !== null && progress !== void 0 ? progress : ((isFinite(this.maxValue) && this.maxValue) ? (this.value / this.maxValue) * 100 : this.value || 0);
     if (!this.hideProgressValue) {
       if (this.isMetric.step) {
-        return `${this.currentStep}/${this.maxStep}`;
+        return `${this.value}/${this.maxValue}`;
       }
       else {
         return this.allowNonAvailableValue && !isFinite(progress) ? '-' : [progress, this.getUnit(progress)].join('');
@@ -516,23 +504,6 @@ export class YooProgressBarComponent {
       "attribute": "max-value",
       "reflect": false
     },
-    "maxStep": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Before setting this property, ensure that the metric is set to 'step'\nDefine the total number of step to display X/Y (Y)"
-      },
-      "attribute": "max-step",
-      "reflect": false
-    },
     "hideProgressValue": {
       "type": "boolean",
       "mutable": false,
@@ -625,7 +596,7 @@ export class YooProgressBarComponent {
     },
     "progressAnimationDuration": {
       "type": "number",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "number",
         "resolved": "number",
@@ -638,8 +609,7 @@ export class YooProgressBarComponent {
         "text": "Used to modify the speed of the progress animation (in ms)"
       },
       "attribute": "progress-animation-duration",
-      "reflect": false,
-      "defaultValue": "!this.isAnimated ? 0 : 1.25"
+      "reflect": false
     },
     "value": {
       "type": "number",
@@ -657,23 +627,6 @@ export class YooProgressBarComponent {
       },
       "attribute": "value",
       "reflect": false
-    },
-    "currentStep": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Before setting this property, ensure that the metric is set to 'step'\nDefine the current step to display X/Y (X)"
-      },
-      "attribute": "current-step",
-      "reflect": false
     }
   }; }
   static get events() { return [{
@@ -714,8 +667,5 @@ export class YooProgressBarComponent {
     }, {
       "propName": "value",
       "methodName": "onProgressValueChanged"
-    }, {
-      "propName": "currentStep",
-      "methodName": "onCurrentStepChanged"
     }]; }
 }

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

@@ -240,7 +240,7 @@ export class YooRangeComponent {
     const values = Array.from({ length: this.max - this.min + 1 }, (_, i) => this.min + i).filter(v => !(v % this.step));
     return (this.ticks || this.ticksLabels) && values.map(v => {
       const showTickLabel = filterPattern(v);
-      return (this.ticks || showTickLabel) && h("div", { class: { 'tick': true, 'hidden': !this.ticks }, style: { [start]: `${this.valueToRatio(v) * 100}%` }, ...(this.ticksLabels && showTickLabel && { i: v }) });
+      return (this.ticks || showTickLabel) && h("div", { class: { tick: true, hidden: !this.ticks }, style: { [start]: `${this.valueToRatio(v) * 100}%` }, ...(this.ticksLabels && showTickLabel && { i: v }) });
     });
   }
   renderBar(start, end) {

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

@@ -203,7 +203,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* shadow */
 :host {
   --justify-tabs: flex-start;
-  --height-tabs: 2.5rem;
+  --height-tabs: var(--spacing-40, 2.5rem);
   --opacity-tabs: 1;
   --active-tab-background: none;
   --active-text-color: var(--text-color, #807f83);
@@ -380,16 +380,15 @@ yoo-tag {
 yoo-badge.margin-right {
   margin-right: var(--spacing-08, 0.5rem);
 }
+yoo-badge[shape=dot] {
+  align-self: flex-start;
+}
 
 yoo-badge:not([shape=dot]),
 yoo-tag {
   align-self: center;
 }
 
-yoo-badge[shape=dot] {
-  align-self: flex-start;
-}
-
 .outer-container {
   position: relative;
   height: var(--height-tabs);
@@ -404,6 +403,7 @@ yoo-badge[shape=dot] {
   box-sizing: border-box;
   width: 100%;
   height: 2.5rem;
+  height: var(--height-tabs);
   padding: var(--spacing-08, 0.5rem);
   color: var(--dark, #000000);
   text-align: left;
@@ -411,6 +411,9 @@ 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%;
 }
@@ -428,18 +431,16 @@ yoo-badge[shape=dot] {
   width: 100%;
 }
 .outer-container-vertical .tab-container .tab-title.plus-one {
-  width: calc(100% - 2rem);
+  width: calc(100% - var(--spacing-32, 2rem));
 }
 .outer-container-vertical .tab-container .tab-title.sandwich {
-  width: calc(100% - 4rem);
+  width: calc(100% - var(--spacing-64, 4rem));
 }
 .outer-container-vertical .tab-container + .tab-container {
   margin-top: var(--vertical-tab-gap);
 }
 .outer-container-vertical .tab-description {
-  padding-right: var(--spacing-16, 1rem);
-  padding-bottom: var(--spacing-08, 0.5rem);
-  padding-left: var(--spacing-32, 2rem);
+  padding: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
   color: var(--text-color);
   font-size: var(--font-size-14, 0.875rem);
   border-bottom: var(--tab-border-width) solid var(--tab-border-color);
@@ -485,21 +486,25 @@ yoo-badge[shape=dot] {
   color: var(--app-color, #5a30f4);
 }
 
-:host(.community-editor) .tab-container {
-  padding-bottom: 0px;
+:host(.tabs-padding-top) .outer-container-vertical {
+  padding-top: 4rem;
+}
+
+:host(.big-tabs) .tab-container {
+  padding-bottom: 0;
   border: none;
   transition: color 0.3s ease;
 }
-:host(.community-editor) .tab-container:not(.active) {
+:host(.big-tabs) .tab-container:not(.active) {
   padding-bottom: var(--spacing-08, 0.5rem);
   border-bottom: var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);
 }
-:host(.community-editor) .tab-container.active {
+:host(.big-tabs) .tab-container.active {
   background-color: transparent;
 }
-:host(.community-editor) .tab-container + .tab-container {
+:host(.big-tabs) .tab-container + .tab-container {
   margin: 0;
 }
-:host(.community-editor) .tab-description {
+:host(.big-tabs) .tab-description {
   border-bottom: var(--tab-border-width) solid var(--active-tab-border-color);
 }

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

@@ -123,7 +123,7 @@ export class YooTabsComponent {
                 : this.isEditable && this.editableOptions && this.tabs.length > index || icon
                   ? 'plus-one'
                   : ''}` },
-              h("yoo-truncated-line", { tooltipPlacement: "right", content: translateMulti(tab.title) }))
+              h("yoo-truncated-line", { tooltipPlacement: "auto", 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" }))),
@@ -167,7 +167,7 @@ export class YooTabsComponent {
       "mutable": false,
       "complexType": {
         "original": "ITab[]",
-        "resolved": "ITab[]",
+        "resolved": "ITab<string>[]",
         "references": {
           "ITab": {
             "location": "import",
@@ -262,7 +262,7 @@ export class YooTabsComponent {
       "mutable": false,
       "complexType": {
         "original": "ITab[]",
-        "resolved": "ITab[]",
+        "resolved": "ITab<string>[]",
         "references": {
           "ITab": {
             "location": "import",

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

@@ -82,7 +82,7 @@ export class YooTabsSlidesComponent {
       "mutable": false,
       "complexType": {
         "original": "ITab[]",
-        "resolved": "ITab[]",
+        "resolved": "ITab<string>[]",
         "references": {
           "ITab": {
             "location": "import",

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

@@ -26,10 +26,6 @@ export class YooTooltipComponent {
      * This props set the maxwidth of the tooltip content, from 0 to 1
      */
     this.coeffMaxWidth = 0.8;
-    /**
-     * Size.
-     */
-    this.size = 'small';
     /**
      * This prop will check whether the tooltip refers to requesting access
      */
@@ -81,6 +77,10 @@ export class YooTooltipComponent {
       this.saveTooltip.emit({ value: (_a = this.contentEditableElement) === null || _a === void 0 ? void 0 : _a.innerHTML, refTooltip: reference });
     }
   }
+  async toggleHoverable(isEnable = !this.hoverable) {
+    this.hoverable = isEnable;
+    this.reconfigureTooltip();
+  }
   onEditableChanged(newState, oldState) {
     this.hasModeChanged = newState !== oldState;
   }
@@ -90,9 +90,8 @@ export class YooTooltipComponent {
     }
   }
   onTextChange() {
-    var _a, _b;
-    if (!((_a = this.tippyInstance) === null || _a === void 0 ? void 0 : _a.state.isDestroyed) && !this.requestAccess) {
-      this.editable ? this.contentEditableElement.innerHTML = this.content : (_b = this.tippyInstance) === null || _b === void 0 ? void 0 : _b.setContent(this.content);
+    if (this.tippyInstance && !this.tippyInstance.state.isDestroyed && !this.requestAccess) {
+      this.editable ? this.contentEditableElement.innerHTML = this.content : this.tippyInstance.setContent(this.content);
     }
     else {
       this.configureTooltip();
@@ -106,6 +105,7 @@ export class YooTooltipComponent {
   }
   connectedCallback() {
     const isweb = isWeb(this.host);
+    this.size = this.size || isweb ? 'medium' : 'large';
     if (isNullOrUndefined(this.clickable)) {
       this.clickable = !isweb;
     }
@@ -201,7 +201,7 @@ export class YooTooltipComponent {
     let dynamicOptions = Object.assign(defaultOption, {
       trigger: this.hoverable ? 'mouseenter focus' : this.clickable ? 'click' : '',
       theme: `${this.name} ${this.theme} ${this.size}`,
-      maxWidth: window.innerWidth * this.coeffMaxWidth,
+      maxWidth: this.maxWidth || window.innerWidth * this.coeffMaxWidth,
       placement: this.placement,
       showOnCreate: this.showOnCreate,
       hideOnClick: this.hideOnClick,
@@ -462,6 +462,23 @@ export class YooTooltipComponent {
       "reflect": false,
       "defaultValue": "0.8"
     },
+    "maxWidth": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "max-width",
+      "reflect": false
+    },
     "hoverable": {
       "type": "boolean",
       "mutable": true,
@@ -518,10 +535,10 @@ export class YooTooltipComponent {
     },
     "size": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
-        "original": "'small' | 'large'",
-        "resolved": "\"large\" | \"small\"",
+        "original": "'small' | 'medium' | 'large'",
+        "resolved": "\"large\" | \"medium\" | \"small\"",
         "references": {}
       },
       "required": false,
@@ -531,8 +548,7 @@ export class YooTooltipComponent {
         "text": "Size."
       },
       "attribute": "size",
-      "reflect": true,
-      "defaultValue": "'small'"
+      "reflect": true
     },
     "requestAccess": {
       "type": "boolean",
@@ -797,6 +813,25 @@ export class YooTooltipComponent {
         "text": "",
         "tags": []
       }
+    },
+    "toggleHoverable": {
+      "complexType": {
+        "signature": "(isEnable?: boolean) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
     }
   }; }
   static get elementRef() { return "host"; }

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

@@ -1,7 +1,3 @@
-/**
- * @name: Truncate
- * @author: Romain Panaget
- */
 import { debounce, parseMarkDown, translate, truncateMarkdown } from '@shared/utils';
 import { Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';
 import { querySelectorDeep } from '../../../utils/helpers/common-helpers';
@@ -35,6 +31,7 @@ export class YooTruncateComponent {
      * Used more icon instead of text as ellipsis button.
      */
     this.showEllipsisIcon = false;
+    this.ellipsisIconSize = 'small';
     /**
      * Alters how the <br> tag is handled for markdown
      */
@@ -56,7 +53,7 @@ export class YooTruncateComponent {
       return `<span class="more-button"> ${this.collapsed ? `... ${translate('MORE2')}` : translate('VIEWLESS')}</span>`;
     };
     this.getMoreIconHtml = () => {
-      return `<span><span>${this.collapsed ? '...' : ''}</span><yoo-icon class="more-button" name=${this.collapsed ? 'arrow-down' : 'arrow-up'} size="small" /></span>`;
+      return `<span><span>${this.collapsed ? '...' : ''}</span><yoo-icon class="more-button" name=${this.collapsed ? 'arrow-down' : 'arrow-up'} size="${this.ellipsisIconSize}" /></span>`;
     };
   }
   onShowEllipsisButtonChanged() {
@@ -253,6 +250,29 @@ export class YooTruncateComponent {
       "reflect": true,
       "defaultValue": "false"
     },
+    "ellipsisIconSize": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "TSize",
+        "resolved": "\"extra-extra-large\" | \"extra-large\" | \"extra-small\" | \"large\" | \"medium\" | \"small\"",
+        "references": {
+          "TSize": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "ellipsis-icon-size",
+      "reflect": false,
+      "defaultValue": "'small'"
+    },
     "content": {
       "type": "string",
       "mutable": false,