@yoobic/yobi 8.3.0-39 → 8.3.0-42

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

@@ -1,8 +1,8 @@
 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';
@@ -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 });
@@ -381,6 +406,10 @@ export class YooEntityComponent {
     else if (this.entityType === 'tenants') {
       return this.renderTenantAvatars();
     }
+    else if (this.entityType === 'photos') {
+      entry = { imgSrc: this.item };
+      return h("yoo-card-sticky", { entry: entry, type: this.entityType, class: this.entityType });
+    }
   }
   renderTenantAvatars() {
     var _a, _b, _c, _d, _e;
@@ -682,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,
@@ -724,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;
+    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;
     let entry = {};
     if (this.entityMapping) {
       entry = this.entityMapping(this.item, this.entityType, this.displayType);
@@ -1123,9 +1160,9 @@ export class YooEntityComponent {
     else if (this.entityType === 'publicAPITokens') {
       const token = this.item;
       entry = {
-        heading: token.user.username,
-        subheadings: [token._tenant.name],
-        users: [token.user]
+        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],
+        users: [token === null || token === void 0 ? void 0 : token.user]
       };
     }
     else if (this.entityType === 'tagGroups') {
@@ -1165,15 +1202,15 @@ export class YooEntityComponent {
     }
     else if (this.entityType === 'language') {
       entry = {
-        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)
+        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)
       };
     }
     else if (this.entityType === 'waitlistvisit') {
       const visit = this.item;
       const tagElements = getWaitlistVisitTags(visit);
       entry = {
-        heading: ((_9 = visit.name) === null || _9 === void 0 ? void 0 : _9.startsWith('NOINFO')) ? translate('NOINFO') : visit.name,
+        heading: ((_11 = visit.name) === null || _11 === void 0 ? void 0 : _11.startsWith('NOINFO')) ? translate('NOINFO') : visit.name,
         tagElements
       };
       if (!isWeb(this.host)) {
@@ -1188,7 +1225,7 @@ export class YooEntityComponent {
     else if (this.entityType === 'waitlistcustomer') {
       const customer = this.item;
       entry = {
-        heading: ((_10 = customer.name) === null || _10 === void 0 ? void 0 : _10.startsWith('NOINFO')) ? translate('NOINFO') : customer.name,
+        heading: ((_12 = customer.name) === null || _12 === void 0 ? void 0 : _12.startsWith('NOINFO')) ? translate('NOINFO') : customer.name,
         subheadings: compact([customer.phone, customer.email])
       };
     }
@@ -1285,7 +1322,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: (_11 = group.icon) === null || _11 === void 0 ? void 0 : _11._downloadURL
+        imgSrc: (_13 = group.icon) === null || _13 === void 0 ? void 0 : _13._downloadURL
       };
       entry.subheadings = group.subheadings || entry.subheadings;
     }
@@ -1295,7 +1332,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: (_12 = tenant.icon) === null || _12 === void 0 ? void 0 : _12._downloadURL,
+        imgSrc: (_14 = tenant.icon) === null || _14 === void 0 ? void 0 : _14._downloadURL,
         subheadings: this.isAutocompleteSelected() ? null : compact([tenant.description])
       };
     }
@@ -1306,7 +1343,7 @@ export class YooEntityComponent {
         avatarFrame: 'square',
         iconText: translateMulti(model.title || model.name),
         heading: translateMulti(model.title || model.name),
-        imgSrc: ((_13 = model.background) === null || _13 === void 0 ? void 0 : _13._downloadURL) || model.background,
+        imgSrc: ((_15 = model.background) === null || _15 === void 0 ? void 0 : _15._downloadURL) || model.background,
         subheadings: this.isAutocompleteSelected() ? null : compact([translateMulti(model.shortDescription)])
       };
     }
