@yoobic/yobi 8.2.0-12 → 8.2.0-15

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

@@ -1563,7 +1563,7 @@ export class YooFormCaptureComponent {
       ? [
         this.currentUploadingStatus && (isUndefined(index) || !this.multiple) && h("div", { class: "text app-color" }, this.currentUploadingStatus),
         !this.isUploadingPhoto && (h("div", { class: "main-wrapper" },
-          h("yoo-progress-bar", { class: "app-color", value: 100, hideProgressValue: true, listenToProgress: true, listenToCompleteProgress: true, disableBackProgressAnimation: true, progressAnimationDuration: this.progressTime, onValueChanged: (ev) => onProgressUpdating(ev), onProgressFinished: (ev) => onProgressFinished(ev), ref: (el) => (this.progressBarMainRef = el) })))
+          h("yoo-progress-bar", { value: 100, hideProgressValue: true, listenToProgress: true, listenToCompleteProgress: true, disableBackProgressAnimation: true, progressAnimationDuration: this.progressTime, onValueChanged: (ev) => onProgressUpdating(ev), onProgressFinished: (ev) => onProgressFinished(ev), ref: (el) => (this.progressBarMainRef = el) })))
       ]
       : [
         h("yoo-progress-bar", { class: "photo-progress app-color", value: 0, hideProgressValue: true, progressAnimationDuration: 0.5, ref: (el) => {

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

@@ -285,7 +285,7 @@ export class YooFormCatalogComponent {
               h("div", { class: "title" },
                 translate('QUANTITY'),
                 ": "),
-              readonly ? (quantity) : (h("yoo-form-number-picker", { key: ref, min: 0, stepAmount: product.step, value: quantity, required: true, clearable: false, useButtons: true, invalidMessage: product.step ? 'MIN_AND_STEP_VALUES' : null, onInputChanged: (ev) => {
+              readonly ? (quantity) : (h("yoo-form-number-picker", { key: ref, min: 1, stepAmount: product.step, value: quantity, required: true, clearable: false, useButtons: true, invalidMessage: product.step ? 'MIN_AND_STEP_VALUES' : null, onInputChanged: (ev) => {
                   ev.stopPropagation();
                   if (isNumber(ev.detail)) {
                     this.setProduct(product, ev.detail);
@@ -304,7 +304,9 @@ export class YooFormCatalogComponent {
   }
   renderEditable() {
     return (h("div", { class: "outer-container" },
-      h("yoo-form-autocomplete", { ref: (el) => (this.formAutocomplete = el), multiple: !this.isCheck, value: this.selectedProducts, entityType: "products", displayType: "card-list", iconPrefix: "catalogue", onFetchData: (ev) => this.onFetchData(ev), onFetchFieldFilterData: (ev) => this.onFetchFieldFilterData(ev), onInputChanged: (ev) => this.onSelect(ev), onInputBlurred: (ev) => this.onInputBlurred(ev), onInputFocused: (ev) => this.onInputFocused(ev), onValidityChanged: (ev) => this.onAutoCompleteValidityChanged(ev), onWebAutocompleteClosed: (ev) => this.onWebAutocompleteClosed(ev), placeholder: translate('ADDPRODUCTTOBASKET'), tags: this.tags, isLocal: false, model: this.model, size: this.size }),
+      h("yoo-form-autocomplete", { ref: (el) => (this.formAutocomplete = el), multiple: !this.isCheck, 
+        // value={this.selectedProducts}
+        entityType: "products", displayType: "card-list", iconPrefix: "catalogue", onFetchData: (ev) => this.onFetchData(ev), onFetchFieldFilterData: (ev) => this.onFetchFieldFilterData(ev), onInputChanged: (ev) => this.onSelect(ev), onInputBlurred: (ev) => this.onInputBlurred(ev), onInputFocused: (ev) => this.onInputFocused(ev), onValidityChanged: (ev) => this.onAutoCompleteValidityChanged(ev), onWebAutocompleteClosed: (ev) => this.onWebAutocompleteClosed(ev), placeholder: translate('ADDPRODUCTTOBASKET'), tags: this.tags, isLocal: false, model: this.model, size: this.size }),
       !this.disableScanner && h("div", { class: "or" }, translate('YOOBICOR')),
       !this.disableScanner && h("yoo-form-barcode", { onInputChanged: (ev) => this.onScanned(ev), placeholder: translate('SCANPRODUCTTOBASKET'), hideValue: true }),
       !this.selectorMode && this.notFoundError ? h("div", { class: "error", innerHTML: this.notFoundError }) : null,

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

@@ -1989,7 +1989,7 @@ export class YooFormDynamicComponent {
     const currentStep = ((_a = this.slides) === null || _a === void 0 ? void 0 : _a.length) !== ((_b = this.steps) === null || _b === void 0 ? void 0 : _b.length) ? Math.floor((this.activeIndex / 2) + 1) : this.activeIndex + 1;
     if ((slides === null || slides === void 0 ? void 0 : slides.length) > 1) {
       if (this.isSimpleProgressBar()) {
-        return (h("yoo-progress-bar", { animated: this.animated, currentStep: currentStep, maxStep: this.steps.length, metric: "step" }));
+        return (h("yoo-progress-bar", { animated: this.animated, value: currentStep, maxValue: this.steps.length, metric: "step" }));
       }
       if (this.activeIndex === 0 && this.showRecap) {
         return (h("div", { class: "header-recap" },
@@ -2193,6 +2193,7 @@ export class YooFormDynamicComponent {
     }
   }
   getFieldVisibility(field) {
+    var _a;
     let isFieldVisible = false;
     const fieldState = getFieldState(field, this.fieldsState);
     const readonly = fieldState.readonly || this.forceReadonly;
@@ -2202,7 +2203,10 @@ export class YooFormDynamicComponent {
     // const required = isRequired(field, this.currentData, visible, this.suffix, this.session);
     isFieldVisible = !field.advanced && visible;
     if (field.secondary) {
-      if (withValue) {
+      // Invisible data is still rendered when they are secondar and has value,
+      // Use this forceHideSecondaryDataIfHidden to hide then in UI
+      const allowInvisibleData = !(((_a = this.formExtraOptions) === null || _a === void 0 ? void 0 : _a.forceHideSecondaryDataIfHidden) && !visible);
+      if (withValue && allowInvisibleData) {
         isFieldVisible = true;
       }
       else {

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

@@ -250,6 +250,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .outer-container .mission-footer .timer-container yoo-progress-bar {
   width: 20%;
   margin: 0;
+  --progress-bar-color: var(--app-color, #5a30f4);
   --stroke-width-circle: 6;
 }
 

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

@@ -30,7 +30,7 @@ export class YooFormFooterComponent {
       }
     };
     return countDownProgress && (h("div", { class: "timer-container" },
-      h("yoo-progress-bar", { shape: "circle", class: "app-color", listenToProgress: true, hideProgressValue: true, progressAnimationDuration: 0, animated: this.animated, value: countDownProgress, onValueChanged: (ev) => onCountingDown(ev) }),
+      h("yoo-progress-bar", { shape: "circle", listenToProgress: true, hideProgressValue: true, progressAnimationDuration: 0, animated: this.animated, value: countDownProgress, onValueChanged: (ev) => onCountingDown(ev) }),
       h("div", null, countDownDisplay)));
   }
   render() {

package/dist/collection/components/grid/ag-grid/grid-renderers.js

@@ -1,5 +1,5 @@
 import { FormFieldType, IncentivePartType, IncentiveStatus, IncentiveType } from '@shared/interfaces';
-import { aclRolesResolver, dateDiff, dateFormat, dateParse, dispatchCustomEvent, getContrastColor, getCssColor, getUserDisplayName, groupsResolver, pipes, salesAIFormatDemand, salesAIGetColorFromPattern, toButton, toDate, toHours, translate, translateMulti, utc } from '@shared/utils';
+import { aclRolesResolver, dateDiff, dateFormat, dateParse, dispatchCustomEvent, getCssColor, getUserDisplayName, groupsResolver, pipes, salesAIFormatDemand, salesAIGetColorFromPattern, toButton, toDate, toHours, translate, translateMulti, utc } from '@shared/utils';
 import { compact, get, indexOf, isArray, isEmpty, isFunction, isNumber, isObject, isString, keys, map, round } from 'lodash-es';
 import { countryFlag } from '../../..//utils/helpers/country-helpers';
 import { getWorkflowStepBadge } from '../../../feature-operate/mission/helpers/missions-helpers';
@@ -38,7 +38,6 @@ function defaultRenderer(params) {
       valuesColor = params.colDef.fieldDefinition.valuesColor;
     }
     const color = (_d = valuesColor === null || valuesColor === void 0 ? void 0 : valuesColor.find((c) => c.key === retVal)) === null || _d === void 0 ? void 0 : _d.value;
-    const contrast = color ? getContrastColor(color) : getCssColor('dark');
     if ((_f = (_e = params === null || params === void 0 ? void 0 : params.colDef) === null || _e === void 0 ? void 0 : _e.fieldDefinition) === null || _f === void 0 ? void 0 : _f.values) {
       const title = (_j = (_h = (_g = params === null || params === void 0 ? void 0 : params.colDef) === null || _g === void 0 ? void 0 : _g.fieldDefinition) === null || _h === void 0 ? void 0 : _h.values.find((v) => (v === null || v === void 0 ? void 0 : v.value) === retVal)) === null || _j === void 0 ? void 0 : _j.title;
       retVal = title || retVal;
@@ -46,7 +45,7 @@ function defaultRenderer(params) {
     if (params.isExport) {
       return translateFunction(stripHtml((retVal === null || retVal === void 0 ? void 0 : retVal.toString()) || ''));
     }
-    return ('<div class="' + (color ? 'color-container' : '') + '" style="background:' + (color || '') + ';color:' + contrast + '"  >' + translateFunction(retVal.toString()) + '</div>');
+    return color ? `<yoo-tag custom-color="${color}">${translateFunction(retVal.toString())}</yoo-tag>` : ('<div>' + translateFunction(retVal.toString()) + '</div>');
   }
 }
 function exportRenderer(params) {

package/dist/collection/components/grid/grid/grid.css

@@ -276,6 +276,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   padding: var(--spacing-16, 1rem);
   padding-bottom: 0;
 }
+:host .grid-progress yoo-progress-bar {
+  --progress-bar-color: var(--app-color, #5a30f4);
+}
 :host yoo-empty-state {
   height: var(--empty-state-height, 10rem);
 }

package/dist/collection/components/grid/grid/grid.js

@@ -3144,7 +3144,7 @@ export class YooGridComponent {
   }
   renderProgress() {
     return (this.mainProgressValue >= 0 && (h("div", { class: "grid-progress" },
-      h("yoo-progress-bar", { class: "app-color", animated: this.animated, metric: "percentage", percentValueColorScheme: false, value: this.total > 0 ? (this.mainProgressValue * 100) / this.total : 0 }))));
+      h("yoo-progress-bar", { animated: this.animated, metric: "percentage", percentValueColorScheme: false, value: this.total > 0 ? (this.mainProgressValue * 100) / this.total : 0 }))));
   }
   renderBase() {
     var _a, _b, _c, _d, _e;

package/dist/collection/feature-communicate/chat/chat/chat.js

@@ -629,7 +629,7 @@ export class YooChatComponent {
       }
     };
     return (h("div", { class: "timer-container" },
-      h("yoo-progress-bar", { shape: "circle", class: "app-color", animated: true, listenToProgress: true, hideProgressValue: true, progressAnimationDuration: 0, value: countDownProgress, onValueChanged: (ev) => onCountingDown(ev) }),
+      h("yoo-progress-bar", { shape: "circle", animated: true, listenToProgress: true, hideProgressValue: true, progressAnimationDuration: 0, value: countDownProgress, onValueChanged: (ev) => onCountingDown(ev) }),
       h("div", null, countDownDisplay)));
   }
   renderOverlay() {

package/dist/collection/feature-learn/learning/card-course/row/card-course-row.js

@@ -104,8 +104,12 @@ export class YooCardCourseRowComponent {
   renderProgress() {
     const plan = get(this.entry, 'plan', {});
     const lessonsCount = get(plan, 'missiondescriptionsRef', []).length;
-    const progress = this.entry.finishedLessonsCount ? (this.entry.finishedLessonsCount / lessonsCount) * 100 : 0;
-    return progress > 0 && progress < 100 && h("yoo-progress-bar", { class: "app-color", value: progress });
+    const { finishedLessonsCount } = this.entry || {};
+    const progress = finishedLessonsCount ? (finishedLessonsCount / lessonsCount) * 100 : 0;
+    return !!progress && progress <= 100 && h("yoo-progress-bar", { value: progress, colorsRepartition: {
+        colors: ['var(--danger)', 'var(--warning)', 'var(--success)'],
+        thresholds: [.39, .79, 1]
+      } });
   }
   renderLessonsText() {
     const lessonsCount = get(this.actualPlan, 'missiondescriptionsRef', []).length;
@@ -138,7 +142,7 @@ export class YooCardCourseRowComponent {
     if (total > 0) {
       const progress = finished > 0 ? Math.round((finished / total) * 100) : 0;
       return progress >= 0 && progress <= 100 && (h("div", { class: "progress-calendar-container" },
-        h("yoo-progress-bar", { class: "app-color", value: progress, hideProgressValue: true }),
+        h("yoo-progress-bar", { value: progress, hideProgressValue: true }),
         h("span", { class: "lesson-count" }, `${progress}%`)));
     }
     return null;

package/dist/collection/feature-learn/learning/course-summary/course-summary.css

@@ -250,6 +250,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host .course-info-container .progress-bar-container yoo-progress-bar {
   margin-right: var(--spacing-04, 0.25rem);
+  --progress-bar-color: var(--app-color, #5a30f4);
 }
 
 :host(.web:not(.force-mobile)) .full-width-view {

package/dist/collection/feature-learn/learning/course-summary/course-summary.js

@@ -89,13 +89,13 @@ export class YooCourseSummaryComponent {
           'progress-bar-container': true,
           'full-width-view': this.fullWidthProgressBar
         } }, (isWeb() ? this.renderWebProgressBar() :
-        h("yoo-progress-bar", { class: "app-color", animated: this.animated, value: this.courseProgress }))));
+        h("yoo-progress-bar", { animated: this.animated, value: this.courseProgress }))));
     }
   }
   renderWebProgressBar() {
     const lessonsCount = get(this.actualPlan, 'missiondescriptionsRef', []).length;
     const pluralizedLabel = translate(lessonsCount > 1 ? 'LESSONS' : 'LESSON');
-    return [h("yoo-progress-bar", { class: "app-color", metric: "step", animated: this.animated, maxStep: lessonsCount, currentStep: this.course.finishedLessonsCount }), h("span", null, pluralizedLabel)];
+    return [h("yoo-progress-bar", { metric: "step", animated: this.animated, maxValue: lessonsCount, value: this.course.finishedLessonsCount }), h("span", null, pluralizedLabel)];
   }
   renderCompetency() {
     var _a, _b, _c, _d, _e;

package/dist/collection/feature-learn/learning/lesson-detail-card/lesson-detail-card.css

@@ -282,6 +282,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .card-container .content-container .footer .time-indicator yoo-progress-bar {
   --svg-width: 1.8rem;
   --svg-height: 1.8rem;
+  --progress-bar-color: var(--app-color, #5a30f4);
   padding: 0 var(--spacing-08, 0.5rem);
 }
 :host .card-container .content-container .footer .time-indicator .time-text {

package/dist/collection/feature-learn/learning/lesson-detail-card/lesson-detail-card.js

@@ -77,7 +77,7 @@ export class YooLessonDetailCard {
   }
   renderTimeIndicator() {
     return (h("div", { class: "time-indicator" },
-      h("yoo-progress-bar", { shape: "circle", class: "app-color", animated: this.animated, hideProgressValue: true, value: 75 }),
+      h("yoo-progress-bar", { shape: "circle", animated: this.animated, hideProgressValue: true, value: 75 }),
       h("div", { class: "time-text" }, this.footer.timeIndicator)));
   }
   renderFooter() {

package/dist/collection/feature-operate/campaign/campaign-editor-recap/campaign-editor-recap.js

@@ -122,7 +122,7 @@ export class YooCampaignEditorRecapComponent {
     }
     const max = this.hasSchedule() && this.hasAudience() ? 4 : !this.hasSchedule() && !this.hasAudience() ? 2 : 3;
     progress = Math.min(progress, max);
-    return (h("yoo-progress-bar", { class: "app-color", currentStep: progress, maxStep: max, metric: "step" }));
+    return (h("yoo-progress-bar", { value: progress, maxValue: max, metric: "step" }));
   }
   render() {
     const hasAudience = this.hasAudience();

package/dist/collection/feature-operate/mission/card-inbox/card-inbox.css

@@ -252,6 +252,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host .outer-container .content yoo-progress-bar {
   --font-size-16: var(--font-size-12, 0.75rem);
+  --progress-bar-color: var(--app-color, #5a30f4);
   --svg-width: 1rem;
   --stroke-width-circle: 2;
   margin: 0;

package/dist/collection/feature-operate/mission/card-inbox/card-inbox.js

@@ -44,7 +44,7 @@ export class YooCardInboxComponent {
     if (renderProgress) {
       const { value, unit, max } = this.entry.progress;
       return renderProgress && h("div", { class: "sub-item-detail" },
-        h("yoo-progress-bar", { class: "app-color", shape: "circle", hideProgressValue: true, value: value, metric: unit, currentStep: value, maxStep: max }),
+        h("yoo-progress-bar", { shape: "circle", hideProgressValue: true, value: value, metric: unit, maxValue: max }),
         h("yoo-truncate", { style: { cssText: '--max-lines: 1' } },
           h("span", null, translate('ACTIONSCOMPLETED', { smart_count: value, total: max }))));
     }

package/dist/collection/feature-operate/mission/mission-heading/mission-heading.css

@@ -207,6 +207,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin: 0 -1rem 0;
   border-bottom: solid 1px var(--stable-light, #f1f1f1);
 }
+:host yoo-progress-bar {
+  --progress-bar-color: var(--app-color, #5a30f4);
+}
 :host yoo-banner {
   --main-color: var(--warning-10, rgba(237, 110, 51, 0.1));
   margin-top: var(--spacing-08, 0.5rem);

package/dist/collection/feature-operate/mission/mission-heading/mission-heading.js

@@ -22,7 +22,7 @@ export class YooMissionHeadingComponent {
             !this.mission.title && this.mission.type === 'visit' && h("div", { class: "mission-title" }, translate('VISIT')),
             h("div", { class: "sub-heading" },
               this.progress >= 0 && (h("div", { class: { 'mission-progress': true, 'mission-progress-web': !this.isMobile } },
-                h("yoo-progress-bar", { class: "app-color", animated: this.animated, value: this.progress }))), tags === null || tags === void 0 ? void 0 :
+                h("yoo-progress-bar", { animated: this.animated, value: this.progress }))), tags === null || tags === void 0 ? void 0 :
               tags.map((tag) => {
                 const tagDefaultColor = tag.customColor ? null : 'stable';
                 return (h("yoo-tag", { color: tag.color || tagDefaultColor, customColor: tag.customColor },