@yoobic/yobi 8.2.4 → 8.3.0-10

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

@@ -2,13 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-6482c595.js');
+require('./index-6886c6f7.js');
 const lodash = require('./lodash-597bda6d.js');
 const sortable_esm = require('./sortable.esm-00e15691.js');
-const commonHelpers = require('./common-helpers-6970c46c.js');
+const commonHelpers = require('./common-helpers-81853232.js');
+const overlays = require('./overlays-94c28a17.js');
+require('./index-920990f8.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
 
 const kanbanCss = ":host{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto;}:host::-webkit-scrollbar{width:var(--spacing-04, 0.25rem);height:var(--spacing-04, 0.25rem)}:host::-webkit-scrollbar-track{background-color:transparent;border-radius:var(--border-radius-04, 0.25rem)}:host::-webkit-scrollbar-thumb{background-color:transparent;border-radius:var(--border-radius-04, 0.25rem)}:host .kanban-outer-container{display:-ms-flexbox;display:flex;height:auto;padding:var(--spacing-16, 1rem);padding-top:var(--spacing-08, 0.5rem);padding-left:0}:host .kanban-outer-container .kanban-board-placeholder{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-width:17.5rem;max-width:17.5rem;height:1.3rem;padding:var(--spacing-08, 0.5rem);color:var(--app-color, #5a30f4);font-size:var(--font-size-14, 0.875rem);background:var(--app-color-20, rgba(90, 48, 244, 0.2));border-radius:0.25rem;cursor:pointer}:host .kanban-outer-container .kanban-board-placeholder yoo-icon{margin-right:var(--spacing-08, 0.5rem)}:host .kanban-outer-container .kanban-board{min-width:17.5rem;max-width:17.5rem;margin-right:var(--spacing-08, 0.5rem)}:host .kanban-outer-container .kanban-board .header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:var(--spacing-16, 1rem);color:var(--text-color, #807f83);font-weight:bold;font-size:var(--font-size-14, 0.875rem);background:var(--stable-light, #f1f1f1);border-top-left-radius:0.25rem;border-top-right-radius:0.25rem;cursor:-webkit-grab;cursor:grab}:host .kanban-outer-container .kanban-board .header .title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .kanban-outer-container .kanban-board .header .count{-ms-flex:1;flex:1;margin-left:var(--spacing-08, 0.5rem)}:host .kanban-outer-container .kanban-board .content{min-height:3.125rem;margin:0;padding:var(--spacing-08, 0.5rem);background:var(--stable-light, #f1f1f1)}:host .kanban-outer-container .kanban-board .content .item-container{position:relative;padding:0;overflow:hidden;background:var(--light, #ffffff);border-radius:0.25rem;border-radius:0.3125rem;-webkit-box-shadow:var(--card-shadow, 0 0.125rem 0.25rem 0 rgba(40, 47, 54, 0.08));box-shadow:var(--card-shadow, 0 0.125rem 0.25rem 0 rgba(40, 47, 54, 0.08));cursor:pointer}:host .kanban-outer-container .kanban-board .content .item-container yoo-icon.more{position:absolute;top:0.625rem;right:var(--spacing-08, 0.5rem);z-index:100;opacity:0;-webkit-transition:all 0.2s;transition:all 0.2s}:host .kanban-outer-container .kanban-board .content .item-container:hover yoo-icon.more{opacity:1}:host .kanban-outer-container .kanban-board .content .item-container:not(:last-child){margin-bottom:var(--spacing-08, 0.5rem)}:host .kanban-outer-container .kanban-board .content .item-container yoo-form-dynamic{margin:var(--spacing-08, 0.5rem);margin-top:0;border-top:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host .kanban-outer-container .kanban-board .content .item-container.sortable-drag{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 .kanban-outer-container .kanban-board .content .item-container.sortable-ghost{border:dashed var(--border-width-02, 0.125rem) var(--stable-alt, #d0d0d0);border-radius:var(--border-radius-04, 0.25rem);cursor:-webkit-grabbing !important;cursor:grabbing !important}:host .kanban-outer-container .kanban-board .footer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);padding-top:var(--spacing-08, 0.5rem);color:var(--stable, #adadad);font-size:var(--font-size-14, 0.875rem);background:var(--stable-light, #f1f1f1);border-bottom-right-radius:0.25rem;border-bottom-left-radius:0.25rem;cursor:pointer}:host .kanban-outer-container .kanban-board .footer yoo-icon{margin-right:var(--spacing-08, 0.5rem);fill:inherit}:host .kanban-outer-container .kanban-board.sortable-drag .kanban-board-inner-container{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 .kanban-outer-container .kanban-board.sortable-ghost .kanban-board-inner-container{border:dashed var(--border-width-02, 0.125rem) var(--stable-alt, #d0d0d0);border-radius:var(--border-radius-04, 0.25rem);cursor:-webkit-grabbing !important;cursor:grabbing !important}:host(.web:hover)::-webkit-scrollbar-track{background-color:var(--stable-light, #f1f1f1)}:host(.web:hover)::-webkit-scrollbar-thumb{background:var(--stable, #adadad)}:host(.mobile) .kanban-outer-container{padding-top:var(--spacing-08, 0.5rem);padding-left:var(--spacing-08, 0.5rem)}";
 
@@ -126,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) {
-        index$1.fadeFromBottom(countEl);
+        overlays.fadeFromBottom(countEl);
       }
       if (currVa < newVal) {
-        index$1.fadeFromTop(countEl);
+        overlays.fadeFromTop(countEl);
       }
     });
   }
