@yoobic/yobi 8.4.0-1 → 8.4.0-4

package/dist/collection/components/form/form-missing-word/form-missing-word.js

@@ -21,19 +21,35 @@ export class YooFormMissingWordComponent {
     var _a;
     this.isVisible && ((_a = this.tags) === null || _a === void 0 ? void 0 : _a.animate());
   }
-  onAnswerChanged(nv, ov) {
+  onAnswerChanged(newValues, oldValues) {
     var _a;
-    if (!isEqual(nv, ov)) {
+    if (!isEqual(newValues, oldValues)) {
       showWarningBanner(this.host, !((_a = this.answer) === null || _a === void 0 ? void 0 : _a.length), 'NOMISSINGVALUES');
     }
   }
-  onValuesChanged(newValues, oldValues) {
+  async onValuesChanged(newValues, oldValues) {
     var _a;
     if (!isEqual(newValues, oldValues)) {
       this.showWarning();
-      (_a = this.tags) === null || _a === void 0 ? void 0 : _a.updateTags({ newValues, oldValues });
+      this.tags = await ((_a = this.tags) === null || _a === void 0 ? void 0 : _a.updateTags({ newValues, oldValues }));
+      this.value = this.droppedValues;
+    }
+  }
+  async isValid() {
+    return this.validity;
+  }
+  validate() {
+    var _a, _b;
+    if (checkArray(this.translatedAnswers)) {
+      this.validity = !this.required || ((_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.filter(v => v)) === null || _b === void 0 ? void 0 : _b.length) === this.translatedAnswers.length;
+      this.validityChanged.emit(this.validity);
+      return this.validity;
     }
   }
+  get droppedValues() {
+    var _a;
+    return (_a = this.tags.getDroppedValues(true)) === null || _a === void 0 ? void 0 : _a.map(droppedValues => this.values.find(value => droppedValues === translateMulti(value)));
+  }
   get isMatchingBrackets() {
     var _a;
     return !!((_a = this.translatedSentence.match(this.bracketsRegexp)) === null || _a === void 0 ? void 0 : _a.length);
@@ -51,40 +67,34 @@ export class YooFormMissingWordComponent {
       });
   }
   get zonesConfig() {
-    const getZoneConfig = (zoneType) => ({ hasOverflow: zoneType === 'tagZone', colorClass: 'light' });
+    const dropZoneConfig = { colorClass: 'light' };
     return {
       hostElement: this.host,
-      tagZoneConfig: getZoneConfig('tagZone'),
-      dropZoneConfig: getZoneConfig('dropZones')
+      tagZoneConfig: { ...dropZoneConfig, hasOverflow: true },
+      dropZoneConfig
     };
   }
   get tagConfig() {
+    const getColorTag = (tagValue) => {
+      if (this.readonly && checkArray(this.value) && this.answer) {
+        return this.value.indexOf(tagValue) === this.answer.indexOf(tagValue) ? 'success-20' : 'danger-20';
+      }
+      return 'app-color';
+    };
     const onReleaseTag = () => {
       this.tags.checkOverflowingTags();
-      this.value = this.tags.getDroppedValues(true)
-        .map(ua => this.values.find(v => ua === translateMulti(v)));
+      this.value = this.droppedValues;
       setValueAndValidateInput(this.value, this);
     };
     return {
       clickToDrop: true,
+      getColorTag,
       onFirstTagAnimationFinished: () => this.revealDropzones = true,
-      getColorTag: (v) => this.getColorTag(v),
       pressTagExtraAction: () => this.tags.setTagsZoneOverflow(false),
-      releaseTagExtraAction: () => onReleaseTag(),
-      resetTagExtraAction: () => onReleaseTag()
+      releaseTagExtraAction: onReleaseTag,
+      resetTagExtraAction: onReleaseTag
     };
   }
-  async isValid() {
-    return this.validity;
-  }
-  validate() {
-    var _a, _b;
-    if (checkArray(this.translatedAnswers)) {
-      this.validity = !this.required || ((_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.filter(v => v)) === null || _b === void 0 ? void 0 : _b.length) === this.translatedAnswers.length;
-      this.validityChanged.emit(this.validity);
-      return this.validity;
-    }
-  }
   componentWillLoad() {
     this.revealDropzones = this.livePreview;
   }
@@ -111,22 +121,6 @@ export class YooFormMissingWordComponent {
   initGame() {
     this.tags = initTags(this.tagConfig, this.zonesConfig);
   }
-  getColorTag(tagValue) {
-    if (this.readonly && checkArray(this.value) && this.answer) {
-      return this.value.indexOf(tagValue) === this.answer.indexOf(tagValue) ? 'success-20' : 'danger-20';
-    }
-    return 'app-color';
-  }
-  getZoneIndex(value) {
-    var _a;
-    if (value.match(this.bracketsRegexp)) {
-      return parseInt(value.match(this.bracketsRegexp)[1], 10);
-    }
-    else if ((_a = this.translatedAnswers) === null || _a === void 0 ? void 0 : _a.includes(value)) {
-      return this.translatedAnswers.indexOf(value);
-    }
-    return -1;
-  }
   renderInstructions() {
     return h("section", { id: "instructions" }, translate(this.placeholder));
   }
@@ -139,9 +133,19 @@ export class YooFormMissingWordComponent {
   }
   renderSentence() {
     const sentence = this.isMatchingBrackets ? this.translatedSentence.split(' ') : this.translatedSentence.split(this.parenthesesRegexp.g);
+    const getZoneIndex = (value) => {
+      var _a;
+      if (value.match(this.bracketsRegexp)) {
+        return parseInt(value.match(this.bracketsRegexp)[1], 10);
+      }
+      else if ((_a = this.translatedAnswers) === null || _a === void 0 ? void 0 : _a.includes(value)) {
+        return this.translatedAnswers.indexOf(value);
+      }
+      return -1;
+    };
     return (h("section", { id: "paragraph" }, (sentence === null || sentence === void 0 ? void 0 : sentence.map(v => {
       var _a;
-      const zoneIndex = this.getZoneIndex(v);
+      const zoneIndex = getZoneIndex(v);
       if (zoneIndex >= 0) {
         return zoneIndex <= this.translatedAnswers.length - 1 ? (h("div", { class: "dropzone", id: `zone-${zoneIndex}`, hidden: this.animated && !this.readonly && !((_a = this.value) === null || _a === void 0 ? void 0 : _a[zoneIndex]) && !this.revealDropzones })) : '';
       }
@@ -188,7 +192,7 @@ export class YooFormMissingWordComponent {
       "reflect": true,
       "defaultValue": "true"
     },
-    "livePreview": {
+    "readonly": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -202,10 +206,10 @@ export class YooFormMissingWordComponent {
         "tags": [],
         "text": ""
       },
-      "attribute": "live-preview",
+      "attribute": "readonly",
       "reflect": true
     },
-    "readonly": {
+    "livePreview": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -219,7 +223,7 @@ export class YooFormMissingWordComponent {
         "tags": [],
         "text": ""
       },
-      "attribute": "readonly",
+      "attribute": "live-preview",
       "reflect": true
     },
     "value": {
@@ -374,36 +378,6 @@ export class YooFormMissingWordComponent {
         "resolved": "boolean",
         "references": {}
       }
-    }, {
-      "method": "inputBlurred",
-      "name": "inputBlurred",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "inputFocused",
-      "name": "inputFocused",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
     }, {
       "method": "inputChanged",
       "name": "inputChanged",

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

@@ -207,6 +207,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   width: 100%;
 }
 :host ul {
+  margin: 0;
   padding: 0;
   list-style: none;
 }

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

@@ -1,21 +1,23 @@
 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 { Component, Element, Event, h, Host, Method, Prop, State, Watch } from '@stencil/core';
+import { clamp, isEqual } from 'lodash-es';
 import { setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
 export class YooFormRankingComponent {
   constructor() {
     this.isVisible = false;
     this.sortables = [];
   }
+  onValuesChanged(newValues, oldValues) {
+    this.hasDataChanged = !isEqual(newValues.sort(), oldValues.sort());
+  }
   onIsVisibleChanged() {
     this.isVisible && this.init();
   }
   onModalAnimationFinished() {
     this.isAnimationFinished && this.init();
   }
-  get itemElements() {
-    var _a;
-    return Array.from((_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('li')) || [];
+  async isValid() {
+    return this.validity;
   }
   validate() {
     var _a;
@@ -23,13 +25,22 @@ export class YooFormRankingComponent {
     this.validityChanged.emit(this.validity);
     return this.validity;
   }
+  get itemElements() {
+    return Array.from(this.host.shadowRoot.querySelectorAll('li')) || [];
+  }
   componentDidLoad() {
     this.init();
   }
+  componentDidUpdate() {
+    if (this.hasDataChanged) {
+      this.init();
+    }
+  }
   async init() {
     await this.prepareItems();
     const fittedHeight = this.itemElements.reduce((acc, el) => (acc += el.clientHeight), 0);
-    this.host.style.height = `${fittedHeight + 24}px`;
+    this.host.style.height = `${fittedHeight}px`;
+    this.hasDataChanged = false;
   }
   async prepareItems() {
     !this.readonly && (this.sortables = await Promise.all(this.itemElements.map(element => element && this.initDraggable(element))));
@@ -116,21 +127,6 @@ export class YooFormRankingComponent {
     "$": ["form-ranking.css"]
   }; }
   static get properties() { return {
-    "values": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "string[]",
-        "resolved": "string[]",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
     "value": {
       "type": "unknown",
       "mutable": true,
@@ -212,6 +208,21 @@ export class YooFormRankingComponent {
       "attribute": "live-preview",
       "reflect": false
     },
+    "values": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "string[]",
+        "resolved": "string[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
     "isVisible": {
       "type": "boolean",
       "mutable": false,
@@ -282,8 +293,29 @@ export class YooFormRankingComponent {
         "references": {}
       }
     }]; }
+  static get methods() { return {
+    "isValid": {
+      "complexType": {
+        "signature": "() => Promise<boolean>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
+      "propName": "values",
+      "methodName": "onValuesChanged"
+    }, {
       "propName": "isVisible",
       "methodName": "onIsVisibleChanged"
     }, {

package/dist/collection/components/form/form-recurrence/options/frequency.js

@@ -10,7 +10,7 @@ const frequencies = [
   { _id: 'MONTH', title: translate('YOOBICMONTH') }
 ];
 export const Frequency = ({ frequency, hours, interval, onChange }) => (h("section", { class: "frequency" },
-  h("yoo-form-input", { hasIconPrefix: false, min: MIN_INTERVAL.toString(), size: "medium", type: "number", uiValidation: { valid: false, invalid: false }, value: interval, onInputChanged: (event) => {
+  h("yoo-form-input", { clearable: false, hasIconPrefix: false, min: MIN_INTERVAL.toString(), size: "medium", type: "number", uiValidation: { valid: false, invalid: false }, value: interval, onInputChanged: (event) => {
       event.stopPropagation();
       onChange(frequency, hours, event.detail);
     }, onValidityChanged: (event) => event.stopPropagation() }),

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

@@ -350,6 +350,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host(:not([readonly])) [direction=right] .current {
   transform: translate(0%, 9%) scale(1) rotate(3.5deg) !important;
 }
+:host(:not([readonly])) #game {
+  position: relative;
+}
 :host(:not([readonly])) #game #background {
   position: relative;
   display: flex;
@@ -607,7 +610,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 @keyframes show {
   from {
-    transform: scale(0.85);
+    transform: scale(0.95);
     opacity: 0;
   }
   to {
@@ -683,26 +686,24 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   transition: transform 0.8s linear;
 }
 
-:host([live-preview][view=instructions]) #instructions #header,
 :host(.mobile[view=instructions]) #instructions #header {
   padding: var(--spacing-16, 1rem);
   background: var(--dark, #000000);
   border-radius: var(--border-radius-04, 0.25rem);
 }
-:host([live-preview][view=instructions]) #instructions #header #title,
 :host(.mobile[view=instructions]) #instructions #header #title {
   color: var(--light, #ffffff);
   font-weight: bold;
   font-size: var(--font-size-28, 1.75rem);
 }
 
-:host(.web:not([live-preview])) #cards {
+:host(.web) #cards {
   transform: translate(-50%, 0);
 }
-:host(.web:not([live-preview])) .action:nth-child(2) {
+:host(.web) .action:nth-child(2) {
   margin-top: calc(10% + 3rem);
 }
-:host(.web:not([live-preview])) #header {
+:host(.web) #header {
   display: flex;
   flex-direction: column;
   padding: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
@@ -710,29 +711,29 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   text-align: center;
   background-color: var(--stable-ultralight, #fafafa);
 }
-:host(.web:not([live-preview])) #header #title {
+:host(.web) #header #title {
   color: var(--dark, #000000) !important;
   font-weight: bold;
   font-size: var(--font-size-28, 1.75rem);
 }
 
-:host(.web:not([live-preview])[view=game]) main {
+:host(.web[view=game]) main {
   grid-template-rows: auto 1fr;
 }
-:host(.web:not([live-preview])[view=game]) main #actions {
+:host(.web[view=game]) main #actions {
   top: 109%;
   min-width: 32rem;
   margin-top: 0;
 }
 
-:host(.web:not([live-preview])[view=instructions]) yoo-icon[name=swipe-explanation] {
+:host(.web[view=instructions]) yoo-icon[name=swipe-explanation] {
   width: 5rem;
   height: 5rem;
   margin: auto;
   --inner-width: 5rem;
   --inner-height: 5rem;
 }
-:host(.web:not([live-preview])[view=instructions]) yoo-button {
+:host(.web[view=instructions]) yoo-button {
   margin-right: var(--spacing-16, 1rem);
   margin-left: auto;
 }
@@ -750,6 +751,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host([view=instructions]) main #instructions #categories {
   display: inline-grid;
   grid-template-columns: 1fr 0.5fr 1fr;
+  align-items: center;
+  justify-items: center;
   width: 100%;
   margin: var(--spacing-24, 1.5rem) 0;
   text-align: center;
@@ -783,5 +786,4 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host([view=instructions]) main yoo-button {
   align-items: flex-end;
-  padding-bottom: var(--spacing-16, 1rem);
 }

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

@@ -419,7 +419,7 @@ export class YooFormSwipeCardsComponent {
     var _a;
     const isUndo = direction === SwipeCardsDirection.undo;
     const isLeft = direction === SwipeCardsDirection.left;
-    const isMobile = !isWeb(this.host) || this.livePreview;
+    const isMobile = !isWeb(this.host);
     const actionColor = isUndo ? (isWeb(this.host) ? 'light' : 'stable-alt') : isLeft ? 'app-color' : 'warning';
     const swipeIcon = isUndo ? 'undo' : `big-arrow-${direction}`;
     const categoryIndex = isLeft ? 0 : 1;
@@ -438,7 +438,7 @@ export class YooFormSwipeCardsComponent {
   }
   renderGame() {
     return [
-      isWeb(this.host) && !this.livePreview && this.renderTopDescription(),
+      isWeb(this.host) && this.renderTopDescription(),
       h("section", { id: "game", ref: (element) => (this.gameContainerElement = element) },
         this.renderBackground(),
         this.renderCards())
@@ -446,7 +446,7 @@ export class YooFormSwipeCardsComponent {
   }
   renderStartButton() {
     return (!this.readonly &&
-      this.showInstructionView && (h("yoo-button", { disabled: !this.hasData || !this.isDataValid, size: isWeb(this.host) && !this.livePreview ? 'medium' : 'large', color: "app-color", onClick: () => {
+      this.showInstructionView && (h("yoo-button", { disabled: !this.hasData || !this.isDataValid, size: isWeb(this.host) ? 'medium' : 'large', color: "app-color", onClick: () => {
         this.revealCards = true;
         this.showInstructionView = false;
         this.displayFooterElement();
@@ -468,12 +468,9 @@ export class YooFormSwipeCardsComponent {
     return (this.readonly &&
       this.categories.map((categoryValue, catIndex) => [
         h("div", { class: "category-title" }, getAnswerCounter(categoryValue)),
-        h("ul", null, Array.from(new Set(this.value[catIndex])).map((userAnswer) => {
-          var _a;
-          return (h("li", { class: getValidationClass(catIndex, userAnswer) },
-            !!((_a = this.images) === null || _a === void 0 ? void 0 : _a.length) && h("yoo-img", { src: getAnswerImage(userAnswer) }),
-            !this.isMode.image && h("yoo-truncate", null, translateMulti(userAnswer))));
-        }))
+        h("ul", null, Array.from(new Set(this.value[catIndex])).map((userAnswer) => (h("li", { class: getValidationClass(catIndex, userAnswer) },
+          !this.isMode.text && h("yoo-img", { src: getAnswerImage(userAnswer) }),
+          !this.isMode.image && h("yoo-truncate", null, translateMulti(userAnswer))))))
       ]));
   }
   renderBanner() {
@@ -717,7 +714,7 @@ export class YooFormSwipeCardsComponent {
         "text": ""
       },
       "attribute": "live-preview",
-      "reflect": true
+      "reflect": false
     },
     "showInstructionView": {
       "type": "boolean",

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

@@ -382,7 +382,7 @@ export class YooFormTableComponent {
       "mutable": false,
       "complexType": {
         "original": "EntityType",
-        "resolved": "\"aisles\" | \"community\" | \"courses\" | \"dashboards\" | \"operations\" | \"pages\" | \"questions\" | \"scoring\" | \"tableau\" | \"tag\" | \"user\" | \"weekdays\" | \"campaignfilters\" | \"channel\" | \"communities\" | \"custommodels\" | \"geofilters\" | \"hierarchy\" | \"incentives\" | \"locationtypes\" | \"plans\" | \"translations\" | \"aclRole\" | \"blog\" | \"emails\" | \"feeds\" | \"files\" | \"groups\" | \"htmltemplates\" | \"lessons\" | \"locations\" | \"memos\" | \"missiondescriptions\" | \"missiondescriptiontemplates\" | \"missions\" | \"productbatch\" | \"products\" | \"tenants\" | \"userranks\" | \"users\" | \"type\" | \"aclPermission\" | \"aclPermissionList\" | \"aislelist\" | \"algorithm\" | \"apps\" | \"arexperience\" | \"armodel\" | \"audiences\" | \"badges\" | \"broadcasts\" | \"calendarEvents\" | \"creationtypes\" | \"catalogs\" | \"certificates\" | \"channels\" | \"charttype\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"days\" | \"entitycomments\" | \"environnement\" | \"feedsComments\" | \"filesFolders\" | \"folders\" | \"formfield\" | \"giphy\" | \"googlemaps\" | \"hashtags\" | \"icons\" | \"journeys\" | \"language\" | \"lessondescriptions\" | \"liveshoppings\" | \"locationsaudience\" | \"locationspublic\" | \"markas\" | \"mediacapturedevices\" | \"memolist\" | \"missiondatas\" | \"missiondescriptioncategories\" | \"missiondescriptionreviewhistories\" | \"missionfield\" | \"notes\" | \"notifications\" | \"photos\" | \"productbatchlist\" | \"productweightpair\" | \"publicAPITokens\" | \"questionsAnswers\" | \"regex\" | \"reporttemplates\" | \"reviewapps\" | \"salesdata\" | \"scorms\" | \"scormcloud\" | \"slots\" | \"tableauShared\" | \"tagGroups\" | \"topusers\" | \"unsplash\" | \"useraudience\" | \"userlearningmanager\" | \"usercourseinfo\" | \"violetproducts\" | \"violetproductofferskus\" | \"violetbasketitems\" | \"violetshippingmethods\" | \"version\" | \"videocallusers\" | \"visits\" | \"waitlistvisit\" | \"waitlistcustomer\" | \"waitliststats\" | \"plansorlessons\" | \"widgets\"",
+        "resolved": "\"aisles\" | \"community\" | \"courses\" | \"dashboards\" | \"operations\" | \"pages\" | \"questions\" | \"scoring\" | \"tableau\" | \"tag\" | \"user\" | \"weekdays\" | \"campaignfilters\" | \"channel\" | \"communities\" | \"custommodels\" | \"geofilters\" | \"hierarchy\" | \"incentives\" | \"locationtypes\" | \"plans\" | \"translations\" | \"aclRole\" | \"blog\" | \"emails\" | \"feeds\" | \"files\" | \"groups\" | \"htmltemplates\" | \"lessons\" | \"locations\" | \"memos\" | \"missiondescriptions\" | \"missiondescriptiontemplates\" | \"missions\" | \"productbatch\" | \"products\" | \"tenants\" | \"userranks\" | \"users\" | \"notes\" | \"type\" | \"aclPermission\" | \"aclPermissionList\" | \"aislelist\" | \"algorithm\" | \"apps\" | \"arexperience\" | \"armodel\" | \"audiences\" | \"badges\" | \"broadcasts\" | \"calendarEvents\" | \"creationtypes\" | \"catalogs\" | \"certificates\" | \"channels\" | \"charttype\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"days\" | \"entitycomments\" | \"environnement\" | \"feedsComments\" | \"filesFolders\" | \"folders\" | \"formfield\" | \"giphy\" | \"googlemaps\" | \"hashtags\" | \"icons\" | \"journeys\" | \"language\" | \"lessondescriptions\" | \"liveshoppings\" | \"locationsaudience\" | \"locationspublic\" | \"markas\" | \"mediacapturedevices\" | \"memolist\" | \"missiondatas\" | \"missiondescriptioncategories\" | \"missiondescriptionreviewhistories\" | \"missionfield\" | \"notifications\" | \"photos\" | \"productbatchlist\" | \"productweightpair\" | \"publicAPITokens\" | \"questionsAnswers\" | \"regex\" | \"reporttemplates\" | \"reviewapps\" | \"salesdata\" | \"scorms\" | \"scormcloud\" | \"slots\" | \"tableauShared\" | \"tagGroups\" | \"topusers\" | \"unsplash\" | \"useraudience\" | \"userlearningmanager\" | \"usercourseinfo\" | \"violetproducts\" | \"violetproductofferskus\" | \"violetbasketitems\" | \"violetshippingmethods\" | \"version\" | \"videocallusers\" | \"visits\" | \"waitlistvisit\" | \"waitlistcustomer\" | \"waitliststats\" | \"plansorlessons\" | \"widgets\"",
         "references": {
           "EntityType": {
             "location": "import",

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

@@ -1,5 +1,5 @@
 import { Keyboard } from '@capacitor/keyboard';
-import { containsUrls, debounce, enableKeyboardResize, findParent, getAsyncExtraData, isFirefox, isIOS, isNativeMobile, isNullOrUndefined, isWeb, replaceAndGetAllLinks, replaceAtTagToMentionTag, safeScrollIntoView, translate, translateMulti } from '@shared/utils';
+import { debounce, enableKeyboardResize, findParent, getAsyncExtraData, isFirefox, isIOS, isNativeMobile, isNullOrUndefined, isWeb, replaceAtTagToMentionTag, safeScrollIntoView, translate, translateMulti, updateLinkPreviews } from '@shared/utils';
 import { Component, Element, Event, forceUpdate, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';
 import { isString } from 'lodash-es';
 import { getAppContext, sanitizeHTML } from '../../../utils/helpers/common-helpers';
@@ -230,16 +230,9 @@ export class YooFormTextAreaComponent {
         setTimeout(() => {
           this.allowLinkUpdate = true;
           const content = this.inputEl.innerHTML || '';
-          if (!containsUrls(content) && !(ev.inputType === 'deleteContentBackward' || ev.key === 'Backspace')) {
-            return;
-          }
-          const { links } = replaceAndGetAllLinks(content.replace(/ /g, ' '), ' ') || {};
-          if (links === null || links === void 0 ? void 0 : links.length) {
-            this.linkPreviews = links.map((link) => {
-              var _a;
-              const preview = (_a = this.linkPreviews) === null || _a === void 0 ? void 0 : _a.find((item) => item.originalURL === link);
-              return preview ? preview : { isLoading: true, url: link, title: link };
-            });
+          const updatedLinks = updateLinkPreviews(content, this.linkPreviews, (ev === null || ev === void 0 ? void 0 : ev.inputType) === 'deleteContentBackward' || (ev === null || ev === void 0 ? void 0 : ev.key) === 'Backspace');
+          if (updatedLinks === null || updatedLinks === void 0 ? void 0 : updatedLinks.hasChanges) {
+            this.linkPreviews = [...updatedLinks.previews];
           }
         }, 1000);
       }
@@ -381,8 +374,7 @@ export class YooFormTextAreaComponent {
       this.segmentsCount.toLocaleString());
   }
   renderLinkPreviews() {
-    var _a;
-    return (h("yoo-links-preview", { closeable: true, links: [(_a = this.linkPreviews) === null || _a === void 0 ? void 0 : _a[0]], showErrors: false, onLinkPreviewChanged: (ev) => this.onLinkPreviewChanged(ev) }));
+    return (h("yoo-links-preview", { closeable: true, inline: true, links: this.linkPreviews, showErrors: false, onLinkPreviewChanged: (ev) => this.onLinkPreviewChanged(ev) }));
   }
   renderMentionContainer() {
     const maxRowsHeight = `${this.maxRows * LINE_HEIGHT}px`;
@@ -394,7 +386,7 @@ export class YooFormTextAreaComponent {
   renderTextArea() {
     const hasValue = !isNullOrUndefined(this.value) && this.value !== '';
     return [
-      h("textarea", { ref: (el) => (this.inputEl = el), onClick: (ev) => {
+      h("textarea", { style: { maxHeight: this.maxRows ? `${this.maxRows * LINE_HEIGHT + PADDING}px` : 'auto' }, ref: (el) => (this.inputEl = el), onClick: (ev) => {
           if (isWeb() && isFirefox()) {
             this.inputEl.focus();
             this.onInputFocused('textarea');
@@ -678,7 +670,7 @@ export class YooFormTextAreaComponent {
     },
     "linkPreviews": {
       "type": "unknown",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "ILinkPreview[]",
         "resolved": "ILinkPreview[]",
@@ -690,7 +682,7 @@ export class YooFormTextAreaComponent {
         }
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""

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

@@ -45,7 +45,7 @@ import 'froala-editor/js/languages/tr';
 import 'froala-editor/js/languages/uk';
 import 'froala-editor/js/languages/zh_cn';
 import 'froala-editor/js/languages/zh_tw';
-import { asyncWaterfall, closeModal, containsUrls, debounce as _debounce, getAsyncExtraData, getColorSwatches, getCurrentLanguage, getCustomApp, getSession, getUUID, getVideoPoster, images, isCloudinaryLink, isImageUrl, isVideo, isWeb, MODAL_BASE_ZINDEX, replaceAndGetAllLinks, replaceAtTagToMentionTag, showContextMenu, showModal, translate, translateMulti, videos } from '@shared/utils';
+import { asyncWaterfall, closeModal, debounce as _debounce, getAsyncExtraData, getColorSwatches, getCurrentLanguage, getCustomApp, getSession, getUUID, getVideoPoster, images, isCloudinaryLink, isImageUrl, isVideo, isWeb, MODAL_BASE_ZINDEX, replaceAtTagToMentionTag, showContextMenu, showModal, translate, translateMulti, updateLinkPreviews, videos } from '@shared/utils';
 import { Component, Element, Event, h, Host, Method, Prop, Watch } from '@stencil/core';
 import FroalaEditor from 'froala-editor';
 import { assign, compact, isArray, isString } from 'lodash-es';
@@ -657,16 +657,9 @@ export class YooFormTextEditorComponent {
         var _a, _b;
         this.allowLinkUpdate = true;
         const content = ((_b = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.html) === null || _b === void 0 ? void 0 : _b.get()) || '';
-        if (!containsUrls(content) && !((ev === null || ev === void 0 ? void 0 : ev.inputType) === 'deleteContentBackward' || (ev === null || ev === void 0 ? void 0 : ev.key) === 'Backspace')) {
-          return;
-        }
-        const { links } = replaceAndGetAllLinks(content.replace(/ /g, ' '), ' ');
-        if (links === null || links === void 0 ? void 0 : links.length) {
-          this.linkPreviews = links.map((link) => {
-            var _a;
-            const preview = (_a = this.linkPreviews) === null || _a === void 0 ? void 0 : _a.find((item) => item.originalURL === link);
-            return preview ? preview : { isLoading: true, url: link, title: link };
-          });
+        const updatedLinks = updateLinkPreviews(content, this.linkPreviews, (ev === null || ev === void 0 ? void 0 : ev.inputType) === 'deleteContentBackward' || (ev === null || ev === void 0 ? void 0 : ev.key) === 'Backspace');
+        if (updatedLinks === null || updatedLinks === void 0 ? void 0 : updatedLinks.hasChanges) {
+          this.linkPreviews = [...updatedLinks.previews];
         }
       }, 1000);
     }
@@ -752,8 +745,7 @@ export class YooFormTextEditorComponent {
     }
   }
   renderLinkPreviews() {
-    var _a;
-    return (h("yoo-links-preview", { closeable: true, inline: true, links: [(_a = this.linkPreviews) === null || _a === void 0 ? void 0 : _a[0]], showErrors: false, onLinkPreviewChanged: (ev) => this.onLinkPreviewChanged(ev) }));
+    return (h("yoo-links-preview", { closeable: true, inline: true, links: this.linkPreviews, showErrors: false, onLinkPreviewChanged: (ev) => this.onLinkPreviewChanged(ev) }));
   }
   renderEditable() {
     return [h("div", { class: { container: true, fullscreen: this.isFullscreen }, ref: (el) => (this.containerEl = el) }), this.allowLinkPreview && this.renderLinkPreviews()];

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

@@ -295,14 +295,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   height: auto;
 }
 
-:host([closeable]) yoo-icon[name=cross] {
-  position: absolute;
-  top: 50%;
-  right: var(--spacing-04, 0.25rem);
-  z-index: 15;
-  transform: translateY(-50%);
-}
-
 :host(:not([inline])) #preview yoo-img {
   border-top-left-radius: var(--border-radius-04, 0.25rem);
   border-top-right-radius: var(--border-radius-04, 0.25rem);
@@ -313,7 +305,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin: auto var(--spacing-08, 0.5rem);
 }
 :host([inline]) #preview:not(.no-image) {
-  grid-template-columns: 1fr 2fr;
+  grid-template-columns: 1fr 1.8fr 0.2fr;
   gap: var(--spacing-16, 1rem);
 }
 :host([inline]) #preview #image yoo-img {