@yoobic/yobi 8.5.0-60 → 8.5.0-61

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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
-require('./index-9aadeb94.js');
-const overlays = require('./overlays-e5d2ff76.js');
+require('./index-6f92bccb.js');
+const index$1 = require('./index-0cfb67d1.js');
 require('./lodash-a9050d79.js');
 require('./index-a1bbe627.js');
 require('./_commonjsHelpers-94df2ea7.js');
@@ -71,7 +71,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" }, overlays.translate('BACKGROUNDCOLOR')), index.h("yoo-form-color-field", { value: this.inputValues.bgColor, allowOther: true, rteColors: true, onInputChanged: (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) => {
         this.inputValues.bgColor = ev.detail;
         this.onDataChanged(ev);
       } }));
@@ -80,15 +80,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$1) => {
-      return index.h("span", { slot: `${index$1}` }, overlays.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$2) => {
+      return index.h("span", { slot: `${index$2}` }, index$1.translate(option));
     })));
   }
   renderContent() {
-    return index.h("div", { class: "content" }, index.h("h2", { class: "title" }, overlays.translate('CONTENT')), this.renderCapture(true));
+    return index.h("div", { class: "content" }, index.h("h2", { class: "title" }, index$1.translate('CONTENT')), this.renderCapture(true));
   }
   renderHiddenContent() {
-    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()));
+    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()));
   }
   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

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
-require('./index-9aadeb94.js');
-require('./index-d126a9fa.js');
+require('./index-6f92bccb.js');
+require('./index-2a19b50c.js');
 const annotationsHelpers = require('./annotations-helpers-fb554cca.js');
-const overlays = require('./overlays-e5d2ff76.js');
-const localForage = require('./localForage-d0842cbe.js');
+const index$1 = require('./index-0cfb67d1.js');
+const localForage = require('./localForage-446da40f.js');
 require('./lodash-a9050d79.js');
 require('./index-a1bbe627.js');
 require('./_commonjsHelpers-94df2ea7.js');
@@ -26,7 +26,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 = overlays.getMedia(this.data.content.image);
+      this.data.content.image = index$1.getMedia(this.data.content.image);
     }
     this.canvasSrc = await this.getCanvasSrc();
     await this.initCanvas();
@@ -63,7 +63,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 = overlays.getMedia(this.data.content.image);
+      this.data.content.image = index$1.getMedia(this.data.content.image);
     }
     this.canvasSrc = await this.getCanvasSrc();
   }
