@yoobic/yobi 8.5.0-10 → 8.5.0-11

package/dist/cjs/yoo-community-detail.cjs.entry.js

@@ -51,11 +51,11 @@ const YooCommunityDetailComponent = class {
   }
   renderMobileHeader() {
     var _a, _b, _c;
-    return index.h("div", { class: "top-container" }, index.h("yoo-img", { src: (_a = this.community) === null || _a === void 0 ? void 0 : _a.covers, fallbackIcon: { name: 'community', color: 'light' } }), index.h("div", { class: "title-container" }, index.h("yoo-truncate", null, overlays.translateMulti((_b = this.community) === null || _b === void 0 ? void 0 : _b.name))), index.h("div", { class: "members-container" }, overlays.pipes.number.transform((_c = this.community) === null || _c === void 0 ? void 0 : _c.numberOfMembers) + ' ' + overlays.translate('MEMBERS')), index.h("div", { class: "bottom-overlay" }));
+    return index.h("div", { class: "top-container" }, index.h("yoo-img", { src: (_a = this.community) === null || _a === void 0 ? void 0 : _a.covers, fallbackIcon: { name: 'community', color: 'light' } }), index.h("div", { class: "title-container" }, index.h("yoo-truncate", null, overlays.translateMulti((_b = this.community) === null || _b === void 0 ? void 0 : _b.name))), index.h("div", { class: "members-container" }, overlays.pipes.number.transform(((_c = this.community) === null || _c === void 0 ? void 0 : _c.numberOfMembers) || 0) + ' ' + overlays.translate('MEMBERS')), index.h("div", { class: "bottom-overlay" }));
   }
   renderWebHeader() {
     var _a, _b, _c;
-    return index.h("div", { class: "top-container", ref: (el) => this.topContainerElement = el }, index.h("div", { class: "image-container" }, index.h("yoo-img", { src: (_a = this.community) === null || _a === void 0 ? void 0 : _a.covers, fallbackIcon: { name: 'community', color: 'light' } })), index.h("div", { class: "information-container" }, index.h("div", { class: "title-container" }, overlays.translateMulti((_b = this.community) === null || _b === void 0 ? void 0 : _b.name), index.h("div", { class: "more-container" }, index.h("slot", { name: "action-slot" }), index.h("slot", { name: "more-action" }))), index.h("div", { class: "members-container" }, overlays.pipes.number.transform((_c = this.community) === null || _c === void 0 ? void 0 : _c.numberOfMembers) + ' ' + overlays.translate('MEMBERS')), this.renderDescriptionContainer()));
+    return index.h("div", { class: "top-container", ref: (el) => this.topContainerElement = el }, index.h("div", { class: "image-container" }, index.h("yoo-img", { src: (_a = this.community) === null || _a === void 0 ? void 0 : _a.covers, fallbackIcon: { name: 'community', color: 'light' } })), index.h("div", { class: "information-container" }, index.h("div", { class: "title-container" }, overlays.translateMulti((_b = this.community) === null || _b === void 0 ? void 0 : _b.name), index.h("div", { class: "more-container" }, index.h("slot", { name: "action-slot" }), index.h("slot", { name: "more-action" }))), index.h("div", { class: "members-container" }, overlays.pipes.number.transform(((_c = this.community) === null || _c === void 0 ? void 0 : _c.numberOfMembers) || 0) + ' ' + overlays.translate('MEMBERS')), this.renderDescriptionContainer()));
   }
   renderTabSelection() {
     return (index.h("div", { class: { 'tab-outer-container': true, 'collapsed': this.hideMembersList } }, index.h("div", { class: "tab-container" }, index.h("div", { class: "collapsible-icon-container", onClick: () => { this.toggleList(); } }, index.h("yoo-icon", { size: "medium", name: "sidebar-right", color: this.hideMembersList ? 'app-color' : 'stable' })), !this.hideMembersList && index.h("yoo-tabs", { class: "no-margin", tabs: this.tabs, onTabSelected: (ev) => this.membersListChanged.emit({ manager: ev.detail.nextIndex === 1 }) })), !this.hideMembersList && index.h("slot", { name: "members-grid" })));

package/dist/cjs/yoo-context-dialog.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-7319daa9.js');
 
-const contextDialogCss = "svg:not(:root){overflow:hidden}:host{--basic-transitions:opacity .3s ease-in-out, margin .3s ease-in-out;z-index:10000;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden;background:var(--light, #ffffff);border-radius:var(--border-radius-04, 0.25rem);-webkit-box-shadow:var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));-webkit-transition:var(--basic-transitions), height 0s ease-in-out;transition:var(--basic-transitions), height 0s ease-in-out}:host([hidden]){height:0 !important;margin:0 !important;opacity:0;-webkit-transition:var(--basic-transitions), height 0s ease-in-out 0.3s;transition:var(--basic-transitions), height 0s ease-in-out 0.3s}:host(.absolute){position:absolute}:host(.fixed){position:fixed}";
+const contextDialogCss = "svg:not(:root){overflow:hidden}:host{--basic-transitions:opacity .3s ease-in-out, margin .3s ease-in-out;z-index:21000;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden;background:var(--light, #ffffff);border-radius:var(--border-radius-04, 0.25rem);-webkit-box-shadow:var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));-webkit-transition:var(--basic-transitions), height 0s ease-in-out;transition:var(--basic-transitions), height 0s ease-in-out}:host([hidden]){height:0 !important;margin:0 !important;opacity:0;-webkit-transition:var(--basic-transitions), height 0s ease-in-out 0.3s;transition:var(--basic-transitions), height 0s ease-in-out 0.3s}:host(.absolute){position:absolute}:host(.fixed){position:fixed}";
 
 const YooContextDialogComponent = class {
   constructor(hostRef) {

package/dist/cjs/yoo-course-summary.cjs.entry.js

@@ -10,7 +10,7 @@ const overlays = require('./overlays-a6fd4072.js');
 require('./index-f08462bf.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
-const courseSummaryCss = "svg:not(:root){overflow:hidden}:host{display:block}:host .course-info-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;border-top:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host .course-info-container .info-sub-container{padding:var(--spacing-08, 0.5rem) var(--spacing-16, 1rem)}:host .course-info-container .info-sub-container yoo-collapsible{background:transparent}:host .course-info-container .info-sub-container yoo-collapsible div[slot=title]{padding-left:0;color:var(--dark, #000000);font-weight:var(--font-weight-700, 700);font-size:var(--font-size-18, 1.125rem)}:host .course-info-container .info-sub-container yoo-collapsible .details-container{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--spacing-08, 0.5rem);-ms-flex-align:center;align-items:center;margin-bottom:var(--spacing-08, 0.5rem)}:host .course-info-container .info-sub-container .button-container{padding-top:var(--spacing-08, 0.5rem);border-top:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host .course-info-container yoo-background{display:block}:host .course-info-container yoo-background.hidden{display:none}:host .course-info-container .course-description{padding-bottom:var(--spacing-08, 0.5rem);font-size:var(--font-size-14, 0.875rem)}:host .course-info-container .progress-bar-container{display:-ms-flexbox;display:flex;padding-bottom:var(--spacing-08, 0.5rem);font-size:var(--font-size-14, 0.875rem)}:host .course-info-container .progress-bar-container yoo-progress-bar{margin-right:var(--spacing-04, 0.25rem);--progress-bar-color:var(--app-color, #5a30f4)}:host(.web:not(.force-mobile)) .full-width-view{width:35%}:host(.mobile) .course-info-container{border:none}:host(.mobile) .course-info-container .course-title{margin:0;font-weight:var(--font-weight-700, 700);font-size:var(--font-size-24, 1.5rem);line-height:normal}:host(.mobile) .course-info-container .course-info{margin-top:var(--spacing-08, 0.5rem)}:host(.mobile) .course-info-container .course-info yoo-tag{font-size:var(--font-size-16, 1rem)}:host(.mobile) .course-info-container .course-points{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:var(--spacing-08, 0.5rem)}:host(.mobile) .course-info-container .course-points yoo-tag{padding-right:var(--spacing-08, 0.5rem);padding-bottom:var(--spacing-08, 0.5rem)}:host(.mobile) .course-info-container .course-points .badges-container{display:-ms-flexbox;display:flex}:host(.mobile) .course-info-container .course-points .badges-container yoo-tag{padding-right:var(--spacing-08, 0.5rem)}:host(.mobile) .course-info-container .progress-bar-container{height:1.25rem;margin-top:var(--spacing-16, 1rem);padding:0}:host(.mobile) .course-info-container .course-description{margin-top:var(--spacing-16, 1rem);padding:0;color:var(--stable, #adadad);font-weight:var(--font-weight-400, 400);font-size:var(--font-size-16, 1rem)}:host(.web) yoo-progress-bar{--progress-value-font-size:var(--font-size-14, 0.875rem)}";
+const courseSummaryCss = "svg:not(:root){overflow:hidden}:host{display:block}:host .course-info-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;border-top:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host .course-info-container .info-sub-container{padding:var(--spacing-08, 0.5rem) var(--spacing-16, 1rem)}:host .course-info-container .info-sub-container yoo-collapsible{background:transparent}:host .course-info-container .info-sub-container yoo-collapsible div[slot=title]{padding-left:0;color:var(--dark, #000000);font-weight:var(--font-weight-700, 700);font-size:var(--font-size-18, 1.125rem)}:host .course-info-container .info-sub-container yoo-collapsible .details-container{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--spacing-08, 0.5rem);-ms-flex-align:center;align-items:center;margin-bottom:var(--spacing-08, 0.5rem)}:host .course-info-container .info-sub-container .button-container{padding-top:var(--spacing-08, 0.5rem);border-top:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host .course-info-container yoo-img[hidden]{display:none}:host .course-info-container .course-description{padding-bottom:var(--spacing-08, 0.5rem);font-size:var(--font-size-14, 0.875rem)}:host .course-info-container .progress-bar-container{display:-ms-flexbox;display:flex;padding-bottom:var(--spacing-08, 0.5rem);font-size:var(--font-size-14, 0.875rem)}:host .course-info-container .progress-bar-container yoo-progress-bar{margin-right:var(--spacing-04, 0.25rem);--progress-bar-color:var(--app-color, #5a30f4)}:host(.web:not(.force-mobile)) .full-width-view{width:35%}:host(.mobile) .course-info-container{border:none}:host(.mobile) .course-info-container .course-title{margin:0;font-weight:var(--font-weight-700, 700);font-size:var(--font-size-24, 1.5rem);line-height:normal}:host(.mobile) .course-info-container .course-info{margin-top:var(--spacing-08, 0.5rem)}:host(.mobile) .course-info-container .course-info yoo-tag{font-size:var(--font-size-16, 1rem)}:host(.mobile) .course-info-container .course-points{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:var(--spacing-08, 0.5rem)}:host(.mobile) .course-info-container .course-points yoo-tag{padding-right:var(--spacing-08, 0.5rem);padding-bottom:var(--spacing-08, 0.5rem)}:host(.mobile) .course-info-container .course-points .badges-container{display:-ms-flexbox;display:flex}:host(.mobile) .course-info-container .course-points .badges-container yoo-tag{padding-right:var(--spacing-08, 0.5rem)}:host(.mobile) .course-info-container .progress-bar-container{height:1.25rem;margin-top:var(--spacing-16, 1rem);padding:0}:host(.mobile) .course-info-container .course-description{margin-top:var(--spacing-16, 1rem);padding:0;color:var(--stable, #adadad);font-weight:var(--font-weight-400, 400);font-size:var(--font-size-16, 1rem)}:host(.web) yoo-progress-bar{--progress-value-font-size:var(--font-size-14, 0.875rem)}";
 
 const YooCourseSummaryComponent = class {
   constructor(hostRef) {
@@ -134,7 +134,7 @@ const YooCourseSummaryComponent = class {
   }
   renderWeb() {
     var _a;
-    return (index.h("div", { class: "course-info-container" }, !this.forceMobile && index.h("yoo-background", { class: { 'course-summary': true, 'hidden': this.isHidden }, forceMobile: this.forceMobile, imgUrl: this.getCourseImage(), imgHeight: this.imageHeight, imgWidth: this.imageWidth }), index.h("div", { class: "info-sub-container" }, index.h("yoo-collapsible", { class: "lesson-detail no-padding", slotHeader: true, iconSize: "medium", collapsed: false, onContentShown: ev => this.onCollapsibleToggled(ev.detail) }, index.h("div", { slot: "title" }, overlays.translateMulti((_a = this.actualPlan) === null || _a === void 0 ? void 0 : _a.title)), this.renderProgress(), index.h("div", { class: "details-container" }, this.availablePoints > 0 && this.renderCoursePoints(), this.renderCompetency(), this.renderDueDate(), this.badges > 0 && index.h("yoo-tooltip", { placement: "top", content: `<yoo-tag color="text-color-20" icon="lock" icon-only-color="light" size="small"></yoo-tag> ${this.badges} ${overlays.translate('BADGESAVAILABLE')}` }, index.h("yoo-icon", { name: "badge", size: "small" }))), this.renderDescription(), this.renderRatingButton()))));
+    return (index.h("div", { class: "course-info-container" }, !this.forceMobile && index.h("yoo-img", { ignoreHeight: true, ignoreWidth: true, hidden: this.isHidden, src: this.getCourseImage() }), index.h("div", { class: "info-sub-container" }, index.h("yoo-collapsible", { class: "lesson-detail no-padding", slotHeader: true, iconSize: "medium", collapsed: false, onContentShown: ev => this.onCollapsibleToggled(ev.detail) }, index.h("div", { slot: "title" }, overlays.translateMulti((_a = this.actualPlan) === null || _a === void 0 ? void 0 : _a.title)), this.renderProgress(), index.h("div", { class: "details-container" }, this.availablePoints > 0 && this.renderCoursePoints(), this.renderCompetency(), this.renderDueDate(), this.badges > 0 && index.h("yoo-tooltip", { placement: "top", content: `<yoo-tag color="text-color-20" icon="lock" icon-only-color="light" size="small"></yoo-tag> ${this.badges} ${overlays.translate('BADGESAVAILABLE')}` }, index.h("yoo-icon", { name: "badge", size: "small" }))), this.renderDescription(), this.renderRatingButton()))));
   }
   render() {
     return (index.h(index.Host, { class: {

package/dist/cjs/yoo-form-signature-pad-dialog.cjs.entry.js

@@ -11,7 +11,7 @@ require('./index-f08462bf.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 /*!
- * Signature Pad v4.0.7 | https://github.com/szimek/signature_pad
+ * Signature Pad v4.0.8 | https://github.com/szimek/signature_pad
  * (c) 2022 Szymon Nowak | Released under the MIT license
  */
 
@@ -559,7 +559,7 @@ class SignaturePad extends SignatureEventTarget {
         const header = '<svg' +
             ' xmlns="http://www.w3.org/2000/svg"' +
             ' xmlns:xlink="http://www.w3.org/1999/xlink"' +
-            ` viewBox="${minX} ${minY} ${this.canvas.width} ${this.canvas.height}"` +
+            ` viewBox="${minX} ${minY} ${maxX} ${maxY}"` +
             ` width="${maxX}"` +
             ` height="${maxY}"` +
             '>';

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

@@ -1414,6 +1414,8 @@ const YooGridComponent = class {
     else if (!this.disconnected) {
       this.setFormFieldValue();
     }
+    this.searchText = '';
+    this.onFetchData();
   }
   setFormFieldValue() {
     if (this.isFormField && this.returnQuery) {

package/dist/collection/collection-manifest.json

@@ -8,7 +8,6 @@
     "./components/1.atoms/icon/icon.js",
     "./components/1.atoms/avatar/avatar.js",
     "./components/1.atoms/avatars/avatars.js",
-    "./components/1.atoms/background/background.js",
     "./components/1.atoms/badge/badge.js",
     "./components/1.atoms/breadcrumbs/breadcrumbs.js",
     "./components/1.atoms/button/button.js",

package/dist/collection/components/2.molecules/context-dialog/context-dialog.css

@@ -207,7 +207,7 @@ svg:not(:root) {
 
 :host {
   --basic-transitions: opacity .3s ease-in-out, margin .3s ease-in-out;
-  z-index: 10000;
+  z-index: 21000;
   display: flex;
   flex-direction: column;
   overflow: hidden;

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

@@ -1331,6 +1331,8 @@ export class YooGridComponent {
     else if (!this.disconnected) {
       this.setFormFieldValue();
     }
+    this.searchText = '';
+    this.onFetchData();
   }
   setFormFieldValue() {
     if (this.isFormField && this.returnQuery) {

package/dist/collection/feature-communicate/feed/community-detail/community-detail.js

@@ -37,11 +37,11 @@ export class YooCommunityDetailComponent {
   }
   renderMobileHeader() {
     var _a, _b, _c;
-    return h("div", { class: "top-container" }, h("yoo-img", { src: (_a = this.community) === null || _a === void 0 ? void 0 : _a.covers, fallbackIcon: { name: 'community', color: 'light' } }), h("div", { class: "title-container" }, h("yoo-truncate", null, translateMulti((_b = this.community) === null || _b === void 0 ? void 0 : _b.name))), h("div", { class: "members-container" }, pipes.number.transform((_c = this.community) === null || _c === void 0 ? void 0 : _c.numberOfMembers) + ' ' + translate('MEMBERS')), h("div", { class: "bottom-overlay" }));
+    return h("div", { class: "top-container" }, h("yoo-img", { src: (_a = this.community) === null || _a === void 0 ? void 0 : _a.covers, fallbackIcon: { name: 'community', color: 'light' } }), h("div", { class: "title-container" }, h("yoo-truncate", null, translateMulti((_b = this.community) === null || _b === void 0 ? void 0 : _b.name))), h("div", { class: "members-container" }, pipes.number.transform(((_c = this.community) === null || _c === void 0 ? void 0 : _c.numberOfMembers) || 0) + ' ' + translate('MEMBERS')), h("div", { class: "bottom-overlay" }));
   }
   renderWebHeader() {
     var _a, _b, _c;
-    return h("div", { class: "top-container", ref: (el) => this.topContainerElement = el }, h("div", { class: "image-container" }, h("yoo-img", { src: (_a = this.community) === null || _a === void 0 ? void 0 : _a.covers, fallbackIcon: { name: 'community', color: 'light' } })), h("div", { class: "information-container" }, h("div", { class: "title-container" }, translateMulti((_b = this.community) === null || _b === void 0 ? void 0 : _b.name), h("div", { class: "more-container" }, h("slot", { name: "action-slot" }), h("slot", { name: "more-action" }))), h("div", { class: "members-container" }, pipes.number.transform((_c = this.community) === null || _c === void 0 ? void 0 : _c.numberOfMembers) + ' ' + translate('MEMBERS')), this.renderDescriptionContainer()));
+    return h("div", { class: "top-container", ref: (el) => this.topContainerElement = el }, h("div", { class: "image-container" }, h("yoo-img", { src: (_a = this.community) === null || _a === void 0 ? void 0 : _a.covers, fallbackIcon: { name: 'community', color: 'light' } })), h("div", { class: "information-container" }, h("div", { class: "title-container" }, translateMulti((_b = this.community) === null || _b === void 0 ? void 0 : _b.name), h("div", { class: "more-container" }, h("slot", { name: "action-slot" }), h("slot", { name: "more-action" }))), h("div", { class: "members-container" }, pipes.number.transform(((_c = this.community) === null || _c === void 0 ? void 0 : _c.numberOfMembers) || 0) + ' ' + translate('MEMBERS')), this.renderDescriptionContainer()));
   }
   renderTabSelection() {
     return (h("div", { class: { 'tab-outer-container': true, 'collapsed': this.hideMembersList } }, h("div", { class: "tab-container" }, h("div", { class: "collapsible-icon-container", onClick: () => { this.toggleList(); } }, h("yoo-icon", { size: "medium", name: "sidebar-right", color: this.hideMembersList ? 'app-color' : 'stable' })), !this.hideMembersList && h("yoo-tabs", { class: "no-margin", tabs: this.tabs, onTabSelected: (ev) => this.membersListChanged.emit({ manager: ev.detail.nextIndex === 1 }) })), !this.hideMembersList && h("slot", { name: "members-grid" })));

package/dist/collection/feature-learn/learning/course-summary/course-summary.css

@@ -237,10 +237,7 @@ svg:not(:root) {
   padding-top: var(--spacing-08, 0.5rem);
   border-top: var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);
 }
-:host .course-info-container yoo-background {
-  display: block;
-}
-:host .course-info-container yoo-background.hidden {
+:host .course-info-container yoo-img[hidden] {
   display: none;
 }
 :host .course-info-container .course-description {

package/dist/collection/feature-learn/learning/course-summary/course-summary.js

@@ -122,7 +122,7 @@ export class YooCourseSummaryComponent {
   }
   renderWeb() {
     var _a;
-    return (h("div", { class: "course-info-container" }, !this.forceMobile && h("yoo-background", { class: { 'course-summary': true, 'hidden': this.isHidden }, forceMobile: this.forceMobile, imgUrl: this.getCourseImage(), imgHeight: this.imageHeight, imgWidth: this.imageWidth }), h("div", { class: "info-sub-container" }, h("yoo-collapsible", { class: "lesson-detail no-padding", slotHeader: true, iconSize: "medium", collapsed: false, onContentShown: ev => this.onCollapsibleToggled(ev.detail) }, h("div", { slot: "title" }, translateMulti((_a = this.actualPlan) === null || _a === void 0 ? void 0 : _a.title)), this.renderProgress(), h("div", { class: "details-container" }, this.availablePoints > 0 && this.renderCoursePoints(), this.renderCompetency(), this.renderDueDate(), this.badges > 0 && h("yoo-tooltip", { placement: "top", content: `<yoo-tag color="text-color-20" icon="lock" icon-only-color="light" size="small"></yoo-tag> ${this.badges} ${translate('BADGESAVAILABLE')}` }, h("yoo-icon", { name: "badge", size: "small" }))), this.renderDescription(), this.renderRatingButton()))));
+    return (h("div", { class: "course-info-container" }, !this.forceMobile && h("yoo-img", { ignoreHeight: true, ignoreWidth: true, hidden: this.isHidden, src: this.getCourseImage() }), h("div", { class: "info-sub-container" }, h("yoo-collapsible", { class: "lesson-detail no-padding", slotHeader: true, iconSize: "medium", collapsed: false, onContentShown: ev => this.onCollapsibleToggled(ev.detail) }, h("div", { slot: "title" }, translateMulti((_a = this.actualPlan) === null || _a === void 0 ? void 0 : _a.title)), this.renderProgress(), h("div", { class: "details-container" }, this.availablePoints > 0 && this.renderCoursePoints(), this.renderCompetency(), this.renderDueDate(), this.badges > 0 && h("yoo-tooltip", { placement: "top", content: `<yoo-tag color="text-color-20" icon="lock" icon-only-color="light" size="small"></yoo-tag> ${this.badges} ${translate('BADGESAVAILABLE')}` }, h("yoo-icon", { name: "badge", size: "small" }))), this.renderDescription(), this.renderRatingButton()))));
   }
   render() {
     return (h(Host, { class: {