@yoobic/yobi 8.3.1-2 → 8.3.1-20

package/dist/collection/components/form/form-image-tagging/form-image-tagging.js

@@ -5,7 +5,7 @@ import { getFromOfflineStorage } from '../../../utils/cache';
 import { initTags } from '../../../utils/draggables';
 import { getPercentPositionStyle } from '../../../utils/helpers/annotations-helpers';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
-import { checkArray, filterDuplicateEntries, hasDuplicates, showWarningAlert } from '../../../utils/helpers/draggable-tags-helpers';
+import { checkArray, filterDuplicateEntries, hasDuplicates, showWarningBanner } from '../../../utils/helpers/draggable-tags-helpers';
 import { setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
 export class YooFormImageTaggingComponent {
   constructor() {
@@ -28,7 +28,7 @@ export class YooFormImageTaggingComponent {
   onValuesChanged(newValues, oldValues) {
     var _a;
     if (!isEqual(newValues === null || newValues === void 0 ? void 0 : newValues.sort(), oldValues === null || oldValues === void 0 ? void 0 : oldValues.sort())) {
-      showWarningAlert(this.host, hasDuplicates(newValues));
+      showWarningBanner(this.host, hasDuplicates(newValues));
       (_a = this.tags) === null || _a === void 0 ? void 0 : _a.updateTags({ newValues, oldValues });
     }
   }
@@ -58,9 +58,8 @@ export class YooFormImageTaggingComponent {
   }
   get zonesConfig() {
     const getZoneConfig = (zoneType) => {
-      const isTagZone = zoneType === 'tagZone';
       return {
-        hasOverflow: isTagZone,
+        hasOverflow: zoneType === 'tagZone',
         colorClass: 'app-color'
       };
     };
@@ -82,7 +81,7 @@ export class YooFormImageTaggingComponent {
   }
   validate() {
     var _a, _b;
-    this.validity = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) === ((_b = this.annotations) === null || _b === void 0 ? void 0 : _b.length);
+    this.validity = !this.required || (((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) === ((_b = this.annotations) === null || _b === void 0 ? void 0 : _b.length));
     this.validityChanged.emit(this.validity);
     return this.validity;
   }
@@ -91,7 +90,7 @@ export class YooFormImageTaggingComponent {
       var _a, _b;
       !((_b = (_a = this.tags) === null || _a === void 0 ? void 0 : _a.tags) === null || _b === void 0 ? void 0 : _b.length) && (this.tags = initTags(this.tagConfig, this.zonesConfig));
       this.flipImage = false;
-      showWarningAlert(this.host, hasDuplicates(this.values));
+      showWarningBanner(this.host, hasDuplicates(this.values));
     }, 500);
   }
   async getImageSrc() {
@@ -107,6 +106,7 @@ export class YooFormImageTaggingComponent {
     return 'app-color';
   }
   showImageOverlay(showOverlay = true) {
+    this.tags.setTagsZoneOverflow(false);
     if (this.imageOverlayElement) {
       this.imageOverlayElement.style.opacity = (showOverlay ? 1 : 0).toString();
     }
@@ -135,7 +135,7 @@ export class YooFormImageTaggingComponent {
       h("div", { class: "dropzone", id: "zone-tags" }));
   }
   renderBanner() {
-    return this.livePreview && h("yoo-banner", null,
+    return this.livePreview && !this.readonly && h("yoo-banner", null,
       h("p", { slot: "content" }));
   }
   render() {
@@ -172,6 +172,40 @@ export class YooFormImageTaggingComponent {
       "reflect": true,
       "defaultValue": "true"
     },
+    "readonly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "readonly",
+      "reflect": true
+    },
+    "livePreview": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "live-preview",
+      "reflect": true
+    },
     "value": {
       "type": "unknown",
       "mutable": true,
@@ -205,26 +239,6 @@ export class YooFormImageTaggingComponent {
       "attribute": "validity",
       "reflect": false
     },
-    "image": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "IFileInterface",
-        "resolved": "IFileInterface",
-        "references": {
-          "IFileInterface": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
     "answer": {
       "type": "unknown",
       "mutable": false,
@@ -258,39 +272,45 @@ export class YooFormImageTaggingComponent {
       "reflect": false,
       "defaultValue": "'DRAGDROPTAGS'"
     },
-    "readonly": {
-      "type": "boolean",
+    "annotations": {
+      "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+        "original": "IPhotoAnnotation[]",
+        "resolved": "IPhotoAnnotation[]",
+        "references": {
+          "IPhotoAnnotation": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
         "text": ""
-      },
-      "attribute": "readonly",
-      "reflect": false
+      }
     },
-    "livePreview": {
-      "type": "boolean",
+    "image": {
+      "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+        "original": "IFileInterface",
+        "resolved": "IFileInterface",
+        "references": {
+          "IFileInterface": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
         "text": ""
-      },
-      "attribute": "live-preview",
-      "reflect": false
+      }
     },
     "required": {
       "type": "boolean",
@@ -309,26 +329,6 @@ export class YooFormImageTaggingComponent {
       "attribute": "required",
       "reflect": false
     },
-    "annotations": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "IPhotoAnnotation[]",
-        "resolved": "IPhotoAnnotation[]",
-        "references": {
-          "IPhotoAnnotation": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
     "values": {
       "type": "unknown",
       "mutable": false,

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.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);
     }
@@ -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": {