@yoobic/yobi 8.3.0-5 → 8.3.0-8

package/dist/collection/components/form/form-input/form-input.css

@@ -896,36 +896,36 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   text-align: center;
 }
 
-:host([size=large]:not([readonly]):not(.search)) .input-container {
+:host([size=large]:not([readonly]):not(.search):not([format=contenteditable])) .input-container {
   height: 3rem;
 }
 
-:host([size=medium]:not([readonly]):not(.search)) .input-container {
+:host([size=medium]:not([readonly]):not(.search):not([format=contenteditable])) .input-container {
   height: 2rem;
   font-size: var(--font-size-14, 0.875rem);
   border-radius: var(--border-radius-04, 0.25rem);
 }
-:host([size=medium]:not([readonly]):not(.search)) .input-container input {
+:host([size=medium]:not([readonly]):not(.search):not([format=contenteditable])) .input-container input {
   font-size: var(--font-size-14, 0.875rem);
 }
-:host([size=medium]:not([readonly]):not(.search)) .input-container input::-webkit-input-placeholder {
+:host([size=medium]:not([readonly]):not(.search):not([format=contenteditable])) .input-container input::-webkit-input-placeholder {
   font-size: var(--font-size-14, 0.875rem);
 }
-:host([size=medium]:not([readonly]):not(.search)) .input-container input:-moz-placeholder {
+:host([size=medium]:not([readonly]):not(.search):not([format=contenteditable])) .input-container input:-moz-placeholder {
   font-size: var(--font-size-14, 0.875rem);
 }
-:host([size=medium]:not([readonly]):not(.search)) .input-container input::-moz-placeholder {
+:host([size=medium]:not([readonly]):not(.search):not([format=contenteditable])) .input-container input::-moz-placeholder {
   font-size: var(--font-size-14, 0.875rem);
 }
-:host([size=medium]:not([readonly]):not(.search)) .input-container input:-ms-input-placeholder {
+:host([size=medium]:not([readonly]):not(.search):not([format=contenteditable])) .input-container input:-ms-input-placeholder {
   font-size: var(--font-size-14, 0.875rem);
 }
 
-:host([size=small]:not([readonly]):not(.search)) .input-container {
+:host([size=small]:not([readonly]):not(.search):not([format=contenteditable])) .input-container {
   height: 1.5rem;
   border-radius: var(--border-radius-04, 0.25rem);
 }
-:host([size=small]:not([readonly]):not(.search)) .input-container input {
+:host([size=small]:not([readonly]):not(.search):not([format=contenteditable])) .input-container input {
   font-size: var(--font-size-14, 0.875rem);
 }
 
@@ -945,6 +945,90 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   padding: var(--spacing-04, 0.25rem) var(--spacing-02, 0.125rem) 0 var(--spacing-08, 0.5rem);
 }
 
+:host([format=contenteditable]) .input-container {
+  position: relative;
+  width: 100%;
+  color: var(--stable, #adadad);
+  border: var(--border-width-01, 0.0625rem) solid transparent;
+}
+:host([format=contenteditable]) .input-container .placeholder {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: calc(100% - var(--spacing-16, 1rem));
+  height: 100%;
+  padding: 0 var(--spacing-08, 0.5rem);
+  font-size: var(--input-font-size);
+}
+:host([format=contenteditable]) .input-container .placeholder yoo-icon {
+  display: none;
+}
+:host([format=contenteditable]) .input-container:hover {
+  background-color: var(--stable-light, #f1f1f1);
+}
+:host([format=contenteditable]) .input-container:hover .placeholder yoo-icon {
+  display: block;
+}
+:host([format=contenteditable]) .input-container [contenteditable] {
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: calc(var(--input-font-size) + var(--spacing-16, 1rem));
+  padding: 0 var(--spacing-08, 0.5rem);
+  overflow: auto;
+  font-size: var(--input-font-size);
+  line-height: calc(var(--input-font-size) + var(--spacing-16, 1rem));
+  border: var(--border-width-01, 0.0625rem) solid transparent;
+  border-radius: var(--border-radius-04, 0.25rem);
+  caret-color: var(--app-color, #5a30f4);
+}
+:host([format=contenteditable]) .input-container [contenteditable]:focus {
+  outline: none;
+}
+:host([format=contenteditable]) .input-container .actions {
+  position: absolute;
+  right: 0;
+  display: none;
+}
+:host([format=contenteditable]) .input-container .actions > div {
+  padding-left: var(--spacing-08, 0.5rem);
+}
+:host([format=contenteditable]) .input-container .actions:active {
+  display: flex;
+}
+:host([format=contenteditable]) .input-container.has-value {
+  color: var(--dark, #000000);
+}
+:host([format=contenteditable]) .input-container.has-value .placeholder {
+  color: transparent;
+}
+:host([format=contenteditable]) .input-container.focused {
+  background-color: var(--light, #ffffff);
+}
+:host([format=contenteditable]) .input-container.focused .placeholder yoo-icon {
+  display: none;
+}
+:host([format=contenteditable]) .input-container.focused [contenteditable] {
+  border: var(--border-width-01, 0.0625rem) solid var(--dark, #000000);
+}
+:host([format=contenteditable]) .input-container.focused .actions {
+  display: flex;
+}
+
+:host([size=small]) .actions {
+  bottom: calc(var(--spacing-32, 2rem) * -1);
+}
+
+:host([size=medium]) .actions {
+  bottom: calc(var(--spacing-40, 2.5rem) * -1);
+}
+
+:host([size=large]) .actions {
+  bottom: calc(var(--spacing-56, 3.5rem) * -1);
+}
+
 :host(.accent) .input-container {
   border-color: var(--accent, #276ef1);
 }

package/dist/collection/components/form/form-input/form-input.js

@@ -1,8 +1,8 @@
-import { copyToClipboard, debounce as _debounce, extractTextFromStringHTML, isAndroid, isAnimationsDisabled, isHTML, isIOS, isNativeMobile, isNullOrUndefined, isSafari, isWeb, resizeObserve, showToast, translate } from '@shared/utils';
+import { copyToClipboard, debounce as _debounce, enableKeyboardResize, extractTextFromStringHTML, isAndroid, isAnimationsDisabled, isHTML, isIOS, isNativeMobile, isNullOrUndefined, isSafari, isWeb, resizeObserve, showToast, translate } from '@shared/utils';
 import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 import { isFunction, isNumber, isString } from 'lodash-es';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
-import { convertValueForInputType, initNumber, onIconClicked, onInputBlurred, onInputClear, onInputFocused, setValidator, setValueAndValidateInput, validate } from '../../../utils/helpers/form-input-helpers';
+import { clearFocused, convertValueForInputType, initNumber, onIconClicked, onInputBlurred, onInputClear, onInputFocused, setValidator, setValueAndValidateInput, validate } from '../../../utils/helpers/form-input-helpers';
 import { getRenderer } from '../../grid/ag-grid/grid-renderers';
 export class YooFormInputComponent {
   constructor() {
@@ -20,6 +20,7 @@ export class YooFormInputComponent {
     this.initialCheckboxParams = null;
     this.fireInputChangeEvent = false;
     this.allowDecimals = false;
+    this.format = 'input';
     this.checkboxParams = null;
     this.hostWidth = 0;
     this.onWheel = () => {
@@ -160,11 +161,19 @@ export class YooFormInputComponent {
       this.inputElement.value = this.value;
       this.updateRemainingCharacters();
     }
+    if (isNativeMobile() && isIOS()) {
+      enableKeyboardResize();
+    }
     if (this.focusOnRendered) {
       this.setFocus();
     }
     this.animateContent();
   }
+  componentDidUpdate() {
+    if (this.format === 'contenteditable' && !this.modified) {
+      this.contentEditableElement.textContent = `${this.value || ''}`;
+    }
+  }
   onInitInput() {
     var _a, _b;
     setValidator(this);
@@ -398,7 +407,7 @@ export class YooFormInputComponent {
         } },
         this.finalIconPrefix && this.hasIconPrefix && (h("div", { class: "icon-prefix", onClick: () => (this.inputElement && this.inputElement.focus ? this.inputElement.focus() : null) },
           h("yoo-icon", { name: this.finalIconPrefix, size: this.getIconSize() }))),
-        h("input", { type: this.inputType, name: this.name, tabindex: this.inputTabIndex, ref: (el) => (this.inputElement = el), autocapitalize: this.autocapitalize, autocorrect: this.autocorrect, inputmode: this.inputmode ? this.inputmode : undefined, placeholder: !this.placeholdertolabel && this.internalPlaceholder ? translate(this.internalPlaceholder) : '', required: this.required, onBlur: (ev) => onInputBlurred(ev, this, '.input-container', this.type, this.uiValidation), onChange: (ev) => this.fireInputChangeEvent ? this.onInputChanged(ev) : ev === null || ev === void 0 ? void 0 : ev.stopPropagation(), onInput: (ev) => this.onInputChanged(ev), onFocus: () => onInputFocused(this, '.input-container'), onKeyDown: (ev) => this.onKeyPress(ev), onWheel: this.onWheel, min: this.min, max: this.max, pattern: this.getPattern(), step: this.step, class: {
+        h("input", { type: this.inputType, name: this.name, tabindex: this.inputTabIndex, ref: (el) => (this.inputElement = el), autocapitalize: this.autocapitalize, autocorrect: this.autocorrect, autoComplete: ['username', 'password'].includes(this.name) ? this.name : undefined, inputmode: this.inputmode ? this.inputmode : undefined, placeholder: !this.placeholdertolabel && this.internalPlaceholder ? translate(this.internalPlaceholder) : '', required: this.required, onBlur: (ev) => onInputBlurred(ev, this, '.input-container', this.type, this.uiValidation), onChange: (ev) => this.fireInputChangeEvent ? this.onInputChanged(ev) : ev === null || ev === void 0 ? void 0 : ev.stopPropagation(), onInput: (ev) => this.onInputChanged(ev), onFocus: () => onInputFocused(this, '.input-container'), onKeyDown: (ev) => this.onKeyPress(ev), onWheel: this.onWheel, min: this.min, max: this.max, pattern: this.getPattern(), step: this.step, class: {
             last: !((hasValue && this.clearable) || (this.type === 'password' && this.showPasswordToggle) || (this.uiValidation.invalid && this.validity === false)),
             'hide-value': (_a = this.checkboxParams) === null || _a === void 0 ? void 0 : _a.value,
             'has-icon-prefix': this.finalIconPrefix && this.hasIconPrefix
@@ -423,6 +432,65 @@ export class YooFormInputComponent {
       this.uiValidation.invalid && h("div", { class: { 'invalid-message': true, invalid: (this.validity === false && !this.inputReloaded) } }, translate(invalidMessageKey))
     ];
   }
+  contentEditableInputBlurred(ev) {
+    var _a;
+    this.inputBlurred.emit(ev);
+    clearFocused(this, '.input-container');
+    if (!((_a = this.contentEditableActionsElement) === null || _a === void 0 ? void 0 : _a.offsetParent)) {
+      this.cancel();
+    }
+  }
+  onContentEditableInputChanged(ev, skipChecks = true) {
+    var _a, _b;
+    if (this.fireInputChangeEvent || skipChecks) {
+      this.localValue = (_b = (_a = this.contentEditableElement) === null || _a === void 0 ? void 0 : _a.firstChild) === null || _b === void 0 ? void 0 : _b.textContent;
+      this.modified = this.value !== this.localValue;
+    }
+    else {
+      ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
+    }
+  }
+  onContentEditableKeyPress(ev) {
+    this.onKeyPress(ev);
+    if (ev.key === 'Enter') {
+      this.confirm();
+      this.contentEditableElement.blur();
+    }
+    else if (ev.key === 'Escape') {
+      this.cancel();
+      this.contentEditableElement.blur();
+    }
+  }
+  cancel() {
+    this.setLocalValue();
+    this.modified = false;
+  }
+  confirm() {
+    this.value = this.localValue;
+    this.modified = false;
+  }
+  renderContentEditable() {
+    return (h("div", { class: {
+        'input-container': true,
+        placeholderlabel: this.placeholdertolabel,
+        'has-value': !!this.value || !!this.localValue
+      } },
+      h("div", { class: "placeholder" },
+        translate(this.internalPlaceholder),
+        h("yoo-icon", { name: "pen", size: this.getIconSize(), color: "stable" })),
+      h("div", { contenteditable: !this.disabled, tabindex: this.inputTabIndex, ref: (el) => (this.contentEditableElement = el), autocapitalize: this.autocapitalize, autocorrect: this.autocorrect, spellcheck: "false", onBlur: (ev) => this.contentEditableInputBlurred(ev), onChange: (ev) => this.onContentEditableInputChanged(ev, false), onInput: (ev) => this.onContentEditableInputChanged(ev), onFocus: () => onInputFocused(this, '.input-container'), onKeyDown: (ev) => this.onContentEditableKeyPress(ev), onWheel: () => this.onWheel() }, this.value),
+      this.renderActions()));
+  }
+  renderActions() {
+    return (h("section", { class: "actions", ref: (el) => (this.contentEditableActionsElement = el) },
+      this.renderAction('cancel'),
+      this.renderAction('confirm')));
+  }
+  renderAction(type) {
+    return h("div", { class: type },
+      h("yoo-button", { disabled: !this.modified || this.disabled, size: this.size, customColor: "stable-alt", onClick: () => this[type]() },
+        h("yoo-icon", { size: this.getIconSize(), name: type === 'cancel' ? 'close' : 'tick' })));
+  }
   render() {
     return (h(Host, { class: {
         'swiper-no-swiping': true,
@@ -431,7 +499,7 @@ export class YooFormInputComponent {
         'has-checkbox': this.checkboxParams || this.tooltip,
         'no-animation': isAnimationsDisabled(),
         ...getAppContext(this.host)
-      } }, this.readonly ? this.renderReadonly() : this.renderEditable()));
+      } }, this.format === 'contenteditable' ? this.renderContentEditable() : this.readonly ? this.renderReadonly() : this.renderEditable()));
   }
   static get is() { return "yoo-form-input"; }
   static get encapsulation() { return "shadow"; }
@@ -1287,12 +1355,31 @@ export class YooFormInputComponent {
       "attribute": "allow-decimals",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "format": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'input' | 'contenteditable'",
+        "resolved": "\"contenteditable\" | \"input\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "format",
+      "reflect": true,
+      "defaultValue": "'input'"
     }
   }; }
   static get states() { return {
     "inputType": {},
     "remainingCharacters": {},
-    "checkboxParams": {}
+    "checkboxParams": {},
+    "modified": {}
   }; }
   static get events() { return [{
       "method": "validityChanged",

package/dist/collection/components/form/form-input-container/form-input-container.js

@@ -308,7 +308,7 @@ export class YooFormInputContainerComponent {
   renderLabel() {
     var _a, _b, _c;
     const contentClass = ((_a = this.field) === null || _a === void 0 ? void 0 : _a.title) ? 'field-title-name ' : '';
-    return (h("div", { ref: (el) => (this.labelElement = el), class: {
+    return (h("label", { ref: (el) => (this.labelElement = el), class: {
         label: true,
         center: (_c = (_b = this.field) === null || _b === void 0 ? void 0 : _b.extraClass) === null || _c === void 0 ? void 0 : _c.includes('center'),
         readonly: this.readonly,

package/dist/collection/components/form/form-scorm/form-scorm.js

@@ -1,3 +1,4 @@
+import { IRoute } from '@shared/interfaces';
 import { getAsyncExtraData, getCssColor, getCurrentLanguage, getLocaleVariantScormCloudId, getSession, isAndroid, isNativeMobile, isSafari, isWeb, screenOrientationLock, screenOrientationUnlock, showAlert, showModal, translate, translateMulti } from '@shared/utils';
 import { Component, Element, Event, forceUpdate, h, Method, Prop, State, Watch } from '@stencil/core';
 import { get, isNumber } from 'lodash-es';
@@ -14,7 +15,7 @@ export class YooFormScormComponent {
   }
   componentWillLoad() {
     setValidator(this);
-    this.isPreview = window.location.href.indexOf('missionviewer') >= 0 || window.location.href.indexOf('courseeditor') >= 0;
+    this.isPreview = window.location.href.indexOf(IRoute.missionviewer) >= 0 || window.location.href.indexOf(IRoute.courseeditor) >= 0;
     this.fetchLocalizedScorm();
   }
   componentWillUpdate() {

package/dist/collection/components/form/form-text-area/form-text-area.js

@@ -1,5 +1,5 @@
 import { Keyboard } from '@capacitor/keyboard';
-import { containsUrls, debounce, findParent, getAsyncExtraData, isFirefox, isNativeMobile, isNullOrUndefined, isWeb, replaceAndGetAllLinks, replaceAtTagToMentionTag, safeScrollIntoView, translate, translateMulti } from '@shared/utils';
+import { containsUrls, debounce, enableKeyboardResize, findParent, getAsyncExtraData, isFirefox, isIOS, isNativeMobile, isNullOrUndefined, isWeb, replaceAndGetAllLinks, replaceAtTagToMentionTag, safeScrollIntoView, translate, translateMulti } from '@shared/utils';
 import { Component, Element, Event, forceUpdate, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';
 import { getAppContext, sanitizeHTML } from '../../../utils/helpers/common-helpers';
 import { onInputBlurred, onInputClear, onInputFocused, setValidator, setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
@@ -123,6 +123,9 @@ export class YooFormTextAreaComponent {
         textArea.setAttribute('style', `resize: ${this.resizable};`);
       }
     }
+    if (isNativeMobile() && isIOS()) {
+      enableKeyboardResize();
+    }
     if (this.autoInitialRows && this.inputEl) {
       const scrollHeight = this.inputEl.scrollHeight;
       const PADDING = 16;

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

@@ -1,4 +1,4 @@
-import { getChartTypes, intersectionObserve, isIntersectionObserverSupported, isNativeMobile, isWeb, showActionSheet, translate, translateMulti } from '@shared/utils';
+import { getChartTypes, intersectionObserve, isIntersectionObserverSupported, isWeb, showActionSheet, translate, translateMulti } from '@shared/utils';
 import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
 export class YooKpiContainerComponent {
@@ -155,9 +155,6 @@ export class YooKpiContainerComponent {
       this.kpi.exportXLSX();
     }
   }
-  onPDFGenerate() {
-    this.kpiPdfGenerate.emit(true);
-  }
   onKpiEdited(ev) {
     ev.stopPropagation();
     this.kpiEdited.emit(ev.detail);
@@ -249,7 +246,6 @@ export class YooKpiContainerComponent {
             })),
           ((_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.type === 'chartio' && !isNativeMobile() && h("yoo-icon", { slot: "icon-only", name: "file-pdf", color: "stable", size: "medium", onClick: () => this.onPDFGenerate() }),
           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" },
@@ -775,21 +771,6 @@ export class YooKpiContainerComponent {
         "resolved": "boolean",
         "references": {}
       }
-    }, {
-      "method": "kpiPdfGenerate",
-      "name": "kpiPdfGenerate",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      }
     }, {
       "method": "kpiChartChangeType",
       "name": "kpiChartChangeType",

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

@@ -1,7 +1,6 @@
+import { ACL_FILTERS } from '@shared/interfaces';
 import { isIOS, isNativeMobile, isWeb, translate, updateSVGCustomColors } from '@shared/utils';
 import { Component, Element, Event, h, Prop } from '@stencil/core';
-import { querySelectorDeep } from '../../../utils/helpers/common-helpers';
-import { getElementDimensions } from '../../../utils/helpers/dimensions-helpers';
 export class YooKpiExternalComponent {
   constructor() {
     YooKpiExternalComponent.componentCounter += 1;
@@ -14,57 +13,39 @@ export class YooKpiExternalComponent {
     }
   }
   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 && isIOS() && isNativeMobile()) {
+    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'));
     }
-    const { width, height } = isWeb(this.host) ? this.host.getBoundingClientRect() : getElementDimensions(window);
-    let srcDoc;
     if (isProviderTableau) {
-      const navBarEl = querySelectorDeep(document.body, 'yoo-header');
-      const navBarDimensions = getElementDimensions(navBarEl);
-      const containerHeaderHeight = 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: "${isWeb(this.host) ? '100%' : (width - 2) + 'px'}"
-              });
-            };
-          </script>
-        </body>
-      `;
+      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
+      // 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' : ''}`,
-      ...(isProviderTableau ? { srcDoc } : { src: this.config.url }),
-      frameBorder: 0
+      ...(isProviderTableau ? { src: './assets/js/tableau.yoobic.iframe.html' } : { src: this.config.url }),
+      frameBorder: 0,
+      id: this.frameId
     };
-    return h("iframe", { ...props });
+    return 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();
@@ -79,21 +60,24 @@ export class YooKpiExternalComponent {
   }; }
   static get properties() { return {
     "config": {
-      "type": "any",
+      "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+        "original": "{ url: string; acls?: TAclFilterResult; }",
+        "resolved": "{ url: string; acls?: TAclFilterResult; }",
+        "references": {
+          "TAclFilterResult": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
         "text": ""
-      },
-      "attribute": "config",
-      "reflect": false
+      }
     },
     "definition": {
       "type": "unknown",

package/dist/collection/feature-platform/login/login/assets/login/google_color.svg

@@ -0,0 +1,8 @@
+<svg width="21" height="20" viewBox="0 0 21 20" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd">
+        <path d="M5.025 10c0-.635.108-1.244.3-1.815L1.96 5.668A9.606 9.606 0 0 0 .934 10c0 1.557.37 3.025 1.024 4.328l3.364-2.52A5.676 5.676 0 0 1 5.025 10" fill="#FBBC05"/>
+        <path d="M10.934 4.222c1.41 0 2.682.49 3.682 1.29l2.91-2.845C15.751 1.156 13.48.222 10.933.222c-3.952 0-7.348 2.213-8.974 5.446l3.365 2.517c.776-2.305 2.986-3.963 5.61-3.963" fill="#EA4335"/>
+        <path d="M10.934 15.778c-2.623 0-4.833-1.658-5.609-3.963L1.96 14.331c1.626 3.234 5.022 5.447 8.974 5.447 2.44 0 4.768-.848 6.516-2.437l-3.195-2.418c-.901.556-2.036.855-3.32.855" fill="#34A853"/>
+        <path d="M20.48 10c0-.578-.091-1.2-.228-1.778h-9.318V12h5.364a4.404 4.404 0 0 1-2.043 2.923l3.195 2.418c1.836-1.669 3.03-4.154 3.03-7.341" fill="#4285F4"/>
+    </g>
+</svg>