@yoobic/yobi 8.3.9 → 8.4.0-2

package/dist/collection/components/form/form-image-tagging/form-image-tagging.js

@@ -3,8 +3,8 @@ import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, State, W
 import { isEqual } from 'lodash-es';
 import { getFromOfflineStorage } from '../../../utils/cache';
 import { initTags } from '../../../utils/draggables';
+import { Tags } from '../../../utils/draggables/tags';
 import { getPercentPositionStyle } from '../../../utils/helpers/annotations-helpers';
-import { getAppContext } from '../../../utils/helpers/common-helpers';
 import { checkArray, filterDuplicateEntries, hasDuplicates, showWarningBanner } from '../../../utils/helpers/draggable-tags-helpers';
 import { setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
 export class YooFormImageTaggingComponent {
@@ -45,10 +45,11 @@ export class YooFormImageTaggingComponent {
       var _a;
       this.showImageOverlay(false);
       this.value = ((_a = this.tags.getDroppedValues(true)) === null || _a === void 0 ? void 0 : _a.map(ua => this.values.find(v => ua === translateMulti(v)))) || [];
-      !this.livePreview && setValueAndValidateInput(this.value, this);
+      setValueAndValidateInput(this.value, this);
     };
     return {
       clickToDrop: true,
+      dragAndScroll: true,
       onFirstTagAnimationFinished: () => this.flipImage = false,
       getColorTag: (tagValue) => this.getColorTag(tagValue),
       pressTagExtraAction: () => this.showImageOverlay(),
@@ -89,8 +90,8 @@ export class YooFormImageTaggingComponent {
     this.flipImage && setTimeout(() => {
       var _a, _b;
       !((_b = (_a = this.tags) === null || _a === void 0 ? void 0 : _a.tags) === null || _b === void 0 ? void 0 : _b.length) && (this.tags = initTags(this.tagConfig, this.zonesConfig));
+      Tags.prepareAutoScroll(this.host);
       this.flipImage = false;
-      showWarningBanner(this.host, hasDuplicates(this.values));
     }, 500);
   }
   async getImageSrc() {
@@ -112,38 +113,39 @@ export class YooFormImageTaggingComponent {
     }
   }
   renderImageContainer() {
-    return !!this.image && h("section", { class: { image: true, flipped: this.animated && !!this.flipImage && !this.readonly } },
+    return !!this.image && h("section", { id: "image", class: { flipped: this.animated && !!this.flipImage && !this.readonly } },
       h("div", { class: "inner-container" },
         h("section", { class: "flip-box-front" },
           h("yoo-img", { allowCloudinary: false, contained: true, src: this.imageSrc }),
-          h("div", { class: "image-overlay", ref: (element) => (this.imageOverlayElement = element) }),
+          !this.readonly && h("div", { id: "overlay", ref: (element) => (this.imageOverlayElement = element) }),
           this.renderDropzones()),
         h("section", { class: "flip-box-back" })));
   }
   renderDropzones() {
     var _a, _b;
     return (_b = (_a = filterDuplicateEntries(this.annotations, 'text')) === null || _a === void 0 ? void 0 : _a.map(a => ({ ...a, type: 'dot' }))) === null || _b === void 0 ? void 0 : _b.map((a, i) => {
-      return !!a && h("div", { class: "dropzone-container", style: getPercentPositionStyle(a), hidden: this.animated && !this.readonly && this.flipImage },
-        h("div", { class: "dropzone", id: `zone-${i}` }));
+      return !!a && h("div", { class: "dropzone", id: `zone-${i}`, style: getPercentPositionStyle(a), hidden: this.animated && !this.readonly && this.flipImage });
     });
   }
   renderInstruction() {
-    return h("p", { class: "instructions" }, translate(this.placeholder));
+    return h("section", { id: "instructions" }, translate(this.placeholder));
   }
   renderTagsZone() {
-    return h("section", { class: "tags" },
-      h("div", { class: "dropzone", id: "zone-tags" }));
+    return h("section", { class: "dropzone", id: "zone-tags" });
   }
   renderBanner() {
     return this.livePreview && !this.readonly && h("yoo-banner", null,
       h("p", { slot: "content" }));
   }
+  renderMain() {
+    return h("main", null,
+      this.renderImageContainer(),
+      !this.readonly && [this.renderInstruction(), this.renderTagsZone()]);
+  }
   render() {
-    return (h(Host, { class: { ...getAppContext(this.host), 'live-preview': this.livePreview } },
+    return (h(Host, null,
       this.renderBanner(),
-      this.renderImageContainer(),
-      !this.readonly && this.renderInstruction(),
-      !this.readonly && this.renderTagsZone()));
+      this.renderMain()));
   }
   static get is() { return "yoo-form-image-tagging"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/form/form-input-container/form-input-container.css

@@ -566,13 +566,6 @@ span.fr-img-caption.fr-view {
       margin: 5px 0 5px 5px;
       max-width: calc(100% - 5px); }
 
-:host(.swipecards) .top-container {
-  height: 100%;
-}
-:host(.swipecards) .top-container .content-container {
-  height: 100% !important;
-}
-
 :host(.mission) {
   background: var(--stable-10, rgba(173, 173, 173, 0.1));
 }
@@ -778,14 +771,6 @@ span.fr-img-caption.fr-view {
 :host .top-container .media-description .extra-options-container {
   display: flex;
 }
-:host .description .media-description .extra-options-container yoo-icon.more,
-:host .top-container .media-description .extra-options-container yoo-icon.more {
-  margin-left: auto;
-}
-:host .description .media-description .more,
-:host .top-container .media-description .more {
-  padding-left: var(--spacing-16, 1rem);
-}
 :host .description .field-title-name,
 :host .top-container .field-title-name {
   color: var(--field-title-color);
@@ -931,6 +916,59 @@ span.fr-img-caption.fr-view {
   margin-right: var(--spacing-16, 1rem);
 }
 
+:host([fullscreen]) .top-container {
+  display: inherit !important;
+  width: 100% !important;
+  height: 100% !important;
+}
+:host([fullscreen]) .top-container .content-container {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+:host([readonly]) {
+  border: none;
+}
+:host([readonly]) .top-container .field-title-name {
+  color: var(--field-title-color);
+}
+:host([readonly]) .top-container.column {
+  flex-direction: column;
+}
+:host([readonly]) .top-container.column .description {
+  align-self: flex-start;
+  margin-bottom: var(--spacing-16, 1rem);
+  margin-left: 0;
+  color: var(--text-color, #807f83);
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+:host(.mission) {
+  background: var(--stable-10, rgba(173, 173, 173, 0.1));
+}
+
+:host(.mission.invalid),
+:host(.mission.invalid[readonly]) {
+  background: var(--danger-10, rgba(212, 67, 51, 0.1));
+}
+
+:host(.mission[readonly]) {
+  margin-top: var(--spacing-08, 0.5rem);
+  margin-bottom: var(--spacing-08, 0.5rem);
+  padding: var(--spacing-08, 0.5rem);
+  border-radius: var(--spacing-08, 0.5rem);
+}
+:host(.mission[readonly]) .top-container .label .field-title-name,
+:host(.mission[readonly]) .top-container .label .field-description,
+:host(.mission[readonly]) .top-container .description .field-title-name,
+:host(.mission[readonly]) .top-container .description .field-description {
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
 :host(.line) {
   display: flex;
   flex-direction: column;
@@ -977,54 +1015,38 @@ span.fr-img-caption.fr-view {
   border-bottom: none;
 }
 
-:host(.readonly) {
-  border: none;
-}
-:host(.readonly) .top-container .field-title-name {
-  color: var(--field-title-color);
-}
-:host(.readonly) .top-container.column {
-  flex-direction: column;
-}
-:host(.readonly) .top-container.column .description {
-  align-self: flex-start;
-  margin-bottom: var(--spacing-16, 1rem);
-  margin-left: 0;
-  color: var(--text-color, #807f83);
-}
-
-:host(.readonly:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-input),
-:host(.readonly:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-image-tagging),
-:host(.readonly:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-ranking),
-:host(.readonly:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-autocomplete) {
+:host([readonly]:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-input),
+:host([readonly]:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-image-tagging),
+:host([readonly]:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-ranking),
+:host([readonly]:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-autocomplete) {
   display: block;
   margin-top: var(--spacing-08, 0.5rem);
 }
-:host(.readonly:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-input).inline,
-:host(.readonly:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-image-tagging).inline,
-:host(.readonly:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-ranking).inline,
-:host(.readonly:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-autocomplete).inline {
+:host([readonly]:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-input).inline,
+:host([readonly]:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-image-tagging).inline,
+:host([readonly]:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-ranking).inline,
+:host([readonly]:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-autocomplete).inline {
   margin-top: 0;
 }
-:host(.readonly:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-categorize-words),
-:host(.readonly:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-connect),
-:host(.readonly:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-swipe-cards) {
+:host([readonly]:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-categorize-words),
+:host([readonly]:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-connect),
+:host([readonly]:not(.forcedhistory):not(.custom-width)) ::slotted(yoo-form-swipe-cards) {
   display: block;
   margin-top: var(--spacing-16, 1rem);
 }
 
-:host(.readonly.custom-width.inline-row:not(.label-top-aligned)) .top-container {
+:host([readonly].custom-width.inline-row:not(.label-top-aligned)) .top-container {
   justify-content: center;
 }
 
-:host(.readonly.inline-row:not(.label-top-aligned)) ::slotted(yoo-form-autocomplete) {
+:host([readonly].inline-row:not(.label-top-aligned)) ::slotted(yoo-form-autocomplete) {
   margin-top: 0;
 }
 
-:host(:not(.lesson).readonly) {
+:host(:not([form-type$=lesson])[readonly]) {
   --field-title-font-weight: var(--font-weight-700, 700);
 }
-:host(:not(.lesson).readonly) .top-container .label.readonly {
+:host(:not([form-type$=lesson])[readonly]) .top-container .label.readonly {
   color: var(--dark, #000000);
   font-weight: var(--font-weight-700, 700);
 }
@@ -1064,10 +1086,10 @@ span.fr-img-caption.fr-view {
   color: var(--field-title-color);
 }
 
-:host(:not(.lesson)) .description span p {
+:host(:not([form-type$=lesson])) .description span p {
   margin-bottom: 0;
 }
-:host(:not(.lesson)) p {
+:host(:not([form-type$=lesson])) p {
   -webkit-margin-before: 0;
   -webkit-margin-after: 0;
   -webkit-margin-start: 0;
@@ -1075,67 +1097,126 @@ span.fr-img-caption.fr-view {
   -webkit-padding-start: 0;
 }
 
-:host(.lesson) {
+:host([form-type$=lesson]) {
   --content-padding-bottom: var(--spacing-16, 1rem);
   --font-size-title-name: var(--font-size-28, 1.75rem);
   --font-weight-title-name: var(--font-weight-700, 700);
   --text-tranform-title-name: none;
 }
-:host(.lesson) .top-container .label {
-  margin-bottom: var(--spacing-08, 0.5rem);
+:host([form-type$=lesson]) .top-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-08, 0.5rem);
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  padding: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
 }
-:host(.lesson) .top-container .content-container {
-  height: fit-content;
+:host([form-type$=lesson]) .top-container::-webkit-scrollbar {
+  display: none;
 }
-:host(.lesson) .top-container .description {
-  margin-bottom: var(--spacing-08, 0.5rem);
-  font-size: var(--font-size-description);
+:host([form-type$=lesson]) .top-container .description,
+:host([form-type$=lesson]) .top-container .instructions,
+:host([form-type$=lesson]) .top-container .label {
+  background-color: var(--light, #ffffff);
 }
-:host(.lesson) .top-container .media-description {
+:host([form-type$=lesson]) .top-container .media-description {
   font-size: var(--font-size-16, 1rem);
 }
-:host(.lesson) .title.within-chat,
-:host(.lesson) .field-title-name {
-  color: var(--field-title-color);
-  font-weight: var(--font-weight-title-name);
-  font-size: var(--font-size-title-name);
-  text-transform: var(--text-tranform-title-name);
+:host([form-type$=lesson]) .top-container .content-container {
+  box-sizing: border-box;
+  height: fit-content;
+  padding: initial;
 }
-
-:host(.textsequence) .top-container {
+:host([form-type$=lesson]) .top-container .content-container ::slotted(*) {
+  box-sizing: border-box;
   height: 100%;
+  margin: 0 auto;
+  padding: 0;
+  padding-bottom: var(--spacing-16, 1rem);
 }
-:host(.textsequence) .top-container .content-container {
-  height: 100%;
+:host([form-type$=lesson]) .top-container .content-container ::slotted(yoo-range) {
+  padding-bottom: var(--spacing-32, 2rem);
 }
-:host(.textsequence) .top-container .content-container ::slotted(yoo-text-sequence) {
-  max-width: 40rem;
+:host([form-type$=lesson]) .top-container .content-container ::slotted(yoo-text-sequence) {
   height: 100%;
   margin: 0 auto;
 }
-
-:host(.mobile) .content-container .removable {
-  display: block;
+:host([form-type$=lesson]) .top-container .content-container ::slotted(yoo-form-ranking),
+:host([form-type$=lesson]) .top-container .content-container ::slotted(yoo-form-carousel),
+:host([form-type$=lesson]) .top-container .content-container ::slotted(yoo-form-swipe-cards) {
+  overflow: hidden auto;
+}
+:host([form-type$=lesson]) .top-container .content-container ::slotted(yoo-scratch-card) {
+  max-width: 25rem !important;
+  height: inherit !important;
+}
+:host([form-type$=lesson]) .top-container .content-container ::slotted(yoo-form-carousel),
+:host([form-type$=lesson]) .top-container .content-container ::slotted(yoo-form-videoplayer),
+:host([form-type$=lesson]) .top-container .content-container ::slotted(yoo-form-image-tagging),
+:host([form-type$=lesson]) .top-container .content-container ::slotted(yoo-form-hotzones),
+:host([form-type$=lesson]) .top-container .content-container ::slotted(yoo-text-sequence),
+:host([form-type$=lesson]) .top-container .content-container ::slotted(yoo-form-document) {
+  max-width: 35rem !important;
+}
+:host([form-type$=lesson]) .top-container .content-container ::slotted(*:not(yoo-markdown):not(yoo-form-connect):not(yoo-form-swipe-cards)) {
+  max-width: 50rem;
+}
+:host([form-type$=lesson]) .top-container .description {
+  font-size: var(--font-size-description);
+}
+:host([form-type$=lesson]) .title.within-chat,
+:host([form-type$=lesson]) .field-title-name {
+  color: var(--field-title-color);
+  font-weight: var(--font-weight-title-name);
+  font-size: var(--font-size-title-name);
+  text-transform: var(--text-tranform-title-name);
 }
 
-:host(.web.lesson:not(.lesson-live-preview)) {
+:host(.web[form-type$=lesson]:not([live-preview])) {
   display: flex;
-  padding: 0 !important;
+  margin: 0;
+  transition: all 0.5s ease-in-out 0s;
 }
-:host(.web.lesson:not(.lesson-live-preview)) .top-container {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-08, 0.5rem);
-  box-sizing: border-box;
-  width: calc(100% - 2rem);
-  margin: 0 auto;
-  padding: var(--spacing-32, 2rem) !important;
-  padding-top: var(--spacing-16, 1rem) !important;
-  overflow: auto;
+:host(.web[form-type$=lesson]:not([live-preview])) .top-container {
+  padding: 0;
+  overflow-y: auto;
+}
+:host(.web[form-type$=lesson]:not([live-preview])) .top-container .description,
+:host(.web[form-type$=lesson]:not([live-preview])) .top-container .instructions,
+:host(.web[form-type$=lesson]:not([live-preview])) .top-container .label {
+  text-align: center;
+  background-color: unset;
+}
+:host(.web[form-type$=lesson]:not([live-preview])) .top-container .content-container {
+  height: 100%;
+  padding: var(--spacing-16, 1rem);
   background-color: var(--light, #ffffff);
   border-radius: var(--border-radius-08, 0.5rem);
   box-shadow: var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));
-  transition: all 0.5s ease-in-out 0s;
+}
+:host(.web[form-type$=lesson]:not([live-preview])) .top-container .content-container ::slotted(*) {
+  padding-bottom: 0;
+}
+:host(.web[form-type$=lesson]:not([live-preview])) .top-container .content-container ::slotted(yoo-form-input) {
+  display: block;
+  margin: 0 auto;
+}
+:host(.web[form-type$=lesson]:not([live-preview])) .top-container .content-container ::slotted(yoo-form-hotzones) {
+  height: max-content !important;
+  --inner-max-width: 75%;
+}
+:host(.web[form-type$=lesson]:not([live-preview])) .top-container .content-container ::slotted(yoo-form-hotzones),
+:host(.web[form-type$=lesson]:not([live-preview])) .top-container .content-container ::slotted(yoo-video-player),
+:host(.web[form-type$=lesson]:not([live-preview])) .top-container .content-container ::slotted(yoo-markdown) {
+  overflow: hidden auto;
+}
+:host(.web[form-type$=lesson]:not([live-preview])) .top-container .content-container ::slotted(yoo-form-swipe-cards) {
+  width: calc(100% + var(--spacing-32, 2rem));
+  height: calc(100% + var(--spacing-32, 2rem));
+  margin-top: calc(var(--spacing-16, 1rem) * -1);
+  margin-left: calc(var(--spacing-16, 1rem) * -1);
 }
 
 @media print {
@@ -1204,14 +1285,14 @@ span.fr-img-caption.fr-view {
   color: var(--stable, #adadad);
 }
 
-:host(.readonly.web:not(.preview)) .top-container .label > span.field-title-name {
+:host([readonly].web:not([live-preview])) .top-container .label > span.field-title-name {
   white-space: normal;
 }
 
-:host(.web:not(.preview)) {
+:host(.web:not([live-preview]):not([form-type$=lesson])) {
   --label-padding-top: var(--spacing-08, 0.5rem);
 }
-:host(.web:not(.preview)) .top-container .label {
+:host(.web:not([live-preview]):not([form-type$=lesson])) .top-container .label {
   padding-top: var(--label-padding-top);
 }
 
@@ -1232,29 +1313,32 @@ span.fr-img-caption.fr-view {
   border: 0;
 }
 
-:host(.grid), :host(.audience) {
+:host([field-type=grid]),
+:host(.audience) {
   position: relative;
   display: flex;
   flex: 1;
 }
-:host(.grid) .top-container, :host(.audience) .top-container {
+:host([field-type=grid]) .top-container,
+:host(.audience) .top-container {
   display: flex;
   flex: 1;
   flex-direction: column;
   overflow: hidden;
 }
-:host(.grid) .top-container .content-container, :host(.audience) .top-container .content-container {
+:host([field-type=grid]) .top-container .content-container,
+:host(.audience) .top-container .content-container {
   flex: 1;
   margin: 0;
   margin-right: var(--spacing-04, 0.25rem);
   margin-left: var(--spacing-04, 0.25rem);
 }
 
-:host(.openinghours) .content-container.readonly {
+:host([field-type=openinghours]) .content-container.readonly {
   overflow: visible;
 }
 
-:host(.lesson-detail.readonly) .top-container .label.readonly {
+:host([form-type$=lesson-detail][readonly]) .top-container .label.readonly {
   padding-top: unset;
   font-size: var(--font-size-16, 1rem);
   text-transform: unset;
@@ -1286,37 +1370,40 @@ span.fr-img-caption.fr-view {
   text-align: right;
 }
 
-:host(.fast-scoring) .top-container {
-  padding-top: var(--spacing-16, 1rem);
-}
-
-:host([hidden]) {
-  display: none;
-}
-
-:host(.hotzonecreator) .label,
-:host(.imagemapcreator) .label {
-  display: none;
-}
-
-:host(.confidence) .top-container {
+:host([field-type=confidence]) .top-container {
   height: 100%;
 }
-:host(.confidence) .top-container .label {
+:host([field-type=confidence]) .top-container .label {
   display: none;
 }
-:host(.confidence) .top-container .content-container {
+:host([field-type=confidence]) .top-container .content-container {
   height: 100%;
   background-color: var(--dark-60, rgba(0, 0, 0, 0.6)) !important;
   border-radius: var(--border-radius-08, 0.5rem);
   box-shadow: var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));
 }
 
-:host(.web.lesson:not(.lesson-live-preview).confidence) .top-container {
+:host(.web[form-type$=lesson][field-type=confidence]:not([live-preview])) .top-container {
   padding: 0 !important;
 }
 
-:host(.mission-validation) .top-container .label {
+:host(.web[form-type$=lesson][field-type=image]) .content-container {
+  overflow: visible !important;
+}
+:host(.web[form-type$=lesson][field-type=image]) .content-container ::slotted(yoo-form-carousel:not([hidden])) {
+  --card-feed-media-height: 100%;
+}
+
+:host([field-type=hotzonecreator]) .label,
+:host([field-type=imagemapcreator]) .label {
+  display: none;
+}
+
+:host([field-type=swipecards]) .content-container {
+  overflow: hidden !important;
+}
+
+:host([form-type=mission-validation]) .top-container .label {
   font-size: var(--font-size-12, 0.75rem);
   text-transform: uppercase;
 }