@yoobic/yobi 8.1.0-110 → 8.1.0-113

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

@@ -688,7 +688,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   color: var(--dark, #000000);
 }
 :host .outer-container .content-container .heading-container .progress-box .icon-text {
-  font-size: var(--font-size-18, 1.125rem);
+  font-size: var(--font-size-16, 1rem);
 }
 :host .outer-container .content-container .tags-container {
   display: flex;

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

@@ -336,6 +336,10 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin-right: var(--spacing-08, 0.5rem);
 }
 
+:host(.notes) yoo-avatar {
+  margin-left: 0;
+}
+
 :host(.chat) .image-container {
   padding-right: 0;
 }

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

@@ -5,7 +5,7 @@ export class YooCardListImageComponent {
     this.isCollapsed = false;
   }
   renderAvatar() {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     const isAutocompleteVideoEntry = this.host.classList.contains('autocomplete') && this.host.classList.contains('files') && (((_a = this.entry.heading) === null || _a === void 0 ? void 0 : _a.endsWith('.mp4')) || ((_b = this.entry.heading) === null || _b === void 0 ? void 0 : _b.endsWith('.mov')));
     const isSelectedContent = this.host.classList.contains('selected-content');
     const avatarSize = this.host.classList.contains('calendarEvents') ? 'extra-large' : this.entry.avatarSize || 'large';
@@ -13,9 +13,9 @@ export class YooCardListImageComponent {
     const isFolder = this.host.classList.contains('filesFolders') && this.host.classList.contains('folders');
     const avatarClass = { 'files-autocomplete': this.host.classList.contains('autocomplete-selection-mode') && this.host.classList.contains('files'), 'folder': isFolder };
     return !((_c = this.entry.users) === null || _c === void 0 ? void 0 : _c.length) ? (this.entry.imgWidth && this.entry.imgHeight ? (h("yoo-img", { style: { width: `${this.entry.imgWidth}px`, height: `${this.entry.imgHeight}px` }, src: this.entry.imgSrc, cloudinaryOptions: this.entry.cloudinaryOptions, contained: this.entry.contained })) : ([
-      h("yoo-avatar", { class: avatarClass, size: avatarSize, color: (_d = this === null || this === void 0 ? void 0 : this.entry) === null || _d === void 0 ? void 0 : _d.avatarColor, frame: avatarFrame, imgSrc: this.entry.imgSrc, cloudinaryOptions: this.entry.cloudinaryOptions, instant: this.entry.isGridCell, contained: this.entry.contained, icon: this.entry.icon, iconSize: this.entry.avatarIconSize, iconText: this.entry.iconText, isVip: this.entry.vip, vipNotification: this.entry.hasPending }),
+      h("yoo-avatar", { class: avatarClass, size: avatarSize, color: (_d = this === null || this === void 0 ? void 0 : this.entry) === null || _d === void 0 ? void 0 : _d.avatarColor, frame: avatarFrame, imgSrc: this.entry.imgSrc || ((_e = this.entry.sender) === null || _e === void 0 ? void 0 : _e.imageData), cloudinaryOptions: this.entry.cloudinaryOptions, instant: this.entry.isGridCell, contained: this.entry.contained, icon: this.entry.icon, iconSize: this.entry.avatarIconSize, iconText: this.entry.iconText, isVip: this.entry.vip, vipNotification: this.entry.hasPending }),
       isAutocompleteVideoEntry && h("yoo-icon", { class: "play", name: "play", color: "light", size: isSelectedContent ? 'small' : 'medium' })
-    ])) : ((_e = this.entry.users) === null || _e === void 0 ? void 0 : _e.length) === 1 ? (h("yoo-avatar", { isOnline: this.entry.isOnline, size: avatarSize, color: (_f = this === null || this === void 0 ? void 0 : this.entry) === null || _f === void 0 ? void 0 : _f.avatarColor, frame: avatarFrame, class: avatarClass, imgSrc: this.entry.imgSrc, instant: this.entry.isGridCell, user: this.entry.users[0], isVip: this.entry.vip, vipNotification: this.entry.hasPending })) : (this.entry.users && h("yoo-avatars", { size: "small", layout: "grid", users: this.entry.users, maxDisplay: 4 }));
+    ])) : ((_f = this.entry.users) === null || _f === void 0 ? void 0 : _f.length) === 1 ? (h("yoo-avatar", { isOnline: this.entry.isOnline, size: avatarSize, color: (_g = this === null || this === void 0 ? void 0 : this.entry) === null || _g === void 0 ? void 0 : _g.avatarColor, frame: avatarFrame, class: avatarClass, imgSrc: this.entry.imgSrc, instant: this.entry.isGridCell, user: this.entry.users[0], isVip: this.entry.vip, vipNotification: this.entry.hasPending })) : (this.entry.users && h("yoo-avatars", { size: "small", layout: "grid", users: this.entry.users, maxDisplay: 4 }));
   }
   renderImageContainerContent() {
     return [

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

@@ -11,7 +11,7 @@ import { execHandlerAndStopEvent, getAppContext, getNotificationIcon } from '../
 import { onUserClick, parseEntityCommentsForCardList, parseEntityForCardChat, parseEntityForCardMedia } from '../../../utils/helpers/entities-helpers';
 import { createThemedClasses } from '../../../utils/ionic/theme';
 import { entitySimpleCardLists } from './constants';
-import { ChannelAvatarCard, ChannelsAvatarCard } from './utils/card-avatar.factory';
+import { ChannelAvatarCard, ChannelsAvatarCard, ContactAvatarCard, LocationAvatarCard } from './utils/card-avatar.factory';
 export class YooEntityComponent {
   constructor() {
     this.items = [];
@@ -677,7 +677,9 @@ export class YooEntityComponent {
     }
     return (h("yoo-card-list-color", { entry: entry, size: size, class: {
         [extraClasses]: true,
-        [this.entityType]: this.entityType !== undefined
+        [this.entityType]: this.entityType !== undefined,
+        cell: this.displayType === 'card-cell-color',
+        list: this.displayType === 'card-list-color'
       } }));
   }
   renderCardKanban(extraClasses) {
@@ -1200,7 +1202,8 @@ export class YooEntityComponent {
         tags: note.tags,
         date: isWeb(this.host) ? null : pipes.dateFormat.transform(note._lmt, 'fromNow'),
         users: [note.owner],
-        imgSrc: note.imageData
+        imgSrc: note.imageData,
+        avatarSize: 'medium'
       };
     }
     else if (this.entityType === 'dashboards') {
@@ -2187,7 +2190,7 @@ export class YooEntityComponent {
         hasRecordedVideo: broadcast.bambuserPayload && broadcast.bambuserPayload.type !== 'live'
       };
     }
-    else if (['channel', 'channels'].includes(this.entityType)) {
+    else if (['channel', 'channels', 'contacts', 'locations'].includes(this.entityType)) {
       return this.renderCardAvatar();
     }
     if (this.item && this.item.icon && this.item.icon._downloadURL) {
@@ -2407,7 +2410,8 @@ export class YooEntityComponent {
       entry,
       hideLessonsCount: this.isGridCell,
       class: (this.entityType || 'simple') + extraClasses,
-      profileSummary: this.profileSummary
+      profileSummary: this.profileSummary,
+      size: this.displaySize
     };
     return [h(TagType, { ...attrs })];
   }
@@ -2472,8 +2476,15 @@ export class YooEntityComponent {
     return (h("yoo-card-location", { class: extraClasses, address: address, bookmarked: vip, distance: isWeb(this.host) ? null : distance, heading: this.entityType === 'locationspublic' && publicTitle ? publicTitle : title, image: { src: imageData }, newness: hasAvailableMissions || availableMissions > 0, visit: { date: lastVisit, relative: true }, kpis: isWeb(this.host) || this.isWebAutocomplete() || this.isMobileAutocomplete() || this.isFramed ? null : kpis }));
   }
   renderCardAvatar() {
-    if (['channel', 'channels'].includes(this.entityType)) {
-      return this.entityType === 'channel' ? (h(ChannelAvatarCard, { item: this.item, unreadCounts: this.unreadCounts })) : (h(ChannelsAvatarCard, { item: this.item, unreadCounts: this.unreadCounts }));
+    switch (this.entityType) {
+      case 'channel':
+        return h(ChannelAvatarCard, { item: this.item, unreadCounts: this.unreadCounts });
+      case 'channels':
+        return h(ChannelsAvatarCard, { item: this.item, unreadCounts: this.unreadCounts });
+      case 'contacts':
+        return h(ContactAvatarCard, { item: this.item });
+      case 'locations':
+        return h(LocationAvatarCard, { item: this.item });
     }
   }
   renderCardMenu() {

package/dist/collection/components/entities/entity/utils/card-avatar.factory.js

@@ -1,4 +1,4 @@
-import { getUserDisplayName } from '@shared/utils';
+import { getUserDisplayName, pipes } from '@shared/utils';
 import { h } from '@stencil/core';
 const getChatCardHeading = (text, hasNewMessage) => ({
   color: 'dark',
@@ -20,3 +20,8 @@ export const ChannelsAvatarCard = ({ item, unreadCounts }) => {
   const heading = getChatCardHeading(name, hasNewMessage);
   return background ? (h("yoo-card-avatar", { avatar: { imgSrc: background }, heading: heading }, hasNewMessage && h(ChatMessage, { value: message }))) : (h("yoo-card-avatars", { heading: heading, users: users }, hasNewMessage && h(ChatMessage, { value: message })));
 };
+export const ContactAvatarCard = ({ item }) => (h("yoo-card-avatar", { avatar: { user: item }, heading: { color: 'dark', text: getUserDisplayName(item) } }));
+export const LocationAvatarCard = ({ item }) => {
+  const { distance, imageData, title, vip } = item;
+  return (h("yoo-card-avatar", { avatar: { imgSrc: imageData, isVip: vip }, heading: { color: 'dark', text: title }, subheading: { icon: { name: 'pin', size: 'small' }, text: pipes.distance.transform(distance) } }));
+};

package/dist/collection/components/form/camera-preview-dialog/camera-preview-dialog.css

@@ -347,19 +347,19 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .image-bg.active {
   clip-path: none;
 }
-:host .image-bg-from-left {
+:host .image-bg.from-left {
   transform: translateX(-70%);
   clip-path: circle(12.5vw at calc(100% - 12.5vw) calc(50% - 20px));
 }
-:host .image-bg-from-right {
+:host .image-bg.from-right {
   transform: translateX(70%);
   clip-path: circle(12.5vw at 12.5vw calc(50% - 20px));
 }
-:host .image-bg-from-bottom {
+:host .image-bg.from-bottom {
   transform: translateY(60%);
   clip-path: circle(12.5vw at 50% 12.5vw);
 }
-:host .image-bg-from-top {
+:host .image-bg.from-top {
   transform: translateY(-70%);
   clip-path: circle(12.5vw at 50% calc(100% - 12.5vw));
 }

package/dist/collection/components/form/camera-preview-dialog/camera-preview-dialog.js

@@ -8,7 +8,6 @@ import { getFlashModeIconName } from './camera-preview-dialog-helpers';
 export class YooCameraPreviewDialogComponent {
   constructor() {
     this.regularMode = false;
-    this.stitchDirection = 'from-left';
     this.showLoader = false;
     this.listviewItems = [];
     this.flashMode = 'auto';
@@ -256,9 +255,7 @@ export class YooCameraPreviewDialogComponent {
             }, class: "save-button" }, translate('YOOBICSAVE'))
         ]),
       h("div", { class: "hidden-items-container" },
-        h("yoo-ion-scroll", { 
-          // ref={el => this.ionScrollDiv = el as HTMLYooSlimScrollElement}
-          class: "relative", horizontalMode: true }, this.listviewItems.map((image, index) => {
+        h("yoo-ion-scroll", { class: "relative", horizontalMode: true }, this.listviewItems.map((image, index) => {
           return (h("yoo-img", { type: "background", class: "item", src: image, onClick: () => {
               this.onImageClick(index);
             } }, index === this.listviewItems.length - 1 ? (h("yoo-icon", { onClick: (ev) => {
@@ -297,10 +294,7 @@ export class YooCameraPreviewDialogComponent {
           }, onTouchEnd: () => {
             this.onCaptureInnerTouchEnd();
           }, ref: (el) => (this.innerButtonDiv = el), class: "inner-circle" })),
-      imageSrc && (this.stitchDirection === 'from-left') ? h("yoo-img", { type: "background", class: "image-bg image-bg-from-left", onTouchMove: (ev) => this.previewOnTouchMove(ev, this.stitchDirection), ref: (el) => (this.previewImageDiv = el), src: imageSrc }) : null,
-      imageSrc && (this.stitchDirection === 'from-right') ? h("yoo-img", { type: "background", class: "image-bg image-bg-from-right", onTouchMove: (ev) => this.previewOnTouchMove(ev, this.stitchDirection), ref: (el) => (this.previewImageDiv = el), src: imageSrc }) : null,
-      imageSrc && (this.stitchDirection === 'from-bottom') ? h("yoo-img", { type: "background", class: "image-bg image-bg-from-bottom", onTouchMove: (ev) => this.previewOnTouchMove(ev, this.stitchDirection), ref: (el) => (this.previewImageDiv = el), src: imageSrc }) : null,
-      imageSrc && (this.stitchDirection === 'from-top') ? h("yoo-img", { type: "background", class: "image-bg image-bg-from-top", onTouchMove: (ev) => this.previewOnTouchMove(ev, this.stitchDirection), ref: (el) => (this.previewImageDiv = el), src: imageSrc }) : null
+      imageSrc && this.stitchDirection && h("yoo-img", { type: "background", class: { 'image-bg': true, [this.stitchDirection]: true }, onTouchMove: (ev) => this.previewOnTouchMove(ev, this.stitchDirection), ref: (el) => (this.previewImageDiv = el), src: imageSrc })
     ];
   }
   previewOnTouchMove(ev, direction) {
@@ -468,8 +462,7 @@ export class YooCameraPreviewDialogComponent {
         "text": ""
       },
       "attribute": "stitch-direction",
-      "reflect": false,
-      "defaultValue": "'from-left'"
+      "reflect": false
     },
     "values": {
       "type": "unknown",

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

@@ -390,9 +390,12 @@ export class YooFormCaptureComponent {
         StatusBar.show();
       }
       cameraPreviewer = null;
-      ((ret === null || ret === void 0 ? void 0 : ret.data) || []).forEach((_image, index) => {
-        this.updateStitchDirection(stitchDirection, index);
-      });
+      if (stitchDirection && (ret === null || ret === void 0 ? void 0 : ret.data)) {
+        ret.data = !Array.isArray(ret.data) ? [ret.data] : ret.data;
+        ret.data.forEach((_image, index) => {
+          this.updateStitchDirection(stitchDirection, index);
+        });
+      }
       return ret === null || ret === void 0 ? void 0 : ret.data;
     });
   }
@@ -459,6 +462,7 @@ export class YooFormCaptureComponent {
       }
     }
     if (!promise || !promise.then) {
+      this.showImageLoader = false;
       return;
     }
     return promise.then((imageData) => {

package/dist/collection/components/form/form-categorize-words/form-categorize-words.css

@@ -283,11 +283,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   opacity: 0.5;
 }
 
-:host(.web[islesson]:not([live-preview])) {
-  padding: var(--spacing-32, 2rem);
-  background-color: var(--light, #ffffff);
-}
-
 :host([animated]) .drop-title {
   transition: opacity 750ms ease-in-out;
 }

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

@@ -89,7 +89,7 @@ export class YooFormConnectComponent {
   }
   async scrollToRevealGame() {
     const scrollElement = this.host.closest('yoo-ion-scroll');
-    return scrollElement && new Promise(resolve => {
+    return scrollElement && !this.livePreview && new Promise(resolve => {
       setTimeout(() => {
         scrollElement.scrollTo({ top: scrollElement.scrollHeight, behavior: 'smooth' });
         resolve();

package/dist/collection/components/form/form-document-dialog/form-document-dialog.js

@@ -223,7 +223,8 @@ export class YooFormDocumentDialogComponent {
         type: 'box-session',
         params: { id: this.document.boxId }
       }).then((session) => {
-        if (session && session.expiring_embed_link && session.expiring_embed_link.url) {
+        var _a;
+        if ((_a = session === null || session === void 0 ? void 0 : session.expiring_embed_link) === null || _a === void 0 ? void 0 : _a.url) {
           this.openBoxLink(session.expiring_embed_link.url);
           this.isLoading = false;
         }

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

@@ -810,7 +810,6 @@ span.fr-img-caption.fr-view {
   color: var(--danger, #d44333);
 }
 :host .progress-container {
-  height: 6.125rem;
   background: var(--light, #ffffff);
 }
 :host .progress-container.border-bottom {
@@ -1034,9 +1033,7 @@ span.fr-img-caption.fr-view {
 :host .slide-container {
   position: relative;
   width: 100%;
-  margin: 1rem;
-  margin-top: 0;
-  margin-bottom: 0;
+  height: 100%;
   text-align: left;
   transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
 }
@@ -1187,6 +1184,10 @@ span.fr-img-caption.fr-view {
   width: 100%;
   height: var(--video-container-height);
 }
+:host yoo-form-videoplayer.web {
+  height: calc(var(--video-container-height) * 2);
+  cursor: pointer;
+}
 :host .field-placeholder {
   display: block;
   animation-name: slideInRight;
@@ -1471,9 +1472,6 @@ span.fr-img-caption.fr-view {
 :host .history .square .square-content yoo-form-signature-pad {
   --height-image: 1.875rem;
 }
-:host .history .square .square-content yoo-form-videoplayer {
-  height: 1.875rem;
-}
 :host .footer-spacer {
   width: 100%;
   min-height: 1rem;
@@ -1663,89 +1661,29 @@ span.fr-img-caption.fr-view {
   --stroke-width-line: 8;
 }
 
-:host(.lesson-live-preview) yoo-form-input-container {
-  --font-size-description: inherit;
-}
-
 :host(.lesson-form.web:not(.lesson-live-preview)) {
   background-color: var(--stable-ultralight, #fafafa);
 }
-:host(.lesson-form.web:not(.lesson-live-preview)) yoo-ion-slide form {
-  background-color: transparent;
-}
-:host(.lesson-form.web:not(.lesson-live-preview)) yoo-ion-slide form yoo-ion-scroll {
-  background-color: transparent;
-}
-:host(.lesson-form.web:not(.lesson-live-preview)) yoo-ion-slide form yoo-ion-scroll .inputs-container {
-  width: 100%;
-  max-width: unset !important;
-  min-height: calc(100% - 4rem);
+:host(.lesson-form.web:not(.lesson-live-preview)) form {
   background-color: transparent;
 }
-:host(.lesson-form.web:not(.lesson-live-preview)) yoo-ion-slide form yoo-ion-scroll .inputs-container .field-placeholder {
+:host(.lesson-form.web:not(.lesson-live-preview)) form .inputs-container {
   height: 100%;
-  background-color: transparent;
-}
-:host(.lesson-form.web:not(.lesson-live-preview)) yoo-ion-slide form yoo-ion-scroll .inputs-container.swipecards, :host(.lesson-form.web:not(.lesson-live-preview)) yoo-ion-slide form yoo-ion-scroll .inputs-container.confidence {
-  height: 100%;
-}
-:host(.lesson-form.web:not(.lesson-live-preview)) yoo-ion-slide form yoo-ion-scroll .inputs-container.textsequence .field-placeholder {
-  margin: 0 var(--spacing-24, 1.5rem) !important;
 }
-:host(.lesson-form.web:not(.lesson-live-preview)) yoo-form-choice {
-  max-width: 40rem;
-  margin: auto;
-}
-:host(.lesson-form.web:not(.lesson-live-preview)) yoo-form-videoplayer {
-  height: 33.3333333333vw;
+:host(.lesson-form.web:not(.lesson-live-preview)) form .inputs-container yoo-form-input-container {
+  width: 100%;
+  max-height: calc(100% - 2rem) !important;
 }
 
 :host(.lesson-form) .progress-container {
-  height: auto;
-  margin-bottom: 0;
-  padding: 1em;
+  z-index: 2;
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--spacing-16, 1rem);
 }
 :host(.lesson-form) .swiper-container {
   height: calc(100% - 3rem);
 }
-:host(.lesson-form) .form-wrapper {
-  border-radius: 0;
-  box-shadow: none;
-}
-:host(.lesson-form) .form-wrapper yoo-ion-scroll {
-  border-radius: 0;
-}
-:host(.lesson-form) .form-wrapper yoo-ion-scroll .inputs-container {
-  max-height: 100%;
-}
-:host(.lesson-form) .form-wrapper yoo-ion-scroll .inputs-container.full-height {
-  height: 100%;
-}
-:host(.lesson-form) .form-wrapper yoo-ion-scroll .inputs-container.textsequence {
-  min-height: 0;
-}
-:host(.lesson-form) .form-wrapper yoo-ion-scroll .inputs-container.textsequence .footer-spacer {
-  display: none;
-}
-:host(.lesson-form) .form-wrapper yoo-ion-scroll .inputs-container .field-placeholder {
-  height: 100%;
-}
-:host(.lesson-form) .form-wrapper yoo-ion-scroll .inputs-container .field-placeholder yoo-form-input-container {
-  height: 100%;
-}
-:host(.lesson-form) .form-wrapper yoo-ion-scroll .inputs-container .field-placeholder yoo-form-input-container yoo-form-missing-word,
-:host(.lesson-form) .form-wrapper yoo-ion-scroll .inputs-container .field-placeholder yoo-form-input-container yoo-form-image-tagging,
-:host(.lesson-form) .form-wrapper yoo-ion-scroll .inputs-container .field-placeholder yoo-form-input-container yoo-form-categorize-words {
-  padding: var(--spacing-08, 0.5rem);
-}
-:host(.lesson-form) .form-wrapper yoo-ion-scroll .inputs-container .field-placeholder yoo-form-input-container yoo-form-feedback {
-  display: flex;
-  height: 90%;
-  padding: var(--spacing-16, 1rem);
-}
-:host(.lesson-form) .form-wrapper yoo-ion-scroll .scroll-spacer {
-  height: 0;
-}
 :host(.lesson-form) .information {
   color: var(--dark, #000000);
 }
@@ -1870,26 +1808,40 @@ span.fr-img-caption.fr-view {
 :host(.web.lesson-form:not(.lesson-live-preview)) .progress-container yoo-progress-bar.top-content {
   width: 25rem;
 }
-:host(.web.lesson-form:not(.lesson-live-preview)) .field-placeholder:not(.readonly):not(.invisible):not(.imagecollection):not(.reveal):not(.swipecards):not(.textsequence):not(.categorizewords) {
-  margin: var(--spacing-24, 1.5rem) !important;
-}
 :host(.web.lesson-form:not(.lesson-live-preview)) yoo-form-input-container.imagetagging {
   max-width: 50rem;
   margin: 0 auto;
 }
 
-:host(.lesson-form.mobile) .field-placeholder:not(.readonly):not(.invisible):not(.imagecollection):not(.reveal):not(.swipecards):not(.textsequence):not(.categorizewords) {
-  margin: var(--spacing-16, 1rem) !important;
+:host(.lesson-form) yoo-ion-scroll,
+:host(.lesson-live-preview) yoo-ion-scroll {
+  height: 100%;
 }
-:host(.lesson-form.mobile) .inputs-container.textsequence {
+:host(.lesson-form) yoo-ion-scroll .inputs-container,
+:host(.lesson-live-preview) yoo-ion-scroll .inputs-container {
   height: 100%;
 }
-
-:host(.web.lesson-live-preview) .field-placeholder:not(.readonly):not(.invisible):not(.imagecollection):not(.reveal):not(.swipecards):not(.textsequence):not(.categorizewords) {
-  margin: var(--spacing-16, 1rem) !important;
+:host(.lesson-form) yoo-ion-scroll .inputs-container .field-placeholder,
+:host(.lesson-live-preview) yoo-ion-scroll .inputs-container .field-placeholder {
+  display: flex;
+  align-items: center;
+  height: 100%;
 }
-:host(.web.lesson-live-preview) .inputs-container.textsequence {
+:host(.lesson-form) yoo-ion-scroll .inputs-container .field-placeholder yoo-form-input-container,
+:host(.lesson-live-preview) yoo-ion-scroll .inputs-container .field-placeholder yoo-form-input-container {
+  box-sizing: border-box;
+  width: 100%;
   height: 100%;
+  padding: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
+  --font-size-description: inherit;
+}
+:host(.lesson-form) .footer-spacer,
+:host(.lesson-live-preview) .footer-spacer {
+  min-height: 0;
+}
+:host(.lesson-form) yoo-form-footer,
+:host(.lesson-live-preview) yoo-form-footer {
+  position: relative;
 }
 
 :host(.web.vertical-tabs) {

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

@@ -5,7 +5,6 @@ import { assign, cloneDeep, compact, findLastIndex, flatten, get, groupBy, isArr
 import { getMissionStatusIconName } from '../../../feature-operate/campaign/helpers/operation-helpers';
 import { TodoListMode } from '../../../interfaces/form-field/form-field.instance';
 import { getActiveElementShadow, getAppContext, hideShowTabbar, lockSwipes, querySelectorAllDeep, querySelectorDeep } from '../../../utils/helpers/common-helpers';
-import { getElementDimensions } from '../../../utils/helpers/dimensions-helpers';
 import { generateLabel, getDynamicProperty, getTypeValidation, isCreationAllowed, isDisabled, isEditionAllowed, isReadonly, isRequired, setFieldData, updateFormulas } from '../../../utils/helpers/form-helpers';
 import { setValueAndResetInputValidity, setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
 import { getFieldState, getInputType, getLastButtons, getLessonPageValidity, getNextButton, getPreviousAndNextButtons, getRecapButton, hasKeyboardInput, isActiveFieldDirty } from './helpers';
@@ -627,14 +626,12 @@ export class YooFormDynamicComponent {
     }
     this.host.classList.remove('no-initial-height');
     this.checkIfFirstSlideAndLockSwipePrev();
-    this.setSlidesHeight();
     this.autoFocusForm();
     this.hasLoaded = true;
     this.formHasLoaded.emit();
     this.updateGridstackHeights();
   }
   componentDidUpdate() {
-    this.setSlidesHeight();
     if (this.scrollToNewConditionalFieldOnUpdate && !this.forceReadonly && this.formType === 'mission') {
       this.scrollToNewConditionalFieldOnUpdate = false;
       this.scrollToPoint(75, 1000);
@@ -1100,25 +1097,6 @@ export class YooFormDynamicComponent {
     this.secondaryFieldsState = this.secondaryFieldsState || {};
     this.secondaryFieldsState[field.name] = state;
   }
-  setSlidesHeight() {
-    var _a;
-    const slides = this.getVisibleSlides();
-    if (slides && this.ionSlides && !(this.formType === 'lesson' && isWeb())) {
-      let height;
-      if (slides.length > 1 && !((_a = this.formExtraOptions) === null || _a === void 0 ? void 0 : _a.preventScrollHeight)) {
-        if (this.host.classList && this.host.classList.contains('lesson-form')) {
-          height = Math.max(this.progressIndicator ? getElementDimensions(this.progressIndicator).height : 0, 45);
-        }
-        else {
-          height = Math.max(this.progressIndicator ? getElementDimensions(this.progressIndicator).height : 0, 90);
-        }
-      }
-      else {
-        height = 0;
-      }
-      this.ionSlides.setAttribute('style', `height: calc(100% - ${height}px);`);
-    }
-  }
   onToggleSecondaryField(field, slide, toggleByIcon) {
     let fields = [field];
     if (field.icon && toggleByIcon) {
@@ -2024,7 +2002,7 @@ export class YooFormDynamicComponent {
     }
   }
   getProgressIndicator(activeIndex, classes = {}) {
-    return (h("yoo-form-progress-indicator", { class: classes, ref: (el) => (this.progressIndicator = el), onTitleLinesChanged: () => this.onTitleLinesChanged(), steps: this.steps, currentStep: activeIndex, onStepSelected: (ev) => {
+    return (h("yoo-form-progress-indicator", { class: classes, onTitleLinesChanged: () => this.onTitleLinesChanged(), steps: this.steps, currentStep: activeIndex, onStepSelected: (ev) => {
         this.goToSlide(ev.detail, true);
         this.slideTransition = 'progress-indicator';
       }, lockIndex: this.lockIndex, displayMode: this.showWizard ? 'number' : 'icon', size: this.showWizard ? 'small' : 'medium', forceMobile: this.forceMobile }));
@@ -4317,7 +4295,9 @@ export class YooFormDynamicComponent {
         TagType = 'yoo-text-sequence';
         extraAttrs = {
           heading: field.heading,
-          values: field.values
+          values: field.values,
+          livePreview: this.isLessonPreview(),
+          isVisible: this.isCurrentSlide(slideIndex)
         };
         break;
       case FormFieldType.feedpreview:
@@ -4337,17 +4317,24 @@ export class YooFormDynamicComponent {
           isFormField: true
         };
         break;
+      case FormFieldType.hotzone:
       case FormFieldType.imagemap:
-        TagType = 'yoo-form-image-map';
+        TagType = 'yoo-form-hotzones';
         extraAttrs = {
-          value: field.hotzoneValues,
-          livePreview: this.isLessonPreview()
+          livePreview: this.isLessonPreview(),
+          isVisible: this.isCurrentSlide(slideIndex),
+          image: field.image,
+          hotzones: field.hotzones,
+          hotzonesColor: field.hotzonesColor,
+          type: field.type === FormFieldType.imagemap ? 'imagemap' : 'hotzone'
         };
         break;
       case FormFieldType.hotzonecreator:
-        TagType = 'yoo-form-hotzone-creator';
+      case FormFieldType.imagemapcreator:
+        TagType = 'yoo-form-hotzones-creator';
         extraAttrs = {
-          translations: this.translations
+          translations: this.translations,
+          type: field.type === FormFieldType.imagemapcreator ? 'imagemap' : 'hotzone'
         };
         break;
       default:

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

@@ -240,14 +240,17 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host .outer-container .mission-footer .timer-container {
   display: flex;
+  gap: var(--spacing-16, 1rem);
   align-items: center;
-  justify-content: space-evenly;
+  justify-content: start;
   width: 100%;
   max-width: 14rem;
+  margin-left: var(--spacing-16, 1rem);
 }
 :host .outer-container .mission-footer .timer-container yoo-progress-bar {
-  --stroke-width-circle: 6;
   width: 20%;
+  margin: 0;
+  --stroke-width-circle: 6;
 }
 
 :host(:not(.relative)) {
@@ -281,17 +284,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host(.mobile) .mission-footer .button-container yoo-button {
   --button-width-container: 100%;
 }
-:host(.mobile) .mission-footer .timer-container {
-  display: flex;
-  align-items: center;
-  justify-content: space-evenly;
-  width: 100%;
-  max-width: 14rem;
-}
-:host(.mobile) .mission-footer .timer-container yoo-progress-bar {
-  --stroke-width-circle: 6;
-  width: 20%;
-}
 
 :host(.web) {
   --footer-height: cssvar(spacing-56);
@@ -310,18 +302,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host(.web) .mission-footer .button-container yoo-button {
   min-width: 6rem;
 }
-:host(.web) .mission-footer .timer-container {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  width: 100%;
-}
-:host(.web) .mission-footer .timer-container yoo-progress-bar {
-  --stroke-width-circle: 4;
-  --svg-width: 2rem;
-  --svg-height: 2rem;
-  padding: 0 var(--spacing-16, 1rem) 0 var(--spacing-24, 1.5rem);
-}
 
 :host(.no-border) .mission-footer {
   border-top: 0;