@yoobic/yobi 8.3.0 → 8.3.1-10

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.css

@@ -1260,62 +1260,6 @@ span.fr-img-caption.fr-view {
   text-transform: unset;
 }
 
-:host([animated].number.lesson) .description,
-:host([animated].number.lesson) .label,
-:host([animated].number.lesson) .instructions,
-:host([animated].number.lesson) .content-container {
-  animation-duration: 300ms;
-  animation-timing-function: var(--ease-out-quad);
-  animation-fill-mode: forwards;
-}
-:host([animated].number.lesson) .description,
-:host([animated].number.lesson) .label {
-  transform: translateX(var(--container-width-reverse));
-}
-:host([animated].number.lesson) .instructions {
-  transform: translateX(var(--container-width-reverse));
-  animation-delay: 200ms;
-}
-:host([animated].number.lesson) .content-container {
-  transform: translateX(var(--container-width));
-  animation-delay: 500ms;
-}
-
-:host([animated].mobile.number.lesson) .description,
-:host([animated].mobile.number.lesson) .label {
-  animation-delay: 200ms;
-}
-:host([animated].mobile.number.lesson) .instructions {
-  animation-delay: 400ms;
-}
-:host([animated].mobile.number.lesson) .content-container {
-  animation-delay: 700ms;
-}
-
-:host([animated].selectimage.lesson) .description,
-:host([animated].selectimage.lesson) .label {
-  transform: translateX(var(--container-width-reverse));
-  animation-duration: 300ms;
-  animation-timing-function: var(--ease-out-quad);
-  animation-fill-mode: forwards;
-}
-
-@keyframes sliding-from-left {
-  from {
-    transform: translateX(var(--container-width-reverse));
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-@keyframes sliding-from-right {
-  from {
-    transform: translateX(var(--container-width));
-  }
-  to {
-    transform: translateX(0);
-  }
-}
 :host(.inline-row:not(.label-top-aligned)) .top-container {
   display: flex;
   align-items: center;

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);
     }
@@ -256,7 +251,7 @@ export class YooFormInputContainerComponent {
   }
   onRTEContentClick(ev) {
     var _a;
-    openImageDetailFromRTE(this.descriptionElement, (_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a.src);
+    openImageDetailFromRTE(this.host, this.descriptionElement, (_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a.src);
     this.headerClicked.emit();
   }
   renderDescription() {
@@ -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-product-batch/form-product-batch.js

@@ -1,5 +1,5 @@
 import { translate } from '@shared/utils';
-import { Component, Event, h, Prop, Watch } from '@stencil/core';
+import { Component, Element, Event, h, Prop, Watch } from '@stencil/core';
 import { getProductBatchDateTag } from '../../../feature-operate/campaign/helpers/operation-helpers';
 import { showPhotoEditor } from '../../../utils/helpers/common-helpers';
 import { setValidator } from '../../../utils/helpers/form-input-helpers';
@@ -26,7 +26,7 @@ export class YooFormProductBatchComponent {
   }
   onOpenImage() {
     var _a, _b, _c;
-    showPhotoEditor({ src: (_c = (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.product) === null || _b === void 0 ? void 0 : _b.image) === null || _c === void 0 ? void 0 : _c._downloadURL, isReadonly: true }, {
+    showPhotoEditor(this.host, { src: (_c = (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.product) === null || _b === void 0 ? void 0 : _b.image) === null || _c === void 0 ? void 0 : _c._downloadURL, isReadonly: true }, {
       enterAnimation: 'slideYEnterAnimation',
       leaveAnimation: 'slideYLeaveAnimation'
     });
@@ -257,6 +257,7 @@ export class YooFormProductBatchComponent {
         "references": {}
       }
     }]; }
+  static get elementRef() { return "host"; }
   static get watchers() { return [{
       "propName": "required",
       "methodName": "onRequireChanged"

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

@@ -88,7 +88,7 @@ export class YooFormTableComponent {
   onUpsertItem(item) {
     if (!this.isAddingOrEditing) {
       this.isAddingOrEditing = true;
-      getAsyncExtraData({ type: 'field-table-add', params: { collectionName: this.collectionName, customModel: this.customModel, item, slidesTransform: this.slidesTransform } })
+      getAsyncExtraData({ type: 'field-table-add', params: { collectionName: this.collectionName, customModel: this.customModel, item, slidesTransform: this.slidesTransform, forceMobile: !isWeb(this.host) } })
         .then((ret) => {
         if (ret && ret.data) {
           this.afterUpsertItem(ret.data, item);
@@ -113,7 +113,7 @@ export class YooFormTableComponent {
   }
   onSelectItem(item) {
     if (this.readonly) {
-      getAsyncExtraData({ type: 'field-table-add', params: { collectionName: this.collectionName, customModel: this.customModel, item, readonly: true } });
+      getAsyncExtraData({ type: 'field-table-add', params: { collectionName: this.collectionName, customModel: this.customModel, item, readonly: true, forceMobile: !isWeb(this.host) } });
     }
     else {
       this.onUpsertItem(item);

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

@@ -90,7 +90,7 @@ export class YooFormTaskComponent {
     ] : null;
     showModal(form, {
       height: 'medium'
-    }, null, getModalAnimation('Enter', 'X', true), getModalAnimation('Leave', 'X', true), true).then((ret) => {
+    }, null, getModalAnimation('Enter', 'X', { host: this.host, reversedSlide: true }), getModalAnimation('Leave', 'X', { host: this.host, reversedSlide: true }), true).then((ret) => {
       if (ret === null || ret === void 0 ? void 0 : ret.data) {
         this.value = this.value || [];
         if (index < 0) {

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) {
@@ -123,6 +132,9 @@ export class YooFormTextAreaComponent {
         const textArea = this.inputEl;
         textArea.setAttribute('style', `resize: ${this.resizable};`);
       }
+      if (this.inputEl && this.value) {
+        this.inputEl.value = this.value;
+      }
     }
     if (isNativeMobile() && isIOS()) {
       enableKeyboardResize();
@@ -385,7 +397,7 @@ export class YooFormTextAreaComponent {
   renderTextArea() {
     const hasValue = !isNullOrUndefined(this.value) && this.value !== '';
     return [
-      h("textarea", { ref: (el) => (this.inputEl = el), value: this.value || '', onClick: (ev) => {
+      h("textarea", { ref: (el) => (this.inputEl = el), onClick: (ev) => {
           if (isWeb() && isFirefox()) {
             this.inputEl.focus();
             this.onInputFocused('textarea');
@@ -401,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 &&

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

@@ -78,7 +78,7 @@ export class YooFormTextEditorComponent {
   }
   onValueChange() {
     var _a, _b;
-    if (this.editor && (this.resetHtml || this.forceResetHTML) && this.editor.html.get() !== this.value) {
+    if (this.editor && (this.resetHtml || this.forceResetHTML) && this.editor.html.get() !== this.value && this.value !== this.lastSavedValue) {
       if (!this.blockHTMLReset || !this.editor.html.get()) {
         try {
           this.setLocalValue();
@@ -732,6 +732,7 @@ export class YooFormTextEditorComponent {
       html = html.replace(/&/g, '&');
       this.blockHTMLReset = true;
     }
+    this.lastSavedValue = html;
     this.emitValueAndSetValidity(html, this, null, true, false, ((_b = this.translationKey) === null || _b === void 0 ? void 0 : _b.length) > 0);
     if (((_c = this.translationKey) === null || _c === void 0 ? void 0 : _c.length) > 0) {
       this.translationValueUpdated.emit({ key: this.translationKey, value: this.editor.html.get() });

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

@@ -61,7 +61,7 @@ export class YooFormTodoComponent {
       dialog.fieldFetchDataFn = (ev) => {
         this.fieldFetchData.emit(ev);
       };
-      showModal(dialog, { height: 'medium' }, '', getModalAnimation('Enter', 'Y'), getModalAnimation('Leave', 'Y'), true).then((ret) => {
+      showModal(dialog, { height: 'medium' }, '', getModalAnimation('Enter', 'Y', { host: this.host }), getModalAnimation('Leave', 'Y', { host: this.host }), true).then((ret) => {
         if (ret === null || ret === void 0 ? void 0 : ret.data) {
           setValueAndValidateInput(ret.data, this);
         }