@yoobic/yobi 8.3.0-41 → 8.3.0-42

package/dist/collection/components/2.molecules/modal-controller/modal-controller.js

@@ -4,10 +4,30 @@ export class YooIonModalControllerComponent {
   constructor() {
     this.modals = new Map();
     this.topOverlayID = 0;
+    this.devices = [];
+  }
+  onDeviceCreated(ev) {
+    this.devices.push(ev.detail);
+  }
+  onDeviceDestroyed(ev) {
+    const index = this.devices.findIndex(device => device === ev.detail);
+    this.devices.splice(index, index + 1);
+  }
+  onClick(ev) {
+    if (this.devices.length) {
+      this.device = ev.composedPath().find(el => el.nodeName === 'YOO-DEVICE');
+    }
   }
   modalWillPresent(ev) {
-    this.modals.set(ev.target.overlayId, ev.target);
-    this.topOverlayID = ev.target.overlayId;
+    var _a, _b, _c, _d, _e;
+    if (ev.target.nodeName === 'YOO-ION-MODAL') {
+      this.modals.set(ev.target.overlayId, ev.target);
+      this.topOverlayID = ev.target.overlayId;
+    }
+    else {
+      this.modals.set((_b = (_a = ev.composedPath()) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.overlayId, (_c = ev.composedPath()) === null || _c === void 0 ? void 0 : _c[0]);
+      this.topOverlayID = (_e = (_d = ev.composedPath()) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.overlayId;
+    }
   }
   modalWillDismiss(ev) {
     this.modals.delete(ev.target.overlayId);
@@ -32,7 +52,7 @@ export class YooIonModalControllerComponent {
    * Create a modal overlay with modal options.
    */
   async create(opts) {
-    return createOverlay(document.createElement('yoo-ion-modal'), opts, opts.host);
+    return createOverlay(document.createElement('yoo-ion-modal'), opts, this.device || opts.host);
   }
   /**
    * Dismiss the open modal overlay.
@@ -188,6 +208,24 @@ export class YooIonModalControllerComponent {
     }
   }; }
   static get listeners() { return [{
+      "name": "deviceCreated",
+      "method": "onDeviceCreated",
+      "target": "body",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "deviceDestroyed",
+      "method": "onDeviceDestroyed",
+      "target": "body",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "click",
+      "method": "onClick",
+      "target": "body",
+      "capture": true,
+      "passive": false
+    }, {
       "name": "ionModalWillPresent",
       "method": "modalWillPresent",
       "target": "body",

package/dist/collection/components/2.molecules/toast-controller/toast-controller.js

@@ -3,9 +3,28 @@ import { createOverlay, dismissOverlay, getTopOverlay, removeLastOverlay } from
 export class YooIonToastControllerComponent {
   constructor() {
     this.toasts = new Map();
+    this.devices = [];
+  }
+  onDeviceCreated(ev) {
+    this.devices.push(ev.detail);
+  }
+  onDeviceDestroyed(ev) {
+    const index = this.devices.findIndex(device => device === ev.detail);
+    this.devices.splice(index, index + 1);
+  }
+  onClick(ev) {
+    if (this.devices.length) {
+      this.device = ev.composedPath().find((el) => el.nodeName === 'YOO-DEVICE');
+    }
   }
   toastWillPresent(ev) {
-    this.toasts.set(ev.target.overlayId, ev.target);
+    var _a, _b, _c;
+    if (ev.target.nodeName === 'YOO-TOAST') {
+      this.toasts.set(ev.target.overlayId, ev.target);
+    }
+    else {
+      this.toasts.set((_b = (_a = ev.composedPath()) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.overlayId, (_c = ev.composedPath()) === null || _c === void 0 ? void 0 : _c[0]);
+    }
   }
   toastWillDismiss(ev) {
     this.toasts.delete(ev.target.overlayId);
@@ -25,7 +44,7 @@ export class YooIonToastControllerComponent {
    * Create a toast overlay with toast options.
    */
   async create(opts) {
-    return createOverlay(document.createElement('yoo-toast'), opts);
+    return createOverlay(document.createElement('yoo-toast'), opts, this.device);
   }
   /**
    * Dismiss the open toast overlay.
@@ -151,6 +170,24 @@ export class YooIonToastControllerComponent {
     }
   }; }
   static get listeners() { return [{
+      "name": "deviceCreated",
+      "method": "onDeviceCreated",
+      "target": "body",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "deviceDestroyed",
+      "method": "onDeviceDestroyed",
+      "target": "body",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "click",
+      "method": "onClick",
+      "target": "body",
+      "capture": true,
+      "passive": false
+    }, {
       "name": "ionToastWillPresent",
       "method": "toastWillPresent",
       "target": "body",

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

@@ -3075,4 +3075,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host(.iphone-x.simple) .inner-shadow {
   box-shadow: none;
+}
+
+:host(.iphone-x) {
+  --safe-area-inset-top: var(--spacing-32, 2rem);
 }

package/dist/collection/components/3.organisms/device/device.js

@@ -1,6 +1,6 @@
 import { devices } from '@shared/interfaces';
 import { debounce, findParent } from '@shared/utils';
-import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';
+import { Component, Element, Event, h, Host, Prop, Watch } from '@stencil/core';
 export class YooDeviceComponent {
   constructor() {
     this.resizeOnUpdate = false;
@@ -23,6 +23,7 @@ export class YooDeviceComponent {
       window.addEventListener('resize', this.resizeListener);
       this.resize();
     }
+    this.deviceCreated.emit(this.host);
   }
   componentDidUpdate() {
     if (this.resizeOnUpdate) {
@@ -31,6 +32,7 @@ export class YooDeviceComponent {
   }
   disconnectedCallback() {
     window.removeEventListener('resize', this.resizeListener);
+    document.body.dispatchEvent(new CustomEvent('deviceDestroyed', { detail: this.host }));
   }
   resize() {
     const parent = findParent(this.host, this.scaledContainerSelector);
@@ -117,7 +119,7 @@ export class YooDeviceComponent {
     ];
   }
   render() {
-    return (h(Host, { class: { [this.deviceEntry.device]: true, 'web': this.deviceEntry.device === 'macbook' } },
+    return (h(Host, { class: { [this.deviceEntry.device]: true, 'mobile': this.deviceEntry.device !== 'macbook', 'web': this.deviceEntry.device === 'macbook' } },
       h("div", { class: {
           'marvel-device': true,
           [this.deviceEntry.device]: true,
@@ -189,6 +191,26 @@ export class YooDeviceComponent {
       }
     }
   }; }
+  static get events() { return [{
+      "method": "deviceCreated",
+      "name": "deviceCreated",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "HTMLYooDeviceElement",
+        "resolved": "HTMLYooDeviceElement",
+        "references": {
+          "HTMLYooDeviceElement": {
+            "location": "global"
+          }
+        }
+      }
+    }]; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
       "propName": "deviceEntry",

package/dist/collection/components/entities/card-list/color/card-list-color.css

@@ -498,4 +498,11 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 
 :host(.missiondescriptiontemplates) .outer-container .heading-container .heading {
   white-space: normal;
+}
+
+:host(.coursecategories) .outer-container {
+  justify-content: center;
+}
+:host(.coursecategories) .outer-container .heading-container {
+  font-weight: initial;
 }

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

@@ -8,7 +8,7 @@ export class YooCardListColorComponent {
   }
   renderHeader() {
     var _a, _b, _c, _d;
-    const { iconTopMiddle, iconTopMiddleColor, iconTopRight, iconTopRightColor, iconTopLeft, iconTopLeftColor, color, heading } = this.entry;
+    const { iconTopMiddle, iconTopMiddleColor, iconTopMiddleCustomColor, iconTopRight, iconTopRightColor, iconTopLeft, iconTopLeftColor, color, heading } = this.entry;
     const bigIcon = ((_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.contains('creationtypes')) || ((_d = (_c = this.host) === null || _c === void 0 ? void 0 : _c.classList) === null || _d === void 0 ? void 0 : _d.contains('missiondescriptiontemplates'));
     return (h("div", { class: "heading-container", style: { '--align-items': iconTopMiddle ? 'center' : 'normal', '--flex-direction': iconTopMiddle ? 'column-reverse' : 'row', fill: color } },
       !!iconTopLeft && (h("div", { class: "icon-left" },
@@ -19,7 +19,7 @@ export class YooCardListColorComponent {
         h("yoo-icon", { size: "medium", name: iconTopRight, color: iconTopRightColor }),
         this.notif && h("yoo-badge", { shape: "dot" }))),
       !!iconTopMiddle && (h("div", { class: "icon-middle" },
-        h("yoo-icon", { size: "medium", name: iconTopMiddle, color: iconTopMiddleColor }),
+        h("yoo-icon", { size: "medium", name: iconTopMiddle, color: iconTopMiddleColor, customColor: iconTopMiddleCustomColor }),
         this.notif && h("yoo-badge", { shape: "dot" })))));
   }
   renderSubHeader() {

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

@@ -40,7 +40,7 @@ export class YooCardListSimpleComponent {
       h("yoo-flag", { shape: "circle", country: countryCode })));
   }
   renderCardImage() {
-    return this.host.classList.contains('language') ? (this.renderFlagContainer()) : this.host.classList.contains('badges') ? (h("yoo-tag", { size: this.entry.avatarSize || 'medium', icon: this.entry.icon, customColor: this.entry.customColor })) : (this.renderAvatar());
+    return this.host.classList.contains('language') ? (this.renderFlagContainer()) : (this.host.classList.contains('badges') || this.host.classList.contains('coursecategories')) ? (h("yoo-tag", { size: this.entry.avatarSize || 'medium', icon: this.entry.icon, customColor: this.entry.customColor })) : (this.renderAvatar());
   }
   renderAvatar() {
     var _a, _b, _c;

package/dist/collection/components/entities/card-sticky/card-sticky.css

@@ -510,9 +510,13 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   content: "";
 }
 :host .outer-container.courses .tags-container, :host .outer-container.plans .tags-container, :host .outer-container.courses-small .tags-container {
+  display: flex;
   margin-bottom: -0.2rem;
   padding: 0 0 0 var(--spacing-16, 1rem);
 }
+:host .outer-container.courses .tags-container yoo-tag.bottom, :host .outer-container.plans .tags-container yoo-tag.bottom, :host .outer-container.courses-small .tags-container yoo-tag.bottom {
+  --padding: 0 var(--spacing-04, 0.25rem) 0 0;
+}
 :host .outer-container.courses .bottom-container, :host .outer-container.plans .bottom-container, :host .outer-container.courses-small .bottom-container {
   position: absolute;
   display: flex;
@@ -736,7 +740,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   background-color: var(--success-10, rgba(58, 167, 109, 0.1));
 }
 
-:host([ongoing]) yoo-icon[name=ongoing] {
+:host([inprogress]) yoo-icon[name=ongoing] {
   right: var(--spacing-48, 3rem);
   background-color: var(--info-20, rgba(216, 76, 150, 0.2));
 }

package/dist/collection/components/entities/card-sticky/card-sticky.js

@@ -38,11 +38,11 @@ export class YooCardStickyComponent {
     return { width: `${this.imageWidth}px`, height: `${this.imageHeight}px` };
   }
   renderIcons() {
-    const { isLocked, isBookmarked, isOngoing, isTicked } = this.entry;
+    const { isLocked, isBookmarked, inProgress, isTicked } = this.entry;
     return [
       isLocked && h("yoo-icon", { class: "isLocked", name: "lock", size: "small" }),
       !isLocked && h("yoo-icon", { name: "bookmark", size: "small", color: isBookmarked ? 'app-color' : 'stable-alt' }),
-      !isLocked && isOngoing && h("yoo-icon", { class: "ongoing", name: "ongoing", size: "small", color: "info" }),
+      !isLocked && inProgress && h("yoo-icon", { class: "ongoing", name: "ongoing", size: "small", color: "info" }),
       !isLocked && isTicked && h("yoo-icon", { class: "tick", name: "tick", size: "small", color: "success" })
     ];
   }
@@ -81,7 +81,7 @@ export class YooCardStickyComponent {
     var _a, _b;
     const hasMediaBadges = ((_b = (_a = this.entry) === null || _a === void 0 ? void 0 : _a.mediaBadges) === null || _b === void 0 ? void 0 : _b.length) > 0;
     const isFullWidth = this.host.classList.contains('full-width');
-    const showHeaderViewBadge = hasMediaBadges && !(isFullWidth || !isWeb(this.host));
+    const showHeaderViewBadge = hasMediaBadges && !isFullWidth;
     return (h("div", { class: { 'outer-container': true, [this.type]: true, ticked: this.entry.isTicked }, style: this.getCardSize() },
       h("yoo-img", { instant: true, type: "background", class: "image-container", disabled: this.entry.isLocked, src: this.entry.imgSrc }, this.renderIcons()),
       h("div", { class: "bottom-container" },
@@ -122,7 +122,8 @@ export class YooCardStickyComponent {
     }
   }
   render() {
-    return (this.entry && (h(Host, { ...{ locked: this.entry.isLocked, bookmarked: this.entry.isBookmarked, ticked: this.entry.isTicked, ongoing: this.entry.isOngoing }, class: { ...getAppContext(this.host) } }, this.renderBasedOnType())));
+    var _a;
+    return (this.entry && (h(Host, { ...{ locked: this.entry.isLocked, bookmarked: this.entry.isBookmarked, ticked: this.entry.isTicked, inprogress: (_a = this.entry) === null || _a === void 0 ? void 0 : _a.inProgress }, class: { ...getAppContext(this.host) } }, this.renderBasedOnType())));
   }
   static get is() { return "yoo-card-sticky"; }
   static get encapsulation() { return "shadow"; }

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

@@ -881,4 +881,22 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --image-overlay: linear-gradient(to bottom, var(--transparent-linear-gradient, rgba(255, 255, 255, 0)) -73%, var(--dark-40, rgba(0, 0, 0, 0.4)));
   --title-font-size: var(--font-size-14, 0.875rem);
   --title-line-height: var(--font-size-32, 2rem);
+}
+
+:host(.coursecategories) yoo-card-menu:hover {
+  cursor: pointer;
+}
+:host(.coursecategories) yoo-card-menu {
+  --counter-color: var(--stable);
+  --icon-color: var(--dark);
+  --icon-background-color: var(--dark-10);
+  --icon-margin-left: var(--spacing-16);
+  --icon-border-radius: var(--spacing-64);
+  --icon-padding: var(--spacing-04);
+  --container-box-shadow: var(--shadow-01);
+  --container-padding-bottom: 0;
+  --container-border-radius: var(--border-radius-08);
+  --title-padding: 0.75rem 0 0.75rem 0;
+  --arrow-margin: 0;
+  --background-color: var(--light);
 }

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 });
@@ -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,
@@ -1667,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') {
@@ -1685,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') {
@@ -2478,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());
@@ -2570,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.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-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);
 }

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

@@ -2119,7 +2119,7 @@ export class YooFormDynamicComponent {
                 'grid-flex': !this.showWizard && ((_b = (_a = selectedSlide === null || selectedSlide === void 0 ? void 0 : selectedSlide.items) === null || _a === void 0 ? void 0 : _a.filter((f) => this.getFieldVisibility(f))) === null || _b === void 0 ? void 0 : _b.some((f) => f.type === FormFieldType.grid || f.type === FormFieldType.audience)),
                 'gridstack': this.useGridstack && !this.gridstackItemNoScroll,
                 'gridstack-no-scroll': this.useGridstack && this.gridstackItemNoScroll,
-                'lesson-detail-answer': (this.formType === 'lesson' && isWeb()) && this.showAnswers && !this.lessonStarted
+                'lesson-detail-answer': (this.formType === 'lesson' && isWeb(this.host)) && this.showAnswers && !this.lessonStarted
               }, ref: (el) => (this.inputContainerParent[selectedSlideIndex] = el) },
               h("slot", { name: "before-main-container" }),
               this.selectedTabIndexState > -1 && this.renderFormContentFields(selectedSlide, selectedSlideIndex, slides.length - 1),
@@ -2137,7 +2137,7 @@ export class YooFormDynamicComponent {
                 'grid-flex': !this.showWizard && ((_f = (_e = (_d = slides[0]) === null || _d === void 0 ? void 0 : _d.items) === null || _e === void 0 ? void 0 : _e.filter((f) => this.getFieldVisibility(f))) === null || _f === void 0 ? void 0 : _f.some((f) => f.type === FormFieldType.grid || f.type === FormFieldType.audience)),
                 'gridstack': this.useGridstack && !this.gridstackItemNoScroll,
                 'gridstack-no-scroll': this.useGridstack && this.gridstackItemNoScroll,
-                'lesson-detail-answer': this.formType === 'lesson' && isWeb() && this.showAnswers && !this.lessonStarted
+                'lesson-detail-answer': this.formType === 'lesson' && isWeb(this.host) && this.showAnswers && !this.lessonStarted
               }, ref: (el) => (this.inputContainerParent[0] = el) },
               h("slot", { name: "before-main-container" }),
               this.renderFormContentFields(slides[0], 0, slides.length - 1))),
@@ -2635,7 +2635,7 @@ export class YooFormDynamicComponent {
             'disable-input-container': field.disableInputContainer,
             'html': field.type === FormFieldType.textarea && field.language === 'html' && isWeb(this.host),
             'no-break': !isPdfMultiplePhotos && ![FormFieldType.selectmulti, FormFieldType.selectbuttons, FormFieldType.catalog].includes(field === null || field === void 0 ? void 0 : field.type),
-            'lesson-detail-answer-field': this.formType === 'lesson' && isWeb(),
+            'lesson-detail-answer-field': this.formType === 'lesson' && isWeb(this.host),
             [fieldClass]: !!fieldClass && !renderSlideTitle,
             [field.mode]: field.mode && (field.type === FormFieldType.document || field.type === FormFieldType.image || field.type === FormFieldType.podcast),
             [field.type]: true
@@ -2812,7 +2812,7 @@ export class YooFormDynamicComponent {
         }
         break;
       case 'recap':
-        buttons = getRecapButton(this.validity && !this.isPreview, this.showPreview, this.isPreview, () => this.onOpenPreview(), (ev) => this.onSave(ev), () => this.continueIfEnabled(() => this.goToSlide(this.nextAvailablePage(-1), true)));
+        buttons = getRecapButton(this.host, this.validity && !this.isPreview, this.showPreview, this.isPreview, () => this.onOpenPreview(), (ev) => this.onSave(ev), () => this.continueIfEnabled(() => this.goToSlide(this.nextAvailablePage(-1), true)));
         break;
     }
     return buttons;
@@ -2824,7 +2824,7 @@ export class YooFormDynamicComponent {
   renderFormFooter(type, slideIndex, lastUnlockedSlideIndex) {
     if (this.shouldRenderFormFooter(type, slideIndex, lastUnlockedSlideIndex)) {
       const buttons = this.getFormFooterButtons(type, slideIndex, lastUnlockedSlideIndex);
-      return (h("yoo-form-footer", { ref: (el) => (this.formFooterElement = el), countDownStartValue: this.timer, countDownValue: this.innerTimer, forceMobile: this.forceMobile || this.formType === 'form-creator-preview', buttons: buttons, showCopyright: this.showCopyright, class: this.formType === 'lesson' ? isWeb() ? 'lesson-detail' : 'relative' : '' }));
+      return (h("yoo-form-footer", { ref: (el) => (this.formFooterElement = el), countDownStartValue: this.timer, countDownValue: this.innerTimer, forceMobile: this.forceMobile || this.formType === 'form-creator-preview', buttons: buttons, showCopyright: this.showCopyright, class: this.formType === 'lesson' ? isWeb(this.host) ? 'lesson-detail' : 'relative' : '' }));
     }
   }
   getNextButtons(slideIndex) {
@@ -2844,6 +2844,7 @@ export class YooFormDynamicComponent {
         }
       };
       buttons = getPreviousAndNextButtons({
+        host: this.host,
         hasPreviousButton: slideIndex !== 0 && (((slideIndex !== this.slides.length - 1 || this.isLessonPreview()) && isContentOnly(this.lessonType)) || ((_f = this.formExtraOptions) === null || _f === void 0 ? void 0 : _f.showBack)),
         lastButtonTranslationKey: isQuiz(this.lessonType) && this.showAnswers && !isTimedQuiz(this.lessonType) && (!isConfidenceAssessment(this.lessonType) || isConfidenceSlide) ? 'CHECK' : 'YOOBICNEXT',
         isDisabled: this.isLivePreview() ? false : !getLessonPageValidity(slideIndex, this.slides, this.fieldsState, this.activeIndex, this.currentData),
@@ -2859,6 +2860,7 @@ export class YooFormDynamicComponent {
     else if (this.showWizard) {
       lockSwipes(this.ionSlides, true);
       buttons = getPreviousAndNextButtons({
+        host: this.host,
         hasPreviousButton: slideIndex !== 0 && slideIndex !== this.slides.length - 1,
         lastButtonTranslationKey: 'YOOBICNEXT',
         isDisabled: !((_g = this.slidesState.filter((item) => !(item === null || item === void 0 ? void 0 : item.hidden))[slideIndex]) === null || _g === void 0 ? void 0 : _g.validity),
@@ -2874,7 +2876,7 @@ export class YooFormDynamicComponent {
       if (((_h = this.formExtraOptions) === null || _h === void 0 ? void 0 : _h.combinedForms) && this.slides[slideIndex] && ((_j = this.slides[slideIndex]) === null || _j === void 0 ? void 0 : _j.submitFn)) {
         nextFn = () => this.slides[slideIndex].submitFn(this.currentData, this.ionSlides, this);
       }
-      buttons = getNextButton(useSubmitFn ? () => this.slides[slideIndex].submitFn(this.currentData, () => nextFn) : nextFn, isWeb(this.host) && !this.isLivePreview() ? 'medium' : 'large');
+      buttons = getNextButton(this.host, useSubmitFn ? () => this.slides[slideIndex].submitFn(this.currentData, () => nextFn) : nextFn, isWeb(this.host) && !this.isLivePreview() ? 'medium' : 'large');
     }
     return buttons;
   }
@@ -2889,7 +2891,7 @@ export class YooFormDynamicComponent {
     else if (this.showWizard) {
       lockSwipes(this.ionSlides, true);
       const visibleSlides = this.getVisibleSlides();
-      buttons = getLastButtons({
+      buttons = getLastButtons(this.host, {
         text: translate(this.saveText || 'YOOBICSAVE'),
         color: isDisabled ? 'stable-light' : this.appColor,
         size: isWeb(this.host) && !this.isLivePreview() ? 'medium' : 'large',
@@ -2922,7 +2924,7 @@ export class YooFormDynamicComponent {
       else {
         submitText = 'FINISH';
       }
-      buttons = getLastButtons({
+      buttons = getLastButtons(this.host, {
         text: translate(submitText),
         color: !this.isLesson() && isDisabled ? 'stable-light' : this.appColor,
         size: isWeb(this.host) && !this.isLivePreview() ? 'medium' : 'large',