@yoobic/yobi 8.6.17 → 8.6.19

package/dist/collection/components/form/form-date-time/form-date-time.js

@@ -1,5 +1,5 @@
 import { datepicker } from '@mobiscroll/javascript';
-import { dateFormat, endOf, findDevice, getUUID, isWeb, startOf, translate } from '@shared/utils';
+import { dateFormat, endOf, findDevice, getUUID, getWeekStart, isWeb, startOf, translate } from '@shared/utils';
 import { h } from '@stencil/core';
 import { convertValueForInputType, setValidator, setValueAndValidateInput, validate } from '@yobi/utils/helpers/form-input-helpers';
 import { destroyMountPoints, generateRandomMountElementId, initShadowMountPoints } from '@yobi/utils/helpers/shadow-dom-helper';
@@ -22,8 +22,8 @@ export class YooFormDateTimeComponent {
     this.externalValidators = [];
     this.size = undefined;
     this.isRange = false;
-    this.dateFormat = 'DD/MM/YYYY';
-    this.timeFormat = 'HH:mm';
+    this.dateFormat = translate('FORMATDATE');
+    this.timeFormat = translate('FORMATTIME');
     this.hoursOnly = false;
     this.clearable = true;
     this.pages = 1;
@@ -34,7 +34,7 @@ export class YooFormDateTimeComponent {
     this.iconPrefix = undefined;
     this.useISOString = true;
     this.validity = undefined;
-    this.startingDay = 1;
+    this.startingDay = getWeekStart();
     this.customDatePickerArrow = 'arrow-up';
     this.isOpen = false;
   }
@@ -416,7 +416,7 @@ export class YooFormDateTimeComponent {
         },
         "attribute": "date-format",
         "reflect": false,
-        "defaultValue": "'DD/MM/YYYY'"
+        "defaultValue": "translate('FORMATDATE')"
       },
       "timeFormat": {
         "type": "string",
@@ -439,7 +439,7 @@ export class YooFormDateTimeComponent {
         },
         "attribute": "time-format",
         "reflect": false,
-        "defaultValue": "'HH:mm'"
+        "defaultValue": "translate('FORMATTIME')"
       },
       "hoursOnly": {
         "type": "boolean",
@@ -644,7 +644,7 @@ export class YooFormDateTimeComponent {
         },
         "attribute": "starting-day",
         "reflect": false,
-        "defaultValue": "1"
+        "defaultValue": "getWeekStart()"
       }
     };
   }

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

