@yoobic/yobi 8.5.0-41 → 8.5.0-43

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

@@ -915,6 +915,9 @@ export class YooFormDynamicComponent {
   isInCard() {
     return this.host.classList.contains('in-card');
   }
+  isNoBorderCollapsible() {
+    return this.host.classList.contains('no-border-collapsible');
+  }
   onWindowResize() {
     if (isAndroid()) {
       this.blurOnScroll = false;
@@ -1188,7 +1191,7 @@ export class YooFormDynamicComponent {
       this.markAsInvalid(field, false);
       this.originalMarkAsInvalid(field, true);
     }
-    else if (this.hasMarkAsInvalidFields()) {
+    else if (this.hasFieldsMarkedAsInvalid()) {
       this.markAsModified(field, true);
     }
     this.fieldChanged.emit(fieldChangedValues);
@@ -1675,7 +1678,7 @@ export class YooFormDynamicComponent {
     let fieldsStateWereUpdated = forceRefresh || false;
     this.updateDataFlatten();
     const slideState = this.slidesState ? cloneDeep(this.slidesState) : Array.from({ length: this.slides ? this.slides.length : 0 }, () => ({}));
-    const hasMarkAsInvalidFields = this.hasMarkAsInvalidFields();
+    const hasFieldsMarkedAsInvalid = this.hasFieldsMarkedAsInvalid();
     (this.slides || []).forEach((slide, i) => {
       let isValid = true;
       let totalRequiredFields = 0;
@@ -1762,7 +1765,7 @@ export class YooFormDynamicComponent {
             field.deleteOnHidden !== false &&
             field.forceHidden !== true &&
             (!field.readonly || field.dontSaveIfHidden) &&
-            !hasMarkAsInvalidFields &&
+            !hasFieldsMarkedAsInvalid &&
             !this.isFieldReadonlyByInvalidRules(field)
             && !isFieldWithNoValue(field)) {
             this.onFieldClear(field, false);
@@ -2334,7 +2337,7 @@ export class YooFormDynamicComponent {
   markAsModified(field, state) {
     setFieldData(field, state, this.currentData, '.markAsModified');
   }
-  hasMarkAsInvalidFields() {
+  hasFieldsMarkedAsInvalid() {
     const slides = this.getVisibleSlides();
     return slides === null || slides === void 0 ? void 0 : slides.some((s) => { var _a; return (_a = s === null || s === void 0 ? void 0 : s.items) === null || _a === void 0 ? void 0 : _a.some((f) => this.isMarkedAsInvalid(f) || this.isOriginalMarkedAsInvalid(f)); });
   }
@@ -2346,8 +2349,8 @@ export class YooFormDynamicComponent {
   }
   cleanHiddenReadonlyFieldsByInvalidRules() {
     var _a;
-    const hasMarkAsInvalidFields = this.hasMarkAsInvalidFields();
-    if (hasMarkAsInvalidFields) {
+    const hasFieldsMarkedAsInvalid = this.hasFieldsMarkedAsInvalid();
+    if (hasFieldsMarkedAsInvalid) {
       (_a = this.slides) === null || _a === void 0 ? void 0 : _a.forEach((slide) => {
         var _a;
         (_a = slide.items) === null || _a === void 0 ? void 0 : _a.forEach((field) => {
@@ -2381,7 +2384,7 @@ export class YooFormDynamicComponent {
     const fieldsPerGroup = this.getFieldsPerArea(fields, 'group');
     fields = fields.filter((f) => !f.section && !f.group);
     const TagType = this.useGridstack ? 'yoo-gridstack' : 'div';
-    const hasMarkAsInvalidFields = this.hasMarkAsInvalidFields();
+    const hasFieldsMarkedAsInvalid = this.hasFieldsMarkedAsInvalid();
     return [
       slideIndex === 0 && h("slot", { name: "start" }),
       h(TagType, { key: 'slide-' + slideIndex, class: {
@@ -2407,7 +2410,7 @@ export class YooFormDynamicComponent {
           previousField,
           slideLength,
           useGridstack: this.useGridstack,
-          hasMarkAsInvalidFields
+          hasFieldsMarkedAsInvalid
         });
       }), (_e = keys(fieldsPerSections)) === null || _e === void 0 ? void 0 :
         _e.map((section) => {
@@ -2422,7 +2425,8 @@ export class YooFormDynamicComponent {
             visible && (h("yoo-collapsible", { isPdf: this.isPdf, collapsed: !this.isPdf && !this.forceCollapsibleOpen && !fieldsPerSections[section].some((field) => field.sectionExpanded), class: {
                 'form': !fieldsPerSections[section].some((field) => field.sectionWithoutBackground),
                 'padding': !this.showVerticalTabs && !this.forceReadonly,
-                'no-scroll': this.useGridstack && this.gridstackItemNoScroll
+                'no-scroll': this.useGridstack && this.gridstackItemNoScroll,
+                'no-border': this.isNoBorderCollapsible()
               }, icon: fieldWithSectionIcon === null || fieldWithSectionIcon === void 0 ? void 0 : fieldWithSectionIcon.sectionIcon, iconColor: "dark", iconSize: "medium", header: translate(section), style: { zIndex: fieldsPerSections[section].some((field) => field.type === FormFieldType.querybuilder) ? '1' : undefined }, slot: this.useGridstack ? section : null, size: this.formInputSize }, fieldsPerSections[section].map((field, i) => {
               const previousField = this.findPreviousVisibleField(i, fieldsPerSections[section]);
               return !field.subSection && this.renderFormContentField({
@@ -2434,7 +2438,7 @@ export class YooFormDynamicComponent {
                 previousField,
                 slideLength,
                 collapsible: true,
-                hasMarkAsInvalidFields
+                hasFieldsMarkedAsInvalid
               });
             }), (_a = keys(subfieldsPerSections)) === null || _a === void 0 ? void 0 :
               _a.map((subsection) => {
@@ -2456,7 +2460,7 @@ export class YooFormDynamicComponent {
                     previousField,
                     slideLength,
                     collapsible: true,
-                    hasMarkAsInvalidFields
+                    hasFieldsMarkedAsInvalid
                   });
                 }));
               })))
@@ -2478,19 +2482,19 @@ export class YooFormDynamicComponent {
                 slideItems,
                 slideLength,
                 isPreviousFieldReadonlyAndVisible,
-                hasMarkAsInvalidFields
+                hasFieldsMarkedAsInvalid
               });
             }))
           ];
         }), slideIndex === 0 ? h("slot", { name: "end-fields" }) : null, slideIndex === 0 && !(this.isKanban() && isWeb(this.host)) ? this.renderExtraButtons() : null, slideIndex === 0 ? (h("div", { class: "slot-container-after" }, h("slot", { name: "end" }))) : null, this.scrollable !== false && !this.isInline() && !this.isInlineRowNarrow() ? h("div", { class: "scroll-spacer" }) : null, !this.forceReadonly && !this.isInline() && !this.isInlineRowNarrow() && (slideIndex === slideLength || this.getSlideState(slideIndex).validity) ? (h("div", { class: "footer-spacer" })) : null, this.isInline() && !this.isInlineNarrow() && !this.isInlineRowNarrow() && range(4).map(() => h("div", { class: "field-placeholder field-placeholder-empty" })))
     ];
   }
-  renderFormContentField({ field, inputIndex, slideIndex, slideItems, isPreviousFieldReadonlyAndVisible, previousField, slideLength, collapsible, useGridstack, hasMarkAsInvalidFields }) {
+  renderFormContentField({ field, inputIndex, slideIndex, slideItems, isPreviousFieldReadonlyAndVisible, previousField, slideLength, collapsible, useGridstack, hasFieldsMarkedAsInvalid }) {
     var _a, _b, _c;
     const markAsInvalid = this.isMarkedAsInvalid(field);
     const markAsModified = this.isMarkedAsModified(field);
     const originalMarkAsInvalid = this.isOriginalMarkedAsInvalid(field);
-    const readonly = getFieldState(field, this.fieldsState).readonly || this.forceReadonly || (hasMarkAsInvalidFields && this.isFieldReadonlyByInvalidRules(field));
+    const readonly = getFieldState(field, this.fieldsState).readonly || this.forceReadonly || (hasFieldsMarkedAsInvalid && this.isFieldReadonlyByInvalidRules(field));
     const comments = getFieldValue(field, this.currentData, '.comments');
     const validationComments = getFieldValue(field, this.currentData, '.validationComments');
     const time = this.forceReadonly ? getFieldValue(field, this.currentData, '.time') : null;

package/dist/collection/components/form/form-entity-value-pairs/form-entity-value-pairs.js

@@ -192,7 +192,7 @@ export class YooFormEntityValuePairsComponent {
         "mutable": false,
         "complexType": {
           "original": "EntityType",
-          "resolved": "\"aisles\" | \"community\" | \"courses\" | \"dashboards\" | \"operations\" | \"pages\" | \"questions\" | \"scoring\" | \"tableau\" | \"tag\" | \"user\" | \"weekdays\" | \"aclPermission\" | \"aclPermissionList\" | \"aclRole\" | \"aislelist\" | \"algorithm\" | \"apps\" | \"arexperience\" | \"armodel\" | \"audiences\" | \"badges\" | \"blog\" | \"broadcasts\" | \"calendarEvents\" | \"campaignfilters\" | \"creationtypes\" | \"catalogs\" | \"certificates\" | \"channel\" | \"channels\" | \"charttype\" | \"communities\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"custommodels\" | \"days\" | \"emails\" | \"entitycomments\" | \"environnement\" | \"feeds\" | \"feedsComments\" | \"files\" | \"filesFolders\" | \"folders\" | \"formfield\" | \"geofilters\" | \"giphy\" | \"googlemaps\" | \"groups\" | \"hashtags\" | \"hierarchy\" | \"htmltemplates\" | \"icons\" | \"incentives\" | \"journeys\" | \"language\" | \"lessondescriptions\" | \"lessons\" | \"liveshoppings\" | \"locations\" | \"locationsaudience\" | \"locationspublic\" | \"locationtypes\" | \"markas\" | \"mediacapturedevices\" | \"memolist\" | \"memos\" | \"missiondatas\" | \"missiondescriptions\" | \"missiondescriptioncategories\" | \"missiondescriptionreviewhistories\" | \"missiondescriptiontemplates\" | \"missionfield\" | \"missions\" | \"notes\" | \"notifications\" | \"photos\" | \"plans\" | \"productbatch\" | \"productbatchlist\" | \"products\" | \"productweightpair\" | \"publicAPITokens\" | \"questionsAnswers\" | \"regex\" | \"reporttemplates\" | \"reviewapps\" | \"salesdata\" | \"scorms\" | \"scormcloud\" | \"shifts\" | \"slots\" | \"tableauShared\" | \"tagGroups\" | \"tenants\" | \"topusers\" | \"translations\" | \"type\" | \"unsplash\" | \"useraudience\" | \"userranks\" | \"userhighscores\" | \"userlearningmanager\" | \"usercourseinfo\" | \"users\" | \"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\" | \"aclPermission\" | \"aclPermissionList\" | \"aclRole\" | \"aislelist\" | \"algorithm\" | \"apps\" | \"arexperience\" | \"armodel\" | \"audiences\" | \"badges\" | \"blog\" | \"broadcasts\" | \"calendarEvents\" | \"campaignfilters\" | \"creationtypes\" | \"catalogs\" | \"certificates\" | \"channel\" | \"channels\" | \"charttype\" | \"communities\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"custommodels\" | \"days\" | \"emails\" | \"entitycomments\" | \"environnement\" | \"feeds\" | \"feedsComments\" | \"files\" | \"filesFolders\" | \"filesPdf\" | \"folders\" | \"formfield\" | \"geofilters\" | \"giphy\" | \"googlemaps\" | \"groups\" | \"hashtags\" | \"hierarchy\" | \"htmltemplates\" | \"icons\" | \"incentives\" | \"journeys\" | \"language\" | \"lessondescriptions\" | \"lessons\" | \"liveshoppings\" | \"locations\" | \"locationsaudience\" | \"locationspublic\" | \"locationtypes\" | \"markas\" | \"mediacapturedevices\" | \"memolist\" | \"memos\" | \"missiondatas\" | \"missiondescriptions\" | \"missiondescriptioncategories\" | \"missiondescriptionreviewhistories\" | \"missiondescriptiontemplates\" | \"missionfield\" | \"missions\" | \"notes\" | \"notifications\" | \"photos\" | \"plans\" | \"productbatch\" | \"productbatchlist\" | \"products\" | \"productweightpair\" | \"publicAPITokens\" | \"questionsAnswers\" | \"regex\" | \"reporttemplates\" | \"reviewapps\" | \"salesdata\" | \"scorms\" | \"scormcloud\" | \"shifts\" | \"slots\" | \"tableauShared\" | \"tagGroups\" | \"tenants\" | \"topusers\" | \"translations\" | \"type\" | \"unsplash\" | \"useraudience\" | \"userranks\" | \"userhighscores\" | \"userlearningmanager\" | \"usercourseinfo\" | \"users\" | \"violetproducts\" | \"violetproductofferskus\" | \"violetbasketitems\" | \"violetshippingmethods\" | \"version\" | \"videocallusers\" | \"visits\" | \"waitlistvisit\" | \"waitlistcustomer\" | \"waitliststats\" | \"plansorlessons\" | \"widgets\"",
           "references": {
             "EntityType": {
               "location": "import",

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

@@ -386,7 +386,7 @@ export class YooFormTableComponent {
         "mutable": false,
         "complexType": {
           "original": "EntityType",
-          "resolved": "\"aisles\" | \"community\" | \"courses\" | \"dashboards\" | \"operations\" | \"pages\" | \"questions\" | \"scoring\" | \"tableau\" | \"tag\" | \"user\" | \"weekdays\" | \"aclPermission\" | \"aclPermissionList\" | \"aclRole\" | \"aislelist\" | \"algorithm\" | \"apps\" | \"arexperience\" | \"armodel\" | \"audiences\" | \"badges\" | \"blog\" | \"broadcasts\" | \"calendarEvents\" | \"campaignfilters\" | \"creationtypes\" | \"catalogs\" | \"certificates\" | \"channel\" | \"channels\" | \"charttype\" | \"communities\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"custommodels\" | \"days\" | \"emails\" | \"entitycomments\" | \"environnement\" | \"feeds\" | \"feedsComments\" | \"files\" | \"filesFolders\" | \"folders\" | \"formfield\" | \"geofilters\" | \"giphy\" | \"googlemaps\" | \"groups\" | \"hashtags\" | \"hierarchy\" | \"htmltemplates\" | \"icons\" | \"incentives\" | \"journeys\" | \"language\" | \"lessondescriptions\" | \"lessons\" | \"liveshoppings\" | \"locations\" | \"locationsaudience\" | \"locationspublic\" | \"locationtypes\" | \"markas\" | \"mediacapturedevices\" | \"memolist\" | \"memos\" | \"missiondatas\" | \"missiondescriptions\" | \"missiondescriptioncategories\" | \"missiondescriptionreviewhistories\" | \"missiondescriptiontemplates\" | \"missionfield\" | \"missions\" | \"notes\" | \"notifications\" | \"photos\" | \"plans\" | \"productbatch\" | \"productbatchlist\" | \"products\" | \"productweightpair\" | \"publicAPITokens\" | \"questionsAnswers\" | \"regex\" | \"reporttemplates\" | \"reviewapps\" | \"salesdata\" | \"scorms\" | \"scormcloud\" | \"shifts\" | \"slots\" | \"tableauShared\" | \"tagGroups\" | \"tenants\" | \"topusers\" | \"translations\" | \"type\" | \"unsplash\" | \"useraudience\" | \"userranks\" | \"userhighscores\" | \"userlearningmanager\" | \"usercourseinfo\" | \"users\" | \"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\" | \"aclPermission\" | \"aclPermissionList\" | \"aclRole\" | \"aislelist\" | \"algorithm\" | \"apps\" | \"arexperience\" | \"armodel\" | \"audiences\" | \"badges\" | \"blog\" | \"broadcasts\" | \"calendarEvents\" | \"campaignfilters\" | \"creationtypes\" | \"catalogs\" | \"certificates\" | \"channel\" | \"channels\" | \"charttype\" | \"communities\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"custommodels\" | \"days\" | \"emails\" | \"entitycomments\" | \"environnement\" | \"feeds\" | \"feedsComments\" | \"files\" | \"filesFolders\" | \"filesPdf\" | \"folders\" | \"formfield\" | \"geofilters\" | \"giphy\" | \"googlemaps\" | \"groups\" | \"hashtags\" | \"hierarchy\" | \"htmltemplates\" | \"icons\" | \"incentives\" | \"journeys\" | \"language\" | \"lessondescriptions\" | \"lessons\" | \"liveshoppings\" | \"locations\" | \"locationsaudience\" | \"locationspublic\" | \"locationtypes\" | \"markas\" | \"mediacapturedevices\" | \"memolist\" | \"memos\" | \"missiondatas\" | \"missiondescriptions\" | \"missiondescriptioncategories\" | \"missiondescriptionreviewhistories\" | \"missiondescriptiontemplates\" | \"missionfield\" | \"missions\" | \"notes\" | \"notifications\" | \"photos\" | \"plans\" | \"productbatch\" | \"productbatchlist\" | \"products\" | \"productweightpair\" | \"publicAPITokens\" | \"questionsAnswers\" | \"regex\" | \"reporttemplates\" | \"reviewapps\" | \"salesdata\" | \"scorms\" | \"scormcloud\" | \"shifts\" | \"slots\" | \"tableauShared\" | \"tagGroups\" | \"tenants\" | \"topusers\" | \"translations\" | \"type\" | \"unsplash\" | \"useraudience\" | \"userranks\" | \"userhighscores\" | \"userlearningmanager\" | \"usercourseinfo\" | \"users\" | \"violetproducts\" | \"violetproductofferskus\" | \"violetbasketitems\" | \"violetshippingmethods\" | \"version\" | \"videocallusers\" | \"visits\" | \"waitlistvisit\" | \"waitlistcustomer\" | \"waitliststats\" | \"plansorlessons\" | \"widgets\"",
           "references": {
             "EntityType": {
               "location": "import",

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

@@ -118,6 +118,7 @@ export class YooFormTextAreaComponent {
     }
   }
   componentDidLoad() {
+    var _a;
     if (this.isRichText) {
       // block click event when editing the tag
       if (this.inputEl) {
@@ -132,8 +133,7 @@ export class YooFormTextAreaComponent {
     else {
       this.setTextareaMaxLengh();
       if (this.resizable !== 'both') {
-        const textArea = this.inputEl;
-        textArea.setAttribute('style', `resize: ${this.resizable};`);
+        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.setAttribute('style', `resize: ${this.resizable};`);
       }
       if (this.inputEl && this.value) {
         this.inputEl.value = this.value;

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

@@ -1,5 +1,5 @@
 import { findParent, getModalAnimation, getSession, pipes, showAlert, showModal, translate, translateMulti } from '@shared/utils';
-import { h } from '@stencil/core';
+import { forceUpdate, h } from '@stencil/core';
 import { cloneDeep, isArray } from 'lodash-es';
 import { setValidator, setValueAndValidateInput, taskStyle } from '../../../utils/helpers/form-input-helpers';
 export class YooFormTodoComponent {
@@ -21,9 +21,9 @@ export class YooFormTodoComponent {
   }
   onUpdateTodo(ev) {
     ev.stopPropagation();
-    this.value.values = ev.detail.values;
-    this.value = { ...this.value };
+    this.value.values[ev.detail.index] = ev.detail.task;
     setValueAndValidateInput(this.value, this);
+    forceUpdate(this);
   }
   onClearTodo(ev) {
     ev.stopPropagation();
@@ -86,7 +86,7 @@ export class YooFormTodoComponent {
   }
   renderReadonly() {
     var _a, _b;
-    return (h("div", { class: "readonly" }, ((_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.values) === null || _b === void 0 ? void 0 : _b.length) > 0 && (h("yoo-form-todo-single", { slidesTodoTask: this.slidesTodoTask, class: "readonly", type: "form", readonly: this.readonly, values: this.value.values, onUpdate: (ev) => this.onUpdateTodo(ev) }))));
+    return (h("div", { class: "readonly" }, ((_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.values) === null || _b === void 0 ? void 0 : _b.length) > 0 && (h("yoo-form-todo-mission", { class: "readonly", values: this.value.values, user: getSession().user, readonly: this.readonly, onUpdate: (ev) => this.onUpdateTodo(ev) }))));
   }
   renderEditable() {
     if (this.value && this.value.title) {

package/dist/collection/components/form/{form-todo-single/form-todo-single.css → form-todo-mission/form-todo-mission.css}

@@ -205,245 +205,205 @@ svg:not(:root) {
   overflow: hidden;
 }
 
+:host {
+  display: block;
+}
+:host .outer-container {
+  position: relative;
+}
 :host .outer-container .title {
   display: flex;
   align-items: center;
-  margin-bottom: var(--spacing-08, 0.5rem);
+  margin-bottom: var(--spacing-16, 1rem);
   font-weight: bold;
+  text-transform: uppercase;
 }
-:host .outer-container .title yoo-badge {
+:host .outer-container .title yoo-icon {
   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 {
+:host .outer-container .container {
   display: flex;
-  flex-direction: row;
-  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: flex;
-  flex-direction: row;
-  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);
+  flex-direction: column;
+  margin-bottom: var(--spacing-24, 1.5rem);
+  border-radius: var(--spacing-08, 0.5rem);
 }
-:host .outer-container .todo-container .content .content-left yoo-form-checkbox {
-  margin-right: var(--spacing-04, 0.25rem);
+:host .outer-container .container #task-container {
+  margin: var(--spacing-08, 0.5rem);
 }
-:host .outer-container .todo-container .content .content-right {
+:host .outer-container .container #task-container #previous {
   display: flex;
-  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 {
+:host .outer-container .container #task-container #previous menu-left {
   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);
+  flex-direction: column;
+  align-items: center;
+  padding: var(--spacing-08, 0.5rem) var(--spacing-08, 0.5rem) 0 var(--spacing-08, 0.5rem);
 }
-:host .outer-container .todo-container .border {
+: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 .todo-container yoo-avatars {
-  height: 1.5rem;
-  margin-top: var(--spacing-04, 0.25rem);
-  margin-bottom: var(--spacing-04, 0.25rem);
+: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 .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 {
+: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: flex;
-  flex-direction: row;
+  flex-direction: column;
+  padding: var(--spacing-08, 0.5rem);
 }
-:host .outer-container .todo-container .menu .menu-item:not(:last-child) .menu-content {
-  margin-bottom: var(--spacing-24, 1.5rem);
+:host .outer-container .container #task-container .task header {
+  display: flex;
 }
-:host .outer-container .todo-container .menu .menu-item .menu-left {
+:host .outer-container .container #task-container .task header task-details {
   display: flex;
   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: flex;
   align-items: center;
+  margin: 0;
+  padding: var(--spacing-08, 0.5rem) 0 0 var(--spacing-08, 0.5rem);
 }
-:host .outer-container .todo-container .menu .menu-item .menu-left.with-dot {
-  width: 2rem;
-  margin-left: 0.0313rem;
+:host .outer-container .container #task-container .task header task-details .user yoo-avatar {
+  padding-right: var(--spacing-04, 0.25rem);
 }
-: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 .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 .todo-container .menu .menu-item .menu-left .menu-icon.menu-dot {
-  width: 1rem;
-  height: 1rem;
+: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 .todo-container .menu .menu-item .menu-left .menu-icon yoo-icon {
-  display: flex;
-  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 .container #task-container .task header yoo-button {
+  position: absolute;
+  right: var(--spacing-16, 1rem);
+  margin: 0;
 }
-:host .outer-container .todo-container .menu .menu-item .menu-left .menu-icon yoo-icon.dark {
-  background-color: var(--dark, #000000);
+:host .outer-container .container #task-container .task additionnal-fields {
+  padding-top: var(--spacing-08, 0.5rem);
 }
-:host .outer-container .todo-container .menu .menu-item .menu-left .menu-icon yoo-icon.info {
-  background-color: var(--info, #d84c96);
+:host .outer-container .container #task-container .task additionnal-fields #comments {
+  padding-top: var(--spacing-08, 0.5rem);
 }
-:host .outer-container .todo-container .menu .menu-item .menu-left .menu-icon yoo-icon.danger {
-  background-color: var(--danger, #d44333);
+:host .outer-container .container #task-container .task additionnal-fields #comments comments-header {
+  display: flex;
 }
-: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 .container #task-container .task additionnal-fields #comments comments-header .comments-title {
+  margin: 0;
+  font-size: var(--font-size-12, 0.75rem);
 }
-:host .outer-container .todo-container .menu .menu-item .menu-left .border.border-pre {
-  height: 2.5rem;
+: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 .todo-container .menu .menu-item .menu-left .border.border-pre.last {
-  height: 1rem;
+:host .outer-container .container #task-container .task additionnal-fields #comments yoo-form-text-area {
+  font-size: var(--font-size-16, 1rem);
 }
-:host .outer-container .todo-container .menu .menu-item .menu-left .border.dark {
-  background-color: var(--dark, #000000);
+:host .outer-container .container #task-container .task additionnal-fields #comments[editModeComments] comments-header {
+  padding-bottom: var(--spacing-08, 0.5rem);
 }
-:host .outer-container .todo-container .menu .menu-item .menu-left .border.danger {
-  background-color: var(--danger, #d44333);
+:host .outer-container .container #task-container .task additionnal-fields #photo {
+  padding-top: var(--spacing-08, 0.5rem);
 }
-:host .outer-container .todo-container .menu .menu-item .menu-left .border.info {
-  background-color: var(--info, #d84c96);
+:host .outer-container .container #task-container .task additionnal-fields #photo photo-header {
+  display: flex;
 }
-:host .outer-container .todo-container .menu .menu-item .menu-right {
-  width: 100%;
-  margin-left: var(--spacing-08, 0.5rem);
-  overflow: hidden;
+: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 .todo-container .menu .menu-item .menu-right .menu-title {
-  font-weight: bold;
-  line-height: 1;
+: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 .todo-container .menu .menu-item .menu-right .menu-content {
-  color: var(--text-color, #807f83);
+:host .outer-container .container #task-container .task additionnal-fields #photo photo-header[withComments] {
+  padding-top: var(--spacing-08, 0.5rem);
 }
-:host .outer-container .todo-container .menu .menu-item .menu-right .menu-content.menu-chart {
-  margin-bottom: 0;
+:host .outer-container .container #task-container .task additionnal-fields #photo[editModePhoto] photo-header {
+  padding-bottom: var(--spacing-08, 0.5rem);
 }
-:host .outer-container .todo-container .menu .menu-item .menu-right .menu-title {
-  display: flex;
-  align-items: center;
-  height: 2rem;
+: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 .todo-container .menu .menu-item .menu-right .menu-content span {
-  margin-right: 0.5rem;
+:host .outer-container .container yoo-button p {
+  color: var(--app-color, #5a30f4);
 }
-:host .outer-container .todo-container .menu .menu-item .menu-right .menu-content yoo-avatar {
-  margin-right: 0.3125rem;
+:host .outer-container .container[status=finished] {
+  background: var(--success-10, rgba(58, 167, 109, 0.1));
 }
-: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 .container[status=unable-to-complete] {
+  background: var(--danger-10, rgba(212, 67, 51, 0.1));
 }
-: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 .container[status=unmarked] {
+  background: var(--stable-10, rgba(173, 173, 173, 0.1));
 }
-:host .outer-container .todo-container .menu .menu-item .menu-right .menu-content .dark {
-  color: var(--dark, #000000);
+: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 .outer-container .todo-container .menu .menu-item .menu-right .menu-content .success {
-  color: var(--success, #3aa76d);
+
+:host([readonly]) .outer-container .title {
+  margin-top: var(--spacing-04, 0.25rem);
 }
-:host .outer-container .todo-container .menu .menu-item .menu-right .menu-content .danger {
-  color: var(--danger, #d44333);
+:host([readonly]) .outer-container .container .task {
+  padding: var(--spacing-08, 0.5rem);
 }
-:host .outer-container .todo-container .menu .menu-item .menu-right .menu-content .text-color {
-  color: var(--text-color, #807f83);
+:host([readonly]) .outer-container .container .task line {
+  height: 0.0625rem;
+  margin-top: var(--spacing-16, 1rem);
 }
-:host .outer-container .todo-container .menu .menu-item .menu-right .menu-content table {
-  width: 100%;
-  table-layout: fixed;
+:host([readonly]) .outer-container .container[status=finished] .task line {
+  background-color: var(--success-20, rgba(58, 167, 109, 0.2));
 }
-:host .outer-container .todo-container .menu .menu-item .menu-right .menu-content table td {
-  overflow: hidden;
-  text-overflow: ellipsis;
+:host([readonly]) .outer-container .container[status=unable-to-complete] .task line {
+  background-color: var(--danger-20, rgba(212, 67, 51, 0.2));
 }
-: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 .container[status=unmarked] .task line {
+  background-color: var(--stable-20, rgba(173, 173, 173, 0.2));
 }
 
-:host(.readonly) .outer-container .title {
-  margin-top: 0.5rem;
+:host(.web) .outer-container .container yoo-button.assign {
+  max-width: 11.25rem;
 }
-:host(.readonly) .outer-container .todo-container {
-  margin-bottom: 0;
+:host(.web) .outer-container .container yoo-button.assign p {
+  font-size: var(--font-size-14, 0.875rem);
 }
 
 @media print {
-  :host .todo-container {
-    page-break-after: auto;
-    page-break-before: avoid;
+  :host .outer-container .title {
+    page-break-after: avoid;
+  }
+  :host .outer-container .container {
     page-break-inside: avoid;
   }
+}
+:host(.modal-view) {
+  max-height: 65%;
 }