@yoobic/yobi 8.2.2 → 8.3.0-2

package/dist/cjs/yoo-card-progress.cjs.entry.js

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
 const lodash = require('./lodash-597bda6d.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const cardProgressCss = ":host{position:relative;display:block;background:var(--light, #ffffff)}:host([mode=large]){padding:var(--spacing-16, 1rem);border-radius:var(--border-radius-08, 0.5rem);-webkit-box-shadow:var(--tile-shadow, 0 1px 4px 0 rgba(0, 0, 0, 0.1));box-shadow:var(--tile-shadow, 0 1px 4px 0 rgba(0, 0, 0, 0.1))}:host([mode=large]) yoo-tooltip{float:right;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:host([mode=large]) yoo-progress-bar{width:100%}:host([mode=large]) .label{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:end;align-items:end;-ms-flex-pack:justify;justify-content:space-between;width:100%}:host([mode=large]) .label div{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end}:host([mode=large]) .label div span{padding-right:var(--spacing-04, 0.25rem);font-weight:700;font-size:var(--font-size-28, 1.75rem);line-height:1.125}:host([mode=large]) .label div yoo-display-increment{right:var(--spacing-16, 1rem);display:-ms-flexbox;display:flex;-ms-flex-item-align:end;align-self:end}:host([mode=compact]){line-height:0.75}:host([mode=compact]) .label{font-size:var(--font-size-12, 0.75rem)}:host([mode=compact]) .label span{padding-right:var(--spacing-04, 0.25rem)}@media print{:host .large-container{page-break-after:auto;page-break-before:avoid;page-break-inside:avoid}}";
 
@@ -17,10 +18,10 @@ const YooCardProgressComponent = class {
     this.mode = 'large';
   }
   get isAnimated() {
-    return this.animated && !index$1.isAnimationsDisabled();
+    return this.animated && !overlays.isAnimationsDisabled();
   }
   renderHelpButton() {
-    return this.entry.helpDescriptionTK && (index.h("yoo-tooltip", { content: index$1.translate(this.entry.helpDescriptionTK), placement: "right" }, index.h("yoo-icon", { name: "help", color: "text-color" })));
+    return this.entry.helpDescriptionTK && (index.h("yoo-tooltip", { content: overlays.translate(this.entry.helpDescriptionTK), placement: "right" }, index.h("yoo-icon", { name: "help", color: "text-color" })));
   }
   renderChange(change) {
     return !!change && index.h("yoo-display-increment", { changeValue: change });
@@ -28,7 +29,7 @@ const YooCardProgressComponent = class {
   renderLabel() {
     const { labelConfig, animatedValue, change } = this.entry;
     const animateValue = this.isAnimated && ((lodash.isFinite(animatedValue) && animatedValue !== 0) || (lodash.isString(animatedValue) && !animatedValue));
-    return labelConfig && index.h("section", { class: "label" }, index.h("div", null, index.h("span", { ref: (el) => (this.valueElement = el) }, animateValue ? '' : animatedValue), index$1.translate(labelConfig.value)), this.renderChange(change));
+    return labelConfig && index.h("section", { class: "label" }, index.h("div", null, index.h("span", { ref: (el) => (this.valueElement = el) }, animateValue ? '' : animatedValue), overlays.translate(labelConfig.value)), this.renderChange(change));
   }
   renderProgress() {
     const { progressBarParams, animatedValue } = this.entry;

package/dist/cjs/yoo-card-recommendation.cjs.entry.js

@@ -2,12 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
 const lodash = require('./lodash-597bda6d.js');
-const localForage = require('./localForage-f618f824.js');
+const localForage = require('./localForage-e52707b9.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const cardRecommendationCss = ":host{cursor:pointer}:host .outer-container{max-width:18.5rem;margin-top:var(--spacing-08, 0.5rem);border-radius:var(--border-radius-08, 0.5rem);-webkit-box-shadow:var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1))}:host .outer-container .image-container{position:relative;width:18.5rem}:host .outer-container .image-container .image{border-radius:inherit !important}:host .outer-container .image-container .course-title{position:absolute;bottom:var(--spacing-16, 1rem);left:var(--spacing-16, 1rem);width:90%;color:var(--light, #ffffff);font-size:var(--font-size-14, 0.875rem);text-align:left;--max-lines:1}:host .outer-container .image-container .img-tag{position:absolute;top:var(--spacing-16, 1rem);left:var(--spacing-16, 1rem)}:host([type=plan]) .outer-container .image-container{min-height:12.5rem;max-height:12.5rem;margin-bottom:0;border-radius:inherit}:host([type=plan]) .outer-container .image-container .image{height:12.5rem}:host([type=plan]) .outer-container .image-container .points-tag,:host([type=plan]) .outer-container .image-container .lessons-tag{position:absolute;bottom:2.5rem}:host([type=plan]) .outer-container .image-container .points-tag{left:var(--spacing-16, 1rem)}:host([type=plan]) .outer-container .image-container .lessons-tag{left:4.25rem}:host([type=lesson]) .outer-container{margin-bottom:var(--spacing-08, 0.5rem)}:host([type=lesson]) .outer-container .image-container{min-height:8.5rem;max-height:8.5rem;border-radius:var(--border-radius-08, 0.5rem) var(--border-radius-08, 0.5rem) 0 0}:host([type=lesson]) .outer-container .image-container .image{height:8.5rem}:host([type=lesson]) .outer-container .image-container .course-title{font-size:var(--font-size-12, 0.75rem)}:host([type=lesson]) .outer-container .content-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-height:3.5rem;padding:var(--spacing-08, 0.5rem) var(--spacing-16, 1rem) 0 var(--spacing-16, 1rem)}:host([type=lesson]) .outer-container .content-container .title-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}:host([type=lesson]) .outer-container .content-container .title-container yoo-icon+.lesson-title{width:calc(100% - (var(--icon-size-01, 1rem) + var(--spacing-08, 0.5rem)))}:host([type=lesson]) .outer-container .content-container .title-container .lesson-title{margin-left:var(--spacing-08, 0.5rem);font-size:var(--font-size-14, 0.875rem);text-align:left}:host([type=lesson]) .outer-container .content-container .points{margin-left:var(--spacing-24, 1.5rem)}:host([type=lesson]) .outer-container .content-container .points span{font-size:var(--font-size-14, 0.875rem)}";
 
@@ -24,7 +25,7 @@ const YooCardRecommendationComponent = class {
   async prepareData() {
     this.actualPlan = this.entry['plan'] || this.entry;
     const backgroundImage = lodash.get(this.actualPlan, 'background._downloadURL', lodash.get(this.actualPlan, 'background'));
-    this.backgroundImage = index$1.isOffline() ? await localForage.getFromOfflineStorage(backgroundImage) : backgroundImage;
+    this.backgroundImage = overlays.isOffline() ? await localForage.getFromOfflineStorage(backgroundImage) : backgroundImage;
   }
   getEntry(attr1) {
     var _a;
@@ -36,14 +37,14 @@ const YooCardRecommendationComponent = class {
   renderLessonRecommendation() {
     var _a;
     const lesson = this.entry;
-    return (index.h("div", { class: "outer-container" }, index.h("div", { class: "image-container" }, this.backgroundImage && this.renderCardImage(), index.h("yoo-tag", { class: "img-tag", color: "app-color", size: "small" }, index.h("yoo-icon", { slot: "start", size: "small", name: "lesson", color: "light" }), index$1.translate('LESSON')), ((_a = this.actualPlan) === null || _a === void 0 ? void 0 : _a.title) && index.h("yoo-truncated-line", { class: "course-title", content: index$1.translateMulti(this.actualPlan.title), tooltipPlacement: "top" })), index.h("div", { class: "content-container" }, index.h("div", { class: "title-container" }, (lesson === null || lesson === void 0 ? void 0 : lesson.lessonType) && index.h("yoo-icon", { size: "small", name: index$1.getLessonTypeIcon(lesson.lessonType), color: "app-color" }), (lesson === null || lesson === void 0 ? void 0 : lesson.title) && index.h("yoo-truncated-line", { class: "lesson-title", content: index$1.translateMulti(lesson.title), tooltipPlacement: "top" })), (lesson === null || lesson === void 0 ? void 0 : lesson.points) &&
+    return (index.h("div", { class: "outer-container" }, index.h("div", { class: "image-container" }, this.backgroundImage && this.renderCardImage(), index.h("yoo-tag", { class: "img-tag", color: "app-color", size: "small" }, index.h("yoo-icon", { slot: "start", size: "small", name: "lesson", color: "light" }), overlays.translate('LESSON')), ((_a = this.actualPlan) === null || _a === void 0 ? void 0 : _a.title) && index.h("yoo-truncated-line", { class: "course-title", content: overlays.translateMulti(this.actualPlan.title), tooltipPlacement: "top" })), index.h("div", { class: "content-container" }, index.h("div", { class: "title-container" }, (lesson === null || lesson === void 0 ? void 0 : lesson.lessonType) && index.h("yoo-icon", { size: "small", name: overlays.getLessonTypeIcon(lesson.lessonType), color: "app-color" }), (lesson === null || lesson === void 0 ? void 0 : lesson.title) && index.h("yoo-truncated-line", { class: "lesson-title", content: overlays.translateMulti(lesson.title), tooltipPlacement: "top" })), (lesson === null || lesson === void 0 ? void 0 : lesson.points) &&
       index.h("yoo-tag", { class: "points", noBackground: true, color: "dark", size: "medium" }, index.h("yoo-icon", { slot: "start", size: "small", name: "star", color: "app-color" }), index.h("span", null, lesson.points)))));
   }
   renderCourseRecommendation() {
     var _a, _b;
     const lessonsCount = lodash.get(this.actualPlan, 'missiondescriptionsRef', []).length;
-    const lessonLabel = index$1.translate((lessonsCount || 0) > 1 ? 'LESSONS' : 'LESSON');
-    return (index.h("div", { class: "outer-container" }, index.h("div", { class: "image-container" }, this.backgroundImage && this.renderCardImage(), index.h("yoo-tag", { class: "img-tag", color: "app-color", size: "small" }, index.h("yoo-icon", { slot: "start", size: "small", name: "courses", color: "light" }), index$1.translate('COURSE')), index.h("yoo-tag", { class: "points-tag", color: "light", noBackground: true, size: "small" }, index.h("yoo-icon", { slot: "start", size: "small", name: "star", color: "light" }), ((_a = this.actualPlan) === null || _a === void 0 ? void 0 : _a.availablePoints) || 0), index.h("yoo-tag", { class: "lessons-tag", color: "light", noBackground: true, size: "small" }, index.h("yoo-icon", { slot: "start", size: "small", name: "lesson", color: "light" }), `${lessonsCount || 0} ${lessonLabel}`), ((_b = this.actualPlan) === null || _b === void 0 ? void 0 : _b.title) && index.h("yoo-truncated-line", { class: "course-title", content: index$1.translateMulti(this.actualPlan.title), tooltipPlacement: "top" }))));
+    const lessonLabel = overlays.translate((lessonsCount || 0) > 1 ? 'LESSONS' : 'LESSON');
+    return (index.h("div", { class: "outer-container" }, index.h("div", { class: "image-container" }, this.backgroundImage && this.renderCardImage(), index.h("yoo-tag", { class: "img-tag", color: "app-color", size: "small" }, index.h("yoo-icon", { slot: "start", size: "small", name: "courses", color: "light" }), overlays.translate('COURSE')), index.h("yoo-tag", { class: "points-tag", color: "light", noBackground: true, size: "small" }, index.h("yoo-icon", { slot: "start", size: "small", name: "star", color: "light" }), ((_a = this.actualPlan) === null || _a === void 0 ? void 0 : _a.availablePoints) || 0), index.h("yoo-tag", { class: "lessons-tag", color: "light", noBackground: true, size: "small" }, index.h("yoo-icon", { slot: "start", size: "small", name: "lesson", color: "light" }), `${lessonsCount || 0} ${lessonLabel}`), ((_b = this.actualPlan) === null || _b === void 0 ? void 0 : _b.title) && index.h("yoo-truncated-line", { class: "course-title", content: overlays.translateMulti(this.actualPlan.title), tooltipPlacement: "top" }))));
   }
   render() {
     return this.entry ? (this.type === 'lesson' ? this.renderLessonRecommendation() : this.renderCourseRecommendation()) : null;

package/dist/cjs/yoo-card-sticky.cjs.entry.js

@@ -2,12 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
-const commonHelpers = require('./common-helpers-6970c46c.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
+const commonHelpers = require('./common-helpers-a4efe957.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const cardStickyCss = ":host{--feed-card-width:300px;--feed-card-max-height:230px;cursor:pointer}:host yoo-tag{--padding:0 var(--spacing-04, 0.25rem) 0 var(--spacing-04, 0.25rem);color:var(--text-color)}:host yoo-tag.top.left{position:absolute;top:var(--spacing-16, 1rem);left:var(--spacing-16, 1rem);z-index:9;border-radius:var(--border-radius-04, 0.25rem)}:host yoo-icon{width:var(--spacing-16, 1rem);height:var(--spacing-16, 1rem)}:host yoo-icon[name=bookmark]{right:var(--spacing-16, 1rem);background-color:var(--light-20, rgba(255, 255, 255, 0.2))}:host .outer-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;max-width:310px;max-height:var(--feed-card-max-height);overflow:hidden;background-position:center;border-radius:0.25rem}:host .outer-container .image-container{--border-radius:var(--border-radius-04, 0.25rem);width:100%;height:90%;background:var(--stable-light, #f1f1f1);-webkit-box-shadow:var(--button-shadow, 0 0.125rem 0.375rem rgba(0, 0, 0, 0.1));box-shadow:var(--button-shadow, 0 0.125rem 0.375rem rgba(0, 0, 0, 0.1))}:host .outer-container .gradient-container{position:absolute;width:100%;height:100%;background:-webkit-gradient(linear, left top, right top, from(var(--light, #ffffff)), color-stop(40%, var(--light, #ffffff)), to(var(--dark-10, rgba(0, 0, 0, 0.1))));background:linear-gradient(90deg, var(--light, #ffffff), var(--light, #ffffff) 40%, var(--dark-10, rgba(0, 0, 0, 0.1)));border-radius:var(--border-radius-04, 0.25rem)}:host .outer-container .gradient-container .text-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;width:40%;height:100%;margin-left:1.25rem;text-align:left}:host .outer-container .gradient-container .text-container .category{color:var(--app-color, #5a30f4);font-size:var(--font-size-14, 0.875rem)}:host .outer-container .gradient-container .text-container .title{margin-top:1.25rem;font-size:var(--font-size-18, 1.125rem)}:host .outer-container .gradient-container .text-container .title html,:host .outer-container .gradient-container .text-container .title body,:host .outer-container .gradient-container .text-container .title div:not([class^=fr-]),:host .outer-container .gradient-container .text-container .title span:not([class^=fr-]),:host .outer-container .gradient-container .text-container .title img:not([class^=fr-]),:host .outer-container .gradient-container .text-container .title applet,:host .outer-container .gradient-container .text-container .title object,:host .outer-container .gradient-container .text-container .title iframe,:host .outer-container .gradient-container .text-container .title h1,:host .outer-container .gradient-container .text-container .title h2,:host .outer-container .gradient-container .text-container .title h3,:host .outer-container .gradient-container .text-container .title h4,:host .outer-container .gradient-container .text-container .title h5,:host .outer-container .gradient-container .text-container .title h6,:host .outer-container .gradient-container .text-container .title p,:host .outer-container .gradient-container .text-container .title blockquote,:host .outer-container .gradient-container .text-container .title pre,:host .outer-container .gradient-container .text-container .title a,:host .outer-container .gradient-container .text-container .title abbr,:host .outer-container .gradient-container .text-container .title acronym,:host .outer-container .gradient-container .text-container .title address,:host .outer-container .gradient-container .text-container .title big,:host .outer-container .gradient-container .text-container .title cite,:host .outer-container .gradient-container .text-container .title code,:host .outer-container .gradient-container .text-container .title del,:host .outer-container .gradient-container .text-container .title dfn,:host .outer-container .gradient-container .text-container .title em,:host .outer-container .gradient-container .text-container .title font,:host .outer-container .gradient-container .text-container .title ins,:host .outer-container .gradient-container .text-container .title kbd,:host .outer-container .gradient-container .text-container .title q,:host .outer-container .gradient-container .text-container .title s,:host .outer-container .gradient-container .text-container .title samp,:host .outer-container .gradient-container .text-container .title small,:host .outer-container .gradient-container .text-container .title strike,:host .outer-container .gradient-container .text-container .title strong,:host .outer-container .gradient-container .text-container .title sub,:host .outer-container .gradient-container .text-container .title sup,:host .outer-container .gradient-container .text-container .title tt,:host .outer-container .gradient-container .text-container .title var,:host .outer-container .gradient-container .text-container .title dl,:host .outer-container .gradient-container .text-container .title dt,:host .outer-container .gradient-container .text-container .title dd,:host .outer-container .gradient-container .text-container .title ol,:host .outer-container .gradient-container .text-container .title ul,:host .outer-container .gradient-container .text-container .title li,:host .outer-container .gradient-container .text-container .title fieldset,:host .outer-container .gradient-container .text-container .title form,:host .outer-container .gradient-container .text-container .title label,:host .outer-container .gradient-container .text-container .title legend,:host .outer-container .gradient-container .text-container .title table,:host .outer-container .gradient-container .text-container .title caption,:host .outer-container .gradient-container .text-container .title tbody,:host .outer-container .gradient-container .text-container .title tfoot,:host .outer-container .gradient-container .text-container .title thead,:host .outer-container .gradient-container .text-container .title tr,:host .outer-container .gradient-container .text-container .title th{margin:0;padding:0;font-weight:inherit;font-size:100%;font-family:inherit;font-style:inherit;vertical-align:baseline;border:0;outline:0;-webkit-margin-before:0;-webkit-margin-after:0;-webkit-margin-start:0;-webkit-margin-end:0}:host .outer-container .gradient-container .text-container .description{color:var(--stable, #adadad);font-size:var(--font-size-12, 0.75rem)}:host .outer-container .gradient-container .text-container .description html,:host .outer-container .gradient-container .text-container .description body,:host .outer-container .gradient-container .text-container .description div:not([class^=fr-]),:host .outer-container .gradient-container .text-container .description span:not([class^=fr-]),:host .outer-container .gradient-container .text-container .description img:not([class^=fr-]),:host .outer-container .gradient-container .text-container .description applet,:host .outer-container .gradient-container .text-container .description object,:host .outer-container .gradient-container .text-container .description iframe,:host .outer-container .gradient-container .text-container .description h1,:host .outer-container .gradient-container .text-container .description h2,:host .outer-container .gradient-container .text-container .description h3,:host .outer-container .gradient-container .text-container .description h4,:host .outer-container .gradient-container .text-container .description h5,:host .outer-container .gradient-container .text-container .description h6,:host .outer-container .gradient-container .text-container .description p,:host .outer-container .gradient-container .text-container .description blockquote,:host .outer-container .gradient-container .text-container .description pre,:host .outer-container .gradient-container .text-container .description a,:host .outer-container .gradient-container .text-container .description abbr,:host .outer-container .gradient-container .text-container .description acronym,:host .outer-container .gradient-container .text-container .description address,:host .outer-container .gradient-container .text-container .description big,:host .outer-container .gradient-container .text-container .description cite,:host .outer-container .gradient-container .text-container .description code,:host .outer-container .gradient-container .text-container .description del,:host .outer-container .gradient-container .text-container .description dfn,:host .outer-container .gradient-container .text-container .description em,:host .outer-container .gradient-container .text-container .description font,:host .outer-container .gradient-container .text-container .description ins,:host .outer-container .gradient-container .text-container .description kbd,:host .outer-container .gradient-container .text-container .description q,:host .outer-container .gradient-container .text-container .description s,:host .outer-container .gradient-container .text-container .description samp,:host .outer-container .gradient-container .text-container .description small,:host .outer-container .gradient-container .text-container .description strike,:host .outer-container .gradient-container .text-container .description strong,:host .outer-container .gradient-container .text-container .description sub,:host .outer-container .gradient-container .text-container .description sup,:host .outer-container .gradient-container .text-container .description tt,:host .outer-container .gradient-container .text-container .description var,:host .outer-container .gradient-container .text-container .description dl,:host .outer-container .gradient-container .text-container .description dt,:host .outer-container .gradient-container .text-container .description dd,:host .outer-container .gradient-container .text-container .description ol,:host .outer-container .gradient-container .text-container .description ul,:host .outer-container .gradient-container .text-container .description li,:host .outer-container .gradient-container .text-container .description fieldset,:host .outer-container .gradient-container .text-container .description form,:host .outer-container .gradient-container .text-container .description label,:host .outer-container .gradient-container .text-container .description legend,:host .outer-container .gradient-container .text-container .description table,:host .outer-container .gradient-container .text-container .description caption,:host .outer-container .gradient-container .text-container .description tbody,:host .outer-container .gradient-container .text-container .description tfoot,:host .outer-container .gradient-container .text-container .description thead,:host .outer-container .gradient-container .text-container .description tr,:host .outer-container .gradient-container .text-container .description th{margin:0;padding:0;font-weight:inherit;font-size:100%;font-family:inherit;font-style:inherit;vertical-align:baseline;border:0;outline:0;-webkit-margin-before:0;-webkit-margin-after:0;-webkit-margin-start:0;-webkit-margin-end:0}:host .outer-container .gradient-container .text-container yoo-button{margin-top:1.25rem}:host .outer-container .bottom-container{border-radius:5px}:host .outer-container.feeds.gif .bottom-container{-webkit-transform:rotateX(0);transform:rotateX(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000;perspective:1000}:host .outer-container.feeds.gif .image-container{--border-radius:var(--border-radius-04, 0.25rem)}:host .outer-container.feeds{position:relative;display:-ms-flexbox;display:flex;width:var(--feed-card-width);height:225px;-webkit-box-shadow:var(--card-shadow-2, 0 0.3125rem 0.9375rem 0 rgba(40, 47, 54, 0.08));box-shadow:var(--card-shadow-2, 0 0.3125rem 0.9375rem 0 rgba(40, 47, 54, 0.08))}:host .outer-container.feeds .image-container{position:absolute;height:100%;-webkit-box-shadow:none;box-shadow:none}:host .outer-container.feeds .bottom-container{position:absolute;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:4.0625rem;padding:var(--spacing-08, 0.5rem);padding-top:var(--spacing-02, 0.125rem);color:var(--light, #ffffff);line-height:normal;text-align:left;background-color:var(--dark-60, rgba(0, 0, 0, 0.6));border-radius:0}:host .outer-container.feeds .bottom-container .text-wrapper{--max-lines:1;-webkit-box-sizing:border-box;box-sizing:border-box;margin-bottom:0px;color:var(--light, #ffffff);font-size:var(--font-size-16, 1rem);line-height:normal}:host .outer-container.feeds .bottom-container .text-wrapper .fr-emoticon{display:inline-block;width:var(--spacing-16, 1rem);height:var(--spacing-16, 1rem)}:host .outer-container.feeds .bottom-container .subheading{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--light, #ffffff);font-size:var(--font-size-12, 0.75rem)}:host .outer-container.feeds .bottom-container .subheading yoo-avatar{margin-right:var(--spacing-08, 0.5rem)}:host .outer-container.feeds .bottom-container .subheading yoo-icon:not(.header){margin-left:auto}:host .outer-container.courses,:host .outer-container.plans,:host .outer-container.courses-small{--text-color:var(--light, #ffffff);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-shadow:var(--card-shadow-2, 0 0.3125rem 0.9375rem 0 rgba(40, 47, 54, 0.08));box-shadow:var(--card-shadow-2, 0 0.3125rem 0.9375rem 0 rgba(40, 47, 54, 0.08))}:host .outer-container.courses yoo-img,:host .outer-container.plans yoo-img,:host .outer-container.courses-small yoo-img{position:relative;width:100%;height:100%;border-radius:var(--border-radius-08, 0.5rem)}:host .outer-container.courses yoo-img yoo-icon,:host .outer-container.plans yoo-img yoo-icon,:host .outer-container.courses-small yoo-img yoo-icon{position:absolute;top:var(--spacing-16, 1rem);z-index:1;padding:var(--spacing-04, 0.25rem);border:none;border-radius:var(--border-radius-24, 1.5rem)}:host .outer-container.courses yoo-img::after,:host .outer-container.plans yoo-img::after,:host .outer-container.courses-small yoo-img::after{position:absolute;width:100%;height:100%;background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(14%, rgba(255, 255, 255, 0)), color-stop(60%, rgba(0, 0, 0, 0.1)), color-stop(70%, rgba(0, 0, 0, 0.2)), color-stop(85%, rgba(0, 0, 0, 0.5)), to(black));background-image:linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 14%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0.5) 85%, black 100%);background-blend-mode:multiply;border-radius:var(--border-radius-08, 0.5rem);content:\"\"}:host .outer-container.courses .tags-container,:host .outer-container.plans .tags-container,:host .outer-container.courses-small .tags-container{margin-bottom:-0.2rem;padding:0 0 0 var(--spacing-16, 1rem)}:host .outer-container.courses .bottom-container,:host .outer-container.plans .bottom-container,:host .outer-container.courses-small .bottom-container{position:absolute;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:end;justify-content:flex-end;width:100%;height:100%;overflow-y:auto;background-color:var(--dark-40, rgba(0, 0, 0, 0.4));border-radius:var(--border-radius-08, 0.5rem);}:host .outer-container.courses .bottom-container::-webkit-scrollbar,:host .outer-container.plans .bottom-container::-webkit-scrollbar,:host .outer-container.courses-small .bottom-container::-webkit-scrollbar{width:var(--spacing-04, 0.25rem);height:var(--spacing-04, 0.25rem)}:host .outer-container.courses .bottom-container::-webkit-scrollbar-track,:host .outer-container.plans .bottom-container::-webkit-scrollbar-track,:host .outer-container.courses-small .bottom-container::-webkit-scrollbar-track{background-color:transparent;border-radius:var(--border-radius-04, 0.25rem)}:host .outer-container.courses .bottom-container::-webkit-scrollbar-thumb,:host .outer-container.plans .bottom-container::-webkit-scrollbar-thumb,:host .outer-container.courses-small .bottom-container::-webkit-scrollbar-thumb{background-color:transparent;border-radius:var(--border-radius-04, 0.25rem)}:host .outer-container.courses .bottom-container:hover::-webkit-scrollbar-track,:host .outer-container.plans .bottom-container:hover::-webkit-scrollbar-track,:host .outer-container.courses-small .bottom-container:hover::-webkit-scrollbar-track{background-color:var(--stable-light, #f1f1f1)}:host .outer-container.courses .bottom-container:hover::-webkit-scrollbar-thumb,:host .outer-container.plans .bottom-container:hover::-webkit-scrollbar-thumb,:host .outer-container.courses-small .bottom-container:hover::-webkit-scrollbar-thumb{background:var(--stable, #adadad)}:host .outer-container.courses .bottom-container .text-wrapper,:host .outer-container.plans .bottom-container .text-wrapper,:host .outer-container.courses-small .bottom-container .text-wrapper{overflow:hidden;margin:0 0 var(--spacing-16, 1rem) var(--spacing-16, 1rem);overflow-y:hidden;color:var(--light, #ffffff);font-weight:var(--font-weight-700, 700)}@supports (display: -webkit-box){:host .outer-container.courses .bottom-container .text-wrapper,:host .outer-container.plans .bottom-container .text-wrapper,:host .outer-container.courses-small .bottom-container .text-wrapper{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}:host .outer-container.courses .bottom-container .subheading,:host .outer-container.plans .bottom-container .subheading,:host .outer-container.courses-small .bottom-container .subheading{color:transparent}:host .outer-container.courses .bottom-container .text-wrapper,:host .outer-container.plans .bottom-container .text-wrapper{overflow:hidden;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:end;justify-content:flex-end;max-width:90%;margin:0 0 var(--spacing-16, 1rem) var(--spacing-16, 1rem);font-size:var(--font-size-18, 1.125rem);text-align:left}@supports (display: -webkit-box){:host .outer-container.courses .bottom-container .text-wrapper,:host .outer-container.plans .bottom-container .text-wrapper{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}:host .outer-container.courses-small{width:133px;height:90px}:host .outer-container.courses-small .bottom-container .text-wrapper{overflow:hidden;-ms-flex-direction:column-reverse;flex-direction:column-reverse;-ms-flex-pack:start;justify-content:flex-start;margin:0 0 var(--spacing-16, 1rem) var(--spacing-16, 1rem);font-size:var(--font-size-18, 1.125rem);line-height:var(--font-size-18, 1.125rem)}@supports (display: -webkit-box){:host .outer-container.courses-small .bottom-container .text-wrapper{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}@media only screen and (max-width: 320px){:host .outer-container.feeds{width:280px !important}}:host(.web) .outer-container{width:auto}:host(.courses.full-width) .outer-container{width:100% !important;max-width:inherit !important;height:14.5625rem !important}:host(.full-width){--feed-card-width:100%}:host(.full-width) .outer-container{max-width:initial}:host(.feeds.full-width:not(.emulate-preview)){--feed-card-max-height:100%}:host(.feeds.full-width:not(.emulate-preview)) .outer-container{max-width:initial;height:calc(75vw - 2rem)}:host(.web.layout-01.full-width){--feed-card-max-height:100%;--card-height:23.125rem}:host(.web.layout-01.full-width) .outer-container{max-width:initial;height:auto;height:var(--card-height)}:host(.web.layout-01.full-width) .outer-container yoo-img{position:initial;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-ms-flex-order:1;order:1;width:100%}:host(.web.layout-01.full-width) .outer-container .bottom-container yoo-context-menu{margin-left:auto}:host(.web:not(.layout-01)){--image-size:64px;--card-height:100%}:host(.web:not(.layout-01)) .outer-container.feeds{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;width:100%;max-width:initial;height:var(--card-height);padding-bottom:var(--spacing-08, 0.5rem);border-radius:0;-webkit-box-shadow:none;box-shadow:none}:host(.web:not(.layout-01)) .outer-container.feeds yoo-img{position:initial;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-ms-flex-order:1;order:1;width:var(--image-size);height:var(--image-size)}:host(.web:not(.layout-01)) .outer-container.feeds:after{position:absolute;bottom:0;width:248px;height:0.0625rem;-webkit-box-shadow:inset 0 -0.5px 0 0 var(--stable-light, #f1f1f1);box-shadow:inset 0 -0.5px 0 0 var(--stable-light, #f1f1f1);content:\"\"}:host(.web:not(.layout-01)) .outer-container.feeds .bottom-container{position:initial;-ms-flex-pack:center;justify-content:center;-ms-flex-order:0;order:0;width:100%;min-width:0;height:100%;padding:0 var(--spacing-08, 0.5rem) var(--spacing-08, 0.5rem) var(--spacing-08, 0.5rem);color:var(--dark, #000000);background:var(--light, #ffffff)}:host(.web:not(.layout-01)) .outer-container.feeds .bottom-container .subheading,:host(.web:not(.layout-01)) .outer-container.feeds .bottom-container .subheading span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--font-size-14, 0.875rem)}:host(.web:not(.layout-01)) .outer-container.feeds .bottom-container .text-wrapper{--max-lines:2;margin-bottom:auto;color:var(--dark, #000000)}:host(.web:not(.layout-01)) .outer-container.feeds .bottom-container .subheading{color:var(--text-color, #807f83)}:host(.courses.horizontal:not(.web)) .outer-container.courses .bottom-container .text-wrapper{overflow:hidden;margin:0 0 var(--spacing-16, 1rem) var(--spacing-16, 1rem);font-size:var(--font-size-16, 1rem)}@supports (display: -webkit-box){:host(.courses.horizontal:not(.web)) .outer-container.courses .bottom-container .text-wrapper{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}:host([bookmarked]) yoo-icon[name=bookmark]{right:var(--spacing-16, 1rem);background-color:var(--app-color-10, rgba(90, 48, 244, 0.1))}:host([ticked]) yoo-icon[name=tick]{right:var(--spacing-48, 3rem);background-color:var(--success-10, rgba(58, 167, 109, 0.1))}:host([ongoing]) yoo-icon[name=ongoing]{right:var(--spacing-48, 3rem);background-color:var(--info-20, rgba(216, 76, 150, 0.2))}:host([locked]) yoo-icon[name=lock]{right:var(--spacing-16, 1rem)}";
 
@@ -21,7 +22,7 @@ const YooCardStickyComponent = class {
   }
   get title() {
     var _a;
-    return index$1.translateMulti((_a = this.entry) === null || _a === void 0 ? void 0 : _a.title) || '';
+    return overlays.translateMulti((_a = this.entry) === null || _a === void 0 ? void 0 : _a.title) || '';
   }
   onOuterContainerClick(ev) {
     if (ev) {
@@ -33,7 +34,7 @@ const YooCardStickyComponent = class {
   onMoreClicked(ev) {
     ev.stopPropagation();
     if (this.entry.secondaryActionSheet && this.entry.secondaryActionSheet.length > 0) {
-      index$1.showActionSheet(this.entry.secondaryActionSheet);
+      overlays.showActionSheet(this.entry.secondaryActionSheet);
     }
   }
   onUserClicked(ev) {
@@ -45,8 +46,8 @@ const YooCardStickyComponent = class {
     const isPlan = this.type === 'plans';
     const standardWidth = isCourse ? 190 : isPlan ? 239 : 310;
     const standardHeight = isCourse ? 130 : isPlan ? 180 : 230;
-    this.imageWidth = index$1.isWeb(this.host) || isCourse ? standardWidth : window.innerWidth * 0.8;
-    this.imageHeight = index$1.isWeb(this.host) || isCourse ? standardHeight : this.imageWidth * 0.75;
+    this.imageWidth = overlays.isWeb(this.host) || isCourse ? standardWidth : window.innerWidth * 0.8;
+    this.imageHeight = overlays.isWeb(this.host) || isCourse ? standardHeight : this.imageWidth * 0.75;
     return { width: `${this.imageWidth}px`, height: `${this.imageHeight}px` };
   }
   renderIcons() {
@@ -68,20 +69,20 @@ const YooCardStickyComponent = class {
     const hasActions = ((_b = (_a = this.entry) === null || _a === void 0 ? void 0 : _a.secondaryActionSheet) === null || _b === void 0 ? void 0 : _b.length) > 0;
     const hasMediaBadges = ((_d = (_c = this.entry) === null || _c === void 0 ? void 0 : _c.mediaBadges) === null || _d === void 0 ? void 0 : _d.length) > 0;
     const isFullWidth = this.host.classList.contains('full-width');
-    const showMainViewBadge = hasMediaBadges && (isFullWidth || !index$1.isWeb(this.host));
-    const showHeaderViewBadge = hasMediaBadges && !(isFullWidth || !index$1.isWeb(this.host));
-    return (index.h("div", { class: `outer-container  ${this.type} ${index$1.isGif((_e = this.entry) === null || _e === void 0 ? void 0 : _e.imgSrc) ? 'gif' : ''}`, onClick: (ev) => {
+    const showMainViewBadge = hasMediaBadges && (isFullWidth || !overlays.isWeb(this.host));
+    const showHeaderViewBadge = hasMediaBadges && !(isFullWidth || !overlays.isWeb(this.host));
+    return (index.h("div", { class: `outer-container  ${this.type} ${overlays.isGif((_e = this.entry) === null || _e === void 0 ? void 0 : _e.imgSrc) ? 'gif' : ''}`, onClick: (ev) => {
         this.onOuterContainerClick(ev);
-      } }, showMainViewBadge && this.renderMediaBadges(this.entry.mediaBadges), index.h("yoo-img", { instant: true, type: "background", class: { 'image-container': true, 'no-radius': index$1.isWeb(this.host) }, src: this.entry.imgSrc }), index.h("div", { class: "bottom-container" }, index.h("yoo-truncate", { class: "text-wrapper", innerHTML: index$1.removeTextStyle((_f = this.entry) === null || _f === void 0 ? void 0 : _f.title) }), this.entry.subheadings && this.entry.subheadings[0] && (index.h("div", { class: "subheading" }, this.entry.user && (index.h("yoo-avatar", { onClick: (ev) => {
+      } }, showMainViewBadge && this.renderMediaBadges(this.entry.mediaBadges), index.h("yoo-img", { instant: true, type: "background", class: { 'image-container': true, 'no-radius': overlays.isWeb(this.host) }, src: this.entry.imgSrc }), index.h("div", { class: "bottom-container" }, index.h("yoo-truncate", { class: "text-wrapper", innerHTML: overlays.removeTextStyle((_f = this.entry) === null || _f === void 0 ? void 0 : _f.title) }), this.entry.subheadings && this.entry.subheadings[0] && (index.h("div", { class: "subheading" }, this.entry.user && (index.h("yoo-avatar", { onClick: (ev) => {
         this.onUserClicked(ev);
-      }, iconSize: (_g = this.entry) === null || _g === void 0 ? void 0 : _g.avatarIconSize, size: index$1.isWeb(this.host) ? 'extra-small' : 'small', user: this.entry.user })), this.entry.postedBy && index.h("span", null, `${this.entry.postedBy} • ${this.entry.subheadings[0]}`, " "), showHeaderViewBadge && this.renderMediaBadges(this.entry.mediaBadges, 'extra-small', true), hasActions && !index$1.isWeb(this.host) && (index.h("yoo-icon", { name: "more", color: "stable", size: ((_h = this.entry) === null || _h === void 0 ? void 0 : _h.actionIconSize) || 'small', onClick: (ev) => this.onMoreClicked(ev) })), hasActions && index$1.isWeb(this.host) && (index.h("yoo-context-menu", { contentButtons: this.entry.secondaryActionSheet, onClick: (ev) => ev.stopPropagation() }, index.h("yoo-icon", { color: "stable", name: "more", size: ((_j = this.entry) === null || _j === void 0 ? void 0 : _j.actionIconSize) || 'small' }))))))));
+      }, iconSize: (_g = this.entry) === null || _g === void 0 ? void 0 : _g.avatarIconSize, size: overlays.isWeb(this.host) ? 'extra-small' : 'small', user: this.entry.user })), this.entry.postedBy && index.h("span", null, `${this.entry.postedBy} • ${this.entry.subheadings[0]}`, " "), showHeaderViewBadge && this.renderMediaBadges(this.entry.mediaBadges, 'extra-small', true), hasActions && !overlays.isWeb(this.host) && (index.h("yoo-icon", { name: "more", color: "stable", size: ((_h = this.entry) === null || _h === void 0 ? void 0 : _h.actionIconSize) || 'small', onClick: (ev) => this.onMoreClicked(ev) })), hasActions && overlays.isWeb(this.host) && (index.h("yoo-context-menu", { contentButtons: this.entry.secondaryActionSheet, onClick: (ev) => ev.stopPropagation() }, index.h("yoo-icon", { color: "stable", name: "more", size: ((_j = this.entry) === null || _j === void 0 ? void 0 : _j.actionIconSize) || 'small' }))))))));
   }
   renderCoursesCard() {
     var _a, _b;
     const hasMediaBadges = ((_b = (_a = this.entry) === null || _a === void 0 ? void 0 : _a.mediaBadges) === null || _b === void 0 ? void 0 : _b.length) > 0;
     const isFullWidth = this.host.classList.contains('full-width');
-    const showHeaderViewBadge = hasMediaBadges && !(isFullWidth || !index$1.isWeb(this.host));
-    return (index.h("div", { class: { 'outer-container': true, [this.type]: true, ticked: this.entry.isTicked }, style: this.getCardSize() }, index.h("yoo-img", { instant: true, type: "background", class: "image-container", disabled: this.entry.isLocked, src: this.entry.imgSrc }, this.renderIcons()), index.h("div", { class: "bottom-container" }, index.h("div", { class: "tags-container" }, showHeaderViewBadge && this.renderMediaBadges(this.entry.mediaBadges, 'small')), index.h("div", { class: "text-wrapper" }, index$1.removeTextStyle(this.title)), this.entry.subheadings && this.entry.subheadings[0] && index.h("div", { class: "subheading" }, this.entry.subheadings[0]), index.h("div", { class: "subheading" }, this.entry.postedBy && index.h("span", null, `${this.entry.postedBy} • ${this.entry.subheadings[0]}`, " ")))));
+    const showHeaderViewBadge = hasMediaBadges && !(isFullWidth || !overlays.isWeb(this.host));
+    return (index.h("div", { class: { 'outer-container': true, [this.type]: true, ticked: this.entry.isTicked }, style: this.getCardSize() }, index.h("yoo-img", { instant: true, type: "background", class: "image-container", disabled: this.entry.isLocked, src: this.entry.imgSrc }, this.renderIcons()), index.h("div", { class: "bottom-container" }, index.h("div", { class: "tags-container" }, showHeaderViewBadge && this.renderMediaBadges(this.entry.mediaBadges, 'small')), index.h("div", { class: "text-wrapper" }, overlays.removeTextStyle(this.title)), this.entry.subheadings && this.entry.subheadings[0] && index.h("div", { class: "subheading" }, this.entry.subheadings[0]), index.h("div", { class: "subheading" }, this.entry.postedBy && index.h("span", null, `${this.entry.postedBy} • ${this.entry.subheadings[0]}`, " ")))));
   }
   renderBase() {
     return (index.h("div", { class: "outer-container image" }, index.h("div", { class: "gradient-container" }, index.h("div", { class: "text-container" }, this.entry.category && (index.h("div", { class: "category" }, index.h("span", null, this.entry.category))), this.title && (index.h("div", { class: "title" }, index.h("span", null, this.title))), this.entry.buttonText && (index.h("yoo-button", { color: "app-color", size: "small", onClick: () => { var _a, _b; return (_b = (_a = this.entry) === null || _a === void 0 ? void 0 : _a.handler) === null || _b === void 0 ? void 0 : _b.call(_a); } }, this.entry.buttonText)))), index.h("yoo-img", { instant: true, type: "background", class: "image-container", src: this.entry.imgSrc })));

package/dist/cjs/yoo-card-template.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
+const index = require('./index-e182c32d.js');
 const lodash = require('./lodash-597bda6d.js');
 
 const cardTemplateCss = ":host(:hover){-webkit-box-shadow:var(--shadow-04, 0 0.75rem 1.5rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-04, 0 0.75rem 1.5rem 0 rgba(0, 0, 0, 0.1))}:host{position:relative;display:grid;grid-template-rows:6rem 2.88rem 2.88rem 2.115rem;height:13.875rem;overflow:hidden;background:var(--light, #ffffff);border-radius:var(--border-radius-04, 0.25rem);-webkit-box-shadow:var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1));cursor:pointer}:host .title{overflow:hidden;margin:var(--spacing-04, 0.25rem) var(--spacing-08, 0.5rem) 0;color:var(--dark, #000000);font-size:var(--font-size-14, 0.875rem)}@supports (display: -webkit-box){:host .title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}:host .description{overflow:hidden;margin:0 var(--spacing-08, 0.5rem) var(--spacing-08, 0.5rem);color:var(--text-color, #807f83);font-size:var(--font-size-12, 0.75rem)}@supports (display: -webkit-box){:host .description{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}}:host .icons{position:absolute;top:var(--spacing-08, 0.5rem);right:var(--spacing-08, 0.5rem)}:host .icons yoo-icon{margin-left:var(--spacing-05);cursor:pointer}:host yoo-img{position:relative}:host yoo-img::after{position:absolute;width:100%;height:100%;background:var(--dark-20, rgba(0, 0, 0, 0.2));content:\"\"}:host .tags{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .tags yoo-tag{margin-left:var(--spacing-08, 0.5rem)}:host(.selected){background-color:var(--app-color-20, rgba(90, 48, 244, 0.2));-webkit-box-shadow:none;box-shadow:none;-webkit-transition:background-color 250ms ease-in;transition:background-color 250ms ease-in}";

package/dist/cjs/yoo-card-video.cjs.entry.js

@@ -2,10 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-fc264952.js');
-const index$2 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+const index$1 = require('./index-de8540eb.js');
+require('./index-1fdbd9b3.js');
 const cardVideo_interface = require('./card-video.interface-70a68a05.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
@@ -112,7 +113,7 @@ const YooCardVideoComponent = class {
     if (track === null || track === void 0 ? void 0 : track.getSettings) {
       const settings = track.getSettings();
       if ((settings === null || settings === void 0 ? void 0 : settings.height) && (settings === null || settings === void 0 ? void 0 : settings.width)) {
-        ratio = index$2.getClosestImageRatio(settings.width, settings.height, [1.3, 0.75]);
+        ratio = overlays.getClosestImageRatio(settings.width, settings.height, [1.3, 0.75]);
       }
     }
     return ratio;
@@ -173,7 +174,7 @@ const YooCardVideoComponent = class {
   }
   renderRedial() {
     return [
-      index.h("div", { class: "redial-container" }, index.h("div", { class: "button-container" }, index.h("yoo-button", null, index$2.translate('REDIAL'))))
+      index.h("div", { class: "redial-container" }, index.h("div", { class: "button-container" }, index.h("yoo-button", null, overlays.translate('REDIAL'))))
     ];
   }
   renderBody() {
@@ -181,7 +182,7 @@ const YooCardVideoComponent = class {
     const bodyClass = {
       'remote-media': true,
       'screen-sharing': this.isStreamScreenSharing(),
-      'others': ((_b = (_a = this.participant) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b._id) !== ((_c = index$2.getSession()) === null || _c === void 0 ? void 0 : _c.userId)
+      'others': ((_b = (_a = this.participant) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b._id) !== ((_c = overlays.getSession()) === null || _c === void 0 ? void 0 : _c.userId)
     };
     return (index.h("div", { ref: (el) => (this.trackDiv = el), class: bodyClass }, this.showRedialButton && this.renderRedial()));
   }

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
+const index = require('./index-e182c32d.js');
 
 const cardCss = ":host{--transform-avatar:none;--display-avatar:inline-flex;--border-initial:0.0625rem solid var(--stable-light, #f1f1f1);--border-color-online:var(--light, #ffffff);--box-shadow:none;--inner-border:none;--image-shadow:unset;position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-transform:var(--transform-avatar);transform:var(--transform-avatar)}yoo-img{height:100%}.component-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-line-pack:distribute;align-content:space-around;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:end;justify-content:flex-end;width:100%;height:100%}.component-states-container{position:absolute;z-index:1;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:end;align-items:flex-end;width:100%;height:100%}.framing-container{position:relative;z-index:0;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;overflow:hidden;border:var(--inner-border);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}.online-indicator,.offline-indicator{position:absolute;right:0;bottom:0;z-index:2;border:var(--border-width-03, 0.1875rem) solid var(--border-color-online);border-radius:50%}.online-indicator{background-color:var(--success, #3aa76d)}.offline-indicator{background-color:var(--stable-alt, #d0d0d0)}.text-container{position:absolute;top:50%;left:50%;color:var(--text-color, #807f83);font-weight:var(--font-weight-400, 400);white-space:nowrap;text-transform:uppercase;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.notifications-wrapper{position:absolute;top:0rem;right:0rem;z-index:2;-webkit-box-shadow:0 0 0 0.3125rem var(--light, #ffffff);box-shadow:0 0 0 0.3125rem var(--light, #ffffff)}.notifications-wrapper.dot{-webkit-box-shadow:none;box-shadow:none}.notifications-wrapper.long{border-radius:var(--border-radius-16, 1rem)}.notifications-wrapper.short{border-radius:50%}.new-story-indicator{z-index:2;border-color:var(--app-color, #5a30f4);border-style:solid;border-radius:50%;-webkit-box-shadow:0 0 0 var(--spacing-02, 0.125rem) var(--light, #ffffff) inset;box-shadow:0 0 0 var(--spacing-02, 0.125rem) var(--light, #ffffff) inset}.viewed-story-indicator{z-index:2;border-color:var(--stable-alt, #d0d0d0);border-style:solid;border-radius:50%;-webkit-box-shadow:0 0 0 var(--spacing-02, 0.125rem) var(--light, #ffffff) inset;box-shadow:0 0 0 var(--spacing-02, 0.125rem) var(--light, #ffffff) inset}.live-indicator-container{position:absolute;z-index:4;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.live-indicator-container .live-indicator-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;width:2.875rem;height:1rem;color:var(--light, #ffffff);font-size:0.75rem;background-color:var(--danger, #d44333);border:var(--spacing-02, 0.125rem) solid var(--danger, #d44333);border-radius:var(--spacing-04, 0.25rem)}.live-indicator-container .live-indicator-wrapper .live-icon{width:var(--spacing-08, 0.5rem);height:var(--spacing-08, 0.5rem);margin:0 var(--spacing-04, 0.25rem) 0 var(--spacing-04, 0.25rem);background-color:var(--light, #ffffff);border-radius:50%}.recorded-indicator-container{position:absolute;z-index:4;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.recorded-indicator-container .recorded-indicator-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;width:1rem;height:1rem;font-size:var(--font-size-16, 1rem) !important;background-color:var(--danger, #d44333);border:var(--spacing-02, 0.125rem) solid var(--light, #ffffff);border-radius:25%}.vip-indicator{position:absolute;top:-0.3125rem;right:-0.3125rem;z-index:2;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;border:var(--border-width-05, 0.3125rem) solid var(--light, #ffffff);border-radius:50%}.vip-notification{position:absolute}.no-store-image-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-item-align:center;align-self:center;color:var(--stable, #adadad)}.grayed{background-color:var(--stable-light, #f1f1f1)}:host([size=extra-small]){width:1rem;height:1rem}:host([size=extra-small]) .counter{font-weight:var(--font-weight-400, 400);font-size:var(--font-size-12, 0.75rem) !important}:host([size=extra-small]) .online-indicator,:host([size=extra-small]) .offline-indicator{width:var(--spacing-02, 0.125rem);height:var(--spacing-02, 0.125rem);border:var(--border-width-01, 0.0625rem) solid var(--border-color-online)}:host([size=extra-small]) .offline-indicator{-webkit-box-shadow:0 0 0 0.01rem var(--stable, #adadad) inset;box-shadow:0 0 0 0.01rem var(--stable, #adadad) inset}:host([size=extra-small]) .text-container{font-size:var(--font-size-12, 0.75rem)}:host([size=extra-small]) .new-story-indicator,:host([size=extra-small]) .viewed-story-indicator{width:0.8125rem;height:0.8125rem;border-width:0.09375rem;-webkit-box-shadow:0 0 0 0.03125rem var(--light, #ffffff) inset;box-shadow:0 0 0 0.03125rem var(--light, #ffffff) inset}:host([size=extra-small]) .no-store-image-container{-ms-flex-pack:center;justify-content:center;width:1rem;height:1rem;font-size:var(--font-size-12, 0.75rem)}:host([size=extra-small]) .vip-indicator{display:none}:host([size=extra-small]) .vip-notification{top:0;width:var(--spacing-02, 0.125rem);height:var(--spacing-02, 0.125rem)}:host([size=extra-small]) .notifications-wrapper.dot{width:var(--spacing-02, 0.125rem);height:var(--spacing-02, 0.125rem)}:host([size=small]){width:1.5rem;height:1.5rem}:host([size=small]) .online-indicator,:host([size=small]) .offline-indicator{width:0.1875rem;height:0.1875rem;border:var(--spacing-02, 0.125rem) solid var(--border-color-online)}:host([size=small]) .offline-indicator{-webkit-box-shadow:0 0 0 0.1rem var(--stable, #adadad) inset;box-shadow:0 0 0 0.1rem var(--stable, #adadad) inset}:host([size=small]) .text-container{font-size:var(--font-size-14, 0.875rem)}:host([size=small]) .new-story-indicator,:host([size=small]) .viewed-story-indicator{width:1.25rem;height:1.25rem;border-width:var(--spacing-02, 0.125rem);-webkit-box-shadow:0 0 0 0.0625rem var(--light, #ffffff) inset;box-shadow:0 0 0 0.0625rem var(--light, #ffffff) inset}:host([size=small]) .no-store-image-container{-ms-flex-pack:center;justify-content:center;width:1.5rem;height:1.5rem;font-size:var(--font-size-14, 0.875rem)}:host([size=small]) .vip-indicator{display:none}:host([size=small]) .vip-notification{top:0;width:var(--spacing-02, 0.125rem);height:var(--spacing-02, 0.125rem)}:host([size=small]) .notifications-wrapper.dot{width:var(--spacing-04, 0.25rem);height:var(--spacing-04, 0.25rem)}:host([size=medium]){width:2rem;height:2rem}:host([size=medium]) .online-indicator,:host([size=medium]) .offline-indicator{width:0.375rem;height:0.375rem;border:var(--spacing-02, 0.125rem) solid var(--border-color-online)}:host([size=medium]) .offline-indicator{-webkit-box-shadow:0 0 0 0.1rem var(--stable, #adadad) inset;box-shadow:0 0 0 0.1rem var(--stable, #adadad) inset}:host([size=medium]) .text-container{font-size:var(--font-size-16, 1rem)}:host([size=medium]) .new-story-indicator,:host([size=medium]) .viewed-story-indicator{width:1.8125rem;height:1.8125rem;border-width:0.09375rem;-webkit-box-shadow:0 0 0 0.09375rem var(--light, #ffffff) inset;box-shadow:0 0 0 0.09375rem var(--light, #ffffff) inset}:host([size=medium]) .no-store-image-container{-ms-flex-pack:center;justify-content:center;width:2rem;height:2rem;font-size:var(--font-size-16, 1rem)}:host([size=medium]) .vip-indicator{display:none}:host([size=medium]) .vip-notification{top:0;width:var(--spacing-04, 0.25rem);height:var(--spacing-04, 0.25rem)}:host([size=medium]) .notifications-wrapper.dot{width:var(--spacing-04, 0.25rem);height:var(--spacing-04, 0.25rem)}:host([size=large]){width:3rem;height:3rem}:host([size=large]) .online-indicator,:host([size=large]) .offline-indicator{width:var(--spacing-08, 0.5rem);height:var(--spacing-08, 0.5rem)}:host([size=large]) .offline-indicator{-webkit-box-shadow:0 0 0 0.1rem var(--stable, #adadad) inset;box-shadow:0 0 0 0.1rem var(--stable, #adadad) inset}:host([size=large]) .text-container{font-size:var(--font-size-18, 1.125rem)}:host([size=large]) .new-story-indicator,:host([size=large]) .viewed-story-indicator{width:2.75rem;height:2.75rem;border-width:var(--spacing-02, 0.125rem);-webkit-box-shadow:0 0 0 var(--spacing-02, 0.125rem) var(--light, #ffffff) inset;box-shadow:0 0 0 var(--spacing-02, 0.125rem) var(--light, #ffffff) inset}:host([size=large]) .vip-indicator{display:none}:host([size=large]) .notifications-wrapper{height:1.25rem}:host([size=large]) .notifications-wrapper.short{width:1.25rem}:host([size=large]) .live-indicator-container .live-indicator-wrapper{width:2.75rem}:host([size=large]) .recorded-indicator-container{right:0.875rem}:host([size=large]) .no-store-image-container{-ms-flex-pack:center;justify-content:center;width:3rem;height:3rem;font-size:var(--font-size-18, 1.125rem)}:host([size=large]) .vip-notification{top:0.0625rem;width:var(--spacing-04, 0.25rem);height:var(--spacing-04, 0.25rem)}:host([size=large]) .notifications-wrapper.dot{width:var(--spacing-04, 0.25rem);height:var(--spacing-04, 0.25rem)}:host([size=extra-large]){width:4rem;height:4rem}:host([size=extra-large]) .online-indicator,:host([size=extra-large]) .offline-indicator{width:0.75rem;height:0.75rem}:host([size=extra-large]) .offline-indicator{-webkit-box-shadow:0 0 0 0.175rem var(--stable, #adadad) inset;box-shadow:0 0 0 0.175rem var(--stable, #adadad) inset}:host([size=extra-large]) .text-container{font-size:var(--font-size-24, 1.5rem)}:host([size=extra-large]) .new-story-indicator,:host([size=extra-large]) .viewed-story-indicator{width:3.75rem;height:3.75rem;border-width:var(--spacing-02, 0.125rem);-webkit-box-shadow:0 0 0 0.1875rem var(--light, #ffffff) inset;box-shadow:0 0 0 0.1875rem var(--light, #ffffff) inset}:host([size=extra-large]) .notifications-wrapper{height:1.5rem}:host([size=extra-large]) .notifications-wrapper.short{width:1.5rem}:host([size=extra-large]) .live-indicator-container{right:0.375rem}:host([size=extra-large]) .recorded-indicator-container{right:1.375rem}:host([size=extra-large]) .vip-notification{top:0.3125rem;width:var(--spacing-04, 0.25rem);height:var(--spacing-04, 0.25rem)}:host([size=extra-large]) .no-store-image-container{-ms-flex-pack:center;justify-content:center;width:4rem;height:4rem;font-size:var(--font-size-24, 1.5rem)}:host([size=extra-extra-large]){width:5rem;height:5rem}:host([size=extra-extra-large]) .online-indicator,:host([size=extra-extra-large]) .offline-indicator{width:var(--spacing-16, 1rem);height:var(--spacing-16, 1rem)}:host([size=extra-extra-large]) .offline-indicator{-webkit-box-shadow:0 0 0 0.175rem var(--stable, #adadad) inset;box-shadow:0 0 0 0.175rem var(--stable, #adadad) inset}:host([size=extra-extra-large]) .text-container{font-size:var(--font-size-32, 2rem)}:host([size=extra-extra-large]) .new-story-indicator,:host([size=extra-extra-large]) .viewed-story-indicator{width:4.75rem;height:4.75rem;border-width:var(--spacing-02, 0.125rem);-webkit-box-shadow:0 0 0 0.1875rem var(--light, #ffffff) inset;box-shadow:0 0 0 0.1875rem var(--light, #ffffff) inset}:host([size=extra-extra-large]) .notifications-wrapper{height:1.5rem}:host([size=extra-extra-large]) .notifications-wrapper.short{width:1.5rem}:host([size=extra-extra-large]) .live-indicator-container{right:0.8125rem}:host([size=extra-extra-large]) .recorded-indicator-container{right:1.875rem}:host([size=extra-extra-large]) .vip-notification{top:0.3125rem;width:var(--spacing-04, 0.25rem);height:var(--spacing-04, 0.25rem)}:host([size=extra-extra-large]) .no-store-image-container{-ms-flex-pack:center;justify-content:center;width:5rem;height:5rem;font-size:var(--font-size-32, 2rem)}:host([frame=circle]) .framing-container{border-radius:50%}:host([frame=circle]) .framing-container yoo-img{--border-radius:50%}:host([frame=square]) .framing-container,:host([frame=transparent-square]) .framing-container{border-radius:0}:host([frame=square]) .framing-container yoo-img,:host([frame=transparent-square]) .framing-container yoo-img{--border-radius:0%}:host([frame=rounded-square]) .framing-container{border-radius:10%}:host([frame=rounded-square]) .framing-container yoo-img{--border-radius:10%}:host(.inline){display:inline-block;margin-right:0.5rem}:host(.readonly){padding:var(--spacing-08, 0.5rem) var(--spacing-08, 0.5rem) var(--spacing-08, 0.5rem) 0}:host(.files-autocomplete) .component-container .framing-container{background-color:transparent}:host(.folder) .component-container .framing-container{background-color:unset !important}:host(.no-indicator-box-shadow) .framing-container{padding:var(--spacing-04, 0.25rem)}:host(.no-indicator-box-shadow) .new-story-indicator,:host(.no-indicator-box-shadow) .viewed-story-indicator,:host(.no-indicator-box-shadow) .framing-container{-webkit-box-shadow:none;box-shadow:none}:host{display:block}:host .outer-container{width:100%;border:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);border-radius:2px;-webkit-box-shadow:0px 0px 3px var(--border-width-01, 0.0625rem) var(--stable-light, #f1f1f1);box-shadow:0px 0px 3px var(--border-width-01, 0.0625rem) var(--stable-light, #f1f1f1)}:host .outer-container .image-container{position:relative;-ms-flex-pack:center;justify-content:center;height:10rem}:host .outer-container .image-container yoo-form-checkbox{position:absolute;top:0.5rem;right:auto;bottom:auto;left:0.5rem}:host .outer-container .image-container yoo-avatar{-ms-flex-item-align:center;align-self:center}:host .outer-container .image-container .image{width:100%;height:100%;background:var(--light, #ffffff)}:host .outer-container .status-container{height:var(--border-width-01, 0.0625rem);background:var(--stable-light, #f1f1f1)}:host .outer-container .content-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding-top:0.3rem;padding-right:0.5rem;padding-bottom:0.5rem;padding-left:0.5rem;background:var(--light, #ffffff)}:host .outer-container .content-container .heading-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;color:var(--dark, #000000);font-weight:var(--font-weight-400, 400);font-size:var(--font-size-18, 1.125rem)}:host .outer-container .content-container .heading-container .card-heading{-ms-flex:1;flex:1}:host .outer-container .content-container .subheading-container{color:var(--dark, #000000);font-weight:var(--font-weight-400, 400);font-size:var(--font-size-16, 1rem)}:host .outer-container .content-container .avatar-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end;margin-top:0.5rem;padding-right:0.3rem}:host .outer-container .content-container .avatar-container yoo-avatar{margin-right:0.75rem;margin-left:0.15rem}:host .outer-container .content-container .action-button-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}:host .outer-container .content-container .slot-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;color:var(--dark, #000000);font-size:var(--font-size-16, 1rem)}:host .outer-container .content-container .slot-container .inner-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .outer-container.active{border:var(--border-width-01, 0.0625rem) solid var(--accent, #276ef1);-webkit-box-shadow:0px 0px 3px var(--border-width-01, 0.0625rem) var(--accent, #276ef1);box-shadow:0px 0px 3px var(--border-width-01, 0.0625rem) var(--accent, #276ef1)}:host.horizontal .outer-container,:host.list-mode .outer-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;max-width:30rem}:host.horizontal .outer-container .status-container,:host.list-mode .outer-container .status-container{width:0.0625em;height:unset}:host.horizontal .outer-container .image-container,:host.list-mode .outer-container .image-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;width:10rem}:host.horizontal .outer-container .image-container yoo-form-checkbox,:host.list-mode .outer-container .image-container yoo-form-checkbox{position:absolute;top:0.5rem;right:auto;bottom:auto;left:0.5rem}:host.horizontal .outer-container .image-container yoo-avatar,:host.list-mode .outer-container .image-container yoo-avatar{-ms-flex-item-align:center;align-self:center}:host.horizontal .outer-container .content-container,:host.list-mode .outer-container .content-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:20rem;padding:0.5rem}:host.horizontal .outer-container .content-container.center,:host.list-mode .outer-container .content-container.center{-ms-flex-pack:center;justify-content:center}:host.horizontal .outer-container .content-container .slot-container,:host.list-mode .outer-container .content-container .slot-container{-ms-flex-pack:justify;justify-content:space-between}:host.horizontal .outer-container .content-container .slot-container .inner-container,:host.list-mode .outer-container .content-container .slot-container .inner-container{-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}:host(.list-mode) .outer-container{max-width:none}:host(.list-mode) .outer-container .image-container{width:unset}:host(.list-mode) .outer-container .image-container yoo-avatar{-webkit-transform:scale(0.7);transform:scale(0.7)}:host(.list-mode) .outer-container .status-container{display:none}:host(.list-mode) .outer-container .content-container{width:100%}:host(.list-mode) .outer-container .content-container .top-container .heading-container .card-heading{font-weight:var(--font-weight-700, 700)}:host(.list-mode) .outer-container .content-container .top-container .heading-container .date-card{color:var(--dark, #000000);font-size:var(--font-size-16, 1rem)}:host(.active) .outer-container{border:var(--border-width-01, 0.0625rem) solid var(--accent, #276ef1);-webkit-box-shadow:0px 0px 3px var(--border-width-01, 0.0625rem) var(--accent, #276ef1);box-shadow:0px 0px 3px var(--border-width-01, 0.0625rem) var(--accent, #276ef1)}:host(.hoverable):hover .outer-container{border:var(--border-width-01, 0.0625rem) solid var(--accent, #276ef1);-webkit-box-shadow:0px 0px 3px var(--border-width-01, 0.0625rem) var(--accent, #276ef1);box-shadow:0px 0px 3px var(--border-width-01, 0.0625rem) var(--accent, #276ef1)}:host(.accent) .outer-container .status-container{background:var(--accent, #276ef1)}:host(.accent) .outer-container.active{border:var(--border-width-01, 0.0625rem) solid var(--accent, #276ef1);-webkit-box-shadow:0px 0px 3px var(--border-width-01, 0.0625rem) var(--accent, #276ef1);box-shadow:0px 0px 3px var(--border-width-01, 0.0625rem) var(--accent, #276ef1)}:host(.accent).hoverable:hover .outer-container{border:var(--border-width-01, 0.0625rem) solid var(--accent, #276ef1);-webkit-box-shadow:0px 0px 3px var(--border-width-01, 0.0625rem) var(--accent, #276ef1);box-shadow:0px 0px 3px var(--border-width-01, 0.0625rem) var(--accent, #276ef1)}:host(.dark) .outer-container .status-container{background:var(--dark-40, rgba(0, 0, 0, 0.4))}:host(.dark) .outer-container.active{border:var(--border-width-01, 0.0625rem) solid var(--dark-40, rgba(0, 0, 0, 0.4));-webkit-box-shadow:0px 0px 3px var(--border-width-01, 0.0625rem) var(--dark-40, rgba(0, 0, 0, 0.4));box-shadow:0px 0px 3px var(--border-width-01, 0.0625rem) var(--dark-40, rgba(0, 0, 0, 0.4))}:host(.dark).hoverable:hover .outer-container{border:var(--border-width-01, 0.0625rem) solid var(--dark-40, rgba(0, 0, 0, 0.4));-webkit-box-shadow:0px 0px 3px var(--border-width-01, 0.0625rem) var(--dark-40, rgba(0, 0, 0, 0.4));box-shadow:0px 0px 3px var(--border-width-01, 0.0625rem) var(--dark-40, rgba(0, 0, 0, 0.4))}:host(.warning) .outer-container .status-container{background:var(--warning, #ed6e33)}:host(.warning) .outer-container.active{border:var(--border-width-01, 0.0625rem) solid var(--warning, #ed6e33);-webkit-box-shadow:0px 0px 3px var(--border-width-01, 0.0625rem) var(--warning, #ed6e33);box-shadow:0px 0px 3px var(--border-width-01, 0.0625rem) var(--warning, #ed6e33)}:host(.warning).hoverable:hover .outer-container{border:var(--border-width-01, 0.0625rem) solid var(--warning, #ed6e33);-webkit-box-shadow:0px 0px 3px var(--border-width-01, 0.0625rem) var(--warning, #ed6e33);box-shadow:0px 0px 3px var(--border-width-01, 0.0625rem) var(--warning, #ed6e33)}:host(.success) .outer-container .status-container{background:var(--success, #3aa76d)}:host(.success) .outer-container.active{border:var(--border-width-01, 0.0625rem) solid var(--success, #3aa76d);-webkit-box-shadow:0px 0px 3px var(--border-width-01, 0.0625rem) var(--success, #3aa76d);box-shadow:0px 0px 3px var(--border-width-01, 0.0625rem) var(--success, #3aa76d)}:host(.success).hoverable:hover .outer-container{border:var(--border-width-01, 0.0625rem) solid var(--success, #3aa76d);-webkit-box-shadow:0px 0px 3px var(--border-width-01, 0.0625rem) var(--success, #3aa76d);box-shadow:0px 0px 3px var(--border-width-01, 0.0625rem) var(--success, #3aa76d)}:host(.app-color) .outer-container .status-container{background:var(--app-color, #5a30f4)}:host(.app-color) .outer-container.active{border:var(--border-width-01, 0.0625rem) solid var(--app-color, #5a30f4);-webkit-box-shadow:0px 0px 3px var(--border-width-01, 0.0625rem) var(--app-color, #5a30f4);box-shadow:0px 0px 3px var(--border-width-01, 0.0625rem) var(--app-color, #5a30f4)}:host(.app-color).hoverable:hover .outer-container{border:var(--border-width-01, 0.0625rem) solid var(--app-color, #5a30f4);-webkit-box-shadow:0px 0px 3px var(--border-width-01, 0.0625rem) var(--app-color, #5a30f4);box-shadow:0px 0px 3px var(--border-width-01, 0.0625rem) var(--app-color, #5a30f4)}:host(.info) .outer-container .status-container{background:var(--info, #d84c96)}:host(.info) .outer-container.active{border:var(--border-width-01, 0.0625rem) solid var(--info, #d84c96);-webkit-box-shadow:0px 0px 3px var(--border-width-01, 0.0625rem) var(--info, #d84c96);box-shadow:0px 0px 3px var(--border-width-01, 0.0625rem) var(--info, #d84c96)}:host(.info).hoverable:hover .outer-container{border:var(--border-width-01, 0.0625rem) solid var(--info, #d84c96);-webkit-box-shadow:0px 0px 3px var(--border-width-01, 0.0625rem) var(--info, #d84c96);box-shadow:0px 0px 3px var(--border-width-01, 0.0625rem) var(--info, #d84c96)}:host(.danger) .outer-container .status-container{background:var(--danger, #d44333)}:host(.danger) .outer-container.active{border:var(--border-width-01, 0.0625rem) solid var(--danger, #d44333);-webkit-box-shadow:0px 0px 3px var(--border-width-01, 0.0625rem) var(--danger, #d44333);box-shadow:0px 0px 3px var(--border-width-01, 0.0625rem) var(--danger, #d44333)}:host(.danger).hoverable:hover .outer-container{border:var(--border-width-01, 0.0625rem) solid var(--danger, #d44333);-webkit-box-shadow:0px 0px 3px var(--border-width-01, 0.0625rem) var(--danger, #d44333);box-shadow:0px 0px 3px var(--border-width-01, 0.0625rem) var(--danger, #d44333)}:host(.g) .outer-container .status-container{background:var(--g)}:host(.g) .outer-container.active{border:var(--border-width-01, 0.0625rem) solid var(--g);-webkit-box-shadow:0px 0px 3px var(--border-width-01, 0.0625rem) var(--g);box-shadow:0px 0px 3px var(--border-width-01, 0.0625rem) var(--g)}:host(.g).hoverable:hover .outer-container{border:var(--border-width-01, 0.0625rem) solid var(--g);-webkit-box-shadow:0px 0px 3px var(--border-width-01, 0.0625rem) var(--g);box-shadow:0px 0px 3px var(--border-width-01, 0.0625rem) var(--g)}:host(.no-status) .outer-container .status-container{height:var(--border-width-01, 0.0625rem);background:var(--stable-light, #f1f1f1)}";
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
+const index = require('./index-e182c32d.js');
 
 const chartMicroCss = ":host .container{padding:1rem}:host .container .value{font-weight:var(--font-weight-700, 700);font-size:var(--font-size-28, 1.75rem)}:host .container .title{padding-top:0.5rem;color:var(--text-color, #807f83)}";
 

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

@@ -2,12 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+const index$1 = require('./index-1fdbd9b3.js');
 const lodash = require('./lodash-597bda6d.js');
 const highcharts = require('./highcharts-874d9bd2.js');
 const _commonjsHelpers = require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+const overlays = require('./overlays-b6c94fc8.js');
+require('./index-de8540eb.js');
 
 function fixChartCategories(options) {
   var _a;
@@ -1425,7 +1426,7 @@ const YooChartComponent = class {
   async getSVG(width, height, x, y, margin = 0) {
     if (this.chart) {
       let svg = this.chart.getSVG({
-        chart: { width: width - margin, height: height - margin, borderWidth: 1, borderColor: '#ccc', marginTop: 50, backgroundColor: index$1.getCssColor('light') },
+        chart: { width: width - margin, height: height - margin, borderWidth: 1, borderColor: '#ccc', marginTop: 50, backgroundColor: overlays.getCssColor('light') },
         title: {
           text: this.definition.title,
           style: { color: '#000', fontSize: '13px' },
@@ -1464,7 +1465,7 @@ const YooChartComponent = class {
       const blob = new Blob([csv], {
         type
       });
-      index$1.FileSaver_min.saveAs(blob, filename + '.csv');
+      overlays.FileSaver_min.saveAs(blob, filename + '.csv');
     }
   }
   async resize() {
@@ -1491,7 +1492,7 @@ const YooChartComponent = class {
         this.resizeObserver = index$1.resizeObserve(this.chartContainer, (entries) => {
           for (const entry of entries) {
             const { left, top, width, height } = entry.contentRect;
-            index$1.debounce(this.onChartResize.bind(this), CHART_ANIMATION_TIMEOUT)(entry.target, width, height, left, top, entry);
+            overlays.debounce(this.onChartResize.bind(this), CHART_ANIMATION_TIMEOUT)(entry.target, width, height, left, top, entry);
           }
         });
       }
@@ -1538,10 +1539,10 @@ const YooChartComponent = class {
     options = fixChartCategories(options);
     highcharts.highcharts.setOptions({
       lang: {
-        months: index$1.getMonths(),
-        shortMonths: index$1.getMonths().map((m) => m.substring(0, 3)),
-        weekdays: index$1.getWeekDays(),
-        shortWeekdays: index$1.getWeekDays().map((d) => d.substring(0, 3))
+        months: overlays.getMonths(),
+        shortMonths: overlays.getMonths().map((m) => m.substring(0, 3)),
+        weekdays: overlays.getWeekDays(),
+        shortWeekdays: overlays.getWeekDays().map((d) => d.substring(0, 3))
       },
       time: {
         timezoneOffset: new Date().getTimezoneOffset()
@@ -1564,7 +1565,7 @@ const YooChartComponent = class {
       emptyState.type = 'chart';
       emptyState.style.height = this.emptyStateHeight || (((_c = this.definition) === null || _c === void 0 ? void 0 : _c.kpi) ? '4rem' : '6.25rem');
       const textElement = document.createElement('div');
-      textElement.innerHTML = index$1.translate('LISTEMPTY');
+      textElement.innerHTML = overlays.translate('LISTEMPTY');
       this.chartContainer.appendChild(emptyState);
       this.chartContainer.appendChild(textElement);
     }
@@ -1597,16 +1598,16 @@ const YooChartComponent = class {
   setupLegendListener(options) {
     options.plotOptions = options.plotOptions || {};
     options.plotOptions.series = options.plotOptions.series || {};
-    options.plotOptions.series.animation = !this.disableAnimation && !index$1.isChromatic();
+    options.plotOptions.series.animation = !this.disableAnimation && !overlays.isChromatic();
     options.chart = options.chart || {};
-    options.chart.animation = !this.disableAnimation && !index$1.isChromatic();
+    options.chart.animation = !this.disableAnimation && !overlays.isChromatic();
     options.exporting = options.exporting || {};
     options.exporting.enabled = false;
     options.exporting.showTable = options.exporting.showTable !== false; // this.definition?.showTable !== false;
     options.exporting.allowHTML = options.exporting.allowHTML !== false; // this.definition?.showTable !== false;
     options.exporting.tableCaption = false;
     const chartCmp = this;
-    if (index$1.isIonic(this.host)) {
+    if (overlays.isIonic(this.host)) {
       options.plotOptions.series.point = {
         cursor: 'pointer',
         events: {
@@ -1671,8 +1672,8 @@ const YooChartComponent = class {
       if (e.type === 'exportData') {
         e.dataRows.forEach((row, idx) => {
           var _a;
-          if (idx > 1 && index$1.dateIsValid(row[0]) && ((_a = row[0]) === null || _a === void 0 ? void 0 : _a.length) >= 10) {
-            row[0] = index$1.dateFormat(row[0], 'L LT');
+          if (idx > 1 && overlays.dateIsValid(row[0]) && ((_a = row[0]) === null || _a === void 0 ? void 0 : _a.length) >= 10) {
+            row[0] = overlays.dateFormat(row[0], 'L LT');
           }
         });
       }

package/dist/cjs/yoo-chat-message-dialog.cjs.entry.js

@@ -2,12 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
-const chatHelpers = require('./chat-helpers-1bfebfef.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
+const chatHelpers = require('./chat-helpers-643f748a.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const chatMessageDialogCss = ":host .outer-container{display:grid;grid-template-rows:auto auto auto 1fr;height:100%}:host .outer-container yoo-header>yoo-navbar>yoo-truncated-line{text-align:center}:host .outer-container section{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 var(--spacing-16, 1rem)}:host .outer-container section.preview{padding:var(--spacing-08, 0.5rem);background:var(--stable-ultralight, #fafafa)}:host .outer-container section.preview .time-title{padding-bottom:var(--spacing-08, 0.5rem);color:var(--stable-alt, #d0d0d0);font-size:var(--font-size-14, 0.875rem);text-align:center}:host .outer-container section.preview yoo-chat-message{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}:host .outer-container section.acknowledgements section{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;width:100%;margin-top:var(--spacing-16, 1rem);padding:0}:host .outer-container section.acknowledgements section div{display:-ms-flexbox;display:flex;gap:var(--spacing-08, 0.5rem);-ms-flex-align:center;align-items:center}:host .outer-container section.details yoo-ion-slides{--tabs-height:4rem;position:relative;height:calc(100% - var(--tabs-height));-webkit-transition:opacity 0.5s linear;transition:opacity 0.5s linear}:host .outer-container section.details yoo-ion-slides yoo-ion-slide.has-items{-ms-flex-align:baseline;align-items:baseline;overflow:auto}:host .outer-container section.details yoo-ion-slides yoo-ion-slide.has-items ul{width:100%;margin:var(--spacing-08, 0.5rem) 0;padding:0;line-height:2.5;list-style:none}:host .outer-container section.details yoo-ion-slides yoo-ion-slide.has-items ul li{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .outer-container section.details yoo-ion-slides yoo-ion-slide.has-items ul li div{display:-ms-flexbox;display:flex;gap:var(--spacing-16, 1rem);-ms-flex-align:center;align-items:center}:host .outer-container section.details yoo-ion-slides yoo-ion-slide.has-items ul li span{text-align:left}:host .outer-container section.details yoo-ion-slides yoo-ion-slide yoo-empty-state{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);--svg-height:20rem}:host .outer-container section.details yoo-ion-slides yoo-ion-slide yoo-empty-state.rtl{top:50%;right:50%;-webkit-transform:translate(50%, -50%);transform:translate(50%, -50%)}";
 
@@ -29,15 +30,15 @@ const YooChatMessageDialogComponent = class {
     }
   }
   renderHeader() {
-    return index.h("yoo-header", null, index.h("yoo-navbar", null, index.h("yoo-items", { slot: "start" }, index.h("yoo-button", { color: "text-color", rippleType: "unbounded", fill: "transparent", shape: "circular", onClick: () => index$1.closeModal(null) }, index.h("yoo-icon", { name: "close" }))), index.h("yoo-truncated-line", { content: index$1.translate(this.heading), withTooltip: false })));
+    return index.h("yoo-header", null, index.h("yoo-navbar", null, index.h("yoo-items", { slot: "start" }, index.h("yoo-button", { color: "text-color", rippleType: "unbounded", fill: "transparent", shape: "circular", onClick: () => overlays.closeModal(null) }, index.h("yoo-icon", { name: "close" }))), index.h("yoo-truncated-line", { content: overlays.translate(this.heading), withTooltip: false })));
   }
   renderRow(item) {
     const { readTime, receivedBy } = item || {};
     const user = (receivedBy || item);
-    const timetoken = index$1.parseLongIntoDate(readTime);
+    const timetoken = overlays.parseLongIntoDate(readTime);
     return [
-      user && (index.h("div", null, index.h("yoo-avatar", { size: "small", user: user }), index.h("span", { class: "username" }, index$1.getUserDisplayName(user)))),
-      timetoken && index.h("span", null, index$1.dateFormat(timetoken, ['DD/MM/YYYY', chatHelpers.getDateFormats().single].join(' ')))
+      user && (index.h("div", null, index.h("yoo-avatar", { size: "small", user: user }), index.h("span", { class: "username" }, overlays.getUserDisplayName(user)))),
+      timetoken && index.h("span", null, overlays.dateFormat(timetoken, ['DD/MM/YYYY', chatHelpers.getDateFormats().single].join(' ')))
     ];
   }
   renderEmptyState() {
@@ -68,13 +69,13 @@ const YooChatMessageDialogComponent = class {
   }
   renderPreview() {
     var _a;
-    return (index.h("section", { class: "preview" }, ((_a = this.message) === null || _a === void 0 ? void 0 : _a.time) && index.h("div", { class: "time-title" }, index$1.dateFormat(this.message.time, chatHelpers.getDateFormats().grouped)), index.h("yoo-chat-message", { ref: (el) => this.chatMessageElement = el, hasOptions: true, preventDetailView: true, message: this.message, receivedByOthers: this.receivedByOthers })));
+    return (index.h("section", { class: "preview" }, ((_a = this.message) === null || _a === void 0 ? void 0 : _a.time) && index.h("div", { class: "time-title" }, overlays.dateFormat(this.message.time, chatHelpers.getDateFormats().grouped)), index.h("yoo-chat-message", { ref: (el) => this.chatMessageElement = el, hasOptions: true, preventDetailView: true, message: this.message, receivedByOthers: this.receivedByOthers })));
   }
   renderAcknowledgement(type, time) {
     var _a;
     const isRead = type === 'read';
-    const timetoken = index$1.parseLongIntoDate(time) || ((_a = this.message) === null || _a === void 0 ? void 0 : _a.time);
-    return (index.h("section", { class: { [type]: true } }, index.h("div", null, index.h("yoo-icon", { size: "small", name: "double-tick", color: isRead ? 'app-color' : 'stable' }), index.h("span", null, index$1.translate(isRead ? 'YOOBICREAD' : 'DELIVERED'))), timetoken && index.h("span", null, index$1.dateFormat(timetoken, ['DD/MM/YYYY', chatHelpers.getDateFormats().single].join(' ')))));
+    const timetoken = overlays.parseLongIntoDate(time) || ((_a = this.message) === null || _a === void 0 ? void 0 : _a.time);
+    return (index.h("section", { class: { [type]: true } }, index.h("div", null, index.h("yoo-icon", { size: "small", name: "double-tick", color: isRead ? 'app-color' : 'stable' }), index.h("span", null, overlays.translate(isRead ? 'YOOBICREAD' : 'DELIVERED'))), timetoken && index.h("span", null, overlays.dateFormat(timetoken, ['DD/MM/YYYY', chatHelpers.getDateFormats().single].join(' ')))));
   }
   render() {
     return index.h(index.Host, null, index.h("div", { class: "outer-container" }, this.renderHeader(), this.renderPreview(), this.renderAcknowledgements(), this.isMultiple && this.renderTabsContent()));

package/dist/cjs/yoo-chat-message-preview.cjs.entry.js

@@ -2,9 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-fc264952.js');
-const index$2 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+const index$1 = require('./index-de8540eb.js');
+require('./index-1fdbd9b3.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
@@ -28,12 +29,12 @@ const YooChatMessagePreviewComponent = class {
     var _a, _b, _c, _d, _e;
     switch ((_a = this.message) === null || _a === void 0 ? void 0 : _a.type) {
       case index$1.MessageType.texturlpreview: {
-        const { links } = index$2.replaceAndGetAllLinks((_b = this.message) === null || _b === void 0 ? void 0 : _b.content);
+        const { links } = overlays.replaceAndGetAllLinks((_b = this.message) === null || _b === void 0 ? void 0 : _b.content);
         links.length && (this.linkPreviews = links.map(link => ({ url: link })));
         break;
       }
       case index$1.MessageType.audio:
-        this.message.options.duration = ((_d = (_c = this.message) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.duration) || await index$2.getAudioDuration((_e = this.message) === null || _e === void 0 ? void 0 : _e.payload);
+        this.message.options.duration = ((_d = (_c = this.message) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.duration) || await overlays.getAudioDuration((_e = this.message) === null || _e === void 0 ? void 0 : _e.payload);
         break;
       default:
         break;
@@ -63,7 +64,7 @@ const YooChatMessagePreviewComponent = class {
   }
   get isMessageTypeMedia() {
     const { type } = this.message || {};
-    return index$2.isChatMessageTypeMedia(type) || type === index$1.MessageType.document || type === index$1.MessageType.texturlpreview;
+    return overlays.isChatMessageTypeMedia(type) || type === index$1.MessageType.document || type === index$1.MessageType.texturlpreview;
   }
   close() {
     const ANIMATION_TIME = 200;
@@ -84,13 +85,13 @@ const YooChatMessagePreviewComponent = class {
   }
   renderMedia(type) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    const convertLinks = (text) => index$2.replaceAllLinks(index$2.translateMulti(text), false, 'app-color');
+    const convertLinks = (text) => overlays.replaceAllLinks(overlays.translateMulti(text), false, 'app-color');
     return [
       index.h("yoo-icon", { name: this.getMediaIcon(type), color: !this.isInputBarMode ? 'app-color' : 'stable', size: "small" }),
-      (type === index$1.MessageType.photo) && index$2.translate('YOOBIC' + ((_b = (_a = this.message) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.toUpperCase())),
-      (type === index$1.MessageType.video) && index$2.translate((_d = (_c = this.message) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.toUpperCase()),
-      type === index$1.MessageType.audio && (index$2.pipes.timer.transform(Math.round((_f = (_e = this.message) === null || _e === void 0 ? void 0 : _e.options) === null || _f === void 0 ? void 0 : _f.duration)).substr(3)),
-      type === index$1.MessageType.document && index.h("yoo-truncate", null, ((_h = (_g = this.message) === null || _g === void 0 ? void 0 : _g.payload) === null || _h === void 0 ? void 0 : _h._filename) || index$2.translate('YOOBICDOCUMENT')),
+      (type === index$1.MessageType.photo) && overlays.translate('YOOBIC' + ((_b = (_a = this.message) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.toUpperCase())),
+      (type === index$1.MessageType.video) && overlays.translate((_d = (_c = this.message) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.toUpperCase()),
+      type === index$1.MessageType.audio && (overlays.pipes.timer.transform(Math.round((_f = (_e = this.message) === null || _e === void 0 ? void 0 : _e.options) === null || _f === void 0 ? void 0 : _f.duration)).substr(3)),
+      type === index$1.MessageType.document && index.h("yoo-truncate", null, ((_h = (_g = this.message) === null || _g === void 0 ? void 0 : _g.payload) === null || _h === void 0 ? void 0 : _h._filename) || overlays.translate('YOOBICDOCUMENT')),
       type === index$1.MessageType.texturlpreview && index.h("yoo-truncate", null, index.h("yoo-text", { content: (_j = this.message) === null || _j === void 0 ? void 0 : _j.content, extraConversion: [convertLinks] }))
     ];
   }
@@ -105,7 +106,7 @@ const YooChatMessagePreviewComponent = class {
     return (index.h("yoo-links-preview", { links: [(_a = this.linkPreviews) === null || _a === void 0 ? void 0 : _a[0]], showErrors: false, showLinks: false, showDescription: false }));
   }
   renderVideoPreview(source) {
-    index$2.isFile(source) && (source = URL.createObjectURL(source._downloadURL));
+    overlays.isFile(source) && (source = URL.createObjectURL(source._downloadURL));
     return (index.h("yoo-videoplayer-core", { class: { 'round': this.mode === 'sent' }, blockControlAndAutoPlayOnTap: true, readonly: true, videoPlayerCoreParameters: {
         controls: false,
         cover: true,
@@ -119,7 +120,7 @@ const YooChatMessagePreviewComponent = class {
       } }));
   }
   renderUser(user, isAlternate) {
-    return index.h("section", { id: "user" }, index.h("yoo-avatar", { size: "extra-small", user: user }), index.h("span", null, isAlternate ? index$2.translate('YOOBICME') : index$2.getUserDisplayName(user)));
+    return index.h("section", { id: "user" }, index.h("yoo-avatar", { size: "extra-small", user: user }), index.h("span", null, isAlternate ? overlays.translate('YOOBICME') : overlays.getUserDisplayName(user)));
   }
   renderContent(type, content) {
     return index.h("section", { id: "content" }, this.isMessageTypeMedia ? this.renderMedia(type) : this.renderText(content));