@yoobic/yobi 8.2.0-2 → 8.2.0-20

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

@@ -269,6 +269,7 @@ export class YooGridComponent {
       gridCurrentSearch === null || gridCurrentSearch === void 0 ? void 0 : gridCurrentSearch.datasourceSuccess(values);
     }
     this.itemList = this.items;
+    this.setFormFieldValue(); // once we get the total we can update the query to have the proper total
   }
   async getGridSelection() {
     var _a;
@@ -461,6 +462,33 @@ export class YooGridComponent {
       }
     }, 300);
   }
+  async updateTreePath(route, purge = true) {
+    if (this.isTree()) {
+      this.gridApi.refreshServerSideStore({ route, purge });
+    }
+  }
+  async expandTreePath(routes) {
+    var _a;
+    if (this.isTree() && routes.length > 0) {
+      if (((_a = this.gridApi.getSelectedNodes()) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+        this.gridApi.getSelectedNodes().forEach((node) => this.gridApi.deselectNode(node));
+      }
+      this.expandPath(routes[0], routes.length === 1);
+      await new Promise(resolve => setTimeout(resolve, 500));
+      routes.shift();
+      await this.expandTreePath(routes);
+    }
+  }
+  expandPath(route, last) {
+    const node = this.gridApi.getRowNode(route);
+    if (last && node) {
+      node.setSelected(true, true, true);
+      this.gridApi.ensureNodeVisible(node, 'middle');
+    }
+    else {
+      node === null || node === void 0 ? void 0 : node.setExpanded(true);
+    }
+  }
   async disconnect() {
     this.disconnected = true;
   }
@@ -488,6 +516,11 @@ export class YooGridComponent {
       this.slidesOptions.spaceBetween = 0;
       this.slidesOptions.slidesPerView = 'auto';
     }
+    if (this.displayType === 'card-cell' && this.direction === 'horizontal') {
+      this.slidesOptions.slidesPerView = 10;
+      this.slidesOptions.spaceBetween = 0;
+      this.slidesOptions.slidesPerView = 'auto';
+    }
     if (!isWeb(this.host)) {
       this.setDisplayIcon();
     }
@@ -707,7 +740,8 @@ export class YooGridComponent {
       });
     }
   }
