@yoobic/yobi 8.2.0-45 → 8.2.0-48

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

@@ -1,4 +1,4 @@
-import { asyncWaterfall, debounce, findParent, getAsyncExtraData, getModalAnimation, getRandomFileName, groupsResolver, isImage, isIonic, isNullOrUndefined, isPresent, isValid, isWeb, MONGODB_ID_REGEX, resizeImage, showAlert, showModal, translate, translateMulti } from '@shared/utils';
+import { asyncWaterfall, findParent, getAsyncExtraData, getModalAnimation, getRandomFileName, groupsResolver, isImage, isIonic, isNullOrUndefined, isPresent, isValid, isWeb, MONGODB_ID_REGEX, resizeImage, showAlert, showModal, translate, translateMulti } from '@shared/utils';
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';
 import { compact, isArray, isNumber, isString, uniq } from 'lodash-es';
 import { execHandlerAndStopEvent, getAppContext, showImageCropper } from '../../../utils/helpers/common-helpers';
@@ -33,9 +33,6 @@ export class YooFormAutocompleteComponent {
     this.selection = [];
     this.showEmptyItemsAddNewTag = false;
     this.arrowIcon = 'arrow-down';
-    this.emitFetchData = debounce((ev) => {
-      this.fetchData.emit({ search: ev.detail, appendData: false, currentPage: 0, pageSize: this.pageSize, tmpValues: this.values });
-    });
     this.initialValueLength = 0;
     this.localValues = [];
     this.forceSelectedContentIdOnlyReload = false;
@@ -156,7 +153,7 @@ export class YooFormAutocompleteComponent {
         finalVal = [...this.value, ...val];
       }
       if ((val === null || val === void 0 ? void 0 : val.length) > 0) {
-        (_a = this.fileUploader) === null || _a === void 0 ? void 0 : _a.removeFiles();
+        await ((_a = this.fileUploader) === null || _a === void 0 ? void 0 : _a.removeFiles());
       }
     }
     await this.setValue(finalVal);
@@ -201,9 +198,7 @@ export class YooFormAutocompleteComponent {
   componentWillLoad() {
     var _a;
     this.updateSelection(true);
-    if (this.idOnly) {
-      this.refresh();
-    }
+    this.shouldFetchDataOnTagSelect = true;
     if (this.showDropdownOnLoad) {
       this.showDropdownContent = this.showDropdownOnLoad;
     }
@@ -231,10 +226,8 @@ export class YooFormAutocompleteComponent {
       this.formDynamicBottom = await getFormBottomPosition(this.formDynamic);
     }
     document.body.addEventListener('click', this.hideContainerListener);
-    if (this.idOnly) {
-      if ((!this.expandHeightOnShow || !this.values || ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) === 0) && this.value) {
-        this.fetchData.emit({ search: this.searchText, currentPage: 0, pageSize: this.pageSize, appendData: false, tmpValues: this.values });
-      }
+    if (this.idOnly && this.value && (!this.expandHeightOnShow || !this.values || ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) === 0)) {
+      await this.refreshValues();
     }
     if (this.uploadInitialValue && this.value) {
       this.isUploading = true;
@@ -450,6 +443,10 @@ export class YooFormAutocompleteComponent {
       this.gridCurrentSearch.tmpValues = this.values;
     }
   }
+  async refreshValues() {
+    await this.resetCurrentPage();
+    this.fetchData.emit({ search: this.searchText, appendData: false, currentPage: this.currentPage, pageSize: this.pageSize, tmpValues: this.values, fieldValue: this.value });
+  }
   async onInputContainerClicked() {
     this.host.classList.add('focused');
     this.arrowIcon = 'arrow-up';
@@ -467,6 +464,7 @@ export class YooFormAutocompleteComponent {
     if (!(isWeb(this.host) && this.showDropdownContent)) {
       this.inputFocused.emit();
       await (!isWeb(this.host) || !this.expandHeightOnShow ? this.showContainerDialog() : this.showContainer());
+      this.mobileAutocompleteClosed.emit(this.selection);
     }
     else {
       this.webAutocompleteClosed.emit(this.selection);
@@ -521,14 +519,7 @@ export class YooFormAutocompleteComponent {
   async showContainer() {
     this.webAutocompleteOpened.emit();
     this.shouldFetchDataOnTagSelect = false;
-    if (this.forceRefresh) {
-      this.values = [];
-      if (this.webGrid) {
-        this.webGrid.items = [];
-      }
-      await this.resetCurrentPage();
-      this.fetchData.emit({ search: null, appendData: false, currentPage: 0, pageSize: this.pageSize, tmpValues: this.values });
-    }
+    await this.refreshValues();
     if (this.itemsContainer) {
       if (this.itemsContainer.classList.contains('show-display')) {
         this.removeAddItemContainerClasses(true);
@@ -557,6 +548,7 @@ export class YooFormAutocompleteComponent {
     this.showDropdownContent = !this.showDropdownContent;
   }
   async showContainerDialog(isExpanding) {
+    await this.refreshValues();
     this.dialog = document.createElement('yoo-form-autocomplete-dialog');
     this.dialog.multiple = this.isMultiple();
     this.dialog.displayType = this.displayType;
@@ -597,6 +589,10 @@ export class YooFormAutocompleteComponent {
     this.dialog.infiniteScrollDisabled = this.infiniteScrollDisabled;
     this.dialog.value = this.value;
     this.dialog.values = this.isLocal ? (this.storeLocalSearchValue !== undefined ? this.storeLocalValues : this.localValues) : this.values;
+    this.dialog.addEventListener('currentPageChanged', (ev) => {
+      ev.stopPropagation();
+      this.onCurrentPageChange(ev.detail);
+    });
     this.dialog.addEventListener('fetchData', (ev) => {
       ev.stopPropagation();
       this.onFetchData(ev);
@@ -649,7 +645,7 @@ export class YooFormAutocompleteComponent {
       this.host.classList.remove('focused');
       this.arrowIcon = 'arrow-down';
       this.webAutocompleteClosed.emit(this.selection);
-      !this.keepSelection && (this.setValue([]));
+      !this.keepSelection && this.setValue([]);
     });
     this.dialog.addEventListener('filterRadioToggled', (ev) => {
       ev.stopPropagation();
@@ -674,7 +670,7 @@ export class YooFormAutocompleteComponent {
     this.host.classList.remove('focused');
     this.arrowIcon = 'arrow-down';
     this.webAutocompleteClosed.emit(this.selection);
-    !this.keepSelection && (this.setValue([]));
+    !this.keepSelection && this.setValue([]);
   }
   async onItemSelect(ev) {
     ev.stopPropagation();
@@ -931,48 +927,43 @@ export class YooFormAutocompleteComponent {
               : translate('SELECTITEM')));
   }
   renderEntities(hasIconPrefix, cardTagSingle = false) {
+    var _a;
     const selectedOperator = this.filterOperator || 'in';
-    return (h("div", { class: {
-        'entity-container': true,
-        empty: !this.selection || this.selection.length <= 0,
-        prefix: hasIconPrefix
-      } }, !this.hideSelected &&
-      !!this.selection.length &&
-      this.selection.map((selection, i) => {
-        var _a, _b, _c;
-        let entitySelection = selection;
-        const unEditedSelection = entitySelection;
-        if (this.idOnly) {
-          entitySelection = this.getFullIdItemSelection(this.webGrid || this.dialogGrid || null, entitySelection) || entitySelection;
-          if (this.collectionName === 'groups' && !((_a = this.webGrid) === null || _a === void 0 ? void 0 : _a.items) && !((_b = this.dialogGrid) === null || _b === void 0 ? void 0 : _b.items)) {
-            const newSelection = groupsResolver(entitySelection);
-            if (newSelection && newSelection.length > 0 && newSelection[0]) {
-              entitySelection = newSelection[0];
-            }
+    return (h("div", { class: { 'entity-container': true, empty: !this.selection || this.selection.length <= 0, prefix: hasIconPrefix } }, (_a = this.selection) === null || _a === void 0 ? void 0 : _a.map((selection, i) => {
+      var _a, _b, _c;
+      let entitySelection = selection;
+      const unEditedSelection = entitySelection;
+      if (this.idOnly) {
+        entitySelection = this.getFullIdItemSelection(this.webGrid || this.dialogGrid || null, entitySelection) || entitySelection;
+        if (this.collectionName === 'groups' && !((_a = this.webGrid) === null || _a === void 0 ? void 0 : _a.items) && !((_b = this.dialogGrid) === null || _b === void 0 ? void 0 : _b.items)) {
+          const newSelection = groupsResolver(entitySelection);
+          if (newSelection && newSelection.length > 0 && newSelection[0]) {
+            entitySelection = newSelection[0];
           }
         }
-        if (this.idOnly && isString(entitySelection) && !this.idOnlyInitialSelection) {
-          this.forceSelectedContentIdOnlyReload = true;
-        }
-        if (entitySelection && !cardTagSingle && !isString(entitySelection) && !isNumber(entitySelection)) {
-          entitySelection.avatarSize = this.getAvatarSize();
-        }
-        const title = (entitySelection === null || entitySelection === void 0 ? void 0 : entitySelection.title) || entitySelection;
-        return (entitySelection && [
-          h("div", { class: { 'single-entity-container': this.isFilter } },
-            h("div", { class: "operator-container" }, `${this.isFilter ? selectedOperator : ''}`),
-            h("yoo-entity", { class: {
-                'autocomplete autocomplete-selected': true,
-                last: i === this.selection.length - 1,
-                bold: this.color === 'transparent',
-                'hide-icon': this.host.classList.contains('hide-icon')
-              }, readonly: this.readonly, clearable: this.isMultiple(), columnDefinition: this.columnDefinition, useTranslate: this.useTranslate, customModel: this.customModel, displayType: cardTagSingle ? 'card-tag-single' : this.getDisplayType(), forceText: cardTagSingle, entityType: this.getEntityType(), item: entitySelection, onClosed: (ev) => execHandlerAndStopEvent(ev, () => this.onSelectionRemoved(unEditedSelection)), isCollapsible: false, displaySize: this.size, valuesColor: (_c = this.valuesColor) === null || _c === void 0 ? void 0 : _c.find((e) => e.key === title) }))
-        ]);
-      })));
+      }
+      if (this.idOnly && isString(entitySelection) && !this.idOnlyInitialSelection) {
+        this.forceSelectedContentIdOnlyReload = true;
+      }
+      if (entitySelection && !cardTagSingle && !isString(entitySelection) && !isNumber(entitySelection)) {
+        entitySelection.avatarSize = this.getAvatarSize();
+      }
+      const title = (entitySelection === null || entitySelection === void 0 ? void 0 : entitySelection.title) || entitySelection;
+      return (entitySelection && [
+        h("div", { class: { 'single-entity-container': this.isFilter } },
+          h("div", { class: "operator-container" }, `${this.isFilter ? selectedOperator : ''}`),
+          h("yoo-entity", { class: {
+              'autocomplete autocomplete-selected': true,
+              last: i === this.selection.length - 1,
+              bold: this.color === 'transparent',
+              'hide-icon': this.host.classList.contains('hide-icon')
+            }, readonly: this.readonly, clearable: this.isMultiple(), columnDefinition: this.columnDefinition, useTranslate: this.useTranslate, customModel: this.customModel, displayType: cardTagSingle ? 'card-tag-single' : this.getDisplayType(), forceText: cardTagSingle, entityType: this.getEntityType(), item: entitySelection, onClosed: (ev) => execHandlerAndStopEvent(ev, () => this.onSelectionRemoved(unEditedSelection)), isCollapsible: false, displaySize: this.size, valuesColor: (_c = this.valuesColor) === null || _c === void 0 ? void 0 : _c.find((e) => e.key === title) }))
+      ]);
+    })));
   }
   renderIconSuffixes(hasValue) {
     return (h("div", { class: { 'icon-container': true } },
-      hasValue && !this.disabled && !this.hideSelected && this.clearable && !this.isMultiple() && (h("div", { class: "icon-suffix-focus last icon-close", onClick: (ev) => this.onInputClear(ev) },
+      hasValue && !this.disabled && this.clearable && !this.isMultiple() && (h("div", { class: "icon-suffix-focus last icon-close", onClick: (ev) => this.onInputClear(ev) },
         h("yoo-icon", { name: "cross", size: this.getIconSize() }))),
       !this.readonly && (h("div", { class: "icon-suffix" },
         h("yoo-icon", { name: this.arrowIcon, size: this.getIconSize() }))),
@@ -1041,12 +1032,7 @@ export class YooFormAutocompleteComponent {
           var _a;
           const title = (selected === null || selected === void 0 ? void 0 : selected.title) || selected;
           return [
-            h("yoo-entity", { class: {
-                autocomplete: true,
-                'autocomplete-selected': true,
-                last: index === selection.length - 1,
-                list: !isInlineMod
-              }, columnDefinition: this.columnDefinition, readonly: true, clearable: false, useTranslate: this.useTranslate, customModel: this.customModel, displayType: displayType, entityType: this.getEntityType(), valuesColor: (_a = this.valuesColor) === null || _a === void 0 ? void 0 : _a.find((e) => e.key === title), item: selected, isHistory: this.isHistory, entityMapping: this.entityMapping }),
+            h("yoo-entity", { class: { autocomplete: true, 'autocomplete-selected': true, last: index === selection.length - 1, list: !isInlineMod }, columnDefinition: this.columnDefinition, readonly: true, clearable: false, useTranslate: this.useTranslate, customModel: this.customModel, displayType: displayType, entityType: this.getEntityType(), valuesColor: (_a = this.valuesColor) === null || _a === void 0 ? void 0 : _a.find((e) => e.key === title), item: selected, isHistory: this.isHistory, entityMapping: this.entityMapping }),
             (isInlineMod && this.readonly) || (index !== this.selection.length - 1 && h("span", { class: "comma-separator" }, ","))
           ];
         }))));
@@ -1062,7 +1048,7 @@ export class YooFormAutocompleteComponent {
     }
   }
   renderUploader() {
-    return h("yoo-form-uploader", { ref: (el) => this.fileUploader = el, onInputChanged: (ev) => this.onFileChanges(ev), multiple: this.multiple });
+    return h("yoo-form-uploader", { ref: (el) => (this.fileUploader = el), onInputChanged: (ev) => this.onFileChanges(ev), multiple: this.multiple });
   }
   async clearItem(item) {
     if (this.value && this.value.length) {
@@ -1894,23 +1880,6 @@ export class YooFormAutocompleteComponent {
       "attribute": "max-height",
       "reflect": false
     },
-    "hideSelected": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "hide-selected",
-      "reflect": false
-    },
     "returnQuery": {
       "type": "boolean",
       "mutable": false,
@@ -2001,23 +1970,6 @@ export class YooFormAutocompleteComponent {
       "attribute": "preview-entity-type",
       "reflect": false
     },
-    "forceRefresh": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "force-refresh",
-      "reflect": false
-    },
     "forceHideSearch": {
       "type": "boolean",
       "mutable": false,
@@ -2741,6 +2693,21 @@ export class YooFormAutocompleteComponent {
         "resolved": "any[]",
         "references": {}
       }
+    }, {
+      "method": "mobileAutocompleteClosed",
+      "name": "mobileAutocompleteClosed",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any[]",
+        "resolved": "any[]",
+        "references": {}
+      }
     }, {
       "method": "extraDataChanged",
       "name": "extraDataChanged",

package/dist/collection/components/form/form-autocomplete-dialog/form-autocomplete-dialog.js

@@ -94,11 +94,8 @@ export class YooFormAutocompleteDialogComponent {
     if ((!this.isLocal && (!this.values || (this.values && this.values.length === 0))) || isWeb(this.host)) {
       this.initialLoadComplete = false;
     }
-    else if (!isWeb(this.host) && this.isLocal && (this.values || this.values.length === 0)) {
-      this.initialLoadComplete = false;
-    }
     else {
-      this.initialLoadComplete = true;
+      this.initialLoadComplete = !(!isWeb(this.host) && this.isLocal && (this.values || this.values.length === 0));
     }
     if (((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) > 0) {
       this.initialValueLength = (_b = this.values) === null || _b === void 0 ? void 0 : _b.length;
@@ -363,7 +360,7 @@ export class YooFormAutocompleteDialogComponent {
         'expanded-grid': true,
         'no-margin autocomplete': isWeb(this.host),
         'autocomplete-selection-mode': true
-      }, items: this.values, pageSize: this.pageSize, selectedTags: this.currentSelectedTags, dynamicOrdering: dynamicOrdering, showAutocompleteHeader: this.showHeader || dynamicOrdering, keepSelection: true, multiple: this.multiple, displayType: this.displayType, displayTypes: this.displayType === 'card-cell' || this.entityType === 'files' ? ['card-cell', 'card-list'] : null, collectionName: this.collectionName, entityType: this.getEntityType(), hideHeader: isNullOrUndefined(this.hideHeader) ? false : this.hideHeader, showSearch: this.forceHideSearch ? false : true, forceHideSearch: this.forceHideSearch, customModel: this.customModel, isLocal: this.isLocal, useTranslate: this.useTranslate, initialSelection: this.returnQuery ? null : this.value, onSelected: (ev) => this.onItemSelect(ev), onRemoved: (ev) => this.onItemSelect(ev), onSelectallToggled: (ev) => this.onItemSelect(ev), onFetchData: (ev) => this.onFetchGridData(ev), onFieldFetchData: (ev) => this.onFetchFieldFilterData(ev), onSortsAndFiltersChange: (ev) => this.onSortsAndFiltersChange(ev), allowCustomTag: (this.allowCustomTag || this.allowCustomValue || this.tag) && !this.forceDisableCustomTags, idOnly: this.idOnly || this.allowCustomTag || this.tag, idAttributeName: this.idAttributeName || '_id', onSearchInputEnterPressed: (ev) => this.onSearchInputValue(ev), onAddNewTagPressed: (ev) => this.addNewTag(ev), searchBarPlaceholder: (this.allowCustomTag || this.allowCustomValue || this.tag) && !this.forceDisableCustomTags ? translate(this.isLocal ? 'AUTOCOMPLETESEARCHADD' : 'SEARCHORADD') : translate('SEARCH'), emptyState: this.emptyState || this.entityType, tags: this.tags, model: this.model, maxSelectionNumber: this.max, hideAdvancedFilters: !this.gridIsExpanded, showFilters: this.gridIsExpanded, onTagsSelect: (ev) => this.onTagsSelect(ev), isCollapsible: false, isLoading: this.isLoading, clearTags: this.clearTags, extraClass: this.extraClass, isAutoComplete: true, addNewTagText: this.entityType === 'emails' ? translate('ADDNEWEMAIL') : null, idOnlyInitialSelection: this.idOnlyInitialSelection, hideRefreshButton: true, disableSingleDeselection: this.disableSingleDeselection, gridIsExpanded: this.gridIsExpanded, valuesColor: this.valuesColor, total: this.total, returnQuery: this.returnQuery, showSelectAll: this.returnQuery, initialQuery: this.returnQuery ? this.value : null, sortsAndFilters: this.returnQuery ? (_a = this.value) === null || _a === void 0 ? void 0 : _a.sortsAndFilters : null, showFormRadio: this.isFilter, selectedFilterOperator: this.selectedFilterOperator, onFormRadioToggled: (ev) => this.onFilterRadioToggled(ev), gridExtraOptions: this.gridExtraOptions, secondaryActions: this.secondaryActions, origin: this.origin, infiniteScrollDisabled: this.infiniteScrollDisabled }));
+      }, items: this.values, pageSize: this.pageSize, selectedTags: this.currentSelectedTags, dynamicOrdering: dynamicOrdering, showAutocompleteHeader: this.showHeader || dynamicOrdering, keepSelection: true, multiple: this.multiple, displayType: this.displayType, displayTypes: this.displayType === 'card-cell' || this.entityType === 'files' ? ['card-cell', 'card-list'] : null, collectionName: this.collectionName, entityType: this.getEntityType(), hideHeader: isNullOrUndefined(this.hideHeader) ? false : this.hideHeader, showSearch: !this.forceHideSearch, forceHideSearch: this.forceHideSearch, customModel: this.customModel, isLocal: this.isLocal, useTranslate: this.useTranslate, initialSelection: this.returnQuery ? null : this.value, onSelected: (ev) => this.onItemSelect(ev), onRemoved: (ev) => this.onItemSelect(ev), onSelectallToggled: (ev) => this.onItemSelect(ev), onFetchData: (ev) => this.onFetchGridData(ev), onFieldFetchData: (ev) => this.onFetchFieldFilterData(ev), onSortsAndFiltersChange: (ev) => this.onSortsAndFiltersChange(ev), allowCustomTag: (this.allowCustomTag || this.allowCustomValue || this.tag) && !this.forceDisableCustomTags, idOnly: this.idOnly || this.allowCustomTag || this.tag, idAttributeName: this.idAttributeName || '_id', onSearchInputEnterPressed: (ev) => this.onSearchInputValue(ev), onAddNewTagPressed: (ev) => this.addNewTag(ev), searchBarPlaceholder: (this.allowCustomTag || this.allowCustomValue || this.tag) && !this.forceDisableCustomTags ? translate(this.isLocal ? 'AUTOCOMPLETESEARCHADD' : 'SEARCHORADD') : translate('SEARCH'), emptyState: this.emptyState || this.entityType, tags: this.tags, model: this.model, maxSelectionNumber: this.max, hideAdvancedFilters: !this.gridIsExpanded, showFilters: this.gridIsExpanded, onTagsSelect: (ev) => this.onTagsSelect(ev), isCollapsible: false, isLoading: this.isLoading, clearTags: this.clearTags, extraClass: this.extraClass, isAutoComplete: true, addNewTagText: this.entityType === 'emails' ? translate('ADDNEWEMAIL') : null, idOnlyInitialSelection: this.idOnlyInitialSelection, hideRefreshButton: true, disableSingleDeselection: this.disableSingleDeselection, gridIsExpanded: this.gridIsExpanded, valuesColor: this.valuesColor, total: this.total, returnQuery: this.returnQuery, showSelectAll: this.returnQuery, initialQuery: this.returnQuery ? this.value : null, sortsAndFilters: this.returnQuery ? (_a = this.value) === null || _a === void 0 ? void 0 : _a.sortsAndFilters : null, showFormRadio: this.isFilter, selectedFilterOperator: this.selectedFilterOperator, onFormRadioToggled: (ev) => this.onFilterRadioToggled(ev), gridExtraOptions: this.gridExtraOptions, secondaryActions: this.secondaryActions, origin: this.origin, infiniteScrollDisabled: this.infiniteScrollDisabled, onCurrentPageChanged: ({ detail }) => (this.currentPageChanged.emit(detail)) }));
   }
   renderGrid() {
     var _a, _b;
@@ -374,7 +371,7 @@ export class YooFormAutocompleteDialogComponent {
         'no-margin autocomplete': isWeb(this.host),
         'autocomplete-selection-mode': true,
         'empty-tags': ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) === 0 && this.allowCustomTag
-      }, items: this.values, pageSize: this.pageSize, selectedTags: this.currentSelectedTags, dynamicOrdering: dynamicOrdering, showAutocompleteHeader: this.showHeader || dynamicOrdering, keepSelection: true, multiple: this.multiple, displayType: this.displayType, displayTypes: this.displayType === 'card-cell' || this.entityType === 'files' ? ['card-cell', 'card-list'] : null, collectionName: this.collectionName, entityType: this.getEntityType(), hideHeader: isNullOrUndefined(this.hideHeader) ? false : this.hideHeader, showSearch: this.tag || this.showSearchOrTags(), forceHideSearch: this.forceHideSearch, customModel: this.customModel, isLocal: this.isLocal, useTranslate: this.useTranslate, onGridExpanded: () => this.onExpandGrid(), initialSelection: this.returnQuery ? null : this.value, onSelected: (ev) => this.onItemSelect(ev), onRemoved: (ev) => this.onItemSelect(ev), onFetchData: (ev) => this.onFetchGridData(ev), onFieldFetchData: (ev) => this.onFetchFieldFilterData(ev), onSortsAndFiltersChange: (ev) => this.onSortsAndFiltersChange(ev), allowCustomTag: (this.allowCustomTag || this.allowCustomValue || this.tag) && !this.forceDisableCustomTags, idOnly: this.idOnly || this.allowCustomTag || this.tag, idAttributeName: this.idAttributeName || '_id', onSearchInputEnterPressed: (ev) => this.onSearchInputValue(ev), onAddNewTagPressed: (ev) => this.addNewTag(ev), searchBarPlaceholder: (this.allowCustomTag || this.allowCustomValue || this.tag) && !this.forceDisableCustomTags ? translate(this.isLocal ? 'AUTOCOMPLETESEARCHADD' : 'SEARCHORADD') : translate('SEARCH'), emptyState: this.emptyState || this.entityType, tags: this.tags, model: this.model, maxSelectionNumber: this.max, hideAdvancedFilters: !this.model, showFilters: !this.tag && !this.hideTags && !this.isLocal && !isWeb(this.host) && this.showSearchOrTags(), onTagsSelect: (ev) => this.onTagsSelect(ev), isCollapsible: false, isLoading: this.isLoading, clearTags: this.clearTags, extraClass: this.extraClass, isAutoComplete: true, addNewTagText: this.entityType === 'emails' ? translate('ADDNEWEMAIL') : null, idOnlyInitialSelection: this.idOnlyInitialSelection, hideRefreshButton: true, disableSingleDeselection: this.disableSingleDeselection, valuesColor: this.valuesColor, total: this.total, returnQuery: this.returnQuery, showSelectAll: this.returnQuery, initialQuery: this.returnQuery ? this.value : null, sortsAndFilters: this.returnQuery ? (_b = this.value) === null || _b === void 0 ? void 0 : _b.sortsAndFilters : null, showFormRadio: this.isFilter, selectedFilterOperator: this.selectedFilterOperator, onFormRadioToggled: (ev) => this.onFilterRadioToggled(ev), secondaryActions: this.secondaryActions, origin: this.origin, infiniteScrollDisabled: this.infiniteScrollDisabled }));
+      }, items: this.values, pageSize: this.pageSize, selectedTags: this.currentSelectedTags, dynamicOrdering: dynamicOrdering, showAutocompleteHeader: this.showHeader || dynamicOrdering, keepSelection: true, multiple: this.multiple, displayType: this.displayType, displayTypes: this.displayType === 'card-cell' || this.entityType === 'files' ? ['card-cell', 'card-list'] : null, collectionName: this.collectionName, entityType: this.getEntityType(), hideHeader: isNullOrUndefined(this.hideHeader) ? false : this.hideHeader, showSearch: this.tag || this.showSearchOrTags(), forceHideSearch: this.forceHideSearch, customModel: this.customModel, isLocal: this.isLocal, useTranslate: this.useTranslate, onGridExpanded: () => this.onExpandGrid(), initialSelection: this.returnQuery ? null : this.value, onSelected: (ev) => this.onItemSelect(ev), onRemoved: (ev) => this.onItemSelect(ev), onFetchData: (ev) => this.onFetchGridData(ev), onFieldFetchData: (ev) => this.onFetchFieldFilterData(ev), onSortsAndFiltersChange: (ev) => this.onSortsAndFiltersChange(ev), allowCustomTag: (this.allowCustomTag || this.allowCustomValue || this.tag) && !this.forceDisableCustomTags, idOnly: this.idOnly || this.allowCustomTag || this.tag, idAttributeName: this.idAttributeName || '_id', onSearchInputEnterPressed: (ev) => this.onSearchInputValue(ev), onAddNewTagPressed: (ev) => this.addNewTag(ev), searchBarPlaceholder: (this.allowCustomTag || this.allowCustomValue || this.tag) && !this.forceDisableCustomTags ? translate(this.isLocal ? 'AUTOCOMPLETESEARCHADD' : 'SEARCHORADD') : translate('SEARCH'), emptyState: this.emptyState || this.entityType, tags: this.tags, model: this.model, maxSelectionNumber: this.max, hideAdvancedFilters: !this.model, showFilters: !this.tag && !this.hideTags && !this.isLocal && !isWeb(this.host) && this.showSearchOrTags(), onTagsSelect: (ev) => this.onTagsSelect(ev), isCollapsible: false, isLoading: this.isLoading, clearTags: this.clearTags, extraClass: this.extraClass, isAutoComplete: true, addNewTagText: this.entityType === 'emails' ? translate('ADDNEWEMAIL') : null, idOnlyInitialSelection: this.idOnlyInitialSelection, hideRefreshButton: true, disableSingleDeselection: this.disableSingleDeselection, valuesColor: this.valuesColor, total: this.total, returnQuery: this.returnQuery, showSelectAll: this.returnQuery, initialQuery: this.returnQuery ? this.value : null, sortsAndFilters: this.returnQuery ? (_b = this.value) === null || _b === void 0 ? void 0 : _b.sortsAndFilters : null, showFormRadio: this.isFilter, selectedFilterOperator: this.selectedFilterOperator, onFormRadioToggled: (ev) => this.onFilterRadioToggled(ev), secondaryActions: this.secondaryActions, origin: this.origin, infiniteScrollDisabled: this.infiniteScrollDisabled, onCurrentPageChanged: ({ detail }) => (this.currentPageChanged.emit(detail)) }));
   }
   renderMobileContent() {
     return (h("div", { class: "outer-container" },
@@ -1463,6 +1460,21 @@ export class YooFormAutocompleteDialogComponent {
         "resolved": "boolean",
         "references": {}
       }
+    }, {
+      "method": "currentPageChanged",
+      "name": "currentPageChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      }
     }]; }
   static get methods() { return {
     "getLocalSearchValue": {

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

@@ -3256,7 +3256,6 @@ export class YooFormDynamicComponent {
           field.values = values || field.defaultValues;
         }
         const fieldFields = [
-          'forceRefresh',
           'multiple',
           'avatarMode',
           'collectionName',
@@ -3345,9 +3344,6 @@ export class YooFormDynamicComponent {
         if (((field.min && field.min > 1) || (field.max && field.max > 0)) && attrs.validators) {
           attrs.validators.push({ name: field.type, options: { ...extraAttrs } });
         }
-        if (field.type === FormFieldType.dataset) {
-          extraAttrs.forceRefresh = true;
-        }
         if (field.originalFieldType === FormFieldType.tags) {
           extraAttrs.tag = true;
         }
@@ -3520,7 +3516,6 @@ export class YooFormDynamicComponent {
       case FormFieldType.address:
         TagType = 'yoo-form-autocomplete';
         extraAttrs = {
-          forceRefresh: field.forceRefresh,
           iconPrefix: 'map',
           multiple: false,
           isLocal: false,

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

@@ -1,7 +1,7 @@
 import { closeModal, Draggable, getMedia, gsapTo, isPointInsidePlan, isWeb, parseMarkDown, replaceAllLinks, showModal, translate, translateMulti } from '@shared/utils';
 import { Component, Element, Event, forceUpdate, h, Host, Prop, State, Watch } from '@stencil/core';
 import { getFromOfflineStorage } from '../../../utils/cache/localForage';
-import { calcCoordPercentage } from '../../../utils/helpers/annotations-helpers';
+import { calcCoordPercentage, isElementInsideContainer } from '../../../utils/helpers/annotations-helpers';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
 import { showWarningAlert } from '../../../utils/helpers/draggable-tags-helpers';
 import { setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
@@ -58,7 +58,7 @@ export class YooFormHotzonesComponent {
   initDraggableTarget() {
     const dragEndAction = async () => {
       const containerBound = this.imageElement.getBoundingClientRect();
-      if (!this.isElementCenterInsideContainer(this.targetElement.getBoundingClientRect(), containerBound, this.targetElement.clientWidth / 2)) {
+      if (!isElementInsideContainer(this.targetElement.getBoundingClientRect(), containerBound, this.targetElement.clientWidth / 2, 'center')) {
         this.resetTarget();
       }
       else {
@@ -99,20 +99,6 @@ export class YooFormHotzonesComponent {
     this.validity = ((_b = (_a = this.hotzones) === null || _a === void 0 ? void 0 : _a.filter(({ revealed }) => revealed)) === null || _b === void 0 ? void 0 : _b.length) === ((_d = (_c = this.hotzones) === null || _c === void 0 ? void 0 : _c.filter(({ description, image }) => description || image)) === null || _d === void 0 ? void 0 : _d.length);
     !this.validity && forceUpdate(this);
   }
-  isElementCenterInsideContainer(elementBounds, containerBounds, acceptationThreshold = 0) {
-    if (elementBounds && containerBounds) {
-      const { top, left, bottom, right } = containerBounds;
-      const point = {
-        x: elementBounds.x + (elementBounds.width / 2),
-        y: elementBounds.y + (elementBounds.height / 2)
-      };
-      return ((point.y >= top - acceptationThreshold) &&
-        (point.y <= bottom + acceptationThreshold) &&
-        (point.x >= left - acceptationThreshold) &&
-        (point.x <= right + acceptationThreshold));
-    }
-    return false;
-  }
   renderZones() {
     var _a;
     return (_a = this.hotzones) === null || _a === void 0 ? void 0 : _a.map(hotzone => {

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

@@ -1,4 +1,4 @@
-import { copyToClipboard, debounce as _debounce, disableKeyboardResize, enableKeyboardResize, extractTextFromStringHTML, isAndroid, isAnimationsDisabled, isHTML, isIOS, isKeyboardResizeModeInactive, isNativeMobile, isNullOrUndefined, isSafari, isWeb, resizeObserve, showToast, translate } from '@shared/utils';
+import { copyToClipboard, debounce as _debounce, extractTextFromStringHTML, isAndroid, isAnimationsDisabled, isHTML, isIOS, isNativeMobile, isNullOrUndefined, isSafari, isWeb, resizeObserve, showToast, translate } from '@shared/utils';
 import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 import { isFunction, isNumber, isString } from 'lodash-es';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
@@ -22,7 +22,6 @@ export class YooFormInputComponent {
     this.allowDecimals = false;
     this.checkboxParams = null;
     this.hostWidth = 0;
-    this.isKeyboardResizeModeInactive = isKeyboardResizeModeInactive();
     this.onWheel = () => {
       if (isWeb(this.host) && this.isNumberInput(this.type)) {
         this.inputElement.blur();
@@ -161,9 +160,6 @@ export class YooFormInputComponent {
       this.inputElement.value = this.value;
       this.updateRemainingCharacters();
     }
-    if (isIOS()) {
-      enableKeyboardResize();
-    }
     if (this.focusOnRendered) {
       this.setFocus();
     }
@@ -178,15 +174,6 @@ export class YooFormInputComponent {
     this.inputType = this.type;
     this.setLocalValue(true);
   }
-  disconnectedCallback() {
-    if (isIOS()) {
-      setTimeout(() => {
-        if (this.isKeyboardResizeModeInactive) {
-          disableKeyboardResize();
-        }
-      }, 500);
-    }
-  }
   getIconSize() {
     if (this.size === 'medium' || this.size === 'small') {
       return 'small';

package/dist/collection/components/form/form-plan-assign/form-plan-assign.js

@@ -7,10 +7,10 @@ export class YooFormPlanAssignComponent {
   }
   async updateValues(values, search) {
     if (search.type === 'users' && this.formAutocompleteUsers) {
-      this.formAutocompleteUsers.updateValues(values);
+      await this.formAutocompleteUsers.updateValues(values);
     }
     if (search.type === 'plans' && this.formAutocompletePlans) {
-      this.formAutocompletePlans.updateValues(values);
+      await this.formAutocompletePlans.updateValues(values);
     }
   }
   onRequireChanged() {
@@ -18,7 +18,6 @@ export class YooFormPlanAssignComponent {
   }
   componentWillLoad() {
     setValidator(this);
-    // this.fetchCustomData.emit();
   }
   onUsersSelect(ev) {
     ev.stopPropagation();
@@ -79,7 +78,7 @@ export class YooFormPlanAssignComponent {
   }
   renderEditable() {
     return (h("div", { class: "outer-container" },
-      h("yoo-form-autocomplete", { ref: (el) => (this.formAutocompletePlans = el), class: "margin-bottom", hideSelected: true, multiple: true, value: this.value ? this.value.plans : null, entityType: "courseselection", displayType: "card-list", previewEntityType: "courseselection", iconPrefix: "courses", values: this.plans, isLocal: true, onFetchData: (ev) => this.onFetchData(ev, 'plans'), onInputChanged: (ev) => this.onPlansSelect(ev), onInputBlurred: (ev) => this.onInputBlurred(ev), onInputFocused: (ev) => this.onInputFocused(ev), onValidityChanged: (ev) => this.onAutoCompleteValidityChanged(ev), placeholder: translate('ADDCOURSES') }),
+      h("yoo-form-autocomplete", { ref: (el) => (this.formAutocompletePlans = el), class: "margin-bottom", multiple: true, value: this.value ? this.value.plans : null, entityType: "courseselection", displayType: "card-list", previewEntityType: "courseselection", iconPrefix: "courses", values: this.plans, isLocal: true, onFetchData: (ev) => this.onFetchData(ev, 'plans'), onInputChanged: (ev) => this.onPlansSelect(ev), onInputBlurred: (ev) => this.onInputBlurred(ev), onInputFocused: (ev) => this.onInputFocused(ev), onValidityChanged: (ev) => this.onAutoCompleteValidityChanged(ev), placeholder: translate('ADDCOURSES') }),
       this.renderUsers()));
   }
   render() {

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

@@ -1,5 +1,5 @@
 import { Keyboard } from '@capacitor/keyboard';
-import { containsUrls, debounce, disableKeyboardResize, enableKeyboardResize, findParent, getAsyncExtraData, isFirefox, isIOS, isKeyboardResizeModeInactive, isNativeMobile, isNullOrUndefined, isWeb, replaceAndGetAllLinks, replaceAtTagToMentionTag, safeScrollIntoView, translate, translateMulti } from '@shared/utils';
+import { containsUrls, debounce, findParent, getAsyncExtraData, isFirefox, isNativeMobile, isNullOrUndefined, isWeb, replaceAndGetAllLinks, replaceAtTagToMentionTag, safeScrollIntoView, translate, translateMulti } from '@shared/utils';
 import { Component, Element, Event, forceUpdate, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';
 import { getAppContext, sanitizeHTML } from '../../../utils/helpers/common-helpers';
 import { onInputBlurred, onInputClear, onInputFocused, setValidator, setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
@@ -21,7 +21,6 @@ export class YooFormTextAreaComponent {
     this.mentionedUsers = [];
     this.allowLinkUpdate = true;
     this.updateSegmentsCountDebounce = debounce(() => this.updateSegmentsCount(), 2000);
-    this.isKeyboardResizeModeInactive = isKeyboardResizeModeInactive();
     this.scrollIntoViewOnFocus = false;
   }
   onValueChanged(value) {
@@ -124,9 +123,6 @@ export class YooFormTextAreaComponent {
         textArea.setAttribute('style', `resize: ${this.resizable};`);
       }
     }
-    if (isIOS()) {
-      enableKeyboardResize();
-    }
     if (this.autoInitialRows && this.inputEl) {
       const scrollHeight = this.inputEl.scrollHeight;
       const PADDING = 16;
@@ -151,13 +147,6 @@ export class YooFormTextAreaComponent {
       this.inputEl.removeEventListener('compositionupdate', this.compUpdateListener);
       this.inputEl.removeEventListener('compositionend', this.compEndListener);
     }
-    if (isIOS()) {
-      setTimeout(() => {
-        if (this.isKeyboardResizeModeInactive) {
-          disableKeyboardResize();
-        }
-      }, 500);
-    }
   }
   setTextareaMaxLengh() {
     if (this.maxCharacters && this.inputEl && !this.allowMention && !this.allowCustomInput) {

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

@@ -38,7 +38,7 @@ export class YooFormTodoComponent {
     var _a, _b;
     if (!this.disabled && this.slidesTodo && this.slidesTodo.length > 0) {
       this.value = this.value || {
-        title: translate('YOOBICTODO') + ' - ' + (((_b = (_a = getSession()) === null || _a === void 0 ? void 0 : _a.selectedMission) === null || _b === void 0 ? void 0 : _b.title) || '')
+        title: translate('YOOBICTODO') + ' - ' + translateMulti(((_b = (_a = getSession()) === null || _a === void 0 ? void 0 : _a.selectedMission) === null || _b === void 0 ? void 0 : _b.title) || '')
       };
       if (this.linked) {
         const formDynamic = findParent(this.host, 'yoo-form-dynamic');

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

@@ -1,6 +1,6 @@
 import { isAndroid, isNativeMobile, isOffline, isTabletOrIpad } from '@shared/utils';
 import { Component, Element, Event, h, Host, Listen, Prop, Watch } from '@stencil/core';
-import { getAppContext } from 'src/utils/helpers/common-helpers';
+import { getAppContext } from '../../../utils/helpers/common-helpers';
 import { fixVideoSource, getSourceType, getVideoSubtitlesFromFiles } from '../../../utils/helpers/video-player-helpers';
 export class YooFormVideoPlayerComponent {
   constructor() {

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

@@ -717,6 +717,7 @@ export class YooFormCreatorComponent {
       missionDescriptionChanged: this.missionDescriptionChanged,
       slidesChanged: this.slidesChanged,
       scoringChanged: this.scoringChanged,
+      todoChanged: this.todoChanged,
       translationsUpdated: this.translationsUpdated
     }, null, true, saveOnFinish, closeOnFinish);
   }
@@ -1969,6 +1970,9 @@ export class YooFormCreatorComponent {
       }, onMissionDescriptionChanged: (ev) => {
         ev.stopPropagation();
         this.missionDescriptionChanged.emit(ev.detail);
+      }, onTodoChanged: (ev) => {
+        ev.stopPropagation();
+        this.todoChanged.emit(ev.detail);
       }, onPlanChanged: (ev) => {
         ev.stopPropagation();
         this.planChanged.emit(ev.detail);
@@ -2987,6 +2991,26 @@ export class YooFormCreatorComponent {
           }
         }
       }
+    }, {
+      "method": "todoChanged",
+      "name": "todoChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emits an event when there are any changes to the todo"
+      },
+      "complexType": {
+        "original": "ITodo",
+        "resolved": "ITodo",
+        "references": {
+          "ITodo": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
+      }
     }, {
       "method": "addNewPageClicked",
       "name": "addNewPageClicked",

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

@@ -308,6 +308,7 @@ export class YooFormCreatorTranslateComponent {
         slidesChanged: this.slidesChanged,
         translationsUpdated: this.translationsUpdated,
         scoringChanged: this.scoringChanged,
+        todoChanged: this.todoChanged,
         setLoading: this.setLoading
       }, null, onlyTranslateMissingTranslations);
     }
@@ -943,6 +944,26 @@ export class YooFormCreatorTranslateComponent {
           }
         }
       }
+    }, {
+      "method": "todoChanged",
+      "name": "todoChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emits an event when there are any changes to the todo"
+      },
+      "complexType": {
+        "original": "ITodo",
+        "resolved": "ITodo",
+        "references": {
+          "ITodo": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
+      }
     }, {
       "method": "setLoading",
       "name": "setLoading",