@yoobic/yobi 8.4.0-1 → 8.4.0-4

package/dist/design-system/yoo-form-image-collection.entry.js

@@ -1,32 +1,34 @@
-import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-24530c1f.js';
-import './index-0621f7f2.js';
-import './index-d1359600.js';
-import { o as openImageDetailFromRTE } from './common-helpers-980d9808.js';
-import { g as getFromOfflineStorage } from './localForage-c32f0e70.js';
-import { z as showModal, bk as getMedia, p as closeModal, ap as replaceAllLinks, ax as parseMarkDown, Z as translateMulti, A as isWeb, t as translate } from './overlays-54d1b9f8.js';
+import { r as registerInstance, i as createEvent, f as forceUpdate, h, e as Host, g as getElement } from './index-53ad1641.js';
+import './index-20e383f3.js';
+import './index-11ad6fb9.js';
+import { o as openImageDetailFromRTE } from './common-helpers-e3797466.js';
+import { g as getFromOfflineStorage } from './localForage-f05ec61c.js';
+import { z as showModal, bk as getMedia, p as closeModal, ap as replaceAllLinks, ax as parseMarkDown, Z as translateMulti, A as isWeb, t as translate } from './overlays-71ffe7eb.js';
 import './lodash-653c0bcd.js';
 import './_commonjsHelpers-f4d11124.js';
-import './index-eec8505b.js';
+import './index-84768350.js';
 
-const formImageCollectionCss = ":host{display:block;width:100%}:host #gallery{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));margin:0 auto;-webkit-column-gap:var(--spacing-16, 1rem);-moz-column-gap:var(--spacing-16, 1rem);column-gap:var(--spacing-16, 1rem);row-gap:var(--spacing-16, 1rem)}:host #gallery .image{position:relative;cursor:pointer}:host #gallery .image yoo-img{background-position:center;background-size:cover;border-radius:var(--border-radius-08, 0.5rem);-webkit-box-shadow:var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1))}:host #gallery .image yoo-img:before{display:block;width:0;height:0;padding-bottom:75%;content:\"\"}:host #gallery .image yoo-icon{position:absolute;top:var(--spacing-08, 0.5rem);right:var(--spacing-08, 0.5rem);z-index:3;background:var(--light, #ffffff);border-radius:50%}:host #gallery .image #overlay{position:absolute;top:0;z-index:2;width:100%;height:100%;background:var(--stable-60, rgba(173, 173, 173, 0.6));border-radius:var(--border-radius-08, 0.5rem)}:host .main-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:var(--spacing-32, 2rem) var(--spacing-16, 1rem)}:host .main-container .detail-description{padding:var(--spacing-24, 1.5rem) var(--spacing-16, 1rem);color:var(--light, #ffffff);text-align:center}:host .main-container yoo-img:before{display:block;width:0;height:0;padding-bottom:75%;content:\"\"}:host(.web) #gallery{grid-template-columns:repeat(3, minmax(0, 1fr));max-width:82rem}:host(.web) .main-container{width:40%;max-width:37.5rem;margin:var(--spacing-32, 2rem) auto}:host(.web) .main-container .detail-description{padding:var(--spacing-32, 2rem) 0}:host(.web) .main-container .button{margin:auto;padding:var(--spacing-16, 1rem)}:host([detailed-view]){overflow:auto;background:transparent !important}:host(:not(.web)) .main-container{height:100%;overflow:auto}:host(:not(.web)) .button{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;height:100%}:host(:not(.web)) .button yoo-button{width:100%}:host([animated]) .image{--image-index:0;-webkit-transform:translateY(100vh);transform:translateY(100vh);-webkit-animation-name:slide-up;animation-name:slide-up;-webkit-animation-duration:0.75s;animation-duration:0.75s;-webkit-animation-timing-function:var(--ease-out-quad);animation-timing-function:var(--ease-out-quad);-webkit-animation-delay:calc(0.5s + var(--image-index) * 0.1s);animation-delay:calc(0.5s + var(--image-index) * 0.1s);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@-webkit-keyframes slide-up{from{-webkit-transform:translateY(100vh);transform:translateY(100vh)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slide-up{from{-webkit-transform:translateY(100vh);transform:translateY(100vh)}to{-webkit-transform:translateY(0);transform:translateY(0)}}";
+const formImageCollectionCss = ":host{display:block;width:100%}:host #gallery{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));margin:0 auto;-webkit-column-gap:var(--spacing-16, 1rem);-moz-column-gap:var(--spacing-16, 1rem);column-gap:var(--spacing-16, 1rem);row-gap:var(--spacing-16, 1rem)}:host #gallery .image{position:relative;cursor:pointer}:host #gallery .image.revealed yoo-img{opacity:0.35}:host #gallery .image.revealed yoo-icon{-webkit-transform:scale(1);transform:scale(1);opacity:1}:host #gallery .image yoo-img{background-position:center;background-size:cover;border-radius:var(--border-radius-08, 0.5rem);-webkit-box-shadow:var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1));-webkit-transition:opacity 0.75s ease-in-out;transition:opacity 0.75s ease-in-out}:host #gallery .image yoo-img:before{display:block;width:0;height:0;padding-bottom:75%;content:\"\"}:host #gallery .image yoo-icon{position:absolute;top:var(--spacing-08, 0.5rem);right:var(--spacing-08, 0.5rem);z-index:3;background:var(--light, #ffffff);border-radius:50%;-webkit-transform:scale(0);transform:scale(0);opacity:0;-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}:host #gallery .image #overlay{position:absolute;top:0;z-index:2;width:100%;height:100%;background:var(--stable-60, rgba(173, 173, 173, 0.6));border-radius:var(--border-radius-08, 0.5rem)}:host main{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:var(--spacing-32, 2rem) var(--spacing-16, 1rem)}:host main #description{padding:var(--spacing-24, 1.5rem) var(--spacing-16, 1rem);color:var(--light, #ffffff);text-align:center}:host main yoo-img:before{display:block;width:0;height:0;padding-bottom:75%;content:\"\"}:host(.web) #gallery{grid-template-columns:repeat(3, minmax(0, 1fr));max-width:82rem}:host(.web) main{width:40%;max-width:37.5rem;margin:var(--spacing-32, 2rem) auto}:host(.web) main #description{padding:var(--spacing-32, 2rem) 0}:host(.web) main #done{margin:auto;padding:var(--spacing-16, 1rem)}:host([detailed-view]){overflow:auto;background:transparent !important}:host(:not(.web)) main{height:100%;overflow:auto}:host(:not(.web)) #done{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;height:100%}:host(:not(.web)) #done yoo-button{width:100%}:host([animated]) .image{--image-index:0;-webkit-transform:scale(0);transform:scale(0);-webkit-animation-name:scale;animation-name:scale;-webkit-animation-duration:0.75s;animation-duration:0.75s;-webkit-animation-timing-function:var(--ease-out-quad);animation-timing-function:var(--ease-out-quad);-webkit-animation-delay:calc(0.5s + var(--image-index) * 0.1s);animation-delay:calc(0.5s + var(--image-index) * 0.1s);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@-webkit-keyframes scale{from{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes scale{from{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(1);transform:scale(1)}}";
 
 const YooFormImageCollectionComponent = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.validityChanged = createEvent(this, "validityChanged", 7);
     this.inputChanged = createEvent(this, "inputChanged", 7);
