@yoobic/yobi 8.7.5 → 8.7.6

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

@@ -1,21 +0,0 @@
-import { r as registerInstance, h } from './index-23b437f1.js';
-import './index-8968d0fb.js';
-import { ae as translateMulti, t as translate, r as pipes } from './index-339f53e6.js';
-import './lodash-8307f78b.js';
-import './index-c1ffdb32.js';
-import './_commonjsHelpers-f4d11124.js';
-
-const dashboardDetailCss = "svg:not(:root){overflow:hidden}:host .container{padding:0.5rem}:host .container .title{font-size:var(--font-size-18, 1.125rem)}:host .container .description html,:host .container .description body,:host .container .description div:not([class^=fr-]),:host .container .description span:not([class^=fr-]),:host .container .description img:not([class^=fr-]),:host .container .description applet,:host .container .description object,:host .container .description iframe,:host .container .description h1,:host .container .description h2,:host .container .description h3,:host .container .description h4,:host .container .description h5,:host .container .description h6,:host .container .description p,:host .container .description blockquote,:host .container .description pre,:host .container .description a,:host .container .description abbr,:host .container .description acronym,:host .container .description address,:host .container .description big,:host .container .description cite,:host .container .description code,:host .container .description del,:host .container .description dfn,:host .container .description em,:host .container .description font,:host .container .description ins,:host .container .description kbd,:host .container .description q,:host .container .description s,:host .container .description samp,:host .container .description small,:host .container .description strike,:host .container .description strong,:host .container .description sub,:host .container .description sup,:host .container .description tt,:host .container .description var,:host .container .description dl,:host .container .description dt,:host .container .description dd,:host .container .description ol,:host .container .description ul,:host .container .description li,:host .container .description fieldset,:host .container .description form,:host .container .description label,:host .container .description legend,:host .container .description table,:host .container .description caption,:host .container .description tbody,:host .container .description tfoot,:host .container .description thead,:host .container .description tr,:host .container .description th{margin:0;padding:0;font-weight:inherit;font-size:100%;font-family:inherit;font-style:inherit;vertical-align:baseline;border:0;outline:0;-webkit-margin-before:0;-webkit-margin-after:0;-webkit-margin-start:0;-webkit-margin-end:0}:host .container .date{color:var(--text-color, #807f83)}";
-
-const YooDashboardDetailComponent = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.dashboard = undefined;
-  }
-  render() {
-    return h("div", { class: "container" }, h("div", { class: "title" }, translateMulti(this.dashboard.title)), h("div", { class: "description", innerHTML: translateMulti(this.dashboard.description || '') }), this.dashboard._lmt ? (h("div", { class: "date" }, translate('EDITEDON'), ": ", pipes.dateFormat.transform(this.dashboard._lmt, translate('FORMATDATE')))) : null);
-  }
-};
-YooDashboardDetailComponent.style = dashboardDetailCss;
-
-export { YooDashboardDetailComponent as yoo_dashboard_detail };

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

