@yoobic/yobi 8.2.2 → 8.3.0-2

package/dist/cjs/yoo-scratch-card-creator.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 scratchCardCreatorCss = ":host .container{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .container .title{font-weight:var(--font-weight-400, 400);font-size:var(--font-size-12, 0.75rem);text-transform:uppercase}:host .container yoo-form-radio{margin:var(--spacing-16, 1rem) 0}:host .container .content .title{margin-bottom:var(--spacing-16, 1rem)}:host .container .hidden-content{min-width:55%}:host .container .hidden-content .sub-title{margin:var(--spacing-08, 0.5rem) 0;color:var(--stable, #adadad);font-weight:var(--font-weight-400, 400);font-size:var(--font-size-12, 0.75rem)}";
 
@@ -72,7 +73,7 @@ const YooScratchCardCreatorComponent = class {
     return index.h("div", null, index.h("yoo-form-text-area", { value: this.inputValues.text, onInputChanged: (ev) => {
         this.inputValues.text = ev.detail;
         this.onDataChanged(ev);
-      } }), index.h("h4", { class: "sub-title" }, index$1.translate('BACKGROUNDCOLOR')), index.h("yoo-form-color-field", { value: this.inputValues.bgColor, allowOther: true, rteColors: true, onInputChanged: (ev) => {
+      } }), index.h("h4", { class: "sub-title" }, overlays.translate('BACKGROUNDCOLOR')), index.h("yoo-form-color-field", { value: this.inputValues.bgColor, allowOther: true, rteColors: true, onInputChanged: (ev) => {
         this.inputValues.bgColor = ev.detail;
         this.onDataChanged(ev);
       } }));
@@ -81,15 +82,15 @@ const YooScratchCardCreatorComponent = class {
     return (index.h("yoo-form-capture", { size: "medium", maxWidth: 400, maxHeight: 400, cropperOptions: { cropRatio: 1 }, allowLibrary: true, allowUnsplash: true, value: content ? this.mainValues.image : this.inputValues.image, onInputChanged: (ev) => { this.onCaptureUpdated(ev, content); } }));
   }
   renderRadio(options, value) {
-    return (index.h("yoo-form-radio", { flow: "column", options: options, size: "medium", value: value, onInputChanged: (event) => { this.onRadioOptionSelected(event); } }, options.map((option, index$2) => {
-      return index.h("span", { slot: `${index$2}` }, index$1.translate(option));
+    return (index.h("yoo-form-radio", { flow: "column", options: options, size: "medium", value: value, onInputChanged: (event) => { this.onRadioOptionSelected(event); } }, options.map((option, index$1) => {
+      return index.h("span", { slot: `${index$1}` }, overlays.translate(option));
     })));
   }
   renderContent() {
-    return index.h("div", { class: "content" }, index.h("h2", { class: "title" }, index$1.translate('CONTENT')), this.renderCapture(true));
+    return index.h("div", { class: "content" }, index.h("h2", { class: "title" }, overlays.translate('CONTENT')), this.renderCapture(true));
   }
   renderHiddenContent() {
-    return (index.h("div", { class: "hidden-content" }, index.h("h2", { class: "title" }, index$1.translate('HIDDENCONTENT')), this.renderRadio(['IMAGE', 'TEXT'], this.inputValues.mode), this.inputValues.mode === 'TEXT' ? this.renderTextField() : this.inputValues.mode === 'IMAGE' && this.renderCapture()));
+    return (index.h("div", { class: "hidden-content" }, index.h("h2", { class: "title" }, overlays.translate('HIDDENCONTENT')), this.renderRadio(['IMAGE', 'TEXT'], this.inputValues.mode), this.inputValues.mode === 'TEXT' ? this.renderTextField() : this.inputValues.mode === 'IMAGE' && this.renderCapture()));
   }
   render() {
     return index.h(index.Host, null, index.h("div", { class: "container" }, this.renderContent(), this.renderHiddenContent()));

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

@@ -2,14 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
-require('./index-43c6a809.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
+require('./index-3653a164.js');
 const annotationsHelpers = require('./annotations-helpers-6cf88388.js');
-const localForage = require('./localForage-f618f824.js');
+const overlays = require('./overlays-b6c94fc8.js');
+const localForage = require('./localForage-e52707b9.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const scratchCardCss = ":host{position:relative;display:block;width:100%;max-width:25rem;margin:0 auto;border-radius:var(--border-radius-08, 0.5rem)}:host canvas,:host .content-card{position:absolute;width:100%;height:100%;border-radius:inherit}:host canvas{z-index:2;display:block;visibility:visible;cursor:url(\"data:image/png;base64,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\") 30 30, auto;opacity:1;-webkit-transition:opacity 0.35s linear;transition:opacity 0.35s linear}:host canvas[fade-out]{opacity:0}:host .content-card>*{width:100%;height:100%;border-radius:inherit}:host .content-card .text-content{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;padding:var(--spacing-16, 1rem);overflow-y:scroll;word-break:break-word;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}:host .content-card .text-content::-webkit-scrollbar{width:var(--spacing-04, 0.25rem);height:var(--spacing-04, 0.25rem)}:host .content-card .text-content::-webkit-scrollbar-track{background-color:transparent;border-radius:var(--border-radius-04, 0.25rem)}:host .content-card .text-content::-webkit-scrollbar-thumb{background-color:transparent;border-radius:var(--border-radius-04, 0.25rem)}:host .content-card .text-content:not(.long){-ms-flex-align:center;align-items:center}:host yoo-loader{border-radius:var(--border-radius-08, 0.5rem)}:host yoo-button{position:absolute;right:var(--spacing-16, 1rem);bottom:var(--spacing-16, 1rem);z-index:1;-webkit-transform:scale(var(--scale, 0));transform:scale(var(--scale, 0));-webkit-transition:-webkit-transform 150ms ease-in-out;transition:-webkit-transform 150ms ease-in-out;transition:transform 150ms ease-in-out;transition:transform 150ms ease-in-out, -webkit-transform 150ms ease-in-out}:host yoo-button[visible]{--scale:1;z-index:2}:host:after{display:block;padding-bottom:100%;content:\"\"}";
 
@@ -24,7 +25,7 @@ const YooScratchCardComponent = class {
   async onValuesChanged() {
     var _a, _b;
     if ((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.content) === null || _b === void 0 ? void 0 : _b.image) {
-      this.data.content.image = index$1.getMedia(this.data.content.image);
+      this.data.content.image = overlays.getMedia(this.data.content.image);
     }
     this.canvasSrc = await this.getCanvasSrc();
     await this.initCanvas();
@@ -60,7 +61,7 @@ const YooScratchCardComponent = class {
   async componentWillLoad() {
     var _a, _b;
     if ((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.content) === null || _b === void 0 ? void 0 : _b.image) {
-      this.data.content.image = index$1.getMedia(this.data.content.image);
+      this.data.content.image = overlays.getMedia(this.data.content.image);
     }
     this.canvasSrc = await this.getCanvasSrc();
   }
@@ -70,7 +71,7 @@ const YooScratchCardComponent = class {
   }
   async getCanvasSrc() {
     var _a, _b;
-    return index$1.getMedia((await localForage.getFromOfflineStorage((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.canvas) === null || _b === void 0 ? void 0 : _b.image)), { fallback: index.getAssetPath('./assets/scratch-card/noisy-background.jpg'), forceCookieUrlParam: true });
+    return overlays.getMedia((await localForage.getFromOfflineStorage((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.canvas) === null || _b === void 0 ? void 0 : _b.image)), { fallback: index.getAssetPath('./assets/scratch-card/noisy-background.jpg'), forceCookieUrlParam: true });
   }
   async initCanvas() {
     if (this.canvasElement) {
@@ -134,7 +135,7 @@ const YooScratchCardComponent = class {
       const stopDraw = () => {
         this.isDrawing = false;
       };
-      if (index$1.isWeb(this.host)) {
+      if (overlays.isWeb(this.host)) {
         this.canvasElement.onmousedown = startDraw;
         this.canvasElement.onpointerdown = startDraw;
         this.canvasElement.onmousemove = draw;
@@ -181,7 +182,7 @@ const YooScratchCardComponent = class {
     }
   }
   renderText(text, bgColor) {
-    return this.isCanvasLoaded && (index.h("div", { class: { 'text-content': true, long: (text === null || text === void 0 ? void 0 : text.length) > 499 }, style: { background: bgColor, color: index$1.getContrastColor(bgColor) || 'dark' }, innerHTML: (index$1.translateMulti(text)) }));
+    return this.isCanvasLoaded && (index.h("div", { class: { 'text-content': true, long: (text === null || text === void 0 ? void 0 : text.length) > 499 }, style: { background: bgColor, color: overlays.getContrastColor(bgColor) || 'dark' }, innerHTML: (overlays.translateMulti(text)) }));
   }
   renderImage(image) {
     return [this.renderLoader(!this.isCanvasLoaded), this.isCanvasLoaded && index.h("yoo-img", { instant: true, src: image })];

package/dist/cjs/yoo-scroll-to-button.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 YooScrollToButtonComponent = class {
   constructor(hostRef) {

package/dist/cjs/yoo-section-list.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 sortable_esm = require('./sortable.esm-00e15691.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const sectionListCss = ":host yoo-truncate{--max-lines:2}:host .headers{display:-ms-flexbox;display:flex;padding:0 var(--spacing-40, 2.5rem)}:host .headers div:first-child{-ms-flex:5;flex:5}:host .headers div{-ms-flex:2.333;flex:2.333;padding-left:var(--spacing-08, 0.5rem);font-weight:var(--font-weight-700, 700);font-size:var(--font-size-16, 1rem)}:host .sections{padding-bottom:10rem}:host .sections .section{margin:var(--spacing-16, 1rem);background-color:var(--stable-light-40, rgba(241, 241, 241, 0.4));border-radius:var(--border-radius-04, 0.25rem)}:host .sections .section.hidden{display:none}:host .sections .section.sortable-drag .section-title div,:host .sections .section.sortable-drag .section-title yoo-icon,:host .sections .section.sortable-ghost .section-title div,:host .sections .section.sortable-ghost .section-title yoo-icon{opacity:0}:host .sections .section.sortable-drag .items,:host .sections .section.sortable-ghost .items{display:none}:host .sections .section.sortable-drag .section-title{background:var(--light, #ffffff);border:solid var(--border-width-02, 0.125rem) var(--app-color, #5a30f4);border-radius:var(--border-radius-04, 0.25rem);-webkit-box-shadow:var(--web-shadow, 0 0.3125rem 0.8125rem 0 rgba(40, 47, 54, 0.08));box-shadow:var(--web-shadow, 0 0.3125rem 0.8125rem 0 rgba(40, 47, 54, 0.08))}:host .sections .section.sortable-drag .section-title .title{opacity:1}:host .sections .section.sortable-ghost{cursor:-webkit-grabbing !important;cursor:grabbing !important}:host .sections .section.sortable-ghost .section-title{border:dashed var(--border-width-02, 0.125rem) var(--stable-alt, #d0d0d0);border-radius:var(--border-radius-04, 0.25rem)}:host .sections .section .section-title{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:var(--spacing-08, 0.5rem);font-size:var(--font-size-16, 1rem)}:host .sections .section .section-title .title{font-weight:bold}:host .sections .section .section-title .title,:host .sections .section .section-title .item-count{padding-left:0.5rem;font-size:var(--font-size-16, 1rem)}:host .sections .section .section-title .item-count{-ms-flex:1;flex:1;color:var(--stable, #adadad);white-space:nowrap}:host .sections .section .section-title .draggable{cursor:move}:host .sections .section .section-title .draggable yoo-icon{vertical-align:middle}:host .sections .section .section-title yoo-icon{padding:0 var(--spacing-08, 0.5rem)}:host .sections .section .section-title yoo-icon.section-dialog{vertical-align:middle}:host .sections .section .items{padding-bottom:var(--spacing-16, 1rem);overflow:hidden}:host .sections .section .items .item{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:var(--spacing-08, 0.5rem);overflow:hidden}:host .sections .section .items .item .draggable{padding:1rem;cursor:move}:host .sections .section .items .item .draggable yoo-icon{vertical-align:middle}:host .sections .section .items .item.hidden{display:none}:host .sections .section .items .item.selectable{padding-left:0}:host .sections .section .items .item.selectable.mousehover .checkbox,:host .sections .section .items .item.selectable .checkbox.visible{visibility:visible}:host .sections .section .items .item.selectable .checkbox{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:35px;visibility:hidden}:host .sections .section .items .item.sortable-drag .item-container{border:solid var(--border-width-02, 0.125rem) var(--app-color, #5a30f4);-webkit-box-shadow:var(--web-shadow, 0 0.3125rem 0.8125rem 0 rgba(40, 47, 54, 0.08));box-shadow:var(--web-shadow, 0 0.3125rem 0.8125rem 0 rgba(40, 47, 54, 0.08))}:host .sections .section .items .item.sortable-ghost{cursor:-webkit-grabbing;cursor:grabbing}:host .sections .section .items .item.sortable-ghost .item-container{background:var(--stable-light-40, rgba(241, 241, 241, 0.4));border:dashed var(--border-width-02, 0.125rem) var(--stable-alt, #d0d0d0);border-radius:var(--border-radius-04, 0.25rem)}:host .sections .section .items .item.sortable-ghost .item-container div{opacity:0}:host .sections .section .items .item.no-mousehover.mousehover .item-container{cursor:-webkit-grabbing;cursor:grabbing}:host .sections .section .items .item .checkbox{display:none;overflow:hidden}:host .sections .section .items .item .item-container{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;background-color:var(--light, #ffffff);border:solid var(--border-width-01, 0.0625rem) var(--stable-light, #f1f1f1);border-radius:var(--border-radius-08, 0.5rem)}:host .sections .section .items .item .item-container .title-container{-ms-flex:4;flex:4;padding:var(--spacing-16, 1rem);overflow:hidden}:host .sections .section .items .item .item-container .title-container .title{font-size:var(--font-size-18, 1.125rem)}:host .sections .section .items .item .item-container .title-container .description{overflow:hidden;color:var(--text-color, #807f83);font-size:var(--font-size-16, 1rem)}@supports (display: -webkit-box){:host .sections .section .items .item .item-container .title-container .description{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}}:host .sections .section .items .item .item-container .item-actions yoo-context-menu{padding:var(--spacing-16, 1rem)}:host .sections .section .items .item .item-container .item-actions .lesson-button{padding:var(--spacing-16, 1rem)}:host .sections .section .items .item .item-container .info-container{display:-ms-flexbox;display:flex;-ms-flex:7;flex:7}:host .sections .section .items .item .item-container .info-container .column{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center}:host .sections .section .items .item .item-container .info-container .column yoo-icon{padding-right:var(--spacing-04, 0.25rem)}:host .sections .section .items .item .item-container .info-container .column .value{font-size:var(--font-size-18, 1.125rem)}:host .sections .section .items .item.mousehover:not(.selectable):not(.sortable-drag):not(.sortable-ghost):not(.no-mousehover).sortable-chosen{cursor:-webkit-grab;cursor:grab}:host .sections .section .items .item.mousehover:not(.selectable):not(.sortable-drag):not(.sortable-ghost):not(.no-mousehover) .item-container{background-color:var(--app-color, #5a30f4);cursor:pointer}:host .sections .section .items .item.mousehover:not(.selectable):not(.sortable-drag):not(.sortable-ghost):not(.no-mousehover) .item-container .item-actions yoo-tooltip{margin-right:var(--spacing-04, 0.25rem)}:host .sections .section .items .item.mousehover:not(.selectable):not(.sortable-drag):not(.sortable-ghost):not(.no-mousehover) .item-container .item-actions yoo-tooltip .icon-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:var(--spacing-24, 1.5rem);height:var(--spacing-24, 1.5rem);border-radius:50%;-webkit-box-shadow:var(--web-shadow, 0 0.3125rem 0.8125rem 0 rgba(40, 47, 54, 0.08));box-shadow:var(--web-shadow, 0 0.3125rem 0.8125rem 0 rgba(40, 47, 54, 0.08))}:host .sections .section .items .item.mousehover:not(.selectable):not(.sortable-drag):not(.sortable-ghost):not(.no-mousehover) .item-container .item-actions yoo-tooltip:last-child{margin-right:var(--spacing-16, 1rem)}:host .sections .section:hover{cursor:pointer}:host .dialog{position:absolute;right:0;margin:0.375rem var(--spacing-08, 0.5rem) 0 0;overflow:hidden;background-color:var(--light, #ffffff);border-radius:0.25rem;-webkit-box-shadow:var(--web-shadow, 0 0.3125rem 0.8125rem 0 rgba(40, 47, 54, 0.08));box-shadow:var(--web-shadow, 0 0.3125rem 0.8125rem 0 rgba(40, 47, 54, 0.08))}:host .dialog.hidden{display:none}:host .dialog.not.hidden{display:block}:host .dialog .menu{margin:var(--spacing-08, 0.5rem) 0;padding-right:var(--spacing-24, 1.5rem);padding-left:1rem;font-size:var(--font-size-14, 0.875rem);list-style-type:none}:host .dialog .menu li{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .dialog .menu li yoo-icon{padding-right:var(--spacing-08, 0.5rem)}";
 
@@ -263,7 +264,7 @@ const YooSectionListComponent = class {
       const itemCountEl = el.querySelector('.item-count');
       if (itemCountEl) {
         const count = this.sections[index].items ? this.sections[index].items.length : 0;
-        itemCountEl.innerHTML = `${count} ${index$1.translate((_a = this.countSuffix) === null || _a === void 0 ? void 0 : _a.toUpperCase())}`;
+        itemCountEl.innerHTML = `${count} ${overlays.translate((_a = this.countSuffix) === null || _a === void 0 ? void 0 : _a.toUpperCase())}`;
       }
     });
   }
@@ -285,7 +286,7 @@ const YooSectionListComponent = class {
     if (!sectionEl.classList.contains('closed') || forceClosing) {
       // close
       try {
-        index$1.gsapTo(itemsEl, 0.2, { height: 0, paddingBottom: 0 });
+        overlays.gsapTo(itemsEl, 0.2, { height: 0, paddingBottom: 0 });
       }
       catch (e) {
         itemsEl.style.display = 'none';
@@ -295,14 +296,14 @@ const YooSectionListComponent = class {
     else {
       // open
       try {
-        index$1.gsapSet(itemsEl, { height: 'auto', paddingBottom: '15px' });
+        overlays.gsapSet(itemsEl, { height: 'auto', paddingBottom: '15px' });
         // because gsap keeps absolute value in the element.height we need to reset `height` to `auto`
         // once the animation is finished
         const onComplete = () => {
           this.setSectionListAutoHeightDebounce();
           itemsEl.style.height = 'auto';
         };
-        index$1.gsapFrom(itemsEl, 0.2, { height: 0, onComplete });
+        overlays.gsapFrom(itemsEl, 0.2, { height: 0, onComplete });
       }
       catch (e) {
         itemsEl.style.display = 'block';
@@ -373,7 +374,7 @@ const YooSectionListComponent = class {
   onSectionRename() {
     if (this.selectedDialogSection) {
       const renamedSection = lodash.clone(this.selectedDialogSection);
-      index$1.showRename(index$1.translate('RENAME'), '', this.selectedDialogSection.translatedTitle)
+      overlays.showRename(overlays.translate('RENAME'), '', this.selectedDialogSection.translatedTitle)
         .then((ret) => {
         if (ret && ret !== renamedSection.translatedTitle) {
           this.sectionRenamed.emit({ ...(lodash.omit(renamedSection, 'translatedTitle')), translatedTitle: ret });
@@ -382,7 +383,7 @@ const YooSectionListComponent = class {
     }
   }
   renderHeaders() {
-    return (index.h("div", { class: "headers" }, this.headers.map((header) => index.h("div", null, index$1.translate(header))), index.h("div", { class: "actions" })));
+    return (index.h("div", { class: "headers" }, this.headers.map((header) => index.h("div", null, overlays.translate(header))), index.h("div", { class: "actions" })));
   }
   renderDefaultActionOrToggle(section) {
     if (this.actions.length === 0) {
@@ -410,7 +411,7 @@ const YooSectionListComponent = class {
       section: true,
       sortable: section.isSortable !== false
     };
-    return (index.h("div", { class: classList, ref: (el) => section.el = el }, index.h("div", { class: "section-title" }, this.icon && index.h("div", { class: "icon" }, index.h("yoo-icon", { name: this.icon, size: "medium", color: "text-color" })), index.h("div", { class: "title" }, section.translatedTitle || index$1.translateMulti(section.title)), index.h("div", { class: "item-count" }, `${items.length} ${index$1.translate((_a = this.countSuffix) === null || _a === void 0 ? void 0 : _a.toUpperCase())}`), !this.disableSortable && !this.isReadonly && section.isSortable !== false && index.h("div", { class: "draggable" }, index.h("yoo-icon", { name: "draggable", color: "text-color", size: "medium" })), section.hasActions !== false && this.renderDefaultActionOrToggle(section), index.h("yoo-icon", { size: "small", class: "expand", name: "arrow-up", color: "text-color", onClick: () => this.toggleExpandSectionItems(section) })), index.h("div", { class: "items" }, items.map((item) => this.renderSectionItem(item)))));
+    return (index.h("div", { class: classList, ref: (el) => section.el = el }, index.h("div", { class: "section-title" }, this.icon && index.h("div", { class: "icon" }, index.h("yoo-icon", { name: this.icon, size: "medium", color: "text-color" })), index.h("div", { class: "title" }, section.translatedTitle || overlays.translateMulti(section.title)), index.h("div", { class: "item-count" }, `${items.length} ${overlays.translate((_a = this.countSuffix) === null || _a === void 0 ? void 0 : _a.toUpperCase())}`), !this.disableSortable && !this.isReadonly && section.isSortable !== false && index.h("div", { class: "draggable" }, index.h("yoo-icon", { name: "draggable", color: "text-color", size: "medium" })), section.hasActions !== false && this.renderDefaultActionOrToggle(section), index.h("yoo-icon", { size: "small", class: "expand", name: "arrow-up", color: "text-color", onClick: () => this.toggleExpandSectionItems(section) })), index.h("div", { class: "items" }, items.map((item) => this.renderSectionItem(item)))));
   }
   getItemMouseEnterAction() {
     return function () {
@@ -432,12 +433,12 @@ const YooSectionListComponent = class {
   }
   renderSectionItem(item) {
     let checkboxRef;
-    const title = index$1.getTranslatedAttribute(this.translations, item.title, this.baseLanguage || index$1.getCurrentLanguage(), 'title').value || index$1.translateMulti(item.title);
-    const text = index$1.getTranslatedAttribute(this.translations, item.text, this.baseLanguage || index$1.getCurrentLanguage(), 'text').value || index$1.translateMulti(item.text);
+    const title = overlays.getTranslatedAttribute(this.translations, item.title, this.baseLanguage || overlays.getCurrentLanguage(), 'title').value || overlays.translateMulti(item.title);
+    const text = overlays.getTranslatedAttribute(this.translations, item.text, this.baseLanguage || overlays.getCurrentLanguage(), 'text').value || overlays.translateMulti(item.text);
     return (index.h("div", { class: "item selectable", onMouseEnter: this.getItemMouseEnterAction(), onMouseLeave: this.getItemMouseLeaveAction() }, index.h("div", { class: "checkbox", ref: (el) => checkboxRef = el }, !this.disableBatchActions && this.isOwner && item.isSelectable !== false && index.h("yoo-form-checkbox", { onInputChanged: (ev) => this.onCheckboxClicked(ev, item, checkboxRef) })), index.h("div", { class: "item-container", onClick: () => this.itemClicked.emit(item) }, index.h("div", { class: "title-container" }, item.user && index.h("yoo-avatars", { layout: "list", users: [item.user], size: "small" }), item.title && index.h("div", { class: "title", innerHTML: title }), item.text && index.h("div", { class: "description", innerHTML: text })), index.h("div", { class: "info-container" }, item.columns && item.columns.map((column) => this.renderSectionItemColumn(column))), !this.disableSortable && !this.isReadonly && index.h("div", { class: "draggable" }, index.h("yoo-icon", { name: "draggable", color: "text-color", size: "medium" })), !this.isOwner && (this.isPublisher || this.isViewer) && this.countSuffix === 'lessons' ? this.renderViewerPublisherActions() : this.renderItemActions(item))));
   }
   renderSectionItemColumn(column) {
-    return (index.h("div", { class: "column" }, column.icon && index.h("yoo-icon", { name: column.icon, size: "small" }), index.h("div", { class: "value" }, index$1.translate(column.value))));
+    return (index.h("div", { class: "column" }, column.icon && index.h("yoo-icon", { name: column.icon, size: "small" }), index.h("div", { class: "value" }, overlays.translate(column.value))));
   }
   renderViewerPublisherActions() {
     return (index.h("div", { class: "item-actions" }, index.h("yoo-button", { class: "lesson-button", size: "medium" }, index.h("yoo-icon", { size: "small", name: this.getIconName() }))));

package/dist/cjs/yoo-segmented-control.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');
+const index$1 = 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 segmentedControlCss = ":host{position:relative;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;width:100%;background:var(--stable-light, #f1f1f1);border-radius:var(--border-radius-08, 0.5rem)}:host .segment-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;margin:var(--spacing-02, 0.125rem) 0}:host .segment-container .segment-content{z-index:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;padding:var(--spacing-04, 0.25rem)}:host .segment-container .segment-content h3{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;margin:0;padding-left:var(--spacing-04, 0.25rem);color:var(--text-color, #807f83);font-weight:var(--font-weight-400, 400);font-size:var(--font-size-12, 0.75rem);text-align:center}:host .segment-container .segment-content input{position:fixed;opacity:0;pointer-events:none}:host .segment-container .separator{height:60%;border-left:solid var(--border-width-02, 0.125rem) var(--dark-10, rgba(0, 0, 0, 0.1));visibility:visible}:host .segment-container .separator.active{visibility:hidden}:host .segment-container:first-of-type{margin-left:var(--spacing-02, 0.125rem)}:host .segment-container:last-of-type{margin-right:var(--spacing-02, 0.125rem)}:host .segment-container:last-of-type .separator{display:none}:host .segment-container.active h3{color:var(--light, #ffffff)}:host .segment-container:not(.active){cursor:pointer}:host .segment-container ::slotted(*){position:absolute}:host([size=small]){height:1.75rem}:host([size=medium]),:host([size=large]){height:2rem}:host([size=medium]) yoo-icon+yoo-truncated-line,:host([size=small]) yoo-icon+yoo-truncated-line{width:calc(100% - (var(--icon-size-01, 1rem) + var(--spacing-04, 0.25rem)))}:host([size=large]) .segment-container h3{font-size:var(--font-size-14, 0.875rem)}:host([size=large]) .segment-container yoo-icon+yoo-truncated-line{width:calc(100% - (var(--icon-size-02, 1.5rem) + var(--spacing-04, 0.25rem)))}:host([animated]) .segment-content h3{-webkit-transition:color 0.3s ease-in-out;transition:color 0.3s ease-in-out}:host([animated]) .active-background{-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out}.active-background{position:absolute;height:87%;margin:var(--spacing-02, 0.125rem) 0;background:var(--app-color, #5a30f4);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))}";
 
@@ -56,8 +57,8 @@ const YooSegmentedControlComponent = class {
       }
     });
   }
-  renderSegment(value, index$2) {
-    return (index.h("div", { class: "segment-content" }, index.h("input", { checked: this.selectedIndex === index$2, name: `${index$2}`, type: "radio", value: index$2 }), value.icon && index.h("yoo-icon", { size: this.size === 'large' ? 'medium' : this.size === 'medium' ? 'small' : this.size, name: value.icon, color: index$2 === this.selectedIndex ? 'light' : 'stable' }), value.label && index.h("yoo-truncated-line", null, index.h("h3", null, index$1.translate(value.label)))));
+  renderSegment(value, index$1) {
+    return (index.h("div", { class: "segment-content" }, index.h("input", { checked: this.selectedIndex === index$1, name: `${index$1}`, type: "radio", value: index$1 }), value.icon && index.h("yoo-icon", { size: this.size === 'large' ? 'medium' : this.size === 'medium' ? 'small' : this.size, name: value.icon, color: index$1 === this.selectedIndex ? 'light' : 'stable' }), value.label && index.h("yoo-truncated-line", null, index.h("h3", null, overlays.translate(value.label)))));
   }
   render() {
     return index.h(index.Host, { style: { maxWidth: this.maxWidth ? this.maxWidth + 'px' : null } }, this.renderSegments(), index.h("span", { ref: el => this.activeBackgroundEl = el, class: "active-background" }));

package/dist/cjs/yoo-side-menu-tree.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 sideMenuTreeCss = ":host{--spacing-bottom:var(--spacing-48, 3rem)}:host .outer-container{padding-bottom:var(--spacing-bottom)}:host .outer-container yoo-header{padding-bottom:var(--spacing-16, 1rem);font-weight:bold;font-size:var(--font-size-16, 1rem)}:host .outer-container .sub-item{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding-top:var(--spacing-04, 0.25rem);padding-bottom:var(--spacing-04, 0.25rem);cursor:pointer}:host .outer-container .sub-item .title{padding-left:var(--spacing-04, 0.25rem);font-size:var(--font-size-14, 0.875rem);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .outer-container .sub-item yoo-icon.hide{opacity:0}:host .outer-container .sub-item yoo-icon,:host .outer-container .sub-item yoo-avatar{padding-right:var(--spacing-04, 0.25rem)}:host .outer-container .sub-item yoo-badge{margin-left:auto}:host .outer-container .bottom-action{display:-ms-flexbox;display:flex;padding-top:var(--spacing-08, 0.5rem);color:var(--stable, #adadad);font-size:var(--font-size-14, 0.875rem);cursor:pointer}:host(.calendars) yoo-header{font-weight:var(--font-weight-400, 400)}";
 
@@ -70,10 +71,10 @@ const YooSideMenuTreeComponent = class {
       }, onClick: () => this.onSubItemClicked(index$1) }, item.icon && index.h("yoo-icon", { class: { hide: hide && this.useIconAsSelection }, size: item.icon.size, color: item.icon.color, name: item.icon.name }), item.avatar && index.h("yoo-avatar", { imgSrc: item.avatar.imgSrc, size: item.avatar.size, iconText: item.avatar.iconText }), item.text && index.h("span", { class: "title" }, item.text), !this.useIconAsSelection && index.h("yoo-icon", { name: "tick", color: "app-color", class: { hide }, size: "small" }), item.badge && index.h("yoo-badge", { size: badgeSize, text: item.badge.text })));
   }
   renderBottomAction() {
-    return (index.h("div", { class: "bottom-action", onClick: () => this.onBottomActionClicked() }, this.contentExpanded ? index.h("span", null, index$1.translate('YOOBICSEEALL')) : index.h("span", null, index$1.translate('YOOBICMORE')), index.h("yoo-icon", { name: "arrow-down", color: "stable" })));
+    return (index.h("div", { class: "bottom-action", onClick: () => this.onBottomActionClicked() }, this.contentExpanded ? index.h("span", null, overlays.translate('YOOBICSEEALL')) : index.h("span", null, overlays.translate('YOOBICMORE')), index.h("yoo-icon", { name: "arrow-down", color: "stable" })));
   }
   renderTitle(header) {
-    return (index.h("yoo-header", { class: "secondary no-border" }, index.h("yoo-truncated-line", { content: index$1.translate(header), class: "align-left" })));
+    return (index.h("yoo-header", { class: "secondary no-border" }, index.h("yoo-truncated-line", { content: overlays.translate(header), class: "align-left" })));
   }
   render() {
     const subItems = (this.subItems || []).filter((item) => { var _a; return !(!item || ((_a = item === null || item === void 0 ? void 0 : item.badge) === null || _a === void 0 ? void 0 : _a.text) === '0'); });

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

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
 const lodash = require('./lodash-597bda6d.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const sideMenuCss = ".accent{color:var(--accent, #276ef1);fill:var(--accent, #276ef1)}.app-color{color:var(--app-color, #5a30f4);fill:var(--app-color, #5a30f4)}.danger{color:var(--danger, #d44333);fill:var(--danger, #d44333)}.dark{color:var(--dark, #000000);fill:var(--dark, #000000)}.energized{color:var(--energized, #ffc043);fill:var(--energized, #ffc043)}.info{color:var(--info, #d84c96);fill:var(--info, #d84c96)}.light{color:var(--light, #ffffff);fill:var(--light, #ffffff)}.stable{color:var(--stable, #adadad);fill:var(--stable, #adadad)}.stable-alt{color:var(--stable-alt, #d0d0d0);fill:var(--stable-alt, #d0d0d0)}.stable-light{color:var(--stable-light, #f1f1f1);fill:var(--stable-light, #f1f1f1)}.stable-ultralight{color:var(--stable-ultralight, #fafafa);fill:var(--stable-ultralight, #fafafa)}.success{color:var(--success, #3aa76d);fill:var(--success, #3aa76d)}.text-color{color:var(--text-color, #807f83);fill:var(--text-color, #807f83)}.warning{color:var(--warning, #ed6e33);fill:var(--warning, #ed6e33)}.wood{color:var(--wood, #99644c);fill:var(--wood, #99644c)}:host{--menu-width:15rem;position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:var(--menu-width);height:100%;background:var(--stable-ultralight-80, rgba(250, 250, 250, 0.8));border-right:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);-webkit-transition:0.3s;transition:0.3s}:host .scrolling-container{position:initial;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:justify;justify-content:space-between;width:100%}:host .divider{height:0.0625rem;margin:var(--spacing-08, 0.5rem) 0;background-color:var(--stable-light, #f1f1f1)}:host .avatar-divider{width:2.25rem;margin:auto;background-color:transparent}:host .top-container{-ms-flex:1;flex:1}:host .top-container .header-items{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin:0 0 var(--spacing-16, 1rem) 0}:host .top-container .header-items yoo-tag{margin-left:var(--spacing-08, 0.5rem)}:host .top-container yoo-form-input{margin:var(--spacing-16, 1rem) 0 var(--spacing-16, 1rem) 0}:host .top-container yoo-form-input.has-header{margin:var(--spacing-08, 0.5rem) 0 var(--spacing-16, 1rem) 0}:host .top-container yoo-form-input.hidden{display:none;opacity:0}:host .top-container .header-logo yoo-img{--logo-text-color:var(--dark, #000000);height:2.125rem}:host .top-container .header-logo:hover{cursor:pointer}:host .avatar-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;max-width:100%;height:2rem;margin-bottom:var(--spacing-08, 0.5rem);padding-left:var(--spacing-04, 0.25rem);border-radius:var(--border-radius-08, 0.5rem)}:host .avatar-container:hover{background:var(--app-color-10, rgba(90, 48, 244, 0.1));cursor:pointer}:host .avatar-container yoo-icon{margin-right:var(--spacing-04, 0.25rem);margin-left:var(--spacing-08, 0.5rem)}:host .avatar-container .profile-avatar-and-name{display:-ms-flexbox;display:flex;width:calc(100% - (var(--icon-size-02, 1.5rem) + var(--spacing-08, 0.5rem)))}:host .avatar-container .profile-avatar-and-name .user-name{width:calc(100% - (var(--icon-size-02, 1.5rem) + var(--spacing-08, 0.5rem)));margin-left:var(--spacing-08, 0.5rem);color:var(--dark, #000000)}:host yoo-accordion{--accordion-background:transparent;--title-font-size:var(--font-size-16, 1rem);--title-font-weight:var(--font-weight-400, 400);--title-font-color:var(--dark, #000000);--title-icon-color:var(--text-color, #807f83);--right-icon-color:var(--stable, #adadad);--hover-background:var(--app-color-10, rgba(90, 48, 244, 0.1));--selected-background:var(--app-color-10, rgba(90, 48, 244, 0.1));--selected-color:var(--app-color, #5a30f4)}:host .icon-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;min-height:2.25rem}:host .top-list{padding-bottom:var(--spacing-04, 0.25rem)}:host .top-list .menu-icon{margin-bottom:0 !important}:host .bottom-container,:host .top-container{margin:var(--spacing-16, 1rem) var(--spacing-24, 1.5rem) var(--spacing-16, 1rem) var(--spacing-24, 1.5rem);-webkit-transition:0.3s;transition:0.3s}:host .bottom-container .icon-container,:host .top-container .icon-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;position:relative;width:2.25rem;height:2.25rem;margin:var(--spacing-02, 0.125rem) 0;border-radius:50%;cursor:pointer}:host .bottom-container .icon-container:hover,:host .top-container .icon-container:hover{background:var(--stable-light-60, rgba(241, 241, 241, 0.6))}:host .bottom-container .icon-container yoo-badge,:host .top-container .icon-container yoo-badge{position:absolute;top:1rem;right:auto;bottom:auto;left:-0.325rem}:host .bottom-container .icon-container yoo-badge.count,:host .top-container .icon-container yoo-badge.count{background-color:var(--light, #ffffff);border:solid var(--light, #ffffff) 0.1875rem;border-radius:50%;position:absolute;top:-0.5625rem;right:-0.6875rem;bottom:auto;left:auto}:host .bottom-container .icon-row,:host .top-container .icon-row{display:-ms-flexbox;display:flex}:host .bottom-container .icon-row .icon-container.toggle-icon,:host .top-container .icon-row .icon-container.toggle-icon{position:absolute;right:1.5rem}:host(.collapsed){width:4.5rem}:host(.collapsed) .bottom-container,:host(.collapsed) .top-container{margin:var(--spacing-08, 0.5rem) 0}:host(.collapsed) .top-container .header-logo{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:2.25rem;height:2.25rem;margin:var(--spacing-04, 0.25rem) 0}:host(.collapsed) .top-container .header-logo:hover{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:2.25rem;height:2.25rem;background:var(--stable-light-60, rgba(241, 241, 241, 0.6));border-radius:50%}:host(.collapsed) .top-container .header-logo yoo-img{width:1.5rem;height:1.5rem}:host(.hidden){width:0}:host(.custom-theme:not(.feed)){background:var(--app-color, #5a30f4);--dark:var(--light, #ffffff);--text-color:var(--light-40, rgba(255, 255, 255, 0.4))}:host(.custom-theme:not(.feed)) yoo-accordion{--divider-background:var(--light-10, rgba(255, 255, 255, 0.1));--hover-background:var(--stable-light-60, rgba(241, 241, 241, 0.6));--selected-background:var(--stable-light-60, rgba(241, 241, 241, 0.6))}:host(.custom-theme:not(.feed)) .avatar-container:hover{background-color:var(--stable-light-60, rgba(241, 241, 241, 0.6))}:host(.no-margin) .top-container{margin-top:0;margin-bottom:0}";
 
@@ -80,8 +81,8 @@ const YooSideMenuComponent = class {
     this.menuCollapsed.emit(this.isMenuCollapsed);
     // Dispath window event as toggling menu will caused
     // screen size changes without triggering resize event
-    if (index$1.isWeb(this.host)) {
-      index$1.dispatchCustomEvent('screenSizeWillChange', window);
+    if (overlays.isWeb(this.host)) {
+      overlays.dispatchCustomEvent('screenSizeWillChange', window);
     }
   }
   onLogoClicked() {
@@ -106,7 +107,7 @@ const YooSideMenuComponent = class {
     return (index.h("div", { class: "header-logo" }, index.h("yoo-img", { key: src, src: src, cloudinaryOptions: { pad: true }, onClick: () => this.onLogoClicked() })));
   }
   renderSearchInput() {
-    return (index.h("yoo-form-input", { ref: (el) => (this.searchInput = el), class: { menu: true, hidden: this.hideSearch, 'has-header': !!this.logoItem }, size: "medium", iconPrefix: "search", hideOptional: true, disabled: this.hideSearch, forceValueUpdate: true, debounce: 500, placeholder: index$1.translate('SEARCH'), onInputChanged: (ev) => {
+    return (index.h("yoo-form-input", { ref: (el) => (this.searchInput = el), class: { menu: true, hidden: this.hideSearch, 'has-header': !!this.logoItem }, size: "medium", iconPrefix: "search", hideOptional: true, disabled: this.hideSearch, forceValueUpdate: true, debounce: 500, placeholder: overlays.translate('SEARCH'), onInputChanged: (ev) => {
         this.searchText = ev.detail;
         this.onSearch();
       }, onInputFocused: () => this.onSearchInputFocused() }));
@@ -134,7 +135,7 @@ const YooSideMenuComponent = class {
       if (!isSubMenu && (this.selectedIndex || this.selectedIndex === 0) && entries[this.selectedIndex]) {
         entries[this.selectedIndex].selected = true;
       }
-      const isCustomTheme = index$1.getSession().isCustomTheme;
+      const isCustomTheme = overlays.getSession().isCustomTheme;
       return (index.h("yoo-accordion", { class: { 'side-menu': !isSubMenu, 'side-menu-sub': isSubMenu, 'custom-theme': isCustomTheme }, forceEntryUpdate: true, entries: entries, iconPairRight: ['arrow-down', 'arrow-up'], allowMultipleSelection: false, isSubMenu: isSubMenu, onAccordionSelected: (ev) => {
           if (!isSubMenu) {
             this.selectedIndex = ev.detail.selected ? ev.detail.index : undefined;
@@ -153,7 +154,7 @@ const YooSideMenuComponent = class {
   renderIconOnlyItems(items, addSearchIcon = false, bottomItems = false) {
     var _a, _b;
     if (addSearchIcon && !this.hideSearch) {
-      items = [{ icon: 'search', text: index$1.translate('SEARCH'), handler: () => this.search.emit() }, ...items];
+      items = [{ icon: 'search', text: overlays.translate('SEARCH'), handler: () => this.search.emit() }, ...items];
     }
     if ((items === null || items === void 0 ? void 0 : items.length) > 0 || ((_a = this.helpCenterOptions) === null || _a === void 0 ? void 0 : _a.length) > 0) {
       return (index.h("div", { class: this.isMenuCollapsed ? 'icon-list' : 'icon-row' }, items === null || items === void 0 ? void 0 :
@@ -166,7 +167,7 @@ const YooSideMenuComponent = class {
     var _a;
     const tooltipPlacement = !this.isMenuCollapsed && footer ? 'top' : 'right';
     const buttons = (_a = item.subMenu) === null || _a === void 0 ? void 0 : _a.filter((option) => (option.isVisible ? option.isVisible() : true));
-    const isCustomTheme = index$1.getSession().isCustomTheme;
+    const isCustomTheme = overlays.getSession().isCustomTheme;
     // const isNight = getSession().currentTheme === 'Night';
     const IconContainer = () => [
       index.h("div", { class: "icon-container", onClick: () => { var _a; return (_a = item.handler) === null || _a === void 0 ? void 0 : _a.call(item); } }, item.notif && !lodash.isNumber(item.notif) && index.h("yoo-badge", { shape: "dot", color: "danger" }), index.h("yoo-icon", { name: item.icon, color: item.selected && isCustomTheme ? 'light' : item.selected ? 'app-color' : 'text-color', size: "medium", class: item.icon }), item.notif && lodash.isNumber(item.notif) && index.h("yoo-badge", { class: { count: true, 'custom-theme': isCustomTheme }, color: "danger", text: `${item.notif > 9 ? 9 : item.notif}${item.notif > 9 ? '+' : ''}` })),
@@ -178,7 +179,7 @@ const YooSideMenuComponent = class {
       return (index.h("yoo-context-menu", { contentButtons: buttons, hoverMode: true, color: item.selected ? 'app-color' : 'text-color', placement: this.isMenuCollapsed ? 'right' : 'above', class: "side-menu flex menu-collapsed", cursorPosition: "top" }, index.h(IconContainer, null)));
     }
     else {
-      return (index.h("yoo-tooltip", { hoverable: true, placement: tooltipPlacement, content: index$1.translate(item.text) }, index.h(IconContainer, null)));
+      return (index.h("yoo-tooltip", { hoverable: true, placement: tooltipPlacement, content: overlays.translate(item.text) }, index.h(IconContainer, null)));
     }
   }
   renderAvatarContainer() {
@@ -198,10 +199,10 @@ const YooSideMenuComponent = class {
   }
   renderHelpIcon() {
     const IconContainer = () => (index.h("div", { class: "icon-container" }, index.h("yoo-icon", { name: "help", color: "text-color", size: "medium" })));
-    return this.isMenuCollapsed ? index.h(IconContainer, null) : (index.h("yoo-tooltip", { hoverable: true, placement: this.isMenuCollapsed ? 'right' : 'top', content: index$1.translate('YOOBICHELP') }, index.h(IconContainer, null)));
+    return this.isMenuCollapsed ? index.h(IconContainer, null) : (index.h("yoo-tooltip", { hoverable: true, placement: this.isMenuCollapsed ? 'right' : 'top', content: overlays.translate('YOOBICHELP') }, index.h(IconContainer, null)));
   }
   render() {
-    const isCustomTheme = index$1.getSession().isCustomTheme;
+    const isCustomTheme = overlays.getSession().isCustomTheme;
     return (index.h(index.Host, { class: { collapsed: this.isMenuCollapsed, 'custom-theme': isCustomTheme } }, index.h("yoo-ion-scroll", { class: "scrolling-container no-scrollbar" }, this.renderTopContainer(), index.h("slot", { name: "bottom" })), this.renderBottomContainer()));
   }
   get host() { return index.getElement(this); }