@yoobic/yobi 8.2.0-9 → 8.2.0

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 { isTruncated, translateMulti } from '@shared/utils';
+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,
+        translateMulti(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/action-sheet/action-sheet.css

@@ -323,6 +323,12 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .top-container .inner-container .text-container.icon-description {
   padding-top: var(--spacing-08, 0.5rem);
 }
+:host .top-container .inner-container .text-container .beta {
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacing-08, 0.5rem);
+  align-items: center;
+}
 :host .top-container .inner-container .text-container.last {
   border: none;
 }

package/dist/collection/components/2.molecules/action-sheet/action-sheet.js

@@ -143,7 +143,7 @@ export class YooActionSheetComponent {
       }, onClick: (ev) => this.onButtonClick(button, ev), ref: (el) => (this.actionClickDivs[index] = el), onTouchStart: () => this.onItemTouchStart(this.actionClickDivs[index]), onTouchEnd: () => this.onItemTouchEnd(this.actionClickDivs[index]) },
       button.icon && this.renderButtonIcon(button),
       h("div", { class: { 'text-container': true, 'icon-no-description': button.icon && !hasDescription, 'icon-description': button.icon && hasDescription } },
-        button.isBeta ? (h("span", null,
+        button.isBeta ? (h("span", { class: { beta: button.isBeta } },
           h("span", { innerHTML: text }),
           " ",
           h("yoo-tag", { color: "app-color" }, translate('BETA')))) : (h("span", { innerHTML: text })),

package/dist/collection/components/2.molecules/audio-player/audio-player.js

@@ -22,12 +22,12 @@ export class YooAudioPlayerComponent {
     this.currentTime = 0;
     this.currentTimeDisplay = '00:00';
   }
-  onSrcChanged() {
-    return this.initPlayer(true);
-  }
   onVisibilityChanged() {
     this.pause();
   }
+  onSrcChanged() {
+    return this.initPlayer(true);
+  }
   async getAudio() {
     return this.audio;
   }
@@ -36,7 +36,7 @@ export class YooAudioPlayerComponent {
     return (_a = this.audio) === null || _a === void 0 ? void 0 : _a.pause();
   }
   async componentWillLoad() {
-    return await this.initPlayer();
+    await this.initPlayer();
   }
   disconnectedCallback() {
     this.pause();
@@ -94,7 +94,7 @@ export class YooAudioPlayerComponent {
       .map((v) => v.toString().padStart(2, '0'))
       .join(':');
   }
-  async togglePlay(ev) {
+  togglePlay(ev) {
     if (ev && this.audio) {
       ev.stopPropagation();
       const { paused, ended, currentTime } = this.audio;
@@ -108,7 +108,11 @@ export class YooAudioPlayerComponent {
       }
     }
   }
-  render() {
+  renderPlayButton() {
+    return h("yoo-button", { disabled: this.disabled, animated: isWeb(this.host), shape: "circular", fill: "transparent", onClick: (ev) => this.togglePlay(ev) },
+      h("yoo-icon", { name: `${this.audio.paused ? 'play' : 'pause'}-audio`, size: "large" }));
+  }
+  renderRange() {
     const pausePlay = (ev) => {
       this.isDragging = !ev;
       this.pause();
@@ -118,12 +122,21 @@ export class YooAudioPlayerComponent {
       this.currentTime = this.audio.currentTime = value !== null && value !== void 0 ? value : 0;
       this.audio.play();
     };
-    return (h(Host, null, [
-      h("yoo-button", { disabled: this.disabled, animated: isWeb(this.host), shape: "circular", fill: "transparent", onClick: (ev) => this.togglePlay(ev) },
-        h("yoo-icon", { name: `${this.audio.paused ? 'play' : 'pause'}-audio`, size: "large" })),
-      h("yoo-range", { max: this.duration, value: this.currentTime, disabled: this.disabled, onValueChanged: (ev) => this.currentTimeDisplay = this.formateTime(ev === null || ev === void 0 ? void 0 : ev.detail), onKnobPressed: () => pausePlay(), onMouseDown: (ev) => pausePlay(ev), onKnobReleased: (ev) => resumePlay(ev === null || ev === void 0 ? void 0 : ev.detail) }),
-      h("div", { class: { 'audio-info': true, 'only-time': this.displayTimeOnly } }, [!this.displayTimeOnly && h("span", null, translate('AUDIO')), h("span", null, this.currentTimeDisplay)])
-    ]));
+    return h("yoo-range", { max: this.duration, value: this.currentTime, disabled: this.disabled, onValueChanged: ({ detail }) => this.currentTimeDisplay = this.formateTime(detail), onKnobPressed: () => pausePlay(), onKnobReleased: ({ detail }) => resumePlay(detail) });
+  }
+  renderInfo() {
+    return h("div", { class: { 'audio-info': true, 'only-time': this.displayTimeOnly } }, [!this.displayTimeOnly &&
+        h("span", null, translate('AUDIO')), h("span", null, this.currentTimeDisplay)
+    ]);
+  }
+  render() {
+    return (h(Host, null,
+      " ",
+      [
+        this.renderPlayButton(),
+        this.renderRange(),
+        this.renderInfo()
+      ]));
   }
   static get is() { return "yoo-audio-player"; }
   static get encapsulation() { return "shadow"; }
@@ -316,10 +329,10 @@ export class YooAudioPlayerComponent {
   }; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
-      "propName": "src",
-      "methodName": "onSrcChanged"
-    }, {
       "propName": "isVisible",
       "methodName": "onVisibilityChanged"
+    }, {
+      "propName": "src",
+      "methodName": "onSrcChanged"
     }]; }
 }

package/dist/collection/components/2.molecules/banner/banner.js

@@ -51,7 +51,7 @@ export class YooBannerComponent {
           },
           "YooIconComponent": {
             "location": "import",
-            "path": "src/components/1.atoms/icon/icon"
+            "path": "../../1.atoms/icon/icon"
           }
         }
       },

package/dist/collection/components/2.molecules/calendar/calendar.css

@@ -202,8 +202,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* spacing for padding, margin, etc... */
 /* shadow */
 :host {
-  --active-day-circle-size: 2rem;
-  --mobile-days-height: 100%;
   display: block;
   opacity: 1;
 }
@@ -254,7 +252,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   font-weight: var(--font-weight-400, 400);
   font-size: var(--font-size-16, 1rem);
   font-style: normal;
-  line-height: normal;
   text-align: center;
 }
 :host .calendar-container.modern yoo-ion-slide {
@@ -264,6 +261,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   display: flex;
   flex: 1;
   flex-direction: row;
+  padding: var(--spacing-04, 0.25rem) 0;
   border-bottom: var(--border-width-01, 0.0625rem) solid var(--stable-40, rgba(173, 173, 173, 0.4));
 }
 :host .week .day {
@@ -273,10 +271,20 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   align-content: center;
   align-items: center;
   justify-content: center;
-  height: 3.75rem;
+  height: 3.5rem;
   text-align: center;
   cursor: pointer;
 }