@@ -162,35 +163,35 @@ const YooKanbanComponent = class {
   onColumnShowActionsMenu(ev, board, i) {
     const buttons = [
       {
-        text: index$1.translate('YOOBICEDIT'),
+        text: overlays.translate('YOOBICEDIT'),
         handler: () => this.columnsEdited.emit(board)
       },
       {
-        text: index$1.translate('DUPLICATE'),
+        text: overlays.translate('DUPLICATE'),
         handler: () => this.columnsDuplicated.emit(board)
       },
       {
-        text: index$1.translate('DELETE'),
+        text: overlays.translate('DELETE'),
         handler: () => this.columnsDeleted.emit(board)
       }
     ];
-    index$1.isWeb(this.host)
-      ? index$1.showContextMenu(ev, {
+    overlays.isWeb(this.host)
+      ? overlays.showContextMenu(ev, {
         multipleSelection: false,
         contentButtons: buttons,
         placement: 'below',
         hostElement: this.columnsMoreContainerEls[i]
       })
-      : index$1.showActionSheet(buttons);
+      : overlays.showActionSheet(buttons);
   }
   onCardShowActionsMenu(item, ev) {
     ev.stopPropagation();
-    if (item.userRef !== index$1.getSession().userId && !index$1.getAuthentication().isAdmin() && !index$1.getAuthentication().isRoleAdmin()) {
+    if (item.userRef !== overlays.getSession().userId && !overlays.getAuthentication().isAdmin() && !overlays.getAuthentication().isRoleAdmin()) {
       return;
     }
     const buttons = [
       {
-        text: index$1.translate('BACKLOG'),
+        text: overlays.translate('BACKLOG'),
         handler: () => this.cardArchived.emit(item)
       },
       // {
@@ -198,18 +199,18 @@ const YooKanbanComponent = class {
       //     handler: () => this.cardFinished.emit(item)
       // }
       {
-        text: index$1.translate('DELETE'),
+        text: overlays.translate('DELETE'),
         handler: () => this.cardDeleted.emit(item)
       }
     ];
-    index$1.isWeb(this.host)
-      ? index$1.showContextMenu(ev, {
+    overlays.isWeb(this.host)
+      ? overlays.showContextMenu(ev, {
         multipleSelection: false,
         contentButtons: buttons,
         placement: 'below',
         hostElement: ev.target
       })
-      : index$1.showActionSheet(buttons);
+      : overlays.showActionSheet(buttons);
   }
   renderItems(items) {
     var _a;
@@ -237,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: index$1.getUserDisplayName(u), value: u, color: index$1.getCssColor('accent') };
+          const retVal = { _id: u._id, title: overlays.getUserDisplayName(u), value: u, color: overlays.getCssColor('accent') };
           return retVal;
         });
       }
@@ -245,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 ? index$1.getContrastColor(board.color) : index$1.getCssColor('stable');
+      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 style = {
         background: board === null || board === void 0 ? void 0 : board.color,
         color: contrast,
@@ -292,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" }, 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')))))));
+      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')))))));
     });
   }
   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" }), index$1.translate('ADDNEWBOARD')));
+      } }, index.h("yoo-icon", { name: "plus", color: "app-color", size: "small" }), overlays.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

