@yoobic/yobi 8.7.3 → 8.7.5

package/dist/collection/components/form/form-product-batch/form-product-batch.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/components/form/form-products-sales/form-products-sales.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/components/form/form-progress-indicator/form-progress-indicator.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/components/form/form-qrcode/form-qrcode.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/components/form/form-query-builder/form-query-builder.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/components/form/form-radio/form-radio.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/components/form/form-range/form-range.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/components/form/form-ranking/form-ranking.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/components/form/form-recap-step/form-recap-step.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/components/form/form-recurrence/form-recurrence.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/components/form/form-recurrence-delay/form-recurrence-delay.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/components/form/form-recurrence-preview/form-recurrence-preview.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/components/form/form-reorder/form-reorder.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/components/form/form-scorm/form-scorm.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

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

@@ -28,7 +28,7 @@ export class YooFormScormComponent {
   componentWillLoad() {
     var _a;
     setValidator(this);
-    this.isPreview = window.location.href.indexOf(IRoute.missionviewer) >= 0 || window.location.href.indexOf(IRoute.courseeditor) >= 0 || ((_a = getSession()) === null || _a === void 0 ? void 0 : _a.isExternal);
+    this.isPreview = window.location.href.includes(IRoute.missionviewer) || window.location.href.includes(IRoute.courseeditor_id.replace(':id', '')) || ((_a = getSession()) === null || _a === void 0 ? void 0 : _a.isExternal);
     this.pastRegistration = null;
     this.fetchLocalizedScorm();
   }

package/dist/collection/components/form/form-signature-pad/form-signature-pad.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/components/form/form-signature-pad-dialog/form-signature-pad-dialog.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/components/form/form-star-rating/form-star-rating.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/components/form/form-swipe-cards/form-swipe-cards.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/components/form/form-swipe-cards/form-swipe-cards.js

@@ -327,6 +327,7 @@ export class YooFormSwipeCardsComponent {
     const onThrowing = () => {
       this.isDragging = false;
       const baseProps = { left: 0, top: 0 };
+      this.mainElement.classList.remove('swiper-no-swiping');
       if (isSwipeable(cardElement)) {
         const { isCardThrowable, swipedDirection } = this.getSwipedState(swipeAnimation.progress());
         !isCardThrowable
@@ -341,7 +342,10 @@ export class YooFormSwipeCardsComponent {
       bounds: this.mainElement.querySelector('#background'),
       type: 'left',
       zIndexBoost: false,
-      onPress: () => gsapSet(cardElement, { top: 0 }),
+      onPress: () => {
+        this.mainElement.classList.add('swiper-no-swiping');
+        gsapSet(cardElement, { top: 0 });
+      },
       onDragStart: onStartSwiping,
       onDrag() {
         onSwiping(this);

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

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/components/form/form-task/form-task.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

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

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.
@@ -285,29 +283,9 @@ svg:not(:root) {
   border: solid var(--border-width-01, 0.0625rem) var(--stable-alt, #d0d0d0);
   border-radius: var(--border-radius-04, 0.25rem);
 }
-:host p.mention-container::-webkit-input-placeholder,
-:host .outer-container textarea::-webkit-input-placeholder {
-  color: var(--text-color, #807f83);
-  font-weight: var(--font-weight-400, 400);
-  font-family: var(--font-family, "Varela Round", "Lato") !important;
-}
-:host p.mention-container:-moz-placeholder,
-:host .outer-container textarea:-moz-placeholder {
-  color: var(--text-color, #807f83);
-  font-weight: var(--font-weight-400, 400);
-  font-family: var(--font-family, "Varela Round", "Lato") !important;
-}
-:host p.mention-container::-moz-placeholder,
-:host .outer-container textarea::-moz-placeholder {
-  color: var(--text-color, #807f83);
-  font-weight: var(--font-weight-400, 400);
-  font-family: var(--font-family, "Varela Round", "Lato") !important;
-}
-:host p.mention-container:-ms-input-placeholder,
-:host .outer-container textarea:-ms-input-placeholder {
-  color: var(--text-color, #807f83);
-  font-weight: var(--font-weight-400, 400);
-  font-family: var(--font-family, "Varela Round", "Lato") !important;
+:host p.mention-container::placeholder,
+:host .outer-container textarea::placeholder {
+  color: var(--stable, #adadad);
 }
 :host p.mention-container.padding,
 :host .outer-container textarea.padding {
@@ -434,16 +412,7 @@ svg:not(:root) {
   font-size: var(--font-size-14, 0.875rem);
   line-height: 1.5rem;
 }
-:host([size=medium]) .outer-container textarea::-webkit-input-placeholder {
-  font-size: var(--font-size-14, 0.875rem);
-}
-:host([size=medium]) .outer-container textarea:-moz-placeholder {
-  font-size: var(--font-size-14, 0.875rem);
-}
-:host([size=medium]) .outer-container textarea::-moz-placeholder {
-  font-size: var(--font-size-14, 0.875rem);
-}
-:host([size=medium]) .outer-container textarea:-ms-input-placeholder {
+:host([size=medium]) .outer-container textarea::placeholder {
   font-size: var(--font-size-14, 0.875rem);
 }
 

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

@@ -1,4 +1,4 @@
-import { debounce, enableKeyboardResize, findParent, getAsyncExtraData, isFirefox, isIOS, isNativeMobile, isWeb, replaceAtTagToMentionTag, safeScrollIntoView, sanitizeInputValue, translate, translateMulti, updateLinkPreviews } from '@shared/utils';
+import { addKeyboardEventListener, debounce, disableKeyboardResize, enableKeyboardResize, findParent, getAsyncExtraData, isFirefox, isIOS, isNativeMobile, isWeb, removeKeyboardEventListeners, replaceAtTagToMentionTag, safeScrollIntoView, sanitizeInputValue, translate, translateMulti, updateLinkPreviews } from '@shared/utils';
 import { forceUpdate, h, Host, readTask, writeTask } from '@stencil/core';
 import { getAppContext, sanitizeHTML } from '@yobi/utils/helpers/common-helpers';
 import { onInputBlurred, onInputClear, onInputFocused, setValidator, setValueAndValidateInput } from '@yobi/utils/helpers/form-input-helpers';
@@ -46,6 +46,7 @@ export class YooFormTextAreaComponent {
     this.followCursor = false;
     this.isLocal = false;
     this.idOnly = false;
+    this.disableKeyboardResizing = false;
     this.rows = undefined;
     this.composeText = undefined;
     this.segmentsCount = undefined;
@@ -156,6 +157,14 @@ export class YooFormTextAreaComponent {
   componentWillLoad() {
     setValidator(this);
     this.value = this.sanitizeInputValue();
+    if (!this.disableKeyboardResizing && isNativeMobile() && isIOS()) {
+      addKeyboardEventListener('keyboardWillShow', () => {
+        enableKeyboardResize();
+      });
+      addKeyboardEventListener('keyboardWillHide', () => {
+        disableKeyboardResize();
+      });
+    }
     this.emitValueAndSetValidity = debounce((value, inputElement, forceNullValidation, validateInput, skipValueAssignment, preventInputChangedEvent) => {
       if (this.isLocal && this.idOnly) {
         value = formatIdOnlyMentions(value, this.mentionItems);
@@ -206,9 +215,6 @@ export class YooFormTextAreaComponent {
         this.inputEl.innerHTML = replaceIdToMentionTag(this.value, this.mentionItems);
       }
     }
-    if (isNativeMobile() && isIOS()) {
-      enableKeyboardResize();
-    }
     if (this.autoInitialRows && this.inputEl) {
       const { scrollHeight, clientHeight } = this.inputEl;
       if (clientHeight === scrollHeight) {
@@ -240,6 +246,9 @@ export class YooFormTextAreaComponent {
     if (this.windowClickListener) {
       window.removeEventListener('click', this.windowClickListener);
     }
+    if (!this.disableKeyboardResizing && isNativeMobile() && isIOS()) {
+      removeKeyboardEventListeners();
+    }
     this.inputEl = null;
   }
   sanitizeInputValue(value = this.value) {
@@ -1250,6 +1259,24 @@ export class YooFormTextAreaComponent {
         "attribute": "id-only",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "disableKeyboardResizing": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disable-keyboard-resizing",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

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

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

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

@@ -47,7 +47,7 @@ import 'froala-editor/js/languages/uk';
 import 'froala-editor/js/languages/zh_cn';
 import 'froala-editor/js/languages/zh_tw';
 import 'froala-editor/js/languages/vi';
-import { addKeyboardEventListener, asyncWaterfall, closeModal, debounce as _debounce, debounce, getAsyncExtraData, getColorSwatches, getCurrentLanguage, getCustomApp, getPermissions, getSession, getUUID, getVideoPoster, images, isAndroid, isCloudinaryLink, isImageUrl, isIOS, isNativeMobile, isSafari, isVideo, isWeb as _isWeb, removeKeyboardEventListeners, replaceAtTagToMentionTag, showContextMenu, showModal, translate, translateMulti, updateLinkPreviews, videos } from '@shared/utils';
+import { addKeyboardEventListener, asyncWaterfall, closeModal, debounce, getAsyncExtraData, getColorSwatches, getCurrentLanguage, getCustomApp, getPermissions, getSession, getUUID, getVideoPoster, images, isAndroid, isCloudinaryLink, isImageUrl, isIOS, isNativeMobile, isSafari, isVideo, isWeb as _isWeb, removeKeyboardEventListeners, replaceAtTagToMentionTag, showContextMenu, showModal, translate, translateMulti, updateLinkPreviews, videos } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 import { getAppContext, removeHtmlFromString } from '@yobi/utils/helpers/common-helpers';
 import { sanitizeMentionTag } from '@yobi/utils/helpers/entities-helpers';
@@ -165,7 +165,7 @@ export class YooFormTextEditorComponent {
       this.placeholder = 'YOOBICTYPEWITHMENTION';
     }
     this.setLocalValue();
-    this.emitValueAndSetValidity = _debounce((value, inputElement, forceNullValidation, validateInput, skipValueAssignment, preventInputChangedEvent) => {
+    this.emitValueAndSetValidity = debounce((value, inputElement, forceNullValidation, validateInput, skipValueAssignment, preventInputChangedEvent) => {
       setValueAndValidateInput(value, inputElement, forceNullValidation, validateInput, skipValueAssignment, preventInputChangedEvent);
       this.validityChanged.emit(this.validity);
     }, this.debounce || 0);
@@ -240,7 +240,7 @@ export class YooFormTextEditorComponent {
   openFullscreenModal() {
     const isWeb = _isWeb(this.host);
     const textEditor = document.createElement('yoo-form-text-editor');
-    textEditor.value = this.value;
+    textEditor.value = this.editor.html.get();
     textEditor.mentions = this.mentions;
     textEditor.otherIds = this.otherIds;
     textEditor.validators = this.validators;

package/dist/collection/components/form/form-time/form-time.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/components/form/form-timeslots/form-timeslots.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

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

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

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

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/components/form/form-todo-mission/form-todo-mission.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

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

@@ -302,10 +302,11 @@ export class YooFormTodoMissionComponent {
   render() {
     var _a;
     return !!((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) && (h(Host, { class: getAppContext(this.host), dir: document.dir }, h("div", { class: "outer-container" }, h("div", { class: "title" }, h("yoo-icon", { size: "medium", name: "mission", slot: "start" }), translate(this.header || 'YOOBICTASKS'), " (", this.values.length, ")"), this.values.map((task, index) => {
-      var _a, _b, _c, _d, _e, _f, _g;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _j;
       const status = this.updateTaskStatus(task, index);
-      return (h("main", { class: "container", ...{ status } }, h("section", { id: "task-container" }, this.renderLinkedField(task), task.field && h("p", { class: "linked-task" }, translate('YOOBICLINKEDTASK')), h("div", { class: "task" }, h("header", null, this.renderIcon(task, index), h("task-details", null, h("p", { class: "task-title" }, translateMulti((_a = task.text) === null || _a === void 0 ? void 0 : _a.value)), ((_b = task.comments) === null || _b === void 0 ? void 0 : _b.value) &&
-        h("p", { class: "task-description" }, (_c = task.comments) === null || _c === void 0 ? void 0 : _c.value), this.renderUser(task), this.renderDuedateTag(task), status === 'unable-to-complete' && (h("yoo-tag", { color: "danger", size: "small" }, translate('YOOBICMARKEDASUNABLETOCOMPLETE')))), !this.completed && this.renderPlusButton(task, index)), this.readonly && (task.userComments || (((_d = task.hasphoto) === null || _d === void 0 ? void 0 : _d.value) && task.imageData)) && h("line", null), (((_e = task.isphotorequired) === null || _e === void 0 ? void 0 : _e.value) || ((_f = task.showPhotos) === null || _f === void 0 ? void 0 : _f.value) || ((_g = task.showComments) === null || _g === void 0 ? void 0 : _g.value)) && (h("additionnal-fields", null, this.renderCommentsField(task, index, task.userComments), this.renderPhotoField(task, index))))), status === 'unmarked' && !this.completed && this.renderAssignButton(task, index)));
+      return (h("main", { class: "container", ...{ status } }, h("section", { id: "task-container" }, this.renderLinkedField(task), task.field && h("p", { class: "linked-task" }, translate('YOOBICLINKEDTASK')), h("div", { class: "task" }, h("header", null, this.renderIcon(task, index), h("task-details", null, h("p", { class: "task-title" }, translateMulti((_a = task.text) === null || _a === void 0 ? void 0 : _a.value)), ((_b = task.description) === null || _b === void 0 ? void 0 : _b.value) &&
+        h("p", { class: "task-description", innerHTML: (_c = task.description) === null || _c === void 0 ? void 0 : _c.value }, " "), ((_d = task.comments) === null || _d === void 0 ? void 0 : _d.value) &&
+        h("p", { class: "task-description" }, (_e = task.comments) === null || _e === void 0 ? void 0 : _e.value), this.renderUser(task), this.renderDuedateTag(task), status === 'unable-to-complete' && (h("yoo-tag", { color: "danger", size: "small" }, translate('YOOBICMARKEDASUNABLETOCOMPLETE')))), !this.completed && this.renderPlusButton(task, index)), this.readonly && (task.userComments || (((_f = task.hasphoto) === null || _f === void 0 ? void 0 : _f.value) && task.imageData)) && h("line", null), (((_g = task.isphotorequired) === null || _g === void 0 ? void 0 : _g.value) || ((_h = task.showPhotos) === null || _h === void 0 ? void 0 : _h.value) || ((_j = task.showComments) === null || _j === void 0 ? void 0 : _j.value)) && (h("additionnal-fields", null, this.renderCommentsField(task, index, task.userComments), this.renderPhotoField(task, index))))), status === 'unmarked' && !this.completed && this.renderAssignButton(task, index)));
     }))));
   }
   static get is() { return "yoo-form-todo-mission"; }

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

@@ -1,5 +1,5 @@
 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) => {
+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' }), h("span", { innerHTML: 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-task/form-todo-task.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

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

@@ -1,14 +1,15 @@
-import { closeModal, dateFormat, isDateAfter, isRTL, isWeb, resizeObserve, showActionSheet, translate } from '@shared/utils';
+import { closeModal, dateFormat, getPermissions, isDateAfter, isRTL, isWeb, resizeObserve, showActionSheet, showModal, translate } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 import { getAppContext } from '@yobi/utils/helpers/common-helpers';
-import { groupBy } from 'lodash-es';
+import { compact, groupBy } from 'lodash-es';
 import { Action } from './components/action';
 import { getScheduleElement } from './components/schedule';
 import { Tag } from './components/tag';
 export class YooFormTodoTaskComponent {
   constructor() {
+    var _a;
     this.validity = false;
-    this.actionableTags = [
+    this.actionableTags = compact([
       {
         action: {
           getDescription: () => translate('MANDATORYPHOTODESCRIPTION'),
@@ -48,8 +49,31 @@ export class YooFormTodoTaskComponent {
           },
           onRemove: () => this.updateValue({ ...this.value, duedate: { value: undefined } })
         }
+      },
+      ((_a = getPermissions()) === null || _a === void 0 ? void 0 : _a.canCreateAIContentWork) && {
+        action: {
+          getDescription: () => translate('YOOBICADDDESCRIPTION'),
+          getText: () => translate('DESCRIPTION'),
+          icon: 'text-predefined',
+          iconColor: 'text-color',
+          isPrimary: () => isWeb(this.host),
+          onClick: () => this.openDescription()
+        },
+        isTagged: () => { var _a, _b; return !!((_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.description) === null || _b === void 0 ? void 0 : _b.value); },
+        tag: {
+          getColor: () => 'text-color',
+          getText: () => { var _a, _b; return (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.description) === null || _b === void 0 ? void 0 : _b.value; },
+          icon: 'text-predefined',
+          onClick: (event) => {
+            if (!this.readonly || !isWeb(this.host)) {
+              event.stopPropagation();
+              this.openDescription();
+            }
+          },
+          onRemove: () => this.updateValue({ ...this.value, description: { value: '' } })
+        }
       }
-    ];
+    ]);
     this.actions = undefined;
     this.autofocus = true;
     this.readonly = false;
@@ -118,6 +142,23 @@ export class YooFormTodoTaskComponent {
     this.updateValidity();
     this.inputChanged.emit(value);
   }
+  async openDescription() {
+    var _a, _b;
+    const textEditor = document.createElement('yoo-form-text-editor');
+    textEditor.value = (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.description) === null || _b === void 0 ? void 0 : _b.value;
+    textEditor.required = true;
+    textEditor.isFullscreen = true;
+    showModal({
+      component: textEditor,
+      cssClass: 'fullscreen no-fade-in',
+      enterAnimation: isWeb(this.host) ? 'fadeEnterAnimation' : 'slideXEnterReverseAnimation',
+      leaveAnimation: isWeb(this.host) ? 'fadeLeaveAnimation' : 'slideXLeaveReverseAnimation'
+    }).then((ret) => {
+      if (ret === null || ret === void 0 ? void 0 : ret.data) {
+        this.updateValue({ ...this.value, description: { value: ret.data } });
+      }
+    });
+  }
   async openSchedule(target) {
     var _a, _b;
     const { schedule, showSchedule } = getScheduleElement(target, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.duedate) === null || _b === void 0 ? void 0 : _b.value, (date) => this.updateValue({ ...this.value, duedate: { value: date } }));

package/dist/collection/components/form/form-todo-task-list/form-todo-task-list.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

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

@@ -1,4 +1,4 @@
-import { findParent, getUUID, isWeb, showAlert, translate } from '@shared/utils';
+import { findParent, getPermissions, getUUID, isWeb, showAlert, translate } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 import { getAppContext } from '@yobi/utils/helpers/common-helpers';
 import { setValueAndValidateInput } from '@yobi/utils/helpers/form-input-helpers';
@@ -112,6 +112,23 @@ export class YooFormTodoTaskListComponent {
     }
     return result;
   }
+  hasAI() {
+    var _a;
+    return (_a = getPermissions()) === null || _a === void 0 ? void 0 : _a.canCreateAIContentWork;
+  }
+  async onAIFormValueChanged(data) {
+    var _a;
+    if (((_a = data === null || data === void 0 ? void 0 : data.tasks) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      data.tasks.forEach((task) => {
+        this.value.values.push({ _id: getUUID(), isphotorequired: { value: task.hasPhoto }, text: { value: task.title }, description: { value: data.preventDescription ? null : task.description } });
+      });
+      this.value = { ...this.value };
+      await this.updateValue(this.value);
+    }
+  }
+  renderAIForm() {
+    return h("ng-form-ai", { mode: "tasks", onInputChanged: (ev) => this.onAIFormValueChanged(ev === null || ev === void 0 ? void 0 : ev.detail) });
+  }
   render() {
     const { values } = this.value || {};
     const tasks = values || [];
@@ -134,7 +151,7 @@ export class YooFormTodoTaskListComponent {
       }, onTranslationValueUpdated: (event) => {
         event.stopPropagation();
         this.translationValueUpdated.emit(event.detail);
-      }, onValidityChanged: (event) => event.stopPropagation() }), web && h("yoo-icon", { color: "stable", hidden: index === this.editing, name: "draggable" }), web && h("yoo-icon", { color: "stable", hidden: index === this.editing, name: "delete", onClick: () => this.deleteTask(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() }, h("yoo-icon", { color: "app-color", name: "plus", size: web ? 'extra-small' : 'small', slot: "start" }), translate('ADDTASK'))));
+      }, onValidityChanged: (event) => event.stopPropagation() }), web && h("yoo-icon", { color: "stable", hidden: index === this.editing, name: "draggable" }), web && h("yoo-icon", { color: "stable", hidden: index === this.editing, name: "delete", onClick: () => this.deleteTask(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() }, h("yoo-icon", { color: "app-color", name: "plus", size: web ? 'extra-small' : 'small', slot: "start" }), translate('ADDTASK')), this.hasAI() && this.renderAIForm()));
   }
   static get is() { return "yoo-form-todo-task-list"; }
   static get encapsulation() { return "shadow"; }