@yoobic/yobi 8.3.3 → 8.4.0-0

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

@@ -1,229 +1,111 @@
-import { Draggable, findParent, getCssColor, gsapSet, gsapTimeline, gsapTo, translateMulti } from '@shared/utils';
-import { Component, Element, Event, h, Host, Prop, Watch } from '@stencil/core';
-import { getAppContext } from '../../../utils/helpers/common-helpers';
-import { checkArray } from '../../../utils/helpers/draggable-tags-helpers';
+import { Draggable, gsapSet, gsapTimeline, gsapTo, translateMulti } from '@shared/utils';
+import { Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';
+import { clamp } from 'lodash-es';
 import { setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
 export class YooFormRankingComponent {
   constructor() {
     this.isVisible = false;
     this.sortables = [];
-    this.preventInit = false; // helps prevent init() when mutating this.value
-    this.itemElements = [];
-  }
-  onModalAnimationFinished(iaf) {
-    if (iaf && this.isInModal) {
-      this.initRanking();
-    }
   }
   onIsVisibleChanged() {
-    if (this.isVisible) {
-      this.initRanking();
-    }
+    this.isVisible && this.init();
   }
-  componentDidLoad() {
-    this.initRanking();
+  onModalAnimationFinished() {
+    this.isAnimationFinished && this.init();
   }
-  componentDidUpdate() {
-    if (this.preventInit) {
-      this.preventInit = false;
-    }
-    else {
-      this.initRanking();
-    }
+  get itemElements() {
+    var _a;
+    return Array.from((_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('li')) || [];
   }
   validate() {
-    let isValid = true;
-    let isCompleted = true;
-    if (this.answers && this.answers.length) {
-      isCompleted = this.value.length === this.answers.length;
-    }
-    if (this.required && !isCompleted) {
-      isValid = false;
-    }
-    if (!this.validity || this.validity !== isValid) {
-      this.validityChanged.emit(isValid);
-      this.validity = isValid;
-    }
-    return this.validity;
-  }
-  get isInModal() {
-    return !!findParent(this.host, 'yoo-ion-modal');
-  }
-  get listItems() {
     var _a;
-    return Array.from((_a = this.outerContainerElement) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.list-item')) || [];
-  }
-  initRanking() {
-    if (this.outerContainerElement) {
-      this.prepareItems();
-      this.calculAbsoluteListHeight();
-    }
-  }
-  calculAbsoluteListHeight() {
-    if (this.outerContainerElement) {
-      const fittedHeight = this.listItems.reduce((acc, el) => (acc += el.clientHeight), 0);
-      this.outerContainerElement.style.height = `${fittedHeight}px`;
-    }
-  }
-  prepareItems() {
-    this.calcAndShowTags(this.listItems);
-    if (!this.readonly) {
-      Promise.all(this.listItems
-        .map((element, index) => {
-        return { index, element, value: this.values[index] };
-      })
-        .map((sortable, index) => this.setSortable(sortable.element, index)))
-        .then((sortables) => {
-        this.sortables = sortables;
-        this.sortables.forEach((s, i) => this.setItemPosition(s.element, i));
-      });
-    }
-    else {
-      this.listItems.forEach((el, index) => this.setItemPosition(el, index));
-    }
-  }
-  /**
-   * Get vertical position of the item element in the list by given index.
-   * Elements height can vary.
-   */
-  getListItemPosition(index) {
-    return this.listItems.slice(0, index).reduce((acc, el) => (acc += el.clientHeight), 0);
-  }
-  updateAnswer() {
-    this.preventInit = true;
-    this.value = this.sortables.sort((a, b) => a.index - b.index).map((sortable) => sortable.value);
-    setValueAndValidateInput(this.value, this);
-  }
-  calcAndShowTags(listItems) {
-    listItems.forEach((element, index) => {
-      this.setBadgeValue(element.querySelector('yoo-badge'), index);
-    });
+    this.validity = !!((_a = this.value) === null || _a === void 0 ? void 0 : _a.length);
+    this.validityChanged.emit(this.validity);
+    return this.validity;
   }
-  setBadgeValue(badgeElement, index) {
-    badgeElement.text = (index + 1).toString();
+  componentDidLoad() {
+    this.init();
   }
-  changeIndex(item, to) {
-    // Change position in array
-    this.arrayMove(this.sortables, item.index, to);
-    // Change element's position in DOM. Not always necessary. Just showing how.
-    if (to === this.listItems.length - 1) {
-      this.outerContainerElement.appendChild(item.element);
-    }
-    else {
-      const i = item.index > to ? to : to + 1;
-      this.outerContainerElement.insertBefore(item.element, this.outerContainerElement.children[i]);
-    }
-    // Set index for each sortable
-    this.sortables.forEach((sortable, index) => sortable.setIndex(index));
+  async init() {
+    await this.prepareItems();
+    const fittedHeight = this.itemElements.reduce((acc, el) => (acc += el.clientHeight), 0);
+    this.host.style.height = `${fittedHeight + 24}px`;
   }
-  layout(element, index) {
-    const itemPosition = this.sortables.slice(0, index).reduce((acc, el) => (acc += el.element.clientHeight), 0);
-    element && gsapTo(element, 0.3, { y: itemPosition });
+  async prepareItems() {
+    !this.readonly && (this.sortables = await Promise.all(this.itemElements.map(element => element && this.initDraggable(element))));
+    this.itemElements.forEach((element, index) => gsapSet(element, { y: this.itemElements.slice(0, index).reduce((acc, el) => (acc += el.clientHeight), 0) }));
   }
-  /**
-   * This function apply sortable ability to element.
-   * All necessary logic is encapsulated in this function
-   * and can be moved into separate class and reused somewhere else.
-   */
-  setSortable(itemElement, index) {
-    if (itemElement) {
-      let dragger = {};
-      let sortable = {};
-      const contentElement = itemElement.querySelector('.item-content');
-      const valueElement = itemElement.querySelector('.value');
-      const badgeElement = itemElement.querySelector('yoo-badge');
-      const draggableTriggerIcon = itemElement.querySelector('yoo-icon');
-      draggableTriggerIcon.style.height = `${valueElement.clientHeight}px`;
-      return gsapTimeline().then((timeline) => {
-        if (timeline) {
-          const animation = timeline({
-            boxShadow: getCssColor('shadow-03'),
-            force3D: true,
-            paused: true
-          });
-          const onPressItem = () => {
-            animation.play().then(() => {
-              this.sortables.forEach((s) => {
-                if (s.element) {
-                  const badge = s.element.querySelector('yoo-badge');
-                  badge.color = 'app-color';
-                }
-              });
-            });
-          };
-          const onDragItem = (scope) => {
-            this.listItems.forEach((item) => {
-              if (scope.hitTest(item, '50%')) {
-                const currentIndex = this.clamp(this.sortables.find((s) => s.element === item).index);
-                if (currentIndex !== sortable.index) {
-                  this.changeIndex(sortable, currentIndex);
-                }
-              }
-            });
-          };
-          const onReleaseItem = () => {
-            animation.reverse();
-            this.layout(itemElement, sortable.index);
-            this.updateAnswer();
-          };
-          dragger = new Draggable(itemElement, {
-            type: 'y',
-            trigger: draggableTriggerIcon,
-            onPress: onPressItem,
-            onRelease: onReleaseItem,
-            onDrag() { onDragItem(this); }
-          });
+  async initDraggable(element) {
+    let sortable = {};
+    const value = this.values.find(value => translateMulti(value) === element.firstElementChild.textContent);
+    const animation = (await gsapTimeline())({ force3D: true, paused: true });
+    const layout = async () => {
+      const itemPosition = this.sortables.slice(0, sortable.index).reduce((acc, { element }) => (acc += element.clientHeight), 0);
+      element && gsapTo(element, .25, { y: itemPosition });
+    };
+    const changeIndex = (to) => {
+      const { element, index } = sortable || {};
+      if (to !== index) {
+        this.sortables.splice(to, 0, this.sortables.splice(index, 1)[0]);
+        if (to === this.itemElements.length - 1) {
+          this.listElement.appendChild(element);
+        }
+        else {
+          const i = index > to ? to : to + 1;
+          this.listElement.insertBefore(element, this.listElement.children[i]);
         }
-        const setItemIndex = (i) => {
-          sortable.index = i;
-          this.setBadgeValue(badgeElement, i);
-          if (!dragger.isDragging) {
-            this.layout(itemElement, sortable.index);
+        this.sortables.forEach((sortable, index) => sortable.setIndex(index));
+      }
+    };
+    if (animation) {
+      const onDragItem = (scope) => {
+        this.itemElements.forEach(itemElement => {
+          if (scope.hitTest(itemElement, '50%')) {
+            changeIndex(clamp(this.sortables.find(({ element }) => element === itemElement).index, 0, this.itemElements.length - 1));
           }
-        };
-        sortable = {
-          dragger: dragger,
-          element: itemElement,
-          index: index,
-          value: this.values.find((value) => translateMulti(value) === contentElement.querySelector('.value').textContent),
-          setIndex: setItemIndex
-        };
-        return sortable;
+        });
+      };
+      const onReleaseItem = async () => {
+        await animation.reverse();
+        await layout();
+        this.isDragging = false;
+        this.value = this.sortables.sort((a, b) => a.index - b.index).map(({ value }) => value);
+        setValueAndValidateInput(this.value, this);
+        element.classList.remove('active');
+      };
+      const dragger = new Draggable(element, {
+        type: 'y',
+        trigger: element.querySelector('yoo-icon'),
+        onPress: () => element.classList.add('active'),
+        onDragStart: () => this.isDragging = true,
+        onRelease: onReleaseItem,
+        onDrag() { onDragItem(this); }
       });
+      const setIndex = async (i) => {
+        sortable.index = i;
+        element.querySelector('yoo-badge').text = (i + 1).toString();
+        !dragger.isDragging && await layout();
+      };
+      sortable = { dragger, element, index: this.itemElements.indexOf(element), value, setIndex };
     }
-  }
-  setItemPosition(element, index) {
-    gsapSet(element, { y: this.getListItemPosition(index) });
-  }
-  arrayMove(array, from, to) {
-    // changes an elements's position in array
-    array.splice(to, 0, array.splice(from, 1)[0]);
-  }
-  clamp(value) {
-    // clamps a value to a min/max
-    const maxIndex = this.listItems.length - 1;
-    return value < 0 ? 0 : value > maxIndex ? maxIndex : value;
-  }
-  getCorrectionColor(value) {
-    if (checkArray(this.value) && checkArray(this.answers)) {
-      const isCorrect = this.value.indexOf(value) === this.answers.indexOf(value);
-      return isCorrect ? 'success' : 'danger';
-    }
+    return sortable;
   }
   renderItem(value, index) {
-    var _a;
-    const badgeColor = this.readonly ? this.getCorrectionColor(value) : `app-color${((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) ? '' : '-60'}`;
-    const text = this.readonly ? (index + 1).toString() : '';
-    return (h("div", { class: "list-item", ref: (el) => (this.itemElements[index] = el) },
-      h("div", { class: "item-content" },
-        h("yoo-badge", { color: badgeColor, size: "small", text: text }),
+    var _a, _b, _c;
+    const readonlyColor = (((_a = this.value) === null || _a === void 0 ? void 0 : _a.indexOf(value)) === ((_b = this.answers) === null || _b === void 0 ? void 0 : _b.indexOf(value))) ? 'success' : 'danger';
+    const badgeColor = this.readonly ? readonlyColor : `app-color${!this.isDragging && ((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) ? '' : '-60'}`;
+    return h("li", null,
+      h("div", null,
+        h("yoo-badge", { color: badgeColor, size: "small", text: `${index + 1}` }),
         h("div", { class: "value" }, translateMulti(value)),
-        !this.readonly && h("yoo-icon", { name: "ranking-toggle", color: "stable" }))));
+        !this.readonly && h("yoo-icon", { name: "ranking-toggle", color: "stable" })));
+  }
+  renderList() {
+    var _a;
+    return h("ul", { ref: el => this.listElement = el }, (_a = (this.readonly ? this.value : this.values)) === null || _a === void 0 ? void 0 : _a.map((value, index) => this.renderItem(value, index)));
   }
   render() {
-    const values = this.readonly ? this.value : this.values;
-    return (!!(values === null || values === void 0 ? void 0 : values.length) && (h(Host, { class: getAppContext(this.host) },
-      h("div", { class: "outer-container", ref: (el) => (this.outerContainerElement = el) }, values.map((value, index) => this.renderItem(value, index))))));
+    return h(Host, null, this.renderList());
   }
   static get is() { return "yoo-form-ranking"; }
   static get encapsulation() { return "shadow"; }
@@ -366,6 +248,9 @@ export class YooFormRankingComponent {
       "reflect": false
     }
   }; }
+  static get states() { return {
+    "isDragging": {}
+  }; }
   static get events() { return [{
       "method": "validityChanged",
       "name": "validityChanged",
@@ -399,10 +284,10 @@ export class YooFormRankingComponent {
     }]; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
-      "propName": "isAnimationFinished",
-      "methodName": "onModalAnimationFinished"
-    }, {
       "propName": "isVisible",
       "methodName": "onIsVisibleChanged"
+    }, {
+      "propName": "isAnimationFinished",
+      "methodName": "onModalAnimationFinished"
     }]; }
 }

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

@@ -356,7 +356,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   align-items: center;
   justify-content: center;
   height: 100%;
-  max-height: calc(min(65vw, 16rem) * 1.3333333333 - var(--spacing-40, 2.5rem));
+  max-height: calc(min(65vw, 16rem) * 1.3333333333);
   background-color: var(--dark, #000000);
   transition: background-color 0.25s ease-in-out;
 }
@@ -393,7 +393,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   top: 0;
   left: 50%;
   max-width: min(65vw, 16rem);
-  max-height: calc(min(65vw, 16rem) * 1.3333333333 - var(--spacing-40, 2.5rem));
+  max-height: calc(min(65vw, 16rem) * 1.3333333333);
   margin-top: var(--spacing-16, 1rem);
   transform: translateX(-50%);
 }
@@ -424,18 +424,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host(:not([readonly])) #cards .card.current:not(.revealing) {
   transform: translate(0%, 9%) scale(1);
   opacity: 1;
-  transition-delay: 0.25s;
-}
-:host(:not([readonly])) #cards .card.current.revealing {
-  animation: "current" 0.25s ease-in-out;
-  animation-delay: 150ms;
-  animation-fill-mode: forwards;
-}
-@keyframes current {
-  to {
-    transform: translate(0%, 9%) scale(1);
-    opacity: 1;
-  }
 }
 :host(:not([readonly])) #cards .card.second {
   z-index: 2;
@@ -443,18 +431,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host(:not([readonly])) #cards .card.second:not(.revealing) {
   transform: translate(0%, 3.5%) scale(0.95);
   opacity: 1;
-  transition-delay: 0.5s;
-}
-:host(:not([readonly])) #cards .card.second.revealing {
-  animation: "second" 0.25s ease-in-out;
-  animation-delay: 300ms;
-  animation-fill-mode: forwards;
-}
-@keyframes second {
-  to {
-    transform: translate(0%, 3.5%) scale(0.95);
-    opacity: 1;
-  }
 }
 :host(:not([readonly])) #cards .card.third {
   z-index: 1;
@@ -462,18 +438,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host(:not([readonly])) #cards .card.third:not(.revealing) {
   transform: translate(0%, -2%) scale(0.9);
   opacity: 1;
-  transition-delay: 0.75s;
-}
-:host(:not([readonly])) #cards .card.third.revealing {
-  animation: "third" 0.25s ease-in-out;
-  animation-delay: 450ms;
-  animation-fill-mode: forwards;
-}
-@keyframes third {
-  to {
-    transform: translate(0%, -2%) scale(0.9);
-    opacity: 1;
-  }
 }
 :host(:not([readonly])) #cards .card.current [class^=content],
 :host(:not([readonly])) #cards .card.current [class^=content]::after {
@@ -651,6 +615,48 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
     opacity: 1;
   }
 }
+:host([animated]) #game .card.current:not(.revealing) {
+  transition-delay: 0.25s;
+}
+:host([animated]) #game .card.current.revealing {
+  animation: "current" 0.25s ease-in-out;
+  animation-delay: 150ms;
+  animation-fill-mode: forwards;
+}
+@keyframes current {
+  to {
+    transform: translate(0%, 9%) scale(1);
+    opacity: 1;
+  }
+}
+:host([animated]) #game .card.second:not(.revealing) {
+  transition-delay: 0.5s;
+}
+:host([animated]) #game .card.second.revealing {
+  animation: "second" 0.25s ease-in-out;
+  animation-delay: 300ms;
+  animation-fill-mode: forwards;
+}
+@keyframes second {
+  to {
+    transform: translate(0%, 3.5%) scale(0.95);
+    opacity: 1;
+  }
+}
+:host([animated]) #game .card.third:not(.revealing) {
+  transition-delay: 0.75s;
+}
+:host([animated]) #game .card.third.revealing {
+  animation: "third" 0.25s ease-in-out;
+  animation-delay: 450ms;
+  animation-fill-mode: forwards;
+}
+@keyframes third {
+  to {
+    transform: translate(0%, -2%) scale(0.9);
+    opacity: 1;
+  }
+}
 :host([animated]) .action.hide > * {
   animation: fadeOut 0.75s ease-in-out forwards;
 }