+:host .week .day.active .day-number {
+  width: 50%;
+  max-width: var(--spacing-24, 1.5rem);
+  padding: 5%;
+}
+:host .week .day:not(.in-range) .day-number:after {
+  display: block;
+  padding-top: 100%;
+  content: "";
+}
 :host .week .day.grey-day {
   opacity: 0.3;
 }
@@ -304,13 +312,10 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   align-content: center;
   align-items: center;
   justify-content: center;
-  width: var(--active-day-circle-size);
-  height: var(--active-day-circle-size);
   font-weight: var(--font-weight-400, 400);
   font-size: var(--font-size-18, 1.125rem);
   font-style: normal;
   line-height: normal;
-  border-radius: 50%;
 }
 :host .week .marker {
   width: 0.375rem;
@@ -392,7 +397,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   font-weight: var(--font-weight-400, 400);
   font-size: var(--font-size-20, 1.25rem);
   font-style: normal;
-  line-height: normal;
 }
 :host .mobile-calendar-header .done {
   margin-right: var(--spacing-08, 0.5rem);
@@ -408,7 +412,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   font-weight: var(--font-weight-400, 400);
   font-size: var(--font-size-16, 1rem);
   font-style: normal;
-  line-height: normal;
 }
 :host .mobile-calendar-header .calendar-tools .calendar-toggle:last-child {
   padding-right: 0.4375rem;
@@ -425,8 +428,12 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   width: 100%;
   color: var(--dark, #000000);
 }
+:host .mobile-days .day-number {
+  width: var(--spacing-16, 1rem);
+  border-radius: 50%;
+}
 :host .mobile-days .in-range .day-number {
-  width: 1.25rem;
+  width: 100%;
   color: var(--light, #ffffff) !important;
   background: var(--app-color, #5a30f4);
   border-radius: 0;
@@ -437,28 +444,11 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   background: none;
 }
 :host .mobile-days .in-range.first-day .day-number {
-  display: flex;
-  flex-direction: row;
-  align-content: center;
-  align-items: center;
-  justify-content: center;
-  width: var(--active-day-circle-size);
-  height: var(--active-day-circle-size);
-  font-weight: var(--font-weight-400, 400);
-  font-size: var(--font-size-18, 1.125rem);
-  font-style: normal;
-  line-height: normal;
-  border-radius: 50%;
-  z-index: 1;
-  color: var(--light, #ffffff);
-  background: var(--app-color, #5a30f4);
-  opacity: 1;
+  border-radius: var(--spacing-08, 0.5rem) 0 0 var(--spacing-08, 0.5rem);
 }
 :host .mobile-days .in-range.first-day:after {
   position: absolute;
   right: 0;
-  left: calc(50% - var(--active-day-circle-size) / 2);
-  height: var(--active-day-circle-size);
   margin-left: 0.8125rem;
   background: var(--app-color, #5a30f4);
   opacity: 0.6;
@@ -469,33 +459,30 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   background: none;
 }
 :host .mobile-days .in-range.last-day .day-number {
+  border-radius: 0 var(--spacing-08, 0.5rem) var(--spacing-08, 0.5rem) 0;
+}
+:host .mobile-days .in-range.last-day:before {
+  position: absolute;
+  margin-right: var(--spacing-16, 1rem);
+  background: var(--app-color, #5a30f4);
+  opacity: 0.6;
+  content: "";
+}
+:host .mobile-days .in-range.first-day .day-number, :host .mobile-days .in-range.last-day .day-number {
   display: flex;
   flex-direction: row;
   align-content: center;
   align-items: center;
   justify-content: center;
-  width: var(--active-day-circle-size);
-  height: var(--active-day-circle-size);
   font-weight: var(--font-weight-400, 400);
   font-size: var(--font-size-18, 1.125rem);
   font-style: normal;
   line-height: normal;
-  border-radius: 50%;
   z-index: 1;
   color: var(--light, #ffffff);
   background: var(--app-color, #5a30f4);
   opacity: 1;
 }
-:host .mobile-days .in-range.last-day:before {
-  position: absolute;
-  right: calc(50% - var(--active-day-circle-size) / 2);
-  left: 0;
-  height: var(--active-day-circle-size);
-  margin-right: var(--spacing-16, 1rem);
-  background: var(--app-color, #5a30f4);
-  opacity: 0.6;
-  content: "";
-}
 
 :host([hidden]) {
   display: none;
@@ -529,9 +516,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   background: var(--stable-light, #f1f1f1);
 }
 
-:host(.web) {
-  --active-day-circle-size: 1.625rem;
-}
 :host(.web) .days {
   height: 100%;
 }
@@ -623,7 +607,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   }
 }
 :host([size=extra-small]) {
-  --active-day-circle-size: 1rem;
   width: 100%;
   min-height: unset;
   border: solid 0.0625rem var(--stable-light, #f1f1f1);
@@ -673,7 +656,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 
 :host([size=small]) {
-  --active-day-circle-size: 1.25rem;
   width: 100%;
   min-height: unset;
   border: solid 0.0625rem var(--stable-light, #f1f1f1);
@@ -714,8 +696,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 0.75rem;
-  border-radius: 50%;
+  font-size: var(--font-size-12, 0.75rem);
 }
 :host([size=small]) .week .day.active .day-number {
   background: var(--app-color, #5a30f4);

package/dist/collection/components/2.molecules/calendar/calendar.js

@@ -18,7 +18,7 @@ export class YooCalendarComponent {
     this.singleRange = false;
     this.calendarWebTabs = [
       {
-        title: translate('TODAY'),
+        title: translate('YOOBICTODAY'),
         value: 'today'
       },
       {
@@ -603,7 +603,7 @@ export class YooCalendarComponent {
   }
   renderCalendarModeToggle() {
     return (h("div", { class: "calendar-tools" },
-      h("span", { class: "calendar-toggle today", onClick: this.onSetToday.bind(this) }, translate('TODAY')),
+      h("span", { class: "calendar-toggle today", onClick: this.onSetToday.bind(this) }, translate('YOOBICTODAY')),
       h("span", { class: {
           'calendar-toggle': true,
           active: this.isWeekDisplay

package/dist/collection/components/2.molecules/context-menu-dialog/context-menu-dialog.js

@@ -126,12 +126,12 @@ export class YooContextMenuDialogComponent {
     ]) : (h("span", { innerHTML: translateMulti(textContent) })));
   }
   renderRightActions(item) {
-    const { subMenu, isToggle, selectedFn, selected, handler, actionableIcon, actionableIcons, icon, iconColor } = item;
+    const { subMenu, isToggle, selectedFn, selected, handler, actionableIcon, actionableIcons } = item;
     return [
       !!(subMenu === null || subMenu === void 0 ? void 0 : subMenu.length) && h("yoo-icon", { class: "arrows", name: `arrow-${this.openSubMenuOnLeft ? 'left' : 'right'}` }),
       isToggle && h("yoo-form-toggle", { size: "medium", value: (selectedFn === null || selectedFn === void 0 ? void 0 : selectedFn()) || selected, onInputChanged: () => handler === null || handler === void 0 ? void 0 : handler() }),
       actionableIcon && h("yoo-icon", { size: (actionableIcon === null || actionableIcon === void 0 ? void 0 : actionableIcon.iconSize) || 'medium', class: "right-aligned", name: actionableIcon.icon, color: actionableIcon.iconColor, onClick: (ev) => this.onActionableIconClick(ev, actionableIcon) }),
-      actionableIcons === null || actionableIcons === void 0 ? void 0 : actionableIcons.map((action) => h("yoo-icon", { size: action.iconSize || 'medium', class: "right-aligned", name: icon, color: iconColor, onClick: (ev) => this.onActionableIconClick(ev, action) }))
+      actionableIcons === null || actionableIcons === void 0 ? void 0 : actionableIcons.map((action) => h("yoo-icon", { size: action.iconSize || 'medium', class: "right-aligned", name: action.icon, color: action.iconColor, onClick: (ev) => this.onActionableIconClick(ev, action) }))
     ];
   }
   renderItemContent(item) {

package/dist/collection/components/2.molecules/modal/modal.css

@@ -425,22 +425,28 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host(.quickview).has-footer.has-header .modal-wrapper {
   height: calc(100% - 6.5625rem);
 }
-:host(.quickview).quickview-right-panel.no-shadow .overlay {
+:host(.quickview).quickview-right-panel.no-shadow .overlay, :host(.quickview).quickview-left-panel.no-shadow .overlay {
   display: none;
 }
 :host(.quickview).quickview-right-panel.no-top .modal-wrapper,
-:host(.quickview).quickview-right-panel.no-top .overlay {
+:host(.quickview).quickview-right-panel.no-top .overlay, :host(.quickview).quickview-left-panel.no-top .modal-wrapper,
+:host(.quickview).quickview-left-panel.no-top .overlay {
   top: 0;
 }
-:host(.quickview).quickview-right-panel .overlay {
+:host(.quickview).quickview-right-panel .overlay, :host(.quickview).quickview-left-panel .overlay {
   top: 3.5rem;
 }
-:host(.quickview).quickview-right-panel .modal-wrapper {
+:host(.quickview).quickview-right-panel .modal-wrapper, :host(.quickview).quickview-left-panel .modal-wrapper {
   top: 3.5rem;
   width: 22.5rem;
   border-top: var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);
   border-left: var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);
 }
+:host(.quickview).quickview-left-panel .modal-wrapper {
+  right: auto;
+  left: 0;
+  width: 24.5rem;
+}
 :host(.quickview) .modal-wrapper {
   top: 6.5rem;
   right: 0;
@@ -451,10 +457,12 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   top: 3.5625rem;
 }
 
+:host(.quickview-left-panel:not(.mobile)) .modal-wrapper,
 :host(.quickview-right-panel:not(.mobile)) .modal-wrapper,
 :host(.quickview:not(.mobile)) .modal-wrapper {
   position: fixed;
 }
+:host(.quickview-left-panel:not(.mobile)) .overlay,
 :host(.quickview-right-panel:not(.mobile)) .overlay,
 :host(.quickview:not(.mobile)) .overlay {
   position: fixed;

package/dist/collection/components/2.molecules/modal/modal.js

@@ -42,32 +42,19 @@ export class YooIonModalComponent {
     this.presented = false;
     this.hasPresented = false;
     this.arrowElements = [];
-    this.onKeyboardDidShow = () => {
+    this.onKeyboardDidShow = async (ev) => {
       var _a;
       if (!isWeb(this.host) && this.dialogElement && ((_a = this.componentProps) === null || _a === void 0 ? void 0 : _a.half) && !this.fullscreen) {
-        gsapTo(this.dialogElement, 0.5, {
-          y: 0,
-          height: window.innerHeight,
-          onComplete: () => {
-            this.modalYPosition = 0;
-            this.setFullscreen();
-          }
-        });
+        this.keyboardHeight = ev['keyboardHeight'];
+        await gsapTo(this.dialogElement, 0.5, { y: 0, height: window.innerHeight + this.keyboardHeight });
+        this.setFullscreen();
       }
     };
     this.onKeyboardDidHide = () => {
       var _a;
-      const height = this.dialogElement.style.height;
-      const finalHeight = `${window.innerHeight - this.modalYPosition}px`;
-      if (this.dialogElement && ((_a = this.componentProps) === null || _a === void 0 ? void 0 : _a.half) && this.fullscreen && height !== finalHeight && !isWeb(this.host)) {
-        gsapTo(this.dialogElement, 0, {
-          y: this.modalYPosition,
-          height: window.innerHeight,
-          onComplete: () => {
-            this.dialogElement.style.height = finalHeight;
-            this.setFullscreen(false);
-          }
-        });
+      if (!isWeb(this.host) && this.dialogElement && ((_a = this.componentProps) === null || _a === void 0 ? void 0 : _a.half) && this.fullscreen) {
+        this.keyboardHeight = 0;
+        this.setFullscreen();
       }
     };
   }
@@ -344,7 +331,7 @@ export class YooIonModalComponent {
     }
   }
   setModalRHeight() {
-    this.dialogElement.style.height = `${window.innerHeight - this.modalYPosition}px`;
+    this.dialogElement.style.height = `${(window.innerHeight + this.keyboardHeight) - this.modalYPosition}px`;
   }
   setArrowsStyle() {
     const slidesElement = this.host.querySelector('yoo-ion-slides');
@@ -395,7 +382,7 @@ export class YooIonModalComponent {
     this.host.classList.remove(modalClass[1]);
     this.dialogContentElement.classList.add(modalClass[0]);
     this.dialogContentElement.classList.remove(modalClass[1]);
-    const modalHeight = window.innerHeight;
+    const modalHeight = window.innerHeight + this.keyboardHeight;
     const newHeight = `${modalHeight}px`;
     if (setFullscreen) {
       this.dialogElement.style.height = newHeight;

package/dist/collection/components/2.molecules/profile-list/profile-list.js

@@ -121,10 +121,11 @@ export class YooProfileListComponent {
     }
   }
   renderTruncate(content, icon) {
+    const charLength = isWeb(this.host) ? 83 : 38;
     return (h("div", { class: "user-info-list" },
       h("div", { class: "start-container" },
         h("yoo-icon", { name: icon, color: "dark" }),
-        h("yoo-truncated-line", { content: content }))));
+        h("yoo-truncate", { content: content, maxLength: charLength, showEllipsisIcon: true, ellipsisIconSize: "medium" }))));
   }
   renderCollapsible(header, content) {
     return (h("yoo-collapsible", { hasArrowIcon: !!content.length, icon: "tag", iconColor: "dark", iconSize: "medium", slotHeader: true },

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/2.molecules/rating/rating.js

@@ -34,9 +34,7 @@ export class YooRatingComponent {
     if (isWeb()) {
       this.closeClicked.emit(true);
     }
-    else {
-      closeModal(null);
-    }
+    closeModal(null);
   }
   updateValidity() {
     const _validity = this.ratingEl.value > 0 ? true : false;

package/dist/collection/components/2.molecules/reveal/reveal.css

@@ -205,6 +205,14 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   display: flex;
   flex-direction: column;
   gap: var(--spacing-16, 1rem);
-  padding: var(--spacing-16, 1rem);
   background-color: var(--stable-light, #f1f1f1);
+}
+:host yoo-flip-card {
+  margin: 0 var(--spacing-16, 1rem);
+}
+:host yoo-flip-card:first-of-type {
+  padding-top: var(--spacing-16, 1rem);
+}
+:host yoo-flip-card:last-of-type {
+  padding-bottom: var(--spacing-16, 1rem);
 }

package/dist/collection/components/2.molecules/reveal/reveal.js

@@ -5,6 +5,10 @@ export class YooRevealComponent {
     this.validity = false;
     this.cardElements = [];
   }
+  onVisibleChanged() {
+    var _a;
+    this.isVisible && ((_a = this.cardElements) === null || _a === void 0 ? void 0 : _a.forEach(e => e === null || e === void 0 ? void 0 : e.loadCard()));
+  }
   onValidityChanged() {
     this.validityChanged.emit(this.validity);
   }
@@ -57,6 +61,23 @@ export class YooRevealComponent {
         "text": ""
       }
     },
+    "isVisible": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-visible",
+      "reflect": false
+    },
     "validity": {
       "type": "boolean",
       "mutable": true,
@@ -94,6 +115,9 @@ export class YooRevealComponent {
     }]; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
+      "propName": "isVisible",
+      "methodName": "onVisibleChanged"
+    }, {
       "propName": "validity",
       "methodName": "onValidityChanged"
     }]; }