-    this.animated = true;
-    this.required = false;
     this.validity = false;
     this.values = [];
-    this.imagesRevealed = 0;
     this.images = [];
   }
   async onValuesChanged() {
     await this.prepareImages();
   }
+  async isValid() {
+    return this.validity;
+  }
   validate() {
-    this.validity = !this.required || this.imagesRevealed === this.values.length;
+    var _a, _b, _c, _d;
+    this.validity = !this.required ||
+      ((_b = (_a = this.images) === null || _a === void 0 ? void 0 : _a.filter(({ revealed }) => revealed)) === null || _b === void 0 ? void 0 : _b.length) === ((_d = (_c = this.images) === null || _c === void 0 ? void 0 : _c.filter(({ description, image }) => description || image)) === null || _d === void 0 ? void 0 : _d.length);
     this.validityChanged.emit(this.validity);
     return this.validity;
   }
@@ -39,26 +41,28 @@ const YooFormImageCollectionComponent = class {
       this.images = await Promise.all(this.values.map(async (v) => ({ ...v, image: await getFromOfflineStorage(v.image) })));
     }
   }
-  async imageClicked(imagePair, index) {
-    await showModal('yoo-form-image-collection', { detailedView: true, selectedPair: imagePair }, 'bg-dark-40', 'scaleEnterAnimation', 'scaleLeaveAnimation', true);
-    if (!this.images[index].revealed) {
-      this.imagesRevealed += 1;
-      this.images[index].revealed = true;
-      this.validate();
-      this.inputChanged.emit();
+  async showZoneDetails(tile) {
+    const { description, image } = tile || {};
+    if (description || image) {
+      await showModal('yoo-form-image-collection', { detailedView: true, selectedTile: tile }, 'bg-dark-40', 'scaleEnterAnimation', 'scaleLeaveAnimation', true);
+      tile.revealed = true;
     }
+    this.validate();
+    this.inputChanged.emit();
+    (!this.validity || !this.required) && forceUpdate(this);
   }
   renderImages() {
     var _a;
-    return (h("section", { id: "gallery" }, (_a = this.images) === null || _a === void 0 ? void 0 : _a.map(({ revealed, image, description }, i) => {
-      return (h("section", { class: "image", ...(this.animated && { style: { '--image-index': i.toString() } }), onClick: () => this.imageClicked({ revealed, image, description }, i) }, h("yoo-img", { src: getMedia(image), type: "background" }), revealed && [h("yoo-icon", { name: "check", color: "app-color", size: "medium" }), h("div", { id: "overlay" })]));
+    return (h("section", { id: "gallery" }, (_a = this.images) === null || _a === void 0 ? void 0 : _a.map((tile, i) => {
+      const { revealed, image } = tile || {};
+      return (h("section", { class: { image: true, revealed }, ...(this.animated && { style: { '--image-index': i.toString() } }), onClick: () => this.showZoneDetails(tile) }, h("yoo-img", { src: getMedia(image), type: "background" }), h("yoo-icon", { name: "check", color: "app-color", size: "medium" })));
     })));
   }
   renderDetailedView() {
-    var _a, _b;
+    const { description, image } = this.selectedTile || {};
     return [
       h("yoo-navbar", { class: "transparent" }, h("yoo-icon", { slot: "start", name: "close", onClick: () => closeModal(null) })),
-      h("div", { class: "main-container" }, h("yoo-img", { src: (_a = this.selectedPair) === null || _a === void 0 ? void 0 : _a.image, contained: true, type: "background" }), h("div", { ref: (el) => (this.detailDescription = el), onClick: (ev) => { var _a; return openImageDetailFromRTE(this.host, this.detailDescription, (_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a['src']); }, class: "detail-description", innerHTML: replaceAllLinks(parseMarkDown(translateMulti((_b = this.selectedPair) === null || _b === void 0 ? void 0 : _b.description)), true) }), h("div", { class: "button" }, h("yoo-button", { onClick: () => closeModal(null), color: "app-color", size: isWeb(this.host) ? 'medium' : 'large' }, translate('YOOBICDONE'))))
+      h("main", null, h("section", { id: "content" }, image && h("yoo-img", { src: image, contained: true, type: "background" }), description && h("div", { id: "description", onClick: ({ target }) => openImageDetailFromRTE(this.host, target, target === null || target === void 0 ? void 0 : target['src']), innerHTML: replaceAllLinks(parseMarkDown(translateMulti(description)), true) })), h("section", { id: "done" }, h("yoo-button", { onClick: () => closeModal(null), color: "app-color", size: isWeb(this.host) ? 'medium' : 'large' }, translate('YOOBICDONE'))))
     ];
   }
   render() {

package/dist/design-system/yoo-form-image-tagging-creator.entry.js

@@ -1,12 +1,12 @@
-import { r as registerInstance, i as createEvent, f as forceUpdate, h, e as Host, g as getElement$1 } from './index-24530c1f.js';
-import './index-0621f7f2.js';
-import { b as isAnnotationValid, d as getElement, e as getAnnotationPositionStyle } from './annotations-helpers-628a8ae3.js';
-import { g as getAppContext } from './common-helpers-980d9808.js';
-import { s as setDotIndexes, h as hideAllDotTooltips, c as createDot, g as getDotInnerElement, a as showDotTooltip, b as getDotToolTipElement, d as hideAllUnFocusedTooltips, f as formatAnnotationForExport, e as saveTooltipContent, r as reorderDotIndexes, i as deleteDot, j as deleteEmptyDots } from './draggable-dots-helpers-6700d1de.js';
-import { a as setValueAndValidateInput } from './form-input-helpers-9d428369.js';
-import { aQ as getUUID, aT as gsapSet, aS as gsapTo, aR as Draggable, bp as isTranslationKey, t as translate } from './overlays-54d1b9f8.js';
+import { r as registerInstance, i as createEvent, f as forceUpdate, h, e as Host, g as getElement$1 } from './index-53ad1641.js';
+import './index-20e383f3.js';
+import { a as isAnnotationValid, b as getElement, d as getAnnotationPositionStyle } from './annotations-helpers-f7b42b40.js';
+import { g as getAppContext } from './common-helpers-e3797466.js';
+import { s as setDotIndexes, h as hideAllDotTooltips, c as createDot, g as getDotInnerElement, a as showDotTooltip, b as getDotToolTipElement, d as hideAllUnFocusedTooltips, f as formatAnnotationForExport, e as saveTooltipContent, r as reorderDotIndexes, i as deleteDot, j as deleteEmptyDots } from './draggable-dots-helpers-2f99fb20.js';
+import { a as setValueAndValidateInput } from './form-input-helpers-87b417ac.js';
+import { aQ as getUUID, aT as gsapSet, aS as gsapTo, aR as Draggable, bp as isTranslationKey, t as translate } from './overlays-71ffe7eb.js';
 import './lodash-653c0bcd.js';
-import './index-eec8505b.js';
+import './index-84768350.js';
 import './_commonjsHelpers-f4d11124.js';
 
 const formImageTaggingCreatorCss = ".bg-accent{background-color:var(--accent, #276ef1) !important}.accent{color:var(--accent, #276ef1);fill:var(--accent, #276ef1)}.bg-app-color{background-color:var(--app-color, #5a30f4) !important}.app-color{color:var(--app-color, #5a30f4);fill:var(--app-color, #5a30f4)}.bg-danger{background-color:var(--danger, #d44333) !important}.danger{color:var(--danger, #d44333);fill:var(--danger, #d44333)}.bg-dark{background-color:var(--dark, #000000) !important}.dark{color:var(--dark, #000000);fill:var(--dark, #000000)}.bg-energized{background-color:var(--energized, #ffc043) !important}.energized{color:var(--energized, #ffc043);fill:var(--energized, #ffc043)}.bg-info{background-color:var(--info, #d84c96) !important}.info{color:var(--info, #d84c96);fill:var(--info, #d84c96)}.bg-light{background-color:var(--light, #ffffff) !important}.light{color:var(--light, #ffffff);fill:var(--light, #ffffff)}.bg-stable{background-color:var(--stable, #adadad) !important}.stable{color:var(--stable, #adadad);fill:var(--stable, #adadad)}.bg-stable-alt{background-color:var(--stable-alt, #d0d0d0) !important}.stable-alt{color:var(--stable-alt, #d0d0d0);fill:var(--stable-alt, #d0d0d0)}.bg-stable-light{background-color:var(--stable-light, #f1f1f1) !important}.stable-light{color:var(--stable-light, #f1f1f1);fill:var(--stable-light, #f1f1f1)}.bg-stable-ultralight{background-color:var(--stable-ultralight, #fafafa) !important}.stable-ultralight{color:var(--stable-ultralight, #fafafa);fill:var(--stable-ultralight, #fafafa)}.bg-success{background-color:var(--success, #3aa76d) !important}.success{color:var(--success, #3aa76d);fill:var(--success, #3aa76d)}.bg-text-color{background-color:var(--text-color, #807f83) !important}.text-color{color:var(--text-color, #807f83);fill:var(--text-color, #807f83)}.bg-warning{background-color:var(--warning, #ed6e33) !important}.warning{color:var(--warning, #ed6e33);fill:var(--warning, #ed6e33)}.bg-wood{background-color:var(--wood, #99644c) !important}.wood{color:var(--wood, #99644c);fill:var(--wood, #99644c)}.hidden{display:none !important}.flex{display:-ms-flexbox !important;display:flex !important}.block{display:block !important}:host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--spacing-16, 1rem)}:host yoo-img{--border-radius:var(--border-radius-08, 0.5rem);cursor:pointer}:host #image{position:relative;height:100%}:host #image .annotation{position:absolute;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:var(--spacing-32, 2rem);height:var(--spacing-32, 2rem)}:host #image .annotation .dot-container{width:var(--spacing-24, 1.5rem);height:var(--spacing-24, 1.5rem);color:var(--light, #ffffff);text-align:center;background-color:var(--app-color, #5a30f4);border:var(--spacing-02, 0.125rem) solid var(--light, #ffffff);border-radius:50%;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out}:host #image .annotation .dot-container:hover{-webkit-transform:scale(1.25);transform:scale(1.25)}:host #instructions{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;color:var(--stable, #adadad)}:host #instructions span{-ms-flex-positive:1;flex-grow:1;padding-left:var(--spacing-04, 0.25rem);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}";

package/dist/design-system/yoo-form-image-tagging.entry.js

@@ -1,25 +1,23 @@
-import { r as registerInstance, i as createEvent, f as forceUpdate, h, e as Host, g as getElement } from './index-24530c1f.js';
-import './index-0621f7f2.js';
+import { r as registerInstance, i as createEvent, f as forceUpdate, h, e as Host, g as getElement } from './index-53ad1641.js';
+import './index-20e383f3.js';
 import { A as isEqual } from './lodash-653c0bcd.js';
-import './index-d1359600.js';
-import { i as initTags, T as Tags } from './index-ac42012a.js';
-import { g as getPercentPositionStyle } from './annotations-helpers-628a8ae3.js';
-import { s as showWarningBanner, h as hasDuplicates, c as checkArray, f as filterDuplicateEntries } from './draggable-tags-helpers-177c5425.js';
-import { a as setValueAndValidateInput } from './form-input-helpers-9d428369.js';
-import { Z as translateMulti, bk as getMedia, t as translate } from './overlays-54d1b9f8.js';
-import { g as getFromOfflineStorage } from './localForage-c32f0e70.js';
-import './index-eec8505b.js';
-import './common-helpers-980d9808.js';
+import './index-11ad6fb9.js';
+import { i as initTags } from './index-292fe310.js';
+import { g as getPercentPositionStyle } from './annotations-helpers-f7b42b40.js';
+import { s as showWarningBanner, h as hasDuplicates, c as checkArray, f as filterDuplicateEntries } from './draggable-tags-helpers-4471d773.js';
+import { a as setValueAndValidateInput } from './form-input-helpers-87b417ac.js';
+import { Z as translateMulti, bk as getMedia, t as translate } from './overlays-71ffe7eb.js';
+import { g as getFromOfflineStorage } from './localForage-f05ec61c.js';
+import './index-84768350.js';
+import './common-helpers-e3797466.js';
 import './_commonjsHelpers-f4d11124.js';
 
-const formImageTaggingCss = ":host{display:block}:host yoo-banner{height:0}:host yoo-tag{position:relative;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}:host #image{background-color:transparent;-webkit-perspective:1000px;perspective:1000px}:host #image.flipped .inner-container{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}:host #image .inner-container{position:relative;width:100%;height:100%;margin:0 auto;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:-webkit-transform 0.75s;transition:-webkit-transform 0.75s;transition:transform 0.75s;transition:transform 0.75s, -webkit-transform 0.75s}:host #image .inner-container .flip-box-front,:host #image .inner-container .flip-box-back{width:100%;height:100%;background-color:var(--light, #ffffff);-webkit-backface-visibility:hidden;backface-visibility:hidden}:host #image .inner-container .flip-box-back{z-index:1;-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}:host #image .inner-container #overlay,:host #image .inner-container yoo-img{border-radius:var(--border-radius-08, 0.5rem)}:host #image .inner-container .dropzone{position:absolute;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:var(--spacing-32, 2rem);height:var(--spacing-32, 2rem);background-color:var(--light, #ffffff);border-radius:50%;-webkit-box-shadow:var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1))}:host(:not([readonly])) main::-webkit-scrollbar{display:none}:host(:not([readonly])) #image #overlay{position:absolute;top:0;width:100%;height:100%;background-color:var(--dark-10, rgba(0, 0, 0, 0.1));opacity:0;-webkit-transition:opacity 350ms ease-in-out;transition:opacity 350ms ease-in-out}:host(:not([readonly])) #image .dropzone[hit]{background-color:var(--app-color, #5a30f4)}:host(:not([readonly])) #instructions{margin:var(--spacing-32, 2rem) 0 0;padding:var(--spacing-08, 0.5rem);color:var(--stable, #adadad)}:host(:not([readonly])) #zone-tags{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-line-pack:baseline;align-content:baseline;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;min-height:5rem;padding:var(--spacing-08, 0.5rem);white-space:nowrap;border:var(--border-width-01, 0.0625rem) solid transparent;border-radius:var(--border-radius-08, 0.5rem)}:host(:not([readonly])) #zone-tags[hit]{background-color:var(--stable-ultralight, #fafafa);border:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host(:not([readonly])) #zone-tags yoo-tag{margin-right:var(--spacing-08, 0.5rem);margin-bottom:var(--spacing-08, 0.5rem)}:host([animated]) .dropzone{-webkit-transition:all 250ms linear;transition:all 250ms linear}:host([animated]) .dropzone[hidden]{-webkit-transform:scale(0);transform:scale(0)}";
+const formImageTaggingCss = ":host{display:block}:host yoo-banner{height:0}:host yoo-tag{position:relative;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}:host #image{background-color:transparent;-webkit-perspective:1000px;perspective:1000px}:host #image.flipped #inner-container{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}:host #image #inner-container{position:relative;width:100%;height:100%;margin:0 auto;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:-webkit-transform 0.75s;transition:-webkit-transform 0.75s;transition:transform 0.75s;transition:transform 0.75s, -webkit-transform 0.75s}:host #image #inner-container #recto,:host #image #inner-container #verso{width:100%;height:100%;background-color:var(--light, #ffffff);-webkit-backface-visibility:hidden;backface-visibility:hidden}:host #image #inner-container #verso{z-index:1;-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}:host #image #inner-container #overlay,:host #image #inner-container yoo-img{border-radius:var(--border-radius-08, 0.5rem)}:host #image #inner-container .dropzone{position:absolute;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:var(--spacing-32, 2rem);height:var(--spacing-32, 2rem);background-color:var(--light, #ffffff);border-radius:50%;-webkit-box-shadow:var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1))}:host(:not([readonly])) main::-webkit-scrollbar{display:none}:host(:not([readonly])) #image #inner-container #overlay{position:absolute;top:0;width:100%;height:100%;background-color:var(--dark-10, rgba(0, 0, 0, 0.1));opacity:0;-webkit-transition:opacity 350ms ease-in-out;transition:opacity 350ms ease-in-out}:host(:not([readonly])) #image #inner-container .dropzone[hit]{background-color:var(--app-color, #5a30f4)}:host(:not([readonly])) #instructions{margin:var(--spacing-16, 1rem) 0 0;padding:var(--spacing-08, 0.5rem);color:var(--stable, #adadad)}:host(:not([readonly])) #zone-tags{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-line-pack:baseline;align-content:baseline;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;min-height:5rem;padding:var(--spacing-08, 0.5rem);white-space:nowrap;border:var(--border-width-01, 0.0625rem) solid transparent;border-radius:var(--border-radius-08, 0.5rem)}:host(:not([readonly])) #zone-tags[hit]{background-color:var(--stable-ultralight, #fafafa);border:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host(:not([readonly])) #zone-tags yoo-tag{margin-right:var(--spacing-08, 0.5rem);margin-bottom:var(--spacing-08, 0.5rem)}:host([animated]) .dropzone{-webkit-transition:all 250ms linear;transition:all 250ms linear}:host([animated]) .dropzone[hidden]{-webkit-transform:scale(0);transform:scale(0)}";
 
 const YooFormImageTaggingComponent = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.validityChanged = createEvent(this, "validityChanged", 7);
-    this.inputBlurred = createEvent(this, "inputBlurred", 7);
-    this.inputFocused = createEvent(this, "inputFocused", 7);
     this.inputChanged = createEvent(this, "inputChanged", 7);
     this.animated = true;
     this.value = [];
@@ -28,8 +26,7 @@ const YooFormImageTaggingComponent = class {
   }
   async onImageChanged(newImage, oldImage) {
     if (!isEqual(newImage, oldImage)) {
-      this.imageSrc = await this.getImageSrc();
-      this.flipImage = !!this.imageSrc;
+      await this.prepareImage();
       !this.imageSrc && forceUpdate(this);
       this.init();
     }
@@ -37,14 +34,15 @@ const YooFormImageTaggingComponent = class {
   onRequireChanged() {
     this.validate();
   }
-  onValuesChanged(newValues, oldValues) {
+  async onValuesChanged(newValues, oldValues) {
     var _a;
     if (!isEqual(newValues === null || newValues === void 0 ? void 0 : newValues.sort(), oldValues === null || oldValues === void 0 ? void 0 : oldValues.sort())) {
       showWarningBanner(this.host, hasDuplicates(newValues));
-      (_a = this.tags) === null || _a === void 0 ? void 0 : _a.updateTags({ newValues, oldValues });
+      this.tags = await ((_a = this.tags) === null || _a === void 0 ? void 0 : _a.updateTags({ newValues, oldValues }));
+      this.value = this.droppedValues;
     }
   }
-  async onIsVisibleChanged() {
+  onIsVisibleChanged() {
     var _a;
     if (this.isVisible) {
       (_a = this.tags) === null || _a === void 0 ? void 0 : _a.animate();
@@ -52,80 +50,81 @@ const YooFormImageTaggingComponent = class {
       this.init();
     }
   }
+  async isValid() {
+    return this.validity;
+  }
+  validate() {
+    var _a, _b;
+    this.validity = !this.required || (((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) === ((_b = this.annotations) === null || _b === void 0 ? void 0 : _b.length));
+    this.validityChanged.emit(this.validity);
+    return this.validity;
+  }
+  get droppedValues() {
+    var _a;
+    return ((_a = this.tags.getDroppedValues(true)) === null || _a === void 0 ? void 0 : _a.map(droppedValues => this.values.find(value => droppedValues === translateMulti(value)))) || [];
+  }
   get tagConfig() {
+    const showImageOverlay = (showOverlay = true) => {
+      this.tags.setTagsZoneOverflow(false);
+      if (this.imageOverlayElement) {
+        this.imageOverlayElement.style.opacity = (showOverlay ? 1 : 0).toString();
+      }
+    };
+    const getColorTag = (tagValue) => {
+      if (this.readonly && checkArray(this.value) && this.answer) {
+        const indexUserValueAnswer = this.value.indexOf(tagValue);
+        const indexValueAnswer = this.answer.indexOf(tagValue);
+        return this.answer.includes(tagValue) && indexUserValueAnswer === indexValueAnswer ? 'success' : 'danger';
+      }
+      return 'app-color';
+    };
     const onReleaseTag = () => {
-      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)))) || [];
+      showImageOverlay(false);
+      this.value = this.droppedValues;
       setValueAndValidateInput(this.value, this);
     };
     return {
       clickToDrop: true,
       dragAndScroll: true,
+      getColorTag,
       onFirstTagAnimationFinished: () => this.flipImage = false,
-      getColorTag: (tagValue) => this.getColorTag(tagValue),
-      pressTagExtraAction: () => this.showImageOverlay(),
-      releaseTagExtraAction: () => onReleaseTag(),
-      resetTagExtraAction: () => onReleaseTag()
+      pressTagExtraAction: () => showImageOverlay(),
+      releaseTagExtraAction: onReleaseTag,
+      resetTagExtraAction: onReleaseTag
     };
   }
   get zonesConfig() {
-    const getZoneConfig = (zoneType) => {
-      return {
-        hasOverflow: zoneType === 'tagZone',
-        colorClass: 'app-color'
-      };
-    };
+    const dropZoneConfig = { colorClass: 'app-color' };
     return {
       hostElement: this.host,
-      tagZoneConfig: getZoneConfig('tagZone'),
-      dropZoneConfig: getZoneConfig('dropZones')
+      tagZoneConfig: { ...dropZoneConfig, hasOverflow: true },
+      dropZoneConfig
     };
   }
-  async isValid() {
-    return this.validity;
-  }
   async componentWillLoad() {
-    this.imageSrc = await this.getImageSrc();
-    this.flipImage = !!this.imageSrc;
+    await this.prepareImage();
   }
   componentDidLoad() {
     this.init();
   }
-  validate() {
-    var _a, _b;
-    this.validity = !this.required || (((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) === ((_b = this.annotations) === null || _b === void 0 ? void 0 : _b.length));
-    this.validityChanged.emit(this.validity);
-    return this.validity;
-  }
-  init() {
-    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;
-    }, 500);
-  }
-  async getImageSrc() {
+  async prepareImage() {
     var _a;
-    return getMedia((await getFromOfflineStorage((_a = this.image) === null || _a === void 0 ? void 0 : _a._downloadURL)), { forceCookieUrlParam: true });
+    this.imageSrc = await getMedia((await getFromOfflineStorage((_a = this.image) === null || _a === void 0 ? void 0 : _a._downloadURL)), { forceCookieUrlParam: true });
+    this.flipImage = !!this.imageSrc;
   }
-  getColorTag(tagValue) {
-    if (this.readonly && checkArray(this.value) && this.answer) {
-      const indexUserValueAnswer = this.value.indexOf(tagValue);
-      const indexValueAnswer = this.answer.indexOf(tagValue);
-      return this.answer.includes(tagValue) && indexUserValueAnswer === indexValueAnswer ? 'success' : 'danger';
-    }
-    return 'app-color';
+  init() {
+    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));
+        this.flipImage = false;
+      }, 500);
   }
-  showImageOverlay(showOverlay = true) {
-    this.tags.setTagsZoneOverflow(false);
-    if (this.imageOverlayElement) {
-      this.imageOverlayElement.style.opacity = (showOverlay ? 1 : 0).toString();
-    }
+  renderImageOverlay() {
+    return !this.readonly && h("div", { id: "overlay", ref: (element) => (this.imageOverlayElement = element) });
   }
-  renderImageContainer() {
-    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 }), !this.readonly && h("div", { id: "overlay", ref: (element) => (this.imageOverlayElement = element) }), this.renderDropzones()), h("section", { class: "flip-box-back" })));
+  renderImage() {
+    return (!!this.imageSrc && (h("section", { id: "image", class: { flipped: this.animated && !!this.flipImage && !this.readonly } }, h("div", { id: "inner-container" }, h("div", { id: "recto" }, h("yoo-img", { instant: true, src: this.imageSrc, ignoreHeight: true, ignoreWidth: true, disableAspectRatioCalc: true, allowCloudinary: false }), this.renderImageOverlay(), this.renderDropzones()), h("div", { id: "verso" })))));
   }
   renderDropzones() {
     var _a, _b;
@@ -143,7 +142,7 @@ const YooFormImageTaggingComponent = class {
     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()]);
+    return h("main", null, this.renderImage(), !this.readonly && [this.renderInstruction(), this.renderTagsZone()]);
   }
   render() {
     return (h(Host, null, this.renderBanner(), this.renderMain()));

package/dist/design-system/yoo-form-incentive-participants.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, i as createEvent, h } from './index-24530c1f.js';
-import { n as IncentivePartType, i as IncentiveType } from './index-eec8505b.js';
+import { r as registerInstance, i as createEvent, h } from './index-53ad1641.js';
+import { n as IncentivePartType, i as IncentiveType } from './index-84768350.js';
 
 const YooFormIncentiveParticipantsComponent = class {
   constructor(hostRef) {

package/dist/design-system/yoo-form-incentive-targets.entry.js

@@ -1,10 +1,10 @@
-import { r as registerInstance, i as createEvent, f as forceUpdate, h } from './index-24530c1f.js';
-import './index-0621f7f2.js';
-import { a as setValueAndValidateInput } from './form-input-helpers-9d428369.js';
-import { aQ as getUUID, t as translate } from './overlays-54d1b9f8.js';
+import { r as registerInstance, i as createEvent, f as forceUpdate, h } from './index-53ad1641.js';
+import './index-20e383f3.js';
+import { a as setValueAndValidateInput } from './form-input-helpers-87b417ac.js';
+import { aQ as getUUID, t as translate } from './overlays-71ffe7eb.js';
 import './lodash-653c0bcd.js';
-import './index-eec8505b.js';
-import './common-helpers-980d9808.js';
+import './index-84768350.js';
+import './common-helpers-e3797466.js';
 import './_commonjsHelpers-f4d11124.js';
 
 const formIncentiveTargetsCss = ":host .inner-container{margin-bottom:var(--spacing-24, 1.5rem)}:host .header-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:var(--spacing-16, 1rem);padding-bottom:var(--spacing-08, 0.5rem);font-weight:bold;font-size:var(--font-size-20, 1.25rem);border-bottom:solid 1px var(--stable-light, #f1f1f1)}:host .title-container{display:-ms-flexbox;display:flex;margin-bottom:var(--spacing-08, 0.5rem)}:host .title-container yoo-form-input-container{-ms-flex:0.5;flex:0.5;padding-right:var(--spacing-32, 2rem)}:host .add-bloc-container{display:-ms-flexbox;display:flex;padding-right:var(--spacing-32, 2rem)}:host .add-bloc-container yoo-button{-ms-flex:0.5;flex:0.5}";

package/dist/design-system/yoo-form-input-comments.entry.js

@@ -1,8 +1,8 @@
-import { r as registerInstance, i as createEvent, h, e as Host } from './index-24530c1f.js';
-import './index-0621f7f2.js';
-import { a7 as getUserDisplayName } from './overlays-54d1b9f8.js';
+import { r as registerInstance, i as createEvent, h, e as Host } from './index-53ad1641.js';
+import './index-20e383f3.js';
+import { a7 as getUserDisplayName } from './overlays-71ffe7eb.js';
 import './lodash-653c0bcd.js';
-import './index-eec8505b.js';
+import './index-84768350.js';
 import './_commonjsHelpers-f4d11124.js';
 
 const formInputCommentsCss = ":host{display:block}:host .outer-container{display:-ms-flexbox;display:flex}:host .outer-container yoo-icon[name=comment]{margin-right:var(--spacing-08, 0.5rem)}:host .outer-container .comments{width:100%}:host .outer-container .comments.readonly{padding-left:var(--spacing-08, 0.5rem);border-left:var(--border-width-02, 0.125rem) solid var(--stable, #adadad)}:host .outer-container .comments .user{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;grid-gap:var(--spacing-04, 0.25rem);-ms-flex-align:start;align-items:flex-start;width:100%;font-size:var(--font-size-12, 0.75rem)}:host .outer-container .comments .user .label{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .outer-container .comments q{font-size:var(--font-size-14, 0.875rem);font-style:italic}";