@yoobic/yobi 8.3.1-4 → 8.3.1-7

package/dist/cjs/yoo-rating.cjs.entry.js

@@ -85,7 +85,7 @@ const YooRatingComponent = class {
         disabled: !this.isValidRating || !this.courseId,
         handler: () => this.onSubmitClick()
       }];
-    return (index.h("yoo-form-footer", { class: "rating", buttons: button }));
+    return (index.h("yoo-form-footer", { class: "rating relative", buttons: button }));
   }
   renderEditable() {
     return [

package/dist/cjs/yoo-reset-password.cjs.entry.js

@@ -9,7 +9,7 @@ require('./index-8eccfdfc.js');
 require('./lodash-72d493b9.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
-const resetPasswordCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host>*{width:100%}:host p{margin:0;font-size:var(--font-size-16, 1rem);text-align:center}:host yoo-button{max-width:18.75rem;margin:auto;margin-top:var(--spacing-16, 1rem)}:host yoo-form-dynamic.margin-top{margin-top:var(--spacing-48, 3rem)}:host yoo-empty-state{height:15rem;margin-top:var(--spacing-08, 0.5rem)}:host yoo-form-input{display:block;max-width:18.75rem;margin:auto}";
+const resetPasswordCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host>*{width:100%}:host p{margin:0;font-size:var(--font-size-16, 1rem);text-align:center}:host yoo-button{max-width:18.75rem;margin:auto;margin-top:var(--spacing-16, 1rem)}:host yoo-form-dynamic.margin-top{margin-top:var(--spacing-48, 3rem)}:host yoo-empty-state{height:15rem;margin-top:var(--spacing-08, 0.5rem)}:host yoo-form-input-container{display:block;max-width:18.75rem;margin:auto}:host yoo-form-input-container.web{font-size:var(--font-size-12, 0.75rem)}";
 
 const YooResetPasswordComponent = class {
   constructor(hostRef) {
@@ -64,12 +64,12 @@ const YooResetPasswordComponent = class {
   }
   renderRequest() {
     return [
-      !!this.instruction && index.h("p", null, this.instruction),
+      !!this.instruction && index.h("p", { style: { maxWidth: '350px', margin: '0 auto' } }, this.instruction),
       index.h("yoo-empty-state", { ref: (el) => (this.emptyState = el), type: this.isMagicLink ? 'magic-link' : 'password' }),
-      index.h("yoo-form-input-container", { field: { title: overlays.translate('YOOBICUSERNAME') }, hideOptional: true, hideLabel: true }, index.h("yoo-form-input", { ref: (el) => (this.emailInput = el), validators: [{ name: 'required' }], type: "email", uiValidation: { valid: false, invalid: false }, onInputChanged: (event) => this.onInputChanged(event), placeholder: overlays.translate('YOOBICUSERNAMEENTER'),
-        //! Do not set up onInputBlur without confirming on mobile device (We don't want to have to press submit more than once)
+      index.h("yoo-form-input-container", { field: { title: 'YOOBICUSERNAME' }, hideOptional: true, useUppercaseLabel: true }, index.h("yoo-form-input", { ref: (el) => (this.emailInput = el), iconPrefixColor: 'app-color', validators: [{ name: 'required' }], type: "email", uiValidation: { valid: false, invalid: false }, onInputChanged: (event) => this.onInputChanged(event), placeholder: overlays.translate('YOOBICUSERNAMEENTER'),
+        //! Do not set up onInputBlur without confirming on mobile device. We don't want to have to press submit more than once
         size: overlays.isWeb(this.host) ? 'medium' : 'large' })),
-      index.h("yoo-button", { ref: (el) => (this.submitButton = el), size: overlays.isWeb(this.host) ? 'medium' : 'large', color: "app-color", disabled: !this.validity, class: "expanded", onClick: () => this.onSubmit() }, overlays.translate('SUBMIT'))
+      index.h("yoo-button", { ref: (el) => (this.submitButton = el), size: overlays.isWeb(this.host) ? 'medium' : 'large', color: "app-color", disabled: !this.validity, class: "expanded", onClick: () => this.onSubmit() }, this.isMagicLink ? overlays.translate('YOOBICMAGICLINK') : overlays.translate('YOOBICRESETPASSWORD'))
     ];
   }
   renderResetForm() {
@@ -91,6 +91,7 @@ const YooResetPasswordComponent = class {
           },
           {
             type: index$1.FormFieldType.password,
+            iconPrefixColor: 'app-color',
             name: 'newpassword',
             placeholder: 'NEWPASSWORD',
             required: true,
@@ -99,6 +100,7 @@ const YooResetPasswordComponent = class {
           },
           {
             type: index$1.FormFieldType.password,
+            iconPrefixColor: 'app-color',
             name: 'verify',
             placeholder: 'CONFIRMPASSWORD',
             required: true,
@@ -108,7 +110,7 @@ const YooResetPasswordComponent = class {
         ]
       }
     ];
-    return index.h("yoo-form-dynamic", { class: "margin-top", animated: false, slides: slides, showRecap: false, showSave: true, skipValidation: true, onDataChanged: (ev) => this.onDataChanged(ev), onFormValidityChanged: (ev) => this.onValidityChanged(ev), onSave: () => this.onSubmit() }, index.h("div", { slot: "footer" }, index.h("yoo-button", { size: overlays.isWeb(this.host) ? 'medium' : 'large', color: "app-color", disabled: !this.validity, onClick: () => this.onSubmit() }, overlays.translate('SUBMIT'))));
+    return (index.h("yoo-form-dynamic", { class: "margin-top", animated: false, slides: slides, showRecap: false, showSave: true, skipValidation: true, onDataChanged: (ev) => this.onDataChanged(ev), onFormValidityChanged: (ev) => this.onValidityChanged(ev), onSave: () => this.onSubmit() }, index.h("div", { slot: "footer" }, index.h("yoo-button", { size: overlays.isWeb(this.host) ? 'medium' : 'large', color: "app-color", disabled: !this.validity, onClick: () => this.onSubmit() }, overlays.translate('SUBMIT')))));
   }
   render() {
     return index.h("div", null, this.token ? this.renderResetForm() : this.renderRequest());

package/dist/collection/components/2.molecules/action-sheet-controller/action-sheet-controller.js

@@ -12,7 +12,7 @@ export class YooIonActionSheetControllerComponent {
     const index = this.devices.findIndex(device => device === ev.detail);
     this.devices.splice(index, index + 1);
   }
-  onClick(ev) {
+  onPointerDown(ev) {
     if (this.devices.length) {
       this.device = ev.composedPath().find((el) => el.nodeName === 'YOO-DEVICE');
     }
@@ -208,11 +208,11 @@ export class YooIonActionSheetControllerComponent {
       "capture": false,
       "passive": false
     }, {
-      "name": "click",
-      "method": "onClick",
+      "name": "pointerdown",
+      "method": "onPointerDown",
       "target": "body",
       "capture": true,
-      "passive": false
+      "passive": true
     }, {
       "name": "ionActionSheetWillPresent",
       "method": "actionSheetWillPresent",

package/dist/collection/components/2.molecules/alert-controller/alert-controller.js

@@ -12,7 +12,7 @@ export class YooIonAlertControllerComponent {
     const index = this.devices.findIndex(device => device === ev.detail);
     this.devices.splice(index, index + 1);
   }
-  onClick(ev) {
+  onPointerDown(ev) {
     if (this.devices.length) {
       this.device = ev.composedPath().find((el) => el.nodeName === 'YOO-DEVICE');
     }
@@ -182,11 +182,11 @@ export class YooIonAlertControllerComponent {
       "capture": false,
       "passive": false
     }, {
-      "name": "click",
-      "method": "onClick",
+      "name": "pointerdown",
+      "method": "onPointerDown",
       "target": "body",
       "capture": true,
-      "passive": false
+      "passive": true
     }, {
       "name": "ionAlertWillPresent",
       "method": "alertWillPresent",

package/dist/collection/components/2.molecules/modal-controller/modal-controller.js

@@ -13,7 +13,7 @@ export class YooIonModalControllerComponent {
     const index = this.devices.findIndex(device => device === ev.detail);
     this.devices.splice(index, index + 1);
   }
-  onClick(ev) {
+  onPointerDown(ev) {
     if (this.devices.length) {
       this.device = ev.composedPath().find(el => el.nodeName === 'YOO-DEVICE');
     }
@@ -220,11 +220,11 @@ export class YooIonModalControllerComponent {
       "capture": false,
       "passive": false
     }, {
-      "name": "click",
-      "method": "onClick",
+      "name": "pointerdown",
+      "method": "onPointerDown",
       "target": "body",
       "capture": true,
-      "passive": false
+      "passive": true
     }, {
       "name": "ionModalWillPresent",
       "method": "modalWillPresent",

package/dist/collection/components/2.molecules/rating/rating.js

@@ -88,7 +88,7 @@ export class YooRatingComponent {
         disabled: !this.isValidRating || !this.courseId,
         handler: () => this.onSubmitClick()
       }];
-    return (h("yoo-form-footer", { class: "rating", buttons: button }));
+    return (h("yoo-form-footer", { class: "rating relative", buttons: button }));
   }
   renderEditable() {
     return [

package/dist/collection/components/2.molecules/toast-controller/toast-controller.js

@@ -12,7 +12,7 @@ export class YooIonToastControllerComponent {
     const index = this.devices.findIndex(device => device === ev.detail);
     this.devices.splice(index, index + 1);
   }
-  onClick(ev) {
+  onPointerDown(ev) {
     if (this.devices.length) {
       this.device = ev.composedPath().find((el) => el.nodeName === 'YOO-DEVICE');
     }
@@ -182,11 +182,11 @@ export class YooIonToastControllerComponent {
       "capture": false,
       "passive": false
     }, {
-      "name": "click",
-      "method": "onClick",
+      "name": "pointerdown",
+      "method": "onPointerDown",
       "target": "body",
       "capture": true,
-      "passive": false
+      "passive": true
     }, {
       "name": "ionToastWillPresent",
       "method": "toastWillPresent",

package/dist/collection/components/form/form-choice/card/form-choice-card.css

@@ -330,7 +330,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --card-width: 8rem;
   --item-spacing: var(--spacing-16, 1rem);
   width: 100%;
-  height: 100%;
 }
 :host yoo-banner {
   height: 0;

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

@@ -2665,7 +2665,7 @@ export class YooFormDynamicComponent {
                   'pdf': this.isPdf,
                   [field.type]: true,
                   [(field === null || field === void 0 ? void 0 : field.extraClass) || '']: true
-                }, style: field.containerStyle, slotInputConfig: isPdfMultiplePhotos ? slotInputConfig : null, field: field, 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, size: this.formInputSize, showDefaultInstructions: this.isLesson(), onCommented: (ev) => this.onFieldCommented(ev, field), onValidationCommented: (ev) => this.onFieldValidationCommented(ev, field), onValidationMarkAsInvalid: (ev) => this.onFieldValidationMarkAsInvalid(ev, field), 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, 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, showDefaultInstructions: this.isLesson(), onCommented: (ev) => this.onFieldCommented(ev, field), onValidationCommented: (ev) => this.onFieldValidationCommented(ev, field), onValidationMarkAsInvalid: (ev) => this.onFieldValidationMarkAsInvalid(ev, field), 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), isLesson: this.isLesson(), isPreview: this.isLessonPreview(), animated: isAnimationsDisabled() ? false : this.animated, fullscreen: this.isFullscreenFieldType(field.type) }, !isPdfMultiplePhotos && inputFn())),
@@ -3162,6 +3162,7 @@ export class YooFormDynamicComponent {
           inputmode: field.type === FormFieldType.number && isSamsung() ? 'numeric' : '',
           step: field.step,
           iconPrefix: icon,
+          iconPrefixColor: field.iconPrefixColor,
           iconSuffix: field.iconSuffix,
           textSuffix: field.textSuffix,
           regex: field.regex,

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

@@ -229,7 +229,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   flex-direction: column;
   justify-content: center;
   max-width: 25rem;
-  height: 100%;
+  margin: var(--spacing-16, 1rem) auto;
 }
 :host([type=confidence]) .container .heading {
   margin: 0 var(--spacing-16, 1rem);
@@ -276,4 +276,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 
 :host(.web) .container {
   margin: 0 auto;
+}
+
+:host([isLesson]) .container {
+  height: 100%;
 }

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

@@ -295,7 +295,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .input-container .icon-prefix {
   color: inherit;
 }
-:host .input-container .icon-prefix yoo-icon {
+:host .input-container .icon-prefix yoo-icon:not([color]) {
   fill: var(--dark, #000000);
 }
 :host .input-container .inline-left {
@@ -810,23 +810,23 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   animation: none;
 }
 
-:host(.menu) input {
+:host(.menu) .input-container {
+  background: var(--stable-light, #f1f1f1);
+  border: none;
+}
+:host(.menu) .input-container input {
   padding-left: 0;
 }
-:host(.menu) input::placeholder {
+:host(.menu) .input-container input::placeholder {
   color: var(--stable, #adadad);
   opacity: 1;
 }
-:host(.menu) input yoo-icon {
+:host(.menu) .input-container input yoo-icon {
   fill: var(--stable, #adadad);
 }
-:host(.menu) .icon-prefix yoo-icon {
+:host(.menu) .input-container .icon-prefix yoo-icon {
   fill: var(--stable, #adadad);
 }
-:host(.menu) .input-container {
-  background: var(--stable-light, #f1f1f1);
-  border: none;
-}
 
 :host(.side-menu.large) .input-container {
   width: 100%;

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

@@ -200,7 +200,7 @@ export class YooFormInputComponent {
         el.value = this.localValue + '.';
       }
       if (!isNumberInput || el.value || ev.data !== '-') {
-        if (!(isNumberInput && (el.value.length === 1 && el.value[0] === '-'))) {
+        if (!(isNumberInput && el.value.length === 1 && el.value[0] === '-')) {
           if (isNumberInput && ['e', '+'].includes(ev.data)) {
             el.value = this.value;
           }
@@ -384,8 +384,8 @@ export class YooFormInputComponent {
     }
     return [
       this.copyToClipboard && h("yoo-icon", { onClick: () => this.onCopyToClipboard(copyText), class: "float-left", name: "duplicate", size: this.getIconSize() }),
-      this.type !== 'email' && h("p", { class: { 'truncate': this.copyToClipboard }, innerHTML: innerHTML, onClick: () => this.copyToClipboard && this.onCopyToClipboard(copyText) }),
-      this.type === 'email' && h("a", { href: `mailto:${value}`, class: { 'truncate': this.copyToClipboard }, innerHTML: innerHTML, onClick: () => this.copyToClipboard && this.onCopyToClipboard(copyText) })
+      this.type !== 'email' && h("p", { class: { truncate: this.copyToClipboard }, innerHTML: innerHTML, onClick: () => this.copyToClipboard && this.onCopyToClipboard(copyText) }),
+      this.type === 'email' && (h("a", { href: `mailto:${value}`, class: { truncate: this.copyToClipboard }, innerHTML: innerHTML, onClick: () => this.copyToClipboard && this.onCopyToClipboard(copyText) }))
     ];
   }
   renderMaxCharacterCounter() {
@@ -406,8 +406,8 @@ export class YooFormInputComponent {
           invalid: this.uiValidation.invalid && this.validity === false && !this.inputReloaded
         } },
         this.finalIconPrefix && this.hasIconPrefix && (h("div", { class: "icon-prefix", onClick: () => (this.inputElement && this.inputElement.focus ? this.inputElement.focus() : null) },
-          h("yoo-icon", { name: this.finalIconPrefix, size: this.getIconSize() }))),
-        h("input", { type: this.inputType, name: this.name, tabindex: this.inputTabIndex, ref: (el) => (this.inputElement = el), autocapitalize: this.autocapitalize, autocorrect: this.autocorrect, autoComplete: ['username', 'password'].includes(this.name) ? this.name : undefined, inputmode: this.inputmode ? this.inputmode : undefined, placeholder: !this.placeholdertolabel && this.internalPlaceholder ? translate(this.internalPlaceholder) : '', required: this.required, onBlur: (ev) => onInputBlurred(ev, this, '.input-container', this.type, this.uiValidation), onChange: (ev) => this.fireInputChangeEvent ? this.onInputChanged(ev) : ev === null || ev === void 0 ? void 0 : ev.stopPropagation(), onInput: (ev) => this.onInputChanged(ev), onFocus: () => onInputFocused(this, '.input-container'), onKeyDown: (ev) => this.onKeyPress(ev), onWheel: this.onWheel, min: this.min, max: this.max, pattern: this.getPattern(), step: this.step, class: {
+          h("yoo-icon", { name: this.finalIconPrefix, size: this.getIconSize(), color: this.iconPrefixColor }))),
+        h("input", { type: this.inputType, name: this.name, tabindex: this.inputTabIndex, ref: (el) => (this.inputElement = el), autocapitalize: this.autocapitalize, autocorrect: this.autocorrect, autoComplete: ['username', 'password'].includes(this.name) ? this.name : undefined, inputmode: this.inputmode ? this.inputmode : undefined, placeholder: !this.placeholdertolabel && this.internalPlaceholder ? translate(this.internalPlaceholder) : '', required: this.required, onBlur: (ev) => onInputBlurred(ev, this, '.input-container', this.type, this.uiValidation), onChange: (ev) => (this.fireInputChangeEvent ? this.onInputChanged(ev) : ev === null || ev === void 0 ? void 0 : ev.stopPropagation()), onInput: (ev) => this.onInputChanged(ev), onFocus: () => onInputFocused(this, '.input-container'), onKeyDown: (ev) => this.onKeyPress(ev), onWheel: this.onWheel, min: this.min, max: this.max, pattern: this.getPattern(), step: this.step, class: {
             last: !((hasValue && this.clearable) || (this.type === 'password' && this.showPasswordToggle) || (this.uiValidation.invalid && this.validity === false)),
             'hide-value': (_a = this.checkboxParams) === null || _a === void 0 ? void 0 : _a.value,
             'has-icon-prefix': this.finalIconPrefix && this.hasIconPrefix
@@ -429,7 +429,7 @@ export class YooFormInputComponent {
       this.tooltip && (h("div", { class: { 'icon-suffix-focus last icon-close': true } },
         h("yoo-tooltip", { content: this.tooltip },
           h("yoo-icon", { size: "medium", name: "help" })))),
-      this.uiValidation.invalid && h("div", { class: { 'invalid-message': true, invalid: (this.validity === false && !this.inputReloaded) } }, translate(invalidMessageKey))
+      this.uiValidation.invalid && h("div", { class: { 'invalid-message': true, invalid: this.validity === false && !this.inputReloaded } }, translate(invalidMessageKey))
     ];
   }
   contentEditableInputBlurred(ev) {
@@ -487,9 +487,9 @@ export class YooFormInputComponent {
       this.renderAction('confirm')));
   }
   renderAction(type) {
-    return h("div", { class: type },
+    return (h("div", { class: type },
       h("yoo-button", { disabled: !this.modified || this.disabled, size: this.size, customColor: "stable-alt", onClick: () => this[type]() },
-        h("yoo-icon", { size: this.getIconSize(), name: type === 'cancel' ? 'close' : 'tick' })));
+        h("yoo-icon", { size: this.getIconSize(), name: type === 'cancel' ? 'close' : 'tick' }))));
   }
   render() {
     return (h(Host, { class: {
@@ -776,6 +776,28 @@ export class YooFormInputComponent {
       "attribute": "icon-prefix",
       "reflect": false
     },
+    "iconPrefixColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "TColor",
+        "resolved": "\"accent\" | \"anthracite\" | \"app-color\" | \"danger\" | \"dark\" | \"energized\" | \"info\" | \"light\" | \"stable\" | \"stable-alt\" | \"stable-light\" | \"stable-ultralight\" | \"success\" | \"text-color\" | \"warning\" | \"wood\" | \"accent-10\" | \"accent-20\" | \"accent-40\" | \"accent-60\" | \"accent-80\" | \"anthracite-10\" | \"anthracite-20\" | \"anthracite-40\" | \"anthracite-60\" | \"anthracite-80\" | \"app-color-10\" | \"app-color-20\" | \"app-color-40\" | \"app-color-60\" | \"app-color-80\" | \"danger-10\" | \"danger-20\" | \"danger-40\" | \"danger-60\" | \"danger-80\" | \"dark-10\" | \"dark-20\" | \"dark-40\" | \"dark-60\" | \"dark-80\" | \"energized-10\" | \"energized-20\" | \"energized-40\" | \"energized-60\" | \"energized-80\" | \"info-10\" | \"info-20\" | \"info-40\" | \"info-60\" | \"info-80\" | \"light-10\" | \"light-20\" | \"light-40\" | \"light-60\" | \"light-80\" | \"stable-10\" | \"stable-20\" | \"stable-40\" | \"stable-60\" | \"stable-80\" | \"stable-alt-10\" | \"stable-alt-20\" | \"stable-alt-40\" | \"stable-alt-60\" | \"stable-alt-80\" | \"stable-light-10\" | \"stable-light-20\" | \"stable-light-40\" | \"stable-light-60\" | \"stable-light-80\" | \"stable-ultralight-10\" | \"stable-ultralight-20\" | \"stable-ultralight-40\" | \"stable-ultralight-60\" | \"stable-ultralight-80\" | \"success-10\" | \"success-20\" | \"success-40\" | \"success-60\" | \"success-80\" | \"text-color-10\" | \"text-color-20\" | \"text-color-40\" | \"text-color-60\" | \"text-color-80\" | \"warning-10\" | \"warning-20\" | \"warning-40\" | \"warning-60\" | \"warning-80\" | \"wood-10\" | \"wood-20\" | \"wood-40\" | \"wood-60\" | \"wood-80\" | \"transparent\"",
+        "references": {
+          "TColor": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "icon-prefix-color",
+      "reflect": false
+    },
     "iconSuffix": {
       "type": "string",
       "mutable": false,

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

@@ -98,24 +98,18 @@ export class YooFormInputContainerComponent {
     }
   }
   initShowDescription(showDescriptionAndTitle, field, readOnly, forceReadOnly, forceDescription) {
-    return (field === null || field === void 0 ? void 0 : field.description) && !field.hideLabel &&
-      (!readOnly ||
-        this.isCheckboxOrToggle(field.type) ||
-        (field.type === FormFieldType.formula && forceReadOnly) ||
-        forceDescription ||
-        showDescriptionAndTitle);
+    return ((field === null || field === void 0 ? void 0 : field.description) &&
+      !field.hideLabel &&
+      (!readOnly || this.isCheckboxOrToggle(field.type) || (field.type === FormFieldType.formula && forceReadOnly) || forceDescription || showDescriptionAndTitle));
   }
   initShowLabel(showDescription, showDescriptionAndTitle, field, readOnly) {
     const hasLabel = field.title || field.name;
-    return hasLabel &&
-      (!showDescription || showDescriptionAndTitle) &&
-      (!field.hideLabel || (readOnly && field.placeholder)) &&
-      !this.isCheckboxOrToggle(field.type);
+    return hasLabel && (!showDescription || showDescriptionAndTitle) && (!field.hideLabel || (readOnly && field.placeholder)) && !this.isCheckboxOrToggle(field.type);
   }
   initShouldShowDefaultInstructions(showDefaultInstructions, fieldType, readOnly) {
     const NO_INSTRUCTIONS = [FormFieldType.selectmulti, FormFieldType.number, FormFieldType.feedback];
     const ALWAYS_SHOW = [FormFieldType.plan];
-    return !readOnly && (ALWAYS_SHOW.includes(fieldType) || showDefaultInstructions && NO_INSTRUCTIONS.includes(fieldType));
+    return !readOnly && (ALWAYS_SHOW.includes(fieldType) || (showDefaultInstructions && NO_INSTRUCTIONS.includes(fieldType)));
   }
   shouldShowComments() {
     return (this.showComments || (this.readonly && this.comments));
@@ -124,10 +118,11 @@ export class YooFormInputContainerComponent {
     return fieldType === FormFieldType.toggle || fieldType === FormFieldType.checkbox;
   }
   isMedia(excludeVideo) {
-    return this.field && ((excludeVideo ? false : this.field.type === FormFieldType.video) ||
-      this.field.type === FormFieldType.image ||
-      this.field.type === FormFieldType.document ||
-      this.field.type === FormFieldType.videoplayer);
+    return (this.field &&
+      ((excludeVideo ? false : this.field.type === FormFieldType.video) ||
+        this.field.type === FormFieldType.image ||
+        this.field.type === FormFieldType.document ||
+        this.field.type === FormFieldType.videoplayer));
   }
   getComponentDescriptionExtraClass() {
     let extraClass = '';
@@ -147,7 +142,8 @@ export class YooFormInputContainerComponent {
     return extraClass;
   }
   getFieldTitle() {
-    const fieldTitle = this.field.title || (this.field.name && !this.host.classList.contains('lesson-live-preview')) ? translateMulti(this.field.title || this.field.name.toUpperCase()) : '';
+    let fieldTitle = this.field.title || (this.field.name && !this.host.classList.contains('lesson-live-preview')) ? translateMulti(this.field.title || this.field.name.toUpperCase()) : '';
+    this.useUppercaseLabel && this.field.title && (fieldTitle = fieldTitle.toUpperCase());
     return this.isLesson && this.readonly
       ? translateMulti(this.field.description) || (this.shouldShowDefaultInstructions && this.getFieldDefaultInstructions()) || fieldTitle
       : fieldTitle;
@@ -219,8 +215,7 @@ export class YooFormInputContainerComponent {
   }
   animateContent() {
     var _a, _b;
-    const isAnimatedField = this.animated && (((_a = this.field) === null || _a === void 0 ? void 0 : _a.type) === FormFieldType.number ||
-      ((_b = this.field) === null || _b === void 0 ? void 0 : _b.type) === FormFieldType.selectimage);
+    const isAnimatedField = this.animated && (((_a = this.field) === null || _a === void 0 ? void 0 : _a.type) === FormFieldType.number || ((_b = this.field) === null || _b === void 0 ? void 0 : _b.type) === FormFieldType.selectimage);
     if (this.isLesson && isAnimatedField) {
       resizeObserve(this.host, this.onResize);
     }
@@ -291,19 +286,22 @@ export class YooFormInputContainerComponent {
     const hasRightSide = this.markAsInvalid || this.time || fieldhelp || !!this.host.querySelector('[slot="right-side"]');
     return (hasRightSide && (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.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" }))),
       fieldhelp && !this.field.hideTooltip && !hideTooltip && (h("yoo-tooltip", { hoverable: isWeb(this.host), content: this.getHelpContent(fieldhelp), placement: "top-end" },
         h("yoo-icon", { size: this.field.tooltipSize ? this.field.tooltipSize : isWeb(this.host) ? 'small' : 'medium', name: "help", color: this.field.tooltipColor ? this.field.tooltipColor : 'stable' }))))));
   }
   renderOriginalMarkAsInvalid() {
-    return !this.markAsInvalid && !this.hideComplianceTags && this.originalMarkAsInvalid &&
-      h("yoo-tag", { size: "extra-small", class: "original-invalid", color: "danger" }, translate('ORIGINALMARKASINVALID'));
+    return (!this.markAsInvalid &&
+      !this.hideComplianceTags &&
+      this.originalMarkAsInvalid && (h("yoo-tag", { size: "extra-small", class: "original-invalid", color: "danger" }, translate('ORIGINALMARKASINVALID'))));
   }
   renderOriginalMarkAsModified() {
-    return !this.markAsInvalid && !this.hideComplianceTags && !this.originalMarkAsInvalid && this.markAsModified &&
-      h("yoo-tag", { size: "extra-small", class: "original-modified", color: "danger" }, translate('ORIGINALMARKASMODIFIED'));
+    return (!this.markAsInvalid &&
+      !this.hideComplianceTags &&
+      !this.originalMarkAsInvalid &&
+      this.markAsModified && (h("yoo-tag", { size: "extra-small", class: "original-modified", color: "danger" }, translate('ORIGINALMARKASMODIFIED'))));
   }
   renderLabel() {
     var _a, _b, _c;
@@ -329,11 +327,7 @@ export class YooFormInputContainerComponent {
       }, onClick: () => this.headerClicked.emit(), ref: (el) => (this.instructionElement = el) }, this.getFieldDefaultInstructions()));
   }
   renderTopText() {
-    return [
-      this.showLabel && this.renderLabel(),
-      this.showDescription && this.renderDescription(),
-      this.shouldShowDefaultInstructions && this.renderDefaultInstructions()
-    ];
+    return [this.showLabel && this.renderLabel(), this.showDescription && this.renderDescription(), this.shouldShowDefaultInstructions && this.renderDefaultInstructions()];
   }
   renderInnerContent() {
     var _a, _b, _c;
@@ -344,11 +338,12 @@ export class YooFormInputContainerComponent {
         'no-margin': this.field.allowTask,
         'no-padding': ((_a = this.field) === null || _a === void 0 ? void 0 : _a.type) === FormFieldType.multiinput
       } },
-      this.slotInputConfig && ((_b = this.slotInputConfig) === null || _b === void 0 ? void 0 : _b.inputFn([
-        h("div", { class: "title-wrapper", slot: "image-title" },
-          ((_c = this.slotInputConfig) === null || _c === void 0 ? void 0 : _c.slideTitle) && this.slotInputConfig.slideTitle(),
-          this.renderTopText())
-      ])),
+      this.slotInputConfig &&
+        ((_b = this.slotInputConfig) === null || _b === void 0 ? void 0 : _b.inputFn([
+          h("div", { class: "title-wrapper", slot: "image-title" },
+            ((_c = this.slotInputConfig) === null || _c === void 0 ? void 0 : _c.slideTitle) && this.slotInputConfig.slideTitle(),
+            this.renderTopText())
+        ])),
       h("slot", null),
       this.renderRemovable()));
   }
@@ -363,18 +358,15 @@ export class YooFormInputContainerComponent {
       this.renderInnerContent()));
   }
   renderRemovable() {
-    return (this.field.removable && (h("div", { class: "removable", onClick: () => this.onRemove() }, isWeb(this.host) ?
-      h("yoo-tooltip", { content: translate('REMOVEFIELD'), placement: "top-end" },
-        h("yoo-icon", { size: this.size || 'medium', color: "danger", name: "cross" }))
-      : h("yoo-icon", { size: this.size || 'medium', color: "danger", name: "cross" }))));
+    return (this.field.removable && (h("div", { class: "removable", onClick: () => this.onRemove() }, isWeb(this.host) ? (h("yoo-tooltip", { content: translate('REMOVEFIELD'), placement: "top-end" },
+      h("yoo-icon", { size: this.size || 'medium', color: "danger", name: "cross" }))) : (h("yoo-icon", { size: this.size || 'medium', color: "danger", name: "cross" })))));
   }
   renderHint() {
     return h("div", { class: "hint-container", innerHTML: this.field.hint });
   }
   renderFooter() {
     return [
-      ((this.field.allowComments || this.field.allowTask || this.field.shareToFeed) &&
-        !this.readonly) && (h("div", { class: "footer-container" },
+      (this.field.allowComments || this.field.allowTask || this.field.shareToFeed) && !this.readonly && (h("div", { class: "footer-container" },
         this.field.allowComments && (h("span", { class: "comment-container", onClick: () => this.onToggleComments() },
           h("yoo-icon", { name: "comment", color: "text-color" }))),
         this.field.shareToFeed && (h("span", { class: "feed-container" },
@@ -388,24 +380,21 @@ export class YooFormInputContainerComponent {
   renderValidationFooter() {
     const isMobile = !isWeb(this.host);
     // the layout is not the same on web and mobile, so need to render the validations comments according to the platform
-    return (this.displayValidationFooter &&
-      h("div", { class: { 'footer-container': true, 'validation': true, 'mobile': isMobile } },
-        h("span", { class: "comment-container", onClick: () => this.onToggleValidationComments() },
-          h("yoo-icon", { name: "comment", size: "medium", color: "text-color" }),
-          " ",
-          translate(this.validationComments ? 'EDITCOMMENTS' : 'ADDCOMMENTS')),
-        isMobile && this.renderValidationComments(),
-        h("span", { class: "validation-container" },
-          h("yoo-form-checkbox", { animated: this.animated, value: this.markAsInvalid, class: "danger web", size: "large", header: translate('MARKFIELDASINVALID'), onInputChanged: (ev) => this.onValidationMarkAsInvalid(ev.detail) }))));
+    return (this.displayValidationFooter && (h("div", { class: { 'footer-container': true, validation: true, mobile: isMobile } },
+      h("span", { class: "comment-container", onClick: () => this.onToggleValidationComments() },
+        h("yoo-icon", { name: "comment", size: "medium", color: "text-color" }),
+        " ",
+        translate(this.validationComments ? 'EDITCOMMENTS' : 'ADDCOMMENTS')),
+      isMobile && this.renderValidationComments(),
+      h("span", { class: "validation-container" },
+        h("yoo-form-checkbox", { animated: this.animated, value: this.markAsInvalid, class: "danger web", size: "large", header: translate('MARKFIELDASINVALID'), onInputChanged: (ev) => this.onValidationMarkAsInvalid(ev.detail) })))));
   }
   renderComments() {
-    return (this.shouldShowComments() &&
-      h("yoo-form-input-comments", { class: { 'with-border-bottom': this.displayValidationComments }, readonly: this.readonly, user: this.commentsUser, comments: this.comments, onInputChanged: (ev) => this.onCommentsChange(ev), onInputFocused: (ev) => this.onCommentFocused(ev) }));
+    return (this.shouldShowComments() && (h("yoo-form-input-comments", { class: { 'with-border-bottom': this.displayValidationComments }, readonly: this.readonly, user: this.commentsUser, comments: this.comments, onInputChanged: (ev) => this.onCommentsChange(ev), onInputFocused: (ev) => this.onCommentFocused(ev) })));
   }
   renderValidationComments() {
     const readonly = !this.allowFieldValidation || !this.showValidationComments;
-    return (this.displayValidationComments &&
-      h("yoo-form-input-comments", { readonly: readonly, user: this.validationCommentsUser, comments: this.validationComments, onInputChanged: (ev) => this.onValidationCommentsChange(ev), onInputFocused: (ev) => this.onCommentFocused(ev), onCommentsToggled: () => this.onToggleValidationComments() }));
+    return (this.displayValidationComments && (h("yoo-form-input-comments", { readonly: readonly, user: this.validationCommentsUser, comments: this.validationComments, onInputChanged: (ev) => this.onValidationCommentsChange(ev), onInputFocused: (ev) => this.onCommentFocused(ev), onCommentsToggled: () => this.onToggleValidationComments() })));
   }
   render() {
     var _a;
@@ -415,7 +404,7 @@ export class YooFormInputContainerComponent {
         line: this.isCheckboxOrToggle((_a = this.field) === null || _a === void 0 ? void 0 : _a.type) && this.forceReadonly,
         media: this.isMedia(),
         invalid: this.markAsInvalid
-      }, ...getConfig().isE2E ? this.getE2EAttributes() : {} }, this.field && [
+      }, ...(getConfig().isE2E ? this.getE2EAttributes() : {}) }, this.field && [
       this.renderContent(),
       this.field.hint && this.renderHint(),
       this.renderFooter(),
@@ -840,6 +829,23 @@ export class YooFormInputContainerComponent {
       "attribute": "hide-compliance-tags",
       "reflect": false
     },
+    "useUppercaseLabel": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "use-uppercase-label",
+      "reflect": false
+    },
     "fullscreen": {
       "type": "boolean",
       "mutable": false,
@@ -862,7 +868,7 @@ export class YooFormInputContainerComponent {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "{ inputFn: (slots: HTMLElement[]) => any, slideTitle: any }",
+        "original": "{ inputFn: (slots: HTMLElement[]) => any; slideTitle: any }",
         "resolved": "{ inputFn: (slots: HTMLElement[]) => any; slideTitle: any; }",
         "references": {
           "HTMLElement": {

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

@@ -24,12 +24,21 @@ export class YooFormTextAreaComponent {
     this.updateSegmentsCountDebounce = debounce(() => this.updateSegmentsCount(), 2000);
     this.scrollIntoViewOnFocus = false;
   }
+  get isRichText() {
+    return this.allowMention || this.allowCustomInput;
+  }
   onValueChanged(value) {
+    if (!this.inputEl) {
+      return;
+    }
     // clean input and sync mention ids when the value is cleared from outside
-    if (this.allowMention && this.inputEl && !value) {
+    if (this.isRichText && !value) {
       this.inputEl.innerHTML = replaceAtTagToMentionTag(value, this.mentions);
       this.syncMentionIds();
     }
+    else if (!this.isRichText) {
+      this.inputEl.value = value;
+    }
   }
   allowMentionChanged() {
     forceUpdate(this);
@@ -106,7 +115,7 @@ export class YooFormTextAreaComponent {
     }
   }
   componentDidLoad() {
-    if (this.allowMention || this.allowCustomInput) {
+    if (this.isRichText) {
       // block click event when editing the tag
       if (this.inputEl) {
         if (this.value) {
@@ -404,7 +413,7 @@ export class YooFormTextAreaComponent {
     return [
       h("div", { class: "outer-container" },
         h("div", { class: "inner-container" },
-          this.allowMention || this.allowCustomInput ? this.renderMentionContainer() : this.renderTextArea(),
+          this.isRichText ? this.renderMentionContainer() : this.renderTextArea(),
           h("slot", { name: "placeholder" })),
         h("slot", { name: "right" }),
         ((_a = this.inlineActions) === null || _a === void 0 ? void 0 : _a.length) > 0 &&