@yoobic/yobi 8.5.0-60 → 8.5.0-62

package/dist/cjs/yoo-form-todo-mission.cjs.entry.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
-const index$1 = require('./index-a1bbe627.js');
-require('./index-9aadeb94.js');
+const index$1 = require('./index-cb8276bc.js');
+require('./index-7790c794.js');
 const lodash = require('./lodash-a9050d79.js');
-const commonHelpers = require('./common-helpers-9f63a319.js');
-const overlays = require('./overlays-e5d2ff76.js');
+const commonHelpers = require('./common-helpers-0724ae60.js');
+const index$2 = require('./index-4cdf7949.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const formTodoMissionCss = "svg:not(:root){overflow:hidden}:host{display:block}:host .outer-container{position:relative}:host .outer-container .title{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-bottom:var(--spacing-16, 1rem);font-weight:bold;text-transform:uppercase}:host .outer-container .title yoo-icon{margin-right:var(--spacing-08, 0.5rem)}:host .outer-container .container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin-bottom:var(--spacing-24, 1.5rem);border-radius:var(--spacing-08, 0.5rem)}:host .outer-container .container #task-container{margin:var(--spacing-08, 0.5rem)}:host .outer-container .container #task-container #previous{display:-ms-flexbox;display:flex}:host .outer-container .container #task-container #previous menu-left{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;padding:var(--spacing-08, 0.5rem) var(--spacing-08, 0.5rem) 0 var(--spacing-08, 0.5rem)}:host .outer-container .container #task-container #previous menu-left .border{width:100%;height:0;border-top:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);width:var(--spacing-02, 0.125rem);height:100%;margin-bottom:var(--spacing-04, 0.25rem);background-color:var(--app-color, #5a30f4)}:host .outer-container .container #task-container #previous menu-right yoo-form-input-container{font-weight:var(--font-weight-700, 700);font-size:var(--font-size-16, 1rem)}:host .outer-container .container #task-container #previous menu-right yoo-form-text-area{font-weight:var(--font-weight-400, 400);font-size:var(--font-size-16, 1rem)}:host .outer-container .container #task-container .linked-task{margin:var(--spacing-08, 0.5rem) 0 var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);color:var(--dark-40, rgba(0, 0, 0, 0.4));font-size:var(--font-size-12, 0.75rem)}:host .outer-container .container #task-container .task{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding:var(--spacing-08, 0.5rem)}:host .outer-container .container #task-container .task header{display:-ms-flexbox;display:flex}:host .outer-container .container #task-container .task header task-details{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .outer-container .container #task-container .task header task-details .task-title{margin:0;padding:0 0 0 var(--spacing-08, 0.5rem);font-weight:var(--font-weight-700, 700);font-size:var(--font-size-16, 1rem)}:host .outer-container .container #task-container .task header task-details .user{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin:0;padding:var(--spacing-08, 0.5rem) 0 0 var(--spacing-08, 0.5rem)}:host .outer-container .container #task-container .task header task-details .user yoo-avatar{padding-right:var(--spacing-04, 0.25rem)}:host .outer-container .container #task-container .task header task-details .user p{margin:0;font-weight:normal;font-size:var(--font-size-12, 0.75rem)}:host .outer-container .container #task-container .task header task-details yoo-tag{padding:var(--spacing-08, 0.5rem) 0 0 var(--spacing-08, 0.5rem)}:host .outer-container .container #task-container .task header yoo-button{position:absolute;margin:0}:host .outer-container .container #task-container .task header yoo-button:not(.rtl){right:var(--spacing-16, 1rem)}:host .outer-container .container #task-container .task header yoo-button.rtl{left:var(--spacing-16, 1rem)}:host .outer-container .container #task-container .task additionnal-fields{padding-top:var(--spacing-08, 0.5rem)}:host .outer-container .container #task-container .task additionnal-fields #comments{padding-top:var(--spacing-08, 0.5rem)}:host .outer-container .container #task-container .task additionnal-fields #comments comments-header{display:-ms-flexbox;display:flex}:host .outer-container .container #task-container .task additionnal-fields #comments comments-header .comments-title{margin:0;font-size:var(--font-size-12, 0.75rem)}:host .outer-container .container #task-container .task additionnal-fields #comments comments-header .comments-optional{margin:0;padding-left:var(--spacing-08, 0.5rem);color:var(--stable, #adadad);font-size:var(--font-size-12, 0.75rem)}:host .outer-container .container #task-container .task additionnal-fields #comments yoo-form-text-area{font-size:var(--font-size-16, 1rem)}:host .outer-container .container #task-container .task additionnal-fields #comments[editModeComments] comments-header{padding-bottom:var(--spacing-08, 0.5rem)}:host .outer-container .container #task-container .task additionnal-fields #photo{padding-top:var(--spacing-08, 0.5rem)}:host .outer-container .container #task-container .task additionnal-fields #photo photo-header{display:-ms-flexbox;display:flex}:host .outer-container .container #task-container .task additionnal-fields #photo photo-header .photo-title{margin:0;font-size:var(--font-size-12, 0.75rem)}:host .outer-container .container #task-container .task additionnal-fields #photo photo-header .photo-optional{margin:0;padding-left:var(--spacing-08, 0.5rem);color:var(--stable, #adadad);font-size:var(--font-size-12, 0.75rem)}:host .outer-container .container #task-container .task additionnal-fields #photo photo-header[withComments]{padding-top:var(--spacing-08, 0.5rem)}:host .outer-container .container #task-container .task additionnal-fields #photo[editModePhoto] photo-header{padding-bottom:var(--spacing-08, 0.5rem)}:host .outer-container .container yoo-button{margin:0 var(--spacing-08, 0.5rem) var(--spacing-08, 0.5rem) var(--spacing-08, 0.5rem)}:host .outer-container .container yoo-button p{color:var(--app-color, #5a30f4)}:host .outer-container .container[status=finished]{background:var(--success-10, rgba(58, 167, 109, 0.1))}:host .outer-container .container[status=unable-to-complete]{background:var(--danger-10, rgba(212, 67, 51, 0.1))}:host .outer-container .container[status=unmarked]{background:var(--stable-10, rgba(173, 173, 173, 0.1))}:host .outer-container .container[status=unmarked] #task-container{background:var(--light, #ffffff);border:solid var(--border-width-01, 0.0625rem) var(--stable-alt, #d0d0d0);border-radius:var(--border-radius-08, 0.5rem)}:host([readonly]) .outer-container .title{margin-top:var(--spacing-04, 0.25rem)}:host([readonly]) .outer-container .container .task{padding:var(--spacing-08, 0.5rem)}:host([readonly]) .outer-container .container .task line{height:0.0625rem;margin-top:var(--spacing-16, 1rem)}:host([readonly]) .outer-container .container[status=finished] .task line{background-color:var(--success-20, rgba(58, 167, 109, 0.2))}:host([readonly]) .outer-container .container[status=unable-to-complete] .task line{background-color:var(--danger-20, rgba(212, 67, 51, 0.2))}:host([readonly]) .outer-container .container[status=unmarked] .task line{background-color:var(--stable-20, rgba(173, 173, 173, 0.2))}:host(.web) .outer-container .container yoo-button.assign{max-width:11.25rem}:host(.web) .outer-container .container yoo-button.assign p{font-size:var(--font-size-14, 0.875rem)}@media print{:host .outer-container .title{page-break-after:avoid}:host .outer-container .container{page-break-inside:avoid}}:host(.modal-view){max-height:65%}:host(.rtl) .outer-container .container #task-container .task header task-details .task-title{padding:0 var(--spacing-08, 0.5rem) 0 0}";
@@ -45,7 +45,7 @@ const YooFormTodoMissionComponent = class {
       return {
         icon: 'camera',
         iconColor: 'app-color',
-        text: overlays.translate(showPhotos ? 'YOOBICREMOVEPHOTOFIELD' : 'CAMPAIGNPHOTOHELP'),
+        text: index$2.translate(showPhotos ? 'YOOBICREMOVEPHOTOFIELD' : 'CAMPAIGNPHOTOHELP'),
         handler: () => { var _a; return this.onPhotoButtonToggled(task, index, (_a = task.showPhotos) === null || _a === void 0 ? void 0 : _a.value); }
       };
     };
@@ -55,7 +55,7 @@ const YooFormTodoMissionComponent = class {
       return {
         icon: 'comment',
         iconColor: 'app-color',
-        text: overlays.translate(showComments ? 'DELETECOMMENT' : 'ADDCOMMENTS'),
+        text: index$2.translate(showComments ? 'DELETECOMMENT' : 'ADDCOMMENTS'),
         handler: () => { var _a; return this.onCommentButtonToggled(task, index, (_a = task.showComments) === null || _a === void 0 ? void 0 : _a.value); }
       };
     };
@@ -64,7 +64,7 @@ const YooFormTodoMissionComponent = class {
       return {
         icon: 'calendar-date',
         iconColor: 'app-color',
-        text: overlays.translate(hasDueDate ? 'RESCHEDULE' : 'SCHEDULE'),
+        text: index$2.translate(hasDueDate ? 'RESCHEDULE' : 'SCHEDULE'),
         handler: () => this.onScheduleButtonToggled(index)
       };
     };
@@ -72,7 +72,7 @@ const YooFormTodoMissionComponent = class {
       return {
         icon: 'circle-minor',
         iconColor: 'danger',
-        text: overlays.translate('YOOBICMARKASUNABLETOCOMPLETE'),
+        text: index$2.translate('YOOBICMARKASUNABLETOCOMPLETE'),
         color: 'danger',
         handler: () => this.onMarkAsUnableButtonToggled(this.values[index], index)
       };
@@ -197,7 +197,7 @@ const YooFormTodoMissionComponent = class {
     const readonlyComments = this.readonly || (((_a = task.user) === null || _a === void 0 ? void 0 : _a.value) && task.user.value._id !== ((_b = this.user) === null || _b === void 0 ? void 0 : _b._id)) ? true : false;
     const renderComments = readonlyComments ? (((_c = task.showComments) === null || _c === void 0 ? void 0 : _c.value) && (userComments === null || userComments === void 0 ? void 0 : userComments.length)) : (_d = task.showComments) === null || _d === void 0 ? void 0 : _d.value;
     return (!!renderComments &&
-      index.h("section", { id: "comments", ...{ editModeComments: !readonlyComments } }, index.h("comments-header", null, index.h("p", { class: "comments-title" }, overlays.translate('COMMENTNOUN').toUpperCase()), index.h("p", { class: "comments-optional" }, "(", overlays.translate('OPTIONAL'), ")")), index.h("yoo-form-text-area", { value: userComments, resizable: "none", size: "small", placeholder: overlays.translate('ADDCOMMENTS'), disableEnter: true, validateInput: false, disableTab: true, onInputChanged: (ev) => {
+      index.h("section", { id: "comments", ...{ editModeComments: !readonlyComments } }, index.h("comments-header", null, index.h("p", { class: "comments-title" }, index$2.translate('COMMENTNOUN').toUpperCase()), index.h("p", { class: "comments-optional" }, "(", index$2.translate('OPTIONAL'), ")")), index.h("yoo-form-text-area", { value: userComments, resizable: "none", size: "small", placeholder: index$2.translate('ADDCOMMENTS'), disableEnter: true, validateInput: false, disableTab: true, onInputChanged: (ev) => {
           const updatedTask = this.values[index$1];
           updatedTask.userComments = ev.detail;
           this.emitUpdate({ task: updatedTask, index: index$1 });
@@ -217,7 +217,7 @@ const YooFormTodoMissionComponent = class {
       renderPhotoField = isphotorequired || ((_e = task.showPhotos) === null || _e === void 0 ? void 0 : _e.value);
     }
     return (!!renderPhotoField &&
-      index.h("section", { id: "photo", ...{ editModePhoto: !readonlyPhoto } }, index.h("photo-header", { ...{ withComments: (_f = task.showComments) === null || _f === void 0 ? void 0 : _f.value } }, index.h("p", { class: "photo-title" }, overlays.translate('YOOBICPHOTO').toUpperCase()), !isphotorequired && index.h("p", { class: "photo-optional" }, "(", overlays.translate('OPTIONAL'), ")")), index.h("yoo-form-capture", { value: task.imageData, allowLibrary: !!((_g = task.allowLibrary) === null || _g === void 0 ? void 0 : _g.value), disabled: disabled, readonly: readonlyPhoto && !disabled, size: readonlyPhoto && !disabled ? 'extra-small' : 'medium', type: "photo", onInputChanged: (event) => {
+      index.h("section", { id: "photo", ...{ editModePhoto: !readonlyPhoto } }, index.h("photo-header", { ...{ withComments: (_f = task.showComments) === null || _f === void 0 ? void 0 : _f.value } }, index.h("p", { class: "photo-title" }, index$2.translate('YOOBICPHOTO').toUpperCase()), !isphotorequired && index.h("p", { class: "photo-optional" }, "(", index$2.translate('OPTIONAL'), ")")), index.h("yoo-form-capture", { value: task.imageData, allowLibrary: !!((_g = task.allowLibrary) === null || _g === void 0 ? void 0 : _g.value), disabled: disabled, readonly: readonlyPhoto && !disabled, size: readonlyPhoto && !disabled ? 'extra-small' : 'medium', type: "photo", onInputChanged: (event) => {
           const updatedTask = this.values[index$1];
           updatedTask.hasphoto = { value: true };
           updatedTask.imageData = event.detail;
@@ -228,29 +228,29 @@ const YooFormTodoMissionComponent = class {
   renderDuedateTag(date) {
     var _a;
     // when a parent is already displaying the due date of the Todo mission into the DOM, and that all tasks have the same due date, do not display it for each of them
-    const hideDueDate = this.completed && this.overallDuedate && ((_a = this.values) === null || _a === void 0 ? void 0 : _a.every((todo) => { var _a; return overlays.isDateSame((_a = todo.duedate) === null || _a === void 0 ? void 0 : _a.value, this.overallDuedate, 'minute'); }));
+    const hideDueDate = this.completed && this.overallDuedate && ((_a = this.values) === null || _a === void 0 ? void 0 : _a.every((todo) => { var _a; return index$2.isDateSame((_a = todo.duedate) === null || _a === void 0 ? void 0 : _a.value, this.overallDuedate, 'minute'); }));
     if (date && !hideDueDate) {
-      let dueDateText = overlays.isToday(date) ? overlays.translate('YOOBICTODAY').toLowerCase() : overlays.fromToday(date);
-      dueDateText = [overlays.translate('YOOBICYESTERDAY'), overlays.translate('YOOBICTOMORROW')].includes(dueDateText) ? dueDateText.toLowerCase() : dueDateText;
-      const color = overlays.isDateAfter(date, new Date(), 'day') ? overlays.getCssColor('text-color') : overlays.getCssColor('danger');
-      return index.h("yoo-tag", { customColor: color, size: "small" }, index.h("yoo-icon", { class: { custom: true }, size: "small", name: "calendar-date", slot: "start" }), overlays.translate('YOOBICDUEBY', { date: dueDateText, time: overlays.dateFormat(date, 'LT') }));
+      let dueDateText = index$2.isToday(date) ? index$2.translate('YOOBICTODAY').toLowerCase() : index$2.fromToday(date);
+      dueDateText = [index$2.translate('YOOBICYESTERDAY'), index$2.translate('YOOBICTOMORROW')].includes(dueDateText) ? dueDateText.toLowerCase() : dueDateText;
+      const color = index$2.isDateAfter(date, new Date(), 'day') ? index$2.getCssColor('text-color') : index$2.getCssColor('danger');
+      return index.h("yoo-tag", { customColor: color, size: "small" }, index.h("yoo-icon", { class: { custom: true }, size: "small", name: "calendar-date", slot: "start" }), index$2.translate('YOOBICDUEBY', { date: dueDateText, time: index$2.dateFormat(date, 'LT') }));
     }
   }
   renderUser(task) {
     var _a, _b;
     if ((_a = task.user) === null || _a === void 0 ? void 0 : _a.value) {
       const finishedDate = (_b = task.finished) === null || _b === void 0 ? void 0 : _b.date;
-      const dateLabel = overlays.translate('ONDATEAT', { date: overlays.dateFormat(finishedDate, 'L'), time: overlays.dateFormat(finishedDate, 'LT') });
-      return (index.h("div", { class: "user" }, index.h("yoo-avatar", { user: task.user.value, size: "extra-small" }), index.h("p", null, overlays.getUserDisplayName(task.user.value), " ", finishedDate && lodash.lowerFirst(dateLabel))));
+      const dateLabel = index$2.translate('ONDATEAT', { date: index$2.dateFormat(finishedDate, 'L'), time: index$2.dateFormat(finishedDate, 'LT') });
+      return (index.h("div", { class: "user" }, index.h("yoo-avatar", { user: task.user.value, size: "extra-small" }), index.h("p", null, index$2.getUserDisplayName(task.user.value), " ", finishedDate && lodash.lowerFirst(dateLabel))));
     }
   }
   renderAssignButton(task, index$1) {
     var _a;
-    return (index.h("yoo-button", { class: "assign", size: overlays.isWeb(this.host) ? 'medium' : 'large', onClick: () => this.assignUser.emit({ task, index: index$1 }) }, index.h("yoo-icon", { name: "assign", color: "app-color", size: "small", slot: "start" }), index.h("p", null, ((_a = task.user) === null || _a === void 0 ? void 0 : _a.value) ? overlays.translate('REASSIGN') : overlays.translate('ASSIGN'))));
+    return (index.h("yoo-button", { class: "assign", size: index$2.isWeb(this.host) ? 'medium' : 'large', onClick: () => this.assignUser.emit({ task, index: index$1 }) }, index.h("yoo-icon", { name: "assign", color: "app-color", size: "small", slot: "start" }), index.h("p", null, ((_a = task.user) === null || _a === void 0 ? void 0 : _a.value) ? index$2.translate('REASSIGN') : index$2.translate('ASSIGN'))));
   }
   renderPlusButton(task, index$1) {
     let plusButtonRef;
-    return (index.h("yoo-button", { shape: "circular", size: "small", color: "stable-alt", fill: "transparent", slot: "end", ref: (el) => (plusButtonRef = el), onClick: (ev) => overlays.showActionSheet(this.getEditableOptions(task, index$1), null, null, plusButtonRef, ev) }, index.h("yoo-icon", { name: "circle-plus", color: "app-color", size: "medium" })));
+    return (index.h("yoo-button", { shape: "circular", size: "small", color: "stable-alt", fill: "transparent", slot: "end", ref: (el) => (plusButtonRef = el), onClick: (ev) => index$2.showActionSheet(this.getEditableOptions(task, index$1), null, null, plusButtonRef, ev) }, index.h("yoo-icon", { name: "circle-plus", color: "app-color", size: "medium" })));
   }
   renderIcon(task, index$1) {
     var _a, _b;
@@ -286,11 +286,11 @@ const YooFormTodoMissionComponent = class {
   }
   render() {
     var _a;
-    return !!((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) && (index.h(index.Host, { class: commonHelpers.getAppContext(this.host) }, index.h("div", { class: "outer-container" }, index.h("div", { class: "title" }, index.h("yoo-icon", { size: "medium", name: "mission", slot: "start" }), overlays.translate('YOOBICTASKS'), " (", this.values.length, ")"), this.values.map((task, index$1) => {
+    return !!((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) && (index.h(index.Host, { class: commonHelpers.getAppContext(this.host) }, index.h("div", { class: "outer-container" }, index.h("div", { class: "title" }, index.h("yoo-icon", { size: "medium", name: "mission", slot: "start" }), index$2.translate('YOOBICTASKS'), " (", this.values.length, ")"), this.values.map((task, index$1) => {
       var _a, _b, _c, _d, _e, _f;
       const dueDate = (_a = task.duedate) === null || _a === void 0 ? void 0 : _a.value;
       const status = this.updateTaskStatus(task, index$1);
-      return (index.h("main", { class: "container", ...{ status } }, index.h("section", { id: "task-container" }, this.renderLinkedField(task), task.field && index.h("p", { class: "linked-task" }, overlays.translate('YOOBICLINKEDTASK')), index.h("div", { class: "task" }, index.h("header", null, this.renderIcon(task, index$1), index.h("task-details", null, index.h("p", { class: "task-title" }, (_b = task.text) === null || _b === void 0 ? void 0 : _b.value), this.renderUser(task), this.renderDuedateTag(dueDate), status === 'unable-to-complete' && (index.h("yoo-tag", { color: "danger", size: "small" }, overlays.translate('YOOBICMARKEDASUNABLETOCOMPLETE')))), !this.completed && this.renderPlusButton(task, index$1)), this.readonly && (task.userComments || (((_c = task.hasphoto) === null || _c === void 0 ? void 0 : _c.value) && task.imageData)) && index.h("line", null), (((_d = task.isphotorequired) === null || _d === void 0 ? void 0 : _d.value) || ((_e = task.showPhotos) === null || _e === void 0 ? void 0 : _e.value) || ((_f = task.showComments) === null || _f === void 0 ? void 0 : _f.value)) && (index.h("additionnal-fields", null, this.renderCommentsField(task, index$1, task.userComments), this.renderPhotoField(task, index$1))))), status === 'unmarked' && !this.completed && this.renderAssignButton(task, index$1)));
+      return (index.h("main", { class: "container", ...{ status } }, index.h("section", { id: "task-container" }, this.renderLinkedField(task), task.field && index.h("p", { class: "linked-task" }, index$2.translate('YOOBICLINKEDTASK')), index.h("div", { class: "task" }, index.h("header", null, this.renderIcon(task, index$1), index.h("task-details", null, index.h("p", { class: "task-title" }, (_b = task.text) === null || _b === void 0 ? void 0 : _b.value), this.renderUser(task), this.renderDuedateTag(dueDate), status === 'unable-to-complete' && (index.h("yoo-tag", { color: "danger", size: "small" }, index$2.translate('YOOBICMARKEDASUNABLETOCOMPLETE')))), !this.completed && this.renderPlusButton(task, index$1)), this.readonly && (task.userComments || (((_c = task.hasphoto) === null || _c === void 0 ? void 0 : _c.value) && task.imageData)) && index.h("line", null), (((_d = task.isphotorequired) === null || _d === void 0 ? void 0 : _d.value) || ((_e = task.showPhotos) === null || _e === void 0 ? void 0 : _e.value) || ((_f = task.showComments) === null || _f === void 0 ? void 0 : _f.value)) && (index.h("additionnal-fields", null, this.renderCommentsField(task, index$1, task.userComments), this.renderPhotoField(task, index$1))))), status === 'unmarked' && !this.completed && this.renderAssignButton(task, index$1)));
     }))));
   }
   get host() { return index.getElement(this); }

package/dist/cjs/yoo-form-todo-task-list.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-7790c794.js');
 const sortable_esm = require('./sortable.esm-00e15691.js');
-const commonHelpers = require('./common-helpers-9f63a319.js');
-const overlays = require('./overlays-e5d2ff76.js');
+const commonHelpers = require('./common-helpers-0724ae60.js');
+const index$1 = require('./index-4cdf7949.js');
 require('./lodash-a9050d79.js');
-require('./index-a1bbe627.js');
+require('./index-cb8276bc.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const formTodoTaskListCss = "svg:not(:root){overflow:hidden}:host{display:block}:host ul{margin:0;padding:0;list-style:none}:host ul:not([hidden]){display:grid;gap:var(--spacing-16, 1rem)}:host yoo-banner{--main-color:var(--app-color-10, rgba(90, 48, 244, 0.1))}:host yoo-banner:not([hidden])+ul:not([hidden]){margin-top:var(--spacing-16, 1rem)}:host yoo-button:not([hidden]){display:-ms-inline-flexbox;display:inline-flex;margin:var(--spacing-16, 1rem) 0 0 var(--spacing-08, 0.5rem)}:host yoo-form-todo-task[readonly]{cursor:pointer}:host(.web) li{position:relative}:host(.web) li:hover yoo-form-todo-task{background:var(--stable-light, #f1f1f1)}:host(.web) li:not(:hover) yoo-icon{display:none}:host(.web) li yoo-icon{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);cursor:pointer}:host(.web) li yoo-icon[name=delete]{right:var(--spacing-16, 1rem)}:host(.web) li yoo-icon[name=draggable]{left:var(--spacing-08, 0.5rem)}:host(.web) p{margin:var(--spacing-08, 0.5rem) 0;font-size:var(--font-size-12, 0.75rem)}:host(.mobile) p{margin:var(--spacing-16, 1rem) 0;font-size:var(--font-size-16, 1rem)}";
@@ -43,7 +43,7 @@ const YooFormTodoTaskListComponent = class {
   }
   leaveEditableModeOnOutsideClick(event) {
     if (this.editing != null) {
-      const modal = overlays.findParent(this.host, 'yoo-modal');
+      const modal = index$1.findParent(this.host, 'yoo-modal');
       if (!event.composedPath().some((element) => element === this.host || (element.tagName === 'YOO-MODAL' && element !== modal) || element.tagName === 'YOO-ALERT')) {
         this.updateTask(undefined);
       }
@@ -56,7 +56,7 @@ const YooFormTodoTaskListComponent = class {
     }
   }
   componentDidLoad() {
-    if (overlays.isWeb(this.host)) {
+    if (index$1.isWeb(this.host)) {
       let childNodes = [];
       sortable_esm.Sortable.create(this.listElement, {
         handle: 'yoo-icon[name="draggable"]',
@@ -86,7 +86,7 @@ const YooFormTodoTaskListComponent = class {
   async addTask() {
     var _a, _b, _c;
     if (await this.updateTask(((_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.values) === null || _b === void 0 ? void 0 : _b.length) || 0)) {
-      this.updateValue({ ...this.value, values: [...(((_c = this.value) === null || _c === void 0 ? void 0 : _c.values) || []), { _id: overlays.getUUID(), hasphoto: { value: true }, text: { value: '' } }] });
+      this.updateValue({ ...this.value, values: [...(((_c = this.value) === null || _c === void 0 ? void 0 : _c.values) || []), { _id: index$1.getUUID(), hasphoto: { value: true }, text: { value: '' } }] });
       this.adding = this.editing;
     }
   }
@@ -112,7 +112,7 @@ const YooFormTodoTaskListComponent = class {
   }
   async deleteTask(index, withConfirmation = true) {
     const result = withConfirmation
-      ? await overlays.showAlert(overlays.translate('DELETETASK'), [overlays.translate('CANCEL'), { cssClass: 'danger', text: overlays.translate('DELETE') }], overlays.translate('CONFIRMDELETETASK'))
+      ? await index$1.showAlert(index$1.translate('DELETETASK'), [index$1.translate('CANCEL'), { cssClass: 'danger', text: index$1.translate('DELETE') }], index$1.translate('CONFIRMDELETETASK'))
       : true;
     if (result) {
       this.updateValue({ ...this.value, values: [...this.value.values.slice(0, index), ...this.value.values.slice(index + 1)] });
@@ -122,26 +122,26 @@ const YooFormTodoTaskListComponent = class {
   render() {
     const { values } = this.value || {};
     const tasks = values || [];
-    const web = overlays.isWeb(this.host);
-    return (index.h(index.Host, { class: commonHelpers.getAppContext(this.host) }, index.h("yoo-banner", { closable: true, closeIcon: { color: 'app-color', name: 'close', size: web ? 'small' : 'medium' }, hidden: tasks.length > 1 || (tasks.length === 1 && this.adding == null), leftIcon: { color: 'app-color', name: 'big-arrow-down', size: web ? 'small' : 'medium' } }, index.h("p", { slot: "content" }, overlays.translate('CAMPAIGNTODOADDTASKTOAST'))), index.h("ul", { hidden: !tasks.length, ref: (el) => (this.listElement = el) }, tasks.map((task, index$1) => (index.h("li", null, index.h("yoo-form-todo-task", { actions: !web && [
+    const web = index$1.isWeb(this.host);
+    return (index.h(index.Host, { class: commonHelpers.getAppContext(this.host) }, index.h("yoo-banner", { closable: true, closeIcon: { color: 'app-color', name: 'close', size: web ? 'small' : 'medium' }, hidden: tasks.length > 1 || (tasks.length === 1 && this.adding == null), leftIcon: { color: 'app-color', name: 'big-arrow-down', size: web ? 'small' : 'medium' } }, index.h("p", { slot: "content" }, index$1.translate('CAMPAIGNTODOADDTASKTOAST'))), index.h("ul", { hidden: !tasks.length, ref: (el) => (this.listElement = el) }, tasks.map((task, index$2) => (index.h("li", null, index.h("yoo-form-todo-task", { actions: !web && [
         {
           color: 'danger',
-          description: overlays.translate('DELETETASK'),
+          description: index$1.translate('DELETETASK'),
           handler: async () => {
             await this.updateTask(undefined);
-            await this.deleteTask(index$1);
+            await this.deleteTask(index$2);
           },
           icon: 'delete',
           iconColor: 'danger',
-          text: overlays.translate('DELETE')
+          text: index$1.translate('DELETE')
         }
-      ], autofocus: this.autofocus, readonly: index$1 !== this.editing, ref: (el) => (this.taskElements[index$1] = el), required: this.required, translations: this.translations, value: task, onClick: () => index$1 !== this.editing && this.updateTask(index$1), onKeyDown: ({ key }) => key === 'Enter' && (this.adding != null && this.value.values[this.adding].text.value ? this.addTask() : this.updateTask(undefined)), onInputChanged: (event) => {
+      ], autofocus: this.autofocus, readonly: index$2 !== this.editing, ref: (el) => (this.taskElements[index$2] = el), required: this.required, translations: this.translations, value: task, onClick: () => index$2 !== this.editing && this.updateTask(index$2), onKeyDown: ({ key }) => key === 'Enter' && (this.adding != null && this.value.values[this.adding].text.value ? this.addTask() : this.updateTask(undefined)), onInputChanged: (event) => {
         event.stopPropagation();
-        this.updateValue({ ...this.value, values: tasks.map((task, taskIndex) => (taskIndex === index$1 ? event.detail : task)) });
+        this.updateValue({ ...this.value, values: tasks.map((task, taskIndex) => (taskIndex === index$2 ? event.detail : task)) });
       }, onTranslationValueUpdated: (event) => {
         event.stopPropagation();
         this.translationValueUpdated.emit(event.detail);
-      }, onValidityChanged: (event) => event.stopPropagation() }), web && index.h("yoo-icon", { color: "stable", hidden: index$1 === this.editing, name: "draggable" }), web && index.h("yoo-icon", { color: "stable", hidden: index$1 === this.editing, name: "delete", onClick: () => this.deleteTask(index$1) }))))), index.h("yoo-button", { color: "app-color", fill: "transparent", hidden: this.adding != null, ref: (el) => (this.addButtonElement = el), size: web ? 'small' : 'medium', onClick: () => this.addTask() }, index.h("yoo-icon", { color: "app-color", name: "plus", size: web ? 'extra-small' : 'small', slot: "start" }), overlays.translate('ADDTASK'))));
+      }, onValidityChanged: (event) => event.stopPropagation() }), web && index.h("yoo-icon", { color: "stable", hidden: index$2 === this.editing, name: "draggable" }), web && index.h("yoo-icon", { color: "stable", hidden: index$2 === this.editing, name: "delete", onClick: () => this.deleteTask(index$2) }))))), index.h("yoo-button", { color: "app-color", fill: "transparent", hidden: this.adding != null, ref: (el) => (this.addButtonElement = el), size: web ? 'small' : 'medium', onClick: () => this.addTask() }, index.h("yoo-icon", { color: "app-color", name: "plus", size: web ? 'extra-small' : 'small', slot: "start" }), index$1.translate('ADDTASK'))));
   }
   get host() { return index.getElement(this); }
 };

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

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
-const index$1 = require('./index-9aadeb94.js');
+const index$2 = require('./index-7790c794.js');
 const lodash = require('./lodash-a9050d79.js');
-const commonHelpers = require('./common-helpers-9f63a319.js');
-const overlays = require('./overlays-e5d2ff76.js');
-require('./index-a1bbe627.js');
+const commonHelpers = require('./common-helpers-0724ae60.js');
+const index$1 = require('./index-4cdf7949.js');
+require('./index-cb8276bc.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const Action = ({ hidden, icon, text, onClick }) => (index.h("yoo-tooltip", { content: text, hidden: hidden, placement: "top" },
@@ -16,7 +16,7 @@ const Action = ({ hidden, icon, text, onClick }) => (index.h("yoo-tooltip", { co
 const getRoundedDate = (date, minutesStep = 5) => {
   const result = new Date(date.getTime());
   const oldMinutes = result.getMinutes();
-  const newMinutes = +overlays.getRoundedMinutes(result, minutesStep);
+  const newMinutes = +index$1.getRoundedMinutes(result, minutesStep);
   result.setMinutes(newMinutes, 0, 0);
   if (newMinutes === 0 && oldMinutes !== newMinutes) {
     result.setHours(result.getHours() + 1);
@@ -30,7 +30,7 @@ const getCalendarElement = (activeDay, onChange) => {
   calendar.isDatePicker = true;
   calendar.addEventListener('dateChanged', ({ detail }) => {
     const { date } = detail;
-    date.setHours(overlays.getHours(activeDay), overlays.getMinutes(activeDay));
+    date.setHours(index$1.getHours(activeDay), index$1.getMinutes(activeDay));
     onChange(date);
   });
   return calendar;
@@ -40,7 +40,7 @@ const getTimeElement = (activeDay, onChange) => {
   time.style.setProperty('--spacing', 'var(--spacing-04)');
   time.type = 'datetime';
   time.value = activeDay;
-  time.addEventListener('amPmToggled', ({ detail }) => onChange(overlays.dateAdd(activeDay, 'h', detail === 'AM' ? -12 : 12)));
+  time.addEventListener('amPmToggled', ({ detail }) => onChange(index$1.dateAdd(activeDay, 'h', detail === 'AM' ? -12 : 12)));
   time.addEventListener('inputChanged', ({ detail }) => onChange(new Date(detail)));
   return time;
 };
@@ -52,7 +52,7 @@ const getSaveElement = (web, onClick) => {
   button.style.background = 'var(--light)';
   button.style.setProperty('--hover-color', 'transparent');
   button.style.setProperty('--side-padding', '0');
-  button.textContent = overlays.translate('DONE');
+  button.textContent = index$1.translate('DONE');
   button.addEventListener('click', onClick);
   if (web) {
     button.style.position = 'sticky';
@@ -69,7 +69,7 @@ const getSaveElement = (web, onClick) => {
 const getScheduleElement = (target, dueDate, onChange) => {
   const schedule = document.createElement('div');
   const activeDate = dueDate ? new Date(dueDate) : getRoundedDate(new Date());
-  const web = overlays.isWeb(target);
+  const web = index$1.isWeb(target);
   schedule.style.overflow = 'auto';
   if (web) {
     const { top, right, bottom, left } = target.getBoundingClientRect();
@@ -87,11 +87,11 @@ const getScheduleElement = (target, dueDate, onChange) => {
   }
   schedule.appendChild(getCalendarElement(activeDate, (date) => activeDate.setFullYear(date.getFullYear(), date.getMonth(), date.getDate())));
   schedule.appendChild(getTimeElement(activeDate, (date) => activeDate.setHours(date.getHours(), date.getMinutes())));
-  schedule.appendChild(getSaveElement(web, () => overlays.closeModal(null, schedule)));
+  schedule.appendChild(getSaveElement(web, () => index$1.closeModal(null, schedule)));
   return {
     schedule,
     showSchedule: async () => {
-      const modal = await overlays.showModal(schedule, web ? {} : { half: true, coeffHalf: 0.66 }, web ? 'context-menu' : null, web ? 'fadeEnterAnimation' : 'slideYEnterAnimation', web ? 'fadeLeaveAnimation' : 'slideYLeaveAnimation', !web, web);
+      const modal = await index$1.showModal(schedule, web ? {} : { half: true, coeffHalf: 0.66 }, web ? 'context-menu' : null, web ? 'fadeEnterAnimation' : 'slideYEnterAnimation', web ? 'fadeLeaveAnimation' : 'slideYLeaveAnimation', !web, web);
       onChange(activeDate);
       return modal;
     }
@@ -132,37 +132,37 @@ const YooFormTodoTaskComponent = class {
     this.actionableTags = [
       {
         action: {
-          getDescription: () => overlays.translate('MANDATORYPHOTODESCRIPTION'),
-          getText: () => overlays.translate('MANDATORYPHOTO'),
+          getDescription: () => index$1.translate('MANDATORYPHOTODESCRIPTION'),
+          getText: () => index$1.translate('MANDATORYPHOTO'),
           icon: 'camera',
           iconColor: 'app-color',
-          isPrimary: () => overlays.isWeb(this.host),
+          isPrimary: () => index$1.isWeb(this.host),
           onClick: () => this.updateValue({ ...this.value, isphotorequired: { value: true } })
         },
         isTagged: () => { var _a, _b; return (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.isphotorequired) === null || _b === void 0 ? void 0 : _b.value; },
         tag: {
           getColor: () => 'app-color',
-          getText: () => overlays.translate('MANDATORYPHOTO'),
+          getText: () => index$1.translate('MANDATORYPHOTO'),
           icon: 'image',
           onRemove: () => this.updateValue({ ...this.value, isphotorequired: { value: false } })
         }
       },
       {
         action: {
-          getDescription: () => overlays.translate('ADDDUEDATE'),
-          getText: () => overlays.translate('DUEDATE'),
+          getDescription: () => index$1.translate('ADDDUEDATE'),
+          getText: () => index$1.translate('DUEDATE'),
           icon: 'calendar',
           iconColor: 'app-color',
-          isPrimary: () => overlays.isWeb(this.host),
+          isPrimary: () => index$1.isWeb(this.host),
           onClick: ({ target }) => this.openSchedule(target)
         },
         isTagged: () => { var _a, _b; return !!((_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.duedate) === null || _b === void 0 ? void 0 : _b.value); },
         tag: {
-          getColor: () => { var _a, _b; return (overlays.isDateAfter((_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.duedate) === null || _b === void 0 ? void 0 : _b.value, new Date(), 'day') ? 'text-color' : 'danger'); },
-          getText: () => { var _a, _b, _c, _d; return overlays.translate('YOOBICDUEAT', { date: overlays.dateFormat((_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.duedate) === null || _b === void 0 ? void 0 : _b.value, 'L'), time: overlays.dateFormat((_d = (_c = this.value) === null || _c === void 0 ? void 0 : _c.duedate) === null || _d === void 0 ? void 0 : _d.value, 'LT') }); },
+          getColor: () => { var _a, _b; return (index$1.isDateAfter((_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.duedate) === null || _b === void 0 ? void 0 : _b.value, new Date(), 'day') ? 'text-color' : 'danger'); },
+          getText: () => { var _a, _b, _c, _d; return index$1.translate('YOOBICDUEAT', { date: index$1.dateFormat((_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.duedate) === null || _b === void 0 ? void 0 : _b.value, 'L'), time: index$1.dateFormat((_d = (_c = this.value) === null || _c === void 0 ? void 0 : _c.duedate) === null || _d === void 0 ? void 0 : _d.value, 'LT') }); },
           icon: 'calendar-date',
           onClick: (event) => {
-            if (!this.readonly || !overlays.isWeb(this.host)) {
+            if (!this.readonly || !index$1.isWeb(this.host)) {
               event.stopPropagation();
               this.openSchedule(event.target);
             }
@@ -193,16 +193,16 @@ const YooFormTodoTaskComponent = class {
   }
   closeScheduleDialog(event) {
     if (this.scheduleElement && !event.composedPath().includes(this.scheduleElement)) {
-      overlays.closeModal(null, this.scheduleElement);
+      index$1.closeModal(null, this.scheduleElement);
     }
   }
   componentWillLoad() {
     this.updateValidity();
   }
   componentDidLoad() {
-    index$1.intersectionObserve(this.inputElement, (entries) => entries.forEach(({ isIntersecting }) => this.autofocus && isIntersecting && this.inputElement.setFocus()));
-    index$1.resizeObserve(this.actionsElement, (entries) => entries.forEach(({ contentRect }) => (this.actionsWidth = contentRect.width / 16)));
-    index$1.resizeObserve(this.tagsElement, (entries) => entries.forEach(({ contentRect }) => (this.tagsHeight = contentRect.height / 16)));
+    index$2.intersectionObserve(this.inputElement, (entries) => entries.forEach(({ isIntersecting }) => this.autofocus && isIntersecting && this.inputElement.setFocus()));
+    index$2.resizeObserve(this.actionsElement, (entries) => entries.forEach(({ contentRect }) => (this.actionsWidth = contentRect.width / 16)));
+    index$2.resizeObserve(this.tagsElement, (entries) => entries.forEach(({ contentRect }) => (this.tagsHeight = contentRect.height / 16)));
   }
   componentWillUpdate() {
     this.updateValidity();
@@ -233,7 +233,7 @@ const YooFormTodoTaskComponent = class {
   render() {
     var _a;
     const heading = this.heading;
-    const web = overlays.isWeb(this.host);
+    const web = index$1.isWeb(this.host);
     const actionableTags = web && this.readonly ? {} : lodash.groupBy(this.actionableTags, ({ action }) => action.isPrimary());
     const primaryActionableTags = actionableTags.true || [];
     const secondaryActionableTags = actionableTags.false || [];
@@ -248,13 +248,13 @@ const YooFormTodoTaskComponent = class {
         const value = event.detail;
         event.stopPropagation();
         heading.key ? this.updateTranslation(heading.key, value) : this.updateValue({ ...this.value, text: { value } });
-      } }), index.h("yoo-form-checkbox", { disabled: true, hidden: !this.readonly, size: web ? 'medium' : 'large', onInputChanged: (event) => event.stopPropagation() }), index.h("h1", { hidden: !this.readonly, style: { [overlays.isRTL() ? 'paddingLeft' : 'paddingRight']: actionable ? `${this.actionsWidth}rem` : null, textAlign: 'start' } }, heading.value), index.h("div", { class: "tags", hidden: !tagged, ref: (el) => (this.tagsElement = el) }, this.actionableTags
+      } }), index.h("yoo-form-checkbox", { disabled: true, hidden: !this.readonly, size: web ? 'medium' : 'large', onInputChanged: (event) => event.stopPropagation() }), index.h("h1", { hidden: !this.readonly, style: { [index$1.isRTL() ? 'paddingLeft' : 'paddingRight']: actionable ? `${this.actionsWidth}rem` : null, textAlign: 'start' } }, heading.value), index.h("div", { class: "tags", hidden: !tagged, ref: (el) => (this.tagsElement = el) }, this.actionableTags
       .map(({ tag, isTagged }) => ({ ...tag, isTagged }))
       .map(({ getColor, getText, icon, isTagged, onClick, onRemove }) => (index.h(Tag, { color: getColor(), hidden: !isTagged(), icon: icon, removable: !this.readonly || !web, text: getText(), web: web, onClick: onClick, onRemove: onRemove })))), index.h("div", { class: "actions", hidden: !actionable, ref: (el) => (this.actionsElement = el) }, primaryActionableTags
       .map(({ action, isTagged }) => ({ ...action, isTagged }))
       .map(({ getText, icon, isTagged, onClick }) => (index.h(Action, { hidden: isTagged(), icon: icon, text: getText(), onClick: onClick }))), index.h("yoo-icon", { color: "stable", hidden: !secondaryActionable, name: "more", onClick: (event) => {
         event.stopPropagation();
-        overlays.showActionSheet([
+        index$1.showActionSheet([
           ...secondaryActionableTags.map(({ action, isTagged }) => ({
             description: action.getDescription(),
             handler: action.onClick,

package/dist/cjs/yoo-form-todo.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-7790c794.js');
 const lodash = require('./lodash-a9050d79.js');
-const formInputHelpers = require('./form-input-helpers-2d988e31.js');
-const overlays = require('./overlays-e5d2ff76.js');
-require('./index-a1bbe627.js');
-require('./common-helpers-9f63a319.js');
+const formInputHelpers = require('./form-input-helpers-fb275467.js');
+const index$1 = require('./index-4cdf7949.js');
+require('./index-cb8276bc.js');
+require('./common-helpers-0724ae60.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const formTodoCss = "svg:not(:root){overflow:hidden}:host .outer-container yoo-button{--margin-container:auto}:host .border{width:100%;height:0;border-top:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host .newtodo{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;margin-top:var(--spacing-16, 1rem)}:host .newtodo.nomargin{margin-top:0}:host .newtodo .margin-right{margin-right:var(--spacing-08, 0.5rem)}:host .newtodo .icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-right:var(--spacing-02, 0.125rem)}:host .newtodo .flex{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center}:host .newtodo yoo-button{display:inline-block;width:auto}:host .newtodo yoo-button .label{color:var(--app-color, #5a30f4)}:host .readonly .margin-left{display:block;margin-left:var(--spacing-16, 1rem)}:host .readonly .todo-container{margin-bottom:var(--spacing-24, 1.5rem);padding:var(--spacing-08, 0.5rem);background:var(--stable-10, rgba(173, 173, 173, 0.1));border-radius:var(--spacing-08, 0.5rem)}:host .readonly .todo-container .content{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between;margin:0.6875rem 0 0.5rem 0}:host .readonly .todo-container .content .content-left yoo-icon{margin-right:var(--spacing-08, 0.5rem)}:host .readonly .todo-container .content .content-left yoo-icon.stable-alt{color:var(--stable-alt, #d0d0d0)}:host .readonly .todo-container .content .content-right{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .readonly .todo-container .content .content-right .date{color:var(--stable-alt, #d0d0d0);font-weight:var(--font-weight-400, 400);font-size:var(--font-size-14, 0.875rem)}:host .readonly .todo-container .comments{margin-bottom:var(--spacing-16, 1rem);color:var(--stable, #adadad);font-weight:var(--font-weight-400, 400);font-size:var(--font-size-14, 0.875rem)}:host .readonly .todo-container .photo-container{margin-bottom:0.875rem}:host .readonly .todo-container .comment-container{margin-top:0.875rem}:host .readonly .todo-container .textarea-container{margin-top:var(--spacing-08, 0.5rem)}:host .readonly .todo-container .border{width:100%;height:0;border-top:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);margin-bottom:var(--spacing-08, 0.5rem)}";
@@ -45,7 +45,7 @@ const YooFormTodoComponent = class {
   }
   onClearTodo(ev) {
     ev.stopPropagation();
-    overlays.showAlert(overlays.translate('DELETEAPCONFIRM'), [overlays.translate('CANCEL'), overlays.translate('YOOBICOK')]).then((ret) => {
+    index$1.showAlert(index$1.translate('DELETEAPCONFIRM'), [index$1.translate('CANCEL'), index$1.translate('YOOBICOK')]).then((ret) => {
       if (ret) {
         this.value = null;
         formInputHelpers.setValueAndValidateInput(this.value, this);
@@ -56,10 +56,10 @@ const YooFormTodoComponent = class {
     var _a, _b;
     if (!this.disabled && this.slidesTodo && this.slidesTodo.length > 0) {
       this.value = this.value || {
-        title: overlays.translate('YOOBICTODO') + ' - ' + overlays.translateMulti(((_b = (_a = overlays.getSession()) === null || _a === void 0 ? void 0 : _a.selectedMission) === null || _b === void 0 ? void 0 : _b.title) || '')
+        title: index$1.translate('YOOBICTODO') + ' - ' + index$1.translateMulti(((_b = (_a = index$1.getSession()) === null || _a === void 0 ? void 0 : _a.selectedMission) === null || _b === void 0 ? void 0 : _b.title) || '')
       };
       if (this.linked) {
-        const formDynamic = overlays.findParent(this.host, 'yoo-form-dynamic');
+        const formDynamic = index$1.findParent(this.host, 'yoo-form-dynamic');
         const previous = await formDynamic.findPreviousValue(this.name);
         if (previous === null || previous === void 0 ? void 0 : previous.field) {
           this.value.field = lodash.cloneDeep(previous.field);
@@ -79,7 +79,7 @@ const YooFormTodoComponent = class {
       dialog.fieldFetchDataFn = (ev) => {
         this.fieldFetchData.emit(ev);
       };
-      overlays.showModal(dialog, { height: 'medium' }, '', overlays.getModalAnimation('Enter', 'Y', { host: this.host }), overlays.getModalAnimation('Leave', 'Y', { host: this.host }), true).then((ret) => {
+      index$1.showModal(dialog, { height: 'medium' }, '', index$1.getModalAnimation('Enter', 'Y', { host: this.host }), index$1.getModalAnimation('Leave', 'Y', { host: this.host }), true).then((ret) => {
         if (ret === null || ret === void 0 ? void 0 : ret.data) {
           formInputHelpers.setValueAndValidateInput(ret.data, this);
         }
@@ -97,21 +97,21 @@ const YooFormTodoComponent = class {
     return this.value.values.map((t) => {
       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 }, index.h("yoo-icon", { class: tStyle.icon }), index.h("span", { class: 'text ' + tStyle.breakText }, overlays.translateMulti(t.text.value)))) : null, t.duedate && t.duedate.value ? (index.h("div", { class: "subtitle" }, index.h("span", { class: "date-label" }, overlays.translate('DUEDATE'), ":"), index.h("span", null, " ", overlays.pipes.dateFormat.transform(t.duedate.value, 'L')))) : null), index.h("div", { class: "task-part" }, t.comments && t.comments.value ? index.h("div", { class: "subtitle" }, " ", t.comments.value) : null, t.finished && t.finished.date ? (index.h("div", { class: "subtitle" }, index.h("span", { class: "date-label" }, overlays.translate('YOOBICFINISHEDDATE'), ":"), index.h("span", null, " ", overlays.pipes.dateFormat.transform(t.finished.date, 'L LT')))) : null, t.hasphoto ? index.h("div", { class: "subtitle photo cursor" }) : null, t.userComments ? index.h("div", { class: "subtitle" }, " ", t.userComments) : null)),
+        index.h("div", { class: "task" }, index.h("div", { class: "task-part" }, t.text.value ? (index.h("div", { class: tStyle.style }, index.h("yoo-icon", { class: tStyle.icon }), index.h("span", { class: 'text ' + tStyle.breakText }, index$1.translateMulti(t.text.value)))) : null, t.duedate && t.duedate.value ? (index.h("div", { class: "subtitle" }, index.h("span", { class: "date-label" }, index$1.translate('DUEDATE'), ":"), index.h("span", null, " ", index$1.pipes.dateFormat.transform(t.duedate.value, 'L')))) : null), index.h("div", { class: "task-part" }, t.comments && t.comments.value ? index.h("div", { class: "subtitle" }, " ", t.comments.value) : null, t.finished && t.finished.date ? (index.h("div", { class: "subtitle" }, index.h("span", { class: "date-label" }, index$1.translate('YOOBICFINISHEDDATE'), ":"), index.h("span", null, " ", index$1.pipes.dateFormat.transform(t.finished.date, 'L LT')))) : null, t.hasphoto ? index.h("div", { class: "subtitle photo cursor" }) : null, t.userComments ? index.h("div", { class: "subtitle" }, " ", t.userComments) : null)),
         index.h("div", { class: "border" })
       ];
     });
   }
   renderReadonly() {
     var _a, _b;
-    return (index.h("div", { class: "readonly" }, ((_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.values) === null || _b === void 0 ? void 0 : _b.length) > 0 && (index.h("yoo-form-todo-mission", { class: "readonly", values: this.value.values, user: overlays.getSession().user, readonly: this.readonly, completed: this.readonly, onUpdate: (ev) => this.onUpdateTodo(ev) }))));
+    return (index.h("div", { class: "readonly" }, ((_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.values) === null || _b === void 0 ? void 0 : _b.length) > 0 && (index.h("yoo-form-todo-mission", { class: "readonly", values: this.value.values, user: index$1.getSession().user, readonly: this.readonly, completed: this.readonly, onUpdate: (ev) => this.onUpdateTodo(ev) }))));
   }
   renderEditable() {
     if (this.value && this.value.title) {
-      return (index.h("div", { class: "newtodo nomargin" }, index.h("yoo-button", { color: "stable-light", class: "app-color margin-right" }, index.h("div", { class: "label", onClick: () => this.onOpenModal() }, overlays.translate('YOOBICEDIT'))), index.h("div", { class: "flex" }, " ", ' ' + this.value.title), index.h("div", { class: "icon" }, index.h("yoo-icon", { size: "small", name: "cross", onClick: (ev) => this.onClearTodo(ev) }))));
+      return (index.h("div", { class: "newtodo nomargin" }, index.h("yoo-button", { color: "stable-light", class: "app-color margin-right" }, index.h("div", { class: "label", onClick: () => this.onOpenModal() }, index$1.translate('YOOBICEDIT'))), index.h("div", { class: "flex" }, " ", ' ' + this.value.title), index.h("div", { class: "icon" }, index.h("yoo-icon", { size: "small", name: "cross", onClick: (ev) => this.onClearTodo(ev) }))));
     }
     else {
-      return (index.h("div", { class: "newtodo nomargin" }, index.h("yoo-button", { color: "stable-light", onClick: () => this.onOpenModal() }, index.h("yoo-icon", { size: "small", slot: "start", name: "plus", color: "app-color" }), index.h("div", { class: "label" }, overlays.translate('ADDTODO')))));
+      return (index.h("div", { class: "newtodo nomargin" }, index.h("yoo-button", { color: "stable-light", onClick: () => this.onOpenModal() }, index.h("yoo-icon", { size: "small", slot: "start", name: "plus", color: "app-color" }), index.h("div", { class: "label" }, index$1.translate('ADDTODO')))));
     }
   }
   render() {

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

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
-require('./index-9aadeb94.js');
-const commonHelpers = require('./common-helpers-9f63a319.js');
-const formInputHelpers = require('./form-input-helpers-2d988e31.js');
-const overlays = require('./overlays-e5d2ff76.js');
+require('./index-7790c794.js');
+const commonHelpers = require('./common-helpers-0724ae60.js');
+const formInputHelpers = require('./form-input-helpers-fb275467.js');
+const index$1 = require('./index-4cdf7949.js');
 require('./lodash-a9050d79.js');
-require('./index-a1bbe627.js');
+require('./index-cb8276bc.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const formToggleCss = "svg:not(:root){overflow:hidden}:host .optional{margin-left:var(--spacing-08, 0.5rem) !important;color:var(--stable, #adadad);white-space:nowrap}:host .readonly,:host .outer-container{position:relative;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;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;word-break:break-word}:host .readonly .inner-container,:host .outer-container .inner-container{display:-ms-flexbox;display:flex}:host .readonly .label,:host .outer-container .label{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:row;flex-direction:row;font-weight:var(--font-weight-400, 400);font-size:var(--font-size-16, 1rem);line-height:1.5;text-align:left;font-variant-caps:normal}:host .readonly .label .required,:host .outer-container .label .required{margin-right:var(--spacing-04, 0.25rem);color:var(--danger, #d44333);font-variant-caps:normal}:host .readonly .label .label-required,:host .outer-container .label .label-required{margin-left:var(--spacing-04, 0.25rem);color:var(--danger, #d44333)}:host .readonly .label.readonly,:host .outer-container .label.readonly{letter-spacing:0px}:host .readonly .toggle-container,:host .outer-container .toggle-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;border-radius:3.75rem;-webkit-transition:0.2s cubic-bezier(0.24, 0, 0.5, 1);transition:0.2s cubic-bezier(0.24, 0, 0.5, 1)}:host .readonly .toggle-container.active,:host .outer-container .toggle-container.active{-webkit-transition:width 0.2s cubic-bezier(0, 0, 0, 0.1);transition:width 0.2s cubic-bezier(0, 0, 0, 0.1);-webkit-transition:0.2s cubic-bezier(0.54, 1.6, 0.5, 1);transition:0.2s cubic-bezier(0.54, 1.6, 0.5, 1)}:host .readonly .toggle-container .inner-container,:host .outer-container .toggle-container .inner-container{-webkit-box-sizing:content-box;box-sizing:content-box;border-radius:50%;-webkit-box-shadow:0 0 0 0.0625rem rgba(0, 0, 0, 0.1), 0 4px 0px 0 rgba(0, 0, 0, 0.04), 0 4px 9px rgba(0, 0, 0, 0.13), 0 3px 3px rgba(0, 0, 0, 0.05);box-shadow:0 0 0 0.0625rem rgba(0, 0, 0, 0.1), 0 4px 0px 0 rgba(0, 0, 0, 0.04), 0 4px 9px rgba(0, 0, 0, 0.13), 0 3px 3px rgba(0, 0, 0, 0.05);-webkit-transform:translateX(-1px);transform:translateX(-1px);-webkit-transition:0.2s cubic-bezier(0.54, 1.6, 0.5, 1);transition:0.2s cubic-bezier(0.54, 1.6, 0.5, 1)}:host .readonly .toggle-container .inner-container.active,:host .outer-container .toggle-container .inner-container.active{-webkit-transition:0.2s cubic-bezier(0.54, 1.6, 0.5, 1);transition:0.2s cubic-bezier(0.54, 1.6, 0.5, 1)}:host .readonly .toggle-container{margin:var(--spacing-04, 0.25rem);background-color:var(--stable-light, #f1f1f1);border:solid var(--border-width-01, 0.0625rem) var(--dark-05)}:host .readonly .toggle-container .inner-container{background-color:var(--light, #ffffff) !important;border:solid 0.5px var(--dark-05);-webkit-transform:translateX(2px);transform:translateX(2px)}:host .readonly .toggle-container.active{background-color:var(--app-color-40, rgba(90, 48, 244, 0.4));border-color:var(--app-color, #5a30f4)}:host yoo-icon.left{padding-right:var(--spacing-08, 0.5rem)}:host .outer-container .text-container{-ms-flex:1;flex:1}:host .outer-container .toggle-container{background-color:var(--dark-10, rgba(0, 0, 0, 0.1));border:solid var(--border-width-01, 0.0625rem) var(--dark-10, rgba(0, 0, 0, 0.1))}:host .outer-container .toggle-container.active{background-color:var(--app-color, #5a30f4);border-color:var(--app-color, #5a30f4)}:host .outer-container .toggle-container:hover{cursor:pointer}:host .outer-container .toggle-container .inner-container{background-color:var(--light, #ffffff);border:solid 0.5px var(--dark-10, rgba(0, 0, 0, 0.1))}:host .outer-container .toggle-container .inner-container:hover{cursor:pointer}:host .outer-container .label{color:var(--dark, #000000)}:host .outer-container .help{color:var(--stable, #adadad)}:host(.stable) .readonly .label{color:var(--stable, #adadad)}:host(.line) .outer-container .text-container,:host(.line) .readonly .text-container{-ms-flex-order:1;order:1;margin-left:var(--spacing-16, 1rem)}:host(.fill) .toggle-container{background:var(--light, #ffffff)}:host(.web) .outer-container .label,:host(.web) .readonly .label{padding-left:var(--spacing-08, 0.5rem);font-weight:var(--font-weight-400, 400);font-size:var(--font-size-16, 1rem)}:host(.web.rtl) .outer-container .label,:host(.web.rtl) .readonly .label{padding-right:var(--spacing-08, 0.5rem)}:host(.mobile) .outer-container .label.with-help{-ms-flex:initial;flex:initial}:host(.mobile) .outer-container .help{-ms-flex:1;flex:1}:host(.advanced) .outer-container .label.with-help{-ms-flex:initial;flex:initial}:host(.advanced) .outer-container .help{-ms-flex:1;flex:1;padding-left:var(--spacing-08, 0.5rem)}:host(.advanced) .outer-container yoo-tooltip{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host([size=small]) .outer-container .label{font-size:var(--font-size-14, 0.875rem)}:host([size=small]) .toggle-container,:host([size=medium]) .toggle-container{width:1.625rem;height:var(--font-size-14, 0.875rem)}:host([size=small]) .toggle-container .inner-container,:host([size=medium]) .toggle-container .inner-container{width:0.85rem;min-width:0.85rem;height:0.85rem}:host([size=small]) .toggle-container .inner-container.active,:host([size=medium]) .toggle-container .inner-container.active{-webkit-transform:translateX(var(--spacing-12, 0.75rem));transform:translateX(var(--spacing-12, 0.75rem))}:host(.rtl[size=small]) .toggle-container .inner-container.active,:host(.rtl[size=medium]) .toggle-container .inner-container.active{-webkit-transform:translateX(calc(var(--spacing-12, 0.75rem) * -1));transform:translateX(calc(var(--spacing-12, 0.75rem) * -1))}:host([size=large]) .toggle-container{width:var(--spacing-48, 3rem);min-width:var(--spacing-48, 3rem);height:var(--spacing-32, 2rem)}:host([size=large]) .toggle-container .inner-container{width:var(--font-size-28, 1.75rem);height:var(--font-size-28, 1.75rem)}:host([size=large]) .toggle-container .inner-container.active{-webkit-transform:translateX(1.3rem);transform:translateX(1.3rem)}:host(.rtl[size=large]) .toggle-container .inner-container.active{-webkit-transform:translateX(-1.3rem);transform:translateX(-1.3rem)}:host(.danger) .outer-container .toggle-container.active{background-color:var(--danger, #d44333);border-color:var(--danger, #d44333)}:host(.danger) .readonly .toggle-container.active{background-color:var(--danger-40, rgba(212, 67, 51, 0.4));border-color:var(--danger, #d44333)}:host(.info) .outer-container .toggle-container.active{background-color:var(--info, #d84c96);border-color:var(--info, #d84c96)}:host(.info) .readonly .toggle-container.active{background-color:var(--info-40, rgba(216, 76, 150, 0.4));border-color:var(--info, #d84c96)}:host(.warning) .outer-container .toggle-container.active{background-color:var(--warning, #ed6e33);border-color:var(--warning, #ed6e33)}:host(.warning) .readonly .toggle-container.active{background-color:var(--warning-40, rgba(237, 110, 51, 0.4));border-color:var(--warning, #ed6e33)}:host(.dark) .outer-container .toggle-container.active{background-color:var(--dark, #000000);border-color:var(--dark, #000000)}:host(.dark) .readonly .toggle-container.active{background-color:var(--dark-40, rgba(0, 0, 0, 0.4));border-color:var(--dark, #000000)}:host(.energized) .outer-container .toggle-container.active{background-color:var(--energized, #ffc043);border-color:var(--energized, #ffc043)}:host(.energized) .readonly .toggle-container.active{background-color:var(--energized-40, rgba(255, 192, 67, 0.4));border-color:var(--energized, #ffc043)}:host(.app-color) .outer-container .toggle-container.active{background-color:var(--app-color, #5a30f4);border-color:var(--app-color, #5a30f4)}:host(.app-color) .readonly .toggle-container.active{background-color:var(--app-color-40, rgba(90, 48, 244, 0.4));border-color:var(--app-color, #5a30f4)}:host(.accent) .outer-container .toggle-container.active{background-color:var(--accent, #276ef1);border-color:var(--accent, #276ef1)}:host(.accent) .readonly .toggle-container.active{background-color:var(--accent-40, rgba(39, 110, 241, 0.4));border-color:var(--accent, #276ef1)}:host(.night) .outer-container .toggle-container{background-color:var(--dark-40, rgba(0, 0, 0, 0.4))}:host(.night) .outer-container .toggle-container .inner-container{background-color:var(--app-color, #5a30f4)}";
@@ -54,8 +54,8 @@ const YooFormToggleComponent = class {
   }
   onToggle() {
     if (!this.readonly) {
-      if (overlays.isNativeMobile() && overlays.isIOS()) {
-        overlays.vibrateHapticMedium();
+      if (index$1.isNativeMobile() && index$1.isIOS()) {
+        index$1.vibrateHapticMedium();
       }
       formInputHelpers.setValueAndValidateInput(!this.value, this);
       this.clicked.emit(true);
@@ -63,7 +63,7 @@ const YooFormToggleComponent = class {
   }
   renderHelp() {
     if (!this.showHelpBeneathTitle) {
-      return (index.h("div", { class: "help", onClick: (ev) => ev.stopPropagation() }, index.h("yoo-tooltip", { hoverable: overlays.isWeb(this.host), content: overlays.translate(this.help), placement: "top-end" }, index.h("yoo-icon", { size: "small", name: "help", color: "stable" }))));
+      return (index.h("div", { class: "help", onClick: (ev) => ev.stopPropagation() }, index.h("yoo-tooltip", { hoverable: index$1.isWeb(this.host), content: index$1.translate(this.help), placement: "top-end" }, index.h("yoo-icon", { size: "small", name: "help", color: "stable" }))));
     }
   }
   renderHeader() {
@@ -89,9 +89,9 @@ const YooFormToggleComponent = class {
     const hostClass = {
       ...commonHelpers.getAppContext(this.host),
       line: this.type === 'line',
-      [((_b = (_a = overlays.getSession()) === null || _a === void 0 ? void 0 : _a.currentTheme) === null || _b === void 0 ? void 0 : _b.toLowerCase()) || '']: true
+      [((_b = (_a = index$1.getSession()) === null || _a === void 0 ? void 0 : _a.currentTheme) === null || _b === void 0 ? void 0 : _b.toLowerCase()) || '']: true
     };
-    return (index.h(index.Host, { class: hostClass }, index.h("div", { class: { 'readonly': this.readonly, 'outer-container': !this.readonly, 'without-tooltip': this.showHelpBeneathTitle } }, index.h("div", { class: "inner-container" }, this.icon && this.renderIcon(), !overlays.isWeb(this.host) && this.header && this.renderHeader()), !overlays.isWeb(this.host) && this.help && this.type === 'line' && this.renderHelp(), this.readonly ? this.renderReadonly() : this.renderEditable(), overlays.isWeb(this.host) && this.header && this.renderHeader(), overlays.isWeb(this.host) && this.help && this.type === 'line' && this.renderHelp())));
+    return (index.h(index.Host, { class: hostClass }, index.h("div", { class: { 'readonly': this.readonly, 'outer-container': !this.readonly, 'without-tooltip': this.showHelpBeneathTitle } }, index.h("div", { class: "inner-container" }, this.icon && this.renderIcon(), !index$1.isWeb(this.host) && this.header && this.renderHeader()), !index$1.isWeb(this.host) && this.help && this.type === 'line' && this.renderHelp(), this.readonly ? this.renderReadonly() : this.renderEditable(), index$1.isWeb(this.host) && this.header && this.renderHeader(), index$1.isWeb(this.host) && this.help && this.type === 'line' && this.renderHelp())));
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {