@yoobic/yobi 8.1.0-13 → 8.1.0-17

package/dist/collection/components/core/toast/toast.js

@@ -10,7 +10,7 @@ const LIFECYCLE_MAP = {
 };
 export class YooToastComponent {
   constructor() {
-    this.maxLength = 150;
+    this.maxLength = 300;
     this.overlayId = 0;
   }
   lifecycle(modalEvent) {
@@ -559,7 +559,7 @@ export class YooToastComponent {
       },
       "attribute": "max-length",
       "reflect": false,
-      "defaultValue": "150"
+      "defaultValue": "300"
     },
     "subMessages": {
       "type": "unknown",

package/dist/collection/components/entities/card-feed/default/card-feed.js

@@ -665,7 +665,7 @@ export class YooCardFeedComponent {
       this.entry.uiFields.fields.some((f) => isFieldWithNoValue(f) || !isNullOrUndefined(this.entry.uiFields.data[f.name]))
       && !((_g = (_f = this.host) === null || _f === void 0 ? void 0 : _f.classList) === null || _g === void 0 ? void 0 : _g.contains('map')) && !((_j = (_h = this.host) === null || _h === void 0 ? void 0 : _h.classList) === null || _j === void 0 ? void 0 : _j.contains('grid-cell'))) {
       return (h("div", { class: "uifield-container" },
-        h("yoo-form-dynamic", { class: "inline in-card secondary", scrollable: false, forceReadonly: true, slides: [{ title: '', items: this.entry.uiFields.fields }], data: this.entry.uiFields.data, suffix: this.entry.uiFieldsSuffix, showTabs: false, formInputSize: "medium", showRecap: false })));
+        h("yoo-form-dynamic", { class: "inline in-card secondary", scrollable: false, forceReadonly: true, slides: [{ title: '', items: this.entry.uiFields.fields }], data: this.entry.uiFields.data, suffix: this.entry.uiFieldsSuffix, showTabs: false, formInputSize: "medium", showRecap: false, onDataChanged: (ev) => ev.stopPropagation() })));
     }
   }
   /**

package/dist/collection/components/entities/card-inbox/card-inbox.js

@@ -57,7 +57,7 @@ export class YooCardInboxComponent {
       !((_e = (_d = this.host) === null || _d === void 0 ? void 0 : _d.classList) === null || _e === void 0 ? void 0 : _e.contains('map')) &&
       !((_g = (_f = this.host) === null || _f === void 0 ? void 0 : _f.classList) === null || _g === void 0 ? void 0 : _g.contains('grid-cell'))) {
       return (h("div", { class: "uifield-container" },
-        h("yoo-form-dynamic", { class: "inline in-card secondary", scrollable: false, forceReadonly: true, slides: [{ title: '', items: this.entry.uiFields.fields }], data: this.entry.uiFields.data, suffix: this.entry.uiFieldsSuffix, showTabs: false, formInputSize: "medium", showRecap: false })));
+        h("yoo-form-dynamic", { class: "inline in-card secondary", scrollable: false, forceReadonly: true, slides: [{ title: '', items: this.entry.uiFields.fields }], data: this.entry.uiFields.data, suffix: this.entry.uiFieldsSuffix, showTabs: false, formInputSize: "medium", showRecap: false, onDataChanged: (ev) => ev.stopPropagation() })));
     }
   }
   render() {

package/dist/collection/components/entities/card-list/default/card-list.js

@@ -1,5 +1,5 @@
 import { Cloudinary, downloadFile, getSession, isCloudinaryLink, isFieldWithNoValue, isFirefox, isImage, isNullOrUndefined, isPresent, isUnsplashUrl, isVideo, isWeb, parseMarkDown, replaceAllLinks, translate, translateMulti } from '@shared/utils';
-import { Component, Element, h, Host, Prop, State } from '@stencil/core';
+import { Component, Element, Event, h, Host, Prop, State } from '@stencil/core';
 import { compact, isEmpty, isNumber, isString } from 'lodash-es';
 import { toggleElementTapped } from '../../../../utils/helpers/card-list-helpers';
 import { execHandlerAndStopEvent, getAppContext, showPhotoEditor } from '../../../../utils/helpers/common-helpers';
@@ -322,14 +322,17 @@ export class YooCardListComponent {
     return (h("yoo-img", { class: "subheading-container comment-image", instant: this.entry.isGridCell, type: this.entry.allowOrientation ? 'default' : 'background', src: new Cloudinary(item).quality('eco').getUrl(), scaledUp: this.entry.allowOrientation, scaledUpInWidth: this.entry.allowOrientation, ref: (el) => (this.imgRef = el), onClick: () => this.imageClicked(item) }));
   }
   renderUIFields() {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     if (((_b = (_a = this.entry.uiFields) === null || _a === void 0 ? void 0 : _a.fields) === null || _b === void 0 ? void 0 : _b.length) > 0 &&
       !isEmpty((_c = this.entry.uiFields) === null || _c === void 0 ? void 0 : _c.data) &&
       this.entry.uiFields.fields.some((f) => isFieldWithNoValue(f) || !isNullOrUndefined(this.entry.uiFields.data[f.name])) &&
       !((_e = (_d = this.host) === null || _d === void 0 ? void 0 : _d.classList) === null || _e === void 0 ? void 0 : _e.contains('map')) &&
       !((_g = (_f = this.host) === null || _f === void 0 ? void 0 : _f.classList) === null || _g === void 0 ? void 0 : _g.contains('grid-cell'))) {
       return (h("div", { class: "uifield-container" },
-        h("yoo-form-dynamic", { class: "inline in-card secondary", scrollable: false, forceReadonly: true, slides: [{ title: '', items: this.entry.uiFields.fields }], data: this.entry.uiFields.data, suffix: this.entry.uiFieldsSuffix, showTabs: false, formInputSize: "medium", showRecap: false })));
+        h("yoo-form-dynamic", { class: "inline in-card secondary transparent", scrollable: false, forceReadonly: !((_j = (_h = this.host) === null || _h === void 0 ? void 0 : _h.classList) === null || _j === void 0 ? void 0 : _j.contains('form')), slides: [{ title: '', items: this.entry.uiFields.fields }], data: this.entry.uiFields.data, suffix: this.entry.uiFieldsSuffix, showTabs: false, formInputSize: "medium", showRecap: false, onDataChanged: (ev) => {
+            ev.stopPropagation();
+            this.uiFieldsChanged.emit(ev.detail);
+          } })));
     }
   }
   render() {
@@ -423,5 +426,21 @@ export class YooCardListComponent {
     "isTranslating": {},
     "showTranslatedText": {}
   }; }
+  static get events() { return [{
+      "method": "uiFieldsChanged",
+      "name": "uiFieldsChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
   static get elementRef() { return "host"; }
 }

package/dist/collection/components/entities/entity/entity.js

@@ -1901,15 +1901,21 @@ export class YooEntityComponent {
     if (this.host.classList.contains('no-text-break')) {
       extraClasses += ' no-text-break ';
     }
+    if (this.host.classList.contains('form')) {
+      extraClasses += ' form ';
+    }
+    if (this.host.classList.contains('table')) {
+      extraClasses += ' table ';
+    }
     if (this.host.classList.contains('no-border')) {
       extraClasses += ' no-border ';
     }
-    if (this.isHistory) {
-      extraClasses += ' history ';
-    }
     if (this.host.classList.contains('form-choice')) {
       extraClasses += ' form-choice ';
     }
+    if (this.isHistory) {
+      extraClasses += ' history ';
+    }
     if (this.iconColor) {
       this.host.style.setProperty('--icon-color', this.iconColor);
     }

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

@@ -43,6 +43,7 @@ export class YooFormAutocompleteComponent {
     this.shouldFetchDataOnTagSelect = true;
     this.gridIsExpanded = false;
     this.maxPage = 0;
+    this.infiniteScrollDisabled = false;
   }
   async onWebAutocompleteOpened() {
     if (this.showDropdownContent) {
@@ -353,6 +354,10 @@ export class YooFormAutocompleteComponent {
   onFetchData(ev) {
     var _a;
     ev.stopPropagation();
+    if (this.customDataLoader) {
+      this.onFetchDataCustom(ev);
+      return null;
+    }
     // If a user has selected items that are not on the first page and has searched for items then the selected items will be lost and only their ids kept
     // On the first load we must load the previous max items to ensure the selected items are loaded correctly
     if (this.idOnly && !ev.detail.search && ((_a = this.selection) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.maxPage > ev.detail.currentPage && ev.detail.currentPage === 0) {
@@ -362,6 +367,51 @@ export class YooFormAutocompleteComponent {
     this.gridCurrentSearch = ev.detail;
     this.refresh();
   }
+  onFetchDataCustom(ev) {
+    const search = ev.detail;
+    const finalPageSize = 20;
+    this.isLoading = true;
+    return this.customDataLoader({
+      currentPage: search.currentPage,
+      pageSize: finalPageSize,
+      startDate: search.startDate,
+      endDate: search.endDate,
+      sortAndFilters: this.sortsAndFilters,
+      search: search.search
+    }).then((ret) => {
+      var _a, _b;
+      if (search.currentPage === 0) {
+        this.values = [...(ret.data || [])];
+      }
+      else {
+        this.values = [...(this.values || []), ...(ret.data || [])];
+      }
+      this.isLoading = false;
+      const hasReachedMaxItem = (((_a = ret === null || ret === void 0 ? void 0 : ret.data) === null || _a === void 0 ? void 0 : _a.length) || 0) < finalPageSize;
+      if (ev && (search === null || search === void 0 ? void 0 : search.infiniteScroll)) {
+        search.infiniteScroll.complete();
+        if (search.infiniteScrollType === 'infiniteScroll' && hasReachedMaxItem) {
+          search.infiniteScroll.disabled = true;
+          this.infiniteScrollDisabled = true;
+        }
+        else {
+          this.infiniteScrollDisabled = false;
+        }
+      }
+      else {
+        this.infiniteScrollDisabled = hasReachedMaxItem;
+      }
+      if (this.dialog) {
+        this.dialog.values = this.values;
+        this.dialog.infiniteScrollDisabled = this.infiniteScrollDisabled;
+        this.dialog.isLoading = false;
+      }
+      if (!this.initialValueLength) {
+        this.initialValueLength = (_b = this.values) === null || _b === void 0 ? void 0 : _b.length;
+      }
+      return this.values;
+    });
+  }
   onFetchFieldFilterData(ev) {
     ev.stopPropagation();
     this.fetchFieldFilterData.emit(ev.detail);
@@ -523,6 +573,7 @@ export class YooFormAutocompleteComponent {
     this.dialog.dynamicOrdering = this.dynamicOrdering;
     this.dialog.secondaryActions = this.secondaryActions;
     this.dialog.origin = this.origin;
+    this.dialog.infiniteScrollDisabled = this.infiniteScrollDisabled;
     if (this.isLocal) {
       this.dialog.values = this.localValues;
       this.dialog.value = this.hideSelectionFromInput ? null : this.value;
@@ -948,7 +999,7 @@ export class YooFormAutocompleteComponent {
               'live-preview-dropdown': this.host.classList.contains('live-preview-autocomplete')
             }, items: this.values, currentPage: ((_b = this.selection) === null || _b === void 0 ? void 0 : _b.length) && this.currentPage !== 0 ? this.maxPage : this.currentPage, pageSize: this.pageSize, selectedTags: this.currentSelectedTags, isAutoComplete: true, isGridClosedWithSearchText: this.isGridClosedWithSearchText, keepSelection: true, dynamicOrdering: this.dynamicOrdering !== false, multiple: this.isMultiple(), displayType: this.displayType, displayTypes: this.displayType === 'card-cell' || this.entityType === 'files' ? ['card-cell', 'card-list'] : null, onSelected: (ev) => this.onItemSelect(ev), onRemoved: (ev) => this.onItemSelect(ev), onSelectallToggled: (ev) => this.onItemSelect(ev), collectionName: this.collectionName, entityType: this.getEntityType(), onSearchInputEnterPressed: (ev) => this.onCustomTagCreated(ev), onFetchData: (ev) => this.onFetchData(ev), onFieldFetchData: (ev) => this.onFetchFieldFilterData(ev), onSortsAndFiltersChange: (ev) => this.onSortsAndFiltersChange(ev), onCurrentPageChanged: (ev) => this.onCurrentPageChange(ev === null || ev === void 0 ? void 0 : ev.detail), hideHeader: isNullOrUndefined(this.hideHeader) ? false : this.hideHeader, showSearch: !this.forceHideSearch && (this.initialValueLength > minValuesForSearch || this.allowCustomTag || this.allowCustomValue || this.entityType === 'googlemaps'), isLocal: this.isLocal, onGridExpanded: () => this.onExpandGrid(), useTranslate: this.useTranslate, initialSelection: this.returnQuery ? null : this.value, idOnly: this.idOnly || this.allowCustomTag, idAttributeName: this.idAttributeName || '_id', emptyState: this.emptyState, allowCustomTag: (this.allowCustomTag || this.tag || this.allowCustomValue) && !this.forceDisableCustomTags, searchBarPlaceholder: (this.allowCustomTag || this.allowCustomValue) && !this.forceDisableCustomTags
               ? translate(this.isLocal ? 'AUTOCOMPLETESEARCHADD' : 'SEARCHORADD')
-              : translate('SEARCH'), tags: this.tags, forceHideSearch: this.forceHideSearch, maxSelectionNumber: this.max, customModel: this.customModel, addNewTagText: this.entityType === 'emails' ? translate('ADDNEWEMAIL') : this.searchText, model: this.model, hideAdvancedFilters: !this.model, hideRefreshButton: true, showFilters: false, onTagsSelect: (ev) => this.onTagsSelect(ev), isCollapsible: false, onAddNewTagPressed: (ev) => this.onCustomTagCreated(ev), disableSingleDeselection: this.disableSingleDeselection, idOnlyInitialSelection: this.idOnlyInitialSelection, isLoading: this.isLoading, valuesColor: this.valuesColor, total: this.total, returnQuery: this.returnQuery, showSelectAll: this.returnQuery, initialQuery: this.returnQuery ? this.value : null, sortsAndFilters: this.returnQuery ? (_c = this.value) === null || _c === void 0 ? void 0 : _c.sortsAndFilters : null, onFileUpload: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.click(); }, isUploading: this.isUploading, showFormRadio: this.isFilter, selectedFilterOperator: this.filterOperator, onFormRadioToggled: (ev) => this.onFilterRadioToggled(ev.detail), onMaxPageCountChanged: (ev) => (this.maxPage = Math.max(ev.detail, this.maxPage)), onSearchedItemSelected: (ev) => this.getSearchedItemSelection(ev) }))))))));
+              : translate('SEARCH'), tags: this.tags, forceHideSearch: this.forceHideSearch, maxSelectionNumber: this.max, customModel: this.customModel, addNewTagText: this.entityType === 'emails' ? translate('ADDNEWEMAIL') : this.searchText, model: this.model, hideAdvancedFilters: !this.model, hideRefreshButton: true, showFilters: false, onTagsSelect: (ev) => this.onTagsSelect(ev), isCollapsible: false, onAddNewTagPressed: (ev) => this.onCustomTagCreated(ev), disableSingleDeselection: this.disableSingleDeselection, idOnlyInitialSelection: this.idOnlyInitialSelection, isLoading: this.isLoading, valuesColor: this.valuesColor, total: this.total, returnQuery: this.returnQuery, showSelectAll: this.returnQuery, initialQuery: this.returnQuery ? this.value : null, sortsAndFilters: this.returnQuery ? (_c = this.value) === null || _c === void 0 ? void 0 : _c.sortsAndFilters : null, onFileUpload: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.click(); }, isUploading: this.isUploading, showFormRadio: this.isFilter, selectedFilterOperator: this.filterOperator, onFormRadioToggled: (ev) => this.onFilterRadioToggled(ev.detail), onMaxPageCountChanged: (ev) => (this.maxPage = Math.max(ev.detail, this.maxPage)), onSearchedItemSelected: (ev) => this.getSearchedItemSelection(ev), infiniteScrollDisabled: this.infiniteScrollDisabled }))))))));
   }
   renderReadonly() {
     if (this.selection && this.selection.length > 0) {
@@ -2453,6 +2504,26 @@ export class YooFormAutocompleteComponent {
       },
       "attribute": "use-uploader",
       "reflect": false
+    },
+    "customDataLoader": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "TGridCustomDataLoader",
+        "resolved": "(options: IGridCustomDataLoaderOptions) => Promise<IGridCustomDataLoaderOptionsData<IEntity>>",
+        "references": {
+          "TGridCustomDataLoader": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
     }
   }; }
   static get states() { return {

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

@@ -21,6 +21,7 @@ export class YooFormAutocompleteDialogComponent {
     this.showHeaderWeb = false;
     this.modalPlacement = 'below';
     this.values = [];
+    this.infiniteScrollDisabled = false;
     this.fullscreen = false;
     this.gridIsExpanded = false;
     this.initialValueLength = 0;
@@ -374,7 +375,7 @@ export class YooFormAutocompleteDialogComponent {
         'expanded-grid': true,
         'no-margin autocomplete': isWeb(this.host),
         'autocomplete-selection-mode': true
-      }, items: this.isLocal ? this.localValues : this.values, pageSize: this.pageSize, selectedTags: this.currentSelectedTags, dynamicOrdering: this.dynamicOrdering !== false, 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, forceLocalInfiniteScroll: this.isLocal && ((_a = this.localValues) === null || _a === void 0 ? void 0 : _a.length) < ((_b = this.values) === null || _b === void 0 ? void 0 : _b.length), gridIsExpanded: this.gridIsExpanded, valuesColor: this.valuesColor, total: this.total, returnQuery: this.returnQuery, showSelectAll: this.returnQuery, initialQuery: this.returnQuery ? this.value : null, sortsAndFilters: this.returnQuery ? (_c = this.value) === null || _c === void 0 ? void 0 : _c.sortsAndFilters : null, showFormRadio: this.isFilter, selectedFilterOperator: this.selectedFilterOperator, onFormRadioToggled: (ev) => this.onFilterRadioToggled(ev), gridExtraOptions: this.gridExtraOptions, secondaryActions: this.secondaryActions, origin: this.origin }));
+      }, items: this.isLocal ? this.localValues : this.values, pageSize: this.pageSize, selectedTags: this.currentSelectedTags, dynamicOrdering: this.dynamicOrdering !== false, 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, forceLocalInfiniteScroll: this.isLocal && ((_a = this.localValues) === null || _a === void 0 ? void 0 : _a.length) < ((_b = this.values) === null || _b === void 0 ? void 0 : _b.length), gridIsExpanded: this.gridIsExpanded, valuesColor: this.valuesColor, total: this.total, returnQuery: this.returnQuery, showSelectAll: this.returnQuery, initialQuery: this.returnQuery ? this.value : null, sortsAndFilters: this.returnQuery ? (_c = this.value) === null || _c === void 0 ? void 0 : _c.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 }));
   }
   renderGrid() {
     var _a, _b, _c, _d;
@@ -384,7 +385,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.isLocal ? this.localValues : this.values, pageSize: this.pageSize, selectedTags: this.currentSelectedTags, dynamicOrdering: this.dynamicOrdering !== false, 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, forceLocalInfiniteScroll: this.isLocal && ((_b = this.localValues) === null || _b === void 0 ? void 0 : _b.length) < ((_c = this.values) === null || _c === void 0 ? void 0 : _c.length), valuesColor: this.valuesColor, total: this.total, returnQuery: this.returnQuery, showSelectAll: this.returnQuery, initialQuery: this.returnQuery ? this.value : null, sortsAndFilters: this.returnQuery ? (_d = this.value) === null || _d === void 0 ? void 0 : _d.sortsAndFilters : null, showFormRadio: this.isFilter, selectedFilterOperator: this.selectedFilterOperator, onFormRadioToggled: (ev) => this.onFilterRadioToggled(ev), secondaryActions: this.secondaryActions, origin: this.origin }));
+      }, items: this.isLocal ? this.localValues : this.values, pageSize: this.pageSize, selectedTags: this.currentSelectedTags, dynamicOrdering: this.dynamicOrdering !== false, 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, forceLocalInfiniteScroll: this.isLocal && ((_b = this.localValues) === null || _b === void 0 ? void 0 : _b.length) < ((_c = this.values) === null || _c === void 0 ? void 0 : _c.length), valuesColor: this.valuesColor, total: this.total, returnQuery: this.returnQuery, showSelectAll: this.returnQuery, initialQuery: this.returnQuery ? this.value : null, sortsAndFilters: this.returnQuery ? (_d = this.value) === null || _d === void 0 ? void 0 : _d.sortsAndFilters : null, showFormRadio: this.isFilter, selectedFilterOperator: this.selectedFilterOperator, onFormRadioToggled: (ev) => this.onFilterRadioToggled(ev), secondaryActions: this.secondaryActions, origin: this.origin, infiniteScrollDisabled: this.infiniteScrollDisabled }));
   }
   renderMobileContent() {
     return (h("div", { class: "outer-container" },
@@ -1205,6 +1206,24 @@ export class YooFormAutocompleteDialogComponent {
       },
       "defaultValue": "[]"
     },
+    "infiniteScrollDisabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "infinite-scroll-disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "value": {
       "type": "any",
       "mutable": true,

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

@@ -1240,7 +1240,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   height: 100%;
 }
 :host(.detail-view) .detail-view-container.summary:not(.appendix) .image-container {
-  width: 21.4375rem;
+  width: min(21.4375rem, 100%);
 }
 :host(.detail-view) .detail-view-container.pdf:not(.appendix) .image-container {
   width: 18.5625rem;

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

@@ -751,7 +751,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host .outer-container .label {
   padding-left: var(--spacing-08, 0.5rem);
-  color: var(--dark, #000000);
 }
 :host .outer-container .label.readonly {
   letter-spacing: 0px;
@@ -859,6 +858,15 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   stroke: var(--);
 }
 
+:host(.danger) .outer-container yoo-icon:not([name=help]) {
+  fill: var(--danger, #d44333);
+  stroke: var(--);
+}
+:host(.danger) .readonly .yoo-icon:not([name=help]) {
+  fill: var(--danger, #d44333);
+  stroke: var(--);
+}
+
 :host(.app-color) .outer-container yoo-icon:not([name=help]) {
   fill: var(--app-color, #5a30f4);
   stroke: var(--);

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

@@ -1193,6 +1193,43 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .no-scroll {
   overflow: hidden;
 }
+:host .field-invalids-banner {
+  background: var(--stable-ultralight, #fafafa);
+}
+:host .field-invalids-banner yoo-icon[name=cross] {
+  cursor: pointer;
+}
+:host .field-invalids {
+  display: flex;
+  flex-direction: column;
+  grid-gap: var(--spacing-08, 0.5rem);
+  margin-top: var(--spacing-08, 0.5rem);
+  padding: var(--spacing-08, 0.5rem);
+  background: var(--stable-10, rgba(173, 173, 173, 0.1));
+  border-radius: var(--spacing-08, 0.5rem);
+}
+:host .field-invalids .field-invalid {
+  display: flex;
+  flex-direction: column;
+  grid-gap: var(--spacing-08, 0.5rem);
+  padding: var(--spacing-08, 0.5rem);
+  background-color: var(--danger-10, rgba(212, 67, 51, 0.1));
+  border-radius: var(--border-radius-04, 0.25rem);
+}
+:host .field-invalids .field-invalid .field-invalid-header {
+  display: flex;
+  justify-content: space-between;
+}
+:host .field-invalids .field-invalid .field-invalid-header .title {
+  display: flex;
+  align-items: center;
+  color: var(--danger, #d44333);
+  font-size: var(--font-size-12, 0.75rem);
+  text-transform: uppercase;
+}
+:host .field-invalids .field-invalid .field-invalid-header .title yoo-icon {
+  margin-right: var(--spacing-08, 0.5rem);
+}
 @keyframes fadeIn {
   from {
     opacity: 0;
@@ -1239,14 +1276,14 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .answer-explanation-separator {
   height: 0.0625rem;
   margin: var(--spacing-16, 1rem) 0;
-  background: var(--stable-light, #f1f1f1);
+  background: var(--stable-ultralight, #fafafa);
   border: 0;
 }
 :host .answer-separator {
   width: 100%;
   height: 0.5rem;
   margin: var(--spacing-24, 1.5rem) 0;
-  background: var(--stable-light-40, rgba(241, 241, 241, 0.4));
+  background: var(--stable-ultralight, #fafafa);
   border: 0;
 }
 :host .info-header {
@@ -2048,7 +2085,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host(.mission-form:not(.readonly)) .field-placeholder:not(.readonly):not(.invisible) yoo-form-input-container,
 :host(.workflow-form:not(.readonly)) .field-placeholder:not(.readonly):not(.invisible) yoo-form-input-container,
 :host(.kanban-form:not(.readonly)) .field-placeholder:not(.readonly):not(.invisible) yoo-form-input-container {
+  margin: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
   padding: var(--spacing-16, 1rem);
+  border-radius: var(--spacing-08, 0.5rem);
 }
 :host(.mission-form:not(.readonly)) .field-placeholder:not(.invisible).readonly.last,
 :host(.workflow-form:not(.readonly)) .field-placeholder:not(.invisible).readonly.last,
@@ -2061,10 +2100,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   background-color: transparent;
 }
 
-:host(.mission-form) .field-placeholder:not(.invisible) {
-  border-bottom: var(--border-width-01, 0.0625rem) solid var(--stable-alt-20, rgba(208, 208, 208, 0.2));
-}
-
 :host(.mission-form.pdf) .main-container {
   flex: initial;
   overflow-y: initial;
@@ -2300,7 +2335,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin: 0;
 }
 
-:host(.web:not(.inline):not(.inline-row):not(.force-mobile):not(.mission-results)) .inputs-container-parent:not(.gridstack) {
+:host(.web:not(.inline):not(.inline-row):not(.force-mobile):not(.mission-results):not(.lesson-detail.readonly)) .inputs-container-parent:not(.gridstack) {
   padding: 0 var(--spacing-16, 1rem);
 }
 
@@ -2403,6 +2438,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   justify-content: center;
 }
 :host(.web:not(.lesson-detail):not(.lesson-form):not(.lesson-question-result):not(.lesson-live-preview):not(.form-creator-preview):not(.inline):not(.grid-cell):not(.quickview):not(.profile)) .inputs-container:not(.gridstack) {
+  padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
 :host(.web:not(.lesson-detail):not(.lesson-form):not(.lesson-question-result):not(.lesson-live-preview):not(.form-creator-preview):not(.inline):not(.grid-cell):not(.quickview):not(.profile)) .inputs-container.gridstack {
@@ -2852,7 +2888,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   padding-bottom: 0.5rem;
 }
 
-:host(.mobile.lesson-detail) .field-placeholder {
+:host(.mobile.lesson-detail) .field-placeholder,
+:host(.mobile.lesson-question-result.readonly) .field-placeholder {
   margin: 0 var(--spacing-16, 1rem);
 }
 
@@ -2874,6 +2911,11 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   width: -webkit-fill-available;
 }
 
+:host(.lesson-detail.readonly),
+:host(.lesson-question-result.readonly) {
+  --inputs-margin: 0;
+}
+
 :host(.in-card.secondary) {
   margin-top: var(--spacing-08, 0.5rem);
   padding: 0;
@@ -2925,4 +2967,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
     page-break-before: avoid;
     page-break-inside: auto;
   }
+}
+:host(.readonly) .inputs-container {
+  padding-top: var(--spacing-08, 0.5rem);
+  padding-bottom: var(--spacing-08, 0.5rem);
 }