@@ -1315,10 +1352,10 @@ export class YooEntityComponent {
       entry = {
         heading: getUserDisplayName(filter.user),
         subheadings: compact([
-          ((_14 = filter.locations) === null || _14 === void 0 ? void 0 : _14.length) > 0
+          ((_16 = filter.locations) === null || _16 === void 0 ? void 0 : _16.length) > 0
             ? filter.locations.length.toLocaleString() + ' ' + translate(filter.locations.length > 1 ? 'LOCATIONS' : 'LOCATION')
             : null,
-          ((_15 = filter.locationtypes) === null || _15 === void 0 ? void 0 : _15.length) > 0
+          ((_17 = filter.locationtypes) === null || _17 === void 0 ? void 0 : _17.length) > 0
             ? filter.locationtypes.length.toLocaleString() + ' ' + translate(filter.locationtypes.length > 1 ? 'LOCATIONTYPES' : 'LOCATIONTYPE')
             : null
         ]),
@@ -1342,8 +1379,8 @@ export class YooEntityComponent {
       entry = {
         heading: catalog.title,
         tags: this.isAutocompleteSelected() ? null : groupsResolver(catalog.group),
-        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,
+        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,
         avatarSize: this.isAutocompleteSelected() ? 'small' : 'large'
       };
     }
@@ -1363,8 +1400,8 @@ export class YooEntityComponent {
           ],
         tagElements: product.outofstock ? [{ innerHTML: translate('OUTOFSTOCK'), color: 'danger' }] : null,
         tags: this.isAutocompleteSelected() || isWeb(this.host) ? null : product.tags,
-        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,
+        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,
         avatarSize: this.isHistory || this.host.classList.contains('simple') ? 'large' : this.isAutocompleteSelected() && this.item.avatarSize ? this.item.avatarSize : 'extra-large',
         avatarFrame: 'square',
         allowCustomHtml: true
@@ -1373,7 +1410,7 @@ export class YooEntityComponent {
     else if (this.entityType === 'violetproducts') {
       const product = this.item;
       let subheadings = [product.description];
-      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)) {
+      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)) {
         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) {
@@ -1401,7 +1438,7 @@ export class YooEntityComponent {
       };
     }
     else if (this.entityType === 'violetbasketitems') {
-      const sku = (_23 = this.item) === null || _23 === void 0 ? void 0 : _23.sku;
+      const sku = (_25 = this.item) === null || _25 === void 0 ? void 0 : _25.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 = {
@@ -1443,11 +1480,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: ((_24 = arModel.photos) === null || _24 === void 0 ? void 0 : _24.length) > 0 ? arModel.photos.length.toLocaleString() : null,
+        topLeftBadge: ((_26 = arModel.photos) === null || _26 === void 0 ? void 0 : _26.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: ((_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
+        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
       };
     }
     else if (this.entityType === 'algorithm') {
@@ -1470,14 +1507,14 @@ export class YooEntityComponent {
         subheadings: [
           productBatch.product ? productBatch.product.reference : '',
           ...(getSession().user && getSession().user.locationRef === productBatch.locationRef
-            ? 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) || '')]
+            ? 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) || '')]
               : [])
         ],
         tags: productBatch.tags,
