@yoobic/yobi 8.3.0-9 → 8.3.0

package/dist/collection/feature-platform/admin/draw-flow/draw-flow.js

@@ -1,22 +1,27 @@
-import { findParent, translate } from '@shared/utils';
-import { Component, Event, forceUpdate, h, Method, Prop } from '@stencil/core';
+import { findParent, showContextMenu, translate } from '@shared/utils';
+import { Component, Event, forceUpdate, h, Host, Method, Prop } from '@stencil/core';
 import Drawflow from 'drawflow';
+import { isEmpty, keys, max } from 'lodash-es';
 export class YooDrawFlowComponent {
   constructor() {
-    this.exportTriggers = ['nodeCreated', 'nodeRemoved', 'nodeMoved', 'connectionCreated', 'connectionRemoved', 'moduleCreated', 'moduleChanged', 'moduleRemoved'];
+    this.exportTriggers = ['nodeCreated', 'nodeRemoved', 'nodeMoved', 'connectionCreated', 'connectionRemoved', 'moduleCreated', 'moduleChanged', 'moduleRemoved', 'zoom', 'translate'];
   }
   async addBlock(block) {
-    var _a, _b, _c;
-    const nodeRegister = this.editor.noderegister;
-    const isBlockRegistered = nodeRegister[block.type] ? true : false;
-    const template = `
-    <div>
-      <div class="title-box"><yoo-icon name="settings" ></yoo-icon>${translate(block.title)} </div>
-      <div class="title-description">${translate((_a = block.config) === null || _a === void 0 ? void 0 : _a.description)}</div>
-    </div>
-    `;
-    this.editor.addNode(block.type, (_b = block.config) === null || _b === void 0 ? void 0 : _b.inputsNumber, (_c = block.config) === null || _c === void 0 ? void 0 : _c.outputsNumber, 150, 300, block.category, block, isBlockRegistered ? block.type : template, isBlockRegistered);
-    // this.editor.addNode('facebook', 0, 1, 10, 10, 'facebook', {}, facebook, undefined);
+    var _a, _b;
+    const html = this.getNodeTemplate(block);
+    let x = 10;
+    let y = 10;
+    if (this.lastCreatedId) {
+      const previousNode = this.editor.getNodeFromId(this.lastCreatedId);
+      x = previousNode.pos_x + 250;
+      y = previousNode.pos_y; // + 250;
+    }
+    this.editor.addNode(block.type, (_a = block.config) === null || _a === void 0 ? void 0 : _a.inputsNumber, (_b = block.config) === null || _b === void 0 ? void 0 : _b.outputsNumber, x, y, block.category, {
+      title: block.title,
+      category: block.category,
+      type: block.type,
+      slotName: block.slotName
+    }, html, false);
   }
   async updateNodeConfig(nodeId, config) {
     const node = this.editor.getNodeFromId(nodeId);
@@ -24,28 +29,103 @@ export class YooDrawFlowComponent {
     this.editor.updateNodeDataFromId(nodeId, node.data);
     this.onUpdate();
   }
+  async updateConnectionNodes(nodeId) {
+    this.editor.updateConnectionNodes(`node-${nodeId}`);
+  }
+  async clear() {
+    this.editor.clear();
+    this.lastCreatedId = null;
+    this.editor.zoom = 1;
+    this.editor.canvas_x = 0;
+    this.editor.canvas_y = 0;
+    this.editor.zoom_refresh();
+    const data = this.editor.export();
+    this.flowUpdated.emit(data);
+  }
   componentDidLoad() {
+    var _a, _b, _c, _d, _e, _f, _g;
     this.editor = new Drawflow(this.containerEl);
     this.editor.reroute = true;
     this.editor.editor_mode = 'edit';
-    this.registerNodes();
     this.registerEvents();
     this.editor.on('nodeSelected', () => { });
     this.editor.on('click', (ev) => {
-      var _a, _b;
-      if (((_b = (_a = ev.target) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'yoo-icon' && ev.target.name === 'settings') {
-        // ev.stopPropagation();
-        const nodeId = findParent(ev.target, '.drawflow-node').id;
+      var _a, _b, _c, _d;
+      if (((_b = (_a = ev.target) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'yoo-icon' && ev.target.name === 'more') {
+        const icon = ev.target;
+        const nodeId = findParent(icon, '.drawflow-node').id;
         if (nodeId) {
           const node = this.editor.getNodeFromId(nodeId.replace('node-', ''));
-          setTimeout(() => this.blockSelected.emit(node), 200);
+          const box = icon.getBoundingClientRect();
+          setTimeout(() => {
+            this.showContextMenu(node, box.x, box.y, icon);
+          }, 100);
+        }
+      }
+      else if (((_d = (_c = ev.target) === null || _c === void 0 ? void 0 : _c.tagName) === null || _d === void 0 ? void 0 : _d.toLowerCase()) === 'yoo-collapsible') {
+        this.toggleCollapsed(ev.target);
+      }
+    });
+    this.editor.on('nodeCreated', (id) => {
+      const node = this.editor.getNodeFromId(id);
+      if (this.lastCreatedId) {
+        const previousNode = this.editor.getNodeFromId(this.lastCreatedId);
+        if (!isEmpty(previousNode.outputs) && !isEmpty(node.inputs)) {
+          this.editor.addConnection(previousNode.id, node.id, 'output_1', 'input_1');
         }
       }
+      this.lastCreatedId = id;
+      this.editor.container.querySelector('#node-' + id + ' yoo-collapsible').collapsed = false;
+    });
+    this.editor.on('nodeRemoved', (id) => {
+      if (this.lastCreatedId === id) {
+        this.lastCreatedId = null;
+      }
     });
+    this.editor.zoom = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.zoom) || this.editor.zoom;
+    this.editor.canvas_x = ((_b = this.config) === null || _b === void 0 ? void 0 : _b.canvas_x) || this.editor.canvas_x;
+    this.editor.canvas_y = ((_c = this.config) === null || _c === void 0 ? void 0 : _c.canvas_y) || this.editor.canvas_y;
+    this.editor.editor_mode = this.editor.editor_mode || ((_d = this.config) === null || _d === void 0 ? void 0 : _d.editor_mode);
     this.editor.start();
     if (this.config) {
       this.editor.import(this.config);
     }
+    if (this.editor.zoom !== 1) {
+      this.editor.zoom_refresh();
+    }
+    const nodeIds = keys((_g = (_f = (_e = this === null || this === void 0 ? void 0 : this.config) === null || _e === void 0 ? void 0 : _e.drawflow) === null || _f === void 0 ? void 0 : _f.Home) === null || _g === void 0 ? void 0 : _g.data).map((k) => parseInt(k));
+    this.lastCreatedId = max(nodeIds);
+    if (!(this.lastCreatedId > 0)) {
+      this.lastCreatedId = null;
+    }
+  }
+  showContextMenu(node, pageX, pageY, hostElement) {
+    return showContextMenu({ pageX, pageY }, {
+      multipleSelection: false,
+      contentButtons: [{
+          text: translate('DELETE'),
+          handler: () => {
+            if (this.lastCreatedId === node.id) {
+              this.lastCreatedId = null;
+            }
+            this.editor.removeNodeId('node-' + node.id);
+            this.onUpdate();
+          }
+        }],
+      className: 'width-unset',
+      hostElement
+    });
+  }
+  toggleCollapsed(target) {
+    var _a;
+    if (((_a = target === null || target === void 0 ? void 0 : target.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'yoo-collapsible') {
+      const nodeId = findParent(target, '.drawflow-node').id;
+      if (nodeId) {
+        const node = this.editor.getNodeFromId(nodeId.replace('node-', ''));
+        this.blockToggled.emit({ node, collasped: target.shadowRoot.firstChild.classList.contains('collapsed') });
+        this.updateConnectionNodes(node.id);
+      }
+    }
   }
   registerEvents() {
     this.exportTriggers.forEach((event) => {
@@ -54,14 +134,9 @@ export class YooDrawFlowComponent {
       });
     });
   }
-  registerNodes() {
-    // const html = document.createElement('div');
-    // html.innerHTML = 'Hello Drawflow!!';
-    // this.editor.registerNode('datasetcreated', html, {}, {});
-  }
   onUpdate() {
     const data = this.editor.export();
-    this.flowUpdated.emit(data);
+    this.flowUpdated.emit({ ...data, zoom: this.editor.zoom, canvas_x: this.editor.canvas_x, canvas_y: this.editor.canvas_y, editor_mode: this.editor.editor_mode });
   }
   onToggleEditMode() {
     if (this.editor.editor_mode === 'edit') {
@@ -70,6 +145,7 @@ export class YooDrawFlowComponent {
     else {
       this.editor.editor_mode = 'edit';
     }
+    this.onUpdate();
     forceUpdate(this);
   }
   onZoomOut() {
@@ -84,18 +160,63 @@ export class YooDrawFlowComponent {
     var _a;
     (_a = this.editor) === null || _a === void 0 ? void 0 : _a.zoom_reset();
   }
+  onCollapseAll() {
+    this.editor.container.querySelectorAll('yoo-collapsible').forEach((target) => {
+      target.collapsed = true;
+      this.toggleCollapsed(target);
+    });
+  }
+  onExpandAll() {
+    this.editor.container.querySelectorAll('yoo-collapsible').forEach((target) => {
+      target.collapsed = false;
+      this.toggleCollapsed(target);
+    });
+  }
+  getNodeTemplate(block) {
+    const template = `
+      <div class="block-container">
+      <yoo-collapsible 
+        class="bold full-width drawfow"
+        header="${translate(block.title)}"
+        icon="${block.icon}" 
+        icon-color="${block.iconColor}"
+        icon-size="medium"
+        toggle-with-arrow-only="true"
+      >
+          <yoo-icon slot="title-extra-icon" name="more" size="small"></yoo-icon>
+          <slot name="block-${block.slotName}"></slot>
+        </yoo-collapsible>
+      </div>
+    `;
+    return template;
+  }
   render() {
-    var _a;
-    return (h("div", { class: "drawflow-container" },
-      h("div", { ref: (el) => (this.containerEl = el), class: "outer-container" }),
-      h("div", { class: "toolbar" },
-        h("yoo-icon", { name: ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.editor_mode) === 'fixed' ? 'unlocked' : 'lock', size: "medium", onClick: () => this.onToggleEditMode() }),
-        h("div", { class: "spacing" }),
-        h("yoo-icon", { name: "circle-minor", size: "medium", onClick: () => this.onZoomOut() }),
-        h("yoo-icon", { name: "circle1", size: "medium", onClick: () => this.onZoomReset() }),
-        h("yoo-icon", { name: "circle-plus", size: "medium", onClick: () => this.onZoomIn() }))));
+    var _a, _b;
+    // class needed for the context menu display
+    return h(Host, { class: "camera-container" },
+      h("div", { class: "drawflow-container" },
+        h("div", { ref: (el) => (this.containerEl = el), class: "outer-container" }),
+        h("div", { class: "toolbar" },
+          h("div", { class: "button-container" },
+            h("yoo-tooltip", { hoverable: true, placement: "top", content: translate('YOOBICDRAWFLOWEXPANDALL') },
+              h("yoo-icon", { color: "light", name: "maximize-web", size: "medium", onClick: () => this.onExpandAll() })),
+            h("yoo-tooltip", { hoverable: true, placement: "top", content: translate('YOOBICDRAWFLOWCOLLAPSEALL') },
+              h("yoo-icon", { color: "light", name: "minimize-web", size: "medium", onClick: () => this.onCollapseAll() }))),
+          h("div", { class: "flex" }),
+          h("div", { class: "button-container" },
+            h("yoo-tooltip", { hoverable: true, placement: "top", content: translate(((_a = this.editor) === null || _a === void 0 ? void 0 : _a.editor_mode) === 'fixed' ? 'YOOBICDRAWFLOWUNLOCK' : 'YOOBICDRAWFLOWLOCK') },
+              h("yoo-icon", { color: "light", name: ((_b = this.editor) === null || _b === void 0 ? void 0 : _b.editor_mode) === 'fixed' ? 'unlocked' : 'lock', size: "medium", onClick: () => this.onToggleEditMode() }))),
+          h("div", { class: "spacing" }),
+          h("div", { class: "button-container" },
+            h("yoo-tooltip", { hoverable: true, placement: "top", content: translate('YOOBICDRAWFLOWZOOMRESET') },
+              h("yoo-icon", { color: "light", name: "gps", size: "medium", onClick: () => this.onZoomReset() })),
+            h("yoo-tooltip", { hoverable: true, placement: "top", content: translate('YOOBICDRAWFLOWZOOMOUT') },
+              h("yoo-icon", { color: "light", name: "zoom-out", size: "medium", onClick: () => this.onZoomOut() })),
+            h("yoo-tooltip", { hoverable: true, placement: "top", content: translate('YOOBICDRAWFLOWZOOMIN') },
+              h("yoo-icon", { color: "light", name: "zoom-in", size: "medium", onClick: () => this.onZoomIn() }))))));
   }
   static get is() { return "yoo-draw-flow"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
     "$": ["draw-flow.scss"]
   }; }
@@ -104,21 +225,24 @@ export class YooDrawFlowComponent {
   }; }
   static get properties() { return {
     "config": {
-      "type": "any",
+      "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+        "original": "IDrawflowExport",
+        "resolved": "IDrawflowExport",
+        "references": {
+          "IDrawflowExport": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
         "text": ""
-      },
-      "attribute": "config",
-      "reflect": false
+      }
     }
   }; }
   static get events() { return [{
@@ -132,9 +256,34 @@ export class YooDrawFlowComponent {
         "text": ""
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+        "original": "{ node: DrawflowNode, edit: boolean }",
+        "resolved": "{ node: DrawflowNode; edit: boolean; }",
+        "references": {
+          "DrawflowNode": {
+            "location": "import",
+            "path": "drawflow"
+          }
+        }
+      }
+    }, {
+      "method": "blockToggled",
+      "name": "blockToggled",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{ node: DrawflowNode, collasped: boolean }",
+        "resolved": "{ node: DrawflowNode; collasped: boolean; }",
+        "references": {
+          "DrawflowNode": {
+            "location": "import",
+            "path": "drawflow"
+          }
+        }
       }
     }, {
       "method": "flowUpdated",
@@ -147,15 +296,20 @@ export class YooDrawFlowComponent {
         "text": ""
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+        "original": "IDrawflowExport",
+        "resolved": "IDrawflowExport",
+        "references": {
+          "IDrawflowExport": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
       }
     }]; }
   static get methods() { return {
     "addBlock": {
       "complexType": {
-        "signature": "(block: ICustomActionComponent) => Promise<void>",
+        "signature": "(block: IBaseCustomActionComponent) => Promise<void>",
         "parameters": [{
             "tags": [],
             "text": ""
@@ -164,7 +318,7 @@ export class YooDrawFlowComponent {
           "Promise": {
             "location": "global"
           },
-          "ICustomActionComponent": {
+          "IBaseCustomActionComponent": {
             "location": "import",
             "path": "@shared/interfaces"
           }
@@ -201,6 +355,41 @@ export class YooDrawFlowComponent {
         "text": "",
         "tags": []
       }
+    },
+    "updateConnectionNodes": {
+      "complexType": {
+        "signature": "(nodeId: number) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "clear": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
     }
   }; }
 }

package/dist/collection/feature-platform/app/app/app.js

@@ -1,4 +1,4 @@
-import { ScreenOrientation } from '@ionic-native/screen-orientation';
+import { ScreenOrientation } from '@awesome-cordova-plugins/screen-orientation';
 import { isAndroid, isIpad, isIpadPro, isNativeMobile, isTablet, loadTranslations, setCurrentLanguage } from '@shared/utils';
 import { Component, Element, forceUpdate, h, Prop } from '@stencil/core';
 export class YooAppComponent {
@@ -83,7 +83,7 @@ export class YooAppComponent {
       "mutable": false,
       "complexType": {
         "original": "IAppPermissions",
-        "resolved": "{ canAddBluetoothDevices: boolean; canArchiveLearners: boolean; canAskQuestion: boolean; canAssignCourse: boolean; canBroadcast: boolean; canCreateCommunity: boolean; canChat: boolean; canChatMultiple: boolean; canChatSingle: boolean; canCreateBattles: boolean; canViewCommunities: boolean; canCreateCampaignAudit: boolean; canCreateCampaignMission: boolean; canCreateCampaignPoll: boolean; canCreateCampaignRequest: boolean; canCreateCampaigns: boolean; canCreateCourse: boolean; canCreateCustomApps: boolean; canCreateAppMixer: boolean; canCreateDashboard: boolean; canCreateDocument: boolean; canCreateFeed: boolean; canCreateFeedNoValidation: boolean; canCreateIncentives: boolean; canCreateMemo: boolean; canCreatePublicEvent: boolean; canCreateService: boolean; canCreateCampaignTodo: boolean; canCreateCampaignQuicktask: boolean; canCreateCampaignQuicktaskMobile: boolean; canCreateVisit: boolean; canCreateWiki: boolean; canDeleteQuestion: boolean; canEditOrPauseMissions: boolean; canEditProject: boolean; canEditWorkflow: boolean; canInviteNewLearners: boolean; canManageLiveShopping: boolean; canNotifyUsers: boolean; canReassignMission: boolean; canReceiveService: boolean; canScheduleMission: boolean; canSendCourseReminders: boolean; canSendRemindersToAll: boolean; canShareByEmail: boolean; canShareFeed: boolean; canSocialShare: boolean; canValidate: boolean; canValidateVisit: boolean; canVerifyQuestion: boolean; canVideoCall: boolean; canViewActionPlans: boolean; canViewAisle: boolean; canViewAICatalog: boolean; canViewAISuggestions: boolean; canViewAllPolls: boolean; canViewCalendar: boolean; canViewCampaignAnalytics: boolean; canViewCampaignNewAnalytics: boolean; canViewCampaigns: boolean; canViewDashboard: boolean; canViewDatabase: boolean; canViewDocuments: boolean; canViewEngagementAnalytics: boolean; canViewFeed: boolean; canViewHealthscore: boolean; canViewInsightsActiveUsers: boolean; canViewInsightsOperate: boolean; canViewInsightsLearning: boolean; canViewInsightsEngagement: boolean; canViewIncentives: boolean; canViewInsight: boolean; canViewInsights: boolean; canViewInsightsOverviewAnalytics: boolean; canViewInventory: boolean; canViewLeaderboard: boolean; canViewLearningManager: boolean; canViewLiveShopping: boolean; canViewLocationDetailTabs: boolean; canViewMemo: boolean; canViewMicrolearning: boolean; canViewMissionAnalysis: boolean; canViewMissionsMore: boolean; canViewOthersCalendar: boolean; canViewPoll: boolean; canViewPollAnalytics: boolean; canViewPriceActions: boolean; canViewProductBatch: boolean; canViewProductBatchKpis: boolean; canViewProject: boolean; canViewQuestion: boolean; canViewQuestionKnowledgeBase: boolean; canViewQuestionKnowledgeLibrary: boolean; canViewQuestionKnowledgeBaseInDocuments: boolean; canViewSalesAIAnalytics: boolean; canViewScorm: boolean; canViewService: boolean; canViewServiceAnalytics: boolean; canViewStoreCampaignInsights: boolean; canViewStoreInsights: boolean; canViewManagerInsights: boolean; canViewStoreVisits: boolean; canViewTaskAnalytics: boolean; canViewTodoAnalytics: boolean; canViewUsers: boolean; canViewUsersOrStores: boolean; canViewVirtualShopping: boolean; canViewVirtualShoppingAnalytics: boolean; canViewWaitlist: boolean; canViewWaitlistAnalytics: boolean; canViewYext: boolean; hasBoost: boolean; hasDataset: boolean; hasOperations: boolean; hasRetailNext: boolean; hasWorkflow: boolean; hasMemos: boolean; isAdmin: boolean; isStore: boolean; }",
+        "resolved": "{ canAddBluetoothDevices: boolean; canArchiveLearners: boolean; canAskQuestion: boolean; canAssignCourse: boolean; canBroadcast: boolean; canCreateCommunity: boolean; canChat: boolean; canChatMultiple: boolean; canChatSingle: boolean; canCreateBattles: boolean; canViewCommunities: boolean; canCreateCampaignAudit: boolean; canCreateCampaignMission: boolean; canCreateCampaignPoll: boolean; canCreateCampaignRequest: boolean; canCreateCampaigns: boolean; canCreateCourse: boolean; canCreateCustomApps: boolean; canCreateAppMixer: boolean; canCreateDashboard: boolean; canCreateDocument: boolean; canCreateFeed: boolean; canCreateFeedNoValidation: boolean; canCreateIncentives: boolean; canCreateMemo: boolean; canCreatePublicEvent: boolean; canCreateService: boolean; canCreateCampaignTodo: boolean; canCreateCampaignQuicktask: boolean; canCreateCampaignQuicktaskMobile: boolean; canCreateVisit: boolean; canCreateWiki: boolean; canDeleteQuestion: boolean; canEditOrPauseMissions: boolean; canEditProject: boolean; canEditWorkflow: boolean; canInviteNewLearners: boolean; canManageLiveShopping: boolean; canNotifyUsers: boolean; canReassignMission: boolean; canReceiveService: boolean; canScheduleMission: boolean; canSendCourseReminders: boolean; canSendRemindersToAll: boolean; canShareByEmail: boolean; canShareFeed: boolean; canSocialShare: boolean; canValidate: boolean; canValidateVisit: boolean; canVerifyQuestion: boolean; canVideoCall: boolean; canViewActionPlans: boolean; canViewAisle: boolean; canViewAICatalog: boolean; canViewAISuggestions: boolean; canViewAllPolls: boolean; canViewCalendar: boolean; canViewCampaignAnalytics: boolean; canViewCampaignNewAnalytics: boolean; canViewCampaigns: boolean; canViewDashboard: boolean; canViewDatabase: boolean; canViewDocuments: boolean; canViewEngagementAnalytics: boolean; canViewFeed: boolean; canViewHealthscore: boolean; canViewInsightsActiveUsers: boolean; canViewInsightsOperate: boolean; canViewInsightsLearning: boolean; canViewInsightsEngagement: boolean; canViewIncentives: boolean; canViewInsight: boolean; canViewInsights: boolean; canViewInsightsOverviewAnalytics: boolean; canViewInventory: boolean; canViewJourneys: boolean; canViewLeaderboard: boolean; canViewLearningManager: boolean; canViewLiveShopping: boolean; canViewLocationDetailTabs: boolean; canViewMemo: boolean; canViewMenuCreate: boolean; canViewMicrolearning: boolean; canViewMissionAnalysis: boolean; canViewMissionsMore: boolean; canViewOthersCalendar: boolean; canViewPoll: boolean; canViewPollAnalytics: boolean; canViewPriceActions: boolean; canViewProductBatch: boolean; canViewProductBatchKpis: boolean; canViewProject: boolean; canViewQuestion: boolean; canViewQuestionKnowledgeBase: boolean; canViewQuestionKnowledgeLibrary: boolean; canViewQuestionKnowledgeBaseInDocuments: boolean; canViewSalesAIAnalytics: boolean; canViewScorm: boolean; canViewService: boolean; canViewServiceAnalytics: boolean; canViewStoreCampaignInsights: boolean; canViewStoreInsights: boolean; canViewManagerInsights: boolean; canViewStoreVisits: boolean; canViewTaskAnalytics: boolean; canViewTodoAnalytics: boolean; canViewUsers: boolean; canViewUsersOrStores: boolean; canViewVirtualShopping: boolean; canViewVirtualShoppingAnalytics: boolean; canViewWaitlist: boolean; canViewWaitlistAnalytics: boolean; canViewYext: boolean; hasBoost: boolean; hasDataset: boolean; hasOperations: boolean; hasRetailNext: boolean; hasWorkflow: boolean; hasMemos: boolean; isAdmin: boolean; isStore: boolean; }",
         "references": {
           "IAppPermissions": {
             "location": "import",

package/dist/collection/feature-platform/app/widget-tile/widget-tile.js

@@ -5,7 +5,7 @@ export class YooWidgetTileComponent {
     return (h(Host, { class: { [this.layout]: true } },
       h("div", { class: { 'outer-container': true, [this.layout]: true, hasPhoto: !!this.photo }, style: { background: this.backgroundColor, color: this.iconColor } },
         !!this.photo && h("div", { class: "overlay" }),
-        this.photo && h("yoo-img", { type: "background", class: "image", scaledUp: true, src: this.photo }),
+        this.photo && h("yoo-img", { type: "background", class: "image", scaledUp: true, disableAspectRatioCalc: true, src: this.photo }),
         this.icon ? h("yoo-icon", { size: "large", name: this.icon, class: { 'custom': !!this.iconColor }, style: { fill: this.iconColor } }) : null,
         h("div", { class: "tile-text" }, translateMulti(this.text)),
         h("slot", null))));

package/dist/collection/feature-platform/insight/chart/chart.js

@@ -18,7 +18,7 @@ export class YooChartComponent {
           text: this.definition.title,
           style: { color: '#000', fontSize: '13px' },
           align: 'center',
-          y: this.definition.type === 'pie' ? 50 : 20
+          y: this.definition.type === 'pie' || this.definition.type === 'doughnut' ? 50 : 20
         }
       });
       if (svg && (x > 0 || y > 0)) {
@@ -40,7 +40,7 @@ export class YooChartComponent {
           text: this.definition.title,
           style: { color: '#000', fontSize: '13px' },
           align: 'center',
-          y: this.definition.type === 'pie' ? 50 : 20
+          y: this.definition.type === 'pie' || this.definition.type === 'doughnut' ? 50 : 20
         }
       });
     }
@@ -233,7 +233,7 @@ export class YooChartComponent {
         }
       };
     }
-    if (options.chart.type !== 'pie') {
+    if (options.chart.type !== 'pie' && options.chart.type !== 'doughnut') {
       options.plotOptions.series.events = {
         legendItemClick() {
           if (chartCmp.chartLegendItemClick) {

package/dist/collection/feature-platform/insight/kpi-external/kpi-external.js

@@ -15,24 +15,24 @@ export class YooKpiExternalComponent {
   componentWillLoad() {
     this.frameId = 'external-dashboard-' + YooKpiExternalComponent.componentCounter;
   }
+  getTableauConfig() {
+    const config = {
+      url: this.config.url,
+      acls: this.config.acls,
+      filters: [...ACL_FILTERS],
+      height: '100%',
+      width: '100%',
+      containerId: 'tableau-container',
+      device: 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';
-    let config;
     if (isProviderTableau && (isIOS() && isNativeMobile())) {
       return h("yoo-button", { style: { 'margin': '1rem' }, onClick: () => this.openInFullscreen.emit(true), size: "large", color: "app-color" }, translate('APPCREATORACTIONOPENMODAL'));
     }
-    if (isProviderTableau) {
-      config = {
-        url: this.config.url,
-        acls: this.config.acls,
-        filters: [...ACL_FILTERS],
-        height: '100%',
-        width: '100%',
-        containerId: 'tableau-container',
-        device: 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 ${isWeb(this.host) ? 'allow-top-navigation-by-user-activation allow-downloads allow-popups' : ''}`,
@@ -43,7 +43,7 @@ export class YooKpiExternalComponent {
     return h("iframe", { ...props, onLoad: () => {
         if (this.frameEl && isProviderTableau) {
           const doc = (this.frameEl.contentWindow || this.frameEl.contentDocument);
-          doc.onIFrameLoaded(config);
+          doc.onIFrameLoaded(this.getTableauConfig());
         }
       }, ref: (el) => this.frameEl = el });
   }