@yoobic/yobi 8.2.0-9 → 8.2.0

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

@@ -71,15 +71,16 @@ export class YooChatMessagePreviewComponent {
     return content && h("yoo-truncate", { content: this.isInputBarMode ? null : content }, this.isInputBarMode ? (_a = this.message) === null || _a === void 0 ? void 0 : _a.content : null);
   }
   renderMedia(type) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const convertLinks = (text) => replaceAllLinks(translateMulti(text), false, 'app-color');
     return [
       h("yoo-icon", { name: this.getMediaIcon(type), color: !this.isInputBarMode ? 'app-color' : 'stable', size: "small" }),
-      (type === MessageType.photo || type === MessageType.video) && translate((_b = (_a = this.message) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.toUpperCase()),
-      type === MessageType.audio && (pipes.timer.transform(Math.round((_d = (_c = this.message) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.duration)).substr(3)),
-      type === MessageType.document && h("yoo-truncate", null, ((_f = (_e = this.message) === null || _e === void 0 ? void 0 : _e.payload) === null || _f === void 0 ? void 0 : _f._filename) || translate('DOCUMENT')),
+      (type === MessageType.photo) && translate('YOOBIC' + ((_b = (_a = this.message) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.toUpperCase())),
+      (type === MessageType.video) && translate((_d = (_c = this.message) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.toUpperCase()),
+      type === MessageType.audio && (pipes.timer.transform(Math.round((_f = (_e = this.message) === null || _e === void 0 ? void 0 : _e.options) === null || _f === void 0 ? void 0 : _f.duration)).substr(3)),
+      type === MessageType.document && h("yoo-truncate", null, ((_h = (_g = this.message) === null || _g === void 0 ? void 0 : _g.payload) === null || _h === void 0 ? void 0 : _h._filename) || translate('YOOBICDOCUMENT')),
       type === MessageType.texturlpreview && h("yoo-truncate", null,
-        h("yoo-text", { content: (_g = this.message) === null || _g === void 0 ? void 0 : _g.content, extraConversion: [convertLinks] }))
+        h("yoo-text", { content: (_j = this.message) === null || _j === void 0 ? void 0 : _j.content, extraConversion: [convertLinks] }))
     ];
   }
   renderMediaPreview(type, source) {

package/dist/collection/feature-communicate/document/card-media/card-media.js

@@ -433,7 +433,7 @@ export class YooCardMediaComponent {
         "references": {
           "TCardMediaMode": {
             "location": "import",
-            "path": "../../../interfaces"
+            "path": "@shared/interfaces"
           }
         }
       },
@@ -599,7 +599,7 @@ export class YooCardMediaComponent {
         "references": {
           "TCardMediaType": {
             "location": "import",
-            "path": "../../../interfaces"
+            "path": "@shared/interfaces"
           }
         }
       },
@@ -622,7 +622,7 @@ export class YooCardMediaComponent {
         "references": {
           "ICardMediaFullscreenParams": {
             "location": "import",
-            "path": "../../../interfaces"
+            "path": "@shared/interfaces"
           }
         }
       },

package/dist/collection/feature-communicate/feed/card-feed/components/sub-cards.js

@@ -30,19 +30,11 @@ export const CardEvent = ({ configs }) => {
   var _a;
   const startDate = new Date(configs.startDate);
   const endDate = new Date(configs.endDate);
-  // if (getSession()?.user?.timezone) {
-  //   const timezoneOffSet  = getTimezoneOffset(getSession().user.timezone) * 60000;
-  //   startDate = new Date(startDate.getTime() + timezoneOffSet);
-  //   endDate = new Date(endDate.getTime() + timezoneOffSet);
-  // }
-  // const timezoneOffSet = startDate.getTimezoneOffset() * 60000;
-  // startDate = new Date(startDate.getTime() + timezoneOffSet);
-  // endDate = new Date(endDate.getTime() + timezoneOffSet);
   const startDay = dateFormat(startDate, 'D');
   const endDay = dateFormat(endDate, 'D');
   const isSameDay = startDay === endDay;
-  const format = configs.allDay ? 'ddd DD MMM' : 'ddd DD MMM HH:mm';
-  const endformat = isSameDay ? (configs.allDay ? null : 'HH:mm') : format;
+  const format = configs.allDay ? 'ddd DD MMM' : 'ddd DD MMM LT';
+  const endformat = isSameDay ? (configs.allDay ? null : 'LT') : format;
   const isPublic = configs.eventType === EventType.PUBLIC;
   return ([
     h("div", { class: "row" },

package/dist/collection/feature-communicate/feed/card-feed/default/card-feed.css

@@ -1642,10 +1642,12 @@ span.fr-img-caption.fr-view {
   box-shadow: var(--card-shadow-2, 0 0.3125rem 0.9375rem 0 rgba(40, 47, 54, 0.08));
 }
 
-:host(.preview-mode.modal-mode) .outer-container > * {
+:host(.preview-mode.modal-mode) .outer-container > *,
+:host(.no-pointer) .outer-container > * {
   pointer-events: none;
 }
-:host(.preview-mode.modal-mode) .event-container .event-action-container {
+:host(.preview-mode.modal-mode) .event-container .event-action-container,
+:host(.no-pointer) .event-container .event-action-container {
   pointer-events: none;
 }
 

package/dist/collection/feature-communicate/feed/card-feed/default/card-feed.js

@@ -2,7 +2,7 @@ import { closeModal, getAsyncExtraData, getPermissions, getSession, getUserDispl
 import { Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';
 import { isEmpty } from 'lodash-es';
 import { getButton } from '../../../../utils/button.factory';
-import { execHandlerAndStopEvent, getAppContext, showSlidesMedia } from '../../../../utils/helpers/common-helpers';
+import { execHandlerAndStopEvent, getAppContext, openImageDetailFromRTE } from '../../../../utils/helpers/common-helpers';
 import { EventActions } from '../components/events';
 import { CardAnnouncement, CardCampaign, CardEvent, CardIncentive } from '../components/sub-cards';
 export class YooCardFeedComponent {
@@ -99,13 +99,6 @@ export class YooCardFeedComponent {
     var _a, _b;
     return ((_b = (_a = this.entry) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b._id) === getSession().userId;
   }
-  onRTEContentClick() {
-    var _a;
-    const items = ((_a = Array.from(this.textElement.querySelectorAll('img'))) === null || _a === void 0 ? void 0 : _a.map((e) => ({ value: e.src }))) || [];
-    if (items === null || items === void 0 ? void 0 : items.length) {
-      showSlidesMedia({ items, isTagging: false, isReadonly: true, canAnnotate: false });
-    }
-  }
   onMediaClicked(ev) {
     if (!this.previewMode && this.host.classList.contains('shared-feed')) {
       this.sharedMediaClicked.emit(true);
@@ -205,7 +198,7 @@ export class YooCardFeedComponent {
     var _a;
     const preventNewLine = (_a = this.entry.description) === null || _a === void 0 ? void 0 : _a.includes('name="slide"');
     const content = parseMarkDown(replaceAllLinks(this.entry.description, preventNewLine), true);
-    return this.modalMode ? h("div", { ref: (el) => this.textElement = el, onClick: () => this.onRTEContentClick(), innerHTML: content }) :
+    return this.modalMode ? h("div", { ref: (el) => this.textElement = el, onClick: (ev) => { var _a; return openImageDetailFromRTE(this.textElement, (_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a['src']); }, innerHTML: content }) :
       h("yoo-truncate", { class: "card-feeds", maxLength: 20, byWords: true, replaceBreakWithClosed: true, showEllipsisButton: !this.isBlog(), onContentToggled: (ev) => this.viewMoreToggled.emit(ev.detail), content: replaceAllLinks(this.entry.description, preventNewLine) });
   }
   renderEntryDescription() {
@@ -239,8 +232,8 @@ export class YooCardFeedComponent {
     });
   }
   renderFeedTags() {
-    var _a, _b;
-    return (h("div", { class: "feed-hashtags" }, (_b = (_a = this.entry) === null || _a === void 0 ? void 0 : _a.tags) === null || _b === void 0 ? void 0 : _b.map((a) => (a === null || a === void 0 ? void 0 : a.toLowerCase) && h("span", { class: "hashtag", innerHTML: `#${translateMulti(a).toLowerCase()} ` }))));
+    var _a, _b, _c;
+    return (h("div", { class: "feed-hashtags" }, (_c = (_b = (_a = this.entry) === null || _a === void 0 ? void 0 : _a.tags) === null || _b === void 0 ? void 0 : _b.map) === null || _c === void 0 ? void 0 : _c.call(_b, (a) => (a === null || a === void 0 ? void 0 : a.toLowerCase) && h("span", { class: "hashtag", innerHTML: `#${translateMulti(a).toLowerCase()} ` }))));
   }
   renderTopActions() {
     return (h("div", { class: "info-feed" }, this.entry.topActions.map((a) => (h("span", { onClick: (ev) => execHandlerAndStopEvent(ev, a.handler) }, a.text)))));
@@ -777,7 +770,8 @@ export class YooCardFeedComponent {
       }, scaledUpHeightPortraitOnly: true, instant: true, mediaDimension: ((_a = this.entry) === null || _a === void 0 ? void 0 : _a.mediaDimension) ? (_b = this.entry) === null || _b === void 0 ? void 0 : _b.mediaDimension[this.currentSlideIndex] : null, scaledUpInHeight: true, scaledUp: true, src: src }));
   }
   renderMainView() {
-    const mediaSrc = this.entry.mediaSrc[this.currentSlideIndex] || this.entry.mediaSrc[0];
+    var _a, _b;
+    const mediaSrc = ((_a = this.entry.mediaSrc) === null || _a === void 0 ? void 0 : _a[this.currentSlideIndex]) || ((_b = this.entry.mediaSrc) === null || _b === void 0 ? void 0 : _b[0]);
     const isTypeVideo = isVideo(mediaSrc);
     return (h("div", { class: "main-view-container" }, isTypeVideo ? this.renderVideo(mediaSrc) : this.renderMainViewImage(mediaSrc)));
   }
@@ -790,7 +784,8 @@ export class YooCardFeedComponent {
         ((_a = this.entry.mediaSrc) === null || _a === void 0 ? void 0 : _a.length) > 1 && this.renderThumbnailView()),
       h("div", { class: "right-container" },
         this.renderDetailViewHeader(),
-        h("yoo-ion-content", null, this.renderContent()))
+        h("yoo-ion-content", null, this.renderContent()),
+        h("slot", { name: "bottom" }))
     ];
   }
   renderSharedFeed() {

package/dist/collection/feature-communicate/feed/community-detail/community-detail.css

@@ -214,7 +214,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .outer-container .top-container {
   display: flex;
   flex-shrink: 0;
-  height: 5.5rem;
+  height: 6rem;
   transition: 0.2s;
 }
 :host .outer-container .top-container.expanded {
@@ -222,7 +222,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host .outer-container .top-container .image-container {
   width: 7.375rem;
-  height: 5.5rem;
+  height: 6rem;
   background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) -73%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(to bottom, #276ef1, #276ef1);
 }
 :host .outer-container .top-container .image-container yoo-img {
@@ -263,14 +263,27 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .outer-container .top-container .information-container .description-container yoo-button {
   padding: 0 1rem;
 }
-:host .outer-container .tab-container {
-  position: relative;
+:host .outer-container .tab-outer-container {
+  display: flex;
+  flex-direction: column;
   width: 100%;
   max-width: 20rem;
+  height: 100%;
   background: var(--light, #ffffff);
   border-left: 0.0625rem solid var(--stable-40, rgba(173, 173, 173, 0.4));
   transition: 0.3s;
 }
+:host .outer-container .tab-outer-container.collapsed {
+  width: 0;
+  min-width: var(--spacing-48, 3rem) !important;
+}
+:host .outer-container .tab-outer-container:not(.collapsed) {
+  min-width: 15rem;
+}
+:host .outer-container .tab-container {
+  position: relative;
+  width: 100%;
+}
 :host .outer-container .tab-container .collapsible-icon-container {
   position: absolute;
   top: 0.5rem;
@@ -280,14 +293,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   z-index: 10;
   cursor: pointer;
 }
-:host .outer-container .tab-container.collapsed {
-  width: 0;
-  min-width: 48px !important;
-}
-:host .outer-container .tab-container:not(.collapsed) {
-  flex: 1 1 15rem;
-  min-width: 15rem;
-}
 :host .outer-container .bottom-container {
   display: flex;
   height: 100%;

package/dist/collection/feature-communicate/feed/community-detail/community-detail.js

@@ -2,6 +2,18 @@ import { debounce, isWeb, pipes, translate, translateMulti } from '@shared/utils
 import { Component, Element, Event, h, Host, Prop } from '@stencil/core';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
 export class YooCommunityDetailComponent {
+  constructor() {
+    this.tabs = [
+      {
+        title: 'MEMBERSCAPITAL',
+        value: 'members'
+      },
+      {
+        title: 'MANAGERS',
+        value: 'managers'
+      }
+    ];
+  }
   componentWillLoad() {
     this.isMobile = !isWeb();
   }
@@ -47,20 +59,12 @@ export class YooCommunityDetailComponent {
         this.renderDescriptionContainer()));
   }
   renderTabSelection() {
-    return h("div", { class: { 'tab-container': true, 'collapsed': this.hideMembersList } },
-      h("div", { class: "collapsible-icon-container", onClick: () => { this.toggleList(); } },
-        h("yoo-icon", { size: "medium", name: "sidebar-right", color: this.hideMembersList ? 'app-color' : 'stable' })),
-      !this.hideMembersList && h("yoo-tabs", { class: "no-margin", tabs: [
-          {
-            title: 'MEMBERSCAPITAL',
-            value: 'members'
-          },
-          {
-            title: 'MANAGERS',
-            value: 'managers'
-          }
-        ], onTabSelected: (ev) => this.membersListChanged.emit({ manager: ev.detail.nextIndex === 1 }) }),
-      !this.hideMembersList && h("slot", { name: "members-grid" }));
+    return (h("div", { class: { 'tab-outer-container': true, 'collapsed': this.hideMembersList } },
+      h("div", { class: "tab-container" },
+        h("div", { class: "collapsible-icon-container", onClick: () => { this.toggleList(); } },
+          h("yoo-icon", { size: "medium", name: "sidebar-right", color: this.hideMembersList ? 'app-color' : 'stable' })),
+        !this.hideMembersList && h("yoo-tabs", { class: "no-margin", tabs: this.tabs, onTabSelected: (ev) => this.membersListChanged.emit({ manager: ev.detail.nextIndex === 1 }) })),
+      !this.hideMembersList && h("slot", { name: "members-grid" })));
   }
   renderBottomContent() {
     return h("div", { class: "bottom-container" },

package/dist/collection/feature-communicate/feed/user-wizard/user-wizard.js

@@ -52,7 +52,7 @@ export class YooUserWizardComponent {
   }
   renderCardImage(item) {
     var _a, _b, _c, _d;
-    return (h("yoo-card-image", { onClick: () => this.onItemSelected(item), subheading: `${item.user.firstName} ${item.user.lastName}`, image: { instant: false, src: ((_b = (_a = item.broadcast) === null || _a === void 0 ? void 0 : _a.bambuserPayload) === null || _b === void 0 ? void 0 : _b.preview) || ((_d = (_c = item.broadcast) === null || _c === void 0 ? void 0 : _c.user) === null || _d === void 0 ? void 0 : _d.imageData) }, class: { 'live-video': this.host.classList.contains('live-video') }, avatar: h("yoo-avatar", { user: item.user, size: "medium", hasStoryToView: true, class: { 'no-indicator-box-shadow': this.host.classList.contains('live-video') } }) }));
+    return (h("yoo-card-image", { onClick: () => this.onItemSelected(item), subheading: `${item.user.firstName} ${item.user.lastName}`, image: { instant: false, src: ((_b = (_a = item.broadcast) === null || _a === void 0 ? void 0 : _a.bambuserPayload) === null || _b === void 0 ? void 0 : _b.preview) || ((_d = (_c = item.broadcast) === null || _c === void 0 ? void 0 : _c.user) === null || _d === void 0 ? void 0 : _d.imageData) }, class: { 'live-video': this.host.classList.contains('live-video') }, avatar: h("yoo-avatar", { user: item.user, size: "medium", hasStoryToView: true, hasRecordedVideo: item.hasRecordedVideo, hasLiveVideo: item.hasLiveVideo, class: { 'no-indicator-box-shadow': this.host.classList.contains('live-video') } }) }));
   }
   renderItems() {
     var _a;

package/dist/collection/feature-learn/incentive/card-incentive/card-incentive.js

@@ -57,7 +57,8 @@ export class YooCardIncentiveComponent {
     return (h("div", { class: "progress" }, progressText));
   }
   renderFooter() {
-    const positionText = getPositionText(this.score);
+    var _a;
+    const positionText = ((_a = this.score) === null || _a === void 0 ? void 0 : _a.position) && getPositionText(this.score.position);
     const progressText = getProgressText(this.score);
     const footer = (h("div", { class: "footer" },
       positionText && this.renderPositionText(positionText),

package/dist/collection/feature-learn/incentive/helpers/incentive-helpers.js

@@ -19,11 +19,9 @@ export function getIncentiveStatusBadgeSettings(incentive) {
  * @param {IIncentiveParticipantScore} score
  * @return {string} Name of position
  */
-export function getPositionText(score) {
-  if (!(score === null || score === void 0 ? void 0 : score.position)) {
+export function getPositionText(position) {
+  if (!position)
     return '';
-  }
-  const position = score.position;
   let numSuffix = 'THSUFFIX';
   if (position % 10 === 1) {
     numSuffix = 'STSUFFIX';

package/dist/collection/feature-learn/incentive/incentive-detail/incentive-detail.css

@@ -232,9 +232,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .outer-container .unvisible {
   visibility: hidden;
 }
-:host .outer-container .kpichart {
-  height: 200px;
-}
 :host .outer-container .types > div,
 :host .outer-container .date {
   display: flex;
@@ -250,7 +247,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   display: flex;
   flex-direction: row;
   padding-bottom: var(--spacing-16, 1rem);
-  border-bottom: 1px solid var(--stable-light, #f1f1f1);
+  border-bottom: var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);
 }
 :host .outer-container .dates .date {
   color: var(--app-color, #5a30f4);
@@ -269,10 +266,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   padding: var(--spacing-16, 1rem) 0;
   color: var(--dark, #000000);
   font-weight: var(--font-weight-700, 700);
-  font-size: var(--font-size-14, 0.875rem);
-}
-:host .outer-container .position yoo-tag {
-  margin-right: var(--spacing-08, 0.5rem);
 }
 :host .outer-container .progress-bar {
   margin: var(--spacing-04, 0.25rem) 0;
@@ -383,16 +376,16 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host .outer-container.web .middle-container {
   display: flex;
-  height: 14rem;
+  height: 100%;
 }
 :host .outer-container.web .middle-container .left-container {
   flex: 0;
   flex-basis: auto;
   padding-right: 3.5rem;
+  padding-bottom: var(--spacing-16, 1rem);
 }
 :host .outer-container.web .middle-container .left-container .total-number {
   display: inline-flex;
-  margin-top: var(--spacing-16, 1rem);
   color: var(--dark, #000000);
   font-weight: var(--font-weight-900, 900);
   font-size: var(--font-size-54, 3.375rem);
@@ -407,8 +400,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   display: table;
 }
 :host .outer-container.web .middle-container .left-container .progress-container yoo-progress-bar {
-  width: 4.125rem;
   margin-top: var(--spacing-16, 1rem);
+  --progress-value-font-size: var(--font-size-14, 0.875rem);
 }
 :host .outer-container.web .middle-container .left-container .progress-container .progress-bar-description {
   display: table-cell;
@@ -416,9 +409,26 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   font-weight: var(--font-weight-900, 900);
   vertical-align: middle;
 }
+:host .outer-container.web .middle-container .left-container yoo-progress-bar {
+  width: 15rem;
+  --progress-value-font-size: var(--font-size-20, 1.25rem);
+}
+:host .outer-container.web .middle-container .left-container yoo-tag {
+  display: flex;
+}
+:host .outer-container.web .middle-container .left-container .position {
+  font-size: var(--font-size-16, 1rem);
+  border-bottom: var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);
+}
+:host .outer-container.web .middle-container .left-container .position yoo-tag {
+  margin-right: var(--spacing-16, 1rem);
+}
 :host .outer-container.web .middle-container .right-container {
   flex: 1;
 }
+:host .outer-container.web .middle-container .right-container .kpichart {
+  height: 12.5rem;
+}
 :host .outer-container.web .bottom-container {
   display: flex;
   background-color: var(--stable-light-40, rgba(241, 241, 241, 0.4));
@@ -431,7 +441,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   font-size: var(--font-size-14, 0.875rem);
 }
 :host .outer-container.web .bottom-container .box .box-content {
-  height: 380px;
+  height: 23.75rem;
   margin: var(--spacing-16, 1rem);
   padding: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
   overflow: auto;
@@ -460,7 +470,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   align-items: center;
   padding: var(--spacing-08, 0.5rem) 0;
   font-size: var(--font-size-14, 0.875rem);
-  border-bottom: 1px solid var(--stable-light, #f1f1f1);
+  border-bottom: var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);
 }
 :host .outer-container.web .bottom-container .box .box-content .item .values {
   display: flex;
@@ -477,9 +487,24 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin-right: var(--spacing-16, 1rem);
 }
 :host .outer-container.web .title-category {
+  display: flex;
   color: var(--dark, #000000);
   font-weight: var(--font-weight-900, 900);
   font-size: var(--font-size-14, 0.875rem);
+  text-transform: capitalize;
+}
+
+.outer-container.mobile yoo-progress-bar {
+  --progress-value-font-size: var(--font-size-14, 0.875rem);
+}
+.outer-container.mobile .position {
+  font-size: var(--font-size-14, 0.875rem);
+}
+.outer-container.mobile .position yoo-tag {
+  margin-right: var(--spacing-08, 0.5rem);
+}
+.outer-container.mobile .kpichart {
+  height: 12.5rem;
 }
 
 :host(.web) .box-content {
@@ -503,11 +528,4 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host(.web) .box-content:hover::-webkit-scrollbar-thumb {
   background: var(--stable, #adadad);
-}
-:host(.web) yoo-progress-bar {
-  --progress-value-font-size: var(--font-size-20, 1.25rem) ;
-}
-
-:host(.mobile) yoo-progress-bar {
-  --progress-value-font-size: var(--font-size-14, 0.875rem) ;
 }