@yoobic/yobi 8.1.14-0 → 8.2.0-1

package/dist/collection/components/form/form-input-container/form-input-container.css

@@ -202,7 +202,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* spacing for padding, margin, etc... */
 /* shadow */
 /*!
- * froala_editor v4.0.10 (https://www.froala.com/wysiwyg-editor)
+ * froala_editor v4.0.11 (https://www.froala.com/wysiwyg-editor)
  * License https://froala.com/wysiwyg-editor/terms/
  * Copyright 2014-2022 Froala Labs
  */
@@ -278,6 +278,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
         border-width: 2px; }
     .fr-view table th {
       background: #ececec; }
+    .fr-view table tfoot td {
+      background: #ececec; }
   .fr-view hr {
     clear: both;
     user-select: none;

package/dist/collection/components/form/form-text-editor/form-text-editor.js

@@ -57,6 +57,7 @@ import { destroyMountPoints, generateRandomMountElementId, initShadowMountPoints
 export class YooFormTextEditorComponent {
   constructor() {
     this.validators = [];
+    this.placeholder = 'TYPESOMETHING';
     this.linkPreviews = [];
     this.formatAmpersandSymbol = false;
     this.allowLinkPreview = false;
@@ -211,7 +212,7 @@ export class YooFormTextEditorComponent {
     return {
       key: 'vYA6mB4F4H5B3H4A10dNSWXf1h1MDb1CF1PLPFf1C1EESFKVlA3C11A8D6D2C4E4G2C3H3==',
       theme: 'royal',
-      placeholder: translate(this.placeholder),
+      placeholderText: translate(this.placeholder),
       toolbarSticky: false,
       requestHeaders: { Authorization: 'Bearer ' + (session === null || session === void 0 ? void 0 : session.token) },
       heightMax: this.isFullscreen ? '100%' : this.maxHeight || 500,
@@ -905,7 +906,8 @@ export class YooFormTextEditorComponent {
         "text": ""
       },
       "attribute": "placeholder",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "'TYPESOMETHING'"
     },
     "minHeight": {
       "type": "number",

package/dist/collection/components/form/slides-media/slides-media.js

@@ -96,6 +96,7 @@ export class YooSlidesMediaComponent {
   }
   disconnectedCallback() {
     this.resetCordovaChanges();
+    this.pauseMedia();
   }
   get currentItem() {
     return this.items && isArray(this.items) && this.items.length && isFinite(this.currentIndex) && this.items[this.currentIndex];
@@ -124,6 +125,12 @@ export class YooSlidesMediaComponent {
       ScreenOrientation.lock(orientation);
     }
   }
+  pauseMedia() {
+    var _a, _b, _c;
+    const { type } = this.currentItem || {};
+    type === 'audio' && ((_b = (_a = this.cardMediaElements) === null || _a === void 0 ? void 0 : _a[this.currentIndex]) === null || _b === void 0 ? void 0 : _b.pauseAudioPlayer());
+    type === 'video' && ((_c = this.videoPlayerElement) === null || _c === void 0 ? void 0 : _c.pauseVideo());
+  }
   showPhotoDetailView() {
     var _a, _b, _c;
     if (this.currentItem && this.displayType && ((_a = this.currentPhotoEditorElement) === null || _a === void 0 ? void 0 : _a.isReadonly)) {
@@ -280,10 +287,11 @@ export class YooSlidesMediaComponent {
       photoEditorElement.initResizeObserver();
       const switchToPreview = () => {
         this.isReadonly = false;
+        const { validated, flagged, tags } = this.currentItem || {};
         Object.assign(cardMediaElement, {
-          validated: this.currentItem.validated,
-          flagged: this.currentItem.flagged,
-          tags: this.currentItem.tags,
+          validated,
+          flagged,
+          tags,
           annotated: isPhotoEdited(this.currentItem)
         });
         actionButtonContainer.style.display = 'block';
@@ -291,12 +299,13 @@ export class YooSlidesMediaComponent {
       const switchToPreviewAnimation = async () => {
         const timeline = await gsapTimeline();
         const tl = timeline({
-          paused: true, onComplete() {
+          paused: true, onComplete: () => {
             photoEditorElement.isReadonly = true;
             photoEditorElement.hasBackButton = false;
             photoEditorElement.closeHandler = () => closeModal(null);
             photoEditorElement.prepareImageSize();
             switchToPreview();
+            forceUpdate(this);
           }
         });
         tl.to(mainElement, .75, { width: 560 });
@@ -473,12 +482,13 @@ export class YooSlidesMediaComponent {
         h("mark", null, ' ' + item.userDisplayname + ' '),
         item.date ? h("div", { class: "time" }, pipes.timeAgo.transform(item.date)) : null))));
   }
-  renderVideoPlayer(item, controls = item.control || false) {
+  renderVideoPlayer(item, index, controls = item.control || false) {
     const attrs = {
       videoPlayerCoreParameters: {
         source: (item.value || item._downloadURL || '').split(',')[0],
         controls,
         fullscreen: true,
+        autoplay: this.currentIndex === index,
         noSwiping: true
       },
       modalOptions: {
@@ -486,7 +496,7 @@ export class YooSlidesMediaComponent {
         modalMode: true
       }
     };
-    return h("yoo-videoplayer-core", { class: "video", onClick: () => this.onItemClicked(), ref: (el) => (this.videoPlayerEl = el), ...attrs });
+    return h("yoo-videoplayer-core", { class: "video", onClick: () => this.onItemClicked(), ref: (el) => (this.videoPlayerElement = el), ...attrs });
   }
   renderPhotoEditor(item, index) {
     var _a, _b, _c, _d;
@@ -615,12 +625,12 @@ export class YooSlidesMediaComponent {
         h("yoo-button", { color: "app-color", onClick: () => this.onCloseTagging() }, translate('YOOBICDONE')))));
   }
   renderSlideContentByDisplayType(item, index) {
-    const video = isVideo(this.getPhotoSrc(item));
+    const isTypeVideo = isVideo(this.getPhotoSrc(item));
     if (this.displayType === 'card-media' || item.type === 'audio') {
       return (h("yoo-card-media", { showCloseButton: !this.isImage(item), ref: (el) => (this.cardMediaElements[index] = el), onUserClicked: () => this.onUserClicked(item), onHeadlineClicked: () => this.onHeadlineClicked(item), onDescriptionClicked: () => this.onDescriptionClicked(item), ...parseEntityForCardMedia(item, this.secondaryActions, 'photos', 'fullscreen', 'large', undefined, this.isReadonly) },
-        h("div", { slot: "main", class: { 'content-container': true, video } },
+        h("div", { slot: "main", class: { 'content-container': true, video: isTypeVideo } },
           this.isImage(item) && this.renderPhotoEditor(item, index),
-          video && this.renderVideoPlayer(item, true)),
+          isTypeVideo && this.renderVideoPlayer(item, index, true)),
         this.isTagging && h("div", { slot: "footer" }, this.renderTagContent(item)),
         !this.isTagging && this.renderHoverButtons(item)));
     }
@@ -637,7 +647,7 @@ export class YooSlidesMediaComponent {
       return [
         item.type !== 'photo' && this.renderActionButtons(item),
         h("div", { class: "content-container" },
-          item.type === 'video' ? this.renderVideoPlayer(item) : this.renderPhotoEditor(item, index),
+          item.type === 'video' ? this.renderVideoPlayer(item, index) : this.renderPhotoEditor(item, index),
           this.showBottomContainer && this.renderBottomContainer(item, index)),
         (item.user || item.missiondescription || item.fieldTitle || item.tags) && h("div", { class: "toolbar-shadow-portrait" })
       ];
@@ -645,7 +655,11 @@ export class YooSlidesMediaComponent {
   }
   renderInnerSwipeContent() {
     return (h("div", { class: "slides-container" },
-      h("yoo-ion-slides", { ref: (el) => (this.slides = el), class: { 'outside-navigation-arrows': isWeb(this.host) }, initialSlide: this.currentSlideIndex, onIonSlideDrag: () => { var _a; return (_a = this.currentPhotoEditorElement) === null || _a === void 0 ? void 0 : _a.hideAllTooltips(); }, onIonSlideTransitionEnd: (ev) => this.onSlideDidChange(ev) },
+      h("yoo-ion-slides", { ref: (el) => (this.slides = el), class: { 'outside-navigation-arrows': isWeb(this.host) }, initialSlide: this.currentSlideIndex, onIonSlideTransitionStart: () => {
+          var _a;
+          this.isImage(this.currentItem) && ((_a = this.currentPhotoEditorElement) === null || _a === void 0 ? void 0 : _a.hideAllTooltips());
+          this.pauseMedia();
+        }, onIonSlideTransitionEnd: (ev) => this.onSlideDidChange(ev) },
         this.isFirstLoad && h("yoo-loader", { class: { fixed: true, 'backdrop-dark': !this.isLight }, size: "large" }),
         this.items.map((item, index) => {
           return h("yoo-ion-slide", { class: { 'outside-navigation-arrows': isWeb(this.host) } }, this.shouldRenderSlideContent(index) && this.renderSlideContent(item, index));

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

@@ -751,9 +751,10 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host yoo-ion-item-divider {
   --padding-start: var(--item-divider-padding-start);
+  --divider-font-size: var(--item-divider-font-size);
   color: var(--dark, #000000);
   font-weight: var(--font-weight-400, 400);
-  font-size: var(--item-divider-font-size);
+  font-size: var(--divider-font-size);
 }
 :host yoo-ion-item-divider .count {
   margin-left: var(--spacing-04, 0.25rem);
@@ -761,6 +762,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host yoo-ion-item-divider .divider-inner {
   display: flex;
   align-items: center;
+  color: var(--text-color, #807f83);
 }
 :host .card-list-color.web yoo-ion-item-divider {
   --padding-start: 0;
@@ -863,18 +865,12 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host .body-container.card-inbox yoo-ion-item-divider, :host .body-container.card-inbox-ongoing yoo-ion-item-divider {
   margin-bottom: var(--spacing-08, 0.5rem);
-  padding-top: 0;
 }
 :host .body-container.card-inbox yoo-ion-item-divider.first, :host .body-container.card-inbox-ongoing yoo-ion-item-divider.first {
   margin-top: 0;
   padding-top: 0;
   border-top: none;
 }
-:host .body-container.card-inbox yoo-ion-item-divider .divider-inner, :host .body-container.card-inbox-ongoing yoo-ion-item-divider .divider-inner {
-  padding: 0;
-  color: var(--text-color, #807f83);
-  font-size: var(--font-size-14, 0.875rem);
-}
 :host .body-container.card-inbox .sub-item-container, :host .body-container.card-inbox-ongoing .sub-item-container {
   display: flex;
   flex-direction: column;
@@ -2462,6 +2458,17 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host(.web) ::slotted(.missions-page.grid-extra-opts[slot=before-scroll]) {
   margin-left: 0 !important;
 }
+:host(.web) .sub-item-container .relative {
+  position: relative;
+}
+:host(.web) .sub-item-container yoo-icon.position {
+  position: absolute;
+  top: calc(50% - 0.75rem);
+  right: auto;
+  bottom: auto;
+  left: 0rem;
+  padding-right: var(--spacing-04, 0.25rem);
+}
 
 :host(.form-grid) yoo-ion-item.selected {
   background: var(--app-color-20, rgba(90, 48, 244, 0.2));
@@ -3438,11 +3445,11 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   padding: 0 var(--spacing-16, 1rem);
 }
 
-:host(.community) .empty-state-container {
+:host(.communities) .empty-state-container {
   align-items: flex-start;
 }
 
-:host(.community.main) yoo-navbar {
+:host(.communities.main) yoo-navbar {
   box-sizing: border-box;
   padding: 0 var(--spacing-16, 1rem);
   background: var(--light, #ffffff);
@@ -3454,25 +3461,25 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   padding: 0;
 }
 
-:host(.card-cell-image.community) yoo-entity {
+:host(.card-cell-image.communities) yoo-entity {
   --card-image-border-radius: var(--border-radius-08, 0.5rem);
   --card-image-overlay: transparent;
 }
-:host(.card-cell-image.community) .container-base .grid-cell {
+:host(.card-cell-image.communities) .container-base .grid-cell {
   padding: 0 var(--spacing-16, 1rem);
 }
 
-:host(.card-cell-image.community.web) .container-base .grid-cell {
+:host(.card-cell-image.communities.web) .container-base .grid-cell {
   display: flex !important;
   gap: var(--spacing-24, 1.5rem);
   justify-content: flex-start;
 }
-:host(.card-cell-image.community.web) .container-base .grid-cell .entity-inner-container.card-cell-image {
+:host(.card-cell-image.communities.web) .container-base .grid-cell .entity-inner-container.card-cell-image {
   width: 13.875rem;
   height: 11.5rem;
 }
 
-:host(.card-cell-image.community.mobile) .container-base .grid-cell {
+:host(.card-cell-image.communities.mobile) .container-base .grid-cell {
   grid-auto-rows: 8.5rem;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: var(--spacing-16, 1rem);
@@ -3516,7 +3523,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin-top: var(--spacing-16, 1rem);
 }
 
-:host(.card-image.community) {
+:host(.card-image.communities) {
   --card-image-height: 11.5rem;
 }
 
@@ -4063,9 +4070,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin-top: var(--spacing-04, 0.25rem);
   border-top: var(--border-width-01, 0.0625rem) solid var(--stable-alt-40, rgba(208, 208, 208, 0.4));
 }
-:host(.card-list.calendarEvents) yoo-ion-item-divider .divider-inner {
-  font-size: var(--font-size-14, 0.875rem);
-}
 
 :host(.course-live-preview.web) .container-base {
   margin-right: var(--spacing-16, 1rem);
@@ -4154,17 +4158,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   padding: var(--spacing-08, 0.5rem) 0 var(--spacing-08, 0.5rem) var(--spacing-08, 0.5rem);
 }
 
-:host(.form-grid.web.local) .relative {
-  position: relative;
-}
-:host(.form-grid.web.local) yoo-icon.position {
-  position: absolute;
-  top: calc(50% - 0.75rem);
-  right: auto;
-  bottom: auto;
-  left: 0rem;
-  padding-right: var(--spacing-04, 0.25rem);
-}
 :host(.form-grid.web.local) yoo-ion-item-divider {
   --padding-start: 0;
 }
@@ -4189,6 +4182,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   left: auto;
   padding-right: var(--spacing-08, 0.5rem);
 }
+:host(.form-grid.web.local.charttype) yoo-icon.position[name=circle] {
+  display: none;
+}
 
 :host(.web.autocomplete-selection-mode.empty-tags) .container-base .empty-new-tag {
   justify-content: space-evenly;

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

@@ -2533,7 +2533,7 @@ export class YooGridComponent {
               'no-padding': (_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.contains('no-padding-item'),
               'item-visible': (_d = (_c = this.host) === null || _c === void 0 ? void 0 : _c.classList) === null || _d === void 0 ? void 0 : _d.contains('item-visible')
             }, disabled: this.areItemsDisabled }, this.renderEntity(item, null, idx)),
-          isWeb(this.host) && this.isFormField && this.isLocal && (this.keepSelection || this.isSelectionMode) && this.isSelected(item) && (h("yoo-icon", { class: "position", onClick: (ev) => this.onItemSelect(item, true, ev), name: "check", color: "app-color" }))));
+          isWeb(this.host) && (this.keepSelection || this.isSelectionMode) && (h("yoo-icon", { class: "position", onClick: (ev) => this.onItemSelect(item, true, ev), name: this.isSelected(item) ? 'check' : 'circle', color: this.isSelected(item) ? 'app-color' : 'stable' }))));
       }));
     return [
       h(TagType, { class: "no-padding", collapsed: this.gridExtraOptions && !(((_g = this.gridExtraOptions) === null || _g === void 0 ? void 0 : _g.expandFirstItem) && headerIndex === 0), slotHeader: true }, this.entityType === 'lessons' && this.displayType === 'card-list' ?

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

@@ -2002,7 +2002,7 @@ vertical slots in both the header AND the body
 
 
 /*!
- * froala_editor v4.0.10 (https://www.froala.com/wysiwyg-editor)
+ * froala_editor v4.0.11 (https://www.froala.com/wysiwyg-editor)
  * License https://froala.com/wysiwyg-editor/terms/
  * Copyright 2014-2022 Froala Labs
  */
@@ -2078,6 +2078,8 @@ vertical slots in both the header AND the body
         border-width: 2px; }
     .fr-view table th {
       background: #ececec; }
+    .fr-view table tfoot td {
+      background: #ececec; }
   .fr-view hr {
     clear: both;
     user-select: none;

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

@@ -121,7 +121,7 @@ export class YooChatMessageComponent {
     !!this.mediaUrl && !this.mediaSize && await this.prepareMessage();
   }
   assignPressActions() {
-    assignPressActions(this.containerElement, { lockAssignPress: this.lockAssignPress }, () => { var _a; return this.presshold.emit({ message: this.message, content: (_a = this.textElement) === null || _a === void 0 ? void 0 : _a.innerText }); }, 1000);
+    assignPressActions(this.containerElement, { lockAssignPress: this.lockAssignPress }, () => { var _a; return this.presshold.emit({ message: this.message, content: (_a = this.textElement) === null || _a === void 0 ? void 0 : _a.innerText }); }, 600);
   }
   async prepareMessage() {
     const { type, content, options } = this.message || {};

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

@@ -8,7 +8,7 @@
  * - Large-sized / non-overlaid: https://zpl.io/bLn1LwM
  */
 import { closeModal, isWeb, translateMulti } from '@shared/utils';
-import { Component, Element, Event, h, Host, Prop } from '@stencil/core';
+import { Component, Element, Event, h, Host, Method, Prop } from '@stencil/core';
 import { execHandlerAndStopEvent, getAppContext, setColorSVG } from '../../../utils/helpers/common-helpers';
 export class YooCardMediaComponent {
   constructor() {
@@ -63,6 +63,10 @@ export class YooCardMediaComponent {
      */
     this.type = 'photo';
   }
+  async pauseAudioPlayer() {
+    var _a;
+    return (_a = this.audioPlayerElement) === null || _a === void 0 ? void 0 : _a.pause();
+  }
   get actionable() {
     var _a;
     return !!((_a = this.actions) === null || _a === void 0 ? void 0 : _a.length);
@@ -211,7 +215,7 @@ export class YooCardMediaComponent {
       (!this.isFullscreenMode || isAudio) && this.renderImg(),
       !this.isFullscreenMode && h("yoo-form-checkbox", { value: this.selected, onClick: ev => ev.stopPropagation(), onInputChanged: ev => this.onSelect(ev) }),
       this.hasBadge && this.renderBadges(),
-      isAudio && h("yoo-audio-player", { displayTimeOnly: true, src: this.src }),
+      isAudio && h("yoo-audio-player", { ref: el => this.audioPlayerElement = el, displayTimeOnly: true, src: this.src }),
       this.type === 'video' && h("yoo-icon", { class: "play", name: "play", color: "light", size: this.size === 'large' ? 'extra-extra-large' : 'medium' }),
       this.describedOnOverlay && this.renderDescription(),
       this.isFullscreenMode && this.renderHoverActions(),
@@ -691,5 +695,23 @@ export class YooCardMediaComponent {
         "references": {}
       }
     }]; }
+  static get methods() { return {
+    "pauseAudioPlayer": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
   static get elementRef() { return "host"; }
 }

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

@@ -202,7 +202,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* spacing for padding, margin, etc... */
 /* shadow */
 /*!
- * froala_editor v4.0.10 (https://www.froala.com/wysiwyg-editor)
+ * froala_editor v4.0.11 (https://www.froala.com/wysiwyg-editor)
  * License https://froala.com/wysiwyg-editor/terms/
  * Copyright 2014-2022 Froala Labs
  */
@@ -278,6 +278,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
         border-width: 2px; }
     .fr-view table th {
       background: #ececec; }
+    .fr-view table tfoot td {
+      background: #ececec; }
   .fr-view hr {
     clear: both;
     user-select: none;
@@ -1180,6 +1182,7 @@ span.fr-img-caption.fr-view {
   color: var(--text-color, #807f83);
 }
 :host .outer-container .content-container .feed-bottom-action {
+  padding-top: var(--spacing-08, 0.5rem);
   padding-bottom: var(--spacing-08, 0.5rem);
   color: var(--text-color, #807f83);
   font-size: var(--font-size-16, 1rem);

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

@@ -366,7 +366,7 @@ export class YooCardFeedComponent {
   getNormalView() {
     return [
       { type: 'block-overlay' },
-      ...(this.entry && !this.entry.showBottomActionsOnly
+      ...(this.entry
         ? [
           { type: 'scheduled-date' },
           { type: 'title' },
@@ -394,7 +394,7 @@ export class YooCardFeedComponent {
   getModalView() {
     return [
       { type: 'block-overlay' },
-      ...(this.entry && !this.entry.showBottomActionsOnly
+      ...(this.entry
         ? [
           { type: 'scheduled-date' },
           { type: 'title' },
@@ -426,7 +426,7 @@ export class YooCardFeedComponent {
     var _a, _b;
     return [
       { type: 'block-overlay' },
-      ...(this.entry && !this.entry.showBottomActionsOnly
+      ...(this.entry
         ? [{ type: 'scheduled-date' }, { type: 'title' }, { type: 'description' }, { type: 'link-previews' }, { type: 'feed-tags' }]
         : []),
       { type: 'ui-fields' },
@@ -438,8 +438,8 @@ export class YooCardFeedComponent {
       { type: 'shared-campaign' },
       { type: 'shared-incentive' },
       { type: 'shared-feed' },
-      ...[!this.entry.showBottomActionsOnly ? { type: 'middle-actions' } : null],
-      ...[!this.entry.showBottomActionsOnly ? { type: 'feed-icons' } : null],
+      { type: 'middle-actions' },
+      { type: 'feed-icons' },
       { type: 'top-actions' },
       { type: 'bottom-actions' },
       { type: 'first-comment' },

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

@@ -220,7 +220,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin-right: var(--spacing-16, 1rem);
   padding-top: var(--spacing-04, 0.25rem);
 }
-:host .outer-container .header yoo-truncate.no-progress {
+:host .outer-container .header yoo-truncate.with-margin-bottom {
   margin-bottom: var(--spacing-08, 0.5rem);
 }
 :host .outer-container .header yoo-truncate span {
@@ -251,10 +251,10 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin-left: calc(var(--icon-size-00, 0.8rem) + var(--spacing-04, 0.25rem) + var(--spacing-32, 2rem) + var(--spacing-08, 0.5rem));
 }
 :host .outer-container .content yoo-progress-bar {
-  max-width: 200px;
-  margin-top: -0.4rem;
-  margin-bottom: var(--spacing-08, 0.5rem);
   --font-size-16: var(--font-size-12, 0.75rem);
+  --svg-width: 1rem;
+  --stroke-width-circle: 2;
+  margin: 0;
 }
 :host .outer-container .content .tags {
   display: flex;
@@ -264,8 +264,12 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin-right: var(--spacing-08, 0.5rem);
   margin-bottom: var(--spacing-08, 0.5rem);
 }
-:host .outer-container .content .identity {
-  display: flex;
+:host .outer-container .content .sub-item-detail {
+  display: grid;
+  grid-gap: var(--spacing-08, 0.5rem);
+  grid-template-columns: 1.5rem 1fr;
+  align-items: center;
+  width: 100%;
   margin-bottom: var(--spacing-08, 0.5rem);
   color: var(--text-color, #807f83);
   font-size: var(--font-size-14, 0.875rem);
@@ -281,6 +285,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   left: calc(var(--icon-size-00, 0.8rem) + var(--spacing-04, 0.25rem) + var(--spacing-16, 1rem));
   width: 1px;
 }
-:host .outer-container yoo-avatar {
+:host .outer-container yoo-avatar,
+:host .outer-container yoo-avatars {
   margin-right: var(--spacing-08, 0.5rem);
 }

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

@@ -8,9 +8,23 @@ export class YooCardInboxComponent {
      */
     this.instant = false;
   }
+  renderAvatar() {
+    var _a, _b;
+    const userAvatars = (_a = this.entry.users) === null || _a === void 0 ? void 0 : _a.filter((u) => !!(u === null || u === void 0 ? void 0 : u.imageData));
+    if (!this.entry.icon && (userAvatars === null || userAvatars === void 0 ? void 0 : userAvatars.length) > 1) {
+      return h("yoo-avatars", { instant: this.instant, size: "extra-small", users: this.entry.users });
+    }
+    else {
+      const user = (_b = this.entry.users) === null || _b === void 0 ? void 0 : _b[0];
+      const userIcon = user ? null : 'user';
+      return (h("yoo-avatar", { instant: this.instant, size: "medium", user: this.entry.icon ? null : user, icon: this.entry.icon || userIcon, color: this.entry.iconColor || 'stable' }));
+    }
+  }
   renderTitle() {
+    var _a;
+    const renderTags = !!((_a = this.entry.tags) === null || _a === void 0 ? void 0 : _a.length);
     const renderProgress = isPresent(this.entry.progress);
-    return (h("yoo-truncate", { class: { 'no-progress': !renderProgress }, style: { cssText: '--max-lines: 2' } },
+    return (h("yoo-truncate", { class: { 'with-margin-bottom': renderTags || !renderProgress }, style: { cssText: '--max-lines: 2' } },
       h("span", { innerHTML: this.entry.title })));
   }
   renderFlags() {
@@ -26,8 +40,15 @@ export class YooCardInboxComponent {
     return null;
   }
   renderProgress() {
-    const { value, unit, max } = this.entry.progress;
-    return (h("yoo-progress-bar", { class: "app-color", value: value, metric: unit, currentStep: value, maxStep: max }));
+    const renderProgress = isPresent(this.entry.progress);
+    if (renderProgress) {
+      const { value, unit, max } = this.entry.progress;
+      return renderProgress && h("div", { class: "sub-item-detail" },
+        h("yoo-progress-bar", { class: "app-color", shape: "circle", hideProgressValue: true, value: value, metric: unit, currentStep: value, maxStep: max }),
+        h("yoo-truncate", { style: { cssText: '--max-lines: 1' } },
+          h("span", null, translate('ACTIONSCOMPLETED', { smart_count: value, total: max }))));
+    }
+    return null;
   }
   renderTags() {
     var _a;
@@ -40,7 +61,7 @@ export class YooCardInboxComponent {
   }
   renderIdentities() {
     var _a;
-    return (_a = this.entry.identities) === null || _a === void 0 ? void 0 : _a.map((identity) => (h("div", { class: "identity" },
+    return (_a = this.entry.identities) === null || _a === void 0 ? void 0 : _a.map((identity) => (h("div", { class: "sub-item-detail" },
       h("yoo-avatar", { instant: this.instant, size: "small", imgSrc: identity.imageData, icon: identity.icon, color: identity.iconColor }),
       ' ',
       h("yoo-truncate", { style: { cssText: '--max-lines: 1' } },
@@ -61,23 +82,22 @@ export class YooCardInboxComponent {
     }
   }
   render() {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e;
     const renderSup = !!((_b = (_a = this.entry) === null || _a === void 0 ? void 0 : _a.icons) === null || _b === void 0 ? void 0 : _b.length) || !!((_c = this.entry) === null || _c === void 0 ? void 0 : _c.date);
-    const renderProgress = isPresent((_d = this.entry) === null || _d === void 0 ? void 0 : _d.progress);
-    const iconColor = ((_e = this.entry) === null || _e === void 0 ? void 0 : _e.iconColor) ? getCssColor(this.entry.iconColor) : null;
+    const iconColor = ((_d = this.entry) === null || _d === void 0 ? void 0 : _d.iconColor) ? getCssColor(this.entry.iconColor) : null;
     return (!!this.entry && (h("div", { class: "outer-container" },
       h("div", { class: "header" },
         h("yoo-icon", { class: { 'unread-state': true, 'read': !this.entry.unread }, name: "circle1", size: "extra-small", color: "app-color" }),
-        h("yoo-avatar", { instant: this.instant, size: "medium", icon: this.entry.icon || 'user', color: this.entry.iconColor || 'stable', imgSrc: !this.entry.icon ? (_f = this.entry.user) === null || _f === void 0 ? void 0 : _f.imageData : null }),
+        this.renderAvatar(),
         this.renderTitle(),
         renderSup && (h("div", { class: "sup" },
           h("div", null,
-            !!((_g = this.entry.icons) === null || _g === void 0 ? void 0 : _g.length) && this.renderFlags(),
+            !!((_e = this.entry.icons) === null || _e === void 0 ? void 0 : _e.length) && this.renderFlags(),
             !!this.entry.date && fromToday(this.entry.date)),
           !this.entry.hideDatePrecision && !!this.entry.date && this.renderDatePrecision()))),
       h("div", { class: "content" },
-        renderProgress && this.renderProgress(),
         this.renderTags(),
+        this.renderProgress(),
         this.renderIdentities(),
         this.renderNote(),
         this.renderUIFields()),

package/dist/collection/feature-operate/mission/helpers/missions-helpers.js

@@ -1,5 +1,5 @@
 import { canParticipateTo, canPerformActionPlan, dateFormat, fromToday, getAuthentication, getCssColor, getMissionPublicationDate, getSession, isDateAfter, isMissionBookable, isPresent, isToday, pipes, translate, translateMulti } from '@shared/utils';
-import { compact, isNumber } from 'lodash-es';
+import { compact, isNumber, uniqBy } from 'lodash-es';
 //#region ENTITIES
 function isMissionRequest(mission) {
   return mission.type === 'service';
@@ -170,6 +170,15 @@ export function getMissionTags(mission, session = getSession()) {
   }
   return compact(tags);
 }
+export function getMissionAssignees(mission) {
+  var _a, _b, _c;
+  let assignees = (mission === null || mission === void 0 ? void 0 : mission.owner) ? [mission.owner] : [];
+  if (mission && isMissionActionPlan(mission)) {
+    assignees = assignees.concat(((_c = (_b = (_a = mission.todo) === null || _a === void 0 ? void 0 : _a.values) === null || _b === void 0 ? void 0 : _b.filter((value) => { var _a; return !!((_a = value === null || value === void 0 ? void 0 : value.user) === null || _a === void 0 ? void 0 : _a.value); })) === null || _c === void 0 ? void 0 : _c.map((value) => value.user.value)) || []);
+    assignees = uniqBy(assignees, (user) => user._id);
+  }
+  return assignees;
+}
 function getMissionIdentities(mission, skipLocation, session) {
   const identities = [];
   const address = getMissionAddress(mission, session);
@@ -218,7 +227,7 @@ export function mapMissionToCardInboxEntry(mission, options, authentication = ge
     const progress = getMissionProgress(mission, options === null || options === void 0 ? void 0 : options.forceProgressDisplay);
     entry = {
       title: translateMulti(mission === null || mission === void 0 ? void 0 : mission.title),
-      user: mission.owner,
+      users: getMissionAssignees(mission),
       date: getMissionDate(mission, options === null || options === void 0 ? void 0 : options.isOngoing),
       hideDatePrecision: true,
       progress,

package/dist/collection/feature-operate/waitlist/waitlist-location-start/waitlist-location-start.css

@@ -202,7 +202,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* spacing for padding, margin, etc... */
 /* shadow */
 /*!
- * froala_editor v4.0.10 (https://www.froala.com/wysiwyg-editor)
+ * froala_editor v4.0.11 (https://www.froala.com/wysiwyg-editor)
  * License https://froala.com/wysiwyg-editor/terms/
  * Copyright 2014-2022 Froala Labs
  */
@@ -278,6 +278,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
         border-width: 2px; }
     .fr-view table th {
       background: #ececec; }
+    .fr-view table tfoot td {
+      background: #ececec; }
   .fr-view hr {
     clear: both;
     user-select: none;