@yoobic/yobi 8.5.0-60 → 8.5.0-61

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

@@ -4,12 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
 const index$1 = require('./index-a1bbe627.js');
-require('./index-9aadeb94.js');
+require('./index-6f92bccb.js');
 const lodash = require('./lodash-a9050d79.js');
-const commonHelpers = require('./common-helpers-9f63a319.js');
-const draggableTagsHelpers = require('./draggable-tags-helpers-618109cc.js');
-const formInputHelpers = require('./form-input-helpers-2d988e31.js');
-const overlays = require('./overlays-e5d2ff76.js');
+const commonHelpers = require('./common-helpers-44428bf7.js');
+const draggableTagsHelpers = require('./draggable-tags-helpers-5e92ba1f.js');
+const formInputHelpers = require('./form-input-helpers-4ad38e19.js');
+const index$2 = require('./index-0cfb67d1.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const formSwipeCardsCss = "svg:not(:root){overflow:hidden}:host(:not([readonly])) .card{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;margin:0 auto;overflow:hidden;color:var(--dark, #000000);font-size:var(--font-size-28, 1.75rem);text-align:center;background-color:var(--stable-light, #f1f1f1);border-radius:var(--border-radius-08, 0.5rem);-webkit-box-shadow:var(--shadow-05, -0.375rem -0.375rem 0.5rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-05, -0.375rem -0.375rem 0.5rem 0 rgba(0, 0, 0, 0.1));-webkit-transition:opacity 0.25s, background-color 0.25s, -webkit-transform 0.25s;transition:opacity 0.25s, background-color 0.25s, -webkit-transform 0.25s;transition:transform 0.25s, opacity 0.25s, background-color 0.25s;transition:transform 0.25s, opacity 0.25s, background-color 0.25s, -webkit-transform 0.25s;will-change:transform, opacity;aspect-ratio:0.75}:host(:not([readonly])) .card:not([direction]){-webkit-transform:translate(0, -5%) scale(0.85);transform:translate(0, -5%) scale(0.85);opacity:0}:host(:not([readonly])) .card.current{z-index:3}:host(:not([readonly])) .card.current:not(.revealing){-webkit-transform:translate(0%, 9%) scale(1);transform:translate(0%, 9%) scale(1);opacity:1}:host(:not([readonly])) .card.second{z-index:2}:host(:not([readonly])) .card.second:not(.revealing){-webkit-transform:translate(0%, 3.5%) scale(0.95);transform:translate(0%, 3.5%) scale(0.95);opacity:1}:host(:not([readonly])) .card.third{z-index:1}:host(:not([readonly])) .card.third:not(.revealing){-webkit-transform:translate(0%, -2%) scale(0.9);transform:translate(0%, -2%) scale(0.9);opacity:1}:host(:not([readonly])) .card.current [class^=content],:host(:not([readonly])) .card.current [class^=content]::after{-webkit-transition:color 0.5s, background-color 0.5s ease-in-out, opacity 0.5s ease-in-out;transition:color 0.5s, background-color 0.5s ease-in-out, opacity 0.5s ease-in-out}:host(:not([readonly])) .card.current [class^=content]::after{position:absolute;top:0;left:0;z-index:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;color:var(--light, #ffffff);opacity:0;content:attr(data-category)}:host(:not([readonly])) .card.current .content-image,:host(:not([readonly])) .card.current .content-text,:host(:not([readonly])) .card[direction] .content-image,:host(:not([readonly])) .card[direction] .content-text{opacity:1 !important}:host(:not([readonly])) .card[swiped]{-webkit-animation:fade-out 1s ease-out;animation:fade-out 1s ease-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(:not([readonly])) .card[swiped=left]{-webkit-transform:translate(-100%, 15%) rotate(-15deg);transform:translate(-100%, 15%) rotate(-15deg)}:host(:not([readonly])) .card[swiped=right]{-webkit-transform:translate(100%, 15%) rotate(15deg);transform:translate(100%, 15%) rotate(15deg)}:host(:not([readonly])) .card[direction=right] .current{-webkit-transform:translate(0%, 9%) scale(1) rotate(3.5deg) !important;transform:translate(0%, 9%) scale(1) rotate(3.5deg) !important}:host(:not([readonly])) .card[direction=right] .current [class^=content]::after{background-color:var(--warning, #ed6e33) !important}:host(:not([readonly])) .card [class^=content]{position:absolute;width:100%;height:100%;word-break:break-word}:host(:not([readonly])) .card .content-text{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;padding:var(--spacing-16, 1rem)}:host(:not([readonly])) .card .content-image{-webkit-transition:opacity 0.25s linear;transition:opacity 0.25s linear}:host(:not([readonly])) .card[type=image] yoo-img{height:100%}:host(:not([readonly])) .card[type=textimage] .content-image{top:0;bottom:3.5rem}:host(:not([readonly])) .card[type=textimage] .content-image yoo-img{height:calc(100% - 3.5rem)}:host(:not([readonly])) .card[type=textimage] .content-text{bottom:0;height:3.5rem}:host([direction]) .card{-webkit-transition:-webkit-transform 0.35s !important;transition:-webkit-transform 0.35s !important;transition:transform 0.35s !important;transition:transform 0.35s, -webkit-transform 0.35s !important;-webkit-transform:translate(0%, 9%) scale(1);transform:translate(0%, 9%) scale(1);opacity:1}:host([direction]) .card.current [class^=content]::after{opacity:0.8 !important}:host([direction]) .card.current .content-text{color:var(--stable-light, #f1f1f1)}:host([direction]) .card.current.card+.card{-webkit-transform:translate(0%, 9%) scale(1);transform:translate(0%, 9%) scale(1);opacity:1}:host([direction]) .card.current.card+.card .content-image,:host([direction]) .card.current.card+.card .content-text{opacity:1 !important}:host([direction]) .card.current.card+.card+.card{-webkit-transform:translate(0%, 3.5%) scale(0.95);transform:translate(0%, 3.5%) scale(0.95);opacity:1}:host([direction]) .card.current.card+.card+.card+.card{-webkit-transform:translate(0%, -2%) scale(0.9);transform:translate(0%, -2%) scale(0.9);opacity:1}:host([direction=left]) .current{-webkit-transform:translate(0%, 9%) scale(1) rotate(-3.5deg) !important;transform:translate(0%, 9%) scale(1) rotate(-3.5deg) !important}:host([direction=left]) .current [data-category]::after{background-color:var(--app-color, #5a30f4) !important}:host([direction=right]) .current{-webkit-transform:translate(0%, 9%) scale(1) rotate(3.5deg) !important;transform:translate(0%, 9%) scale(1) rotate(3.5deg) !important}:host([direction=right]) .current [data-category]::after{background-color:var(--warning, #ed6e33) !important}:host([animated]) .card.current:not(.revealing){-webkit-transition-delay:0.25s;transition-delay:0.25s}:host([animated]) .card.current.revealing{-webkit-animation:\"current\" 0.25s ease-in-out;animation:\"current\" 0.25s ease-in-out;-webkit-animation-delay:150ms;animation-delay:150ms;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@-webkit-keyframes current{to{-webkit-transform:translate(0%, 9%) scale(1);transform:translate(0%, 9%) scale(1);opacity:1}}@keyframes current{to{-webkit-transform:translate(0%, 9%) scale(1);transform:translate(0%, 9%) scale(1);opacity:1}}:host([animated]) .card.second:not(.revealing){-webkit-transition-delay:0.5s;transition-delay:0.5s}:host([animated]) .card.second.revealing{-webkit-animation:\"second\" 0.25s ease-in-out;animation:\"second\" 0.25s ease-in-out;-webkit-animation-delay:300ms;animation-delay:300ms;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@-webkit-keyframes second{to{-webkit-transform:translate(0%, 3.5%) scale(0.95);transform:translate(0%, 3.5%) scale(0.95);opacity:1}}@keyframes second{to{-webkit-transform:translate(0%, 3.5%) scale(0.95);transform:translate(0%, 3.5%) scale(0.95);opacity:1}}:host([animated]) .card.third:not(.revealing){-webkit-transition-delay:0.75s;transition-delay:0.75s}:host([animated]) .card.third.revealing{-webkit-animation:\"third\" 0.25s ease-in-out;animation:\"third\" 0.25s ease-in-out;-webkit-animation-delay:450ms;animation-delay:450ms;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@-webkit-keyframes third{to{-webkit-transform:translate(0%, -2%) scale(0.9);transform:translate(0%, -2%) scale(0.9);opacity:1}}@keyframes third{to{-webkit-transform:translate(0%, -2%) scale(0.9);transform:translate(0%, -2%) scale(0.9);opacity:1}}.accent{color:var(--accent, #276ef1);fill:var(--accent, #276ef1)}.app-color{color:var(--app-color, #5a30f4);fill:var(--app-color, #5a30f4)}.danger{color:var(--danger, #d44333);fill:var(--danger, #d44333)}.dark{color:var(--dark, #000000);fill:var(--dark, #000000)}.energized{color:var(--energized, #ffc043);fill:var(--energized, #ffc043)}.info{color:var(--info, #d84c96);fill:var(--info, #d84c96)}.light{color:var(--light, #ffffff);fill:var(--light, #ffffff)}.stable{color:var(--stable, #adadad);fill:var(--stable, #adadad)}.stable-alt{color:var(--stable-alt, #d0d0d0);fill:var(--stable-alt, #d0d0d0)}.stable-light{color:var(--stable-light, #f1f1f1);fill:var(--stable-light, #f1f1f1)}.stable-ultralight{color:var(--stable-ultralight, #fafafa);fill:var(--stable-ultralight, #fafafa)}.success{color:var(--success, #3aa76d);fill:var(--success, #3aa76d)}.text-color{color:var(--text-color, #807f83);fill:var(--text-color, #807f83)}.warning{color:var(--warning, #ed6e33);fill:var(--warning, #ed6e33)}.wood{color:var(--wood, #99644c);fill:var(--wood, #99644c)}@-webkit-keyframes fade-out{from{opacity:1}to{opacity:0}}@keyframes fade-out{from{opacity:1}to{opacity:0}}.hidden{display:none !important}.flex{display:-ms-flexbox !important;display:flex !important}.block{display:block !important}:host(:not([readonly])){position:relative;display:block;height:100%}:host(:not([readonly])) yoo-banner{height:0}:host(:not([readonly])) main{display:grid;height:100%;-webkit-transition:opacity 1s ease-in-out;transition:opacity 1s ease-in-out}:host(:not([readonly])) #game{display:grid;grid-template-rows:calc(min(65vw, 16rem) * 4 / 3 + 6%) auto;overflow:hidden auto}:host(:not([readonly])) #game #background{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;max-height:calc(min(65vw, 16rem) * 4 / 3);background-color:var(--dark, #000000);-webkit-transition:background-color 0.25s ease-in-out;transition:background-color 0.25s ease-in-out}:host(:not([readonly])) #game #end-message{position:absolute;color:var(--light, #ffffff);font-size:var(--font-size-18, 1.125rem);text-align:center;visibility:hidden;opacity:0;-webkit-transition:opacity 0.5s ease-in-out;transition:opacity 0.5s ease-in-out}:host(:not([readonly])) #game #end-message yoo-lottie{width:30%;margin:0 auto}:host(:not([readonly])) #game #end-message div{font-weight:bold;font-size:var(--font-size-24, 1.5rem)}:host(:not([readonly])) #game #end-message span{padding-top:var(--spacing-16, 1rem)}:host(:not([readonly])) #game #end-message.active{visibility:visible;opacity:1}:host(:not([readonly])) #cards{position:relative;width:100%;max-width:min(65vw, 16rem);height:100%;max-height:calc(min(65vw, 16rem) * 4 / 3)}:host(:not([readonly])) #actions{display:inline-grid;grid-template-columns:1fr 1fr 1fr;width:100%;max-width:min(65vw, 16rem);margin:var(--spacing-16, 1rem) auto;line-height:2.5}:host(:not([readonly])) #actions .action{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;line-height:1.75;text-align:center}:host(:not([readonly])) #actions .action yoo-button{margin-bottom:var(--spacing-08, 0.5rem)}:host([readonly]){display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}:host([readonly]) .category-title{margin-bottom:var(--spacing-08, 0.5rem)}:host([readonly]) ul{display:grid;grid-gap:var(--spacing-16, 1rem);grid-template-columns:repeat(auto-fill, 6rem);margin:0;padding-left:0;list-style:none}:host([readonly]) ul+.category-title{margin-top:var(--spacing-16, 1rem)}:host([readonly]) ul li{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;height:8rem;overflow:hidden;border-style:solid;border-width:var(--border-width-01, 0.0625rem);border-radius:var(--border-radius-08, 0.5rem)}:host([readonly]) ul li.invalid{border-color:var(--danger, #d44333)}:host([readonly]) ul li.invalid yoo-img::before{position:absolute;width:100%;height:100%;background:var(--danger-20, rgba(212, 67, 51, 0.2));content:\"\"}:host([readonly]) ul li.invalid yoo-truncate{background:var(--danger, #d44333)}:host([readonly]) ul li.valid{border-color:var(--success, #3aa76d)}:host([readonly]) ul li.valid yoo-img::before{position:absolute;width:100%;height:100%;background:var(--success-20, rgba(58, 167, 109, 0.2));content:\"\"}:host([readonly]) ul li.valid yoo-truncate{background:var(--success, #3aa76d)}:host([readonly]) ul li yoo-img{position:relative;-ms-flex-positive:1;flex-grow:1}:host([readonly]) ul li yoo-truncate{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:var(--light, #ffffff);font-size:var(--font-size-14, 0.875rem)}:host([readonly]) ul li yoo-truncate:only-child{--max-lines:4;height:100%;padding:0 var(--spacing-08, 0.5rem)}:host([readonly]) ul li yoo-truncate:not(:only-child){--max-lines:1;height:2.125rem;padding:0 var(--spacing-04, 0.25rem)}:host([animated]) #game{-webkit-animation:show 0.5s ease-in-out forwards;animation:show 0.5s ease-in-out forwards}@-webkit-keyframes show{from{-webkit-transform:scale(0.95);transform:scale(0.95);opacity:0}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes show{from{-webkit-transform:scale(0.95);transform:scale(0.95);opacity:0}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}:host([animated]) .action.hide>*{-webkit-animation:fadeOut 0.75s ease-in-out forwards;animation:fadeOut 0.75s ease-in-out forwards}@-webkit-keyframes fadeOut{from{opacity:1}to{opacity:0}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}:host([animated]) .action:not(.hide)>*{-webkit-animation:fadeIn 0.75s ease-in-out forwards;animation:fadeIn 0.75s ease-in-out forwards}@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}:host([animated]) .action yoo-button{-webkit-transition:-webkit-transform 0.8s linear;transition:-webkit-transform 0.8s linear;transition:transform 0.8s linear;transition:transform 0.8s linear, -webkit-transform 0.8s linear}:host([direction=left]) #background{background-color:var(--app-color, #5a30f4) !important}:host([direction=right]) #background{background-color:var(--warning, #ed6e33) !important}:host([view=instructions]) main{grid-template-rows:1fr auto}:host([view=instructions]) main #instructions #header{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host([view=instructions]) main #instructions #header #title{font-weight:bold}:host([view=instructions]) main #instructions #categories{display:inline-grid;grid-template-columns:1fr 0.5fr 1fr;-ms-flex-align:center;align-items:center;justify-items:center;width:100%;margin:var(--spacing-24, 1.5rem) 0;text-align:center}:host([view=instructions]) main #instructions #categories .category{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;padding:0;color:var(--stable, #adadad)}:host([view=instructions]) main #instructions #categories .category p{max-width:75%;margin:auto;padding:var(--spacing-16, 1rem) 0;font-weight:bold}:host([view=instructions]) main #instructions #categories .category yoo-tag{margin:0 auto}:host([view=instructions]) main #instructions #document{background-color:var(--light, #ffffff)}:host([view=instructions]) main #instructions #document .document-title{padding:0 var(--spacing-16, 1rem);font-size:var(--font-size-16, 1rem)}:host([view=instructions]) main #instructions #document yoo-form-document{--outer-container-padding:cssvar(spacing-16) cssvar(spacing-16);width:calc(100% - var(--spacing-16, 1rem))}:host([view=instructions]) main yoo-button{-ms-flex-align:end;align-items:flex-end}:host(.mobile[view=instructions]) #instructions #header{padding:var(--spacing-16, 1rem);background:var(--dark, #000000);border-radius:var(--border-radius-04, 0.25rem)}:host(.mobile[view=instructions]) #instructions #header #title{color:var(--light, #ffffff);font-weight:bold;font-size:var(--font-size-28, 1.75rem)}:host(.mobile[view=instructions]) yoo-button{margin:var(--spacing-16, 1rem) 0}:host(.web[view=instructions]) yoo-icon[name=swipe-explanation]{width:5rem;height:5rem;margin:auto;--inner-width:5rem;--inner-height:5rem}:host(.web[view=instructions]) yoo-button{margin-right:var(--spacing-16, 1rem);margin-left:auto}:host(.web[view=game]) main{grid-template-rows:auto 1fr}:host(.web[view=game]) main #actions{top:109%;min-width:32rem;margin-top:0}:host(.web) #game{grid-template-rows:calc(min(65vw, 16rem) * 4 / 3) auto}:host(.web) .action:nth-child(2){margin-top:calc(9% + var(--spacing-32, 2rem))}:host(.web) #header{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding:var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);line-height:1.75;text-align:center;background-color:var(--stable-ultralight, #fafafa)}:host(.web) #header #title{color:var(--dark, #000000) !important;font-weight:bold;font-size:var(--font-size-28, 1.75rem)}";
@@ -217,7 +217,7 @@ const YooFormSwipeCardsComponent = class {
     const formatCardValue = (value) => {
       var _a, _b;
       if (this.isMode.image) {
-        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();
+        return index$2.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) {
         return value._filename;
@@ -229,7 +229,7 @@ const YooFormSwipeCardsComponent = class {
   }
   displayFooterElement() {
     var _a, _b;
-    const yooIonSlideEl = overlays.findParent(this.host, 'yoo-ion-slide');
+    const yooIonSlideEl = index$2.findParent(this.host, 'yoo-ion-slide');
     const footerElement = yooIonSlideEl === null || yooIonSlideEl === void 0 ? void 0 : yooIonSlideEl.querySelector('yoo-form-footer');
     if (footerElement) {
       this.nextButtonText = ((_b = (_a = footerElement === null || footerElement === void 0 ? void 0 : footerElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('yoo-button:last-of-type')) === null || _b === void 0 ? void 0 : _b.textContent) || '';
@@ -237,12 +237,12 @@ const YooFormSwipeCardsComponent = class {
     }
   }
   initDraggable() {
-    this.cardsElements.filter((e) => !overlays.Draggable.get(e)).forEach((e) => this.getDraggableInstance(e));
+    this.cardsElements.filter((e) => !index$2.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;
-    this.swipeCards = ((_a = this.cardValues) === null || _a === void 0 ? void 0 : _a.map((value) => ({ id: overlays.getUUID(), value }))) || [];
+    this.swipeCards = ((_a = this.cardValues) === null || _a === void 0 ? void 0 : _a.map((value) => ({ id: index$2.getUUID(), value }))) || [];
   }
   lockSwipeActions(lockState = true) {
     var _a;
@@ -254,7 +254,7 @@ const YooFormSwipeCardsComponent = class {
     await Promise.all((_a = this.swipeCards) === null || _a === void 0 ? void 0 : _a.map((card) => this.undoCard(card, false)));
     (_b = this.cardsElements) === null || _b === void 0 ? void 0 : _b.forEach((cardElement) => {
       cardElement.removeAttribute('swiped');
-      overlays.gsapSet(cardElement, { clearProps: 'all' });
+      index$2.gsapSet(cardElement, { clearProps: 'all' });
     });
   }
   swipeCard(direction) {
@@ -281,7 +281,7 @@ const YooFormSwipeCardsComponent = class {
       const isThrowable = [left, right].includes(swipingDirection);
       const contentContainer = this.currentCardElement.querySelector(`.content-${this.isMode.image ? 'image' : 'text'}`);
       if (isThrowable) {
-        contentContainer.dataset.category = overlays.translateMulti(swipingDirection === left ? categoryLeft : swipingDirection === right ? categoryRight : '');
+        contentContainer.dataset.category = index$2.translateMulti(swipingDirection === left ? categoryLeft : swipingDirection === right ? categoryRight : '');
         this.host.setAttribute('direction', swipingDirection);
       }
       else {
@@ -291,7 +291,7 @@ const YooFormSwipeCardsComponent = class {
     }
   }
   async getDraggableInstance(cardElement) {
-    const timeline = await overlays.gsapTimeline();
+    const timeline = await index$2.gsapTimeline();
     if (!timeline || !cardElement) {
       return;
     }
@@ -318,14 +318,14 @@ const YooFormSwipeCardsComponent = class {
       if (isSwipeable(cardElement)) {
         const { isCardThrowable, swipedDirection } = this.getSwipedState(swipeAnimation.progress());
         !isCardThrowable
-          ? returnedAnimation.to(cardElement, this.animationDelay, baseProps).to([this.buttons.left, this.buttons.right], { scale: 1, ease: overlays.Power1.easeInOut }, 0)
+          ? returnedAnimation.to(cardElement, this.animationDelay, baseProps).to([this.buttons.left, this.buttons.right], { scale: 1, ease: index$2.Power1.easeInOut }, 0)
           : this.swipeCard(swipedDirection);
       }
       else {
-        overlays.gsapTo(cardElement, this.animationDelay, baseProps);
+        index$2.gsapTo(cardElement, this.animationDelay, baseProps);
       }
     };
-    return new overlays.Draggable(cardElement, {
+    return new index$2.Draggable(cardElement, {
       bound: this.host,
       type: 'left, top',
       zIndexBoost: false,
@@ -387,63 +387,63 @@ const YooFormSwipeCardsComponent = class {
         }, ref: (el) => (this.cardsElements[i] = el), ...{
           type: this.mode,
           ...(swipedDirection && { direction: swipedDirection })
-        } }, this.hasImage && (index.h("div", { class: "content-image" }, index.h("yoo-img", { instant: true, src: overlays.getMedia(value['_downloadURL']) }))), this.hasText && index.h("div", { class: "content-text" }, overlays.translateMulti((value === null || value === void 0 ? void 0 : value['_filename']) || value))));
+        } }, this.hasImage && (index.h("div", { class: "content-image" }, index.h("yoo-img", { instant: true, src: index$2.getMedia(value['_downloadURL']) }))), this.hasText && index.h("div", { class: "content-text" }, index$2.translateMulti((value === null || value === void 0 ? void 0 : value['_filename']) || value))));
     })));
   }
   renderInstructionCategory(side) {
     const isLeftCategory = side === index$1.SwipeCardsDirection.left;
     const categoryColor = isLeftCategory ? 'app-color' : 'warning';
-    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: true, [side]: true } }, 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()}`))));
+    const iconColor = index$2.isWeb(this.host) ? categoryColor : 'light';
+    const iconSize = index$2.isWeb(this.host) ? 'large' : 'medium';
+    const category = this.categories && index$2.translateMulti(isLeftCategory ? this.categories[0] : this.categories[1]);
+    return (index.h("div", { class: { category: true, [side]: true } }, index.h("yoo-tag", { noBackground: index$2.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$2.translate(`SWIPE${side.toUpperCase()}`))));
   }
   renderTopDescription() {
-    return (index.h("div", { id: "header" }, index.h("span", { id: "title", innerHTML: overlays.translateMulti(this.label) }), index.h("span", { class: "stable" }, overlays.translate(this.description || 'CARDSWIPEDEFAULTINSTRUCTIONS'))));
+    return (index.h("div", { id: "header" }, index.h("span", { id: "title", innerHTML: index$2.translateMulti(this.label) }), index.h("span", { class: "stable" }, index$2.translate(this.description || 'CARDSWIPEDEFAULTINSTRUCTIONS'))));
   }
   renderHeaderInstructions() {
     return [
       this.renderTopDescription(),
       index.h("section", { id: "categories" }, this.renderInstructionCategory(index$1.SwipeCardsDirection.left), index.h("yoo-icon", { size: "extra-extra-large", name: "swipe-explanation", color: "stable-alt" }), this.renderInstructionCategory(index$1.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() })))
+      this.instructionsDocument && (index.h("section", { id: "document" }, index.h("div", { class: "document-title" }, index$2.translate('ATTACHMENTS')), index.h("yoo-form-document", { document: this.instructionsDocument, readonly: true, onInputChanged: (ev) => ev.stopPropagation() })))
     ];
   }
   renderActions() {
     const { left, undo, right } = index$1.SwipeCardsDirection;
     return index.h("section", { id: "actions" }, [left, undo, right].map((d, i) => this.renderSwipeAction(d, i)));
   }
-  renderSwipeAction(direction, index$2) {
+  renderSwipeAction(direction, index$3) {
     var _a;
     const isUndo = direction === index$1.SwipeCardsDirection.undo;
     const isLeft = direction === index$1.SwipeCardsDirection.left;
-    const isMobile = !overlays.isWeb(this.host);
-    const actionColor = isUndo ? (overlays.isWeb(this.host) ? 'light' : 'stable-alt') : isLeft ? 'app-color' : 'warning';
+    const isMobile = !index$2.isWeb(this.host);
+    const actionColor = isUndo ? (index$2.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}`, disabled: !this.enableButtonActions, 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.undoCard() : 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]))));
+    return (index.h("div", { class: { action: true, hide: this.hasAllCardBeenSwiped && !isUndo } }, index.h("yoo-button", { shape: "circular", rippleType: "unbounded", id: `swipe-${direction}`, disabled: !this.enableButtonActions, 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$3] = element), onClick: () => (isUndo ? this.undoCard() : 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$2.translateMulti(this.categories[categoryIndex]))));
   }
   renderBackground() {
-    return (index.h("section", { id: "background" }, index.h("div", { 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 }))), this.renderCards()));
+    return (index.h("section", { id: "background" }, index.h("div", { id: "end-message", class: { active: this.hasAllCardBeenSwiped } }, index.h("yoo-lottie", { autoplay: this.hasAllCardBeenSwiped, type: "check" }), index.h("div", { innerHTML: index$2.translate('ENDSWIPINGCARDSMESSAGE') }), index.h("span", null, index$2.translate('CLICKTOCONTINUE', { buttonName: this.nextButtonText }))), this.renderCards()));
   }
   renderGame() {
     return [
-      overlays.isWeb(this.host) && this.renderTopDescription(),
+      index$2.isWeb(this.host) && this.renderTopDescription(),
       index.h("section", { id: "game" }, this.renderBackground(), this.renderActions())
     ];
   }
   renderStartButton() {
     return (!this.readonly &&
-      this.showInstructionView && (index.h("yoo-button", { disabled: !this.hasData || !this.isDataValid, size: overlays.isWeb(this.host) ? 'medium' : 'large', color: "app-color", onClick: () => {
+      this.showInstructionView && (index.h("yoo-button", { disabled: !this.hasData || !this.isDataValid, size: index$2.isWeb(this.host) ? 'medium' : 'large', color: "app-color", onClick: () => {
         this.revealCards = true;
         this.showInstructionView = false;
         this.displayFooterElement();
-      } }, overlays.translate('START'))));
+      } }, index$2.translate('START'))));
   }
   renderInstructions() {
     return [index.h("section", { id: "instructions" }, this.renderHeaderInstructions()), this.renderStartButton()];
   }
   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) ? overlays.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) ? index$2.translateMulti(category) : ''); };
     const getAnswerImage = (answerValue) => {
       var _a, _b;
       const getImageValue = (image) => image[`${this.isMode.image ? '_downloadURL' : '_filename'}`];
@@ -455,7 +455,7 @@ const YooFormSwipeCardsComponent = class {
     return (this.readonly &&
       this.categories.map((categoryValue, catIndex) => [
         index.h("div", { class: "category-title" }, getAnswerCounter(categoryValue)),
-        index.h("ul", null, Array.from(new Set(this.value[catIndex])).map((userAnswer) => (index.h("li", { class: getValidationClass(catIndex, userAnswer) }, !this.isMode.text && index.h("yoo-img", { src: getAnswerImage(userAnswer) }), !this.isMode.image && index.h("yoo-truncate", null, overlays.translateMulti(userAnswer))))))
+        index.h("ul", null, Array.from(new Set(this.value[catIndex])).map((userAnswer) => (index.h("li", { class: getValidationClass(catIndex, userAnswer) }, !this.isMode.text && index.h("yoo-img", { src: getAnswerImage(userAnswer) }), !this.isMode.image && index.h("yoo-truncate", null, index$2.translateMulti(userAnswer))))))
       ]));
   }
   renderBanner() {

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

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
-require('./index-9aadeb94.js');
+require('./index-6f92bccb.js');
 const lodash = require('./lodash-a9050d79.js');
 const sortable_esm = require('./sortable.esm-00e15691.js');
-const formInputHelpers = require('./form-input-helpers-2d988e31.js');
-const overlays = require('./overlays-e5d2ff76.js');
+const formInputHelpers = require('./form-input-helpers-4ad38e19.js');
+const index$1 = require('./index-0cfb67d1.js');
 require('./index-a1bbe627.js');
-require('./common-helpers-9f63a319.js');
+require('./common-helpers-44428bf7.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const formTableCss = "svg:not(:root){overflow:hidden}:host .outer-container .action{margin-top:var(--spacing-16, 1rem)}:host .outer-container .count{color:var(--text-color, #807f83)}";
@@ -43,14 +43,14 @@ const YooFormTableComponent = class {
       ? []
       : [
         {
-          text: () => overlays.translate('YOOBICEDIT'),
+          text: () => index$1.translate('YOOBICEDIT'),
           icon: () => 'pen',
           color: () => 'light',
           cssClass: () => 'bg-app-color light',
           handler: (item) => this.onUpsertItem(item)
         },
         {
-          text: () => overlays.translate('DELETE'),
+          text: () => index$1.translate('DELETE'),
           icon: () => 'delete',
           color: () => 'light',
           cssClass: () => 'bg-danger light',
@@ -104,7 +104,7 @@ const YooFormTableComponent = class {
   onUpsertItem(item) {
     if (!this.isAddingOrEditing) {
       this.isAddingOrEditing = true;
-      overlays.getAsyncExtraData({ type: 'field-table-add', params: { collectionName: this.collectionName, customModel: this.customModel, item, slidesTransform: this.slidesTransform, forceMobile: !overlays.isWeb(this.host) } })
+      index$1.getAsyncExtraData({ type: 'field-table-add', params: { collectionName: this.collectionName, customModel: this.customModel, item, slidesTransform: this.slidesTransform, forceMobile: !index$1.isWeb(this.host) } })
         .then((ret) => {
         if (ret && ret.data) {
           this.afterUpsertItem(ret.data, item);
@@ -129,14 +129,14 @@ const YooFormTableComponent = class {
   }
   onSelectItem(item) {
     if (this.readonly) {
-      overlays.getAsyncExtraData({ type: 'field-table-add', params: { collectionName: this.collectionName, customModel: this.customModel, item, readonly: true, forceMobile: !overlays.isWeb(this.host) } });
+      index$1.getAsyncExtraData({ type: 'field-table-add', params: { collectionName: this.collectionName, customModel: this.customModel, item, readonly: true, forceMobile: !index$1.isWeb(this.host) } });
     }
     else {
       this.onUpsertItem(item);
     }
   }
   oDeleteItem(item) {
-    overlays.showAlert(overlays.translate('DELETE'), [overlays.translate('CANCEL'), overlays.translate('YOOBICOK')], overlays.translate('DELETECONFIRM')).then((ret) => {
+    index$1.showAlert(index$1.translate('DELETE'), [index$1.translate('CANCEL'), index$1.translate('YOOBICOK')], index$1.translate('DELETECONFIRM')).then((ret) => {
       if (ret) {
         this.value = this.value.filter((v) => v !== item);
         formInputHelpers.setValueAndValidateInput(this.value, this);
@@ -145,7 +145,7 @@ const YooFormTableComponent = class {
   }
   renderCount() {
     if (this.value && this.value.length > 0) {
-      return overlays.translate('NUMBEROFITEMSEDITED') + ': ' + this.value.length.toLocaleString();
+      return index$1.translate('NUMBEROFITEMSEDITED') + ': ' + this.value.length.toLocaleString();
     }
   }
   renderItems() {
@@ -183,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: overlays.isWeb(this.host) ? 'medium' : 'large', disabled: addDisabled, class: "expanded", color: "app-color", onClick: () => this.onAddNewItem() }, overlays.translate('ADDNEWITEM')))
+      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')))
     ];
   }
   render() {

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

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
-require('./index-9aadeb94.js');
+require('./index-6f92bccb.js');
 const lodash = require('./lodash-a9050d79.js');
-const formInputHelpers = require('./form-input-helpers-2d988e31.js');
-const overlays = require('./overlays-e5d2ff76.js');
+const formInputHelpers = require('./form-input-helpers-4ad38e19.js');
+const index$1 = require('./index-0cfb67d1.js');
 require('./index-a1bbe627.js');
-require('./common-helpers-9f63a319.js');
+require('./common-helpers-44428bf7.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const formTaskCss = "svg:not(:root){overflow:hidden}: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}:host(.rtl) .task-part yoo-avatar{margin-right:0;margin-left:var(--spacing-08, 0.5rem)}";
@@ -49,8 +49,8 @@ const YooFormTaskComponent = class {
     this.upsertTask(task, index);
   }
   onRemoveTask(task) {
-    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) => {
+    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) => {
       if (ret === true) {
         lodash.remove(this.value, (t) => t === task);
         this.value = [...this.value];
@@ -62,41 +62,41 @@ const YooFormTaskComponent = class {
     const buttons = [
       {
         actionType: 'edit',
-        text: overlays.translate('YOOBICEDIT'),
+        text: index$1.translate('YOOBICEDIT'),
         handler: () => this.onEditTask(task, index)
       },
       {
         actionType: 'delete',
-        text: overlays.translate('DELETE'),
+        text: index$1.translate('DELETE'),
         cssClass: 'danger',
         handler: () => this.onRemoveTask(task)
       }
     ];
-    overlays.isWeb(this.host)
-      ? overlays.showContextMenu(ev, {
+    index$1.isWeb(this.host)
+      ? index$1.showContextMenu(ev, {
         multipleSelection: false,
         contentButtons: buttons,
         placement: 'below',
         hostElement: this.actionsButton
       })
-      : overlays.showActionSheet(buttons);
+      : index$1.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 = !overlays.isWeb(this.host);
+    form.hideSaveButton = !index$1.isWeb(this.host);
     form.showRecap = false;
     form.data = task;
     form.suffix = '.value';
-    form.header = overlays.translate('ADDNEWACTION');
+    form.header = index$1.translate('ADDNEWACTION');
     form.fieldFetchDataFn = (ev) => {
       this.fieldFetchData.emit(ev);
     };
-    form.footerButtons = !overlays.isWeb(this.host) ? [
+    form.footerButtons = !index$1.isWeb(this.host) ? [
       {
-        text: () => overlays.translate('YOOBICSAVE'),
+        text: () => index$1.translate('YOOBICSAVE'),
         color: () => 'app-color',
         size: () => 'large',
         handler: (_item, dialogRef) => {
@@ -106,9 +106,9 @@ const YooFormTaskComponent = class {
         }
       }
     ] : null;
-    overlays.showModal(form, {
+    index$1.showModal(form, {
       height: 'medium'
-    }, null, overlays.getModalAnimation('Enter', 'X', { host: this.host, reversedSlide: true }), overlays.getModalAnimation('Leave', 'X', { host: this.host, reversedSlide: true }), true).then((ret) => {
+    }, null, index$1.getModalAnimation('Enter', 'X', { host: this.host, reversedSlide: true }), index$1.getModalAnimation('Leave', 'X', { host: this.host, reversedSlide: true }), true).then((ret) => {
       if (ret === null || ret === void 0 ? void 0 : ret.data) {
         this.value = this.value || [];
         if (index < 0) {
@@ -128,23 +128,23 @@ 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 }, 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" })))))),
+          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" })))))),
           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" }, overlays.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" }, index$1.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" }, 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));
+    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));
   }
   render() {
-    return (index.h(index.Host, { class: { rtl: overlays.isRTL() } }, this.readonly ? this.renderReadonly() : this.renderEditable()));
+    return (index.h(index.Host, { class: { rtl: index$1.isRTL() } }, this.readonly ? this.renderReadonly() : this.renderEditable()));
   }
   get host() { return index.getElement(this); }
 };

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

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
-const overlays = require('./overlays-e5d2ff76.js');
-require('./index-9aadeb94.js');
+const index$1 = require('./index-0cfb67d1.js');
+require('./index-6f92bccb.js');
 const lodash = require('./lodash-a9050d79.js');
-const commonHelpers = require('./common-helpers-9f63a319.js');
-const formInputHelpers = require('./form-input-helpers-2d988e31.js');
-const formTextAreaHelpers = require('./form-text-area-helpers-8cf04c81.js');
+const commonHelpers = require('./common-helpers-44428bf7.js');
+const formInputHelpers = require('./form-input-helpers-4ad38e19.js');
+const formTextAreaHelpers = require('./form-text-area-helpers-b7297742.js');
 require('./index-a1bbe627.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
@@ -42,7 +42,7 @@ const YooFormTextAreaComponent = class {
     this.sanitizeValue = false;
     this.mentionedUsers = [];
     this.allowLinkUpdate = true;
-    this.updateSegmentsCountDebounce = overlays.debounce(() => this.updateSegmentsCount(), 2000);
+    this.updateSegmentsCountDebounce = index$1.debounce(() => this.updateSegmentsCount(), 2000);
     this.scrollIntoViewOnFocus = false;
   }
   get isRichText() {
@@ -54,7 +54,7 @@ const YooFormTextAreaComponent = class {
     }
     // clean input and sync mention ids when the value is cleared from outside
     if (this.isRichText && !value) {
-      this.inputEl.innerHTML = overlays.replaceAtTagToMentionTag(value, this.mentions);
+      this.inputEl.innerHTML = index$1.replaceAtTagToMentionTag(value, this.mentions);
       this.syncMentionIds();
     }
     else if (!this.isRichText) {
@@ -66,7 +66,7 @@ const YooFormTextAreaComponent = class {
   }
   onKeyboardShown() {
     if (this.scrollIntoViewOnFocus) {
-      overlays.safeScrollIntoView(this.host, null, true);
+      index$1.safeScrollIntoView(this.host, null, true);
       this.scrollIntoViewOnFocus = false;
     }
   }
@@ -106,7 +106,7 @@ const YooFormTextAreaComponent = class {
     }
     else {
       this.setLocalValue();
-      this.inputEl.innerHTML = overlays.replaceAtTagToMentionTag(value, this.mentions);
+      this.inputEl.innerHTML = index$1.replaceAtTagToMentionTag(value, this.mentions);
       this.setFocus();
       const { insertElement } = formTextAreaHelpers.getInsertElementProp(this.host, this.inputEl);
       formTextAreaHelpers.restoreCursorPosition({ element: insertElement, parentElement: this.inputEl });
@@ -126,7 +126,7 @@ const YooFormTextAreaComponent = class {
   componentWillLoad() {
     formInputHelpers.setValidator(this);
     this.value = this.sanitizeInputValue();
-    this.emitValueAndSetValidity = overlays.debounce((value, inputElement, forceNullValidation, validateInput, skipValueAssignment, preventInputChangedEvent) => {
+    this.emitValueAndSetValidity = index$1.debounce((value, inputElement, forceNullValidation, validateInput, skipValueAssignment, preventInputChangedEvent) => {
       formInputHelpers.setValueAndValidateInput(value, inputElement, forceNullValidation, validateInput, skipValueAssignment, preventInputChangedEvent);
       this.validityChanged.emit(this.validity);
     }, this.debounce || 0);
@@ -142,7 +142,7 @@ const YooFormTextAreaComponent = class {
       // block click event when editing the tag
       if (this.inputEl) {
         if (this.value) {
-          this.inputEl.innerHTML = overlays.replaceAtTagToMentionTag(this.value, this.mentions);
+          this.inputEl.innerHTML = index$1.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));
@@ -158,8 +158,8 @@ const YooFormTextAreaComponent = class {
         this.inputEl.value = this.value;
       }
     }
-    if (overlays.isNativeMobile() && overlays.isIOS()) {
-      overlays.enableKeyboardResize();
+    if (index$1.isNativeMobile() && index$1.isIOS()) {
+      index$1.enableKeyboardResize();
     }
     if (this.autoInitialRows && this.inputEl) {
       const { scrollHeight, clientHeight } = this.inputEl;
@@ -188,7 +188,7 @@ const YooFormTextAreaComponent = class {
     }
   }
   sanitizeInputValue(value = this.value) {
-    return !this.isRichText && this.sanitizeValue ? overlays.sanitizeInputValue(value) : value;
+    return !this.isRichText && this.sanitizeValue ? index$1.sanitizeInputValue(value) : value;
   }
   setTextareaMaxLengh() {
     if (this.maxCharacters && this.inputEl && !this.allowMention && !this.allowCustomInput) {
@@ -254,7 +254,7 @@ const YooFormTextAreaComponent = class {
         setTimeout(() => {
           this.allowLinkUpdate = true;
           const content = this.inputEl.innerHTML || '';
-          const updatedLinks = overlays.updateLinkPreviews(content, this.linkPreviews, (ev === null || ev === void 0 ? void 0 : ev.inputType) === 'deleteContentBackward' || (ev === null || ev === void 0 ? void 0 : ev.key) === 'Backspace');
+          const updatedLinks = index$1.updateLinkPreviews(content, this.linkPreviews, (ev === null || ev === void 0 ? void 0 : ev.inputType) === 'deleteContentBackward' || (ev === null || ev === void 0 ? void 0 : ev.key) === 'Backspace');
           if (updatedLinks === null || updatedLinks === void 0 ? void 0 : updatedLinks.hasChanges) {
             this.linkPreviews = [...updatedLinks.previews];
           }
@@ -268,10 +268,10 @@ const YooFormTextAreaComponent = class {
       return;
     }
     this.inputEl.blur();
-    if (overlays.isNativeMobile() && overlays.Keyboard) {
-      overlays.Keyboard.hide();
+    if (index$1.isNativeMobile() && index$1.Keyboard) {
+      index$1.Keyboard.hide();
     }
-    overlays.getAsyncExtraData({ type: 'mention', params: { otherIds: this.otherIds, mentionConfigs: this.mentionConfigs } }).then((res) => {
+    index$1.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;
@@ -289,8 +289,8 @@ const YooFormTextAreaComponent = class {
             replaceFirstOnly: true
           };
           formTextAreaHelpers.safeInsertElements(insertParams);
-          if (overlays.isNativeMobile() && overlays.Keyboard) {
-            overlays.Keyboard.hide();
+          if (index$1.isNativeMobile() && index$1.Keyboard) {
+            index$1.Keyboard.hide();
           }
           // update mention list
           this.syncMentionIds();
@@ -327,10 +327,10 @@ const YooFormTextAreaComponent = class {
   }
   updateSegmentsCount() {
     if (this.displaySegmentsCount) {
-      const formDynamic = overlays.findParent(this.host, 'yoo-form-dynamic');
+      const formDynamic = index$1.findParent(this.host, 'yoo-form-dynamic');
       if (formDynamic === null || formDynamic === void 0 ? void 0 : formDynamic.getData) {
         return formDynamic.getData().then((data) => {
-          return overlays.getAsyncExtraData({ type: 'sms-segments-count', params: { value: this.value, data } }).then((ret) => {
+          return index$1.getAsyncExtraData({ type: 'sms-segments-count', params: { value: this.value, data } }).then((ret) => {
             this.segmentsCount = ret;
           });
         });
@@ -392,7 +392,7 @@ const YooFormTextAreaComponent = class {
     formInputHelpers.onInputFocused(this, tag);
   }
   renderSegmentsCount() {
-    return this.displaySegmentsCount && this.segmentsCount >= 0 && index.h("div", { class: "segments-count" }, overlays.translate('SEGMENTS'), ": ", this.segmentsCount.toLocaleString());
+    return this.displaySegmentsCount && this.segmentsCount >= 0 && index.h("div", { class: "segments-count" }, index$1.translate('SEGMENTS'), ": ", this.segmentsCount.toLocaleString());
   }
   renderLinkPreviews() {
     return (index.h("yoo-links-preview", { closeable: true, inline: true, links: this.linkPreviews, showErrors: false, onLinkPreviewChanged: (ev) => this.onLinkPreviewChanged(ev) }));
@@ -405,15 +405,15 @@ const YooFormTextAreaComponent = class {
     ];
   }
   renderTextArea() {
-    const hasValue = !overlays.isNullOrUndefined(this.value) && this.value !== '';
+    const hasValue = !index$1.isNullOrUndefined(this.value) && this.value !== '';
     return [
       index.h("textarea", { style: { maxHeight: this.maxRows ? `${this.maxRows * LINE_HEIGHT + PADDING}px` : 'auto' }, ref: (el) => (this.inputEl = el), onClick: (ev) => {
-          if (overlays.isWeb() && overlays.isFirefox()) {
+          if (index$1.isWeb() && index$1.isFirefox()) {
             this.inputEl.focus();
             this.onInputFocused('textarea');
           }
           ev.preventDefault();
-        }, 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 }),
+        }, 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 }),
       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" })))
     ];
   }
@@ -421,13 +421,13 @@ const YooFormTextAreaComponent = class {
     var _a;
     return [
       index.h("div", { class: "outer-container" }, index.h("div", { class: "inner-container" }, this.isRichText ? 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: 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.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.renderSegmentsCount(),
       this.allowLinkPreview && this.renderLinkPreviews()
     ];
   }
   renderReadonly() {
-    return index.h("div", { class: "readonly", innerHTML: overlays.translateMulti(this.value) });
+    return index.h("div", { class: "readonly", innerHTML: index$1.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());