@yoobic/yobi 8.3.0-4 → 8.3.0-7

package/dist/collection/components/form/form-autocomplete-dialog/form-autocomplete-dialog.js

@@ -950,40 +950,6 @@ export class YooFormAutocompleteDialogComponent {
       "attribute": "force-hide-search",
       "reflect": false
     },
-    "width": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "width",
-      "reflect": false
-    },
-    "height": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "height",
-      "reflect": false
-    },
     "clearTags": {
       "type": "boolean",
       "mutable": false,

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);
@@ -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-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/components/form/form-uploader/form-uploader.js

@@ -112,10 +112,8 @@ export class YooFormUploaderComponent {
   }
   getFilesAndUpdateInput(invalidId) {
     const pondFiles = this.pond.getFiles();
-    const files = pondFiles === null || pondFiles === void 0 ? void 0 : pondFiles.filter((file) => !((this.lastAddedFile || []).indexOf(file) >= 0));
-    this.lastAddedFile = files;
-    if (files === null || files === void 0 ? void 0 : files.length) {
-      let finalFile = files.map((file) => {
+    if (pondFiles === null || pondFiles === void 0 ? void 0 : pondFiles.length) {
+      let finalFile = pondFiles.map((file) => {
         // tag file with invalid id
         if (file.id === invalidId) {
           file.file['invalid'] = true;

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/reset-password/reset-password.js

@@ -1,11 +1,26 @@
+import { Keyboard } from '@capacitor/keyboard';
 import { FormFieldType } from '@shared/interfaces';
 import { isNativeMobile, isWeb, translate } from '@shared/utils';
-import { Component, Element, Event, getAssetPath, h, Host, Prop, State } from '@stencil/core';
+import { Component, Element, Event, getAssetPath, h, Prop, State } from '@stencil/core';
 export class YooResetPasswordComponent {
   constructor() {
     this.isMagicLink = false;
     this.validity = false;
   }
+  componentWillLoad() {
+    if (isNativeMobile()) {
+      Keyboard.addListener('keyboardDidShow', () => {
+        this.emptyState.style.transform = 'scale(0.7) translateY(-4rem)';
+        this.emailInput.style.transform = 'translateY(-4rem)';
+        this.submitButton.style.transform = 'translateY(-4rem)';
+      });
+      Keyboard.addListener('keyboardWillHide', () => {
+        this.emptyState.style.transform = 'scale(1) translateY(0)';
+        this.emailInput.style.transform = 'translateY(0)';
+        this.submitButton.style.transform = 'translateY(0)';
+      });
+    }
+  }
   validateEmaiInput() {
     if (this.emailInput && this.submitButton) {
       this.validateInput = this.emailInput.validity;
@@ -23,11 +38,6 @@ export class YooResetPasswordComponent {
       }
     }
   }
-  setEmptyStateStyle(display) {
-    if (isNativeMobile() && this.emptyState) {
-      this.emptyState.setAttribute('style', `display: ${display};`);
-    }
-  }
   onInputChanged(ev) {
     this.userEmail = ev.detail;
     this.validateEmaiInput();
@@ -45,8 +55,10 @@ export class YooResetPasswordComponent {
       !!this.instruction && h("p", null, this.instruction),
       h("yoo-empty-state", { ref: (el) => (this.emptyState = el), type: this.isMagicLink ? 'magic-link' : 'password' }),
       h("yoo-form-input-container", { field: { title: translate('USERNAME') }, hideOptional: true, hideLabel: true },
-        h("yoo-form-input", { ref: (el) => (this.emailInput = el), validators: [{ name: 'required' }], type: "email", uiValidation: { valid: false, invalid: false }, onInputChanged: (event) => this.onInputChanged(event), onInputFocused: () => this.setEmptyStateStyle('none'), onInputBlurred: () => this.setEmptyStateStyle('flex'), size: isWeb(this.host) ? 'medium' : 'large' })),
-      h("yoo-button", { ref: (el) => (this.submitButton = el), size: isWeb(this.host) ? 'medium' : 'large', color: "app-color", disabled: true, class: "expanded", onClick: () => this.onSubmit() }, translate('SUBMIT'))
+        h("yoo-form-input", { ref: (el) => (this.emailInput = el), validators: [{ name: 'required' }], type: "email", uiValidation: { valid: false, invalid: false }, onInputChanged: (event) => this.onInputChanged(event), 
+          //! Do not set up onInputBlur without confirming on mobile device (We don't want to have to press submit more than once)
+          size: isWeb(this.host) ? 'medium' : 'large' })),
+      h("yoo-button", { ref: (el) => (this.submitButton = el), size: isWeb(this.host) ? 'medium' : 'large', color: "app-color", disabled: !this.validity, class: "expanded", onClick: () => this.onSubmit() }, translate('SUBMIT'))
     ];
   }
   renderResetForm() {
@@ -90,7 +102,7 @@ export class YooResetPasswordComponent {
         h("yoo-button", { size: isWeb(this.host) ? 'medium' : 'large', color: "app-color", disabled: !this.validity, onClick: () => this.onSubmit() }, translate('SUBMIT'))));
   }
   render() {
-    return h(Host, null, this.token ? this.renderResetForm() : this.renderRequest());
+    return h("div", null, this.token ? this.renderResetForm() : this.renderRequest());
   }
   static get is() { return "yoo-reset-password"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/utils/helpers/form-input-helpers.js

@@ -316,7 +316,7 @@ function unfocusInvalidMessage(inputElement) {
     querySelectorDeep(inputElement.host, '.invalid-message').classList.remove('focused');
   }
 }
-function clearFocused(inputElement, borderContainerSelector) {
+export function clearFocused(inputElement, borderContainerSelector) {
   const iconContainers = querySelectorAllDeep(inputElement.host, '.icon-suffix-focus');
   unfocusInvalidMessage(inputElement);
   if (querySelectorDeep(inputElement.host, borderContainerSelector)) {

package/dist/{esm/_commonjsHelpers-bda24d0a.js → design-system/_commonjsHelpers-f4d11124.js}

@@ -41,4 +41,4 @@ function commonjsRequire () {
 	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
 }
 
-export { commonjsGlobal as a, getAugmentedNamespace as b, createCommonjsModule as c, commonjsRequire as d, getDefaultExportFromCjs as g };
+export { createCommonjsModule as a, getAugmentedNamespace as b, commonjsGlobal as c, commonjsRequire as d, getDefaultExportFromCjs as g };

package/dist/design-system/{button.factory-0a2b9df6.js → button.factory-b1ca34c9.js}

@@ -1,6 +1,6 @@
-import './index-74fb0c04.js';
-import { h } from './index-906d845d.js';
-import { V as translateMulti } from './overlays-0b66aaed.js';
+import './index-b20a5c0e.js';
+import { h } from './index-54cb3c5d.js';
+import { V as translateMulti } from './overlays-0a37ecfc.js';
 
 const getButton = (button) => {
   return !button.isVisible || button.isVisible() ? (h("yoo-button", { class: button.cssClass, color: button.color || 'light', type: button.type || 'button', size: button.size || 'medium', shape: button.shape || 'rectangular', fill: button.fill || 'solid', rippleType: button.rippleType || 'bounded', disabled: button.disabled === null ? false : button.disabled, animated: button.animated === null ? true : button.animated, onClick: button.handler },

package/dist/design-system/{camera-helpers-70447010.js → camera-helpers-895f8e71.js}

@@ -1,5 +1,5 @@
-import { b_ as cordova, b$ as IonicNativePlugin, ca as cordovaPropertyGet, cb as cordovaPropertySet, cc as registerPlugin, X as getSession, cd as isIonic, f as isNativeMobile, ce as Device, h as isAndroid, x as isIOS, cf as getMediaDevices, p as showModal, o as getModalAnimation, q as isWeb } from './overlays-0b66aaed.js';
-import './index-fa45e1bf.js';
+import { b_ as cordova, b$ as IonicNativePlugin, ca as cordovaPropertyGet, cb as cordovaPropertySet, cc as registerPlugin, X as getSession, cd as isIonic, f as isNativeMobile, ce as Device, h as isAndroid, x as isIOS, cf as getMediaDevices, p as showModal, o as getModalAnimation, q as isWeb } from './overlays-0a37ecfc.js';
+import './index-2546ce94.js';
 
 var __extends$2 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -206,7 +206,7 @@ var CameraResultType;
 })(CameraResultType || (CameraResultType = {}));
 
 const Camera = registerPlugin('Camera', {
-    web: () => import('./web-ceaee166.js').then(m => new m.CameraWeb()),
+    web: () => import('./web-dbdee286.js').then(m => new m.CameraWeb()),
 });
 
 var __extends = (undefined && undefined.__extends) || (function () {