@yoobic/yobi 8.5.0-60 → 8.5.0-61

package/dist/cjs/yoo-kanban.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-6f92bccb.js');
 const lodash = require('./lodash-a9050d79.js');
 const sortable_esm = require('./sortable.esm-00e15691.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');
 
@@ -127,10 +127,10 @@ const YooKanbanComponent = class {
       const newVal = (_a = el.querySelectorAll('.item-container')) === null || _a === void 0 ? void 0 : _a.length;
       countEl.textContent = newVal === null || newVal === void 0 ? void 0 : newVal.toString();
       if (currVa > newVal) {
-        overlays.fadeFromBottom(countEl);
+        index$1.fadeFromBottom(countEl);
       }
       if (currVa < newVal) {
-        overlays.fadeFromTop(countEl);
+        index$1.fadeFromTop(countEl);
       }
     });
   }
@@ -163,35 +163,35 @@ const YooKanbanComponent = class {
   onColumnShowActionsMenu(ev, board, i) {
     const buttons = [
       {
-        text: overlays.translate('YOOBICEDIT'),
+        text: index$1.translate('YOOBICEDIT'),
         handler: () => this.columnsEdited.emit(board)
       },
       {
-        text: overlays.translate('DUPLICATE'),
+        text: index$1.translate('DUPLICATE'),
         handler: () => this.columnsDuplicated.emit(board)
       },
       {
-        text: overlays.translate('DELETE'),
+        text: index$1.translate('DELETE'),
         handler: () => this.columnsDeleted.emit(board)
       }
     ];
-    overlays.isWeb(this.host)
-      ? overlays.showContextMenu(ev, {
+    index$1.isWeb(this.host)
+      ? index$1.showContextMenu(ev, {
         multipleSelection: false,
         contentButtons: buttons,
         placement: 'below',
         hostElement: this.columnsMoreContainerEls[i]
       })
-      : overlays.showActionSheet(buttons);
+      : index$1.showActionSheet(buttons);
   }
   onCardShowActionsMenu(item, ev) {
     ev.stopPropagation();
-    if (item.userRef !== overlays.getSession().userId && !overlays.getAuthentication().isAdmin() && !overlays.getAuthentication().isRoleAdmin()) {
+    if (item.userRef !== index$1.getSession().userId && !index$1.getAuthentication().isAdmin() && !index$1.getAuthentication().isRoleAdmin()) {
       return;
     }
     const buttons = [
       {
-        text: overlays.translate('BACKLOG'),
+        text: index$1.translate('BACKLOG'),
         handler: () => this.cardArchived.emit(item)
       },
       // {
@@ -199,18 +199,18 @@ const YooKanbanComponent = class {
       //     handler: () => this.cardFinished.emit(item)
       // }
       {
-        text: overlays.translate('DELETE'),
+        text: index$1.translate('DELETE'),
         handler: () => this.cardDeleted.emit(item)
       }
     ];
-    overlays.isWeb(this.host)
-      ? overlays.showContextMenu(ev, {
+    index$1.isWeb(this.host)
+      ? index$1.showContextMenu(ev, {
         multipleSelection: false,
         contentButtons: buttons,
         placement: 'below',
         hostElement: ev.target
       })
-      : overlays.showActionSheet(buttons);
+      : index$1.showActionSheet(buttons);
   }
   renderItems(items) {
     var _a;
@@ -238,7 +238,7 @@ const YooKanbanComponent = class {
       else if (field.type === 'user') {
         const users = lodash.uniqBy(lodash.compact(this.items.map((d) => lodash.get(d, field.name + (this.suffix || '')))), (u) => u._id);
         this.columnsDefinition = users.map((u) => {
-          const retVal = { _id: u._id, title: overlays.getUserDisplayName(u), value: u, color: overlays.getCssColor('accent') };
+          const retVal = { _id: u._id, title: index$1.getUserDisplayName(u), value: u, color: index$1.getCssColor('accent') };
           return retVal;
         });
       }
@@ -246,7 +246,7 @@ const YooKanbanComponent = class {
     }
     return lodash.compact(this.columnsDefinition).map((board, i) => {
       var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-      const contrast = ((_a = board === null || board === void 0 ? void 0 : board.color) === null || _a === void 0 ? void 0 : _a.length) > 0 ? overlays.getContrastColor(board.color) : overlays.getCssColor('stable');
+      const contrast = ((_a = board === null || board === void 0 ? void 0 : board.color) === null || _a === void 0 ? void 0 : _a.length) > 0 ? index$1.getContrastColor(board.color) : index$1.getCssColor('stable');
       const style = {
         background: board === null || board === void 0 ? void 0 : board.color,
         color: contrast,
@@ -293,14 +293,14 @@ const YooKanbanComponent = class {
           }
         });
       }
-      return (board && (index.h("div", { class: "kanban-board" }, index.h("div", { class: "kanban-board-inner-container" }, index.h("div", { class: "header", style: style }, index.h("div", { class: "title" }, overlays.translate(board.title)), index.h("div", { class: "count" }, (items === null || items === void 0 ? void 0 : items.length) > 0 ? items.length.toLocaleString() : ''), !this.readonly && !(((_j = this.columnField) === null || _j === void 0 ? void 0 : _j.length) > 0) && (index.h("div", { class: "more-container", ref: (el) => this.columnsMoreContainerEls.push(el), onClick: (ev) => this.onColumnShowActionsMenu(ev, board, i) }, index.h("yoo-icon", { size: "small", class: "more", name: "more", color: "light" })))), index.h("div", { class: "content", style: style, ref: (el) => el && this.itemsContainerEl.push(el) }, this.renderItems(items)), !this.readonly && (index.h("div", { class: "footer", style: style, onClick: () => this.cardAdded.emit(board) }, index.h("yoo-icon", { size: "small", color: "stable", name: "plus" }), overlays.translate('ADDNEWCARD')))))));
+      return (board && (index.h("div", { class: "kanban-board" }, index.h("div", { class: "kanban-board-inner-container" }, index.h("div", { class: "header", style: style }, index.h("div", { class: "title" }, index$1.translate(board.title)), index.h("div", { class: "count" }, (items === null || items === void 0 ? void 0 : items.length) > 0 ? items.length.toLocaleString() : ''), !this.readonly && !(((_j = this.columnField) === null || _j === void 0 ? void 0 : _j.length) > 0) && (index.h("div", { class: "more-container", ref: (el) => this.columnsMoreContainerEls.push(el), onClick: (ev) => this.onColumnShowActionsMenu(ev, board, i) }, index.h("yoo-icon", { size: "small", class: "more", name: "more", color: "light" })))), index.h("div", { class: "content", style: style, ref: (el) => el && this.itemsContainerEl.push(el) }, this.renderItems(items)), !this.readonly && (index.h("div", { class: "footer", style: style, onClick: () => this.cardAdded.emit(board) }, index.h("yoo-icon", { size: "small", color: "stable", name: "plus" }), index$1.translate('ADDNEWCARD')))))));
     });
   }
   renderColumnAddPlaceholder() {
     return (index.h("div", { class: "kanban-board-placeholder", onClick: (ev) => {
         ev.stopPropagation();
         this.columnAdded.emit();
-      } }, index.h("yoo-icon", { name: "plus", color: "app-color", size: "small" }), overlays.translate('ADDNEWBOARD')));
+      } }, index.h("yoo-icon", { name: "plus", color: "app-color", size: "small" }), index$1.translate('ADDNEWBOARD')));
   }
   render() {
     return (index.h(index.Host, { class: { ...commonHelpers.getAppContext(this.host) } }, index.h("div", { class: "kanban-outer-container", ref: (el) => (this.boardContainerEl = el) }, this.renderColumns(), !this.readonly && !this.columnField && this.renderColumnAddPlaceholder())));

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

@@ -3,22 +3,22 @@
 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');
 
 const kpiCardCss = "svg:not(:root){overflow:hidden}:host{--grid-auto-flow:column;--value-align-items:initial;--value-direction:column;--value-font-size:var(--font-size-36, 2.25rem);--value-font-weight:var(--font-weight-700, 700);--value-justify-content:initial;--value-line-height:1.5;--value-margin:calc(var(--spacing-04, 0.25rem) * -1) 0 0;--value-separator:none;--value-title-color:var(--dark, #000000);--value-title-font-size:var(--font-size-14, 0.875rem);--variation-font-size:var(--font-size-14, 0.875rem);--card-background:var(--light, #ffffff);--title-color:var(--stable, #adadad);--title-font-size:var(--font-size-12, 0.75rem);--title-position:start;--title-font-weight:var(--font-weight-400, 400);--card-margin:var(--spacing-16, 1rem);--values-gap:var(--spacing-08, 0.5rem);display:block}:host .empty-state{padding:var(--spacing-16, 1rem)}:host .empty-state div{padding-top:var(--spacing-16, 1rem);text-align:center}:host .header{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:end}:host .header.title{-ms-flex-pack:justify;justify-content:space-between}:host .header.title .title{display:-ms-flexbox;display:flex;-ms-flex-pack:var(--title-position);justify-content:var(--title-position);width:100%;margin-bottom:var(--spacing-08, 0.5rem);color:var(--title-color);font-weight:var(--title-font-weight);font-size:var(--title-font-size)}:host .kpi-container{display:-ms-flexbox;display:flex;-ms-flex-direction:var(--value-direction);flex-direction:var(--value-direction);-ms-flex-align:var(--value-align-items);align-items:var(--value-align-items);-ms-flex-pack:var(--value-justify-content);justify-content:var(--value-justify-content);opacity:1}:host .kpi-container:not(:last-of-type){padding-right:var(--values-gap);border-right:var(--value-separator)}:host .kpi-container.hidden{padding-right:0;opacity:0}:host .kpi-number{margin:var(--value-margin);font-weight:var(--value-font-weight);font-size:var(--value-font-size);line-height:var(--value-line-height);text-align:center}:host .kpi-number span{display:-ms-flexbox;display:flex;-ms-flex-align:baseline;align-items:baseline;-ms-flex-pack:center;justify-content:center}:host .kpi-number span .time{font-size:calc(var(--value-font-size) / 2)}:host .kpi-title{color:var(--value-title-color);font-size:var(--value-title-font-size);text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .kpis{display:grid;grid-auto-flow:var(--grid-auto-flow);grid-template-columns:var(--grid-template-columns);gap:var(--values-gap)}:host .kpi-variation{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;margin:var(--value-margin);font-size:var(--variation-font-size)}:host .kpi-variation .no-variation{width:0.625rem;height:0.125rem;margin:var(--spacing-08, 0.5rem) 0;background:var(--stable-alt, #d0d0d0)}:host .kpi-variation.positive{color:var(--success, #3aa76d)}:host .kpi-variation.negative{color:var(--danger, #d44333)}:host .kpi-variation yoo-icon{margin-right:var(--spacing-04, 0.25rem)}:host(:not(.vertical)) .kpi-number{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(.vertical) .kpi-container{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:not(.content-only)){--card-padding:var(--spacing-08, 0.5rem) var(--spacing-16, 1rem) var(--spacing-16, 1rem)}:host(:not(.content-only)) .card{margin:var(--card-margin);padding:var(--card-padding);background-color:var(--card-background);border-radius:var(--border-radius-08, 0.5rem);-webkit-box-shadow:var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1))}";
 
-const EmptyState = ({ type }) => (index.h("div", { class: "empty-state" }, index.h("yoo-empty-state", { type: type }), index.h("div", null, overlays.translate('LISTEMPTY'))));
+const EmptyState = ({ type }) => (index.h("div", { class: "empty-state" }, index.h("yoo-empty-state", { type: type }), index.h("div", null, index$1.translate('LISTEMPTY'))));
 const Kpis = ({ data, title, help, onCardClick }) => {
-  return (index.h("div", { class: "card" }, index.h("div", { class: { 'header': true, 'title': !!title } }, !!title && index.h("div", { class: "title" }, overlays.translate(title)), !!(help === null || help === void 0 ? void 0 : help.length) &&
-    index.h("yoo-tooltip", { content: overlays.translate(help) }, index.h("yoo-icon", { color: "app-color", size: "small", name: "help" }))), index.h("div", { class: "kpis", onClick: onCardClick }, data.map(({ title, type, value, extraSymbol, variation, useVariation }, index$1) => {
+  return (index.h("div", { class: "card" }, index.h("div", { class: { 'header': true, 'title': !!title } }, !!title && index.h("div", { class: "title" }, index$1.translate(title)), !!(help === null || help === void 0 ? void 0 : help.length) &&
+    index.h("yoo-tooltip", { content: index$1.translate(help) }, index.h("yoo-icon", { color: "app-color", size: "small", name: "help" }))), index.h("div", { class: "kpis", onClick: onCardClick }, data.map(({ title, type, value, extraSymbol, variation, useVariation }, index$2) => {
     const positiveVariation = variation > 0;
     const iconName = ('big-arrow-' + (positiveVariation ? 'up' : 'down'));
     const iconColor = positiveVariation ? 'success' : 'danger';
-    return (index.h("div", { class: { 'kpi-container': true, 'hidden': !overlays.isPresent(value) } }, index.h("div", { class: "kpi-title" }, title), index.h("div", { class: "kpi-number", style: { color: `var(--value-${index$1 + 1}-color)` } }, index.h(KpiNumber, { type: type, value: value }), extraSymbol), useVariation && (index.h("div", { class: { 'kpi-variation': true, positive: positiveVariation, negative: !positiveVariation } }, !variation ? (index.h("div", { class: "no-variation" })) : ([index.h("yoo-icon", { size: "extra-small", name: iconName, color: iconColor }), index.h("div", null, Math.abs(Math.round(variation * 100) / 100), "%")])))));
+    return (index.h("div", { class: { 'kpi-container': true, 'hidden': !index$1.isPresent(value) } }, index.h("div", { class: "kpi-title" }, title), index.h("div", { class: "kpi-number", style: { color: `var(--value-${index$2 + 1}-color)` } }, index.h(KpiNumber, { type: type, value: value }), extraSymbol), useVariation && (index.h("div", { class: { 'kpi-variation': true, positive: positiveVariation, negative: !positiveVariation } }, !variation ? (index.h("div", { class: "no-variation" })) : ([index.h("yoo-icon", { size: "extra-small", name: iconName, color: iconColor }), index.h("div", null, Math.abs(Math.round(variation * 100) / 100), "%")])))));
   }))));
 };
 const KpiNumber = ({ type, value }) => {
@@ -29,11 +29,11 @@ const KpiNumber = ({ type, value }) => {
       return `${value}%`;
     case 'time': {
       const timeSeconds = Math.ceil(value * 60);
-      const { hours, minutes } = overlays.convertSecondsToTimeUnits(timeSeconds);
+      const { hours, minutes } = index$1.convertSecondsToTimeUnits(timeSeconds);
       return (index.h("span", null, index.h("span", null, index.h("span", null, hours), index.h("span", { class: "time" }, "h")), index.h("span", null, index.h("span", null, minutes >= 10 ? minutes : `0${minutes}`), index.h("span", { class: "time" }, "m"))));
     }
     case 'truncated-number':
-      return overlays.pipes.number.transform(value, '', 0);
+      return index$1.pipes.number.transform(value, '', 0);
   }
 };
 const YooKpiCardComponent = class {
@@ -44,7 +44,7 @@ const YooKpiCardComponent = class {
   }
   render() {
     var _a;
-    const data = ((_a = this.kpiData) === null || _a === void 0 ? void 0 : _a.filter(({ value }) => overlays.isPresent(value) || this.keepUndefinedValues)) || [];
+    const data = ((_a = this.kpiData) === null || _a === void 0 ? void 0 : _a.filter(({ value }) => index$1.isPresent(value) || this.keepUndefinedValues)) || [];
     const hasData = !!data.length;
     return (index.h(index.Host, null, hasData && index.h(Kpis, { data: data, title: this.cardTitle, help: this.help, onCardClick: () => this.cardClicked.emit(true) }), !hasData && !this.hideEmptyState && index.h(EmptyState, { type: this.emptyState })));
   }

package/dist/cjs/yoo-kpi-container.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
-const index$1 = require('./index-9aadeb94.js');
-const commonHelpers = require('./common-helpers-9f63a319.js');
-const overlays = require('./overlays-e5d2ff76.js');
+const index$1 = require('./index-6f92bccb.js');
+const commonHelpers = require('./common-helpers-44428bf7.js');
+const index$2 = require('./index-0cfb67d1.js');
 require('./lodash-a9050d79.js');
 require('./index-a1bbe627.js');
 require('./_commonjsHelpers-94df2ea7.js');
@@ -95,22 +95,22 @@ const YooKpiContainerComponent = class {
     this.removeIntersectionObserver();
   }
   initButtons() {
-    this.buttons = [{ text: overlays.translate('REFRESH'), icon: 'refresh', handler: () => this.onRefresh(), separator: true }];
+    this.buttons = [{ text: index$2.translate('REFRESH'), icon: 'refresh', handler: () => this.onRefresh(), separator: true }];
     if (this.isInDashboard && (this.type === 'chart' || this.type === 'grid')) {
-      this.buttons.push({ text: overlays.translate('KPIVIEWINFO'), icon: 'info', handler: () => this.onViewInfo(), separator: true });
+      this.buttons.push({ text: index$2.translate('KPIVIEWINFO'), icon: 'info', handler: () => this.onViewInfo(), separator: true });
     }
     if (this.isEditMode) {
       if (this.type === 'chart') {
-        this.buttons.push({ text: overlays.translate('COLOR'), icon: 'theme', handler: () => this.onUpdateColors() });
-        const chartTypes = overlays.getChartTypes(this.definition.kpiType);
+        this.buttons.push({ text: index$2.translate('COLOR'), icon: 'theme', handler: () => this.onUpdateColors() });
+        const chartTypes = index$2.getChartTypes(this.definition.kpiType);
         if (chartTypes.length > 1) {
           this.buttons.push({
-            text: overlays.translate('GRAPHCHARTTYPE'),
+            text: index$2.translate('GRAPHCHARTTYPE'),
             icon: 'chart',
             subMenu: chartTypes.map((t) => {
               var _a;
               return {
-                text: overlays.translate(t.toUpperCase()),
+                text: index$2.translate(t.toUpperCase()),
                 textClass: ((_a = this === null || this === void 0 ? void 0 : this.definition) === null || _a === void 0 ? void 0 : _a.type) === t ? 'app-color' : null,
                 handler: () => this.onChangeChartType(t)
               };
@@ -119,25 +119,25 @@ const YooKpiContainerComponent = class {
           });
         }
       }
-      this.buttons.push({ text: overlays.translate('YOOBICEDIT'), icon: 'pen', handler: () => this.onEdit() });
+      this.buttons.push({ text: index$2.translate('YOOBICEDIT'), icon: 'pen', handler: () => this.onEdit() });
       this.buttons.push({
-        text: overlays.translate('DUPLICATE'),
+        text: index$2.translate('DUPLICATE'),
         icon: 'duplicate',
         subMenu: [
-          { text: overlays.translate('COPYTOSAMETAB'), handler: () => this.onDuplicate() },
-          { text: overlays.translate('COPYTOANOTHERTAB'), handler: () => this.onCopyToAnotherTab() }
+          { text: index$2.translate('COPYTOSAMETAB'), handler: () => this.onDuplicate() },
+          { text: index$2.translate('COPYTOANOTHERTAB'), handler: () => this.onCopyToAnotherTab() }
         ]
       });
-      this.buttons.push({ text: overlays.translate('DELETE'), icon: 'delete', actionType: 'delete', handler: () => this.onDelete(), separator: true });
+      this.buttons.push({ text: index$2.translate('DELETE'), icon: 'delete', actionType: 'delete', handler: () => this.onDelete(), separator: true });
     }
-    if ((this.type === 'chart' || this.type === 'grid') && overlays.isWeb(this.host)) {
-      this.buttons.push({ text: overlays.translate('EXPORTCSV'), icon: 'file-csv', handler: () => this.onExportCSV() });
+    if ((this.type === 'chart' || this.type === 'grid') && index$2.isWeb(this.host)) {
+      this.buttons.push({ text: index$2.translate('EXPORTCSV'), icon: 'file-csv', handler: () => this.onExportCSV() });
     }
-    if (this.type === 'grid' && overlays.isWeb(this.host)) {
-      this.buttons.push({ text: overlays.translate('EXPORTEXCEL'), icon: 'file-excel', handler: () => this.onExportXLSX() });
+    if (this.type === 'grid' && index$2.isWeb(this.host)) {
+      this.buttons.push({ text: index$2.translate('EXPORTEXCEL'), icon: 'file-excel', handler: () => this.onExportXLSX() });
     }
-    if (this.type === 'chart' && overlays.isWeb(this.host)) {
-      this.buttons.push({ text: overlays.translate('EXPORTPNG'), icon: 'image', handler: () => this.onExport(), separator: true });
+    if (this.type === 'chart' && index$2.isWeb(this.host)) {
+      this.buttons.push({ text: index$2.translate('EXPORTPNG'), icon: 'image', handler: () => this.onExport(), separator: true });
     }
   }
   onShowDialog(index) {
@@ -145,7 +145,7 @@ const YooKpiContainerComponent = class {
   }
   onShowMore(ev, el) {
     this.initButtons();
-    overlays.showActionSheet(this.buttons, null, {}, el, ev);
+    index$2.showActionSheet(this.buttons, null, {}, el, ev);
   }
   onEdit() {
     this.kpiEdit.emit(true);
@@ -222,16 +222,16 @@ const YooKpiContainerComponent = class {
     // only yoobic.com hosted iframes should be interactive
     const isTableau = ((_b = (_a = this.definition) === null || _a === void 0 ? void 0 : _a.kpiFormValues) === null || _b === void 0 ? void 0 : _b.provider) === 'Tableau';
     if (this.hasError) {
-      return index.h("div", { class: "error" }, overlays.translate(this.hasErrorTooMuchData ? 'CHARTLOADINGERROR' : 'CHARTLOADINGERRORGENERIC'));
+      return index.h("div", { class: "error" }, index$2.translate(this.hasErrorTooMuchData ? 'CHARTLOADINGERROR' : 'CHARTLOADINGERRORGENERIC'));
     }
     else if ((!this.config || this.isLoading) && !this.forceEmptyState) {
       return index.h("yoo-loader", { class: "absolute", size: "large" });
     }
     else if (!this.config && this.forceEmptyState) {
-      return (index.h("div", { class: "empty-state" }, index.h("yoo-empty-state", { type: "nodata" }), index.h("div", null, overlays.translate('LISTEMPTY'))));
+      return (index.h("div", { class: "empty-state" }, index.h("yoo-empty-state", { type: "nodata" }), index.h("div", null, index$2.translate('LISTEMPTY'))));
     }
     return [
-      index.h("div", { class: 'kpi-container ' + this.type, onClick: () => !isTableau && !overlays.isWeb(this.host) && this.onShowDialog() }, this.renderKpi())
+      index.h("div", { class: 'kpi-container ' + this.type, onClick: () => !isTableau && !index$2.isWeb(this.host) && this.onShowDialog() }, this.renderKpi())
     ];
   }
   renderKpi() {
@@ -248,24 +248,24 @@ const YooKpiContainerComponent = class {
       disableResize: this.disableResize, onKpiEdited: (ev) => this.onKpiEdited(ev), onKpiClick: (ev) => this.onKpiClick(ev), onKpiDoubleClick: (ev) => this.onKpiDoubleClick(ev), onKpiLegendItemClick: (ev) => this.onKpiLegendItemClick(ev), onKpiLinkClick: (ev) => this.onKpiLinkClick(ev), onOpenInFullscreen: () => this.onShowDialog() }));
   }
   renderHelpButton(descriptionKey) {
-    const description = overlays.translate(descriptionKey);
+    const description = index$2.translate(descriptionKey);
     return (index.h("yoo-tooltip", { clickable: true, content: description, placement: "right", coeffMaxWidth: 0.85 }, index.h("yoo-icon", { name: "help", color: "stable-alt" })));
   }
   render() {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     let iconElement;
     return (index.h(index.Host, { class: {
-        web: overlays.isWeb(this.host),
+        web: index$2.isWeb(this.host),
         [this.type || 'default']: true,
         ...commonHelpers.getAppContext(this.host)
       } }, index.h("div", { class: {
         container: true,
         fullscreen: this.isFullScreen,
         'full-height': this.isFullHeight
-      } }, this.isFullScreen || this.hideHeader ? null : (index.h("div", { class: "heading" }, this.isEditMode && overlays.isWeb(this.host) && (index.h("yoo-tooltip", { slot: "icon-only", hoverable: overlays.isWeb(this.host), content: overlays.translate('YOOBICMOVE'), placement: "bottom" }, index.h("yoo-icon", { class: "margin-right draggable", name: "draggable", color: "stable", size: "medium" }))), index.h("div", { class: "title" }, overlays.translateMulti(this.heading), (_b = (_a = this.definition) === null || _a === void 0 ? void 0 : _a.extraIcones) === null || _b === void 0 ? void 0 :
+      } }, this.isFullScreen || this.hideHeader ? null : (index.h("div", { class: "heading" }, this.isEditMode && index$2.isWeb(this.host) && (index.h("yoo-tooltip", { slot: "icon-only", hoverable: index$2.isWeb(this.host), content: index$2.translate('YOOBICMOVE'), placement: "bottom" }, index.h("yoo-icon", { class: "margin-right draggable", name: "draggable", color: "stable", size: "medium" }))), index.h("div", { class: "title" }, index$2.translateMulti(this.heading), (_b = (_a = this.definition) === null || _a === void 0 ? void 0 : _a.extraIcones) === null || _b === void 0 ? void 0 :
       _b.map((extra) => {
         return index.h("yoo-icon", { name: extra.icon, color: extra.color, size: "medium", onClick: () => this.onShowDialog() });
-      })), ((_d = (_c = this.definition) === null || _c === void 0 ? void 0 : _c.kpiFormValues) === null || _d === void 0 ? void 0 : _d.locked) && (index.h("yoo-tooltip", { slot: "icon-only", hoverable: overlays.isWeb(this.host), content: overlays.translate('GRAPHLOCKED'), placement: "bottom" }, index.h("yoo-icon", { name: "lock", color: "dark", size: "medium" }))), this.isEditMode && overlays.isWeb(this.host) && ((_e = this.definition) === null || _e === void 0 ? void 0 : _e.kpiType) === 'CampaignsPivotTableKpi' && ((_f = this.definition) === null || _f === void 0 ? void 0 : _f.showAs) === 'grid' && (index.h("yoo-tooltip", { slot: "icon-only", hoverable: overlays.isWeb(this.host), content: overlays.translate('TOGGLETOOLBOX'), placement: "bottom" }, index.h("yoo-icon", { name: "settings", color: "stable", size: "medium", onClick: () => this.onToogleToolsPanel() }))), index.h("yoo-tooltip", { slot: "icon-only", hoverable: overlays.isWeb(this.host), content: overlays.isWeb(this.host) ? overlays.translate('SHOWDATA') : '', placement: "bottom" }, index.h("yoo-icon", { name: "maximize", color: "stable", size: "medium", onClick: () => this.onShowDialog() })), this.isInDashboard && ((_h = (_g = this.config) === null || _g === void 0 ? void 0 : _g.exporting) === null || _h === void 0 ? void 0 : _h.showTable) !== false && this.type === 'chart' && ((_j = this.definition) === null || _j === void 0 ? void 0 : _j.kpiType) !== 'CampaignsPivotTableKpi' && (index.h("yoo-tooltip", { slot: "icon-only", hoverable: overlays.isWeb(this.host), content: overlays.translate('SHOWASTABLE'), placement: "bottom" }, index.h("yoo-icon", { name: "table", color: "stable", size: "medium", onClick: () => this.onToggleTable() }))), ((_l = (_k = this.config) === null || _k === void 0 ? void 0 : _k.exporting) === null || _l === void 0 ? void 0 : _l.showTable) !== false && this.type === 'grid' && ((_m = this.definition) === null || _m === void 0 ? void 0 : _m.kpiType) !== 'CampaignsPivotTableKpi' && (index.h("yoo-tooltip", { slot: "icon-only", hoverable: overlays.isWeb(this.host), content: overlays.translate('SHOWASCHART'), placement: "bottom" }, index.h("yoo-icon", { name: "chart", color: "stable", size: "medium", onClick: () => this.onToggleTable() }))), this.definition && this.definition.help && this.renderHelpButton(this.definition.help), this.buttons && this.buttons.length > 0 && (index.h("yoo-icon", { ref: (el) => (iconElement = el), slot: "icon-only", name: "more", color: "stable", size: "medium", onClick: (ev) => this.onShowMore(ev, iconElement) })))), index.h("slot", { name: "start" }), !this.isFullScreen && !this.hideHeader && ((_o = this.definition) === null || _o === void 0 ? void 0 : _o.description) && (index.h("yoo-truncate", { class: { subheading: true, grid: ((_p = this.definition) === null || _p === void 0 ? void 0 : _p.showAs) === 'grid' }, showEllipsisButton: true, maxLength: 150, content: overlays.translateMulti(this.definition.description) })), index.h("div", { class: "content" }, this.renderKpiContent()), index.h("slot", null))));
+      })), ((_d = (_c = this.definition) === null || _c === void 0 ? void 0 : _c.kpiFormValues) === null || _d === void 0 ? void 0 : _d.locked) && (index.h("yoo-tooltip", { slot: "icon-only", hoverable: index$2.isWeb(this.host), content: index$2.translate('GRAPHLOCKED'), placement: "bottom" }, index.h("yoo-icon", { name: "lock", color: "dark", size: "medium" }))), this.isEditMode && index$2.isWeb(this.host) && ((_e = this.definition) === null || _e === void 0 ? void 0 : _e.kpiType) === 'CampaignsPivotTableKpi' && ((_f = this.definition) === null || _f === void 0 ? void 0 : _f.showAs) === 'grid' && (index.h("yoo-tooltip", { slot: "icon-only", hoverable: index$2.isWeb(this.host), content: index$2.translate('TOGGLETOOLBOX'), placement: "bottom" }, index.h("yoo-icon", { name: "settings", color: "stable", size: "medium", onClick: () => this.onToogleToolsPanel() }))), index.h("yoo-tooltip", { slot: "icon-only", hoverable: index$2.isWeb(this.host), content: index$2.isWeb(this.host) ? index$2.translate('SHOWDATA') : '', placement: "bottom" }, index.h("yoo-icon", { name: "maximize", color: "stable", size: "medium", onClick: () => this.onShowDialog() })), this.isInDashboard && ((_h = (_g = this.config) === null || _g === void 0 ? void 0 : _g.exporting) === null || _h === void 0 ? void 0 : _h.showTable) !== false && this.type === 'chart' && ((_j = this.definition) === null || _j === void 0 ? void 0 : _j.kpiType) !== 'CampaignsPivotTableKpi' && (index.h("yoo-tooltip", { slot: "icon-only", hoverable: index$2.isWeb(this.host), content: index$2.translate('SHOWASTABLE'), placement: "bottom" }, index.h("yoo-icon", { name: "table", color: "stable", size: "medium", onClick: () => this.onToggleTable() }))), ((_l = (_k = this.config) === null || _k === void 0 ? void 0 : _k.exporting) === null || _l === void 0 ? void 0 : _l.showTable) !== false && this.type === 'grid' && ((_m = this.definition) === null || _m === void 0 ? void 0 : _m.kpiType) !== 'CampaignsPivotTableKpi' && (index.h("yoo-tooltip", { slot: "icon-only", hoverable: index$2.isWeb(this.host), content: index$2.translate('SHOWASCHART'), placement: "bottom" }, index.h("yoo-icon", { name: "chart", color: "stable", size: "medium", onClick: () => this.onToggleTable() }))), this.definition && this.definition.help && this.renderHelpButton(this.definition.help), this.buttons && this.buttons.length > 0 && (index.h("yoo-icon", { ref: (el) => (iconElement = el), slot: "icon-only", name: "more", color: "stable", size: "medium", onClick: (ev) => this.onShowMore(ev, iconElement) })))), index.h("slot", { name: "start" }), !this.isFullScreen && !this.hideHeader && ((_o = this.definition) === null || _o === void 0 ? void 0 : _o.description) && (index.h("yoo-truncate", { class: { subheading: true, grid: ((_p = this.definition) === null || _p === void 0 ? void 0 : _p.showAs) === 'grid' }, showEllipsisButton: true, maxLength: 150, content: index$2.translateMulti(this.definition.description) })), index.h("div", { class: "content" }, this.renderKpiContent()), index.h("slot", null))));
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {

package/dist/cjs/yoo-kpi-external.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
-const index$1 = require('./index-a1bbe627.js');
-require('./index-9aadeb94.js');
-const overlays = require('./overlays-e5d2ff76.js');
+const index$2 = require('./index-a1bbe627.js');
+require('./index-6f92bccb.js');
+const index$1 = require('./index-0cfb67d1.js');
 require('./lodash-a9050d79.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
@@ -18,9 +18,9 @@ const YooKpiExternalComponent = class {
     this.openInFullscreen = index.createEvent(this, "openInFullscreen", 7);
     YooKpiExternalComponent.componentCounter += 1;
     if (!YooKpiExternalComponent.EmptyStateSVGWithCustomColors) {
-      fetch(`./assets/empty-state/${overlays.isWeb(this.host) ? 'dashboard' : 'analytics'}.svg`).then(res => {
+      fetch(`./assets/empty-state/${index$1.isWeb(this.host) ? 'dashboard' : 'analytics'}.svg`).then(res => {
         res.text().then(function (text) {
-          YooKpiExternalComponent.EmptyStateSVGWithCustomColors = overlays.updateSVGCustomColors(text);
+          YooKpiExternalComponent.EmptyStateSVGWithCustomColors = index$1.updateSVGCustomColors(text);
         });
       });
     }
@@ -32,23 +32,23 @@ const YooKpiExternalComponent = class {
     const config = {
       url: this.config.url,
       acls: this.config.acls,
-      filters: [...index$1.ACL_FILTERS],
+      filters: [...index$2.ACL_FILTERS],
       height: '100%',
       width: '100%',
       containerId: 'tableau-container',
-      device: overlays.isWeb(this.host) ? 'desktop' : 'phone'
+      device: index$1.isWeb(this.host) ? 'desktop' : 'phone'
     };
     return config;
   }
   renderIFrame() {
     var _a, _b;
     const isProviderTableau = !this.definition || ((_b = (_a = this.definition) === null || _a === void 0 ? void 0 : _a.kpiFormValues) === null || _b === void 0 ? void 0 : _b.provider) === 'Tableau';
-    if (isProviderTableau && (overlays.isIOS() && overlays.isNativeMobile())) {
-      return index.h("yoo-button", { style: { 'margin': '1rem' }, onClick: () => this.openInFullscreen.emit(true), size: "large", color: "app-color" }, overlays.translate('APPCREATORACTIONOPENMODAL'));
+    if (isProviderTableau && (index$1.isIOS() && index$1.isNativeMobile())) {
+      return index.h("yoo-button", { style: { 'margin': '1rem' }, onClick: () => this.openInFullscreen.emit(true), size: "large", color: "app-color" }, index$1.translate('APPCREATORACTIONOPENMODAL'));
     }
     const props = {
       // sandboxed iframes without allow-top-navigation, allow-top-navigation-by-user-activation or allow-popups flags will prevent them to navigate away from main webview
-      sandbox: `allow-scripts allow-same-origin allow-forms ${overlays.isWeb(this.host) ? 'allow-top-navigation-by-user-activation allow-downloads allow-popups' : ''}`,
+      sandbox: `allow-scripts allow-same-origin allow-forms ${index$1.isWeb(this.host) ? 'allow-top-navigation-by-user-activation allow-downloads allow-popups' : ''}`,
       ...(isProviderTableau ? { src: './assets/js/tableau.yoobic.iframe.html' } : { src: this.config.url }),
       frameBorder: 0,
       id: this.frameId

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

@@ -3,12 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
-require('./index-ec50fd6e.js');
+const index$1 = require('./index-0cfb67d1.js');
 const annotationsHelpers = require('./annotations-helpers-fb554cca.js');
-const overlays = require('./overlays-e5d2ff76.js');
-require('./lodash-a9050d79.js');
 require('./index-a1bbe627.js');
 require('./_commonjsHelpers-94df2ea7.js');
+require('./lodash-a9050d79.js');
 
 const kpiCss = "svg:not(:root){overflow:hidden}:host{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;min-height:0}:host .photo-container{position:relative;width:100%;height:100%}:host .empty-state{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-direction:column;flex-direction:column;height:100%}:host .empty-state yoo-empty-state{height:6.25rem}:host .empty-state div{color:var(--text-color-80, rgba(128, 127, 131, 0.8));font-size:var(--font-size-16, 1rem)}";
 
@@ -112,7 +111,7 @@ const YooKpiComponent = class {
       case 'calendar':
         return null;
       case 'carousel':
-        return this.photosSrc ? (index.h("div", { class: "photo-container" }, index.h("yoo-form-carousel", { ref: (el) => (this.carousel = el), usePhotoEditor: true, mediaSrc: this.photosSrc.map((src) => src === null || src === void 0 ? void 0 : src.value), annotations: this.photosSrc.map((src) => src === null || src === void 0 ? void 0 : src.annotations), drawings: this.photosSrc.map((src) => src === null || src === void 0 ? void 0 : src.drawings), class: { light: true, 'form-preview': this.isFormPreview } }))) : (index.h("div", { class: "empty-state" }, index.h("yoo-empty-state", { type: "photo" }), index.h("div", null, overlays.translate('LISTEMPTY'))));
+        return this.photosSrc ? (index.h("div", { class: "photo-container" }, index.h("yoo-form-carousel", { ref: (el) => (this.carousel = el), usePhotoEditor: true, mediaSrc: this.photosSrc.map((src) => src === null || src === void 0 ? void 0 : src.value), annotations: this.photosSrc.map((src) => src === null || src === void 0 ? void 0 : src.annotations), drawings: this.photosSrc.map((src) => src === null || src === void 0 ? void 0 : src.drawings), class: { light: true, 'form-preview': this.isFormPreview } }))) : (index.h("div", { class: "empty-state" }, index.h("yoo-empty-state", { type: "photo" }), index.h("div", null, index$1.translate('LISTEMPTY'))));
       case 'grid':
         return (index.h("yoo-pivot-table", { ref: (el) => (this.pivotTable = el), onEdited: (ev) => this.onEdited(ev), onRowClick: (ev) => this.onChartClick(ev), onRowDoubleClick: (ev) => this.onChartDoubleClick(ev), config: this.config, definition: this.definition, isFullScreen: this.isFullScreen, gridClass: "grid-alternate no-border", class: {
             'rounded': (_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.contains('rounded')
@@ -120,7 +119,7 @@ const YooKpiComponent = class {
       case 'map':
         return (index.h("yoo-map", { class: "flex", ref: (el) => (this.map = el), markers: this.config.markers, useCluster: true, groupBy: "status", filterGroups: this.definition.mapFilters, showLegend: true, zoom: 2,
           // showLegend={this.isFullScreen || isWeb(this.host) ? this.definition.showLegend : false}
-          showFullscreenControl: overlays.isWeb(this.host), onSelected: (ev) => this.onMarkersSelect(ev) }));
+          showFullscreenControl: index$1.isWeb(this.host), onSelected: (ev) => this.onMarkersSelect(ev) }));
       case 'chartio':
       case 'external':
         return (index.h("yoo-kpi-external", { config: this.config, definition: this.definition, isFullScreen: this.isFullScreen, onKpiLinkClick: (ev) => this.onKpiLinkClick(ev), onOpenInFullscreen: () => this.openInFullscreen.emit(true) }));
@@ -132,7 +131,7 @@ const YooKpiComponent = class {
   render() {
     return (index.h(index.Host, { class: {
         'full-height': this.isFullHeight,
-        web: overlays.isWeb(this.host)
+        web: index$1.isWeb(this.host)
       } }, this.renderBasedOnType()));
   }
   get host() { return index.getElement(this); }

package/dist/cjs/yoo-layout-sections.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');
@@ -17,10 +17,10 @@ const YooLayoutSectionsComponent = class {
     this.seeAllClicked = index.createEvent(this, "seeAllClicked", 7);
   }
   renderSeeAll(seeAllType) {
-    return (index.h("div", { class: "see-all", onClick: () => this.seeAllClicked.emit(seeAllType) }, overlays.translate('YOOBICSEEALL')));
+    return (index.h("div", { class: "see-all", onClick: () => this.seeAllClicked.emit(seeAllType) }, index$1.translate('YOOBICSEEALL')));
   }
   renderConfig(config) {
-    return index.h("div", { class: { container: true, alternate: config.isAlternate } }, index.h("div", { class: "title" }, overlays.translate(config.title), index.h("div", { class: "flex" }), config.showSeeAll && this.renderSeeAll(config.seeAllType)), config.slotName && index.h("slot", { name: config.slotName }));
+    return index.h("div", { class: { container: true, alternate: config.isAlternate } }, index.h("div", { class: "title" }, index$1.translate(config.title), index.h("div", { class: "flex" }), config.showSeeAll && this.renderSeeAll(config.seeAllType)), config.slotName && index.h("slot", { name: config.slotName }));
   }
   render() {
     var _a;

package/dist/cjs/yoo-layout-tabs.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');
@@ -17,7 +17,7 @@ const YooLayoutTabsComponent = class {
     this.tabSelected = index.createEvent(this, "tabSelected", 7);
   }
   renderHeader() {
-    return !this.hideHeader && index.h("yoo-header", null, index.h("yoo-navbar", null, index.h("yoo-items", { slot: "start" }, index.h("slot", { name: "top-left" })), index.h("yoo-truncate", null, overlays.translate(this.header), " ")));
+    return !this.hideHeader && index.h("yoo-header", null, index.h("yoo-navbar", null, index.h("yoo-items", { slot: "start" }, index.h("slot", { name: "top-left" })), index.h("yoo-truncate", null, index$1.translate(this.header), " ")));
   }
   renderTabs() {
     return index.h("yoo-header", { class: "secondary" }, index.h("yoo-tabs", { tabs: this.tabs, initialIndex: this.selectedTabIndex, onTabSelected: (ev) => this.tabSelected.emit(ev.detail) }));

package/dist/cjs/yoo-layout-two-columns.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');
@@ -17,7 +17,7 @@ const YooLayoutTwoColumsComponent = class {
     this.hideHeader = false;
   }
   renderHeader() {
-    return index.h("yoo-header", { class: "no-border" }, index.h("yoo-navbar", { centerTitle: false }, index.h("yoo-items", { slot: "start" }, index.h("slot", { name: "top-left" })), index.h("yoo-truncate", null, " ", overlays.translate(this.header), " "), index.h("yoo-items", { slot: "end", class: "pointer-events" }, index.h("slot", { name: "top-right" }))));
+    return index.h("yoo-header", { class: "no-border" }, index.h("yoo-navbar", { centerTitle: false }, index.h("yoo-items", { slot: "start" }, index.h("slot", { name: "top-left" })), index.h("yoo-truncate", null, " ", index$1.translate(this.header), " "), index.h("yoo-items", { slot: "end", class: "pointer-events" }, index.h("slot", { name: "top-right" }))));
   }
   renderBody() {
     return index.h("div", { class: "body" }, index.h("div", { class: "left-part" }, index.h("slot", { name: "left-part" })), index.h("div", { class: "right-part" }, index.h("slot", { name: "right-part" })));

package/dist/cjs/yoo-lesson-detail-card.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');
@@ -49,15 +49,15 @@ const YooLessonDetailCard = class {
     }
   }
   renderHeaderInfo() {
-    return (index.h("div", { class: "header-info spacing" }, index.h("yoo-icon", { size: "small", color: "app-color", name: this.headerInfo.icon }), index.h("div", null, index.h("p", null, overlays.translate(this.headerInfo.text)))));
+    return (index.h("div", { class: "header-info spacing" }, index.h("yoo-icon", { size: "small", color: "app-color", name: this.headerInfo.icon }), index.h("div", null, index.h("p", null, index$1.translate(this.headerInfo.text)))));
   }
   renderHeader() {
-    return (index.h("div", { class: "header" }, index.h("h4", { class: "heading" }, overlays.translateMulti(this.heading)), index.h("div", { class: "subheader" }, this.subHeadingIcon && index.h("yoo-icon", { size: "small", color: "stable", name: this.subHeadingIcon }), this.subHeading && index.h("div", { class: "subheading" }, overlays.translateMulti(this.subHeading)))));
+    return (index.h("div", { class: "header" }, index.h("h4", { class: "heading" }, index$1.translateMulti(this.heading)), index.h("div", { class: "subheader" }, this.subHeadingIcon && index.h("yoo-icon", { size: "small", color: "stable", name: this.subHeadingIcon }), this.subHeading && index.h("div", { class: "subheading" }, index$1.translateMulti(this.subHeading)))));
   }
   renderBadge() {
     const icon = this.badge.earned ? this.badge.icon : 'lock';
-    const customColor = this.badge.earned ? this.badge.color : overlays.getCssColor('stable');
-    return (index.h("div", { class: "tag-container" }, index.h("yoo-tooltip", { content: overlays.translateMulti(this.badge.title), hoverable: true, placement: "bottom" }, index.h("yoo-tag", { size: "small", icon: icon, customColor: customColor }))));
+    const customColor = this.badge.earned ? this.badge.color : index$1.getCssColor('stable');
+    return (index.h("div", { class: "tag-container" }, index.h("yoo-tooltip", { content: index$1.translateMulti(this.badge.title), hoverable: true, placement: "bottom" }, index.h("yoo-tag", { size: "small", icon: icon, customColor: customColor }))));
   }
   renderTopBar() {
     return (index.h("div", { class: "top-bar" }, this.renderHeader(), index.h("div", { class: "right-column" }, this.headerInfo && this.headerInfo.display && this.renderHeaderInfo(), index.h("slot", { name: "right" }), this.badge && this.renderBadge(), this.hasContent && index.h("yoo-icon", { class: "toggle-icon", onClick: this.onHeaderArrowButtonClick, name: this.showContent ? 'arrow-up' : 'arrow-down' }))));
@@ -67,7 +67,7 @@ const YooLessonDetailCard = class {
   }
   renderWarning() {
     const icon = this.warning.icon ? this.warning.icon : 'warning';
-    return (index.h("yoo-banner", { fill: true, leftIcon: { name: icon, color: 'warning' } }, index.h("p", { slot: "content" }, overlays.translate(this.warning.text)), index.h("yoo-button", { slot: "action", color: "warning", fill: "transparent", class: "auto", onClick: () => this.onWarningButtonClicked() }, overlays.translate(this.warning.button))));
+    return (index.h("yoo-banner", { fill: true, leftIcon: { name: icon, color: 'warning' } }, index.h("p", { slot: "content" }, index$1.translate(this.warning.text)), index.h("yoo-button", { slot: "action", color: "warning", fill: "transparent", class: "auto", onClick: () => this.onWarningButtonClicked() }, index$1.translate(this.warning.button))));
   }
   onFooterButtonClick() {
     this.footerButtonClick.emit();
@@ -76,11 +76,11 @@ const YooLessonDetailCard = class {
     return (index.h("div", { class: "time-indicator" }, index.h("yoo-progress-bar", { shape: "circle", animated: this.animated, hideProgressValue: true, value: 75 }), index.h("div", { class: "time-text" }, this.footer.timeIndicator)));
   }
   renderFooter() {
-    return (index.h("div", { class: "footer-container" }, index.h("div", { class: "footer" }, this.footer.timeIndicator ? this.renderTimeIndicator() : index.h("div", null), index.h("yoo-button", { onClick: () => this.onFooterButtonClick(), color: "app-color", size: "medium", fill: "solid", disabled: !this.footer.buttonClickable }, overlays.translate(this.footer.buttonLabel)))));
+    return (index.h("div", { class: "footer-container" }, index.h("div", { class: "footer" }, this.footer.timeIndicator ? this.renderTimeIndicator() : index.h("div", null), index.h("yoo-button", { onClick: () => this.onFooterButtonClick(), color: "app-color", size: "medium", fill: "solid", disabled: !this.footer.buttonClickable }, index$1.translate(this.footer.buttonLabel)))));
   }
   renderContent() {
     if (this.hasContent) {
-      return (index.h("div", { class: { 'content-container': true, 'hidden': !this.showContent }, ref: (el) => (this.contentElement = el) }, this.warning && this.renderWarning(), this.text && index.h("div", { class: "text" }, overlays.translateMulti(this.text)), this.footer && this.renderFooter()));
+      return (index.h("div", { class: { 'content-container': true, 'hidden': !this.showContent }, ref: (el) => (this.contentElement = el) }, this.warning && this.renderWarning(), this.text && index.h("div", { class: "text" }, index$1.translateMulti(this.text)), this.footer && this.renderFooter()));
     }
   }
   render() {