@yoobic/yobi 8.2.0-12 → 8.2.0-15

package/dist/cjs/yoo-lesson-detail-card.cjs.entry.js

@@ -8,7 +8,7 @@ require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-3c14640e.js');
 
-const lessonDetailCardCss = ":host .card-container .top-bar{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:var(--spacing-56, 3.5rem);padding:0 var(--spacing-16, 1rem)}:host .card-container .top-bar .header .heading{margin:0}:host .card-container .top-bar .header .subheader{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;color:var(--stable);font-size:var(--font-size-12)}:host .card-container .top-bar .header .subheader yoo-icon{margin-right:var(--spacing-04, 0.25rem)}:host .card-container .top-bar .right-column{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}:host .card-container .top-bar .right-column .header-info{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;margin:0 var(--spacing-08, 0.5rem)}:host .card-container .top-bar .right-column .header-info yoo-icon{margin-right:var(--spacing-08, 0.5rem)}:host .card-container .top-bar .right-column .header-info p{font-size:var(--font-size-16)}:host .card-container .top-bar .right-column .tag-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin:0 var(--spacing-08, 0.5rem)}:host .card-container .top-bar .right-column .toggle-icon:hover{cursor:pointer}:host .card-container .content-container{max-height:18.75rem;overflow:hidden;-webkit-transition:max-height 200ms;transition:max-height 200ms}:host .card-container .content-container yoo-banner{--main-color:var(--warning-10, rgba(237, 110, 51, 0.1));width:95%;margin:var(--spacing-08, 0.5rem) auto;padding:var(--spacing-08, 0.5rem)}:host .card-container .content-container yoo-banner p{color:var(--dark, #000000)}:host .card-container .content-container .text{margin:var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);font-size:var(--font-size-14, 0.875rem)}:host .card-container .content-container .footer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:var(--spacing-56, 3.5rem);padding:0 var(--spacing-16, 1rem);border-top:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host .card-container .content-container .footer yoo-button{min-width:6rem}:host .card-container .content-container .footer .time-indicator{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}:host .card-container .content-container .footer .time-indicator yoo-progress-bar{--svg-width:1.8rem;--svg-height:1.8rem;padding:0 var(--spacing-08, 0.5rem)}:host .card-container .content-container .footer .time-indicator .time-text{font-size:var(--font-size-14, 0.875rem)}:host .card-container .content-container.hidden{max-height:0}:host([expanded]) .card-container{padding:var(--spacing-08, 0.5rem) 0}";
+const lessonDetailCardCss = ":host .card-container .top-bar{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:var(--spacing-56, 3.5rem);padding:0 var(--spacing-16, 1rem)}:host .card-container .top-bar .header .heading{margin:0}:host .card-container .top-bar .header .subheader{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;color:var(--stable);font-size:var(--font-size-12)}:host .card-container .top-bar .header .subheader yoo-icon{margin-right:var(--spacing-04, 0.25rem)}:host .card-container .top-bar .right-column{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}:host .card-container .top-bar .right-column .header-info{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;margin:0 var(--spacing-08, 0.5rem)}:host .card-container .top-bar .right-column .header-info yoo-icon{margin-right:var(--spacing-08, 0.5rem)}:host .card-container .top-bar .right-column .header-info p{font-size:var(--font-size-16)}:host .card-container .top-bar .right-column .tag-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin:0 var(--spacing-08, 0.5rem)}:host .card-container .top-bar .right-column .toggle-icon:hover{cursor:pointer}:host .card-container .content-container{max-height:18.75rem;overflow:hidden;-webkit-transition:max-height 200ms;transition:max-height 200ms}:host .card-container .content-container yoo-banner{--main-color:var(--warning-10, rgba(237, 110, 51, 0.1));width:95%;margin:var(--spacing-08, 0.5rem) auto;padding:var(--spacing-08, 0.5rem)}:host .card-container .content-container yoo-banner p{color:var(--dark, #000000)}:host .card-container .content-container .text{margin:var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);font-size:var(--font-size-14, 0.875rem)}:host .card-container .content-container .footer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:var(--spacing-56, 3.5rem);padding:0 var(--spacing-16, 1rem);border-top:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host .card-container .content-container .footer yoo-button{min-width:6rem}:host .card-container .content-container .footer .time-indicator{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}: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{font-size:var(--font-size-14, 0.875rem)}:host .card-container .content-container.hidden{max-height:0}:host([expanded]) .card-container{padding:var(--spacing-08, 0.5rem) 0}";
 
 const YooLessonDetailCard = class {
   constructor(hostRef) {
@@ -72,7 +72,7 @@ const YooLessonDetailCard = class {
     this.footerButtonClick.emit();
   }
   renderTimeIndicator() {
-    return (index.h("div", { class: "time-indicator" }, index.h("yoo-progress-bar", { shape: "circle", class: "app-color", animated: this.animated, hideProgressValue: true, value: 75 }), index.h("div", { class: "time-text" }, this.footer.timeIndicator)));
+    return (index.h("div", { class: "time-indicator" }, index.h("yoo-progress-bar", { shape: "circle", animated: this.animated, hideProgressValue: true, value: 75 }), index.h("div", { class: "time-text" }, this.footer.timeIndicator)));
   }
   renderFooter() {
     return (index.h("div", { class: "footer-container" }, index.h("div", { class: "footer" }, this.footer.timeIndicator ? this.renderTimeIndicator() : index.h("div", null), index.h("yoo-button", { onClick: () => this.onFooterButtonClick(), color: "app-color", size: "medium", fill: "solid", disabled: !this.footer.buttonClickable }, index$1.translate(this.footer.buttonLabel)))));

package/dist/cjs/yoo-mission-heading.cjs.entry.js

@@ -11,7 +11,7 @@ require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-3c14640e.js');
 
-const missionHeadingCss = ":host .background-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;margin:0 -1rem 0;border-bottom:solid 1px var(--stable-light, #f1f1f1)}:host yoo-banner{--main-color:var(--warning-10, rgba(237, 110, 51, 0.1));margin-top:var(--spacing-08, 0.5rem)}:host .content-container{-ms-flex:1;flex:1;padding:var(--spacing-16, 1rem) var(--spacing-08, 0.5rem)}:host .mission-title{margin-top:var(--spacing-08, 0.5rem);font-weight:var(--font-weight-700, 700);font-size:var(--font-size-24, 1.5rem);line-height:var(--spacing-32, 2rem)}:host .sub-heading{display:-ms-flexbox;display:flex;-ms-flex-flow:wrap;flex-flow:wrap;grid-gap:var(--spacing-08, 0.5rem);-ms-flex-align:center;align-items:center;margin-top:var(--spacing-08, 0.5rem)}:host .sub-heading .mission-progress{max-width:10rem;margin-right:var(--spacing-08, 0.5rem)}:host div:last-child{margin-bottom:0}:host(.mission-results) .background-container{margin:-1rem -1rem 0}";
+const missionHeadingCss = ":host .background-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;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)}:host .content-container{-ms-flex:1;flex:1;padding:var(--spacing-16, 1rem) var(--spacing-08, 0.5rem)}:host .mission-title{margin-top:var(--spacing-08, 0.5rem);font-weight:var(--font-weight-700, 700);font-size:var(--font-size-24, 1.5rem);line-height:var(--spacing-32, 2rem)}:host .sub-heading{display:-ms-flexbox;display:flex;-ms-flex-flow:wrap;flex-flow:wrap;grid-gap:var(--spacing-08, 0.5rem);-ms-flex-align:center;align-items:center;margin-top:var(--spacing-08, 0.5rem)}:host .sub-heading .mission-progress{max-width:10rem;margin-right:var(--spacing-08, 0.5rem)}:host div:last-child{margin-bottom:0}:host(.mission-results) .background-container{margin:-1rem -1rem 0}";
 
 const YooMissionHeadingComponent = class {
   constructor(hostRef) {
@@ -27,7 +27,7 @@ const YooMissionHeadingComponent = class {
     return (index.h(index.Host, { class: commonHelpers.getAppContext(this.host) }, index.h("div", { class: { 'background-container': true, pdf: this.isPdf } }, index.h("div", { class: "content-container" }, index.h(missionLockedBanner.MissionLockedBanner, { mission: this.mission }), [
       !this.isPdf && this.mission.title && index.h("div", { class: "mission-title" }, index$1.translateMulti(this.mission.title)),
       !this.mission.title && this.mission.type === 'visit' && index.h("div", { class: "mission-title" }, index$1.translate('VISIT')),
-      index.h("div", { class: "sub-heading" }, this.progress >= 0 && (index.h("div", { class: { 'mission-progress': true, 'mission-progress-web': !this.isMobile } }, index.h("yoo-progress-bar", { class: "app-color", animated: this.animated, value: this.progress }))), tags === null || tags === void 0 ? void 0 :
+      index.h("div", { class: "sub-heading" }, this.progress >= 0 && (index.h("div", { class: { 'mission-progress': true, 'mission-progress-web': !this.isMobile } }, index.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 (index.h("yoo-tag", { color: tag.color || tagDefaultColor, customColor: tag.customColor }, !!tag.icon && index.h("yoo-icon", { class: { custom: !!tag.customColor }, size: "small", name: tag.icon, slot: "start" }), tag.title));

package/dist/cjs/yoo-pivot-table.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-c8609d4f.js');
 const index$1 = require('./index-6690429f.js');
 const _commonjsHelpers = require('./_commonjsHelpers-94df2ea7.js');
 const lodash = require('./lodash-597bda6d.js');
-const gridRenderers = require('./grid-renderers-0c9a0d03.js');
+const gridRenderers = require('./grid-renderers-faeb4762.js');
 require('./index-3c14640e.js');
 require('./missions-helpers-c6a72b48.js');
 require('./common-helpers-f4a06bb8.js');

package/dist/cjs/yoo-profile-summary.cjs.entry.js

@@ -9,7 +9,7 @@ const commonHelpers = require('./common-helpers-f4a06bb8.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-3c14640e.js');
 
-const profileSummaryCss = ":host .profile-user{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;padding-bottom:var(--spacing-24, 1.5rem)}:host .profile-user yoo-tag{margin-top:var(--spacing-08, 0.5rem)}:host .profile-user .profile-details{text-align:center}:host .profile-user .profile-details .profile-user-name,:host .profile-user .profile-details yoo-avatar{margin:0 auto}:host .profile-user .profile-details.impersonating{opacity:0.5}:host .profile-user .profile-details .profile-user-name{padding:var(--spacing-08, 0.5rem) 0;text-align:center}:host .profile-user .profile-details .profile-user-role{color:var(--stable, #adadad);font-weight:var(--font-weight-400, 400);font-size:var(--font-size-14, 0.875rem);line-height:1rem}:host .actions-container{width:100%}:host .actions-container .user-actions{display:grid;grid-template-columns:repeat(auto-fit, minmax(0, 1fr));margin:var(--spacing-24, 1.5rem) var(--spacing-16, 1rem);-webkit-column-gap:var(--spacing-08, 0.5rem);-moz-column-gap:var(--spacing-08, 0.5rem);column-gap:var(--spacing-08, 0.5rem)}:host(.web) .profile-user{padding:0}:host(.web) .actions-container{width:21.875rem}:host(.web.personal-view) .profile-user{-ms-flex-direction:row;flex-direction:row}:host(.web.personal-view) .profile-user .profile-details{text-align:left}:host(.web.personal-view) .profile-user .profile-details .profile-user-name{font-weight:var(--font-weight-700, 700)}:host(.web.personal-view) .profile-user .profile-details .profile-user-role{font-size:var(--font-size-16, 1rem)}:host(.web.personal-view) .profile-user yoo-avatar{margin:var(--spacing-24, 1.5rem)}";
+const profileSummaryCss = ":host .profile-user{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;padding-bottom:var(--spacing-24, 1.5rem)}:host .profile-user yoo-tag{margin-top:var(--spacing-08, 0.5rem)}:host .profile-user>yoo-avatar{z-index:11}:host .profile-user .profile-details{text-align:center}:host .profile-user .profile-details .profile-user-name,:host .profile-user .profile-details yoo-avatar{margin:0 auto}:host .profile-user .profile-details.impersonating{opacity:0.5}:host .profile-user .profile-details .profile-user-name{padding:var(--spacing-08, 0.5rem) 0;text-align:center}:host .profile-user .profile-details .profile-user-role{color:var(--stable, #adadad);font-weight:var(--font-weight-400, 400);font-size:var(--font-size-14, 0.875rem);line-height:1rem}:host .actions-container{width:100%}:host .actions-container .user-actions{display:grid;grid-template-columns:repeat(auto-fit, minmax(0, 1fr));margin:var(--spacing-24, 1.5rem) var(--spacing-16, 1rem);-webkit-column-gap:var(--spacing-08, 0.5rem);-moz-column-gap:var(--spacing-08, 0.5rem);column-gap:var(--spacing-08, 0.5rem)}:host(.web) .profile-user{padding:0}:host(.web) .actions-container{width:21.875rem}:host(.web.personal-view) .profile-user{-ms-flex-direction:row;flex-direction:row}:host(.web.personal-view) .profile-user .profile-details{text-align:left}:host(.web.personal-view) .profile-user .profile-details .profile-user-name{font-weight:var(--font-weight-700, 700)}:host(.web.personal-view) .profile-user .profile-details .profile-user-role{font-size:var(--font-size-16, 1rem)}:host(.web.personal-view) .profile-user yoo-avatar{margin:var(--spacing-24, 1.5rem)}";
 
 const YooProfileSummaryComponent = class {
   constructor(hostRef) {

package/dist/cjs/yoo-progress-bar.cjs.entry.js

@@ -18,7 +18,7 @@ const DEFAULT_SHAPES = {
   'semi-circle': 'M 0, y a r,r 0 1,1 d,0'
 };
 
-const progressBarCss = ":host{position:relative;display:block;--svg-width:100%;--svg-fill:var(--transparent, transparent);--stroke-width-line:3;--stroke-width-circle:3;--progress-value-font-size:var(--font-size-16, 1rem);--progress-value-font-weight:var(--font-weight-400, 400);--progress-value-color:var(--dark, #000000);--progress-bar-color:unset;--progress-bar-display:block;--trail-bar-color:var(--stable-light, #f1f1f1);--trail-bar-display:block}:host svg{width:var(--svg-width)}:host svg #trail{stroke-linecap:round;display:var(--trail-bar-display);stroke:var(--trail-bar-color)}:host svg #progress{display:var(--progress-bar-display);stroke:var(--progress-bar-color)}:host svg #progress:not([x2=\"0%\"]){stroke-linecap:round}:host #value{color:var(--progress-value-color);font-weight:var(--progress-value-font-weight);font-size:var(--progress-value-font-size);fill:var(--progress-value-color)}:host([shape=line]){display:inline-grid;grid-gap:var(--spacing-08, 0.5rem);grid-template-columns:1fr auto;place-items:center;width:100%}:host([shape=line]) svg{overflow:unset}:host([shape=line]) svg:not(.has-markers){height:0.25rem}:host([shape=line]) svg:not(.has-markers) line{stroke-width:var(--stroke-width-line)}:host([shape=line]) svg.has-markers{max-height:10vh}:host([shape=line]) svg.has-markers .marker{font-size:0.25rem;-webkit-transform:translateX(-0.5rem);transform:translateX(-0.5rem)}:host([shape=line]) span{width:100%;text-align:center}:host([shape=line][x=right]) span{text-align:right}:host([shape=line][x=left]) span{text-align:left}:host([shape=line][y=bottom]),:host([shape=line][y=top]),:host([shape=line].no-value){grid-template-columns:initial;line-height:1}:host([shape=line][y=top]) svg{-ms-flex-order:1;order:1}:host([shape=line][y=top]) span{-ms-flex-order:0;order:0}:host([shape=circle]),:host([shape=semi-circle]){--progress-value-tsx:-50%;--progress-value-tsy:-50%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;margin:0 auto}:host([shape=circle]) svg,:host([shape=semi-circle]) svg{overflow:initial;fill:var(--svg-fill)}:host([shape=circle]) svg path,:host([shape=semi-circle]) svg path{stroke-width:var(--stroke-width-circle)}:host([shape=circle]) #value,:host([shape=semi-circle]) #value{position:absolute;top:50%;left:50%;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-transform:translate(var(--progress-value-tsx), var(--progress-value-tsy));transform:translate(var(--progress-value-tsx), var(--progress-value-tsy))}:host([shape=semi-circle]){--progress-value-tsy:calc(-50% + .5rem)}:host([metric=points]){--progress-bar-display:none;--trail-bar-display:none}:host(.app-color){--progress-bar-color:var(--app-color, #5a30f4)}";
+const progressBarCss = ":host{position:relative;display:block;--svg-width:100%;--svg-fill:var(--transparent, transparent);--stroke-width-line:3;--stroke-width-circle:3;--progress-value-font-size:var(--font-size-16, 1rem);--progress-value-font-weight:var(--font-weight-400, 400);--progress-value-color:var(--dark, #000000);--progress-bar-color:unset;--progress-bar-display:block;--trail-bar-color:var(--stable-light, #f1f1f1);--trail-bar-display:block}:host svg{width:var(--svg-width)}:host svg #trail{stroke-linecap:round;display:var(--trail-bar-display);stroke:var(--trail-bar-color)}:host svg #progress{display:var(--progress-bar-display);stroke:var(--progress-bar-color)}:host svg #progress:not([x2=\"0%\"]){stroke-linecap:round}:host #value{color:var(--progress-value-color);font-weight:var(--progress-value-font-weight);font-size:var(--progress-value-font-size);fill:var(--progress-value-color)}:host([shape=line]){display:inline-grid;grid-gap:var(--spacing-08, 0.5rem);grid-template-columns:1fr auto;place-items:center;width:100%}:host([shape=line]) svg{overflow:unset}:host([shape=line]) svg:not(.has-markers){height:var(--spacing-04, 0.25rem)}:host([shape=line]) svg:not(.has-markers) line{stroke-width:var(--stroke-width-line)}:host([shape=line]) svg.has-markers{max-height:10vh}:host([shape=line]) svg.has-markers .marker{font-size:var(--spacing-04, 0.25rem);-webkit-transform:translateX(calc(var(--spacing-08, 0.5rem) * -1));transform:translateX(calc(var(--spacing-08, 0.5rem) * -1))}:host([shape=line]) span{width:100%;text-align:center}:host([shape=line][x=right]) span{text-align:right}:host([shape=line][x=left]) span{text-align:left}:host([shape=line][y=bottom]),:host([shape=line][y=top]),:host([shape=line].no-value){grid-template-columns:initial;line-height:1}:host([shape=line][y=top]) svg{-ms-flex-order:1;order:1}:host([shape=line][y=top]) span{-ms-flex-order:0;order:0}:host([shape=circle]),:host([shape=semi-circle]){--progress-value-tsx:-50%;--progress-value-tsy:-50%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;margin:0 auto}:host([shape=circle]) svg,:host([shape=semi-circle]) svg{overflow:initial;fill:var(--svg-fill)}:host([shape=circle]) svg path,:host([shape=semi-circle]) svg path{stroke-width:var(--stroke-width-circle)}:host([shape=circle]) #value,:host([shape=semi-circle]) #value{position:absolute;top:50%;left:50%;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-transform:translate(var(--progress-value-tsx), var(--progress-value-tsy));transform:translate(var(--progress-value-tsx), var(--progress-value-tsy))}:host([shape=semi-circle]){--progress-value-tsy:calc(-50% + var(--spacing-08, 0.5rem))}:host([metric=points]){--progress-bar-display:none;--trail-bar-display:none}:host([metric=step]){--progress-bar-color:var(--app-color, #5a30f4)}";
 
 const YooProgressBarComponent = class {
   constructor(hostRef) {
@@ -94,10 +94,6 @@ const YooProgressBarComponent = class {
      * 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();
@@ -105,16 +101,6 @@ const YooProgressBarComponent = class {
   onProgressValueChanged(_, currentValue) {
     this.setProgress(currentValue);
   }
-  onCurrentStepChanged(_, currentStep) {
-    this.setProgress(currentStep);
-  }
-  componentDidLoad() {
-    if (this.progressSVGElement) {
-      this.resizeListener = lodash.debounce(this.initProgressBar, 750).bind(this);
-      window.addEventListener('resize', this.resizeListener);
-      this.initProgressBar();
-    }
-  }
   get isAnimated() {
     return this.animated && !index$1.isAnimationsDisabled();
   }
@@ -137,6 +123,16 @@ const YooProgressBarComponent = class {
     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 = lodash.debounce(this.initProgressBar, 750).bind(this);
+      window.addEventListener('resize', this.resizeListener);
+      this.initProgressBar();
+    }
+  }
   initProgressBar() {
     if (this.progressSVGElement) {
       this.initSVGPaths();
@@ -164,13 +160,18 @@ const YooProgressBarComponent = class {
   }
   setProgress(currentProgress = 0) {
     if (this.progressSVGElement) {
-      const toProgress = lodash.clamp(this.getValue(), 0, 100);
+      const getProgress = (progress = this.value) => {
+        const currentProgress = progress || 0;
+        const newProgress = this.maxValue ? (currentProgress / this.maxValue) * 100 : currentProgress;
+        return lodash.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 ? lodash.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;
@@ -195,7 +196,7 @@ const YooProgressBarComponent = class {
       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)
@@ -222,24 +223,11 @@ const YooProgressBarComponent = class {
       progressBarElement && lodash.isFinite(toProgress) && lodash.isFinite(fromProgress) && index$1.gsapFromTo(progressBarElement, this.isAnimated ? this.progressAnimationDuration : 0, fromAnimation, toAnimation);
     }
   }
-  getValue(progress) {
-    let currentProgress = progress >= 0 && !lodash.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 (lodash.isFinite(this.maxValue) && !!this.maxValue) {
-      return (currentProgress / this.maxValue) * 100;
-    }
-    else {
-      return currentProgress;
-    }
-  }
   getLabelledValue(progress) {
     progress = progress !== null && progress !== void 0 ? progress : ((lodash.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 && !lodash.isFinite(progress) ? '-' : [progress, this.getUnit(progress)].join('');
@@ -303,8 +291,7 @@ const YooProgressBarComponent = class {
   get host() { return index.getElement(this); }
   static get watchers() { return {
     "progressAnimationDuration": ["onProgressAnimationDurationChanged"],
-    "value": ["onProgressValueChanged"],
-    "currentStep": ["onCurrentStepChanged"]
+    "value": ["onProgressValueChanged"]
   }; }
 };
 YooProgressBarComponent.style = progressBarCss;

package/dist/cjs/yoo-progress-recap.cjs.entry.js

@@ -18,7 +18,7 @@ const YooProgressRecap = class {
     return (index.h("yoo-tooltip", { placement: "top", content: index$1.translateMulti(this.tooltip) }, index.h("yoo-icon", { name: "help", size: "small", color: "stable" })));
   }
   renderProgressbar() {
-    return (index.h("yoo-progress-bar", { metric: "step", class: {
+    return (index.h("yoo-progress-bar", { metric: "step", maxValue: this.max, value: this.progress, class: {
         success: !lodash.isNil(this.min) || (!lodash.isNil(this.min) && this.progress >= this.min),
         danger: !lodash.isNil(this.min) && this.progress < this.min
       }, ...this.min && {
@@ -26,7 +26,7 @@ const YooProgressRecap = class {
             text: `${index$1.translateMulti('YOOBICMIN')}: ${this.min}`,
             xPercent: (this.min / this.max) * 100
           }]
-      }, maxStep: this.max, currentStep: this.progress }));
+      } }));
   }
   render() {
     return (index.h(index.Host, null, index.h("div", { class: "card" }, index.h("div", { class: "top-container" }, index.h("div", { class: "heading" }, index$1.translateMulti(this.heading)), this.tooltip && this.renderTooltip()), this.renderProgressbar())));

package/dist/cjs/yoo-tooltip.cjs.entry.js

@@ -90,6 +90,10 @@ const YooTooltipComponent = class {
       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;
   }

package/dist/cjs/yoo-truncated-line.cjs.entry.js

@@ -20,20 +20,24 @@ const YooTruncatedLineComponent = class {
     // Full text content to be truncated / tooltip
     this.content = '';
     this.renderContentWithTooltip = () => {
-      return (index.h("yoo-tooltip", { content: this.content, placement: this.tooltipPlacement }, this.renderContent()));
+      return (index.h("yoo-tooltip", { ref: (el) => this.tooltipElement = el, content: this.content, placement: this.tooltipPlacement }, this.renderContent()));
     };
     this.renderContent = () => {
       return (index.h("div", { class: "content", ref: (el) => this.contentElement = el }, this.content, index.h("slot", null)));
     };
+    this.toggleTooltip = (isEnabled) => {
+      if (this.tooltipElement) {
+        this.tooltipElement.toggleHoverable(isEnabled);
+      }
+    };
   }
   componentDidLoad() {
-    if (this.contentElement && (this.truncated !== index$1.isTruncated(this.contentElement))) {
-      this.truncated = index$1.isTruncated(this.contentElement);
-    }
+    this.contentElement && this.toggleTooltip(index$1.isTruncated(this.contentElement));
   }
   render() {
-    return (index.h(index.Host, null, this.truncated && this.withTooltip ? this.renderContent() : this.renderContentWithTooltip()));
+    return (index.h(index.Host, null, !this.withTooltip ? this.renderContent() : this.renderContentWithTooltip()));
   }
+  get host() { return index.getElement(this); }
 };
 YooTruncatedLineComponent.style = truncatedLineCss;
 

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

@@ -253,7 +253,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   overflow: unset;
 }
 :host([shape=line]) svg:not(.has-markers) {
-  height: 0.25rem;
+  height: var(--spacing-04, 0.25rem);
 }
 :host([shape=line]) svg:not(.has-markers) line {
   stroke-width: var(--stroke-width-line);
@@ -262,8 +262,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   max-height: 10vh;
 }
 :host([shape=line]) svg.has-markers .marker {
-  font-size: 0.25rem;
-  transform: translateX(-0.5rem);
+  font-size: var(--spacing-04, 0.25rem);
+  transform: translateX(calc(var(--spacing-08, 0.5rem) * -1));
 }
 :host([shape=line]) span {
   width: 100%;
@@ -320,7 +320,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 
 :host([shape=semi-circle]) {
-  --progress-value-tsy: calc(-50% + .5rem);
+  --progress-value-tsy: calc(-50% + var(--spacing-08, 0.5rem));
 }
 
 :host([metric=points]) {
@@ -328,6 +328,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --trail-bar-display: none;
 }
 
-:host(.app-color) {
+:host([metric=step]) {
   --progress-bar-color: var(--app-color, #5a30f4);
 }

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/profile-summary/profile-summary.css

@@ -210,6 +210,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .profile-user yoo-tag {
   margin-top: var(--spacing-08, 0.5rem);
 }
+:host .profile-user > yoo-avatar {
+  z-index: 11;
+}
 :host .profile-user .profile-details {
   text-align: center;
 }

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);