@yoobic/yobi 8.1.0-45 → 8.1.0-49

package/dist/cjs/yoo-welcome-banner.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d565915c.js');
-require('./index-7f276896.js');
-const commonHelpers = require('./common-helpers-01100ede.js');
-const overlays = require('./overlays-885aa637.js');
+require('./index-469de753.js');
+const commonHelpers = require('./common-helpers-16b3d671.js');
+const overlays = require('./overlays-4834d61a.js');
 require('./lodash-a046a0e1.js');
 require('./index-2306ecf8.js');
 require('./_commonjsHelpers-94df2ea7.js');

package/dist/cjs/yoo-widget-chart.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d565915c.js');
-require('./index-7f276896.js');
+require('./index-469de753.js');
 const lodash = require('./lodash-a046a0e1.js');
-const overlays = require('./overlays-885aa637.js');
+const overlays = require('./overlays-4834d61a.js');
 require('./index-2306ecf8.js');
 require('./_commonjsHelpers-94df2ea7.js');
 

package/dist/cjs/yoo-widget-tab.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d565915c.js');
-require('./index-7f276896.js');
+require('./index-469de753.js');
 const lodash = require('./lodash-a046a0e1.js');
-const overlays = require('./overlays-885aa637.js');
+const overlays = require('./overlays-4834d61a.js');
 require('./index-2306ecf8.js');
 require('./_commonjsHelpers-94df2ea7.js');
 

package/dist/cjs/yoo-widget-tile.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d565915c.js');
-require('./index-7f276896.js');
-const overlays = require('./overlays-885aa637.js');
+require('./index-469de753.js');
+const overlays = require('./overlays-4834d61a.js');
 require('./lodash-a046a0e1.js');
 require('./index-2306ecf8.js');
 require('./_commonjsHelpers-94df2ea7.js');

package/dist/cjs/yoo-workflow-state-dialog.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d565915c.js');
-require('./index-7f276896.js');
-const overlays = require('./overlays-885aa637.js');
+require('./index-469de753.js');
+const overlays = require('./overlays-4834d61a.js');
 require('./lodash-a046a0e1.js');
 require('./index-2306ecf8.js');
 require('./_commonjsHelpers-94df2ea7.js');

package/dist/cjs/yoo-workflow-state.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d565915c.js');
-require('./index-7f276896.js');
+require('./index-469de753.js');
 const lodash = require('./lodash-a046a0e1.js');
-const overlays = require('./overlays-885aa637.js');
+const overlays = require('./overlays-4834d61a.js');
 require('./index-2306ecf8.js');
 require('./_commonjsHelpers-94df2ea7.js');
 

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

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d565915c.js');
-require('./index-7f276896.js');
+require('./index-469de753.js');
 const lodash = require('./lodash-a046a0e1.js');
 const workflow_interface = require('./workflow.interface-ffda8358.js');
-const commonHelpers = require('./common-helpers-01100ede.js');
+const commonHelpers = require('./common-helpers-16b3d671.js');
 const index$3 = require('./index-750fb0f5.js');
-const index$1 = require('./index-bfb055eb.js');
+const index$1 = require('./index-6c944843.js');
 const index$2 = require('./index-9c56868f.js');
-const overlays = require('./overlays-885aa637.js');
+const overlays = require('./overlays-4834d61a.js');
 require('./index-2306ecf8.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./annotations-helpers-48180ded.js');

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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d565915c.js');
-const overlays = require('./overlays-885aa637.js');
-require('./index-7f276896.js');
+const overlays = require('./overlays-4834d61a.js');
+require('./index-469de753.js');
 require('./lodash-a046a0e1.js');
 require('./index-2306ecf8.js');
 require('./_commonjsHelpers-94df2ea7.js');

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

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d565915c.js');
-require('./index-7f276896.js');
+require('./index-469de753.js');
 const lodash = require('./lodash-a046a0e1.js');
 const annotationsHelpers = require('./annotations-helpers-48180ded.js');
 const hammerHelpers = require('./hammer-helpers-e8117959.js');
