@yoobic/yobi 8.5.0-64 → 8.5.0-65

package/dist/cjs/yoo-entity-query-builder.cjs.entry.js

@@ -105,14 +105,8 @@ const YooEntityQueryBuilderComponent = class {
     return ((_b = (_a = this.values) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.length) > 0 || ((_d = (_c = this.values) === null || _c === void 0 ? void 0 : _c.advancedFilters) === null || _d === void 0 ? void 0 : _d.length) > 0;
   }
   getActiveFiltersCount() {
-    var _a, _b, _c, _d;
-    if (((_b = (_a = this.values) === null || _a === void 0 ? void 0 : _a.advancedFilters) === null || _b === void 0 ? void 0 : _b.length) > 0) {
-      return lodash.sum(this.values.advancedFilters.map((f) => (f === null || f === void 0 ? void 0 : f.length) || 0));
-    }
-    else if (((_d = (_c = this.values) === null || _c === void 0 ? void 0 : _c.filters) === null || _d === void 0 ? void 0 : _d.length) > 0) {
-      return this.values.filters.length;
-    }
-    return 0;
+    const { advancedFilters, filters } = this.values || {};
+    return ((advancedFilters === null || advancedFilters === void 0 ? void 0 : advancedFilters.length) ? lodash.sum(advancedFilters.map((filter) => (filter === null || filter === void 0 ? void 0 : filter.length) || 0)) : filters === null || filters === void 0 ? void 0 : filters.length) || 0;
   }
   isFilterField(f) {
     return filtersHelpers.filterIsRadio(f) || filtersHelpers.filterIsAutocomplete(f) || filtersHelpers.filterIsSegement(f) || filtersHelpers.filterIsAutocompleteLocal(f) || filtersHelpers.filterIsBoolean(f) || filtersHelpers.filterIsDate(f) || filtersHelpers.filterIsText(f) || filtersHelpers.filterIsNumber(f);
@@ -187,6 +181,7 @@ const YooEntityQueryBuilderComponent = class {
     if (values.length > 0 || (values && field.type === index$1.FormFieldType.missionfield)) {
       this.values.filters.push(filtersHelpers.filterFromFormField(field, values, this.filterAutocompleteOperator));
     }
+    this.values = lodash.cloneDeep(this.values);
     this.onEmitValues();
   }
   onAutocompleteChangeAdvanced(ev, index) {
@@ -322,7 +317,7 @@ const YooEntityQueryBuilderComponent = class {
   }
   renderFiltersHeader() {
     const count = this.getActiveFiltersCount();
-    return index.h("div", { class: "filters-header" }, index.h("div", { class: "counter" }, index$2.translate('YOOBICFILTERSAPPLIED', { smart_count: count })), index.h("div", { class: "clear-all" }, count > 0 && index.h("yoo-button", { size: this.size, color: count > 0 ? 'app-color' : 'stable', fill: "transparent", onClick: () => this.onClear() }, index$2.translate('CLEARALL'))));
+    return index.h("div", { class: "filters-header" }, index.h("div", { class: "counter" }, index$2.translate('YOOBICFILTERSAPPLIED', { smart_count: count })), index.h("div", { class: "clear-all" }, index.h("yoo-button", { size: this.size, color: "app-color", disabled: !count, fill: "transparent", onClick: () => this.onClear() }, index$2.translate('CLEARALL'))));
   }
   renderFilters() {
     var _a, _b;
@@ -406,7 +401,7 @@ const YooEntityQueryBuilderComponent = class {
     const count = this.getActiveFiltersCount();
     return [
       (customViewsButtons === null || customViewsButtons === void 0 ? void 0 : customViewsButtons.length) > 0 && (index.h("yoo-context-menu", { contentButtons: customViewsButtons, placement: "right", class: "customview-menu width-unset" }, index.h("div", { class: "header width-auto" }, index.h("div", { class: { title: true, 'app-color': !!this.customView } }, index$2.translate('SAVEDFILTERS')), index.h("yoo-icon", { name: "right-web", color: "stable", size: "medium" })))),
-      index.h("div", { class: "header" }, index.h("div", { class: "title" }, index$2.translate('FILTERS', { count })), index.h("yoo-button", { size: this.size, color: count > 0 ? 'app-color' : 'stable', fill: "transparent", disabled: !this.isDirty && !(count > 0), onClick: () => this.onClear() }, index$2.translate('CLEARALL')))
+      index.h("div", { class: "header" }, index.h("div", { class: "title" }, index$2.translate('FILTERS', { count })), index.h("yoo-button", { size: this.size, color: "app-color", fill: "transparent", disabled: !count, onClick: () => this.onClear() }, index$2.translate('CLEARALL')))
     ];
   }
   renderDialogFooter() {

package/dist/cjs/yoo-form-autocomplete-dialog.cjs.entry.js

@@ -280,6 +280,7 @@ const YooFormAutocompleteDialogComponent = class {
   }
   onFilterRadioToggled(ev) {
     ev.stopPropagation();
+    this.selectedFilterOperator = ev.detail;
     this.filterRadioToggled.emit(ev.detail);
   }
   getEntityType() {

package/dist/cjs/yoo-form-autocomplete.cjs.entry.js

@@ -225,6 +225,7 @@ const YooFormAutocompleteComponent = class {
   }
   componentWillLoad() {
     var _a, _b;
+    this.isFilter && !this.filterOperator && this.selectFilterOperator(index$2.FormFilterAutocompleteOperator.is);
     this.updateSelection(true);
     if (this.showDropdownOnLoad) {
       this.showDropdownContent = this.showDropdownOnLoad;
@@ -650,7 +651,7 @@ const YooFormAutocompleteComponent = class {
     });
     this.dialog.addEventListener('filterRadioToggled', (ev) => {
       ev.stopPropagation();
-      this.onFilterRadioToggled(ev.detail);
+      this.selectFilterOperator(ev.detail);
     });
     let modalOptions = { half: !index$1.isWeb(this.host) };
     if (isExpanding) {
@@ -704,7 +705,8 @@ const YooFormAutocompleteComponent = class {
     this.currentSelectedTags = ev.detail;
     await this.fetch();
   }
-  onFilterRadioToggled(operator) {
+  selectFilterOperator(operator) {
+    this.filterOperator = operator;
     this.extraDataChanged.emit(operator);
   }
   async onFileChanges(ev) {
@@ -913,7 +915,6 @@ const YooFormAutocompleteComponent = class {
     var _a, _b, _c, _d, _e, _f, _g;
     const isPopulatedQuery = lodash.isArray(this.value) ? ((_a = this.value.find((v) => v === null || v === void 0 ? void 0 : v.total)) === null || _a === void 0 ? void 0 : _a.total) > 0 : ((_b = this.value) === null || _b === void 0 ? void 0 : _b.total) > 0;
     const valueTotal = lodash.isArray(this.value) ? (_c = this.value.find((v) => v === null || v === void 0 ? void 0 : v.total)) === null || _c === void 0 ? void 0 : _c.total : (_d = this.value) === null || _d === void 0 ? void 0 : _d.total;
-    const selectedOperator = this.filterOperator || 'in';
     if (this.idOnly && ((_e = this.value) === null || _e === void 0 ? void 0 : _e.length) > 0 && lodash.isString(this.value[0]) && !this.idOnlyInitialSelection) {
       this.forceSelectedContentIdOnlyReload = true;
     }
@@ -925,7 +926,7 @@ const YooFormAutocompleteComponent = class {
     if (this.entityType === 'groups' && !this.returnQuery) {
       groupSelection = (_f = this.selection) === null || _f === void 0 ? void 0 : _f.filter((value) => { var _a, _b; return (value === null || value === void 0 ? void 0 : value.title) ? !((_a = value === null || value === void 0 ? void 0 : value.title) === null || _a === void 0 ? void 0 : _a.match(index$1.MONGODB_ID_REGEX)) : (value === null || value === void 0 ? void 0 : value._id) && !(value === null || value === void 0 ? void 0 : value.title) ? !((_b = value === null || value === void 0 ? void 0 : value._id) === null || _b === void 0 ? void 0 : _b.match(index$1.MONGODB_ID_REGEX)) : !(value === null || value === void 0 ? void 0 : value.match(index$1.MONGODB_ID_REGEX)); });
     }
-    return (index.h("div", { class: { 'entity-content': true, selected: true, 'icon-prefix': hasIconPrefix } }, `${this.isFilter ? selectedOperator : ''} ${this.entityType !== 'groups' ? (_g = this.selection) === null || _g === void 0 ? void 0 : _g.length : groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.length} ${index$1.translate(this.setPrefixedEntityType(entityType).toUpperCase())} ${index$1.translate(this.multipleSelectionSuffix)}`));
+    return (index.h("div", { class: { 'entity-content': true, selected: true, 'icon-prefix': hasIconPrefix } }, `${this.isFilter ? this.filterOperator : ''} ${this.entityType !== 'groups' ? (_g = this.selection) === null || _g === void 0 ? void 0 : _g.length : groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.length} ${index$1.translate(this.setPrefixedEntityType(entityType).toUpperCase())} ${index$1.translate(this.multipleSelectionSuffix)}`));
   }
   renderUnselectedEntites(entityType, hasIconPrefix) {
     const filesPlaceholder = index$1.isWeb(this.host) ? index$1.translate('FORMFIELDDEFINITIONDOCUMENTPLACEHOLDER') : index$1.translate('SELECTFILES');
@@ -943,7 +944,6 @@ const YooFormAutocompleteComponent = class {
   }
   renderEntities(hasIconPrefix, cardTagSingle = false) {
     var _a;
-    const selectedOperator = this.filterOperator || 'in';
     return (index.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;
       let entitySelection = selection;
@@ -965,7 +965,7 @@ const YooFormAutocompleteComponent = class {
       }
       const title = (entitySelection === null || entitySelection === void 0 ? void 0 : entitySelection.title) || entitySelection;
       return (entitySelection && [
-        index.h("div", { class: { 'single-entity-container': this.isFilter } }, index.h("div", { class: "operator-container" }, `${this.isFilter ? selectedOperator : ''}`), index.h("yoo-entity", { class: {
+        index.h("div", { class: { 'single-entity-container': this.isFilter } }, index.h("div", { class: "operator-container" }, `${this.isFilter ? this.filterOperator : ''}`), index.h("yoo-entity", { class: {
             'autocomplete autocomplete-selected': true,
             last: i === this.selection.length - 1,
             bold: this.color === 'transparent',
@@ -1010,7 +1010,7 @@ const YooFormAutocompleteComponent = class {
         await this.fetch(ev.detail);
       }, onFieldFetchData: (ev) => this.onFetchFieldFilterData(ev), onSortsAndFiltersChange: (ev) => this.onSortsAndFiltersChange(ev), onCurrentPageChanged: (ev) => this.onCurrentPageChange(ev === null || ev === void 0 ? void 0 : ev.detail), hideHeader: index$1.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 : [].concat(index$1.isPresent(this.value) ? 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
         ? index$1.translate(this.isLocal ? 'AUTOCOMPLETESEARCHADD' : 'SEARCHORADD')
-        : index$1.translate('SEARCH'), tags: this.tags, forceHideSearch: this.forceHideSearch, maxSelectionNumber: this.max, customModel: this.customModel, addNewTagText: this.entityType === 'emails' ? index$1.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.updateSearchedItemSelection(ev), onValidityChanged: (ev) => this.onValidityChanged(ev), infiniteScrollDisabled: this.infiniteScrollDisabled }))))))));
+        : index$1.translate('SEARCH'), tags: this.tags, forceHideSearch: this.forceHideSearch, maxSelectionNumber: this.max, customModel: this.customModel, addNewTagText: this.entityType === 'emails' ? index$1.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.selectFilterOperator(ev.detail), onMaxPageCountChanged: (ev) => (this.maxPage = Math.max(ev.detail, this.maxPage)), onSearchedItemSelected: (ev) => this.updateSearchedItemSelection(ev), onValidityChanged: (ev) => this.onValidityChanged(ev), infiniteScrollDisabled: this.infiniteScrollDisabled }))))))));
   }
   renderReadonly() {
     if (this.selection && this.selection.length > 0) {

package/dist/cjs/yoo-grid.cjs.entry.js

@@ -172,16 +172,6 @@ const YooGridComponent = class {
     }, 500);
     this.itemsHaveBeenReordered = false;
     this.filtersUpdated = false;
-    this.filterOptions = [
-      {
-        type: index$2.FormFilterAutocompleteOperator.is,
-        active: true
-      },
-      {
-        type: index$2.FormFilterAutocompleteOperator.isNot,
-        active: false
-      }
-    ];
     this.renderVirtualItem = (item, index) => {
       if (this.hasSecondaryActions || (this.keepSelection && index$1.isWeb(this.host))) {
         if (this.showActionsAsMore) {
@@ -592,6 +582,7 @@ const YooGridComponent = class {
     if (this.isFormField) {
       formInputHelpers.setValidator(this);
     }
+    this.showFormRadio && !this.selectedFilterOperator && this.selectFilterOperator(index$2.FormFilterAutocompleteOperator.is);
     this.isSelectionMode = this.multiple && !this.blockSelectionMode;
     this.areItemsDisabled = (_a = this.extraClass) === null || _a === void 0 ? void 0 : _a.includes('item-disabled');
     this.searchText = this.search || '';
@@ -1477,18 +1468,6 @@ const YooGridComponent = class {
     }
     return false;
   }
-  onToggleFormRadio(ev) {
-    var _a;
-    const selectedOption = (_a = this.filterOptions) === null || _a === void 0 ? void 0 : _a.find((option) => (option === null || option === void 0 ? void 0 : option.type) === (ev === null || ev === void 0 ? void 0 : ev.detail));
-    if (selectedOption) {
-      selectedOption.active = true;
-    }
-    if (!selectedOption) {
-      this.formRadioToggled.emit(null);
-      return;
-    }
-    this.formRadioToggled.emit(selectedOption.type);
-  }
   updateSelectAll(selectAll) {
     this.isSelectAll = selectAll;
     if (!this.isSelectAll && this.isAgGrid() && this.gridApi) {
@@ -1975,12 +1954,16 @@ const YooGridComponent = class {
     }
     return 0;
   }
+  selectFilterOperator(operator) {
+    this.selectedFilterOperator = operator;
+    this.formRadioToggled.emit(operator);
+  }
   renderDropdownFormRadio() {
-    var _a;
-    const formOptions = this.filterOptions.map((filterOption) => filterOption.type);
-    if (index$1.isWeb(this.host) && ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length)) {
-      return (index.h("div", { class: "form-radio-container" }, index.h("yoo-form-radio", { options: formOptions, flow: "column", size: "medium", value: this.selectedFilterOperator || formOptions[0], onInputChanged: (ev) => this.onToggleFormRadio(ev) }, formOptions.map((option, index$1) => (index.h("span", { slot: index$1.toString() }, option))))));
-    }
+    const operators = [index$2.FormFilterAutocompleteOperator.is, index$2.FormFilterAutocompleteOperator.isNot];
+    return (index.h("div", { class: "form-radio-container" }, index.h("yoo-form-radio", { options: operators, flow: "column", size: "medium", value: this.selectedFilterOperator, onInputChanged: (event) => {
+        event.stopPropagation();
+        this.selectFilterOperator(event.detail);
+      } }, operators.map((operator, index$1) => index.h("span", { slot: index$1.toString() }, operator)))));
   }
   renderSearchInput() {
     var _a, _b, _c;
@@ -3145,14 +3128,14 @@ const YooGridComponent = class {
     return (this.mainProgressValue >= 0 && (index.h("div", { class: "grid-progress" }, index.h("yoo-progress-bar", { animated: this.animated, metric: "percentage", percentValueColorScheme: false, value: this.total > 0 ? (this.mainProgressValue * 100) / this.total : 0 }))));
   }
   renderBase() {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     const renderEntityTags = (!index$1.isWeb(this.host) || (this.gridIsExpanded && (((_a = this.tags) === null || _a === void 0 ? void 0 : _a.length) > 0 || ((_c = (_b = this.model) === null || _b === void 0 ? void 0 : _b.fields) === null || _c === void 0 ? void 0 : _c.length) > 0))) &&
       this.isTagsVisible() &&
       ((this.items && this.items.length > 0) || this.hasSortsAndFilters() || this.alwaysRenderTagsAndFilters() || this.isAgGrid()) &&
       !this.host.classList.contains('learning-manager') && !this.host.classList.contains('course-info');
     return [
       this.showProgress && this.progressHandler && this.renderProgress(),
-      index.h("div", { ref: (el) => (this.containerBase = el), class: this.getClassList() }, this.showAutocompleteHeader ? (index.h("div", { class: { 'dropdown-header': true, 'no-tags': !renderEntityTags || ((_d = this.tags) === null || _d === void 0 ? void 0 : _d.length) === 0, 'form-radio-operators': this.showFormRadio } }, this.showFormRadio && this.renderDropdownFormRadio(), this.renderHeader(renderEntityTags), this.renderDynamicOrderingHeader(), this.renderFilesIcons())) : ([this.renderHeader(renderEntityTags), this.renderFilesIcons()]), this.isKanban() && index.h("slot", { name: "header" }), (((_e = this.columns) === null || _e === void 0 ? void 0 : _e.length) || this.mainColumnHeader) && !this.isAgGrid() && !this.isCalendar() && index$1.isWeb(this.host) && !this.isMap() ? (index.h("div", { class: "horizontal-scroll-parent" }, index.h("div", { class: "horizontal-scroll", ref: (el) => (this.horizontalScroll = el) }, index.h("div", { class: { 'horizontal-content': true, 'with-header': this.hasColumnsHeader() } }, this.renderColumnsHeader(), this.renderBaseContent())))) : (this.renderBaseContent())),
+      index.h("div", { ref: (el) => (this.containerBase = el), class: this.getClassList() }, this.showAutocompleteHeader ? (index.h("div", { class: { 'dropdown-header': true, 'no-tags': !renderEntityTags || ((_d = this.tags) === null || _d === void 0 ? void 0 : _d.length) === 0, 'form-radio-operators': this.showFormRadio } }, this.showFormRadio && index$1.isWeb(this.host) && !!((_e = this.items) === null || _e === void 0 ? void 0 : _e.length) && this.renderDropdownFormRadio(), this.renderHeader(renderEntityTags), this.renderDynamicOrderingHeader(), this.renderFilesIcons())) : ([this.renderHeader(renderEntityTags), this.renderFilesIcons()]), this.isKanban() && index.h("slot", { name: "header" }), (((_f = this.columns) === null || _f === void 0 ? void 0 : _f.length) || this.mainColumnHeader) && !this.isAgGrid() && !this.isCalendar() && index$1.isWeb(this.host) && !this.isMap() ? (index.h("div", { class: "horizontal-scroll-parent" }, index.h("div", { class: "horizontal-scroll", ref: (el) => (this.horizontalScroll = el) }, index.h("div", { class: { 'horizontal-content': true, 'with-header': this.hasColumnsHeader() } }, this.renderColumnsHeader(), this.renderBaseContent())))) : (this.renderBaseContent())),
       index$1.isWeb(this.host) && this.showGlobalActions && this.isSelectionMode && this.renderGlobalActions()
     ];
   }

package/dist/collection/components/entities/entity-query-builder/entity-query-builder.js

@@ -86,14 +86,8 @@ export class YooEntityQueryBuilderComponent {
     return ((_b = (_a = this.values) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.length) > 0 || ((_d = (_c = this.values) === null || _c === void 0 ? void 0 : _c.advancedFilters) === null || _d === void 0 ? void 0 : _d.length) > 0;
   }
   getActiveFiltersCount() {
-    var _a, _b, _c, _d;
-    if (((_b = (_a = this.values) === null || _a === void 0 ? void 0 : _a.advancedFilters) === null || _b === void 0 ? void 0 : _b.length) > 0) {
-      return sum(this.values.advancedFilters.map((f) => (f === null || f === void 0 ? void 0 : f.length) || 0));
-    }
-    else if (((_d = (_c = this.values) === null || _c === void 0 ? void 0 : _c.filters) === null || _d === void 0 ? void 0 : _d.length) > 0) {
-      return this.values.filters.length;
-    }
-    return 0;
+    const { advancedFilters, filters } = this.values || {};
+    return ((advancedFilters === null || advancedFilters === void 0 ? void 0 : advancedFilters.length) ? sum(advancedFilters.map((filter) => (filter === null || filter === void 0 ? void 0 : filter.length) || 0)) : filters === null || filters === void 0 ? void 0 : filters.length) || 0;
   }
   isFilterField(f) {
     return filterIsRadio(f) || filterIsAutocomplete(f) || filterIsSegement(f) || filterIsAutocompleteLocal(f) || filterIsBoolean(f) || filterIsDate(f) || filterIsText(f) || filterIsNumber(f);
@@ -168,6 +162,7 @@ export class YooEntityQueryBuilderComponent {
     if (values.length > 0 || (values && field.type === FormFieldType.missionfield)) {
       this.values.filters.push(filterFromFormField(field, values, this.filterAutocompleteOperator));
     }
+    this.values = cloneDeep(this.values);
     this.onEmitValues();
   }
   onAutocompleteChangeAdvanced(ev, index) {
@@ -303,7 +298,7 @@ export class YooEntityQueryBuilderComponent {
   }
   renderFiltersHeader() {
     const count = this.getActiveFiltersCount();
-    return h("div", { class: "filters-header" }, h("div", { class: "counter" }, translate('YOOBICFILTERSAPPLIED', { smart_count: count })), h("div", { class: "clear-all" }, count > 0 && h("yoo-button", { size: this.size, color: count > 0 ? 'app-color' : 'stable', fill: "transparent", onClick: () => this.onClear() }, translate('CLEARALL'))));
+    return h("div", { class: "filters-header" }, h("div", { class: "counter" }, translate('YOOBICFILTERSAPPLIED', { smart_count: count })), h("div", { class: "clear-all" }, h("yoo-button", { size: this.size, color: "app-color", disabled: !count, fill: "transparent", onClick: () => this.onClear() }, translate('CLEARALL'))));
   }
   renderFilters() {
     var _a, _b;
@@ -387,7 +382,7 @@ export class YooEntityQueryBuilderComponent {
     const count = this.getActiveFiltersCount();
     return [
       (customViewsButtons === null || customViewsButtons === void 0 ? void 0 : customViewsButtons.length) > 0 && (h("yoo-context-menu", { contentButtons: customViewsButtons, placement: "right", class: "customview-menu width-unset" }, h("div", { class: "header width-auto" }, h("div", { class: { title: true, 'app-color': !!this.customView } }, translate('SAVEDFILTERS')), h("yoo-icon", { name: "right-web", color: "stable", size: "medium" })))),
-      h("div", { class: "header" }, h("div", { class: "title" }, translate('FILTERS', { count })), h("yoo-button", { size: this.size, color: count > 0 ? 'app-color' : 'stable', fill: "transparent", disabled: !this.isDirty && !(count > 0), onClick: () => this.onClear() }, translate('CLEARALL')))
+      h("div", { class: "header" }, h("div", { class: "title" }, translate('FILTERS', { count })), h("yoo-button", { size: this.size, color: "app-color", fill: "transparent", disabled: !count, onClick: () => this.onClear() }, translate('CLEARALL')))
     ];
   }
   renderDialogFooter() {

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

@@ -1,4 +1,4 @@
-import { FormFieldType } from '@shared/interfaces';
+import { FormFieldType, FormFilterAutocompleteOperator } from '@shared/interfaces';
 import { findParent, getAsyncExtraData, getModalAnimation, getRandomFileName, groupsResolver, isImage, isIonic, isNullOrUndefined, isPresent, isValid, isWeb, MONGODB_ID_REGEX, resizeImage, showAlert, showModal, translate, translateMulti } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 import { compact, isArray, isNumber, isString, uniq } from 'lodash-es';
@@ -204,6 +204,7 @@ export class YooFormAutocompleteComponent {
   }
   componentWillLoad() {
     var _a, _b;
+    this.isFilter && !this.filterOperator && this.selectFilterOperator(FormFilterAutocompleteOperator.is);
     this.updateSelection(true);
     if (this.showDropdownOnLoad) {
       this.showDropdownContent = this.showDropdownOnLoad;
@@ -629,7 +630,7 @@ export class YooFormAutocompleteComponent {
     });
     this.dialog.addEventListener('filterRadioToggled', (ev) => {
       ev.stopPropagation();
-      this.onFilterRadioToggled(ev.detail);
+      this.selectFilterOperator(ev.detail);
     });
     let modalOptions = { half: !isWeb(this.host) };
     if (isExpanding) {
@@ -683,7 +684,8 @@ export class YooFormAutocompleteComponent {
     this.currentSelectedTags = ev.detail;
     await this.fetch();
   }
-  onFilterRadioToggled(operator) {
+  selectFilterOperator(operator) {
+    this.filterOperator = operator;
     this.extraDataChanged.emit(operator);
   }
   async onFileChanges(ev) {
@@ -892,7 +894,6 @@ export class YooFormAutocompleteComponent {
     var _a, _b, _c, _d, _e, _f, _g;
     const isPopulatedQuery = isArray(this.value) ? ((_a = this.value.find((v) => v === null || v === void 0 ? void 0 : v.total)) === null || _a === void 0 ? void 0 : _a.total) > 0 : ((_b = this.value) === null || _b === void 0 ? void 0 : _b.total) > 0;
     const valueTotal = isArray(this.value) ? (_c = this.value.find((v) => v === null || v === void 0 ? void 0 : v.total)) === null || _c === void 0 ? void 0 : _c.total : (_d = this.value) === null || _d === void 0 ? void 0 : _d.total;
-    const selectedOperator = this.filterOperator || 'in';
     if (this.idOnly && ((_e = this.value) === null || _e === void 0 ? void 0 : _e.length) > 0 && isString(this.value[0]) && !this.idOnlyInitialSelection) {
       this.forceSelectedContentIdOnlyReload = true;
     }
@@ -904,7 +905,7 @@ export class YooFormAutocompleteComponent {
     if (this.entityType === 'groups' && !this.returnQuery) {
       groupSelection = (_f = this.selection) === null || _f === void 0 ? void 0 : _f.filter((value) => { var _a, _b; return (value === null || value === void 0 ? void 0 : value.title) ? !((_a = value === null || value === void 0 ? void 0 : value.title) === null || _a === void 0 ? void 0 : _a.match(MONGODB_ID_REGEX)) : (value === null || value === void 0 ? void 0 : value._id) && !(value === null || value === void 0 ? void 0 : value.title) ? !((_b = value === null || value === void 0 ? void 0 : value._id) === null || _b === void 0 ? void 0 : _b.match(MONGODB_ID_REGEX)) : !(value === null || value === void 0 ? void 0 : value.match(MONGODB_ID_REGEX)); });
     }
-    return (h("div", { class: { 'entity-content': true, selected: true, 'icon-prefix': hasIconPrefix } }, `${this.isFilter ? selectedOperator : ''} ${this.entityType !== 'groups' ? (_g = this.selection) === null || _g === void 0 ? void 0 : _g.length : groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.length} ${translate(this.setPrefixedEntityType(entityType).toUpperCase())} ${translate(this.multipleSelectionSuffix)}`));
+    return (h("div", { class: { 'entity-content': true, selected: true, 'icon-prefix': hasIconPrefix } }, `${this.isFilter ? this.filterOperator : ''} ${this.entityType !== 'groups' ? (_g = this.selection) === null || _g === void 0 ? void 0 : _g.length : groupSelection === null || groupSelection === void 0 ? void 0 : groupSelection.length} ${translate(this.setPrefixedEntityType(entityType).toUpperCase())} ${translate(this.multipleSelectionSuffix)}`));
   }
   renderUnselectedEntites(entityType, hasIconPrefix) {
     const filesPlaceholder = isWeb(this.host) ? translate('FORMFIELDDEFINITIONDOCUMENTPLACEHOLDER') : translate('SELECTFILES');
@@ -922,7 +923,6 @@ export class YooFormAutocompleteComponent {
   }
   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 } }, (_a = this.selection) === null || _a === void 0 ? void 0 : _a.map((selection, i) => {
       var _a, _b;
       let entitySelection = selection;
@@ -944,7 +944,7 @@ export class YooFormAutocompleteComponent {
       }
       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: {
+        h("div", { class: { 'single-entity-container': this.isFilter } }, h("div", { class: "operator-container" }, `${this.isFilter ? this.filterOperator : ''}`), h("yoo-entity", { class: {
             'autocomplete autocomplete-selected': true,
             last: i === this.selection.length - 1,
             bold: this.color === 'transparent',
@@ -989,7 +989,7 @@ export class YooFormAutocompleteComponent {
         await this.fetch(ev.detail);
       }, 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 : [].concat(isPresent(this.value) ? 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.updateSearchedItemSelection(ev), onValidityChanged: (ev) => this.onValidityChanged(ev), infiniteScrollDisabled: this.infiniteScrollDisabled }))))))));
+        : 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.selectFilterOperator(ev.detail), onMaxPageCountChanged: (ev) => (this.maxPage = Math.max(ev.detail, this.maxPage)), onSearchedItemSelected: (ev) => this.updateSearchedItemSelection(ev), onValidityChanged: (ev) => this.onValidityChanged(ev), infiniteScrollDisabled: this.infiniteScrollDisabled }))))))));
   }
   renderReadonly() {
     if (this.selection && this.selection.length > 0) {
@@ -1900,7 +1900,7 @@ export class YooFormAutocompleteComponent {
       },
       "filterOperator": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "FormFilterAutocompleteOperator",
           "resolved": "FormFilterAutocompleteOperator.is | FormFilterAutocompleteOperator.isNot",

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

@@ -257,6 +257,7 @@ export class YooFormAutocompleteDialogComponent {
   }
   onFilterRadioToggled(ev) {
     ev.stopPropagation();
+    this.selectedFilterOperator = ev.detail;
     this.filterRadioToggled.emit(ev.detail);
   }
   getEntityType() {
@@ -667,14 +668,19 @@ export class YooFormAutocompleteDialogComponent {
       },
       "selectedFilterOperator": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "FormFilterAutocompleteOperator",
+          "resolved": "FormFilterAutocompleteOperator.is | FormFilterAutocompleteOperator.isNot",
+          "references": {
+            "FormFilterAutocompleteOperator": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
+          }
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": ""

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

@@ -90,16 +90,6 @@ export class YooGridComponent {
     }, 500);
     this.itemsHaveBeenReordered = false;
     this.filtersUpdated = false;
-    this.filterOptions = [
-      {
-        type: FormFilterAutocompleteOperator.is,
-        active: true
-      },
-      {
-        type: FormFilterAutocompleteOperator.isNot,
-        active: false
-      }
-    ];
     this.renderVirtualItem = (item, index) => {
       if (this.hasSecondaryActions || (this.keepSelection && isWeb(this.host))) {
         if (this.showActionsAsMore) {
@@ -510,6 +500,7 @@ export class YooGridComponent {
     if (this.isFormField) {
       setValidator(this);
     }
+    this.showFormRadio && !this.selectedFilterOperator && this.selectFilterOperator(FormFilterAutocompleteOperator.is);
     this.isSelectionMode = this.multiple && !this.blockSelectionMode;
     this.areItemsDisabled = (_a = this.extraClass) === null || _a === void 0 ? void 0 : _a.includes('item-disabled');
     this.searchText = this.search || '';
@@ -1395,18 +1386,6 @@ export class YooGridComponent {
     }
     return false;
   }
-  onToggleFormRadio(ev) {
-    var _a;
-    const selectedOption = (_a = this.filterOptions) === null || _a === void 0 ? void 0 : _a.find((option) => (option === null || option === void 0 ? void 0 : option.type) === (ev === null || ev === void 0 ? void 0 : ev.detail));
-    if (selectedOption) {
-      selectedOption.active = true;
-    }
-    if (!selectedOption) {
-      this.formRadioToggled.emit(null);
-      return;
-    }
-    this.formRadioToggled.emit(selectedOption.type);
-  }
   updateSelectAll(selectAll) {
     this.isSelectAll = selectAll;
     if (!this.isSelectAll && this.isAgGrid() && this.gridApi) {
@@ -1893,12 +1872,16 @@ export class YooGridComponent {
     }
     return 0;
   }
+  selectFilterOperator(operator) {
+    this.selectedFilterOperator = operator;
+    this.formRadioToggled.emit(operator);
+  }
   renderDropdownFormRadio() {
-    var _a;
-    const formOptions = this.filterOptions.map((filterOption) => filterOption.type);
-    if (isWeb(this.host) && ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length)) {
-      return (h("div", { class: "form-radio-container" }, h("yoo-form-radio", { options: formOptions, flow: "column", size: "medium", value: this.selectedFilterOperator || formOptions[0], onInputChanged: (ev) => this.onToggleFormRadio(ev) }, formOptions.map((option, index) => (h("span", { slot: index.toString() }, option))))));
-    }
+    const operators = [FormFilterAutocompleteOperator.is, FormFilterAutocompleteOperator.isNot];
+    return (h("div", { class: "form-radio-container" }, h("yoo-form-radio", { options: operators, flow: "column", size: "medium", value: this.selectedFilterOperator, onInputChanged: (event) => {
+        event.stopPropagation();
+        this.selectFilterOperator(event.detail);
+      } }, operators.map((operator, index) => h("span", { slot: index.toString() }, operator)))));
   }
   renderSearchInput() {
     var _a, _b, _c;
@@ -3063,14 +3046,14 @@ export class YooGridComponent {
     return (this.mainProgressValue >= 0 && (h("div", { class: "grid-progress" }, h("yoo-progress-bar", { animated: this.animated, metric: "percentage", percentValueColorScheme: false, value: this.total > 0 ? (this.mainProgressValue * 100) / this.total : 0 }))));
   }
   renderBase() {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     const renderEntityTags = (!isWeb(this.host) || (this.gridIsExpanded && (((_a = this.tags) === null || _a === void 0 ? void 0 : _a.length) > 0 || ((_c = (_b = this.model) === null || _b === void 0 ? void 0 : _b.fields) === null || _c === void 0 ? void 0 : _c.length) > 0))) &&
       this.isTagsVisible() &&
       ((this.items && this.items.length > 0) || this.hasSortsAndFilters() || this.alwaysRenderTagsAndFilters() || this.isAgGrid()) &&
       !this.host.classList.contains('learning-manager') && !this.host.classList.contains('course-info');
     return [
       this.showProgress && this.progressHandler && this.renderProgress(),
-      h("div", { ref: (el) => (this.containerBase = el), class: this.getClassList() }, this.showAutocompleteHeader ? (h("div", { class: { 'dropdown-header': true, 'no-tags': !renderEntityTags || ((_d = this.tags) === null || _d === void 0 ? void 0 : _d.length) === 0, 'form-radio-operators': this.showFormRadio } }, this.showFormRadio && this.renderDropdownFormRadio(), this.renderHeader(renderEntityTags), this.renderDynamicOrderingHeader(), this.renderFilesIcons())) : ([this.renderHeader(renderEntityTags), this.renderFilesIcons()]), this.isKanban() && h("slot", { name: "header" }), (((_e = this.columns) === null || _e === void 0 ? void 0 : _e.length) || this.mainColumnHeader) && !this.isAgGrid() && !this.isCalendar() && isWeb(this.host) && !this.isMap() ? (h("div", { class: "horizontal-scroll-parent" }, h("div", { class: "horizontal-scroll", ref: (el) => (this.horizontalScroll = el) }, h("div", { class: { 'horizontal-content': true, 'with-header': this.hasColumnsHeader() } }, this.renderColumnsHeader(), this.renderBaseContent())))) : (this.renderBaseContent())),
+      h("div", { ref: (el) => (this.containerBase = el), class: this.getClassList() }, this.showAutocompleteHeader ? (h("div", { class: { 'dropdown-header': true, 'no-tags': !renderEntityTags || ((_d = this.tags) === null || _d === void 0 ? void 0 : _d.length) === 0, 'form-radio-operators': this.showFormRadio } }, this.showFormRadio && isWeb(this.host) && !!((_e = this.items) === null || _e === void 0 ? void 0 : _e.length) && this.renderDropdownFormRadio(), this.renderHeader(renderEntityTags), this.renderDynamicOrderingHeader(), this.renderFilesIcons())) : ([this.renderHeader(renderEntityTags), this.renderFilesIcons()]), this.isKanban() && h("slot", { name: "header" }), (((_f = this.columns) === null || _f === void 0 ? void 0 : _f.length) || this.mainColumnHeader) && !this.isAgGrid() && !this.isCalendar() && isWeb(this.host) && !this.isMap() ? (h("div", { class: "horizontal-scroll-parent" }, h("div", { class: "horizontal-scroll", ref: (el) => (this.horizontalScroll = el) }, h("div", { class: { 'horizontal-content': true, 'with-header': this.hasColumnsHeader() } }, this.renderColumnsHeader(), this.renderBaseContent())))) : (this.renderBaseContent())),
       isWeb(this.host) && this.showGlobalActions && this.isSelectionMode && this.renderGlobalActions()
     ];
   }
@@ -3994,14 +3977,19 @@ export class YooGridComponent {
       },
       "selectedFilterOperator": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "FormFilterAutocompleteOperator",
+          "resolved": "FormFilterAutocompleteOperator.is | FormFilterAutocompleteOperator.isNot",
+          "references": {
+            "FormFilterAutocompleteOperator": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
+          }
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": ""

package/dist/collection/interfaces/ui/index.js

@@ -3,7 +3,6 @@ export * from './card-video.interface';
 export * from './draggable.interface';
 export * from './form-creator.interface';
 export * from './form-daterange.interface';
-export * from './form-filter.interface';
 export * from './form-reorder.interface';
 export * from './map.interface';
 export * from './modal.interface';