@@ -959,6 +959,9 @@ svg:not(:root) {
 :host yoo-ion-slides yoo-ion-scroll.with-footer {
   bottom: var(--footer-height);
 }
+:host yoo-ion-slides yoo-ion-scroll.with-footer .scroll-spacer {
+  transition: height 0.35s cubic-bezier(0.25, 1, 0.3, 1);
+}
 :host yoo-ion-slides yoo-ion-scroll.with-footer.keyboard-open {
   min-height: 100%;
 }
@@ -1711,6 +1714,9 @@ svg:not(:root) {
 :host(.mission-form.pdf) .inputs-container-parent .inputs-container .section-header {
   max-width: unset !important;
 }
+:host(.mission-form.pdf) .inputs-container-parent .inputs-container .pdf-field-wrapper .slide-title {
+  font-size: var(--font-size-28, 1.75rem);
+}
 :host(.mission-form.pdf) .field-placeholder.last {
   border-bottom: none;
 }

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

@@ -38,27 +38,6 @@ export class YooFormDynamicComponent {
     this.hasTimerStarted = false;
     this.dirtyFields = [];
     this.goToSlideOnUpdate = -1;
-    this.onKeyboardWillShow = (event) => {
-      var _a;
-      (_a = this.formFooterElement) === null || _a === void 0 ? void 0 : _a.classList.add('hide');
-      const scroll = this.getElementFromCurrentSlide('yoo-ion-scroll');
-      if (scroll && !(scroll === null || scroll === void 0 ? void 0 : scroll.classList.contains('keyboard-open'))) {
-        scroll.classList.add('keyboard-open');
-      }
-      debounce(() => {
-        if (event && !isAndroid() && !this.isInline()) {
-          const scrollSpacerHeight = event.keyboardHeight;
-          this.setScrollSpacerHeight(scrollSpacerHeight);
-        }
-        const scrollSpacer = this.getElementFromCurrentSlide('.scroll-spacer');
-        if (scrollSpacer) {
-          scrollSpacer.classList.remove('bottom-bar');
-        }
-        if (isAndroid()) {
-          this.windowHasFinishedResizing = false;
-        }
-      }, 500);
-    };
     this.history = undefined;
     this.safeCheckIndex = undefined;
     this.autoScrollTabs = undefined;
@@ -693,21 +672,9 @@ export class YooFormDynamicComponent {
         this.setCountDownTimer();
       }
     }
-    if (isNativeMobile() && !this.isKeyboardStateLocked) {
-      this.isKeyboardResizeModeInactive = isKeyboardResizeModeInactive();
-      disableKeyboardResize();
-    }
   }
   componentDidLoad() {
     var _a, _b, _c, _d, _e;
-    if (isIonic(this.host)) {
-      this.keyboardWillShowListener = this.onKeyboardWillShow.bind(this);
-      window.addEventListener('keyboardWillShow', this.keyboardWillShowListener);
-      this.keyboardDidShowListener = debounce(this.onKeyboardDidShow, 500).bind(this);
-      window.addEventListener('keyboardDidShow', this.keyboardDidShowListener);
-      this.keyboardWillHideListener = debounce(this.onKeyboardWillHide, 500).bind(this);
-      window.addEventListener('keyboardWillHide', this.keyboardWillHideListener);
-    }
     this.resizeListener = debounce(this.onWindowResize, 500).bind(this);
     window.addEventListener('resize', this.resizeListener);
     if (((_a = this.session) === null || _a === void 0 ? void 0 : _a.selectedMission) && isNumber((_b = this.session) === null || _b === void 0 ? void 0 : _b.selectedMissionPage) && ((_c = this.session) === null || _c === void 0 ? void 0 : _c.selectedMissionPage) > -1 && this.slides && this.slides.length > 1 && !this.isLivePreview() && !this.isLesson()) {
@@ -756,6 +723,15 @@ export class YooFormDynamicComponent {
     }
   }
   connectedCallback() {
+    if (isNativeMobile()) {
+      if (!this.isKeyboardStateLocked) {
+        this.isKeyboardResizeModeInactive = isKeyboardResizeModeInactive();
+        disableKeyboardResize();
+      }
+      if (!this.keyboardWillShowListener) {
+        this.initKeyboardListeners();
+      }
+    }
     if (this.disconnected) {
       this.disconnected = false;
     }
@@ -765,19 +741,30 @@ export class YooFormDynamicComponent {
       if (!this.isKeyboardStateLocked && !this.isKeyboardResizeModeInactive) {
         enableKeyboardResize();
       }
-    }
-    if (isIonic(this.host)) {
       window.removeEventListener('keyboardWillShow', this.keyboardWillShowListener);
       window.removeEventListener('keyboardDidShow', this.keyboardDidShowListener);
       window.removeEventListener('keyboardWillHide', this.keyboardWillHideListener);
       window.removeEventListener('resize', this.resizeListener);
-    }
-    if (this.isWeb) {
-      window.removeEventListener('screenSizeWillChange', this.resizeListener);
+      this.keyboardWillShowListener = undefined;
+      this.keyboardDidShowListener = undefined;
+      this.keyboardWillHideListener = undefined;
     }
     this.removeRequestInterval();
     this.disconnected = true;
   }
+  initKeyboardListeners() {
+    if (isNativeMobile()) {
+      if (!isAndroid() && !this.isInline()) {
+        this.setScrollSpacerHeight(100);
+      }
+      this.keyboardWillShowListener = this.onKeyboardWillShow.bind(this);
+      window.addEventListener('keyboardWillShow', this.keyboardWillShowListener);
+      this.keyboardDidShowListener = debounce(this.onKeyboardDidShow, 500).bind(this);
+      window.addEventListener('keyboardDidShow', this.keyboardDidShowListener);
+      this.keyboardWillHideListener = this.onKeyboardWillHide.bind(this);
+      window.addEventListener('keyboardWillHide', this.keyboardWillHideListener);
+    }
+  }
   removeRequestInterval() {
     var _a;
     if ((_a = this.requestIntervalID) === null || _a === void 0 ? void 0 : _a.value) {
@@ -1063,9 +1050,6 @@ export class YooFormDynamicComponent {
       return this.secondaryFieldsState[field.name] || {};
     }
   }
-  getAnswer(field) {
-    return field.answer || field.complexAnswer;
-  }
   getSlideState(slideIndex) {
     var _a;
     const slidesState = ((_a = this.slidesState) === null || _a === void 0 ? void 0 : _a.filter((state) => !state.hidden)) || [];
@@ -1904,9 +1888,31 @@ export class YooFormDynamicComponent {
     }
     this.lockSlideSwipe(this.activeIndex);
   }
+  onKeyboardWillShow(ev) {
+    var _a;
+    !this.isKeyboardStateLocked && !isKeyboardResizeModeInactive() && disableKeyboardResize();
+    (_a = this.formFooterElement) === null || _a === void 0 ? void 0 : _a.classList.add('hide');
+    const scroll = this.getElementFromCurrentSlide('yoo-ion-scroll');
+    if (scroll && !(scroll === null || scroll === void 0 ? void 0 : scroll.classList.contains('keyboard-open'))) {
+      scroll.classList.add('keyboard-open');
+    }
+    if (ev && !isAndroid() && !this.isInline()) {
+      const scrollSpacerHeight = ev.keyboardHeight;
+      this.setScrollSpacerHeight(scrollSpacerHeight);
+    }
+    debounce(() => {
+      if (isAndroid()) {
+        this.windowHasFinishedResizing = false;
+      }
+    }, 500);
+  }
   onKeyboardDidShow(ev) {
+    const scrollSpacer = this.getElementFromCurrentSlide('.scroll-spacer');
+    if (scrollSpacer) {
+      scrollSpacer.classList.remove('bottom-bar');
+    }
     if (this.focusedField && ev) {
-      this.scrollToField(this.focusedField, null, ev.keyboardHeight);
+      this.scrollToField(this.focusedField, true, ev.keyboardHeight);
     }
     if (isAndroid()) {
       const ANDROID_WINDOW_RESIZE = 1000;
@@ -2553,7 +2559,7 @@ export class YooFormDynamicComponent {
     ];
   }
   renderFormContentField({ field, inputIndex, slideIndex, slideItems, isPreviousFieldReadonlyAndVisible, previousField, slideLength, collapsible, useGridstack, hasFieldsMarkedAsInvalid }) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const markAsInvalid = this.isMarkedAsInvalid(field);
     const markAsModified = this.isMarkedAsModified(field);
     const originalMarkAsInvalid = this.isOriginalMarkedAsInvalid(field);
@@ -2679,10 +2685,10 @@ export class YooFormDynamicComponent {
       }
       fieldClass = 'inline';
     }
-    const answer = this.getAnswer(field);
-    const isAnswer = !!answer && this.forceReadonly;
+    const answer = (_b = field.answer) !== null && _b !== void 0 ? _b : field.complexAnswer;
+    const isAnswer = !isNil(answer) && this.forceReadonly;
     const isAnswerValid = answerIsValid(getFieldValue(field, this.currentData, this.suffix), answer, field);
-    const hasConfidenceLevel = this.forceReadonly && ((_c = (_b = this.currentData) === null || _b === void 0 ? void 0 : _b[field.name]) === null || _c === void 0 ? void 0 : _c.confidenceLevel);
+    const hasConfidenceLevel = this.forceReadonly && ((_d = (_c = this.currentData) === null || _c === void 0 ? void 0 : _c[field.name]) === null || _d === void 0 ? void 0 : _d.confidenceLevel);
     const fieldContent = () => {
       var _a, _b;
       return [
@@ -3094,7 +3100,7 @@ export class YooFormDynamicComponent {
     this.openPreview.emit('');
   }
   renderInput({ field, data, slideIndex, slideItems, inputIndex, readonly, cssClass, isHistory, previousField, slots }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
     const fieldState = getFieldState(field, this.fieldsState);
     const required = isRequired(field, this.currentData, this.currentDataFlatten, fieldState.visible, this.suffix, this.session);
     const disabled = isDisabled(field, this.currentData, this.currentDataFlatten, this.suffix, this.session);
@@ -3770,7 +3776,8 @@ export class YooFormDynamicComponent {
         };
         extraAttrs = {
           ...extraAttrs,
-          values: values === null || values === void 0 ? void 0 : values.map((value, index) => { var _a, _b, _c, _d, _e; return ({ image: value.image || value._downloadURL || value.file || ((_b = (_a = field.images) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b._downloadURL), text: (_e = (_d = (_c = value.text) === null || _c === void 0 ? void 0 : _c.text) !== null && _d !== void 0 ? _d : value.text) !== null && _e !== void 0 ? _e : value }); }),
+          answer: (_s = (_r = [field.answer]) === null || _r === void 0 ? void 0 : _r.flat()) === null || _s === void 0 ? void 0 : _s.filter((item) => typeof item === 'object' ? item.text && item.image : item),
+          values: (_t = values === null || values === void 0 ? void 0 : values.map((value, index) => { var _a, _b, _c, _d, _e; return ({ image: value.image || value._downloadURL || value.file || ((_b = (_a = field.images) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b._downloadURL), text: (_e = (_d = (_c = value.text) === null || _c === void 0 ? void 0 : _c.text) !== null && _d !== void 0 ? _d : value.text) !== null && _e !== void 0 ? _e : value }); })) === null || _t === void 0 ? void 0 : _t.filter((item) => typeof item === 'object' ? item.text && item.image : item),
           multiple: field.multiple,
           description: field.description,
           useTranslate: field.translate,
@@ -3780,7 +3787,7 @@ export class YooFormDynamicComponent {
       }
       case FormFieldType.selectcard: {
         const multiple = field.multiple;
-        const values = field.values || ((_r = field.opValues) === null || _r === void 0 ? void 0 : _r.find((opValue) => opValue));
+        const values = field.values || ((_u = field.opValues) === null || _u === void 0 ? void 0 : _u.find((opValue) => opValue));
         TagType = 'yoo-form-choice-card';
         attrs = {
           ...attrs,
@@ -3855,7 +3862,7 @@ export class YooFormDynamicComponent {
           collectionName: field.collectionName,
           entityType: field.entityType,
           iconPrefix: field.iconPrefix,
-          descriptionTemplate: data.isUnitCurrency && ((_s = data.currency) === null || _s === void 0 ? void 0 : _s.symbol) ? `${data.currency.symbol} {{text}}` : null,
+          descriptionTemplate: data.isUnitCurrency && ((_v = data.currency) === null || _v === void 0 ? void 0 : _v.symbol) ? `${data.currency.symbol} {{text}}` : null,
           max: field.max,
           queryFields: field.queryFields,
           model: field.model,
@@ -3864,7 +3871,7 @@ export class YooFormDynamicComponent {
           onFetchCustomData: (ev) => this.onFetchCustomData(field, ev),
           onFetchData: (ev) => this.onFetchData(field, ev)
         };
-        if (attrs.validators && ((_t = config === null || config === void 0 ? void 0 : config.validators) === null || _t === void 0 ? void 0 : _t.length)) {
+        if (attrs.validators && ((_w = config === null || config === void 0 ? void 0 : config.validators) === null || _w === void 0 ? void 0 : _w.length)) {
           attrs.validators.push(...config.validators);
         }
         break;
@@ -3997,7 +4004,7 @@ export class YooFormDynamicComponent {
           logo: field.logo,
           value: value || field.value,
           description: field.description,
-          whiteLabel: (_u = getSession().tenant) === null || _u === void 0 ? void 0 : _u.waitlistWhitelabel,
+          whiteLabel: (_x = getSession().tenant) === null || _x === void 0 ? void 0 : _x.waitlistWhitelabel,
           showIllustration: field.showIllustration,
           showShareLink: field.showShareLink,
           showDownload: field.showDownload
@@ -4323,7 +4330,7 @@ export class YooFormDynamicComponent {
         if (field.collapsible) {
           return (h("yoo-collapsible", { iconSize: "medium", class: "secondary", slotHeader: true }, h("span", { slot: "title", style: field.style || {} }, field.title), h("span", { innerHTML: markdown || value })));
         }
-        if (((_v = field.valuesIcon) === null || _v === void 0 ? void 0 : _v.length) > 0) {
+        if (((_y = field.valuesIcon) === null || _y === void 0 ? void 0 : _y.length) > 0) {
           return [
             markdown && h("div", { class: "info-header" }, markdown),
             field.valuesIcon.map((item) => {
@@ -4372,7 +4379,7 @@ export class YooFormDynamicComponent {
           instructionsDocument: field.instructionsDocument,
           categories: field.categories,
           images: field.images,
-          showInstructionView: (_w = field.showInstructionView) !== null && _w !== void 0 ? _w : true,
+          showInstructionView: (_z = field.showInstructionView) !== null && _z !== void 0 ? _z : true,
           mode: field.swipeMode
         };
         break;
@@ -4384,7 +4391,7 @@ export class YooFormDynamicComponent {
         };
         break;
       case FormFieldType.imagetagging:
-        field.answer = (_x = field.annotations) === null || _x === void 0 ? void 0 : _x.map(({ text }) => extractTextFromStringHTML(text).trim());
+        field.answer = (_0 = field.annotations) === null || _0 === void 0 ? void 0 : _0.map(({ text }) => extractTextFromStringHTML(text).trim());
         TagType = 'yoo-form-image-tagging';
         extraAttrs = {
           ...extraAttrs,

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

@@ -850,6 +850,7 @@ svg:not(:root) {
   flex: 1;
   flex-direction: row;
   font-size: var(--font-size-16, 1rem);
+  cursor: pointer;
 }
 :host .footer-container .newtask .icon {
   display: flex;

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

@@ -3,7 +3,7 @@ import { getUUID, isImageUrl, isValueATranslationKey, isWeb, translate } from '@
 import { forceUpdate, h, Host } from '@stencil/core';
 import { getAppContext } from '@yobi/utils/helpers/common-helpers';
 import { setValidator, setValueAndValidateInput } from '@yobi/utils/helpers/form-input-helpers';
-import { isEqual } from 'lodash-es';
+import { compact, isEqual } from 'lodash-es';
 import Sortable from 'sortablejs';
 export class YooFormMultiInputComponent {
   constructor() {
@@ -111,32 +111,42 @@ export class YooFormMultiInputComponent {
   }
   validate() {
     var _a, _b;
-    this.validity =
-      this.rows
-        .map((row) => {
-        return row.map(({ column, value }) => {
-          var _a;
-          const { hasText, hasImage, textOrImageValue, field } = column;
-          const hasFile = !!(((_a = value === null || value === void 0 ? void 0 : value.file) === null || _a === void 0 ? void 0 : _a['_downloadURL']) || (value === null || value === void 0 ? void 0 : value.file) || '');
-          const hasTextContent = !!((value === null || value === void 0 ? void 0 : value.text) || '');
-          if (hasText && !hasImage) {
-            return !(field === null || field === void 0 ? void 0 : field.required) || hasTextContent ? 1 : 0;
-          }
-          else if (!hasText && hasImage) {
-            return !(field === null || field === void 0 ? void 0 : field.required) || hasFile ? 1 : 0;
-          }
-          else if (textOrImageValue) {
-            return !(field === null || field === void 0 ? void 0 : field.required) || (hasTextContent || hasFile) ? 1 : 0;
-          }
-          else if (hasText && hasImage) {
-            return !(field === null || field === void 0 ? void 0 : field.required) || (hasTextContent && hasFile) ? 1 : 0;
-          }
-        });
-      })
-        .filter((v) => v.reduce((a, b) => a + b, 0) === this.columnsCount).length >= (((_b = (_a = this.columnsDefinition) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.minRows) || 1);
+    const rowsValidity = this.rows
+      .map((row) => {
+      return row.map(({ column, value }) => {
+        var _a, _b;
+        const { hasText, hasImage, textOrImageValue, field } = column;
+        const hasFile = !!(((_a = value === null || value === void 0 ? void 0 : value.file) === null || _a === void 0 ? void 0 : _a['_downloadURL']) || (value === null || value === void 0 ? void 0 : value.file) || '');
+        const hasTextContent = !!((value === null || value === void 0 ? void 0 : value.text) || ((_b = compact([].concat(value === null || value === void 0 ? void 0 : value.selection))) === null || _b === void 0 ? void 0 : _b.length) || '');
+        const required = this.isFieldRequired(field);
+        if (hasText && !hasImage) {
+          return !required || hasTextContent ? 1 : 0;
+        }
+        else if (!hasText && hasImage) {
+          return !required || hasFile ? 1 : 0;
+        }
+        else if (textOrImageValue) {
+          return !required || hasTextContent || hasFile ? 1 : 0;
+        }
+        else if (hasText && hasImage) {
+          return !required || (hasTextContent && hasFile) ? 1 : 0;
+        }
+      });
+    })
+      .filter((cellsValidityPerRow) => cellsValidityPerRow.some((v) => v))
+      .map((cellsValidityPerRow) => cellsValidityPerRow.reduce((a, b) => a + b, 0) === this.columnsCount) || [];
+    if ((_b = (_a = this.columnsDefinition) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.minRows) {
+      this.validity = rowsValidity.filter((rowValidity) => rowValidity).length >= this.columnsDefinition[0].minRows;
+    }
+    else {
+      this.validity = !rowsValidity.filter((rowValidity) => !rowValidity).length;
+    }
     this.validityChanged.emit(this.validity);
     return this.validity;
   }
+  isFieldRequired(field) {
+    return this.required || !!(field === null || field === void 0 ? void 0 : field.required);
+  }
   hasColumnsAttribute(callback) {
     var _a;
     return (_a = this.columnsDefinition) === null || _a === void 0 ? void 0 : _a.map((cell) => callback(cell)).some((v) => v);
@@ -276,10 +286,11 @@ export class YooFormMultiInputComponent {
       return this.columnsDefinition.map((column, colIndex) => {
         const cell = row === null || row === void 0 ? void 0 : row[colIndex];
         const currentRows = this.getCurrentRows(colIndex);
-        const { hideButton, minRows, indexSuffix, field, linkedRow, hideDeleteButton, maxRows } = column;
+        const { hideButton, minRows, indexSuffix, field, linkedRow, hideDeleteButton, maxRows, component } = column;
         const canAddNextRow = !column.maxRows || rowIndex + 1 < column.maxRows;
         const isLastRow = rowIndex === currentRows - 1;
         const hideCell = cell.hidden || this.hideInputWithNoValue(cell);
+        const showBaseDeleteButton = !this.readonly && !hideDeleteButton && maxRows !== 1 && !hideCell && currentRows > minRows;
         return {
           ...(cell || {}),
           rowIndex,
@@ -289,7 +300,7 @@ export class YooFormMultiInputComponent {
           ...((field === null || field === void 0 ? void 0 : field.title) && { label: `${translate(field.title)} ${(indexSuffix === null || indexSuffix === void 0 ? void 0 : indexSuffix.cell) ? rowIndex + 1 : ''}` }),
           focus: column.hasText && isLastRow && (!this.isLinkedList || !colIndex),
           showButton: !this.readonly && !hideButton && !(cell === null || cell === void 0 ? void 0 : cell.hidden) && canAddNextRow && isLastRow && !linkedRow,
-          showDeleteButton: !this.readonly && !hideDeleteButton && maxRows !== 1 && !hideCell && currentRows > minRows && (!this.isLinkedList || colIndex === this.columnsCount - 1),
+          showDeleteButton: showBaseDeleteButton && (!this.isLinkedList || ((this.isWeb || component.tag === 'yoo-form-input') ? colIndex === this.columnsCount - 1 : colIndex === 0)),
           key: (cell === null || cell === void 0 ? void 0 : cell.key) || getUUID()
         };
       });

package/dist/collection/components/form-creator/helpers/index.js

@@ -893,10 +893,11 @@ export function setRestrictionAndFieldConditions(childConditions) {
   return { restrictionConditions, fieldConditions };
 }
 export function setFormFieldIndex(slides) {
-  slides === null || slides === void 0 ? void 0 : slides.forEach((slide) => {
+  slides === null || slides === void 0 ? void 0 : slides.forEach((slide, slideIndex) => {
     var _a;
     (_a = slide.items) === null || _a === void 0 ? void 0 : _a.forEach((item, index) => {
       item.formCreatorIndex = index;
+      item.slideIndex = slideIndex;
     });
   });
 }

package/dist/collection/components/grid/ag-grid/ag-grid.css

@@ -8860,6 +8860,9 @@ input[class^=ag-][type=range]:disabled {
 :host .ag-cell[col-id=entity] .ag-cell-wrapper {
   overflow: hidden;
 }
+:host .ag-cell[col-id=campaignStats], :host .ag-cell[col-id=stats] {
+  justify-content: flex-end;
+}
 :host .ag-cell[col-id=campaignStats] > div.loading, :host .ag-cell[col-id=stats] > div.loading {
   height: 100%;
   background: var(--stable-light, #f1f1f1);

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

@@ -9,7 +9,7 @@ import { removeEntitiesWithIds } from '@yobi/utils/helpers/entities-helpers';
 import { isKanbanColumnField, mapCustomViewToButton } from '@yobi/utils/helpers/filters-helpers';
 import { setValidator, setValueAndValidateInput } from '@yobi/utils/helpers/form-input-helpers';
 import { isEmail } from '@yobi/utils/helpers/text-helpers';
-import { compact, debounce, findIndex, get, isArray, isBoolean, isEmpty, isEqual, isFunction, isNil, isNumber, isObject, isString, map, range, sortBy, sum, uniqWith } from 'lodash-es';
+import { compact, debounce, findIndex, get, isArray, isBoolean, isEmpty, isEqual, isFunction, isNil, isNumber, isObject, isString, map, range, sortBy, sum, throttle, uniqWith } from 'lodash-es';
 import Sortable from 'sortablejs';
 import { getRenderer } from '../ag-grid/grid-renderers';
 import { shouldUseVirtualScroll } from './grid-helper';
@@ -52,6 +52,7 @@ export class YooGridComponent {
         return this.renderItem(item, index);
       }
     };
+    this.pullToRefreshThrottle = throttle(() => this.pullToRefresh(), 1500, { trailing: false });
     this.direction = undefined;
     this.tabs = undefined;
     this.initialTabIndex = undefined;
@@ -481,7 +482,7 @@ export class YooGridComponent {
   async pullToRefresh(refresher) {
     this.setCurrentPage(0);
     if (this.isAgGrid() && !this.isLocal) {
-      this.refreshServerSideStore(true);
+      this.refreshServerSide(true);
     }
     else if (!this.disconnected) {
       if (this.isSelectedToggleView) {
@@ -800,12 +801,12 @@ export class YooGridComponent {
     window.removeEventListener('resize', this.resizeListener);
     this.resizeListener = null;
   }
-  refreshServerSideStore(ensureIndexVisible, preventEmit) {
+  refreshServerSide(ensureIndexVisible, preventEmit) {
     if (this.gridApi && !this.disconnected) {
       if (ensureIndexVisible) {
         this.gridApi.ensureIndexVisible(0, 'top');
       }
-      this.gridApi.refreshServerSideStore({ purge: true });
+      this.gridApi.refreshServerSide({ purge: true });
       if (!preventEmit) {
         this.refreshedServerSideStore.emit(true);
       }
@@ -985,7 +986,7 @@ export class YooGridComponent {
                     }
                     try {
                       if ((purge || fromDelete) && this.gridApi && !this.disconnected) {
-                        this.refreshServerSideStore(true, true);
+                        this.refreshServerSide(true, true);
                       }
                       let rowCount = null;
                       if (currentPage === 0 && (data === null || data === void 0 ? void 0 : data.length) >= 0 && (data === null || data === void 0 ? void 0 : data.length) < this.pageSize) {
@@ -1289,7 +1290,7 @@ export class YooGridComponent {
     }
     if (this.isAgGrid() && !this.isLocal) {
       if (this.gridApi && !this.disconnected && !this.isEmptyAgGrid) {
-        this.refreshServerSideStore(true);
+        this.refreshServerSide(true);
       }
     }
     else if (this.isAgGrid() && this.isLocal) {
@@ -1755,7 +1756,7 @@ export class YooGridComponent {
   applySortsAndFilters(data) {
     this.sortsAndFilters = data;
     if (this.gridApi && !this.disconnected && !this.isLocal && !this.gridApi.destroyCalled) {
-      this.refreshServerSideStore(true);
+      this.refreshServerSide(true);
     }
     this.sortsAndFiltersChange.emit(this.sortsAndFilters);
     if (this.infiniteScroll) {
@@ -1843,7 +1844,7 @@ export class YooGridComponent {
     this.tagsSelect.emit((ev === null || ev === void 0 ? void 0 : ev.detail) || []);
     this.filtersUpdated = !this.filtersUpdated;
     if (this.gridApi && !this.disconnected && !this.isLocal) {
-      this.refreshServerSideStore(true);
+      this.refreshServerSide(true);
     }
   }
   onHeadingClick() {
@@ -2083,7 +2084,7 @@ export class YooGridComponent {
     ]);
   }
   renderRefresh(force) {
-    return ((!this.hideRefreshButton && !this.isReadonly && (force || !this.isLocal)) && (h("yoo-tooltip", { content: translate('REFRESH'), hoverable: true, placement: "bottom" }, h("yoo-button", { shape: "circular", fill: "transparent", rippleType: "unbounded", onClick: () => this.pullToRefresh() }, h("yoo-icon", { name: "refresh", color: "stable" })))));
+    return ((!this.hideRefreshButton && !this.isReadonly && (force || !this.isLocal)) && (h("yoo-tooltip", { content: translate('REFRESH'), hoverable: true, placement: "bottom" }, h("yoo-button", { shape: "circular", fill: "transparent", rippleType: "unbounded", onClick: this.pullToRefreshThrottle.bind(this) }, h("yoo-icon", { name: "refresh", color: "stable" })))));
   }
   shouldRenderEntityQueryBuilder() {
     return isWeb(this.host) && !this.isAutoComplete && (this.gridIsExpanded || !this.gridIsExpanded) && (this.showFilters || this.showAdvancedQueryBuilder);

package/dist/collection/components/grid/grid-stack/grid-stack.css

@@ -243,6 +243,7 @@ svg:not(:root) {
 }
 :host .container {
   width: 100%;
+  min-width: 1rem;
   min-height: 100%;
 }
 :host .container.hidden {

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

@@ -1,5 +1,5 @@
 import 'gridstack/dist/h5/gridstack-dd-native';
-import { debounce } from '@shared/utils';
+import { debounce, isSurface } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 import { getAppContext } from '@yobi/utils/helpers/common-helpers';
 import { GridStack, Utils } from 'gridstack';
@@ -70,6 +70,10 @@ export class YooGridstackComponent {
       }
     }
   }
+  async forceUpdate(column) {
+    this.grid.column(column);
+    this.renderConfig();
+  }
   async syncHeights() {
     // this.syncHeightsInternal();
     this.updateIsInitState(false);
@@ -173,10 +177,14 @@ export class YooGridstackComponent {
     }
   }
   disconnectedCallback() {
-    var _a;
+    var _a, _b;
     if (isFunction((_a = this.grid) === null || _a === void 0 ? void 0 : _a.removeAll)) {
       this.grid.removeAll(true);
     }
+    if (isFunction((_b = this.grid) === null || _b === void 0 ? void 0 : _b.destroy)) {
+      this.grid.destroy(false);
+    }
+    delete this.grid;
     this.updateIsInitState(false);
     this.disconnected = true;
   }
@@ -244,7 +252,8 @@ export class YooGridstackComponent {
         animate: false,
         disableOneColumnMode: this.forceOneColumn !== true,
         oneColumnModeDomSort: false,
-        cellHeight: this.cellHeight || 'auto',
+        cellHeight: this.cellHeight || (isSurface() ? 'initial' : 'auto'),
+        cellHeightThrottle: 1000,
         margin: this.itemMargin,
         acceptWidgets: '.ui-draggable',
         draggable: {
@@ -261,15 +270,24 @@ export class YooGridstackComponent {
         dragOut: false,
         staticGrid: this.static
       }, this.containerEl);
-      this.initialized.emit();
+      this.grid.cellHeightOriginal = this.grid.cellHeight;
+      this.grid.cellHeight = (val, update) => {
+        if (!this.disconnected) {
+          return this.grid.cellHeightOriginal(val, update);
+        }
+        return this.grid;
+      };
       this.grid._removeStylesheetOriginal = this.grid._removeStylesheet;
       this.grid._removeStylesheet = (id) => {
-        this.grid._removeStylesheetOriginal(id);
-        const el = this.host.shadowRoot.querySelector('STYLE');
-        if (el && el.parentNode) {
-          el.remove();
+        if (!this.disconnected) {
+          this.grid._removeStylesheetOriginal(id);
+          const el = this.host.shadowRoot.querySelector('STYLE');
+          if (el && el.parentNode) {
+            el.remove();
+          }
         }
       };
+      this.initialized.emit();
       this.grid.on('change', (_event, items) => {
         items.forEach((item) => {
           this.itemChanged.emit(item);
@@ -926,6 +944,25 @@ export class YooGridstackComponent {
           "tags": []
         }
       },
+      "forceUpdate": {
+        "complexType": {
+          "signature": "(column: number) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
       "syncHeights": {
         "complexType": {
           "signature": "() => Promise<void>",