@yoobic/yobi 8.3.0-41 → 8.3.0-44

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

@@ -1,14 +1,14 @@
 import { FeedPostType, FormFieldType } from '@shared/interfaces';
-import { canAccessReadReceipt, changeExtension, compareAsc, dateFormat, fileHasIcon, fromNow, getAuthentication, getCampaignColor, getCampaignConfigsForFeed, getCampaignIcon, getCardFeedEntryFromFeed, getCardFeedEntryFromQuestion, getCommunityKpis, getCssColor, getCurrentLanguage, getDashboardTags, getEventConfigsFromEvent, getEventStatusInfo, getEventTypeColor, getFormatedDate, getIconColor, getIconName, getIncentiveConfigsForFeed, getLanguageFlag, getLessonTypeIcon, getMediaSrcFromFeed, getPlanDueDate, getRandomSwatchColor, getRoleTitle, getSession, getType, getUserDisplayName, getUserTags, getVideoPoster, getWorkflowProgress, isCampaignActive, isCampaignAnnouncement, isCampaignAnnouncementByUser, isImage, isMedia, isPhotoEdited, isPlanInFuture, isPresent, isSameDate, isVideo, isWeb, mapKpiData, pipes, removeTextStyle, replaceAllLinks, replaceAtTagToMentionTag, replaceTextWithRichContent, showModal, toButton, translate, translateMulti } from '@shared/utils';
+import { canAccessReadReceipt, changeExtension, changeHexOpacity, compareAsc, dateFormat, fileHasIcon, fromNow, getAuthentication, getCampaignColor, getCampaignConfigsForFeed, getCampaignIcon, getCardFeedEntryFromFeed, getCardFeedEntryFromQuestion, getCommunityKpis, getCssColor, getCurrentLanguage, getDashboardTags, getEventConfigsFromEvent, getEventStatusInfo, getEventTypeColor, getFormatedDate, getIconColor, getIconName, getIncentiveConfigsForFeed, getLanguageFlag, getLessonTypeIcon, getMediaSrcFromFeed, getPlanDueDate, getRandomSwatchColor, getRoleTitle, getSession, getType, getUserDisplayName, getUserTags, getVideoPoster, getWorkflowProgress, isCampaignActive, isCampaignAnnouncement, isCampaignAnnouncementByUser, isImage, isMedia, isPhotoEdited, isPlanInFuture, isPresent, isSameDate, isVideo, isWeb, mapKpiData, pipes, removeTextStyle, replaceAllLinks, replaceAtTagToMentionTag, replaceTextWithRichContent, showModal, toButton, translate, translateMulti } from '@shared/utils';
 import { dispatchCustomEvent, getAsyncExtraData, getMediaSrcAndType, getMobileFieldIcon, groupsResolver, isCloudinaryLink, parseMarkDown } from '@shared/utils';
 import { Component, Element, Event, forceUpdate, h, Host, Method, Prop } from '@stencil/core';
-import { compact, get, isArray, isFunction, isNil, isNumber, isString, keys, partition } from 'lodash-es';
+import { compact, get, isArray, isFunction, isNil, isNumber, isString, keys, partition, size } from 'lodash-es';
 import { getIncentiveStatusBadgeSettings } from '../../../feature-learn/incentive/helpers/incentive-helpers';
 import { getCampaignStateTags, getCampaignTemplateTags, getMissionDataStateTags, getProductBatchDateTag, getProductBatchProgressColor, getWaitlistVisitTags } from '../../../feature-operate/campaign/helpers/operation-helpers';
 import { getMissionAddress, getMissionStateTags, getMissionUniqueKey, mapMissionToCardInboxEntry } from '../../../feature-operate/mission/helpers/missions-helpers';
 import { getButton } from '../../../utils/button.factory';
 import { execHandlerAndStopEvent, getAppContext, getNotificationIcon } from '../../../utils/helpers/common-helpers';
-import { getCalendarCourseDueDate, getFolderIcon, onUserClick, parseEntityCommentsForCardList, parseEntityForCardChat, parseEntityForCardMedia } from '../../../utils/helpers/entities-helpers';
+import { getCalendarCourseDueDate, getFolderIcon, onUserClick, parseEntityCommentsForCardList, parseEntityForCardChat, parseEntityForCardMedia, parseFolderForCardList } from '../../../utils/helpers/entities-helpers';
 import { createThemedClasses } from '../../../utils/ionic/theme';
 import { entitySimpleCardLists } from './constants';
 import { ChannelAvatarCard, ChannelsAvatarCard, ContactAvatarCard, LocationAvatarCard } from './utils/card-avatar.factory';
