@yoobic/yobi 8.2.0-11 → 8.2.0-14

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

@@ -1,6 +1,6 @@
 import { gsapFromTo, isAnimationsDisabled, Linear } from '@shared/utils';
 import { Component, Element, Event, h, Host, Prop, Watch } from '@stencil/core';
-import { clamp, debounce, isFinite, isNull } from 'lodash-es';
+import { clamp, debounce, isFinite } from 'lodash-es';
 import { DEFAULT_COLOR_THRESHOLDS, DEFAULT_SHAPES } from './progress-bar.constants';
 export class YooProgressBarComponent {
   constructor() {
@@ -73,10 +73,6 @@ export class YooProgressBarComponent {
      * This property allow to display a number of decimal after the coma in the progress value display
      */
     this.numberDecimalAfterComaProgressValue = 0;
-    /**
-     * Used to modify the speed of the progress animation (in ms)
-     */
-    this.progressAnimationDuration = !this.isAnimated ? 0 : 1.25;
   }
   onProgressAnimationDurationChanged() {
     this.setProgress();
@@ -84,16 +80,6 @@ export class YooProgressBarComponent {
   onProgressValueChanged(_, currentValue) {
     this.setProgress(currentValue);
   }
-  onCurrentStepChanged(_, currentStep) {
-    this.setProgress(currentStep);
-  }
-  componentDidLoad() {
-    if (this.progressSVGElement) {
-      this.resizeListener = debounce(this.initProgressBar, 750).bind(this);
-      window.addEventListener('resize', this.resizeListener);
-      this.initProgressBar();
-    }
-  }
   get isAnimated() {
     return this.animated && !isAnimationsDisabled();
   }
@@ -116,6 +102,16 @@ export class YooProgressBarComponent {
     var _a;
     return this.isShape.line && !!((_a = this.markers) === null || _a === void 0 ? void 0 : _a.length);
   }
+  componentWillLoad() {
+    this.progressAnimationDuration = !this.isAnimated ? 0 : 1.25;
+  }
+  componentDidLoad() {
+    if (this.progressSVGElement) {
+      this.resizeListener = debounce(this.initProgressBar, 750).bind(this);
+      window.addEventListener('resize', this.resizeListener);
+      this.initProgressBar();
+    }
+  }
   initProgressBar() {
     if (this.progressSVGElement) {
       this.initSVGPaths();
@@ -143,13 +139,18 @@ export class YooProgressBarComponent {
   }
   setProgress(currentProgress = 0) {
     if (this.progressSVGElement) {
-      const toProgress = clamp(this.getValue(), 0, 100);
+      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 progressBarElement = this.host.shadowRoot.querySelector('#progress');
       const valueElement = this.host.shadowRoot.querySelector('#value');
-      const fromProgress = currentProgress >= 0 ? clamp(this.getValue(currentProgress), 0, 100) : toProgress;
+      const fromProgress = this.disableBackProgressAnimation ? toProgress : getProgress(currentProgress);
       const decimalCoeff = Math.pow(10, this.numberDecimalAfterComaProgressValue);
-      const getProgressPathLength = (progress) => Math.round(progressBarElement.getTotalLength() * (1 - progress / 100)).toString();
-      !this.isShape.line && (progressBarElement.style.strokeDasharray = getProgressPathLength(0));
+      !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;
@@ -174,7 +175,7 @@ export class YooProgressBarComponent {
       const fromAnimation = {
         attr: { x2: `${fromProgress}%` },
         ...(!this.isShape.line && {
-          strokeDashoffset: this.disableBackProgressAnimation ? getProgressPathLength(0) : getProgressPathLength(fromProgress)
+          strokeDashoffset: this.disableBackProgressAnimation ? getProgressPathLength() : getProgressPathLength(fromProgress)
         }),
         ...(this.disableBackProgressAnimation && {
           stroke: this.getProgressColor(0)
@@ -201,24 +202,11 @@ export class YooProgressBarComponent {
       progressBarElement && isFinite(toProgress) && isFinite(fromProgress) && gsapFromTo(progressBarElement, this.isAnimated ? this.progressAnimationDuration : 0, fromAnimation, toAnimation);
     }
   }
-  getValue(progress) {
-    let currentProgress = progress >= 0 && !isNull(progress) ? progress : this.value || 0;
-    if (this.isMetric.step && !!this.maxStep) {
-      currentProgress = progress >= 0 ? progress : this.currentStep;
-      return (currentProgress / this.maxStep) * 100;
-    }
-    else if (isFinite(this.maxValue) && !!this.maxValue) {
-      return (currentProgress / this.maxValue) * 100;
-    }
-    else {
-      return currentProgress;
-    }
-  }
   getLabelledValue(progress) {
     progress = progress !== null && progress !== void 0 ? progress : ((isFinite(this.maxValue) && this.maxValue) ? (this.value / this.maxValue) * 100 : this.value || 0);
     if (!this.hideProgressValue) {
       if (this.isMetric.step) {
-        return `${this.currentStep}/${this.maxStep}`;
+        return `${this.value}/${this.maxValue}`;
       }
       else {
         return this.allowNonAvailableValue && !isFinite(progress) ? '-' : [progress, this.getUnit(progress)].join('');
@@ -516,23 +504,6 @@ export class YooProgressBarComponent {
       "attribute": "max-value",
       "reflect": false
     },
-    "maxStep": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Before setting this property, ensure that the metric is set to 'step'\nDefine the total number of step to display X/Y (Y)"
-      },
-      "attribute": "max-step",
-      "reflect": false
-    },
     "hideProgressValue": {
       "type": "boolean",
       "mutable": false,
@@ -638,8 +609,7 @@ export class YooProgressBarComponent {
         "text": "Used to modify the speed of the progress animation (in ms)"
       },
       "attribute": "progress-animation-duration",
-      "reflect": false,
-      "defaultValue": "!this.isAnimated ? 0 : 1.25"
+      "reflect": false
     },
     "value": {
       "type": "number",
@@ -657,23 +627,6 @@ export class YooProgressBarComponent {
       },
       "attribute": "value",
       "reflect": false
-    },
-    "currentStep": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Before setting this property, ensure that the metric is set to 'step'\nDefine the current step to display X/Y (X)"
-      },
-      "attribute": "current-step",
-      "reflect": false
     }
   }; }
   static get events() { return [{
@@ -714,8 +667,5 @@ export class YooProgressBarComponent {
     }, {
       "propName": "value",
       "methodName": "onProgressValueChanged"
-    }, {
-      "propName": "currentStep",
-      "methodName": "onCurrentStepChanged"
     }]; }
 }

package/dist/collection/components/1.atoms/tooltip/tooltip.js

@@ -81,6 +81,10 @@ export class YooTooltipComponent {
       this.saveTooltip.emit({ value: (_a = this.contentEditableElement) === null || _a === void 0 ? void 0 : _a.innerHTML, refTooltip: reference });
     }
   }
+  async toggleHoverable(isEnable = !this.hoverable) {
+    this.hoverable = isEnable;
+    this.reconfigureTooltip();
+  }
   onEditableChanged(newState, oldState) {
     this.hasModeChanged = newState !== oldState;
   }
@@ -797,6 +801,25 @@ export class YooTooltipComponent {
         "text": "",
         "tags": []
       }
+    },
+    "toggleHoverable": {
+      "complexType": {
+        "signature": "(isEnable?: boolean) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
     }
   }; }
   static get elementRef() { return "host"; }

package/dist/collection/components/1.atoms/truncated-line/truncated-line.js

@@ -1,5 +1,5 @@
 import { isTruncated } from '@shared/utils';
-import { Component, h, Host, Prop, State } from '@stencil/core';
+import { Component, Element, h, Host, Prop } from '@stencil/core';
 //! Things to note:
 //* - This component is for single line ONLY
 //* - Width of the parent must be set for the css truncation to work, flex/flex-grow is not enough
@@ -14,21 +14,24 @@ export class YooTruncatedLineComponent {
     // Full text content to be truncated / tooltip
     this.content = '';
     this.renderContentWithTooltip = () => {
-      return (h("yoo-tooltip", { content: this.content, placement: this.tooltipPlacement }, this.renderContent()));
+      return (h("yoo-tooltip", { ref: (el) => this.tooltipElement = el, content: this.content, placement: this.tooltipPlacement }, this.renderContent()));
     };
     this.renderContent = () => {
       return (h("div", { class: "content", ref: (el) => this.contentElement = el },
         this.content,
         h("slot", null)));
     };
+    this.toggleTooltip = (isEnabled) => {
+      if (this.tooltipElement) {
+        this.tooltipElement.toggleHoverable(isEnabled);
+      }
+    };
   }
   componentDidLoad() {
-    if (this.contentElement && (this.truncated !== isTruncated(this.contentElement))) {
-      this.truncated = isTruncated(this.contentElement);
-    }
+    this.contentElement && this.toggleTooltip(isTruncated(this.contentElement));
   }
   render() {
-    return (h(Host, null, this.truncated && this.withTooltip ? this.renderContent() : this.renderContentWithTooltip()));
+    return (h(Host, null, !this.withTooltip ? this.renderContent() : this.renderContentWithTooltip()));
   }
   static get is() { return "yoo-truncated-line"; }
   static get encapsulation() { return "shadow"; }
@@ -99,7 +102,5 @@ export class YooTruncatedLineComponent {
       "defaultValue": "''"
     }
   }; }
-  static get states() { return {
-    "truncated": {}
-  }; }
+  static get elementRef() { return "host"; }
 }

package/dist/collection/components/2.molecules/progress-recap/progress-recap.js

@@ -7,7 +7,7 @@ export class YooProgressRecap {
       h("yoo-icon", { name: "help", size: "small", color: "stable" })));
   }
   renderProgressbar() {
-    return (h("yoo-progress-bar", { metric: "step", class: {
+    return (h("yoo-progress-bar", { metric: "step", maxValue: this.max, value: this.progress, class: {
         success: !isNil(this.min) || (!isNil(this.min) && this.progress >= this.min),
         danger: !isNil(this.min) && this.progress < this.min
       }, ...this.min && {
@@ -15,7 +15,7 @@ export class YooProgressRecap {
             text: `${translateMulti('YOOBICMIN')}: ${this.min}`,
             xPercent: (this.min / this.max) * 100
           }]
-      }, maxStep: this.max, currentStep: this.progress }));
+      } }));
   }
   render() {
     return (h(Host, null,

package/dist/collection/components/entities/entity/entity.js

@@ -526,7 +526,7 @@ export class YooEntityComponent {
     const [feedBottomActions, eventBottomActions] = partition(bottomActions, (action) => { var _a; return !((_a = action.cssClass) === null || _a === void 0 ? void 0 : _a.includes('event')); });
     entry.bottomActions = feedBottomActions;
     entry.middleActions = middleActions;
-    entry.actions = this.item.validated !== false ? (_f = this.secondaryActions) === null || _f === void 0 ? void 0 : _f.filter((a) => (a.isVisible ? a.isVisible(this.item) : true)).map((a) => toButton(a, this.item)) : null;
+    entry.actions = (_f = this.secondaryActions) === null || _f === void 0 ? void 0 : _f.filter((a) => (a.isVisible ? a.isVisible(this.item) : true)).map((a) => toButton(a, this.item));
     if (this.item.event) {
       const event = this.item.event;
       const eventHandler = () => {

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

@@ -648,6 +648,7 @@ export class YooFormAutocompleteComponent {
       this.host.classList.remove('focused');
       this.arrowIcon = 'arrow-down';
       this.webAutocompleteClosed.emit(this.selection);
+      this.entityType === 'products' && (this.setValue([]));
     });
     this.dialog.addEventListener('filterRadioToggled', (ev) => {
       ev.stopPropagation();
@@ -672,6 +673,7 @@ export class YooFormAutocompleteComponent {
     this.host.classList.remove('focused');
     this.arrowIcon = 'arrow-down';
     this.webAutocompleteClosed.emit(this.selection);
+    this.entityType === 'products' && (this.setValue([]));
   }
   async onItemSelect(ev) {
     ev.stopPropagation();

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

@@ -260,6 +260,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .outer-container .progressbar-wrapper .main-wrapper {
   height: var(--spacing-32, 2rem);
 }
+:host .outer-container .progressbar-wrapper .main-wrapper yoo-progress-bar {
+  --progress-bar-color: var(--app-color, #5a30f4);
+}
 :host .outer-container .camera-container {
   position: relative;
   width: var(--camera-container-height, 6.125rem);

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-choice/button/form-choice-button.js

@@ -44,7 +44,7 @@ export class YooFormChoiceButtonComponent {
   }
   render() {
     return (h(Host, null, this.readonly ?
-      h(ReadonlyCard, { value: this.value, classNames: "button" }) : [
+      h(ReadonlyCard, { value: this.value, values: this.values, valuesColor: this.valuesColor, classNames: "button" }) : [
       this.renderBanner(),
       this.renderButton()
     ]));

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

@@ -1,10 +1,11 @@
 import { translateMulti } from '@shared/utils';
 import { h } from '@stencil/core';
-export const ReadonlyCard = ({ value, answer, valuesColor, classNames }) => {
+export const ReadonlyCard = ({ value, values, answer, valuesColor, classNames }) => {
   const classes = typeof classNames === 'string' ? classNames : Object.keys(classNames).join(' ');
   return h("div", { class: { [classes]: !!classes, 'readonly-card': true } }, (!!value && (Array.isArray(value) ? value : [value])).map((val) => {
-    var _a;
+    var _a, _b;
     const isCorrect = answer === null || answer === void 0 ? void 0 : answer.includes(val);
-    return h("div", { class: { text: true, valid: answer && isCorrect, invalid: answer && !isCorrect }, style: { color: (_a = valuesColor === null || valuesColor === void 0 ? void 0 : valuesColor.find(e => e.key === val)) === null || _a === void 0 ? void 0 : _a.value }, innerHTML: translateMulti(val) });
+    const title = (_a = values === null || values === void 0 ? void 0 : values.find((v) => (v === null || v === void 0 ? void 0 : v.value) === val)) === null || _a === void 0 ? void 0 : _a.title;
+    return h("div", { class: { text: true, valid: answer && isCorrect, invalid: answer && !isCorrect }, style: { color: (_b = valuesColor === null || valuesColor === void 0 ? void 0 : valuesColor.find(e => e.key === val)) === null || _b === void 0 ? void 0 : _b.value }, innerHTML: translateMulti(title || val) });
   }));
 };

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

@@ -685,8 +685,15 @@ span.fr-img-caption.fr-view {
   width: 100%;
 }
 :host .no-scroll {
+  height: 100%;
   overflow: hidden;
 }
+:host .no-scroll .field-placeholder.readonly {
+  height: 100%;
+}
+:host .no-scroll .field-placeholder.readonly yoo-form-input-container {
+  height: 100%;
+}
 :host .field-invalids {
   display: flex;
   flex-direction: column;
@@ -2376,10 +2383,6 @@ span.fr-img-caption.fr-view {
   display: none;
 }
 
-:host(:not(.mission-form):not(.lesson-form):not(.inline)) .field-placeholder.last {
-  margin-bottom: var(--spacing-16, 1rem);
-}
-
 :host(.mobile:not(.mission-form):not(.lesson-form):not(.inline)) .field-placeholder:not(.invisible) {
   padding-top: 0.5rem;
 }

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/ag-grid.css

@@ -8755,6 +8755,9 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
 :host .ag-cell .color-container {
   height: 100%;
   padding: 0.2rem !important;
+  padding-right: 0.5rem !important;
+  padding-left: 0.5rem !important;
+  border-radius: 0.5rem;
 }
 :host .ag-cell .margin-right {
   margin-right: var(--spacing-08, 0.5rem);

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';
@@ -20,7 +20,7 @@ function isCSVOrExcel(params) {
   return (params === null || params === void 0 ? void 0 : params.type) === 'excel' || (params === null || params === void 0 ? void 0 : params.type) === 'csv';
 }
 function defaultRenderer(params) {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
   let retVal = params.value || '';
   let translateFunction = translateMulti;
   if ((_a = params === null || params === void 0 ? void 0 : params.colDef) === null || _a === void 0 ? void 0 : _a.translate) {
@@ -38,11 +38,14 @@ 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;
+    }
     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 }))));
     }