@yoobic/yobi 8.3.0-13 → 8.3.0-14

package/dist/collection/components/1.atoms/progress-bar/progress-bar.js

@@ -139,31 +139,24 @@ export class YooProgressBarComponent {
   }
   setProgress(currentProgress = 0) {
     if (this.progressSVGElement) {
-      const getProgress = (progress = this.value) => {
-        const currentProgress = progress || 0;
-        const newProgress = this.maxValue ? (currentProgress / this.maxValue) * 100 : currentProgress;
-        return clamp(newProgress, 0, 100);
-      };
       const getProgressPathLength = (progress = 0) => Math.round(progressBarElement.getTotalLength() * (1 - progress / 100)).toString();
-      const toProgress = getProgress();
+      const clampProgress = (progress) => clamp(progress, 0, 100);
+      const toProgress = this.getProgress();
       const progressBarElement = this.host.shadowRoot.querySelector('#progress');
       const valueElement = this.host.shadowRoot.querySelector('#value');
-      const fromProgress = this.disableBackProgressAnimation ? toProgress : getProgress(currentProgress);
-      const decimalCoeff = Math.pow(10, this.numberDecimalAfterComaProgressValue);
+      const fromProgress = this.disableBackProgressAnimation ? toProgress : this.getProgress(currentProgress);
       !this.isShape.line && (progressBarElement.style.strokeDasharray = getProgressPathLength());
       const animateProgressValue = (progress) => {
         progress = Math.round(progress * 100) / 100;
-        let timelineProgressValue = Math.round((((this.isMetric.percentage ? toProgress : this.value) - fromProgress) * progress + fromProgress) * decimalCoeff) / decimalCoeff || 0;
-        this.isMetric.percentage && (timelineProgressValue = clamp(timelineProgressValue, 0, 100));
+        let timelineProgressValue = (((!this.isMetric.points ? toProgress : this.value) - fromProgress) * progress + fromProgress) || 0;
+        timelineProgressValue = this.truncateProgress(timelineProgressValue);
         const relativeColor = this.getProgressColor(timelineProgressValue / 100);
         progressBarElement.style.stroke = relativeColor;
         if (this.listenToProgress && this.host.isConnected) {
           this.valueChanged.emit(timelineProgressValue);
         }
         if (!this.hideProgressValue && valueElement) {
-          if (this.percentValueColorScheme) {
-            valueElement.style[this.isShape.line ? 'color' : 'fill'] = relativeColor;
-          }
+          this.percentValueColorScheme && (valueElement.style[this.isShape.line ? 'color' : 'fill'] = relativeColor);
           valueElement.innerHTML = this.getLabelledValue(timelineProgressValue);
         }
       };
@@ -173,7 +166,7 @@ export class YooProgressBarComponent {
         }
       };
       const fromAnimation = {
-        attr: { x2: `${fromProgress}%` },
+        attr: { x2: `${clampProgress(fromProgress)}%` },
         ...(!this.isShape.line && {
           strokeDashoffset: this.disableBackProgressAnimation ? getProgressPathLength() : getProgressPathLength(fromProgress)
         }),
@@ -185,7 +178,7 @@ export class YooProgressBarComponent {
         this.initSVGPaths();
       };
       const toAnimation = {
-        attr: { x2: `${toProgress}%` },
+        attr: { x2: `${clampProgress(toProgress)}%` },
         onStart: progressStarted,
         onUpdate() {
           animateProgressValue(this.progress());
@@ -202,8 +195,18 @@ export class YooProgressBarComponent {
       progressBarElement && isFinite(toProgress) && isFinite(fromProgress) && gsapFromTo(progressBarElement, this.isAnimated ? this.progressAnimationDuration : 0, fromAnimation, toAnimation);
     }
   }
-  getLabelledValue(progress) {
-    progress = progress !== null && progress !== void 0 ? progress : ((isFinite(this.maxValue) && this.maxValue) ? (this.value / this.maxValue) * 100 : this.value || 0);
+  truncateProgress(progress) {
+    const decimalCoefficient = Math.pow(10, this.numberDecimalAfterComaProgressValue);
+    return Math.round(progress * decimalCoefficient) / decimalCoefficient || 0;
+  }
+  getProgress(progress = this.value) {
+    const currentProgress = progress || 0;
+    const withMaxValue = !!(isFinite(this.maxValue) && this.maxValue) && !this.isMetric.points;
+    const newProgress = withMaxValue ? (currentProgress / this.maxValue) * 100 : currentProgress;
+    return this.truncateProgress(newProgress) || 0;
+  }
+  getLabelledValue(progress = this.getProgress()) {
+    progress = this.truncateProgress(progress);
     if (!this.hideProgressValue) {
       if (this.isMetric.step) {
         return `${this.value}/${this.maxValue}`;

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

@@ -1,6 +1,5 @@
 import { translateMulti } from '@shared/utils';
 import { Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';
-import { isEqual, isString } from 'lodash-es';
 import { showSlidesMedia } from '../../../../utils/helpers/common-helpers';
 import { hasWarnings, isSelected, onItemSelect, prepareChoice, updateValue, updateValues } from '../form-choice-helpers';
 export class YooFormChoiceImageComponent {
@@ -32,13 +31,14 @@ export class YooFormChoiceImageComponent {
   }
   renderImage(image, text, values, index) {
     const readonly = this.readonly || this.isPdf;
-    const isCorrect = this.answer.some(val => isEqual({ text, image }, val));
+    const answer = [].concat(this.answer).map(a => a.text ? a.text : a);
+    const isCorrect = answer.includes(text);
     const onOpenImage = (values, index) => showSlidesMedia({ items: values.map(({ image }) => ({ value: image })), currentSlideIndex: index, showBottomContainer: false });
     return (h("div", { class: "image-container", onClick: () => this.isHistory && onOpenImage(values, index), style: this.animated ? { '--choice-index': index.toString() } : {} },
-      h("div", { class: { 'content': true, 'correct-answer': this.readonly && this.answer.length && isCorrect, 'wrong-answer': this.readonly && this.answer.length && !isCorrect } },
-        h("yoo-img", { cloudinaryOptions: { pad: true }, scaledUp: this.isPdf, src: image, onClick: () => !readonly && onItemSelect(values[index], this) }),
+      h("div", { class: { 'content': true, 'correct-answer': this.readonly && isCorrect, 'wrong-answer': this.readonly && !isCorrect } },
+        h("yoo-img", { cloudinaryOptions: { pad: true }, scaledUp: this.isPdf, src: image, onClick: () => !readonly && onItemSelect(text, this) }),
         !readonly && [
-          h("yoo-form-checkbox", { value: isSelected(values[index], this.selection), onClick: () => onItemSelect(values[index], this), animated: this.animated }),
+          h("yoo-form-checkbox", { value: isSelected(text, this.selection), onClick: () => onItemSelect(text, this), animated: this.animated }),
           h("yoo-tag", { color: "dark-60", icon: "maximize", iconOnlyColor: "light", size: "small", onClick: () => onOpenImage(values, index) })
         ]),
       text && h("div", { class: "text truncate" }, translateMulti(text))));
@@ -47,7 +47,7 @@ export class YooFormChoiceImageComponent {
     let values = this.choices || [];
     if (this.readonly && this.value) {
       const answers = Array.isArray(this.value) ? this.value : [this.value];
-      values = values.filter(value => answers.some((answer) => isString(answer) ? answer === value.text : isEqual(answer, value)));
+      values = values.filter(({ text }) => answers.some((answer) => answer === text));
     }
     return values.map((value, index) => {
       const { text, image } = value || {};
@@ -240,14 +240,9 @@ export class YooFormChoiceImageComponent {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "IFormChoiceValue[]",
-        "resolved": "IFormChoiceValue[]",
-        "references": {
-          "IFormChoiceValue": {
-            "location": "import",
-            "path": "../../../../interfaces"
-          }
-        }
+        "original": "string[]",
+        "resolved": "string[]",
+        "references": {}
       },
       "required": false,
       "optional": false,
@@ -313,24 +308,21 @@ export class YooFormChoiceImageComponent {
       "defaultValue": "[]"
     },
     "value": {
-      "type": "unknown",
+      "type": "string",
       "mutable": true,
       "complexType": {
-        "original": "IFormChoiceValue[] | IFormChoiceValue",
-        "resolved": "IFormChoiceValue | IFormChoiceValue[]",
-        "references": {
-          "IFormChoiceValue": {
-            "location": "import",
-            "path": "../../../../interfaces"
-          }
-        }
+        "original": "string[] | string",
+        "resolved": "string | string[]",
+        "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
         "text": ""
-      }
+      },
+      "attribute": "value",
+      "reflect": false
     }
   }; }
   static get states() { return {

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/{esm/button.factory-78741dc8.js → design-system/button.factory-a210a604.js}

@@ -1,6 +1,6 @@
-import './index-8464a481.js';
+import './index-289a659a.js';
 import { h } from './index-54cb3c5d.js';
-import { V as translateMulti } from './overlays-2a6483bd.js';
+import { V as translateMulti } from './overlays-6764f2a0.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-a69dff19.js → camera-helpers-70b6ec89.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-2a6483bd.js';
-import './index-23286af2.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-6764f2a0.js';
+import './index-15ad2410.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-bb800cc8.js').then(m => new m.CameraWeb()),
+    web: () => import('./web-4afc7950.js').then(m => new m.CameraWeb()),
 });
 
 var __extends = (undefined && undefined.__extends) || (function () {

package/dist/{esm/chat-helpers-f897e70e.js → design-system/chat-helpers-6d5605dc.js}

@@ -1,6 +1,6 @@
-import './index-23286af2.js';
+import './index-15ad2410.js';
 import { i as isArray } from './lodash-bf91c7a4.js';
-import { af as is24Hour, ag as isFile, p as showModal, q as isWeb } from './overlays-2a6483bd.js';
+import { af as is24Hour, ag as isFile, p as showModal, q as isWeb } from './overlays-6764f2a0.js';
 
 /**
  * Get the proper data format for a single message aswell as grouped messages

package/dist/design-system/{common-helpers-bf424e4e.js → common-helpers-9eaafeae.js}

@@ -1,5 +1,5 @@
-import { o as getModalAnimation, t as translate, p as showModal, q as isWeb, r as debounce, u as querySelectorDeep$1, f as isNativeMobile, S as ScreenOrientation, v as findParent, w as isIphoneX, j as isIpadPro, l as isTablet, e as isFullScreenFalse, x as isIOS, h as isAndroid, y as setAnimation, z as animations, A as getCssColor, Y as YOOBICON_ENTITIES_MAP, B as startOf, D as isDateBefore, E as dateDiffInCalendarDays, F as isDateAfter, G as getAsyncExtraData, H as isNativeFilePath, I as cleanupWKWebViewFilePath, n as Cloudinary, J as getProtocol, C as CloudinaryGradientLayer } from './overlays-2a6483bd.js';
-import './index-23286af2.js';
+import { o as getModalAnimation, t as translate, p as showModal, q as isWeb, r as debounce, u as querySelectorDeep$1, f as isNativeMobile, S as ScreenOrientation, v as findParent, w as isIphoneX, j as isIpadPro, l as isTablet, e as isFullScreenFalse, x as isIOS, h as isAndroid, y as setAnimation, z as animations, A as getCssColor, Y as YOOBICON_ENTITIES_MAP, B as startOf, D as isDateBefore, E as dateDiffInCalendarDays, F as isDateAfter, G as getAsyncExtraData, H as isNativeFilePath, I as cleanupWKWebViewFilePath, n as Cloudinary, J as getProtocol, C as CloudinaryGradientLayer } from './overlays-6764f2a0.js';
+import './index-15ad2410.js';
 import { A as get } from './lodash-bf91c7a4.js';
 
 function getDefaultModalAnimation() {