@yoobic/yobi 8.2.0-9 → 8.2.0

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

@@ -185,6 +185,10 @@ export class YooGridComponent {
       }
     }
   }
+  onCurrentPageChanged() {
+    var _a;
+    this.isLocal && this.isAutoComplete && ((_a = this.infiniteScroll) === null || _a === void 0 ? void 0 : _a.complete());
+  }
   onDataChanged(newItems) {
     var _a, _b, _c;
     this.updateItemsSlidingOnUpdate = true;
@@ -268,7 +272,13 @@ export class YooGridComponent {
     if (this.isAgGrid() && (gridCurrentSearch === null || gridCurrentSearch === void 0 ? void 0 : gridCurrentSearch.datasourceSuccess)) {
       gridCurrentSearch === null || gridCurrentSearch === void 0 ? void 0 : gridCurrentSearch.datasourceSuccess(values);
     }
+    if (gridCurrentSearch === null || gridCurrentSearch === void 0 ? void 0 : gridCurrentSearch.search) {
+      this.searchText = gridCurrentSearch.search; // otherwise the search gets emptied
+    }
     this.itemList = this.items;
+    if (this.isSelectAll) {
+      this.setFormFieldValue(); // once we get the total we can update the query to have the proper total
+    }
   }
   async getGridSelection() {
     var _a;
@@ -740,6 +750,7 @@ export class YooGridComponent {
     }
   }
   async updateGridConfig() {
+    var _a;
     this.finalGridConfig = {
       ...this.gridConfig,
       treeData: this.isTree(),
@@ -751,16 +762,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) => {
@@ -833,13 +844,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);
         }
       },
@@ -847,17 +861,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);
             }
           });
@@ -898,12 +921,17 @@ export class YooGridComponent {
     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) {
@@ -997,7 +1025,7 @@ export class YooGridComponent {
                 this.gridApi.setRowData(this.items);
               }
               else {
-                this.gridApi.setRowData([]);
+                //this.gridApi.setRowData([]);
                 this.gridApi.setServerSideDatasource({
                   getRows: (p) => {
                     const items = this.items.slice(p.request.startRow || 0, p.request.endRow);
@@ -1322,7 +1350,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;
@@ -1398,9 +1426,6 @@ export class YooGridComponent {
   }
   onSearchInputChange(ev) {
     ev.stopPropagation();
-    if ((ev === null || ev === void 0 ? void 0 : ev.detail) !== this.searchText && this.isSelectedToggleView) {
-      this.isSelectedToggleView = false;
-    }
     this.isLoading = false;
     this.searchText = ev.detail;
     this.isFirstLoadAfterDisconnect = false;
@@ -1877,8 +1902,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" })))));
   }
@@ -2018,7 +2042,7 @@ export class YooGridComponent {
     ];
   }
   renderDisplayMode() {
-    var _a;
+    var _a, _b;
     if (isWeb(this.host) && this.displayType === 'card-media') {
       const buttonsResize = [
         {
@@ -2034,15 +2058,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());
     }
   }
@@ -2101,6 +2128,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 });
         }
@@ -2108,6 +2136,7 @@ export class YooGridComponent {
       {
         // icon: 'save',
         text: translate('SAVEASNEWVIEW'),
+        hasDivider: true,
         handler: () => {
           this.customViewSaved.emit(null);
         }
@@ -2116,6 +2145,7 @@ export class YooGridComponent {
         // icon: 'cross',
         text: translate('RESETVIEW'),
         color: 'danger',
+        hasDivider: true,
         iconColor: 'danger',
         textClass: 'danger',
         isVisible: () => !!this.customView,
@@ -2189,14 +2219,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" }))),
@@ -2305,7 +2335,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 ||
@@ -2365,7 +2396,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" }))))
     ];
   }
@@ -2422,11 +2453,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]);
@@ -2437,12 +2467,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" })
     ];
   }
