@yoobic/yobi 8.4.0-1 → 8.4.0-4

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

@@ -202,7 +202,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* spacing for padding, margin, etc... */
 /* shadow */
 /*!
- * froala_editor v4.0.13 (https://www.froala.com/wysiwyg-editor)
+ * froala_editor v4.0.14 (https://www.froala.com/wysiwyg-editor)
  * License https://froala.com/wysiwyg-editor/terms/
  * Copyright 2014-2022 Froala Labs
  */
@@ -675,15 +675,21 @@ span.fr-img-caption.fr-view {
   --inputs-margin: 0 var(--spacing-16, 1rem);
   --video-container-height: 9.375rem;
   --footer-height: var(--spacing-56, 3.5rem);
+  --main-container-overflow-x: visible;
+  --main-container-overflow-y: auto;
+  --inputs-container-parent-overflow-x: visible;
+  --inputs-container-parent-overflow-y: auto;
   display: flex;
   flex-direction: column;
 }
 :host .main-container {
   flex: 1;
-  overflow-y: auto;
+  overflow-x: var(--main-container-overflow-x);
+  overflow-y: var(--main-container-overflow-y);
 }
 :host .main-container .inputs-container-parent {
-  overflow-y: auto;
+  overflow-x: var(--inputs-container-parent-overflow-x);
+  overflow-y: var(--inputs-container-parent-overflow-y);
 }
 :host .main-container .inputs-container-parent.gridstack {
   margin: var(--spacing-16, 1rem);
@@ -789,8 +795,8 @@ span.fr-img-caption.fr-view {
 }
 :host .answer-separator {
   width: 100%;
-  height: 0.5rem;
-  margin: var(--spacing-24, 1.5rem) 0;
+  height: var(--spacing-08, 0.5rem);
+  margin: 0;
   background: var(--stable-ultralight, #fafafa);
   border: 0;
 }
@@ -1497,7 +1503,7 @@ span.fr-img-caption.fr-view {
 }
 :host .footer-spacer {
   width: 100%;
-  min-height: 1rem;
+  min-height: 0;
 }
 
 :host(.mobile) {
@@ -1645,9 +1651,11 @@ span.fr-img-caption.fr-view {
   background-color: transparent;
 }
 
+:host(.mission-form.pdf) {
+  --main-container-overflow-y: initial;
+}
 :host(.mission-form.pdf) .main-container {
   flex: initial;
-  overflow-y: initial;
 }
 :host(.mission-form.pdf) .inputs-container-parent {
   margin: initial;
@@ -1753,6 +1761,12 @@ span.fr-img-caption.fr-view {
   padding: 0 0 var(--spacing-16, 1rem);
 }
 
+:host(.web:not(.inline):not(.inline-row):not(.force-mobile)) {
+  --main-container-overflow-x: hidden;
+  --main-container-overflow-y: hidden;
+  --inputs-container-parent-overflow-x: hidden;
+  --inputs-container-parent-overflow-y: auto;
+}
 :host(.web:not(.inline):not(.inline-row):not(.force-mobile)) yoo-tabs {
   min-height: 3rem;
 }
@@ -1760,7 +1774,6 @@ span.fr-img-caption.fr-view {
   display: flex;
   flex: 1;
   flex-direction: row;
-  overflow: hidden;
 }
 :host(.web:not(.inline):not(.inline-row):not(.force-mobile)) .left-panel-secondary {
   width: 12.5rem;
@@ -1799,8 +1812,6 @@ span.fr-img-caption.fr-view {
 }
 :host(.web:not(.inline):not(.inline-row):not(.force-mobile)) .inputs-container-parent {
   flex: 1;
-  overflow-x: hidden;
-  overflow-y: auto;
   /* Track */
   /* Handle */
 }
@@ -1856,6 +1867,7 @@ span.fr-img-caption.fr-view {
 }
 :host(.web.lesson-form:not(.lesson-live-preview)) yoo-form-input-container {
   padding: var(--spacing-16, 1rem);
+  padding-bottom: 0;
   background-color: var(--stable-ultralight, #fafafa);
 }
 
@@ -2091,6 +2103,8 @@ span.fr-img-caption.fr-view {
 }
 
 :host(.inline) {
+  --main-container-overflow-x: hidden;
+  --main-container-overflow-y: hidden;
   position: initial;
   top: initial;
   right: initial;
@@ -2100,8 +2114,6 @@ span.fr-img-caption.fr-view {
 }
 :host(.inline) .main-container {
   flex: 1;
-  overflow-x: hidden;
-  overflow-y: hidden;
 }
 :host(.inline) .main-container .inputs-container-parent {
   margin: 0;
@@ -2294,11 +2306,10 @@ span.fr-img-caption.fr-view {
 }
 
 :host(.toolbar-form) {
+  --inputs-container-parent-overflow-x: hidden;
+  --inputs-container-parent-overflow-y: hidden;
   max-height: 4.125rem;
 }
-:host(.toolbar-form) .main-container .inputs-container-parent {
-  overflow: hidden;
-}
 
 :host(.quickview.web.readonly) .main-container {
   background: var(--stable-ultralight, #fafafa);
@@ -2425,14 +2436,10 @@ span.fr-img-caption.fr-view {
   padding-bottom: 0.5rem;
 }
 
-:host(.mobile.lesson-detail) .field-placeholder,
-:host(.mobile.lesson-question-result.readonly) .field-placeholder {
+:host(.mobile.lesson-detail) .field-placeholder {
   margin: 0 var(--spacing-16, 1rem);
 }
 
-:host(.web.lesson-detail) yoo-form-image-tagging {
-  max-width: 37.5rem;
-}
 :host(.web.lesson-detail) .inputs-container-parent {
   margin: 0 !important;
   padding: 0;
@@ -2443,10 +2450,16 @@ span.fr-img-caption.fr-view {
 :host(.web.lesson-detail) .inputs-container-parent .inputs-container .field-placeholder {
   margin: 0 var(--spacing-24, 1.5rem);
 }
+:host(.web.lesson-detail) .inputs-container-parent .inputs-container .field-placeholder yoo-form-input-container {
+  max-width: 37.5rem;
+}
 
 :host(.web.lesson-detail.readonly) .field-placeholder {
   width: -webkit-fill-available;
 }
+:host(.web.lesson-detail.readonly) .field-placeholder .answer-validity {
+  padding-top: var(--spacing-16, 1rem);
+}
 
 :host(.lesson-detail.readonly),
 :host(.lesson-question-result.readonly) {
@@ -2536,13 +2549,15 @@ span.fr-img-caption.fr-view {
   color: inherit;
 }
 
+:host(.live-preview-form.mobile:not(.inline):not(.inline-row)) {
+  --inputs-container-parent-overflow-y: scroll;
+}
 :host(.live-preview-form.mobile:not(.inline):not(.inline-row)) .inputs-container-parent {
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
   height: 100%;
   padding-bottom: var(--spacing-64, 4rem);
-  overflow-y: scroll;
 }
 :host(.live-preview-form.mobile:not(.inline):not(.inline-row)) .inputs-container {
   box-sizing: border-box;
@@ -2616,6 +2631,9 @@ span.fr-img-caption.fr-view {
   padding: 0;
 }
 
-:host(.form-creator-preview-lesson) {
-  margin-top: var(--safe-area-inset-top);
+:host(.overflow-visible) {
+  --main-container-overflow-x: visible;
+  --main-container-overflow-y: visible;
+  --inputs-container-parent-overflow-x: visible;
+  --inputs-container-parent-overflow-y: visible;
 }

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

@@ -644,7 +644,7 @@ export class YooFormDynamicComponent {
       }, 300);
     }
     // Disabled this because of the warnings from stencil , not sure we still need it
-    if ((this.showTabs || this.showVerticalTabs) && !this.isLivePreview() && this.formType !== 'form-creator-block' && !(this.isMission() && !isWeb(this.host))) {
+    if ((this.showTabs || this.showVerticalTabs) && !this.isLivePreview() && !['form-creator-announcement', 'form-creator-block'].includes(this.formType) && !(this.isMission() && !isWeb(this.host))) {
       this.updateState(true);
     }
     this.host.classList.remove('no-initial-height');
@@ -945,7 +945,7 @@ export class YooFormDynamicComponent {
     else if (getTypeValidation(field, this.currentData) !== undefined) {
       fieldState.validity = getTypeValidation(field, this.currentData);
     }
-    else if ((this.isLesson() || this.isLessonDetail()) && (field.type === 'videoplayer' || field.type === 'document' || field.type === 'podcast')) {
+    else if ((this.isLesson() || this.isLessonDetail()) && (field.type === 'videoplayer' || field.type === 'document' || field.type === 'podcast' || field.type === 'url')) {
       fieldState.validity = false;
     }
     else {
@@ -1023,7 +1023,7 @@ export class YooFormDynamicComponent {
     }
   }
   getworkflowButtonTextColors() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _u, _v, _w, _x, _y, _z, _0;
+    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;
     const rejectKey = ((_c = (_b = (_a = this.currentWorkflowStep) === null || _a === void 0 ? void 0 : _a.actions) === null || _b === void 0 ? void 0 : _b.find((action) => (action === null || action === void 0 ? void 0 : action.type) === 'reject')) === null || _c === void 0 ? void 0 : _c.text)
       ? (_f = (_e = (_d = this.currentWorkflowStep) === null || _d === void 0 ? void 0 : _d.actions) === null || _e === void 0 ? void 0 : _e.find((action) => (action === null || action === void 0 ? void 0 : action.type) === 'reject')) === null || _f === void 0 ? void 0 : _f.text
       : 'UNVALIDATED';
@@ -1031,10 +1031,10 @@ export class YooFormDynamicComponent {
       ? (_m = (_l = (_k = this.currentWorkflowStep) === null || _k === void 0 ? void 0 : _k.actions) === null || _l === void 0 ? void 0 : _l.find((action) => (action === null || action === void 0 ? void 0 : action.type) === 'sendback')) === null || _m === void 0 ? void 0 : _m.text
       : 'SENDBACK';
     const reassignKey = ((_q = (_p = (_o = this.currentWorkflowStep) === null || _o === void 0 ? void 0 : _o.actions) === null || _p === void 0 ? void 0 : _p.find((action) => (action === null || action === void 0 ? void 0 : action.type) === 'reassign')) === null || _q === void 0 ? void 0 : _q.text)
-      ? (_u = (_s = (_r = this.currentWorkflowStep) === null || _r === void 0 ? void 0 : _r.actions) === null || _s === void 0 ? void 0 : _s.find((action) => (action === null || action === void 0 ? void 0 : action.type) === 'reassign')) === null || _u === void 0 ? void 0 : _u.text
+      ? (_t = (_s = (_r = this.currentWorkflowStep) === null || _r === void 0 ? void 0 : _r.actions) === null || _s === void 0 ? void 0 : _s.find((action) => (action === null || action === void 0 ? void 0 : action.type) === 'reassign')) === null || _t === void 0 ? void 0 : _t.text
       : 'REASSIGN';
-    const submitKey = ((_x = (_w = (_v = this.currentWorkflowStep) === null || _v === void 0 ? void 0 : _v.actions) === null || _w === void 0 ? void 0 : _w.find((action) => (action === null || action === void 0 ? void 0 : action.type) === 'submit')) === null || _x === void 0 ? void 0 : _x.text)
-      ? (_0 = (_z = (_y = this.currentWorkflowStep) === null || _y === void 0 ? void 0 : _y.actions) === null || _z === void 0 ? void 0 : _z.find((action) => (action === null || action === void 0 ? void 0 : action.type) === 'submit')) === null || _0 === void 0 ? void 0 : _0.text
+    const submitKey = ((_w = (_v = (_u = this.currentWorkflowStep) === null || _u === void 0 ? void 0 : _u.actions) === null || _v === void 0 ? void 0 : _v.find((action) => (action === null || action === void 0 ? void 0 : action.type) === 'submit')) === null || _w === void 0 ? void 0 : _w.text)
+      ? (_z = (_y = (_x = this.currentWorkflowStep) === null || _x === void 0 ? void 0 : _x.actions) === null || _y === void 0 ? void 0 : _y.find((action) => (action === null || action === void 0 ? void 0 : action.type) === 'submit')) === null || _z === void 0 ? void 0 : _z.text
       : 'SUBMIT';
     return [
       { key: translateMulti(rejectKey), value: getCssColor('danger') },
@@ -1386,9 +1386,7 @@ export class YooFormDynamicComponent {
       if (data.mentions) {
         this.currentData['mentions'] = data.mentions;
       }
-      if (data.linkPreviews) {
-        this.currentData['linkPreviews'] = data.linkPreviews;
-      }
+      this.currentData['linkPreviews'] = (data === null || data === void 0 ? void 0 : data.linkPreviews) || [];
       this.extraDataChanged.emit(this.currentData);
     }
     else if (field.type === FormFieldType.filterautocomplete) {
@@ -2126,13 +2124,19 @@ export class YooFormDynamicComponent {
     if (this.isRenderFormSlidesWithTab()) {
       if (slides.length > 1) {
         this.slidesState = this.slidesState || [];
-        this.tabs = slides.map((s, i) => ({
-          title: s.title,
-          value: s.value || s.title,
-          icon: s.icon,
-          iconColor: this.showBadgesVerticalTabs ? this.slidesState[i].validity ? 'success' : 'danger' : null,
-          description: s.description
-        })).filter((_t, i) => { var _a; return !((_a = this.slidesState[i]) === null || _a === void 0 ? void 0 : _a.locked); });
+        this.tabs = this.slides.map((s, i) => {
+          var _a, _b, _c, _d;
+          return ({
+            tabConfig: {
+              title: (_a = this.slides[i]) === null || _a === void 0 ? void 0 : _a.title,
+              value: ((_b = this.slides[i]) === null || _b === void 0 ? void 0 : _b.value) || this.slides[i].title,
+              icon: (_c = this.slides[i]) === null || _c === void 0 ? void 0 : _c.icon,
+              iconColor: this.showBadgesVerticalTabs ? this.slidesState[i].validity ? 'success' : 'danger' : null,
+              description: (_d = this.slides[i]) === null || _d === void 0 ? void 0 : _d.description
+            },
+            slide: s
+          });
+        }).filter((item, index) => { var _a; return this.isSlideVisible(item.slide) && !((_a = this.slidesState[index]) === null || _a === void 0 ? void 0 : _a.locked); }).map(item => ({ ...item.tabConfig }));
         const selectedSlideIndex = slides.findIndex((s) => { var _a; return (s.value || s.title) === ((_a = this.tabs[this.selectedTabIndex || 0]) === null || _a === void 0 ? void 0 : _a.value); }) || 0;
         const selectedSlide = slides[selectedSlideIndex];
         this.setTabSelectedValue(this.selectedTabIndex || 0);
@@ -2960,7 +2964,7 @@ export class YooFormDynamicComponent {
       }
       buttons = getLastButtons(this.host, {
         text: translate(submitText),
-        color: !this.isLesson() && isDisabled ? 'stable-light' : this.appColor,
+        color: isDisabled ? 'stable-light' : this.appColor,
         size: isWeb(this.host) && !this.isLivePreview() ? 'medium' : 'large',
         cssClass: !isNativeMobile() ? 'swiper-no-swiping' : undefined,
         disabled: this.isLesson() && isDisabled,
@@ -2970,7 +2974,7 @@ export class YooFormDynamicComponent {
     return buttons;
   }
   getLastButtonsWorkflow() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _u, _v, _w;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
     let buttons = [];
     let dialogTextValues;
     if (this.currentWorkflowStep.type !== 'start') {
@@ -3034,8 +3038,8 @@ export class YooFormDynamicComponent {
     }
     const submitFn = (e) => (this.validity ? this.onSave(e) : this.focusInvalidField(true));
     let submitText = 'SUBMIT';
-    if ((_u = (_s = (_r = this.currentWorkflowStep) === null || _r === void 0 ? void 0 : _r.actions) === null || _s === void 0 ? void 0 : _s.find((a) => a.type === 'submit')) === null || _u === void 0 ? void 0 : _u.text) {
-      submitText = (_v = this.currentWorkflowStep.actions.find((a) => a.type === 'submit')) === null || _v === void 0 ? void 0 : _v.text;
+    if ((_t = (_s = (_r = this.currentWorkflowStep) === null || _r === void 0 ? void 0 : _r.actions) === null || _s === void 0 ? void 0 : _s.find((a) => a.type === 'submit')) === null || _t === void 0 ? void 0 : _t.text) {
+      submitText = (_u = this.currentWorkflowStep.actions.find((a) => a.type === 'submit')) === null || _u === void 0 ? void 0 : _u.text;
     }
     buttons.push({
       text: translate(submitText),
@@ -3047,7 +3051,7 @@ export class YooFormDynamicComponent {
     });
     if ((buttons === null || buttons === void 0 ? void 0 : buttons.length) > 2) {
       const subMenuButtons = buttons;
-      const currentSelectedButtonText = (_w = this.selectedButtonText) === null || _w === void 0 ? void 0 : _w.find((selectedText) => selectedText);
+      const currentSelectedButtonText = (_v = this.selectedButtonText) === null || _v === void 0 ? void 0 : _v.find((selectedText) => selectedText);
       const selectedSubMenuButton = subMenuButtons.find((subMenuButton) => subMenuButton.text === currentSelectedButtonText);
       buttons = buttons.filter((button) => button.subMenu);
       dialogTextValues = subMenuButtons.map((button) => button.text);
@@ -3086,7 +3090,7 @@ export class YooFormDynamicComponent {
     this.openPreview.emit('');
   }
   renderInput({ field, data, slideIndex, slideItems, inputIndex, readonly, cssClass, isHistory, previousField, slots }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _u;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
     const fieldState = getFieldState(field, this.fieldsState);
     const required = isRequired(field, this.currentData, this.currentDataFlatten, fieldState.visible, this.suffix, this.session);
     const disabled = isDisabled(field, this.currentData, this.currentDataFlatten, this.suffix, this.session);
@@ -4336,6 +4340,7 @@ export class YooFormDynamicComponent {
           categories: field.categories,
           values: field.values,
           images: field.images,
+          showInstructionView: (_t = field.showInstructionView) !== null && _t !== void 0 ? _t : true,
           answer: field.answer || field.complexAnswer,
           required: field.required,
           isVisible: this.isCurrentSlide(slideIndex),
@@ -4385,7 +4390,7 @@ export class YooFormDynamicComponent {
           required: field.required,
           categories: field.categories,
           values: field.values,
-          answer: field.complexAnswer
+          answer: field.answer || field.complexAnswer
         };
         break;
       case FormFieldType.connect:
@@ -4394,7 +4399,7 @@ export class YooFormDynamicComponent {
           shuffled: field.shuffled,
           livePreview: this.isLessonPreview(),
           isVisible: this.isCurrentSlide(slideIndex),
-          values: field.complexValues,
+          values: field.values || field.complexValues,
           answer: field.answer
         };
         break;
@@ -5154,7 +5159,7 @@ export class YooFormDynamicComponent {
       "mutable": false,
       "complexType": {
         "original": "FormDynamicType",
-        "resolved": "\"form-creator-announcement\" | \"form-creator-block\" | \"form-creator-preview\" | \"form-creator-preview-kanban\" | \"form-creator-preview-lesson\" | \"form-creator-preview-workflow\" | \"kanban\" | \"lesson\" | \"lesson-detail\" | \"lesson-question-result\" | \"mission\" | \"mission-validation\" | \"poll\" | \"service\" | \"todo\" | \"visit\" | \"waitlist\" | \"workflow\"",
+        "resolved": "\"feed\" | \"form-creator-announcement\" | \"form-creator-block\" | \"form-creator-preview\" | \"form-creator-preview-kanban\" | \"form-creator-preview-lesson\" | \"form-creator-preview-workflow\" | \"kanban\" | \"lesson\" | \"lesson-detail\" | \"lesson-question-result\" | \"mission\" | \"mission-validation\" | \"poll\" | \"service\" | \"todo\" | \"visit\" | \"waitlist\" | \"workflow\"",
         "references": {
           "FormDynamicType": {
             "location": "import",

package/dist/collection/components/form/form-entity-value-pairs/form-entity-value-pairs.js

@@ -196,7 +196,7 @@ export class YooFormEntityValuePairsComponent {
       "mutable": false,
       "complexType": {
         "original": "EntityType",
-        "resolved": "\"aisles\" | \"community\" | \"courses\" | \"dashboards\" | \"operations\" | \"pages\" | \"questions\" | \"scoring\" | \"tableau\" | \"tag\" | \"user\" | \"weekdays\" | \"campaignfilters\" | \"channel\" | \"communities\" | \"custommodels\" | \"geofilters\" | \"hierarchy\" | \"incentives\" | \"locationtypes\" | \"plans\" | \"translations\" | \"aclRole\" | \"blog\" | \"emails\" | \"feeds\" | \"files\" | \"groups\" | \"htmltemplates\" | \"lessons\" | \"locations\" | \"memos\" | \"missiondescriptions\" | \"missiondescriptiontemplates\" | \"missions\" | \"productbatch\" | \"products\" | \"tenants\" | \"userranks\" | \"users\" | \"type\" | \"aclPermission\" | \"aclPermissionList\" | \"aislelist\" | \"algorithm\" | \"apps\" | \"arexperience\" | \"armodel\" | \"audiences\" | \"badges\" | \"broadcasts\" | \"calendarEvents\" | \"creationtypes\" | \"catalogs\" | \"certificates\" | \"channels\" | \"charttype\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"days\" | \"entitycomments\" | \"environnement\" | \"feedsComments\" | \"filesFolders\" | \"folders\" | \"formfield\" | \"giphy\" | \"googlemaps\" | \"hashtags\" | \"icons\" | \"journeys\" | \"language\" | \"lessondescriptions\" | \"liveshoppings\" | \"locationsaudience\" | \"locationspublic\" | \"markas\" | \"mediacapturedevices\" | \"memolist\" | \"missiondatas\" | \"missiondescriptioncategories\" | \"missiondescriptionreviewhistories\" | \"missionfield\" | \"notes\" | \"notifications\" | \"photos\" | \"productbatchlist\" | \"productweightpair\" | \"publicAPITokens\" | \"questionsAnswers\" | \"regex\" | \"reporttemplates\" | \"reviewapps\" | \"salesdata\" | \"scorms\" | \"scormcloud\" | \"slots\" | \"tableauShared\" | \"tagGroups\" | \"topusers\" | \"unsplash\" | \"useraudience\" | \"userlearningmanager\" | \"usercourseinfo\" | \"violetproducts\" | \"violetproductofferskus\" | \"violetbasketitems\" | \"violetshippingmethods\" | \"version\" | \"videocallusers\" | \"visits\" | \"waitlistvisit\" | \"waitlistcustomer\" | \"waitliststats\" | \"plansorlessons\" | \"widgets\"",
+        "resolved": "\"aisles\" | \"community\" | \"courses\" | \"dashboards\" | \"operations\" | \"pages\" | \"questions\" | \"scoring\" | \"tableau\" | \"tag\" | \"user\" | \"weekdays\" | \"campaignfilters\" | \"channel\" | \"communities\" | \"custommodels\" | \"geofilters\" | \"hierarchy\" | \"incentives\" | \"locationtypes\" | \"plans\" | \"translations\" | \"aclRole\" | \"blog\" | \"emails\" | \"feeds\" | \"files\" | \"groups\" | \"htmltemplates\" | \"lessons\" | \"locations\" | \"memos\" | \"missiondescriptions\" | \"missiondescriptiontemplates\" | \"missions\" | \"productbatch\" | \"products\" | \"tenants\" | \"userranks\" | \"users\" | \"notes\" | \"type\" | \"aclPermission\" | \"aclPermissionList\" | \"aislelist\" | \"algorithm\" | \"apps\" | \"arexperience\" | \"armodel\" | \"audiences\" | \"badges\" | \"broadcasts\" | \"calendarEvents\" | \"creationtypes\" | \"catalogs\" | \"certificates\" | \"channels\" | \"charttype\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"days\" | \"entitycomments\" | \"environnement\" | \"feedsComments\" | \"filesFolders\" | \"folders\" | \"formfield\" | \"giphy\" | \"googlemaps\" | \"hashtags\" | \"icons\" | \"journeys\" | \"language\" | \"lessondescriptions\" | \"liveshoppings\" | \"locationsaudience\" | \"locationspublic\" | \"markas\" | \"mediacapturedevices\" | \"memolist\" | \"missiondatas\" | \"missiondescriptioncategories\" | \"missiondescriptionreviewhistories\" | \"missionfield\" | \"notifications\" | \"photos\" | \"productbatchlist\" | \"productweightpair\" | \"publicAPITokens\" | \"questionsAnswers\" | \"regex\" | \"reporttemplates\" | \"reviewapps\" | \"salesdata\" | \"scorms\" | \"scormcloud\" | \"slots\" | \"tableauShared\" | \"tagGroups\" | \"topusers\" | \"unsplash\" | \"useraudience\" | \"userlearningmanager\" | \"usercourseinfo\" | \"violetproducts\" | \"violetproductofferskus\" | \"violetbasketitems\" | \"violetshippingmethods\" | \"version\" | \"videocallusers\" | \"visits\" | \"waitlistvisit\" | \"waitlistcustomer\" | \"waitliststats\" | \"plansorlessons\" | \"widgets\"",
         "references": {
           "EntityType": {
             "location": "import",

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

@@ -201,62 +201,50 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-.hidden {
-  display: none !important;
-}
-
-.flex {
-  display: flex !important;
-}
-
-.block {
-  display: block !important;
-}
-
 :host {
   --hotzones-color: unset;
-  --inner-max-width: 100%;
+  display: block;
 }
 :host yoo-banner {
   height: 0;
 }
 :host main {
-  position: relative;
-  max-width: var(--inner-max-width);
-  height: max-content;
+  width: 100%;
   margin: 0 auto;
 }
-:host main .image {
-  margin: 0 auto;
+:host main #image,
+:host main #inner-container,
+:host main #recto, :host main #verso {
+  width: 100%;
+  height: 100%;
+}
+:host main #image {
   background-color: transparent;
   perspective: 1000px;
 }
-:host main .image.flipped .inner-container {
+:host main #image.flipped #inner-container {
   transform: rotateY(180deg);
 }
-:host main .image .inner-container {
-  width: 100%;
-  height: 100%;
-  margin: 0 auto;
+:host main #image #inner-container {
   transform-style: preserve-3d;
   transition: transform 0.8s;
 }
-:host main .image .inner-container .flip-box-front,
-:host main .image .inner-container .flip-box-back {
-  width: 100%;
-  height: fit-content;
+:host main #image #inner-container #recto,
+:host main #image #inner-container #verso {
   background-color: var(--light, #ffffff);
   backface-visibility: hidden;
 }
-:host main .image .inner-container .flip-box-back {
+:host main #image #inner-container #recto {
+  position: relative;
+}
+:host main #image #inner-container #verso {
   z-index: 1;
   transform: rotateY(180deg);
 }
-:host main .image .inner-container yoo-img {
-  position: relative;
+:host main #image #inner-container yoo-img {
   border-radius: var(--border-radius-08, 0.5rem);
 }
-:host main .image .inner-container .hotzone {
+:host main #image #inner-container .hotzone {
   position: absolute;
   display: flex;
   align-items: center;
@@ -269,7 +257,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   cursor: pointer;
   transition: background-color 250ms ease-in-out;
 }
-:host main .image .inner-container .hotzone.revealed {
+:host main #image #inner-container .hotzone.revealed {
   background-color: var(--success-20, rgba(58, 167, 109, 0.2)) !important;
   border-color: var(--success, #3aa76d) !important;
 }
@@ -278,10 +266,15 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   background: transparent !important;
 }
 :host([detailed-view]) main {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  max-width: 30rem;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  overflow: hidden;
+}
+:host([detailed-view]) main #content {
+  max-width: 75%;
   margin: 0 auto;
   overflow: hidden auto;
 }
@@ -297,26 +290,16 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host([detailed-view]) main #content #description p {
   padding-bottom: var(--spacing-64, 4rem);
 }
-:host([detailed-view]) main #description,
-:host([detailed-view]) main yoo-img {
-  padding: 0 var(--spacing-32, 2rem);
-}
-:host([detailed-view]) main #done {
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  transform: translateX(-50%);
+:host([detailed-view]) main footer {
+  padding: var(--spacing-16, 1rem) 0;
 }
-:host([detailed-view]) main #done yoo-button {
-  width: 50%;
-  margin: var(--spacing-16, 1rem) auto;
+:host([detailed-view]) main footer yoo-button {
+  width: fit-content;
+  margin: 0 auto;
 }
 
 :host([type=hotzone]) {
-  --initial-target-top-pos: calc(100% + var(--spacing-16, 1rem));
+  --initial-target-top-pos: calc(100% + var(--spacing-08, 0.5rem));
   --initial-target-left-pos: calc(50% - var(--spacing-24, 1.5rem));
 }
 :host([type=hotzone]) yoo-icon[name=gps] {
@@ -326,10 +309,25 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   cursor: move;
 }
 
+:host([type=hotzone]:not([readonly])) main::after {
+  display: block;
+  height: 3rem;
+  content: "";
+}
+:host([type=hotzone]:not([readonly])) main .hotzone[hidden] {
+  display: none !important;
+}
+:host([type=hotzone]:not([readonly])) main yoo-icon {
+  transition: opacity 0.5s ease-in-out;
+}
+:host([type=hotzone]:not([readonly])) main yoo-icon[hit=false] {
+  opacity: 0.25;
+}
+
 :host([readonly]) yoo-icon[name=gps] {
   cursor: auto;
 }
-:host([readonly]) .image .inner-container div.hotzone {
+:host([readonly]) #image #inner-container div.hotzone {
   display: flex;
   cursor: auto;
 }