@@ -73,7 +73,7 @@ const YooScratchCardComponent = class {
   }
   async getCanvasSrc() {
     var _a, _b;
-    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 });
+    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 });
   }
   async initCanvas() {
     if (this.canvasElement) {
@@ -141,7 +141,7 @@ const YooScratchCardComponent = class {
         this.isDrawing = false;
         this.blockMoves.emit(!this.shouldRevealImage);
       };
-      if (overlays.isWeb(this.host)) {
+      if (index$1.isWeb(this.host)) {
         this.canvasElement.onmousedown = startDraw;
         this.canvasElement.onpointerdown = startDraw;
         this.canvasElement.onmousemove = draw;
@@ -191,7 +191,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: overlays.getContrastColor(bgColor) || 'dark' }, innerHTML: (overlays.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: index$1.getContrastColor(bgColor) || 'dark' }, innerHTML: (index$1.translateMulti(text)) }));
   }
   renderImage(image) {
     return [this.renderLoader(!this.isCanvasLoaded), this.isCanvasLoaded && index.h("yoo-img", { instant: true, src: image })];

package/dist/cjs/yoo-section-list.cjs.entry.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
-require('./index-9aadeb94.js');
+require('./index-6f92bccb.js');
 const lodash = require('./lodash-a9050d79.js');
 const sortable_esm = require('./sortable.esm-00e15691.js');
-const overlays = require('./overlays-e5d2ff76.js');
+const index$1 = require('./index-0cfb67d1.js');
 require('./index-a1bbe627.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
@@ -264,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} ${overlays.translate((_a = this.countSuffix) === null || _a === void 0 ? void 0 : _a.toUpperCase())}`;
+        itemCountEl.innerHTML = `${count} ${index$1.translate((_a = this.countSuffix) === null || _a === void 0 ? void 0 : _a.toUpperCase())}`;
       }
     });
   }
@@ -286,7 +286,7 @@ const YooSectionListComponent = class {
     if (!sectionEl.classList.contains('closed') || forceClosing) {
       // close
       try {
-        overlays.gsapTo(itemsEl, 0.2, { height: 0, paddingBottom: 0 });
+        index$1.gsapTo(itemsEl, 0.2, { height: 0, paddingBottom: 0 });
       }
       catch (e) {
         itemsEl.style.display = 'none';
@@ -296,14 +296,14 @@ const YooSectionListComponent = class {
     else {
       // open
       try {
-        overlays.gsapSet(itemsEl, { height: 'auto', paddingBottom: '15px' });
+        index$1.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';
         };
-        overlays.gsapFrom(itemsEl, 0.2, { height: 0, onComplete });
+        index$1.gsapFrom(itemsEl, 0.2, { height: 0, onComplete });
       }
       catch (e) {
         itemsEl.style.display = 'block';
@@ -374,7 +374,7 @@ const YooSectionListComponent = class {
   onSectionRename() {
     if (this.selectedDialogSection) {
       const renamedSection = lodash.clone(this.selectedDialogSection);
-      overlays.showRename(overlays.translate('RENAME'), '', this.selectedDialogSection.translatedTitle)
+      index$1.showRename(index$1.translate('RENAME'), '', this.selectedDialogSection.translatedTitle)
         .then((ret) => {
         if (ret && ret !== renamedSection.translatedTitle) {
           this.sectionRenamed.emit({ ...(lodash.omit(renamedSection, 'translatedTitle')), translatedTitle: ret });
@@ -383,7 +383,7 @@ const YooSectionListComponent = class {
     }
   }
   renderHeaders() {
-    return (index.h("div", { class: "headers" }, this.headers.map((header) => index.h("div", null, overlays.translate(header))), index.h("div", { class: "actions" })));
+    return (index.h("div", { class: "headers" }, this.headers.map((header) => index.h("div", null, index$1.translate(header))), index.h("div", { class: "actions" })));
   }
   renderDefaultActionOrToggle(section) {
     if (this.actions.length === 0) {
@@ -411,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" }, overlays.getCurrentLanguage() === this.baseLanguage ? 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)))));
+    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" }, index$1.getCurrentLanguage() === this.baseLanguage ? 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)))));
   }
   getItemMouseEnterAction() {
     return function () {
@@ -433,12 +433,12 @@ const YooSectionListComponent = class {
   }
   renderSectionItem(item) {
     let checkboxRef;
-    const title = overlays.getTranslatedAttribute(this.translations, item.title, overlays.getCurrentLanguage() || this.baseLanguage, 'title').value || overlays.translateMulti(item.title);
-    const text = overlays.getTranslatedAttribute(this.translations, item.text, overlays.getCurrentLanguage() || this.baseLanguage, 'text').value || overlays.translateMulti(item.text);
+    const title = index$1.getTranslatedAttribute(this.translations, item.title, index$1.getCurrentLanguage() || this.baseLanguage, 'title').value || index$1.translateMulti(item.title);
+    const text = index$1.getTranslatedAttribute(this.translations, item.text, index$1.getCurrentLanguage() || this.baseLanguage, 'text').value || index$1.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" }, overlays.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" }, index$1.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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
-const index$1 = require('./index-9aadeb94.js');
-const overlays = require('./overlays-e5d2ff76.js');
+const index$1 = require('./index-6f92bccb.js');
+const index$2 = require('./index-0cfb67d1.js');
 require('./lodash-a9050d79.js');
 require('./index-a1bbe627.js');
 require('./_commonjsHelpers-94df2ea7.js');
@@ -36,7 +36,7 @@ const YooSegmentedControlComponent = class {
     var _a, _b;
     if (this.activeElement) {
       this.activeBackgroundEl.style.width = `${(_a = this.activeElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width}px`;
-      this.activeBackgroundEl.style[overlays.isRTL() ? 'marginRight' : 'marginLeft'] = `${((_b = this.activeElement) === null || _b === void 0 ? void 0 : _b.offsetWidth) * index}px`;
+      this.activeBackgroundEl.style[index$2.isRTL() ? 'marginRight' : 'marginLeft'] = `${((_b = this.activeElement) === null || _b === void 0 ? void 0 : _b.offsetWidth) * index}px`;
     }
   }
   onSegmentClick(ev, index) {
@@ -60,10 +60,10 @@ const YooSegmentedControlComponent = class {
     });
   }
   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)))));
+    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, index$2.translate(value.label)))));
   }
   render() {
-    return index.h(index.Host, { style: { maxWidth: this.maxWidth ? this.maxWidth + 'px' : null }, class: { rtl: overlays.isRTL() } }, this.renderSegments(), index.h("span", { ref: el => this.activeBackgroundEl = el, class: "active-background" }));
+    return index.h(index.Host, { style: { maxWidth: this.maxWidth ? this.maxWidth + 'px' : null }, class: { rtl: index$2.isRTL() } }, this.renderSegments(), index.h("span", { ref: el => this.activeBackgroundEl = el, class: "active-background" }));
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {

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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
-require('./index-9aadeb94.js');
-const overlays = require('./overlays-e5d2ff76.js');
+require('./index-6f92bccb.js');
+const index$1 = require('./index-0cfb67d1.js');
 require('./lodash-a9050d79.js');
 require('./index-a1bbe627.js');
 require('./_commonjsHelpers-94df2ea7.js');
@@ -71,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, overlays.translate('YOOBICSEEALL')) : index.h("span", null, overlays.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, index$1.translate('YOOBICSEEALL')) : index.h("span", null, index$1.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: overlays.translate(header), class: "align-left" })));
+    return (index.h("yoo-header", { class: "secondary no-border" }, index.h("yoo-truncated-line", { content: index$1.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

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
-require('./index-9aadeb94.js');
+require('./index-6f92bccb.js');
 const lodash = require('./lodash-a9050d79.js');
-const commonHelpers = require('./common-helpers-9f63a319.js');
-const overlays = require('./overlays-e5d2ff76.js');
+const commonHelpers = require('./common-helpers-44428bf7.js');
+const index$1 = require('./index-0cfb67d1.js');
 require('./index-a1bbe627.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
@@ -82,8 +82,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 (overlays.isWeb(this.host)) {
-      overlays.dispatchCustomEvent('screenSizeWillChange', window);
+    if (index$1.isWeb(this.host)) {
+      index$1.dispatchCustomEvent('screenSizeWillChange', window);
     }
   }
   onLogoClicked() {
@@ -108,7 +108,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: overlays.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: index$1.translate('SEARCH'), onInputChanged: (ev) => {
         this.searchText = ev.detail;
         this.onSearch();
       }, onInputFocused: () => this.onSearchInputFocused() }));
@@ -137,7 +137,7 @@ const YooSideMenuComponent = class {
       if (!isSubMenu && (this.selectedIndex || this.selectedIndex === 0) && entries[this.selectedIndex]) {
         entries[this.selectedIndex].selected = true;
       }
-      const isCustomTheme = overlays.getSession().isCustomTheme;
+      const isCustomTheme = index$1.getSession().isCustomTheme;
       return (index.h("yoo-accordion", { class: {
           'side-menu': !isSubMenu,
           'side-menu-sub': isSubMenu,
@@ -160,7 +160,7 @@ const YooSideMenuComponent = class {
   renderIconOnlyItems(items, addSearchIcon = false, bottomItems = false) {
     var _a, _b;
     if (addSearchIcon && !this.hideSearch) {
-      items = [{ icon: 'search', text: overlays.translate('SEARCH'), handler: () => this.search.emit() }, ...items];
+      items = [{ icon: 'search', text: index$1.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 :
@@ -173,7 +173,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 = overlays.getSession().isCustomTheme;
+    const isCustomTheme = index$1.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 ? '+' : ''}` })),
@@ -185,7 +185,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: overlays.translate(item.text) }, index.h(IconContainer, null)));
+      return (index.h("yoo-tooltip", { hoverable: true, placement: tooltipPlacement, content: index$1.translate(item.text) }, index.h(IconContainer, null)));
     }
   }
   renderAvatarContainer() {
@@ -205,10 +205,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: overlays.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: index$1.translate('YOOBICHELP') }, index.h(IconContainer, null)));
   }
   render() {
-    const isCustomTheme = overlays.getSession().isCustomTheme;
+    const isCustomTheme = index$1.getSession().isCustomTheme;
     return (index.h(index.Host, { class: { collapsed: this.isMenuCollapsed, 'custom-theme': isCustomTheme, ...commonHelpers.getAppContext(this.host) } }, 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); }