-        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
+        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
       };
       if (productBatch.archived) {
         extraClasses += ' archived ';
@@ -1514,7 +1551,7 @@ export class YooEntityComponent {
         heading: product.title,
         subheadings,
         date: isPresent(this.item.description) ? this.item.description : null,
-        imgSrc: ((_36 = product === null || product === void 0 ? void 0 : product.image) === null || _36 === void 0 ? void 0 : _36._downloadURL) ? product.image._downloadURL : null,
+        imgSrc: ((_38 = product === null || product === void 0 ? void 0 : product.image) === null || _38 === void 0 ? void 0 : _38._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
@@ -1663,8 +1700,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') {
@@ -1681,7 +1719,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') {
@@ -1702,10 +1741,10 @@ export class YooEntityComponent {
     else if (this.entityType === 'topusers') {
       entry = {
         heading: `${this.item.firstName} ${this.item.lastName}`,
-        rank: (_37 = this.item) === null || _37 === void 0 ? void 0 : _37.rank,
+        rank: (_39 = this.item) === null || _39 === void 0 ? void 0 : _39.rank,
         points: null,
         users: [this.item],
-        tagElementsInHeader: { tags: (_38 = this.item) === null || _38 === void 0 ? void 0 : _38.tagElements, location: 'end' }
+        tagElementsInHeader: { tags: (_40 = this.item) === null || _40 === void 0 ? void 0 : _40.tagElements, location: 'end' }
       };
     }
     else if (this.entityType === 'questions') {
@@ -1770,17 +1809,17 @@ export class YooEntityComponent {
         subheadings: [
           'Operation Id: ' + op.operationId,
           'Request Id: ' + op.requestId,
-          ((_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']
+          ((_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']
             ? 'Client Version:' + op.requestLog.meta.req.headers['yoobic-client-version']
             : null,
-          ((_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']
+          ((_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']
             ? 'User Agent:' + op.requestLog.meta.req.headers['user-agent']
             : null
         ],
         date: pipes.dateFormat.transform(op._ect, 'L LT'),
-        users: ((_49 = op.operation) === null || _49 === void 0 ? void 0 : _49.accessToken) ? [op.operation.accessToken] : null,
+        users: ((_51 = op.operation) === null || _51 === void 0 ? void 0 : _51.accessToken) ? [op.operation.accessToken] : null,
         tagElements: compact([
           op.isCreation
             ? {
@@ -1834,12 +1873,12 @@ export class YooEntityComponent {
       entry = {
         heading: translateMulti(battleList.title),
         subheadings: [lessonsCount + ' ' + translate(lessonsCount > 1 ? 'LESSONS' : 'LESSON')],
-        imgSrc: ((_50 = battleList.background) === null || _50 === void 0 ? void 0 : _50._downloadURL) ? battleList.background._downloadURL : null,
+        imgSrc: ((_52 = battleList.background) === null || _52 === void 0 ? void 0 : _52._downloadURL) ? battleList.background._downloadURL : null,
         avatarSize: this.isAutocompleteSelected() && this.item.avatarSize ? this.item.avatarSize : 'extra-extra-large',
         avatarFrame: 'square'
       };
     }
-    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)) {
+    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)) {
       entry = {};
       this.customModel.appearance.forEach((value, key) => {
         if (key === 'displayTypes') {
@@ -1880,7 +1919,7 @@ export class YooEntityComponent {
     else if (this.entityType === 'widgets') {
       const widget = this.item;
       entry = {
-        heading: widget.title || ((_53 = widget.page) === null || _53 === void 0 ? void 0 : _53.path),
+        heading: widget.title || ((_55 = widget.page) === null || _55 === void 0 ? void 0 : _55.path),
         imgSrc: widget.photo,
         icon: widget.icon,
         subheadings: compact([]),
@@ -1957,16 +1996,16 @@ export class YooEntityComponent {
       }
       const title = this.useTranslate ? defaultTitle.toUpperCase() : defaultTitle;
       entry.heading = translateMulti(title);
-      if ((_54 = this.item) === null || _54 === void 0 ? void 0 : _54.description) {
+      if ((_56 = this.item) === null || _56 === void 0 ? void 0 : _56.description) {
         entry.subheadings = [translateMulti(this.item.description)];
       }
-      if ((_56 = (_55 = this.item) === null || _55 === void 0 ? void 0 : _55.background) === null || _56 === void 0 ? void 0 : _56._downloadURL) {
+      if ((_58 = (_57 = this.item) === null || _57 === void 0 ? void 0 : _57.background) === null || _58 === void 0 ? void 0 : _58._downloadURL) {
         entry.imgSrc = this.item.background._downloadURL;
       }
-      else if (((_57 = this.item) === null || _57 === void 0 ? void 0 : _57.background) && isString(this.item.background)) {
+      else if (((_59 = this.item) === null || _59 === void 0 ? void 0 : _59.background) && isString(this.item.background)) {
         entry.imgSrc = this.item.background;
       }
-      if ((_59 = (_58 = this.item) === null || _58 === void 0 ? void 0 : _58.icon) === null || _59 === void 0 ? void 0 : _59._downloadURL) {
+      if ((_61 = (_60 = this.item) === null || _60 === void 0 ? void 0 : _60.icon) === null || _61 === void 0 ? void 0 : _61._downloadURL) {
         entry.imgSrc = this.item.icon._downloadURL;
       }
       else if (this.item && isString(this.item.icon)) {
@@ -1990,7 +2029,7 @@ export class YooEntityComponent {
         const comment = this.item;
         entry = parseEntityCommentsForCardList(comment);
       }
-      if ((_60 = this.item) === null || _60 === void 0 ? void 0 : _60.badge) {
+      if ((_62 = this.item) === null || _62 === void 0 ? void 0 : _62.badge) {
         entry.tagElements = [{ innerHTML: this.item.badge, color: 'app-color' }];
       }
     }
@@ -1999,7 +2038,7 @@ export class YooEntityComponent {
       !this.isAutocompleteSelected() &&
       !this.hideUIFields &&
       this.customModel &&
-      ((_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) {
+      ((_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) {
       entry.uiFields = {
         fields: this.customModel.formFields.filter((f) => f.showInCard),
         data: this.item
@@ -2038,13 +2077,10 @@ export class YooEntityComponent {
     if (this.iconColor) {
       this.host.style.setProperty('--icon-color', this.iconColor);
     }
-    if (this.disableRowClick) {
-      extraClasses += ' item-disabled ';
-    }
     if (this.host.classList.contains('full-width')) {
       extraClasses += ' full-width ';
     }
-    if (((_63 = this.item) === null || _63 === void 0 ? void 0 : _63._id) === getSession().userId) {
+    if (((_65 = this.item) === null || _65 === void 0 ? void 0 : _65._id) === getSession().userId) {
       extraClasses += ' current ';
     }
     if (this.extraClass) {
@@ -2073,7 +2109,7 @@ export class YooEntityComponent {
           [extraClasses]: true,
           [this.entityType]: this.entityType !== undefined,
           'form-permission': this.host.classList.contains('form-permission')
-        } }, ((_64 = this.inlineActions) === null || _64 === void 0 ? void 0 : _64.length) > 0 && (h("span", { class: "slot-container", slot: "content-slot" }, this.inlineActions.map((action) => {
+        } }, ((_66 = this.inlineActions) === null || _66 === void 0 ? void 0 : _66.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));
       })))));
     }
@@ -2122,7 +2158,7 @@ export class YooEntityComponent {
       const file = this.item;
       entry = {
         ...entry,
-        imgSrc: fileHasIcon(file) ? null : file.imgSrc || file._downloadURL || file,
+        imgSrc: fileHasIcon(file) ? null : file._downloadURL || file.imgSrc || file,
         iconSize: 'extra-large',
         icon: file.icon || getIconName(file),
         color: getIconColor(file) || 'stable',
@@ -2477,6 +2513,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());
@@ -2569,7 +2608,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.css

@@ -328,7 +328,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host .outer-container .entity-content.unselected,
 :host .readonly .entity-content.unselected {
-  color: var(--text-color, #807f83);
+  color: var(--stable, #adadad);
 }
 :host .outer-container .entity-container,
 :host .readonly .entity-container {

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';
@@ -1028,7 +1033,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) {

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

@@ -416,6 +416,20 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --editor-background: var(--light);
 }
 
+:host(.overlay) {
+  position: relative;
+}
+:host(.overlay) .icons-container {
+  position: absolute;
+  bottom: var(--spacing-16, 1rem);
+}
+:host(.overlay) .icons-container .pagination-outer-container .dot {
+  background-color: var(--light-20, rgba(255, 255, 255, 0.2));
+}
+:host(.overlay) .icons-container .pagination-outer-container .dot.active {
+  background-color: var(--light, #ffffff);
+}
+
 @media print {
   :host .media-container,
 :host .media-container .pdf-container {

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

@@ -17,8 +17,9 @@ export class YooFormCarouselComponent {
     this.contained = false;
     this.allowOrientation = false;
     this.instant = false;
+    this.displayPhotoCounter = true;
     this.currentActiveIndex = 0;
-    this.showPhotoCounts = true;
+    this.showPhotoCounts = this.displayPhotoCounter;
     this.visibility = false;
     this.isZoomed = false;
     this.photoEditorElements = [];
@@ -79,7 +80,7 @@ export class YooFormCarouselComponent {
   onIonSlideTransitionEnd(ev) {
     ev.stopPropagation();
     if (this.ionSlides) {
-      this.showPhotoCounts = true;
+      this.showPhotoCounts = this.displayPhotoCounter;
       const newIndex = ev === null || ev === void 0 ? void 0 : ev.detail;
       if (!isNullOrUndefined(newIndex)) {
         this.currentActiveIndex = newIndex;
@@ -823,6 +824,24 @@ export class YooFormCarouselComponent {
       },
       "attribute": "pagination-type",
       "reflect": false
+    },
+    "displayPhotoCounter": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "display-photo-counter",
+      "reflect": false,
+      "defaultValue": "true"
     }
   }; }
   static get states() { return {

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

@@ -242,7 +242,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .outer-container {
   flex-direction: row;
   align-items: center;
-  cursor: pointer;
 }
 :host .outer-container .label {
   padding-left: var(--spacing-08, 0.5rem);
@@ -289,6 +288,10 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   padding-bottom: var(--spacing-08, 0.5rem);
 }
 
+:host(:not([disabled])) .outer-container {
+  cursor: pointer;
+}
+
 :host(.web) .readonly .label {
   padding-bottom: var(--spacing-08, 0.5rem);
   font-weight: var(--font-weight-400, 400);