@yoobic/yobi 8.6.20 → 8.6.22

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

@@ -2775,4 +2775,9 @@ svg:not(:root) {
 
 :host(.mbsc-popup-ctx) {
   position: absolute !important;
+}
+
+:host(.slides-page-break) .pdf-field-wrapper .slide-title {
+  page-break-before: always;
+  page-break-inside: avoid;
 }

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

@@ -2690,7 +2690,7 @@ export class YooFormDynamicComponent {
     const isAnswerValid = answerIsValid(getFieldValue(field, this.currentData, this.suffix), answer, field);
     const hasConfidenceLevel = this.forceReadonly && ((_d = (_c = this.currentData) === null || _c === void 0 ? void 0 : _c[field.name]) === null || _d === void 0 ? void 0 : _d.confidenceLevel);
     const fieldContent = () => {
-      var _a, _b;
+      var _a, _b, _c, _d;
       return [
         renderSlideTitle && !isPdfMultiplePhotos && slideTitle(),
         isAnswer && !!previousField && h("hr", { class: "answer-separator" }),
@@ -2731,9 +2731,10 @@ export class YooFormDynamicComponent {
                 'mission': this.isMission() || this.hasWorkflow(),
                 'mission-validation': this.isMissionValidation,
                 'pdf': this.isPdf,
+                'original-description': (_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.contains('original-description'),
                 [field.type]: true,
                 [(field === null || field === void 0 ? void 0 : field.extraClass) || '']: true
-              }, style: field.containerStyle, slotInputConfig: isPdfMultiplePhotos ? slotInputConfig : null, field: field, formType: this.formType, livePreview: this.isLivePreview(), required: required, readonly: readonly, allowFieldValidation: this.allowFieldValidation, commentsUser: this.commentsUser, validationCommentsUser: this.validationCommentsUser, hideComplianceTags: this.hideComplianceTags, forceReadonly: this.forceReadonly, forceDescription: this.forceDescription, comments: comments, validationComments: validationComments, markAsInvalid: markAsInvalid, markAsModified: markAsModified, originalMarkAsInvalid: originalMarkAsInvalid, time: time, useUppercaseLabel: this.host.classList.contains('login-sso'), size: this.formInputSize, onCommented: (ev) => this.onFieldCommented(ev, field), onValidationCommented: (ev) => this.onFieldValidationCommented(ev, field), onValidationMarkAsInvalid: (ev) => this.onFieldValidationMarkAsInvalid(ev, field), hideLabel: (_a = field.hideLabel) !== null && _a !== void 0 ? _a : field.type === FormFieldType.information, hideOptional: this.hideOptional || field.hideOptional || isFieldWithNoValue(field), onCommentFocused: (ev) => this.onFieldFocused(null, ev.detail), onHeaderClicked: (ev) => {
+              }, style: field.containerStyle, slotInputConfig: isPdfMultiplePhotos ? slotInputConfig : null, field: field, formType: this.formType, livePreview: this.isLivePreview(), required: required, readonly: readonly, allowFieldValidation: this.allowFieldValidation, commentsUser: this.commentsUser, validationCommentsUser: this.validationCommentsUser, hideComplianceTags: this.hideComplianceTags, forceReadonly: this.forceReadonly, forceDescription: this.forceDescription, comments: comments, validationComments: validationComments, markAsInvalid: markAsInvalid, markAsModified: markAsModified, originalMarkAsInvalid: originalMarkAsInvalid, time: time, useUppercaseLabel: this.host.classList.contains('login-sso'), size: this.formInputSize, onCommented: (ev) => this.onFieldCommented(ev, field), onValidationCommented: (ev) => this.onFieldValidationCommented(ev, field), onValidationMarkAsInvalid: (ev) => this.onFieldValidationMarkAsInvalid(ev, field), hideLabel: (_c = field.hideLabel) !== null && _c !== void 0 ? _c : field.type === FormFieldType.information, hideOptional: this.hideOptional || field.hideOptional || isFieldWithNoValue(field), onCommentFocused: (ev) => this.onFieldFocused(null, ev.detail), onHeaderClicked: (ev) => {
                 ev.stopPropagation();
                 this.onFormContainerClicked(slideIndex, inputIndex);
               }, onRemoved: (ev) => this.onFieldRemoved(ev), animated: isAnimationsDisabled() ? false : this.animated, fullscreen: [FormFieldType.textsequence, FormFieldType.swipecards].includes(field.type) }, !isPdfMultiplePhotos && inputFn())),
@@ -2743,7 +2744,7 @@ export class YooFormDynamicComponent {
               h("hr", { class: "answer-explanation-separator" }),
               h("yoo-form-explanation", { answer: isString(answer) || isNumber(answer) ? answer : undefined, document: field.explanationDocument, text: field.explanation })
             ],
-            hasConfidenceLevel && this.renderConfidenceFeedback((_b = this.currentData) === null || _b === void 0 ? void 0 : _b[field.name])
+            hasConfidenceLevel && this.renderConfidenceFeedback((_d = this.currentData) === null || _d === void 0 ? void 0 : _d[field.name])
           ]
           : null)
       ];
