@yoobic/yobi 8.3.7 → 8.4.0-1

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

@@ -1,16 +1,16 @@
 import { FormFieldType } from '@shared/interfaces';
-import { debounce, getKeyToCache, getMedia, getURLs, isFieldWithNoValue, isNativeMobile, isNullOrUndefined, isOffline, isPdf, isWeb, isYoobicSecuredDocTenant, pipes, resizeObserve, showDocumentDownloadOptions, translate, translateMulti } from '@shared/utils';
+import { debounce, getKeyToCache, getMedia, getURLs, isFieldWithNoValue, isNullOrUndefined, isOffline, isWeb, isYoobicSecuredDocTenant, pipes, translate, translateMulti } from '@shared/utils';
 import { Component, Element, Event, forceUpdate, h, Host, Prop, State } from '@stencil/core';
 import { isNumber } from 'lodash-es';
 import { getFromLocalForage } from '../../../utils/cache';
-import { getAppContext, getConfig, openImageDetailFromRTE, querySelectorDeep } from '../../../utils/helpers/common-helpers';
+import { getAppContext, openImageDetailFromRTE, querySelectorDeep } from '../../../utils/helpers/common-helpers';
 export class YooFormInputContainerComponent {
   constructor() {
-    this.animated = true;
     /**
-     * If fullscreen is true, will not display any label/descriptions on top (meant to be included in the field)
-     */
+   * If fullscreen is true, will not display any label/descriptions on top (meant to be included in the field)
+   */
     this.fullscreen = false;
+    this.animated = true;
     this.showComments = false;
     this.showValidationComments = false;
     this.showLabel = false;
@@ -22,16 +22,6 @@ export class YooFormInputContainerComponent {
     this.onValidationCommentsChange = debounce((ev) => {
       this.validationCommented.emit(ev.detail);
     });
-    this.resizeDebounce = async () => {
-      if (this.field.type === FormFieldType.number)
-        this.animateNumber();
-      if (this.field.type === FormFieldType.selectimage)
-        this.animateSelectImage();
-    };
-    this.onResize = () => {
-      clearTimeout(this.timeOutId);
-      this.timeOutId = setTimeout(this.resizeDebounce, 200);
-    };
   }
   get displayValidationFooter() {
     return this.allowFieldValidation && this.readonly && this.field && !isFieldWithNoValue(this.field);
@@ -39,17 +29,20 @@ export class YooFormInputContainerComponent {
   get displayValidationComments() {
     return this.showValidationComments || !!this.validationComments;
   }
+  get fieldType() {
+    var _a;
+    return (_a = this.field) === null || _a === void 0 ? void 0 : _a.type;
+  }
+  get isLesson() {
+    return this.formType === 'lesson' || this.formType === 'form-creator-preview-lesson';
+  }
   async componentWillLoad() {
     this.setContent();
-    this.showComments = !isNullOrUndefined(this.comments) && this.field.type !== FormFieldType.feedpreview;
-    // this.showValidationComments = !isNullOrUndefined(this.validationComments) && this.field.type !== FormFieldType.feedpreview;
+    this.showComments = !isNullOrUndefined(this.comments) && this.fieldType !== FormFieldType.feedpreview;
   }
   componentWillRender() {
     this.initTopText();
   }
-  componentDidLoad() {
-    this.animateContent();
-  }
   onToggleComments() {
     this.showComments = !this.showComments;
     if (this.showComments) {
@@ -94,7 +87,7 @@ export class YooFormInputContainerComponent {
     if (this.field) {
       this.showDescription = this.initShowDescription((_a = this.field) === null || _a === void 0 ? void 0 : _a.showDescriptionAndTitle, this.field, this.readonly, this.forceReadonly, this.forceDescription);
       this.showLabel = this.initShowLabel(this.showDescription, (_b = this.field) === null || _b === void 0 ? void 0 : _b.showDescriptionAndTitle, this.field, this.readonly);
-      this.shouldShowDefaultInstructions = this.initShouldShowDefaultInstructions(this.showDefaultInstructions, this.field.type, this.readonly);
+      this.shouldShowDefaultInstructions = this.initShouldShowDefaultInstructions(this.isLesson, this.fieldType, this.readonly);
     }
   }
   initShowDescription(showDescriptionAndTitle, field, readOnly, forceReadOnly, forceDescription) {
@@ -126,7 +119,7 @@ export class YooFormInputContainerComponent {
   }
   getComponentDescriptionExtraClass() {
     let extraClass = '';
-    switch (this.field.type) {
+    switch (this.fieldType) {
       case FormFieldType.selectbuttons:
       case FormFieldType.selectbuttonsmulti:
       case FormFieldType.selectimage:
@@ -151,7 +144,7 @@ export class YooFormInputContainerComponent {
   getFieldDefaultInstructions() {
     let key = '';
     let params = {};
-    switch (this.field.type) {
+    switch (this.fieldType) {
       case FormFieldType.selectmulti:
         key = 'SELECTALLAPPLY';
         break;
@@ -213,13 +206,6 @@ export class YooFormInputContainerComponent {
       forceUpdate(this);
     }
   }
-  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);
-    if (this.isLesson && isAnimatedField) {
-      resizeObserve(this.host, this.onResize);
-    }
-  }
   animateNumber() {
     if (this.host.offsetWidth !== 0) {
       this.host.style.setProperty('--container-width', this.host.offsetWidth + 'px');
@@ -241,14 +227,6 @@ export class YooFormInputContainerComponent {
         this.labelElement.style.animationName = 'sliding-from-left';
     }
   }
-  getE2EAttributes() {
-    var _a, _b, _c;
-    const attrs = [];
-    attrs['data-title'] = translateMulti(this.field.title || ((_a = this.field.name) === null || _a === void 0 ? void 0 : _a.toUpperCase()) || '');
-    attrs['data-type'] = (_b = this.field) === null || _b === void 0 ? void 0 : _b.type;
-    attrs['data-language'] = (_c = this.field) === null || _c === void 0 ? void 0 : _c.language;
-    return attrs;
-  }
   onRTEContentClick(ev) {
     var _a;
     openImageDetailFromRTE(this.host, this.descriptionElement, (_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a.src);
@@ -262,13 +240,8 @@ export class YooFormInputContainerComponent {
       h("span", { class: "field-description full-width", innerHTML: translateMulti(this.field.description) }),
       h("span", { class: "extra-options-container" },
         this.renderOptional(),
-        this.renderPdfDownload(),
         this.renderRightSide(!!this.field.title && !!this.field.help))));
   }
-  renderPdfDownload() {
-    return (isPdf(this.field.document) &&
-      isNativeMobile() && h("yoo-icon", { onClick: () => showDocumentDownloadOptions(this.field.document, null, true, this.host), name: "more", color: "text-color", class: "more" }));
-  }
   renderOptional() {
     return this.showOptional() && h("span", { class: "optional" },
       "(",
@@ -312,36 +285,35 @@ export class YooFormInputContainerComponent {
         readonly: this.readonly,
         invalid: this.invalid,
         'field-heading': this.host.classList.contains('login-screen'),
-        'password-title': this.field && this.field.type === FormFieldType.password
+        'password-title': this.field && this.fieldType === FormFieldType.password
       }, onClick: () => this.headerClicked.emit() },
       !this.hideLabel && h("span", { class: contentClass, innerHTML: this.getFieldTitle() }),
       this.renderOptional(),
-      this.renderPdfDownload(),
       this.renderRightSide()));
   }
   renderDefaultInstructions() {
     return (h("span", { class: {
         instructions: true,
-        success: this.host.classList.contains('success') && this.field.type === FormFieldType.plan,
-        'app-color': this.host.classList.contains('app-color') && this.field.type === FormFieldType.plan
+        success: this.host.classList.contains('success') && this.fieldType === FormFieldType.plan,
+        'app-color': this.host.classList.contains('app-color') && this.fieldType === FormFieldType.plan
       }, 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()];
   }
   renderInnerContent() {
-    var _a, _b, _c;
+    var _a, _b;
     return (h("div", { ref: (el) => (this.contentContainerElement = el), class: {
         'content-container': true,
         readonly: this.readonly,
-        'full-width': this.isCheckboxOrToggle(this.field.type),
+        'full-width': this.isCheckboxOrToggle(this.fieldType),
         'no-margin': this.field.allowTask,
-        'no-padding': ((_a = this.field) === null || _a === void 0 ? void 0 : _a.type) === FormFieldType.multiinput
+        'no-padding': this.fieldType === FormFieldType.multiinput
       } },
       this.slotInputConfig &&
-        ((_b = this.slotInputConfig) === null || _b === void 0 ? void 0 : _b.inputFn([
+        ((_a = this.slotInputConfig) === null || _a === void 0 ? void 0 : _a.inputFn([
           h("div", { class: "title-wrapper", slot: "image-title" },
-            ((_c = this.slotInputConfig) === null || _c === void 0 ? void 0 : _c.slideTitle) && this.slotInputConfig.slideTitle(),
+            ((_b = this.slotInputConfig) === null || _b === void 0 ? void 0 : _b.slideTitle) && this.slotInputConfig.slideTitle(),
             this.renderTopText())
         ])),
       h("slot", null),
@@ -350,7 +322,7 @@ export class YooFormInputContainerComponent {
   renderContent() {
     return (h("div", { class: {
         'top-container': true,
-        column: this.readonly && this.isCheckboxOrToggle(this.field.type)
+        column: this.readonly && this.isCheckboxOrToggle(this.fieldType)
       } },
       this.renderOriginalMarkAsInvalid(),
       this.renderOriginalMarkAsModified(),
@@ -397,14 +369,17 @@ export class YooFormInputContainerComponent {
     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;
+    var _a, _b, _c, _d;
     return (h(Host, { class: {
         ...getAppContext(this.host),
-        readonly: this.readonly,
-        line: this.isCheckboxOrToggle((_a = this.field) === null || _a === void 0 ? void 0 : _a.type) && this.forceReadonly,
+        line: this.isCheckboxOrToggle(this.fieldType) && this.forceReadonly,
         media: this.isMedia(),
         invalid: this.markAsInvalid
-      }, ...(getConfig().isE2E ? this.getE2EAttributes() : {}) }, this.field && [
+      }, ...{
+        'field-type': this.fieldType,
+        language: (_a = this.field) === null || _a === void 0 ? void 0 : _a.language,
+        title: translateMulti(((_b = this.field) === null || _b === void 0 ? void 0 : _b.title) || ((_d = (_c = this.field) === null || _c === void 0 ? void 0 : _c.name) === null || _d === void 0 ? void 0 : _d.toUpperCase()) || '')
+      } }, this.field && [
       this.renderContent(),
       this.field.hint && this.renderHint(),
       this.renderFooter(),
@@ -423,14 +398,32 @@ export class YooFormInputContainerComponent {
     "$": ["form-input-container.css"]
   }; }
   static get properties() { return {
-    "field": {
-      "type": "unknown",
+    "fullscreen": {
+      "type": "boolean",
       "mutable": false,
       "complexType": {
-        "original": "IFormField",
-        "resolved": "IFormField",
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "If fullscreen is true, will not display any label/descriptions on top (meant to be included in the field)"
+      },
+      "attribute": "fullscreen",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "formType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FormDynamicType",
+        "resolved": "\"form-creator-announcement\" | \"form-creator-block\" | \"form-creator-preview\" | \"form-creator-preview-kanban\" | \"form-creator-preview-lesson\" | \"form-creator-preview-workflow\" | \"kanban\" | \"lesson\" | \"lesson-detail\" | \"lesson-question-result\" | \"mission\" | \"mission-validation\" | \"poll\" | \"service\" | \"todo\" | \"visit\" | \"waitlist\" | \"workflow\"",
         "references": {
-          "IFormField": {
+          "FormDynamicType": {
             "location": "import",
             "path": "@shared/interfaces"
           }
@@ -441,7 +434,9 @@ export class YooFormInputContainerComponent {
       "docs": {
         "tags": [],
         "text": ""
-      }
+      },
+      "attribute": "form-type",
+      "reflect": true
     },
     "required": {
       "type": "boolean",
@@ -458,7 +453,7 @@ export class YooFormInputContainerComponent {
         "text": ""
       },
       "attribute": "required",
-      "reflect": false
+      "reflect": true
     },
     "readonly": {
       "type": "boolean",
@@ -475,26 +470,31 @@ export class YooFormInputContainerComponent {
         "text": ""
       },
       "attribute": "readonly",
-      "reflect": false
+      "reflect": true
     },
-    "forceReadonly": {
-      "type": "boolean",
+    "size": {
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+        "original": "TSize",
+        "resolved": "\"extra-extra-large\" | \"extra-large\" | \"extra-small\" | \"large\" | \"medium\" | \"small\"",
+        "references": {
+          "TSize": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
       },
-      "attribute": "force-readonly",
-      "reflect": false
+      "attribute": "size",
+      "reflect": true
     },
-    "forceDescription": {
+    "animated": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -503,49 +503,53 @@ export class YooFormInputContainerComponent {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
       },
-      "attribute": "force-description",
-      "reflect": false
+      "attribute": "animated",
+      "reflect": true,
+      "defaultValue": "true"
     },
-    "comments": {
-      "type": "string",
+    "livePreview": {
+      "type": "boolean",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "boolean",
+        "resolved": "boolean",
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
       },
-      "attribute": "comments",
-      "reflect": false
+      "attribute": "live-preview",
+      "reflect": true
     },
-    "validationComments": {
-      "type": "string",
+    "field": {
+      "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+        "original": "IFormField",
+        "resolved": "IFormField",
+        "references": {
+          "IFormField": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
         "text": ""
-      },
-      "attribute": "validation-comments",
-      "reflect": false
+      }
     },
-    "markAsModified": {
+    "forceReadonly": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -554,15 +558,15 @@ export class YooFormInputContainerComponent {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": ""
       },
-      "attribute": "mark-as-modified",
+      "attribute": "force-readonly",
       "reflect": false
     },
-    "markAsInvalid": {
+    "forceDescription": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -571,32 +575,32 @@ export class YooFormInputContainerComponent {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": ""
       },
-      "attribute": "mark-as-invalid",
+      "attribute": "force-description",
       "reflect": false
     },
-    "originalMarkAsInvalid": {
-      "type": "boolean",
+    "comments": {
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "string",
+        "resolved": "string",
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": ""
       },
-      "attribute": "original-mark-as-invalid",
+      "attribute": "comments",
       "reflect": false
     },
-    "time": {
+    "validationComments": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -610,10 +614,10 @@ export class YooFormInputContainerComponent {
         "tags": [],
         "text": ""
       },
-      "attribute": "time",
+      "attribute": "validation-comments",
       "reflect": false
     },
-    "invalid": {
+    "markAsModified": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -622,15 +626,15 @@ export class YooFormInputContainerComponent {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
       },
-      "attribute": "invalid",
+      "attribute": "mark-as-modified",
       "reflect": false
     },
-    "hideOptional": {
+    "markAsInvalid": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -639,15 +643,15 @@ export class YooFormInputContainerComponent {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
       },
-      "attribute": "hide-optional",
+      "attribute": "mark-as-invalid",
       "reflect": false
     },
-    "hideLabel": {
+    "originalMarkAsInvalid": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -656,32 +660,32 @@ export class YooFormInputContainerComponent {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
       },
-      "attribute": "hide-label",
+      "attribute": "original-mark-as-invalid",
       "reflect": false
     },
-    "showDefaultInstructions": {
-      "type": "boolean",
+    "time": {
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "string",
+        "resolved": "string",
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": ""
       },
-      "attribute": "show-default-instructions",
+      "attribute": "time",
       "reflect": false
     },
-    "isLesson": {
+    "invalid": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -690,15 +694,15 @@ export class YooFormInputContainerComponent {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": ""
       },
-      "attribute": "is-lesson",
+      "attribute": "invalid",
       "reflect": false
     },
-    "isPreview": {
+    "hideOptional": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -707,37 +711,15 @@ export class YooFormInputContainerComponent {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": ""
       },
-      "attribute": "is-preview",
+      "attribute": "hide-optional",
       "reflect": false
     },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "TSize",
-        "resolved": "\"extra-extra-large\" | \"extra-large\" | \"extra-small\" | \"large\" | \"medium\" | \"small\"",
-        "references": {
-          "TSize": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "size",
-      "reflect": true
-    },
-    "animated": {
+    "hideLabel": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -746,14 +728,13 @@ export class YooFormInputContainerComponent {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": ""
       },
-      "attribute": "animated",
-      "reflect": true,
-      "defaultValue": "true"
+      "attribute": "hide-label",
+      "reflect": false
     },
     "allowFieldValidation": {
       "type": "boolean",
@@ -846,24 +827,6 @@ export class YooFormInputContainerComponent {
       "attribute": "use-uppercase-label",
       "reflect": false
     },
-    "fullscreen": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "If fullscreen is true, will not display any label/descriptions on top (meant to be included in the field)"
-      },
-      "attribute": "fullscreen",
-      "reflect": false,
-      "defaultValue": "false"
-    },
     "slotInputConfig": {
       "type": "unknown",
       "mutable": false,