@yoobic/yobi 8.1.14 → 8.2.0-2

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

@@ -202,59 +202,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* spacing for padding, margin, etc... */
 /* shadow */
 :host {
-  display: block;
-  padding: var(--spacing-16, 1rem);
-  background-color: var(--stable-light, #f1f1f1);
-}
-:host .cards-container {
-  display: grid;
-  gap: var(--spacing-16, 1rem);
-}
-:host .cards-container .card {
-  font-size: var(--font-size-20, 1.25rem);
-  background-color: transparent;
-  perspective: 62.5rem;
-}
-:host .cards-container .card .card-inner {
-  display: flex;
-  transform-style: preserve-3d;
-  transition: transform 0.8s;
-}
-:host .cards-container .card .card-inner .card-front,
-:host .cards-container .card .card-inner .card-back {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  min-width: 100%;
-  min-height: 6.25rem;
+  flex-direction: column;
+  gap: var(--spacing-16, 1rem);
   padding: var(--spacing-16, 1rem);
-  text-align: center;
-  word-break: break-word;
-  border-radius: var(--border-radius-08, 0.5rem);
-  box-shadow: var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1));
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
-}
-:host .cards-container .card .card-inner .card-front {
-  color: var(--dark, #000000);
-  font-weight: var(--font-weigth-700);
-  background-color: var(--light, #ffffff);
-}
-:host .cards-container .card .card-inner .card-back {
-  color: var(--light, #ffffff);
-  font-size: var(--font-size-16, 1rem);
-  background-color: var(--app-color, #5a30f4);
-  transform: rotateX(-180deg) translate(-100%, 0);
-}
-:host .cards-container .card.revealed .card-inner {
-  transform: rotateX(-180deg);
-}
-
-:host(.web) .cards-container .card {
-  cursor: pointer;
-}
-:host(.web) .cards-container .card .card-front,
-:host(.web) .cards-container .card .card-back {
-  min-height: 5rem;
+  background-color: var(--stable-light, #f1f1f1);
 }

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

@@ -1,64 +1,32 @@
-/**
- * @name: yoo-reveal
- * @author: Renate Urdzina
- * Zeplin Link: https://zpl.io/V07QBZm, https://zpl.io/aXeA8zE
- */
-import { isWeb, translateMulti } from '@shared/utils';
-import { Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';
+import { translateMulti } from '@shared/utils';
+import { Component, Element, Event, h, Host, Prop, Watch } from '@stencil/core';
 export class YooRevealComponent {
   constructor() {
-    /**
-     * Validity is true once all cards revealed
-     * */
     this.validity = false;
-    this.cardsRevealed = 0;
-  }
-  onValuesChanged() {
-    this.cardsRevealed = 0;
-    this.revealedCardIndex = undefined;
+    this.cardElements = [];
   }
   onValidityChanged() {
     this.validityChanged.emit(this.validity);
   }
-  updateValidity() {
-    const _validity = this.cardsRevealed === this.values.length;
-    if (this.validity !== _validity) {
-      this.validity = _validity;
-    }
-  }
-  updateClickedCards(index) {
-    if ((!this.values[index].clicked || this.values[index].clicked === false) && this.cardsRevealed !== this.values.length) {
-      this.values[index].clicked = true;
-      this.cardsRevealed = this.cardsRevealed + 1;
-    }
+  componentDidUpdate() {
+    var _a;
+    (_a = this.cardElements) === null || _a === void 0 ? void 0 : _a.forEach(e => e === null || e === void 0 ? void 0 : e.initCardSize());
   }
-  revealCard(card, index) {
-    if ((card === null || card === void 0 ? void 0 : card.revealed) === true) {
-      card.revealed = false;
-      this.revealedCardIndex = undefined;
-    }
-    else {
-      if (isFinite(this.revealedCardIndex)) {
-        this.values[this.revealedCardIndex].revealed = false;
-      }
-      this.updateClickedCards(index);
-      this.values[index].revealed = true;
-      this.revealedCardIndex = index;
-    }
-    this.updateValidity();
+  onCardRevealed(index) {
+    var _a, _b;
+    this.cardElements[index].setAttribute('checked', 'true');
+    (_b = (_a = this.cardElements) === null || _a === void 0 ? void 0 : _a.filter(({ id }) => id !== `card-${index}`)) === null || _b === void 0 ? void 0 : _b.forEach(card => card.revealed = false);
+    this.validity = this.cardElements.filter(card => card.getAttribute('checked')).length === this.cardElements.length;
   }
   renderCard(card, index) {
-    return (h("div", { class: { card: true, revealed: card === null || card === void 0 ? void 0 : card.revealed }, onClick: () => this.revealCard(card, index) },
-      h("div", { class: "card-inner" },
-        h("div", { class: "card-front" }, translateMulti(card === null || card === void 0 ? void 0 : card.frontside)),
-        h("div", { class: "card-back" }, translateMulti(card === null || card === void 0 ? void 0 : card.backside)))));
-  }
-  renderCards() {
-    var _a;
-    return h("div", { class: "cards-container" }, (_a = this.values) === null || _a === void 0 ? void 0 : _a.map((card, index) => this.renderCard(card, index)));
+    const { frontside, backside } = card || {};
+    return h("yoo-flip-card", { id: `card-${index}`, ref: el => this.cardElements[index] = el, onCardRevealed: () => this.onCardRevealed(index) },
+      h("div", { slot: "front" }, translateMulti(frontside)),
+      h("div", { slot: "back" }, translateMulti(backside)));
   }
   render() {
-    return h(Host, { class: { web: isWeb(this.host) } }, this.values && this.renderCards());
+    var _a;
+    return h(Host, null, (_a = this.values) === null || _a === void 0 ? void 0 : _a.map((card, index) => this.renderCard(card, index)));
   }
   static get is() { return "yoo-reveal"; }
   static get encapsulation() { return "shadow"; }
@@ -83,10 +51,10 @@ export class YooRevealComponent {
         }
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": "Values that are passed from lesson creator"
+        "text": ""
       }
     },
     "validity": {
@@ -98,19 +66,16 @@ export class YooRevealComponent {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": "Validity is true once all cards revealed"
+        "text": ""
       },
       "attribute": "validity",
       "reflect": false,
       "defaultValue": "false"
     }
   }; }
-  static get states() { return {
-    "revealedCardIndex": {}
-  }; }
   static get events() { return [{
       "method": "validityChanged",
       "name": "validityChanged",
@@ -119,7 +84,7 @@ export class YooRevealComponent {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "An event is triggered when all cards revealed"
+        "text": ""
       },
       "complexType": {
         "original": "boolean",
@@ -129,9 +94,6 @@ export class YooRevealComponent {
     }]; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
-      "propName": "values",
-      "methodName": "onValuesChanged"
-    }, {
       "propName": "validity",
       "methodName": "onValidityChanged"
     }]; }

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

@@ -290,9 +290,9 @@ export class YooIonSlidesComponent {
   }
   async updateNavigationButtonsState() {
     if (this.showArrows) {
-      const swiperInstance = await this.getSwiperInstance();
-      this.isAtBeginningPosition = swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.isBeginning;
-      this.isAtEndPosition = swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.isEnd;
+      const { isBeginning, isEnd } = await this.getSwiperInstance() || {};
+      this.isAtBeginningPosition = isBeginning;
+      this.isAtEndPosition = isEnd;
     }
   }
   async initSwiper() {
@@ -421,28 +421,21 @@ export class YooIonSlidesComponent {
     // overwriting these
     const eventOptions = {
       on: {
-        init: () => {
-          setTimeout(() => {
-            this.ionSlidesDidLoad.emit();
-          }, 20);
-        },
+        init: () => setTimeout(() => this.ionSlidesDidLoad.emit(), 20),
         slideChangeTransitionStart: () => this.ionSlideWillChange.emit(),
-        slideChangeTransitionEnd: () => {
-          this.ionSlideDidChange.emit();
-          this.updateNavigationButtonsState(); // when click on arrows
-        },
+        slideChangeTransitionEnd: () => this.ionSlideDidChange.emit(),
         slideNextTransitionStart: () => this.ionSlideNextStart.emit(),
         slidePrevTransitionStart: () => this.ionSlidePrevStart.emit(),
         slideNextTransitionEnd: () => this.ionSlideNextEnd.emit(),
         slidePrevTransitionEnd: () => this.ionSlidePrevEnd.emit(),
         transitionStart: () => this.ionSlideTransitionStart.emit(),
-        transitionEnd: () => {
-          this.getSwiperInstance().then((swiperInstance) => {
-            if (swiperInstance.snapIndex !== this.currentSwipeIndex) {
-              this.ionSlideTransitionEnd.emit(swiperInstance.snapIndex);
-              this.currentSwipeIndex = swiperInstance.snapIndex;
-            }
-          });
+        transitionEnd: async () => {
+          this.updateNavigationButtonsState(); // when click on arrows
+          const { snapIndex } = await this.getSwiperInstance() || {};
+          if (snapIndex !== this.currentSwipeIndex) {
+            this.ionSlideTransitionEnd.emit(snapIndex);
+            this.currentSwipeIndex = snapIndex;
+          }
         },
         sliderMove: () => {
           this.ionSlideDrag.emit();

package/dist/collection/components/3.organisms/input-bar/input-bar.css

@@ -213,6 +213,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .invisible {
   display: none;
 }
+:host .gif-icon {
+  cursor: pointer;
+}
 :host yoo-links-preview {
   transform: translateY(100%);
   transition: transform 0.25s;
@@ -236,6 +239,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   width: 100%;
   padding: var(--padding-input-container);
 }
+:host .outer-container .input-container .capture-icon {
+  cursor: pointer;
+}
 :host .outer-container .input-container .input-bar-icon-container {
   display: flex;
   align-items: center;
@@ -250,6 +256,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   color: var(--app-color, #5a30f4);
   font-weight: bold;
   white-space: nowrap;
+  cursor: pointer;
 }
 :host .outer-container .placeholder {
   position: absolute;

package/dist/collection/components/3.organisms/input-bar/input-bar.js

@@ -892,7 +892,8 @@ export class YooInputBarComponent {
   renderGifIcon() {
     var _a;
     const iconClass = {
-      invisible: this.hasTextInside
+      invisible: this.hasTextInside,
+      'gif-icon': true
     };
     return (h("yoo-icon", { name: "photo-library", color: "stable", slot: "right", class: iconClass, size: (_a = this.secondaryActionSettings) === null || _a === void 0 ? void 0 : _a.secondaryIconSize, onClick: () => this.onImportPhotoFromLibrary() }));
   }

package/dist/collection/components/3.organisms/toast/toast.css

@@ -542,12 +542,12 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   padding-top: 1.75rem;
 }
 
-:host(.web) {
+:host(.web:not(.rounded-rectangle)) {
   display: flex;
   justify-content: center;
   height: 100%;
 }
-:host(.web) .outer-container {
+:host(.web:not(.rounded-rectangle)) .outer-container {
   position: relative;
   display: flex;
   align-items: center;
@@ -557,10 +557,10 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   border-radius: 0.375rem;
   box-shadow: var(--toast-shadow, 0 0.3125rem 1.875rem 0 rgba(40, 47, 54, 0.2));
 }
-:host(.web) .outer-container .message {
+:host(.web:not(.rounded-rectangle)) .outer-container .message {
   margin: 0 0 0 var(--spacing-16, 1rem);
 }
-:host(.web) .outer-container .button {
+:host(.web:not(.rounded-rectangle)) .outer-container .button {
   margin-bottom: 0;
 }
 
@@ -729,6 +729,11 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   box-shadow: none;
 }
 
+:host(.rounded-rectangle) .outer-container {
+  margin: var(--spacing-16, 1rem) var(--spacing-16, 1rem) 0 var(--spacing-16, 1rem);
+  border-radius: var(--border-radius-08, 0.5rem);
+}
+
 :host(.bg-app-color) .outer-container {
   background: var(--app-color, #5a30f4);
 }
@@ -783,6 +788,24 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   color: var(--light, #ffffff);
 }
 
+:host(.bg-danger-10) .outer-container {
+  background: var(--danger-10, rgba(212, 67, 51, 0.1));
+}
+:host(.bg-danger-10) .outer-container .text-container {
+  flex: 1;
+  color: var(--dark, #000000);
+}
+:host(.bg-danger-10) .outer-container .button-container {
+  padding: 0 1rem;
+}
+:host(.bg-danger-10) .outer-container .button-container .energized {
+  color: var(--dark, #000000);
+}
+:host(.bg-danger-10) .outer-container .button-container .success,
+:host(.bg-danger-10) .outer-container .button-container .app-color {
+  color: var(--light, #ffffff);
+}
+
 :host(.bg-energized) .outer-container {
   background: var(--energized, #ffc043);
 }
@@ -817,4 +840,22 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host(.bg-warning) .outer-container .button-container .success,
 :host(.bg-warning) .outer-container .button-container .app-color {
   color: var(--light, #ffffff);
+}
+
+:host(.bg-warning-10) .outer-container {
+  background: var(--warning-10, rgba(237, 110, 51, 0.1));
+}
+:host(.bg-warning-10) .outer-container .text-container {
+  flex: 1;
+  color: var(--dark, #000000);
+}
+:host(.bg-warning-10) .outer-container .button-container {
+  padding: 0 1rem;
+}
+:host(.bg-warning-10) .outer-container .button-container .energized {
+  color: var(--dark, #000000);
+}
+:host(.bg-warning-10) .outer-container .button-container .success,
+:host(.bg-warning-10) .outer-container .button-container .app-color {
+  color: var(--light, #ffffff);
 }

package/dist/collection/components/3.organisms/video-player/videoplayer-core.js

@@ -324,7 +324,8 @@ export class YooVideoPlayerCoreComponent {
     }
   }
   isModalMode() {
-    return this.modalOptions && this.modalOptions.modalMode;
+    var _a;
+    return (_a = this.modalOptions) === null || _a === void 0 ? void 0 : _a.modalMode;
   }
   isLandscape() {
     return this.orientation === 'landscape-secondary' || this.orientation === 'landscape-primary';
@@ -333,6 +334,7 @@ export class YooVideoPlayerCoreComponent {
     return (h("div", { class: "overlay", onClick: (ev) => this.onVideoClick(ev) }));
   }
   renderVideoContainer() {
+    var _a;
     const TagType = this.useHTML5 ? 'video' : `yoo-videoplayer-${this.type}`;
     const extraAttr = {};
     const { source } = this.videoPlayerCoreParameters || {};
@@ -351,7 +353,7 @@ export class YooVideoPlayerCoreComponent {
     }
     if (this.isModalMode()) {
       extraAttr['fullscreen'] = false;
-      this.videoPlayerCoreParameters.autoplay = true;
+      this.videoPlayerCoreParameters.autoplay = (_a = this.videoPlayerCoreParameters.autoplay) !== null && _a !== void 0 ? _a : true;
     }
     const videoClass = {
       landscape: this.isLandscape(),

package/dist/collection/components/entities/card-list/default/card-list.js

@@ -212,18 +212,19 @@ export class YooCardListComponent {
       h("div", { class: "translation-button", onClick: (ev) => this.onTranslateToggle(ev) }, this.showTranslatedText ? h("span", null, translate('HIDETRANSLATION')) : translate('SEETRANSLATION'))));
   }
   renderHeadingContainerContent() {
-    var _a;
+    var _a, _b, _c;
     return [
       h("div", { class: "heading-container" },
-        this.renderTags(this.entry.tagElementsInHeader, 'margin-right'),
+        ((_a = this.entry.tagElementsInHeader) === null || _a === void 0 ? void 0 : _a.location) === 'start' && this.renderTags(this.entry.tagElementsInHeader.tags, 'margin-right'),
         this.entry.heading ? this.renderHeading() : null,
         this.hasUsersInline() ? this.renderInlineUsers() : null,
         !this.entry.showDateAsTag && this.entry.date && !this.isQuestionCardList() && h("div", { class: "date-card-text" }, this.entry.date),
         isNumber(this.entry.points) && this.renderPointsContainerContent(),
         this.entry.rightAction && (h("yoo-button", { color: "app-color", fill: "transparent", rippleType: "unbounded", onClick: (ev) => execHandlerAndStopEvent(ev, this.entry.rightAction.handler) }, this.entry.rightAction.text)),
         this.entry.distance ? this.renderDistance() : null,
-        this.entry.progress || this.entry.progress === 0 ? this.renderProgress() : null),
-      ((_a = this.entry.topActions) === null || _a === void 0 ? void 0 : _a.length) ? this.renderTopActions() : null,
+        this.entry.progress || this.entry.progress === 0 ? this.renderProgress() : null,
+        ((_b = this.entry.tagElementsInHeader) === null || _b === void 0 ? void 0 : _b.location) === 'end' && this.renderTags(this.entry.tagElementsInHeader.tags, 'margin-right')),
+      ((_c = this.entry.topActions) === null || _c === void 0 ? void 0 : _c.length) ? this.renderTopActions() : null,
       this.renderSubheadings(),
       this.isRenderBadgeOutside && this.entry.translationCallback && this.renderTranslation(),
       this.hasHeadingBottomContent() && !this.isQuestionCardList() && !this.isRenderBadgeOutside && this.renderHeadingContainerBottom()

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

@@ -855,7 +855,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   content: "";
 }
 
-:host(.community) yoo-card-image {
+:host(.communities) yoo-card-image {
   background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) -73%, rgba(0, 0, 0, 0.5)), linear-gradient(to bottom, #276ef1, #276ef1);
   --description-align-items: flex-start;
   --description-justify-content: flex-end;

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

@@ -398,7 +398,7 @@ export class YooEntityComponent {
       ((_e = this.item) === null || _e === void 0 ? void 0 : _e.title) && h("div", { class: "tag-title" }, (_f = this.item) === null || _f === void 0 ? void 0 : _f.title)));
   }
   renderCardFeed(extraClasses) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f, _g;
     let entry = { type: this.displayType };
     if (this.entityType === 'feeds') {
       entry = getCardFeedEntryFromFeed(this.item, this.host);
@@ -465,7 +465,7 @@ export class YooEntityComponent {
       const answer = this.item;
       const userRole = answer.user ? answer.user.role : null;
       entry = {
-        headings: [answer.user && answer.user._id ? getUserDisplayName(answer.user) : '', translate(userRole)],
+        headings: [((_a = answer.user) === null || _a === void 0 ? void 0 : _a._id) ? getUserDisplayName(answer.user) : '', translate(userRole)],
         subheadings: [pipes.dateFormat.transform(answer.date, 'fromNow')],
         description: translateMulti(answer.text),
         imgSrc: answer.imageData ? answer.imageData : null,
@@ -475,7 +475,7 @@ export class YooEntityComponent {
         groups: groupsResolver(answer.group)
       };
     }
-    else if (this.entityType !== 'tag' && ((_b = (_a = this.customModel) === null || _a === void 0 ? void 0 : _a.appearance) === null || _b === void 0 ? void 0 : _b.size)) {
+    else if (this.entityType !== 'tag' && ((_c = (_b = this.customModel) === null || _b === void 0 ? void 0 : _b.appearance) === null || _c === void 0 ? void 0 : _c.size)) {
       this.customModel.appearance.forEach((value, key) => {
         if (key === 'displayTypes') {
           return;
@@ -510,11 +510,11 @@ export class YooEntityComponent {
         }
       });
     }
-    entry.icons = (this.icons || []).filter((a) => (a.isVisible ? a.isVisible(this.item) : true)).map((a) => this.toIcon(a, this.item));
-    entry.topActions = this.topActions && this.topActions.filter((a) => (a.isVisible ? a.isVisible(this.item) : true)).map((a) => toButton(a, this.item));
+    entry.icons = this.item.validated !== false ? (this.icons || []).filter((a) => (a.isVisible ? a.isVisible(this.item) : true)).map((a) => this.toIcon(a, this.item)) : [];
+    entry.topActions = (_d = this.topActions) === null || _d === void 0 ? void 0 : _d.filter((a) => (a.isVisible ? a.isVisible(this.item) : true)).map((a) => toButton(a, this.item));
     const bottomActions = [];
     const middleActions = [];
-    const allActions = this.bottomActions && this.bottomActions.filter((a) => (a.isVisible ? a.isVisible(this.item) : true)).map((a) => toButton(a, this.item));
+    const allActions = (_e = this.bottomActions) === null || _e === void 0 ? void 0 : _e.filter((a) => (a.isVisible ? a.isVisible(this.item) : true)).map((a) => toButton(a, this.item));
     (allActions || []).forEach((action) => {
       if ((action === null || action === void 0 ? void 0 : action.cssClass) && (action === null || action === void 0 ? void 0 : action.cssClass.includes('middle'))) {
         middleActions.push(action);
@@ -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.secondaryActions ? this.secondaryActions.filter((a) => (a.isVisible ? a.isVisible(this.item) : true)).map((a) => toButton(a, this.item)) : null;
+    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;
     if (this.item.event) {
       const event = this.item.event;
       const eventHandler = () => {
@@ -538,7 +538,7 @@ export class YooEntityComponent {
     }
     const type = this.entityType === 'questions' ? 'question-dialog' : 'feed-dialog';
     const eventTarget = this.entityType === 'questions' ? 'app-questions' : 'app-feeds';
-    return (h("yoo-card-feed", { entry: entry, playerCommand: this.playerCommand, preventAutoPlayMedia: (_c = this.item) === null || _c === void 0 ? void 0 : _c.preventAutoPlayMedia, class: {
+    return (h("yoo-card-feed", { entry: entry, playerCommand: this.playerCommand, preventAutoPlayMedia: (_g = this.item) === null || _g === void 0 ? void 0 : _g.preventAutoPlayMedia, class: {
         [this.entityType || 'simple']: true,
         [extraClasses || '']: true,
         [this.extraClass || '']: true
@@ -563,7 +563,9 @@ export class YooEntityComponent {
         dispatchCustomEvent('_globalEvent', this.host, { type: this.entityType === 'questions' ? 'question-dialog' : 'feed-detail', eventTarget, params: { feed: this.item } });
       }, onOuterClicked: (ev) => {
         ev.stopPropagation();
-        dispatchCustomEvent('_globalEvent', this.host, { type, eventTarget, params: { feed: this.item } });
+        if (this.item.validated !== false) {
+          dispatchCustomEvent('_globalEvent', this.host, { type, eventTarget, params: { feed: this.item } });
+        }
       }, onUserClicked: (ev) => {
         onUserClick(ev, this.item);
       }, onSharedUserClicked: (ev) => {
@@ -723,7 +725,7 @@ export class YooEntityComponent {
     return address;
   }
   renderCardList(extraClasses) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18;
     let entry = {};
     if (this.entityType === 'missions' || (this.entityType === 'missiondatas' && ((_b = (_a = this.item) === null || _a === void 0 ? void 0 : _a.mission) === null || _b === void 0 ? void 0 : _b.type) === 'kanban')) {
       let mission = this.item;
@@ -1249,9 +1251,12 @@ export class YooEntityComponent {
         date: isPresent(loc.kpiValue) ? pipes.number.transform(loc.kpiValue) : null,
         vip: getSession().isExternal ? null : loc.vip,
         avatarSize: this.isAutocompleteSelected() && this.item.avatarSize ? this.item.avatarSize : 'large',
-        tagElementsInHeader: !this.isAutocompleteSelected() && !getSession().isExternal && loc.vip
-          ? [{ color: 'energized-20', icon: 'star', iconOnlyColor: 'energized', iconOnlySize: 'small' }]
-          : null
+        tagElementsInHeader: {
+          tags: !this.isAutocompleteSelected() && !getSession().isExternal && loc.vip
+            ? [{ color: 'energized-20', icon: 'star', iconOnlyColor: 'energized', iconOnlySize: 'small' }]
+            : null,
+          location: 'start'
+        }
       };
       if (!isWeb(this.host) && isCollapsible) {
         this.host.classList.add('collapsible');
@@ -1689,7 +1694,8 @@ export class YooEntityComponent {
         heading: `${this.item.firstName} ${this.item.lastName}`,
         rank: (_11 = this.item) === null || _11 === void 0 ? void 0 : _11.rank,
         points: null,
-        users: [this.item]
+        users: [this.item],
+        tagElementsInHeader: { tags: (_12 = this.item) === null || _12 === void 0 ? void 0 : _12.tagElements, location: 'end' }
       };
     }
     else if (this.entityType === 'questions') {
@@ -1825,7 +1831,7 @@ export class YooEntityComponent {
         avatarFrame: 'square'
       };
     }
-    else if (this.entityType !== 'tag' && ((_13 = (_12 = this.customModel) === null || _12 === void 0 ? void 0 : _12.appearance) === null || _13 === void 0 ? void 0 : _13.size)) {
+    else if (this.entityType !== 'tag' && ((_14 = (_13 = this.customModel) === null || _13 === void 0 ? void 0 : _13.appearance) === null || _14 === void 0 ? void 0 : _14.size)) {
       entry = {};
       this.customModel.appearance.forEach((value, key) => {
         if (key === 'displayTypes') {
@@ -1866,7 +1872,7 @@ export class YooEntityComponent {
     else if (this.entityType === 'widgets') {
       const widget = this.item;
       entry = {
-        heading: widget.title || ((_14 = widget.page) === null || _14 === void 0 ? void 0 : _14.path),
+        heading: widget.title || ((_15 = widget.page) === null || _15 === void 0 ? void 0 : _15.path),
         imgSrc: widget.photo,
         icon: widget.icon,
         subheadings: compact([]),
@@ -1922,7 +1928,7 @@ export class YooEntityComponent {
         ]
       };
     }
-    else if (this.entityType === 'community') {
+    else if (this.entityType === 'communities') {
       const community = this.item;
       entry = {
         heading: translateMulti(community.name),
@@ -1986,7 +1992,7 @@ export class YooEntityComponent {
       !this.isAutocompleteSelected() &&
       !this.hideUIFields &&
       this.customModel &&
-      ((_16 = (_15 = this.customModel.formFields) === null || _15 === void 0 ? void 0 : _15.filter((f) => f.showInCard)) === null || _16 === void 0 ? void 0 : _16.length) > 0) {
+      ((_17 = (_16 = this.customModel.formFields) === null || _16 === void 0 ? void 0 : _16.filter((f) => f.showInCard)) === null || _17 === void 0 ? void 0 : _17.length) > 0) {
       entry.uiFields = {
         fields: this.customModel.formFields.filter((f) => f.showInCard),
         data: this.item
@@ -2060,7 +2066,7 @@ export class YooEntityComponent {
           [extraClasses]: true,
           [this.entityType]: this.entityType !== undefined,
           'form-permission': this.host.classList.contains('form-permission')
-        } }, ((_17 = this.inlineActions) === null || _17 === void 0 ? void 0 : _17.length) > 0 && (h("span", { class: "slot-container", slot: "content-slot" }, this.inlineActions.map((action) => {
+        } }, ((_18 = this.inlineActions) === null || _18 === void 0 ? void 0 : _18.length) > 0 && (h("span", { class: "slot-container", slot: "content-slot" }, this.inlineActions.map((action) => {
         return (h("span", { class: action.cssClass, onClick: () => (action.handler ? action.handler(this.item) : null) }, action.text));
       })))));
     }
@@ -2400,7 +2406,7 @@ export class YooEntityComponent {
         image = value;
         break;
       }
-      case 'community': {
+      case 'communities': {
         image = this.item.covers;
         heading = this.item.name;
         subheading = pipes.number.transform(this.item.numberOfMembers) + ' ' + translate('MEMBERS');

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

@@ -380,6 +380,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   padding-left: var(--spacing-16, 1rem);
   color: var(--app-color, #5a30f4);
   text-align: right;
+  cursor: pointer;
 }
 :host .outer-container .multiple .capture-status .status {
   width: 100%;
@@ -483,6 +484,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .outer-container .multiple .top-action-container .right-action {
   width: 100%;
   color: var(--app-color, #5a30f4);
+  cursor: pointer;
 }
 :host .outer-container .multiple .top-action-container .left-action {
   text-align: left;

package/dist/collection/components/form/form-dynamic/form-dynamic.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;
@@ -2472,16 +2474,6 @@ span.fr-img-caption.fr-view {
   padding-bottom: var(--spacing-08, 0.5rem);
 }
 
-:host(.mission-validation) yoo-form-radio .form-radio-label {
-  overflow: hidden;
-}
-@supports (display: -webkit-box) {
-  :host(.mission-validation) yoo-form-radio .form-radio-label {
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-  }
-}
 :host(.mission-validation) .field-placeholder:not(.invisible).checkbox {
   padding-bottom: var(--spacing-08, 0.5rem);
   border-bottom: var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);