@@ -711,7 +717,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 
 :host(.web:not([live-preview])[view=game]) main {
-  grid-template-rows: auto 100% 1fr;
+  grid-template-rows: auto 1fr;
 }
 :host(.web:not([live-preview])[view=game]) main #actions {
   top: 109%;
@@ -727,9 +733,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --inner-height: 5rem;
 }
 :host(.web:not([live-preview])[view=instructions]) yoo-button {
-  margin-right: 0;
+  margin-right: var(--spacing-16, 1rem);
   margin-left: auto;
-  padding-bottom: 0;
 }
 
 :host([view=instructions]) main {

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

@@ -269,6 +269,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   color: var(--textarea-font-color);
   line-height: normal;
   white-space: pre;
+  transition: height 0.5s ease-in-out;
   resize: none;
   font-family: var(--font-family, "Lato");
   -webkit-appearance: none;
@@ -304,6 +305,10 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   font-weight: var(--font-weight-400, 400);
   font-family: var(--font-family, "Lato") !important;
 }
+:host p.mention-container.padding,
+:host .outer-container textarea.padding {
+  padding: var(--spacing-16, 1rem) 0;
+}
 :host p.mention-container.invalid,
 :host .outer-container textarea.invalid {
   border-color: var(--danger, #d44333);
@@ -327,6 +332,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   color: var(--textarea-font-color);
   line-height: normal;
   white-space: pre;
+  transition: height 0.5s ease-in-out;
   resize: none;
   padding: 0.5rem 0.5rem 0 0;
   color: var(--dark, #000000);

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

@@ -6,6 +6,7 @@ import { getAppContext, sanitizeHTML } from '../../../utils/helpers/common-helpe
 import { onInputBlurred, onInputClear, onInputFocused, setValidator, setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
 import { fixParagraphRandomEl, getInsertElementProp, getTagHTML, isMentionTag, restoreCursorPosition, safeInsert, safeInsertElements, safeReplaceElement } from '../../../utils/helpers/form-text-area-helpers';
 const LINE_HEIGHT = 16;
+const PADDING = 16;
 export class YooFormTextAreaComponent {
   constructor() {
     this.validators = [];
@@ -140,9 +141,7 @@ export class YooFormTextAreaComponent {
       enableKeyboardResize();
     }
     if (this.autoInitialRows && this.inputEl) {
-      const scrollHeight = this.inputEl.scrollHeight;
-      const PADDING = 16;
-      const clientHeight = this.inputEl.clientHeight;
+      const { scrollHeight, clientHeight } = this.inputEl;
       if (clientHeight === scrollHeight) {
         this.rows = 1;
       }
@@ -150,12 +149,15 @@ export class YooFormTextAreaComponent {
         this.rows = Math.ceil(scrollHeight / (clientHeight - PADDING));
       }
     }
+    //Timeout here to wait until the content on the textarea get loaded and the textarea got its final size (to be refactored alongside with the component later on 
+    setTimeout(() => {
+      this.updateTextareaSize();
+    }, 1000);
     if (this.focusOnRendered) {
       this.setFocus();
     }
   }
   componentDidUpdate() {
-    this.updateRows();
     this.setTextareaMaxLengh();
   }
   disconnectedCallback() {
@@ -169,17 +171,21 @@ export class YooFormTextAreaComponent {
       this.inputEl.maxLength = this.maxCharacters;
     }
   }
+  updateTextareaSize() {
+    if (this.inputEl) {
+      this.inputEl.style.height = 'auto';
+      this.inputEl.style.height = `${this.inputEl.scrollHeight - PADDING}px`;
+    }
+  }
   onInputChanged() {
     var _a, _b;
     const value = this.inputEl && this.inputEl.value ? this.inputEl.value : null;
-    if (this.maxRows) {
-      this.updateRows();
-    }
     this.emitValueAndSetValidity(value, this, null, this.validateInput, false, ((_a = this.translationKey) === null || _a === void 0 ? void 0 : _a.length) > 0);
     if (((_b = this.translationKey) === null || _b === void 0 ? void 0 : _b.length) > 0) {
       this.translationValueUpdated.emit({ key: this.translationKey, value });
     }
     this.updateSegmentsCountDebounce();
+    this.updateTextareaSize();
   }
   onParagraphInputChanged(ev) {
     var _a;
@@ -320,15 +326,6 @@ export class YooFormTextAreaComponent {
       .map((node) => ({ id: node.dataset.id, content: node.dataset.description }));
     this.mentionsChanged.emit({ mentions: mentionIds });
   }
-  updateRows() {
-    if (!this.allowMention && !this.allowCustomInput && this.inputEl) {
-      let height = this.inputEl.scrollHeight - LINE_HEIGHT;
-      if (this.maxRows && height / LINE_HEIGHT > this.maxRows) {
-        height = this.maxRows * LINE_HEIGHT;
-      }
-      this.inputEl.style.height = height + 'px';
-    }
-  }
   getIconSize() {
     if (this.size === 'medium' || this.size === 'small') {
       return 'small';
@@ -391,7 +388,7 @@ export class YooFormTextAreaComponent {
     const maxRowsHeight = `${this.maxRows * LINE_HEIGHT}px`;
     const options = this.mentionFitMaxRows ? { style: { 'max-height': maxRowsHeight } } : {};
     return [
-      h("p", { class: { 'mention-container': true, 'fit-max-rows': this.mentionFitMaxRows }, ref: (el) => (this.inputEl = el), contenteditable: "true", tabIndex: 2, onInput: (ev) => this.onParagraphInputChanged(ev), onFocus: () => this.onInputFocused('p'), onBlur: (ev) => onInputBlurred(ev, this, 'p'), onKeyPress: (ev) => this.onKeyPressMention(ev), ...options })
+      h("p", { class: { 'mention-container': true, 'padding': this.disableInput, 'fit-max-rows': this.mentionFitMaxRows }, ref: (el) => (this.inputEl = el), contenteditable: this.disableInput ? 'false' : 'true', tabIndex: 2, onInput: (ev) => this.onParagraphInputChanged(ev), onFocus: () => this.onInputFocused('p'), onBlur: (ev) => onInputBlurred(ev, this, 'p'), onKeyPress: (ev) => this.onKeyPressMention(ev), ...options })
     ];
   }
   renderTextArea() {
@@ -932,6 +929,23 @@ export class YooFormTextAreaComponent {
         "text": ""
       }
     },
+    "disableInput": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Disable user to input on textarea"
+      },
+      "attribute": "disable-input",
+      "reflect": false
+    },
     "clearable": {
       "type": "boolean",
       "mutable": false,

package/dist/collection/components/form/links-preview/links-preview.css

@@ -204,9 +204,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host {
   position: relative;
   display: block;
-  color: var(--dark, #000000);
-  background: var(--stable-ultralight, #fafafa);
-  box-shadow: var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1));
   /**
      * Apply this only if there are several links to display, because the margin-botton must remains 0
      *  into the case of a card-feed that displays only the first available preview, and put a margin-bottom
@@ -217,6 +214,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   display: grid;
   align-items: center;
   box-sizing: border-box;
+  color: var(--dark, #000000);
+  background: var(--stable-ultralight, #fafafa);
+  box-shadow: var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1));
   cursor: pointer;
 }
 :host #preview #image-fallback {

package/dist/collection/components/form/scratch-card/scratch-card.css

@@ -203,9 +203,10 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* shadow */
 :host {
   position: relative;
-  display: block;
+  display: flex;
+  justify-content: center;
   width: 100%;
-  max-width: 25rem;
+  max-width: 100%;
   margin: 0 auto;
   border-radius: var(--border-radius-08, 0.5rem);
 }