-  updateGridConfig() {
+  async updateGridConfig() {
+    var _a;
     this.finalGridConfig = {
       ...this.gridConfig,
       treeData: this.isTree(),
@@ -719,16 +753,16 @@ export class YooGridComponent {
         return params.data[this.idAttributeName || '_id'];
       },
       onGridReady: (params) => {
-        var _a, _b;
+        var _a, _b, _c;
         this.gridApi = params.api;
         this.columnApi = params.columnApi;
-        if (this.gridState && this.gridState.columnState && this.gridState.columnState.length > 0 && !this.disconnected) {
+        if (((_b = (_a = this.gridState) === null || _a === void 0 ? void 0 : _a.columnState) === null || _b === void 0 ? void 0 : _b.length) > 0 && !this.disconnected) {
           this.columnApi.applyColumnState({ state: this.gridState.columnState, applyOrder: true });
         }
         if (this.gridApi.destroyCalled) {
           return;
         }
-        this.isEmptyAgGrid = !this.disconnected && ((_a = this.gridApi) === null || _a === void 0 ? void 0 : _a.getDisplayedRowCount()) <= 0;
+        // this.isEmptyAgGrid = !this.disconnected && this.gridApi?.getDisplayedRowCount() <= 0;
         if (!this.isLocal && !this.disconnected) {
           this.gridApi.setServerSideDatasource({
             getRows: (p) => {
@@ -801,13 +835,16 @@ export class YooGridComponent {
           });
         }
         else if (!this.disconnected) {
-          this.isEmptyAgGrid = !(((_b = this.items) === null || _b === void 0 ? void 0 : _b.length) > 0);
+          this.isEmptyAgGrid = !(((_c = this.items) === null || _c === void 0 ? void 0 : _c.length) > 0);
           this.gridApi.setRowData(this.items);
         }
       },
       onRowClicked: (event) => {
-        var _a, _b;
-        if (event.node && event.node.data && !this.disconnected && (((_b = (_a = this.gridApi) === null || _a === void 0 ? void 0 : _a.getEditingCells()) === null || _b === void 0 ? void 0 : _b.length) || 0) === 0 && !this.disableRowClick) {
+        var _a, _b, _c;
+        if (this.isReadonly) {
+          return;
+        }
+        if (((_a = event.node) === null || _a === void 0 ? void 0 : _a.data) && !this.disconnected && (((_c = (_b = this.gridApi) === null || _b === void 0 ? void 0 : _b.getEditingCells()) === null || _c === void 0 ? void 0 : _c.length) || 0) === 0 && !this.disableRowClick) {
           this.onItemSelect(event.node.data, false);
         }
       },
@@ -815,17 +852,26 @@ export class YooGridComponent {
         this.cellEdited.emit(params);
       },
       onSelectionChanged: (params) => {
-        if (this.disconnected) {
+        if (this.disconnected || this.isReadonly) {
           return;
         }
         if (!this.isSelectAll) {
-          this.selection = params.api.getSelectedRows();
+          this.selection = this.selection || [];
+          params.api.forEachNode((node) => {
+            const index = this.findIndex(node.data);
+            if (node.isSelected() === true && index < 0) {
+              this.selection.push(node.data);
+            }
+            else if (node.isSelected() !== true && index >= 0) {
+              this.selection.splice(index, 1);
+            }
+          });
           this.selected.emit(this.multiple ? this.selection : this.selection.length > 0 ? this.selection[0] : null);
         }
         else {
           this.selectionRemoved = [];
           params.api.forEachNode((node) => {
-            if (node.isSelected() === false) {
+            if (node.isSelected() === false && this.findIndex(node.data, true) < 0) {
               this.selectionRemoved.push(node.data);
             }
           });
@@ -835,7 +881,6 @@ export class YooGridComponent {
         this.setFormFieldValue();
       },
       onFirstDataRendered: () => {
-        // params
         setTimeout(() => {
           if (this.sizeColumnsToFit && !this.disconnected) {
             this.gridApi.sizeColumnsToFit();
@@ -850,7 +895,9 @@ export class YooGridComponent {
           return [];
         }
       },
-      isServerSideGroup: this.isTree() ? (item) => !(item && (item.isLeaf)) : null,
+      isServerSideGroup: this.isTree() ? (item) => {
+        return !(item === null || item === void 0 ? void 0 : item.isLeaf);
+      } : null,
       getServerSideGroupKey: this.isTree()
         ? (dataItem) => {
           return dataItem._id;
@@ -859,18 +906,23 @@ export class YooGridComponent {
     };
     if (this.isTree()) {
       this.finalGridConfig.groupDisplayType = 'custom';
-      // this.finalGridConfig.groupSuppressAutoColumn = true;
+      this.finalGridConfig.serverSideStoreType = 'full';
     }
     this.finalGridConfig.rowModelType = this.finalGridConfig.rowModelType || 'serverSide';
     if (this.gridDomLayout) {
       this.finalGridConfig.domLayout = this.gridDomLayout;
     }
-    if (this.finalGridConfig && this.finalGridConfig.columnDefs) {
+    if ((_a = this.finalGridConfig) === null || _a === void 0 ? void 0 : _a.columnDefs) {
       const selectionColumn = this.finalGridConfig.columnDefs.find((c) => c.checkboxSelection === true || c.checkboxSelection === false);
       if (selectionColumn) {
-        selectionColumn.hide = !this.isSelectionMode;
+        selectionColumn.hide = !this.isSelectionMode || this.isReadonly;
       }
     }
+    if (this.isReadonly) {
+      this.finalGridConfig.suppressRowClickSelection = true;
+      this.finalGridConfig.suppressCellFocus = true;
+      this.finalGridConfig.suppressRowHoverHighlight = true;
+    }
   }
   onGridStateUpdate() {
     if (this.columnApi && !this.disconnected) {
@@ -957,16 +1009,19 @@ export class YooGridComponent {
         const ids = compact((_a = this.selection) === null || _a === void 0 ? void 0 : _a.map((s) => s === null || s === void 0 ? void 0 : s._id));
         if (ids.length > 0) {
           this.isLoading = true;
-          getAsyncExtraData({ type: 'get-by-ids', params: { collectionName: this.collectionName, ids } }).then((ret) => {
+          getAsyncExtraData({ type: 'get-by-ids', params: { collectionName: this.collectionName, ids, sorts: [{ colId: 'title', sort: 'asc' }] } }).then((ret) => {
             this.items = ret || [];
             if (this.isAgGrid()) {
               if (this.isLocal) {
                 this.gridApi.setRowData(this.items);
               }
               else {
+                //this.gridApi.setRowData([]);
                 this.gridApi.setServerSideDatasource({
                   getRows: (p) => {
-                    p.success({ rowData: this.items, rowCount: this.items.length });
+                    const items = this.items.slice(p.request.startRow || 0, p.request.endRow);
+                    p.success({ rowData: items, rowCount: this.items.length });
+                    this.updateGridSelectAllState();
                   }
                 });
               }
@@ -1249,7 +1304,8 @@ export class YooGridComponent {
       !this.host.classList.contains('autocomplete-selection-mode') &&
       !this.host.classList.contains('form-choice') &&
       !this.host.classList.contains('force-select');
-    if (isWeb(this.host) &&
+    if (!this.disconnected &&
+      isWeb(this.host) &&
       checkBoxClick &&
       !this.host.classList.contains('autocomplete-selection-mode') &&
       !this.host.classList.contains('force-select') &&
@@ -1257,13 +1313,13 @@ export class YooGridComponent {
       this.multiple) {
       this.checked.emit(selection);
     }
-    else if (!blockEmit) {
+    else if (!this.disconnected && !blockEmit) {
       this.selected.emit(value);
     }
-    if (this.isAgGrid()) {
+    if (!this.disconnected && this.isAgGrid()) {
       this.updateGridSelectAllState(value);
     }
-    else {
+    else if (!this.disconnected) {
       this.setFormFieldValue();
     }
   }
@@ -1285,7 +1341,7 @@ export class YooGridComponent {
       return this.total || 0;
     }
     else if (this.multiple) {
-      return this.isSelectAll ? this.total - (((_a = this.selectionRemoved) === null || _a === void 0 ? void 0 : _a.length) || 0) : ((_b = this.selection) === null || _b === void 0 ? void 0 : _b.length) || (this.isAutoComplete ? undefined : this.total) || 0;
+      return this.isSelectAll && this.total > 0 ? this.total - (((_a = this.selectionRemoved) === null || _a === void 0 ? void 0 : _a.length) || 0) : ((_b = this.selection) === null || _b === void 0 ? void 0 : _b.length) || (this.isAutoComplete ? undefined : this.total) || 0;
     }
     else if (this.total > 0) { //  && this.isSelectAll
       let total = this.total;
@@ -1361,9 +1417,9 @@ export class YooGridComponent {
   }
   onSearchInputChange(ev) {
     ev.stopPropagation();
-    if ((ev === null || ev === void 0 ? void 0 : ev.detail) !== this.searchText && this.isSelectedToggleView) {
-      this.isSelectedToggleView = false;
-    }
+    // if (ev?.detail !== this.searchText && this.isSelectedToggleView) { // dont understand why we need this
+    //   this.isSelectedToggleView = false;
+    // }
     this.isLoading = false;
     this.searchText = ev.detail;
     this.isFirstLoadAfterDisconnect = false;
@@ -1840,8 +1896,7 @@ export class YooGridComponent {
     ]);
   }
   renderRefresh() {
-    return (!this.hideRefreshButton &&
-      !this.isLocal && (h("yoo-tooltip", { content: translate('REFRESH'), hoverable: true, placement: "bottom" },
+    return (!this.hideRefreshButton && !this.isReadonly && !this.isLocal && (h("yoo-tooltip", { content: translate('REFRESH'), hoverable: true, placement: "bottom" },
       h("yoo-button", { shape: "circular", fill: "transparent", rippleType: "unbounded", onClick: () => this.pullToRefresh() },
         h("yoo-icon", { name: "refresh", color: "stable" })))));
   }
@@ -1858,6 +1913,7 @@ export class YooGridComponent {
       renderEntityQueryBuilder && this.renderEntityQueryBuilder(actions),
       !renderEntityQueryBuilder && this.renderSearchInput(),
       isWeb(this.host) && !renderEntityQueryBuilder && h("span", { class: "flex" }),
+      isWeb(this.host) && !renderEntityQueryBuilder && this.renderDisplayMode(),
       isWeb(this.host) && !renderEntityQueryBuilder && this.renderRefresh(),
       !isWeb(this.host) && (h("yoo-items", { class: {
           // 'margin-left': !isWeb(this.host) && this.isToggleModeVisible(),
@@ -1980,7 +2036,7 @@ export class YooGridComponent {
     ];
   }
   renderDisplayMode() {
-    var _a;
+    var _a, _b;
     if (isWeb(this.host) && this.displayType === 'card-media') {
       const buttonsResize = [
         {
@@ -1996,15 +2052,18 @@ export class YooGridComponent {
         { icon: 'large-without-info', handler: () => this.onMediaResize('large', true), iconColor: this.displaySize === 'large' && this.useCellOverlay ? 'app-color' : 'stable' },
         { icon: 'large-with-info', handler: () => this.onMediaResize('large', false), iconColor: this.displaySize === 'large' && !this.useCellOverlay ? 'app-color' : 'stable' }
       ];
-      return (h("yoo-tooltip", { content: translate('CHANGEDISPLAYMODE'), hoverable: true, placement: "bottom" },
-        h("yoo-context-menu", { contentButtons: buttonsResize, class: "inline", onContextMenuOpened: (event) => (event.target.childNodes[0]['color'] = 'app-color'), onContextMenuClosed: (event) => (event.target.childNodes[0]['color'] = 'stable') },
-          h("yoo-button", { fill: "transparent", shape: "circular", rippleType: "unbounded", color: "stable" },
-            h("yoo-icon", { size: "medium", name: "grid-view", color: "stable" })))));
+      return [
+        h("yoo-tooltip", { content: translate('CHANGEDISPLAYMODE'), hoverable: true, placement: "bottom" },
+          h("yoo-context-menu", { contentButtons: buttonsResize, class: "inline", onContextMenuOpened: (event) => (event.target.childNodes[0]['color'] = 'app-color'), onContextMenuClosed: (event) => (event.target.childNodes[0]['color'] = 'stable') },
+            h("yoo-button", { fill: "transparent", shape: "circular", rippleType: "unbounded", color: "stable" },
+              h("yoo-icon", { size: "medium", name: "grid-view", color: "stable" })))),
+        ((_a = this.displayTypes) === null || _a === void 0 ? void 0 : _a.length) > 1 && h("yoo-tooltip", { content: translate('CHANGEDISPLAYMODE'), hoverable: true, placement: "bottom" }, this.renderChangeDisplayButton())
+      ];
     }
     if (!this.isToggleModeVisible()) {
       return;
     }
-    if (((_a = this.displayTypes) === null || _a === void 0 ? void 0 : _a.length) > 1) {
+    if (((_b = this.displayTypes) === null || _b === void 0 ? void 0 : _b.length) > 1) {
       return isWeb(this.host) ? (h("yoo-tooltip", { content: translate('CHANGEDISPLAYMODE'), hoverable: true, placement: "bottom" }, this.renderChangeDisplayButton())) : (this.renderChangeDisplayButtonMobile());
     }
   }
@@ -2063,6 +2122,7 @@ export class YooGridComponent {
         // icon: 'pull-to-refresh',
         text: translate('UPDATEVIEW'),
         isVisible: () => !!this.customView,
+        hasDivider: true,
         handler: () => {
           this.customViewSaved.emit({ view: this.customView, showEditForm: false });
         }
@@ -2070,6 +2130,7 @@ export class YooGridComponent {
       {
         // icon: 'save',
         text: translate('SAVEASNEWVIEW'),
+        hasDivider: true,
         handler: () => {
           this.customViewSaved.emit(null);
         }
@@ -2078,6 +2139,7 @@ export class YooGridComponent {
         // icon: 'cross',
         text: translate('RESETVIEW'),
         color: 'danger',
+        hasDivider: true,
         iconColor: 'danger',
         textClass: 'danger',
         isVisible: () => !!this.customView,
@@ -2151,14 +2213,14 @@ export class YooGridComponent {
     var _a;
     const showDisplaySize = ((_a = this.campaignFields) === null || _a === void 0 ? void 0 : _a.findIndex((f) => f.showInCard)) > -1;
     // Block select all for card cell web for documents
-    return (h("yoo-entity-query-builder", { ref: (el) => (this.entityQueryBuilderElement = el), model: this.model, hideSorts: this.isAgGrid() || this.isKanban() || this.hideSorts, showAdvancedQueryBuilder: this.showAdvancedQueryBuilder, values: this.sortsAndFilters, isToggleSelected: this.isSelectedToggleView, isSelectAllToggled: this.isSelectAll, showSelectionOnlyToggle: this.showSelectionOnlyToggle, customViewsId: this.customViewsId, customView: this.customView, customViews: this.customViews, onChanged: (ev) => this.applySortsAndFilters(ev.detail), onToggleSelected: (ev) => this.onToggleSelected(ev), onFieldFetchData: (ev) => {
+    return (h("yoo-entity-query-builder", { ref: (el) => (this.entityQueryBuilderElement = el), model: this.model, hideSorts: this.isAgGrid() || this.isKanban() || this.hideSorts, showAdvancedQueryBuilder: this.showAdvancedQueryBuilder, values: this.sortsAndFilters, readonly: this.isReadonly, isToggleSelected: this.isSelectedToggleView, isSelectAllToggled: this.isSelectAll, showSelectionOnlyToggle: this.showSelectionOnlyToggle, customViewsId: this.customViewsId, customView: this.customView, customViews: this.customViews, onChanged: (ev) => this.applySortsAndFilters(ev.detail), onToggleSelected: (ev) => this.onToggleSelected(ev), onFieldFetchData: (ev) => {
         ev.stopPropagation();
         this.fieldFetchData.emit(ev.detail);
       }, onFieldFetchCustomData: (ev) => {
         ev.stopPropagation();
         this.fieldFetchCustomData.emit(ev.detail);
       }, class: { 'no-padding': this.showSearch === false }, floating: this.floatingFilters, disabled: this.isSelectAll && this.total > 0 },
-      isWeb(this.host) && (h("div", { class: "search-container-inner", slot: "before" },
+      isWeb(this.host) && !this.isReadonly && (h("div", { class: "search-container-inner", slot: "before" },
         this.renderToggleSelectAll(),
         this.showSearch !== false && this.renderSearchInput(),
         h("slot", { name: "search-buttons-before" }))),
@@ -2267,7 +2329,8 @@ export class YooGridComponent {
       return this.renderSelectAllHeader();
     }
     const title = translate(this.heading);
-    let renderSearchOrAutocomplete = (this.showSearch || ((_c = this.displayTypes) === null || _c === void 0 ? void 0 : _c.length) > 1 || (!isWeb(this.host) && this.allowCustomTag)) &&
+    let renderSearchOrAutocomplete = !this.isReadonly &&
+      (this.showSearch || ((_c = this.displayTypes) === null || _c === void 0 ? void 0 : _c.length) > 1 || (!isWeb(this.host) && this.allowCustomTag)) &&
       ((this.filteredItems && this.filteredItems.length > 0) ||
         this.allowCustomTag ||
         this.searchText ||
@@ -2292,7 +2355,7 @@ export class YooGridComponent {
           h("div", { class: "text-container", onClick: () => this.onHeadingClick() }, this.heading ? (this.isLoading && this.total <= 0 ? (h("yoo-card-placeholder", { displayType: this.displayType, entityType: this.entityType, header: this.progressCss })) : (h("span", { class: "heading" },
             title,
             this.total > 0 && !this.hideTotal && ` - ${this.formattedTotal}`))) : null),
-          this.showSeeAll !== false && (h("div", { class: { 'icon-container': true, widget: this.isWidget }, onClick: () => this.onHeadingClick() }, translate('SEEALL'))),
+          this.showSeeAll !== false && (h("div", { class: { 'icon-container': true, widget: this.isWidget }, onClick: () => this.onHeadingClick() }, translate('YOOBICSEEALL'))),
           this.isWidget && this.isHome && (h("div", { class: { 'icon-container': true }, onClick: (ev) => this.onWidgetEdit(ev) },
             h("yoo-icon", { name: "more", size: isWeb(this.host) ? 'small' : 'medium', color: "stable" }))),
           h("slot", { name: "header" })),
@@ -2302,7 +2365,7 @@ export class YooGridComponent {
             this.total > 0 || !this.hideHeadingIfEmpty ? title : null,
             !this.hideTotal && this.renderTotalNumber())),
         (this.entityType === 'courses' || this.entityType === 'plans' || this.entityType === 'courses-small') && this.renderDisplayMode(),
-        this.showSeeAll && this.total > 0 && (h("div", { class: "icon-container", onClick: () => this.onHeadingClick() }, translate('SEEALL'))))) : (this.renderProgressBar()),
+        this.showSeeAll && this.total > 0 && (h("div", { class: "icon-container", onClick: () => this.onHeadingClick() }, translate('YOOBICSEEALL'))))) : (this.renderProgressBar()),
       (this.gridIsExpanded && this.forceHideSearch) || this.isFramed || this.hideToolbar || (!renderSearchOrAutocomplete && !renderEntityTags) ? null : (h("yoo-navbar", { centerTitle: false, class: {
           'grid': !this.isAutoComplete,
           'card-inbox': (_f = (_e = this.host) === null || _e === void 0 ? void 0 : _e.classList) === null || _f === void 0 ? void 0 : _f.contains('card-inbox'),
@@ -2327,7 +2390,7 @@ export class YooGridComponent {
         renderEntityTags && this.renderEntitySearchTags(renderSearchOrAutocomplete),
         renderSearchOrAutocomplete && (this.isMap() ? this.renderAddressAutocomplete() : this.renderSearch()),
         h("div", { slot: "content", class: "w-100" },
-          isWeb(this.host) && !this.isAutoComplete && !this.shouldRenderEntityQueryBuilder() && this.renderToggleSelectAll(true),
+          isWeb(this.host) && !this.isAutoComplete && !this.isReadonly && !this.shouldRenderEntityQueryBuilder() && this.renderToggleSelectAll(true),
           h("slot", { name: "nav-bar-bottom" }))))
     ];
   }
@@ -2384,11 +2447,10 @@ export class YooGridComponent {
       h("yoo-button", { animated: false, color: "app-color", fill: "transparent", size: isWeb(this.host) ? 'small' : 'medium', shape: "rectangular", onClick: () => this.onForceSelectAll(showClear) }, translate(showClear ? 'CLEAR' : 'SELECTALL'))));
   }
   renderEmptyStateButton(customStyle) {
-    const buttonSize = isWeb(this.host) || (!this.extraClass || this.extraClass === 'large') ? 'large' : 'medium';
+    const buttonSize = (!this.extraClass && isWeb(this.host)) || this.extraClass.includes('large') ? 'large' : this.extraClass.includes('small') ? 'small' : 'medium';
     return (h("yoo-button", { class: { 'empty-button': true, expanded: customStyle }, size: buttonSize, color: "app-color", onClick: () => this.emptyStateHandler() }, translate(this.emptyStateButtonText)));
   }
   renderEmptyState() {
-    const isLarge = !this.extraClass || this.extraClass === 'large';
     const type = this.emptyState || this.entityType || 'error';
     const displayEmptyState = type && type !== 'none' && !this.hideEmptyState;
     const header = translate(this.emptyStateHeader || EMPTYSTATE_TITLE_MAP[type]);
@@ -2399,12 +2461,11 @@ export class YooGridComponent {
       h("slot", { name: "before" }),
       displayEmptyState && (h("div", { class: `empty-state-container ${this.extraClass}` },
         h("div", { class: { 'empty-state': true, padding: customStyle, ...getAppContext(this.host) } },
-          this.emptyStateTextPosition === 'top' && [!!header && h("h4", null, header), h("div", null, text)],
+          !this.emptyStateNoDescription && this.emptyStateTextPosition === 'top' && [!!header && h("h4", null, header), h("div", null, text)],
           this.emptyStateAnimated ? (h("yoo-lottie", { autoplay: true, loop: true, type: type })) : (h("yoo-empty-state", { class: { [this.displayType]: true, [this.extraClass || 'large']: true, 'with-button': hasButton }, style: { height: this.isAutoComplete && !this.host.classList.contains('expanding-grid') && '5rem' }, type: type })),
           h("div", { class: "empty-state-details" },
-            this.emptyStateTextPosition === 'bottom' && [!!header && h("h4", { innerHTML: header }), h("div", { class: { 'with-button': hasButton }, innerHTML: text })],
-            hasButton && !isLarge && this.renderEmptyStateButton(customStyle)),
-          hasButton && isLarge && this.renderEmptyStateButton(customStyle)))),
+            !this.emptyStateNoDescription && this.emptyStateTextPosition === 'bottom' && [!!header && h("h4", { innerHTML: header }), h("div", { class: { 'with-button': hasButton }, innerHTML: text })],
+            hasButton && this.renderEmptyStateButton(customStyle))))),
       h("slot", { name: "after" })
     ];
   }
@@ -2605,7 +2666,7 @@ export class YooGridComponent {
                   [this.displayType]: !!this.displayType,
                   [this.entityType]: !!this.entityType
                 } }))),
-            h("div", { class: "bottom-overlay", onClick: () => this.onHeadingClick() })),
+            h("div", { class: "bottom-overlay", onClick: () => this.isFramed && this.onHeadingClick() })),
           h("slot", { name: "quickactions" }),
           h("slot", { name: "before" }),
           this.renderInfiniteScroll(),
@@ -2657,7 +2718,7 @@ export class YooGridComponent {
               var _a;
               return this.renderEntityItems(header, index, index === array.length - 1 ? (_a = this.filteredItems) === null || _a === void 0 ? void 0 : _a.length : array[index + 1].index, header.index);
             }),
-            h("div", { class: "bottom-overlay", onClick: () => this.onHeadingClick() })),
+            h("div", { class: "bottom-overlay", onClick: () => this.isFramed && this.onHeadingClick() })),
           this.renderInfiniteScroll(),
           this.renderScrollSpacer(),
           h("slot", { name: "quickactions" }))
@@ -2681,7 +2742,7 @@ export class YooGridComponent {
                 ? this.renderItemWithMore(item, index)
                 : this.renderItemSliding(item, index === this.getItems().length - 1 && (index > 1 || this.isFramed), index))
               : this.getItems().map((item, index) => this.renderItem(item, index)),
-            h("div", { class: "bottom-overlay", onClick: () => this.onHeadingClick() })),
+            h("div", { class: "bottom-overlay", onClick: () => this.isFramed && this.onHeadingClick() })),
           h("slot", { name: "quickactions" }))),
         !this.isSelectedToggleView && !this.host.classList.contains('live-preview-dropdown') && this.renderInfiniteScroll(),
         h("slot", { name: "after" }),
@@ -2823,14 +2884,14 @@ export class YooGridComponent {
         }
       } },
       h("yoo-ion-item", { lines: "none", class: { [this.displayType]: true, 'selected': this.isSelected(item), 'overflow-visible': this.secondaryActionsDropdown, 'no-padding': (_d = (_c = this.host) === null || _c === void 0 ? void 0 : _c.classList) === null || _d === void 0 ? void 0 : _d.contains('no-padding-item') } }, this.renderEntity(item, isLast, index)),
-      (actions && actions.length > 0 && !this.secondaryActionsDropdown) || (isWeb(this.host) && this.keepSelection) ? (h("yoo-ion-item-options", { ref: (el) => (this.itemOptions[itemSlidingId] = el), onMouseEnter: () => { var _a, _b; return (_b = (_a = this.itemOptions[itemSlidingId]) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add('hovered'); }, onMouseLeave: () => {
+      ((actions === null || actions === void 0 ? void 0 : actions.length) > 0 && !this.secondaryActionsDropdown) || (isWeb(this.host) && this.keepSelection) ? (h("yoo-ion-item-options", { ref: (el) => (this.itemOptions[itemSlidingId] = el), onMouseEnter: () => { var _a, _b; return (_b = (_a = this.itemOptions[itemSlidingId]) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add('hovered'); }, onMouseLeave: () => {
           var _a, _b;
           if (!this.blockUnhoveer[itemSlidingId]) {
             (_b = (_a = this.itemOptions[itemSlidingId]) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.remove('hovered');
           }
         } },
         h("div", { class: { 'options-container': true, 'force-opacity': this.isSelectionMode || this.keepSelection, visible: this.displayActionsOnCard, web: isWeb(this.host) }, onClick: () => this.onItemSelect(item) },
-          !isWeb(this.host) && actions && actions.slice(0, hasMoreButton ? 2 : actions.length).map((action) => action && this.renderMobileItemOptionButtons(action, item)),
+          !isWeb(this.host) && (actions === null || actions === void 0 ? void 0 : actions.slice(0, hasMoreButton ? 2 : actions.length).map((action) => action && this.renderMobileItemOptionButtons(action, item))),
           !isWeb(this.host) && actions && hasMoreButton && (h("button", { class: "bg-stable-light", onClick: (ev) => {
               ev.stopPropagation();
               this.presentActionSheet(actions.slice(2), item);
@@ -2977,6 +3038,7 @@ export class YooGridComponent {
         'entity-inner-container': true,
         'sortable': this.sortable,
         [this.displayType]: true,
+        [this.entityType || '']: true,
         'collapsible': this.isCollapsibleCheck(),
         'no-kpi': this.hasNoKpi(item),
         'overflow-visible': this.secondaryActionsDropdown,
@@ -2988,7 +3050,7 @@ export class YooGridComponent {
         }
       } },
       this.sortable && h("yoo-icon", { name: "draggable", color: "stable", size: "medium" }),
-      h("yoo-entity", { iconColor: this.getIconColor(item), useTranslate: this.useTranslate, onCollapsed: (ev) => this.onEntityCollapsed(ev), extraClass: this.extraClass, displaySize: this.displaySize, useCellOverlay: this.useCellOverlay, direction: this.direction, index: index, onViewMoreToggled: (ev) => {
+      h("yoo-entity", { iconColor: this.getIconColor(item), useTranslate: this.useTranslate, onCollapsed: (ev) => this.onEntityCollapsed(ev), extraClass: this.extraClass, displaySize: this.displaySize, useCellOverlay: this.useCellOverlay, direction: this.direction, index: index, entityMapping: this.entityMapping, onViewMoreToggled: (ev) => {
           ev.stopPropagation();
           this.viewMoreToggled.emit(item);
         }, onMediaSelected: (ev) => {
@@ -2998,11 +3060,11 @@ export class YooGridComponent {
           'selected': ((_a = this.initialSelection) === null || _a === void 0 ? void 0 : _a.length) === 1 && ((_b = this.initialSelection[0]) === null || _b === void 0 ? void 0 : _b._id) === (item === null || item === void 0 ? void 0 : item._id),
           'selected check-selected': item && this.isSelected(item) && !this.showGlobalActions,
           'selected check-selected-left': item && this.isSelected(item) && this.showGlobalActions && this.isSelectionMode,
-          'check-unselected': ((this.host.classList.contains('radio-button-choice') && !this.isSelected(item)) || (this.multiple && !this.isSelected(item))) && !this.showGlobalActions,
+          'check-unselected': ((this.host.classList.contains('radio-button-choice') && !this.isSelected(item)) || (this.multiple && !this.isSelected(item))) && !this.showGlobalActions && this.keepSelection !== false,
           'check-unselected-left': ((this.host.classList.contains('radio-button-choice') && !this.isSelected(item)) || (this.multiple && !this.isSelected(item))) &&
             this.showGlobalActions &&
             this.isSelectionMode,
-          'child': item && (item.isChild || !!(item === null || item === void 0 ? void 0 : item.parentRef)),
+          'child': item && (item.isChild || (!!item.parentRef && item.folderType !== 'article')),
           'last': isLast,
           'form-choice': this.host.classList.contains('form-choice'),
           'framed': this.isFramed,
@@ -3018,7 +3080,8 @@ export class YooGridComponent {
           'collapsed': this.isMap(),
           'selected card-template': this.displayType === 'card-template' && this.isSelected(item),
           'form': this.host.classList.contains('form'),
-          'table': this.host.classList.contains('table')
+          'table': this.host.classList.contains('table'),
+          'block': this.host.classList.contains('radio-button-choice')
         }, item: item, items: this.entityType === 'photos' ? this.filteredItems : undefined, displayType: this.displayType, entityType: this.entityType, profileSummary: this.profileSummary, icons: this.icons, topActions: this.topActions, bottomActions: this.bottomActions, secondaryActions: this.secondaryActions, customModel: this.customModel, isCollapsible: this.isCollapsibleCheck(), isMap: this.isMap(), isFramed: this.isFramed, isPdf: this.isPdf, unreadCounts: this.unreadCounts, playerCommand: this.currentActivePlayerId, secondaryActionsDropdown: this.secondaryActionsDropdown, selected: this.isSelected(item), valuesColor: (_d = this.valuesColor) === null || _d === void 0 ? void 0 : _d.find((e) => (item._id ? e.key === item._id : item.icon ? e.key === item.title : e.key === item)), highlighted: this.entityType === 'lessons' && this.getLessonHighlight(item), hideUIFields: this.hideUIFields })));
     if (isWeb(this.host) && this.columns && this.columns.length) {
       return this.renderEntityWithColumns(item, content, index);
@@ -3105,7 +3168,7 @@ export class YooGridComponent {
   }
   renderProgress() {
     return (this.mainProgressValue >= 0 && (h("div", { class: "grid-progress" },
-      h("yoo-progress-bar", { class: "app-color", animated: this.animated, metric: "percentage", percentValueColorScheme: false, value: this.total > 0 ? (this.mainProgressValue * 100) / this.total : 0 }))));
+      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;
@@ -3199,7 +3262,7 @@ export class YooGridComponent {
       "mutable": false,
       "complexType": {
         "original": "ITab[]",
-        "resolved": "ITab[]",
+        "resolved": "ITab<string>[]",
         "references": {
           "ITab": {
             "location": "import",
@@ -3387,7 +3450,7 @@ export class YooGridComponent {
       "mutable": false,
       "complexType": {
         "original": "EntityType",
-        "resolved": "\"aisles\" | \"community\" | \"courses\" | \"dashboards\" | \"operations\" | \"pages\" | \"questions\" | \"scoring\" | \"tableau\" | \"tag\" | \"user\" | \"weekdays\" | \"campaignfilters\" | \"channel\" | \"communities\" | \"custommodels\" | \"geofilters\" | \"hierarchy\" | \"incentives\" | \"locationtypes\" | \"plans\" | \"translations\" | \"aclRole\" | \"blog\" | \"emails\" | \"feeds\" | \"files\" | \"groups\" | \"htmltemplates\" | \"lessons\" | \"locations\" | \"memos\" | \"missiondescriptions\" | \"missiondescriptiontemplates\" | \"missions\" | \"productbatch\" | \"products\" | \"tenants\" | \"userranks\" | \"users\" | \"type\" | \"aclPermission\" | \"aclPermissionList\" | \"aislelist\" | \"algorithm\" | \"apps\" | \"arexperience\" | \"armodel\" | \"badges\" | \"broadcasts\" | \"calendarEvents\" | \"campaigntypes\" | \"catalogs\" | \"channels\" | \"charttype\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"days\" | \"entitycomments\" | \"environnement\" | \"feedsComments\" | \"filesFolders\" | \"folders\" | \"formfield\" | \"giphy\" | \"googlemaps\" | \"hashtags\" | \"icons\" | \"language\" | \"lessondescriptions\" | \"liveshoppings\" | \"locationspublic\" | \"markas\" | \"mediacapturedevices\" | \"memolist\" | \"missiondatas\" | \"missiondescriptioncategories\" | \"missionfield\" | \"notes\" | \"notifications\" | \"photos\" | \"productbatchlist\" | \"productweightpair\" | \"publicAPITokens\" | \"questionsAnswers\" | \"regex\" | \"reporttemplates\" | \"reviewapps\" | \"salesdata\" | \"scorms\" | \"scormcloud\" | \"slots\" | \"tableauShared\" | \"tagGroups\" | \"topusers\" | \"unsplash\" | \"userlearningmanager\" | \"usercourseinfo\" | \"violetproducts\" | \"violetproductofferskus\" | \"violetbasketitems\" | \"violetshippingmethods\" | \"version\" | \"videocallusers\" | \"visits\" | \"waitlistvisit\" | \"waitlistcustomer\" | \"waitliststats\" | \"plansorlessons\" | \"widgets\"",
+        "resolved": "\"aisles\" | \"community\" | \"courses\" | \"dashboards\" | \"operations\" | \"pages\" | \"questions\" | \"scoring\" | \"tableau\" | \"tag\" | \"user\" | \"weekdays\" | \"campaignfilters\" | \"channel\" | \"communities\" | \"custommodels\" | \"geofilters\" | \"hierarchy\" | \"incentives\" | \"locationtypes\" | \"plans\" | \"translations\" | \"aclRole\" | \"blog\" | \"emails\" | \"feeds\" | \"files\" | \"groups\" | \"htmltemplates\" | \"lessons\" | \"locations\" | \"memos\" | \"missiondescriptions\" | \"missiondescriptiontemplates\" | \"missions\" | \"productbatch\" | \"products\" | \"tenants\" | \"userranks\" | \"users\" | \"type\" | \"aclPermission\" | \"aclPermissionList\" | \"aislelist\" | \"algorithm\" | \"apps\" | \"arexperience\" | \"armodel\" | \"audiences\" | \"badges\" | \"broadcasts\" | \"calendarEvents\" | \"campaigntypes\" | \"catalogs\" | \"certificates\" | \"channels\" | \"charttype\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"days\" | \"entitycomments\" | \"environnement\" | \"feedsComments\" | \"filesFolders\" | \"folders\" | \"formfield\" | \"giphy\" | \"googlemaps\" | \"hashtags\" | \"icons\" | \"language\" | \"lessondescriptions\" | \"liveshoppings\" | \"locationsaudience\" | \"locationspublic\" | \"markas\" | \"mediacapturedevices\" | \"memolist\" | \"missiondatas\" | \"missiondescriptioncategories\" | \"missiondescriptionreviewhistories\" | \"missionfield\" | \"notes\" | \"notifications\" | \"photos\" | \"productbatchlist\" | \"productweightpair\" | \"publicAPITokens\" | \"questionsAnswers\" | \"regex\" | \"reporttemplates\" | \"reviewapps\" | \"salesdata\" | \"scorms\" | \"scormcloud\" | \"slots\" | \"tableauShared\" | \"tagGroups\" | \"topusers\" | \"unsplash\" | \"useraudience\" | \"userlearningmanager\" | \"usercourseinfo\" | \"violetproducts\" | \"violetproductofferskus\" | \"violetbasketitems\" | \"violetshippingmethods\" | \"version\" | \"videocallusers\" | \"visits\" | \"waitlistvisit\" | \"waitlistcustomer\" | \"waitliststats\" | \"plansorlessons\" | \"widgets\"",
         "references": {
           "EntityType": {
             "location": "import",
@@ -4149,6 +4212,23 @@ export class YooGridComponent {
       "attribute": "empty-state-description",
       "reflect": false
     },
+    "emptyStateNoDescription": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "empty-state-no-description",
+      "reflect": false
+    },
     "emptyStateHeader": {
       "type": "string",
       "mutable": false,
@@ -6229,6 +6309,26 @@ export class YooGridComponent {
         "tags": [],
         "text": ""
       }
+    },
+    "entityMapping": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "TEntityMapping",
+        "resolved": "(item: IEntity, entityType: EntityType, displayType: CardType, displaySize?: TSize, useCellOverlay?: boolean) => ICardListEntry | ICardMediaEntry",
+        "references": {
+          "TEntityMapping": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
     }
   }; }
   static get states() { return {
@@ -6721,7 +6821,7 @@ export class YooGridComponent {
       },
       "complexType": {
         "original": "ITab",
-        "resolved": "ITab",
+        "resolved": "ITab<string>",
         "references": {
           "ITab": {
             "location": "import",
@@ -7754,6 +7854,47 @@ export class YooGridComponent {
         "tags": []
       }
     },
+    "updateTreePath": {
+      "complexType": {
+        "signature": "(route: string[], purge?: boolean) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "expandTreePath": {
+      "complexType": {
+        "signature": "(routes: string[]) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
     "disconnect": {
       "complexType": {
         "signature": "() => Promise<void>",
@@ -7769,6 +7910,30 @@ export class YooGridComponent {
         "text": "",
         "tags": []
       }
+    },
+    "updateGridConfig": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "IEntity": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          },
+          "CellValueChangedEvent": {
+            "location": "import",
+            "path": "@ag-grid-enterprise/all-modules"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
     }
   }; }
   static get elementRef() { return "host"; }