@yoobic/yobi 8.5.0-60 → 8.5.0-61

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

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9ca0e46c.js');
-const index$1 = require('./index-a1bbe627.js');
-require('./index-9aadeb94.js');
-const formInputHelpers = require('./form-input-helpers-2d988e31.js');
-const overlays = require('./overlays-e5d2ff76.js');
+const index$1 = require('./index-9ca0e46c.js');
+const index$2 = require('./index-a1bbe627.js');
+require('./index-6f92bccb.js');
+const formInputHelpers = require('./form-input-helpers-4ad38e19.js');
+const index = require('./index-0cfb67d1.js');
 require('./lodash-a9050d79.js');
-require('./common-helpers-9f63a319.js');
+require('./common-helpers-44428bf7.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 /**
@@ -20,10 +20,10 @@ function closingDays(openingHours) {
   const days = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
   const result = [];
   if (openingHours) {
-    days.forEach((day, index) => {
+    days.forEach((day, index$1) => {
       const value = openingHours[day];
-      if (!overlays.isPresent(value) || value.isOpen === false) {
-        result.push(index);
+      if (!index.isPresent(value) || value.isOpen === false) {
+        result.push(index$1);
       }
     });
   }
@@ -34,11 +34,11 @@ const formTimeslotsCss = "svg:not(:root){overflow:hidden}:host .title{display:-m
 
 const YooFormTimeslotsComponent = class {
   constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.validityChanged = index.createEvent(this, "validityChanged", 7);
-    this.inputBlurred = index.createEvent(this, "inputBlurred", 7);
-    this.inputFocused = index.createEvent(this, "inputFocused", 7);
-    this.inputChanged = index.createEvent(this, "inputChanged", 7);
+    index$1.registerInstance(this, hostRef);
+    this.validityChanged = index$1.createEvent(this, "validityChanged", 7);
+    this.inputBlurred = index$1.createEvent(this, "inputBlurred", 7);
+    this.inputFocused = index$1.createEvent(this, "inputFocused", 7);
+    this.inputChanged = index$1.createEvent(this, "inputChanged", 7);
     this.waitlistOptions = { locationId: null, use24HourTime: false, openingHours: null, firstAvailableSlot: null, slots: [] };
     this.validators = [];
     this.calendarDisplayMode = 'week';
@@ -64,13 +64,13 @@ const YooFormTimeslotsComponent = class {
   }
   getAvailableSlots(ev) {
     ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
-    const fromDate = overlays.startOf(this.selectedDate, 'd');
-    const toDate = overlays.dateFormat(overlays.endOf(fromDate, 'd'), index$1.WaitlistAPIDateFormat);
-    const minDate = this.waitlistOptions.firstAvailableSlot ? overlays.dateParse(this.waitlistOptions.firstAvailableSlot.date, index$1.WaitlistAPIDateFormat) : new Date();
-    const params = { locationId: this.waitlistOptions.locationId, fromDate: overlays.dateFormat(fromDate > minDate ? fromDate : minDate, index$1.WaitlistAPIDateFormat), toDate };
+    const fromDate = index.startOf(this.selectedDate, 'd');
+    const toDate = index.dateFormat(index.endOf(fromDate, 'd'), index$2.WaitlistAPIDateFormat);
+    const minDate = this.waitlistOptions.firstAvailableSlot ? index.dateParse(this.waitlistOptions.firstAvailableSlot.date, index$2.WaitlistAPIDateFormat) : new Date();
+    const params = { locationId: this.waitlistOptions.locationId, fromDate: index.dateFormat(fromDate > minDate ? fromDate : minDate, index$2.WaitlistAPIDateFormat), toDate };
     this.isLoadingState = true;
     this.isErrorState = false;
-    overlays.getAsyncExtraData({ type: 'waitlist-timeslots', params })
+    index.getAsyncExtraData({ type: 'waitlist-timeslots', params })
       .then((slots) => {
       const noAvailableSlot = !(slots === null || slots === void 0 ? void 0 : slots.length) || slots.every((slot) => !slot.numAvailableSpots);
       this.waitlistOptions.slots = slots || [];
@@ -94,7 +94,7 @@ const YooFormTimeslotsComponent = class {
   }
   onSwitchCalendarDisplayMode(ev) {
     ev.stopPropagation();
-    if (overlays.isWeb(this.host)) {
+    if (index.isWeb(this.host)) {
       if (!this.calendarModalElmt) {
         const dateChangedListener = (ev) => {
           ev.stopPropagation();
@@ -102,7 +102,7 @@ const YooFormTimeslotsComponent = class {
         };
         const dayClickedListener = (ev) => {
           ev.stopPropagation();
-          overlays.closeModal(null);
+          index.closeModal(null);
         };
         this.calendarModalElmt = document.createElement('yoo-calendar');
         this.calendarModalElmt.size = 'small';
@@ -111,14 +111,14 @@ const YooFormTimeslotsComponent = class {
         this.calendarModalElmt.closingDays = closingDays(this.waitlistOptions.openingHours);
         this.calendarModalElmt.addEventListener('dateChanged', dateChangedListener);
         this.calendarModalElmt.addEventListener('dayClicked', dayClickedListener);
-        overlays.showModal(this.calendarModalElmt, { width: '448', height: 'small' }, 'calendar').then(() => {
+        index.showModal(this.calendarModalElmt, { width: '448', height: 'small' }, 'calendar').then(() => {
           this.calendarModalElmt.removeEventListener('dayClicked', dateChangedListener);
           this.calendarModalElmt.removeEventListener('dayClicked', dayClickedListener);
           this.calendarModalElmt = null;
         });
       }
       else {
-        overlays.closeModal(null);
+        index.closeModal(null);
       }
     }
     else {
@@ -132,7 +132,7 @@ const YooFormTimeslotsComponent = class {
       this.selectedDate = ev.detail.date;
       // avoid to erase any pre-selected slot during the loading of the component,
       //  when the calendar is set to the initial selected date
-      const day = overlays.dateFormat(this.selectedDate, 'YYYY-MM-DD');
+      const day = index.dateFormat(this.selectedDate, 'YYYY-MM-DD');
       if (this.value && this.value.indexOf(day) < 0) {
         this.value = null;
       }
@@ -146,32 +146,32 @@ const YooFormTimeslotsComponent = class {
   }
   renderCalendar() {
     var _a;
-    const minDate = this.waitlistOptions.firstAvailableSlot ? overlays.dateParse(this.waitlistOptions.firstAvailableSlot.date, index$1.WaitlistAPIDateFormat) : new Date();
-    const activeDay = ((_a = this.waitlistOptions.slots) === null || _a === void 0 ? void 0 : _a.length) ? overlays.dateParse(this.waitlistOptions.slots[0].date, index$1.WaitlistAPIDateFormat) : minDate;
+    const minDate = this.waitlistOptions.firstAvailableSlot ? index.dateParse(this.waitlistOptions.firstAvailableSlot.date, index$2.WaitlistAPIDateFormat) : new Date();
+    const activeDay = ((_a = this.waitlistOptions.slots) === null || _a === void 0 ? void 0 : _a.length) ? index.dateParse(this.waitlistOptions.slots[0].date, index$2.WaitlistAPIDateFormat) : minDate;
     const iconName = this.isWeekDisplay() ? 'calendar' : 'grid-view';
-    return (index.h("div", { class: "calendar-container" }, index.h("div", { class: "title-container" }, index.h("div", { class: "title" }, index.h("yoo-icon", { name: "calendar", size: "small" }), overlays.translate('BOOKINGSELECTDATEANDSLOT')), index.h("yoo-button", { shape: "circular", size: "medium", fill: "transparent", color: "stable", onClick: (ev) => this.onSwitchCalendarDisplayMode(ev) }, index.h("yoo-icon", { name: iconName, size: overlays.isWeb(this.host) ? 'small' : 'medium', color: overlays.isWeb(this.host) ? 'app-color' : 'stable' }))), index.h("yoo-calendar", { ref: (el) => (this.calendarElmt = el), displayMode: this.calendarDisplayMode, isDatePicker: true, modernDatePicker: true, minDate: minDate, activeDay: activeDay, onDateChanged: (ev) => this.onDateSelected(ev), closingDays: closingDays(this.waitlistOptions.openingHours) })));
+    return (index$1.h("div", { class: "calendar-container" }, index$1.h("div", { class: "title-container" }, index$1.h("div", { class: "title" }, index$1.h("yoo-icon", { name: "calendar", size: "small" }), index.translate('BOOKINGSELECTDATEANDSLOT')), index$1.h("yoo-button", { shape: "circular", size: "medium", fill: "transparent", color: "stable", onClick: (ev) => this.onSwitchCalendarDisplayMode(ev) }, index$1.h("yoo-icon", { name: iconName, size: index.isWeb(this.host) ? 'small' : 'medium', color: index.isWeb(this.host) ? 'app-color' : 'stable' }))), index$1.h("yoo-calendar", { ref: (el) => (this.calendarElmt = el), displayMode: this.calendarDisplayMode, isDatePicker: true, modernDatePicker: true, minDate: minDate, activeDay: activeDay, onDateChanged: (ev) => this.onDateSelected(ev), closingDays: closingDays(this.waitlistOptions.openingHours) })));
   }
   renderSlots() {
     var _a;
     const isLoadingOrErrorState = this.isLoadingState || this.isErrorState;
     const noAvailableSlot = !isLoadingOrErrorState && (!((_a = this.waitlistOptions.slots) === null || _a === void 0 ? void 0 : _a.length) || this.waitlistOptions.slots.every((slot) => !slot.numAvailableSpots));
-    return (index.h("div", { class: "slots-container" }, index.h("div", { class: "title" }, index.h("yoo-icon", { name: "recent", size: "small" }), overlays.translate(noAvailableSlot ? 'BOOKINGNOAVAILABLESLOT' : 'BOOKINGSELECTSLOT')), this.isLoadingState && index.h("yoo-loader", { size: "large" }), this.isErrorState && (index.h("yoo-button", { color: "light", size: "large", rippleType: "unbounded", onClick: (ev) => this.getAvailableSlots(ev) }, overlays.translate('RETRY'))), !isLoadingOrErrorState &&
+    return (index$1.h("div", { class: "slots-container" }, index$1.h("div", { class: "title" }, index$1.h("yoo-icon", { name: "recent", size: "small" }), index.translate(noAvailableSlot ? 'BOOKINGNOAVAILABLESLOT' : 'BOOKINGSELECTSLOT')), this.isLoadingState && index$1.h("yoo-loader", { size: "large" }), this.isErrorState && (index$1.h("yoo-button", { color: "light", size: "large", rippleType: "unbounded", onClick: (ev) => this.getAvailableSlots(ev) }, index.translate('RETRY'))), !isLoadingOrErrorState &&
       !noAvailableSlot &&
-      index.h("div", { class: { ['time-slots-container']: true, 'web': overlays.isWeb(this.host) } }, this.waitlistOptions.slots.map((slot) => {
+      index$1.h("div", { class: { ['time-slots-container']: true, 'web': index.isWeb(this.host) } }, this.waitlistOptions.slots.map((slot) => {
         const buttonColor = this.value === slot.date ? 'app-color' : 'light';
         const hourFormat = this.waitlistOptions.use24HourTime ? 'HH:mm' : 'hh:mm a';
-        return (index.h("yoo-button", { color: buttonColor, size: overlays.isWeb(this.host) ? 'medium' : 'large', rippleType: "unbounded", disabled: !slot.numAvailableSpots, onClick: (ev) => this.onSlotSelected(ev, slot) }, overlays.dateFormat(overlays.dateParse(slot.date, index$1.WaitlistAPIDateFormat), hourFormat)));
-      })), !isLoadingOrErrorState && noAvailableSlot && index.h("yoo-empty-state", { type: "visit" })));
+        return (index$1.h("yoo-button", { color: buttonColor, size: index.isWeb(this.host) ? 'medium' : 'large', rippleType: "unbounded", disabled: !slot.numAvailableSpots, onClick: (ev) => this.onSlotSelected(ev, slot) }, index.dateFormat(index.dateParse(slot.date, index$2.WaitlistAPIDateFormat), hourFormat)));
+      })), !isLoadingOrErrorState && noAvailableSlot && index$1.h("yoo-empty-state", { type: "visit" })));
   }
   renderReadonly() {
     if (this.value) {
-      return (index.h("yoo-form-input-container", { field: { title: overlays.translate('YOOBICDATETIME') }, required: true }, index.h("yoo-form-input", { readonly: true, value: overlays.dateFormat(overlays.dateParse(this.value, index$1.WaitlistAPIDateFormat), 'L LT') })));
+      return (index$1.h("yoo-form-input-container", { field: { title: index.translate('YOOBICDATETIME') }, required: true }, index$1.h("yoo-form-input", { readonly: true, value: index.dateFormat(index.dateParse(this.value, index$2.WaitlistAPIDateFormat), 'L LT') })));
     }
   }
   render() {
     return this.readonly ? this.renderReadonly() : [this.renderCalendar(), this.renderSlots()];
   }
-  get host() { return index.getElement(this); }
+  get host() { return index$1.getElement(this); }
   static get watchers() { return {
     "required": ["onRequireChanged"]
   }; }

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

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
-require('./index-9aadeb94.js');
+require('./index-6f92bccb.js');
 const lodash = require('./lodash-a9050d79.js');
-const commonHelpers = require('./common-helpers-9f63a319.js');
-const overlays = require('./overlays-e5d2ff76.js');
+const commonHelpers = require('./common-helpers-44428bf7.js');
+const index$1 = require('./index-0cfb67d1.js');
 require('./index-a1bbe627.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
@@ -35,15 +35,15 @@ const YooFormTodoDialogComponent = class {
   }
   componentWillLoad() {
     this.todo = this.todo || {};
-    if (overlays.isNativeMobile()) {
-      this.isKeyboardResizeModeInactive = overlays.isKeyboardResizeModeInactive();
-      overlays.enableKeyboardResize();
+    if (index$1.isNativeMobile()) {
+      this.isKeyboardResizeModeInactive = index$1.isKeyboardResizeModeInactive();
+      index$1.enableKeyboardResize();
     }
   }
   disconnectedCallback() {
-    if (overlays.isNativeMobile()) {
+    if (index$1.isNativeMobile()) {
       if (this.isKeyboardResizeModeInactive) {
-        overlays.disableKeyboardResize();
+        index$1.disableKeyboardResize();
       }
     }
   }
@@ -54,11 +54,11 @@ const YooFormTodoDialogComponent = class {
     return this.validity && this.todo.values && this.todo.values.length > 0;
   }
   onCancel() {
-    overlays.closeModal(null);
+    index$1.closeModal(null);
   }
   onSave() {
     if (this.isValid()) {
-      overlays.closeModal(this.todo);
+      index$1.closeModal(this.todo);
     }
   }
   onAddTask(preventBlur) {
@@ -68,7 +68,7 @@ const YooFormTodoDialogComponent = class {
     if (this.currentTask) {
       this.todo.values = this.todo.values || [];
       this.todo.values.push({
-        _id: overlays.getUUID(),
+        _id: index$1.getUUID(),
         text: { value: this.currentTask },
         finished: { value: null },
         isphotorequired: { value: this.allPhotosRequired === true },
@@ -87,8 +87,8 @@ const YooFormTodoDialogComponent = class {
     form.showRecap = false;
     form.data = task;
     form.suffix = '.value';
-    form.title = overlays.translate('YOOBICEDIT');
-    overlays.showModal(form).then((ret) => {
+    form.title = index$1.translate('YOOBICEDIT');
+    index$1.showModal(form).then((ret) => {
       if (ret && ret.data) {
         task = ret.data;
         index.forceUpdate(this);
@@ -97,7 +97,7 @@ const YooFormTodoDialogComponent = class {
     });
   }
   onRemoveTask(task) {
-    overlays.showAlert(overlays.translate('DELETE'), [overlays.translate('CANCEL'), overlays.translate('YOOBICOK')], overlays.translate('DELETEACTIONCONFIRM')).then((ret) => {
+    index$1.showAlert(index$1.translate('DELETE'), [index$1.translate('CANCEL'), index$1.translate('YOOBICOK')], index$1.translate('DELETEACTIONCONFIRM')).then((ret) => {
       if (ret === true) {
         lodash.remove(this.todo.values, (t) => t === task);
         index.forceUpdate(this);
@@ -108,12 +108,12 @@ const YooFormTodoDialogComponent = class {
     return [
       {
         actionType: 'edit',
-        text: overlays.translate('YOOBICEDIT'),
+        text: index$1.translate('YOOBICEDIT'),
         handler: () => this.onEditTask(task)
       },
       {
         actionType: 'delete',
-        text: overlays.translate('DELETE'),
+        text: index$1.translate('DELETE'),
         cssClass: 'danger',
         handler: () => this.onRemoveTask(task)
       }
@@ -144,25 +144,25 @@ const YooFormTodoDialogComponent = class {
     if (((_b = (_a = this.todo) === null || _a === void 0 ? void 0 : _a.field) === null || _b === void 0 ? void 0 : _b.name) && ((_c = this.todo) === null || _c === void 0 ? void 0 : _c.fieldValue)) {
       const field = lodash.cloneDeep(this.todo.field);
       field.title = this.todo.field.description || this.todo.field.title;
-      return (index.h("div", { class: "menu" }, index.h("li", { class: "menu-item" }, index.h("div", { class: "menu-left" }, index.h("span", { class: "menu-icon" }, index.h("yoo-icon", { name: "link" })), 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: this.todo.fieldValue, ...this.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("span", { class: "menu-icon" }, index.h("yoo-icon", { name: "link" })), 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: this.todo.fieldValue, ...this.todo.fieldExtra } }, forceReadonly: true, onFormValidityChanged: (ev) => ev.stopPropagation(), suffix: ".value", animated: false, showRecap: false }))))));
     }
   }
   renderTasks() {
     var _a;
-    return (index.h("div", { slot: "end" }, index.h("div", { class: "tasks" }, index.h("div", { class: "field-placeholder" }, index.h("yoo-form-input-container", { field: { title: overlays.translate('YOOBICACTIONS') }, hideOptional: true }, index.h("div", { class: "input-container" }, index.h("yoo-form-input", { ref: (el) => (this.formInputTaskEditEl = el), class: "task-edit", onInputChanged: (event) => this.onInputChanged(event), onValidityChanged: (ev) => ev.stopPropagation(), onEnterPressed: () => this.onEnterPressed(), size: overlays.isWeb(this.host) ? 'medium' : 'large' }), index.h("div", { class: "icon" }, index.h("yoo-icon", { name: "plus", color: "app-color", onClick: () => this.onAddTask() }))))), !!((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) && (index.h("div", { class: "field-placeholder" }, index.h("yoo-form-input-container", { field: { title: overlays.translate('ADDPREDEFINEDTASKS') }, hideOptional: true }, index.h("yoo-form-autocomplete", { ref: (el) => (this.autocompleteEl = el), class: "predefined", displayType: "card-list", values: this.values.map((v) => ({ _id: v, title: v })), multiple: true, onValidityChanged: (ev) => ev.stopPropagation(), onInputChanged: (ev) => this.onSelect(ev), size: overlays.isWeb(this.host) ? 'medium' : 'large' }))))), index.h("div", { class: "tasks-container" }, index.h("div", { class: "title" }, overlays.translate('LISTOFACTIONS')), this.todo &&
+    return (index.h("div", { slot: "end" }, index.h("div", { class: "tasks" }, index.h("div", { class: "field-placeholder" }, index.h("yoo-form-input-container", { field: { title: index$1.translate('YOOBICACTIONS') }, hideOptional: true }, index.h("div", { class: "input-container" }, index.h("yoo-form-input", { ref: (el) => (this.formInputTaskEditEl = el), class: "task-edit", onInputChanged: (event) => this.onInputChanged(event), onValidityChanged: (ev) => ev.stopPropagation(), onEnterPressed: () => this.onEnterPressed(), size: index$1.isWeb(this.host) ? 'medium' : 'large' }), index.h("div", { class: "icon" }, index.h("yoo-icon", { name: "plus", color: "app-color", onClick: () => this.onAddTask() }))))), !!((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) && (index.h("div", { class: "field-placeholder" }, index.h("yoo-form-input-container", { field: { title: index$1.translate('ADDPREDEFINEDTASKS') }, hideOptional: true }, index.h("yoo-form-autocomplete", { ref: (el) => (this.autocompleteEl = el), class: "predefined", displayType: "card-list", values: this.values.map((v) => ({ _id: v, title: v })), multiple: true, onValidityChanged: (ev) => ev.stopPropagation(), onInputChanged: (ev) => this.onSelect(ev), size: index$1.isWeb(this.host) ? 'medium' : 'large' }))))), index.h("div", { class: "tasks-container" }, index.h("div", { class: "title" }, index$1.translate('LISTOFACTIONS')), this.todo &&
       this.todo.values &&
       this.todo.values.map((todoValue) => [
-        index.h("div", { class: "task" }, index.h("div", { class: "task-part" }, index.h("span", { class: "text" }, overlays.translateMulti(todoValue.text.value))), index.h("div", { class: "task-part" }, todoValue.duedate && todoValue.duedate.value && index.h("span", { class: "date" }, overlays.pipes.dateFormat.transform(todoValue.duedate.value, 'L')), overlays.isWeb(this.host) ?
+        index.h("div", { class: "task" }, index.h("div", { class: "task-part" }, index.h("span", { class: "text" }, index$1.translateMulti(todoValue.text.value))), index.h("div", { class: "task-part" }, todoValue.duedate && todoValue.duedate.value && index.h("span", { class: "date" }, index$1.pipes.dateFormat.transform(todoValue.duedate.value, 'L')), index$1.isWeb(this.host) ?
           index.h("yoo-context-menu", { contentButtons: this.getContextMenuActions(todoValue) }, index.h("yoo-icon", { name: "more" })) :
-          index.h("yoo-button", { fill: "transparent", color: "dark", shape: "circular", onClick: (ev) => overlays.showActionSheet(this.getContextMenuActions(todoValue), '', {}, ev.composedPath()[0], ev) }, index.h("yoo-icon", { name: "more" })))),
+          index.h("yoo-button", { fill: "transparent", color: "dark", shape: "circular", onClick: (ev) => index$1.showActionSheet(this.getContextMenuActions(todoValue), '', {}, ev.composedPath()[0], ev) }, index.h("yoo-icon", { name: "more" })))),
         index.h("div", { class: "border" })
       ]))));
   }
   render() {
-    return (index.h(index.Host, { class: { ...commonHelpers.getAppContext(this.host) } }, index.h("yoo-header", null, index.h("yoo-navbar", null, index.h("yoo-items", { slot: "start" }, index.h("yoo-button", { color: "text-color", fill: "transparent", shape: "circular", rippleType: "unbounded", onClick: () => this.onCancel() }, index.h("yoo-icon", { name: "close" }))), index.h("yoo-truncate", null, overlays.translate('YOOBICTODO')), !overlays.isWeb(this.host) && index.h("yoo-items", { slot: "end" }, this.renderSaveButton()))), index.h("yoo-ion-content", { scrollEnabled: false, class: { 'bg-light': true, web: overlays.isWeb(this.host) } }, index.h("yoo-form-dynamic", { ref: (el) => (this.formDynamicEl = el), slides: this.slidesTodo, data: this.todo, showRecap: false, showTabs: false, isKeyboardStateLocked: true, onDataChanged: (ev) => this.onDataChanged(ev), onFormValidityChanged: (ev) => this.onValidityChanged(ev), onFieldFetchData: (ev) => this.onInternalFieldFetchData(ev) }, index.h("div", { slot: "start" }, this.todo && this.todo.field && overlays.isPresent(this.todo.fieldValue) && this.renderLinkedField()), index.h("div", { slot: "end" }, this.renderTasks()), overlays.isWeb(this.host) && index.h("div", { slot: "footer" }, this.renderSaveButton())))));
+    return (index.h(index.Host, { class: { ...commonHelpers.getAppContext(this.host) } }, index.h("yoo-header", null, index.h("yoo-navbar", null, index.h("yoo-items", { slot: "start" }, index.h("yoo-button", { color: "text-color", fill: "transparent", shape: "circular", rippleType: "unbounded", onClick: () => this.onCancel() }, index.h("yoo-icon", { name: "close" }))), index.h("yoo-truncate", null, index$1.translate('YOOBICTODO')), !index$1.isWeb(this.host) && index.h("yoo-items", { slot: "end" }, this.renderSaveButton()))), index.h("yoo-ion-content", { scrollEnabled: false, class: { 'bg-light': true, web: index$1.isWeb(this.host) } }, index.h("yoo-form-dynamic", { ref: (el) => (this.formDynamicEl = el), slides: this.slidesTodo, data: this.todo, showRecap: false, showTabs: false, isKeyboardStateLocked: true, onDataChanged: (ev) => this.onDataChanged(ev), onFormValidityChanged: (ev) => this.onValidityChanged(ev), onFieldFetchData: (ev) => this.onInternalFieldFetchData(ev) }, index.h("div", { slot: "start" }, this.todo && this.todo.field && index$1.isPresent(this.todo.fieldValue) && this.renderLinkedField()), index.h("div", { slot: "end" }, this.renderTasks()), index$1.isWeb(this.host) && index.h("div", { slot: "footer" }, this.renderSaveButton())))));
   }
   renderSaveButton() {
-    return index.h("yoo-button", { color: "app-color", fill: overlays.isWeb(this.host) ? 'solid' : 'transparent', animated: false, disabled: !this.isValid(), onClick: () => this.onSave() }, overlays.translate('YOOBICSAVE'));
+    return index.h("yoo-button", { color: "app-color", fill: index$1.isWeb(this.host) ? 'solid' : 'transparent', animated: false, disabled: !this.isValid(), onClick: () => this.onSave() }, index$1.translate('YOOBICSAVE'));
   }
   get host() { return index.getElement(this); }
 };

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

@@ -4,10 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
 const index$1 = require('./index-a1bbe627.js');
-require('./index-9aadeb94.js');
+require('./index-6f92bccb.js');
 const lodash = require('./lodash-a9050d79.js');
-const commonHelpers = require('./common-helpers-9f63a319.js');
-const overlays = require('./overlays-e5d2ff76.js');
+const commonHelpers = require('./common-helpers-44428bf7.js');
+const index$2 = require('./index-0cfb67d1.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,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
-require('./index-9aadeb94.js');
+require('./index-6f92bccb.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-44428bf7.js');
+const index$1 = require('./index-0cfb67d1.js');
 require('./lodash-a9050d79.js');
 require('./index-a1bbe627.js');
 require('./_commonjsHelpers-94df2ea7.js');
@@ -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); }
 };