@yoobic/yobi 8.2.2 → 8.3.0-2

package/dist/cjs/yoo-form-swipe-cards.cjs.entry.js

@@ -2,14 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
 const lodash = require('./lodash-597bda6d.js');
-const commonHelpers = require('./common-helpers-6970c46c.js');
-const draggableTagsHelpers = require('./draggable-tags-helpers-bb3be597.js');
-const formInputHelpers = require('./form-input-helpers-a04f76d2.js');
+const commonHelpers = require('./common-helpers-a4efe957.js');
+const draggableTagsHelpers = require('./draggable-tags-helpers-0f80afe0.js');
+const formInputHelpers = require('./form-input-helpers-a2843dc0.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 var SwipeCardsDirection;
 (function (SwipeCardsDirection) {
@@ -117,7 +118,7 @@ const YooFormSwipeCardsComponent = class {
   }
   get formHeight() {
     var _a;
-    return ((_a = index$1.findParent(this.host, 'form')) === null || _a === void 0 ? void 0 : _a.clientHeight) - 1.5 * 16;
+    return ((_a = overlays.findParent(this.host, 'form')) === null || _a === void 0 ? void 0 : _a.clientHeight) - 1.5 * 16;
   }
   componentWillLoad() {
     this.prepareInitGame();
@@ -199,7 +200,7 @@ const YooFormSwipeCardsComponent = class {
     const formatCardValue = (value) => {
       var _a, _b;
       if (this.isMode.image) {
-        return index$1.isCloudinaryLink((_b = (_a = this.answer) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b[0]) ? value._downloadURL :
+        return overlays.isCloudinaryLink((_b = (_a = this.answer) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b[0]) ? value._downloadURL :
           value._downloadURL.split('/').pop();
       }
       if (this.isMode.textimage) {
@@ -215,7 +216,7 @@ const YooFormSwipeCardsComponent = class {
   }
   displayFooterElement(show = true) {
     var _a, _b;
-    const yooIonSlideEl = index$1.findParent(this.host, 'yoo-ion-slide');
+    const yooIonSlideEl = overlays.findParent(this.host, 'yoo-ion-slide');
     if (yooIonSlideEl) {
       const footerElement = yooIonSlideEl.querySelector('yoo-form-footer');
       if (footerElement) {
@@ -226,13 +227,13 @@ const YooFormSwipeCardsComponent = class {
   }
   initDraggable() {
     this.cardsElements
-      .filter(e => !index$1.Draggable.get(e))
+      .filter(e => !overlays.Draggable.get(e))
       .forEach(e => this.getDraggableInstance(e));
     this.cardsElements.forEach(e => e === null || e === void 0 ? void 0 : e.classList.remove('revealing'));
   }
   initCards() {
     var _a;
-    return ((_a = this.cardValues) === null || _a === void 0 ? void 0 : _a.map(v => ({ id: index$1.getUUID(), value: this.hasImage ? v : v }))) || [];
+    return ((_a = this.cardValues) === null || _a === void 0 ? void 0 : _a.map(v => ({ id: overlays.getUUID(), value: this.hasImage ? v : v }))) || [];
   }
   lockSwipeButtons(lockState = true) {
     var _a;
@@ -270,7 +271,7 @@ const YooFormSwipeCardsComponent = class {
     }
   }
   async getDraggableInstance(cardElement) {
-    const timeline = await index$1.gsapTimeline();
+    const timeline = await overlays.gsapTimeline();
     if (!timeline || !cardElement) {
       return;
     }
@@ -303,14 +304,14 @@ const YooFormSwipeCardsComponent = class {
         !swipedState.isCardThrowable ?
           returnedAnimation
             .to(cardElement, this.animationDelay, { left: 0, top: 0 })
-            .to([this.buttons.left, this.buttons.right], { scale: 1, ease: index$1.Power1.easeInOut }, 0) :
+            .to([this.buttons.left, this.buttons.right], { scale: 1, ease: overlays.Power1.easeInOut }, 0) :
           this.swipeCard(swipedState.swipedDirection);
       }
       else {
-        index$1.gsapTo(cardElement, this.animationDelay, { left: 0, top: 0 });
+        overlays.gsapTo(cardElement, this.animationDelay, { left: 0, top: 0 });
       }
     };
-    return (new index$1.Draggable(cardElement, {
+    return (new overlays.Draggable(cardElement, {
       bound: this.host,
       type: 'left, top',
       cursor: 'grab',
@@ -344,7 +345,7 @@ const YooFormSwipeCardsComponent = class {
   }
   getSwipedCategoryValue(direction) {
     var _a;
-    return ((_a = this.categories) === null || _a === void 0 ? void 0 : _a.length) && index$1.translateMulti(direction === SwipeCardsDirection.left ? this.categories[0] : direction === SwipeCardsDirection.right ? this.categories[1] : '');
+    return ((_a = this.categories) === null || _a === void 0 ? void 0 : _a.length) && overlays.translateMulti(direction === SwipeCardsDirection.left ? this.categories[0] : direction === SwipeCardsDirection.right ? this.categories[1] : '');
   }
   renderStack() {
     return index.h("section", { id: "stack" }, this.swipeCards.map((card, i, s) => {
@@ -357,52 +358,52 @@ const YooFormSwipeCardsComponent = class {
           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 }) } }, this.hasImage && (index.h("div", { class: "content-image" }, index.h("yoo-img", { instant: true, src: index$1.getMedia(card.value['_downloadURL']) }))), this.hasText && (index.h("div", { class: "content-text" }, index$1.translateMulti(((_a = card.value) === null || _a === void 0 ? void 0 : _a['_filename']) || card.value))), index.h("div", { class: "content-category" }));
+        }, id: card.id, ref: el => this.cardsElements[i] = el, ...{ type: this.mode, ...(card.swipedDirection && { direction: card.swipedDirection }) } }, this.hasImage && (index.h("div", { class: "content-image" }, index.h("yoo-img", { instant: true, src: overlays.getMedia(card.value['_downloadURL']) }))), this.hasText && (index.h("div", { class: "content-text" }, overlays.translateMulti(((_a = card.value) === null || _a === void 0 ? void 0 : _a['_filename']) || card.value))), index.h("div", { class: "content-category" }));
     }));
   }
   renderInstructionCategory(side) {
     const isLeftCategory = side === SwipeCardsDirection.left;
     const categoryColor = isLeftCategory ? 'app-color' : 'warning';
-    const iconColor = index$1.isWeb(this.host) ? categoryColor : 'light';
-    const iconSize = index$1.isWeb(this.host) ? 'large' : 'medium';
-    const category = this.categories && index$1.translateMulti(isLeftCategory ? this.categories[0] : this.categories[1]);
-    return index.h("div", { class: `category ${side}` }, index.h("yoo-tag", { noBackground: index$1.isWeb(this.host), color: categoryColor, size: "large", icon: `big-arrow-${side}`, iconOnlyColor: iconColor, iconOnlySize: iconSize }), index.h("p", { class: `${categoryColor}` }, category), index.h("span", { class: "stable" }, index$1.translate(`SWIPE${side.toUpperCase()}`)));
+    const iconColor = overlays.isWeb(this.host) ? categoryColor : 'light';
+    const iconSize = overlays.isWeb(this.host) ? 'large' : 'medium';
+    const category = this.categories && overlays.translateMulti(isLeftCategory ? this.categories[0] : this.categories[1]);
+    return index.h("div", { class: `category ${side}` }, index.h("yoo-tag", { noBackground: overlays.isWeb(this.host), color: categoryColor, size: "large", icon: `big-arrow-${side}`, iconOnlyColor: iconColor, iconOnlySize: iconSize }), index.h("p", { class: `${categoryColor}` }, category), index.h("span", { class: "stable" }, overlays.translate(`SWIPE${side.toUpperCase()}`)));
   }
   renderTopDescription() {
-    return index.h("div", { id: "header" }, index.h("h1", { innerHTML: index$1.translateMulti(this.label) }), index.h("span", { class: "stable" }, index$1.translate(this.description || 'CARDSWIPEDEFAULTINSTRUCTIONS')));
+    return index.h("div", { id: "header" }, index.h("h1", { innerHTML: overlays.translateMulti(this.label) }), index.h("span", { class: "stable" }, overlays.translate(this.description || 'CARDSWIPEDEFAULTINSTRUCTIONS')));
   }
   renderInstructions() {
-    return (index.h("section", { id: "instructions" }, this.renderTopDescription(), index.h("section", { id: "categories" }, this.renderInstructionCategory(SwipeCardsDirection.left), index.h("yoo-icon", { size: "extra-extra-large", name: "swipe-explanation", color: "stable-alt" }), this.renderInstructionCategory(SwipeCardsDirection.right)), this.instructionsDocument && (index.h("section", { id: "document" }, index.h("div", { class: "document-title" }, index$1.translate('ATTACHMENTS')), index.h("yoo-form-document", { document: this.instructionsDocument, readonly: true, onInputChanged: (ev) => ev.stopPropagation() }))), index.h("yoo-button", { disabled: !(this.hasTwoCategories && !this.hasDuplicatesValues), size: (index$1.isWeb(this.host) && !this.livePreview) ? 'medium' : 'large', color: "app-color", onClick: () => {
+    return (index.h("section", { id: "instructions" }, this.renderTopDescription(), index.h("section", { id: "categories" }, this.renderInstructionCategory(SwipeCardsDirection.left), index.h("yoo-icon", { size: "extra-extra-large", name: "swipe-explanation", color: "stable-alt" }), this.renderInstructionCategory(SwipeCardsDirection.right)), this.instructionsDocument && (index.h("section", { id: "document" }, index.h("div", { class: "document-title" }, overlays.translate('ATTACHMENTS')), index.h("yoo-form-document", { document: this.instructionsDocument, readonly: true, onInputChanged: (ev) => ev.stopPropagation() }))), index.h("yoo-button", { disabled: !(this.hasTwoCategories && !this.hasDuplicatesValues), size: (overlays.isWeb(this.host) && !this.livePreview) ? 'medium' : 'large', color: "app-color", onClick: () => {
         this.revealCards = true;
         this.showInstructionView = false;
         this.displayFooterElement();
-      } }, index$1.translate('START'))));
+      } }, overlays.translate('START'))));
   }
   renderSwipeButtons() {
     return index.h("section", { id: "actions" }, [SwipeCardsDirection.left, SwipeCardsDirection.undo, SwipeCardsDirection.right].map((d, i) => this.renderSwipeAction(d, i)));
   }
-  renderSwipeAction(direction, index$2) {
+  renderSwipeAction(direction, index$1) {
     var _a;
     const isUndo = direction === SwipeCardsDirection.undo;
     const isLeft = direction === SwipeCardsDirection.left;
-    const isMobile = !index$1.isWeb(this.host) || this.livePreview;
-    const actionColor = isUndo ? index$1.isWeb(this.host) ? 'light' : 'stable-alt' : isLeft ? 'app-color' : 'warning';
+    const isMobile = !overlays.isWeb(this.host) || this.livePreview;
+    const actionColor = isUndo ? overlays.isWeb(this.host) ? 'light' : 'stable-alt' : isLeft ? 'app-color' : 'warning';
     const swipeIcon = isUndo ? 'undo' : `big-arrow-${direction}`;
     const categoryIndex = isLeft ? 0 : 1;
-    return (index.h("div", { class: { 'action': true, 'hide': this.hasAllCardBeenSwiped && !isUndo } }, index.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$2] = element), onClick: () => isUndo ? this.undoSwipe() : this.clickToSwipe(direction) }, index.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) && index.h("span", { class: actionColor }, index$1.translateMulti(this.categories[categoryIndex]))));
+    return (index.h("div", { class: { 'action': true, 'hide': this.hasAllCardBeenSwiped && !isUndo } }, index.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$1] = element), onClick: () => isUndo ? this.undoSwipe() : this.clickToSwipe(direction) }, index.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) && index.h("span", { class: actionColor }, overlays.translateMulti(this.categories[categoryIndex]))));
   }
   renderEndGameMessage() {
-    return index.h("section", { id: "end-message", class: { 'active': this.hasAllCardBeenSwiped } }, index.h("yoo-lottie", { autoplay: this.hasAllCardBeenSwiped, type: "check" }), index.h("div", { innerHTML: index$1.translate('ENDSWIPINGCARDSMESSAGE') }), index.h("span", null, index$1.translate('CLICKTOCONTINUE', { buttonName: this.nextButtonText })));
+    return index.h("section", { id: "end-message", class: { 'active': this.hasAllCardBeenSwiped } }, index.h("yoo-lottie", { autoplay: this.hasAllCardBeenSwiped, type: "check" }), index.h("div", { innerHTML: overlays.translate('ENDSWIPINGCARDSMESSAGE') }), index.h("span", null, overlays.translate('CLICKTOCONTINUE', { buttonName: this.nextButtonText })));
   }
   renderCards() {
     return [
-      index$1.isWeb(this.host) && !this.livePreview && this.renderTopDescription(),
+      overlays.isWeb(this.host) && !this.livePreview && this.renderTopDescription(),
       index.h("section", { id: "game", ref: (element) => (this.gameContainerElement = element) }, this.renderEndGameMessage(), this.renderStack()),
       this.renderSwipeButtons()
     ];
   }
   renderSummary() {
-    const getAnswerCounter = (category) => { var _a, _b; return ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) && ((_b = this.answer) === null || _b === void 0 ? void 0 : _b.length) ? index$1.translateMulti(category) : ''; };
+    const getAnswerCounter = (category) => { var _a, _b; return ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) && ((_b = this.answer) === null || _b === void 0 ? void 0 : _b.length) ? overlays.translateMulti(category) : ''; };
     const getAnswerImage = (answerValue) => {
       var _a, _b;
       const getImageValue = (image) => image[`${this.isMode.image ? '_downloadURL' : '_filename'}`];
@@ -414,7 +415,7 @@ const YooFormSwipeCardsComponent = class {
       index.h("div", { class: "category-title" }, getAnswerCounter(categoryValue)),
       index.h("ul", null, Array.from(new Set(this.value[catIndex])).map((userAnswer) => {
         var _a;
-        return (index.h("li", { class: getValidationClass(catIndex, userAnswer) }, !!((_a = this.images) === null || _a === void 0 ? void 0 : _a.length) && index.h("yoo-img", { src: getAnswerImage(userAnswer) }), !this.isMode.image && index.h("yoo-truncate", null, index$1.translateMulti(userAnswer))));
+        return (index.h("li", { class: getValidationClass(catIndex, userAnswer) }, !!((_a = this.images) === null || _a === void 0 ? void 0 : _a.length) && index.h("yoo-img", { src: getAnswerImage(userAnswer) }), !this.isMode.image && index.h("yoo-truncate", null, overlays.translateMulti(userAnswer))));
       }))
     ]);
   }

package/dist/cjs/yoo-form-table.cjs.entry.js

@@ -2,14 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
 const lodash = require('./lodash-597bda6d.js');
 const sortable_esm = require('./sortable.esm-00e15691.js');
-const formInputHelpers = require('./form-input-helpers-a04f76d2.js');
+const formInputHelpers = require('./form-input-helpers-a2843dc0.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
-require('./common-helpers-6970c46c.js');
+require('./index-de8540eb.js');
+require('./common-helpers-a4efe957.js');
 
 const formTableCss = ":host .outer-container .action{margin-top:var(--spacing-16, 1rem)}:host .outer-container .count{color:var(--text-color, #807f83)}";
 
@@ -42,14 +43,14 @@ const YooFormTableComponent = class {
       ? []
       : [
         {
-          text: () => index$1.translate('YOOBICEDIT'),
+          text: () => overlays.translate('YOOBICEDIT'),
           icon: () => 'pen',
           color: () => 'light',
           cssClass: () => 'bg-app-color light',
           handler: (item) => this.onUpsertItem(item)
         },
         {
-          text: () => index$1.translate('DELETE'),
+          text: () => overlays.translate('DELETE'),
           icon: () => 'delete',
           color: () => 'light',
           cssClass: () => 'bg-danger light',
@@ -103,7 +104,7 @@ const YooFormTableComponent = class {
   onUpsertItem(item) {
     if (!this.isAddingOrEditing) {
       this.isAddingOrEditing = true;
-      index$1.getAsyncExtraData({ type: 'field-table-add', params: { collectionName: this.collectionName, customModel: this.customModel, item, slidesTransform: this.slidesTransform } })
+      overlays.getAsyncExtraData({ type: 'field-table-add', params: { collectionName: this.collectionName, customModel: this.customModel, item, slidesTransform: this.slidesTransform } })
         .then((ret) => {
         if (ret && ret.data) {
           this.afterUpsertItem(ret.data, item);
@@ -128,14 +129,14 @@ const YooFormTableComponent = class {
   }
   onSelectItem(item) {
     if (this.readonly) {
-      index$1.getAsyncExtraData({ type: 'field-table-add', params: { collectionName: this.collectionName, customModel: this.customModel, item, readonly: true } });
+      overlays.getAsyncExtraData({ type: 'field-table-add', params: { collectionName: this.collectionName, customModel: this.customModel, item, readonly: true } });
     }
     else {
       this.onUpsertItem(item);
     }
   }
   oDeleteItem(item) {
-    index$1.showAlert(index$1.translate('DELETE'), [index$1.translate('CANCEL'), index$1.translate('YOOBICOK')], index$1.translate('DELETECONFIRM')).then((ret) => {
+    overlays.showAlert(overlays.translate('DELETE'), [overlays.translate('CANCEL'), overlays.translate('YOOBICOK')], overlays.translate('DELETECONFIRM')).then((ret) => {
       if (ret) {
         this.value = this.value.filter((v) => v !== item);
         formInputHelpers.setValueAndValidateInput(this.value, this);
@@ -144,7 +145,7 @@ const YooFormTableComponent = class {
   }
   renderCount() {
     if (this.value && this.value.length > 0) {
-      return index$1.translate('NUMBEROFITEMSEDITED') + ': ' + this.value.length.toLocaleString();
+      return overlays.translate('NUMBEROFITEMSEDITED') + ': ' + this.value.length.toLocaleString();
     }
   }
   renderItems() {
@@ -182,7 +183,7 @@ const YooFormTableComponent = class {
     return [
       index.h("div", { class: "count" }, this.renderCount()),
       index.h("div", { class: "items" }, this.renderItems()),
-      index.h("div", { class: "action" }, index.h("yoo-button", { size: index$1.isWeb(this.host) ? 'medium' : 'large', disabled: addDisabled, class: "expanded", color: "app-color", onClick: () => this.onAddNewItem() }, index$1.translate('ADDNEWITEM')))
+      index.h("div", { class: "action" }, index.h("yoo-button", { size: overlays.isWeb(this.host) ? 'medium' : 'large', disabled: addDisabled, class: "expanded", color: "app-color", onClick: () => this.onAddNewItem() }, overlays.translate('ADDNEWITEM')))
     ];
   }
   render() {

package/dist/cjs/yoo-form-task.cjs.entry.js

@@ -2,13 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
 const lodash = require('./lodash-597bda6d.js');
-const formInputHelpers = require('./form-input-helpers-a04f76d2.js');
+const formInputHelpers = require('./form-input-helpers-a2843dc0.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
-require('./common-helpers-6970c46c.js');
+require('./index-de8540eb.js');
+require('./common-helpers-a4efe957.js');
 
 const formTaskCss = ":host .readonly,:host .outer-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .readonly .task,:host .outer-container .task{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;width:100%;line-height:2.4375rem}:host .readonly .task .task-part,:host .outer-container .task .task-part{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}:host .readonly .task .task-part yoo-avatar,:host .outer-container .task .task-part yoo-avatar{margin-right:0.5rem}:host .readonly .task .task-part .text,:host .outer-container .task .task-part .text{font-size:var(--font-size-18, 1.125rem)}:host .readonly .task .task-part .date,:host .outer-container .task .task-part .date{margin-right:var(--spacing-08, 0.5rem);color:var(--text-color, #807f83);font-size:var(--font-size-14, 0.875rem)}:host .readonly .border,:host .outer-container .border{width:100%;height:0;border-top:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host .readonly .title,:host .outer-container .title{font-size:var(--font-size-16, 1rem)}:host .readonly .newtask,:host .outer-container .newtask{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;margin-top:var(--spacing-16, 1rem)}:host .readonly .newtask.nomargin,:host .outer-container .newtask.nomargin{margin-top:0}:host .readonly .newtask .icon,:host .outer-container .newtask .icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-right:var(--spacing-02, 0.125rem)}:host .readonly .newtask yoo-button,:host .outer-container .newtask yoo-button{display:inline-block;width:auto}:host .readonly .newtask yoo-button .label,:host .outer-container .newtask yoo-button .label{color:var(--app-color, #5a30f4)}:host .readonly .task,:host .outer-container .task{-ms-flex-align:center;align-items:center;padding-top:var(--spacing-08, 0.5rem)}:host .readonly .task .task-part,:host .outer-container .task .task-part{-ms-flex-align:center;align-items:center}:host .readonly .task .task-part yoo-icon,:host .readonly .task .task-part yoo-avatar,:host .outer-container .task .task-part yoo-icon,:host .outer-container .task .task-part yoo-avatar{padding-top:var(--spacing-02, 0.125rem)}:host .readonly .task .task-part .description-container,:host .outer-container .task .task-part .description-container{display:-ms-flexbox;display:flex}:host .readonly .task .task-part .text-container,:host .outer-container .task .task-part .text-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding-left:var(--spacing-16, 1rem);line-height:1.5rem}:host .readonly .task .task-part .text-container .text,:host .outer-container .task .task-part .text-container .text{color:var(--dark, #000000);font-size:var(--font-size-16, 1rem)}:host .readonly .task .task-part .user,:host .outer-container .task .task-part .user{padding-right:1rem;padding-left:0.5rem}:host .readonly.pdf .task .task-part .text-container,:host .outer-container.pdf .task .task-part .text-container{padding-left:0}:host .readonly.pdf .task .task-part .text-container .text,:host .outer-container.pdf .task .task-part .text-container .text{margin-left:0}:host .readonly .task .task-part .break-text{text-decoration:line-through}:host .readonly .task .task-part .subtitle{color:var(--stable, #adadad)}:host .readonly .title{font-weight:var(--font-weight-700, 700)}:host .readonly .task .task-part{-ms-flex-align:center;align-items:center;line-height:normal}:host .readonly .task .task-part .text-container{padding-left:0}:host(.history) .readonly{margin-top:0 !important}:host(.tasks-container){display:block;margin-top:1rem}:host(.tasks-container) .outer-container{padding:var(--spacing-08, 0.5rem) 0 0 0}:host(.tasks-container) .outer-container:not(.empty){margin-bottom:var(--spacing-16, 1rem)}:host(.tasks-container) .empty{padding:0}";
 
@@ -48,8 +49,8 @@ const YooFormTaskComponent = class {
     this.upsertTask(task, index);
   }
   onRemoveTask(task) {
-    const message = index$1.translate('DELETETODOTASKCONFIRM') + ' "' + (task.text && task.text.value ? ' ' + task.text.value : '') + '"';
-    index$1.showAlert(index$1.translate('DELETE'), [index$1.translate('CANCEL'), index$1.translate('YOOBICOK')], message).then((ret) => {
+    const message = overlays.translate('DELETETODOTASKCONFIRM') + ' "' + (task.text && task.text.value ? ' ' + task.text.value : '') + '"';
+    overlays.showAlert(overlays.translate('DELETE'), [overlays.translate('CANCEL'), overlays.translate('YOOBICOK')], message).then((ret) => {
       if (ret === true) {
         lodash.remove(this.value, (t) => t === task);
         this.value = [...this.value];
@@ -61,41 +62,41 @@ const YooFormTaskComponent = class {
     const buttons = [
       {
         actionType: 'edit',
-        text: index$1.translate('YOOBICEDIT'),
+        text: overlays.translate('YOOBICEDIT'),
         handler: () => this.onEditTask(task, index)
       },
       {
         actionType: 'delete',
-        text: index$1.translate('DELETE'),
+        text: overlays.translate('DELETE'),
         cssClass: 'danger',
         handler: () => this.onRemoveTask(task)
       }
     ];
-    index$1.isWeb(this.host)
-      ? index$1.showContextMenu(ev, {
+    overlays.isWeb(this.host)
+      ? overlays.showContextMenu(ev, {
         multipleSelection: false,
         contentButtons: buttons,
         placement: 'below',
         hostElement: this.actionsButton
       })
-      : index$1.showActionSheet(buttons);
+      : overlays.showActionSheet(buttons);
   }
   upsertTask(task, index) {
     let form = document.createElement('yoo-form-dynamic-dialog');
     form.slides = this.slidesTask;
     form.showTabs = false;
     form.showSave = true;
-    form.hideSaveButton = !index$1.isWeb(this.host);
+    form.hideSaveButton = !overlays.isWeb(this.host);
     form.showRecap = false;
     form.data = task;
     form.suffix = '.value';
-    form.header = index$1.translate('ADDNEWACTION');
+    form.header = overlays.translate('ADDNEWACTION');
     form.fieldFetchDataFn = (ev) => {
       this.fieldFetchData.emit(ev);
     };
-    form.footerButtons = !index$1.isWeb(this.host) ? [
+    form.footerButtons = !overlays.isWeb(this.host) ? [
       {
-        text: () => index$1.translate('YOOBICSAVE'),
+        text: () => overlays.translate('YOOBICSAVE'),
         color: () => 'app-color',
         size: () => 'large',
         handler: (_item, dialogRef) => {
@@ -105,9 +106,9 @@ const YooFormTaskComponent = class {
         }
       }
     ] : null;
-    index$1.showModal(form, {
+    overlays.showModal(form, {
       height: 'medium'
-    }, null, index$1.getModalAnimation('Enter', 'X', true), index$1.getModalAnimation('Leave', 'X', true), true).then((ret) => {
+    }, null, overlays.getModalAnimation('Enter', 'X', true), overlays.getModalAnimation('Leave', 'X', true), true).then((ret) => {
       if (ret === null || ret === void 0 ? void 0 : ret.data) {
         this.value = this.value || [];
         if (index < 0) {
@@ -127,20 +128,20 @@ const YooFormTaskComponent = class {
       ? this.value.map((t, i) => {
         const tStyle = formInputHelpers.taskStyle(t.finished);
         return [
-          index.h("div", { class: "task" }, index.h("div", { class: "task-part" }, t.text.value ? (index.h("div", { class: tStyle.style + ' description-container' }, this.readonly ? null : index.h("yoo-icon", { name: tStyle.icon }), index.h("div", { class: "text-container" }, index.h("span", { class: 'text ' + tStyle.breakText }, index$1.translateMulti(t.text.value))))) : null), this.isHistory ? null : (index.h("div", { class: "task-part" }, t.user && t.user.value
-            ? [index.h("yoo-avatar", { size: "small", user: t.user.value }), this.isPdf && index.h("div", { class: "user" }, index$1.getUserDisplayName(t.user.value))]
-            : null, t.duedate && t.duedate.value ? index.h("span", { class: "date" }, index$1.pipes.dateFormat.transform(t.duedate.value, 'L')) : null, !this.readonly && (index.h("yoo-button", { fill: "transparent", shape: "circular", color: "stable", onClick: (ev) => this.onShowActionsMenu(ev, t, i), ref: (el) => (this.actionsButton = el) }, index.h("yoo-icon", { name: "more", color: "stable" })))))),
+          index.h("div", { class: "task" }, index.h("div", { class: "task-part" }, t.text.value ? (index.h("div", { class: tStyle.style + ' description-container' }, this.readonly ? null : index.h("yoo-icon", { name: tStyle.icon }), index.h("div", { class: "text-container" }, index.h("span", { class: 'text ' + tStyle.breakText }, overlays.translateMulti(t.text.value))))) : null), this.isHistory ? null : (index.h("div", { class: "task-part" }, t.user && t.user.value
+            ? [index.h("yoo-avatar", { size: "small", user: t.user.value }), this.isPdf && index.h("div", { class: "user" }, overlays.getUserDisplayName(t.user.value))]
+            : null, t.duedate && t.duedate.value ? index.h("span", { class: "date" }, overlays.pipes.dateFormat.transform(t.duedate.value, 'L')) : null, !this.readonly && (index.h("yoo-button", { fill: "transparent", shape: "circular", color: "stable", onClick: (ev) => this.onShowActionsMenu(ev, t, i), ref: (el) => (this.actionsButton = el) }, index.h("yoo-icon", { name: "more", color: "stable" })))))),
           this.readonly ? null : index.h("div", { class: "border" })
         ];
       })
       : null;
   }
   renderReadonly() {
-    return (index.h("div", { class: { readonly: true, pdf: this.isPdf } }, this.value && this.value.length > 0 ? [this.hideTitle ? null : index.h("div", { class: "title" }, index$1.translate('YOOBICACTIONS')), this.renderTasks()] : null));
+    return (index.h("div", { class: { readonly: true, pdf: this.isPdf } }, this.value && this.value.length > 0 ? [this.hideTitle ? null : index.h("div", { class: "title" }, overlays.translate('YOOBICACTIONS')), this.renderTasks()] : null));
   }
   renderEditable() {
     var _a, _b, _c;
-    return (index.h("div", { class: { 'outer-container': true, empty: !((_a = this.value) === null || _a === void 0 ? void 0 : _a.length), pdf: this.isPdf } }, ((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) ? index.h("div", { class: "title" }, index$1.translate('YOOBICACTIONS')) : null, this.renderTasks(), this.type === 'todo' || this.type === 'task' ? (index.h("div", { class: { newtask: true, nomargin: !((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) } }, index.h("yoo-button", { color: "stable-light", onClick: () => this.onAddNewTask() }, index.h("yoo-icon", { size: "small", slot: "start", name: "plus", color: "app-color" }), index.h("div", { class: "label" }, index$1.translate('ADDNEWACTION'))))) : null));
+    return (index.h("div", { class: { 'outer-container': true, empty: !((_a = this.value) === null || _a === void 0 ? void 0 : _a.length), pdf: this.isPdf } }, ((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) ? index.h("div", { class: "title" }, overlays.translate('YOOBICACTIONS')) : null, this.renderTasks(), this.type === 'todo' || this.type === 'task' ? (index.h("div", { class: { newtask: true, nomargin: !((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) } }, index.h("yoo-button", { color: "stable-light", onClick: () => this.onAddNewTask() }, index.h("yoo-icon", { size: "small", slot: "start", name: "plus", color: "app-color" }), index.h("div", { class: "label" }, overlays.translate('ADDNEWACTION'))))) : null));
   }
   render() {
     return this.readonly ? this.renderReadonly() : this.renderEditable();

package/dist/cjs/yoo-form-text-area.cjs.entry.js

@@ -2,14 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
-const commonHelpers = require('./common-helpers-6970c46c.js');
-const formInputHelpers = require('./form-input-helpers-a04f76d2.js');
-const formTextAreaHelpers = require('./form-text-area-helpers-a447a10d.js');
+const index = require('./index-e182c32d.js');
+const overlays = require('./overlays-b6c94fc8.js');
+require('./index-1fdbd9b3.js');
+const commonHelpers = require('./common-helpers-a4efe957.js');
+const formInputHelpers = require('./form-input-helpers-a2843dc0.js');
+const formTextAreaHelpers = require('./form-text-area-helpers-12613cd7.js');
 require('./lodash-597bda6d.js');
+require('./index-de8540eb.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
 
 const formTextAreaCss = ":host{--textarea-placeholder-font-size:var(--font-size-16, 1rem);--textarea-font-color:var(--dark, #000000);--textarea-background-color:var(--light, #ffffff);--textarea-inner-padding:0.5rem;--paragraph-initial-height:80px;--paragraph-max-height:150px;--textarea-height:initial;--textarea-line-height:normal;--textarea-pointer-event:initial}:host .mention-container{width:auto;margin:0;overflow-y:auto;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}:host .mention-container::-webkit-scrollbar{width:var(--spacing-04, 0.25rem);height:var(--spacing-04, 0.25rem)}:host .mention-container::-webkit-scrollbar-track{background-color:transparent;border-radius:var(--border-radius-04, 0.25rem)}:host .mention-container::-webkit-scrollbar-thumb{background-color:transparent;border-radius:var(--border-radius-04, 0.25rem)}:host .mention-container:hover::-webkit-scrollbar-track{background-color:var(--stable-light, #f1f1f1)}:host .mention-container:hover::-webkit-scrollbar-thumb{background:var(--stable, #adadad)}:host .mention-container:not(.fit-max-rows){min-height:var(--paragraph-initial-height);max-height:var(--paragraph-max-height)}:host p font{color:initial !important}:host .segments-count{color:var(--text-color, #807f83);font-size:var(--font-size-12, 0.75rem)}:host .inner-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:100%;border-radius:var(--border-radius-04, 0.25rem)}:host yoo-card-feed{display:block;margin-top:1rem;overflow:hidden;border:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0);border-radius:var(--border-radius-04, 0.25rem)}:host p.mention-container,:host .outer-container textarea{width:100%;color:var(--textarea-font-color);line-height:normal;white-space:pre;resize:none;font-family:var(--font-family, \"Lato\");-webkit-appearance:none;padding:var(--textarea-inner-padding);font-weight:var(--font-weight-400, 400);font-size:var(--textarea-placeholder-font-size);white-space:pre-wrap;background:var(--textarea-background-color);border:solid var(--border-width-01, 0.0625rem) var(--stable-alt, #d0d0d0);border-radius:var(--border-radius-04, 0.25rem)}:host p.mention-container::-webkit-input-placeholder,:host .outer-container textarea::-webkit-input-placeholder{color:var(--text-color, #807f83);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}:host p.mention-container:-moz-placeholder,:host .outer-container textarea:-moz-placeholder{color:var(--text-color, #807f83);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}:host p.mention-container::-moz-placeholder,:host .outer-container textarea::-moz-placeholder{color:var(--text-color, #807f83);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}:host p.mention-container:-ms-input-placeholder,:host .outer-container textarea:-ms-input-placeholder{color:var(--text-color, #807f83);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}:host p.mention-container.invalid,:host .outer-container textarea.invalid{border-color:var(--danger, #d44333)}:host p.mention-container.valid,:host .outer-container textarea.valid{border-color:var(--app-color, #5a30f4)}:host p.mention-container:focus,:host .outer-container textarea:focus{border:var(--border-width-01, 0.0625rem) solid var(--dark, #000000);outline:none}:host .outer-container{display:-ms-flexbox;display:flex;background:var(--textarea-background-color);pointer-events:var(--textarea-pointer-event)}:host .readonly{width:100%;color:var(--textarea-font-color);line-height:normal;white-space:pre;resize:none;padding:0.5rem 0.5rem 0 0;color:var(--dark, #000000);line-height:1.5rem;white-space:pre-line;word-break:break-word}:host .readonly *{-webkit-margin-before:0;margin-block-start:0;-webkit-margin-after:0;margin-block-end:0}:host .icon-close{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:var(--spacing-08, 0.5rem)}:host(.italic) .readonly{font-style:italic}:host(.input-bar){--paragraph-initial-height:var(--spacing-32, 2rem);--textarea-background-color:transparent;--inputbar-background-color:var(--stable-light, #f1f1f1);--input-bar-margin:0 var(--spacing-08, 0.5rem);--input-bar-border-radius:var(--border-radius-16, 1rem);--textarea-inner-padding:var(--spacing-08, 0.5rem) 0;width:100%}:host(.input-bar) p{height:initial;min-height:initial;word-break:break-word;-webkit-margin-before:0;margin-block-start:0;-webkit-margin-after:0;margin-block-end:0}:host(.input-bar) .outer-container{-ms-flex-align:center;align-items:center;min-height:var(--textarea-height);margin:var(--input-bar-margin);padding:0 var(--spacing-16, 1rem);background:var(--inputbar-background-color);border-radius:var(--input-bar-border-radius)}:host(.input-bar) p,:host(.input-bar) textarea{padding:var(--textarea-inner-padding);line-height:var(--textarea-line-height);border:none;caret-color:var(--app-color, #5a30f4)}:host(.input-bar) p:focus,:host(.input-bar) textarea:focus{border:none}:host(.ios){-webkit-overflow-scrolling:auto}:host(.history) .readonly{display:-webkit-box;padding:0 !important;line-height:normal;white-space:normal;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host(.inline-actions:not(.input-bar)) .outer-container{border:solid 0.0625rem var(--stable-alt, #d0d0d0);border-radius:var(--border-radius-04, 0.25rem);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host(.inline-actions:not(.input-bar)) .outer-container p,:host(.inline-actions:not(.input-bar)) .outer-container textarea{border:none}:host([size=medium]) .outer-container textarea{min-height:0.5rem;font-size:var(--font-size-14, 0.875rem);line-height:1.5rem}:host([size=medium]) .outer-container textarea::-webkit-input-placeholder{font-size:var(--font-size-14, 0.875rem)}:host([size=medium]) .outer-container textarea:-moz-placeholder{font-size:var(--font-size-14, 0.875rem)}:host([size=medium]) .outer-container textarea::-moz-placeholder{font-size:var(--font-size-14, 0.875rem)}:host([size=medium]) .outer-container textarea:-ms-input-placeholder{font-size:var(--font-size-14, 0.875rem)}:host([size=large]) .outer-container textarea{min-height:1rem;line-height:2rem}";
 
@@ -39,13 +40,13 @@ const YooFormTextAreaComponent = class {
     this.focusOnRendered = false;
     this.mentionedUsers = [];
     this.allowLinkUpdate = true;
-    this.updateSegmentsCountDebounce = index$1.debounce(() => this.updateSegmentsCount(), 2000);
+    this.updateSegmentsCountDebounce = overlays.debounce(() => this.updateSegmentsCount(), 2000);
     this.scrollIntoViewOnFocus = false;
   }
   onValueChanged(value) {
     // clean input and sync mention ids when the value is cleared from outside
     if (this.allowMention && this.inputEl && !value) {
-      this.inputEl.innerHTML = index$1.replaceAtTagToMentionTag(value, this.mentions);
+      this.inputEl.innerHTML = overlays.replaceAtTagToMentionTag(value, this.mentions);
       this.syncMentionIds();
     }
   }
@@ -54,7 +55,7 @@ const YooFormTextAreaComponent = class {
   }
   onKeyboardShown() {
     if (this.scrollIntoViewOnFocus) {
-      index$1.safeScrollIntoView(this.host, null, true);
+      overlays.safeScrollIntoView(this.host, null, true);
       this.scrollIntoViewOnFocus = false;
     }
   }
@@ -94,7 +95,7 @@ const YooFormTextAreaComponent = class {
     }
     else {
       this.setLocalValue();
-      this.inputEl.innerHTML = index$1.replaceAtTagToMentionTag(value, this.mentions);
+      this.inputEl.innerHTML = overlays.replaceAtTagToMentionTag(value, this.mentions);
       this.setFocus();
       const { insertElement } = formTextAreaHelpers.getInsertElementProp(this.host, this.inputEl);
       formTextAreaHelpers.restoreCursorPosition({ element: insertElement, parentElement: this.inputEl });
@@ -113,7 +114,7 @@ const YooFormTextAreaComponent = class {
   }
   componentWillLoad() {
     formInputHelpers.setValidator(this);
-    this.emitValueAndSetValidity = index$1.debounce((value, inputElement, forceNullValidation, validateInput, skipValueAssignment, preventInputChangedEvent) => {
+    this.emitValueAndSetValidity = overlays.debounce((value, inputElement, forceNullValidation, validateInput, skipValueAssignment, preventInputChangedEvent) => {
       formInputHelpers.setValueAndValidateInput(value, inputElement, forceNullValidation, validateInput, skipValueAssignment, preventInputChangedEvent);
       this.validityChanged.emit(this.validity);
     }, this.debounce || 0);
@@ -128,7 +129,7 @@ const YooFormTextAreaComponent = class {
       // block click event when editing the tag
       if (this.inputEl) {
         if (this.value) {
-          this.inputEl.innerHTML = index$1.replaceAtTagToMentionTag(this.value, this.mentions);
+          this.inputEl.innerHTML = overlays.replaceAtTagToMentionTag(this.value, this.mentions);
           this.inputEl.querySelectorAll('yoo-mention-tag').forEach((tag) => (tag.preventUserView = true));
         }
         this.compUpdateListener = this.inputEl.addEventListener('compositionupdate', this.onCompositionUpdate.bind(this));
@@ -227,10 +228,10 @@ const YooFormTextAreaComponent = class {
         setTimeout(() => {
           this.allowLinkUpdate = true;
           const content = this.inputEl.textContent || '';
-          if (!index$1.containsUrls(content) && !(ev.inputType === 'deleteContentBackward' || ev.key === 'Backspace')) {
+          if (!overlays.containsUrls(content) && !(ev.inputType === 'deleteContentBackward' || ev.key === 'Backspace')) {
             return;
           }
-          const { links } = index$1.replaceAndGetAllLinks(content.replace(/ /g, ' '), ' ');
+          const { links } = overlays.replaceAndGetAllLinks(content.replace(/ /g, ' '), ' ');
           if (links === null || links === void 0 ? void 0 : links.length) {
             this.linkPreviews = links.map((link) => {
               var _a;
@@ -248,10 +249,10 @@ const YooFormTextAreaComponent = class {
       return;
     }
     this.inputEl.blur();
-    if (index$1.isNativeMobile() && index$1.Keyboard) {
-      index$1.Keyboard.hide();
+    if (overlays.isNativeMobile() && overlays.Keyboard) {
+      overlays.Keyboard.hide();
     }
-    index$1.getAsyncExtraData({ type: 'mention', params: { otherIds: this.otherIds } }).then((res) => {
+    overlays.getAsyncExtraData({ type: 'mention', params: { otherIds: this.otherIds } }).then((res) => {
       if (res && res.data) {
         this.mentionedUsers = res.data;
         if (this.mentionedUsers && this.mentionedUsers.length > 0) {
@@ -268,8 +269,8 @@ const YooFormTextAreaComponent = class {
             replaceFirstOnly: true
           };
           formTextAreaHelpers.safeInsertElements(insertParams);
-          if (index$1.isNativeMobile() && index$1.Keyboard) {
-            index$1.Keyboard.hide();
+          if (overlays.isNativeMobile() && overlays.Keyboard) {
+            overlays.Keyboard.hide();
           }
           // update mention list
           this.syncMentionIds();
@@ -306,10 +307,10 @@ const YooFormTextAreaComponent = class {
   }
   updateSegmentsCount() {
     if (this.displaySegmentsCount) {
-      const formDynamic = index$1.findParent(this.host, 'yoo-form-dynamic');
+      const formDynamic = overlays.findParent(this.host, 'yoo-form-dynamic');
       if (formDynamic === null || formDynamic === void 0 ? void 0 : formDynamic.getData) {
         return formDynamic.getData().then((data) => {
-          return index$1.getAsyncExtraData({ type: 'sms-segments-count', params: { value: this.value, data } }).then((ret) => {
+          return overlays.getAsyncExtraData({ type: 'sms-segments-count', params: { value: this.value, data } }).then((ret) => {
             this.segmentsCount = ret;
           });
         });
@@ -380,7 +381,7 @@ const YooFormTextAreaComponent = class {
     formInputHelpers.onInputFocused(this, tag);
   }
   renderSegmentsCount() {
-    return this.displaySegmentsCount && this.segmentsCount >= 0 && index.h("div", { class: "segments-count" }, index$1.translate('SEGMENTS'), ": ", this.segmentsCount.toLocaleString());
+    return this.displaySegmentsCount && this.segmentsCount >= 0 && index.h("div", { class: "segments-count" }, overlays.translate('SEGMENTS'), ": ", this.segmentsCount.toLocaleString());
   }
   renderLinkPreviews() {
     var _a;
@@ -394,15 +395,15 @@ const YooFormTextAreaComponent = class {
     ];
   }
   renderTextArea() {
-    const hasValue = !index$1.isNullOrUndefined(this.value) && this.value !== '';
+    const hasValue = !overlays.isNullOrUndefined(this.value) && this.value !== '';
     return [
       index.h("textarea", { ref: (el) => (this.inputEl = el), value: this.value || '', onClick: (ev) => {
-          if (index$1.isWeb() && index$1.isFirefox()) {
+          if (overlays.isWeb() && overlays.isFirefox()) {
             this.inputEl.focus();
             this.onInputFocused('textarea');
           }
           ev.preventDefault();
-        }, contenteditable: "true", placeholder: index$1.translate(this.placeholder), readonly: this.readonly, rows: this.rows, onBlur: (ev) => formInputHelpers.onInputBlurred(ev, this, 'textarea'), onInput: () => this.onInputChanged(), onFocus: () => this.onInputFocused('textarea'), onKeyPress: (ev) => this.onKeyPress(ev), onKeyDown: (ev) => this.onKeyDown(ev), onTouchStart: (ev) => ev.stopPropagation(), tabindex: this.inputTabIndex }),
+        }, contenteditable: "true", placeholder: overlays.translate(this.placeholder), readonly: this.readonly, rows: this.rows, onBlur: (ev) => formInputHelpers.onInputBlurred(ev, this, 'textarea'), onInput: () => this.onInputChanged(), onFocus: () => this.onInputFocused('textarea'), onKeyPress: (ev) => this.onKeyPress(ev), onKeyDown: (ev) => this.onKeyDown(ev), onTouchStart: (ev) => ev.stopPropagation(), tabindex: this.inputTabIndex }),
       this.clearable && (index.h("div", { class: { 'icon-suffix-focus last icon-close': true }, style: { display: hasValue ? undefined : 'none' }, onClick: () => (hasValue ? this.clearInput() : null) }, index.h("yoo-icon", { size: this.getIconSize(), name: "cross" })))
     ];
   }
@@ -410,13 +411,13 @@ const YooFormTextAreaComponent = class {
     var _a;
     return [
       index.h("div", { class: "outer-container" }, index.h("div", { class: "inner-container" }, this.allowMention || this.allowCustomInput ? this.renderMentionContainer() : this.renderTextArea(), index.h("slot", { name: "placeholder" })), index.h("slot", { name: "right" }), ((_a = this.inlineActions) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
-        this.inlineActions.map((action) => (index.h("yoo-tooltip", { content: index$1.translate(action.text), placement: "top" }, index.h("div", { class: "icon-suffix", onClick: () => action.handler() }, index.h("yoo-icon", { name: action.icon, color: action.iconColor })))))),
+        this.inlineActions.map((action) => (index.h("yoo-tooltip", { content: overlays.translate(action.text), placement: "top" }, index.h("div", { class: "icon-suffix", onClick: () => action.handler() }, index.h("yoo-icon", { name: action.icon, color: action.iconColor })))))),
       this.renderSegmentsCount(),
       this.allowLinkPreview && this.renderLinkPreviews()
     ];
   }
   renderReadonly() {
-    return index.h("div", { class: "readonly", innerHTML: index$1.translateMulti(this.value) });
+    return index.h("div", { class: "readonly", innerHTML: overlays.translateMulti(this.value) });
   }
   render() {
     return index.h(index.Host, { class: { ...commonHelpers.getAppContext(this.host), 'inline-actions': true, 'swiper-no-swiping': true } }, this.readonly ? this.renderReadonly() : this.renderEditable());