@yoobic/yobi 7.7.40 → 7.7.44

package/dist/collection/components/form/form-connect/types/index.js

@@ -1 +1 @@
-export {};
+export const CONNECT_TYPES = ['draggable', 'connectable'];

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

@@ -287,6 +287,18 @@ export class YooFormDynamicComponent {
       }
     }
   }
+  async resetCurrentPage(field) {
+    const el = this.getFieldByCode(field.name);
+    if (el) {
+      switch (field.type) {
+        case FormFieldType.grid: {
+          const grid = el;
+          grid.resetCurrentPage();
+          break;
+        }
+      }
+    }
+  }
   async afterFetchCustomData(field, data, options) {
     const el = this.getFieldByCode(field.name);
     if (el) {
@@ -375,11 +387,12 @@ export class YooFormDynamicComponent {
     }
   }
   async onSlideNext(skipEmitEvent = false) {
+    var _a;
     this.checkIfFirstSlideAndLockSwipePrev();
     if (!skipEmitEvent && this.isLesson() &&
       ((this.showAnswers && isQuiz(this.lessonType) && !isTimedQuiz(this.lessonType)) || isConfidenceAssesment(this.lessonType))) {
       const field = this.slides[this.activeIndex].items[0];
-      let slideData = { index: this.activeIndex, field, data: this.data[field.name] };
+      let slideData = { index: this.activeIndex, field, data: (_a = this.data) === null || _a === void 0 ? void 0 : _a[field.name] };
       if (isConfidenceAssesment(this.lessonType)) {
         slideData = Object.assign(Object.assign({}, slideData), { showAnswers: this.showAnswers, hasFeedback: isConfidenceAssesment(this.lessonType) });
       }
@@ -3612,7 +3625,7 @@ export class YooFormDynamicComponent {
           'lesson-live-preview': this.isLessonPreview(),
           [field.type]: true
         };
-        return (markdown && h("yoo-markdown", { class: cssClass, style: { color: `${color}` }, linkPreviews: field.linkPreviews, content: translateMulti(pipes.https.transform(markdown)) }));
+        return (markdown && h("yoo-markdown", { class: cssClass, isVisible: this.isCurrentSlide(slideIndex), style: { color: `${color}` }, linkPreviews: field.linkPreviews, content: translateMulti(pipes.https.transform(markdown)) }));
       }
       case FormFieldType.renderer:
         return field.handler && h("div", { innerHTML: field.handler(this.currentData, field, this.injector) });
@@ -3660,6 +3673,7 @@ export class YooFormDynamicComponent {
           answer: field.answer,
           image: field.image,
           annotations: field.annotations,
+          isVisible: this.isCurrentSlide(slideIndex),
           slideIndex,
           livePreview: this.isLessonPreview()
         };
@@ -5666,6 +5680,32 @@ export class YooFormDynamicComponent {
         "tags": []
       }
     },
+    "resetCurrentPage": {
+      "complexType": {
+        "signature": "(field: IFormField) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "IFormField": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          },
+          "HTMLYooGridElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
     "afterFetchCustomData": {
       "complexType": {
         "signature": "(field: IFormField, data: any, options?: any) => Promise<void>",

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

@@ -1,5 +1,5 @@
 import { getCssColor, translate, translateMulti } from '@shared/utils';
-import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from '@stencil/core';
+import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 import { checkArray, filterDuplicateEntries, getAppContext, getDroppedTagsValues, getNewValue, getPercentPositionStyle, getTagsValues, getTagZone, hasDuplicates, hasValuesChanged, initTags, initZones, isTagsZone, resetTags, setDynamicTagZoneHeight, setValueAndValidateInput, showWarningAlert } from '@utils';
 import { debounce } from 'lodash-es';
 const PERCENT_BASE = 100;
@@ -9,9 +9,6 @@ export class YooFormImageTaggingComponent {
     this.placeholder = 'DRAGDROPTAGS';
     this.zones = [];
   }
-  async isValid() {
-    this.validate();
-  }
   onModalAnimationFinished(iaf) {
     if (iaf && this.zones.length && getTagZone(this.zones)) {
       setDynamicTagZoneHeight(getTagZone(this.zones).element);
@@ -20,6 +17,9 @@ export class YooFormImageTaggingComponent {
   onRequireChanged() {
     this.validate();
   }
+  onAnnotationsChanged() {
+    this.hasAnnotationsChanged = true;
+  }
   onValuesChanged(newValues, oldValues) {
     this.hasValuesChanged = false;
     const hasDuplicatedValues = hasDuplicates(newValues) === 1;
@@ -31,8 +31,16 @@ export class YooFormImageTaggingComponent {
       this.hasValuesChanged = true;
     }
   }
-  onAnnotationsChanged() {
-    this.hasAnnotationsChanged = true;
+  onIsVisibleChanged() {
+    // Timeout set here to reset the draggables in case of being 
+    // in a slide to prevent the non-draggable tags issue 
+    this.isVisible && setTimeout(() => {
+      this.shouldRender = true;
+      forceUpdate(this);
+    }, 150);
+  }
+  async isValid() {
+    this.validate();
   }
   componentWillLoad() {
     var _a;
@@ -45,16 +53,16 @@ export class YooFormImageTaggingComponent {
     }
   }
   componentDidUpdate() {
-    if (this.livePreview && (this.hasValuesChanged || this.hasAnnotationsChanged)) {
+    if ((this.livePreview && (this.hasValuesChanged || this.hasAnnotationsChanged)) || this.shouldRender) {
+      this.shouldRender = false;
       this.initImageTagging();
     }
   }
   validate() {
-    if (checkArray(this.annotations)) {
-      this.validity = this.value.length === this.annotations.length;
-      this.validityChanged.emit(this.validity);
-      return this.validity;
-    }
+    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.validityChanged.emit(this.validity);
+    return this.validity;
   }
   initImageTagging() {
     if (this.image && this.outerContainerElement) {
@@ -93,7 +101,7 @@ export class YooFormImageTaggingComponent {
       newValue: this.newValue,
       zones: this.zones,
       isReadonly: this.readonly,
-      shouldAnimateTags: !(this.readonly || this.livePreview),
+      shouldAnimateTags: !(this.readonly || this.livePreview || this.isVisible),
       shouldTruncateTagsValue: true,
       getColorTag: (tagValue) => this.getColorTag(tagValue),
       boundingElement: this.outerContainerElement,
@@ -365,6 +373,23 @@ export class YooFormImageTaggingComponent {
         "tags": [],
         "text": ""
       }
+    },
+    "isVisible": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-visible",
+      "reflect": false
     }
   }; }
   static get states() { return {
@@ -489,11 +514,11 @@ export class YooFormImageTaggingComponent {
     }, {
       "propName": "required",
       "methodName": "onRequireChanged"
-    }, {
-      "propName": "values",
-      "methodName": "onValuesChanged"
     }, {
       "propName": "annotations",
       "methodName": "onAnnotationsChanged"
+    }, {
+      "propName": "values",
+      "methodName": "onValuesChanged"
     }]; }
 }

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

@@ -169,6 +169,7 @@ export class YooFormTextEditorComponent {
           quickInsertButtons: ['yooTemplateQuick', 'yooUploadButtonQuick', 'emoticons', 'ol', 'ul'],
           colorsBackground: ((_c = (_b = (_a = getSession()) === null || _a === void 0 ? void 0 : _a.tenant) === null || _b === void 0 ? void 0 : _b.rteColors) === null || _c === void 0 ? void 0 : _c.length) > 0 ? (_e = (_d = getSession()) === null || _d === void 0 ? void 0 : _d.tenant) === null || _e === void 0 ? void 0 : _e.rteColors : getColorSwatches(),
           colorsText: ((_h = (_g = (_f = getSession()) === null || _f === void 0 ? void 0 : _f.tenant) === null || _g === void 0 ? void 0 : _g.rteColors) === null || _h === void 0 ? void 0 : _h.length) > 0 ? (_k = (_j = getSession()) === null || _j === void 0 ? void 0 : _j.tenant) === null || _k === void 0 ? void 0 : _k.rteColors : getColorSwatches(),
+          imageEditButtons: ['imageReplace', 'imageAlign', 'imageRemove', '|', 'imageLink', 'linkOpen', 'linkEdit', 'linkRemove', '-', 'imageDisplay', 'imageStyle', 'imageSize'],
           toolbarButtons: {
             moreRich: {
               buttons: ['yooUploadButton', 'emoticons', 'insertImage', 'insertVideo', 'insertTable', 'insertLink', 'specialCharacters', 'insertFile', 'insertHR'],

package/dist/collection/components/form-creator/form-creator-translate-dialog/form-creator-translate-dialog.js

@@ -4,7 +4,7 @@
  * Zeplin Link: https://zpl.io/aMj1PZd https://zpl.io/an7D5jv
  */
 import { COMPLEX_ARRAY_TRANSLATABLE_FORM_FIELD_ATTRIBUTES, FormFieldType, SINGLE_ARRAY_TRANSLATABLE_FORM_FIELD_ATTRIBUTES, TRANSLATABLE_FORM_FIELD_ATTRIBUTES } from '@shared/interfaces';
-import { closeModal, debounce, findField, formatSlides, getCurrentLanguage, getLocaleTranslation, translate, translateMulti } from '@shared/utils';
+import { closeModal, debounce, findField, formatSlides, getCurrentLanguage, getLocaleTranslation, isHTML, translate, translateMulti } from '@shared/utils';
 import { Component, Event, h, Host, Method, Prop, State } from '@stencil/core';
 import { cloneDeep, compact, isEmpty, isObject, isString } from 'lodash-es';
 import { updateLocaleTranslation } from '../helpers';
@@ -95,9 +95,6 @@ export class YooFormCreatorTranslateDialogComponent {
   isCreateTranslationMode() {
     return this.mode === 'create' || this.mode === 'createInitial';
   }
-  isTextEditor(translatableFormField, fieldType) {
-    return translatableFormField === 'description' || translatableFormField === 'explanation' || (translatableFormField === 'value' && fieldType === 'information');
-  }
   initTranslationForms() {
     var _a;
     this.selectedFieldLocation = this.initialSelectedFieldLocation;
@@ -167,13 +164,14 @@ export class YooFormCreatorTranslateDialogComponent {
       field.values = field.values.filter((val) => !field.answer.includes(val));
     }
     TRANSLATABLE_FORM_FIELD_ATTRIBUTES.forEach((translatableFormField) => {
+      const isRTE = isHTML(translateMulti((field === null || field === void 0 ? void 0 : field[translatableFormField]) || ''));
       if (field[translatableFormField] && !(hasComplexSentence && translatableFormField === 'sentence')) {
         if (translatableFormField === 'complexSentence') {
           hasComplexSentence = true;
         }
         slides[0].items.push({
           type: FormFieldType.textarea,
-          language: this.isTextEditor(translatableFormField, field.type) ? 'html' : null,
+          language: isRTE && 'html',
           autoInitialRows: true,
           title: translate(translatableFormField.toUpperCase()),
           name: `${translatableFormField}Base`,
@@ -182,7 +180,7 @@ export class YooFormCreatorTranslateDialogComponent {
         });
         slides[0].items.push({
           type: FormFieldType.textarea,
-          language: this.isTextEditor(translatableFormField, field.type) ? 'html' : null,
+          language: isRTE && 'html',
           autoInitialRows: true,
           title: translate(translatableFormField.toUpperCase()),
           name: translatableFormField,
@@ -210,11 +208,12 @@ export class YooFormCreatorTranslateDialogComponent {
               hasComplexValues = true;
               const value = isString(multiInputValue) ? multiInputValue : multiInputValue.text;
               if (value) {
+                const isRTE = isHTML(translateMulti(value));
                 slides[0].items.push({
                   type: FormFieldType.textarea,
                   title: translate('VALUES'),
                   hideLabel: complexValueIndex !== 0 || valueIndex !== 0,
-                  language: complexTranslatableAttr === 'complexTextSequenceValues' ? 'html' : null,
+                  language: isRTE && 'html',
                   formatAmpersandSymbol: true,
                   autoInitialRows: true,
                   name: `${complexTranslatableAttr}${complexValueIndex}${valueIndex}Base`,
@@ -225,7 +224,7 @@ export class YooFormCreatorTranslateDialogComponent {
                   type: FormFieldType.textarea,
                   title: translate('VALUES'),
                   hideLabel: complexValueIndex !== 0 || valueIndex !== 0,
-                  language: complexTranslatableAttr === 'complexTextSequenceValues' ? 'html' : null,
+                  language: isRTE && 'html',
                   formatAmpersandSymbol: true,
                   autoInitialRows: true,
                   name: `${complexTranslatableAttr}${complexValueIndex}${valueIndex}`,
@@ -261,6 +260,7 @@ export class YooFormCreatorTranslateDialogComponent {
               hideLabel: valueIndex > 0,
               formatAmpersandSymbol: true,
               autoInitialRows: true,
+              language: isHTML(translate(value)) && 'html',
               name: `${singleArrayAttr}${valueIndex}Base`,
               width: 292,
               readonly: this.isTranslator
@@ -271,6 +271,7 @@ export class YooFormCreatorTranslateDialogComponent {
               hideLabel: valueIndex > 0,
               formatAmpersandSymbol: true,
               autoInitialRows: true,
+              language: isHTML(translate(value)) && 'html',
               name: `${singleArrayAttr}${valueIndex}`,
               inlineActions: [
                 { icon: 'translate', iconColor: 'stable-alt', text: 'GOOGLETRANSLATE', handler: () => this.onTranslateField(value, locale) },

package/dist/collection/components/grid/ag-grid/grid-renderers.js

@@ -178,6 +178,7 @@ function keyTranslateRenderer(params) {
   return value;
 }
 function numberRenderer(params) {
+  var _a;
   const factor = params.factor || 1;
   const precision = params.numberPrecision;
   let retVal = params.value;
@@ -197,6 +198,9 @@ function numberRenderer(params) {
   else if (retVal && retVal.toString) {
     retVal = retVal.toString();
   }
+  else if ((_a = params) === null || _a === void 0 ? void 0 : _a.loader) {
+    return '<yoo-loader class="transparent ccenter-container" color="stable-light-to-light-10" size="small"></yoo-loader>';
+  }
   else {
     retVal = '';
   }
@@ -212,10 +216,14 @@ function numberRenderer(params) {
   return retVal.toString();
 }
 function percentageRenderer(params) {
+  var _a;
   const retVal = Number(params.value);
   const factor = params.factor || 1;
   const precision = params.numberPrecision;
   if (isNaN(retVal)) {
+    if ((_a = params) === null || _a === void 0 ? void 0 : _a.loader) {
+      return '<yoo-loader class="transparent ccenter-container" color="stable-light-to-light-10" size="small"></yoo-loader>';
+    }
     return `<div>${params.noValue || ''}</div>`;
   }
   const percentage = pipes.percent.transform(retVal, precision, factor);

package/dist/collection/components/grid/grid/grid.js

@@ -262,6 +262,12 @@ export class YooGridComponent {
       this.addressAutocomplete.updateValues(field.tmpValues);
     }
   }
+  async refreshCells() {
+    var _a;
+    if (this.isAgGrid()) {
+      (_a = this.gridApi) === null || _a === void 0 ? void 0 : _a.refreshCells();
+    }
+  }
   async scrollItem(index) {
     if (index < 0 || index >= this.filteredItems().length) {
       return;
@@ -988,8 +994,26 @@ export class YooGridComponent {
     return cleanedItems;
   }
   onToggleSelected(ev) {
+    var _a;
     this.isSelectedToggleView = ev.detail;
-    this.items = ev.detail ? this.items.filter((item) => this.selection.some((selection) => (selection === null || selection === void 0 ? void 0 : selection._id) === (item === null || item === void 0 ? void 0 : item._id))) : this.itemList;
+    if (this.collectionName) {
+      if (this.isSelectedToggleView) {
+        const ids = compact((_a = this.selection) === null || _a === void 0 ? void 0 : _a.map((s) => s === null || s === void 0 ? void 0 : s._id));
+        if (ids.length > 0) {
+          this.isLoading = true;
+          getAsyncExtraData({ type: 'get-by-ids', params: { collectionName: this.collectionName, ids } }).then((ret) => {
+            this.items = ret;
+            this.isLoading = false;
+          });
+        }
+      }
+      else {
+        this.items = this.itemList;
+      }
+    }
+    else {
+      this.items = ev.detail ? this.items.filter((item) => this.selection.some((selection) => (selection === null || selection === void 0 ? void 0 : selection._id) === (item === null || item === void 0 ? void 0 : item._id))) : this.itemList;
+    }
   }
   updateMarkers() {
     var _a, _b, _c, _d, _e;
@@ -6926,6 +6950,22 @@ export class YooGridComponent {
         "tags": []
       }
     },
+    "refreshCells": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
     "scrollItem": {
       "complexType": {
         "signature": "(index: number) => Promise<void>",

package/dist/collection/utils/helpers/draggable-tags-helpers.js

@@ -25,8 +25,9 @@ export function getNewValue(oldValues, newValues) {
   return checkArray(newValues) && newValues.filter((value) => !oldValues.includes(value))[0];
 }
 export function showWarningAlert(container, show = true, messageKey = 'NODUPLICATEVALUES') {
+  var _a;
   if (container && messageKey) {
-    const bannerElement = container.querySelector('yoo-banner');
+    const bannerElement = container.querySelector('yoo-banner') || ((_a = container === null || container === void 0 ? void 0 : container.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('yoo-banner'));
     if (bannerElement) {
       bannerElement.heading = translate(messageKey);
       const bannerHeight = bannerElement.clientHeight;
@@ -116,29 +117,29 @@ export function initTags(tagsConfig) {
     }
   }
 }
-export function animateTags(tagsConfig, tagElements) {
+export async function animateTags(tagsConfig, tagElements) {
   const ANIM_TRANSITION = .15;
   if (checkArray(tagElements)) {
-    return gsapTimeline().then((timeline) => {
-      if (!timeline) {
-        return;
+    const timeline = await gsapTimeline();
+    if (!timeline) {
+      return;
+    }
+    return timeline({
+      paused: true,
+      onComplete() {
+        populateTags(tagsConfig);
       }
-      const tl = timeline({
-        paused: true,
-        onComplete: () => {
-          populateTags(tagsConfig);
-        }
-      });
-      tl.staggerFrom(tagElements, ANIM_TRANSITION, {
-        autoAlpha: 0,
-        scale: 0,
-        ease: Power1.easeOut
-      }, ANIM_TRANSITION);
-      tl.play();
-    });
+    })
+      .staggerFrom(tagElements, ANIM_TRANSITION, {
+      autoAlpha: 0,
+      scale: 0,
+      ease: Power1.easeOut
+    }, ANIM_TRANSITION)
+      .play();
   }
 }
 function populateTags(tagsConfig) {
+  var _a;
   if (checkArray(tagsConfig.value)) {
     tagsConfig.value.forEach((v, zoneIndex) => {
       if (Array.isArray(v)) {
@@ -151,8 +152,8 @@ function populateTags(tagsConfig) {
       }
     });
   }
-  if (!tagsConfig.isReadonly && checkArray(tagsConfig.values)) {
-    tagsConfig.values.forEach((tagValue) => {
+  if (!tagsConfig.isReadonly) {
+    (_a = tagsConfig.values) === null || _a === void 0 ? void 0 : _a.forEach((tagValue) => {
       const tagZoneIndex = tagsConfig.zones.length - 1;
       return initTag(tagValue, tagZoneIndex, tagsConfig);
     });

package/dist/collection/utils/helpers/operation-helpers.js

@@ -525,25 +525,25 @@ export function getCampaignStateTags(campaign, removeStats) {
       color: campaign.active ? 'app-color' : 'stable-to-stable-20'
     });
   }
-  if (campaign && (campaign.archived || ((_b = campaign.stats) === null || _b === void 0 ? void 0 : _b.status))) {
+  if (campaign && (campaign.archived || ((_b = campaign.campaignStats) === null || _b === void 0 ? void 0 : _b.status))) {
     retVal.push({
-      innerHTML: translate((campaign.archived ? 'PAUSEDCAMPAIGN' : campaign.stats.status).toUpperCase()),
+      innerHTML: translate((campaign.archived ? 'PAUSEDCAMPAIGN' : campaign.campaignStats.status).toUpperCase()),
       color: campaign.archived ? 'dark-to-light' : 'info-to-info-20'
     });
   }
-  if (!removeStats && ((_c = campaign === null || campaign === void 0 ? void 0 : campaign.stats) === null || _c === void 0 ? void 0 : _c.date)) {
+  if (!removeStats && ((_c = campaign === null || campaign === void 0 ? void 0 : campaign.campaignStats) === null || _c === void 0 ? void 0 : _c.date)) {
     let text = '';
-    if (campaign.stats.status === 'live' || campaign.stats.status === 'completed') {
+    if (campaign.campaignStats.status === 'live' || campaign.campaignStats.status === 'completed') {
       text = 'LASTPUBLISHEDDATE';
     }
-    if (campaign.stats.status === 'draft' || campaign.stats.status === 'archived') {
+    if (campaign.campaignStats.status === 'draft' || campaign.campaignStats.status === 'archived') {
       text = 'LASTMODIFICATIONDATE';
     }
-    if (campaign.stats.status === 'scheduled') {
+    if (campaign.campaignStats.status === 'scheduled') {
       text = 'SCHEDULEDDATE';
     }
     retVal.push({
-      innerHTML: translate(text) + ': ' + dateFormat(campaign.stats.date, 'L')
+      innerHTML: translate(text) + ': ' + dateFormat(campaign.campaignStats.date, 'L')
     });
   }
   if (campaign.hasWorkflow) {