@yoobic/yobi 8.7.3 → 8.7.5

package/dist/collection/components/grid/ag-grid/grid-renderers.js

@@ -1159,43 +1159,6 @@ function courseGridStatusRenderer(params) {
     return container;
   }
 }
-function courseGridKpiRenderer(params) {
-  const courseList = params.data;
-  const kpis = [
-    {
-      title: translate('YOOBICASSIGNEDUSERS'),
-      type: 'number',
-      value: courseList === null || courseList === void 0 ? void 0 : courseList.usersCount
-    },
-    {
-      title: translate('COMPLETED'),
-      type: 'number',
-      value: courseList === null || courseList === void 0 ? void 0 : courseList.completedCount
-    },
-    {
-      title: translate('COMPLETION'),
-      type: 'percent',
-      value: courseList === null || courseList === void 0 ? void 0 : courseList.completionRate
-    },
-    {
-      title: translate('CORRECTANSWERS'),
-      type: 'percent',
-      value: courseList === null || courseList === void 0 ? void 0 : courseList.averageScore
-    }
-  ];
-  const kpiCard = document.createElement('yoo-kpi-card');
-  kpiCard.kpiData = kpis;
-  kpiCard.hideIllustration = true;
-  kpiCard.classList.add('content-only');
-  kpiCard.style.setProperty('--value-font-weight', 'normal');
-  kpiCard.style.setProperty('--value-font-size', '0.875rem');
-  kpiCard.style.setProperty('--value-separator', ` 0.0625rem solid ${getCssColor('stable-light')}`);
-  kpiCard.style.setProperty('--value-title-color', getCssColor('text-color'));
-  kpiCard.style.setProperty('--value-title-font-size', '0.75rem');
-  const container = document.createElement('div');
-  container.appendChild(kpiCard);
-  return container;
-}
 export function getColorFromKey(key) {
   if (key === 'finished') {
     return 'dark';
@@ -1247,6 +1210,76 @@ export function getKeyTemplate(key, count, suffix = '', hideKey = false, hideCol
   }
   return `<yoo-tag color=${circleColor}>${(hideKey ? '' : displayName + ':') + count + (suffix || '')}</yoo-tag>`;
 }
+class CourseGridKpiRenderer {
+  getGui() {
+    return this.eGui;
+  }
+  getKpisData(params) {
+    var _a, _b, _c, _d;
+    const plan = params.data;
+    const kpis = [
+      {
+        title: translate('YOOBICASSIGNEDUSERS'),
+        type: 'number',
+        value: (_a = plan === null || plan === void 0 ? void 0 : plan.planStats) === null || _a === void 0 ? void 0 : _a.usersCount
+      },
+      {
+        title: translate('COMPLETED'),
+        type: 'number',
+        value: (_b = plan === null || plan === void 0 ? void 0 : plan.planStats) === null || _b === void 0 ? void 0 : _b.completedCount
+      },
+      {
+        title: translate('COMPLETION'),
+        type: 'percent',
+        value: (_c = plan === null || plan === void 0 ? void 0 : plan.planStats) === null || _c === void 0 ? void 0 : _c.completionRate
+      },
+      {
+        title: translate('CORRECTANSWERS'),
+        type: 'percent',
+        value: (_d = plan === null || plan === void 0 ? void 0 : plan.planStats) === null || _d === void 0 ? void 0 : _d.averageScore
+      }
+    ];
+    return kpis;
+  }
+  isLoading(params) {
+    var _a;
+    const plan = params.data;
+    return (_a = plan === null || plan === void 0 ? void 0 : plan.planStats) === null || _a === void 0 ? void 0 : _a.loading;
+  }
+  init(params) {
+    const kpis = this.getKpisData(params);
+    const kpiCard = document.createElement('yoo-kpi-card');
+    kpiCard.kpiData = kpis;
+    kpiCard.hideIllustration = true;
+    kpiCard.classList.add('content-only');
+    kpiCard.style.setProperty('--value-font-weight', 'normal');
+    kpiCard.style.setProperty('--value-font-size', '0.875rem');
+    kpiCard.style.setProperty('--value-separator', ` 0.0625rem solid ${getCssColor('stable-light')}`);
+    kpiCard.style.setProperty('--value-title-color', getCssColor('text-color'));
+    kpiCard.style.setProperty('--value-title-font-size', '0.75rem');
+    this.kpiCard = kpiCard;
+    const container = document.createElement('div');
+    container.appendChild(kpiCard);
+    if (this.isLoading(params)) {
+      container.classList.add('loading');
+    }
+    this.eGui = container;
+  }
+  refresh(params) {
+    var _a, _b;
+    if (this.isLoading(params)) {
+      (_a = this.getGui()) === null || _a === void 0 ? void 0 : _a.classList.add('loading');
+    }
+    else {
+      (_b = this.getGui()) === null || _b === void 0 ? void 0 : _b.classList.remove('loading');
+    }
+    const kpis = this.getKpisData(params);
+    if (this.kpiCard) {
+      this.kpiCard.kpiData = kpis;
+    }
+    return true;
+  }
+}
 class EntityRenderer {
   getGui() {
     return this.eGui;
@@ -1560,7 +1593,7 @@ export function getRenderer(renderer) {
     case 'courseGridStatusRenderer':
       return courseGridStatusRenderer;
     case 'courseGridKpiRenderer':
-      return courseGridKpiRenderer;
+      return CourseGridKpiRenderer;
     case 'entityRenderer':
       return EntityRenderer;
     case 'actionsRenderer':

package/dist/collection/components/grid/grid/grid.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.
@@ -4067,6 +4065,9 @@ svg:not(:root) {
 :host(.autocomplete) {
   height: 100%;
 }
+:host(.autocomplete) .container-base yoo-loader[size=large] {
+  height: calc(var(--spacing-08, 0.5rem) + var(--icon-size-04, 3rem));
+}
 :host(.autocomplete) .container-base yoo-loader.autocomplete {
   height: 45%;
 }

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

@@ -2097,7 +2097,7 @@ export class YooGridComponent {
     return (this.showSearch !== false && [
       !isWeb(this.host) && this.shouldRenderToggleSelectAll() && !this.showAutocompleteHeader && h("yoo-button", { class: "select-all", disabled: !this.canSelectAll, shape: "circular", fill: "transparent", rippleType: "unbounded", color: this.isSelectAll ? 'app-color' : 'stable', onClick: () => this.onToggleSelectAll() }, h("yoo-icon", { name: "select-all", color: this.isSelectAll ? 'app-color' : 'stable' })),
       (isWeb(this.host) || this.hideAdvancedFilters || this.showFilters === false) ? null : h("yoo-button", { class: "margin-right filters", color: "light", onClick: () => this.onShowFilterAdvanced(), fill: "transparent", shape: "circular", rippleType: "bounded" }, h("yoo-icon", { name: "filter", color: "stable", slot: "start", size: "medium" }), this.getActiveFiltersCount() > 0 && (h("yoo-badge", { color: "app-color", slot: "end", class: "count floating", text: `${this.getActiveFiltersCount()}` }))),
-      h("yoo-form-input", { ref: (el) => (this.input = el), debounce: 1200, autocapitalize: "none", autocorrect: "off", disabled: this.isSelectAll, class: {
+      h("yoo-form-input", { ref: (el) => (this.input = el), debounce: 1200, autocapitalize: "none", autocorrect: "off", disabled: this.isSelectAll, disableKeyboardResizing: true, class: {
           search: true,
           flex: !isWeb(this.host),
           web: isWeb(this.host),
@@ -4303,7 +4303,7 @@ export class YooGridComponent {
         "mutable": false,
         "complexType": {
           "original": "TIllustration",
-          "resolved": "\"activity\" | \"aisles\" | \"barcode\" | \"battle\" | \"calendar\" | \"campaign\" | \"chart\" | \"chat\" | \"check\" | \"comment\" | \"contact\" | \"courses\" | \"database\" | \"feed\" | \"file\" | \"filter\" | \"folder\" | \"group\" | \"image\" | \"inbox\" | \"journey\" | \"leaderboard\" | \"lock\" | \"map\" | \"mission\" | \"note\" | \"offline\" | \"password\" | \"plugin\" | \"poll\" | \"publish\" | \"questions\" | \"request\" | \"scoring\" | \"search\" | \"security\" | \"settings\" | \"store\" | \"tag\" | \"user\" | \"visit\" | \"workflow\" | \"aclRole\" | \"blog\" | \"campaignfilters\" | \"channel\" | \"communities\" | \"custommodels\" | \"emails\" | \"feeds\" | \"files\" | \"geofilters\" | \"groups\" | \"hierarchy\" | \"htmltemplates\" | \"incentives\" | \"lessons\" | \"locations\" | \"locationtypes\" | \"memos\" | \"missiondescriptions\" | \"missiondescriptiontemplates\" | \"missions\" | \"plans\" | \"productbatch\" | \"products\" | \"tenants\" | \"translations\" | \"userranks\" | \"users\" | \"photo\" | \"reject\" | \"none\" | \"inventory\" | \"kanban\" | \"knowledgelibrary\" | \"admin\" | \"service\" | \"field\" | \"dashboard\" | \"pharmaone\" | \"score\" | \"team\" | \"todo\" | \"trial\" | \"videocall\" | \"allowcamera\" | \"areamanager\" | \"category\" | \"empty\" | \"error\" | \"faceid\" | \"form\" | \"template\" | \"location\" | \"newsletter\" | \"nodata\" | \"notification\" | \"offlinemode\" | \"requestraised\" | \"robot\" | \"robotfailed\" | \"robotgenerating\" | \"robotsleeping\" | \"role\" | \"storemanager\" | \"touchid\" | \"usertrial\" | \"waiting\" | \"hq\" | \"missionstovalidate\" | \"wiki\" | \"goto\" | \"archived\" | \"allstores\" | \"analytics\" | \"artificialintelligence\" | \"availablestores\" | \"barcodelong\" | \"barcodeold\" | \"communitiestodiscover\" | \"courseqrcode\" | \"createannouncement\" | \"createmission\" | \"createpoll\" | \"createrequest\" | \"customformfield\" | \"enrol\" | \"fielduser\" | \"generic_chart\" | \"geocoding\" | \"magic-link\" | \"new-user\" | \"oneoff\" | \"page\" | \"paperplane\" | \"payments\" | \"pdfauditexport\" | \"pdfclassic\" | \"pdfcontract\" | \"pdfphotoreport\" | \"photosplaceholder\" | \"recurring\" | \"robot2\" | \"robotgenerated\" | \"robotsuccess\" | \"selectedstores\" | \"sending\" | \"sent\" | \"shopping\" | \"subscription\" | \"todoold\" | \"welcomeuser\" | \"generalscoring\" | \"answers\" | \"barcodealert\" | \"briefcase\" | \"emailblocked\" | \"memo\" | \"podium\" | \"widgetcourses\" | \"wikis\" | \"subplans\"",
+          "resolved": "\"activity\" | \"aisles\" | \"barcode\" | \"battle\" | \"calendar\" | \"campaign\" | \"chart\" | \"chat\" | \"check\" | \"comment\" | \"contact\" | \"courses\" | \"database\" | \"feed\" | \"file\" | \"filter\" | \"folder\" | \"group\" | \"image\" | \"inbox\" | \"journey\" | \"leaderboard\" | \"lock\" | \"map\" | \"mission\" | \"note\" | \"offline\" | \"password\" | \"plugin\" | \"poll\" | \"publish\" | \"questions\" | \"request\" | \"scoring\" | \"search\" | \"security\" | \"settings\" | \"store\" | \"tag\" | \"upload\" | \"user\" | \"visit\" | \"workflow\" | \"aclRole\" | \"blog\" | \"campaignfilters\" | \"channel\" | \"communities\" | \"custommodels\" | \"emails\" | \"feeds\" | \"files\" | \"geofilters\" | \"groups\" | \"hierarchy\" | \"htmltemplates\" | \"incentives\" | \"lessons\" | \"locations\" | \"locationtypes\" | \"memos\" | \"missiondescriptions\" | \"missiondescriptiontemplates\" | \"missions\" | \"plans\" | \"productbatch\" | \"products\" | \"tenants\" | \"translations\" | \"userranks\" | \"users\" | \"photo\" | \"reject\" | \"none\" | \"inventory\" | \"kanban\" | \"knowledgelibrary\" | \"admin\" | \"service\" | \"field\" | \"dashboard\" | \"pharmaone\" | \"score\" | \"team\" | \"todo\" | \"trial\" | \"videocall\" | \"allowcamera\" | \"areamanager\" | \"category\" | \"empty\" | \"error\" | \"faceid\" | \"form\" | \"template\" | \"location\" | \"newsletter\" | \"nodata\" | \"notification\" | \"offlinemode\" | \"requestraised\" | \"robot\" | \"robotfailed\" | \"robotgenerating\" | \"robotsleeping\" | \"role\" | \"storemanager\" | \"touchid\" | \"usertrial\" | \"waiting\" | \"hq\" | \"missionstovalidate\" | \"wiki\" | \"goto\" | \"archived\" | \"allstores\" | \"analytics\" | \"approval\" | \"artificialintelligence\" | \"availablestores\" | \"barcodelong\" | \"barcodeold\" | \"communitiestodiscover\" | \"courseqrcode\" | \"createannouncement\" | \"createmission\" | \"createpoll\" | \"createrequest\" | \"customformfield\" | \"enrol\" | \"fielduser\" | \"generalscoring\" | \"generic_chart\" | \"geocoding\" | \"magic-link\" | \"new-user\" | \"oneoff\" | \"page\" | \"paperplane\" | \"payments\" | \"pdfauditexport\" | \"pdfclassic\" | \"pdfcontract\" | \"pdfphotoreport\" | \"photosplaceholder\" | \"recurring\" | \"robot2\" | \"robotgenerated\" | \"robotsuccess\" | \"selectedstores\" | \"sending\" | \"sent\" | \"shopping\" | \"subscription\" | \"todoold\" | \"welcomeuser\" | \"answers\" | \"barcodealert\" | \"briefcase\" | \"emailblocked\" | \"memo\" | \"podium\" | \"subplans\" | \"widgetcourses\" | \"wikis\"",
           "references": {
             "TIllustration": {
               "location": "import",
@@ -6560,7 +6560,7 @@ export class YooGridComponent {
         "mutable": false,
         "complexType": {
           "original": "TEntityMapping",
-          "resolved": "(item: IEntity, entityType: EntityType, displayType: CardType, displaySize?: TSize, useCellOverlay?: boolean) => string | ICardListEntry | ICardMediaEntry",
+          "resolved": "(item: IEntity, entityType: EntityType, displayType: CardType, displaySize?: TSize, useCellOverlay?: boolean) => string | ICardListEntry | ICardListColorEntry | ICardMediaEntry",
           "references": {
             "TEntityMapping": {
               "location": "import",

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

@@ -483,8 +483,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

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

@@ -509,9 +509,9 @@ export class YooGridCalendarComponent {
           else {
             const allDay = get(i, 'allDay') === true; //!!get(i, 'rrule') ||;
             let title = this.getEventTitle(i);
-            if (!isWeb(this.host)) {
-              title = title === null || title === void 0 ? void 0 : title.substring(0, 50);
-            }
+            //if (!isWeb(this.host)) {
+            title = title === null || title === void 0 ? void 0 : title.substring(0, 50);
+            //}
             const eventData = {
               title,
               start,

package/dist/collection/components/grid/grid-stack/grid-stack.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

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

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/components/layout/layout-one-column/layout-one-column.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

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

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

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

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/components/layout/layout-two-columns/layout-two-columns.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/components/layout/layout-two-columns/layout-two-columns.js

@@ -1,4 +1,3 @@
-import { translate } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 export class YooLayoutTwoColumsComponent {
   constructor() {
@@ -6,7 +5,7 @@ export class YooLayoutTwoColumsComponent {
     this.hideHeader = false;
   }
   renderHeader() {
-    return h("yoo-header", { class: "no-border" }, h("yoo-navbar", { centerTitle: false }, h("yoo-items", { slot: "start" }, h("slot", { name: "top-left" })), h("yoo-truncate", null, " ", translate(this.header), " "), h("yoo-items", { slot: "end", class: "pointer-events" }, h("slot", { name: "top-right" }))));
+    return h("yoo-header", { class: "no-border" }, h("yoo-navbar", { centerTitle: false }, h("yoo-items", { slot: "start" }, h("slot", { name: "top-left" })), h("yoo-breadcrumbs", { showHome: true, homeName: this.header }), h("yoo-items", { slot: "end", class: "pointer-events" }, h("slot", { name: "top-right" }))));
   }
   renderBody() {
     return h("div", { class: "body" }, h("div", { class: "left-part" }, h("slot", { name: "left-part" })), h("div", { class: "right-part" }, h("slot", { name: "right-part" })));

package/dist/collection/components/map/amap/amap.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/components/map/map/map.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

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

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/components/map/map-legend/map-legend.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/components/scanner/barcode/barcode.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/components/scanner/barcode-dialog/barcode-dialog.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/components/scanner/scandit/scandit.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

package/dist/collection/feature-communicate/chat/card-chat/card-chat.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.

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

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.
@@ -208,7 +206,6 @@ svg:not(:root) {
 :host {
   --typing-username-padding-left: 45px;
   --gradient-background-image: linear-gradient(transparent 60%, var(--dark-80, rgba(0, 0, 0, 0.8))100%);
-  --keyboard-transform: unset;
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -334,15 +331,6 @@ svg:not(:root) {
     transform: translateY(0);
   }
 }
-:host .keyboard-spacer {
-  width: 100%;
-  height: 0;
-  transition: height 0.35s cubic-bezier(0.25, 1, 0.3, 1);
-}
-:host .input-bar-container {
-  transform: var(--keyboard-transform);
-  transition: transform 0.35s cubic-bezier(0.25, 1, 0.3, 1);
-}
 :host .delete-mode-header {
   animation: slide-down 0.4s ease;
 }

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

@@ -1,5 +1,5 @@
 import { BroadcastType, MessageType } from '@shared/interfaces';
-import { addKeyboardEventListener, cancelRequestInterval, closeModal, dateFormat, disableKeyboardResize, dispatchCustomEvent, downloadFile, enableKeyboardResize, findParent, floatingIconAnimation, getAsyncExtraData, getFormattedCountDownToDisplay, getSession, getUserDisplayName, isGif, isImage, isIOS, isIphoneX, isNativeMobile, isNotificationMessage, isRichContentMessage, isVideo, isWeb, removeKeyboardEventListeners, requestInterval, showAlert, translate } from '@shared/utils';
+import { cancelRequestInterval, closeModal, dateFormat, dispatchCustomEvent, downloadFile, findParent, floatingIconAnimation, getAsyncExtraData, getFormattedCountDownToDisplay, getSession, getUserDisplayName, isGif, isImage, isIOS, isIphoneX, isNativeMobile, isNotificationMessage, isRichContentMessage, isVideo, isWeb, requestInterval, showAlert, translate } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 import { getButton } from '@yobi/utils/button.factory';
 import { getDateFormats, parseMediaMessageForSlidesMedia } from '@yobi/utils/helpers/chat-helpers';
@@ -20,7 +20,6 @@ export class YooChatComponent {
     this.showBackgroundVideo = undefined;
     this.deleteModeEnabled = undefined;
     this.canVideoCall = undefined;
-    this.enableKeyboardResizing = undefined;
     this.closeIcon = undefined;
     this.usersTyping = undefined;
     this.isOnline = undefined;
@@ -38,7 +37,6 @@ export class YooChatComponent {
     this.countDownValue = undefined;
     this.showCountdown = undefined;
     this.countDownStartValue = undefined;
-    this.keyboardHeight = undefined;
     this.hideControls = undefined;
     this.showLoader = undefined;
   }
@@ -76,7 +74,6 @@ export class YooChatComponent {
   onInputFocused() {
     var _a;
     this.inputFocused = true;
-    this.scrollBottomOnKeyboradShown = true;
     if (!isNativeMobile()) {
       this.oldestMostRecentMessageToken = null;
       (_a = this.scroll) === null || _a === void 0 ? void 0 : _a.scrollToBottom(250);
@@ -93,12 +90,6 @@ export class YooChatComponent {
       this.preventToggle = false;
     }, 200); // allow reaction click to come through first
   }
-  onKeyboardShown() {
-    if (this.scrollBottomOnKeyboradShown) {
-      this.scrollToBottom();
-      this.scrollBottomOnKeyboradShown = false;
-    }
-  }
   onMediaChatClicked(ev) {
     if (!ev.detail) {
       return;
@@ -164,6 +155,7 @@ export class YooChatComponent {
   }
   async scrollToBottom(scrollBottomOnUpdated) {
     if (scrollBottomOnUpdated && this.scroll) {
+      this.oldestMostRecentMessageToken = null;
       return this.scroll.scrollToBottom(200);
     }
   }
@@ -207,22 +199,30 @@ export class YooChatComponent {
       this.hideControls = true;
     }
   }
+  get areAllMessagesLoaded() {
+    var _a;
+    return ((_a = this.messageElements) === null || _a === void 0 ? void 0 : _a.length) === this.messages.length;
+  }
   componentDidLoad() {
     this.initChat();
+    this.shouldScrollBottom = !this.areAllMessagesLoaded;
   }
   componentDidUpdate() {
+    var _a;
     this.updateChat();
+    const forceScroll = !this.lastUpdateElementsCount && !!this.messageElements.length;
+    if (this.shouldScrollBottom || forceScroll) {
+      this.initMessagesAndScrollToBottom();
+      this.shouldScrollBottom = false;
+    }
+    this.lastUpdateElementsCount = (_a = this.messageElements) === null || _a === void 0 ? void 0 : _a.length;
   }
   disconnectedCallback() {
-    if (isNativeMobile()) {
-      removeKeyboardEventListeners();
-    }
     if (this.requestIntervalID) {
       cancelRequestInterval(this.requestIntervalID['value']);
     }
   }
   initChat() {
-    this.initKeyboardListeners();
     this.initMessagesAndScrollToBottom();
     if (this.showBackgroundVideo && !isNativeMobile()) {
       this.playerReady.emit(this.videoElWrapper);
@@ -253,42 +253,6 @@ export class YooChatComponent {
       getAsyncExtraData({ type: 'user-detail', params: { user: this.users[0] } });
     }
   }
-  initKeyboardListeners() {
-    if (isNativeMobile()) {
-      addKeyboardEventListener('keyboardDidShow', () => {
-        setTimeout(() => {
-          var _a;
-          this.oldestMostRecentMessageToken = null;
-          (_a = this.scroll) === null || _a === void 0 ? void 0 : _a.scrollToBottom(400);
-        }, 300);
-      });
-      this.broadcastMode && addKeyboardEventListener('keyboardDidHide', () => {
-        setTimeout(() => {
-          var _a;
-          (_a = this.scroll) === null || _a === void 0 ? void 0 : _a.scrollToBottom(400);
-        }, 300);
-      });
-      if (isIOS()) {
-        addKeyboardEventListener('keyboardWillShow', (ev) => {
-          this.toggleKeyboardResize(true);
-          this.keyboardHeight = ev.keyboardHeight || 0;
-          this.host.style.setProperty('--keyboard-transform', `translateY(-${this.keyboardHeight}px)`);
-        });
-        addKeyboardEventListener('keyboardWillHide', () => {
-          this.toggleKeyboardResize(false);
-          this.keyboardHeight = 0;
-          this.host.style.setProperty('--keyboard-transform', 'translateY(0)');
-        });
-      }
-    }
-  }
-  toggleKeyboardResize(enabled) {
-    if (isIOS()) {
-      this.enableKeyboardResizing
-        ? enabled ? enableKeyboardResize() : disableKeyboardResize()
-        : enabled ? disableKeyboardResize() : enableKeyboardResize();
-    }
-  }
   async refreshMessages() {
     var _a;
     if (this.oldestMostRecentMessageToken) {
@@ -659,7 +623,6 @@ export class YooChatComponent {
           'bg-light': !this.transparent,
           'simple-content hide': true
         }, forceOverscroll: false, scrollEvents: true, ref: (el) => (this.ionContent = el) }, !isWeb(this.host) && h("yoo-ion-refresher", { class: { transparent: this.transparent }, slot: "fixed", onIonRefresh: () => this.onPullToRefresh(), disabled: this.deleteModeEnabled, ref: (el) => (this.refresher = el) }, h("yoo-ion-refresher-content", { pullingText: translate('PULLTOREFRESH') })), h("div", { onClick: () => dispatchCustomEvent('hideBottomDialog', window), class: { 'messages-container': true, 'iphone-x': isIphoneX() } }, this.messages && this.renderMessages(), this.showLoader && h("yoo-loader", { class: "loader transparent" }), this.isSomeoneTyping && this.renderSomeoneIsTyping())),
-      !this.hideInputBar && isIOS() && h("div", { class: "keyboard-spacer", style: { height: `${this.keyboardHeight || 0}px` } }),
       this.hideInputBar ? null : this.deleteModeEnabled ? this.renderDeleteModeFooter() : this.renderInputBar()
     ];
   }
@@ -884,23 +847,6 @@ export class YooChatComponent {
         "attribute": "can-video-call",
         "reflect": false
       },
-      "enableKeyboardResizing": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "enable-keyboard-resizing",
-        "reflect": false
-      },
       "closeIcon": {
         "type": "string",
         "mutable": false,
@@ -1132,7 +1078,6 @@ export class YooChatComponent {
       "countDownValue": {},
       "showCountdown": {},
       "countDownStartValue": {},
-      "keyboardHeight": {},
       "hideControls": {},
       "showLoader": {}
     };
@@ -1580,12 +1525,6 @@ export class YooChatComponent {
         "target": undefined,
         "capture": false,
         "passive": false
-      }, {
-        "name": "keyboardDidShow",
-        "method": "onKeyboardShown",
-        "target": "window",
-        "capture": false,
-        "passive": false
       }, {
         "name": "mediaChatClicked",
         "method": "onMediaChatClicked",

package/dist/collection/feature-communicate/chat/chat-message/chat-message.css

@@ -112,8 +112,6 @@ ________________________________________________________________________________
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
 /* Text Direction - ltr / rtl
 $app-direction: multi | rtl | ltr | null (default)
 multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.