@yoobic/yobi 8.3.1-0 → 8.3.1-11

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": {

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-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 &&