@@ -3100,7 +3101,7 @@ export class YooFormDynamicComponent {
     this.openPreview.emit('');
   }
   renderInput({ field, data, slideIndex, slideItems, inputIndex, readonly, cssClass, isHistory, previousField, slots }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
     const fieldState = getFieldState(field, this.fieldsState);
     const required = isRequired(field, this.currentData, this.currentDataFlatten, fieldState.visible, this.suffix, this.session);
     const disabled = isDisabled(field, this.currentData, this.currentDataFlatten, this.suffix, this.session);
@@ -3283,7 +3284,7 @@ export class YooFormDynamicComponent {
           isRange: field.multiple,
           size: field.size || this.formInputSize,
           clearable: true,
-          useISOString: !this.isLesson()
+          useISOString: (_f = (_e = (_d = this.formExtraOptions) === null || _d === void 0 ? void 0 : _d.extraData) === null || _e === void 0 ? void 0 : _e.useISOString) !== null && _f !== void 0 ? _f : (this.formType !== 'mission' && this.formType !== 'form-creator-preview' && !this.isLesson())
         };
         if (attrs.validators && field.isScheduleDate) {
           attrs.validators.push({ name: 'date', options: { isScheduleDate: true } });
@@ -3404,7 +3405,7 @@ export class YooFormDynamicComponent {
               !field.width &&
               !(previousField === null || previousField === void 0 ? void 0 : previousField.flex) &&
               !(previousField === null || previousField === void 0 ? void 0 : previousField.width),
-          model: ((_e = (_d = field.model) === null || _d === void 0 ? void 0 : _d.fields) === null || _e === void 0 ? void 0 : _e.length) ? field.model : null,
+          model: ((_h = (_g = field.model) === null || _g === void 0 ? void 0 : _g.fields) === null || _h === void 0 ? void 0 : _h.length) ? field.model : null,
           disableSingleDeselection: field.disableSingleDeselection,
           readonlyDisplay: field.readonlyDisplay,
           returnQuery: field.returnQuery,
@@ -3481,7 +3482,7 @@ export class YooFormDynamicComponent {
           tags: field.tags,
           fieldValues: field.values,
           isLocal: field.showUsers === false,
-          extraData: (_f = this.formExtraOptions) === null || _f === void 0 ? void 0 : _f.extraData,
+          extraData: (_j = this.formExtraOptions) === null || _j === void 0 ? void 0 : _j.extraData,
           onFetchData: (ev) => this.onFetchData(field, ev)
         };
         break;
@@ -3528,7 +3529,7 @@ export class YooFormDynamicComponent {
       case FormFieldType.chart:
         TagType = 'yoo-chart';
         if (field.chartConfig) {
-          const fields = compact(flatten((_g = this.slides) === null || _g === void 0 ? void 0 : _g.map((s) => s === null || s === void 0 ? void 0 : s.items)));
+          const fields = compact(flatten((_k = this.slides) === null || _k === void 0 ? void 0 : _k.map((s) => s === null || s === void 0 ? void 0 : s.items)));
           const fieldPrefixSuffix = '#';
           let textConfig = JSON.stringify(field.chartConfig);
           const toReplace = getFieldReplacement(textConfig, fields, this.suffix, fieldPrefixSuffix);
@@ -3681,11 +3682,11 @@ export class YooFormDynamicComponent {
         extraAttrs = {
           class: field.extraClass + ' ' + document.dir,
           flow: field.flow,
-          options: (_h = field.values) === null || _h === void 0 ? void 0 : _h.map(({ value }) => value),
+          options: (_l = field.values) === null || _l === void 0 ? void 0 : _l.map(({ value }) => value),
           value: value === undefined ? field.value : value,
-          helpers: (_j = field.values) === null || _j === void 0 ? void 0 : _j.map(({ helper }) => translate(helper))
+          helpers: (_m = field.values) === null || _m === void 0 ? void 0 : _m.map(({ helper }) => translate(helper))
         };
-        slots = (_k = field.values) === null || _k === void 0 ? void 0 : _k.map(({ label, slot }, index) => {
+        slots = (_o = field.values) === null || _o === void 0 ? void 0 : _o.map(({ label, slot }, index) => {
           const field = slideItems.find(({ name }) => name === slot);
           const isMobileDateTimeSlot = (field === null || field === void 0 ? void 0 : field.type) === FormFieldType.datetime && !isWeb(this.host);
           if (field) {
@@ -3701,7 +3702,7 @@ export class YooFormDynamicComponent {
       case FormFieldType.selectbuttons:
       case FormFieldType.selectbuttonsmulti: {
         const multiple = field.type === FormFieldType.selectbuttonsmulti || field.multiple;
-        const values = field.values || ((_l = field.opValues) === null || _l === void 0 ? void 0 : _l.find((opValue) => opValue));
+        const values = field.values || ((_p = field.opValues) === null || _p === void 0 ? void 0 : _p.find((opValue) => opValue));
         TagType = 'yoo-form-choice-button';
         attrs = {
           ...attrs,
@@ -3723,7 +3724,7 @@ export class YooFormDynamicComponent {
       case FormFieldType.select:
       case FormFieldType.selectmulti: {
         const multiple = field.type === FormFieldType.selectmulti || field.multiple || (Array.isArray(field.answer) && field.answer.length >= 2);
-        const values = field.values || ((_m = field.opValues) === null || _m === void 0 ? void 0 : _m.find((opValue) => opValue));
+        const values = field.values || ((_q = field.opValues) === null || _q === void 0 ? void 0 : _q.find((opValue) => opValue));
         TagType = 'yoo-form-choice-radio';
         attrs = {
           ...attrs,
@@ -3737,7 +3738,7 @@ export class YooFormDynamicComponent {
           allowOther: field.allowOther,
           useTranslate: field.translate,
           disableSingleDeselection: field.disableSingleDeselection,
-          shuffled: (_o = field.shuffled) !== null && _o !== void 0 ? _o : this.formType === 'lesson',
+          shuffled: (_r = field.shuffled) !== null && _r !== void 0 ? _r : this.formType === 'lesson',
           answer: field.answer,
           class: field.extraClass,
           description: field.description,
@@ -3750,7 +3751,7 @@ export class YooFormDynamicComponent {
         break;
       }
       case FormFieldType.selectchat: {
-        const values = field.values || ((_p = field.opValues) === null || _p === void 0 ? void 0 : _p.find((opValue) => opValue));
+        const values = field.values || ((_s = field.opValues) === null || _s === void 0 ? void 0 : _s.find((opValue) => opValue));
         TagType = 'yoo-form-choice-chat';
         attrs = {
           ...attrs,
@@ -3768,7 +3769,7 @@ export class YooFormDynamicComponent {
         break;
       }
       case FormFieldType.selectimage: {
-        const values = flatten((field === null || field === void 0 ? void 0 : field.complexSelectImageValues) || (field === null || field === void 0 ? void 0 : field.values) || ((_q = field === null || field === void 0 ? void 0 : field.opValues) === null || _q === void 0 ? void 0 : _q.find((opValue) => opValue || [])));
+        const values = flatten((field === null || field === void 0 ? void 0 : field.complexSelectImageValues) || (field === null || field === void 0 ? void 0 : field.values) || ((_t = field === null || field === void 0 ? void 0 : field.opValues) === null || _t === void 0 ? void 0 : _t.find((opValue) => opValue || [])));
         TagType = 'yoo-form-choice-image';
         attrs = {
           ...attrs,
@@ -3776,8 +3777,8 @@ export class YooFormDynamicComponent {
         };
         extraAttrs = {
           ...extraAttrs,
-          answer: (_s = (_r = [field.answer]) === null || _r === void 0 ? void 0 : _r.flat()) === null || _s === void 0 ? void 0 : _s.filter((item) => typeof item === 'object' ? item.text && item.image : item),
-          values: (_t = values === null || values === void 0 ? void 0 : values.map((value, index) => { var _a, _b, _c, _d, _e; return ({ image: value.image || value._downloadURL || value.file || ((_b = (_a = field.images) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b._downloadURL), text: (_e = (_d = (_c = value.text) === null || _c === void 0 ? void 0 : _c.text) !== null && _d !== void 0 ? _d : value.text) !== null && _e !== void 0 ? _e : value }); })) === null || _t === void 0 ? void 0 : _t.filter((item) => typeof item === 'object' ? item.text && item.image : item),
+          answer: (_v = (_u = [field.answer]) === null || _u === void 0 ? void 0 : _u.flat()) === null || _v === void 0 ? void 0 : _v.filter((item) => typeof item === 'object' ? item.text && item.image : item),
+          values: (_w = values === null || values === void 0 ? void 0 : values.map((value, index) => { var _a, _b, _c, _d, _e; return ({ image: value.image || value._downloadURL || value.file || ((_b = (_a = field.images) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b._downloadURL), text: (_e = (_d = (_c = value.text) === null || _c === void 0 ? void 0 : _c.text) !== null && _d !== void 0 ? _d : value.text) !== null && _e !== void 0 ? _e : value }); })) === null || _w === void 0 ? void 0 : _w.filter((item) => typeof item === 'object' ? item.text && item.image : item),
           multiple: field.multiple,
           description: field.description,
           useTranslate: field.translate,
@@ -3787,7 +3788,7 @@ export class YooFormDynamicComponent {
       }
       case FormFieldType.selectcard: {
         const multiple = field.multiple;
-        const values = field.values || ((_u = field.opValues) === null || _u === void 0 ? void 0 : _u.find((opValue) => opValue));
+        const values = field.values || ((_x = field.opValues) === null || _x === void 0 ? void 0 : _x.find((opValue) => opValue));
         TagType = 'yoo-form-choice-card';
         attrs = {
           ...attrs,
@@ -3862,7 +3863,7 @@ export class YooFormDynamicComponent {
           collectionName: field.collectionName,
           entityType: field.entityType,
           iconPrefix: field.iconPrefix,
-          descriptionTemplate: data.isUnitCurrency && ((_v = data.currency) === null || _v === void 0 ? void 0 : _v.symbol) ? `${data.currency.symbol} {{text}}` : null,
+          descriptionTemplate: data.isUnitCurrency && ((_y = data.currency) === null || _y === void 0 ? void 0 : _y.symbol) ? `${data.currency.symbol} {{text}}` : null,
           max: field.max,
           queryFields: field.queryFields,
           model: field.model,
@@ -3871,7 +3872,7 @@ export class YooFormDynamicComponent {
           onFetchCustomData: (ev) => this.onFetchCustomData(field, ev),
           onFetchData: (ev) => this.onFetchData(field, ev)
         };
-        if (attrs.validators && ((_w = config === null || config === void 0 ? void 0 : config.validators) === null || _w === void 0 ? void 0 : _w.length)) {
+        if (attrs.validators && ((_z = config === null || config === void 0 ? void 0 : config.validators) === null || _z === void 0 ? void 0 : _z.length)) {
           attrs.validators.push(...config.validators);
         }
         break;
@@ -4004,7 +4005,7 @@ export class YooFormDynamicComponent {
           logo: field.logo,
           value: value || field.value,
           description: field.description,
-          whiteLabel: (_x = getSession().tenant) === null || _x === void 0 ? void 0 : _x.waitlistWhitelabel,
+          whiteLabel: (_0 = getSession().tenant) === null || _0 === void 0 ? void 0 : _0.waitlistWhitelabel,
           showIllustration: field.showIllustration,
           showShareLink: field.showShareLink,
           showDownload: field.showDownload
@@ -4330,7 +4331,7 @@ export class YooFormDynamicComponent {
         if (field.collapsible) {
           return (h("yoo-collapsible", { iconSize: "medium", class: "secondary", slotHeader: true }, h("span", { slot: "title", style: field.style || {} }, field.title), h("span", { innerHTML: markdown || value })));
         }
-        if (((_y = field.valuesIcon) === null || _y === void 0 ? void 0 : _y.length) > 0) {
+        if (((_1 = field.valuesIcon) === null || _1 === void 0 ? void 0 : _1.length) > 0) {
           return [
             markdown && h("div", { class: "info-header" }, markdown),
             field.valuesIcon.map((item) => {
@@ -4379,7 +4380,7 @@ export class YooFormDynamicComponent {
           instructionsDocument: field.instructionsDocument,
           categories: field.categories,
           images: field.images,
-          showInstructionView: (_z = field.showInstructionView) !== null && _z !== void 0 ? _z : true,
+          showInstructionView: (_2 = field.showInstructionView) !== null && _2 !== void 0 ? _2 : true,
           mode: field.swipeMode
         };
         break;
@@ -4391,7 +4392,7 @@ export class YooFormDynamicComponent {
         };
         break;
       case FormFieldType.imagetagging:
-        field.answer = (_0 = field.annotations) === null || _0 === void 0 ? void 0 : _0.map(({ text }) => extractTextFromStringHTML(text).trim());
+        field.answer = (_3 = field.annotations) === null || _3 === void 0 ? void 0 : _3.map(({ text }) => extractTextFromStringHTML(text).trim());
         TagType = 'yoo-form-image-tagging';
         extraAttrs = {
           ...extraAttrs,
@@ -4654,7 +4655,7 @@ export class YooFormDynamicComponent {
     return (h("div", { class: "history-top-action" }, h("div", { class: "title" }, translate('HISTORY'))));
   }
   renderHistoryHeader(avatarData, date) {
-    return (h("div", { class: "history-header" }, h("div", { class: "avatar" }, h("yoo-avatar", { size: "extra-small", user: avatarData })), h("div", { class: "date" }, pipes.dateFormat.transform(date, 'L LT'))));
+    return (h("div", { class: "history-header" }, h("div", { class: "avatar" }, h("yoo-avatar", { size: "extra-small", user: avatarData })), h("div", { class: "date" }, pipes.dateFormat.transform(date, `${translate('FORMATDATE')} ${translate('FORMATTIME')}`))));
   }
   renderHistory(field, slideIndex, slideItems, inputIndex) {
     return this.history && this.history.length > 0 && !isFieldWithNoValue(field) && field.allowHistory && this.history.some((data) => hasValue(field, data, this.suffix)) ? (h("div", { class: "history swiper-no-swiping" }, this.renderHistoryTopAction(), h("yoo-ion-scroll", { class: "relative no-contain", horizontalMode: true, showScrollbar: this.isWeb }, this.history.map((data) => {

package/dist/collection/components/form/form-input-container/form-input-container.css

@@ -621,10 +621,12 @@ svg:not(:root) {
   border-radius: var(--border-radius-04, 0.25rem);
 }
 :host .optional {
-  margin-left: var(--spacing-08, 0.5rem) !important;
   color: var(--stable, #adadad);
   white-space: nowrap;
 }
+:host .optional-space {
+  margin-inline-end: var(--spacing-08, 0.5rem);
+}
 :host .full-width {
   width: 100%;
 }
@@ -649,17 +651,28 @@ svg:not(:root) {
   font-weight: bold;
   text-align: left;
 }
-:host .description .label,
+:host .description .field-description,
+:host .top-container .field-description {
+  flex: 1;
+}
 :host .description .optional,
-:host .top-container .label,
-:host .top-container .optional {
-  position: relative;
+:host .description .optional-space,
+:host .top-container .optional,
+:host .top-container .optional-space {
+  display: inline;
+}
+:host .description .label,
+:host .top-container .label {
   display: flex;
   flex-direction: row;
   align-items: center;
+}
+:host .description .label,
+:host .description .optional,
+:host .top-container .label,
+:host .top-container .optional {
   font-weight: var(--font-weight-400, 400);
   line-height: 1.5;
-  text-align: left;
   word-break: break-word;
   overflow-wrap: break-word;
 }
@@ -744,9 +757,14 @@ svg:not(:root) {
 :host .description .description,
 :host .top-container .description {
   display: flex;
+  flex-wrap: wrap;
   align-items: flex-start;
   font-size: var(--font-size-16, 1rem);
 }
+:host .description .description .flex-wrap,
+:host .top-container .description .flex-wrap {
+  flex-basis: 100%;
+}
 :host .description .description span p,
 :host .top-container .description span p {
   margin-top: 0;
@@ -980,19 +998,20 @@ svg:not(:root) {
   background: var(--danger-10, rgba(212, 67, 51, 0.1));
 }
 
+:host(.mission[readonly]:not(.original-description)) .top-container .label .field-title-name,
+:host(.mission[readonly]:not(.original-description)) .top-container .label .field-description,
+:host(.mission[readonly]:not(.original-description)) .top-container .description .field-title-name,
+:host(.mission[readonly]:not(.original-description)) .top-container .description .field-description {
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
 :host(.mission[readonly]) {
   margin-top: var(--spacing-08, 0.5rem);
   margin-bottom: var(--spacing-08, 0.5rem);
   padding: var(--spacing-08, 0.5rem);
   border-radius: var(--border-radius-08, 0.5rem);
 }
-:host(.mission[readonly]) .top-container .label .field-title-name,
-:host(.mission[readonly]) .top-container .label .field-description,
-:host(.mission[readonly]) .top-container .description .field-title-name,
-:host(.mission[readonly]) .top-container .description .field-description {
-  font-weight: bold;
-  text-transform: uppercase;
-}
 
 :host(.line) {
   display: flex;
@@ -1140,6 +1159,15 @@ svg:not(:root) {
 :host([form-type$=lesson]) .top-container .label {
   background-color: var(--light, #ffffff);
 }
+:host([form-type$=lesson]) .top-container .description .optional,
+:host([form-type$=lesson]) .top-container .instructions .optional,
+:host([form-type$=lesson]) .top-container .label .optional {
+  font-size: var(--font-size-16, 1rem);
+}
+:host([form-type$=lesson]) .top-container .label .field-title-name {
+  display: flex;
+  align-items: center;
+}
 :host([form-type$=lesson]) .top-container .media-description {
   font-size: var(--font-size-16, 1rem);
 }

package/dist/collection/components/form/form-input-container/form-input-container.js

@@ -64,11 +64,11 @@ export class YooFormInputContainerComponent {
   initKeyboardListeners() {
     if (isNativeMobile() && this.fieldType === 'number') {
       addKeyboardEventListener('keyboardDidShow', () => {
-        const image = this.descriptionElement.querySelector('.field-description.full-width img');
+        const image = this.descriptionElement.querySelector('.field-description img');
         image && (image.style.display = 'none');
       });
       addKeyboardEventListener('keyboardDidHide', () => {
-        const image = this.descriptionElement.querySelector('.field-description.full-width img');
+        const image = this.descriptionElement.querySelector('.field-description img');
         image && (image.style.display = 'block');
       });
     }
@@ -249,7 +249,7 @@ export class YooFormInputContainerComponent {
     return (h("div", { ref: (el) => (this.descriptionElement = el), onClick: (ev) => this.onRTEContentClick(ev), class: (this.isMedia(true) ? 'media-description fr-view' : 'description fr-view') +
         (this.invalid ? ' invalid ' : ' ') +
         this.getComponentDescriptionExtraClass() +
-        (this.field.showDescriptionAndTitle ? 'sub-description' : '') }, h("span", { class: "field-description full-width", innerHTML: translateMulti(this.field.description) }), h("span", { class: "extra-options-container" }, this.renderOptional(), this.renderRightSide(!!this.field.title && !!this.field.help))));
+        (this.field.showDescriptionAndTitle ? 'sub-description' : '') }, h("span", { class: "field-description", innerHTML: translateMulti(this.field.description) }), h("div", { class: "flex-wrap" }, this.renderOptional()), h("span", { class: "extra-options-container" }, this.renderRightSide(!!this.field.title && !!this.field.help))));
   }
   renderOptional() {
     return this.showOptional() && h("span", { class: "optional" }, "(", translate('OPTIONAL'), ")");
@@ -265,7 +265,7 @@ export class YooFormInputContainerComponent {
     const hasRightSide = this.markAsInvalid || this.time || fieldhelp || !!this.host.querySelector('[slot="right-side"]');
     return (hasRightSide && [
       fieldhelp && !this.field.hideTooltip && !hideTooltip && !(this.field.helpHiddenReadonly && this.readonly) && (h("yoo-tooltip", { hoverable: isWeb(this.host), content: this.getHelpContent(fieldhelp), placement: "top-end" }, h("yoo-icon", { class: "margin-left", size: this.field.tooltipSize ? this.field.tooltipSize : isWeb(this.host) ? 'small' : 'medium', name: "help", color: this.field.tooltipColor || 'stable-alt' }))),
-      h("div", { class: "right-side" }, h("slot", { name: "right-side" }), this.markAsInvalid && (h("yoo-tag", { size: "extra-small", class: "not-compliant", color: "danger" }, translate('NOTSATISFACTORY'))), this.time && (h("yoo-tooltip", { hoverable: isWeb(this.host), content: translate('LASTEDIT') + ': ' + pipes.dateFormat.transform(this.time, 'L LT'), placement: "top-end" }, h("yoo-icon", { size: isWeb(this.host) ? 'small' : 'medium', class: "recent", name: "recent" }))))
+      h("div", { class: "right-side" }, h("slot", { name: "right-side" }), this.markAsInvalid && (h("yoo-tag", { size: "extra-small", class: "not-compliant", color: "danger" }, translate('NOTSATISFACTORY'))), this.time && (h("yoo-tooltip", { hoverable: isWeb(this.host), content: translate('LASTEDIT') + ': ' + pipes.dateFormat.transform(this.time, `${translate('FORMATDATE')} ${translate('FORMATTIME')}`), placement: "top-end" }, h("yoo-icon", { size: isWeb(this.host) ? 'small' : 'medium', class: "recent", name: "recent" }))))
     ]);
   }
   renderOriginalMarkAsInvalid() {
@@ -289,7 +289,7 @@ export class YooFormInputContainerComponent {
         invalid: this.invalid,
         'field-heading': this.host.classList.contains('login-screen'),
         'password-title': this.field && this.fieldType === FormFieldType.password
-      }, onClick: () => this.headerClicked.emit() }, !this.hideLabel && h("span", { class: contentClass, innerHTML: this.getFieldTitle() }), this.renderOptional(), this.renderRightSide()));
+      }, onClick: () => this.headerClicked.emit() }, !this.hideLabel && h("span", { class: contentClass, innerHTML: this.getFieldTitle() }, this.showOptional() && h("span", { class: "optional-space" }), this.renderOptional()), this.renderRightSide()));
   }
   renderDefaultInstructions() {
     return (h("span", { class: {

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

@@ -2,7 +2,7 @@ import { TIMEZONES } from '@shared/interfaces';
 import { getRecurrences, guessCurrentTimezone, pipes, translate } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 const EmptyState = () => [h("yoo-empty-state", null), h("p", null, translate('LISTEMPTY'))];
-const Recurrences = ({ dates, label }) => (h("div", { class: "recurrences" }, h("h1", null, translate(label)), h("table", null, h("thead", null, h("tr", null, h("th", null, translate('YOOBICDATE')), h("th", null, translate('YOOBICHOUR')))), h("tbody", null, dates.map((date) => (h("tr", null, h("td", null, pipes.dateFormat.transform(date, 'ddd L')), h("td", null, pipes.dateFormat.transform(date, 'LT')))))))));
+const Recurrences = ({ dates, label }) => (h("div", { class: "recurrences" }, h("h1", null, translate(label)), h("table", null, h("thead", null, h("tr", null, h("th", null, translate('YOOBICDATE')), h("th", null, translate('YOOBICHOUR')))), h("tbody", null, dates.map((date) => (h("tr", null, h("td", null, pipes.dateFormat.transform(date, `ddd ${translate('FORMATDATE')}`)), h("td", null, pipes.dateFormat.transform(date, translate('FORMATTIME'))))))))));
 const Timezones = ({ value, values, onUpdate }) => (h("div", { class: "timezones" }, h("p", { innerHTML: translate('RECURRENCEPREVIEWDETAILS') }), h("h1", null, translate('RECURRENCEPREVIEWTIMEZONE')), h("yoo-form-autocomplete", { size: "medium", value: value, values: values, onFetchData: (event) => { var _a; return (_a = event.detail.infiniteScroll) === null || _a === void 0 ? void 0 : _a.complete(); }, onInputChanged: (event) => {
     event.stopPropagation();
     onUpdate(event.detail);

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

@@ -130,7 +130,7 @@ export class YooFormTaskComponent {
         return [
           h("div", { class: "task" }, h("div", { class: "task-part" }, t.text.value ? (h("div", { class: tStyle.style + ' description-container' }, this.readonly ? null : h("yoo-icon", { name: tStyle.icon }), h("div", { class: "text-container" }, h("span", { class: 'text ' + tStyle.breakText }, translateMulti(t.text.value))))) : null), this.isHistory ? null : (h("div", { class: "task-part" }, t.user && t.user.value
             ? [h("yoo-avatar", { size: "small", user: t.user.value }), this.isPdf && h("div", { class: "user" }, getUserDisplayName(t.user.value))]
-            : null, t.duedate && t.duedate.value ? h("span", { class: "date" }, pipes.dateFormat.transform(t.duedate.value, 'L')) : null, !this.readonly && (h("yoo-button", { fill: "transparent", shape: "circular", color: "stable", onClick: (ev) => this.onShowActionsMenu(ev, t, i), ref: (el) => (this.actionsButton = el) }, h("yoo-icon", { name: "more", color: "stable" })))))),
+            : null, t.duedate && t.duedate.value ? h("span", { class: "date" }, pipes.dateFormat.transform(t.duedate.value, translate('FORMATDATE'))) : null, !this.readonly && (h("yoo-button", { fill: "transparent", shape: "circular", color: "stable", onClick: (ev) => this.onShowActionsMenu(ev, t, i), ref: (el) => (this.actionsButton = el) }, h("yoo-icon", { name: "more", color: "stable" })))))),
           this.readonly ? null : h("div", { class: "border" })
         ];
       })

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

@@ -150,7 +150,7 @@ export class YooFormTimeComponent {
     return (h("yoo-button", { color: "app-color", class: "expanded", onClick: this.setCurrentTime }, translate('YOOBICADD')));
   }
   renderReadonly() {
-    return h("div", { class: "readonly" }, pipes.dateFormat.transform(this.value, 'LT'));
+    return h("div", { class: "readonly" }, pipes.dateFormat.transform(this.value, translate('FORMATTIME')));
   }
   renderEditable() {
     return (h("div", { class: "time-input-container" }, h("div", { class: "time-input-header" }, translate('YOOBICTIME')), h("div", { class: "flex time-inputs" }, this.renderHoursInput(), this.renderMinutesInput(), !this.is24Hour && this.renderAmPmContainer(), this.type === 'time' && this.renderAddButton())));

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

@@ -115,7 +115,7 @@ export class YooFormTodoComponent {
     return this.value.values.map((t) => {
       const tStyle = taskStyle(t.finished);
       return [
-        h("div", { class: "task" }, h("div", { class: "task-part" }, t.text.value ? (h("div", { class: tStyle.style }, h("yoo-icon", { class: tStyle.icon }), h("span", { class: 'text ' + tStyle.breakText }, translateMulti(t.text.value)))) : null, t.duedate && t.duedate.value ? (h("div", { class: "subtitle" }, h("span", { class: "date-label" }, translate('DUEDATE'), ":"), h("span", null, " ", pipes.dateFormat.transform(t.duedate.value, 'L')))) : null), h("div", { class: "task-part" }, t.comments && t.comments.value ? h("div", { class: "subtitle" }, " ", t.comments.value) : null, t.finished && t.finished.date ? (h("div", { class: "subtitle" }, h("span", { class: "date-label" }, translate('YOOBICFINISHEDDATE'), ":"), h("span", null, " ", pipes.dateFormat.transform(t.finished.date, 'L LT')))) : null, t.hasphoto ? h("div", { class: "subtitle photo cursor" }) : null, t.userComments ? h("div", { class: "subtitle" }, " ", t.userComments) : null)),
+        h("div", { class: "task" }, h("div", { class: "task-part" }, t.text.value ? (h("div", { class: tStyle.style }, h("yoo-icon", { class: tStyle.icon }), h("span", { class: 'text ' + tStyle.breakText }, translateMulti(t.text.value)))) : null, t.duedate && t.duedate.value ? (h("div", { class: "subtitle" }, h("span", { class: "date-label" }, translate('DUEDATE'), ":"), h("span", null, " ", pipes.dateFormat.transform(t.duedate.value, translate('FORMATDATE'))))) : null), h("div", { class: "task-part" }, t.comments && t.comments.value ? h("div", { class: "subtitle" }, " ", t.comments.value) : null, t.finished && t.finished.date ? (h("div", { class: "subtitle" }, h("span", { class: "date-label" }, translate('YOOBICFINISHEDDATE'), ":"), h("span", null, " ", pipes.dateFormat.transform(t.finished.date, `${translate('FORMATDATE')} ${translate('FORMATTIME')}`)))) : null, t.hasphoto ? h("div", { class: "subtitle photo cursor" }) : null, t.userComments ? h("div", { class: "subtitle" }, " ", t.userComments) : null)),
         h("div", { class: "border" })
       ];
     });

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

@@ -152,7 +152,7 @@ export class YooFormTodoDialogComponent {
     return (h("div", { slot: "end" }, h("div", { class: "tasks" }, h("div", { class: "field-placeholder" }, h("yoo-form-input-container", { field: { title: translate('YOOBICACTIONS') }, hideOptional: true }, h("div", { class: "input-container" }, h("yoo-form-input", { ref: (el) => (this.formInputTaskEditEl = el), class: "task-edit", onInputChanged: (event) => this.onInputChanged(event), onValidityChanged: (ev) => ev.stopPropagation(), onEnterPressed: () => this.onEnterPressed(), size: isWeb(this.host) ? 'medium' : 'large' }), h("div", { class: "icon" }, h("yoo-icon", { name: "plus", color: "app-color", onClick: () => this.onAddTask() }))))), !!((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) && (h("div", { class: "field-placeholder" }, h("yoo-form-input-container", { field: { title: translate('ADDPREDEFINEDTASKS') }, hideOptional: true }, h("yoo-form-autocomplete", { ref: (el) => (this.autocompleteEl = el), class: "predefined", displayType: "card-list", values: this.values.map((v) => ({ _id: v, title: v })), multiple: true, onValidityChanged: (ev) => ev.stopPropagation(), onInputChanged: (ev) => this.onSelect(ev), size: isWeb(this.host) ? 'medium' : 'large' }))))), h("div", { class: "tasks-container" }, h("div", { class: "title" }, translate('LISTOFACTIONS')), this.todo &&
       this.todo.values &&
       this.todo.values.map((todoValue) => [
-        h("div", { class: "task" }, h("div", { class: "task-part" }, h("span", { class: "text" }, translateMulti(todoValue.text.value))), h("div", { class: "task-part" }, todoValue.duedate && todoValue.duedate.value && h("span", { class: "date" }, pipes.dateFormat.transform(todoValue.duedate.value, 'L')), isWeb(this.host) ?
+        h("div", { class: "task" }, h("div", { class: "task-part" }, h("span", { class: "text" }, translateMulti(todoValue.text.value))), h("div", { class: "task-part" }, todoValue.duedate && todoValue.duedate.value && h("span", { class: "date" }, pipes.dateFormat.transform(todoValue.duedate.value, translate('FORMATDATE'))), isWeb(this.host) ?
           h("yoo-context-menu", { contentButtons: this.getContextMenuActions(todoValue) }, h("yoo-icon", { name: "more" })) :
           h("yoo-button", { fill: "transparent", color: "dark", shape: "circular", onClick: (ev) => showActionSheet(this.getContextMenuActions(todoValue), '', {}, ev.composedPath()[0], ev) }, h("yoo-icon", { name: "more" })))),
         h("div", { class: "border" })

package/dist/collection/components/form/image-cropper-dialog/pintura/pintura.js

@@ -203,7 +203,7 @@ var canOrientImages = () => new Promise((resolve) => {
 
 var canvasToImageData = (canvas) => {
     const imageData = canvas
-        .getContext('2d')
+        .getContext('2d', { willReadFrequently: true })
         .getImageData(0, 0, canvas.width, canvas.height);
     return imageData;
 };
@@ -248,7 +248,7 @@ var getImageOrientationMatrix = (width, height, orientation = -1) => {
 var releaseCanvas = (canvas) => {
     canvas.width = 1;
     canvas.height = 1;
-    const ctx = canvas.getContext('2d');
+    const ctx = canvas.getContext('2d', { willReadFrequently: true });
     ctx && ctx.clearRect(0, 0, 1, 1);
 };
 
@@ -259,14 +259,14 @@ var imageDataToCanvas = async (imageData, orientation = 1) => {
         ? [imageData.width, imageData.height]
         : [imageData.height, imageData.width];
     const canvas = h('canvas', { width, height });
-    const ctx = canvas.getContext('2d');
+    const ctx = canvas.getContext('2d', { willReadFrequently: true });
     // transform image data ojects into in memory canvas elements so we can transform them (putImageData isn't affect by transforms)
     if (isImageData(imageData) && !(await canOrientImages()) && orientation > 1) {
         const inMemoryCanvas = h('canvas', {
             width: imageData.width,
             height: imageData.height,
         });
-        const ctx = inMemoryCanvas.getContext('2d');
+        const ctx = inMemoryCanvas.getContext('2d', { willReadFrequently: true });
         ctx.putImageData(imageData, 0, 0);
         imageData = inMemoryCanvas;
     }
@@ -343,7 +343,7 @@ var imageToCanvas = (image, { width, height, canvasMemoryLimit, }) => {
     const canvas = h('canvas');
     canvas.width = canvasWidth;
     canvas.height = canvasHeight;
-    const ctx = canvas.getContext('2d');
+    const ctx = canvas.getContext('2d', { willReadFrequently: true });
     ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight);
     return canvas;
 };
@@ -463,7 +463,7 @@ var blobToImageData = async (imageBlob, canvasMemoryLimit) => {
                     }
                     // @ts-ignore OffscreenCanvas unkown to TypeScript
                     const canvas = new OffscreenCanvas(canvasWidth, canvasHeight);
-                    const ctx = canvas.getContext('2d');
+                    const ctx = canvas.getContext('2d', { willReadFrequently: true });
                     ctx.drawImage(bitmap, 0, 0, canvasWidth, canvasHeight);
                     const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                     done(null, imageData);
@@ -1361,7 +1361,7 @@ var imageToFile = async (imageElement) => {
         const canvas = document.createElement('canvas');
         canvas.width = size.width;
         canvas.height = size.height;
-        const ctx = canvas.getContext('2d');
+        const ctx = canvas.getContext('2d', { willReadFrequently: true });
         ctx.drawImage(image, 0, 0);
         const blob = await canvasToBlob(canvas);
         return blobToFile(blob, getFilenameFromURL(image.src));
@@ -1588,13 +1588,13 @@ var cropImageData = async (imageData, options = {}) => {
         width: imageData.width,
         height: imageData.height,
     });
-    image.getContext('2d').putImageData(imageData, 0, 0);
+    image.getContext('2d', { willReadFrequently: true }).putImageData(imageData, 0, 0);
     // flip image data
     if (shouldFlip) {
         const ctx = h('canvas', {
             width: image.width,
             height: image.height,
-        }).getContext('2d');
+        }).getContext('2d', { willReadFrequently: true });
         ctxScale(ctx, flipX ? -1 : 1, flipY ? -1 : 1);
         ctx.drawImage(image, flipX ? -image.width : 0, flipY ? -image.height : 0);
         ctx.restore();
@@ -1608,7 +1608,7 @@ var cropImageData = async (imageData, options = {}) => {
         const ctx = h('canvas', {
             width: crop.width,
             height: crop.height,
-        }).getContext('2d');
+        }).getContext('2d', { willReadFrequently: true });
         ctxTranslate(ctx, -crop.x, -crop.y);
         ctxRotate(ctx, rotation, sizeCenter(outputSize));
         ctx.drawImage(image, (outputSize.width - image.width) * 0.5, (outputSize.height - image.height) * 0.5);
@@ -1618,13 +1618,13 @@ var cropImageData = async (imageData, options = {}) => {
     }
     // crop image data
     else if (shouldCrop) {
-        const ctx = image.getContext('2d');
+        const ctx = image.getContext('2d', { willReadFrequently: true });
         imageDataOut = ctx.getImageData(crop.x, crop.y, crop.width, crop.height);
         releaseCanvas(image);
         return imageDataOut;
     }
     // done, return resulting image data
-    const ctx = image.getContext('2d');
+    const ctx = image.getContext('2d', { willReadFrequently: true });
     imageDataOut = ctx.getImageData(0, 0, image.width, image.height);
     releaseCanvas(image);
     return imageDataOut;
@@ -1703,7 +1703,7 @@ var imageDataObjectToImageData = (obj) => {
     catch (err) {
         // IE + Old EDGE (tested on 12)
         const canvas = h('canvas');
-        imageData = canvas.getContext('2d').createImageData(obj.width, obj.height);
+        imageData = canvas.getContext('2d', { willReadFrequently: true }).createImageData(obj.width, obj.height);
     }
     imageData.data.set(obj.data);
     return imageData;
@@ -2148,7 +2148,7 @@ const height = 80;
 const whenSVGSafeForDrawing = async (img, delay = 0) => {
     // Safari has some trouble with custom fonts
     const canvas = h('canvas', { width, height });
-    const ctx = canvas.getContext('2d');
+    const ctx = canvas.getContext('2d', { willReadFrequently: true });
     // always wait a short while because it's never ready on first drawy
     await timeout(delay);
     // we draw the image so we can test if the content is drawn. If custom font isn't ready the canvas will be empty
@@ -3538,7 +3538,7 @@ var drawImageData = async (imageData, options = {}) => {
     const canvas = h('canvas');
     canvas.width = contextBounds.width;
     canvas.height = contextBounds.height;
-    const ctx = canvas.getContext('2d');
+    const ctx = canvas.getContext('2d', { willReadFrequently: true });
     ctx.putImageData(imageData, contextBounds.x || 0, contextBounds.y || 0);
     // compute the position of all shapes
     const computedShapes = shapes.map(shapeDeepCopy).map(computeShape).map(preprocessShape).flat();
@@ -3565,7 +3565,7 @@ var fillImageData = async (imageData, options = {}) => {
     const image = h('canvas');
     image.width = imageData.width;
     image.height = imageData.height;
-    const ctx = image.getContext('2d');
+    const ctx = image.getContext('2d', { willReadFrequently: true });
     ctx.putImageData(imageData, 0, 0);
     // fill behind image
     ctx.globalCompositeOperation = 'destination-over';
@@ -6492,7 +6492,7 @@ const ImageDataRedact = ({ srcImageData = 'imageData', srcImageState = 'imageSta
         const canvas = h('canvas');
         canvas.width = imageData.width;
         canvas.height = imageData.height;
-        const ctx = canvas.getContext('2d');
+        const ctx = canvas.getContext('2d', { willReadFrequently: true });
         ctx.putImageData(imageData, 0, 0);
         // set up a clip path so we only draw scrambled image within path
         const path = new Path2D();
@@ -8471,7 +8471,7 @@ var imageDataScramble = async (inputData, options = {}) => {
     const outputHeight = Math.floor(height * scalar);
     // draw low res preview, add margin so blur isn't transparent
     const scaledOutputCanvas = (h('canvas', { width: outputWidth, height: outputHeight }));
-    const ctx = scaledOutputCanvas.getContext('2d');
+    const ctx = scaledOutputCanvas.getContext('2d', { willReadFrequently: true });
     // fill background on transparent images
     backgroundColor.length = 3; // prevent transparent colors
     ctx.fillStyle = colorArrayToRGBA(backgroundColor);
@@ -8479,7 +8479,7 @@ var imageDataScramble = async (inputData, options = {}) => {
     if (isImageData(inputData)) {
         // temporarily draw to canvas so we can draw image data to scaled context
         const transferCanvas = h('canvas', { width, height });
-        transferCanvas.getContext('2d').putImageData(inputData, 0, 0);
+        transferCanvas.getContext('2d', { willReadFrequently: true }).putImageData(inputData, 0, 0);
         // draw to scaled context
         ctx.drawImage(transferCanvas, 0, 0, outputWidth, outputHeight);
         // release memory
@@ -18224,7 +18224,7 @@ class DynamicComponentTree_1 extends SvelteComponent {
 
 var canvasClone = (canvas) => {
     const clone = h('canvas', { width: canvas.width, height: canvas.height });
-    clone.getContext('2d').drawImage(canvas, 0, 0);
+    clone.getContext('2d', { willReadFrequently: true }).drawImage(canvas, 0, 0);
     return clone;
 };
 
@@ -18465,7 +18465,7 @@ const videoToImageData = (file) => new Promise((resolve, reject) => {
         const frame = h('canvas');
         frame.width = video.videoWidth;
         frame.height = video.videoHeight;
-        const ctx = frame.getContext('2d');
+        const ctx = frame.getContext('2d', { willReadFrequently: true });
         const drawFrame = () => {
             ctx.drawImage(video, 0, 0, frame.width, frame.height);
             const imageData = ctx.getImageData(0, 0, frame.width, frame.height);
@@ -18542,7 +18542,7 @@ var imageDataContain = (imageData, size) => new Promise(async (resolve) => {
         width: targetWidth,
         height: targetHeight,
     });
-    const ctx = canvas.getContext('2d');
+    const ctx = canvas.getContext('2d', { willReadFrequently: true });
     const data = isImageData(imageData)
         ? (await imageDataToCanvas(imageData))
         : imageData;