@@ -308,7 +308,7 @@ export class YooEntityComponent {
       !((_g = notification.data) === null || _g === void 0 ? void 0 : _g.sender_photo) && (h("yoo-icon", { slot: "item-left", name: iconName, color: iconColor, size: "large" }))));
   }
   renderCardSticky(extraClasses) {
-    var _a;
+    var _a, _b;
     extraClasses += this.extraClass;
     let entry = {};
     if (this.entityType === 'feeds') {
@@ -366,11 +366,36 @@ export class YooEntityComponent {
     else if (this.entityType === 'courses' || this.entityType === 'plans' || this.entityType === 'courses-small') {
       const plan = this.entityType === 'courses' ? this.item.plan : this.item.plan || this.item;
       if (plan) {
+        const tags = [
+          {
+            icon: (plan === null || plan === void 0 ? void 0 : plan.type) ? 'learning-path' : 'courses',
+            color: (plan === null || plan === void 0 ? void 0 : plan.type) ? 'info' : 'app-color',
+            position: { top: true, left: true },
+            text: translate(((_a = plan === null || plan === void 0 ? void 0 : plan.type) === null || _a === void 0 ? void 0 : _a.toUpperCase()) || 'COURSE')
+          }
+        ];
+        if (plan.availablePoints) {
+          const pointsText = `${(plan.isCompleted || !plan.isAssigned) ? '' : (plan.earnedPoints || 0) + '/'}${plan.availablePoints}`;
+          tags.push({
+            icon: 'star',
+            position: { bottom: true, left: true },
+            text: pointsText
+          });
+        }
+        const progressText = translateMulti('SMARTCOUNTLESSONS', { numerator: `${(plan.isCompleted || !plan.isAssigned) ? '' : (plan.lessonsFinished || 0) + '/'}`, smart_count: size(plan.missiondescriptionsRef) }); // TODO: add learningpath support
+        tags.push({
+          icon: 'lesson',
+          position: { bottom: true, right: true },
+          text: progressText
+        });
         entry = {
           title: translateMulti(plan.title),
           imgSrc: plan.background._downloadURL || plan.background,
-          isLocked: !isNil((_a = this.item) === null || _a === void 0 ? void 0 : _a.isLocked) ? this.item.isLocked : isPlanInFuture(plan, this.item.assignmentDate || new Date()),
-          isBookmarked: plan.isSelfAssigned
+          isLocked: !isNil((_b = this.item) === null || _b === void 0 ? void 0 : _b.isLocked) ? this.item.isLocked : isPlanInFuture(plan, this.item.assignmentDate || new Date()),
+          isBookmarked: plan.isSelfAssigned,
+          mediaBadges: tags,
+          isTicked: plan.isCompleted,
+          inProgress: plan.inProgress
         };
       }
       return h("yoo-card-sticky", { entry: entry, type: this.entityType, class: (this.entityType || 'simple') + extraClasses });
@@ -686,6 +711,14 @@ export class YooEntityComponent {
         iconTopLeftColor: getCampaignColor(template)
       };
     }
+    else if (this.entityType === 'coursecategories') {
+      const category = this.item;
+      entry = {
+        heading: translateMulti(category.title),
+        iconTopMiddle: category.icon || 'catalogue',
+        iconTopMiddleCustomColor: category.color
+      };
+    }
     return (h("yoo-card-list-color", { entry: entry, size: size, class: {
         [extraClasses]: true,
         [this.entityType]: this.entityType !== undefined,
@@ -728,7 +761,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, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63, _64, _65, _66;
+    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, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63, _64;
     let entry = {};
     if (this.entityMapping) {
       entry = this.entityMapping(this.item, this.entityType, this.displayType);
@@ -1057,31 +1090,8 @@ export class YooEntityComponent {
       };
     }
     else if (this.entityType === 'folders' || (this.entityType === 'filesFolders' && this.item.fftype === 'folder')) {
-      const f = this.item;
       extraClasses += ' folders ';
-      const imgSrc = f.imgSrc || ((_4 = f.background) === null || _4 === void 0 ? void 0 : _4._downloadURL);
-      entry = {
-        heading: f.name,
-        imgSrc,
-        cloudinaryOptions: isVideo(imgSrc) ? { fallbackToOriginal: true, gif: true, videoEdit: 3 } : null,
-        avatarSize: 'large',
-        avatarIconSize: this.entityType === 'folders' ? 'extra-large' : 'large',
-        avatarFrame: 'transparent-square',
-        avatarColor: f.color ? `${f.color}` : getCssColor('app-color-80'),
-        icon: getFolderIcon(f),
-        tagElements: compact(f.tags).map((t) => ({ innerHTML: t, color: 'stable-light' })),
-        subheadings: []
-      };
-      if (f.stats) {
-        entry.subheadings = [
-          (((_5 = f.container) === null || _5 === void 0 ? void 0 : _5.name) ? f.container.name + ' ' : '') +
-            f.stats
-              .map((s) => {
-              return '<span>' + translate(s.title) + ': ' + s.value.toString() + '</span>';
-            })
-              .join()
-        ];
-      }
+      entry = parseFolderForCardList(this.item, this.entityType);
     }
     else if (this.entityType === 'unsplash') {
       const unsplash = this.item;
@@ -1127,8 +1137,8 @@ export class YooEntityComponent {
     else if (this.entityType === 'publicAPITokens') {
       const token = this.item;
       entry = {
-        heading: (_6 = token === null || token === void 0 ? void 0 : token.user) === null || _6 === void 0 ? void 0 : _6.username,
-        subheadings: [(_7 = token === null || token === void 0 ? void 0 : token._tenant) === null || _7 === void 0 ? void 0 : _7.name],
+        heading: (_4 = token === null || token === void 0 ? void 0 : token.user) === null || _4 === void 0 ? void 0 : _4.username,
+        subheadings: [(_5 = token === null || token === void 0 ? void 0 : token._tenant) === null || _5 === void 0 ? void 0 : _5.name],
         users: [token === null || token === void 0 ? void 0 : token.user]
       };
     }
@@ -1169,15 +1179,15 @@ export class YooEntityComponent {
     }
     else if (this.entityType === 'language') {
       entry = {
-        heading: ((_8 = this.item) === null || _8 === void 0 ? void 0 : _8.title) ? translate(this.item.title.toUpperCase()) : ((_9 = this.item) === null || _9 === void 0 ? void 0 : _9._id) ? translate(this.item._id.toUpperCase()) : translate(this.item.toUpperCase()),
-        flag: this.host.classList.contains('hide-icon') ? null : ((_10 = this.item) === null || _10 === void 0 ? void 0 : _10._id) ? getLanguageFlag(this.item._id) : getLanguageFlag(this.item)
+        heading: ((_6 = this.item) === null || _6 === void 0 ? void 0 : _6.title) ? translate(this.item.title.toUpperCase()) : ((_7 = this.item) === null || _7 === void 0 ? void 0 : _7._id) ? translate(this.item._id.toUpperCase()) : translate(this.item.toUpperCase()),
+        flag: this.host.classList.contains('hide-icon') ? null : ((_8 = this.item) === null || _8 === void 0 ? void 0 : _8._id) ? getLanguageFlag(this.item._id) : getLanguageFlag(this.item)
       };
     }
     else if (this.entityType === 'waitlistvisit') {
       const visit = this.item;
       const tagElements = getWaitlistVisitTags(visit);
       entry = {
-        heading: ((_11 = visit.name) === null || _11 === void 0 ? void 0 : _11.startsWith('NOINFO')) ? translate('NOINFO') : visit.name,
+        heading: ((_9 = visit.name) === null || _9 === void 0 ? void 0 : _9.startsWith('NOINFO')) ? translate('NOINFO') : visit.name,
         tagElements
       };
       if (!isWeb(this.host)) {
@@ -1192,7 +1202,7 @@ export class YooEntityComponent {
     else if (this.entityType === 'waitlistcustomer') {
       const customer = this.item;
       entry = {
-        heading: ((_12 = customer.name) === null || _12 === void 0 ? void 0 : _12.startsWith('NOINFO')) ? translate('NOINFO') : customer.name,
+        heading: ((_10 = customer.name) === null || _10 === void 0 ? void 0 : _10.startsWith('NOINFO')) ? translate('NOINFO') : customer.name,
         subheadings: compact([customer.phone, customer.email])
       };
     }
@@ -1289,7 +1299,7 @@ export class YooEntityComponent {
         subheadings: this.isAutocompleteSelected() ? null : group.description ? [group.description] : null,
         iconText: group.title || group.name || group._id,
         heading: group.title || group.name || group._id,
-        imgSrc: (_13 = group.icon) === null || _13 === void 0 ? void 0 : _13._downloadURL
+        imgSrc: (_11 = group.icon) === null || _11 === void 0 ? void 0 : _11._downloadURL
       };
       entry.subheadings = group.subheadings || entry.subheadings;
     }
@@ -1299,7 +1309,7 @@ export class YooEntityComponent {
         avatarSize: this.isAutocompleteSelected() && this.item.avatarSize ? this.item.avatarSize : 'medium',
         iconText: tenant.title || tenant.name,
         heading: (tenant.title || tenant.name || '').toUpperCase(),
-        imgSrc: (_14 = tenant.icon) === null || _14 === void 0 ? void 0 : _14._downloadURL,
+        imgSrc: (_12 = tenant.icon) === null || _12 === void 0 ? void 0 : _12._downloadURL,
         subheadings: this.isAutocompleteSelected() ? null : compact([tenant.description])
       };
     }
@@ -1310,7 +1320,7 @@ export class YooEntityComponent {
         avatarFrame: 'square',
         iconText: translateMulti(model.title || model.name),
         heading: translateMulti(model.title || model.name),
-        imgSrc: ((_15 = model.background) === null || _15 === void 0 ? void 0 : _15._downloadURL) || model.background,
+        imgSrc: ((_13 = model.background) === null || _13 === void 0 ? void 0 : _13._downloadURL) || model.background,
         subheadings: this.isAutocompleteSelected() ? null : compact([translateMulti(model.shortDescription)])
       };
     }
@@ -1319,10 +1329,10 @@ export class YooEntityComponent {
       entry = {
         heading: getUserDisplayName(filter.user),
         subheadings: compact([
-          ((_16 = filter.locations) === null || _16 === void 0 ? void 0 : _16.length) > 0
+          ((_14 = filter.locations) === null || _14 === void 0 ? void 0 : _14.length) > 0
             ? filter.locations.length.toLocaleString() + ' ' + translate(filter.locations.length > 1 ? 'LOCATIONS' : 'LOCATION')
             : null,
-          ((_17 = filter.locationtypes) === null || _17 === void 0 ? void 0 : _17.length) > 0
+          ((_15 = filter.locationtypes) === null || _15 === void 0 ? void 0 : _15.length) > 0
             ? filter.locationtypes.length.toLocaleString() + ' ' + translate(filter.locationtypes.length > 1 ? 'LOCATIONTYPES' : 'LOCATIONTYPE')
             : null
         ]),
@@ -1346,8 +1356,8 @@ export class YooEntityComponent {
       entry = {
         heading: catalog.title,
         tags: this.isAutocompleteSelected() ? null : groupsResolver(catalog.group),
-        icon: ((_18 = catalog.image) === null || _18 === void 0 ? void 0 : _18._downloadURL) ? null : 'catalogue',
-        imgSrc: ((_19 = catalog.image) === null || _19 === void 0 ? void 0 : _19._downloadURL) ? catalog.image._downloadURL : null,
+        icon: ((_16 = catalog.image) === null || _16 === void 0 ? void 0 : _16._downloadURL) ? null : 'catalogue',
+        imgSrc: ((_17 = catalog.image) === null || _17 === void 0 ? void 0 : _17._downloadURL) ? catalog.image._downloadURL : null,
         avatarSize: this.isAutocompleteSelected() ? 'small' : 'large'
       };
     }
@@ -1367,8 +1377,8 @@ export class YooEntityComponent {
           ],
         tagElements: product.outofstock ? [{ innerHTML: translate('OUTOFSTOCK'), color: 'danger' }] : null,
         tags: this.isAutocompleteSelected() || isWeb(this.host) ? null : product.tags,
-        icon: ((_20 = product.image) === null || _20 === void 0 ? void 0 : _20._downloadURL) ? null : 'photo-library',
-        imgSrc: ((_21 = product.image) === null || _21 === void 0 ? void 0 : _21._downloadURL) ? product.image._downloadURL : null,
+        icon: ((_18 = product.image) === null || _18 === void 0 ? void 0 : _18._downloadURL) ? null : 'photo-library',
+        imgSrc: ((_19 = product.image) === null || _19 === void 0 ? void 0 : _19._downloadURL) ? product.image._downloadURL : null,
         avatarSize: this.isHistory || this.host.classList.contains('simple') ? 'large' : this.isAutocompleteSelected() && this.item.avatarSize ? this.item.avatarSize : 'extra-large',
         avatarFrame: 'square',
         allowCustomHtml: true
@@ -1377,7 +1387,7 @@ export class YooEntityComponent {
     else if (this.entityType === 'violetproducts') {
       const product = this.item;
       let subheadings = [product.description];
-      if (((_22 = this.item.offers) === null || _22 === void 0 ? void 0 : _22.length) && ((_23 = this.item.offers[0].skus) === null || _23 === void 0 ? void 0 : _23.length) && ((_24 = this.item.offers[0].skus[0]) === null || _24 === void 0 ? void 0 : _24.sale_price)) {
+      if (((_20 = this.item.offers) === null || _20 === void 0 ? void 0 : _20.length) && ((_21 = this.item.offers[0].skus) === null || _21 === void 0 ? void 0 : _21.length) && ((_22 = this.item.offers[0].skus[0]) === null || _22 === void 0 ? void 0 : _22.sale_price)) {
         subheadings = [pipes.currency.transform(this.item.offers[0].skus[0].sale_price / 100, { strictPrecision: false, customSymbol: this.item.offers[0].skus[0].currency, forceSymbol: true })];
       }
       if (!product.available) {
@@ -1405,7 +1415,7 @@ export class YooEntityComponent {
       };
     }
     else if (this.entityType === 'violetbasketitems') {
-      const sku = (_25 = this.item) === null || _25 === void 0 ? void 0 : _25.sku;
+      const sku = (_23 = this.item) === null || _23 === void 0 ? void 0 : _23.sku;
       const price = (sku.sale_price * (this.item.quantity || 1)) / 100;
       const subheadings = [pipes.currency.transform(price, { strictPrecision: false, customSymbol: sku.currency, forceSymbol: true })];
       entry = {
@@ -1447,11 +1457,11 @@ export class YooEntityComponent {
       entry = {
         heading: arModel.product ? arModel.product.title : 'YOOBICNA',
         tagElements: arModel.experience ? [{ innerHTML: translate((arModel.experience.mode || 'object').toUpperCase()), color: 'dark' }] : null,
-        topLeftBadge: ((_26 = arModel.photos) === null || _26 === void 0 ? void 0 : _26.length) > 0 ? arModel.photos.length.toLocaleString() : null,
+        topLeftBadge: ((_24 = arModel.photos) === null || _24 === void 0 ? void 0 : _24.length) > 0 ? arModel.photos.length.toLocaleString() : null,
         subheadings: [arModel.product ? arModel.product.reference : '', arModel.rating ? translate('RATING') + ' ' + arModel.rating.toLocaleString() : null],
         tags: arModel.experience ? [arModel.experience.name] : null,
-        icon: ((_28 = (_27 = arModel.product) === null || _27 === void 0 ? void 0 : _27.image) === null || _28 === void 0 ? void 0 : _28._downloadURL) ? null : 'photo-library',
-        imgSrc: ((_30 = (_29 = arModel.product) === null || _29 === void 0 ? void 0 : _29.image) === null || _30 === void 0 ? void 0 : _30._downloadURL) ? arModel.product.image._downloadURL : null
+        icon: ((_26 = (_25 = arModel.product) === null || _25 === void 0 ? void 0 : _25.image) === null || _26 === void 0 ? void 0 : _26._downloadURL) ? null : 'photo-library',
+        imgSrc: ((_28 = (_27 = arModel.product) === null || _27 === void 0 ? void 0 : _27.image) === null || _28 === void 0 ? void 0 : _28._downloadURL) ? arModel.product.image._downloadURL : null
       };
     }
     else if (this.entityType === 'algorithm') {
@@ -1474,14 +1484,14 @@ export class YooEntityComponent {
         subheadings: [
           productBatch.product ? productBatch.product.reference : '',
           ...(getSession().user && getSession().user.locationRef === productBatch.locationRef
-            ? compact([((_31 = this.extraClass) === null || _31 === void 0 ? void 0 : _31.indexOf('show-aisle')) >= 0 && productBatch.aisle ? productBatch.aisle.title : null])
-            : ((_32 = productBatch.location) === null || _32 === void 0 ? void 0 : _32.title)
-              ? [productBatch.location.title + ' - ' + (((_33 = productBatch.aisle) === null || _33 === void 0 ? void 0 : _33.title) || '')]
+            ? compact([((_29 = this.extraClass) === null || _29 === void 0 ? void 0 : _29.indexOf('show-aisle')) >= 0 && productBatch.aisle ? productBatch.aisle.title : null])
+            : ((_30 = productBatch.location) === null || _30 === void 0 ? void 0 : _30.title)
+              ? [productBatch.location.title + ' - ' + (((_31 = productBatch.aisle) === null || _31 === void 0 ? void 0 : _31.title) || '')]
               : [])
         ],
         tags: productBatch.tags,
-        icon: productBatch.product.image && ((_35 = (_34 = productBatch.product) === null || _34 === void 0 ? void 0 : _34.image) === null || _35 === void 0 ? void 0 : _35._downloadURL) ? null : 'photo-library',
-        imgSrc: ((_37 = (_36 = productBatch.product) === null || _36 === void 0 ? void 0 : _36.image) === null || _37 === void 0 ? void 0 : _37._downloadURL) ? productBatch.product.image._downloadURL : null
+        icon: productBatch.product.image && ((_33 = (_32 = productBatch.product) === null || _32 === void 0 ? void 0 : _32.image) === null || _33 === void 0 ? void 0 : _33._downloadURL) ? null : 'photo-library',
+        imgSrc: ((_35 = (_34 = productBatch.product) === null || _34 === void 0 ? void 0 : _34.image) === null || _35 === void 0 ? void 0 : _35._downloadURL) ? productBatch.product.image._downloadURL : null
       };
       if (productBatch.archived) {
         extraClasses += ' archived ';
@@ -1518,7 +1528,7 @@ export class YooEntityComponent {
         heading: product.title,
         subheadings,
         date: isPresent(this.item.description) ? this.item.description : null,
-        imgSrc: ((_38 = product === null || product === void 0 ? void 0 : product.image) === null || _38 === void 0 ? void 0 : _38._downloadURL) ? product.image._downloadURL : null,
+        imgSrc: ((_36 = product === null || product === void 0 ? void 0 : product.image) === null || _36 === void 0 ? void 0 : _36._downloadURL) ? product.image._downloadURL : null,
         avatarFrame: 'square',
         // keep it explicit here to prevent to be overwritten by the autocomplete, with which the card-list is used in combination with, and that changes the size of the avatar to 'small' when only one product is selected
         // this case is described into the form-entity-value-pairs.spec tests
@@ -1667,8 +1677,9 @@ export class YooEntityComponent {
       entry = {
         heading: translateMulti(category.title),
         avatarFrame: 'circle',
-        avatarSize: this.isAutocompleteSelected() && this.item.avatarSize ? this.item.avatarSize : 'extra-large',
-        icon: category.icon || 'catalogue'
+        avatarSize: this.isAutocompleteSelected() && this.item.avatarSize ? this.item.avatarSize : 'small',
+        icon: category.icon || 'catalogue',
+        customColor: category.color
       };
     }
     else if (this.entityType === 'courses') {
@@ -1685,7 +1696,8 @@ export class YooEntityComponent {
           'selection-mode': isSelection,
           'autocomplete-selection-mode': this.host.classList.contains('selection-mode'),
           'selected-content': this.isAutocompleteSelected(),
-          'no-border-bottom': this.host.classList.contains('autocomplete')
+          'no-border-bottom': this.host.classList.contains('autocomplete'),
+          'show-bookmark': this.host.classList.contains('show-bookmark')
         }, entry: plan }));
     }
     else if (this.entityType === 'lessons' || this.entityType === 'lessondescriptions') {
@@ -1706,10 +1718,10 @@ export class YooEntityComponent {
     else if (this.entityType === 'topusers') {
       entry = {
         heading: `${this.item.firstName} ${this.item.lastName}`,
-        rank: (_39 = this.item) === null || _39 === void 0 ? void 0 : _39.rank,
+        rank: (_37 = this.item) === null || _37 === void 0 ? void 0 : _37.rank,
         points: null,
         users: [this.item],
-        tagElementsInHeader: { tags: (_40 = this.item) === null || _40 === void 0 ? void 0 : _40.tagElements, location: 'end' }
+        tagElementsInHeader: { tags: (_38 = this.item) === null || _38 === void 0 ? void 0 : _38.tagElements, location: 'end' }
       };
     }
     else if (this.entityType === 'questions') {
@@ -1774,17 +1786,17 @@ export class YooEntityComponent {
         subheadings: [
           'Operation Id: ' + op.operationId,
           'Request Id: ' + op.requestId,
-          ((_41 = op.operation) === null || _41 === void 0 ? void 0 : _41.accessToken) ? 'User:' + getUserDisplayName(op.operation.accessToken) : null,
-          ((_44 = (_43 = (_42 = op.requestLog) === null || _42 === void 0 ? void 0 : _42.meta) === null || _43 === void 0 ? void 0 : _43.req) === null || _44 === void 0 ? void 0 : _44.headers) ? 'Origin/Referer:' + op.requestLog.meta.req.headers.origin || op.requestLog.meta.req.headers.referer : null,
-          ((_47 = (_46 = (_45 = op.requestLog) === null || _45 === void 0 ? void 0 : _45.meta) === null || _46 === void 0 ? void 0 : _46.req) === null || _47 === void 0 ? void 0 : _47.headers) && op.requestLog.meta.req.headers['yoobic-client-version']
+          ((_39 = op.operation) === null || _39 === void 0 ? void 0 : _39.accessToken) ? 'User:' + getUserDisplayName(op.operation.accessToken) : null,
+          ((_42 = (_41 = (_40 = op.requestLog) === null || _40 === void 0 ? void 0 : _40.meta) === null || _41 === void 0 ? void 0 : _41.req) === null || _42 === void 0 ? void 0 : _42.headers) ? 'Origin/Referer:' + op.requestLog.meta.req.headers.origin || op.requestLog.meta.req.headers.referer : null,
+          ((_45 = (_44 = (_43 = op.requestLog) === null || _43 === void 0 ? void 0 : _43.meta) === null || _44 === void 0 ? void 0 : _44.req) === null || _45 === void 0 ? void 0 : _45.headers) && op.requestLog.meta.req.headers['yoobic-client-version']
             ? 'Client Version:' + op.requestLog.meta.req.headers['yoobic-client-version']
             : null,
-          ((_50 = (_49 = (_48 = op.requestLog) === null || _48 === void 0 ? void 0 : _48.meta) === null || _49 === void 0 ? void 0 : _49.req) === null || _50 === void 0 ? void 0 : _50.headers) && op.requestLog.meta.req.headers['user-agent']
+          ((_48 = (_47 = (_46 = op.requestLog) === null || _46 === void 0 ? void 0 : _46.meta) === null || _47 === void 0 ? void 0 : _47.req) === null || _48 === void 0 ? void 0 : _48.headers) && op.requestLog.meta.req.headers['user-agent']
             ? 'User Agent:' + op.requestLog.meta.req.headers['user-agent']
             : null
         ],
         date: pipes.dateFormat.transform(op._ect, 'L LT'),
-        users: ((_51 = op.operation) === null || _51 === void 0 ? void 0 : _51.accessToken) ? [op.operation.accessToken] : null,
+        users: ((_49 = op.operation) === null || _49 === void 0 ? void 0 : _49.accessToken) ? [op.operation.accessToken] : null,
         tagElements: compact([
           op.isCreation
             ? {
@@ -1838,12 +1850,12 @@ export class YooEntityComponent {
       entry = {
         heading: translateMulti(battleList.title),
         subheadings: [lessonsCount + ' ' + translate(lessonsCount > 1 ? 'LESSONS' : 'LESSON')],
-        imgSrc: ((_52 = battleList.background) === null || _52 === void 0 ? void 0 : _52._downloadURL) ? battleList.background._downloadURL : null,
+        imgSrc: ((_50 = battleList.background) === null || _50 === void 0 ? void 0 : _50._downloadURL) ? battleList.background._downloadURL : null,
         avatarSize: this.isAutocompleteSelected() && this.item.avatarSize ? this.item.avatarSize : 'extra-extra-large',
         avatarFrame: 'square'
       };
     }
-    else if (this.entityType !== 'tag' && ((_54 = (_53 = this.customModel) === null || _53 === void 0 ? void 0 : _53.appearance) === null || _54 === void 0 ? void 0 : _54.size)) {
+    else if (this.entityType !== 'tag' && ((_52 = (_51 = this.customModel) === null || _51 === void 0 ? void 0 : _51.appearance) === null || _52 === void 0 ? void 0 : _52.size)) {
       entry = {};
       this.customModel.appearance.forEach((value, key) => {
         if (key === 'displayTypes') {
@@ -1884,7 +1896,7 @@ export class YooEntityComponent {
     else if (this.entityType === 'widgets') {
       const widget = this.item;
       entry = {
-        heading: widget.title || ((_55 = widget.page) === null || _55 === void 0 ? void 0 : _55.path),
+        heading: widget.title || ((_53 = widget.page) === null || _53 === void 0 ? void 0 : _53.path),
         imgSrc: widget.photo,
         icon: widget.icon,
         subheadings: compact([]),
@@ -1961,16 +1973,16 @@ export class YooEntityComponent {
       }
       const title = this.useTranslate ? defaultTitle.toUpperCase() : defaultTitle;
       entry.heading = translateMulti(title);
-      if ((_56 = this.item) === null || _56 === void 0 ? void 0 : _56.description) {
+      if ((_54 = this.item) === null || _54 === void 0 ? void 0 : _54.description) {
         entry.subheadings = [translateMulti(this.item.description)];
       }
-      if ((_58 = (_57 = this.item) === null || _57 === void 0 ? void 0 : _57.background) === null || _58 === void 0 ? void 0 : _58._downloadURL) {
+      if ((_56 = (_55 = this.item) === null || _55 === void 0 ? void 0 : _55.background) === null || _56 === void 0 ? void 0 : _56._downloadURL) {
         entry.imgSrc = this.item.background._downloadURL;
       }
-      else if (((_59 = this.item) === null || _59 === void 0 ? void 0 : _59.background) && isString(this.item.background)) {
+      else if (((_57 = this.item) === null || _57 === void 0 ? void 0 : _57.background) && isString(this.item.background)) {
         entry.imgSrc = this.item.background;
       }
-      if ((_61 = (_60 = this.item) === null || _60 === void 0 ? void 0 : _60.icon) === null || _61 === void 0 ? void 0 : _61._downloadURL) {
+      if ((_59 = (_58 = this.item) === null || _58 === void 0 ? void 0 : _58.icon) === null || _59 === void 0 ? void 0 : _59._downloadURL) {
         entry.imgSrc = this.item.icon._downloadURL;
       }
       else if (this.item && isString(this.item.icon)) {
@@ -1994,7 +2006,7 @@ export class YooEntityComponent {
         const comment = this.item;
         entry = parseEntityCommentsForCardList(comment);
       }
-      if ((_62 = this.item) === null || _62 === void 0 ? void 0 : _62.badge) {
+      if ((_60 = this.item) === null || _60 === void 0 ? void 0 : _60.badge) {
         entry.tagElements = [{ innerHTML: this.item.badge, color: 'app-color' }];
       }
     }
@@ -2003,7 +2015,7 @@ export class YooEntityComponent {
       !this.isAutocompleteSelected() &&
       !this.hideUIFields &&
       this.customModel &&
-      ((_64 = (_63 = this.customModel.formFields) === null || _63 === void 0 ? void 0 : _63.filter((f) => f.showInCard)) === null || _64 === void 0 ? void 0 : _64.length) > 0) {
+      ((_62 = (_61 = this.customModel.formFields) === null || _61 === void 0 ? void 0 : _61.filter((f) => f.showInCard)) === null || _62 === void 0 ? void 0 : _62.length) > 0) {
       entry.uiFields = {
         fields: this.customModel.formFields.filter((f) => f.showInCard),
         data: this.item
@@ -2045,7 +2057,7 @@ export class YooEntityComponent {
     if (this.host.classList.contains('full-width')) {
       extraClasses += ' full-width ';
     }
-    if (((_65 = this.item) === null || _65 === void 0 ? void 0 : _65._id) === getSession().userId) {
+    if (((_63 = this.item) === null || _63 === void 0 ? void 0 : _63._id) === getSession().userId) {
       extraClasses += ' current ';
     }
     if (this.extraClass) {
@@ -2074,7 +2086,7 @@ export class YooEntityComponent {
           [extraClasses]: true,
           [this.entityType]: this.entityType !== undefined,
           'form-permission': this.host.classList.contains('form-permission')
-        } }, ((_66 = this.inlineActions) === null || _66 === void 0 ? void 0 : _66.length) > 0 && (h("span", { class: "slot-container", slot: "content-slot" }, this.inlineActions.map((action) => {
+        } }, ((_64 = this.inlineActions) === null || _64 === void 0 ? void 0 : _64.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));
       })))));
     }
@@ -2478,6 +2490,9 @@ export class YooEntityComponent {
   renderCardCourse(extraClasses) {
     extraClasses += this.host.classList.contains('show-bookmark') ? ' show-bookmark' : '';
     extraClasses += this.extraClass.includes('recommendations') ? ' recommendations' : '';
+    extraClasses += this.extraClass.includes('force-show-progress-bar') ? ' force-show-progress-bar' : '';
+    extraClasses += this.extraClass.includes('force-hide-progress-bar') ? ' force-hide-progress-bar' : '';
+    extraClasses += this.extraClass.includes('force-hide-progress-tags') ? ' force-hide-progress-tags' : '';
     const course = this.item;
     const entry = { ...course, isGridCell: this.isGridCell };
     entry.isLocked = !isNil(entry.isLocked) ? entry.isLocked : isPlanInFuture(entry['plan'] || entry, entry['assignmentDate'] || new Date());
@@ -2570,7 +2585,22 @@ export class YooEntityComponent {
     }
   }
   renderCardMenu() {
-    return h("yoo-card-menu", { entry: this.item });
+    let sizeLeftIcon;
+    let typeRightIcon;
+    let entry = { title: '' };
+    if (this.entityType === 'coursecategories') {
+      const category = this.item;
+      entry = {
+        title: category.title,
+        icon: category.icon,
+        iconCustomColor: category.color,
+        iconBackgroundColor: changeHexOpacity((category === null || category === void 0 ? void 0 : category.color) || getCssColor('dark'), 10),
+        ...(isNumber(category.count) ? { count: category.count } : {})
+      };
+      sizeLeftIcon = 'small';
+      typeRightIcon = 'right-web';
+    }
+    return h("yoo-card-menu", { entry: entry, sizeLeftIcon: sizeLeftIcon, typeRightIcon: typeRightIcon });
   }
   renderCardDefault(extraClasses) {
     return h("yoo-card-default", { entry: this.item, class: (this.entityType || 'simple') + extraClasses });

package/dist/collection/components/entities/entity-query-builder/entity-query-builder.js

@@ -331,7 +331,7 @@ export class YooEntityQueryBuilderComponent {
               h("yoo-form-autocomplete", { class: "inline inline-narrow", readonly: this.readonly, idOnly: true, value: ((_d = (_c = this.values) === null || _c === void 0 ? void 0 : _c.advandedFiltersOperators) === null || _d === void 0 ? void 0 : _d.global) || 'or', values: [
                   { _id: 'and', title: 'YOOBICAND' },
                   { _id: 'or', title: 'YOOBICOR' }
-                ], displayType: "card-list", onInputChanged: (ev) => this.onAdvancedOperatorChange(ev), size: this.size || 'medium', color: "transparent" })))
+                ], displayType: "card-list", onFetchData: (ev) => ev.stopPropagation(), onInputChanged: (ev) => this.onAdvancedOperatorChange(ev), size: this.size || 'medium', color: "transparent" })))
           ];
         }
       });

package/dist/collection/components/form/form-autocomplete/form-autocomplete.js

@@ -274,6 +274,11 @@ export class YooFormAutocompleteComponent {
     const inputBottom = this.host.getBoundingClientRect().bottom;
     return inputBottom + AUTOCOMPLETE_DROPDOWN_HEIGHT > this.formDynamicBottom ? inputBottom + AUTOCOMPLETE_DROPDOWN_HEIGHT - this.formDynamicBottom : 0;
   }
+  onValidityChanged(ev) {
+    if (this.validateOnLoad) {
+      ev.stopPropagation();
+    }
+  }
   setPrefixedEntityType(entityType) {
     if (this.entityType === 'missiondescriptions' && !this.multiple) {
       return 'CAMPAIGN';
@@ -452,7 +457,9 @@ export class YooFormAutocompleteComponent {
   }
   async refreshValues() {
     await this.resetCurrentPage();
-    this.fetchData.emit({ search: this.searchText, appendData: false, currentPage: this.currentPage, pageSize: this.pageSize, tmpValues: this.values, fieldValue: this.value });
+    if (!this.isLocal) {
+      this.fetchData.emit({ search: this.searchText, appendData: false, currentPage: this.currentPage, pageSize: this.pageSize, tmpValues: this.values, fieldValue: this.value });
+    }
   }
   async onInputContainerClicked() {
     this.host.classList.add('focused');
@@ -713,8 +720,7 @@ export class YooFormAutocompleteComponent {
     }
   }
   onFilterRadioToggled(operator) {
-    this.filterOperator = operator;
-    this.extraDataChanged.emit(this.filterOperator);
+    this.extraDataChanged.emit(operator);
   }
   async onFileChanges(ev) {
     ev.stopPropagation();
@@ -1028,7 +1034,7 @@ export class YooFormAutocompleteComponent {
               'live-preview-dropdown': this.host.classList.contains('live-preview-autocomplete')
             }, entityMapping: this.entityMapping, items: this.values, currentPage: ((_b = this.selection) === null || _b === void 0 ? void 0 : _b.length) && this.currentPage !== 0 ? this.maxPage : this.currentPage, pageSize: this.pageSize, selectedTags: this.currentSelectedTags, isAutoComplete: true, isGridClosedWithSearchText: this.isGridClosedWithSearchText, keepSelection: true, dynamicOrdering: dynamicOrdering, showAutocompleteHeader: this.showHeader || dynamicOrdering, multiple: this.isMultiple(), displayType: this.displayType, displayTypes: this.displayType === 'card-cell' || this.entityType === 'files' ? ['card-cell', 'card-list'] : null, onSelected: (ev) => this.onItemSelect(ev), onRemoved: (ev) => this.onItemSelect(ev), onSelectallToggled: (ev) => this.onItemSelect(ev), collectionName: this.collectionName, entityType: this.getEntityType(), onSearchInputEnterPressed: (ev) => this.onCustomTagCreated(ev), onFetchData: (ev) => this.onFetchData(ev), onFieldFetchData: (ev) => this.onFetchFieldFilterData(ev), onSortsAndFiltersChange: (ev) => this.onSortsAndFiltersChange(ev), onCurrentPageChanged: (ev) => this.onCurrentPageChange(ev === null || ev === void 0 ? void 0 : ev.detail), hideHeader: isNullOrUndefined(this.hideHeader) ? false : this.hideHeader, showSearch: !this.forceHideSearch && (this.initialValueLength > minValuesForSearch || this.allowCustomTag || this.allowCustomValue || this.entityType === 'googlemaps'), isLocal: this.isLocal, onGridExpanded: () => this.onExpandGrid(), useTranslate: this.useTranslate, initialSelection: this.returnQuery ? null : [].concat(isPresent(this.value) ? this.value : []), idOnly: this.idOnly || this.allowCustomTag, idAttributeName: this.idAttributeName || '_id', emptyState: this.emptyState, allowCustomTag: (this.allowCustomTag || this.tag || this.allowCustomValue) && !this.forceDisableCustomTags, searchBarPlaceholder: (this.allowCustomTag || this.allowCustomValue) && !this.forceDisableCustomTags
               ? translate(this.isLocal ? 'AUTOCOMPLETESEARCHADD' : 'SEARCHORADD')
-              : translate('SEARCH'), tags: this.tags, forceHideSearch: this.forceHideSearch, maxSelectionNumber: this.max, customModel: this.customModel, addNewTagText: this.entityType === 'emails' ? translate('ADDNEWEMAIL') : this.searchText, model: this.model, hideAdvancedFilters: !this.model, hideRefreshButton: true, showFilters: false, onTagsSelect: (ev) => this.onTagsSelect(ev), isCollapsible: false, onAddNewTagPressed: (ev) => this.onCustomTagCreated(ev), disableSingleDeselection: this.disableSingleDeselection, idOnlyInitialSelection: this.idOnlyInitialSelection, isLoading: this.isLoading, valuesColor: this.valuesColor, total: this.total, returnQuery: this.returnQuery, showSelectAll: this.returnQuery, initialQuery: this.returnQuery ? this.value : null, sortsAndFilters: this.returnQuery ? (_c = this.value) === null || _c === void 0 ? void 0 : _c.sortsAndFilters : null, onFileUpload: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.click(); }, isUploading: this.isUploading, showFormRadio: this.isFilter, selectedFilterOperator: this.filterOperator, onFormRadioToggled: (ev) => this.onFilterRadioToggled(ev.detail), onMaxPageCountChanged: (ev) => (this.maxPage = Math.max(ev.detail, this.maxPage)), onSearchedItemSelected: (ev) => this.getSearchedItemSelection(ev), infiniteScrollDisabled: this.infiniteScrollDisabled }))))))));
+              : translate('SEARCH'), tags: this.tags, forceHideSearch: this.forceHideSearch, maxSelectionNumber: this.max, customModel: this.customModel, addNewTagText: this.entityType === 'emails' ? translate('ADDNEWEMAIL') : this.searchText, model: this.model, hideAdvancedFilters: !this.model, hideRefreshButton: true, showFilters: false, onTagsSelect: (ev) => this.onTagsSelect(ev), isCollapsible: false, onAddNewTagPressed: (ev) => this.onCustomTagCreated(ev), disableSingleDeselection: this.disableSingleDeselection, idOnlyInitialSelection: this.idOnlyInitialSelection, isLoading: this.isLoading, valuesColor: this.valuesColor, total: this.total, returnQuery: this.returnQuery, showSelectAll: this.returnQuery, initialQuery: this.returnQuery ? this.value : null, sortsAndFilters: this.returnQuery ? (_c = this.value) === null || _c === void 0 ? void 0 : _c.sortsAndFilters : null, onFileUpload: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.click(); }, isUploading: this.isUploading, showFormRadio: this.isFilter, selectedFilterOperator: this.filterOperator, onFormRadioToggled: (ev) => this.onFilterRadioToggled(ev.detail), onMaxPageCountChanged: (ev) => (this.maxPage = Math.max(ev.detail, this.maxPage)), onSearchedItemSelected: (ev) => this.getSearchedItemSelection(ev), onValidityChanged: (ev) => this.onValidityChanged(ev), infiniteScrollDisabled: this.infiniteScrollDisabled }))))))));
   }
   renderReadonly() {
     if (this.selection && this.selection.length > 0) {
@@ -1937,6 +1943,28 @@ export class YooFormAutocompleteComponent {
       "attribute": "is-filter",
       "reflect": false
     },
+    "filterOperator": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FormFilterAutocompleteOperator",
+        "resolved": "FormFilterAutocompleteOperator.is | FormFilterAutocompleteOperator.isNot",
+        "references": {
+          "FormFilterAutocompleteOperator": {
+            "location": "import",
+            "path": "@shared/interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "filter-operator",
+      "reflect": false
+    },
     "total": {
       "type": "number",
       "mutable": true,
@@ -2621,8 +2649,7 @@ export class YooFormAutocompleteComponent {
     "selection": {},
     "showEmptyItemsAddNewTag": {},
     "isUploading": {},
-    "arrowIcon": {},
-    "filterOperator": {}
+    "arrowIcon": {}
   }; }
   static get events() { return [{
       "method": "validityChanged",

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

@@ -2609,4 +2609,8 @@ span.fr-img-caption.fr-view {
 :host(.live-preview-form.web:not(.inline):not(.inline-row):not(.force-mobile)) yoo-tabs {
   flex-shrink: 0;
   padding: 0;
+}
+
+:host(.form-creator-preview-lesson) {
+  margin-top: var(--safe-area-inset-top);
 }