@yoobic/yobi 8.2.0-2 → 8.2.0-22

package/dist/design-system/yoo-card-recommendation.entry.js

@@ -1,11 +1,11 @@
 import { r as registerInstance, h, g as getElement } from './index-019c1b1a.js';
-import { bc as isOffline, t as translate, T as translateMulti, eL as getLessonTypeIcon } from './index-dde1f033.js';
-import { A as get } from './lodash-494e728c.js';
-import { g as getFromOfflineStorage } from './localForage-12d47828.js';
+import { bd as isOffline, t as translate, T as translateMulti, eN as getLessonTypeIcon } from './index-60d331ff.js';
+import { A as get } from './lodash-b0ad17f3.js';
+import { g as getFromOfflineStorage } from './localForage-ff5caa60.js';
 import './_commonjsHelpers-f4d11124.js';
-import './index-21c7d38e.js';
+import './index-da54e081.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 .lesson-title{margin-left:var(--spacing-08, 0.5rem);font-size:var(--font-size-14, 0.875rem);text-align:left;--max-lines:1}: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)}";
+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)}";
 
 const YooCardRecommendationComponent = class {
   constructor(hostRef) {
@@ -32,14 +32,14 @@ const YooCardRecommendationComponent = class {
   renderLessonRecommendation() {
     var _a;
     const lesson = this.entry;
-    return (h("div", { class: "outer-container" }, h("div", { class: "image-container" }, this.backgroundImage && this.renderCardImage(), h("yoo-tag", { class: "img-tag", color: "app-color", size: "small" }, h("yoo-icon", { slot: "start", size: "small", name: "lesson", color: "light" }), translate('LESSON')), ((_a = this.actualPlan) === null || _a === void 0 ? void 0 : _a.title) && h("yoo-truncate", { class: "course-title" }, translateMulti(this.actualPlan.title))), h("div", { class: "content-container" }, h("div", { class: "title-container" }, (lesson === null || lesson === void 0 ? void 0 : lesson.lessonType) && h("yoo-icon", { size: "small", name: getLessonTypeIcon(lesson.lessonType), color: "app-color" }), (lesson === null || lesson === void 0 ? void 0 : lesson.title) && h("yoo-truncate", { class: "lesson-title" }, translateMulti(lesson.title))), (lesson === null || lesson === void 0 ? void 0 : lesson.points) &&
+    return (h("div", { class: "outer-container" }, h("div", { class: "image-container" }, this.backgroundImage && this.renderCardImage(), h("yoo-tag", { class: "img-tag", color: "app-color", size: "small" }, h("yoo-icon", { slot: "start", size: "small", name: "lesson", color: "light" }), translate('LESSON')), ((_a = this.actualPlan) === null || _a === void 0 ? void 0 : _a.title) && h("yoo-truncated-line", { class: "course-title", content: translateMulti(this.actualPlan.title), tooltipPlacement: "top" })), h("div", { class: "content-container" }, h("div", { class: "title-container" }, (lesson === null || lesson === void 0 ? void 0 : lesson.lessonType) && h("yoo-icon", { size: "small", name: getLessonTypeIcon(lesson.lessonType), color: "app-color" }), (lesson === null || lesson === void 0 ? void 0 : lesson.title) && h("yoo-truncated-line", { class: "lesson-title", content: translateMulti(lesson.title), tooltipPlacement: "top" })), (lesson === null || lesson === void 0 ? void 0 : lesson.points) &&
       h("yoo-tag", { class: "points", noBackground: true, color: "dark", size: "medium" }, h("yoo-icon", { slot: "start", size: "small", name: "star", color: "app-color" }), h("span", null, lesson.points)))));
   }
   renderCourseRecommendation() {
     var _a, _b;
     const lessonsCount = get(this.actualPlan, 'missiondescriptionsRef', []).length;
     const lessonLabel = translate((lessonsCount || 0) > 1 ? 'LESSONS' : 'LESSON');
-    return (h("div", { class: "outer-container" }, h("div", { class: "image-container" }, this.backgroundImage && this.renderCardImage(), h("yoo-tag", { class: "img-tag", color: "app-color", size: "small" }, h("yoo-icon", { slot: "start", size: "small", name: "courses", color: "light" }), translate('COURSE')), h("yoo-tag", { class: "points-tag", color: "light", noBackground: true, size: "small" }, h("yoo-icon", { slot: "start", size: "small", name: "star", color: "light" }), ((_a = this.actualPlan) === null || _a === void 0 ? void 0 : _a.availablePoints) || 0), h("yoo-tag", { class: "lessons-tag", color: "light", noBackground: true, size: "small" }, 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) && h("yoo-truncate", { class: "course-title" }, translateMulti(this.actualPlan.title)))));
+    return (h("div", { class: "outer-container" }, h("div", { class: "image-container" }, this.backgroundImage && this.renderCardImage(), h("yoo-tag", { class: "img-tag", color: "app-color", size: "small" }, h("yoo-icon", { slot: "start", size: "small", name: "courses", color: "light" }), translate('COURSE')), h("yoo-tag", { class: "points-tag", color: "light", noBackground: true, size: "small" }, h("yoo-icon", { slot: "start", size: "small", name: "star", color: "light" }), ((_a = this.actualPlan) === null || _a === void 0 ? void 0 : _a.availablePoints) || 0), h("yoo-tag", { class: "lessons-tag", color: "light", noBackground: true, size: "small" }, 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) && h("yoo-truncated-line", { class: "course-title", content: translateMulti(this.actualPlan.title), tooltipPlacement: "top" }))));
   }
   render() {
     return this.entry ? (this.type === 'lesson' ? this.renderLessonRecommendation() : this.renderCourseRecommendation()) : null;

package/dist/design-system/yoo-card-sticky.entry.js

@@ -1,11 +1,11 @@
 import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-019c1b1a.js';
-import { T as translateMulti, af as showActionSheet, o as isWeb, ah as isGif, eG as removeTextStyle } from './index-dde1f033.js';
-import { b as getAppContext } from './common-helpers-d99b3c41.js';
-import './lodash-494e728c.js';
+import { T as translateMulti, af as showActionSheet, o as isWeb, ah as isGif, eI as removeTextStyle } from './index-60d331ff.js';
+import { b as getAppContext } from './common-helpers-7760f0f6.js';
+import './lodash-b0ad17f3.js';
 import './_commonjsHelpers-f4d11124.js';
-import './index-21c7d38e.js';
+import './index-da54e081.js';
 
-const cardStickyCss = ":host{--feed-card-width:300px;--feed-card-max-height:230px;cursor:pointer}:host yoo-tag.top.left{position:absolute;top:var(--spacing-08, 0.5rem);left:var(--spacing-08, 0.5rem);z-index:9}: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(rgba(255, 255, 255, 0)));background:linear-gradient(90deg, var(--light, #ffffff), var(--light, #ffffff) 40%, rgba(255, 255, 255, 0));border-radius: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{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{width:100%;height:100%}: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-08, 0.5rem);right:var(--spacing-08, 0.5rem);z-index:1;padding:0.5rem;background:var(--stable-alt-60, rgba(208, 208, 208, 0.6));border:none;border-radius:50%;fill:var(--app-color, #5a30f4)}: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-pack:center;justify-content:center;width:100%;height:100%;overflow-y:auto;background-color:var(--dark-40, rgba(0, 0, 0, 0.4));}: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-y:hidden;color:var(--light, #ffffff);font-weight:var(--font-weight-700, 700)}: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{max-width:90%;margin:auto;font-size:var(--font-size-24, 1.5rem);text-align:center}:host .outer-container.courses-small{width:133px;height:90px}:host .outer-container.courses-small .bottom-container .text-wrapper{font-size:var(--font-size-18, 1.125rem);line-height:var(--font-size-18, 1.125rem)}@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{font-size:var(--font-size-16, 1rem)}";
+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)}";
 
 const YooCardStickyComponent = class {
   constructor(hostRef) {
@@ -41,17 +41,22 @@ const YooCardStickyComponent = class {
     const isPlan = this.type === 'plans';
     const standardWidth = isCourse ? 190 : isPlan ? 239 : 310;
     const standardHeight = isCourse ? 130 : isPlan ? 180 : 230;
-    this.imageWidth = isWeb(this.host) || isCourse ? standardWidth : window.innerWidth * .8;
-    this.imageHeight = isWeb(this.host) || isCourse ? standardHeight : this.imageWidth * .75;
+    this.imageWidth = isWeb(this.host) || isCourse ? standardWidth : window.innerWidth * 0.8;
+    this.imageHeight = isWeb(this.host) || isCourse ? standardHeight : this.imageWidth * 0.75;
     return { width: `${this.imageWidth}px`, height: `${this.imageHeight}px` };
   }
+  renderIcons() {
+    const { isLocked, isBookmarked, isOngoing, isTicked } = this.entry;
+    return [
+      isLocked && h("yoo-icon", { class: "isLocked", name: "lock", size: "small" }),
+      !isLocked && h("yoo-icon", { name: "bookmark", size: "small", color: isBookmarked ? 'app-color' : 'stable-alt' }),
+      !isLocked && isOngoing && h("yoo-icon", { class: "ongoing", name: "ongoing", size: "small", color: "info" }),
+      !isLocked && isTicked && h("yoo-icon", { class: "tick", name: "tick", size: "small", color: "success" })
+    ];
+  }
   renderMediaBadges(badges, size, headerView) {
     return badges.map((badge) => {
-      return (badge.iconOnlyInHeaderView && headerView ? h("yoo-icon", { size: size === 'extra-small' ? 'small' : size, name: badge.icon, color: badge.color, class: "header" }) :
-        h("yoo-tag", { class: !headerView ? badge.position : null, size: size, icon: headerView ? badge.icon : null, color: badge.color }, !headerView && [
-          h("yoo-icon", { slot: "start", size: "small", color: "light", name: badge.icon }),
-          badge.text
-        ]));
+      return badge.iconOnlyInHeaderView && headerView ? (h("yoo-icon", { size: size === 'extra-small' ? 'small' : size, name: badge.icon, color: badge.color, class: "header" })) : (h("yoo-tag", { class: !headerView ? badge.position : null, size: size, icon: headerView ? badge.icon : null, color: badge.color }, !headerView && [h("yoo-icon", { slot: "start", size: "small", color: "light", name: badge.icon }), badge.text]));
     });
   }
   renderNewsfeedCard() {
@@ -61,13 +66,21 @@ const YooCardStickyComponent = class {
     const isFullWidth = this.host.classList.contains('full-width');
     const showMainViewBadge = hasMediaBadges && (isFullWidth || !isWeb(this.host));
     const showHeaderViewBadge = hasMediaBadges && !(isFullWidth || !isWeb(this.host));
-    return (h("div", { class: `outer-container  ${this.type} ${isGif((_e = this.entry) === null || _e === void 0 ? void 0 : _e.imgSrc) ? 'gif' : ''}`, onClick: (ev) => { this.onOuterContainerClick(ev); } }, showMainViewBadge && this.renderMediaBadges(this.entry.mediaBadges), h("yoo-img", { instant: true, type: "background", class: { 'image-container': true, 'no-radius': isWeb(this.host) }, src: this.entry.imgSrc }), h("div", { class: "bottom-container" }, h("yoo-truncate", { class: "text-wrapper", innerHTML: removeTextStyle((_f = this.entry) === null || _f === void 0 ? void 0 : _f.title) }), this.entry.subheadings && this.entry.subheadings[0] && (h("div", { class: "subheading" }, this.entry.user && h("yoo-avatar", { onClick: (ev) => { this.onUserClicked(ev); }, iconSize: (_g = this.entry) === null || _g === void 0 ? void 0 : _g.avatarIconSize, size: (isWeb(this.host) ? 'extra-small' : 'small'), user: this.entry.user }), this.entry.postedBy && h("span", null, `${this.entry.postedBy} • ${this.entry.subheadings[0]}`, " "), showHeaderViewBadge && this.renderMediaBadges(this.entry.mediaBadges, 'extra-small', true), hasActions && !isWeb(this.host) && 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 && isWeb(this.host) && h("yoo-context-menu", { contentButtons: this.entry.secondaryActionSheet, onClick: (ev) => ev.stopPropagation() }, h("yoo-icon", { color: "stable", name: "more", size: ((_j = this.entry) === null || _j === void 0 ? void 0 : _j.actionIconSize) || 'small' })))))));
+    return (h("div", { class: `outer-container  ${this.type} ${isGif((_e = this.entry) === null || _e === void 0 ? void 0 : _e.imgSrc) ? 'gif' : ''}`, onClick: (ev) => {
+        this.onOuterContainerClick(ev);
+      } }, showMainViewBadge && this.renderMediaBadges(this.entry.mediaBadges), h("yoo-img", { instant: true, type: "background", class: { 'image-container': true, 'no-radius': isWeb(this.host) }, src: this.entry.imgSrc }), h("div", { class: "bottom-container" }, h("yoo-truncate", { class: "text-wrapper", innerHTML: removeTextStyle((_f = this.entry) === null || _f === void 0 ? void 0 : _f.title) }), this.entry.subheadings && this.entry.subheadings[0] && (h("div", { class: "subheading" }, this.entry.user && (h("yoo-avatar", { onClick: (ev) => {
+        this.onUserClicked(ev);
+      }, iconSize: (_g = this.entry) === null || _g === void 0 ? void 0 : _g.avatarIconSize, size: isWeb(this.host) ? 'extra-small' : 'small', user: this.entry.user })), this.entry.postedBy && h("span", null, `${this.entry.postedBy} • ${this.entry.subheadings[0]}`, " "), showHeaderViewBadge && this.renderMediaBadges(this.entry.mediaBadges, 'extra-small', true), hasActions && !isWeb(this.host) && (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 && isWeb(this.host) && (h("yoo-context-menu", { contentButtons: this.entry.secondaryActionSheet, onClick: (ev) => ev.stopPropagation() }, h("yoo-icon", { color: "stable", name: "more", size: ((_j = this.entry) === null || _j === void 0 ? void 0 : _j.actionIconSize) || 'small' }))))))));
   }
   renderCoursesCard() {
-    return (h("div", { class: `outer-container  ${this.type}`, style: this.getCardSize() }, h("yoo-img", { instant: true, type: "background", class: "image-container", disabled: this.entry.isLocked, src: this.entry.imgSrc }, this.entry.isLocked && h("yoo-icon", { name: "lock", size: "small" }), this.entry.isBookmarked && h("yoo-icon", { name: "bookmark", size: "small" })), h("div", { class: "bottom-container" }, h("div", { class: "text-wrapper" }, removeTextStyle(this.title)), this.entry.subheadings && this.entry.subheadings[0] && h("div", { class: "subheading" }, this.entry.subheadings[0]))));
+    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 || !isWeb(this.host));
+    return (h("div", { class: { 'outer-container': true, [this.type]: true, ticked: this.entry.isTicked }, style: this.getCardSize() }, h("yoo-img", { instant: true, type: "background", class: "image-container", disabled: this.entry.isLocked, src: this.entry.imgSrc }, this.renderIcons()), h("div", { class: "bottom-container" }, h("div", { class: "tags-container" }, showHeaderViewBadge && this.renderMediaBadges(this.entry.mediaBadges, 'small')), h("div", { class: "text-wrapper" }, removeTextStyle(this.title)), this.entry.subheadings && this.entry.subheadings[0] && h("div", { class: "subheading" }, this.entry.subheadings[0]), h("div", { class: "subheading" }, this.entry.postedBy && h("span", null, `${this.entry.postedBy} • ${this.entry.subheadings[0]}`, " ")))));
   }
   renderBase() {
-    return (h("div", { class: "outer-container image" }, h("div", { class: "gradient-container" }, h("div", { class: "text-container" }, this.entry.category && (h("div", { class: "category" }, h("span", null, this.entry.category))), this.title && (h("div", { class: "title" }, h("span", null, this.title))), this.entry.buttonText && h("yoo-button", { color: "app-color", size: "small", onClick: () => (this.entry.handler ? this.entry.handler() : {}) }, this.entry.buttonText))), h("yoo-img", { instant: true, type: "background", class: "image-container", src: this.entry.imgSrc })));
+    return (h("div", { class: "outer-container image" }, h("div", { class: "gradient-container" }, h("div", { class: "text-container" }, this.entry.category && (h("div", { class: "category" }, h("span", null, this.entry.category))), this.title && (h("div", { class: "title" }, h("span", null, this.title))), this.entry.buttonText && (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)))), h("yoo-img", { instant: true, type: "background", class: "image-container", src: this.entry.imgSrc })));
   }
   renderBasedOnType() {
     switch (this.type) {
@@ -82,7 +95,7 @@ const YooCardStickyComponent = class {
     }
   }
   render() {
-    return h(Host, { class: { web: isWeb(this.host), ...getAppContext(this.host) } }, this.entry && this.renderBasedOnType());
+    return (this.entry && (h(Host, { ...{ locked: this.entry.isLocked, bookmarked: this.entry.isBookmarked, ticked: this.entry.isTicked, ongoing: this.entry.isOngoing }, class: { ...getAppContext(this.host) } }, this.renderBasedOnType())));
   }
   get host() { return getElement(this); }
 };

package/dist/design-system/yoo-card-template.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, i as createEvent, h, e as Host } from './index-019c1b1a.js';
-import { i as isFunction } from './lodash-494e728c.js';
+import { i as isFunction } from './lodash-b0ad17f3.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/design-system/yoo-card-video.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, h, e as Host, g as getElement } from './index-019c1b1a.js';
-import { o as CardVideoView } from './index-21c7d38e.js';
-import { a8 as getClosestImageRatio, t as translate, _ as getSession } from './index-dde1f033.js';
+import { o as CardVideoView } from './index-da54e081.js';
+import { a8 as getClosestImageRatio, t as translate, _ as getSession } from './index-60d331ff.js';
 import { C as CardVideoRatio } from './card-video.interface-5572358c.js';
-import './lodash-494e728c.js';
+import './lodash-b0ad17f3.js';
 import './_commonjsHelpers-f4d11124.js';
 
 const cardVideoCss = ":host{--status-bar-height:4.6875rem;--status-item-size:3.125rem;--status-bar-gap:0.3125rem;--video-container-width:100%;--video-container-height:auto;display:-ms-flexbox;display:flex;width:100%;height:100%}:host .outer-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;position:relative;-ms-flex-direction:column;flex-direction:column;width:var(--video-container-width);height:var(--video-container-height);background:var(--dark, #000000)}:host .outer-container .placeholder-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;position:absolute;-ms-flex-direction:column;flex-direction:column;width:100%;text-align:center}:host .outer-container video{background-color:var(--anthracite, #1a1a1a)}:host .outer-container .remote-media{position:relative;width:100%;height:100%;background:var(--dark, #000000)}:host .outer-container .remote-media:not(.screen-sharing):not(.others) video{-webkit-transform:scale(-1, 1);transform:scale(-1, 1);-webkit-transform-origin:50% 50%;transform-origin:50% 50%}:host .outer-container .status-bar{position:absolute;bottom:0;z-index:11;width:100%;height:var(--status-bar-height);background:var(--anthracite, #1a1a1a)}:host .outer-container .status-bar .items-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%}:host .outer-container .status-bar .items-wrapper .item{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:var(--status-item-size);height:var(--status-item-size);margin-right:var(--status-bar-gap);border-radius:50%}:host .outer-container .status-bar .items-wrapper .item.danger{color:var(--light, #ffffff);background:var(--danger, #d44333)}:host .outer-container .status-bar .items-wrapper .item.success{color:var(--light, #ffffff);background:var(--success, #3aa76d)}:host .outer-container .status-bar .items-wrapper .item.app-color{color:var(--light, #ffffff);background:var(--app-color, #5a30f4)}:host .outer-container .status-bar .items-wrapper .item.dark{color:var(--light, #ffffff);background:var(--dark, #000000)}:host(.mobile) .outer-container{height:100%}:host(.transparent) .outer-container .status-bar{background:transparent}:host(.fit) .outer-container .remote-media{width:100% !important;height:100% !important}:host(.landscape[size=small]){--video-container-width:9.375rem;--video-container-height:6.875rem}:host(.portrait[size=small]){--video-container-width:9.375rem;--video-container-height:6.875rem}:host(.minimized.landscape[size=small]){--video-container-width:5rem;--video-container-height:3.5rem}:host(.minimized.portrait[size=small]){--video-container-width:3.5rem;--video-container-height:5rem}:host(.absolute) .outer-container video{position:absolute}";

package/dist/design-system/yoo-chart.entry.js

@@ -1,9 +1,9 @@
 import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-019c1b1a.js';
-import { y as getCssColor, eQ as FileSaver_min, dU as resizeObserve, p as debounce, eR as getMonths, d_ as getWeekDays, t as translate, i as isChromatic, ch as isIonic, aD as dateIsValid, Z as dateFormat } from './index-dde1f033.js';
-import { ab as merge } from './lodash-494e728c.js';
+import { y as getCssColor, eS as FileSaver_min, dt as resizeObserve, p as debounce, eT as getMonths, d$ as getWeekDays, t as translate, i as isChromatic, ci as isIonic, aD as dateIsValid, Z as dateFormat } from './index-60d331ff.js';
+import { ab as merge } from './lodash-b0ad17f3.js';
 import { h as highcharts } from './highcharts-c1be7540.js';
 import { a as createCommonjsModule, c as commonjsGlobal } from './_commonjsHelpers-f4d11124.js';
-import './index-21c7d38e.js';
+import './index-da54e081.js';
 
 function fixChartCategories(options) {
   var _a;
@@ -1405,7 +1405,7 @@ if (typeof highcharts === 'object') {
   // boost.default(Highcharts);
 }
 
-const chartCss = ":host{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;min-height:0}:host .container:not(.empty-state){position:relative;display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;width:100%;min-height:0}:host .container:not(.empty-state)>div{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}:host(.full-screen.show-table){-ms-flex-direction:row;flex-direction:row}:host(.full-screen.show-table) .highcharts-data-table{display:block !important;width:25rem;height:100%;max-height:initial;margin:0;padding:var(--spacing-16, 1rem);border-left:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0)}.highcharts-credits{display:none}.empty-state{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-direction:column;flex-direction:column;height:100%}.empty-state yoo-empty-state{padding:32px 0}.empty-state div{color:var(--text-color, #807f83);font-size:var(--font-size-16, 1rem);opacity:0.7;padding:0px;padding-bottom:var(--spacing-16, 1rem);text-align:center}:host(.feed-chart) .highcharts-data-labels.highcharts-bar-series{right:0}:host(.feed-chart) .highcharts-data-labels.highcharts-bar-series .highcharts-label{right:0.5rem;left:initial !important;text-align:right}:host(.feed-chart) .highcharts-data-labels.highcharts-bar-series .highcharts-label>span{position:initial !important;display:block}.highcharts-legend{display:var(--highcharts-legend-visibility, \"initial\")}.highcharts-data-table{display:none !important;height:100%;max-height:24.5rem;margin:0 var(--spacing-16, 1rem) var(--spacing-16, 1rem);padding:0;overflow:auto;pointer-events:all}.highcharts-data-table::-webkit-scrollbar{width:var(--spacing-04, 0.25rem);height:var(--spacing-04, 0.25rem)}.highcharts-data-table::-webkit-scrollbar-track{background-color:transparent;border-radius:var(--border-radius-04, 0.25rem)}.highcharts-data-table::-webkit-scrollbar-thumb{background-color:transparent;border-radius:var(--border-radius-04, 0.25rem)}.highcharts-data-table:hover::-webkit-scrollbar-track{background-color:var(--stable-light, #f1f1f1)}.highcharts-data-table:hover::-webkit-scrollbar-thumb{background:var(--stable, #adadad)}.highcharts-data-table td,.highcharts-data-table th,.highcharts-data-table caption{padding:0.5em;border:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0)}.highcharts-data-table tr:nth-child(even),.highcharts-data-table thead tr{background:var(--stable-ultralight, #fafafa)}.highcharts-data-table tr:hover{background:var(--app-color-20, rgba(90, 48, 244, 0.2))}.highcharts-data-table caption{font-weight:bold;font-size:1.1em;border-bottom:none}.highcharts-data-table table{width:100%;padding:var(--spacing-16, 1rem);padding-top:0;text-align:left;border-collapse:collapse}.highcharts-data-table table thead{font-size:var(--font-size-14, 0.875rem)}.highcharts-data-table table thead tr th{font-weight:var(--font-weight-700, 700)}.highcharts-data-table table tbody{font-size:var(--font-size-12, 0.75rem)}.highcharts-data-table table tbody tr th{font-weight:var(--font-weight-700, 700)}:host(.form:not(.inline)){height:15.625rem}:host(.form:not(.inline)) .highcharts-background{fill:transparent}:host(.form.inline){height:8rem}:host(.form.inline) .highcharts-background{fill:transparent}:host(.grid-cell){height:5.625rem}:host(.grid-cell) .empty-state yoo-empty-state{max-height:2.1875rem;padding:0}";
+const chartCss = ":host{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;min-height:0}:host .container:not(.empty-state){position:relative;display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;width:100%;min-height:0}:host .container:not(.empty-state)>div{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}:host(.full-screen.show-table){-ms-flex-direction:row;flex-direction:row}:host(.full-screen.show-table) .highcharts-data-table{display:block !important;width:25rem;height:100%;max-height:initial;margin:0;padding:var(--spacing-16, 1rem);border-left:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0)}.highcharts-credits{display:none}.empty-state{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-direction:column;flex-direction:column;height:100%}.empty-state yoo-empty-state{padding:var(--spacing-16, 1rem) 0}.empty-state div{color:var(--text-color-80, rgba(128, 127, 131, 0.8));font-size:var(--font-size-16, 1rem);padding:0px;padding-bottom:var(--spacing-16, 1rem);text-align:center}:host(.feed-chart) .highcharts-data-labels.highcharts-bar-series{right:0}:host(.feed-chart) .highcharts-data-labels.highcharts-bar-series .highcharts-label{right:0.5rem;left:initial !important;text-align:right}:host(.feed-chart) .highcharts-data-labels.highcharts-bar-series .highcharts-label>span{position:initial !important;display:block}.highcharts-legend{display:var(--highcharts-legend-visibility, \"initial\")}.highcharts-data-table{display:none !important;height:100%;max-height:24.5rem;margin:0 var(--spacing-16, 1rem) var(--spacing-16, 1rem);padding:0;overflow:auto;pointer-events:all}.highcharts-data-table::-webkit-scrollbar{width:var(--spacing-04, 0.25rem);height:var(--spacing-04, 0.25rem)}.highcharts-data-table::-webkit-scrollbar-track{background-color:transparent;border-radius:var(--border-radius-04, 0.25rem)}.highcharts-data-table::-webkit-scrollbar-thumb{background-color:transparent;border-radius:var(--border-radius-04, 0.25rem)}.highcharts-data-table:hover::-webkit-scrollbar-track{background-color:var(--stable-light, #f1f1f1)}.highcharts-data-table:hover::-webkit-scrollbar-thumb{background:var(--stable, #adadad)}.highcharts-data-table td,.highcharts-data-table th,.highcharts-data-table caption{padding:0.5em;border:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0)}.highcharts-data-table tr:nth-child(even),.highcharts-data-table thead tr{background:var(--stable-ultralight, #fafafa)}.highcharts-data-table tr:hover{background:var(--app-color-20, rgba(90, 48, 244, 0.2))}.highcharts-data-table caption{font-weight:bold;font-size:1.1em;border-bottom:none}.highcharts-data-table table{width:100%;padding:var(--spacing-16, 1rem);padding-top:0;text-align:left;border-collapse:collapse}.highcharts-data-table table thead{font-size:var(--font-size-14, 0.875rem)}.highcharts-data-table table thead tr th{font-weight:var(--font-weight-700, 700)}.highcharts-data-table table tbody{font-size:var(--font-size-12, 0.75rem)}.highcharts-data-table table tbody tr th{font-weight:var(--font-weight-700, 700)}:host(.form:not(.inline)){height:15.625rem}:host(.form:not(.inline)) .highcharts-background{fill:transparent}:host(.form.inline){height:8rem}:host(.form.inline) .highcharts-background{fill:transparent}:host(.grid-cell){height:5.625rem}:host(.grid-cell) .empty-state yoo-empty-state{max-height:2.1875rem;padding:0}";
 
 const CHART_ANIMATION_TIMEOUT = 500;
 const YooChartComponent = class {

package/dist/design-system/yoo-chat-message-dialog.entry.js

@@ -1,11 +1,11 @@
 import { r as registerInstance, f as forceUpdate, h, e as Host, g as getElement } from './index-019c1b1a.js';
-import { I as closeModal, t as translate, dE as parseLongIntoDate, a7 as getUserDisplayName, Z as dateFormat } from './index-dde1f033.js';
-import { g as getDateFormats } from './chat-helpers-68504755.js';
-import './lodash-494e728c.js';
+import { I as closeModal, t as translate, dz as parseLongIntoDate, a7 as getUserDisplayName, Z as dateFormat } from './index-60d331ff.js';
+import { g as getDateFormats } from './chat-helpers-01e6bc0e.js';
+import './lodash-b0ad17f3.js';
 import './_commonjsHelpers-f4d11124.js';
-import './index-21c7d38e.js';
+import './index-da54e081.js';
 
-const chatMessageDialogCss = ":host .outer-container{display:grid;grid-template-rows:auto auto auto 1fr;height:100%}: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%)}";
+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%)}";
 
 const YooChatMessageDialogComponent = class {
   constructor(hostRef) {
@@ -25,7 +25,7 @@ const YooChatMessageDialogComponent = class {
     }
   }
   renderHeader() {
-    return h("yoo-header", null, h("yoo-navbar", null, h("yoo-items", { slot: "start" }, h("yoo-button", { color: "text-color", rippleType: "unbounded", fill: "transparent", shape: "circular", onClick: () => closeModal(null) }, h("yoo-icon", { name: "close" }))), h("yoo-truncate", null, translate(this.heading))));
+    return h("yoo-header", null, h("yoo-navbar", null, h("yoo-items", { slot: "start" }, h("yoo-button", { color: "text-color", rippleType: "unbounded", fill: "transparent", shape: "circular", onClick: () => closeModal(null) }, h("yoo-icon", { name: "close" }))), h("yoo-truncated-line", { content: translate(this.heading), withTooltip: false })));
   }
   renderRow(item) {
     const { readTime, receivedBy } = item || {};

package/dist/design-system/yoo-chat-message-preview.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, i as createEvent, h, e as Host } from './index-019c1b1a.js';
-import { M as MessageType } from './index-21c7d38e.js';
-import { dG as getAudioDuration, c9 as replaceAndGetAllLinks, dH as isChatMessageTypeMedia, at as replaceAllLinks, T as translateMulti, t as translate, W as pipes, am as isFile, a7 as getUserDisplayName } from './index-dde1f033.js';
-import './lodash-494e728c.js';
+import { M as MessageType } from './index-da54e081.js';
+import { dA as getAudioDuration, ca as replaceAndGetAllLinks, dB as isChatMessageTypeMedia, at as replaceAllLinks, T as translateMulti, t as translate, W as pipes, am as isFile, a7 as getUserDisplayName } from './index-60d331ff.js';
+import './lodash-b0ad17f3.js';
 import './_commonjsHelpers-f4d11124.js';
 
 const chatMessagePreviewCss = ":host{position:relative;display:grid;grid-template-columns:var(--spacing-08, 0.5rem) 1fr 3rem;padding:var(--spacing-04, 0.25rem);color:var(--dark, #000000);font-size:var(--font-size-12, 0.75rem);background:var(--light-80, rgba(255, 255, 255, 0.8));border-radius:var(--border-radius-04, 0.25rem)}:host section{display:-ms-flexbox;display:flex;gap:var(--spacing-04, 0.25rem);-ms-flex-align:center;align-items:center}:host section#markdown{grid-area:1/1/span 2;-ms-flex-pack:center;justify-content:center}:host section#markdown::before{position:absolute;top:50%;width:var(--spacing-04, 0.25rem);height:75%;background-color:var(--app-color, #5a30f4);border-radius:var(--border-radius-08, 0.5rem);-webkit-transform:translateY(-50%);transform:translateY(-50%);content:\"\"}:host section#user{grid-area:1/2/span 1;margin-left:var(--spacing-04, 0.25rem)}:host section#user span{overflow:hidden}@supports (display: -webkit-box){:host section#user span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}:host section#content{grid-area:2/2/span 1;margin-left:var(--spacing-04, 0.25rem)}:host section#media{grid-area:1/3/span 2;-ms-flex-pack:end;justify-content:flex-end}:host section#media yoo-img{width:2rem;height:2rem;border-radius:var(--border-radius-04, 0.25rem)}:host yoo-icon[name=cross]{position:absolute;top:var(--spacing-08, 0.5rem);right:var(--spacing-08, 0.5rem)}:host([mode=input-bar]){height:3.125rem;background-color:var(--stable-light, #f1f1f1)}:host([mode=input-bar]) .media yoo-videoplayer-core{max-height:2.125rem}";
@@ -79,14 +79,15 @@ const YooChatMessagePreviewComponent = class {
     return content && h("yoo-truncate", { content: this.isInputBarMode ? null : content }, this.isInputBarMode ? (_a = this.message) === null || _a === void 0 ? void 0 : _a.content : null);
   }
   renderMedia(type) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const convertLinks = (text) => replaceAllLinks(translateMulti(text), false, 'app-color');
     return [
       h("yoo-icon", { name: this.getMediaIcon(type), color: !this.isInputBarMode ? 'app-color' : 'stable', size: "small" }),
-      (type === MessageType.photo || type === MessageType.video) && translate((_b = (_a = this.message) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.toUpperCase()),
-      type === MessageType.audio && (pipes.timer.transform(Math.round((_d = (_c = this.message) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.duration)).substr(3)),
-      type === MessageType.document && h("yoo-truncate", null, ((_f = (_e = this.message) === null || _e === void 0 ? void 0 : _e.payload) === null || _f === void 0 ? void 0 : _f._filename) || translate('DOCUMENT')),
-      type === MessageType.texturlpreview && h("yoo-truncate", null, h("yoo-text", { content: (_g = this.message) === null || _g === void 0 ? void 0 : _g.content, extraConversion: [convertLinks] }))
+      (type === MessageType.photo) && translate('YOOBIC' + ((_b = (_a = this.message) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.toUpperCase())),
+      (type === MessageType.video) && translate((_d = (_c = this.message) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.toUpperCase()),
+      type === MessageType.audio && (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 === MessageType.document && h("yoo-truncate", null, ((_h = (_g = this.message) === null || _g === void 0 ? void 0 : _g.payload) === null || _h === void 0 ? void 0 : _h._filename) || translate('YOOBICDOCUMENT')),
+      type === MessageType.texturlpreview && h("yoo-truncate", null, h("yoo-text", { content: (_j = this.message) === null || _j === void 0 ? void 0 : _j.content, extraConversion: [convertLinks] }))
     ];
   }
   renderMediaPreview(type, source) {

package/dist/design-system/yoo-chat-message.entry.js

@@ -1,11 +1,11 @@
 import { r as registerInstance, i as createEvent, f as forceUpdate, h, e as Host, g as getElement } from './index-019c1b1a.js';
-import { M as MessageType } from './index-21c7d38e.js';
-import { dB as isDocument, dt as isAudio, ag as isVideo, d as isNativeMobile, ai as isImage, dw as isUnsplashUrl, c6 as isBase64, cP as getExtension, _ as getSession, c9 as replaceAndGetAllLinks, dC as getResizedImageSize, v as isIOS, dD as showMessageInfoDialog, t as translate, am as isFile, av as isPhotoEdited, aq as replaceAtTagToMentionTag, at as replaceAllLinks, T as translateMulti, ad as isRichContentMessage, cr as isPdf, Z as dateFormat } from './index-dde1f033.js';
-import { V as debounce } from './lodash-494e728c.js';
-import { a as assignPressActions } from './index-b0e08f5d.js';
-import { g as getDateFormats } from './chat-helpers-68504755.js';
+import { M as MessageType } from './index-da54e081.js';
+import { du as isDocument, dv as isAudio, ag as isVideo, d as isNativeMobile, ai as isImage, dw as isUnsplashUrl, c7 as isBase64, cQ as getExtension, _ as getSession, ca as replaceAndGetAllLinks, dx as getResizedImageSize, v as isIOS, dy as showMessageInfoDialog, t as translate, am as isFile, av as isPhotoEdited, aq as replaceAtTagToMentionTag, at as replaceAllLinks, T as translateMulti, ad as isRichContentMessage, cs as isPdf, Z as dateFormat } from './index-60d331ff.js';
+import { W as debounce } from './lodash-b0ad17f3.js';
+import { a as assignPressActions } from './index-8e7c8c76.js';
+import { g as getDateFormats } from './chat-helpers-01e6bc0e.js';
 import './_commonjsHelpers-f4d11124.js';
-import './index-a6372dbe.js';
+import './index-0b28db95.js';
 
 const chatMessageCss = ":host{--border-message-content:none;--media-height:100%;--media-width:100vw;--right-messages-text-color:var(--light, #ffffff);--right-messages-background-color:var(--app-color, #5a30f4);--left-messages-text-color:var(--dark, #000000);--left-messages-background-color:var(--stable-light, #f1f1f1);--message-content-width:max-content;display:block;max-width:65%;word-break:break-word}:host #group{display:grid;grid-gap:var(--spacing-04, 0.25rem);grid-template-columns:var(--spacing-40, 2.5rem) calc(100% - 2.5rem)}:host #group .left-column{display:-ms-flexbox;display:flex;-ms-flex-item-align:end;align-self:end;-webkit-transform:translateY(-1.5rem);transform:translateY(-1.5rem)}:host #group .right-column .username{margin-bottom:var(--spacing-04, 0.25rem);color:var(--text-color, #807f83);font-size:var(--font-size-14, 0.875rem);white-space:nowrap;text-align:left;cursor:pointer}:host #group .right-column .message:not(.audio){max-width:var(--message-content-width)}:host .message{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:100%;color:var(--text-color, #807f83);word-wrap:break-word}:host .message:hover yoo-button{z-index:100;opacity:1}:host .message#texturlpreview{width:-webkit-fill-available;width:-moz-available;width:stretch}:host .message.combined>section{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%}:host .message.combined .preview{position:relative;padding:var(--spacing-04, 0.25rem);padding-bottom:var(--spacing-02, 0.125rem);border-top-left-radius:var(--border-radius-08, 0.5rem);border-top-right-radius:var(--border-radius-08, 0.5rem)}:host .message.combined .preview yoo-links-preview{border-top-left-radius:var(--border-radius-04, 0.25rem);border-top-right-radius:var(--border-radius-04, 0.25rem)}:host .message.combined .content,:host .message.combined yoo-audio-player{background:transparent;border-top-left-radius:initial;border-top-right-radius:initial;-webkit-box-shadow:none;box-shadow:none}:host .message.combined .content#text[is-between]{padding:var(--spacing-04, 0.25rem) var(--spacing-08, 0.5rem);border-radius:inherit}:host .message.combined .content#text yoo-text{width:100%;text-align:left}:host .message.combined .content yoo-img{padding:var(--spacing-04, 0.25rem);padding-top:var(--spacing-02, 0.125rem)}:host .message.combined .content yoo-tag{right:initial;left:var(--spacing-08, 0.5rem)}:host .message:not(.combined) .content{max-width:var(--message-content-width)}:host .message.document{--message-content-width:100%}:host .message.document .content{width:100%}:host .message.audio{width:100%}:host .message.audio .content{display:contents}:host .message yoo-audio-player{padding:var(--spacing-16, 1rem);background-color:var(--light, #ffffff);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 .message yoo-button{position:absolute;top:var(--spacing-04, 0.25rem);right:var(--spacing-04, 0.25rem);opacity:0;-webkit-transition:opacity 0.5s ease-in-out;transition:opacity 0.5s ease-in-out}:host .message yoo-avatar{cursor:pointer}:host .message yoo-mention-tag{text-decoration:underline;cursor:pointer}:host .message yoo-form-document{width:100%;--outer-container-padding:0;--card-file-image-content:unset;--card-file-padding:0 var(--spacing-16, 1rem)}:host .message #status{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;margin-top:var(--spacing-04, 0.25rem);font-size:var(--font-size-18, 1.125rem);cursor:pointer}:host .message #status span{color:var(--stable, #adadad);font-size:var(--font-size-12, 0.75rem)}:host .message .content{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;border:var(--border-message-content);border-radius:var(--border-radius-08, 0.5rem)}:host .message #medias{position:relative;cursor:pointer}:host .message #medias yoo-tag[icon=pen]{position:absolute;right:var(--spacing-08, 0.5rem);bottom:var(--spacing-08, 0.5rem)}:host .message #medias yoo-img{--border-radius:var(--border-radius-08, 0.5rem);max-width:calc(100% - 0.5rem)}:host .message #medias yoo-videoplayer-core{--poster-size:cover;width:var(--media-width);height:var(--media-height);-o-object-fit:cover;object-fit:cover}:host .message .media-loader-container{position:relative;background:var(--stable-alt, #d0d0d0)}:host yoo-form-checkbox{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}:host .empty{display:none}:host([type*=text]) .content{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;border-radius:var(--border-radius-16, 1rem)}:host([type*=text]) .content yoo-text{-webkit-box-sizing:border-box;box-sizing:border-box;max-width:100%;padding:var(--spacing-08, 0.5rem);white-space:pre-wrap;overflow-wrap:break-word;pointer-events:initial}:host([type=document]),:host([type=audio]){width:100%}:host([type=document]) .message,:host([type=audio]) .message{width:100%}:host([type=document]) .message.audio .content,:host([type=audio]) .message.audio .content{display:contents}:host([type=document]) .message.combined #medias,:host([type=audio]) .message.combined #medias{width:100%;padding:var(--spacing-04, 0.25rem) var(--spacing-16, 1rem)}:host([first]) #group .right-column .username{display:block}:host([left][first]) .message:not(.combined) .content{border-top-left-radius:var(--spacing-16, 1rem)}:host([left][last]) .message:not(.combined) .content{border-bottom-left-radius:var(--spacing-16, 1rem)}:host([left]) .message.combined #medias{background-color:var(--left-messages-background-color)}:host([left]) .message.combined #medias yoo-audio-player{background-color:var(--left-messages-background-color)}:host([left]) .message #text,:host([left]) .message .preview{color:var(--left-messages-text-color);background-color:var(--left-messages-background-color)}:host([left]) .message.combined yoo-audio-player{--range-active-color:var(--app-color, #5a30f4);--range-trail-color:var(--stable-20, rgba(173, 173, 173, 0.2));--play-icon-color:var(--dark, #000000);--title-color:var(--dark, #000000)}:host([left]) .message:not(.combined) .content{border-top-left-radius:var(--spacing-04, 0.25rem);border-bottom-left-radius:var(--spacing-04, 0.25rem)}:host([right][first]) .message:not(.combined) .content{border-top-right-radius:var(--spacing-16, 1rem)}:host([right][last]) .message:not(.combined) .content{border-bottom-right-radius:var(--spacing-16, 1rem)}:host([right]){-ms-flex-item-align:end;align-self:flex-end;justify-self:end;float:right}:host([right]) .message{float:right}:host([right]) .message.combined #medias{background-color:var(--right-messages-background-color)}:host([right]) .message.combined #medias yoo-audio-player{background-color:var(--right-messages-background-color)}:host([right]) .message #text,:host([right]) .message .preview{color:var(--right-messages-text-color);background-color:var(--right-messages-background-color)}:host([right]) .message.combined yoo-audio-player{--range-active-color:var(--light, #ffffff);--play-icon-color:var(--light, #ffffff);--title-color:var(--light, #ffffff)}:host([right]) .message:not(.combined) .content{-ms-flex-item-align:end;align-self:flex-end;border-top-right-radius:var(--spacing-04, 0.25rem);border-bottom-right-radius:var(--spacing-04, 0.25rem)}:host(.radius) .message .content{border-radius:var(--spacing-16, 1rem) !important}:host(.selected) .message{position:relative;-webkit-transition-delay:0.1s;transition-delay:0.1s;-webkit-transition-timing-function:var(--ease-out-quint), var(--ease-in-out-sine);transition-timing-function:var(--ease-out-quint), var(--ease-in-out-sine);-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-property:color, background-color;transition-property:color, background-color;-webkit-animation-name:scale-up, scale-down;animation-name:scale-up, scale-down;-webkit-animation-duration:0.15s;animation-duration:0.15s;-webkit-animation-timing-function:var(--ease-in-out-sine);animation-timing-function:var(--ease-in-out-sine);-webkit-animation-delay:0.1s, 0.25s;animation-delay:0.1s, 0.25s}@-webkit-keyframes scale-up{from{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.05);transform:scale(1.05)}}@keyframes scale-up{from{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.05);transform:scale(1.05)}}@-webkit-keyframes scale-down{from{-webkit-transform:scale(1.05);transform:scale(1.05)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes scale-down{from{-webkit-transform:scale(1.05);transform:scale(1.05)}to{-webkit-transform:scale(1);transform:scale(1)}}:host([animation=loading]){--loading-dot-color:var(--text-color, #807f83);--loading-dot-duration:0.6s;--loading-dot-size:0.5rem;--loading-dot-spacing:1rem;--loading-dot-start:0.2s;--loading-dot-step:0.1s;--loading-text-duration:0.3s;--loading-text-start:0.8s}:host([animation=loading]) .message{position:relative}:host([animation=loading]) .message .dot{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);-webkit-animation-delay:calc(var(--loading-dot-start) + 1 * var(--loading-dot-step)), calc(calc(var(--loading-dot-start) + 1 * var(--loading-dot-step)) + calc(var(--loading-dot-duration) / 2));animation-delay:calc(var(--loading-dot-start) + 1 * var(--loading-dot-step)), calc(calc(var(--loading-dot-start) + 1 * var(--loading-dot-step)) + calc(var(--loading-dot-duration) / 2))}:host([animation=loading]) .message .dot,:host([animation=loading]) .message .dot::before,:host([animation=loading]) .message .dot::after{width:var(--loading-dot-size);height:var(--loading-dot-size);background:var(--loading-dot-color);border-radius:50%;opacity:0;-webkit-animation-name:fade-in, fade-out;animation-name:fade-in, fade-out;-webkit-animation-duration:calc(var(--loading-dot-duration) / 2);animation-duration:calc(var(--loading-dot-duration) / 2);-webkit-animation-timing-function:var(--ease-in-out-sine);animation-timing-function:var(--ease-in-out-sine)}:host([animation=loading]) .message .dot::before,:host([animation=loading]) .message .dot::after{position:absolute;top:0;display:inline-block;content:\"\"}:host([animation=loading]) .message .dot::before{right:var(--loading-dot-spacing);-webkit-animation-delay:calc(var(--loading-dot-start) + 0 * var(--loading-dot-step)), calc(calc(var(--loading-dot-start) + 0 * var(--loading-dot-step)) + calc(var(--loading-dot-duration) / 2));animation-delay:calc(var(--loading-dot-start) + 0 * var(--loading-dot-step)), calc(calc(var(--loading-dot-start) + 0 * var(--loading-dot-step)) + calc(var(--loading-dot-duration) / 2))}:host([animation=loading]) .message .dot::after{left:var(--loading-dot-spacing);-webkit-animation-delay:calc(var(--loading-dot-start) + 2 * var(--loading-dot-step)), calc(calc(var(--loading-dot-start) + 2 * var(--loading-dot-step)) + calc(var(--loading-dot-duration) / 2));animation-delay:calc(var(--loading-dot-start) + 2 * var(--loading-dot-step)), calc(calc(var(--loading-dot-start) + 2 * var(--loading-dot-step)) + calc(var(--loading-dot-duration) / 2))}:host([animation=loading]) .message #text{opacity:0;-webkit-animation:fade-in var(--loading-text-duration) var(--ease-in-out-quart) var(--loading-text-start) forwards;animation:fade-in var(--loading-text-duration) var(--ease-in-out-quart) var(--loading-text-start) forwards}@-webkit-keyframes fade-in{from{opacity:0}to{opacity:1}}@keyframes fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes fade-out{from{opacity:1}to{opacity:0}}@keyframes fade-out{from{opacity:1}to{opacity:0}}@media screen and (min-width: 1400px){:host(.expanded) .message.combined{max-width:inherit}}";