@yoobic/yobi 8.5.0-6 → 8.5.0-8

package/dist/collection/components/entities/card-list/color/card-list-color.js

@@ -1,5 +1,5 @@
 import { isWeb, translate, translateMulti } from '@shared/utils';
-import { Component, Element, h, Host, Prop } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import { isFinite } from 'lodash-es';
 export class YooCardListColorComponent {
   constructor() {
@@ -10,17 +10,7 @@ export class YooCardListColorComponent {
     var _a, _b, _c, _d;
     const { iconTopMiddle, iconTopMiddleColor, iconTopMiddleCustomColor, iconTopRight, iconTopRightColor, iconTopLeft, iconTopLeftColor, color, heading } = this.entry;
     const bigIcon = ((_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.contains('creationtypes')) || ((_d = (_c = this.host) === null || _c === void 0 ? void 0 : _c.classList) === null || _d === void 0 ? void 0 : _d.contains('missiondescriptiontemplates'));
-    return (h("div", { class: "heading-container", style: { '--align-items': iconTopMiddle ? 'center' : 'normal', '--flex-direction': iconTopMiddle ? 'column-reverse' : 'row', fill: color } },
-      !!iconTopLeft && (h("div", { class: "icon-left" },
-        h("yoo-icon", { size: bigIcon ? 'large' : 'medium', name: iconTopLeft, color: iconTopLeftColor }),
-        this.notif && h("yoo-badge", { shape: "dot" }))),
-      h("div", { class: "heading", innerHTML: translateMulti(heading || '') }),
-      !!iconTopRight && (h("div", { class: "icon-right" },
-        h("yoo-icon", { size: "medium", name: iconTopRight, color: iconTopRightColor }),
-        this.notif && h("yoo-badge", { shape: "dot" }))),
-      !!iconTopMiddle && (h("div", { class: "icon-middle" },
-        h("yoo-icon", { size: "medium", name: iconTopMiddle, color: iconTopMiddleColor, customColor: iconTopMiddleCustomColor }),
-        this.notif && h("yoo-badge", { shape: "dot" })))));
+    return (h("div", { class: "heading-container", style: { '--align-items': iconTopMiddle ? 'center' : 'normal', '--flex-direction': iconTopMiddle ? 'column-reverse' : 'row', fill: color } }, !!iconTopLeft && (h("div", { class: "icon-left" }, h("yoo-icon", { size: bigIcon ? 'large' : 'medium', name: iconTopLeft, color: iconTopLeftColor }), this.notif && h("yoo-badge", { shape: "dot" }))), h("div", { class: "heading", innerHTML: translateMulti(heading || '') }), !!iconTopRight && (h("div", { class: "icon-right" }, h("yoo-icon", { size: "medium", name: iconTopRight, color: iconTopRightColor }), this.notif && h("yoo-badge", { shape: "dot" }))), !!iconTopMiddle && (h("div", { class: "icon-middle" }, h("yoo-icon", { size: "medium", name: iconTopMiddle, color: iconTopMiddleColor, customColor: iconTopMiddleCustomColor }), this.notif && h("yoo-badge", { shape: "dot" })))));
   }
   renderSubHeader() {
     const { subHeading } = this.entry;
@@ -33,8 +23,7 @@ export class YooCardListColorComponent {
   renderProgress() {
     const { progress } = this.entry;
     return (isFinite(progress) &&
-      progress >= 0 && (h("div", { class: "progress-container" },
-      h("yoo-progress-bar", { value: progress || 0 }))));
+      progress >= 0 && (h("div", { class: "progress-container" }, h("yoo-progress-bar", { value: progress || 0 }))));
   }
   renderTags() {
     const { tagElements } = this.entry;
@@ -42,8 +31,7 @@ export class YooCardListColorComponent {
   }
   renderImage() {
     const { imgSrc } = this.entry;
-    return (imgSrc && (h("div", { class: "image-container" },
-      h("yoo-img", { src: imgSrc }))));
+    return (imgSrc && (h("div", { class: "image-container" }, h("yoo-img", { src: imgSrc }))));
   }
   render() {
     var _a, _b, _c;
@@ -51,86 +39,84 @@ export class YooCardListColorComponent {
     return (h(Host, { style: {
         ...(((_b = this.entry) === null || _b === void 0 ? void 0 : _b.subHeading) && { '--subheading-line-clamp': this.entry.subHeadingDescription ? '1' : '2' }),
         ...(((_c = this.entry) === null || _c === void 0 ? void 0 : _c.subHeadingDescription) && { '--subheading-description-line-clamp': this.entry.subHeading ? '1' : '2' })
-      } }, this.entry && (h(TagType, { hoverable: isWeb(this.host), placement: "bottom", content: translate(this.entry.tooltip) },
-      h("div", { class: { 'outer-container': true, 'has-image': !!this.entry.imgSrc } },
-        h("div", null,
-          this.renderHeader(),
-          this.renderProgress(),
-          this.renderSubHeader(),
-          this.renderSubHeaderDescription(),
-          this.renderImage()),
-        this.renderTags())))));
+      } }, this.entry && (h(TagType, { hoverable: isWeb(this.host), placement: "bottom", content: translate(this.entry.tooltip) }, h("div", { class: { 'outer-container': true, 'has-image': !!this.entry.imgSrc } }, h("div", null, this.renderHeader(), this.renderProgress(), this.renderSubHeader(), this.renderSubHeaderDescription(), this.renderImage()), this.renderTags())))));
   }
   static get is() { return "yoo-card-list-color"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["card-list-color.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["card-list-color.css"]
-  }; }
-  static get properties() { return {
-    "entry": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "ICardListColorEntry",
-        "resolved": "ICardListColorEntry",
-        "references": {
-          "ICardListColorEntry": {
-            "location": "import",
-            "path": "./types"
+  static get originalStyleUrls() {
+    return {
+      "$": ["card-list-color.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["card-list-color.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "entry": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ICardListColorEntry",
+          "resolved": "ICardListColorEntry",
+          "references": {
+            "ICardListColorEntry": {
+              "location": "import",
+              "path": "./types"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "notif": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "string | number | boolean",
-        "resolved": "boolean | number | string",
-        "references": {}
+      "notif": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "string | number | boolean",
+          "resolved": "boolean | number | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "notif",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "notif",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "TBaseSize",
-        "resolved": "\"large\" | \"medium\" | \"small\"",
-        "references": {
-          "TBaseSize": {
-            "location": "import",
-            "path": "@shared/interfaces"
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "TBaseSize",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "references": {
+            "TBaseSize": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "size",
-      "reflect": true,
-      "defaultValue": "'large'"
-    }
-  }; }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "'large'"
+      }
+    };
+  }
   static get elementRef() { return "host"; }
 }

package/dist/collection/components/entities/card-list/default/card-list.js

@@ -1,5 +1,5 @@
 import { Cloudinary, downloadFile, getSession, isCloudinaryLink, isFieldWithNoValue, isFirefox, isImage, isNullOrUndefined, isPresent, isUnsplashUrl, isVideo, isWeb, parseMarkDown, replaceAllLinks, translate, translateMulti } from '@shared/utils';
-import { Component, Element, Event, h, Host, Prop, State } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import { compact, isEmpty, isNumber, isString } from 'lodash-es';
 import { toggleElementTapped } from '../../../../utils/helpers/card-list-helpers';
 import { execHandlerAndStopEvent, getAppContext, removeHtmlFromString, showPhotoEditor } from '../../../../utils/helpers/common-helpers';
@@ -85,11 +85,7 @@ export class YooCardListComponent {
     ];
   }
   renderPointsContainerContent() {
-    return (h("div", { class: "points-container" },
-      h("yoo-icon", { name: "star", size: "small", color: "app-color" }),
-      h("div", { class: "points" },
-        this.entry.points,
-        this.entry.maxPoints ? `/${this.entry.maxPoints}` : '')));
+    return (h("div", { class: "points-container" }, h("yoo-icon", { name: "star", size: "small", color: "app-color" }), h("div", { class: "points" }, this.entry.points, this.entry.maxPoints ? `/${this.entry.maxPoints}` : '')));
   }
   renderInlineUsers() {
     return h("yoo-avatars", { class: "card-list", size: "extra-small", layout: "stack", users: this.entry.usersInline, maxDisplay: MAX_AVATAR_DISPLAY, withTooltip: isWeb(this.host) });
@@ -98,32 +94,23 @@ export class YooCardListComponent {
     this.entry.users = compact(this.entry.users);
     const heading = this.getHeading();
     return [
-      this.entry.topLeftBadge && (h("yoo-tag", { class: "margin-right", color: this.entry.topLeftBadgeCssClass || 'stable-light' },
-        this.entry.topLeftBadge,
-        ' ')),
+      this.entry.topLeftBadge && (h("yoo-tag", { class: "margin-right", color: this.entry.topLeftBadgeCssClass || 'stable-light' }, this.entry.topLeftBadge, ' ')),
       this.entry.headingIcon && (h("yoo-icon", { size: "medium", style: { background: this.entry.headingIconColor }, class: "margin-right", name: this.entry.headingIcon, color: this.entry.headingIconColor ? 'light' : 'app-color' })),
       h("div", { class: {
           'card-heading': true,
           'with-users': this.hasUsersInline()
-        } },
-        h("div", { class: {
-            'heading-title': true,
-            ellipsis: this.host.classList.contains('lessons')
-          } },
-          this.entry.headingColor && h("span", { class: "heading-circle", style: { background: this.entry.headingColor } }),
-          h("span", { innerHTML: heading }))),
-      this.entry.topRightBadge && (h("yoo-tag", { class: "margin-right", color: this.entry.topRightBadgeCssClass || 'stable-light' },
-        h("span", { innerHTML: this.entry.topRightBadge })))
+        } }, h("div", { class: {
+          'heading-title': true,
+          ellipsis: this.host.classList.contains('lessons')
+        } }, this.entry.headingColor && h("span", { class: "heading-circle", style: { background: this.entry.headingColor } }), h("span", { innerHTML: heading }))),
+      this.entry.topRightBadge && (h("yoo-tag", { class: "margin-right", color: this.entry.topRightBadgeCssClass || 'stable-light' }, h("span", { innerHTML: this.entry.topRightBadge })))
     ];
   }
   renderDistance() {
-    return (h("yoo-tag", { class: "distance", color: "dark", noBackground: true },
-      h("yoo-icon", { name: "pin", size: "small", slot: "start" }),
-      this.entry.distance));
+    return (h("yoo-tag", { class: "distance", color: "dark", noBackground: true }, h("yoo-icon", { name: "pin", size: "small", slot: "start" }), this.entry.distance));
   }
   renderProgress() {
-    return (h("div", { class: "progress-box" },
-      h("span", { class: { 'icon-text': true, [this.entry.progressClass]: true } }, this.entry.progress)));
+    return (h("div", { class: "progress-box" }, h("span", { class: { 'icon-text': true, [this.entry.progressClass]: true } }, this.entry.progress)));
   }
   renderTopActions() {
     return (h("div", { class: "top-actions" }, this.entry.topActions.map((a) => (h("span", { onClick: (ev) => execHandlerAndStopEvent(ev, a.handler) }, a.text)))));
@@ -134,9 +121,7 @@ export class YooCardListComponent {
   }
   renderTagDate() {
     return (this.entry.date &&
-      !this.isQuestionCardList() && (h("yoo-tag", { size: "small", color: "text-color-10" },
-      h("yoo-icon", { slot: "start", name: "calendar", color: "dark", size: "small" }),
-      this.entry.date)));
+      !this.isQuestionCardList() && (h("yoo-tag", { size: "small", color: "text-color-10" }, h("yoo-icon", { slot: "start", name: "calendar", color: "dark", size: "small" }), this.entry.date)));
   }
   renderHeadingContainerBottom() {
     var _a, _b, _c, _d;
@@ -148,52 +133,29 @@ export class YooCardListComponent {
       showMoreButton ||
       (this.entry.showDateAsTag && this.entry.date);
     return [
-      showTagContainer && (h("div", { class: { 'tags-container': true, 'show-more': showMoreButton } },
-        this.entry.showDateAsTag && this.entry.date && !this.isQuestionCardList() && this.renderTagDate(),
-        !this.isQuestionCardList() && this.renderTags(this.entry.tagElements), (_b = (_a = this.entry.tags) === null || _a === void 0 ? void 0 : _a.slice(0, 3)) === null || _b === void 0 ? void 0 :
+      showTagContainer && (h("div", { class: { 'tags-container': true, 'show-more': showMoreButton } }, this.entry.showDateAsTag && this.entry.date && !this.isQuestionCardList() && this.renderTagDate(), !this.isQuestionCardList() && this.renderTags(this.entry.tagElements), (_b = (_a = this.entry.tags) === null || _a === void 0 ? void 0 : _a.slice(0, 3)) === null || _b === void 0 ? void 0 :
         _b.map((tag) => {
           if (tag && !isString(tag) && tag.tag) {
             tag = tag.tag;
           }
           return h("span", { class: "hashtag", innerHTML: `#${translateMulti(tag)}` });
-        }),
-        !this.isQuestionCardList()
-          ? (_c = this.entry.icons) === null || _c === void 0 ? void 0 : _c.map(({ icon, color, handler, value }) => icon ? (h("span", { class: { 'card-icon': true, 'heart-icon': icon === 'heart' } },
-            icon === 'heart' ?
-              h("yoo-lottie", { initialFrame: color === 'danger' ? 50 : null, onClick: (ev) => execHandlerAndStopEvent(ev, handler), type: "heart", autoplay: color === 'danger' },
-                h("yoo-icon", { slot: "placeholder", name: "heart", color: color, size: "medium" })) :
-              h("yoo-icon", { name: icon, color: color, onClick: (ev) => execHandlerAndStopEvent(ev, handler) }),
-            ' ' + value ? value : '')) : null)
-          : null,
-        showMoreButton && (h("yoo-context-menu", { class: { 'card-icon right': this.isRenderBadgeOutside }, contentButtons: this.entry.actions },
-          h("div", { class: "more-button" },
-            h("yoo-icon", { name: "more", color: this.isRenderBadgeOutside ? 'stable-alt' : 'dark' })))),
-        ((_d = this.entry.bottomActions) === null || _d === void 0 ? void 0 : _d.length) > 0 && (h("div", { class: "row-action" }, this.entry.bottomActions.map((bottomAction) => (h("span", { class: "bottom-action", onClick: (ev) => execHandlerAndStopEvent(ev, bottomAction.handler) },
-          bottomAction.icon && h("yoo-icon", { size: "small", color: "stable", name: bottomAction.icon }),
-          bottomAction.text)))))))
+        }), !this.isQuestionCardList()
+        ? (_c = this.entry.icons) === null || _c === void 0 ? void 0 : _c.map(({ icon, color, handler, value }) => icon ? (h("span", { class: { 'card-icon': true, 'heart-icon': icon === 'heart' } }, icon === 'heart' ?
+          h("yoo-lottie", { initialFrame: color === 'danger' ? 50 : null, onClick: (ev) => execHandlerAndStopEvent(ev, handler), type: "heart", autoplay: color === 'danger' }, h("yoo-icon", { slot: "placeholder", name: "heart", color: color, size: "medium" })) :
+          h("yoo-icon", { name: icon, color: color, onClick: (ev) => execHandlerAndStopEvent(ev, handler) }), ' ' + value ? value : '')) : null)
+        : null, showMoreButton && (h("yoo-context-menu", { class: { 'card-icon right': this.isRenderBadgeOutside }, contentButtons: this.entry.actions }, h("div", { class: "more-button" }, h("yoo-icon", { name: "more", color: this.isRenderBadgeOutside ? 'stable-alt' : 'dark' })))), ((_d = this.entry.bottomActions) === null || _d === void 0 ? void 0 : _d.length) > 0 && (h("div", { class: "row-action" }, this.entry.bottomActions.map((bottomAction) => (h("span", { class: "bottom-action", onClick: (ev) => execHandlerAndStopEvent(ev, bottomAction.handler) }, bottomAction.icon && h("yoo-icon", { size: "small", color: "stable", name: bottomAction.icon }), bottomAction.text)))))))
     ];
   }
   renderQuestionContainer() {
     return (h("div", { class: {
         'question-container': true,
         'no-img': !this.entry.rightImageSrc && !this.entry.rightVideoSrc
-      } },
-      (this.entry.rightImageSrc || this.entry.rightVideoSrc) && this.renderRightVideoImage(),
-      h("div", { class: "question-content" },
-        h("div", { class: "question-title" },
-          h("yoo-truncate", null, this.entry.heading)),
-        this.renderQuestionIcons(),
-        h("div", { class: "subheadings" },
-          this.renderSubheadings(true),
-          this.renderTags(this.entry.tagElements)),
-        this.hasHeadingBottomContent() && this.renderHeadingContainerBottom())));
+      } }, (this.entry.rightImageSrc || this.entry.rightVideoSrc) && this.renderRightVideoImage(), h("div", { class: "question-content" }, h("div", { class: "question-title" }, h("yoo-truncate", null, this.entry.heading)), this.renderQuestionIcons(), h("div", { class: "subheadings" }, this.renderSubheadings(true), this.renderTags(this.entry.tagElements)), this.hasHeadingBottomContent() && this.renderHeadingContainerBottom())));
   }
   renderQuestionIcons() {
     var _a;
     return (h("div", { class: "question-icons" }, (_a = this.entry.icons) === null || _a === void 0 ? void 0 : _a.map((i) => {
-      return (h("div", { class: "inner-container" },
-        h("yoo-icon", { name: i.icon, color: i.color, size: "small", onClick: (ev) => execHandlerAndStopEvent(ev, i.handler) }),
-        h("span", { class: i.textClass }, i.text)));
+      return (h("div", { class: "inner-container" }, h("yoo-icon", { name: i.icon, color: i.color, size: "small", onClick: (ev) => execHandlerAndStopEvent(ev, i.handler) }), h("span", { class: i.textClass }, i.text)));
     })));
   }
   onTranslateToggle(ev) {
@@ -211,24 +173,12 @@ export class YooCardListComponent {
     return (h("div", { class: {
         'translate-container': true,
         active: this.showTranslatedText
-      } },
-      this.isTranslating && h("yoo-loader", { class: "absolute backdrop-transparent" }),
-      this.showTranslatedText && h("div", { class: "text", innerHTML: replaceAllLinks(this.translatedText, true) }),
-      h("div", { class: "translation-button", onClick: (ev) => this.onTranslateToggle(ev) }, this.showTranslatedText ? h("span", null, translate('HIDETRANSLATION')) : translate('SEETRANSLATION'))));
+      } }, this.isTranslating && h("yoo-loader", { class: "absolute backdrop-transparent" }), this.showTranslatedText && h("div", { class: "text", innerHTML: replaceAllLinks(this.translatedText, true) }), h("div", { class: "translation-button", onClick: (ev) => this.onTranslateToggle(ev) }, this.showTranslatedText ? h("span", null, translate('HIDETRANSLATION')) : translate('SEETRANSLATION'))));
   }
   renderHeadingContainerContent() {
     var _a, _b, _c;
     return [
-      h("div", { class: "heading-container" },
-        ((_a = this.entry.tagElementsInHeader) === null || _a === void 0 ? void 0 : _a.location) === 'start' && this.renderTags(this.entry.tagElementsInHeader.tags, 'margin-right'),
-        this.entry.heading ? this.renderHeading() : null,
-        this.hasUsersInline() ? this.renderInlineUsers() : null,
-        !this.entry.showDateAsTag && this.entry.date && !this.isQuestionCardList() && h("div", { class: "date-card-text" }, this.entry.date),
-        isNumber(this.entry.points) && this.renderPointsContainerContent(),
-        this.entry.rightAction && (h("yoo-button", { color: "app-color", fill: "transparent", rippleType: "unbounded", onClick: (ev) => execHandlerAndStopEvent(ev, this.entry.rightAction.handler) }, this.entry.rightAction.text)),
-        this.entry.distance ? this.renderDistance() : null,
-        this.entry.progress || this.entry.progress === 0 ? this.renderProgress() : null,
-        ((_b = this.entry.tagElementsInHeader) === null || _b === void 0 ? void 0 : _b.location) === 'end' && this.renderTags(this.entry.tagElementsInHeader.tags, 'margin-right')),
+      h("div", { class: "heading-container" }, ((_a = this.entry.tagElementsInHeader) === null || _a === void 0 ? void 0 : _a.location) === 'start' && this.renderTags(this.entry.tagElementsInHeader.tags, 'margin-right'), this.entry.heading ? this.renderHeading() : null, this.hasUsersInline() ? this.renderInlineUsers() : null, !this.entry.showDateAsTag && this.entry.date && !this.isQuestionCardList() && h("div", { class: "date-card-text" }, this.entry.date), isNumber(this.entry.points) && this.renderPointsContainerContent(), this.entry.rightAction && (h("yoo-button", { color: "app-color", fill: "transparent", rippleType: "unbounded", onClick: (ev) => execHandlerAndStopEvent(ev, this.entry.rightAction.handler) }, this.entry.rightAction.text)), this.entry.distance ? this.renderDistance() : null, this.entry.progress || this.entry.progress === 0 ? this.renderProgress() : null, ((_b = this.entry.tagElementsInHeader) === null || _b === void 0 ? void 0 : _b.location) === 'end' && this.renderTags(this.entry.tagElementsInHeader.tags, 'margin-right')),
       ((_c = this.entry.topActions) === null || _c === void 0 ? void 0 : _c.length) ? this.renderTopActions() : null,
       this.renderSubheadings(),
       this.isRenderBadgeOutside && this.entry.translationCallback && this.renderTranslation(),
@@ -236,8 +186,7 @@ export class YooCardListComponent {
     ];
   }
   renderVideo(source) {
-    return (h("div", { class: "video-container" },
-      h("yoo-videoplayer-core", { class: "round", blockControlAndAutoPlayOnTap: true, videoPlayerCoreParameters: { cover: true, controls: false, preventAutoResume: true, scaledUp: true, scaledUpInWidth: true, source } })));
+    return (h("div", { class: "video-container" }, h("yoo-videoplayer-core", { class: "round", blockControlAndAutoPlayOnTap: true, videoPlayerCoreParameters: { cover: true, controls: false, preventAutoResume: true, scaledUp: true, scaledUpInWidth: true, source } })));
   }
   renderSubheadingPrefixes(icons) {
     return (h("div", { class: "subheading-icons-container" }, icons === null || icons === void 0 ? void 0 : icons.map((item) => {
@@ -273,8 +222,7 @@ export class YooCardListComponent {
     });
   }
   renderMutedIcon() {
-    return (h("div", { class: "muted-container" },
-      h("yoo-icon", { name: "volume-off", color: "stable" })));
+    return (h("div", { class: "muted-container" }, h("yoo-icon", { name: "volume-off", color: "stable" })));
   }
   renderSubheadings(forceSubheadingRender = false) {
     var _a, _b, _c;
@@ -290,9 +238,7 @@ export class YooCardListComponent {
     }
   }
   renderSubheading(itemText, extraIcon) {
-    return (h("div", { class: "subheading-container" },
-      extraIcon,
-      h("span", { class: { 'with-markdown': this.isRenderBadgeOutside }, innerHTML: this.isRenderBadgeOutside ? replaceAllLinks(parseMarkDown(itemText), true) : itemText })));
+    return (h("div", { class: "subheading-container" }, extraIcon, h("span", { class: { 'with-markdown': this.isRenderBadgeOutside }, innerHTML: this.isRenderBadgeOutside ? replaceAllLinks(parseMarkDown(itemText), true) : itemText })));
   }
   renderRightVideoImage() {
     const isVideo = isPresent(this.entry.rightVideoSrc);
@@ -317,11 +263,10 @@ export class YooCardListComponent {
       this.entry.uiFields.fields.some((f) => isFieldWithNoValue(f) || !isNullOrUndefined(this.entry.uiFields.data[f.name])) &&
       !((_e = (_d = this.host) === null || _d === void 0 ? void 0 : _d.classList) === null || _e === void 0 ? void 0 : _e.contains('map')) &&
       !((_g = (_f = this.host) === null || _f === void 0 ? void 0 : _f.classList) === null || _g === void 0 ? void 0 : _g.contains('grid-cell'))) {
-      return (h("div", { class: "uifield-container" },
-        h("yoo-form-dynamic", { class: "inline in-card secondary transparent", scrollable: false, forceReadonly: !((_j = (_h = this.host) === null || _h === void 0 ? void 0 : _h.classList) === null || _j === void 0 ? void 0 : _j.contains('form')), slides: [{ title: '', items: this.entry.uiFields.fields }], data: this.entry.uiFields.data, suffix: this.entry.uiFieldsSuffix, showTabs: false, formInputSize: "medium", showRecap: false, isPdf: this.entry.isPdf, onDataChanged: (ev) => {
-            ev.stopPropagation();
-            this.uiFieldsChanged.emit({ newdata: ev.detail });
-          } })));
+      return (h("div", { class: "uifield-container" }, h("yoo-form-dynamic", { class: "inline in-card secondary transparent", scrollable: false, forceReadonly: !((_j = (_h = this.host) === null || _h === void 0 ? void 0 : _h.classList) === null || _j === void 0 ? void 0 : _j.contains('form')), slides: [{ title: '', items: this.entry.uiFields.fields }], data: this.entry.uiFields.data, suffix: this.entry.uiFieldsSuffix, showTabs: false, formInputSize: "medium", showRecap: false, isPdf: this.entry.isPdf, onDataChanged: (ev) => {
+          ev.stopPropagation();
+          this.uiFieldsChanged.emit({ newdata: ev.detail });
+        } })));
     }
   }
   render() {
@@ -338,99 +283,95 @@ export class YooCardListComponent {
         vip: this.entry.vip,
         firefox: isFirefox(),
         'secondary-view': this.isRenderBadgeOutside
-      } },
-      !(this.isQuestionCardList() && this.host.classList.contains('selected-content')) && (h("div", { class: { 'outer-container': true }, ref: (el) => (this.outerDiv = el) },
-        this.entry.rank && this.entry.points !== undefined && h("div", { class: "rank-container" }, this.entry.rank),
-        (this.entry.imgSrc || this.entry.users || this.entry.icon || this.entry.iconText || this.host.classList.contains('calendarEvents')) && (h("div", { class: { 'card-list-image-container': true, [this.entry.avatarSize]: true } },
-          h("yoo-card-list-image", { class: this.host.classList.value, entry: this.entry, isMap: this.isMap }))),
-        h("div", { class: {
-            'content-container': true,
-            'has-image ': this.entry.imgSrc !== undefined || this.entry.icon !== undefined,
-            center: this.entry.heading === undefined && this.entry.subheadings === undefined
-          } },
-          h("div", { class: {
-              'top-container': true,
-              leaderboard: this.entry.rank !== undefined && this.entry.points !== undefined
-            } }, this.renderHeadingContainerContent()),
-          h("div", { class: "slot-container" },
-            h("slot", { name: "content-slot" }),
-            h("div", { class: "inner-container" }, this.renderBottomContent()),
-            this.entry.isCommentMedia && this.isRenderBadgeOutside && this.renderMedia(this.entry.subheadings[0])),
-          this.renderUIFields()),
-        this.entry.showRightArrow && h("yoo-icon", { class: "arrow", name: "right", size: "small", color: "dark" }))),
-      this.isQuestionCardList() && this.renderQuestionContainer(),
-      this.isRenderBadgeOutside && this.renderHeadingContainerBottom())));
+      } }, !(this.isQuestionCardList() && this.host.classList.contains('selected-content')) && (h("div", { class: { 'outer-container': true }, ref: (el) => (this.outerDiv = el) }, this.entry.rank && this.entry.points !== undefined && h("div", { class: "rank-container" }, this.entry.rank), (this.entry.imgSrc || this.entry.users || this.entry.icon || this.entry.iconText || this.host.classList.contains('calendarEvents')) && (h("div", { class: { 'card-list-image-container': true, [this.entry.avatarSize]: true } }, h("yoo-card-list-image", { class: this.host.classList.value, entry: this.entry, isMap: this.isMap }))), h("div", { class: {
+        'content-container': true,
+        'has-image ': this.entry.imgSrc !== undefined || this.entry.icon !== undefined,
+        center: this.entry.heading === undefined && this.entry.subheadings === undefined
+      } }, h("div", { class: {
+        'top-container': true,
+        leaderboard: this.entry.rank !== undefined && this.entry.points !== undefined
+      } }, this.renderHeadingContainerContent()), h("div", { class: "slot-container" }, h("slot", { name: "content-slot" }), h("div", { class: "inner-container" }, this.renderBottomContent()), this.entry.isCommentMedia && this.isRenderBadgeOutside && this.renderMedia(this.entry.subheadings[0])), this.renderUIFields()), this.entry.showRightArrow && h("yoo-icon", { class: "arrow", name: "right", size: "small", color: "dark" }))), this.isQuestionCardList() && this.renderQuestionContainer(), this.isRenderBadgeOutside && this.renderHeadingContainerBottom())));
   }
   static get is() { return "yoo-card-list"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["card-list.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["card-list.css"]
-  }; }
-  static get properties() { return {
-    "entry": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "ICardListEntry",
-        "resolved": "ICardListEntry",
-        "references": {
-          "ICardListEntry": {
-            "location": "import",
-            "path": "@shared/interfaces"
+  static get originalStyleUrls() {
+    return {
+      "$": ["card-list.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["card-list.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "entry": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ICardListEntry",
+          "resolved": "ICardListEntry",
+          "references": {
+            "ICardListEntry": {
+              "location": "import",
+              "path": "@shared/interfaces"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "avatarImgs": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[]"
       }
-    },
-    "avatarImgs": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "string[]",
-        "resolved": "string[]",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "defaultValue": "[]"
-    }
-  }; }
-  static get states() { return {
-    "translatedText": {},
-    "isTranslating": {},
-    "showTranslatedText": {}
-  }; }
-  static get events() { return [{
-      "method": "uiFieldsChanged",
-      "name": "uiFieldsChanged",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "{ newdata: Record<string, any> }",
-        "resolved": "{ newdata: Record<string, any>; }",
-        "references": {
-          "Record": {
-            "location": "global"
+    };
+  }
+  static get states() {
+    return {
+      "translatedText": {},
+      "isTranslating": {},
+      "showTranslatedText": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "uiFieldsChanged",
+        "name": "uiFieldsChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ newdata: Record<string, any> }",
+          "resolved": "{ newdata: Record<string, any>; }",
+          "references": {
+            "Record": {
+              "location": "global"
+            }
           }
         }
-      }
-    }]; }
+      }];
+  }
   static get elementRef() { return "host"; }
 }