@@ -2,22 +2,23 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-6482c595.js');
+require('./index-6886c6f7.js');
+const overlays = require('./overlays-94c28a17.js');
 require('./lodash-597bda6d.js');
+require('./index-920990f8.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
 
 const kpiCardCss = ":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, index$1.translate('LISTEMPTY'))));
+const EmptyState = ({ type }) => (index.h("div", { class: "empty-state" }, index.h("yoo-empty-state", { type: type }), index.h("div", null, overlays.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" }, 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) => {
+  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) => {
     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': !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), "%")])))));
+    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), "%")])))));
   }))));
 };
 const KpiNumber = ({ type, value }) => {
@@ -28,11 +29,11 @@ const KpiNumber = ({ type, value }) => {
       return `${value}%`;
     case 'time': {
       const timeSeconds = Math.ceil(value * 60);
-      const { hours, minutes } = index$1.convertSecondsToTimeUnits(timeSeconds);
+      const { hours, minutes } = overlays.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 index$1.pipes.number.transform(value, '', 0);
+      return overlays.pipes.number.transform(value, '', 0);
   }
 };
 const YooKpiCardComponent = class {
@@ -43,7 +44,7 @@ const YooKpiCardComponent = class {
   }
   render() {
     var _a;
-    const data = ((_a = this.kpiData) === null || _a === void 0 ? void 0 : _a.filter(({ value }) => index$1.isPresent(value) || this.keepUndefinedValues)) || [];
+    const data = ((_a = this.kpiData) === null || _a === void 0 ? void 0 : _a.filter(({ value }) => overlays.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

@@ -2,12 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
-const commonHelpers = require('./common-helpers-6970c46c.js');
+const index = require('./index-6482c595.js');
+const index$1 = require('./index-6886c6f7.js');
+const commonHelpers = require('./common-helpers-81853232.js');
+const overlays = require('./overlays-94c28a17.js');
 require('./lodash-597bda6d.js');
+require('./index-920990f8.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
 
 const kpiContainerCss = ":host{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;min-height:0}:host .container{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;width:100%;min-height:0;background:var(--light, #ffffff)}:host .container .error{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:var(--spacing-16, 1rem);color:var(--danger, #d44333);text-align:center}:host .container.fullscreen{border-bottom:none}:host .container .content{position:relative;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;width:100%;min-height:0}:host .container .kpi-container{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;min-height:0}:host .container .kpi-container.carousel,:host .container .kpi-container.map{overflow:hidden}:host .container .kpi-container.carousel{border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host .heading{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;padding:var(--spacing-08, 0.5rem);padding-left:var(--spacing-16, 1rem);font-size:var(--font-size-16, 1rem);text-align:left;border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host .heading .title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;font-weight:bold;white-space:nowrap}:host .heading .title yoo-icon{margin-left:var(--spacing-04, 0.25rem)}:host .heading yoo-icon:not(.margin-right){margin-left:var(--spacing-08, 0.5rem)}:host .heading yoo-icon.margin-right{margin-right:var(--spacing-08, 0.5rem)}:host .heading yoo-icon.draggable{margin-left:-0.5rem}:host .subheading{padding:0 var(--spacing-08, 0.5rem);padding-top:var(--spacing-08, 0.5rem);padding-left:var(--spacing-16, 1rem);color:var(--text-color, #807f83);font-size:var(--font-size-14, 0.875rem)}:host .subheading.grid{padding-bottom:var(--spacing-08, 0.5rem);border-bottom:0.0625rem solid var(--stable-light, #f1f1f1)}: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);text-align:center}:host(.mobile) .container{border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host(.mobile) .container:not(.fullscreen) .content yoo-kpi:not(.interactive){pointer-events:none}:host(.no-border) .container{border-top:none;border-bottom:none}:host(.rounded){border-radius:var(--border-radius-08, 0.5rem)}:host(.rounded) .container{border-radius:var(--border-radius-08, 0.5rem)}:host(.chartio) .container .content yoo-kpi,:host(.external) .container .content yoo-kpi{pointer-events:initial}";
 
@@ -27,7 +28,6 @@ const YooKpiContainerComponent = class {
     this.kpiDelete = index.createEvent(this, "kpiDelete", 7);
     this.kpiDuplicate = index.createEvent(this, "kpiDuplicate", 7);
     this.kpiCopyToAnotherTab = index.createEvent(this, "kpiCopyToAnotherTab", 7);
-    this.kpiPdfGenerate = index.createEvent(this, "kpiPdfGenerate", 7);
     this.kpiChartChangeType = index.createEvent(this, "kpiChartChangeType", 7);
     this.kpiToggleToolsPanel = index.createEvent(this, "kpiToggleToolsPanel", 7);
     this.kpiViewInfo = index.createEvent(this, "kpiViewInfo", 7);
@@ -95,22 +95,22 @@ const YooKpiContainerComponent = class {
     this.removeIntersectionObserver();
   }
   initButtons() {
-    this.buttons = [{ text: index$1.translate('REFRESH'), icon: 'refresh', handler: () => this.onRefresh(), separator: true }];
+    this.buttons = [{ text: overlays.translate('REFRESH'), icon: 'refresh', handler: () => this.onRefresh(), separator: true }];
     if (this.isInDashboard && (this.type === 'chart' || this.type === 'grid')) {
-      this.buttons.push({ text: index$1.translate('KPIVIEWINFO'), icon: 'info', handler: () => this.onViewInfo(), separator: true });
+      this.buttons.push({ text: overlays.translate('KPIVIEWINFO'), icon: 'info', handler: () => this.onViewInfo(), separator: true });
     }
     if (this.isEditMode) {
       if (this.type === 'chart') {
-        this.buttons.push({ text: index$1.translate('COLOR'), icon: 'theme', handler: () => this.onUpdateColors() });
-        const chartTypes = index$1.getChartTypes(this.definition.kpiType);
+        this.buttons.push({ text: overlays.translate('COLOR'), icon: 'theme', handler: () => this.onUpdateColors() });
+        const chartTypes = overlays.getChartTypes(this.definition.kpiType);
         if (chartTypes.length > 1) {
           this.buttons.push({
-            text: index$1.translate('GRAPHCHARTTYPE'),
+            text: overlays.translate('GRAPHCHARTTYPE'),
             icon: 'chart',
             subMenu: chartTypes.map((t) => {
               var _a;
               return {
-                text: index$1.translate(t.toUpperCase()),
+                text: overlays.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: index$1.translate('YOOBICEDIT'), icon: 'pen', handler: () => this.onEdit() });
+      this.buttons.push({ text: overlays.translate('YOOBICEDIT'), icon: 'pen', handler: () => this.onEdit() });
       this.buttons.push({
-        text: index$1.translate('DUPLICATE'),
+        text: overlays.translate('DUPLICATE'),
         icon: 'duplicate',
         subMenu: [
-          { text: index$1.translate('COPYTOSAMETAB'), handler: () => this.onDuplicate() },
-          { text: index$1.translate('COPYTOANOTHERTAB'), handler: () => this.onCopyToAnotherTab() }
+          { text: overlays.translate('COPYTOSAMETAB'), handler: () => this.onDuplicate() },
+          { text: overlays.translate('COPYTOANOTHERTAB'), handler: () => this.onCopyToAnotherTab() }
         ]
       });
-      this.buttons.push({ text: index$1.translate('DELETE'), icon: 'delete', actionType: 'delete', handler: () => this.onDelete(), separator: true });
+      this.buttons.push({ text: overlays.translate('DELETE'), icon: 'delete', actionType: 'delete', handler: () => this.onDelete(), separator: true });
     }
-    if ((this.type === 'chart' || this.type === 'grid') && index$1.isWeb(this.host)) {
-      this.buttons.push({ text: index$1.translate('EXPORTCSV'), icon: 'file-csv', handler: () => this.onExportCSV() });
+    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 === 'grid' && index$1.isWeb(this.host)) {
-      this.buttons.push({ text: index$1.translate('EXPORTEXCEL'), icon: 'file-excel', handler: () => this.onExportXLSX() });
+    if (this.type === 'grid' && overlays.isWeb(this.host)) {
+      this.buttons.push({ text: overlays.translate('EXPORTEXCEL'), icon: 'file-excel', handler: () => this.onExportXLSX() });
     }
-    if (this.type === 'chart' && index$1.isWeb(this.host)) {
-      this.buttons.push({ text: index$1.translate('EXPORTPNG'), icon: 'image', handler: () => this.onExport(), separator: true });
+    if (this.type === 'chart' && overlays.isWeb(this.host)) {
+      this.buttons.push({ text: overlays.translate('EXPORTPNG'), icon: 'image', handler: () => this.onExport(), separator: true });
     }
   }
   onShowDialog(index) {
@@ -145,7 +145,7 @@ const YooKpiContainerComponent = class {
   }
   onShowMore(ev, el) {
     this.initButtons();
-    index$1.showActionSheet(this.buttons, null, {}, el, ev);
+    overlays.showActionSheet(this.buttons, null, {}, el, ev);
   }
   onEdit() {
     this.kpiEdit.emit(true);
@@ -186,9 +186,6 @@ const YooKpiContainerComponent = class {
       this.kpi.exportXLSX();
     }
   }
-  onPDFGenerate() {
-    this.kpiPdfGenerate.emit(true);
-  }
   onKpiEdited(ev) {
     ev.stopPropagation();
     this.kpiEdited.emit(ev.detail);
@@ -225,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" }, index$1.translate(this.hasErrorTooMuchData ? 'CHARTLOADINGERROR' : 'CHARTLOADINGERRORGENERIC'));
+      return index.h("div", { class: "error" }, overlays.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, index$1.translate('LISTEMPTY'))));
+      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: 'kpi-container ' + this.type, onClick: () => !isTableau && !index$1.isWeb(this.host) && this.onShowDialog() }, this.renderKpi())
+      index.h("div", { class: 'kpi-container ' + this.type, onClick: () => !isTableau && !overlays.isWeb(this.host) && this.onShowDialog() }, this.renderKpi())
     ];
   }
   renderKpi() {
@@ -251,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 = index$1.translate(descriptionKey);
+    const description = overlays.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: index$1.isWeb(this.host),
+        web: overlays.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 && index$1.isWeb(this.host) && (index.h("yoo-tooltip", { slot: "icon-only", hoverable: index$1.isWeb(this.host), content: index$1.translate('YOOBICMOVE'), placement: "bottom" }, index.h("yoo-icon", { class: "margin-right draggable", name: "draggable", color: "stable", size: "medium" }))), index.h("div", { class: "title" }, index$1.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 && 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 :
       _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: index$1.isWeb(this.host), content: index$1.translate('GRAPHLOCKED'), placement: "bottom" }, index.h("yoo-icon", { name: "lock", color: "dark", size: "medium" }))), this.type === 'chartio' && !index$1.isNativeMobile() && index.h("yoo-icon", { slot: "icon-only", name: "file-pdf", color: "stable", size: "medium", onClick: () => this.onPDFGenerate() }), this.isEditMode && index$1.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$1.isWeb(this.host), content: index$1.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$1.isWeb(this.host), content: index$1.isWeb(this.host) ? index$1.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$1.isWeb(this.host), content: index$1.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$1.isWeb(this.host), content: index$1.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$1.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: 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))));
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {

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

@@ -2,13 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
-const commonHelpers = require('./common-helpers-6970c46c.js');
-const dimensionsHelpers = require('./dimensions-helpers-54685523.js');
+const index = require('./index-6482c595.js');
+const index$1 = require('./index-920990f8.js');
+require('./index-6886c6f7.js');
+const overlays = require('./overlays-94c28a17.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
 
 const kpiExternalCss = ":host{-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;width:100%}:host iframe{width:100%;height:100%;border:0 none}";
 
@@ -19,65 +18,47 @@ const YooKpiExternalComponent = class {
     this.openInFullscreen = index.createEvent(this, "openInFullscreen", 7);
     YooKpiExternalComponent.componentCounter += 1;
     if (!YooKpiExternalComponent.EmptyStateSVGWithCustomColors) {
-      fetch(`./assets/empty-state/${index$1.isWeb(this.host) ? 'dashboard' : 'analytics'}.svg`).then(res => {
+      fetch(`./assets/empty-state/${overlays.isWeb(this.host) ? 'dashboard' : 'analytics'}.svg`).then(res => {
         res.text().then(function (text) {
-          YooKpiExternalComponent.EmptyStateSVGWithCustomColors = index$1.updateSVGCustomColors(text);
+          YooKpiExternalComponent.EmptyStateSVGWithCustomColors = overlays.updateSVGCustomColors(text);
         });
       });
     }
   }
   componentWillLoad() {
-    this.hostedKpiId = 'external-dashboard-' + YooKpiExternalComponent.componentCounter;
+    this.frameId = 'external-dashboard-' + YooKpiExternalComponent.componentCounter;
   }
   renderIFrame() {
     var _a, _b;
-    const isProviderTableau = ((_b = (_a = this.definition) === null || _a === void 0 ? void 0 : _a.kpiFormValues) === null || _b === void 0 ? void 0 : _b.provider) === 'Tableau';
-    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 isProviderTableau = !this.definition || ((_b = (_a = this.definition) === null || _a === void 0 ? void 0 : _a.kpiFormValues) === null || _b === void 0 ? void 0 : _b.provider) === 'Tableau';
+    let config;
+    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'));
     }
-    const { width, height } = index$1.isWeb(this.host) ? this.host.getBoundingClientRect() : dimensionsHelpers.getElementDimensions(window);
-    let srcDoc;
     if (isProviderTableau) {
-      const navBarEl = commonHelpers.querySelectorDeep(document.body, 'yoo-header');
-      const navBarDimensions = dimensionsHelpers.getElementDimensions(navBarEl);
-      const containerHeaderHeight = index$1.isWeb(this.host) ? 2 : (this.isFullScreen ? 2 : ((navBarDimensions.height - 4) * 3));
-      // SHA256 hash of inline script below is dynamic, hence using unsafe-inline in heroku's index.js
-      srcDoc = `
-        <head>
-            <script type="text/javascript" src="https://public.tableau.com/javascripts/api/tableau-2.5.0.min.js"></script>
-            <script type="text/javascript" src="./assets/js/tableau.yoobic.iframe.js"></script>
-            <link
-              href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i&display=swap"
-              rel="stylesheet"
-              type="text/css"
-            />
-            <style>
-              .loading { background: url('data:image/svg+xml;base64,${window.btoa(YooKpiExternalComponent.EmptyStateSVGWithCustomColors)}') center center no-repeat; }
-            </style>
-        </head>
-        <body marginwidth="0" marginheight="0">
-          <div id="${this.hostedKpiId}" class="${isProviderTableau && 'loading'}"></div>
-          <script type="text/javascript">
-            window.onload = function() {
-              onIFrameLoaded({
-                url: '${this.config.url}',
-                containerId: '${this.hostedKpiId}',
-                height: "${height - containerHeaderHeight}px",
-                width: "${index$1.isWeb(this.host) ? '100%' : (width - 2) + 'px'}"
-              });
-            };
-          </script>
-        </body>
-      `;
+      config = {
+        url: this.config.url,
+        acls: this.config.acls,
+        filters: [...index$1.ACL_FILTERS],
+        height: '100%',
+        width: '100%',
+        containerId: 'tableau-container',
+        device: overlays.isWeb(this.host) ? 'default' : 'phone'
+      };
     }
     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 ${index$1.isWeb(this.host) ? 'allow-top-navigation-by-user-activation allow-downloads allow-popups' : ''}`,
-      ...(isProviderTableau ? { srcDoc } : { src: this.config.url }),
-      frameBorder: 0
+      // 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' : ''}`,
+      ...(isProviderTableau ? { src: './assets/js/tableau.yoobic.iframe.html' } : { src: this.config.url }),
+      frameBorder: 0,
+      id: this.frameId
     };
-    return index.h("iframe", { ...props });
+    return index.h("iframe", { ...props, onLoad: () => {
+        if (this.frameEl && isProviderTableau) {
+          const doc = (this.frameEl.contentWindow || this.frameEl.contentDocument);
+          doc.onIFrameLoaded(config);
+        }
+      }, ref: (el) => this.frameEl = el });
   }
   render() {
     return this.config && this.config.url && this.renderIFrame();

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

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-require('./index-1ff4deca.js');
+const index = require('./index-6482c595.js');
+require('./index-66f2fa6c.js');
 const annotationsHelpers = require('./annotations-helpers-6cf88388.js');
-const index$1 = require('./index-f3d7c03d.js');
+const overlays = require('./overlays-94c28a17.js');
 require('./lodash-597bda6d.js');
+require('./index-920990f8.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
 
 const kpiCss = ":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 +112,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, index$1.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, overlays.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 +120,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: index$1.isWeb(this.host), onSelected: (ev) => this.onMarkersSelect(ev) }));
+          showFullscreenControl: overlays.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 +132,7 @@ const YooKpiComponent = class {
   render() {
     return (index.h(index.Host, { class: {
         'full-height': this.isFullHeight,
-        web: index$1.isWeb(this.host)
+        web: overlays.isWeb(this.host)
       } }, this.renderBasedOnType()));
   }
   get host() { return index.getElement(this); }

package/dist/cjs/yoo-layout-sections.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-6482c595.js');
+require('./index-6886c6f7.js');
+const overlays = require('./overlays-94c28a17.js');
 require('./lodash-597bda6d.js');
+require('./index-920990f8.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
 
 const layoutSectionsCss = ":host{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;overflow:hidden}.content{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;padding:var(--spacing-16, 1rem);padding:0;overflow-y:auto;}.content::-webkit-scrollbar{width:var(--spacing-04, 0.25rem);height:var(--spacing-04, 0.25rem)}.content::-webkit-scrollbar-track{background-color:transparent;border-radius:var(--border-radius-04, 0.25rem)}.content::-webkit-scrollbar-thumb{background-color:transparent;border-radius:var(--border-radius-04, 0.25rem)}.content:hover::-webkit-scrollbar-track{background-color:var(--stable-light, #f1f1f1)}.content:hover::-webkit-scrollbar-thumb{background:var(--stable, #adadad)}.content app-grid{-ms-flex:initial;flex:initial;height:10rem}.content .container{-ms-flex:1;flex:1;margin-bottom:var(--spacing-08, 0.5rem);padding:var(--spacing-16, 1rem);padding-top:0;background-color:var(--light, #ffffff)}.content .container.alternate{padding-top:var(--spacing-08, 0.5rem);padding-bottom:0;background-color:var(--stable-ultralight, #fafafa)}.content .container ::slotted(*){display:block;height:calc((100vh - 24rem) / 2)}.title{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-bottom:var(--spacing-08, 0.5rem);font-weight:bold;font-size:var(--font-size-20, 1.25rem)}.title .flex{-ms-flex:1;flex:1}.title .see-all{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;color:var(--app-color, #5a30f4);font-size:var(--font-size-14, 0.875rem);cursor:pointer}.title .see-all yoo-icon{margin-left:var(--spacing-08, 0.5rem)}:host(.bordered) .container{border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host(.small-font) .content .title{font-size:var(--font-size-14, 0.875rem)}:host(.two-rows) .content .container ::slotted(*){height:calc((100vh - 16rem) / 2)}:host(.single-row) .content .container ::slotted(*){height:calc(100vh - 20rem)}:host(.mobile) .content .container.alternate{-ms-flex:initial;flex:initial}:host(.mobile) .content .container ::slotted(*){height:inherit}";
 
@@ -16,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) }, index$1.translate('YOOBICSEEALL')));
+    return (index.h("div", { class: "see-all", onClick: () => this.seeAllClicked.emit(seeAllType) }, overlays.translate('YOOBICSEEALL')));
   }
   renderConfig(config) {
-    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 }));
+    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 }));
   }
   render() {
     var _a;

package/dist/cjs/yoo-layout-tabs.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-6482c595.js');
+require('./index-6886c6f7.js');
+const overlays = require('./overlays-94c28a17.js');
 require('./lodash-597bda6d.js');
+require('./index-920990f8.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
 
 const layoutTabsCss = ":host{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column}";
 
@@ -16,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, index$1.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, overlays.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) }));