@yoobic/yobi 8.2.2 → 8.3.0-2

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

@@ -2,14 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
 const lodash = require('./lodash-597bda6d.js');
 const formField_instance = require('./form-field.instance-610e61e1.js');
-const formInputHelpers = require('./form-input-helpers-a04f76d2.js');
+const formInputHelpers = require('./form-input-helpers-a2843dc0.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
-require('./common-helpers-6970c46c.js');
+require('./index-de8540eb.js');
+require('./common-helpers-a4efe957.js');
 
 const formTodoListTaskCss = ":host yoo-form-text-area{width:100%}:host .task{width:100%;margin-bottom:var(--spacing-16, 1rem)}:host .task.web .task-title yoo-avatar{display:block}:host .task.web .task-title .actions{display:none}:host .task.web.editable .task-title:hover{background-color:var(--stable-light-40, rgba(241, 241, 241, 0.4));cursor:pointer}:host .task.web.editable .task-title:hover yoo-avatar{display:none !important}:host .task.web.editable .task-title:hover .actions{display:-ms-flexbox !important;display:flex !important}:host .task .task-title{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:justify;justify-content:space-between}:host .task .task-title .title{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}:host .task .task-title .title yoo-avatar{margin-left:var(--spacing-08, 0.5rem)}:host .task .task-title .title yoo-icon{margin-right:var(--spacing-08, 0.5rem)}:host .task .task-title .title yoo-icon.strict{cursor:default}:host .task .task-title .title div{-ms-flex:1;flex:1;overflow-wrap:anywhere}:host .task .task-title .title .done{text-decoration:line-through}:host .task .task-details{padding-left:var(--spacing-32, 2rem)}:host .task .task-details.edited{padding-left:0}:host .task .task-details yoo-tag{margin-right:var(--spacing-08, 0.5rem)}:host .task .task-details yoo-tag,:host .task .task-details .task-note{margin-top:var(--spacing-08, 0.5rem)}:host .task .task-details yoo-context-menu{display:table}:host .task .task-details .user{display:-ms-flexbox;display:flex;margin-top:var(--spacing-08, 0.5rem)}:host .task .task-details .user yoo-avatar{margin-right:var(--spacing-08, 0.5rem)}:host .task .task-details .task-note.readonly{color:var(--stable, #adadad);font-size:var(--font-size-14, 0.875rem)}:host .actions{display:-ms-flexbox;display:flex}:host .actions.all-web{-ms-flex-pack:justify;justify-content:space-between;padding-bottom:var(--spacing-16, 1rem)}:host .actions.all-mobile{position:fixed;bottom:0;z-index:999999;-ms-flex-pack:justify;justify-content:space-between;width:100%;margin-left:calc(var(--spacing-16, 1rem) * -1)}:host .actions.all-mobile yoo-button{padding:var(--spacing-16, 1rem)}:host .actions.primary{-ms-flex-positive:0;flex-grow:0}:host .actions.spaced-btn-right yoo-button{margin-right:var(--spacing-08, 0.5rem)}";
 
@@ -33,20 +34,20 @@ const YooFormTodoListTaskComponent = class {
   }
   handleClickOutside(event) {
     if (this.calendarDialogHTMLElement && !event.composedPath().includes(this.calendarDialogHTMLElement)) {
-      index$1.closeModal(null, this.calendarDialogHTMLElement);
+      overlays.closeModal(null, this.calendarDialogHTMLElement);
     }
   }
   async onOpenCalendar(ev) {
     ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
     this.calendarDialogHTMLElement = document.createElement('div');
-    index$1.showModal(this.calendarDialogHTMLElement, null, this.getCalendarModalCssClass(), this.getCalendarModalAnimation('Enter'), this.getCalendarModalAnimation('Leave'), true, false, null, null, null, null, null, null, null, () => {
+    overlays.showModal(this.calendarDialogHTMLElement, null, this.getCalendarModalCssClass(), this.getCalendarModalAnimation('Enter'), this.getCalendarModalAnimation('Leave'), true, false, null, null, null, null, null, null, null, () => {
       var _a;
       if (this.calendarDialogHTMLElement) {
-        const modalHostYPosition = ((_a = index$1.findParent(this.host, 'yoo-ion-modal')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().y) || 0;
+        const modalHostYPosition = ((_a = overlays.findParent(this.host, 'yoo-ion-modal')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().y) || 0;
         const inputFieldDimensions = this.textAreaHTMLElement.getBoundingClientRect();
-        const { left, top } = index$1.getDialogPosition(inputFieldDimensions, 'below', this.calendarDialogHTMLElement, inputFieldDimensions.width);
-        this.calendarDialogHTMLElement.style.left = `${index$1.isFullScreenFalse() ? 16 : left}px`;
-        this.calendarDialogHTMLElement.style.top = `${top - (index$1.isFullScreenFalse() ? modalHostYPosition : 0)}px`;
+        const { left, top } = overlays.getDialogPosition(inputFieldDimensions, 'below', this.calendarDialogHTMLElement, inputFieldDimensions.width);
+        this.calendarDialogHTMLElement.style.left = `${overlays.isFullScreenFalse() ? 16 : left}px`;
+        this.calendarDialogHTMLElement.style.top = `${top - (overlays.isFullScreenFalse() ? modalHostYPosition : 0)}px`;
         this.calendarDialogHTMLElement.style.width = `${inputFieldDimensions.width}px`;
         this.calendarDialogHTMLElement.style.position = 'absolute';
         this.calendarDialogHTMLElement.style.boxShadow = 'var(--web-shadow)';
@@ -85,7 +86,7 @@ const YooFormTodoListTaskComponent = class {
     var _a, _b;
     ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
     const initialSelection = ((_a = this.value.user) === null || _a === void 0 ? void 0 : _a.value) ? [(_b = this.value.user) === null || _b === void 0 ? void 0 : _b.value] : [];
-    return index$1.getAsyncExtraData({ type: 'user-selection', params: { initialSelection, required: false, multiple: false, locations: this.locations } }).then((res) => {
+    return overlays.getAsyncExtraData({ type: 'user-selection', params: { initialSelection, required: false, multiple: false, locations: this.locations } }).then((res) => {
       var _a, _b;
       if ((_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a._id) {
         this.value.user = { value: res === null || res === void 0 ? void 0 : res.data };
@@ -129,7 +130,7 @@ const YooFormTodoListTaskComponent = class {
     var _a;
     const calendar = document.createElement('yoo-calendar');
     calendar.isDatePicker = true;
-    calendar.activeDay = ((_a = this.value.duedate) === null || _a === void 0 ? void 0 : _a.value) || index$1.dateAdd(new Date(), 'd', 1);
+    calendar.activeDay = ((_a = this.value.duedate) === null || _a === void 0 ? void 0 : _a.value) || overlays.dateAdd(new Date(), 'd', 1);
     calendar.classList.add('calendar-picker', 'datetime');
     calendar.addEventListener('dateChanged', (ev) => { var _a; return this.onSchedule(ev, (_a = ev.detail) === null || _a === void 0 ? void 0 : _a.date); });
     return calendar;
@@ -138,13 +139,13 @@ const YooFormTodoListTaskComponent = class {
     return (this.calendarDialogHTMLElement ? `fade${enterLeave}Animation` : `slideY${enterLeave}ExpandAnimation`);
   }
   getCalendarModalCssClass() {
-    return !index$1.isWeb(this.host) && !index$1.isNativeMobile() ? 'context-menu emulate-calendar' : 'context-menu';
+    return !overlays.isWeb(this.host) && !overlays.isNativeMobile() ? 'context-menu emulate-calendar' : 'context-menu';
   }
   onAmPmToggled(ev) {
     const isAM = (ev === null || ev === void 0 ? void 0 : ev.detail) === 'AM';
     const isPM = (ev === null || ev === void 0 ? void 0 : ev.detail) === 'PM';
     if (isAM || isPM) {
-      this.value.duedate.value = index$1.dateAdd(this.value.duedate.value, 'h', isAM ? -12 : 12);
+      this.value.duedate.value = overlays.dateAdd(this.value.duedate.value, 'h', isAM ? -12 : 12);
       this.dataChanged.emit(this.value);
       index.forceUpdate(this);
     }
@@ -153,13 +154,13 @@ const YooFormTodoListTaskComponent = class {
     var _a, _b;
     ev.stopPropagation();
     if (date) {
-      const hours = isTime ? index$1.getHours(date) : index$1.getHours((_a = this.value.duedate) === null || _a === void 0 ? void 0 : _a.value);
-      const minutes = isTime ? index$1.getMinutes(date) : index$1.getMinutes((_b = this.value.duedate) === null || _b === void 0 ? void 0 : _b.value);
+      const hours = isTime ? overlays.getHours(date) : overlays.getHours((_a = this.value.duedate) === null || _a === void 0 ? void 0 : _a.value);
+      const minutes = isTime ? overlays.getMinutes(date) : overlays.getMinutes((_b = this.value.duedate) === null || _b === void 0 ? void 0 : _b.value);
       if (!isTime) {
         this.value.duedate = { value: date };
       }
-      this.value.duedate.value = index$1.setDateHours(this.value.duedate.value, hours);
-      this.value.duedate.value = index$1.setDateMinutes(this.value.duedate.value, minutes);
+      this.value.duedate.value = overlays.setDateHours(this.value.duedate.value, hours);
+      this.value.duedate.value = overlays.setDateMinutes(this.value.duedate.value, minutes);
       this.dataChanged.emit(this.value);
       index.forceUpdate(this);
     }
@@ -221,18 +222,18 @@ const YooFormTodoListTaskComponent = class {
   renderTaskDetails() {
     var _a, _b, _c, _d, _e, _f;
     const Tag = !this.isTaskEdited ? 'div' : 'yoo-form-input-container';
-    return (index.h("div", { class: { 'task-details': true, edited: this.isTaskEdited } }, (this.isDescriptionToggledState || ((_b = (_a = this.value.description) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.trim())) && (index.h("div", { class: { 'task-note': true, readonly: !this.isTaskEdited } }, index.h(Tag, { field: { title: !this.isTaskEdited ? '' : 'DESCRIPTION', hideOptional: !this.isTaskEdited } }, index.h("yoo-form-text-area", { value: (_c = this.value.description) === null || _c === void 0 ? void 0 : _c.value, onInputChanged: (ev) => this.onEditDescription(ev), readonly: !this.isTaskEdited, onValidityChanged: (ev) => ev.stopPropagation(), size: index$1.isWeb(this.host) ? 'medium' : 'large', translations: this.translations, onTranslationValueUpdated: (ev) => {
+    return (index.h("div", { class: { 'task-details': true, edited: this.isTaskEdited } }, (this.isDescriptionToggledState || ((_b = (_a = this.value.description) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.trim())) && (index.h("div", { class: { 'task-note': true, readonly: !this.isTaskEdited } }, index.h(Tag, { field: { title: !this.isTaskEdited ? '' : 'DESCRIPTION', hideOptional: !this.isTaskEdited } }, index.h("yoo-form-text-area", { value: (_c = this.value.description) === null || _c === void 0 ? void 0 : _c.value, onInputChanged: (ev) => this.onEditDescription(ev), readonly: !this.isTaskEdited, onValidityChanged: (ev) => ev.stopPropagation(), size: overlays.isWeb(this.host) ? 'medium' : 'large', translations: this.translations, onTranslationValueUpdated: (ev) => {
         ev.stopPropagation();
         this.translatedValue = ev.detail;
-      } })))), ((_d = this.value.duedate) === null || _d === void 0 ? void 0 : _d.value) && (index.h("yoo-tag", { color: "app-color-10", closable: this.isTaskEdited, onClosed: (ev) => this.onClearSchedule(ev) }, index.h("yoo-icon", { slot: "start", name: "calendar", color: "app-color", size: "small" }), index$1.translate('YOOBICDUEAT', { date: index$1.fromNow(this.value.duedate.value), time: index$1.dateFormat(this.value.duedate.value, 'HH:mm') }))), ((_e = this.value.isphotorequired) === null || _e === void 0 ? void 0 : _e.value) && (index.h("yoo-tag", { color: "app-color-10", closable: this.isTaskEdited, onClosed: (ev) => this.onToggleImageRequired(ev) }, index.h("yoo-icon", { slot: "start", name: "image", color: "app-color", size: "small" }), index$1.translate('MANDATORYPHOTO'))), ((_f = this.value.user) === null || _f === void 0 ? void 0 : _f.value) && (index.h("span", { class: "user" }, index.h("yoo-avatar", { user: this.value.user.value, size: "small" }), index.h("span", null, index$1.getUserDisplayName(this.value.user.value))))));
+      } })))), ((_d = this.value.duedate) === null || _d === void 0 ? void 0 : _d.value) && (index.h("yoo-tag", { color: "app-color-10", closable: this.isTaskEdited, onClosed: (ev) => this.onClearSchedule(ev) }, index.h("yoo-icon", { slot: "start", name: "calendar", color: "app-color", size: "small" }), overlays.translate('YOOBICDUEAT', { date: overlays.fromNow(this.value.duedate.value), time: overlays.dateFormat(this.value.duedate.value, 'HH:mm') }))), ((_e = this.value.isphotorequired) === null || _e === void 0 ? void 0 : _e.value) && (index.h("yoo-tag", { color: "app-color-10", closable: this.isTaskEdited, onClosed: (ev) => this.onToggleImageRequired(ev) }, index.h("yoo-icon", { slot: "start", name: "image", color: "app-color", size: "small" }), overlays.translate('MANDATORYPHOTO'))), ((_f = this.value.user) === null || _f === void 0 ? void 0 : _f.value) && (index.h("span", { class: "user" }, index.h("yoo-avatar", { user: this.value.user.value, size: "small" }), index.h("span", null, overlays.getUserDisplayName(this.value.user.value))))));
   }
   renderTask() {
     var _a, _b, _c, _d;
     const completeHandler = (ev) => this.onTaskCompletedStateChange(ev); // 'this.readonly' value is checked into 'onTaskCompletedStateChange'
     const editHandler = !this.readonly && !this.isTaskEdited ? () => this.editTask.emit(this.value) : null;
     return [
-      !this.isTaskEdited && (index.h("div", { class: "task-title" }, index.h("div", { class: "title" }, index.h("yoo-icon", { name: ((_a = this.value.finished) === null || _a === void 0 ? void 0 : _a.value) ? 'check' : 'circle', color: "app-color", class: { strict: this.readonly || this.isCompleteLocked }, onClick: completeHandler }), index.h("div", { class: { done: (_b = this.value.finished) === null || _b === void 0 ? void 0 : _b.value }, onClick: editHandler }, index$1.translateMulti(this.localTranslatedValue || ((_c = this.value.text) === null || _c === void 0 ? void 0 : _c.value)))), this.renderTaskActions())),
-      this.isTaskEdited && (index.h("yoo-form-input-container", { field: { title: 'TITLE' }, hideOptional: true }, ' ', index.h("yoo-form-text-area", { ref: (el) => (this.textAreaHTMLElement = el), size: index$1.isWeb(this.host) ? 'medium' : 'large', initialRows: 1, maxRows: 3, resizable: "none", placeholder: this.placeholder, value: (_d = this.value.text) === null || _d === void 0 ? void 0 : _d.value, focusOnRendered: true, onInputChanged: (ev) => this.onEditTitle(ev), onEnterPressed: (ev) => this.onSave(ev), translations: this.translations, onTranslationValueUpdated: (ev) => {
+      !this.isTaskEdited && (index.h("div", { class: "task-title" }, index.h("div", { class: "title" }, index.h("yoo-icon", { name: ((_a = this.value.finished) === null || _a === void 0 ? void 0 : _a.value) ? 'check' : 'circle', color: "app-color", class: { strict: this.readonly || this.isCompleteLocked }, onClick: completeHandler }), index.h("div", { class: { done: (_b = this.value.finished) === null || _b === void 0 ? void 0 : _b.value }, onClick: editHandler }, overlays.translateMulti(this.localTranslatedValue || ((_c = this.value.text) === null || _c === void 0 ? void 0 : _c.value)))), this.renderTaskActions())),
+      this.isTaskEdited && (index.h("yoo-form-input-container", { field: { title: 'TITLE' }, hideOptional: true }, ' ', index.h("yoo-form-text-area", { ref: (el) => (this.textAreaHTMLElement = el), size: overlays.isWeb(this.host) ? 'medium' : 'large', initialRows: 1, maxRows: 3, resizable: "none", placeholder: this.placeholder, value: (_d = this.value.text) === null || _d === void 0 ? void 0 : _d.value, focusOnRendered: true, onInputChanged: (ev) => this.onEditTitle(ev), onEnterPressed: (ev) => this.onSave(ev), translations: this.translations, onTranslationValueUpdated: (ev) => {
           ev.stopPropagation();
           this.translatedValue = ev.detail;
         } }))),
@@ -244,7 +245,7 @@ const YooFormTodoListTaskComponent = class {
     return (index.h("div", { class: "actions all-web" }, index.h("div", { class: "actions primary spaced-btn-right" }, index.h("yoo-button", { fill: "solid", color: "app-color", disabled: !this.isValidState, onClick: (ev) => this.onSave(ev) }, this.saveBtnText), index.h("yoo-button", { class: "cancel", shape: "circular", fill: "transparent", color: "stable", onClick: (ev) => this.onCancel(ev) }, index.h("yoo-icon", { name: "close", color: "stable" }))), index.h("div", { class: "actions" }, !this.isAnnouncementMode && index.h("yoo-button", { shape: "square", fill: "transparent", size: "medium", onClick: (ev) => this.onOpenCalendar(ev) }, index.h("yoo-icon", { name: "calendar", color: ((_a = this.value.duedate) === null || _a === void 0 ? void 0 : _a.value) ? 'app-color' : 'stable' })), !this.isAnnouncementMode && index.h("yoo-button", { shape: "square", fill: "transparent", size: "medium", onClick: (ev) => this.onToggleDescription(ev) }, index.h("yoo-icon", { name: "align-left", color: this.isDescriptionToggledState ? 'app-color' : 'stable' })), index.h("yoo-button", { shape: "square", fill: "transparent", size: "medium", onClick: (ev) => this.onToggleImageRequired(ev) }, index.h("yoo-icon", { name: "image", color: ((_b = this.value.isphotorequired) === null || _b === void 0 ? void 0 : _b.value) ? 'app-color' : 'stable' })), ((_c = this.locations) === null || _c === void 0 ? void 0 : _c.length) === 1 && index.h("yoo-button", { shape: "square", fill: "transparent", size: "medium", color: "stable", onClick: (ev) => this.onAssignUser(ev) }, ((_d = this.value.user) === null || _d === void 0 ? void 0 : _d.value) ? index.h("yoo-avatar", { user: this.value.user.value, size: "small" }) : index.h("yoo-icon", { name: "assign" })))));
   }
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: { task: true, web: index$1.isWeb(this.host), editable: !this.readonly && !this.isTaskEdited } }, this.renderTask()), index$1.isWeb(this.host) && this.isTaskEdited && this.renderActionsWeb()));
+    return (index.h(index.Host, null, index.h("div", { class: { task: true, web: overlays.isWeb(this.host), editable: !this.readonly && !this.isTaskEdited } }, this.renderTask()), overlays.isWeb(this.host) && this.isTaskEdited && this.renderActionsWeb()));
   }
   get host() { return index.getElement(this); }
 };

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

@@ -2,14 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+const overlays = require('./overlays-b6c94fc8.js');
+require('./index-1fdbd9b3.js');
 const lodash = require('./lodash-597bda6d.js');
 const formField_instance = require('./form-field.instance-610e61e1.js');
-const formInputHelpers = require('./form-input-helpers-a04f76d2.js');
+const formInputHelpers = require('./form-input-helpers-a2843dc0.js');
+require('./index-de8540eb.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
-require('./common-helpers-6970c46c.js');
+require('./common-helpers-a4efe957.js');
 
 const formTodoListCss = ":host yoo-form-input{width:100%}:host .list-title{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:var(--spacing-08, 0.5rem)}:host .list-title .title{-ms-flex:1;flex:1}:host .progress{margin-bottom:var(--spacing-16, 1rem)}:host .allDone{margin-bottom:var(--spacing-08, 0.5rem)}:host .actions{display:-ms-flexbox;display:flex}:host .actions.all{-ms-flex-pack:justify;justify-content:space-between;margin-top:var(--spacing-08, 0.5rem);margin-bottom:var(--spacing-16, 1rem)}:host .actions.primary{-ms-flex-positive:0;flex-grow:0}:host .actions yoo-button.add.with-margin{margin-top:var(--spacing-08, 0.5rem)}:host .actions.spaced-btn-left yoo-button{margin-left:var(--spacing-08, 0.5rem)}:host .actions.spaced-btn-right yoo-button{margin-right:var(--spacing-08, 0.5rem)}:host yoo-ion-item-sliding yoo-ion-item{width:100%;color:var(--dark, #000000)}:host yoo-ion-item-sliding yoo-ion-item yoo-form-todo-list-task{width:100%;border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0)}:host yoo-ion-item-sliding yoo-ion-item yoo-form-todo-list-task:not(.isFirstItem){padding-top:var(--spacing-08, 0.5rem)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container{display:-ms-flexbox;display:flex;margin-bottom:0.0625rem}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-accent{background-color:var(--accent, #276ef1) !important}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-accent-hover{color:var(--text-color, #807f83);background-color:var(--light, #ffffff)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-accent-hover:hover{color:var(--light, #ffffff);background-color:var(--accent, #276ef1)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .accent{color:var(--accent, #276ef1);fill:var(--accent, #276ef1)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-app-color{background-color:var(--app-color, #5a30f4) !important}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-app-color-hover{color:var(--text-color, #807f83);background-color:var(--light, #ffffff)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-app-color-hover:hover{color:var(--light, #ffffff);background-color:var(--app-color, #5a30f4)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .app-color{color:var(--app-color, #5a30f4);fill:var(--app-color, #5a30f4)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-danger{background-color:var(--danger, #d44333) !important}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-danger-hover{color:var(--text-color, #807f83);background-color:var(--light, #ffffff)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-danger-hover:hover{color:var(--light, #ffffff);background-color:var(--danger, #d44333)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .danger{color:var(--danger, #d44333);fill:var(--danger, #d44333)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-dark{background-color:var(--dark, #000000) !important}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-dark-hover{color:var(--text-color, #807f83);background-color:var(--light, #ffffff)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-dark-hover:hover{color:var(--light, #ffffff);background-color:var(--dark, #000000)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .dark{color:var(--dark, #000000);fill:var(--dark, #000000)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-energized{background-color:var(--energized, #ffc043) !important}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-energized-hover{color:var(--text-color, #807f83);background-color:var(--light, #ffffff)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-energized-hover:hover{color:var(--light, #ffffff);background-color:var(--energized, #ffc043)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .energized{color:var(--energized, #ffc043);fill:var(--energized, #ffc043)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-info{background-color:var(--info, #d84c96) !important}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-info-hover{color:var(--text-color, #807f83);background-color:var(--light, #ffffff)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-info-hover:hover{color:var(--light, #ffffff);background-color:var(--info, #d84c96)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .info{color:var(--info, #d84c96);fill:var(--info, #d84c96)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-light{background-color:var(--light, #ffffff) !important}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-light-hover{color:var(--text-color, #807f83);background-color:var(--light, #ffffff)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-light-hover:hover{color:var(--light, #ffffff);background-color:var(--light, #ffffff)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .light{color:var(--light, #ffffff);fill:var(--light, #ffffff)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-stable{background-color:var(--stable, #adadad) !important}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-stable-hover{color:var(--text-color, #807f83);background-color:var(--light, #ffffff)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-stable-hover:hover{color:var(--light, #ffffff);background-color:var(--stable, #adadad)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .stable{color:var(--stable, #adadad);fill:var(--stable, #adadad)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-stable-alt{background-color:var(--stable-alt, #d0d0d0) !important}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-stable-alt-hover{color:var(--text-color, #807f83);background-color:var(--light, #ffffff)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-stable-alt-hover:hover{color:var(--light, #ffffff);background-color:var(--stable-alt, #d0d0d0)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .stable-alt{color:var(--stable-alt, #d0d0d0);fill:var(--stable-alt, #d0d0d0)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-stable-light{background-color:var(--stable-light, #f1f1f1) !important}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-stable-light-hover{color:var(--text-color, #807f83);background-color:var(--light, #ffffff)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-stable-light-hover:hover{color:var(--light, #ffffff);background-color:var(--stable-light, #f1f1f1)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .stable-light{color:var(--stable-light, #f1f1f1);fill:var(--stable-light, #f1f1f1)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-stable-ultralight{background-color:var(--stable-ultralight, #fafafa) !important}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-stable-ultralight-hover{color:var(--text-color, #807f83);background-color:var(--light, #ffffff)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-stable-ultralight-hover:hover{color:var(--light, #ffffff);background-color:var(--stable-ultralight, #fafafa)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .stable-ultralight{color:var(--stable-ultralight, #fafafa);fill:var(--stable-ultralight, #fafafa)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-success{background-color:var(--success, #3aa76d) !important}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-success-hover{color:var(--text-color, #807f83);background-color:var(--light, #ffffff)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-success-hover:hover{color:var(--light, #ffffff);background-color:var(--success, #3aa76d)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .success{color:var(--success, #3aa76d);fill:var(--success, #3aa76d)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-text-color{background-color:var(--text-color, #807f83) !important}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-text-color-hover{color:var(--text-color, #807f83);background-color:var(--light, #ffffff)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-text-color-hover:hover{color:var(--light, #ffffff);background-color:var(--text-color, #807f83)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .text-color{color:var(--text-color, #807f83);fill:var(--text-color, #807f83)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-warning{background-color:var(--warning, #ed6e33) !important}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-warning-hover{color:var(--text-color, #807f83);background-color:var(--light, #ffffff)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-warning-hover:hover{color:var(--light, #ffffff);background-color:var(--warning, #ed6e33)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .warning{color:var(--warning, #ed6e33);fill:var(--warning, #ed6e33)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-wood{background-color:var(--wood, #99644c) !important}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-wood-hover{color:var(--text-color, #807f83);background-color:var(--light, #ffffff)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .bg-wood-hover:hover{color:var(--light, #ffffff);background-color:var(--wood, #99644c)}:host yoo-ion-item-sliding yoo-ion-item-options .options-container .wood{color:var(--wood, #99644c);fill:var(--wood, #99644c)}:host yoo-ion-item-sliding yoo-ion-item-options button{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;max-height:var(--spacing-56, 3.5rem);margin:0;padding:var(--spacing-08, 0.5rem);border:none;visibility:hidden}:host yoo-ion-item-sliding yoo-ion-item-options button .text-action{margin-top:var(--spacing-08, 0.5rem);font-size:var(--font-size-14, 0.875rem);font-family:var(--font-family, \"Lato\")}:host yoo-ion-item-sliding yoo-ion-item-options button yoo-icon{width:var(--spacing-56, 3.5rem);font-size:var(--font-size-18, 1.125rem)}:host yoo-ion-item-sliding.item-sliding-active-slide yoo-ion-item-options button{visibility:visible}";
 
@@ -42,8 +43,8 @@ const YooFormTodoListComponent = class {
     this.isNewTasksCreationOngoing = false;
     this.itemsSliding = [];
     this.mainMenuActions = [
-      { text: index$1.translate('YOOBICEDIT'), handler: () => this.updateEditedState(null, false, true) },
-      { text: index$1.translate('DELETE'), handler: () => this.delete.emit() }
+      { text: overlays.translate('YOOBICEDIT'), handler: () => this.updateEditedState(null, false, true) },
+      { text: overlays.translate('DELETE'), handler: () => this.delete.emit() }
     ];
   }
   updateKeyboardOpenState() {
@@ -67,7 +68,7 @@ const YooFormTodoListComponent = class {
     this.backup.task = null;
   }
   componentDidLoad() {
-    if (index$1.isNativeMobile()) {
+    if (overlays.isNativeMobile()) {
       this.keyboardWillShowListener = lodash.debounce(this.updateKeyboardOpenState, 500).bind(this);
       window.addEventListener('keyboardWillShow', this.keyboardWillShowListener);
       this.keyboardDidHideListener = lodash.debounce(this.updateKeyboardOpenState, 500).bind(this);
@@ -86,7 +87,7 @@ const YooFormTodoListComponent = class {
     }
   }
   disconnectedCallback() {
-    if (index$1.isNativeMobile()) {
+    if (overlays.isNativeMobile()) {
       window.removeEventListener('keyboardWillShow', this.keyboardWillShowListener);
       window.removeEventListener('keyboardDidHide', this.keyboardDidHideListener);
     }
@@ -109,7 +110,7 @@ const YooFormTodoListComponent = class {
     switch (this.mode) {
       case formField_instance.TodoListMode.kanban:
         return [
-          { text: index$1.translate('CONVERTTOCARD'), handler: () => this.convertTaskToCard.emit(item) }
+          { text: overlays.translate('CONVERTTOCARD'), handler: () => this.convertTaskToCard.emit(item) }
         ];
       default:
         return [];
@@ -134,14 +135,14 @@ const YooFormTodoListComponent = class {
   setDefaultValueIfNeeded(emit = true) {
     var _a;
     if (!this.value) {
-      this.value = { title: index$1.translate('TODOLIST'), values: [] };
+      this.value = { title: overlays.translate('TODOLIST'), values: [] };
     }
     else {
       if (!this.value.values) {
         this.value.values = [];
       }
       if (!((_a = this.value.title) === null || _a === void 0 ? void 0 : _a.trim().length)) {
-        this.value.title = index$1.translate('TODOLIST');
+        this.value.title = overlays.translate('TODOLIST');
       }
     }
     if (emit) {
@@ -169,12 +170,12 @@ const YooFormTodoListComponent = class {
       }
     }
     if (item) {
-      if (!index$1.isWeb(this.host)) {
+      if (!overlays.isWeb(this.host)) {
         this.taskEditionModal = document.createElement('yoo-form-todo-list-dialog');
         this.taskEditionModal.mode = this.mode;
         this.taskEditionModal.value = this.editedItem;
-        this.taskEditionModal.header = isEditedNewTaskState ? index$1.translate('NEWTASK') : index$1.translate('EDITTASK');
-        this.taskEditionModal.saveBtnText = isEditedNewTaskState ? index$1.translate('YOOBICADD') : index$1.translate('YOOBICSAVE');
+        this.taskEditionModal.header = isEditedNewTaskState ? overlays.translate('NEWTASK') : overlays.translate('EDITTASK');
+        this.taskEditionModal.saveBtnText = isEditedNewTaskState ? overlays.translate('YOOBICADD') : overlays.translate('YOOBICSAVE');
         this.taskEditionModal.placeholder = this.isEditedNewTaskState ? 'TODOADDITEM' : 'EDITTASK';
         this.taskEditionModal.locations = (_b = this.extraData) === null || _b === void 0 ? void 0 : _b.locations;
         this.taskEditionModal.addEventListener('saveTask', (ev) => {
@@ -186,10 +187,10 @@ const YooFormTodoListComponent = class {
           this.onCancelTask(ev.detail);
         });
         // need to be sure that the keyboard has been totally hidden first, as it is not possible to calculate the position/height of the new modal until it is fully hidden
-        const hideKeyboardPromise = index$1.isNativeMobile() && (index$1.Keyboard === null || index$1.Keyboard === void 0 ? void 0 : index$1.Keyboard.hide) ? index$1.Keyboard.hide() : Promise.resolve();
+        const hideKeyboardPromise = overlays.isNativeMobile() && (overlays.Keyboard === null || overlays.Keyboard === void 0 ? void 0 : overlays.Keyboard.hide) ? overlays.Keyboard.hide() : Promise.resolve();
         this.keyboardDidHideCallback = () => {
           this.keyboardDidHideCallback = null;
-          index$1.showModal(this.taskEditionModal, { half: true, coeffHalf: 0.8 }, null, 'slideYEnterAnimation', 'slideYLeaveAnimation', true, false).then(() => {
+          overlays.showModal(this.taskEditionModal, { half: true, coeffHalf: 0.8 }, null, 'slideYEnterAnimation', 'slideYLeaveAnimation', true, false).then(() => {
             this.taskEditionModal = null;
           });
         };
@@ -205,18 +206,18 @@ const YooFormTodoListComponent = class {
     }
     else {
       if (this.taskEditionModal) {
-        index$1.closeModal(null, this.taskEditionModal);
+        overlays.closeModal(null, this.taskEditionModal);
       }
     }
     this.validate();
   }
   onShowTodoListMobileMenu(ev) {
     ev.stopPropagation();
-    index$1.showActionSheet(this.mainMenuActions);
+    overlays.showActionSheet(this.mainMenuActions);
   }
   onShowTaskMobileMenu(ev, actions = []) {
     ev.stopPropagation();
-    index$1.showActionSheet(actions);
+    overlays.showActionSheet(actions);
   }
   onSwitchCompledtedTasksHiddenState(ev) {
     ev.stopPropagation();
@@ -225,7 +226,7 @@ const YooFormTodoListComponent = class {
   onTaskAdded(ev) {
     ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
     const item = {
-      _id: index$1.getUUID(),
+      _id: overlays.getUUID(),
       text: { value: null },
       hasphoto: { value: true }
     };
@@ -271,7 +272,7 @@ const YooFormTodoListComponent = class {
     this.value.values = this.value.values.filter(item => { var _a, _b; return (_b = (_a = item.text) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.trim().length; });
     this.backup.task = null;
     // do it now, as 'this.isEditedNewTaskState' is modified by 'updateEditedState'
-    this.isNewTasksCreationOngoing = index$1.isWeb(this.host) && this.isEditedNewTaskState;
+    this.isNewTasksCreationOngoing = overlays.isWeb(this.host) && this.isEditedNewTaskState;
     this.updateEditedState();
     this.setValueAndEmitChanged();
     // automatically add a new task after saving the last new one
@@ -299,26 +300,26 @@ const YooFormTodoListComponent = class {
   renderTitle() {
     var _a;
     const completedTasks = ((_a = this.value.values) === null || _a === void 0 ? void 0 : _a.filter(item => { var _a; return (_a = item.finished) === null || _a === void 0 ? void 0 : _a.value; })) || [];
-    const colorOpt = index$1.isWeb(this.host) ? {}
+    const colorOpt = overlays.isWeb(this.host) ? {}
       : {
         color: 'stable'
       };
-    const fillOpt = index$1.isWeb(this.host) ? {}
+    const fillOpt = overlays.isWeb(this.host) ? {}
       : {
         fill: 'transparent'
       };
     const sizeOpt = {
-      size: (index$1.isWeb(this.host) ? 'small' : 'medium')
+      size: (overlays.isWeb(this.host) ? 'small' : 'medium')
     };
     return [
-      index.h("div", { class: "list-title" }, index$1.isWeb(this.host) && this.isEditedTitleState && (index.h("yoo-form-input", { type: "text", size: "medium", value: this.editedTitle, focusOnRendered: true, onInputChanged: (ev) => this.onEditTitle(ev), onEnterPressed: (ev) => this.onSaveTitle(ev), onInputBlurred: () => this.onInputBlur(), translations: this.translations, onTranslationValueUpdated: (ev) => {
+      index.h("div", { class: "list-title" }, overlays.isWeb(this.host) && this.isEditedTitleState && (index.h("yoo-form-input", { type: "text", size: "medium", value: this.editedTitle, focusOnRendered: true, onInputChanged: (ev) => this.onEditTitle(ev), onEnterPressed: (ev) => this.onSaveTitle(ev), onInputBlurred: () => this.onInputBlur(), translations: this.translations, onTranslationValueUpdated: (ev) => {
           ev.stopPropagation();
           this.translationValueUpdated.emit(ev.detail);
-        } })), (!index$1.isWeb(this.host) || !this.isEditedTitleState) && (index.h("div", { class: { title: true, editable: index$1.isWeb(this.host) && !this.isReadonly() }, onClick: () => (index$1.isWeb(this.host) && !this.isReadonly() && !this.isEditedState ? this.updateEditedState(null, false, true) : null) }, index$1.translateMulti(this.value.title))), !this.isEditedState && (index.h("div", { class: "actions primary spaced-btn-left" }, !!(completedTasks === null || completedTasks === void 0 ? void 0 : completedTasks.length) && (index.h("yoo-button", { shape: "square", ...sizeOpt, ...fillOpt, ...colorOpt, onClick: (ev) => this.onSwitchCompledtedTasksHiddenState(ev) }, index.h("yoo-icon", { name: this.isCompledtedTasksHiddenState ? 'eye' : 'offline', ...sizeOpt, ...colorOpt }))), !this.isReadonly() && [
-        index$1.isWeb(this.host) && (index.h("yoo-context-menu", { contentButtons: this.mainMenuActions, placement: "below" }, index.h("yoo-button", { shape: "square", ...sizeOpt, ...fillOpt, ...colorOpt }, index.h("yoo-icon", { name: "more", ...sizeOpt, ...colorOpt })))),
-        !index$1.isWeb(this.host) && (index.h("yoo-button", { shape: "square", ...sizeOpt, ...fillOpt, ...colorOpt, onClick: (ev) => this.onShowTodoListMobileMenu(ev) }, index.h("yoo-icon", { name: "more", ...sizeOpt, ...colorOpt })))
+        } })), (!overlays.isWeb(this.host) || !this.isEditedTitleState) && (index.h("div", { class: { title: true, editable: overlays.isWeb(this.host) && !this.isReadonly() }, onClick: () => (overlays.isWeb(this.host) && !this.isReadonly() && !this.isEditedState ? this.updateEditedState(null, false, true) : null) }, overlays.translateMulti(this.value.title))), !this.isEditedState && (index.h("div", { class: "actions primary spaced-btn-left" }, !!(completedTasks === null || completedTasks === void 0 ? void 0 : completedTasks.length) && (index.h("yoo-button", { shape: "square", ...sizeOpt, ...fillOpt, ...colorOpt, onClick: (ev) => this.onSwitchCompledtedTasksHiddenState(ev) }, index.h("yoo-icon", { name: this.isCompledtedTasksHiddenState ? 'eye' : 'offline', ...sizeOpt, ...colorOpt }))), !this.isReadonly() && [
+        overlays.isWeb(this.host) && (index.h("yoo-context-menu", { contentButtons: this.mainMenuActions, placement: "below" }, index.h("yoo-button", { shape: "square", ...sizeOpt, ...fillOpt, ...colorOpt }, index.h("yoo-icon", { name: "more", ...sizeOpt, ...colorOpt })))),
+        !overlays.isWeb(this.host) && (index.h("yoo-button", { shape: "square", ...sizeOpt, ...fillOpt, ...colorOpt, onClick: (ev) => this.onShowTodoListMobileMenu(ev) }, index.h("yoo-icon", { name: "more", ...sizeOpt, ...colorOpt })))
       ]))),
-      index$1.isWeb(this.host) && this.isEditedTitleState && index.h("div", { class: "actions all" }, index.h("div", { class: "actions primary spaced-btn-right" }, index.h("yoo-button", { fill: "solid", color: "app-color", onClick: (ev) => this.onSaveTitle(ev) }, index$1.translate('YOOBICSAVE')), index.h("yoo-button", { class: "cancel", shape: "circular", fill: "transparent", color: "stable", onClick: (ev) => this.onCancelTitle(ev) }, index.h("yoo-icon", { name: "close", color: "stable" }))))
+      overlays.isWeb(this.host) && this.isEditedTitleState && index.h("div", { class: "actions all" }, index.h("div", { class: "actions primary spaced-btn-right" }, index.h("yoo-button", { fill: "solid", color: "app-color", onClick: (ev) => this.onSaveTitle(ev) }, overlays.translate('YOOBICSAVE')), index.h("yoo-button", { class: "cancel", shape: "circular", fill: "transparent", color: "stable", onClick: (ev) => this.onCancelTitle(ev) }, index.h("yoo-icon", { name: "close", color: "stable" }))))
     ];
   }
   renderProgress() {
@@ -326,13 +327,13 @@ const YooFormTodoListComponent = class {
     const progress = ((_a = this.value.values) === null || _a === void 0 ? void 0 : _a.length) ? this.value.values.reduce((sum, item) => { var _a; return sum + (((_a = item.finished) === null || _a === void 0 ? void 0 : _a.value) ? 100 : 0); }, 0) / this.value.values.length : 0;
     return index.h("yoo-progress-bar", { class: "progress", value: progress });
   }
-  renderTask(item, index$2, actions) {
+  renderTask(item, index$1, actions) {
     var _a;
     const placeHolder = !this.value.values.length ? 'TODOADDFIRSTITEM' : 'TODOADDITEM';
-    const saveBtnText = this.isEditedNewTaskState ? index$1.translate('YOOBICADD') : index$1.translate('YOOBICSAVE');
-    const isTaskEdited = index$1.isWeb(this.host) && (index$2 === this.editedItemIndex); // check if the current task is being edited
+    const saveBtnText = this.isEditedNewTaskState ? overlays.translate('YOOBICADD') : overlays.translate('YOOBICSAVE');
+    const isTaskEdited = overlays.isWeb(this.host) && (index$1 === this.editedItemIndex); // check if the current task is being edited
     const readonly = this.isReadonly() || (this.isEditedState && !isTaskEdited); // when a task is being edited, put all the other task in readonly mode
-    return index.h("yoo-form-todo-list-task", { class: { isFirstItem: index$2 === 0 }, value: isTaskEdited ? this.editedItem : item, actions: actions, placeholder: placeHolder, saveBtnText: saveBtnText, readonly: readonly, mode: this.mode, isCompleteLocked: this.isCompleteLocked, locations: (_a = this.extraData) === null || _a === void 0 ? void 0 : _a.locations, isTaskEdited: isTaskEdited, onEditTask: (ev) => this.updateEditedState(ev.detail), onSaveTask: (ev) => this.onSaveTask(ev.detail), onSetTaskComplete: () => this.onSetTaskComplete(), onCancelTask: (ev) => this.onCancelTask(ev.detail), onValidityChanged: (ev) => ev.stopPropagation(), onDataChanged: (ev) => ev.stopPropagation(), translations: this.translations, onTranslationValueUpdated: (ev) => {
+    return index.h("yoo-form-todo-list-task", { class: { isFirstItem: index$1 === 0 }, value: isTaskEdited ? this.editedItem : item, actions: actions, placeholder: placeHolder, saveBtnText: saveBtnText, readonly: readonly, mode: this.mode, isCompleteLocked: this.isCompleteLocked, locations: (_a = this.extraData) === null || _a === void 0 ? void 0 : _a.locations, isTaskEdited: isTaskEdited, onEditTask: (ev) => this.updateEditedState(ev.detail), onSaveTask: (ev) => this.onSaveTask(ev.detail), onSetTaskComplete: () => this.onSetTaskComplete(), onCancelTask: (ev) => this.onCancelTask(ev.detail), onValidityChanged: (ev) => ev.stopPropagation(), onDataChanged: (ev) => ev.stopPropagation(), translations: this.translations, onTranslationValueUpdated: (ev) => {
         ev.stopPropagation();
         this.translationValueUpdated.emit(ev.detail);
       } });
@@ -352,23 +353,23 @@ const YooFormTodoListComponent = class {
     }
     // when all tasks are completed, but hidden, display an explanatory text
     if (this.isCompledtedTasksHiddenState && ((_b = this.value.values) === null || _b === void 0 ? void 0 : _b.length) && !tasks.length) {
-      return index.h("div", { class: "allDone" }, index$1.translate('ALLCOMPLETED'));
+      return index.h("div", { class: "allDone" }, overlays.translate('ALLCOMPLETED'));
     }
     // no task is hidden, or some of them are not done
     return tasks.map((item, index) => {
       const actions = [
-        { text: index$1.translate('YOOBICEDIT'), handler: () => this.updateEditedState(item) },
+        { text: overlays.translate('YOOBICEDIT'), handler: () => this.updateEditedState(item) },
         ...this.getTaskInlineActions(item),
-        { text: index$1.translate('DELETE'), handler: () => this.onTaskRemoved(null, item) }
+        { text: overlays.translate('DELETE'), handler: () => this.onTaskRemoved(null, item) }
       ];
-      return index$1.isWeb(this.host) ? this.renderTask(item, index, actions) : this.renderTaskMobile(item, index, actions);
+      return overlays.isWeb(this.host) ? this.renderTask(item, index, actions) : this.renderTaskMobile(item, index, actions);
     });
   }
   renderAddTaskButton() {
     var _a;
     const isFirstItem = !((_a = this.value.values) === null || _a === void 0 ? void 0 : _a.length);
-    const addBtnText = isFirstItem ? index$1.translate('TODOADDFIRSTITEM') : index$1.translate('TODOADDITEM');
-    return !this.isReadonly() && !this.isEditedState && index.h("div", { class: "actions primary spaced-btn-right" }, index.h("yoo-button", { class: { add: true, 'with-margin': !index$1.isWeb(this.host) && !isFirstItem }, fill: "transparent", color: "app-color", onClick: (ev) => this.onTaskAdded(ev) }, addBtnText));
+    const addBtnText = isFirstItem ? overlays.translate('TODOADDFIRSTITEM') : overlays.translate('TODOADDITEM');
+    return !this.isReadonly() && !this.isEditedState && index.h("div", { class: "actions primary spaced-btn-right" }, index.h("yoo-button", { class: { add: true, 'with-margin': !overlays.isWeb(this.host) && !isFirstItem }, fill: "transparent", color: "app-color", onClick: (ev) => this.onTaskAdded(ev) }, addBtnText));
   }
   render() {
     return (index.h(index.Host, null, !this.hideHeader && this.renderTitle(), this.renderTasks(), this.renderAddTaskButton()));

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

@@ -2,12 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$2 = require('./index-fc264952.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+const index$1 = require('./index-de8540eb.js');
+require('./index-1fdbd9b3.js');
 const lodash = require('./lodash-597bda6d.js');
-const operationHelpers = require('./operation-helpers-dcf02ba5.js');
-const commonHelpers = require('./common-helpers-6970c46c.js');
+const operationHelpers = require('./operation-helpers-18377709.js');
+const commonHelpers = require('./common-helpers-a4efe957.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const formTodoSingleCss = ":host .outer-container .title{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-bottom:var(--spacing-08, 0.5rem);font-weight:bold}:host .outer-container .title yoo-badge{margin-right:var(--spacing-08, 0.5rem)}:host .outer-container .todo-container{margin-bottom:var(--spacing-08, 0.5rem);padding:var(--spacing-08, 0.5rem);background:var(--stable-10, rgba(173, 173, 173, 0.1));border-radius:var(--border-radius-08, 0.5rem)}:host .outer-container .todo-container:last-child .margin-left{border-top:none}:host .outer-container .todo-container .content{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between;margin:var(--spacing-08, 0.5rem) 0 var(--spacing-08, 0.5rem) 0}:host .outer-container .todo-container .content .content-left{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}:host .outer-container .todo-container .content .content-left yoo-icon{margin-right:var(--spacing-08, 0.5rem)}:host .outer-container .todo-container .content .content-left yoo-icon.stable-alt{color:var(--text-color, #807f83)}:host .outer-container .todo-container .content .content-left yoo-form-checkbox{margin-right:var(--spacing-04, 0.25rem)}:host .outer-container .todo-container .content .content-right{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .outer-container .todo-container .date{margin-bottom:var(--spacing-08, 0.5rem)}:host .outer-container .todo-container .description{margin-bottom:var(--spacing-08, 0.5rem);color:var(--text-color, #807f83)}:host .outer-container .todo-container .comments{margin-bottom:var(--spacing-16, 1rem);color:var(--text-color, #807f83);font-weight:var(--font-weight-400, 400);font-size:var(--font-size-14, 0.875rem)}:host .outer-container .todo-container .user{display:-ms-flexbox;display:flex;margin-top:var(--spacing-08, 0.5rem);margin-bottom:var(--spacing-08, 0.5rem)}:host .outer-container .todo-container .user yoo-avatar{margin-right:var(--spacing-08, 0.5rem)}:host .outer-container .todo-container .photo-container{margin-bottom:var(--spacing-08, 0.5rem)}:host .outer-container .todo-container .photo-container.readonly{width:17.5rem}:host .outer-container .todo-container .photo-container.readonly yoo-form-capture{display:block;width:100%;--width-readonly-preview:17.5rem}:host .outer-container .todo-container .textarea-container{margin-top:var(--spacing-04, 0.25rem);margin-bottom:var(--spacing-04, 0.25rem)}:host .outer-container .todo-container .border{width:100%;height:0;border-top:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);margin-bottom:var(--spacing-04, 0.25rem)}:host .outer-container .todo-container yoo-avatars{height:1.5rem;margin-top:var(--spacing-04, 0.25rem);margin-bottom:var(--spacing-04, 0.25rem)}:host .outer-container .todo-container .menu{margin:0;padding:0;font-size:100%;vertical-align:baseline;list-style:none outside none;background:none repeat scroll 0 0 transparent;border:0 none;outline:0 none;-webkit-tap-highlight-color:transparent;margin:0.5rem;padding:0;list-style:none}:host .outer-container .todo-container .menu .menu-item{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}:host .outer-container .todo-container .menu .menu-item:not(:last-child) .menu-content{margin-bottom:var(--spacing-24, 1.5rem)}:host .outer-container .todo-container .menu .menu-item .menu-left{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}:host .outer-container .todo-container .menu .menu-item .menu-left.with-dot{width:2rem;margin-left:0.0313rem}:host .outer-container .todo-container .menu .menu-item .menu-left .menu-icon{z-index:2;width:1.875rem;height:1.875rem;text-align:center}:host .outer-container .todo-container .menu .menu-item .menu-left .menu-icon.menu-dot{width:1rem;height:1rem}:host .outer-container .todo-container .menu .menu-item .menu-left .menu-icon yoo-icon{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;width:1.875rem;height:1.875rem;padding:0;color:var(--light, #ffffff);font-size:var(--font-size-18, 1.125rem);line-height:1.875rem;background-color:var(--app-color, #5a30f4);border-radius:50%}:host .outer-container .todo-container .menu .menu-item .menu-left .menu-icon yoo-icon.dark{background-color:var(--dark, #000000)}:host .outer-container .todo-container .menu .menu-item .menu-left .menu-icon yoo-icon.info{background-color:var(--info, #d84c96)}:host .outer-container .todo-container .menu .menu-item .menu-left .menu-icon yoo-icon.danger{background-color:var(--danger, #d44333)}:host .outer-container .todo-container .menu .menu-item .menu-left .border{width:0.0625rem;height:100%;background-color:var(--stable-alt, #d0d0d0)}:host .outer-container .todo-container .menu .menu-item .menu-left .border.border-pre{height:2.5rem}:host .outer-container .todo-container .menu .menu-item .menu-left .border.border-pre.last{height:1rem}:host .outer-container .todo-container .menu .menu-item .menu-left .border.dark{background-color:var(--dark, #000000)}:host .outer-container .todo-container .menu .menu-item .menu-left .border.danger{background-color:var(--danger, #d44333)}:host .outer-container .todo-container .menu .menu-item .menu-left .border.info{background-color:var(--info, #d84c96)}:host .outer-container .todo-container .menu .menu-item .menu-right{width:100%;margin-left:var(--spacing-08, 0.5rem);overflow:hidden}:host .outer-container .todo-container .menu .menu-item .menu-right .menu-title{font-weight:bold;line-height:1}:host .outer-container .todo-container .menu .menu-item .menu-right .menu-content{color:var(--text-color, #807f83)}:host .outer-container .todo-container .menu .menu-item .menu-right .menu-content.menu-chart{margin-bottom:0}:host .outer-container .todo-container .menu .menu-item .menu-right .menu-title{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:2rem}:host .outer-container .todo-container .menu .menu-item .menu-right .menu-content span{margin-right:0.5rem}:host .outer-container .todo-container .menu .menu-item .menu-right .menu-content yoo-avatar{margin-right:0.3125rem}:host .outer-container .todo-container .menu .menu-item .menu-right .menu-content .font-medium{font-size:var(--font-size-14, 0.875rem)}:host .outer-container .todo-container .menu .menu-item .menu-right .menu-content .font-small{font-size:var(--font-size-12, 0.75rem)}:host .outer-container .todo-container .menu .menu-item .menu-right .menu-content .dark{color:var(--dark, #000000)}:host .outer-container .todo-container .menu .menu-item .menu-right .menu-content .success{color:var(--success, #3aa76d)}:host .outer-container .todo-container .menu .menu-item .menu-right .menu-content .danger{color:var(--danger, #d44333)}:host .outer-container .todo-container .menu .menu-item .menu-right .menu-content .text-color{color:var(--text-color, #807f83)}:host .outer-container .todo-container .menu .menu-item .menu-right .menu-content table{width:100%;table-layout:fixed}:host .outer-container .todo-container .menu .menu-item .menu-right .menu-content table td{overflow:hidden;text-overflow:ellipsis}:host .margin-left{display:block;margin-left:var(--spacing-32, 2rem);border-top:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host(.readonly) .outer-container .title{margin-top:0.5rem}:host(.readonly) .outer-container .todo-container{margin-bottom:0}@media print{:host .todo-container{page-break-after:auto;page-break-before:avoid;page-break-inside:avoid}}";
@@ -17,7 +18,7 @@ const YooFormTodoSingleComponent = class {
     index.registerInstance(this, hostRef);
     this.update = index.createEvent(this, "update", 7);
     this.type = 'mission';
-    this.onCommentsChange = index$1.debounce((ev, index) => {
+    this.onCommentsChange = overlays.debounce((ev, index) => {
       if (this.isPreview) {
         return;
       }
@@ -45,7 +46,7 @@ const YooFormTodoSingleComponent = class {
   }
   isReadonly(task) {
     var _a, _b;
-    return this.readonly || (((_b = (_a = task === null || task === void 0 ? void 0 : task.user) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b._id) && task.user.value._id !== index$1.getSession().userId);
+    return this.readonly || (((_b = (_a = task === null || task === void 0 ? void 0 : task.user) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b._id) && task.user.value._id !== overlays.getSession().userId);
   }
   onIconClick(todo, index, value) {
     var _a, _b, _c;
@@ -57,9 +58,9 @@ const YooFormTodoSingleComponent = class {
       hasRequiredImageNoValue = todo.isphotorequired.value && !todo.imageData;
     }
     if ((value === true || value === false) && (!todo.user || !todo.user.value)) {
-      todo.user = { value: lodash.pick(index$1.getSession().user, index$2.IUser.getSimpleFields()), selfAssigned: true };
+      todo.user = { value: lodash.pick(overlays.getSession().user, index$1.IUser.getSimpleFields()), selfAssigned: true };
     }
-    if ((value === true || value === false) && ((_a = todo === null || todo === void 0 ? void 0 : todo.finished) === null || _a === void 0 ? void 0 : _a.value) === value && ((_c = (_b = todo === null || todo === void 0 ? void 0 : todo.user) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c._id) === index$1.getSession().userId && todo.user.selfAssigned) {
+    if ((value === true || value === false) && ((_a = todo === null || todo === void 0 ? void 0 : todo.finished) === null || _a === void 0 ? void 0 : _a.value) === value && ((_c = (_b = todo === null || todo === void 0 ? void 0 : todo.user) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c._id) === overlays.getSession().userId && todo.user.selfAssigned) {
       delete todo.user;
     }
     if (!this.valuesState[index].finished) {
@@ -67,7 +68,7 @@ const YooFormTodoSingleComponent = class {
     }
     const finished = this.valuesState[index].finished;
     if (hasRequiredImageNoValue) {
-      index$1.showAlert(index$1.translate('YOOBICTASK'), [index$1.translate('YOOBICOK')], index$1.translate('MANDATORYPHOTO'));
+      overlays.showAlert(overlays.translate('YOOBICTASK'), [overlays.translate('YOOBICOK')], overlays.translate('MANDATORYPHOTO'));
       finished.value = null;
       finished.date = null;
     }
@@ -112,11 +113,11 @@ const YooFormTodoSingleComponent = class {
     }
   }
   onCommentFocused(focused) {
-    if (index$1.isNativeMobile() && index$1.isIOS() && focused && this.parentScroll && this.textareaContainer) {
+    if (overlays.isNativeMobile() && overlays.isIOS() && focused && this.parentScroll && this.textareaContainer) {
       this.textareaContainer.setAttribute('style', 'margin-bottom: 400px;');
       this.parentScroll.scrollToBottom(100);
     }
-    else if (index$1.isNativeMobile() && index$1.isIOS() && this.textareaContainer && !focused) {
+    else if (overlays.isNativeMobile() && overlays.isIOS() && this.textareaContainer && !focused) {
       this.textareaContainer.setAttribute('style', 'margin-bottom: 0px;');
     }
   }
@@ -136,18 +137,18 @@ const YooFormTodoSingleComponent = class {
       return index.h("yoo-form-checkbox", { value: todo.finished.value, onClick: () => this.onIconClick(todo, index$1, todo.finished.value) });
     }
   }
-  renderContentLeft(todo, index$2) {
+  renderContentLeft(todo, index$1) {
     var _a, _b, _c, _d;
     if (this.isReadonly(todo)) {
       return [
         index.h("yoo-icon", { name: ((_a = todo.finished) === null || _a === void 0 ? void 0 : _a.value) ? 'check' : ((_b = todo.finished) === null || _b === void 0 ? void 0 : _b.value) === false ? 'cross' : 'lock', color: ((_c = todo.finished) === null || _c === void 0 ? void 0 : _c.value) ? 'app-color' : ((_d = todo.finished) === null || _d === void 0 ? void 0 : _d.value) === false ? 'danger' : 'stable-alt' }),
-        todo.text && todo.text.value ? (todo.finished && !index$1.isNullOrUndefined(todo.finished.value) ? (index.h("span", { class: "text break-line " }, index$1.translateMulti(todo.text.value))) : (
+        todo.text && todo.text.value ? (todo.finished && !overlays.isNullOrUndefined(todo.finished.value) ? (index.h("span", { class: "text break-line " }, overlays.translateMulti(todo.text.value))) : (
         //+ (todo.finished.value === true ? 'app-color' : 'danger')
-        index.h("span", { class: "text" }, index$1.translateMulti(todo.text.value))) // {this.type === 'mission' ? translate('INCOMPLETE') : null}
+        index.h("span", { class: "text" }, overlays.translateMulti(todo.text.value))) // {this.type === 'mission' ? translate('INCOMPLETE') : null}
         ) : null
       ];
     }
-    return [this.renderIconCheck(todo, index$2), todo.text && todo.text.value ? index.h("span", { class: "text" }, index$1.translateMulti(todo.text.value)) : null];
+    return [this.renderIconCheck(todo, index$1), todo.text && todo.text.value ? index.h("span", { class: "text" }, overlays.translateMulti(todo.text.value)) : null];
   }
   renderLinkedField(todo) {
     var _a;
@@ -155,20 +156,20 @@ const YooFormTodoSingleComponent = class {
       const field = lodash.cloneDeep(todo.field);
       field.title = field.description || field.title;
       delete field.condition;
-      return (index.h("div", { class: "menu" }, index.h("li", { class: "menu-item" }, index.h("div", { class: "menu-left" }, index.h("yoo-tag", { icon: "link", size: "medium", color: "app-color" }), index.h("div", { class: "border" })), index.h("div", { class: "menu-right" }, index.h("div", { class: "menu-title" }, index$1.translate('LINKEDTO')), index.h("div", { class: "menu-content menu-requestor" }, index.h("yoo-form-dynamic", { class: "inline transparent", slides: [{ title: 'YOOBICGENERAL', items: [field] }], data: { [field.name]: { value: todo.fieldValue, ...todo.fieldExtra } }, forceReadonly: true, onFormValidityChanged: (ev) => ev.stopPropagation(), suffix: ".value", animated: false, showRecap: false }))))));
+      return (index.h("div", { class: "menu" }, index.h("li", { class: "menu-item" }, index.h("div", { class: "menu-left" }, index.h("yoo-tag", { icon: "link", size: "medium", color: "app-color" }), index.h("div", { class: "border" })), index.h("div", { class: "menu-right" }, index.h("div", { class: "menu-title" }, overlays.translate('LINKEDTO')), index.h("div", { class: "menu-content menu-requestor" }, index.h("yoo-form-dynamic", { class: "inline transparent", slides: [{ title: 'YOOBICGENERAL', items: [field] }], data: { [field.name]: { value: todo.fieldValue, ...todo.fieldExtra } }, forceReadonly: true, onFormValidityChanged: (ev) => ev.stopPropagation(), suffix: ".value", animated: false, showRecap: false }))))));
     }
   }
   render() {
     var _a, _b;
     // When a parent is already displaying the due date of the Action Plan into the DOM, and that all tasks have the same due date, do not display it for each of them
-    const cleanDueDate = this.readonly && this.dueDateToClean && ((_a = this.valuesState) === null || _a === void 0 ? void 0 : _a.every((todo) => { var _a; return index$1.isDateSame((_a = todo.duedate) === null || _a === void 0 ? void 0 : _a.value, this.dueDateToClean, 'minute'); }));
+    const cleanDueDate = this.readonly && this.dueDateToClean && ((_a = this.valuesState) === 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.dueDateToClean, 'minute'); }));
     const slidesTodoTask = operationHelpers.cleanupTodoTaskSlides(this.slidesTodoTask, cleanDueDate);
     const total = ((_b = this.valuesState) === null || _b === void 0 ? void 0 : _b.length) || 0;
-    return (index.h("div", { class: "outer-container" }, index.h("div", { class: "title" }, index.h("yoo-badge", { class: "count", color: "dark", text: total.toString() }), index$1.translate('YOOBICACTIONS', { smart_count: total })), this.valuesState
-      ? this.valuesState.map((todo, index$2) => {
+    return (index.h("div", { class: "outer-container" }, index.h("div", { class: "title" }, index.h("yoo-badge", { class: "count", color: "dark", text: total.toString() }), overlays.translate('YOOBICACTIONS', { smart_count: total })), this.valuesState
+      ? this.valuesState.map((todo, index$1) => {
         var _a, _b, _c, _d, _e, _f;
-        const dueDateCustomColor = index$1.isDateAfter((_a = todo.duedate) === null || _a === void 0 ? void 0 : _a.value, new Date(), 'day') ? index$1.getCssColor('text-color') : index$1.getCssColor('danger');
-        return (index.h("div", { class: "todo-container" }, index.h("div", { class: "previous" }, this.renderLinkedField(todo)), index.h("div", { class: "content" }, index.h("div", { class: "content-left" }, this.renderContentLeft(todo, index$2))), ((_b = todo.description) === null || _b === void 0 ? void 0 : _b.value) && index.h("div", { class: "description", innerHTML: todo.description.value }), !this.readonly && ((_c = todo === null || todo === void 0 ? void 0 : todo.duedate) === null || _c === void 0 ? void 0 : _c.value) && (index.h("div", { class: "date" }, index.h("yoo-tag", { color: "stable", customColor: dueDateCustomColor }, index.h("yoo-icon", { class: { custom: !!dueDateCustomColor }, size: "small", name: "calendar", slot: "start" }), index$1.translate('YOOBICDUEAT', { date: index$1.fromNow(todo.duedate.value), time: index$1.dateFormat(todo.duedate.value, 'HH:mm') })))), ((_d = todo.user) === null || _d === void 0 ? void 0 : _d.value) && index.h("span", { class: "user" }, index.h("yoo-avatar", { user: todo.user.value, size: "small" }), index.h("span", null, index$1.getUserDisplayName(todo.user.value))), ((_e = todo.comments) === null || _e === void 0 ? void 0 : _e.value) && index.h("div", { class: "comments", innerHTML: todo.comments.value }), ((_f = todo.hasphoto) === null || _f === void 0 ? void 0 : _f.value) && (!this.isReadonly(todo) || todo.imageData) && (index.h("div", { class: { 'photo-container': true, readonly: this.isReadonly(todo) } }, index.h("yoo-form-capture", { value: todo.imageData, type: "photo", size: "small", required: todo.isphotorequired && todo.isphotorequired.value, allowLibrary: todo.allowLibrary && todo.allowLibrary.value, readonly: this.isReadonly(todo), onInputChanged: (ev) => this.onImageChanged(ev, index$2) }))), !this.isReadonly(todo) && (index.h("div", { class: "comment-container" }, index.h("span", { onClick: () => this.onToggleComments(todo, index$2) }, index.h("yoo-icon", { name: "comment", color: "stable-alt" })))), (!this.isReadonly(todo) || this.valuesState[index$2].userComments) && (index.h("div", { ref: (el) => (this.textareaContainer = el), class: "textarea-container" }, this.renderComments(index$2))), this.isReadonly(todo) && (slidesTodoTask === null || slidesTodoTask === void 0 ? void 0 : slidesTodoTask.length) > 0 && (index.h("yoo-form-dynamic", { class: "margin-left transparent no-last-border inline inline-row-narrow", scrollable: false, slides: slidesTodoTask, data: todo, suffix: ".value", showRecap: false, showTabs: false, forceReadonly: true }))));
+        const dueDateCustomColor = overlays.isDateAfter((_a = todo.duedate) === null || _a === void 0 ? void 0 : _a.value, new Date(), 'day') ? overlays.getCssColor('text-color') : overlays.getCssColor('danger');
+        return (index.h("div", { class: "todo-container" }, index.h("div", { class: "previous" }, this.renderLinkedField(todo)), index.h("div", { class: "content" }, index.h("div", { class: "content-left" }, this.renderContentLeft(todo, index$1))), ((_b = todo.description) === null || _b === void 0 ? void 0 : _b.value) && index.h("div", { class: "description", innerHTML: todo.description.value }), !this.readonly && ((_c = todo === null || todo === void 0 ? void 0 : todo.duedate) === null || _c === void 0 ? void 0 : _c.value) && (index.h("div", { class: "date" }, index.h("yoo-tag", { color: "stable", customColor: dueDateCustomColor }, index.h("yoo-icon", { class: { custom: !!dueDateCustomColor }, size: "small", name: "calendar", slot: "start" }), overlays.translate('YOOBICDUEAT', { date: overlays.fromNow(todo.duedate.value), time: overlays.dateFormat(todo.duedate.value, 'HH:mm') })))), ((_d = todo.user) === null || _d === void 0 ? void 0 : _d.value) && index.h("span", { class: "user" }, index.h("yoo-avatar", { user: todo.user.value, size: "small" }), index.h("span", null, overlays.getUserDisplayName(todo.user.value))), ((_e = todo.comments) === null || _e === void 0 ? void 0 : _e.value) && index.h("div", { class: "comments", innerHTML: todo.comments.value }), ((_f = todo.hasphoto) === null || _f === void 0 ? void 0 : _f.value) && (!this.isReadonly(todo) || todo.imageData) && (index.h("div", { class: { 'photo-container': true, readonly: this.isReadonly(todo) } }, index.h("yoo-form-capture", { value: todo.imageData, type: "photo", size: "small", required: todo.isphotorequired && todo.isphotorequired.value, allowLibrary: todo.allowLibrary && todo.allowLibrary.value, readonly: this.isReadonly(todo), onInputChanged: (ev) => this.onImageChanged(ev, index$1) }))), !this.isReadonly(todo) && (index.h("div", { class: "comment-container" }, index.h("span", { onClick: () => this.onToggleComments(todo, index$1) }, index.h("yoo-icon", { name: "comment", color: "stable-alt" })))), (!this.isReadonly(todo) || this.valuesState[index$1].userComments) && (index.h("div", { ref: (el) => (this.textareaContainer = el), class: "textarea-container" }, this.renderComments(index$1))), this.isReadonly(todo) && (slidesTodoTask === null || slidesTodoTask === void 0 ? void 0 : slidesTodoTask.length) > 0 && (index.h("yoo-form-dynamic", { class: "margin-left transparent no-last-border inline inline-row-narrow", scrollable: false, slides: slidesTodoTask, data: todo, suffix: ".value", showRecap: false, showTabs: false, forceReadonly: true }))));
       })
       : null));
   }