@yoobic/yobi 8.3.0-3 → 8.3.0-32

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

@@ -1,7 +1,6 @@
 import { Draggable, getUUID, gsapTo, isImageUrl, translateMulti } from '@shared/utils';
 import { Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';
 import { difference, isEqual, shuffle } from 'lodash-es';
-import { getAppContext } from '../../../utils/helpers/common-helpers';
 import { showWarningAlert } from '../../../utils/helpers/draggable-tags-helpers';
 import { setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
 import { CONNECT_TYPES } from './form-connect.interfaces';
@@ -25,8 +24,10 @@ export class YooFormConnectComponent {
     this.isVisible = false;
     this.colors = ['warning', 'accent', 'app-color', 'info', 'energized'];
   }
-  onValuesChanged() {
-    showWarningAlert(this.host, !this.isGameMatchable, 'NOTALLPAIREDVALUES');
+  async onValuesChanged() {
+    var _a;
+    showWarningAlert(this.host, ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) > 1 && !this.isGamePairable, 'NOTALLPAIREDVALUES');
+    await this.scrollToRevealGame();
   }
   onValidityChanged() {
     this.validityChanged.emit(this.validity);
@@ -40,19 +41,16 @@ export class YooFormConnectComponent {
   initAnswerChanged() {
     this.prepareGame();
   }
-  async onIsVisibleChanged(state) {
-    if (state) {
-      await this.scrollToRevealGame();
-      this.setScrollableHeight();
-    }
+  async onIsVisibleChanged() {
+    this.isVisible && this.scrollToRevealGame();
   }
   get hasValues() {
     var _a, _b, _c, _d;
     return !!(((_b = (_a = this.values) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.length) || ((_d = (_c = this.values) === null || _c === void 0 ? void 0 : _c[1]) === null || _d === void 0 ? void 0 : _d.length));
   }
-  get isGameMatchable() {
+  get isGamePairable() {
     var _a, _b, _c, _d, _e, _f;
-    return ((_c = (_b = (_a = this.values) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.filter(v => v)) === null || _c === void 0 ? void 0 : _c.length) === ((_f = (_e = (_d = this.values) === null || _d === void 0 ? void 0 : _d[1]) === null || _e === void 0 ? void 0 : _e.filter(v => v)) === null || _f === void 0 ? void 0 : _f.length);
+    return ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) && ((_c = (_b = this.values[0]) === null || _b === void 0 ? void 0 : _b.filter(v => v)) === null || _c === void 0 ? void 0 : _c.length) === ((_f = (_e = (_d = this.values) === null || _d === void 0 ? void 0 : _d[1]) === null || _e === void 0 ? void 0 : _e.filter(v => v)) === null || _f === void 0 ? void 0 : _f.length);
   }
   get draggableElements() {
     return Array.from(this.host.shadowRoot.querySelectorAll('.draggable') || []);
@@ -73,45 +71,49 @@ export class YooFormConnectComponent {
     this.initGame();
   }
   prepareGame() {
-    this.prepareItems();
+    this.prepareData();
     this.connectItems();
-    this.shuffleItems();
+    this.shuffleData();
   }
   async initGame() {
     await this.scrollToRevealGame();
-    this.setScrollableHeight();
     this.setDraggableObserver();
     this.initDraggables();
-    showWarningAlert(this.host, !this.isGameMatchable, 'NOTALLPAIREDVALUES');
   }
   initDraggables() {
     var _a;
     (_a = this.draggableElements) === null || _a === void 0 ? void 0 : _a.forEach(e => this.initDraggableActions(e));
   }
   async scrollToRevealGame() {
-    const scrollElement = this.host.closest('yoo-ion-scroll');
-    return scrollElement && !this.livePreview && new Promise(resolve => {
-      setTimeout(() => {
-        scrollElement.scrollTo({ top: scrollElement.scrollHeight, behavior: 'smooth' });
-        resolve();
-      }, 1000);
-    });
-  }
-  setScrollableHeight() {
-    var _a, _b, _c, _d, _e, _f, _g;
     const GAP_PADDING = 8;
-    const { bottom } = this.host.getBoundingClientRect();
-    const numberOfItems = ((_b = (_a = this.values) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.length) || 0;
-    const formBounding = (_c = this.host.closest('form')) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
-    const itemHeight = ((_e = (_d = this.innerContainerElement) === null || _d === void 0 ? void 0 : _d.querySelector('[id]')) === null || _e === void 0 ? void 0 : _e.clientHeight) + GAP_PADDING + GAP_PADDING / numberOfItems + 1;
-    if (itemHeight && formBounding && bottom > formBounding.bottom && ((_g = (_f = this.values) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.length)) {
-      const maxItems = Math.floor(formBounding.height / itemHeight);
-      const maxHeight = maxItems * itemHeight + (maxItems + 1) * GAP_PADDING;
-      this.innerContainerElement.style.maxHeight = `${Math.min(formBounding.height, maxHeight + GAP_PADDING)}px`;
+    const scrollElement = this.host.closest('yoo-ion-scroll');
+    if (scrollElement && this.values.length === 2) {
+      const setScrollableHeight = () => {
+        const getHeight = (el) => { var _a; return (_a = el === null || el === void 0 ? void 0 : el.getBoundingClientRect()) === null || _a === void 0 ? void 0 : _a.height; };
+        const formHeight = getHeight(this.host.closest('yoo-form-input-container'));
+        const tileHeight = getHeight(this.innerContainerElement.querySelector('[type]'));
+        if (formHeight && tileHeight && !this.readonly) {
+          const numberItems = Math.max(this.values[0].length, this.values[1].length);
+          const itemsHeight = numberItems * tileHeight + (numberItems + 1) * GAP_PADDING;
+          this.innerContainerElement.classList.toggle('overflowing', itemsHeight > formHeight);
+          this.innerContainerElement.style.height = `${Math.min(formHeight, itemsHeight)}px`;
+        }
+      };
+      await new Promise(resolve => {
+        setTimeout(() => {
+          scrollElement.scrollTo({
+            top: scrollElement.scrollHeight,
+            behavior: 'smooth'
+          });
+          resolve();
+        }, 1000);
+      });
+      setScrollableHeight();
     }
   }
   setDraggableObserver() {
-    this.draggables = this.draggables.map(d => {
+    var _a;
+    this.draggables = ((_a = this.draggables) === null || _a === void 0 ? void 0 : _a.map(d => {
       return new Proxy(d, {
         set: (draggable, key, value) => {
           draggable[key] = value;
@@ -134,16 +136,16 @@ export class YooFormConnectComponent {
           return true;
         }
       });
-    });
+    })) || [];
   }
-  shuffleItems() {
+  shuffleData() {
     this.shuffled && CONNECT_TYPES.forEach(type => this[`${type}s`] = shuffle(this[`${type}s`]));
   }
-  prepareItems() {
+  prepareData() {
     CONNECT_TYPES.forEach((type, index) => {
       var _a, _b;
       this[`${type}s`] = ((_b = (_a = this.values) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.map((value, i) => ({
-        value,
+        value: typeof value === 'string' ? value : (value === null || value === void 0 ? void 0 : value['text']) || (value === null || value === void 0 ? void 0 : value['file']),
         id: getUUID(),
         ...(!index && {
           color: this.colors[i]
@@ -167,25 +169,25 @@ export class YooFormConnectComponent {
   }
   initDraggableActions(draggableElement) {
     var _a;
-    if (draggableElement) {
+    const currentDraggable = draggableElement && ((_a = this.draggables) === null || _a === void 0 ? void 0 : _a.find(({ id }) => id === draggableElement.id));
+    if (currentDraggable) {
       let tempConnectableElement;
-      const currentDraggable = (_a = this.draggables) === null || _a === void 0 ? void 0 : _a.find(d => (d === null || d === void 0 ? void 0 : d.id) === draggableElement.id);
       const onDragStartElement = () => {
         this.blockMoves.emit(true);
-        draggableElement.removeAttribute('data-hit');
+        draggableElement.removeAttribute('hit');
       };
       const onDragElement = () => {
         var _a, _b;
         const overlapThreshold = '65%';
         const { x, width } = draggableElement.getBoundingClientRect();
-        const connectableThreshold = this.innerContainerElement.querySelector('.connectables').getBoundingClientRect().x;
+        const connectableThreshold = this.innerContainerElement.querySelector('#connectables').getBoundingClientRect().x;
         const isInConnectableArea = x + width >= connectableThreshold;
         if (isInConnectableArea) {
           this.connectableElements.forEach(e => {
             var _a, _b;
             if (((_b = (_a = currentDraggable === null || currentDraggable === void 0 ? void 0 : currentDraggable.draggableInstance) === null || _a === void 0 ? void 0 : _a.hitTest) === null || _b === void 0 ? void 0 : _b.call(_a, e, overlapThreshold)) && e.id !== currentDraggable.connectableId) {
               tempConnectableElement = e;
-              tempConnectableElement.setAttribute('data-hit', 'true');
+              tempConnectableElement.setAttribute('hit', 'true');
             }
           });
         }
@@ -198,7 +200,7 @@ export class YooFormConnectComponent {
               color: 'var(--light)'
             });
           }
-          tempConnectableElement.removeAttribute('data-hit');
+          tempConnectableElement.removeAttribute('hit');
           tempConnectableElement = null;
         }
       };
@@ -206,13 +208,13 @@ export class YooFormConnectComponent {
         await gsapTo(draggableElement, this.animated ? 0.25 : 0, { x: 0, y: 0 });
         if (tempConnectableElement) {
           currentDraggable.connectableId = tempConnectableElement.id;
-          tempConnectableElement.removeAttribute('data-hit');
+          tempConnectableElement.removeAttribute('hit');
           this.autoCompleteLastConnection();
         }
         tempConnectableElement = null;
         this.blockMoves.emit(false);
       };
-      const onClickElement = () => {
+      const onClickElement = async () => {
         var _a;
         currentDraggable.hit = { value: !((_a = currentDraggable.hit) === null || _a === void 0 ? void 0 : _a.value) && !currentDraggable.connectableId };
         delete currentDraggable.connectableId;
@@ -220,7 +222,7 @@ export class YooFormConnectComponent {
         this.getUserAnswers();
         this.validateUserAnswers();
       };
-      if (!this.readonly && this.isGameMatchable && draggableElement) {
+      if (!this.readonly && this.isGamePairable && draggableElement) {
         currentDraggable.draggableInstance = new Draggable(draggableElement, {
           autoScroll: 1,
           bound: this.innerContainerElement,
@@ -237,7 +239,8 @@ export class YooFormConnectComponent {
   }
   validateUserAnswers(userAnswers = this.userAnswers) {
     this.validity = !(userAnswers === null || userAnswers === void 0 ? void 0 : userAnswers.reduce((acc, v) => acc + v.filter(i => !i).length, 0));
-    setValueAndValidateInput(userAnswers, this);
+    this.value = userAnswers;
+    setValueAndValidateInput(this.value, this);
   }
   autoEraseLastConnection() {
     const connectedDraggables = this.draggables.filter(d => d.connectableId);
@@ -278,29 +281,32 @@ export class YooFormConnectComponent {
   }
   renderContainer(name) {
     var _a;
-    return (h("section", { class: { [`${name}s`]: true } }, (_a = this[`${name}s`]) === null || _a === void 0 ? void 0 : _a.map((item) => {
+    return (h("section", { id: `${name}s` }, (_a = this[`${name}s`]) === null || _a === void 0 ? void 0 : _a.map((item) => {
       var _a;
       const isDraggable = name === 'draggable';
       const { id, value, connectableId, color } = item || {};
-      const isImage = !!(value && isImageUrl(value));
+      const isImage = value && isImageUrl(value);
       const connectable = this.draggables.find(d => d.connectableId === id);
       const isConnected = !!(connectableId || connectable);
       const tileColor = color || (connectable === null || connectable === void 0 ? void 0 : connectable.color);
       const connectedAttr = { style: { backgroundColor: `var(--${tileColor})`, color: 'var(--light)' }, connected: true };
-      return !!value && (h("div", { class: "tile-container" },
-        h("div", { ...(isConnected && connectedAttr), "data-hit": !!((_a = item === null || item === void 0 ? void 0 : item.hit) === null || _a === void 0 ? void 0 : _a.value) && isDraggable, id: id, key: id, class: { [name]: true, image: isImage }, onClick: () => { !isDraggable && this.onConnectableClick(item); } },
-          !isImage ? h("p", null, this.truncateValue(value)) : [h("yoo-img", { type: "background", src: value }), h("div", { class: "overlay" })],
-          this.readonly && this.renderCorrectionIcon(value))));
+      const tileAttr = { ...(isConnected && connectedAttr), hit: !!((_a = item === null || item === void 0 ? void 0 : item.hit) === null || _a === void 0 ? void 0 : _a.value) && isDraggable, type: isImage ? 'image' : 'text' };
+      return !!value && (h("div", { ...tileAttr, id: id, key: id, class: { [name]: true }, onClick: () => { !isDraggable && this.onConnectableClick(item); } },
+        !isImage ? h("p", null, this.truncateValue(value)) : [h("yoo-img", { type: "background", src: value }), h("div", { id: "overlay" })],
+        this.readonly && this.renderCorrectionIcon(value)));
     })));
   }
   renderBanner() {
     return this.livePreview && h("yoo-banner", null,
       h("p", { slot: "content" }));
   }
+  renderMain() {
+    return this.hasValues && h("main", { ref: element => (this.innerContainerElement = element) }, CONNECT_TYPES.map(type => this.renderContainer(type)));
+  }
   render() {
-    return this.hasValues && (h(Host, { class: getAppContext(this.host) },
+    return h(Host, null,
       this.renderBanner(),
-      h("div", { class: "inner-container", ref: (element) => (this.innerContainerElement = element) }, CONNECT_TYPES.map(type => this.renderContainer(type)))));
+      this.renderMain());
   }
   static get is() { return "yoo-form-connect"; }
   static get encapsulation() { return "shadow"; }
@@ -359,7 +365,7 @@ export class YooFormConnectComponent {
         "text": "true if the component is loaded within the preview mode in the course-creator"
       },
       "attribute": "live-preview",
-      "reflect": false
+      "reflect": true
     },
     "animated": {
       "type": "boolean",
@@ -376,7 +382,7 @@ export class YooFormConnectComponent {
         "text": "true if the component can have animations"
       },
       "attribute": "animated",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "true"
     },
     "shuffled": {

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

@@ -1,4 +1,4 @@
-import { ScreenOrientation } from '@ionic-native/screen-orientation';
+import { ScreenOrientation } from '@awesome-cordova-plugins/screen-orientation';
 import { changeExtension, closeModal, Cloudinary, dispatchCustomEvent, downloadFile, downloadFileToDevice, fileNativeCheckFile, getAsyncExtraData, getExtension, getNativeDirectory, getPermissions, getSession, getType, isAndroid, isAudio, isCloudinaryLink, isDateBefore, isDocumentDownloadSupported, isDocumentEmailSupported, isFile, isNativeMobile, isVideo, isWeb, pipes, showActionSheet, translate } from '@shared/utils';
 import { Component, Element, h, Host, Prop, State } from '@stencil/core';
 import { isString } from 'lodash-es';

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

@@ -531,6 +531,7 @@ export class YooFormDynamicComponent {
     lockSwipes(this.ionSlides, false);
     if (!this.slidesState || (this.slidesState[index] && !this.getSlideState(index).locked) || (this.isLivePreview() && this.slides[index])) {
       if (this.ionSlides) {
+        forceUpdate(this);
         await this.ionSlides.slideTo(this.showRecap !== false ? index + 1 : index, animated ? 200 : 0);
       }
       else if (this.isWeb) {
@@ -2640,7 +2641,7 @@ export class YooFormDynamicComponent {
             [fieldClass]: !!fieldClass && !renderSlideTitle,
             [field.mode]: field.mode && (field.type === FormFieldType.document || field.type === FormFieldType.image || field.type === FormFieldType.podcast),
             [field.type]: true
-          }, style: this.isInlineRow() || this.isInlineRowNarrow() ? inlineStyle : style },
+          }, key: field.name, style: this.isInlineRow() || this.isInlineRowNarrow() ? inlineStyle : style },
           !!(header === null || header === void 0 ? void 0 : header.length) && isFieldVisible && h("div", { class: { 'field-header': true }, style: field.headerStyle, innerHTML: translateMulti(header) }),
           isFieldVisible
             ? [
@@ -3154,6 +3155,7 @@ export class YooFormDynamicComponent {
         extraAttrs = {
           min: field.min,
           max: field.max,
+          allowDecimals: field.allowDecimals,
           maxCharacters: field.maxCharacters,
           type: field.type === FormFieldType.number && isSamsung() ? FormFieldType.text : getInputType(field),
           inputmode: field.type === FormFieldType.number && isSamsung() ? 'numeric' : '',
@@ -3342,11 +3344,15 @@ export class YooFormDynamicComponent {
           onFetchCustomData: (ev) => this.onFetchCustomData(field, ev),
           onExtraDataChanged: (ev) => this.onFieldExtraDataChanged(ev, field),
           customDataLoader: field.customDataLoader,
-          showHeader: field.showAutocompleteHeader
+          showHeader: field.showAutocompleteHeader,
+          dialogWidth: field.name !== 'operator' ? '17.5rem' : 'unset'
         };
         if (((field.min && field.min > 1) || (field.max && field.max > 0)) && attrs.validators) {
           attrs.validators.push({ name: field.type, options: { ...extraAttrs } });
         }
+        if (field.validateOnLoad) {
+          extraAttrs.validateOnLoad = true;
+        }
         if (field.originalFieldType === FormFieldType.tags) {
           extraAttrs.tag = true;
         }
@@ -3544,6 +3550,7 @@ export class YooFormDynamicComponent {
         extraAttrs = {
           maxRows: field.autoInitialRows ? undefined : 5,
           allowMention: field.allowMention,
+          mentionConfigs: field.mentionConfigs,
           autoInitialRows: field.autoInitialRows,
           allowLinkPreview: field.allowMention || field.allowLinkPreview,
           onMentionsChanged: (ev) => this.onFieldExtraDataChanged(ev, field),

package/dist/collection/components/form/form-dynamic/helpers/index.js

@@ -1,5 +1,6 @@
 import { FormFieldType } from '@shared/interfaces';
 import { isNativeMobile, isWeb, translate } from '@shared/utils';
+import { isNumber } from 'lodash-es';
 export function getFieldState(field, fieldsState) {
   return fieldsState[field.name] || {};
 }
@@ -7,18 +8,9 @@ export function getLessonPageValidity(index, slides, fieldsState, activeIndex, c
   let validity = true;
   const activeFieldDirty = isActiveFieldDirty(slides, activeIndex, currentData);
   (slides[index].items || []).forEach((field) => {
-    var _a;
-    if (field.type === 'videoplayer' || field.type === 'document' || field.type === 'information' || field.type === 'image' || field.type === 'podcast') {
+    if (field.type === 'videoplayer' || field.type === 'document' || field.type === 'information' || field.type === 'image' || field.type === 'podcast' || field.type === 'scorm') {
       validity = activeFieldDirty;
     }
-    else if (field.type === 'scorm') {
-      if ((field.min && field.min <= ((_a = currentData[slides[activeIndex].items[0].name]) === null || _a === void 0 ? void 0 : _a.value)) || !field.min) {
-        validity = true;
-      }
-      else if (field.min) {
-        validity = false;
-      }
-    }
     else {
       const fieldState = getFieldState(field, fieldsState);
       if (!fieldState.validity) {
@@ -30,13 +22,16 @@ export function getLessonPageValidity(index, slides, fieldsState, activeIndex, c
 }
 /** used in Boost to determine if the current question is dirty or the document has been viewed */
 export function isActiveFieldDirty(slides, activeIndex, currentData) {
-  var _a, _b;
+  var _a, _b, _c;
   if (slides && slides.length > activeIndex) {
     const activeField = (_b = (_a = slides === null || slides === void 0 ? void 0 : slides[activeIndex]) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b[0];
     if (activeField) {
       if ([FormFieldType.information.toString(), FormFieldType.image.toString()].indexOf(activeField.type) >= 0) {
         return true;
       }
+      if (activeField.type === FormFieldType.scorm) {
+        return isNumber((_c = currentData === null || currentData === void 0 ? void 0 : currentData[activeField.name]) === null || _c === void 0 ? void 0 : _c.value);
+      }
       return currentData[activeField.name] && currentData[activeField.name].value;
     }
   }

package/dist/collection/components/form/form-entity-value-pairs/form-entity-value-pairs.js

@@ -196,7 +196,7 @@ export class YooFormEntityValuePairsComponent {
       "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-input/form-input.css

@@ -896,36 +896,36 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   text-align: center;
 }
 
-:host([size=large]:not([readonly]):not(.search)) .input-container {
+:host([size=large]:not([readonly]):not(.search):not([format=contenteditable])) .input-container {
   height: 3rem;
 }
 
-:host([size=medium]:not([readonly]):not(.search)) .input-container {
+:host([size=medium]:not([readonly]):not(.search):not([format=contenteditable])) .input-container {
   height: 2rem;
   font-size: var(--font-size-14, 0.875rem);
   border-radius: var(--border-radius-04, 0.25rem);
 }
-:host([size=medium]:not([readonly]):not(.search)) .input-container input {
+:host([size=medium]:not([readonly]):not(.search):not([format=contenteditable])) .input-container input {
   font-size: var(--font-size-14, 0.875rem);
 }
-:host([size=medium]:not([readonly]):not(.search)) .input-container input::-webkit-input-placeholder {
+:host([size=medium]:not([readonly]):not(.search):not([format=contenteditable])) .input-container input::-webkit-input-placeholder {
   font-size: var(--font-size-14, 0.875rem);
 }
-:host([size=medium]:not([readonly]):not(.search)) .input-container input:-moz-placeholder {
+:host([size=medium]:not([readonly]):not(.search):not([format=contenteditable])) .input-container input:-moz-placeholder {
   font-size: var(--font-size-14, 0.875rem);
 }
-:host([size=medium]:not([readonly]):not(.search)) .input-container input::-moz-placeholder {
+:host([size=medium]:not([readonly]):not(.search):not([format=contenteditable])) .input-container input::-moz-placeholder {
   font-size: var(--font-size-14, 0.875rem);
 }
-:host([size=medium]:not([readonly]):not(.search)) .input-container input:-ms-input-placeholder {
+:host([size=medium]:not([readonly]):not(.search):not([format=contenteditable])) .input-container input:-ms-input-placeholder {
   font-size: var(--font-size-14, 0.875rem);
 }
 
-:host([size=small]:not([readonly]):not(.search)) .input-container {
+:host([size=small]:not([readonly]):not(.search):not([format=contenteditable])) .input-container {
   height: 1.5rem;
   border-radius: var(--border-radius-04, 0.25rem);
 }
-:host([size=small]:not([readonly]):not(.search)) .input-container input {
+:host([size=small]:not([readonly]):not(.search):not([format=contenteditable])) .input-container input {
   font-size: var(--font-size-14, 0.875rem);
 }
 
@@ -945,6 +945,90 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   padding: var(--spacing-04, 0.25rem) var(--spacing-02, 0.125rem) 0 var(--spacing-08, 0.5rem);
 }
 
+:host([format=contenteditable]) .input-container {
+  position: relative;
+  width: 100%;
+  color: var(--stable, #adadad);
+  border: var(--border-width-01, 0.0625rem) solid transparent;
+}
+:host([format=contenteditable]) .input-container .placeholder {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: calc(100% - var(--spacing-16, 1rem));
+  height: 100%;
+  padding: 0 var(--spacing-08, 0.5rem);
+  font-size: var(--input-font-size);
+}
+:host([format=contenteditable]) .input-container .placeholder yoo-icon {
+  display: none;
+}
+:host([format=contenteditable]) .input-container:hover {
+  background-color: var(--stable-light, #f1f1f1);
+}
+:host([format=contenteditable]) .input-container:hover .placeholder yoo-icon {
+  display: block;
+}
+:host([format=contenteditable]) .input-container [contenteditable] {
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: calc(var(--input-font-size) + var(--spacing-16, 1rem));
+  padding: 0 var(--spacing-08, 0.5rem);
+  overflow: auto;
+  font-size: var(--input-font-size);
+  line-height: calc(var(--input-font-size) + var(--spacing-16, 1rem));
+  border: var(--border-width-01, 0.0625rem) solid transparent;
+  border-radius: var(--border-radius-04, 0.25rem);
+  caret-color: var(--app-color, #5a30f4);
+}
+:host([format=contenteditable]) .input-container [contenteditable]:focus {
+  outline: none;
+}
+:host([format=contenteditable]) .input-container .actions {
+  position: absolute;
+  right: 0;
+  display: none;
+}
+:host([format=contenteditable]) .input-container .actions > div {
+  padding-left: var(--spacing-08, 0.5rem);
+}
+:host([format=contenteditable]) .input-container .actions:active {
+  display: flex;
+}
+:host([format=contenteditable]) .input-container.has-value {
+  color: var(--dark, #000000);
+}
+:host([format=contenteditable]) .input-container.has-value .placeholder {
+  color: transparent;
+}
+:host([format=contenteditable]) .input-container.focused {
+  background-color: var(--light, #ffffff);
+}
+:host([format=contenteditable]) .input-container.focused .placeholder yoo-icon {
+  display: none;
+}
+:host([format=contenteditable]) .input-container.focused [contenteditable] {
+  border: var(--border-width-01, 0.0625rem) solid var(--dark, #000000);
+}
+:host([format=contenteditable]) .input-container.focused .actions {
+  display: flex;
+}
+
+:host([size=small]) .actions {
+  bottom: calc(var(--spacing-32, 2rem) * -1);
+}
+
+:host([size=medium]) .actions {
+  bottom: calc(var(--spacing-40, 2.5rem) * -1);
+}
+
+:host([size=large]) .actions {
+  bottom: calc(var(--spacing-56, 3.5rem) * -1);
+}
+
 :host(.accent) .input-container {
   border-color: var(--accent, #276ef1);
 }