@yoobic/yobi 8.3.0-4 → 8.3.0-41

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

@@ -1,10 +1,10 @@
+import { SwipeCardsDirection, SwipeCardsMode } from '@shared/interfaces';
 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';
 import { setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
-import { SwipeCardsDirection, SwipeCardsMode } from './form-swipe-cards.interfaces';
 export class YooFormSwipeCardsComponent {
   constructor() {
     this.validators = [];
@@ -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"; }
@@ -646,7 +643,7 @@ export class YooFormSwipeCardsComponent {
         "references": {
           "SwipeCardsMode": {
             "location": "import",
-            "path": "./form-swipe-cards.interfaces"
+            "path": "@shared/interfaces"
           }
         }
       },

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\" | \"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\"",
         "references": {
           "EntityType": {
             "location": "import",
@@ -456,7 +456,7 @@ export class YooFormTableComponent {
       "mutable": false,
       "complexType": {
         "original": "CardType",
-        "resolved": "\"calendar\" | \"card-calendar\" | \"card-battle\" | \"card-battle-result\" | \"card-campaign\" | \"card-cell\" | \"card-cell-color\" | \"card-cell-image\" | \"card-chat\" | \"card-course\" | \"card-course-info\" | \"card-course-row\" | \"card-course-row-compact\" | \"card-default\" | \"card-feed\" | \"card-feed-row\" | \"card-file\" | \"card-grid\" | \"card-image\" | \"card-inbox\" | \"card-inbox-ongoing\" | \"card-incentive\" | \"card-incentive-rank\" | \"card-kanban\" | \"card-list\" | \"card-list-color\" | \"card-location\" | \"card-map\" | \"card-media\" | \"card-menu\" | \"card-notification\" | \"card-plan\" | \"card-recommendation\" | \"card-sticky\" | \"card-tag\" | \"card-tag-single\" | \"card-template\" | \"kanban\" | \"tree\"",
+        "resolved": "\"calendar\" | \"card-calendar\" | \"card-battle\" | \"card-battle-result\" | \"card-campaign\" | \"card-cell\" | \"card-cell-color\" | \"card-cell-image\" | \"card-chat\" | \"card-course\" | \"card-course-info\" | \"card-course-row\" | \"card-course-row-compact\" | \"card-default\" | \"card-feed\" | \"card-feed-row\" | \"card-file\" | \"card-grid\" | \"card-image\" | \"card-inbox\" | \"card-inbox-ongoing\" | \"card-incentive\" | \"card-incentive-rank\" | \"card-kanban\" | \"card-list\" | \"card-list-color\" | \"card-list-simple\" | \"card-location\" | \"card-map\" | \"card-media\" | \"card-menu\" | \"card-notification\" | \"card-plan\" | \"card-recommendation\" | \"card-sticky\" | \"card-tag\" | \"card-tag-single\" | \"card-template\" | \"kanban\" | \"tree\"",
         "references": {
           "CardType": {
             "location": "import",

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

@@ -410,6 +410,10 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   border: none;
 }
 
+:host([size=small]) {
+  --textarea-placeholder-font-size: var(--font-size-14, 0.875rem);
+}
+
 :host([size=medium]) .outer-container textarea {
   min-height: 0.5rem;
   font-size: var(--font-size-14, 0.875rem);

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

@@ -1,6 +1,7 @@
 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 { isString } from 'lodash-es';
 import { getAppContext, sanitizeHTML } from '../../../utils/helpers/common-helpers';
 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';
@@ -123,6 +124,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;
@@ -232,10 +236,11 @@ export class YooFormTextAreaComponent {
     if (isNativeMobile() && Keyboard) {
       Keyboard.hide();
     }
-    getAsyncExtraData({ type: 'mention', params: { otherIds: this.otherIds } }).then((res) => {
-      if (res && res.data) {
+    getAsyncExtraData({ type: 'mention', params: { otherIds: this.otherIds, mentionConfigs: this.mentionConfigs } }).then((res) => {
+      var _a;
+      if (res === null || res === void 0 ? void 0 : res.data) {
         this.mentionedUsers = res.data;
-        if (this.mentionedUsers && this.mentionedUsers.length > 0) {
+        if (((_a = this.mentionedUsers) === null || _a === void 0 ? void 0 : _a.length) > 0) {
           const newElement = this.mentionedUsers.map((user) => {
             return getTagHTML(user);
           });
@@ -272,7 +277,7 @@ export class YooFormTextAreaComponent {
   }
   setLocalValue() {
     var _a;
-    if (((_a = this.translations) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.value) {
+    if (((_a = this.translations) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.value && isString(this.value)) {
       const key = this.value.replace(/%/g, '');
       const translationIndex = this.translations.findIndex((tran) => { var _a; return tran.key === key || tran.key === ((_a = this.translationKey) === null || _a === void 0 ? void 0 : _a.replace(/%/g, '')); });
       if (translationIndex > -1) {
@@ -880,6 +885,21 @@ export class YooFormTextAreaComponent {
       "attribute": "allow-mention",
       "reflect": false
     },
+    "mentionConfigs": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "{ type: string, id: string }",
+        "resolved": "{ type: string; id: string; }",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
     "translations": {
       "type": "unknown",
       "mutable": false,

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';
@@ -62,9 +62,9 @@ export class YooFormTextEditorComponent {
     this.linkPreviews = [];
     this.formatAmpersandSymbol = false;
     this.allowLinkPreview = false;
-    this.resetHtml = false;
+    this.resetHtml = true;
     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.
@@ -159,7 +159,7 @@ export class YooFormTextEditorComponent {
   }
   setLocalValue(forceRerender = false) {
     var _a;
-    if (((_a = this.translations) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.value) {
+    if (((_a = this.translations) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.value && isString(this.value)) {
       const key = this.translationKey ? this.translationKey.replace(/%/g, '') : this.value.replace(/%/g, '');
       const keyRemovedHTML = key === null || key === void 0 ? void 0 : key.replace(/(<([^>]+)>)/ig, '');
       const translationIndex = this.translations.findIndex((tran) => tran.key === key || keyRemovedHTML === tran.key);
@@ -678,30 +678,30 @@ export class YooFormTextEditorComponent {
   onHandleMentionInput(offset, insertElement) {
     var _a;
     (_a = this.editor) === null || _a === void 0 ? void 0 : _a.el.blur();
-    getAsyncExtraData({ type: 'mention', params: { otherIds: this.otherIds } }).then((res) => {
-      var _a, _b, _c;
-      if (res && res.data) {
+    getAsyncExtraData({ type: 'mention', params: { otherIds: this.otherIds, mentionConfigs: this.mentionConfigs } }).then((res) => {
+      var _a, _b, _c, _d;
+      if (res === null || res === void 0 ? void 0 : res.data) {
         this.mentionedUsers = res.data;
-        if (this.mentionedUsers && this.mentionedUsers.length > 0) {
+        if (((_a = this.mentionedUsers) === null || _a === void 0 ? void 0 : _a.length) > 0) {
           const newElement = this.mentionedUsers.map((user) => {
             var _a;
             return getTagHTML(user, (_a = this.editor) === null || _a === void 0 ? void 0 : _a.doc);
           });
           const insertParams = {
-            parentElement: (insertElement === null || insertElement === void 0 ? void 0 : insertElement.parentElement) || ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.el),
+            parentElement: (insertElement === null || insertElement === void 0 ? void 0 : insertElement.parentElement) || ((_b = this.editor) === null || _b === void 0 ? void 0 : _b.el),
             newElement,
             withReplace: true,
             withSpace: true,
             insertElement,
             offset,
             replaceFirstOnly: true,
-            doc: (_b = this.editor) === null || _b === void 0 ? void 0 : _b.doc
+            doc: (_c = this.editor) === null || _c === void 0 ? void 0 : _c.doc
           };
           safeInsertElements(insertParams);
           // update mention list
           this.syncMentionIds();
           // combine all text node
-          (_c = this.editor) === null || _c === void 0 ? void 0 : _c.el.normalize();
+          (_d = this.editor) === null || _d === void 0 ? void 0 : _d.el.normalize();
           this.onSaveTextEditorValue();
           setTimeout(() => {
             var _a;
@@ -1032,7 +1032,7 @@ export class YooFormTextEditorComponent {
       },
       "attribute": "reset-html",
       "reflect": false,
-      "defaultValue": "false"
+      "defaultValue": "true"
     },
     "isFullscreen": {
       "type": "boolean",
@@ -1085,7 +1085,7 @@ export class YooFormTextEditorComponent {
       },
       "attribute": "custom-z-index",
       "reflect": false,
-      "defaultValue": "20000"
+      "defaultValue": "MODAL_BASE_ZINDEX"
     },
     "translations": {
       "type": "unknown",
@@ -1157,6 +1157,21 @@ export class YooFormTextEditorComponent {
       },
       "attribute": "debounce",
       "reflect": false
+    },
+    "mentionConfigs": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "{ type: string, id: string }",
+        "resolved": "{ type: string; id: string; }",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
     }
   }; }
   static get events() { return [{

package/dist/collection/components/form/form-todo-dialog/form-todo-dialog.js

@@ -1,4 +1,4 @@
-import { closeModal, disableKeyboardResize, enableKeyboardResize, isKeyboardResizeModeInactive, isNativeMobile, isPresent, isWeb, pipes, showActionSheet, showAlert, showModal, translate, translateMulti } from '@shared/utils';
+import { closeModal, disableKeyboardResize, enableKeyboardResize, getUUID, isKeyboardResizeModeInactive, isNativeMobile, isPresent, isWeb, pipes, showActionSheet, showAlert, showModal, translate, translateMulti } from '@shared/utils';
 import { Component, Element, forceUpdate, h, Host, Listen, Prop, State } from '@stencil/core';
 import { cloneDeep, remove } from 'lodash-es';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
@@ -55,6 +55,7 @@ export class YooFormTodoDialogComponent {
     if (this.currentTask) {
       this.todo.values = this.todo.values || [];
       this.todo.values.push({
+        _id: getUUID(),
         text: { value: this.currentTask },
         finished: { value: null },
         isphotorequired: { value: this.allPhotosRequired === true },