@yoobic/yobi 8.2.2 → 8.3.0-2

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

@@ -2,12 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
-const commonHelpers = require('./common-helpers-6970c46c.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
+const commonHelpers = require('./common-helpers-a4efe957.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const communityDetailCss = ":host{width:100%}:host .outer-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%;background:var(--light, #ffffff)}:host .outer-container .top-container{display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;height:6rem;-webkit-transition:0.2s;transition:0.2s}:host .outer-container .top-container.expanded{height:auto}:host .outer-container .top-container .image-container{width:7.375rem;height:6rem;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(-73%, rgba(255, 255, 255, 0)), to(rgba(0, 0, 0, 0.5))), -webkit-gradient(linear, left top, left bottom, from(#276ef1), to(#276ef1));background-image:linear-gradient(to bottom, rgba(255, 255, 255, 0) -73%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(to bottom, #276ef1, #276ef1)}:host .outer-container .top-container .image-container yoo-img{height:100%;--image-background:var(--accent-10, rgba(39, 110, 241, 0.1))}:host .outer-container .top-container .information-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:100%;padding:var(--spacing-08, 0.5rem) 0 var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);border-bottom:var(--stable-light, #f1f1f1) solid var(--border-width-01, 0.0625rem)}:host .outer-container .top-container .information-container .title-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;color:var(--dark, #000000);font-weight:var(--font-weight-900, 900);font-size:var(--font-size-24, 1.5rem)}:host .outer-container .top-container .information-container .title-container .more-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-right:var(--spacing-16, 1rem);margin-left:auto}:host .outer-container .top-container .information-container .members-container{color:var(--text-color, #807f83);font-size:var(--font-size-12, 0.75rem)}:host .outer-container .top-container .information-container .description-container{display:-ms-flexbox;display:flex;color:var(--text-color, #807f83);font-size:var(--font-size-14, 0.875rem)}:host .outer-container .top-container .information-container .description-container yoo-button{padding:0 1rem}:host .outer-container .tab-outer-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;max-width:20rem;height:100%;background:var(--light, #ffffff);border-left:0.0625rem solid var(--stable-40, rgba(173, 173, 173, 0.4));-webkit-transition:0.3s;transition:0.3s}:host .outer-container .tab-outer-container.collapsed{width:0;min-width:var(--spacing-48, 3rem) !important}:host .outer-container .tab-outer-container:not(.collapsed){min-width:15rem}:host .outer-container .tab-container{position:relative;width:100%}:host .outer-container .tab-container .collapsible-icon-container{position:absolute;top:0.5rem;right:0.5rem;bottom:auto;left:auto;z-index:10;cursor:pointer}:host .outer-container .bottom-container{display:-ms-flexbox;display:flex;height:100%;background:var(--stable-light, #f1f1f1)}:host .outer-container .bottom-container .feed-container{position:relative;-ms-flex:1 1 30rem;flex:1 1 30rem;width:100%;background:var(--stable-ultralight, #fafafa)}:host .outer-container .bottom-container .feed-container .grid-container{margin:0 6.5rem}:host .outer-container .bottom-container .community-info{width:22.5rem}:host(.mobile) .top-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:start;justify-content:flex-start;height:16.25rem;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(-73%, rgba(255, 255, 255, 0)), to(rgba(0, 0, 0, 0.5))), -webkit-gradient(linear, left top, left bottom, from(#276ef1), to(#276ef1));background-image:linear-gradient(to bottom, rgba(255, 255, 255, 0) -73%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(to bottom, #276ef1, #276ef1)}:host(.mobile) .top-container yoo-img{position:absolute;top:0;right:0;bottom:0;left:0;--image-background:var(--accent-10, rgba(39, 110, 241, 0.1));height:100%}:host(.mobile) .top-container .title-container{position:absolute;top:auto;right:auto;bottom:2.5rem;left:1rem;z-index:1;color:var(--light, #ffffff);font-weight:var(--font-weight-900, 900);font-size:var(--font-size-24, 1.5rem)}:host(.mobile) .top-container .members-container{position:absolute;top:auto;right:auto;bottom:1rem;left:1rem;z-index:1;color:var(--light, #ffffff);font-size:var(--font-size-12, 0.75rem)}:host(.mobile) .top-container .bottom-overlay{position:absolute;bottom:0;left:0;z-index:0;width:100%;height:100px;background-image:var(--linear-gradient-01-bottom, linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.19), rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0.74), rgba(0, 0, 0, 0.81), rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.94), var(--dark, #000000)));opacity:0.5}:host(.mobile) .description-container{margin:0 var(--spacing-16, 1rem);padding:var(--spacing-08, 0.5rem) 0;color:var(--text-color, #807f83);border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host(.mobile) .bottom-container .feed-container{margin:0;background:var(--light, #ffffff)}:host(.mobile) .bottom-container .feed-container .grid-container{margin:0}";
 
@@ -28,11 +29,11 @@ const YooCommunityDetailComponent = class {
     ];
   }
   componentWillLoad() {
-    this.isMobile = !index$1.isWeb();
+    this.isMobile = !overlays.isWeb();
   }
   componentDidLoad() {
     this.resizePage();
-    this.resizeListener = index$1.debounce(this.resizePage, 500).bind(this);
+    this.resizeListener = overlays.debounce(this.resizePage, 500).bind(this);
     window.addEventListener('resize', this.resizeListener);
     if (this.truncatedText && this.truncateElement) {
       this.truncateElement.forceMoreButtonDisplayContent = this.truncatedText;
@@ -50,11 +51,11 @@ const YooCommunityDetailComponent = class {
   }
   renderMobileHeader() {
     var _a, _b, _c;
-    return index.h("div", { class: "top-container" }, index.h("yoo-img", { src: (_a = this.community) === null || _a === void 0 ? void 0 : _a.covers, fallbackIcon: { name: 'community', color: 'light' } }), index.h("div", { class: "title-container" }, index.h("yoo-truncate", null, index$1.translateMulti((_b = this.community) === null || _b === void 0 ? void 0 : _b.name))), index.h("div", { class: "members-container" }, index$1.pipes.number.transform((_c = this.community) === null || _c === void 0 ? void 0 : _c.numberOfMembers) + ' ' + index$1.translate('MEMBERS')), index.h("div", { class: "bottom-overlay" }));
+    return index.h("div", { class: "top-container" }, index.h("yoo-img", { src: (_a = this.community) === null || _a === void 0 ? void 0 : _a.covers, fallbackIcon: { name: 'community', color: 'light' } }), index.h("div", { class: "title-container" }, index.h("yoo-truncate", null, overlays.translateMulti((_b = this.community) === null || _b === void 0 ? void 0 : _b.name))), index.h("div", { class: "members-container" }, overlays.pipes.number.transform((_c = this.community) === null || _c === void 0 ? void 0 : _c.numberOfMembers) + ' ' + overlays.translate('MEMBERS')), index.h("div", { class: "bottom-overlay" }));
   }
   renderWebHeader() {
     var _a, _b, _c;
-    return index.h("div", { class: "top-container", ref: (el) => this.topContainerElement = el }, index.h("div", { class: "image-container" }, index.h("yoo-img", { src: (_a = this.community) === null || _a === void 0 ? void 0 : _a.covers, fallbackIcon: { name: 'community', color: 'light' } })), index.h("div", { class: "information-container" }, index.h("div", { class: "title-container" }, index$1.translateMulti((_b = this.community) === null || _b === void 0 ? void 0 : _b.name), index.h("div", { class: "more-container" }, index.h("slot", { name: "action-slot" }), index.h("slot", { name: "more-action" }))), index.h("div", { class: "members-container" }, index$1.pipes.number.transform((_c = this.community) === null || _c === void 0 ? void 0 : _c.numberOfMembers) + ' ' + index$1.translate('MEMBERS')), this.renderDescriptionContainer()));
+    return index.h("div", { class: "top-container", ref: (el) => this.topContainerElement = el }, index.h("div", { class: "image-container" }, index.h("yoo-img", { src: (_a = this.community) === null || _a === void 0 ? void 0 : _a.covers, fallbackIcon: { name: 'community', color: 'light' } })), index.h("div", { class: "information-container" }, index.h("div", { class: "title-container" }, overlays.translateMulti((_b = this.community) === null || _b === void 0 ? void 0 : _b.name), index.h("div", { class: "more-container" }, index.h("slot", { name: "action-slot" }), index.h("slot", { name: "more-action" }))), index.h("div", { class: "members-container" }, overlays.pipes.number.transform((_c = this.community) === null || _c === void 0 ? void 0 : _c.numberOfMembers) + ' ' + overlays.translate('MEMBERS')), this.renderDescriptionContainer()));
   }
   renderTabSelection() {
     return (index.h("div", { class: { 'tab-outer-container': true, 'collapsed': this.hideMembersList } }, index.h("div", { class: "tab-container" }, index.h("div", { class: "collapsible-icon-container", onClick: () => { this.toggleList(); } }, index.h("yoo-icon", { size: "medium", name: "sidebar-right", color: this.hideMembersList ? 'app-color' : 'stable' })), !this.hideMembersList && index.h("yoo-tabs", { class: "no-margin", tabs: this.tabs, onTabSelected: (ev) => this.membersListChanged.emit({ manager: ev.detail.nextIndex === 1 }) })), !this.hideMembersList && index.h("slot", { name: "members-grid" })));
@@ -64,7 +65,7 @@ const YooCommunityDetailComponent = class {
   }
   renderDescriptionContainer() {
     var _a;
-    return index.h("div", { class: "description-container" }, index.h("yoo-truncate", { ref: (el) => this.truncateElement = el, onContentToggled: () => { var _a; return (_a = this.topContainerElement) === null || _a === void 0 ? void 0 : _a.classList.toggle('expanded'); } }, index.h("span", { ref: (el) => this.truncatedText = el }, index$1.translateMulti((_a = this.community) === null || _a === void 0 ? void 0 : _a.description))));
+    return index.h("div", { class: "description-container" }, index.h("yoo-truncate", { ref: (el) => this.truncateElement = el, onContentToggled: () => { var _a; return (_a = this.topContainerElement) === null || _a === void 0 ? void 0 : _a.classList.toggle('expanded'); } }, index.h("span", { ref: (el) => this.truncatedText = el }, overlays.translateMulti((_a = this.community) === null || _a === void 0 ? void 0 : _a.description))));
   }
   render() {
     return index.h(index.Host, { class: { ...commonHelpers.getAppContext(this.host) } }, index.h("div", { class: "outer-container" }, this.isMobile ? this.renderMobileHeader() : this.renderWebHeader(), this.isMobile && this.renderDescriptionContainer(), this.renderBottomContent()));

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

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

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

@@ -2,12 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
 const lodash = require('./lodash-597bda6d.js');
-const commonHelpers = require('./common-helpers-6970c46c.js');
+const commonHelpers = require('./common-helpers-a4efe957.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const contextMenuDialogCss = ":host{position:absolute;top:auto;right:auto;bottom:auto;left:auto;--width-dropdown-content:11.5rem;--max-width-dropdown-content:21.5rem;--max-height-dropdown-content:28.5rem;z-index:10000;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;min-width:var(--width-dropdown-content);max-width:var(--max-width-dropdown-content);font-size:var(--font-size-16, 1rem);background:var(--light, #ffffff);border:solid var(--border-width-01, 0.0625rem) var(--stable-light, #f1f1f1);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))}:host hr{width:100%;height:0.0625rem;margin:0;background-color:var(--stable-light, #f1f1f1);border:0}:host ul{max-height:var(--max-height-dropdown-content);margin:0;overflow-x:hidden;overflow-y:auto;line-height:1.75;list-style:none;-webkit-padding-start:inherit;padding-inline-start:inherit}:host ul::-webkit-scrollbar{width:var(--spacing-04, 0.25rem);height:var(--spacing-04, 0.25rem)}:host ul::-webkit-scrollbar-track{background-color:transparent;border-radius:var(--border-radius-04, 0.25rem)}:host ul::-webkit-scrollbar-thumb{background-color:transparent;border-radius:var(--border-radius-04, 0.25rem)}:host ul li:first-child{padding-top:var(--spacing-08, 0.5rem)}:host ul li:last-child{padding-bottom:var(--spacing-04, 0.25rem)}:host ul li.app-color{background:var(--app-color-20, rgba(90, 48, 244, 0.2))}:host ul:hover::-webkit-scrollbar-track{background-color:var(--stable-light, #f1f1f1)}:host ul:hover::-webkit-scrollbar-thumb{background:var(--stable, #adadad)}:host yoo-icon[class*=arrow]{opacity:0}:host .title{padding:var(--spacing-08, 0.5rem);padding-bottom:0;font-weight:var(--font-weight-700, 700);font-size:var(--font-size-14, 0.875rem)}:host .icon{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;min-width:var(--spacing-32, 2rem)}:host .content{position:relative}:host .content ul{max-height:var(--max-height-dropdown-content)}:host .content.to-left{direction:ltr}:host .content.to-left .wrapper{-webkit-transform:translate(-100%, -0.35rem);transform:translate(-100%, -0.35rem)}:host .content.to-right{direction:rtl}:host .content.to-right li{direction:ltr;text-align:left}:host .content.to-right li .wrapper{-webkit-transform:translate(100%, -0.35rem);transform:translate(100%, -0.35rem)}:host li{position:static;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:var(--spacing-32, 2rem);padding:var(--spacing-02, 0.125rem) var(--spacing-08, 0.5rem);color:var(--dark, #000000);cursor:pointer}:host li.content-start{-ms-flex-align:start;align-items:flex-start}:host li:first-child{border-radius:var(--spacing-04, 0.25rem) var(--spacing-04, 0.25rem) 0 0}:host li:last-child{border-bottom-right-radius:var(--spacing-04, 0.25rem);border-bottom-left-radius:var(--spacing-04, 0.25rem)}:host li:hover:not(.selected):not(.disabled):not(.no-hover){background:var(--stable-light, #f1f1f1)}:host li:hover:not(.selected):not(.disabled):not(.no-hover)>.item-content>yoo-icon[class*=arrow]{opacity:1}:host li:hover:not(.selected):not(.disabled):not(.no-hover)>.item-content>.wrapper{visibility:visible;opacity:1}:host li.selected{background:var(--stable-light, #f1f1f1)}:host li.delete-content{border-top:0.0625rem solid var(--stable-light, #f1f1f1)}:host li.sub-item{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host li.sub-item:hover yoo-icon.arrows{position:absolute;top:auto;right:0;bottom:auto;left:auto;display:block}:host li.active{color:var(--stable-light, #f1f1f1)}:host li .item-content{display:-ms-flexbox;display:flex;gap:var(--spacing-08, 0.5rem);-ms-flex-align:center;align-items:center;width:100%}:host li .text{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin-right:auto;overflow:hidden}@supports (display: -webkit-box){:host li .text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}:host li .text.app-color{color:var(--app-color, #5a30f4)}:host li .text.danger{color:var(--danger, #d44333)}:host li .text .content-description{color:var(--text-color, #807f83)}:host li.disabled .text{color:var(--stable-alt, #d0d0d0);cursor:unset}:host li .wrapper{position:absolute;right:100%;z-index:10001;width:var(--width-dropdown-content);max-width:var(--max-width-dropdown-content);background:var(--light, #ffffff);border:solid var(--border-width-01, 0.0625rem) var(--stable-light, #f1f1f1);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));visibility:hidden;opacity:0;-webkit-transition:opacity 0.25s ease-in-out;transition:opacity 0.25s ease-in-out}:host li .wrapper.to-left{right:auto;left:0}:host li .wrapper.to-left ul{direction:ltr}:host li .wrapper.to-right{right:0;left:auto}:host li .wrapper.to-right ul{direction:rtl}:host li .wrapper .text{padding:0 var(--spacing-08, 0.5rem)}:host li .wrapper .title{margin-bottom:-0.5rem;padding:var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);cursor:default}:host li.actionable-icon .text{min-width:unset}:host(.inline){display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;width:unset;min-width:inherit;max-width:unset;white-space:nowrap}:host(.inline) ul{display:-ms-inline-flexbox;display:inline-flex;margin:0}:host(.inline) ul li{position:unset;display:-ms-flexbox;display:flex;height:auto;min-height:2.375rem;padding:0;padding:0 var(--spacing-02, 0.125rem)}:host(.inline) ul li yoo-icon{padding:0 var(--spacing-04, 0.25rem)}:host(.overflow-contained){width:16rem;max-width:16rem}:host(.overflow-contained) li .sub-menu{width:16rem;max-width:16rem}:host(.overflow-contained) li .text{overflow:hidden}:host(.side-menu){width:12rem;margin-left:10px;background-color:var(--anthracite, #1a1a1a);border-color:transparent;-webkit-transform:inherit;transform:inherit}:host(.side-menu) .arrow-cursor{position:absolute;left:0;width:10px;height:10px;margin-left:-6px;background-color:var(--anthracite, #1a1a1a);border:inherit;border-radius:0px 0px 0px 0.1em;-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-clip-path:polygon(0% 0%, 100% 100%, 0% 100%);clip-path:polygon(0% 0%, 100% 100%, 0% 100%)}:host(.side-menu) .cursor_top{top:14px}:host(.side-menu) .cursor_center{top:51%}:host(.side-menu) .cursor_bottom{top:calc(100% - 43px)}:host(.side-menu) hr{width:10.5rem;margin:0 var(--spacing-16);background-color:var(--light-20, rgba(255, 255, 255, 0.2))}:host(.side-menu) li{margin:var(--spacing-08, 0.5rem);padding:var(--spacing-04, 0.25rem);color:var(--light, #ffffff);border-radius:3px}:host(.side-menu) li.sub-menu-title{margin:var(--spacing-08) var(--spacing-16);padding:0;cursor:initial}:host(.side-menu) li.sub-menu-title:hover{background-color:inherit !important}:host(.side-menu) li.sub-menu-title:hover yoo-icon{fill:inherit}:host(.side-menu) li:hover{background-color:var(--light-10, rgba(255, 255, 255, 0.1)) !important}:host(.side-menu) li:hover yoo-icon{fill:var(--light, #ffffff)}:host(.side-menu) li.selected{background:inherit}:host(.side-menu) li.selected yoo-icon{fill:var(--light, #ffffff)}:host(.side-menu) li yoo-icon{margin-right:var(--spacing-08, 0.5rem);fill:var(--text-color, #807f83)}:host(.side-menu) li yoo-avatar{margin-right:var(--spacing-08, 0.5rem)}:host(.side-menu) li .item-content{overflow:hidden;color:var(--light, #ffffff)}:host(.side-menu) li .text{overflow:hidden;font-size:var(--font-size-16, 1rem);white-space:nowrap;text-overflow:ellipsis}:host(.side-menu) li .text>span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(.side-menu) li .content-description{-ms-flex:1;flex:1}:host(.side-menu) li.is-toggle{display:-ms-flexbox;display:flex}:host(.side-menu) li.is-toggle yoo-icon{margin-right:var(--spacing-08, 0.5rem)}:host(.side-menu) li.is-toggle .text{-ms-flex:1;flex:1;min-width:auto;margin-right:var(--spacing-08, 0.5rem)}:host(.width-unset){width:auto;max-width:unset}:host(.width-unset) .item-content{-ms-flex:1;flex:1;overflow:hidden}:host(.width-unset) .sub-menu{width:auto;max-width:unset}:host(.width-unset) .text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(.width-unset) .text>div{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}";
 
@@ -30,7 +31,7 @@ const YooContextMenuDialogComponent = class {
     this.selectedItems = [];
   }
   onBodyClick() {
-    index$1.closeModal(null);
+    overlays.closeModal(null);
   }
   get openSubMenuOnLeft() {
     const maxSubMenusDepth = (button) => {
@@ -70,7 +71,7 @@ const YooContextMenuDialogComponent = class {
       }
       else if (item.isToggle) {
         ev.stopPropagation();
-        index$1.closeModal(null);
+        overlays.closeModal(null);
       }
       else if (this.multipleSelection) {
         ev.stopPropagation();
@@ -84,9 +85,9 @@ const YooContextMenuDialogComponent = class {
            * As for new safari 15.2+ security policy, the action of copylink need to be
            * directly called from the onClick and not in a procedural way ( to prevent script injections )
            */
-          index$1.copyToClipboard(item.handler());
+          overlays.copyToClipboard(item.handler());
         }
-        index$1.closeModal(item);
+        overlays.closeModal(item);
       }
     }
   }
@@ -99,7 +100,7 @@ const YooContextMenuDialogComponent = class {
   onActionableIconClick(event, actionableIcon) {
     event.stopPropagation();
     actionableIcon.handler();
-    index$1.closeModal(null);
+    overlays.closeModal(null);
   }
   onItemHovered(ev) {
     const item = ev === null || ev === void 0 ? void 0 : ev.target;
@@ -119,7 +120,7 @@ const YooContextMenuDialogComponent = class {
     }
   }
   renderTitle(title) {
-    return index.h("section", { class: "title" }, index$1.translateMulti(title));
+    return index.h("section", { class: "title" }, overlays.translateMulti(title));
   }
   renderAvatarOrIcon(item) {
     const { userItem, icon, iconSize, textClass, iconColor } = item;
@@ -131,9 +132,9 @@ const YooContextMenuDialogComponent = class {
     const { description, text } = item;
     const textContent = text && lodash.isFunction(text) ? text() : text;
     return index.h("section", { class: { 'text': true, [item.textClass]: !!item.textClass } }, this.host.classList.contains('width-unset') ? ([
-      index.h("div", { innerHTML: index$1.translateMulti(textContent) }),
-      description && (index.h("div", { class: "content-description" }, index.h("span", { innerHTML: index$1.translateMulti(description) })))
-    ]) : (index.h("span", { innerHTML: index$1.translateMulti(textContent) })));
+      index.h("div", { innerHTML: overlays.translateMulti(textContent) }),
+      description && (index.h("div", { class: "content-description" }, index.h("span", { innerHTML: overlays.translateMulti(description) })))
+    ]) : (index.h("span", { innerHTML: overlays.translateMulti(textContent) })));
   }
   renderRightActions(item) {
     const { subMenu, isToggle, selectedFn, selected, handler, actionableIcon, actionableIcons } = item;
@@ -159,7 +160,7 @@ const YooContextMenuDialogComponent = class {
             disabled: item.disabled,
             selected: (this.multipleSelection && this.selectedItems[itemIndex]) || item.selected,
             'is-toggle': item.isToggle,
-            'actionable-icon': !index$1.isNullOrUndefined(item.actionableIcon)
+            'actionable-icon': !overlays.isNullOrUndefined(item.actionableIcon)
           }, style: { color: item.cssClass || 'text-color' }, onMouseOver: (ev) => this.onItemHovered(ev), onClick: (ev) => this.onItemClick(ev, item, itemIndex) }, this.renderItemContent(item)),
         (item.hasDivider || item.separator) && index.h("hr", null)
       ];
@@ -169,7 +170,7 @@ const YooContextMenuDialogComponent = class {
     return (_a = this.contentButtons) === null || _a === void 0 ? void 0 : _a.map((item, itemIndex) => item && this.renderItem(item, itemIndex));
   }
   render() {
-    return (index.h(index.Host, { class: { ...commonHelpers.getAppContext(this.host) }, onClick: () => index$1.closeModal(null) }, this.dialogTitle && this.renderTitle(this.dialogTitle), index.h("section", { class: { 'content': true, [this.sideClass]: true } }, this.cursorPosition !== 'none' && index.h("div", { class: `arrow-cursor cursor_${this.cursorPosition}` }), index.h("ul", null, this.renderContentButtons()))));
+    return (index.h(index.Host, { class: { ...commonHelpers.getAppContext(this.host) }, onClick: () => overlays.closeModal(null) }, this.dialogTitle && this.renderTitle(this.dialogTitle), index.h("section", { class: { 'content': true, [this.sideClass]: true } }, this.cursorPosition !== 'none' && index.h("div", { class: `arrow-cursor cursor_${this.cursorPosition}` }), index.h("ul", null, this.renderContentButtons()))));
   }
   get host() { return index.getElement(this); }
 };

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

@@ -2,12 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
-const commonHelpers = require('./common-helpers-6970c46c.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
+const commonHelpers = require('./common-helpers-a4efe957.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const contextMenuCss = ":host{position:relative;display:block}:host .dropdown-toggle ::slotted(*){cursor:pointer}:host(.side-menu.flex) span{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-left:var(--spacing-16)}:host(.side-menu.flex) yoo-icon{margin-left:calc(var(--spacing-08) * -1)}:host(.flex) span{display:-ms-flexbox;display:flex}";
 
@@ -35,7 +36,7 @@ const YooContextMenuComponent = class {
     this.cursorPosition = 'none';
     this.onClick = (event) => {
       if (!this.hoverMode && !this.disabled) {
-        index$1.showContextMenu(event, this.baseContextMenuProps);
+        overlays.showContextMenu(event, this.baseContextMenuProps);
       }
     };
   }
@@ -46,7 +47,7 @@ const YooContextMenuComponent = class {
     return !!this.contextMenuDialogElement;
   }
   async closeMenuDialog() {
-    await index$1.closeMenuModal(this.contextMenuDialogElement);
+    await overlays.closeMenuModal(this.contextMenuDialogElement);
   }
   get baseContextMenuProps() {
     var _a;
@@ -64,7 +65,7 @@ const YooContextMenuComponent = class {
   }
   onMouseMove(event) {
     if (this.hoverMode && !this.disabled && !this.contextMenuDialogElement) {
-      index$1.showContextMenu(event, {
+      overlays.showContextMenu(event, {
         ...this.baseContextMenuProps,
         cursorPosition: this.cursorPosition,
         contextMenuClosed: { emit: () => this.hasContextMenuActive && this.closeMenuDialog() }
@@ -72,7 +73,7 @@ const YooContextMenuComponent = class {
     }
   }
   onMouseLeave(event) {
-    this.hoverMode && this.hasContextMenuActive && !index$1.isMouseInBoundaries(event, this.contextMenuDialogElement, 15, 0) && this.closeMenuDialog();
+    this.hoverMode && this.hasContextMenuActive && !overlays.isMouseInBoundaries(event, this.contextMenuDialogElement, 15, 0) && this.closeMenuDialog();
   }
   componentWillLoad() {
     if (this.multipleSelection) {

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

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const copyrightCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:var(--dark, #000000);font-size:var(--font-size-12, 0.75rem)}:host img{margin:0 var(--spacing-04, 0.25rem)}";
 
@@ -15,7 +16,7 @@ const YooCopyrightComponent = class {
     index.registerInstance(this, hostRef);
   }
   render() {
-    return index.h(index.Host, null, index$1.translate('POWEREDBY'), index.h("img", { src: "assets/logo/yoobic.svg", height: "12.8", alt: "YOOBIC Logo" }), "YOOBIC");
+    return index.h(index.Host, null, overlays.translate('POWEREDBY'), index.h("img", { src: "assets/logo/yoobic.svg", height: "12.8", alt: "YOOBIC Logo" }), "YOOBIC");
   }
 };
 YooCopyrightComponent.style = copyrightCss;

package/dist/cjs/yoo-count-down.cjs.entry.js

@@ -2,12 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
-const commonHelpers = require('./common-helpers-6970c46c.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
+const commonHelpers = require('./common-helpers-a4efe957.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const countDownCss = ":host{top:0;right:0;bottom:0;left:0}@-webkit-keyframes pulse{0%{-webkit-box-shadow:0 0 0 0 rgba(0, 0, 0, 0.1);box-shadow:0 0 0 0 rgba(0, 0, 0, 0.1)}100%{-webkit-box-shadow:0 10px 20px 0 rgba(0, 0, 0, 0.1);box-shadow:0 10px 20px 0 rgba(0, 0, 0, 0.1)}}@keyframes pulse{0%{-webkit-box-shadow:0 0 0 0 rgba(0, 0, 0, 0.1);box-shadow:0 0 0 0 rgba(0, 0, 0, 0.1)}100%{-webkit-box-shadow:0 10px 20px 0 rgba(0, 0, 0, 0.1);box-shadow:0 10px 20px 0 rgba(0, 0, 0, 0.1)}}:host .outer-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:100%}:host .outer-container .ripple{padding:var(--spacing-24, 1.5rem);background-color:var(--light, #ffffff);border-radius:100%;-webkit-animation:pulse 1s infinite;animation:pulse 1s infinite}:host .outer-container .getready{-ms-flex-align:center;align-items:center;color:var(--app-color, #5a30f4);font-weight:var(--font-weight-700, 700);font-size:calc(var(--font-size-18, 1.125rem) * 2);text-align:center}:host .outer-container .timer{width:9.375rem;height:9.375rem;color:var(--light, #ffffff);font-size:calc(var(--font-size-18, 1.125rem) * 4);line-height:9.375rem;text-align:center;background-color:var(--app-color, #5a30f4);border-radius:100%;-webkit-box-shadow:0 10px 20px 0 rgba(0, 0, 0, 0.1);box-shadow:0 10px 20px 0 rgba(0, 0, 0, 0.1);-webkit-animation:pulse 1s infinite;animation:pulse 1s infinite}:host(.web) .outer-container{position:absolute;right:0;left:0;background:var(--light, #ffffff)}";
 
@@ -32,7 +33,7 @@ const YooCountDownComponent = class {
     clearInterval(this.countdownInterval);
   }
   renderGetReady() {
-    return index.h("div", { class: "getready" }, index$1.translate('GETREADY'));
+    return index.h("div", { class: "getready" }, overlays.translate('GETREADY'));
   }
   renderTimer() {
     return (index.h("div", { class: "ripple" }, index.h("div", { class: "ripple" }, index.h("div", { class: "timer" }, this.start + 1))));

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

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const courseInfoCardCss = ":host{display:block;margin-bottom:var(--spacing-16, 1rem);padding:var(--spacing-08, 0.5rem);background-color:var(--light, #ffffff);border-radius:var(--border-radius-08, 0.5rem);-webkit-box-shadow:var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1))}:host .top-container{display:grid;grid-template-columns:4.0625rem auto;padding-bottom:var(--spacing-08, 0.5rem);-webkit-column-gap:var(--spacing-08, 0.5rem);-moz-column-gap:var(--spacing-08, 0.5rem);column-gap:var(--spacing-08, 0.5rem);border-bottom:solid var(--border-width-01, 0.0625rem) var(--stable-light, #f1f1f1)}:host .top-container yoo-img{width:4.0625rem;height:3.125rem;margin-right:var(--spacing-08, 0.5rem);--border-radius:var(--border-radius-04, 0.25rem)}:host .top-container .side-container h4{margin:0;margin-top:var(--spacing-02, 0.125rem)}:host .sub-container{display:grid;grid-auto-columns:minmax(0, 1fr);grid-auto-flow:column;margin-top:var(--spacing-08, 0.5rem)}:host .sub-container .kpi-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;justify-items:center;padding:0 var(--spacing-04, 0.25rem)}:host .sub-container .kpi-container .title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%;color:var(--stable, #adadad);font-size:var(--font-size-12, 0.75rem)}:host .sub-container .kpi-container .value{font-size:var(--font-size-14, 0.875rem)}:host .sub-container .kpi-container:last-of-type{padding-right:0}:host .sub-container .kpi-container:first-of-type{padding-left:0}:host .sub-container .kpi-container:not(:last-of-type){border-right:solid var(--border-width-01, 0.0625rem) var(--stable-light, #f1f1f1)}";
 
@@ -23,7 +24,7 @@ const YooCourseInfoCardComponent = class {
     };
     return Object.entries(this.learningPlan || {})
       .filter(([key]) => key in kpisToDisplay)
-      .map(([key, value]) => ({ title: index$1.translate(key.toUpperCase()), type: kpisToDisplay[key], value: Math.round(value) }));
+      .map(([key, value]) => ({ title: overlays.translate(key.toUpperCase()), type: kpisToDisplay[key], value: Math.round(value) }));
   }
   get courseDetails() {
     var _a, _b, _c;
@@ -38,7 +39,7 @@ const YooCourseInfoCardComponent = class {
     return { ...details, color: 'app-color-10' };
   }
   renderTopContainer() {
-    return index.h("div", { class: "top-container" }, index.h("yoo-img", { src: this.courseDetails.image }), index.h("div", { class: "side-container" }, index.h("yoo-tag", { color: this.tagDetails.color }, index.h("yoo-icon", { slot: "start", name: this.tagDetails.icon, size: "small" }), index.h("span", null, index$1.translate(this.tagDetails.title))), index.h("h4", null, index$1.translateMulti(this.courseDetails.title))));
+    return index.h("div", { class: "top-container" }, index.h("yoo-img", { src: this.courseDetails.image }), index.h("div", { class: "side-container" }, index.h("yoo-tag", { color: this.tagDetails.color }, index.h("yoo-icon", { slot: "start", name: this.tagDetails.icon, size: "small" }), index.h("span", null, overlays.translate(this.tagDetails.title))), index.h("h4", null, overlays.translateMulti(this.courseDetails.title))));
   }
   renderKpi(title, value, type) {
     return index.h("div", { class: "kpi-container" }, index.h("div", { class: "title" }, title), index.h("div", { class: "value" }, `${value}${type === 'percent' ? '%' : ''}`));

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

@@ -2,12 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
 const lodash = require('./lodash-597bda6d.js');
-const commonHelpers = require('./common-helpers-6970c46c.js');
+const commonHelpers = require('./common-helpers-a4efe957.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const courseSummaryCss = ":host{display:block}:host .course-info-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;border-top:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host .course-info-container .info-sub-container{padding:var(--spacing-08, 0.5rem) var(--spacing-16, 1rem)}:host .course-info-container .info-sub-container yoo-collapsible{background:transparent}:host .course-info-container .info-sub-container yoo-collapsible div[slot=title]{padding-left:0;color:var(--dark, #000000);font-weight:var(--font-weight-700, 700);font-size:var(--font-size-18, 1.125rem)}:host .course-info-container .info-sub-container yoo-collapsible .details-container{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--spacing-08, 0.5rem);-ms-flex-align:center;align-items:center;margin-bottom:var(--spacing-08, 0.5rem)}:host .course-info-container .info-sub-container .button-container{padding-top:var(--spacing-08, 0.5rem);border-top:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host .course-info-container yoo-background{display:block}:host .course-info-container yoo-background.hidden{display:none}:host .course-info-container .course-description{padding-bottom:var(--spacing-08, 0.5rem);font-size:var(--font-size-14, 0.875rem)}:host .course-info-container .progress-bar-container{display:-ms-flexbox;display:flex;padding-bottom:var(--spacing-08, 0.5rem);font-size:var(--font-size-14, 0.875rem)}:host .course-info-container .progress-bar-container yoo-progress-bar{margin-right:var(--spacing-04, 0.25rem);--progress-bar-color:var(--app-color, #5a30f4)}:host(.web:not(.force-mobile)) .full-width-view{width:35%}:host(.mobile) .course-info-container{border:none}:host(.mobile) .course-info-container .course-title{margin:0;font-weight:var(--font-weight-700, 700);font-size:var(--font-size-24, 1.5rem);line-height:normal}:host(.mobile) .course-info-container .course-info{margin-top:var(--spacing-08, 0.5rem)}:host(.mobile) .course-info-container .course-info yoo-tag{font-size:var(--font-size-16, 1rem)}:host(.mobile) .course-info-container .course-points{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:var(--spacing-08, 0.5rem)}:host(.mobile) .course-info-container .course-points yoo-tag{padding-right:var(--spacing-08, 0.5rem);padding-bottom:var(--spacing-08, 0.5rem)}:host(.mobile) .course-info-container .course-points .badges-container{display:-ms-flexbox;display:flex}:host(.mobile) .course-info-container .course-points .badges-container yoo-tag{padding-right:var(--spacing-08, 0.5rem)}:host(.mobile) .course-info-container .progress-bar-container{height:1.25rem;margin-top:var(--spacing-16, 1rem);padding:0}:host(.mobile) .course-info-container .course-description{margin-top:var(--spacing-16, 1rem);padding:0;color:var(--stable, #adadad);font-weight:var(--font-weight-400, 400);font-size:var(--font-size-16, 1rem)}:host(.web) yoo-progress-bar{--progress-value-font-size:var(--font-size-14, 0.875rem)}";
 
@@ -40,7 +41,7 @@ const YooCourseSummaryComponent = class {
     return (Math.round((_a = this.course) === null || _a === void 0 ? void 0 : _a.earnedPoints) || 0);
   }
   get image() {
-    return new index$1.Cloudinary(this.actualPlan.background._downloadURL || this.actualPlan.background);
+    return new overlays.Cloudinary(this.actualPlan.background._downloadURL || this.actualPlan.background);
   }
   get badges() {
     if (this.lessons && this.lessons.length > 0) {
@@ -70,21 +71,21 @@ const YooCourseSummaryComponent = class {
   }
   renderLessonsCount() {
     const lessonsCount = lodash.get(this.actualPlan, 'missiondescriptionsRef', []).length;
-    const pluralizedLabel = index$1.translate(lessonsCount > 1 ? 'LESSONS' : 'LESSON');
+    const pluralizedLabel = overlays.translate(lessonsCount > 1 ? 'LESSONS' : 'LESSON');
     const denominator = this.course && this.course.finishedLessonsCount ? this.course.finishedLessonsCount + '/' : '';
     return (index.h("yoo-tag", { noBackground: true, color: "stable", size: "small" }, this.renderIcon('lesson', 'stable'), denominator + lessonsCount + ' ' + pluralizedLabel));
   }
   renderCoursePoints() {
     const pointsDisplay = this.course && this.course.earnedPoints ? `${this.earnedPoints}/${this.availablePoints}` : this.availablePoints;
-    return (index.h("yoo-tag", { color: "app-color-10", size: index$1.isWeb(this.host) ? 'small' : 'medium' }, this.renderIcon('star', 'app-color'), pointsDisplay));
+    return (index.h("yoo-tag", { color: "app-color-10", size: overlays.isWeb(this.host) ? 'small' : 'medium' }, this.renderIcon('star', 'app-color'), pointsDisplay));
   }
   renderDueDate() {
     if (this.course && this.course.assignmentDate) {
-      const dueDate = index$1.getPlanDueDate(this.actualPlan, this.course.assignmentDate);
+      const dueDate = overlays.getPlanDueDate(this.actualPlan, this.course.assignmentDate);
       if (!dueDate) {
         return null;
       }
-      return (index.h("yoo-tag", { color: "danger-10", size: index$1.isWeb(this.host) ? 'small' : 'medium' }, this.renderIcon('calendar', 'danger'), index$1.formatDistanceFromNow(dueDate)));
+      return (index.h("yoo-tag", { color: "danger-10", size: overlays.isWeb(this.host) ? 'small' : 'medium' }, this.renderIcon('calendar', 'danger'), overlays.formatDistanceFromNow(dueDate)));
     }
     return null;
   }
@@ -93,32 +94,32 @@ const YooCourseSummaryComponent = class {
       return (index.h("div", { class: {
           'progress-bar-container': true,
           'full-width-view': this.fullWidthProgressBar
-        } }, (index$1.isWeb() ? this.renderWebProgressBar() :
+        } }, (overlays.isWeb() ? this.renderWebProgressBar() :
         index.h("yoo-progress-bar", { animated: this.animated, value: this.courseProgress }))));
     }
   }
   renderWebProgressBar() {
     const lessonsCount = lodash.get(this.actualPlan, 'missiondescriptionsRef', []).length;
-    const pluralizedLabel = index$1.translate(lessonsCount > 1 ? 'LESSONS' : 'LESSON');
+    const pluralizedLabel = overlays.translate(lessonsCount > 1 ? 'LESSONS' : 'LESSON');
     return [index.h("yoo-progress-bar", { metric: "step", animated: this.animated, maxValue: lessonsCount, value: this.course.finishedLessonsCount }), index.h("span", null, pluralizedLabel)];
   }
   renderCompetency() {
     var _a, _b, _c, _d, _e;
-    const COMPETENCY_SIZE_LIMIT = index$1.isWeb(this.host) ? 30 : 18;
+    const COMPETENCY_SIZE_LIMIT = overlays.isWeb(this.host) ? 30 : 18;
     if ((_a = this.actualPlan) === null || _a === void 0 ? void 0 : _a.competency) {
-      const title = index$1.translateMulti((_c = (_b = this.actualPlan) === null || _b === void 0 ? void 0 : _b.competency) === null || _c === void 0 ? void 0 : _c.title);
-      return (index.h("yoo-tag", { class: "competency", color: "stable-alt-80", size: index$1.isWeb(this.host) ? 'small' : 'medium' }, this.renderIcon((((_e = (_d = this.actualPlan) === null || _d === void 0 ? void 0 : _d.competency) === null || _e === void 0 ? void 0 : _e.icon) || 'medal'), 'dark'), title.length > COMPETENCY_SIZE_LIMIT ? (index.h("yoo-tooltip", { content: title }, index.h("yoo-truncate", { maxLength: COMPETENCY_SIZE_LIMIT, content: title }))) : title));
+      const title = overlays.translateMulti((_c = (_b = this.actualPlan) === null || _b === void 0 ? void 0 : _b.competency) === null || _c === void 0 ? void 0 : _c.title);
+      return (index.h("yoo-tag", { class: "competency", color: "stable-alt-80", size: overlays.isWeb(this.host) ? 'small' : 'medium' }, this.renderIcon((((_e = (_d = this.actualPlan) === null || _d === void 0 ? void 0 : _d.competency) === null || _e === void 0 ? void 0 : _e.icon) || 'medal'), 'dark'), title.length > COMPETENCY_SIZE_LIMIT ? (index.h("yoo-tooltip", { content: title }, index.h("yoo-truncate", { maxLength: COMPETENCY_SIZE_LIMIT, content: title }))) : title));
     }
   }
   renderDescription() {
     var _a, _b;
     if ((_a = this.actualPlan) === null || _a === void 0 ? void 0 : _a.description) {
-      return (index.h("div", { class: "course-description" }, index.h("yoo-truncate", { class: "app-color", showEllipsisButton: true, maxLength: 39, content: index$1.translateMulti((_b = this.actualPlan) === null || _b === void 0 ? void 0 : _b.description) })));
+      return (index.h("div", { class: "course-description" }, index.h("yoo-truncate", { class: "app-color", showEllipsisButton: true, maxLength: 39, content: overlays.translateMulti((_b = this.actualPlan) === null || _b === void 0 ? void 0 : _b.description) })));
     }
   }
   renderRatingButton() {
     if (this.ratingEnabled) {
-      return (index.h("div", { class: "button-container" }, index.h("yoo-button", { color: "app-color", onClick: () => this.onRatingButtonClicked() }, index.h("yoo-icon", { slot: "start", size: "small", name: "right-circle", color: "light" }), index$1.translate('RATEYOURCOURSE'))));
+      return (index.h("div", { class: "button-container" }, index.h("yoo-button", { color: "app-color", onClick: () => this.onRatingButtonClicked() }, index.h("yoo-icon", { slot: "start", size: "small", name: "right-circle", color: "light" }), overlays.translate('RATEYOURCOURSE'))));
     }
   }
   renderAvailableBadges() {
@@ -129,17 +130,17 @@ const YooCourseSummaryComponent = class {
   }
   renderMobile() {
     var _a;
-    return (index.h("div", { class: "course-info-container" }, index.h("h3", { class: "course-title" }, index$1.translateMulti((_a = this.actualPlan) === null || _a === void 0 ? void 0 : _a.title)), index.h("div", { class: "course-info" }, this.renderLessonsCount()), index.h("div", { class: "course-points" }, this.availablePoints > 0 && this.renderCoursePoints(), this.renderDueDate(), this.renderCompetency(), this.showAvailableBadges && this.badges > 0 && this.renderAvailableBadges()), this.renderDescription(), this.renderProgress()));
+    return (index.h("div", { class: "course-info-container" }, index.h("h3", { class: "course-title" }, overlays.translateMulti((_a = this.actualPlan) === null || _a === void 0 ? void 0 : _a.title)), index.h("div", { class: "course-info" }, this.renderLessonsCount()), index.h("div", { class: "course-points" }, this.availablePoints > 0 && this.renderCoursePoints(), this.renderDueDate(), this.renderCompetency(), this.showAvailableBadges && this.badges > 0 && this.renderAvailableBadges()), this.renderDescription(), this.renderProgress()));
   }
   renderWeb() {
     var _a;
-    return (index.h("div", { class: "course-info-container" }, !this.forceMobile && index.h("yoo-background", { class: { 'course-summary': true, 'hidden': this.isHidden }, forceMobile: this.forceMobile, imgUrl: this.getCourseImage(), imgHeight: this.imageHeight, imgWidth: this.imageWidth }), index.h("div", { class: "info-sub-container" }, index.h("yoo-collapsible", { class: "lesson-detail no-padding", slotHeader: true, iconSize: "medium", collapsed: false, onContentShown: ev => this.onCollapsibleToggled(ev.detail) }, index.h("div", { slot: "title" }, index$1.translateMulti((_a = this.actualPlan) === null || _a === void 0 ? void 0 : _a.title)), this.renderProgress(), index.h("div", { class: "details-container" }, this.availablePoints > 0 && this.renderCoursePoints(), this.renderCompetency(), this.renderDueDate(), this.badges > 0 && index.h("yoo-tooltip", { placement: "top", content: `<yoo-tag color="text-color-20" icon="lock" icon-only-color="light" size="small"></yoo-tag> ${this.badges} ${index$1.translate('BADGESAVAILABLE')}` }, index.h("yoo-icon", { name: "badge", size: "small" }))), this.renderDescription(), this.renderRatingButton()))));
+    return (index.h("div", { class: "course-info-container" }, !this.forceMobile && index.h("yoo-background", { class: { 'course-summary': true, 'hidden': this.isHidden }, forceMobile: this.forceMobile, imgUrl: this.getCourseImage(), imgHeight: this.imageHeight, imgWidth: this.imageWidth }), index.h("div", { class: "info-sub-container" }, index.h("yoo-collapsible", { class: "lesson-detail no-padding", slotHeader: true, iconSize: "medium", collapsed: false, onContentShown: ev => this.onCollapsibleToggled(ev.detail) }, index.h("div", { slot: "title" }, overlays.translateMulti((_a = this.actualPlan) === null || _a === void 0 ? void 0 : _a.title)), this.renderProgress(), index.h("div", { class: "details-container" }, this.availablePoints > 0 && this.renderCoursePoints(), this.renderCompetency(), this.renderDueDate(), this.badges > 0 && index.h("yoo-tooltip", { placement: "top", content: `<yoo-tag color="text-color-20" icon="lock" icon-only-color="light" size="small"></yoo-tag> ${this.badges} ${overlays.translate('BADGESAVAILABLE')}` }, index.h("yoo-icon", { name: "badge", size: "small" }))), this.renderDescription(), this.renderRatingButton()))));
   }
   render() {
     return (index.h(index.Host, { class: {
         ...commonHelpers.getAppContext(this.host),
         'force-mobile': this.forceMobile
-      } }, index$1.isWeb(this.host) ? this.renderWeb() : this.renderMobile()));
+      } }, overlays.isWeb(this.host) ? this.renderWeb() : this.renderMobile()));
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {

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

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const dashboardDetailCss = ":host .container{padding:0.5rem}:host .container .title{font-size:var(--font-size-18, 1.125rem)}:host .container .description html,:host .container .description body,:host .container .description div:not([class^=fr-]),:host .container .description span:not([class^=fr-]),:host .container .description img:not([class^=fr-]),:host .container .description applet,:host .container .description object,:host .container .description iframe,:host .container .description h1,:host .container .description h2,:host .container .description h3,:host .container .description h4,:host .container .description h5,:host .container .description h6,:host .container .description p,:host .container .description blockquote,:host .container .description pre,:host .container .description a,:host .container .description abbr,:host .container .description acronym,:host .container .description address,:host .container .description big,:host .container .description cite,:host .container .description code,:host .container .description del,:host .container .description dfn,:host .container .description em,:host .container .description font,:host .container .description ins,:host .container .description kbd,:host .container .description q,:host .container .description s,:host .container .description samp,:host .container .description small,:host .container .description strike,:host .container .description strong,:host .container .description sub,:host .container .description sup,:host .container .description tt,:host .container .description var,:host .container .description dl,:host .container .description dt,:host .container .description dd,:host .container .description ol,:host .container .description ul,:host .container .description li,:host .container .description fieldset,:host .container .description form,:host .container .description label,:host .container .description legend,:host .container .description table,:host .container .description caption,:host .container .description tbody,:host .container .description tfoot,:host .container .description thead,:host .container .description tr,:host .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 .container .date{color:var(--text-color, #807f83)}";
 
@@ -15,7 +16,7 @@ const YooDashboardDetailComponent = class {
     index.registerInstance(this, hostRef);
   }
   render() {
-    return index.h("div", { class: "container" }, index.h("div", { class: "title" }, index$1.translateMulti(this.dashboard.title)), index.h("div", { class: "description", innerHTML: index$1.translateMulti(this.dashboard.description || '') }), this.dashboard._lmt ? (index.h("div", { class: "date" }, index$1.translate('EDITEDON'), ": ", index$1.pipes.dateFormat.transform(this.dashboard._lmt, 'L'))) : null);
+    return index.h("div", { class: "container" }, index.h("div", { class: "title" }, overlays.translateMulti(this.dashboard.title)), index.h("div", { class: "description", innerHTML: overlays.translateMulti(this.dashboard.description || '') }), this.dashboard._lmt ? (index.h("div", { class: "date" }, overlays.translate('EDITEDON'), ": ", overlays.pipes.dateFormat.transform(this.dashboard._lmt, 'L'))) : null);
   }
 };
 YooDashboardDetailComponent.style = dashboardDetailCss;

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

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const YooDateComponent = class {
   constructor(hostRef) {
@@ -47,7 +48,7 @@ const YooDateComponent = class {
     }
   }
   getTime() {
-    return this.time >= 0 ? index$1.pipes.timer.transform(Math.round(this.time), this.timerModeType) : (this.timerModeType === 'timer' ? '00:00' : '00:00:00');
+    return this.time >= 0 ? overlays.pipes.timer.transform(Math.round(this.time), this.timerModeType) : (this.timerModeType === 'timer' ? '00:00' : '00:00:00');
   }
   startTimer() {
     if (this.timerMode) {
@@ -68,7 +69,7 @@ const YooDateComponent = class {
       return index.h("span", null, duration);
     }
     if (this.date) {
-      return this.timeAgo ? index$1.pipes.timeAgo.transform(this.date) : index$1.pipes.dateFormat.transform(this.date, this.format || 'L LT');
+      return this.timeAgo ? overlays.pipes.timeAgo.transform(this.date) : overlays.pipes.dateFormat.transform(this.date, this.format || 'L LT');
     }
   }
   render() {