@@ -2861,14 +2890,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);
@@ -3015,6 +3044,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,
@@ -3026,7 +3056,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) => {
@@ -3036,11 +3066,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,
@@ -3056,7 +3086,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);
@@ -3143,7 +3174,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;
@@ -3237,7 +3268,7 @@ export class YooGridComponent {
       "mutable": false,
       "complexType": {
         "original": "ITab[]",
-        "resolved": "ITab[]",
+        "resolved": "ITab<string>[]",
         "references": {
           "ITab": {
             "location": "import",
@@ -3425,7 +3456,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",
@@ -4187,6 +4218,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,
@@ -6267,6 +6315,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) => string | ICardListEntry | ICardMediaEntry",
+        "references": {
+          "TEntityMapping": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
     }
   }; }
   static get states() { return {
@@ -6759,7 +6827,7 @@ export class YooGridComponent {
       },
       "complexType": {
         "original": "ITab",
-        "resolved": "ITab",
+        "resolved": "ITab<string>",
         "references": {
           "ITab": {
             "location": "import",
@@ -7893,6 +7961,9 @@ export class YooGridComponent {
     }, {
       "propName": "initialQuery",
       "methodName": "onInitialQueryChange"
+    }, {
+      "propName": "currentPage",
+      "methodName": "onCurrentPageChanged"
     }, {
       "propName": "items",
       "methodName": "onDataChanged"

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

@@ -584,11 +584,11 @@ export class YooGridCalendarComponent {
         this.user && h("yoo-avatar", { size: "medium", user: this.user }),
         h("div", { class: "title", onClick: () => calendar.view.type !== 'dayGridMonth' && this.toggleDatePicker() }, calendar.view.title),
         calendar.view.type !== 'dayGridMonth' && h("yoo-icon", { name: this.showMobileCalendar ? 'arrow-up' : 'arrow-down', size: "small", onClick: () => this.toggleDatePicker() }),
-        h("div", { class: "today", onClick: () => this.today() }, translate('TODAY')));
+        h("div", { class: "today", onClick: () => this.today() }, translate('YOOBICTODAY')));
     }
     else if (calendar && isWeb(this.host)) {
       return h("div", { class: "custom-header web" },
-        h("yoo-button", { size: "medium", color: "light", onClick: () => this.today() }, translate('TODAY')),
+        h("yoo-button", { size: "medium", color: "light", onClick: () => this.today() }, translate('YOOBICTODAY')),
         h("yoo-icon", { name: "arrow-left", size: "medium", onClick: () => this.ionSlides.slidePrev(0) }),
         h("div", { class: "title", onClick: () => calendar.view.type !== 'dayGridMonth' && this.toggleDatePicker() }, calendar.view.title),
         h("yoo-icon", { name: "arrow-right", size: "medium", onClick: () => this.ionSlides.slideNext(0) }),
@@ -686,7 +686,7 @@ export class YooGridCalendarComponent {
       "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",

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

@@ -197,6 +197,7 @@ export class YooGridstackComponent {
       editIcon.addEventListener('click', () => this.itemEdited.emit(item));
       content.appendChild(editIcon);
     }
+    content.addEventListener('click', () => this.itemClicked.emit(item));
     const slot = document.createElement('slot');
     slot.setAttribute('name', item.id);
     content.appendChild(slot);
@@ -703,6 +704,26 @@ export class YooGridstackComponent {
           }
         }
       }
+    }, {
+      "method": "itemClicked",
+      "name": "itemClicked",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "IGridstackItem",
+        "resolved": "IGridstackItem",
+        "references": {
+          "IGridstackItem": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
+      }
     }, {
       "method": "itemRemoved",
       "name": "itemRemoved",

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

@@ -449,7 +449,7 @@ export class YooKanbanComponent {
       "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",

package/dist/collection/components/layout/layout-sections/layout-sections.js

@@ -1,14 +1,15 @@
 import { translate } from '@shared/utils';
 import { Component, Event, h, Host, Prop } from '@stencil/core';
 export class YooLayoutSectionsComponent {
+  renderSeeAll(seeAllType) {
+    return (h("div", { class: "see-all", onClick: () => this.seeAllClicked.emit(seeAllType) }, translate('YOOBICSEEALL')));
+  }
   renderConfig(config) {
     return h("div", { class: { container: true, alternate: config.isAlternate } },
       h("div", { class: "title" },
         translate(config.title),
         h("div", { class: "flex" }),
-        config.showSeeAll && h("div", { class: "see-all", onClick: () => this.seeAllClicked.emit(config.seeAllType) },
-          translate('YOOBICSEEALL'),
-          h("yoo-icon", { color: "app-color", name: "right", size: "small" }))),
+        config.showSeeAll && this.renderSeeAll(config.seeAllType)),
       config.slotName && h("slot", { name: config.slotName }));
   }
   render() {

package/dist/collection/components/layout/layout-tabs/layout-tabs.js

@@ -72,7 +72,7 @@ export class YooLayoutTabsComponent {
       "mutable": false,
       "complexType": {
         "original": "ITab[]",
-        "resolved": "ITab[]",
+        "resolved": "ITab<string>[]",
         "references": {
           "ITab": {
             "location": "import",

package/dist/collection/components/map/map-gl/map-gl.js

@@ -101,7 +101,12 @@ export class YooMapGlComponent {
   disconnectedCallback() {
     this.isDestroyed = true;
     if (this.map) {
-      this.map.remove();
+      try {
+        this.map.remove();
+      }
+      catch (e) {
+        //
+      }
     }
   }
   onToggleFilterGroup(event) {

package/dist/collection/components/map/map-js/map-js.js

@@ -71,7 +71,12 @@ export class YooMapJsComponent {
   disconnectedCallback() {
     this.isDestroyed = true;
     if (this.map) {
-      this.map.remove();
+      try {
+        this.map.remove();
+      }
+      catch (e) {
+        //
+      }
     }
   }
   onToggleFilterGroup(event) {

package/dist/collection/feature-communicate/chat/chat/chat.js

@@ -589,6 +589,7 @@ export class YooChatComponent {
         preventAutoResume: true,
         cover: true,
         fullscreen: false,
+        autoplay: true,
         extraClass: 'fullscreen'
       },
       preventVcAuto: true,
@@ -628,7 +629,7 @@ export class YooChatComponent {
       }
     };
     return (h("div", { class: "timer-container" },
-      h("yoo-progress-bar", { shape: "circle", class: "app-color", animated: true, listenToProgress: true, hideProgressValue: true, progressAnimationDuration: 0, value: countDownProgress, onValueChanged: (ev) => onCountingDown(ev) }),
+      h("yoo-progress-bar", { shape: "circle", animated: true, listenToProgress: true, hideProgressValue: true, progressAnimationDuration: 0, value: countDownProgress, onValueChanged: (ev) => onCountingDown(ev) }),
       h("div", null, countDownDisplay)));
   }
   renderOverlay() {