@yoobic/yobi 8.6.0-3 → 8.6.0-5

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

@@ -11,21 +11,64 @@ import { setValidator, setValueAndValidateInput } from '../../../utils/helpers/f
 import { processMediaPath, shouldUseLowPerformanceCamera } from './form-capture-helper';
 export class YooFormCaptureComponent {
   constructor() {
+    this.overflowOffset = 4;
+    this.progressBarRef = [];
+    this.imageRecoCancelled = false;
+    this.progressTime = 600;
+    this.emitOnUpdated = false;
     this.extraData = {};
+    this.asyncValidators = undefined;
+    this.showCropper = undefined;
+    this.placeholder = undefined;
+    this.required = undefined;
     this.isHistory = false;
+    this.readonly = undefined;
     this.type = 'photo';
+    this.multiple = undefined;
+    this.disabled = undefined;
     this.min = 1;
     this.max = 1;
+    this.tags = undefined;
+    this.cropperOptions = undefined;
+    this.maxWidth = undefined;
+    this.maxHeight = undefined;
+    this.duration = undefined;
+    this.saveGeoloc = undefined;
+    this.formGeoloc = undefined;
+    this.allowLibrary = undefined;
+    this.allowGif = undefined;
+    this.allowUnsplash = undefined;
+    this.allowAnnotate = undefined;
     this.allowCamera = true;
+    this.isImageRecognition = undefined;
+    this.algorithm = undefined;
+    this.algorithmDisplay = undefined;
+    this.isAnimationFinished = undefined;
+    this.isBackgroundProcess = undefined;
+    this.label = undefined;
+    this.isPdf = undefined;
+    this.name = undefined;
+    this.useGallery = undefined;
+    this.imageRecognitionKpiKeys = undefined;
+    this.preventVideoPlay = undefined;
+    this.allowUserImages = undefined;
+    this.maximumCaptureSize = undefined;
+    this.size = undefined;
+    this.preventUpload = undefined;
+    this.hideOptional = undefined;
+    this.detailView = undefined;
+    this.detailViewOptions = undefined;
+    this.value = undefined;
     this.validators = [];
+    this.allowURLInput = undefined;
+    this.validity = undefined;
+    this.isProcessing = undefined;
     this.isProcessingPhoto = true;
+    this.showImageLoader = undefined;
+    this.imageRecognitionResults = undefined;
     this.isSelectorMode = false;
     this.selectedIndex = [];
-    this.overflowOffset = 4;
-    this.progressBarRef = [];
-    this.imageRecoCancelled = false;
-    this.progressTime = 600;
-    this.emitOnUpdated = false;
+    this.currentUploadingStatus = undefined;
   }
   async updateAutocompleteValues(tags) {
     if (this.autocomplete && tags) {
@@ -321,7 +364,7 @@ export class YooFormCaptureComponent {
     imageTag.addEventListener('fetchData', (ev) => {
       this.onFetchGridData(ev);
     });
-    return showModal(imageTag, null, '', 'slideYEnterAnimation', 'slideYLeaveAnimation');
+    return showModal({ component: imageTag, enterAnimation: 'slideYEnterAnimation', leaveAnimation: 'slideYLeaveAnimation' });
   }
   updateTagData(tag, index) {
     this.initTags();
@@ -358,7 +401,7 @@ export class YooFormCaptureComponent {
     if (isNativeMobile() && isIOS() && !isIphoneX()) {
       StatusBar.hide();
     }
-    return showModal(cameraPreviewer, null, `${extraClass} transparent`, 'slideYEnterAnimation', 'slideYLeaveAnimation').then((ret) => {
+    return showModal({ component: cameraPreviewer, cssClass: `${extraClass} transparent`, enterAnimation: 'slideYEnterAnimation', leaveAnimation: 'slideYLeaveAnimation' }).then((ret) => {
       if (isNativeMobile() && isIOS() && !isIphoneX()) {
         StatusBar.show();
       }
@@ -389,12 +432,16 @@ export class YooFormCaptureComponent {
     if (this.algorithm && this.algorithm.stitch && !useLibrary) {
       let stitchDirection = null;
       const buttons = [
-        { text: translate('TOPTOBOTTOM'), icon: 'big-arrow-down', handler: () => {
+        {
+          text: translate('TOPTOBOTTOM'), icon: 'big-arrow-down', handler: () => {
             stitchDirection = 'from-top';
-          }, separator: true },
-        { text: translate('LEFTTORIGHT'), icon: 'big-arrow-right', handler: () => {
+          }, separator: true
+        },
+        {
+          text: translate('LEFTTORIGHT'), icon: 'big-arrow-right', handler: () => {
             stitchDirection = 'from-left';
-          }, separator: true }
+          }, separator: true
+        }
       ];
       await showActionSheet(buttons, null, {}, null, null);
       if (stitchDirection) {
@@ -518,8 +565,13 @@ export class YooFormCaptureComponent {
   }
   async captureFromWebcam(device, index) {
     var _a;
-    const mediaData = (_a = (await showModal(Object.assign(document.createElement('yoo-form-capture-webcam-dialog'), { device }), null, !isWeb(this.host) ? '' : 'fullscreen', 'fadeEnterAnimation', 'fadeLeaveAnimation'))) === null || _a === void 0 ? void 0 : _a.data;
-    //  this.allowCrop(mediaData) && (mediaData = await this.onOpenCropper(mediaData));
+    let mediaData = (_a = (await showModal({
+      component: Object.assign(document.createElement('yoo-form-capture-webcam-dialog'), { device }),
+      cssClass: !isWeb(this.host) ? '' : 'fullscreen',
+      enterAnimation: 'fadeEnterAnimation',
+      leaveAnimation: 'fadeLeaveAnimation'
+    }))) === null || _a === void 0 ? void 0 : _a.data;
+    this.allowCrop(mediaData) && (mediaData = await this.onOpenCropper(mediaData));
     mediaData && await this.processMediaData(mediaData, index);
   }
   captureFromDisk(index) {
@@ -795,7 +847,7 @@ export class YooFormCaptureComponent {
       if (this.type === 'audio') {
         documentViewer.type = this.type;
       }
-      showModal(documentViewer, null, 'fullscreen');
+      showModal({ component: documentViewer, cssClass: 'fullscreen' });
     }
   }
   openGallery(index) {
@@ -923,7 +975,7 @@ export class YooFormCaptureComponent {
     photoView.imageRecognitionResults = this.imageRecognitionResults;
     photoView.imageRecognitionDisplay = this.algorithmDisplay;
     photoView.isStitch = this.isStitch();
-    showModal(photoView);
+    showModal({ component: photoView });
   }
   onShowMaximumCaptureReached() {
     const description = translate('MAXIMUMCAPTUREREACHED');
@@ -1297,7 +1349,7 @@ export class YooFormCaptureComponent {
       }
     }
     dialog.markers = markers;
-    showModal(dialog, null, '', 'slideYEnterAnimation', 'slideYLeaveAnimation', isWeb(this.host));
+    showModal({ component: dialog, enterAnimation: 'slideYEnterAnimation', leaveAnimation: 'slideYLeaveAnimation', showBackdrop: isWeb(this.host) });
   }
   renderDistance(index) {
     return [
@@ -1316,12 +1368,7 @@ export class YooFormCaptureComponent {
   }
   renderCaptureStatus() {
     const value = this.value || [];
-    return (value && (h("div", { class: { 'capture-status': true, 'image-reco': this.isImageRecognition } }, this.required && (h("div", { class: "status" }, value.length > this.min
-      ? translate('PHOTOTAKEN', { captured_number: `${this.min}/${this.min}` })
-      : translate('PHOTOTAKEN', { captured_number: `${value.length}/${this.min}` }))), !this.hideOptional && this.max && this.max > 0 && (h("div", { class: {
-        status: true,
-        'max-reached': value.length === this.max
-      } }, translate('MAXIMUMCAPTURE', { captured_number: `${value.length}/${this.max}` }))), value.length > 0 && (h("div", { class: "action", onClick: () => {
+    return (value && (h("div", { class: { 'capture-status': true, 'image-reco': this.isImageRecognition } }, h("div", { class: "status-counters" }, this.required && (h("div", { class: "status" }, translate('PHOTOTAKEN', { captured_number: `${value.length > this.min ? this.min : value.length}/${this.min}` }))), !this.hideOptional && this.max > 0 && (h("div", { class: { status: true, 'max-reached': value.length === this.max } }, translate('MAXIMUMCAPTURE', { captured_number: `${value.length}/${this.max}` })))), value.length > 0 && (h("div", { class: "action", onClick: () => {
         this.toggleSelectorMode();
       } }, translate('SELECT2'))))));
   }

package/dist/collection/components/form/form-capture-map-dialog/form-capture-map-dialog.js

@@ -1,6 +1,9 @@
 import { closeModal, translate } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 export class YooFormCaptureMapDialogComponent {
+  constructor() {
+    this.markers = undefined;
+  }
   onClose() {
     closeModal(null);
   }

package/dist/collection/components/form/form-capture-tag-dialog/form-capture-tag-dialog.js

@@ -4,6 +4,11 @@ import { getAppContext } from '../../../utils/helpers/common-helpers';
 export class YooFormCaptureTagDialogComponent {
   constructor() {
     this.newValue = [];
+    this.imageSrc = undefined;
+    this.imageHeight = undefined;
+    this.imageWidth = undefined;
+    this.tags = undefined;
+    this.value = undefined;
   }
   componentWillLoad() {
     if (this.value) {

package/dist/collection/components/form/form-capture-view-dialog/form-capture-view-dialog.js

@@ -3,6 +3,15 @@ import { h, Host } from '@stencil/core';
 import { cloneDeep, orderBy } from 'lodash-es';
 import { lockSwipes } from '../../../utils/helpers/common-helpers';
 export class YooFormCaptureViewDialogComponent {
+  constructor() {
+    this.label = undefined;
+    this.preview = undefined;
+    this.allowAnnotate = undefined;
+    this.drawings = undefined;
+    this.imageRecognitionResults = undefined;
+    this.imageRecognitionDisplay = undefined;
+    this.isStitch = undefined;
+  }
   componentWillLoad() {
     if (this.imageRecognitionResults && this.imageRecognitionResults.length > 0 && this.imageRecognitionDisplay && this.imageRecognitionDisplay.length > 0) {
       this.properties = [];

package/dist/collection/components/form/form-capture-webcam-dialog/form-capture-webcam-dialog.js

@@ -6,6 +6,7 @@ import { querySelectorDeep } from '../../../utils/helpers/common-helpers';
 export class YooFormCaptureWebcamDialogComponent {
   constructor() {
     this.isReady = false;
+    this.device = undefined;
   }
   // private _jpegCamera = (window as any).JpegCamera || JpegCamera;
   componentDidLoad() {

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

@@ -4,26 +4,39 @@ import { isArray } from 'lodash-es';
 import { getAppContext, lockSwipes, showSlidesMedia } from '../../../utils/helpers/common-helpers';
 export class YooFormCarouselComponent {
   constructor() {
+    this.isZoomed = false;
+    this.photoEditorElements = [];
+    this.mediaSrc = undefined;
+    this.annotations = undefined;
+    this.drawings = undefined;
     this.mediaType = 'photo';
+    this.maxHeight = undefined;
+    this.mediaDimension = undefined;
+    this.usePhotoEditor = undefined;
     this.currentSlideIndex = 0;
     this.previewMode = false;
     this.preventAutoPlayMedia = true;
+    this.playerCommand = undefined;
     this.hasGradient = false;
     this.allowPreview = false;
+    this.readonly = undefined;
     this.isFeed = false;
     this.allowSwipeDownDismiss = true;
     this.preventScaledUp = false;
     this.topBarActions = [];
     this.contained = false;
     this.allowOrientation = false;
+    this.isModalMode = undefined;
     this.instant = false;
+    this.isPdf = undefined;
+    this.isVisible = undefined;
+    this.paginationType = undefined;
     this.displayPhotoCounter = true;
+    this.hideSecondaryActions = undefined;
     this.navbarVisiblity = 'visible';
     this.currentActiveIndex = 0;
     this.showPhotoCounts = this.displayPhotoCounter;
     this.visibility = false;
-    this.isZoomed = false;
-    this.photoEditorElements = [];
   }
   handlePinchZoom(event) {
     this.isZoomed = event.detail;

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

@@ -4,11 +4,27 @@ import { difference, isEqual, isNumber, isObject, keys } from 'lodash-es';
 import { setValidator, setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
 export class YooFormCatalogComponent {
   constructor() {
+    this.value = undefined;
     this.validators = [];
+    this.asyncValidators = undefined;
+    this.readonly = undefined;
+    this.multiple = undefined;
     this.isHistory = false;
+    this.name = undefined;
+    this.validity = undefined;
+    this.tags = undefined;
+    this.isGridCell = undefined;
+    this.isInventory = undefined;
+    this.isPresence = undefined;
+    this.isCheck = undefined;
+    this.catalog = undefined;
     this.keepAutocompleteSelection = false;
-    this.selectorMode = false; // for now, only used by form-products-sales when want to enter incentives KPIs with scan
+    this.products = undefined;
+    this.model = undefined;
+    this.disableScanner = undefined;
+    this.selectorMode = false;
     this.size = 'large';
+    this.notFoundError = undefined;
   }
   async updateValues(values) {
     var _a;
@@ -242,7 +258,13 @@ export class YooFormCatalogComponent {
   onOpenCatalogDialog(product) {
     this.dialog = document.createElement('yoo-form-catalog-dialog');
     this.dialog.product = product;
-    showModal(this.dialog, { half: false }, null, getModalAnimation('Enter', 'X', { host: this.host }), getModalAnimation('Leave', 'X', { host: this.host }), true).then(() => {
+    showModal({
+      component: this.dialog,
+      componentProps: { half: false },
+      enterAnimation: getModalAnimation('Enter', 'X', { host: this.host }),
+      leaveAnimation: getModalAnimation('Leave', 'X', { host: this.host }),
+      showBackdrop: true
+    }).then(() => {
       this.dialog = null;
     });
   }

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

@@ -5,6 +5,9 @@ import { getElementDimensions } from '../../../utils/helpers/dimensions-helpers'
 export class YooFormCatalogDialogComponent {
   constructor() {
     this.MIN_WIDTH_TABLET = 500;
+    this.heading = undefined;
+    this.product = undefined;
+    this.sizeText = undefined;
   }
   componentDidLoad() {
     this.sizeContainer = getElementDimensions(this.innerContainer).width;

package/dist/collection/components/form/form-categorize-words/form-categorize-words.js

@@ -6,10 +6,18 @@ import { hasDuplicates, showWarningBanner } from '../../../utils/helpers/draggab
 import { setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
 export class YooFormCategorizeWordsComponent {
   constructor() {
+    this.counterElement = [];
     this.animated = true;
     this.readonly = false;
+    this.livePreview = undefined;
     this.value = null;
-    this.counterElement = [];
+    this.validity = undefined;
+    this.answer = undefined;
+    this.categories = undefined;
+    this.required = undefined;
+    this.values = undefined;
+    this.isVisible = undefined;
+    this.revealCategories = undefined;
   }
   onCategoriesChanged() {
     var _a;

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

@@ -7,34 +7,19 @@ import { getAppContext } from '../../../utils/helpers/common-helpers';
 import { setValidator, setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
 export class YooFormCheckboxComponent {
   constructor() {
-    /**
-     * Checks the validity of the component.
-     */
     this.validators = [];
-    /**
-     * FormDisplayType property
-     */
+    this.asyncValidators = undefined;
     this.type = 'normal';
-    /**
-     * Specifies whether the component is in disabled mode.
-     */
     this.disabled = false;
-    /**
-     * Specifies whether the component is in readonly mode.
-     */
     this.readonly = false;
-    /**
-     * The size of the checkbox
-     */
+    this.header = undefined;
+    this.help = undefined;
     this.size = 'large';
-    /**
-     * If `true`, the user can see animations.
-     */
     this.animated = true;
-    /**
-     * Specifies wether the component is a required field.
-     */
+    this.value = undefined;
     this.required = false;
+    this.iconColor = undefined;
+    this.internalValue = undefined;
   }
   onRequireChanged() {
     this.validate();

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

@@ -4,11 +4,19 @@ import { forceUpdate, h } from '@stencil/core';
 import { setValidator, setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
 export class YooFormChecklistComponent {
   constructor() {
+    this.rows = 1;
+    this.value = undefined;
     this.validators = [];
+    this.asyncValidators = undefined;
+    this.readonly = undefined;
+    this.multiple = undefined;
     this.placeholder = 'ADDNEWACTION';
+    this.name = undefined;
+    this.isHistory = undefined;
     this.previousTasks = [];
     this.currentTasks = [];
-    this.rows = 1;
+    this.inputTabIndex = undefined;
+    this.size = undefined;
   }
   componentWillLoad() {
     setValidator(this, FormFieldType.checklist);

package/dist/collection/components/form/form-choice/button/form-choice-button.js

@@ -5,12 +5,22 @@ import { getColor, hasWarnings, isSelected, onItemSelect, prepareChoice, updateV
 import { ReadonlyCard } from '../readonly-card/readonly-card';
 export class YooFormChoiceButtonComponent {
   constructor() {
+    this.choices = [];
+    this.size = undefined;
+    this.readonly = undefined;
     this.multiple = false;
+    this.required = undefined;
     this.validators = [];
+    this.useTranslate = undefined;
+    this.valuesColor = undefined;
+    this.valuesIcon = undefined;
+    this.livePreview = undefined;
     this.shuffled = false;
+    this.selected = undefined;
+    this.description = undefined;
     this.values = [];
+    this.value = undefined;
     this.selection = [];
-    this.choices = [];
   }
   onValuesChanged(newValues, oldValues) {
     updateValues(newValues, oldValues, this);

package/dist/collection/components/form/form-choice/card/form-choice-card.js

@@ -5,13 +5,23 @@ import { hasWarnings, isSelected, onItemSelect, prepareChoice } from '../form-ch
 import { ReadonlyCard } from '../readonly-card/readonly-card';
 export class YooFormChoiceCardComponent {
   constructor() {
+    this.imgElements = [];
+    this.choices = [];
+    this.readonly = undefined;
     this.multiple = false;
+    this.description = undefined;
+    this.required = undefined;
     this.validators = [];
+    this.useTranslate = undefined;
+    this.valuesColor = undefined;
+    this.maxWidth = undefined;
+    this.livePreview = undefined;
     this.shuffled = false;
+    this.selected = undefined;
+    this.customEvent = undefined;
     this.values = [];
+    this.value = undefined;
     this.selection = [];
-    this.imgElements = [];
-    this.choices = [];
   }
   componentWillLoad() {
     var _a;

package/dist/collection/components/form/form-choice/chat/form-choice-chat.js

@@ -5,14 +5,23 @@ import { hasWarnings, isSelected, onItemSelect, prepareChoice, updateValue, upda
 import { ReadonlyCard } from '../readonly-card/readonly-card';
 export class YooFormChoiceChatComponent {
   constructor() {
+    this.choices = [];
     this.animated = true;
+    this.readonly = undefined;
+    this.size = undefined;
     this.multiple = false;
+    this.sentence = undefined;
+    this.description = undefined;
+    this.required = undefined;
     this.validators = [];
+    this.validity = undefined;
+    this.livePreview = undefined;
     this.shuffled = true;
     this.answer = [];
+    this.selected = undefined;
     this.values = [];
+    this.value = undefined;
     this.selection = [];
-    this.choices = [];
   }
   onValuesChanged(newValues, oldValues) {
     updateValues(newValues, oldValues, this);

package/dist/collection/components/form/form-choice/image/form-choice-image.js

@@ -5,14 +5,22 @@ import { hasDuplicates } from '../../../../utils/helpers/draggable-tags-helpers'
 import { hasWarnings, isSelected, onItemSelect, prepareChoice, updateValue, updateValues } from '../form-choice-helpers';
 export class YooFormChoiceImageComponent {
   constructor() {
+    this.choices = [];
     this.animated = true;
     this.multiple = false;
+    this.required = undefined;
     this.validators = [];
+    this.readonly = undefined;
+    this.isHistory = undefined;
+    this.isPdf = undefined;
+    this.livePreview = undefined;
     this.shuffled = true;
     this.answer = [];
+    this.selected = undefined;
+    this.description = undefined;
     this.values = [];
+    this.value = undefined;
     this.selection = [];
-    this.choices = [];
   }
   onValuesChanged(newValues, oldValues) {
     updateValues(newValues, oldValues, this, this.hasEmptyValues && ['NOEMPTYVALUES']);

package/dist/collection/components/form/form-choice/radio/form-choice-radio.js

@@ -6,14 +6,25 @@ import { hasWarnings, onItemSelect, prepareChoice, updateValue, updateValues } f
 import { ReadonlyCard } from '../readonly-card/readonly-card';
 export class YooFormChoiceRadioComponent {
   constructor() {
+    this.choices = [];
     this.multiple = false;
+    this.required = undefined;
     this.validators = [];
+    this.readonly = undefined;
+    this.useTranslate = undefined;
+    this.allowOther = undefined;
+    this.valuesColor = undefined;
+    this.disableSingleDeselection = undefined;
+    this.livePreview = undefined;
     this.shuffled = false;
     this.answer = [];
+    this.selected = undefined;
+    this.description = undefined;
+    this.debounce = undefined;
     this.values = [];
+    this.value = undefined;
     this.showOther = this.canShowOther;
     this.selection = [];
-    this.choices = [];
   }
   onValuesChanged(newValues, oldValues) {
     updateValues(newValues, oldValues, this);

package/dist/collection/components/form/form-color-field/form-color-field.js

@@ -4,10 +4,16 @@ import { forceUpdate, h, Host } from '@stencil/core';
 import { setValidator, setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
 export class YooFormColorFieldComponent {
   constructor() {
+    this.value = undefined;
+    this.required = undefined;
     this.hexInput = true;
     this.rgbaInput = false;
     this.hsvaInput = false;
     this.position = 'bottom-start';
+    this.name = undefined;
+    this.allowOther = undefined;
+    this.placeholder = undefined;
+    this.rteColors = undefined;
     this.readonly = false;
     this.pickrDialogOpen = false;
   }

package/dist/collection/components/form/form-color-picker/form-color-picker.js

@@ -3,8 +3,11 @@ import { h, Host } from '@stencil/core';
 const DEFAULT_COLOR = getCssColor('light');
 export class YooFormColorPickerComponent {
   constructor() {
+    this.color = undefined;
     this.hideLabel = false;
+    this.inputTabIndex = undefined;
     this.displayPreviewColor = true;
+    this.currentColor = undefined;
   }
   componentWillLoad() {
     this.color && this.colorValidation();

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

@@ -4,7 +4,17 @@ import { h, Host } from '@stencil/core';
 import { compact } from 'lodash-es';
 export class YooFormConditionsComponent {
   constructor() {
+    this.value = undefined;
     this.validators = [];
+    this.asyncValidators = undefined;
+    this.placeholder = undefined;
+    this.readonly = undefined;
+    this.type = undefined;
+    this.required = undefined;
+    this.fields = undefined;
+    this.initialConditions = undefined;
+    this.size = undefined;
+    this.conditions = undefined;
   }
   componentWillLoad() {
     var _a;

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

@@ -6,22 +6,17 @@ import { setValueAndValidateInput } from '../../../utils/helpers/form-input-help
 import { CONNECT_TYPES } from './form-connect.interfaces';
 export class YooFormConnectComponent {
   constructor() {
-    /**
-     * Read-only mode : true if displayed within a quiz summary
-     */
     this.readonly = false;
-    /**
-     * true if the component can have animations
-     */
+    this.livePreview = undefined;
     this.animated = true;
-    /**
-     * true if the component is shuffled
-     */
     this.shuffled = true;
-    /**
-     * true if component's parent slide is visible within a `yoo-form-dynamic`
-     */
+    this.required = undefined;
+    this.validity = undefined;
+    this.values = undefined;
+    this.value = undefined;
+    this.answer = undefined;
     this.isVisible = false;
+    this.userAnswers = undefined;
   }
   async onValuesChanged() {
     var _a;