@yoobic/yobi 8.3.0-7 → 8.3.0

package/dist/collection/components/form/form-table/form-table.js

@@ -382,7 +382,7 @@ export class YooFormTableComponent {
       "mutable": false,
       "complexType": {
         "original": "EntityType",
-        "resolved": "\"aisles\" | \"community\" | \"courses\" | \"dashboards\" | \"operations\" | \"pages\" | \"questions\" | \"scoring\" | \"tableau\" | \"tag\" | \"user\" | \"weekdays\" | \"campaignfilters\" | \"channel\" | \"communities\" | \"custommodels\" | \"geofilters\" | \"hierarchy\" | \"incentives\" | \"locationtypes\" | \"plans\" | \"translations\" | \"aclRole\" | \"blog\" | \"emails\" | \"feeds\" | \"files\" | \"groups\" | \"htmltemplates\" | \"lessons\" | \"locations\" | \"memos\" | \"missiondescriptions\" | \"missiondescriptiontemplates\" | \"missions\" | \"productbatch\" | \"products\" | \"tenants\" | \"userranks\" | \"users\" | \"type\" | \"aclPermission\" | \"aclPermissionList\" | \"aislelist\" | \"algorithm\" | \"apps\" | \"arexperience\" | \"armodel\" | \"audiences\" | \"badges\" | \"broadcasts\" | \"calendarEvents\" | \"campaigntypes\" | \"catalogs\" | \"certificates\" | \"channels\" | \"charttype\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"days\" | \"entitycomments\" | \"environnement\" | \"feedsComments\" | \"filesFolders\" | \"folders\" | \"formfield\" | \"giphy\" | \"googlemaps\" | \"hashtags\" | \"icons\" | \"language\" | \"lessondescriptions\" | \"liveshoppings\" | \"locationsaudience\" | \"locationspublic\" | \"markas\" | \"mediacapturedevices\" | \"memolist\" | \"missiondatas\" | \"missiondescriptioncategories\" | \"missiondescriptionreviewhistories\" | \"missionfield\" | \"notes\" | \"notifications\" | \"photos\" | \"productbatchlist\" | \"productweightpair\" | \"publicAPITokens\" | \"questionsAnswers\" | \"regex\" | \"reporttemplates\" | \"reviewapps\" | \"salesdata\" | \"scorms\" | \"scormcloud\" | \"slots\" | \"tableauShared\" | \"tagGroups\" | \"topusers\" | \"unsplash\" | \"useraudience\" | \"userlearningmanager\" | \"usercourseinfo\" | \"violetproducts\" | \"violetproductofferskus\" | \"violetbasketitems\" | \"violetshippingmethods\" | \"version\" | \"videocallusers\" | \"visits\" | \"waitlistvisit\" | \"waitlistcustomer\" | \"waitliststats\" | \"plansorlessons\" | \"widgets\"",
+        "resolved": "\"aisles\" | \"community\" | \"courses\" | \"dashboards\" | \"operations\" | \"pages\" | \"questions\" | \"scoring\" | \"tableau\" | \"tag\" | \"user\" | \"weekdays\" | \"campaignfilters\" | \"channel\" | \"communities\" | \"custommodels\" | \"geofilters\" | \"hierarchy\" | \"incentives\" | \"locationtypes\" | \"plans\" | \"translations\" | \"aclRole\" | \"blog\" | \"emails\" | \"feeds\" | \"files\" | \"groups\" | \"htmltemplates\" | \"lessons\" | \"locations\" | \"memos\" | \"missiondescriptions\" | \"missiondescriptiontemplates\" | \"missions\" | \"productbatch\" | \"products\" | \"tenants\" | \"userranks\" | \"users\" | \"type\" | \"aclPermission\" | \"aclPermissionList\" | \"aislelist\" | \"algorithm\" | \"apps\" | \"arexperience\" | \"armodel\" | \"audiences\" | \"badges\" | \"broadcasts\" | \"calendarEvents\" | \"creationtypes\" | \"catalogs\" | \"certificates\" | \"channels\" | \"charttype\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"days\" | \"entitycomments\" | \"environnement\" | \"feedsComments\" | \"filesFolders\" | \"folders\" | \"formfield\" | \"giphy\" | \"googlemaps\" | \"hashtags\" | \"icons\" | \"journeys\" | \"language\" | \"lessondescriptions\" | \"liveshoppings\" | \"locationsaudience\" | \"locationspublic\" | \"markas\" | \"mediacapturedevices\" | \"memolist\" | \"missiondatas\" | \"missiondescriptioncategories\" | \"missiondescriptionreviewhistories\" | \"missionfield\" | \"notes\" | \"notifications\" | \"photos\" | \"productbatchlist\" | \"productweightpair\" | \"publicAPITokens\" | \"questionsAnswers\" | \"regex\" | \"reporttemplates\" | \"reviewapps\" | \"salesdata\" | \"scorms\" | \"scormcloud\" | \"slots\" | \"tableauShared\" | \"tagGroups\" | \"topusers\" | \"unsplash\" | \"useraudience\" | \"userlearningmanager\" | \"usercourseinfo\" | \"violetproducts\" | \"violetproductofferskus\" | \"violetbasketitems\" | \"violetshippingmethods\" | \"version\" | \"videocallusers\" | \"visits\" | \"waitlistvisit\" | \"waitlistcustomer\" | \"waitliststats\" | \"plansorlessons\" | \"widgets\"",
         "references": {
           "EntityType": {
             "location": "import",
@@ -456,7 +456,7 @@ export class YooFormTableComponent {
       "mutable": false,
       "complexType": {
         "original": "CardType",
-        "resolved": "\"calendar\" | \"card-calendar\" | \"card-battle\" | \"card-battle-result\" | \"card-campaign\" | \"card-cell\" | \"card-cell-color\" | \"card-cell-image\" | \"card-chat\" | \"card-course\" | \"card-course-info\" | \"card-course-row\" | \"card-course-row-compact\" | \"card-default\" | \"card-feed\" | \"card-feed-row\" | \"card-file\" | \"card-grid\" | \"card-image\" | \"card-inbox\" | \"card-inbox-ongoing\" | \"card-incentive\" | \"card-incentive-rank\" | \"card-kanban\" | \"card-list\" | \"card-list-color\" | \"card-location\" | \"card-map\" | \"card-media\" | \"card-menu\" | \"card-notification\" | \"card-plan\" | \"card-recommendation\" | \"card-sticky\" | \"card-tag\" | \"card-tag-single\" | \"card-template\" | \"kanban\" | \"tree\"",
+        "resolved": "\"calendar\" | \"card-calendar\" | \"card-battle\" | \"card-battle-result\" | \"card-campaign\" | \"card-cell\" | \"card-cell-color\" | \"card-cell-image\" | \"card-chat\" | \"card-course\" | \"card-course-info\" | \"card-course-row\" | \"card-course-row-compact\" | \"card-default\" | \"card-feed\" | \"card-feed-row\" | \"card-file\" | \"card-grid\" | \"card-image\" | \"card-inbox\" | \"card-inbox-ongoing\" | \"card-incentive\" | \"card-incentive-rank\" | \"card-kanban\" | \"card-list\" | \"card-list-color\" | \"card-list-simple\" | \"card-location\" | \"card-map\" | \"card-media\" | \"card-menu\" | \"card-notification\" | \"card-plan\" | \"card-recommendation\" | \"card-sticky\" | \"card-tag\" | \"card-tag-single\" | \"card-template\" | \"kanban\" | \"tree\"",
         "references": {
           "CardType": {
             "location": "import",

package/dist/collection/components/form/form-text-area/form-text-area.css

@@ -410,6 +410,10 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   border: none;
 }
 
+:host([size=small]) {
+  --textarea-placeholder-font-size: var(--font-size-14, 0.875rem);
+}
+
 :host([size=medium]) .outer-container textarea {
   min-height: 0.5rem;
   font-size: var(--font-size-14, 0.875rem);

package/dist/collection/components/form/form-text-area/form-text-area.js

@@ -1,6 +1,7 @@
 import { Keyboard } from '@capacitor/keyboard';
 import { containsUrls, debounce, enableKeyboardResize, findParent, getAsyncExtraData, isFirefox, isIOS, isNativeMobile, isNullOrUndefined, isWeb, replaceAndGetAllLinks, replaceAtTagToMentionTag, safeScrollIntoView, translate, translateMulti } from '@shared/utils';
 import { Component, Element, Event, forceUpdate, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';
+import { isString } from 'lodash-es';
 import { getAppContext, sanitizeHTML } from '../../../utils/helpers/common-helpers';
 import { onInputBlurred, onInputClear, onInputFocused, setValidator, setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
 import { fixParagraphRandomEl, getInsertElementProp, getTagHTML, isMentionTag, restoreCursorPosition, safeInsert, safeInsertElements, safeReplaceElement } from '../../../utils/helpers/form-text-area-helpers';
@@ -210,11 +211,11 @@ export class YooFormTextAreaComponent {
         this.allowLinkUpdate = false;
         setTimeout(() => {
           this.allowLinkUpdate = true;
-          const content = this.inputEl.textContent || '';
+          const content = this.inputEl.innerHTML || '';
           if (!containsUrls(content) && !(ev.inputType === 'deleteContentBackward' || ev.key === 'Backspace')) {
             return;
           }
-          const { links } = replaceAndGetAllLinks(content.replace(/ /g, ' '), ' ');
+          const { links } = replaceAndGetAllLinks(content.replace(/ /g, ' '), ' ') || {};
           if (links === null || links === void 0 ? void 0 : links.length) {
             this.linkPreviews = links.map((link) => {
               var _a;
@@ -235,10 +236,11 @@ export class YooFormTextAreaComponent {
     if (isNativeMobile() && Keyboard) {
       Keyboard.hide();
     }
-    getAsyncExtraData({ type: 'mention', params: { otherIds: this.otherIds } }).then((res) => {
-      if (res && res.data) {
+    getAsyncExtraData({ type: 'mention', params: { otherIds: this.otherIds, mentionConfigs: this.mentionConfigs } }).then((res) => {
+      var _a;
+      if (res === null || res === void 0 ? void 0 : res.data) {
         this.mentionedUsers = res.data;
-        if (this.mentionedUsers && this.mentionedUsers.length > 0) {
+        if (((_a = this.mentionedUsers) === null || _a === void 0 ? void 0 : _a.length) > 0) {
           const newElement = this.mentionedUsers.map((user) => {
             return getTagHTML(user);
           });
@@ -275,7 +277,7 @@ export class YooFormTextAreaComponent {
   }
   setLocalValue() {
     var _a;
-    if (((_a = this.translations) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.value) {
+    if (((_a = this.translations) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.value && isString(this.value)) {
       const key = this.value.replace(/%/g, '');
       const translationIndex = this.translations.findIndex((tran) => { var _a; return tran.key === key || tran.key === ((_a = this.translationKey) === null || _a === void 0 ? void 0 : _a.replace(/%/g, '')); });
       if (translationIndex > -1) {
@@ -883,6 +885,21 @@ export class YooFormTextAreaComponent {
       "attribute": "allow-mention",
       "reflect": false
     },
+    "mentionConfigs": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "{ type: string, id: string }",
+        "resolved": "{ type: string; id: string; }",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
     "translations": {
       "type": "unknown",
       "mutable": false,

package/dist/collection/components/form/form-text-editor/form-text-editor.js

@@ -45,7 +45,7 @@ import 'froala-editor/js/languages/tr';
 import 'froala-editor/js/languages/uk';
 import 'froala-editor/js/languages/zh_cn';
 import 'froala-editor/js/languages/zh_tw';
-import { asyncWaterfall, closeModal, containsUrls, debounce as _debounce, getAsyncExtraData, getColorSwatches, getCurrentLanguage, getCustomApp, getSession, getUUID, getVideoPoster, images, isCloudinaryLink, isImageUrl, isVideo, isWeb, replaceAndGetAllLinks, replaceAtTagToMentionTag, showContextMenu, showModal, translate, translateMulti, videos } from '@shared/utils';
+import { asyncWaterfall, closeModal, containsUrls, debounce as _debounce, getAsyncExtraData, getColorSwatches, getCurrentLanguage, getCustomApp, getSession, getUUID, getVideoPoster, images, isCloudinaryLink, isImageUrl, isVideo, isWeb, MODAL_BASE_ZINDEX, replaceAndGetAllLinks, replaceAtTagToMentionTag, showContextMenu, showModal, translate, translateMulti, videos } from '@shared/utils';
 import { Component, Element, Event, h, Host, Method, Prop, Watch } from '@stencil/core';
 import FroalaEditor from 'froala-editor';
 import { assign, compact, isArray, isString } from 'lodash-es';
@@ -62,9 +62,9 @@ export class YooFormTextEditorComponent {
     this.linkPreviews = [];
     this.formatAmpersandSymbol = false;
     this.allowLinkPreview = false;
-    this.resetHtml = false;
+    this.resetHtml = true;
     this.reloadText = false;
-    this.customZIndex = 20000;
+    this.customZIndex = MODAL_BASE_ZINDEX;
     this.mentionedUsers = [];
     // the event "contentChanged" is not fired before hitting 'Enter' once,
     //  so need to listen to the event 'keydown' first to be aware of any change of the value.
@@ -159,7 +159,7 @@ export class YooFormTextEditorComponent {
   }
   setLocalValue(forceRerender = false) {
     var _a;
-    if (((_a = this.translations) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.value) {
+    if (((_a = this.translations) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.value && isString(this.value)) {
       const key = this.translationKey ? this.translationKey.replace(/%/g, '') : this.value.replace(/%/g, '');
       const keyRemovedHTML = key === null || key === void 0 ? void 0 : key.replace(/(<([^>]+)>)/ig, '');
       const translationIndex = this.translations.findIndex((tran) => tran.key === key || keyRemovedHTML === tran.key);
@@ -678,30 +678,30 @@ export class YooFormTextEditorComponent {
   onHandleMentionInput(offset, insertElement) {
     var _a;
     (_a = this.editor) === null || _a === void 0 ? void 0 : _a.el.blur();
-    getAsyncExtraData({ type: 'mention', params: { otherIds: this.otherIds } }).then((res) => {
-      var _a, _b, _c;
-      if (res && res.data) {
+    getAsyncExtraData({ type: 'mention', params: { otherIds: this.otherIds, mentionConfigs: this.mentionConfigs } }).then((res) => {
+      var _a, _b, _c, _d;
+      if (res === null || res === void 0 ? void 0 : res.data) {
         this.mentionedUsers = res.data;
-        if (this.mentionedUsers && this.mentionedUsers.length > 0) {
+        if (((_a = this.mentionedUsers) === null || _a === void 0 ? void 0 : _a.length) > 0) {
           const newElement = this.mentionedUsers.map((user) => {
             var _a;
             return getTagHTML(user, (_a = this.editor) === null || _a === void 0 ? void 0 : _a.doc);
           });
           const insertParams = {
-            parentElement: (insertElement === null || insertElement === void 0 ? void 0 : insertElement.parentElement) || ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.el),
+            parentElement: (insertElement === null || insertElement === void 0 ? void 0 : insertElement.parentElement) || ((_b = this.editor) === null || _b === void 0 ? void 0 : _b.el),
             newElement,
             withReplace: true,
             withSpace: true,
             insertElement,
             offset,
             replaceFirstOnly: true,
-            doc: (_b = this.editor) === null || _b === void 0 ? void 0 : _b.doc
+            doc: (_c = this.editor) === null || _c === void 0 ? void 0 : _c.doc
           };
           safeInsertElements(insertParams);
           // update mention list
           this.syncMentionIds();
           // combine all text node
-          (_c = this.editor) === null || _c === void 0 ? void 0 : _c.el.normalize();
+          (_d = this.editor) === null || _d === void 0 ? void 0 : _d.el.normalize();
           this.onSaveTextEditorValue();
           setTimeout(() => {
             var _a;
@@ -1032,7 +1032,7 @@ export class YooFormTextEditorComponent {
       },
       "attribute": "reset-html",
       "reflect": false,
-      "defaultValue": "false"
+      "defaultValue": "true"
     },
     "isFullscreen": {
       "type": "boolean",
@@ -1085,7 +1085,7 @@ export class YooFormTextEditorComponent {
       },
       "attribute": "custom-z-index",
       "reflect": false,
-      "defaultValue": "20000"
+      "defaultValue": "MODAL_BASE_ZINDEX"
     },
     "translations": {
       "type": "unknown",
@@ -1157,6 +1157,21 @@ export class YooFormTextEditorComponent {
       },
       "attribute": "debounce",
       "reflect": false
+    },
+    "mentionConfigs": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "{ type: string, id: string }",
+        "resolved": "{ type: string; id: string; }",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
     }
   }; }
   static get events() { return [{

package/dist/collection/components/form/form-todo-dialog/form-todo-dialog.js

@@ -1,4 +1,4 @@
-import { closeModal, disableKeyboardResize, enableKeyboardResize, isKeyboardResizeModeInactive, isNativeMobile, isPresent, isWeb, pipes, showActionSheet, showAlert, showModal, translate, translateMulti } from '@shared/utils';
+import { closeModal, disableKeyboardResize, enableKeyboardResize, getUUID, isKeyboardResizeModeInactive, isNativeMobile, isPresent, isWeb, pipes, showActionSheet, showAlert, showModal, translate, translateMulti } from '@shared/utils';
 import { Component, Element, forceUpdate, h, Host, Listen, Prop, State } from '@stencil/core';
 import { cloneDeep, remove } from 'lodash-es';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
@@ -55,6 +55,7 @@ export class YooFormTodoDialogComponent {
     if (this.currentTask) {
       this.todo.values = this.todo.values || [];
       this.todo.values.push({
+        _id: getUUID(),
         text: { value: this.currentTask },
         finished: { value: null },
         isphotorequired: { value: this.allPhotosRequired === true },

package/dist/collection/components/form/form-todo-single/form-todo-single.js

@@ -1,5 +1,5 @@
 import { IUser } from '@shared/interfaces';
-import { dateFormat, debounce, fromNow, getCssColor, getSession, getUserDisplayName, isDateAfter, isDateSame, isIOS, isNativeMobile, isNullOrUndefined, showAlert, translate, translateMulti } from '@shared/utils';
+import { dateFormat, debounce, getCssColor, getSession, getUserDisplayName, isDateAfter, isDateSame, isIOS, isNativeMobile, isNullOrUndefined, showAlert, translate, translateMulti } from '@shared/utils';
 import { Component, Element, Event, h, Prop, State, Watch } from '@stencil/core';
 import { cloneDeep, pick } from 'lodash-es';
 import { cleanupTodoTaskSlides } from '../../../feature-operate/campaign/helpers/operation-helpers';
@@ -157,7 +157,7 @@ export class YooFormTodoSingleComponent {
     }
   }
   render() {
-    var _a, _b;
+    var _a, _b, _c;
     // 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 isDateSame((_a = todo.duedate) === null || _a === void 0 ? void 0 : _a.value, this.dueDateToClean, 'minute'); }));
     const slidesTodoTask = cleanupTodoTaskSlides(this.slidesTodoTask, cleanDueDate);
@@ -165,33 +165,31 @@ export class YooFormTodoSingleComponent {
     return (h("div", { class: "outer-container" },
       h("div", { class: "title" },
         h("yoo-badge", { class: "count", color: "dark", text: total.toString() }),
-        translate('YOOBICACTIONS', { smart_count: total })),
-      this.valuesState
-        ? this.valuesState.map((todo, index) => {
-          var _a, _b, _c, _d, _e, _f;
-          const dueDateCustomColor = isDateAfter((_a = todo.duedate) === null || _a === void 0 ? void 0 : _a.value, new Date(), 'day') ? getCssColor('text-color') : getCssColor('danger');
-          return (h("div", { class: "todo-container" },
-            h("div", { class: "previous" }, this.renderLinkedField(todo)),
-            h("div", { class: "content" },
-              h("div", { class: "content-left" }, this.renderContentLeft(todo, index))),
-            ((_b = todo.description) === null || _b === void 0 ? void 0 : _b.value) && 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) && (h("div", { class: "date" },
-              h("yoo-tag", { color: "stable", customColor: dueDateCustomColor },
-                h("yoo-icon", { class: { custom: !!dueDateCustomColor }, size: "small", name: "calendar", slot: "start" }),
-                translate('YOOBICDUEAT', { date: fromNow(todo.duedate.value), time: dateFormat(todo.duedate.value, 'HH:mm') })))),
-            ((_d = todo.user) === null || _d === void 0 ? void 0 : _d.value) && h("span", { class: "user" },
-              h("yoo-avatar", { user: todo.user.value, size: "small" }),
-              h("span", null, getUserDisplayName(todo.user.value))),
-            ((_e = todo.comments) === null || _e === void 0 ? void 0 : _e.value) && h("div", { class: "comments", innerHTML: todo.comments.value }),
-            ((_f = todo.hasphoto) === null || _f === void 0 ? void 0 : _f.value) && (!this.isReadonly(todo) || todo.imageData) && (h("div", { class: { 'photo-container': true, readonly: this.isReadonly(todo) } },
-              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) }))),
-            !this.isReadonly(todo) && (h("div", { class: "comment-container" },
-              h("span", { onClick: () => this.onToggleComments(todo, index) },
-                h("yoo-icon", { name: "comment", color: "stable-alt" })))),
-            (!this.isReadonly(todo) || this.valuesState[index].userComments) && (h("div", { ref: (el) => (this.textareaContainer = el), class: "textarea-container" }, this.renderComments(index))),
-            this.isReadonly(todo) && (slidesTodoTask === null || slidesTodoTask === void 0 ? void 0 : slidesTodoTask.length) > 0 && (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));
+        translate('YOOBICACTIONS', { smart_count: total })), (_c = this.valuesState) === null || _c === void 0 ? void 0 :
+      _c.map((todo, index) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const dueDateCustomColor = isDateAfter((_a = todo.duedate) === null || _a === void 0 ? void 0 : _a.value, new Date(), 'day') ? getCssColor('text-color') : getCssColor('danger');
+        return (h("div", { class: "todo-container" },
+          h("div", { class: "previous" }, this.renderLinkedField(todo)),
+          h("div", { class: "content" },
+            h("div", { class: "content-left" }, this.renderContentLeft(todo, index))),
+          ((_b = todo.description) === null || _b === void 0 ? void 0 : _b.value) && 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) && (h("div", { class: "date" },
+            h("yoo-tag", { color: "stable", customColor: dueDateCustomColor },
+              h("yoo-icon", { class: { custom: !!dueDateCustomColor }, size: "small", name: "calendar-date", slot: "start" }),
+              translate('YOOBICDUEAT', { date: dateFormat((_d = todo.duedate) === null || _d === void 0 ? void 0 : _d.value, 'L'), time: dateFormat((_e = todo.duedate) === null || _e === void 0 ? void 0 : _e.value, 'LT') })))),
+          ((_f = todo.user) === null || _f === void 0 ? void 0 : _f.value) && h("span", { class: "user" },
+            h("yoo-avatar", { user: todo.user.value, size: "small" }),
+            h("span", null, getUserDisplayName(todo.user.value))),
+          ((_g = todo.comments) === null || _g === void 0 ? void 0 : _g.value) && h("div", { class: "comments", innerHTML: todo.comments.value }),
+          ((_h = todo.hasphoto) === null || _h === void 0 ? void 0 : _h.value) && (!this.isReadonly(todo) || todo.imageData) && (h("div", { class: { 'photo-container': true, readonly: this.isReadonly(todo) } },
+            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) }))),
+          !this.isReadonly(todo) && (h("div", { class: "comment-container" },
+            h("span", { onClick: () => this.onToggleComments(todo, index) },
+              h("yoo-icon", { name: "comment", color: "stable-alt" })))),
+          (!this.isReadonly(todo) || this.valuesState[index].userComments) && (h("div", { ref: (el) => (this.textareaContainer = el), class: "textarea-container" }, this.renderComments(index))),
+          this.isReadonly(todo) && (slidesTodoTask === null || slidesTodoTask === void 0 ? void 0 : slidesTodoTask.length) > 0 && (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 }))));
+      })));
   }
   static get is() { return "yoo-form-todo-single"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/form/form-todo-task/components/action.js

@@ -0,0 +1,3 @@
+import { h } from '@stencil/core';
+export const Action = ({ hidden, icon, text, onClick }) => (h("yoo-tooltip", { content: text, hidden: hidden, placement: "top" },
+  h("yoo-icon", { color: "stable", name: icon, onClick: onClick })));

package/dist/collection/components/form/form-todo-task/components/schedule.js

@@ -0,0 +1,85 @@
+import { closeModal, dateAdd, getHours, getMinutes, getRoundedMinutes, isWeb, showModal, translate } from '@shared/utils';
+const getRoundedDate = (date, minutesStep = 5) => {
+  const result = new Date(date.getTime());
+  const oldMinutes = result.getMinutes();
+  const newMinutes = +getRoundedMinutes(result, minutesStep);
+  result.setMinutes(newMinutes, 0, 0);
+  if (newMinutes === 0 && oldMinutes !== newMinutes) {
+    result.setHours(result.getHours() + 1);
+  }
+  return result;
+};
+const getCalendarElement = (activeDay, onChange) => {
+  const calendar = document.createElement('yoo-calendar');
+  calendar.classList.add('calendar-picker');
+  calendar.activeDay = activeDay;
+  calendar.isDatePicker = true;
+  calendar.addEventListener('dateChanged', ({ detail }) => {
+    const { date } = detail;
+    date.setHours(getHours(activeDay), getMinutes(activeDay));
+    onChange(date);
+  });
+  return calendar;
+};
+const getTimeElement = (activeDay, onChange) => {
+  const time = document.createElement('yoo-form-time');
+  time.style.setProperty('--spacing', 'var(--spacing-04)');
+  time.type = 'datetime';
+  time.value = activeDay;
+  time.addEventListener('amPmToggled', ({ detail }) => onChange(dateAdd(activeDay, 'h', detail === 'AM' ? -12 : 12)));
+  time.addEventListener('inputChanged', ({ detail }) => onChange(new Date(detail)));
+  return time;
+};
+const getSaveElement = (web, onClick) => {
+  const button = document.createElement('yoo-button');
+  button.color = 'app-color';
+  button.fill = 'transparent';
+  button.size = 'large';
+  button.style.background = 'var(--light)';
+  button.style.setProperty('--hover-color', 'transparent');
+  button.style.setProperty('--side-padding', '0');
+  button.textContent = translate('DONE');
+  button.addEventListener('click', onClick);
+  if (web) {
+    button.style.position = 'sticky';
+    button.style.bottom = '0';
+    button.style.borderTop = 'var(--border-width-01) solid var(--stable-light)';
+  }
+  else {
+    button.style.position = 'fixed';
+    button.style.top = '0';
+    button.style.right = 'var(--spacing-16)';
+  }
+  return button;
+};
+export const getScheduleElement = (target, dueDate, onChange) => {
+  const schedule = document.createElement('div');
+  const activeDate = dueDate ? new Date(dueDate) : getRoundedDate(new Date());
+  const web = isWeb(target);
+  schedule.style.overflow = 'auto';
+  if (web) {
+    const { top, right, bottom, left } = target.getBoundingClientRect();
+    const space = { top, right: window.innerWidth - left, bottom: window.innerHeight - bottom, left: right };
+    const margin = 8;
+    const width = Math.min(240, Math.max(space.right, space.left) - margin);
+    const height = Math.min(470, Math.max(space.top, space.bottom) - 2 * margin);
+    schedule.style.position = 'absolute';
+    schedule.style.top = space.top < space.bottom ? `${bottom + margin}px` : `${top - margin - height}px`;
+    schedule.style.left = space.left < space.right ? `${left}px` : `${right - width}px`;
+    schedule.style.width = `${width}px`;
+    schedule.style.height = `${height}px`;
+    schedule.style.backgroundColor = 'var(--light)';
+    schedule.style.boxShadow = 'var(--shadow-03)';
+  }
+  schedule.appendChild(getCalendarElement(activeDate, (date) => activeDate.setFullYear(date.getFullYear(), date.getMonth(), date.getDate())));
+  schedule.appendChild(getTimeElement(activeDate, (date) => activeDate.setHours(date.getHours(), date.getMinutes())));
+  schedule.appendChild(getSaveElement(web, () => closeModal(null, schedule)));
+  return {
+    schedule,
+    showSchedule: async () => {
+      const modal = await showModal(schedule, web ? {} : { half: true, coeffHalf: 0.66 }, web ? 'context-menu' : null, web ? 'fadeEnterAnimation' : 'slideYEnterAnimation', web ? 'fadeLeaveAnimation' : 'slideYLeaveAnimation', !web, web);
+      onChange(activeDate);
+      return modal;
+    }
+  };
+};

package/dist/collection/components/form/form-todo-task/components/tag.js

@@ -0,0 +1,8 @@
+import { h } from '@stencil/core';
+export const Tag = ({ color, hidden, icon, removable, text, web, onClick, onRemove }) => (h("yoo-tag", { color: `${color}-10`, hidden: hidden, size: web ? 'extra-small' : 'medium', style: { cursor: onClick ? 'pointer' : undefined }, onClick: onClick },
+  h("yoo-icon", { color: color, name: icon, slot: "start", size: web ? 'extra-small' : 'small' }),
+  text,
+  h("yoo-icon", { color: color, hidden: !removable, name: "cross", slot: "end", size: web ? 'extra-small' : 'small', onClick: (event) => {
+      event.stopPropagation();
+      onRemove();
+    } })));

package/dist/collection/components/form/{form-todo-list-dialog/form-todo-list-dialog.css → form-todo-task/form-todo-task.css}

@@ -201,11 +201,94 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-:host .outer-container {
-  padding: 16px;
+:host {
+  position: relative;
+  border-radius: var(--border-radius-08, 0.5rem);
 }
-:host yoo-ion-footer {
+:host yoo-icon[name=cross],
+:host .actions > * {
+  cursor: pointer;
+}
+:host .actions {
+  position: absolute;
+}
+:host .actions:not([hidden]) {
+  display: flex;
+  gap: var(--spacing-08, 0.5rem);
+}
+:host .tags {
+  overflow: hidden;
+}
+:host .tags:not([hidden]) {
   display: flex;
-  justify-content: space-around;
-  padding: var(--spacing-16, 1rem) 0;
+  flex-flow: wrap;
+  gap: var(--spacing-08, 0.5rem);
+}
+
+:host([readonly]) {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: var(--spacing-08, 0.5rem);
+}
+:host([readonly]) h1 {
+  margin: 0;
+}
+:host([readonly]) .tags {
+  grid-column: 2;
+}
+
+:host(:not([readonly])) {
+  display: block;
+}
+:host(:not([readonly])) .tags {
+  position: absolute;
+}
+
+:host(.web) {
+  background: var(--stable-ultralight, #fafafa);
+}
+:host(.web) .actions {
+  top: calc(var(--spacing-16, 1rem) + var(--spacing-04, 0.25rem));
+  right: var(--spacing-24, 1.5rem);
+}
+
+:host(.web[readonly]) {
+  padding: var(--spacing-16, 1rem) var(--spacing-48, 3rem) var(--spacing-16, 1rem) var(--spacing-32, 2rem);
+}
+:host(.web[readonly]) h1 {
+  font-size: var(--font-size-14, 0.875rem);
+  line-height: 1.14;
+}
+
+:host(.web:not([readonly])) {
+  padding: var(--spacing-16, 1rem);
+}
+:host(.web:not([readonly])) .tags {
+  right: var(--spacing-24, 1.5rem);
+  bottom: var(--spacing-24, 1.5rem);
+  left: var(--spacing-24, 1.5rem);
+}
+
+:host(.mobile) {
+  background: var(--stable-10, rgba(173, 173, 173, 0.1));
+}
+:host(.mobile) .actions {
+  top: calc(var(--spacing-08, 0.5rem) + var(--spacing-04, 0.25rem));
+  right: var(--spacing-16, 1rem);
+}
+:host(.mobile) .tags:not([hidden]) {
+  flex-direction: column;
+}
+
+:host(.mobile[readonly]) {
+  padding: calc(var(--spacing-08, 0.5rem) + var(--spacing-04, 0.25rem)) var(--spacing-16, 1rem);
+}
+:host(.mobile[readonly]) h1 {
+  font-size: var(--font-size-16, 1rem);
+}
+
+:host(.mobile:not([readonly])) .tags {
+  right: var(--spacing-16, 1rem);
+  bottom: calc(var(--spacing-08, 0.5rem) + var(--spacing-04, 0.25rem));
+  left: var(--spacing-16, 1rem);
 }