@@ -1,299 +0,0 @@
-import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-23b437f1.js';
-import { i as isIntersectionObserverSupported, c as intersectionObserve } from './index-8968d0fb.js';
-import { g as getAppContext } from './common-helpers-6a15cd02.js';
-import { t as translate, H as isWeb, co as showActionSheet, ae as translateMulti } from './index-339f53e6.js';
-import './lodash-8307f78b.js';
-import './index-c1ffdb32.js';
-import './_commonjsHelpers-f4d11124.js';
-
-const kpiContainerCss = "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 .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{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;overflow:hidden;font-weight:bold;text-align:start}:host .heading .title .title-content{-ms-flex:1;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}: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 .animated-illustration{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 .animated-illustration yoo-animated-illustration{height:6.25rem}:host .animated-illustration 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}";
-
-const YooKpiContainerComponent = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.showDetail = createEvent(this, "showDetail", 7);
-    this.kpiClick = createEvent(this, "kpiClick", 7);
-    this.kpiLinkClick = createEvent(this, "kpiLinkClick", 7);
-    this.kpiDoubleClick = createEvent(this, "kpiDoubleClick", 7);
-    this.kpiLegendItemClick = createEvent(this, "kpiLegendItemClick", 7);
-    this.kpiToggleTable = createEvent(this, "kpiToggleTable", 7);
-    this.toggleInScrollView = createEvent(this, "toggleInScrollView", 7);
-    this.kpiEdit = createEvent(this, "kpiEdit", 7);
-    this.kpiEdited = createEvent(this, "kpiEdited", 7);
-    this.kpiUpdateColors = createEvent(this, "kpiUpdateColors", 7);
-    this.kpiDelete = createEvent(this, "kpiDelete", 7);
-    this.kpiDuplicate = createEvent(this, "kpiDuplicate", 7);
-    this.kpiCopyToAnotherTab = createEvent(this, "kpiCopyToAnotherTab", 7);
-    this.kpiChartChangeType = createEvent(this, "kpiChartChangeType", 7);
-    this.kpiToggleToolsPanel = createEvent(this, "kpiToggleToolsPanel", 7);
-    this.kpiViewInfo = createEvent(this, "kpiViewInfo", 7);
-    this.kpiRefresh = createEvent(this, "kpiRefresh", 7);
-    this.chartClass = undefined;
-    this.heading = undefined;
-    this.type = undefined;
-    this.config = undefined;
-    this.isInDashboard = undefined;
-    this.disableResize = undefined;
-    this.size = undefined;
-    this.isFullScreen = undefined;
-    this.isFullHeight = undefined;
-    this.definition = undefined;
-    this.forceAnimatedIllustration = undefined;
-    this.isFormPreview = undefined;
-    this.hideHeader = undefined;
-    this.isEditMode = undefined;
-    this.hasError = undefined;
-    this.hasErrorTooMuchData = undefined;
-    this.dontRender = undefined;
-    this.disableAnimation = undefined;
-    this.chartTypes = undefined;
-    this.isLoading = undefined;
-    this.isInScrollView = undefined;
-  }
-  async getSVG(width, height, x, y, margin = 0) {
-    if (this.kpi) {
-      return this.kpi.getSVG(width, height, x, y, margin);
-    }
-    return Promise.resolve('');
-  }
-  async toogleToolsPanel() {
-    if (this.kpi) {
-      this.kpi.toogleToolsPanel();
-    }
-  }
-  async resize() {
-    var _a;
-    (_a = this.kpi) === null || _a === void 0 ? void 0 : _a.resize();
-  }
-  async setLoading(loading) {
-    this.isLoading = loading;
-  }
-  componentWillLoad() {
-    this.initButtons();
-  }
-  componentDidLoad() {
-    this.observe();
-  }
-  onChangeEditMode() {
-    this.initButtons();
-  }
-  observe() {
-    this.removeIntersectionObserver();
-    if (isIntersectionObserverSupported()) {
-      this.addIntersectionObserver();
-    }
-    else {
-      this.markAsIntoView();
-    }
-  }
-  addIntersectionObserver() {
-    this.intersectionObserver = intersectionObserve(this.host, (nodes) => {
-      nodes.forEach((node) => {
-        if (node.isIntersecting) {
-          this.markAsIntoView();
-          this.removeIntersectionObserver();
-        }
-      });
-    }, {
-      rootMargin: '30px'
-    });
-  }
-  markAsIntoView() {
-    this.isInScrollView = true;
-    this.toggleInScrollView.emit(true);
-  }
-  removeIntersectionObserver() {
-    if (this.intersectionObserver) {
-      this.intersectionObserver.unobserve(this.host);
-      this.intersectionObserver.disconnect();
-      this.intersectionObserver = undefined;
-    }
-  }
-  connectedCallback() {
-    this.observe();
-  }
-  disconnectedCallback() {
-    this.removeIntersectionObserver();
-  }
-  initButtons() {
-    var _a, _b, _c, _d;
-    this.buttons = [{ text: translate('REFRESH'), icon: 'refresh', handler: () => this.onRefresh(), separator: true }];
-    if (this.isInDashboard && (this.type === 'chart' || this.type === 'grid')) {
-      this.buttons.push({ text: translate('KPIVIEWINFO'), icon: 'info', handler: () => this.onViewInfo(), separator: true });
-    }
-    if (this.isEditMode) {
-      if (this.type === 'chart') {
-        this.buttons.push({ text: translate('COLOR'), icon: 'theme', handler: () => this.onUpdateColors() });
-        if (this.chartTypes.length > 1) {
-          this.buttons.push({
-            text: translate('GRAPHCHARTTYPE'),
-            icon: 'chart',
-            subMenu: this.chartTypes.map((t) => {
-              var _a;
-              return {
-                text: translate('YOOBIC' + 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)
-              };
-            }),
-            separator: true
-          });
-        }
-      }
-      this.buttons.push({ text: translate('YOOBICEDIT'), icon: 'pen', handler: () => this.onEdit() });
-      this.buttons.push({
-        text: translate('DUPLICATE'),
-        icon: 'duplicate',
-        subMenu: [
-          { text: translate('COPYTOSAMETAB'), handler: () => this.onDuplicate() },
-          { text: translate('COPYTOANOTHERTAB'), handler: () => this.onCopyToAnotherTab() }
-        ]
-      });
-      this.buttons.push({ text: translate('DELETE'), icon: 'delete', actionType: 'delete', handler: () => this.onDelete(), separator: true });
-    }
-    if ((this.type === 'chart' || this.type === 'grid') && isWeb(this.host) && !((_b = (_a = this.definition) === null || _a === void 0 ? void 0 : _a.kpiFormValues) === null || _b === void 0 ? void 0 : _b.allowScroll)) {
-      this.buttons.push({ text: translate('EXPORTCSV'), icon: 'file-csv', handler: () => this.onExportCSV() });
-    }
-    if (this.type === 'grid' && isWeb(this.host)) {
-      this.buttons.push({ text: translate('EXPORTEXCEL'), icon: 'file-excel', handler: () => this.onExportXLSX() });
-    }
-    if (this.type === 'chart' && isWeb(this.host) && !((_d = (_c = this.definition) === null || _c === void 0 ? void 0 : _c.kpiFormValues) === null || _d === void 0 ? void 0 : _d.allowScroll)) {
-      this.buttons.push({ text: translate('EXPORTPNG'), icon: 'image', handler: () => this.onExport(), separator: true });
-    }
-  }
-  onShowDialog(index) {
-    this.showDetail.emit(index);
-  }
-  onShowMore(ev, el) {
-    this.initButtons();
-    showActionSheet(this.buttons, null, {}, el, ev);
-  }
-  onEdit() {
-    this.kpiEdit.emit(true);
-  }
-  onViewInfo() {
-    this.kpiViewInfo.emit();
-  }
-  onRefresh() {
-    this.kpiRefresh.emit();
-  }
-  onChangeChartType(t) {
-    this.kpiChartChangeType.emit(t);
-  }
-  onDelete() {
-    this.kpiDelete.emit(true);
-  }
-  onUpdateColors() {
-    this.kpiUpdateColors.emit(this.config);
-  }
-  onDuplicate() {
-    this.kpiDuplicate.emit(true);
-  }
-  onCopyToAnotherTab() {
-    this.kpiCopyToAnotherTab.emit(true);
-  }
-  onExport() {
-    if (this.kpi) {
-      this.kpi.export();
-    }
-  }
-  onExportCSV() {
-    if (this.kpi) {
-      this.kpi.exportCSV();
-    }
-  }
-  onExportXLSX() {
-    if (this.kpi) {
-      this.kpi.exportXLSX();
-    }
-  }
-  onKpiEdited(ev) {
-    ev.stopPropagation();
-    this.kpiEdited.emit(ev.detail);
-  }
-  onKpiClick(ev) {
-    ev.stopPropagation();
-    this.kpiClick.emit(ev.detail);
-  }
-  onKpiLinkClick(ev) {
-    ev.stopPropagation();
-    this.kpiLinkClick.emit(ev.detail);
-  }
-  onKpiDoubleClick(ev) {
-    ev.stopPropagation();
-    this.kpiDoubleClick.emit(ev.detail);
-  }
-  onKpiLegendItemClick(ev) {
-    if (ev && ev.stopPropagation) {
-      ev.stopPropagation();
-    }
-    if (ev && ev.detail) {
-      this.kpiLegendItemClick.emit(ev.detail);
-    }
-  }
-  onToggleTable() {
-    this.kpiToggleTable.emit();
-    // this.showTable = !this.showTable;
-  }
-  onToogleToolsPanel() {
-    this.kpiToggleToolsPanel.emit();
-  }
-  renderKpiContent() {
-    var _a, _b, _c, _d;
-    // 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';
-    const isPowerBI = ((_d = (_c = this.definition) === null || _c === void 0 ? void 0 : _c.kpiFormValues) === null || _d === void 0 ? void 0 : _d.provider) === 'PowerBI';
-    if (this.hasError) {
-      return h("div", { class: "error" }, translate(isPowerBI ? 'YOBICPOWERBILOADINGERROR' : this.hasErrorTooMuchData ? 'CHARTLOADINGERROR' : 'CHARTLOADINGERRORGENERIC'));
-    }
-    else if ((!this.config || this.isLoading) && !this.forceAnimatedIllustration) {
-      return h("yoo-loader", { class: "absolute", size: "large" });
-    }
-    else if (!this.config && this.forceAnimatedIllustration) {
-      return (h("div", { class: "animated-illustration" }, h("yoo-animated-illustration", { type: "nodata" }), h("div", null, translate('LISTEMPTY'))));
-    }
-    return [
-      h("div", { class: 'kpi-container ' + this.type, onClick: () => !isTableau && !isPowerBI && !isWeb(this.host) && this.onShowDialog() }, this.renderKpi())
-    ];
-  }
-  renderKpi() {
-    var _a, _b, _c, _d, _e, _f;
-    let kpiStyle;
-    if (((_c = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.xAxis) === null || _b === void 0 ? void 0 : _b.categories) === null || _c === void 0 ? void 0 : _c.length) && ((_d = this.chartClass) === null || _d === void 0 ? void 0 : _d.includes) && this.chartClass.includes('feed-chart')) {
-      kpiStyle = { maxHeight: `${this.config.xAxis.categories.length * 70}px` };
-    }
-    return !this.dontRender && (h("yoo-kpi", { class: {
-        interactive: true,
-        rounded: (_f = (_e = this.host) === null || _e === void 0 ? void 0 : _e.classList) === null || _f === void 0 ? void 0 : _f.contains('rounded') // only yoobic.com hosted iframes should be interactive
-      }, ref: (el) => (this.kpi = el), config: this.config, photosSrc: this.config.photos, type: this.type, chartClass: this.chartClass, disableAnimation: this.disableAnimation, style: kpiStyle, isFullScreen: this.isFullScreen, isFullHeight: this.isFullHeight, isFormPreview: this.isFormPreview, definition: this.definition,
-      // showTable={this.showTable}
-      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 = translate(descriptionKey);
-    return (h("yoo-tooltip", { clickable: true, content: description, placement: "right", coeffMaxWidth: 0.85 }, 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 (h(Host, { class: {
-        web: isWeb(this.host),
-        [this.type || 'default']: true,
-        ...getAppContext(this.host)
-      } }, h("div", { class: {
-        container: true,
-        fullscreen: this.isFullScreen,
-        'full-height': this.isFullHeight
-      } }, this.isFullScreen || this.hideHeader || !this.isInScrollView ? null : (h("div", { class: "heading" }, this.isEditMode && isWeb(this.host) && (h("yoo-tooltip", { slot: "icon-only", hoverable: isWeb(this.host), content: translate('YOOBICMOVE'), placement: "bottom" }, h("yoo-icon", { class: "margin-right draggable", name: "draggable", color: "stable", size: "medium" }))), h("div", { class: "title" }, h("div", { class: "title-content" }, 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 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) && (h("yoo-tooltip", { slot: "icon-only", hoverable: isWeb(this.host), content: translate('GRAPHLOCKED'), placement: "bottom" }, h("yoo-icon", { name: "lock", color: "dark", size: "medium" }))), this.isEditMode && 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' && (h("yoo-tooltip", { slot: "icon-only", hoverable: isWeb(this.host), content: translate('TOGGLETOOLBOX'), placement: "bottom" }, h("yoo-icon", { name: "settings", color: "stable", size: "medium", onClick: () => this.onToogleToolsPanel() }))), h("yoo-tooltip", { slot: "icon-only", hoverable: isWeb(this.host), content: isWeb(this.host) ? translate('SHOWDATA') : '', placement: "bottom" }, 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' && (h("yoo-tooltip", { slot: "icon-only", hoverable: isWeb(this.host), content: translate('SHOWASTABLE'), placement: "bottom" }, 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' && (h("yoo-tooltip", { slot: "icon-only", hoverable: isWeb(this.host), content: translate('SHOWASCHART'), placement: "bottom" }, 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 && (h("yoo-icon", { ref: (el) => (iconElement = el), slot: "icon-only", name: "more", color: "stable", size: "medium", onClick: (ev) => this.onShowMore(ev, iconElement) })))), h("slot", { name: "start" }), !this.isFullScreen && !this.hideHeader && ((_o = this.definition) === null || _o === void 0 ? void 0 : _o.description) && this.isInScrollView && (h("yoo-truncate", { class: { subheading: true, grid: ((_p = this.definition) === null || _p === void 0 ? void 0 : _p.showAs) === 'grid' }, showEllipsisButton: true, maxLength: 150, content: translateMulti(this.definition.description) })), this.isInScrollView && h("div", { class: "content" }, this.renderKpiContent()), h("slot", null))));
-  }
-  get host() { return getElement(this); }
-  static get watchers() { return {
-    "isEditMode": ["onChangeEditMode"]
-  }; }
-};
-YooKpiContainerComponent.style = kpiContainerCss;
-
-export { YooKpiContainerComponent as yoo_kpi_container };