-const overlays = require('./overlays-885aa637.js');
+const overlays = require('./overlays-4834d61a.js');
 require('./index-2306ecf8.js');
 require('./_commonjsHelpers-94df2ea7.js');
 

package/dist/collection/collection-manifest.json

@@ -347,7 +347,6 @@
     "./components/scanner/barcode-dialog/barcode-dialog.js",
     "./components/scanner/scandit/scandit.js",
     "./components/scanner/zebra/zebra.js",
-    "./components/storybook-grid/storybook-grid.js",
     "./components/widgets/widget-chart/widget-chart.js",
     "./components/widgets/widget-tab/widget-tab.js",
     "./components/widgets/widget-tile/widget-tile.js"

package/dist/collection/components/2.molecules/context-menu/context-menu.js

@@ -20,51 +20,46 @@ export class YooContextMenuComponent {
      * Show an arrow cursor to the specified position.
      */
     this.cursorPosition = 'none';
-    this.isMenuActive = false;
-    this.closeMenuDialog = async () => {
-      const closed = await closeMenuModal(this.contextMenuDialogRef);
-      if (closed) {
-        this.contextMenuDialogRef = undefined;
-        this.isMenuActive = false;
-      }
-    };
     this.onClick = (event) => {
-      var _a;
       if (!this.hoverMode && !this.disabled) {
-        showContextMenu(event, {
-          multipleSelection: this.multipleSelection,
-          contentButtons: this.contentButtons,
-          placement: this.placement,
-          dialogTitle: this.dialogTitle,
-          subDialogTitle: this.subDialogTitle,
-          selectedItems: this.selectedItems,
-          className: this.host.className,
-          hostElement: ((_a = this.host) === null || _a === void 0 ? void 0 : _a.querySelector(this.hostSelector)) || this.host,
-          contextMenuClosed: this.contextMenuClosed,
-          contextMenuOpened: this.contextMenuOpened
-        });
+        showContextMenu(event, this.baseContextMenuProps);
       }
     };
-    this.onMouseMove = (event) => {
-      var _a;
-      if (this.hoverMode && !this.disabled && !this.isMenuActive && this.contextMenuDialogRef === undefined) {
-        this.isMenuActive = true;
-        this.contextMenuDialogRef = showContextMenu(event, {
-          multipleSelection: this.multipleSelection,
-          contentButtons: this.contentButtons,
-          placement: this.placement,
-          dialogTitle: this.dialogTitle,
-          subDialogTitle: this.subDialogTitle,
-          selectedItems: this.selectedItems,
-          className: this.host.className,
-          hostElement: ((_a = this.host) === null || _a === void 0 ? void 0 : _a.querySelector(this.hostSelector)) || this.host,
-          contextMenuClosed: { emit: () => this.isMenuActive && this.closeMenuDialog() },
-          contextMenuOpened: this.contextMenuOpened,
-          cursorPosition: this.cursorPosition
-        });
-      }
+  }
+  get contextMenuDialogElement() {
+    return document.querySelector('yoo-context-menu-dialog');
+  }
+  get hasContextMenuActive() {
+    return !!this.contextMenuDialogElement;
+  }
+  async closeMenuDialog() {
+    await closeMenuModal(this.contextMenuDialogElement);
+  }
+  get baseContextMenuProps() {
+    var _a;
+    return {
+      multipleSelection: this.multipleSelection,
+      contentButtons: this.contentButtons,
+      placement: this.placement,
+      dialogTitle: this.dialogTitle,
+      subDialogTitle: this.subDialogTitle,
+      selectedItems: this.selectedItems,
+      className: this.host.className,
+      contextMenuOpened: this.contextMenuOpened,
+      hostElement: ((_a = this.host) === null || _a === void 0 ? void 0 : _a.querySelector(this.hostSelector)) || this.host
     };
-    this.onMouseLeave = (event) => this.isMenuActive && !isMouseInBoundaries(event, this.contextMenuDialogRef, 15, 0) && this.closeMenuDialog();
+  }
+  onMouseMove(event) {
+    if (this.hoverMode && !this.disabled && !this.contextMenuDialogElement) {
+      showContextMenu(event, {
+        ...this.baseContextMenuProps,
+        cursorPosition: this.cursorPosition,
+        contextMenuClosed: { emit: () => this.hasContextMenuActive && this.closeMenuDialog() }
+      });
+    }
+  }
+  onMouseLeave(event) {
+    this.hasContextMenuActive && !isMouseInBoundaries(event, this.contextMenuDialogElement, 15, 0) && this.closeMenuDialog();
   }
   componentWillLoad() {
     if (this.multipleSelection) {
@@ -73,7 +68,7 @@ export class YooContextMenuComponent {
   }
   setSelectedItems(contentButtons) {
     const selectedItems = [];
-    if (contentButtons && contentButtons.length > 0) {
+    if (contentButtons === null || contentButtons === void 0 ? void 0 : contentButtons.length) {
       contentButtons.forEach((contentButton) => {
         selectedItems.push(contentButton.disabled ? null : contentButton.selected === undefined ? false : contentButton.selected);
       });
@@ -84,7 +79,7 @@ export class YooContextMenuComponent {
     const TagType = this.tooltipContent ? 'yoo-tooltip' : 'div';
     return (h(Host, { class: getAppContext(this.host) },
       h(TagType, { placement: "bottom", content: this.tooltipContent },
-        h("span", { "aria-haspopup": "true", "aria-expanded": "false", onClick: this.onClick, onMouseMove: this.onMouseMove, onMouseLeave: this.onMouseLeave },
+        h("span", { "aria-haspopup": "true", "aria-expanded": "false", onClick: this.onClick, onMouseMove: (ev) => this.onMouseMove(ev), onMouseLeave: (ev) => this.onMouseLeave(ev) },
           h("slot", null),
           this.hoverMode && h("yoo-icon", { name: "more", color: "stable" })))));
   }
@@ -106,7 +101,7 @@ export class YooContextMenuComponent {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": "Specify a custom host element"
@@ -128,7 +123,7 @@ export class YooContextMenuComponent {
         }
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": "Array of buttons to be presented in the menu."
@@ -148,13 +143,13 @@ export class YooContextMenuComponent {
         }
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": "Property used to control where the context menu will show. The options are 'below' & 'above'."
       },
       "attribute": "placement",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "'below'"
     },
     "dialogTitle": {
@@ -166,7 +161,7 @@ export class YooContextMenuComponent {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": "Used to show a menu title."
@@ -200,7 +195,7 @@ export class YooContextMenuComponent {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": "If ```true```, the user will be able to select multiple items in the menu."
@@ -218,7 +213,7 @@ export class YooContextMenuComponent {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
@@ -235,13 +230,13 @@ export class YooContextMenuComponent {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
       },
       "attribute": "disabled",
-      "reflect": false
+      "reflect": true
     },
     "hoverMode": {
       "type": "boolean",
@@ -252,7 +247,7 @@ export class YooContextMenuComponent {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": "Display the context menu dialog on hover if true.\nDisplay it on click if false."
@@ -270,7 +265,7 @@ export class YooContextMenuComponent {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": "Show an arrow cursor to the specified position."

package/dist/collection/components/2.molecules/reveal/reveal.css

@@ -709,8 +709,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host {
   display: grid;
   gap: var(--spacing-16, 1rem);
-  justify-content: center;
+  height: 100%;
   padding: var(--spacing-16, 1rem);
+  background-color: var(--stable-light, #f1f1f1);
 }
 :host .card {
   font-size: var(--font-size-20, 1.25rem);
@@ -757,7 +758,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   padding: var(--spacing-24, 1.5rem);
 }
 :host(.web) .card {
-  max-width: 82rem;
   cursor: pointer;
 }
 :host(.web) .card .card-front,

package/dist/collection/components/2.molecules/reveal/reveal.js

@@ -14,7 +14,6 @@ export class YooRevealComponent {
     this.cardsRevealed = 0;
   }
   onValuesChanged() {
-    this.cards = this.values;
     this.cardsRevealed = 0;
     this.revealedCardIndex = undefined;
   }
@@ -28,8 +27,8 @@ export class YooRevealComponent {
     }
   }
   updateClickedCards(index) {
-    if ((!this.cards[index].clicked || this.cards[index].clicked === false) && this.cardsRevealed !== this.cards.length) {
-      this.cards[index].clicked = true;
+    if ((!this.values[index].clicked || this.values[index].clicked === false) && this.cardsRevealed !== this.values.length) {
+      this.values[index].clicked = true;
       this.cardsRevealed = this.cardsRevealed + 1;
     }
   }
@@ -40,10 +39,10 @@ export class YooRevealComponent {
     }
     else {
       if (isFinite(this.revealedCardIndex)) {
-        this.cards[this.revealedCardIndex].revealed = false;
+        this.values[this.revealedCardIndex].revealed = false;
       }
       this.updateClickedCards(index);
-      this.cards[index].revealed = true;
+      this.values[index].revealed = true;
       this.revealedCardIndex = index;
     }
     this.updateValidity();
@@ -55,12 +54,8 @@ export class YooRevealComponent {
         h("div", { class: "card-back" }, translateMulti(card === null || card === void 0 ? void 0 : card.backside)))));
   }
   renderCards() {
-    if (!this.cards) {
-      this.cards = this.values;
-    }
-    return this.cards.map((card, index) => {
-      return this.renderCard(card, index);
-    });
+    var _a;
+    return (_a = this.values) === null || _a === void 0 ? void 0 : _a.map((card, index) => this.renderCard(card, index));
   }
   render() {
     return h(Host, { class: { web: isWeb(this.host) } }, this.values && this.renderCards());

package/dist/collection/components/app/login/login.js

@@ -3,7 +3,6 @@ import { debounce, disableKeyboardResize, enableKeyboardResize, getContrastColor
 // getUserLanguageKeys,
 isAndroid, isChromatic, isIonic, isIOS, isIphone5, isIphoneSE, isIphoneX, isNativeMobile, isTablet, isWeb, LoginFocusAnimation, setStatusBarDarkMode, showActionSheet, translate } from '@shared/utils';
 import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, State, Watch } from '@stencil/core';
-import { assignPressActions } from '../../../utils/gesture';
 import { getAppContext, querySelectorAllDeep } from '../../../utils/helpers/common-helpers';
 import { getElementDimensions } from '../../../utils/helpers/dimensions-helpers';
 const MIN_SCREEN_SIZE_LEFT_PANEL = 900;
@@ -38,7 +37,6 @@ export class YooLoginComponent {
     this.hideTitleAndFooterForIpadMini = false;
     this.inputValidators = [{ name: 'required' }];
     this.inputUIValidation = { valid: false, invalid: false };
-    this.lockAssignPress = false;
   }
   get isEmailValid() {
     var _a;
@@ -75,7 +73,7 @@ export class YooLoginComponent {
     }
     (_a = ScreenOrientation === null || ScreenOrientation === void 0 ? void 0 : ScreenOrientation.onChange) === null || _a === void 0 ? void 0 : _a.call(ScreenOrientation).subscribe(() => forceUpdate(this));
     if (this.ssoOnly) {
-      assignPressActions(this.poweredByElement, { lockAssignPress: this.lockAssignPress }, () => (this.hideLoginForm = false));
+      this.poweredByElement.onclick = () => { this.hideLoginForm = false; };
     }
   }
   componentDidUpdate() {

package/dist/collection/components/app-boost/lesson-question-result/lesson-question-result.js

@@ -11,6 +11,12 @@ export class YooLessonQuestionResultComponent {
   onResultTypeUpdated() {
     this.initFooter();
   }
+  onReplayAnimation() {
+    if (this.isAnimationFinished) {
+      this.lottieEl.stop();
+      this.lottieEl.play();
+    }
+  }
   get lottieType() {
     switch (this.resultType) {
       case 'question':
@@ -124,9 +130,7 @@ export class YooLessonQuestionResultComponent {
     this.setExplanation();
   }
   componentDidUpdate() {
-    if (this.isAnimationFinished) {
-      this.lottieEl.play();
-    }
+    this.onReplayAnimation();
   }
   async setExplanation() {
     var _a;
@@ -235,7 +239,7 @@ export class YooLessonQuestionResultComponent {
   }
   renderProgressBarLessonRecap() {
     var _a;
-    const progress = getCorrectAnswersCount(this.lessonData);
+    const progress = this.lessonData ? getCorrectAnswersCount(this.lessonData) : null;
     const min = this.lessonMinForCompliance;
     const max = (_a = this.fields) === null || _a === void 0 ? void 0 : _a.length;
     return (h("yoo-progress-recap", { heading: "CORRECTANSWERS", min: min, max: max, progress: progress, tooltip: translate(this.validated ? 'NUMBEROFCORRECTANSWERSWHENVALID' : 'NUMBEROFCORRECTANSWERSWHENINVALID', { smart_count: progress, min, max }) }));
@@ -836,5 +840,8 @@ export class YooLessonQuestionResultComponent {
     }, {
       "propName": "nextLesson",
       "methodName": "onResultTypeUpdated"
+    }, {
+      "propName": "isAnimationFinished",
+      "methodName": "onReplayAnimation"
     }]; }
 }

package/dist/collection/components/core/chat/chat.css

@@ -1084,11 +1084,25 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host .message-row {
   display: grid;
-  align-items: center;
-}
-:host .message-row.deleteable {
   grid-gap: var(--spacing-16, 1rem);
   grid-template-columns: auto 1fr;
+  align-items: center;
+}
+:host .message-row yoo-form-checkbox,
+:host .message-row yoo-chat-message {
+  transition: transform 0.5s;
+}
+:host .message-row yoo-chat-message[left] {
+  transform: translateX(-2.5rem);
+}
+:host .message-row yoo-form-checkbox {
+  transform: translateX(calc(-100% - 1.5rem));
+}
+:host .message-row.deleteable yoo-chat-message[left] {
+  transform: translateX(0rem);
+}
+:host .message-row.deleteable yoo-form-checkbox {
+  transform: translateX(calc(100% - 1.5rem));
 }
 :host .message-row .notification {
   display: flex;

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

@@ -171,20 +171,10 @@ export class YooChatComponent {
     }
   }
   componentDidLoad() {
-    this.initMessagesAndScrollToBottom();
-    if (this.showBackgroundVideo && !isNativeMobile()) {
-      this.playerReady.emit(this.videoElWrapper);
-    }
+    this.initChat();
   }
   componentDidUpdate() {
-    var _a, _b;
-    !this.scrollLocker && this.initMessagesAndScrollToBottom();
-    this.oldestMostRecentMessageToken && this.refreshMessages();
-    // re-render will remove video player, need to re-create the player
-    if (!isNativeMobile() && ((_a = this.broadcastParams) === null || _a === void 0 ? void 0 : _a.isLive) && this.showBackgroundVideo &&
-      ((_b = this.videoElWrapper) === null || _b === void 0 ? void 0 : _b.firstChild).childElementCount <= 0) {
-      this.playerReady.emit(this.videoElWrapper);
-    }
+    this.updateChat();
   }
   disconnectedCallback() {
     if (isNativeMobile()) {
@@ -197,11 +187,27 @@ export class YooChatComponent {
       cancelRequestInterval(this.requestIntervalID['value']);
     }
   }
+  initChat() {
+    this.initMessagesAndScrollToBottom();
+    if (this.showBackgroundVideo && !isNativeMobile()) {
+      this.playerReady.emit(this.videoElWrapper);
+    }
+  }
+  updateChat() {
+    var _a, _b;
+    //   this.initMessagesAndScrollToBottom();
+    this.refreshMessages();
+    // re-render will remove video player, need to re-create the player
+    if (!isNativeMobile() && ((_a = this.broadcastParams) === null || _a === void 0 ? void 0 : _a.isLive) && this.showBackgroundVideo &&
+      ((_b = this.videoElWrapper) === null || _b === void 0 ? void 0 : _b.firstChild).childElementCount <= 0) {
+      this.playerReady.emit(this.videoElWrapper);
+    }
+  }
   async initMessagesAndScrollToBottom() {
-    var _a;
+    var _a, _b, _c;
     this.chatFocused.emit(true);
     !this.scroll && (this.scroll = await ((_a = this.ionContent) === null || _a === void 0 ? void 0 : _a.getScrollElement()));
-    if (this.scroll && !this.oldestMostRecentMessageToken) {
+    if (this.scroll && !this.oldestMostRecentMessageToken && !this.scrollLocker && ((_c = (_b = this.messages) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.readonly)) {
       await Promise.allSettled(this.messageElements.map((el) => el === null || el === void 0 ? void 0 : el.initMessage()));
       await this.scroll.scrollToBottom(50);
       this.ionContent.classList.remove('hide');
@@ -226,13 +232,15 @@ export class YooChatComponent {
   }
   async refreshMessages() {
     var _a;
-    const messages = (((_a = this.messageElements) === null || _a === void 0 ? void 0 : _a.filter(e => !e.className.includes('hydrated'))) || []);
-    await Promise.all(messages.map(el => (el === null || el === void 0 ? void 0 : el.initMessage()) || Promise.resolve(true)));
-    const lastMessageElement = this.host.shadowRoot.querySelector(`[id="${this.oldestMostRecentMessageToken}"]`);
-    lastMessageElement && this.scroll.scrollTo({ top: lastMessageElement.offsetTop });
-    await Promise.all(messages.map(el => (el === null || el === void 0 ? void 0 : el.renderContent()) || Promise.resolve(true)));
-    this.oldestMostRecentMessageToken = null;
-    this.scrollLocker = true;
+    if (this.oldestMostRecentMessageToken) {
+      const messages = (((_a = this.messageElements) === null || _a === void 0 ? void 0 : _a.filter(e => !e.className.includes('hydrated'))) || []);
+      await Promise.all(messages.map(el => (el === null || el === void 0 ? void 0 : el.initMessage()) || Promise.resolve(true)));
+      const lastMessageElement = this.host.shadowRoot.querySelector(`[id="${this.oldestMostRecentMessageToken}"]`);
+      lastMessageElement && this.scroll.scrollTo({ top: lastMessageElement.offsetTop });
+      await Promise.all(messages.map(el => (el === null || el === void 0 ? void 0 : el.renderContent()) || Promise.resolve(true)));
+      this.oldestMostRecentMessageToken = null;
+      this.scrollLocker = true;
+    }
   }
   onChatFocused() {
     this.chatFocused.emit(true);
@@ -511,15 +519,15 @@ export class YooChatComponent {
       return dateFormat(date, getDateFormats(date).grouped);
     };
     return this.messages.map((m, i) => {
-      var _a;
+      var _a, _b;
       const { notificationParams, messageReceivedInfo } = (m === null || m === void 0 ? void 0 : m.options) || {};
-      const isDeleteable = !m.readonly && (((_a = m === null || m === void 0 ? void 0 : m.author) === null || _a === void 0 ? void 0 : _a._id) === getSession().userId || this.forceDelete);
+      const isDeleteable = !notificationParams && !m.readonly && m.timetoken !== ((_a = this.newMessage) === null || _a === void 0 ? void 0 : _a.timetoken) && (((_b = m === null || m === void 0 ? void 0 : m.author) === null || _b === void 0 ? void 0 : _b._id) === getSession().userId || this.forceDelete);
       const previousDate = getFormattedDateAtIndex(i - 1);
       const currentDate = getFormattedDateAtIndex(i);
       return !(m === null || m === void 0 ? void 0 : m.deleted) && [
         currentDate && (previousDate !== currentDate) && h("p", null, currentDate),
         h("section", { class: { 'message-row': true, deleteable: isDeleteable } },
-          isDeleteable && h("yoo-form-checkbox", { value: m.selected, onInputChanged: (ev) => {
+          h("yoo-form-checkbox", { value: m.selected, onInputChanged: (ev) => {
               m.selected = ev === null || ev === void 0 ? void 0 : ev.detail;
               this.onSelectMessage(m);
             } }),