@yoobic/yobi 8.3.3 → 8.4.0-0

package/dist/collection/components/form/scratch-card/scratch-card.js

@@ -29,11 +29,11 @@ export class YooScratchCardComponent {
   get shouldRevealImage() {
     var _a;
     const REVEAL_THRESHOLD = 80;
-    const { width, height } = this.canvasElement || {};
-    if (!width || !height) {
+    const { width } = this.canvasElement || {};
+    if (!width) {
       return false;
     }
-    const imageData = (_a = this.canvasContext) === null || _a === void 0 ? void 0 : _a.getImageData(0, 0, width, height);
+    const imageData = (_a = this.canvasContext) === null || _a === void 0 ? void 0 : _a.getImageData(0, 0, width, width);
     return this.getUncoveredPercentage(imageData) >= REVEAL_THRESHOLD;
   }
   get hostBounds() {
@@ -65,11 +65,11 @@ export class YooScratchCardComponent {
       image.src = this.canvasSrc;
       this.isCanvasLoaded = await new Promise((resolve, reject) => {
         image.onload = () => {
-          const { width, height } = this.hostBounds;
-          const hasBounding = !!width && !!height;
+          const { width } = this.hostBounds;
+          const hasBounding = !!width;
           if (hasBounding) {
-            Object.assign(this.canvasElement, { width, height });
-            this.canvasContext.drawImage(image, 0, 0, width, height);
+            Object.assign(this.canvasElement, { width, height: width });
+            this.canvasContext.drawImage(image, 0, 0, width, width);
             this.canvasElement.removeAttribute('fade-out');
             this.buttonElement.removeAttribute('visible');
           }
@@ -87,6 +87,7 @@ export class YooScratchCardComponent {
         event.preventDefault();
         this.isDrawing = true;
         lastPoint = getPointerCoordinates(event, this.canvasElement);
+        this.blockMoves.emit(true);
       };
       const drawLine = (event) => {
         if (this.canvasContext) {
@@ -119,6 +120,7 @@ export class YooScratchCardComponent {
       };
       const stopDraw = () => {
         this.isDrawing = false;
+        this.blockMoves.emit(false);
       };
       if (isWeb(this.host)) {
         this.canvasElement.onmousedown = startDraw;

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

@@ -360,7 +360,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host .message #medias yoo-img {
   --border-radius: var(--border-radius-08, 0.5rem);
-  max-width: calc(100% - 0.5rem);
+  max-width: calc(100% - var(--spacing-08, 0.5rem));
 }
 :host .message #medias yoo-videoplayer-core {
   --poster-size: cover;
@@ -368,6 +368,10 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   height: var(--media-height);
   object-fit: cover;
 }
+:host .message #medias yoo-img,
+:host .message #medias yoo-videoplayer-core {
+  max-width: 100%;
+}
 :host .message .media-loader-container {
   position: relative;
   background: var(--stable-alt, #d0d0d0);

package/dist/collection/feature-communicate/document/card-file/card-file.css

@@ -221,37 +221,77 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   bottom: auto;
   left: auto;
 }
-:host .thumbnail {
+:host section:first-of-type {
   border-radius: var(--border-radius-04, 0.25rem);
 }
-:host .thumbnail:first-child {
+:host section:first-of-type yoo-icon {
   margin: 0 auto;
 }
-:host .thumbnail yoo-img {
+:host section:first-of-type yoo-img {
   border-radius: var(--border-radius-04, 0.25rem);
 }
-:host .details {
+:host section:last-of-type {
   display: inline-grid;
   padding-right: var(--spacing-08, 0.5rem);
   line-height: 1.75;
   text-align: right;
 }
-:host .details #file-name {
+:host section:last-of-type #name {
   color: var(--dark, #000000);
   font-size: var(--font-size-14, 0.875rem);
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-:host .details #file-size {
+:host section:last-of-type #size {
   color: var(--stable, #adadad);
   font-size: var(--font-size-12, 0.75rem);
 }
 
-:host([type=audio]) {
+:host([type*=audio]) {
   display: block;
   padding: var(--spacing-16, 1rem);
 }
-:host([type=audio]) yoo-audio-player {
+:host([type*=audio]) yoo-audio-player {
   --range-trail-color: var(--stable-20, rgba(173, 173, 173, 0.2));
+}
+
+:host([loading]) {
+  height: 4.875rem;
+}
+:host([loading]) div {
+  animation: pulseHolderShimmerGray 2s infinite ease-in-out;
+}
+@keyframes pulseHolderShimmerGray {
+  0% {
+    background-color: var(--stable-20, rgba(173, 173, 173, 0.2));
+  }
+  50% {
+    background-color: var(--stable-40, rgba(173, 173, 173, 0.4));
+  }
+  100% {
+    background-color: var(--stable-20, rgba(173, 173, 173, 0.2));
+  }
+}
+:host([loading]) div#ph-icon {
+  width: 60%;
+  height: var(--spacing-32, 2rem);
+  margin: 0 auto;
+  border-radius: 0 var(--spacing-16, 1rem) 0 0;
+}
+:host([loading]) section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-08, 0.5rem);
+  align-items: end;
+  height: 100%;
+}
+:host([loading]) section div {
+  height: 45%;
+}
+:host([loading]) section div:first-of-type {
+  width: 50%;
+}
+:host([loading]) section div:last-of-type {
+  width: 25%;
 }

package/dist/collection/feature-communicate/document/card-file/card-file.js

@@ -1,4 +1,4 @@
-import { getIconColor, getIconName, getMimeType, getType, isAudio, isImage, isVideo, pipes, toPng } from '@shared/utils';
+import { getIconColor, getIconName, getType, isAudio, isImage, isImageUrl, isVideo, pipes, toPng } from '@shared/utils';
 import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';
 export class YooCardFileComponent {
   constructor() {
@@ -7,6 +7,10 @@ export class YooCardFileComponent {
      */
     this.isVisible = true;
   }
+  async onFileChanged() {
+    this.localFile = this.file;
+    await this.localFile && this.prepareFile();
+  }
   get fileName() {
     var _a, _b, _c;
     return this.customFileName || ((_a = this.localFile) === null || _a === void 0 ? void 0 : _a['localURL']) || ((_b = this.localFile) === null || _b === void 0 ? void 0 : _b['_filename']) || ((_c = this.localFile) === null || _c === void 0 ? void 0 : _c['name']) || new Date().toISOString();
@@ -16,65 +20,63 @@ export class YooCardFileComponent {
     const file = typeof ((_b = (_a = this.localFile) === null || _a === void 0 ? void 0 : _a['name']) === null || _b === void 0 ? void 0 : _b[0]) !== 'string' ? (_d = (_c = this.localFile) === null || _c === void 0 ? void 0 : _c['name']) === null || _d === void 0 ? void 0 : _d[0] : this.localFile;
     return pipes.fileSize.transform(file === null || file === void 0 ? void 0 : file.size);
   }
-  get isImage() {
-    return this.type === 'photo' || isImage(this.fileSrc);
-  }
-  get isVideo() {
-    return this.type === 'video' || isVideo(this.fileSrc);
-  }
-  get isAudio() {
-    return this.type === 'audio' || isAudio(this.localFile);
+  get isType() {
+    var _a, _b, _c;
+    return {
+      image: this.type === 'photo' || ((_a = this.fileType) === null || _a === void 0 ? void 0 : _a.includes('image')) || isImageUrl(this.fileSrc) || isImage(this.fileSrc),
+      video: this.type === 'video' || ((_b = this.fileType) === null || _b === void 0 ? void 0 : _b.includes('video')) || isVideo(this.fileSrc),
+      audio: this.type === 'audio' || ((_c = this.fileType) === null || _c === void 0 ? void 0 : _c.includes('audio')) || isAudio(this.fileSrc)
+    };
   }
   get hasIcon() {
     return !!this.iconName && this.iconName !== 'image';
   }
   async componentWillLoad() {
-    this.localFile = this.file;
-    await this.localFile && this.prepareFile();
-  }
-  async onFileChanged() {
-    this.localFile = this.file;
-    await this.localFile && this.prepareFile();
+    await this.prepareFile();
   }
   async prepareFile() {
-    this.iconName = getIconName(this.localFile);
-    this.iconColor = getIconColor(this.localFile);
-    this.fileSrc = this.localFile['_downloadURL'] || this.localFile;
-    if (typeof this.localFile === 'string') {
-      const mimeType = getMimeType(this.localFile);
+    var _a;
+    this.isLoading = true;
+    this.fileSrc = ((_a = this.file) === null || _a === void 0 ? void 0 : _a['_downloadURL']) || this.file;
+    if (typeof this.file === 'string') {
       try {
-        const response = await fetch(this.localFile);
-        const blobData = await response.blob();
-        const fileName = this.localFile.split('/').pop();
-        blobData && (this.localFile = new File([blobData], fileName, { type: mimeType }));
+        const response = await fetch(this.file);
+        const blobData = await (response === null || response === void 0 ? void 0 : response.blob());
+        const fileName = this.file.split('/').pop();
+        blobData && (this.localFile = new File([blobData], fileName, { type: blobData === null || blobData === void 0 ? void 0 : blobData.type }));
       }
       catch (err) {
-        // do nothing
+        this.localFile = this.file;
       }
     }
+    else {
+      this.localFile = this.file;
+    }
+    this.fileType = this.type || getType(this.localFile);
+    this.iconName = getIconName(this.localFile);
+    this.iconColor = getIconColor(this.localFile);
+    await new Promise((resolve) => {
+      setTimeout(() => {
+        this.isLoading = false;
+        resolve();
+      }, 750);
+    });
   }
   renderFileIcon() {
-    return this.hasIcon && !this.isImage && (h("yoo-icon", { name: this.iconName, color: this.iconColor }));
+    return this.hasIcon && !this.isType.image && (h("yoo-icon", { name: this.iconName, color: this.iconColor }));
   }
   renderClose() {
     return this.isClosable && h("yoo-icon", { name: "close" });
   }
   renderDetails() {
-    return h("section", { class: "details" },
-      this.fileName && h("span", { id: "file-name", innerHTML: this.fileName }),
-      this.fileSize && h("span", { id: "file-size", innerHTML: this.fileSize }));
+    return h("section", null,
+      this.fileName && h("span", { id: "name", innerHTML: this.fileName }),
+      this.fileSize && h("span", { id: "size", innerHTML: this.fileSize }));
   }
   renderThumbnail() {
-    let thumbnail = null;
-    if (this.isVideo) {
-      thumbnail = toPng(this.fileSrc);
-    }
-    if (this.isImage) {
-      thumbnail = this.fileSrc;
-    }
-    return h("section", { class: "thumbnail" },
-      this.hasIcon && !this.isImage && !this.isVideo && h("yoo-icon", { size: "large", name: this.iconName, color: this.iconColor }),
-      (this.isImage || this.isVideo) && h("yoo-img", { src: thumbnail }));
+    return h("section", null,
+      this.hasIcon && !this.isType.image && !this.isType.video && h("yoo-icon", { size: "large", name: this.iconName, color: this.iconColor }),
+      (this.isType.image || this.isType.video) && h("yoo-img", { src: this.isType.video ? toPng(this.fileSrc) : this.fileSrc }));
   }
   renderDocumentCard() {
     return [this.renderClose(),
@@ -86,10 +88,15 @@ export class YooCardFileComponent {
     return h("yoo-audio-player", { isVisible: this.isVisible, src: this.fileSrc });
   }
   renderContent() {
-    return this.isAudio ? this.renderAudioCard() : this.renderDocumentCard();
+    return this.isType.audio ? this.renderAudioCard() : this.renderDocumentCard();
+  }
+  renderLoading() {
+    return [h("div", { id: "ph-icon" }), h("section", null,
+        h("div", null),
+        h("div", null))];
   }
   render() {
-    return (h(Host, { ...{ type: this.type || getType(this.localFile) } }, this.renderContent()));
+    return h(Host, { ...{ type: this.fileType, loading: this.isLoading } }, this.isLoading ? this.renderLoading() : this.renderContent());
   }
   static get is() { return "yoo-card-file"; }
   static get encapsulation() { return "shadow"; }
@@ -196,7 +203,7 @@ export class YooCardFileComponent {
     }
   }; }
   static get states() { return {
-    "localFile": {}
+    "isLoading": {}
   }; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{

package/dist/collection/feature-communicate/feed/card-feed/default/card-feed.js

@@ -556,7 +556,7 @@ export class YooCardFeedComponent {
   }
   renderFiles(documents) {
     return (h("div", { class: "feed-document-container" },
-      h("yoo-form-carousel", { mediaType: "document", allowSwipeDownDismiss: false, mediaSrc: documents })));
+      h("yoo-form-carousel", { mediaType: "document", allowSwipeDownDismiss: false, mediaSrc: documents, hideSecondaryActions: this.previewMode })));
   }
   renderPlan() {
     return (h("div", { class: "feed-plan" },

package/dist/collection/feature-learn/learning/lesson-question-result/lesson-question-result.css

@@ -202,6 +202,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* spacing for padding, margin, etc... */
 /* shadow */
 :host {
+  position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -217,46 +218,38 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   align-items: center;
   width: 100%;
 }
+:host yoo-ion-scroll yoo-points-recap,
+:host yoo-ion-scroll yoo-progress-recap,
+:host yoo-ion-scroll yoo-tag[color=success-20],
+:host yoo-ion-scroll [class^=result] {
+  margin: 0 auto;
+  text-align: center;
+}
+:host yoo-ion-scroll yoo-points-recap {
+  padding-top: var(--spacing-32, 2rem);
+}
 :host yoo-ion-scroll .result-title {
-  margin: var(--spacing-08, 0.5rem) 0 var(--spacing-16, 1rem) 0;
   color: var(--app-color, #5a30f4);
-  text-align: center;
 }
 :host yoo-ion-scroll .result-text {
-  margin: 0 var(--spacing-64, 4rem);
-  padding-bottom: var(--spacing-08, 0.5rem);
   color: var(--text-color, #807f83);
-  line-height: 1.5625rem;
-  text-align: center;
 }
-:host yoo-ion-scroll .result-explanation {
-  margin: var(--spacing-08, 0.5rem) var(--spacing-64, 4rem);
-  text-align: center;
+:host yoo-ion-scroll .result-document {
+  margin-top: var(--spacing-08, 0.5rem);
 }
-:host yoo-ion-scroll .result-explanation .explanation-value {
+:host yoo-ion-scroll .explanation-value {
   color: var(--text-color, #807f83);
-  line-height: 1.5625rem;
 }
-:host yoo-ion-scroll .result-explanation .explanation-title {
-  padding-bottom: var(--spacing-08, 0.5rem);
+:host yoo-ion-scroll .explanation-title {
   font-weight: bold;
 }
 :host yoo-ion-scroll .separator {
   width: 90%;
   border-bottom: var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0);
 }
-:host yoo-ion-scroll .result-document {
-  margin: var(--spacing-16, 1rem);
-}
-:host yoo-ion-scroll .result-document .document-title {
-  padding-bottom: var(--spacing-08, 0.5rem);
+:host yoo-ion-scroll .document-title {
   font-weight: bold;
   font-size: var(--font-size-16, 1rem);
-  text-align: center;
-}
-:host yoo-ion-scroll .result-tag {
-  padding: var(--spacing-08, 0.5rem);
-  text-align: center;
 }
 :host yoo-ion-scroll .result-tag span {
   color: var(--dark, #000000);
@@ -299,17 +292,13 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   display: flex;
   flex-shrink: 0;
   box-sizing: border-box;
-  padding: var(--spacing-16, 1rem);
   overflow: hidden;
   --border-radius: var(--border-radius-08, 0.5rem);
 }
 :host yoo-ion-scroll yoo-progress-recap,
 :host yoo-ion-scroll yoo-points-recap {
   display: block;
-  width: calc(100% - 2rem);
   max-width: 30rem;
-  margin: 0 auto;
-  padding: var(--spacing-08, 0.5rem);
 }
 :host .wall {
   position: absolute;
@@ -323,11 +312,16 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host yoo-tag {
   display: block;
-  margin: 0 auto;
 }
 :host main {
+  gap: var(--spacing-08, 0.5rem);
+  box-sizing: border-box;
   width: 100%;
-  padding-top: calc(var(--safe-area-inset-top) + var(--spacing-32, 2rem));
+  height: 100%;
+  padding: var(--spacing-16, 1rem);
+}
+:host main > * {
+  padding: var(--spacing-04, 0.25rem) 0;
 }
 :host .answers {
   padding: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
@@ -335,4 +329,23 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .answers .title {
   padding-bottom: var(--spacing-08, 0.5rem);
   font-size: var(--font-size-24, 1.5rem);
+}
+
+:host(.web) yoo-ion-scroll {
+  height: calc(100% - 3.5rem);
+}
+:host(.web) yoo-form-footer {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+}
+
+:host(.mobile) yoo-ion-scroll {
+  height: calc(100% - 5.75rem);
+}
+:host(.mobile) main {
+  margin-top: var(--safe-area-inset-top);
+}
+:host(.mobile) main > * {
+  text-align: center;
 }

package/dist/collection/feature-learn/learning/lesson-question-result/lesson-question-result.js

@@ -1,6 +1,7 @@
 import { answerIsValid, getAsyncExtraData, getConfidenceDescriptionKey, getConfidencePoints, getCorrectAnswersCount, getCssColor, isContentOnly, isImage, isNativeMobile, isOffline, isPdf, isQuiz, isWeb, minsToMinsAndSecs, showRatingDialog, translate, translateMulti, updateSVGCustomColors } from '@shared/utils';
 import { Component, Element, Event, getAssetPath, h, Host, Prop, Watch } from '@stencil/core';
 import { get, isNumber } from 'lodash-es';
+import { getAppContext } from '../../../utils/helpers/common-helpers';
 export class YooLessonQuestionResultComponent {
   constructor() {
     this.resultType = 'question';
@@ -13,6 +14,7 @@ export class YooLessonQuestionResultComponent {
   }
   onReplayAnimation() {
     if (this.isAnimationFinished) {
+      this.isAnimationFinished = false;
       this.lottieEl.stop();
       this.lottieEl.play();
     }
@@ -160,32 +162,21 @@ export class YooLessonQuestionResultComponent {
         h("yoo-tag", { size: "extra-large", icon: icon, customColor: customColor }),
         h("div", { class: "tag-title" }, translateMulti(badge === null || badge === void 0 ? void 0 : badge.title)))));
   }
-  renderHeader() {
-    return (h("yoo-navbar", { class: "transparent" },
-      h("yoo-items", { slot: "start" },
-        h("yoo-button", { color: "text-color", fill: "transparent", shape: "circular", rippleType: "unbounded", onClick: () => this.closeCourseResultModal() },
-          h("yoo-icon", { name: "close", color: "text-color" })))));
-  }
   renderQuestionDocument() {
-    const isImageDocument = isImage(this.explanationDocument);
     const src = this.explanationDocument._downloadURL;
-    if (isImageDocument && src) {
-      return h("yoo-img", { class: "document-image", src: src, ignoreHeight: true, ignoreWidth: true });
-    }
-    else {
-      return (h("div", { class: "result-document" },
+    return isImage(this.explanationDocument) && src ?
+      h("yoo-img", { class: "document-image", src: src, ignoreHeight: true, ignoreWidth: true }) :
+      h("div", { class: "result-document" },
         this.explanationDocument && h("div", { class: "document-title" }, translate('READOURDOCUMENT')),
-        this.explanationDocument && h("yoo-form-document", { showActionSheet: isNativeMobile() && isPdf(this.explanationDocument), document: this.explanationDocument })));
-    }
+        this.explanationDocument && h("yoo-form-document", { showActionSheet: isNativeMobile() && isPdf(this.explanationDocument), document: this.explanationDocument }));
   }
   renderQuestionResult() {
     return [
-      h("h2", { class: "result-title" }, translate(this.title)),
+      this.renderResultTitle(),
       this.confidenceLevel ? this.renderPointsRecapForConfidenceQuestion() : isNumber(this.points) && this.renderPointsRecapForQuestion(),
       this.questionExplanation && [
-        h("div", { class: "result-explanation" },
-          h("div", { class: "explanation-title" }, translateMulti('EXPLANATION')),
-          h("yoo-markdown", { ref: (el) => (this.markdownDiv = el), class: "explanation-value", content: translateMulti(this.questionExplanation) })),
+        h("div", { class: "explanation-title" }, translateMulti('EXPLANATION')),
+        h("yoo-markdown", { ref: (el) => (this.markdownDiv = el), class: "explanation-value", content: translateMulti(this.questionExplanation) }),
         this.explanationDocument && h("div", { class: "separator" })
       ],
       this.explanationDocument && this.renderQuestionDocument()
@@ -196,9 +187,9 @@ export class YooLessonQuestionResultComponent {
     if (this.points) {
       tagText += `/${this.points} `;
     }
-    return (h("yoo-tag", { size: "medium", color: "success-20" },
+    return h("yoo-tag", { size: "medium", color: "success-20" },
       h("yoo-icon", { slot: "start", size: "small", name: "star", color: "success" }),
-      tagText));
+      tagText);
   }
   renderPointsRecapForQuestion() {
     return h("yoo-points-recap", { heading: translate('TOTALPOINTSEARNED'), totalPoints: Math.round(this.earnedPoints) });
@@ -245,21 +236,23 @@ export class YooLessonQuestionResultComponent {
     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 }) }));
   }
-  renderCourseTopBadges(badges) {
+  renderCourseTopBadges() {
+    var _a;
+    const badges = (_a = this.lessons) === null || _a === void 0 ? void 0 : _a.map((l) => l.badge).filter(Boolean);
     const topBadges = badges === null || badges === void 0 ? void 0 : badges.slice(0, 3);
-    return ((topBadges === null || topBadges === void 0 ? void 0 : topBadges.length) > 0 && (h("div", { class: "result-tag" },
+    return !!(topBadges === null || topBadges === void 0 ? void 0 : topBadges.length) && (h("div", { class: "result-tag" },
       h("span", null, translate('NEWBADGESCOLLECTED', { smart_count: badges.length })),
       h("div", { class: "tags" },
         h("yoo-img", { src: getAssetPath('./assets/bubbles/left-bubbles.svg'), svgOptions: { afterLoad: (_, svgString) => updateSVGCustomColors(svgString) } }), topBadges === null || topBadges === void 0 ? void 0 :
         topBadges.map((badge, index) => (h("div", { class: "badge-container", style: { zIndex: `${topBadges.length - index}` } },
           h("yoo-tag", { size: "extra-large", icon: badge === null || badge === void 0 ? void 0 : badge.icon, customColor: badge === null || badge === void 0 ? void 0 : badge.color })))),
         h("yoo-img", { src: getAssetPath('./assets/bubbles/right-bubbles.svg'), svgOptions: { afterLoad: (_, svgString) => updateSVGCustomColors(svgString) } })),
-      h("span", { class: "action", onClick: () => this.onSeeAllBadges() }, translate('YOOBICSEEALL')))));
+      h("span", { class: "action", onClick: () => this.onSeeAllBadges() }, translate('YOOBICSEEALL'))));
   }
   renderLessonResult() {
     return [
-      h("h2", { class: "result-title" }, translate(this.title)),
-      h("div", { class: "result-text" }, translate(this.text, { title: translateMulti(this.lessonTitle) })),
+      this.renderResultTitle(),
+      this.renderResultContent(),
       isQuiz(this.lessonType) && this.resultType !== 'timeout' && this.renderProgressBarLessonRecap(),
       this.earnedBadge && this.renderLessonBadge(this.earnedBadge),
       this.resultType !== 'timeout' && isNumber(this.points) && this.renderPointsRecapForLessonOrCourse(),
@@ -268,27 +261,41 @@ export class YooLessonQuestionResultComponent {
         h("yoo-form-dynamic", { formType: "lesson-question-result", scrollable: false, forceReadonly: true, slides: this.slides, data: this.lessonData, isAnimationFinished: this.isAnimationFinished, suffix: ".value", showTabs: false, showRecap: true })))
     ];
   }
+  renderResultTitle() {
+    return h("h2", { class: "result-title" }, translate(this.title));
+  }
+  renderResultContent() {
+    return h("div", { class: "result-text" }, translate(this.text, { title: translateMulti(this.lessonTitle) }));
+  }
   renderCourseResult() {
-    var _a;
     return [
       this.renderCourseScore(),
-      h("h2", { class: "result-title" }, translate(this.title)),
-      h("div", { class: "result-text" }, translate(this.text, { title: translateMulti(this.lessonTitle) })),
-      this.renderCourseTopBadges((_a = this.lessons) === null || _a === void 0 ? void 0 : _a.map((l) => l.badge).filter(Boolean)),
+      this.renderResultTitle(),
+      this.renderResultContent(),
+      this.renderCourseTopBadges(),
       this.renderPointsRecapForLessonOrCourse()
     ];
   }
+  renderHeader() {
+    return this.showHeader && (h("yoo-navbar", { class: "transparent" },
+      h("yoo-items", { slot: "start" },
+        h("yoo-button", { color: "text-color", fill: "transparent", shape: "circular", rippleType: "unbounded", onClick: () => this.closeCourseResultModal() },
+          h("yoo-icon", { name: "close", color: "text-color" })))));
+  }
+  renderContent() {
+    return h("yoo-ion-scroll", { class: "relative", forceOverscroll: false },
+      h("div", { class: "wall" }),
+      h("main", null,
+        h("yoo-lottie", { autoplay: this.autoPlayAnimation, ref: (el) => (this.lottieEl = el), type: this.lottieType }),
+        this.resultType === 'question' ? this.renderQuestionResult() : this.resultType === 'course' ? this.renderCourseResult() : this.renderLessonResult()));
+  }
   renderFooter() {
     return h("yoo-form-footer", { class: "relative", buttons: this.footerActions, forceMobile: this.forceMobile });
   }
   render() {
-    return (h(Host, { class: this.resultType },
-      this.showHeader && this.renderHeader(),
-      h("yoo-ion-scroll", { class: "relative", forceOverscroll: false },
-        h("div", { class: "wall" }),
-        h("main", null,
-          h("yoo-lottie", { autoplay: this.autoPlayAnimation, ref: (el) => (this.lottieEl = el), type: this.lottieType }),
-          this.resultType === 'question' ? this.renderQuestionResult() : this.resultType === 'course' ? this.renderCourseResult() : this.renderLessonResult())),
+    return (h(Host, { class: getAppContext(this) },
+      this.renderHeader(),
+      this.renderContent(),
       this.renderFooter()));
   }
   static get is() { return "yoo-lesson-question-result"; }
@@ -694,7 +701,7 @@ export class YooLessonQuestionResultComponent {
     },
     "isAnimationFinished": {
       "type": "boolean",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "boolean",
         "resolved": "boolean",

package/dist/collection/feature-platform/insight/kpi-container/kpi-container.js

@@ -206,14 +206,14 @@ export class YooKpiContainerComponent {
     ];
   }
   renderKpi() {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     let kpiStyle;
-    if (((_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.xAxis) === null || _b === void 0 ? void 0 : _b.categories) && ((_c = this.chartClass) === null || _c === void 0 ? void 0 : _c.includes) && this.chartClass.includes('feed-chart')) {
+    if (((_c = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.xAxis) === null || _b === void 0 ? void 0 : _b.categories) === null || _c === void 0 ? void 0 : _c.length) && ((_d = this.chartClass) === null || _d === void 0 ? void 0 : _d.includes) && this.chartClass.includes('feed-chart')) {
       kpiStyle = { maxHeight: `${this.config.xAxis.categories.length * 70}px` };
     }
     return !this.dontRender && (h("yoo-kpi", { class: {
         interactive: true,
-        rounded: (_e = (_d = this.host) === null || _d === void 0 ? void 0 : _d.classList) === null || _e === void 0 ? void 0 : _e.contains('rounded') // only yoobic.com hosted iframes should be interactive
+        rounded: (_f = (_e = this.host) === null || _e === void 0 ? void 0 : _e.classList) === null || _f === void 0 ? void 0 : _f.contains('rounded') // only yoobic.com hosted iframes should be interactive
       }, ref: (el) => (this.kpi = el), config: this.config, photosSrc: this.config.photos, type: this.type, chartClass: this.chartClass, style: kpiStyle, isFullScreen: this.isFullScreen, isFullHeight: this.isFullHeight, isFormPreview: this.isFormPreview, definition: this.definition, 
       // showTable={this.showTable}
       disableResize: this.disableResize, onKpiEdited: (ev) => this.onKpiEdited(ev), onKpiClick: (ev) => this.onKpiClick(ev), onKpiDoubleClick: (ev) => this.onKpiDoubleClick(ev), onKpiLegendItemClick: (ev) => this.onKpiLegendItemClick(ev), onKpiLinkClick: (ev) => this.onKpiLinkClick(ev), onOpenInFullscreen: () => this.onShowDialog() }));