@yoobic/yobi 8.3.0-2 → 8.3.0-20

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

@@ -1,5 +1,5 @@
 import { Draggable, findParent, getMedia, getUUID, gsapTimeline, gsapTo, isCloudinaryLink, isWeb, Power1, translate, translateMulti } from '@shared/utils';
-import { Component, Element, Event, h, Host, Prop, Watch } from '@stencil/core';
+import { Component, Element, Event, forceUpdate, h, Host, Prop, Watch } from '@stencil/core';
 import { clamp, inRange, isEqual, shuffle } from 'lodash-es';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
 import { hasDuplicates, showWarningAlert } from '../../../utils/helpers/draggable-tags-helpers';
@@ -14,25 +14,23 @@ export class YooFormSwipeCardsComponent {
     this.shuffled = true;
     this.values = [];
     this.swipeCards = [];
-    this.animationDelay = this.animated ? .25 : 0;
     this.cardsElements = [];
     this.swipeButtons = [];
   }
   onCategoriesChanged(nv, ov) {
-    if (!isEqual(nv, ov)) {
-      const showAlert = this.livePreview && !this.hasTwoCategories;
-      showWarningAlert(this.host, showAlert, 'NOTFULFILLEDCATEGORIES');
-      if (showAlert) {
-        this.showInstructionView = true;
-      }
+    this.hasDataChanged = !isEqual(nv, ov);
+    if (this.hasDataChanged) {
+      this.spyOnValuesChanged();
     }
   }
-  onValuesChanged() {
+  onValuesChanged(nv, ov) {
+    this.hasDataChanged = !isEqual(nv, ov);
     if (!this.isMode.image) {
       this.spyOnValuesChanged();
     }
   }
-  onImagesChanged() {
+  onImagesChanged(nv, ov) {
+    this.hasDataChanged = !isEqual(nv, ov);
     if (!this.isMode.text) {
       this.spyOnValuesChanged();
     }
@@ -47,10 +45,11 @@ export class YooFormSwipeCardsComponent {
     setTimeout(() => this.displayFooterElement(!this.showInstructionView), 150);
   }
   get isMode() {
+    const { image, text, textimage } = SwipeCardsMode;
     return {
-      image: this.mode === SwipeCardsMode.image,
-      textimage: this.mode === SwipeCardsMode.textimage,
-      text: this.mode === SwipeCardsMode.text
+      image: this.mode === image,
+      textimage: this.mode === textimage,
+      text: this.mode === text
     };
   }
   get numberEmptyItems() {
@@ -73,14 +72,15 @@ export class YooFormSwipeCardsComponent {
   }
   get hasAllCardBeenSwiped() {
     var _a;
-    return !((_a = this.swipeCards) === null || _a === void 0 ? void 0 : _a.filter(card => !card.swipedDirection).length);
+    return !((_a = this.swipeCards) === null || _a === void 0 ? void 0 : _a.filter(({ swipedDirection }) => !swipedDirection).length);
   }
   get buttons() {
-    const getButton = (direction) => { var _a, _b; return (_b = (_a = this.swipeButtons) === null || _a === void 0 ? void 0 : _a.filter(swipeButton => (swipeButton === null || swipeButton === void 0 ? void 0 : swipeButton.id) === `swipe-${direction}`)) === null || _b === void 0 ? void 0 : _b[0]; };
+    const { left, right, undo } = SwipeCardsDirection;
+    const getButton = (direction) => { var _a, _b; return (_b = (_a = this.swipeButtons) === null || _a === void 0 ? void 0 : _a.filter(({ id }) => id === `swipe-${direction}`)) === null || _b === void 0 ? void 0 : _b[0]; };
     return {
-      left: getButton(SwipeCardsDirection.left),
-      undo: getButton(SwipeCardsDirection.undo),
-      right: getButton(SwipeCardsDirection.right)
+      left: getButton(left),
+      undo: getButton(undo),
+      right: getButton(right)
     };
   }
   get currentCard() {
@@ -90,12 +90,8 @@ export class YooFormSwipeCardsComponent {
     var _a;
     return this.getCardElement((_a = this.currentCard) === null || _a === void 0 ? void 0 : _a.id);
   }
-  get formHeight() {
-    var _a;
-    return ((_a = findParent(this.host, 'form')) === null || _a === void 0 ? void 0 : _a.clientHeight) - 1.5 * 16;
-  }
   componentWillLoad() {
-    this.prepareInitGame();
+    this.prepareGame();
   }
   componentDidLoad() {
     this.initGame();
@@ -113,17 +109,15 @@ export class YooFormSwipeCardsComponent {
     this.validityChanged.emit(this.validity);
     return this.validity;
   }
-  prepareInitGame() {
+  prepareGame() {
     this.shuffleCardValues();
+    this.animationDelay = this.animated ? .25 : 0;
     this.revealCards = !this.showInstructionView;
     this.swipeCards = this.initCards();
   }
   initGame() {
     this.displayFooterElement(false);
-    if (!this.showInstructionView) {
-      this.initDraggable();
-    }
-    this.showWarnings();
+    !this.showInstructionView && this.initDraggable();
   }
   updateCardsData() {
     if (this.hasDataChanged) {
@@ -150,7 +144,7 @@ export class YooFormSwipeCardsComponent {
     return (_a = this.cardsElements) === null || _a === void 0 ? void 0 : _a.find((cardElement) => (cardElement === null || cardElement === void 0 ? void 0 : cardElement.id) === id);
   }
   spyOnValuesChanged() {
-    this.showWarnings();
+    this.hasDataChanged && this.showWarnings();
   }
   showWarnings() {
     var _a;
@@ -183,7 +177,7 @@ export class YooFormSwipeCardsComponent {
       return value;
     };
     const getValuesFromDirection = (direction) => this.swipeCards.filter(c => c.swipedDirection === direction).map(c => formatCardValue(c.value));
-    setValueAndValidateInput([
+    this.livePreview ? forceUpdate(this) : setValueAndValidateInput([
       getValuesFromDirection(SwipeCardsDirection.left),
       getValuesFromDirection(SwipeCardsDirection.right)
     ], this);
@@ -236,9 +230,11 @@ export class YooFormSwipeCardsComponent {
   }
   setSwipingColor(swipingDirection) {
     if (this.currentCardElement) {
+      const { left, right } = SwipeCardsDirection;
+      const [categoryLeft, categoryRight] = this.categories;
       const categoryContainer = this.currentCardElement.querySelector('.content-category');
-      const isThrowable = [SwipeCardsDirection.left, SwipeCardsDirection.right].includes(swipingDirection);
-      categoryContainer.textContent = this.getSwipedCategoryValue(swipingDirection);
+      const isThrowable = [left, right].includes(swipingDirection);
+      categoryContainer.textContent = translateMulti(swipingDirection === left ? categoryLeft : swipingDirection === right ? categoryRight : '');
       [this.gameContainerElement, this.currentCardElement].forEach(e => {
         isThrowable ? e.setAttribute('direction', swipingDirection) : e.removeAttribute('direction');
       });
@@ -254,13 +250,13 @@ export class YooFormSwipeCardsComponent {
     const returnedAnimation = timeline();
     // building swiping animation
     const swipeAnimation = timeline({ paused: true });
-    const isSwipeable = (el) => el.classList.contains('current');
+    const isSwipeable = el => el.classList.contains('current');
     swipeAnimation
       .fromTo(this.buttons.left, 1, { scale: 1.5 }, { scale: 1 }, 0)
       .fromTo(this.buttons.right, 1, { scale: 1 }, { scale: 1.5 }, 1)
       .progress(.5);
-    const onStartSwiping = ({ target }) => {
-      if (isSwipeable(target)) {
+    const onStartSwiping = () => {
+      if (isSwipeable(cardElement)) {
         this.blockMoves.emit(true);
         returnedAnimation === null || returnedAnimation === void 0 ? void 0 : returnedAnimation.kill();
       }
@@ -272,33 +268,35 @@ export class YooFormSwipeCardsComponent {
         this.setSwipingColor(this.getSwipedState(swipeProgress).swipedDirection);
       }
     };
-    const onThrowing = ({ target }) => {
-      if (isSwipeable(target)) {
-        const swipedState = this.getSwipedState(swipeAnimation.progress());
-        !swipedState.isCardThrowable ?
+    const onThrowing = () => {
+      const baseProps = { left: 0, top: 0 };
+      if (isSwipeable(cardElement)) {
+        const { isCardThrowable, swipedDirection } = this.getSwipedState(swipeAnimation.progress());
+        !isCardThrowable ?
           returnedAnimation
-            .to(cardElement, this.animationDelay, { left: 0, top: 0 })
+            .to(cardElement, this.animationDelay, baseProps)
             .to([this.buttons.left, this.buttons.right], { scale: 1, ease: Power1.easeInOut }, 0) :
-          this.swipeCard(swipedState.swipedDirection);
+          this.swipeCard(swipedDirection);
       }
       else {
-        gsapTo(cardElement, this.animationDelay, { left: 0, top: 0 });
+        gsapTo(cardElement, this.animationDelay, baseProps);
       }
+      this.blockMoves.emit(false);
     };
     return (new Draggable(cardElement, {
       bound: this.host,
       type: 'left, top',
       cursor: 'grab',
       zIndexBoost: false,
-      onDragStart() { onStartSwiping(this); },
+      onDragStart: () => onStartSwiping(),
       onDrag() { onSwiping(this); },
-      onDragEnd() { onThrowing(this); }
+      onDragEnd: () => onThrowing()
     }));
   }
   clickToSwipe(clickedDirection) {
     if (!this.buttons[clickedDirection].disabled) {
       this.setSwipingColor(clickedDirection);
-      setTimeout(() => this.swipeCard(clickedDirection), 400);
+      this.swipeCard(clickedDirection);
     }
   }
   async undoSwipe() {
@@ -317,25 +315,23 @@ export class YooFormSwipeCardsComponent {
       }
     }
   }
-  getSwipedCategoryValue(direction) {
-    var _a;
-    return ((_a = this.categories) === null || _a === void 0 ? void 0 : _a.length) && translateMulti(direction === SwipeCardsDirection.left ? this.categories[0] : direction === SwipeCardsDirection.right ? this.categories[1] : '');
-  }
-  renderStack() {
-    return h("section", { id: "stack" }, this.swipeCards.map((card, i, s) => {
-      var _a;
-      const currentCardIndex = s.indexOf(this.currentCard) || 0;
+  renderCards() {
+    return h("section", { id: "cards" }, this.swipeCards.map(({ swipedDirection, value, id }, i, s) => {
+      const currentCardIndex = s.indexOf(this.currentCard);
       const hasCurrentCard = currentCardIndex !== -1;
-      return h("section", { class: {
+      return h("div", { id: id, class: {
           card: true,
           current: i === currentCardIndex,
           second: hasCurrentCard && i === currentCardIndex + 1,
           third: hasCurrentCard && i === currentCardIndex + 2,
           revealing: this.revealCards
-        }, id: card.id, ref: el => this.cardsElements[i] = el, ...{ type: this.mode, ...(card.swipedDirection && { direction: card.swipedDirection }) } },
+        }, ref: el => this.cardsElements[i] = el, ...{
+          type: this.mode,
+          ...(swipedDirection && { direction: swipedDirection })
+        } },
         this.hasImage && (h("div", { class: "content-image" },
-          h("yoo-img", { instant: true, src: getMedia(card.value['_downloadURL']) }))),
-        this.hasText && (h("div", { class: "content-text" }, translateMulti(((_a = card.value) === null || _a === void 0 ? void 0 : _a['_filename']) || card.value))),
+          h("yoo-img", { instant: true, src: getMedia(value['_downloadURL']) }))),
+        this.hasText && (h("div", { class: "content-text" }, translateMulti((value === null || value === void 0 ? void 0 : value['_filename']) || value))),
         h("div", { class: "content-category" }));
     }));
   }
@@ -345,14 +341,14 @@ export class YooFormSwipeCardsComponent {
     const iconColor = isWeb(this.host) ? categoryColor : 'light';
     const iconSize = isWeb(this.host) ? 'large' : 'medium';
     const category = this.categories && translateMulti(isLeftCategory ? this.categories[0] : this.categories[1]);
-    return h("div", { class: `category ${side}` },
+    return h("div", { class: { category: true, [side]: true } },
       h("yoo-tag", { noBackground: isWeb(this.host), color: categoryColor, size: "large", icon: `big-arrow-${side}`, iconOnlyColor: iconColor, iconOnlySize: iconSize }),
       h("p", { class: `${categoryColor}` }, category),
       h("span", { class: "stable" }, translate(`SWIPE${side.toUpperCase()}`)));
   }
   renderTopDescription() {
     return h("div", { id: "header" },
-      h("h1", { innerHTML: translateMulti(this.label) }),
+      h("span", { id: "title", innerHTML: translateMulti(this.label) }),
       h("span", { class: "stable" }, translate(this.description || 'CARDSWIPEDEFAULTINSTRUCTIONS')));
   }
   renderInstructions() {
@@ -372,7 +368,8 @@ export class YooFormSwipeCardsComponent {
         } }, translate('START'))));
   }
   renderSwipeButtons() {
-    return h("section", { id: "actions" }, [SwipeCardsDirection.left, SwipeCardsDirection.undo, SwipeCardsDirection.right].map((d, i) => this.renderSwipeAction(d, i)));
+    const { left, undo, right } = SwipeCardsDirection;
+    return h("section", { id: "actions" }, [left, undo, right].map((d, i) => this.renderSwipeAction(d, i)));
   }
   renderSwipeAction(direction, index) {
     var _a;
@@ -382,23 +379,23 @@ export class YooFormSwipeCardsComponent {
     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;
-    return (h("div", { class: { 'action': true, 'hide': this.hasAllCardBeenSwiped && !isUndo } },
+    return (h("div", { class: { action: true, hide: this.hasAllCardBeenSwiped && !isUndo } },
       h("yoo-button", { shape: "circular", rippleType: "unbounded", id: `swipe-${direction}`, size: (isUndo && !isMobile) ? 'medium' : 'large', fill: (isMobile || isUndo) ? 'solid' : 'transparent', color: isUndo ? isMobile ? 'stable-light' : 'text-color' : actionColor.concat('-20'), ref: (element) => (this.swipeButtons[index] = element), onClick: () => isUndo ? this.undoSwipe() : this.clickToSwipe(direction) },
         h("yoo-icon", { name: swipeIcon, color: actionColor, size: isMobile ? 'medium' : isUndo ? 'small' : 'large' })),
       !isUndo && ((_a = this.categories) === null || _a === void 0 ? void 0 : _a.length) && h("span", { class: actionColor }, translateMulti(this.categories[categoryIndex]))));
   }
   renderEndGameMessage() {
-    return h("section", { id: "end-message", class: { 'active': this.hasAllCardBeenSwiped } },
+    return h("section", { id: "end-message", class: { active: this.hasAllCardBeenSwiped } },
       h("yoo-lottie", { autoplay: this.hasAllCardBeenSwiped, type: "check" }),
       h("div", { innerHTML: translate('ENDSWIPINGCARDSMESSAGE') }),
       h("span", null, translate('CLICKTOCONTINUE', { buttonName: this.nextButtonText })));
   }
-  renderCards() {
+  renderGame() {
     return [
       isWeb(this.host) && !this.livePreview && this.renderTopDescription(),
       h("section", { id: "game", ref: (element) => (this.gameContainerElement = element) },
         this.renderEndGameMessage(),
-        this.renderStack()),
+        this.renderCards()),
       this.renderSwipeButtons()
     ];
   }
@@ -426,9 +423,9 @@ export class YooFormSwipeCardsComponent {
       h("p", { slot: "content" }));
   }
   render() {
-    return (h(Host, { ...(this.formHeight && { style: { height: `${this.formHeight}px` } }), class: { ...getAppContext(this.host), 'swiper-no-swiping': !this.readonly } },
+    return (h(Host, { class: { ...getAppContext(this.host), 'swiper-no-swiping': !this.readonly, instructions: this.showInstructionView } },
       this.renderBanner(),
-      !this.readonly && (this.showInstructionView ? this.renderInstructions() : this.renderCards()),
+      !this.readonly && (this.showInstructionView ? this.renderInstructions() : this.renderGame()),
       this.readonly && this.renderSummary()));
   }
   static get is() { return "yoo-form-swipe-cards"; }

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\" | \"campaigntypes\" | \"catalogs\" | \"certificates\" | \"channels\" | \"charttype\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"days\" | \"entitycomments\" | \"environnement\" | \"feedsComments\" | \"filesFolders\" | \"folders\" | \"formfield\" | \"giphy\" | \"googlemaps\" | \"hashtags\" | \"icons\" | \"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\" | \"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\" | \"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\"",
         "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, findParent, getAsyncExtraData, isFirefox, isNativeMobile, isNullOrUndefined, isWeb, replaceAndGetAllLinks, replaceAtTagToMentionTag, safeScrollIntoView, translate, translateMulti } from '@shared/utils';
+import { containsUrls, debounce, enableKeyboardResize, findParent, getAsyncExtraData, isFirefox, isIOS, isNativeMobile, isNullOrUndefined, isWeb, replaceAndGetAllLinks, replaceAtTagToMentionTag, safeScrollIntoView, translate, translateMulti } from '@shared/utils';
 import { Component, Element, Event, forceUpdate, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';
 import { getAppContext, sanitizeHTML } from '../../../utils/helpers/common-helpers';
 import { onInputBlurred, onInputClear, onInputFocused, setValidator, setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
@@ -123,6 +123,9 @@ export class YooFormTextAreaComponent {
         textArea.setAttribute('style', `resize: ${this.resizable};`);
       }
     }
+    if (isNativeMobile() && isIOS()) {
+      enableKeyboardResize();
+    }
     if (this.autoInitialRows && this.inputEl) {
       const scrollHeight = this.inputEl.scrollHeight;
       const PADDING = 16;

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, replaceAndGetAllLinks, replaceAtTagToMentionTag, showContextMenu, showModal, translate, translateMulti, videos } from '@shared/utils';
+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 { Component, Element, Event, h, Host, Method, Prop, Watch } from '@stencil/core';
 import FroalaEditor from 'froala-editor';
 import { assign, compact, isArray, isString } from 'lodash-es';
@@ -64,7 +64,7 @@ export class YooFormTextEditorComponent {
     this.allowLinkPreview = false;
     this.resetHtml = false;
     this.reloadText = false;
-    this.customZIndex = 20000;
+    this.customZIndex = MODAL_BASE_ZINDEX;
     this.mentionedUsers = [];
     // the event "contentChanged" is not fired before hitting 'Enter' once,
     //  so need to listen to the event 'keydown' first to be aware of any change of the value.
@@ -1085,7 +1085,7 @@ export class YooFormTextEditorComponent {
       },
       "attribute": "custom-z-index",
       "reflect": false,
-      "defaultValue": "20000"
+      "defaultValue": "MODAL_BASE_ZINDEX"
     },
     "translations": {
       "type": "unknown",

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

@@ -112,10 +112,8 @@ export class YooFormUploaderComponent {
   }
   getFilesAndUpdateInput(invalidId) {
     const pondFiles = this.pond.getFiles();
-    const files = pondFiles === null || pondFiles === void 0 ? void 0 : pondFiles.filter((file) => !((this.lastAddedFile || []).indexOf(file) >= 0));
-    this.lastAddedFile = files;
-    if (files === null || files === void 0 ? void 0 : files.length) {
-      let finalFile = files.map((file) => {
+    if (pondFiles === null || pondFiles === void 0 ? void 0 : pondFiles.length) {
+      let finalFile = pondFiles.map((file) => {
         // tag file with invalid id
         if (file.id === invalidId) {
           file.file['invalid'] = true;

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

@@ -242,7 +242,9 @@ export class YooFormCreatorComponent {
     return ((_a = this.missionDescription) === null || _a === void 0 ? void 0 : _a.type) === 'lesson';
   }
   onMissionDescriptionUpdated() {
-    this.translatePage.missionDescription = this.missionDescription;
+    if (this.translatePage) {
+      this.translatePage.missionDescription = this.missionDescription;
+    }
   }
   onCustomFormFieldsUpdated() {
     if (this.fieldSelectorElement) {
@@ -288,8 +290,8 @@ export class YooFormCreatorComponent {
     if (this.hasAdditionBeenClicked && ((_a = this.newFieldCondition) === null || _a === void 0 ? void 0 : _a.condition)) {
       this.newFieldCondition = null;
       this.overlayElement.initialNewFieldCondition = this.newFieldCondition;
-      this.hasAdditionBeenClicked = false;
     }
+    this.hasAdditionBeenClicked = false;
   }
   onTranslationsChanged() {
     var _a, _b;
@@ -863,7 +865,7 @@ export class YooFormCreatorComponent {
           this.expandableBlocks[itemIndex].formField.required =
             originalItemIndex === itemIndex && attributesToForceUpdate ? attributesToForceUpdate.required : this.currentSlides[slideIndex].items[itemIndex].required;
           this.expandableBlocks[itemIndex].formField.title;
-          const key = title.replace(/%/g, '');
+          const key = title === null || title === void 0 ? void 0 : title.replace(/%/g, '');
           const translationIndex = this.translations.findIndex((tran) => tran.key === key);
           if (translationIndex > -1) {
             title = this.translations[translationIndex][getCurrentLanguage()];
@@ -1498,6 +1500,9 @@ export class YooFormCreatorComponent {
       const fieldsToMove = [];
       const selectedFieldNames = [];
       selectedFields.forEach((selectedField) => {
+        if (slideIndex !== selectedField.slideIndex) {
+          this.currentSlides[selectedField.slideIndex].items[selectedField.itemIndex].isExpanded = false;
+        }
         fieldsToMove.push(this.currentSlides[selectedField.slideIndex].items[selectedField.itemIndex]);
         selectedFieldNames.push(this.currentSlides[selectedField.slideIndex].items[selectedField.itemIndex].name);
       });

package/dist/collection/components/form-creator/form-creator-block-expandable/form-creator-block-expandable.js

@@ -315,9 +315,6 @@ export class YooFormCreatorBlockExpandableComponent {
             if (this.contentBottomElement) {
               this.contentBottomElement.style.display = 'flex';
             }
-            if (this.arrowElement) {
-              this.arrowElement.name = this.isExpanded ? 'arrow-up' : 'arrow-down';
-            }
             gsapSet(slotContent, { overflow: 'unset' });
           },
           ease: Power3.easeIn
@@ -325,6 +322,9 @@ export class YooFormCreatorBlockExpandableComponent {
         const animationDelay = 0.5;
         this.isExpanded = shouldExpand;
         this.blockExpanded.emit({ expanded: shouldExpand, name: this.formField.name });
+        if (this.arrowElement) {
+          this.arrowElement.name = this.isExpanded ? 'arrow-up' : 'arrow-down';
+        }
         gsapFromTo(contentBlock, animationDelay, from, to);
       }
     }
@@ -1436,7 +1436,7 @@ export class YooFormCreatorBlockExpandableComponent {
       },
       "complexType": {
         "original": "{ name: string; icon: TIconName; category: string; title: string; index: number }",
-        "resolved": "{ name: string; icon: TIconName; category: string; title: string; index: number; }",
+        "resolved": "{ name: string; icon: \"number\" | \"calendar\" | \"toggle\" | \"info\" | \"warning\" | \"right\" | \"left\" | \"1x\" | \"2x\" | \"3x\" | \"4x\" | \"5x\" | \"achievement\" | \"action-plan\" | \"action-plan-create\" | \"activity\" | \"activity-history\" | \"aggregation\" | \"aisles\" | \"alarm\" | \"align-center\" | \"align-left\" | \"align-right\" | \"analysis\" | \"analytics-board-bars\" | \"analytics-boost\" | \"analytics-graph-line\" | \"answer\" | \"app-creator\" | \"apple-pay\" | \"archive\" | \"arrow-down\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"arrows-up-down\" | \"assign\" | \"assign-group\" | \"assigned\" | \"attach-file\" | \"attachment\" | \"audio-offline\" | \"audit\" | \"author\" | \"auto-flash\" | \"autocomplete\" | \"automotive-airplane\" | \"automotive-bus\" | \"automotive-car\" | \"automotive-cycle\" | \"automotive-gas\" | \"automotive-road\" | \"automotive-route\" | \"automotive-route-sign\" | \"automotive-scooter\" | \"automotive-shipping\" | \"award-trophy-star\" | \"background-off\" | \"background-on\" | \"badge\" | \"badge-book\" | \"badge-brain\" | \"badge-crown\" | \"badge-makeup-1\" | \"badge-stats\" | \"barcode\" | \"battery-status-bar\" | \"battle\" | \"beverages-beer\" | \"beverages-bottle\" | \"beverages-champagne\" | \"beverages-cocktail\" | \"beverages-coffee\" | \"beverages-drink\" | \"beverages-hot-drink\" | \"beverages-tropical-cocktail\" | \"beverages-water\" | \"beverages-wine\" | \"big-arrow-down\" | \"big-arrow-left\" | \"big-arrow-right\" | \"big-arrow-up\" | \"bigfont\" | \"blocks\" | \"bluetooth\" | \"bookmark\" | \"boost\" | \"branch\" | \"brush\" | \"buttons-single-choice\" | \"calendar-date\" | \"calendar-end-date\" | \"calendar-error\" | \"calendar-new-event\" | \"calendar-received\" | \"calendar-sent\" | \"calendar-warning\" | \"camera\" | \"campaign\" | \"campaign-create\" | \"campaign-filter\" | \"catalogue\" | \"catch-them\" | \"categories\" | \"chart\" | \"chat\" | \"chat-new\" | \"check\" | \"check-product\" | \"circle\" | \"circle-minor\" | \"circle-plus\" | \"circle1\" | \"circle2\" | \"close\" | \"color-picker\" | \"column\" | \"comment\" | \"community\" | \"company\" | \"compass-direction\" | \"condition\" | \"connect\" | \"contact\" | \"cosmetics-brush\" | \"cosmetics-brush-scissors\" | \"cosmetics-brush-set\" | \"cosmetics-comb\" | \"cosmetics-hairdryer\" | \"cosmetics-lips\" | \"cosmetics-lipstick\" | \"cosmetics-mirror\" | \"cosmetics-nail-polish\" | \"courses\" | \"create-chat\" | \"cross\" | \"custom\" | \"cut\" | \"daily\" | \"darkmode\" | \"dashboards\" | \"dashboards-new\" | \"data-file-add\" | \"database\" | \"database-add\" | \"database-check\" | \"database-download\" | \"database-edit\" | \"database-history\" | \"database-import\" | \"database-lock\" | \"database-question\" | \"database-refresh\" | \"database-remove\" | \"database-search\" | \"database-settings\" | \"database-star\" | \"database-subtract\" | \"database-sync\" | \"database-warning\" | \"date-time\" | \"day-view\" | \"delete\" | \"desktop\" | \"diagram-arrow-right\" | \"diploma\" | \"diploma-history\" | \"diploma-manager\" | \"diploma-new\" | \"dislike\" | \"dot\" | \"double-tick\" | \"down\" | \"down-circle\" | \"download\" | \"downloaded\" | \"draggable\" | \"duplicate\" | \"email\" | \"emoji\" | \"end-call\" | \"expand-chart\" | \"explore\" | \"export\" | \"eye\" | \"facebook\" | \"fashion-boot\" | \"fashion-bra\" | \"fashion-coat\" | \"fashion-dress\" | \"fashion-perfume\" | \"fashion-pump\" | \"fashion-shoe\" | \"fashion-t-shirt\" | \"fashion-trousers\" | \"fashion-women\" | \"feed\" | \"feed-create-post\" | \"feedback\" | \"feedback-neutral\" | \"feedback-sad\" | \"file\" | \"file-add\" | \"file-csv\" | \"file-download\" | \"file-excel\" | \"file-pdf\" | \"file-powerpoint\" | \"file-upload\" | \"file-word\" | \"filter\" | \"first\" | \"fixed\" | \"flag\" | \"flash-off\" | \"flash-on\" | \"flip\" | \"folder\" | \"folder-add\" | \"folder-download\" | \"folder-edit\" | \"folder-remove\" | \"folder-upload\" | \"food-apple\" | \"food-banana\" | \"food-bowl\" | \"food-carrot\" | \"food-cherry\" | \"food-egg\" | \"food-orange\" | \"food-pear\" | \"food-pineapple\" | \"food-strawberry\" | \"formula\" | \"forward\" | \"frame\" | \"full-height\" | \"furniture\" | \"geo-filter\" | \"gif\" | \"go-to\" | \"gps\" | \"grid-phone\" | \"grid-view\" | \"group\" | \"hashtag\" | \"heart\" | \"help\" | \"history\" | \"home\" | \"hotel-award\" | \"hotel-award-book\" | \"hotel-bed\" | \"hotel-bell\" | \"hotel-bellhop\" | \"hotel-building\" | \"hotel-dnd\" | \"hotel-room-service-1\" | \"hotel-room-service-2\" | \"hotel-room-service-3\" | \"hotzone\" | \"hourglass\" | \"hr\" | \"image\" | \"image-map\" | \"image-offline\" | \"import\" | \"inbox\" | \"incentive-manager\" | \"incentive-manager1\" | \"indeterminate\" | \"inquiry\" | \"instagram\" | \"instant-play\" | \"iphone\" | \"journey\" | \"keyboard\" | \"large-with-info\" | \"large-without-info\" | \"last\" | \"layout\" | \"leaderboard\" | \"learning-path\" | \"left-circle\" | \"left-web\" | \"lesson\" | \"like\" | \"link\" | \"link-broken\" | \"linkedin\" | \"list-view\" | \"livestream\" | \"loading\" | \"lock\" | \"logic\" | \"logic-visible\" | \"low-power\" | \"luxury-bag\" | \"luxury-bottle\" | \"luxury-gift\" | \"luxury-glasses\" | \"luxury-handbag\" | \"luxury-necklace\" | \"luxury-necklace-2\" | \"luxury-necklace-3\" | \"luxury-stars\" | \"luxury-watch\" | \"mandatory\" | \"map\" | \"maximize\" | \"maximize-web\" | \"medal\" | \"mention\" | \"menu\" | \"microphone\" | \"minimize\" | \"minimize-web\" | \"minus\" | \"missing-word\" | \"mission\" | \"mission-data\" | \"mission-download\" | \"month-view\" | \"monthly\" | \"more\" | \"more-2\" | \"more-circle\" | \"more-shapes\" | \"move\" | \"move-down\" | \"move-up\" | \"multiple-photos\" | \"mute-microphone\" | \"new-lesson\" | \"new-rectangle\" | \"new-section\" | \"new-task\" | \"news\" | \"next-photo\" | \"no-data\" | \"no-video\" | \"not-allowed\" | \"note\" | \"offline\" | \"offline-play\" | \"ongoing\" | \"operations\" | \"out-of-stock-product\" | \"pages\" | \"password\" | \"paste\" | \"pause\" | \"pause-audio\" | \"pen\" | \"personal-development\" | \"pharma-drug-box\" | \"pharma-first-aid\" | \"pharma-first-aid-kit\" | \"pharma-heartrate\" | \"pharma-hospital\" | \"pharma-iv-bag\" | \"pharma-medication\" | \"pharma-pill\" | \"pharma-pills-box\" | \"pharma-syringe\" | \"phone\" | \"phone-action-camera\" | \"photo-annotated\" | \"photo-library\" | \"photo-mandatory\" | \"pin\" | \"pin-new-site\" | \"pin-selected\" | \"pivot\" | \"play\" | \"play-audio\" | \"plugin\" | \"plus\" | \"podcast\" | \"poll\" | \"price-dollar\" | \"price-euro\" | \"price-sterling\" | \"print\" | \"priority\" | \"product\" | \"product-briefcase\" | \"profile\" | \"publish\" | \"pull-to-refresh\" | \"qr-code\" | \"question-new\" | \"questions\" | \"radio-button-off\" | \"radio-button-on\" | \"ranking\" | \"ranking-toggle\" | \"read\" | \"reason\" | \"recent\" | \"redo\" | \"refresh\" | \"rejected\" | \"rejector\" | \"repeat\" | \"request\" | \"restart\" | \"restaurant-bread\" | \"restaurant-chef\" | \"restaurant-croissant\" | \"restaurant-flatware\" | \"restaurant-grocery\" | \"restaurant-kitchen-bell\" | \"restaurant-knife-board\" | \"restaurant-menu\" | \"restaurant-platware-2\" | \"restaurant-vegetables-plate\" | \"restriction\" | \"right-circle\" | \"right-web\" | \"rotate-camera\" | \"rubber\" | \"sales\" | \"save\" | \"scale-rating\" | \"scan\" | \"schedule-user\" | \"schedule-view\" | \"scoring\" | \"scoring-visible\" | \"scratch\" | \"screenshare\" | \"search\" | \"search-product\" | \"security\" | \"select\" | \"select-all\" | \"send\" | \"send-story\" | \"settings\" | \"share\" | \"share-file\" | \"shipment-smartphone-arrive\" | \"shopping-basket\" | \"side-menu-collapse\" | \"side-menu-expand\" | \"sidebar-left\" | \"sidebar-right\" | \"signal-status-bar\" | \"signature\" | \"single-choice\" | \"single-view\" | \"slider\" | \"small-with-info\" | \"small-without-info\" | \"sms\" | \"sort-down\" | \"sort-up\" | \"sort-up-and-down\" | \"star\" | \"start-recording\" | \"start-rectangle\" | \"stats\" | \"step\" | \"stop-watch\" | \"store\" | \"store-archived\" | \"support\" | \"swipe-detail\" | \"swipe-explanation\" | \"sync-product\" | \"tab\" | \"table\" | \"tableau\" | \"tablet\" | \"tag\" | \"tags-settings\" | \"task\" | \"text-predefined\" | \"theme\" | \"tick\" | \"to-do\" | \"todo-boost\" | \"toggle-off-video\" | \"transaction\" | \"translate\" | \"translation-check\" | \"translation-warning\" | \"triangle\" | \"twitter\" | \"type-tool\" | \"unarchive\" | \"unassign\" | \"unassign-group\" | \"unbook\" | \"undo\" | \"unlocked\" | \"unread\" | \"up\" | \"up-circle\" | \"upgrade\" | \"upload\" | \"user\" | \"user-block\" | \"user-live\" | \"user-lock\" | \"user-new\" | \"validate\" | \"validation-date\" | \"validator\" | \"value\" | \"variable\" | \"verified\" | \"videocamera\" | \"view\" | \"virtual-queuing\" | \"visit\" | \"visual-merchandising\" | \"volume-off\" | \"volume-on\" | \"waiting-list\" | \"warning-2\" | \"warning-product\" | \"webcam\" | \"week-view\" | \"weekdays\" | \"weekly\" | \"weeks\" | \"wifi-status-bar\" | \"word-search\" | \"workflow\" | \"yearly\" | \"yoobic\" | \"zip-file\" | \"zoom-in\" | \"zoom-out\"; category: string; title: string; index: number; }",
         "references": {
           "TIconName": {
             "location": "import",

package/dist/collection/components/form-creator/form-creator-overlay/form-creator-overlay.js

@@ -128,7 +128,7 @@ export class YooFormCreatorOverlayComponent {
       "mutable": false,
       "complexType": {
         "original": "{ name: string; icon: TIconName; category: string; title: string; index: number }",
-        "resolved": "{ name: string; icon: TIconName; category: string; title: string; index: number; }",
+        "resolved": "{ name: string; icon: \"number\" | \"calendar\" | \"toggle\" | \"info\" | \"warning\" | \"right\" | \"left\" | \"1x\" | \"2x\" | \"3x\" | \"4x\" | \"5x\" | \"achievement\" | \"action-plan\" | \"action-plan-create\" | \"activity\" | \"activity-history\" | \"aggregation\" | \"aisles\" | \"alarm\" | \"align-center\" | \"align-left\" | \"align-right\" | \"analysis\" | \"analytics-board-bars\" | \"analytics-boost\" | \"analytics-graph-line\" | \"answer\" | \"app-creator\" | \"apple-pay\" | \"archive\" | \"arrow-down\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"arrows-up-down\" | \"assign\" | \"assign-group\" | \"assigned\" | \"attach-file\" | \"attachment\" | \"audio-offline\" | \"audit\" | \"author\" | \"auto-flash\" | \"autocomplete\" | \"automotive-airplane\" | \"automotive-bus\" | \"automotive-car\" | \"automotive-cycle\" | \"automotive-gas\" | \"automotive-road\" | \"automotive-route\" | \"automotive-route-sign\" | \"automotive-scooter\" | \"automotive-shipping\" | \"award-trophy-star\" | \"background-off\" | \"background-on\" | \"badge\" | \"badge-book\" | \"badge-brain\" | \"badge-crown\" | \"badge-makeup-1\" | \"badge-stats\" | \"barcode\" | \"battery-status-bar\" | \"battle\" | \"beverages-beer\" | \"beverages-bottle\" | \"beverages-champagne\" | \"beverages-cocktail\" | \"beverages-coffee\" | \"beverages-drink\" | \"beverages-hot-drink\" | \"beverages-tropical-cocktail\" | \"beverages-water\" | \"beverages-wine\" | \"big-arrow-down\" | \"big-arrow-left\" | \"big-arrow-right\" | \"big-arrow-up\" | \"bigfont\" | \"blocks\" | \"bluetooth\" | \"bookmark\" | \"boost\" | \"branch\" | \"brush\" | \"buttons-single-choice\" | \"calendar-date\" | \"calendar-end-date\" | \"calendar-error\" | \"calendar-new-event\" | \"calendar-received\" | \"calendar-sent\" | \"calendar-warning\" | \"camera\" | \"campaign\" | \"campaign-create\" | \"campaign-filter\" | \"catalogue\" | \"catch-them\" | \"categories\" | \"chart\" | \"chat\" | \"chat-new\" | \"check\" | \"check-product\" | \"circle\" | \"circle-minor\" | \"circle-plus\" | \"circle1\" | \"circle2\" | \"close\" | \"color-picker\" | \"column\" | \"comment\" | \"community\" | \"company\" | \"compass-direction\" | \"condition\" | \"connect\" | \"contact\" | \"cosmetics-brush\" | \"cosmetics-brush-scissors\" | \"cosmetics-brush-set\" | \"cosmetics-comb\" | \"cosmetics-hairdryer\" | \"cosmetics-lips\" | \"cosmetics-lipstick\" | \"cosmetics-mirror\" | \"cosmetics-nail-polish\" | \"courses\" | \"create-chat\" | \"cross\" | \"custom\" | \"cut\" | \"daily\" | \"darkmode\" | \"dashboards\" | \"dashboards-new\" | \"data-file-add\" | \"database\" | \"database-add\" | \"database-check\" | \"database-download\" | \"database-edit\" | \"database-history\" | \"database-import\" | \"database-lock\" | \"database-question\" | \"database-refresh\" | \"database-remove\" | \"database-search\" | \"database-settings\" | \"database-star\" | \"database-subtract\" | \"database-sync\" | \"database-warning\" | \"date-time\" | \"day-view\" | \"delete\" | \"desktop\" | \"diagram-arrow-right\" | \"diploma\" | \"diploma-history\" | \"diploma-manager\" | \"diploma-new\" | \"dislike\" | \"dot\" | \"double-tick\" | \"down\" | \"down-circle\" | \"download\" | \"downloaded\" | \"draggable\" | \"duplicate\" | \"email\" | \"emoji\" | \"end-call\" | \"expand-chart\" | \"explore\" | \"export\" | \"eye\" | \"facebook\" | \"fashion-boot\" | \"fashion-bra\" | \"fashion-coat\" | \"fashion-dress\" | \"fashion-perfume\" | \"fashion-pump\" | \"fashion-shoe\" | \"fashion-t-shirt\" | \"fashion-trousers\" | \"fashion-women\" | \"feed\" | \"feed-create-post\" | \"feedback\" | \"feedback-neutral\" | \"feedback-sad\" | \"file\" | \"file-add\" | \"file-csv\" | \"file-download\" | \"file-excel\" | \"file-pdf\" | \"file-powerpoint\" | \"file-upload\" | \"file-word\" | \"filter\" | \"first\" | \"fixed\" | \"flag\" | \"flash-off\" | \"flash-on\" | \"flip\" | \"folder\" | \"folder-add\" | \"folder-download\" | \"folder-edit\" | \"folder-remove\" | \"folder-upload\" | \"food-apple\" | \"food-banana\" | \"food-bowl\" | \"food-carrot\" | \"food-cherry\" | \"food-egg\" | \"food-orange\" | \"food-pear\" | \"food-pineapple\" | \"food-strawberry\" | \"formula\" | \"forward\" | \"frame\" | \"full-height\" | \"furniture\" | \"geo-filter\" | \"gif\" | \"go-to\" | \"gps\" | \"grid-phone\" | \"grid-view\" | \"group\" | \"hashtag\" | \"heart\" | \"help\" | \"history\" | \"home\" | \"hotel-award\" | \"hotel-award-book\" | \"hotel-bed\" | \"hotel-bell\" | \"hotel-bellhop\" | \"hotel-building\" | \"hotel-dnd\" | \"hotel-room-service-1\" | \"hotel-room-service-2\" | \"hotel-room-service-3\" | \"hotzone\" | \"hourglass\" | \"hr\" | \"image\" | \"image-map\" | \"image-offline\" | \"import\" | \"inbox\" | \"incentive-manager\" | \"incentive-manager1\" | \"indeterminate\" | \"inquiry\" | \"instagram\" | \"instant-play\" | \"iphone\" | \"journey\" | \"keyboard\" | \"large-with-info\" | \"large-without-info\" | \"last\" | \"layout\" | \"leaderboard\" | \"learning-path\" | \"left-circle\" | \"left-web\" | \"lesson\" | \"like\" | \"link\" | \"link-broken\" | \"linkedin\" | \"list-view\" | \"livestream\" | \"loading\" | \"lock\" | \"logic\" | \"logic-visible\" | \"low-power\" | \"luxury-bag\" | \"luxury-bottle\" | \"luxury-gift\" | \"luxury-glasses\" | \"luxury-handbag\" | \"luxury-necklace\" | \"luxury-necklace-2\" | \"luxury-necklace-3\" | \"luxury-stars\" | \"luxury-watch\" | \"mandatory\" | \"map\" | \"maximize\" | \"maximize-web\" | \"medal\" | \"mention\" | \"menu\" | \"microphone\" | \"minimize\" | \"minimize-web\" | \"minus\" | \"missing-word\" | \"mission\" | \"mission-data\" | \"mission-download\" | \"month-view\" | \"monthly\" | \"more\" | \"more-2\" | \"more-circle\" | \"more-shapes\" | \"move\" | \"move-down\" | \"move-up\" | \"multiple-photos\" | \"mute-microphone\" | \"new-lesson\" | \"new-rectangle\" | \"new-section\" | \"new-task\" | \"news\" | \"next-photo\" | \"no-data\" | \"no-video\" | \"not-allowed\" | \"note\" | \"offline\" | \"offline-play\" | \"ongoing\" | \"operations\" | \"out-of-stock-product\" | \"pages\" | \"password\" | \"paste\" | \"pause\" | \"pause-audio\" | \"pen\" | \"personal-development\" | \"pharma-drug-box\" | \"pharma-first-aid\" | \"pharma-first-aid-kit\" | \"pharma-heartrate\" | \"pharma-hospital\" | \"pharma-iv-bag\" | \"pharma-medication\" | \"pharma-pill\" | \"pharma-pills-box\" | \"pharma-syringe\" | \"phone\" | \"phone-action-camera\" | \"photo-annotated\" | \"photo-library\" | \"photo-mandatory\" | \"pin\" | \"pin-new-site\" | \"pin-selected\" | \"pivot\" | \"play\" | \"play-audio\" | \"plugin\" | \"plus\" | \"podcast\" | \"poll\" | \"price-dollar\" | \"price-euro\" | \"price-sterling\" | \"print\" | \"priority\" | \"product\" | \"product-briefcase\" | \"profile\" | \"publish\" | \"pull-to-refresh\" | \"qr-code\" | \"question-new\" | \"questions\" | \"radio-button-off\" | \"radio-button-on\" | \"ranking\" | \"ranking-toggle\" | \"read\" | \"reason\" | \"recent\" | \"redo\" | \"refresh\" | \"rejected\" | \"rejector\" | \"repeat\" | \"request\" | \"restart\" | \"restaurant-bread\" | \"restaurant-chef\" | \"restaurant-croissant\" | \"restaurant-flatware\" | \"restaurant-grocery\" | \"restaurant-kitchen-bell\" | \"restaurant-knife-board\" | \"restaurant-menu\" | \"restaurant-platware-2\" | \"restaurant-vegetables-plate\" | \"restriction\" | \"right-circle\" | \"right-web\" | \"rotate-camera\" | \"rubber\" | \"sales\" | \"save\" | \"scale-rating\" | \"scan\" | \"schedule-user\" | \"schedule-view\" | \"scoring\" | \"scoring-visible\" | \"scratch\" | \"screenshare\" | \"search\" | \"search-product\" | \"security\" | \"select\" | \"select-all\" | \"send\" | \"send-story\" | \"settings\" | \"share\" | \"share-file\" | \"shipment-smartphone-arrive\" | \"shopping-basket\" | \"side-menu-collapse\" | \"side-menu-expand\" | \"sidebar-left\" | \"sidebar-right\" | \"signal-status-bar\" | \"signature\" | \"single-choice\" | \"single-view\" | \"slider\" | \"small-with-info\" | \"small-without-info\" | \"sms\" | \"sort-down\" | \"sort-up\" | \"sort-up-and-down\" | \"star\" | \"start-recording\" | \"start-rectangle\" | \"stats\" | \"step\" | \"stop-watch\" | \"store\" | \"store-archived\" | \"support\" | \"swipe-detail\" | \"swipe-explanation\" | \"sync-product\" | \"tab\" | \"table\" | \"tableau\" | \"tablet\" | \"tag\" | \"tags-settings\" | \"task\" | \"text-predefined\" | \"theme\" | \"tick\" | \"to-do\" | \"todo-boost\" | \"toggle-off-video\" | \"transaction\" | \"translate\" | \"translation-check\" | \"translation-warning\" | \"triangle\" | \"twitter\" | \"type-tool\" | \"unarchive\" | \"unassign\" | \"unassign-group\" | \"unbook\" | \"undo\" | \"unlocked\" | \"unread\" | \"up\" | \"up-circle\" | \"upgrade\" | \"upload\" | \"user\" | \"user-block\" | \"user-live\" | \"user-lock\" | \"user-new\" | \"validate\" | \"validation-date\" | \"validator\" | \"value\" | \"variable\" | \"verified\" | \"videocamera\" | \"view\" | \"virtual-queuing\" | \"visit\" | \"visual-merchandising\" | \"volume-off\" | \"volume-on\" | \"waiting-list\" | \"warning-2\" | \"warning-product\" | \"webcam\" | \"week-view\" | \"weekdays\" | \"weekly\" | \"weeks\" | \"wifi-status-bar\" | \"word-search\" | \"workflow\" | \"yearly\" | \"yoobic\" | \"zip-file\" | \"zoom-in\" | \"zoom-out\"; category: string; title: string; index: number; }",
         "references": {
           "TIconName": {
             "location": "import",

package/dist/collection/components/grid/ag-grid/grid-renderers.js

@@ -46,7 +46,7 @@ function defaultRenderer(params) {
     if (params.isExport) {
       return translateFunction(stripHtml((retVal === null || retVal === void 0 ? void 0 : retVal.toString()) || ''));
     }
-    return color ? `<yoo-tag custom-color="${color}">${translateFunction(retVal.toString())}</yoo-tag>` : ('<div>' + translateFunction(retVal.toString()) + '</div>');
+    return color ? `<yoo-tag custom-color="${color}">${translateFunction(retVal.toString())}</yoo-tag>` : '<div>' + translateFunction(retVal.toString()) + '</div>';
   }
 }
 function exportRenderer(params) {
@@ -147,7 +147,12 @@ function truncateRenderer(params, extraHtml) {
   tooltip.setAttribute('hoverable', 'true');
   let content = (isArray(params.value) ? params.value.join(', ') : params.value) || '';
   if (extraHtml) {
-    content = '<div style="white-space: nowrap;display:flex">' + extraHtml + '<span style="white-space:nowrap;flex:1;;overflow:hidden;text-overflow:ellipsis;">' + content + '</span></div>';
+    content =
+      '<div style="white-space: nowrap;display:flex">' +
+        extraHtml +
+        '<span style="white-space:nowrap;flex:1;;overflow:hidden;text-overflow:ellipsis;">' +
+        content +
+        '</span></div>';
   }
   tooltip.content = content;
   tooltip.placement = 'bottom';
@@ -284,7 +289,9 @@ function percentageRenderer(params) {
 }
 function currencyRenderer(params) {
   const value = params.value;
-  return isNumber(value) ? pipes.currency.transform(value, params.numberPrecision, params.symbol, params.forceSymbol) : value.toString();
+  return isNumber(value)
+    ? pipes.currency.transform(value, { strictPrecision: params.numberPrecision, customSymbol: params.symbol, forceSymbol: params.forceSymbol })
+    : value.toString();
 }
 function durationRenderer(params) {
   const value = params.value;
@@ -500,7 +507,13 @@ function starratingRenderer(params) {
   if ((_b = (_a = params.colDef) === null || _a === void 0 ? void 0 : _a.cellRendererParams) === null || _b === void 0 ? void 0 : _b.max) {
     max = params.colDef.cellRendererParams.max;
   }
-  return '<yoo-form-star-rating class="ag-cell-image app-color" readonly="true" type="' + (((_d = (_c = params === null || params === void 0 ? void 0 : params.colDef) === null || _c === void 0 ? void 0 : _c.fieldDefinition) === null || _d === void 0 ? void 0 : _d.useButtons) ? 'button' : 'star') + '" max="' + max + '" value="' + params.value + '"></yoo-form-star-rating>';
+  return ('<yoo-form-star-rating class="ag-cell-image app-color" readonly="true" type="' +
+    (((_d = (_c = params === null || params === void 0 ? void 0 : params.colDef) === null || _c === void 0 ? void 0 : _c.fieldDefinition) === null || _d === void 0 ? void 0 : _d.useButtons) ? 'button' : 'star') +
+    '" max="' +
+    max +
+    '" value="' +
+    params.value +
+    '"></yoo-form-star-rating>');
 }
 function jsonRenderer(params) {
   const json = getJSONHighlighted(params.value);
@@ -730,6 +743,11 @@ function folderIconRenderer(params) {
   }
   return truncateRenderer({ value: folder.name, maxLine: 1 }, img);
 }
+function entityArrayTextRenderer(params) {
+  const entities = compact([].concat(params.value));
+  const value = entities.map((e) => get(e, params.fieldName)).join(', ');
+  return truncateRenderer({ ...params, value });
+}
 function buttonRenderer(params) {
   var _a;
   if ((_a = params.colDef) === null || _a === void 0 ? void 0 : _a.cellRendererParams) {
@@ -904,7 +922,11 @@ function progressRenderer(params) {
 export function progressValue(node) {
   var _a, _b;
   if ((_b = (_a = node.aggData) === null || _a === void 0 ? void 0 : _a.status) === null || _b === void 0 ? void 0 : _b.counts) {
-    const retVal = Math.round(((node.aggData.status.counts.finished || 0) * 100) / ((node.aggData.status.counts.finished || 0) + (node.aggData.status.counts.available || 0) + (node.aggData.status.counts.pausedmission || 0) + (node.aggData.status.counts.scheduled || 0)));
+    const retVal = Math.round(((node.aggData.status.counts.finished || 0) * 100) /
+      ((node.aggData.status.counts.finished || 0) +
+        (node.aggData.status.counts.available || 0) +
+        (node.aggData.status.counts.pausedmission || 0) +
+        (node.aggData.status.counts.scheduled || 0)));
     return isNaN(retVal) ? 0 : retVal;
   }
   return 0;
@@ -1389,6 +1411,8 @@ export function getRenderer(renderer) {
       return pricecheckRenderer;
     case 'folderIconRenderer':
       return folderIconRenderer;
+    case 'entityArrayTextRenderer':
+      return entityArrayTextRenderer;
     case 'campaignStatusRenderer':
       return campaignStatusRenderer;
     case 'missionStatusOnlyRenderer':