@yoobic/yobi 8.5.0-60 → 8.5.0-61

package/dist/cjs/yoo-form-emailreport.cjs.entry.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
-require('./index-9aadeb94.js');
+require('./index-6f92bccb.js');
 const lodash = require('./lodash-a9050d79.js');
-const formInputHelpers = require('./form-input-helpers-2d988e31.js');
-const overlays = require('./overlays-e5d2ff76.js');
+const formInputHelpers = require('./form-input-helpers-4ad38e19.js');
+const index$1 = require('./index-0cfb67d1.js');
 require('./index-a1bbe627.js');
-require('./common-helpers-9f63a319.js');
+require('./common-helpers-44428bf7.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const formEmailreportCss = "svg:not(:root){overflow:hidden}:host .subtitle{color:var(--text-color, #807f83)}:host .readonly{padding:0.5rem 0.5rem 0 0}:host(.history) .readonly{padding:0 !important}";
@@ -32,22 +32,22 @@ const YooFormEmailreportComponent = class {
     if (this.formAutocomplete) {
       if (formSearch && formSearch.search && formSearch.search.currentPage === 0) {
         let emails = [];
-        const session = overlays.getSession();
+        const session = index$1.getSession();
         const location = session.selectedLocation;
         if (this.fieldValues && this.fieldValues.length > 0) {
           emails = emails.concat(this.fieldValues.map((v) => ({ _id: v, title: v, isEmail: true })));
         }
-        if (overlays.getSession().selectedLocation && lodash.isArray(location.notificationemail) && location.notificationemail.length > 0) {
+        if (index$1.getSession().selectedLocation && lodash.isArray(location.notificationemail) && location.notificationemail.length > 0) {
           emails = emails.concat(location.notificationemail.map((v) => ({ _id: v, title: v, isEmail: true })));
         }
         if (location && location.contactemail) {
           emails = emails.concat([location.contactemail].map((v) => ({ _id: v, title: v, isEmail: true })));
         }
-        if (overlays.getSession().user) {
-          values.unshift(overlays.getSession().user);
+        if (index$1.getSession().user) {
+          values.unshift(index$1.getSession().user);
         }
         if (values && values.length > 0) {
-          const emailValues = values.map((u) => ({ _id: u.email || u.username || u._id, title: overlays.getUserDisplayName(u), isEmail: true }));
+          const emailValues = values.map((u) => ({ _id: u.email || u.username || u._id, title: index$1.getUserDisplayName(u), isEmail: true }));
           const concatEmails = [...emails, ...emailValues];
           emails = concatEmails.filter((email) => { var _a, _b; return !formSearch.search.search || ((_a = email._id) === null || _a === void 0 ? void 0 : _a.includes(formSearch.search.search)) || ((_b = email.title) === null || _b === void 0 ? void 0 : _b.includes(formSearch.search.search)); });
         }
@@ -58,7 +58,7 @@ const YooFormEmailreportComponent = class {
         this.formAutocomplete.updateValues(emails);
       }
       else {
-        this.formAutocomplete.updateValues(values.map((u) => u.isEmail ? u : ({ _id: u.email || u.username || u._id, title: overlays.getUserDisplayName(u), isEmail: true })));
+        this.formAutocomplete.updateValues(values.map((u) => u.isEmail ? u : ({ _id: u.email || u.username || u._id, title: index$1.getUserDisplayName(u), isEmail: true })));
       }
     }
   }
@@ -92,7 +92,7 @@ const YooFormEmailreportComponent = class {
     ev.stopPropagation();
   }
   renderInput() {
-    return (index.h("yoo-form-autocomplete", { ref: (el) => (this.formAutocomplete = el), size: overlays.isWeb(this.host) ? 'medium' : 'large', multiple: true, idOnly: true, idOnlyInitialSelection: this.extraData, isLocal: this.isLocal, value: this.value, values: this.isLocal ? this.fieldValues : null, iconPrefix: "email", entityType: "emails", displayType: "card-list", placeholder: this.isLocal ? 'ADDNEWEMAILS' : null, onFetchData: (ev) => this.onFetchData(ev), onInputChanged: (ev) => this.onInputChanged(ev), onInputBlurred: (ev) => this.onInputBlurred(ev), onInputFocused: (ev) => this.onInputFocused(ev), onValidityChanged: (ev) => this.onAutoCompleteValidityChanged(ev), tags: this.tags, clearable: true, allowCustomTag: true, tabindex: this.inputTabIndex }));
+    return (index.h("yoo-form-autocomplete", { ref: (el) => (this.formAutocomplete = el), size: index$1.isWeb(this.host) ? 'medium' : 'large', multiple: true, idOnly: true, idOnlyInitialSelection: this.extraData, isLocal: this.isLocal, value: this.value, values: this.isLocal ? this.fieldValues : null, iconPrefix: "email", entityType: "emails", displayType: "card-list", placeholder: this.isLocal ? 'ADDNEWEMAILS' : null, onFetchData: (ev) => this.onFetchData(ev), onInputChanged: (ev) => this.onInputChanged(ev), onInputBlurred: (ev) => this.onInputBlurred(ev), onInputFocused: (ev) => this.onInputFocused(ev), onValidityChanged: (ev) => this.onAutoCompleteValidityChanged(ev), tags: this.tags, clearable: true, allowCustomTag: true, tabindex: this.inputTabIndex }));
   }
   renderReadonly() {
     const emails = lodash.compact([].concat(this.value));

package/dist/cjs/yoo-form-entity-value-pairs.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
-require('./index-9aadeb94.js');
+require('./index-6f92bccb.js');
 const lodash = require('./lodash-a9050d79.js');
-const overlays = require('./overlays-e5d2ff76.js');
+const index$1 = require('./index-0cfb67d1.js');
 require('./index-a1bbe627.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
@@ -127,7 +127,7 @@ const YooFormEntityValuePairsComponent = class {
       ev.detail.query.fields = this.queryFields;
       if (!lodash.isEqual(this.selectionQuery, ev.detail.query)) {
         this.selectionQuery = ev.detail.query;
-        overlays.getAsyncExtraData({ type: 'select-all-query', params: { collectionName: this.collectionName, query: this.selectionQuery } }).then((items) => {
+        index$1.getAsyncExtraData({ type: 'select-all-query', params: { collectionName: this.collectionName, query: this.selectionQuery } }).then((items) => {
           this.pairs =
             (items === null || items === void 0 ? void 0 : items.map((item) => {
               var _a;
@@ -150,18 +150,18 @@ const YooFormEntityValuePairsComponent = class {
    * @param {IFormEntityValuePair} pair
    * @param {number} index The index of the entity into the list of the pairs
    */
-  renderEntityCardListItem(pair, index$1) {
+  renderEntityCardListItem(pair, index$2) {
     var _a, _b, _c, _d;
     const entityType = this.config.cardListEntityType || this.entityType;
     return (index.h("div", { class: "form-entity-value-pair" }, index.h("div", { class: "header-container" }, index.h("yoo-entity", { item: pair, entityType: entityType, displayType: "card-list", readonly: this.readonly }), !this.readonly &&
-      index.h("div", { class: "delete-container" }, index.h("yoo-button", { shape: "square", onClick: (ev) => this.onClickDelete(ev, index$1) }, index.h("yoo-icon", { name: "delete", size: "small" })))), !this.readonly &&
-      index.h("div", { class: "inputs-container" }, index.h("yoo-form-input-container", { field: { title: overlays.translate((_a = this.config) === null || _a === void 0 ? void 0 : _a.inputLabel), help: overlays.translate((_b = this.config) === null || _b === void 0 ? void 0 : _b.inputHelp) }, required: false }, index.h("yoo-form-input", { type: (_c = this.config) === null || _c === void 0 ? void 0 : _c.inputType, required: false, clearable: true, hasIconPrefix: false, size: "medium", validators: (_d = this.config) === null || _d === void 0 ? void 0 : _d.validators, value: pair.value, onInputChanged: (ev) => this.updateEntityPairedValue(ev, index$1) })))));
+      index.h("div", { class: "delete-container" }, index.h("yoo-button", { shape: "square", onClick: (ev) => this.onClickDelete(ev, index$2) }, index.h("yoo-icon", { name: "delete", size: "small" })))), !this.readonly &&
+      index.h("div", { class: "inputs-container" }, index.h("yoo-form-input-container", { field: { title: index$1.translate((_a = this.config) === null || _a === void 0 ? void 0 : _a.inputLabel), help: index$1.translate((_b = this.config) === null || _b === void 0 ? void 0 : _b.inputHelp) }, required: false }, index.h("yoo-form-input", { type: (_c = this.config) === null || _c === void 0 ? void 0 : _c.inputType, required: false, clearable: true, hasIconPrefix: false, size: "medium", validators: (_d = this.config) === null || _d === void 0 ? void 0 : _d.validators, value: pair.value, onInputChanged: (ev) => this.updateEntityPairedValue(ev, index$2) })))));
   }
   render() {
     var _a, _b, _c, _d;
     return index.h(index.Host, null, !this.readonly && [
       index.h("yoo-form-autocomplete", { ref: (el) => (this.formAutocompleteEntities = el), displayType: "card-list", size: "medium", iconPrefix: this.iconPrefix, collectionName: this.collectionName, entityType: this.entityType, multiple: true, returnQuery: true, max: this.max, value: this.getSelectedPairs(), sortsAndFilters: (_a = this.selectionQuery) === null || _a === void 0 ? void 0 : _a.sortsAndFilters, currentSelectedTags: (_b = this.selectionQuery) === null || _b === void 0 ? void 0 : _b.tags, onInputChanged: (ev) => this.updateSelectedPairs(ev), onFetchData: (ev) => this.onFetchData(ev), onFetchFieldFilterData: (ev) => this.onFetchFieldFilterData(ev), onFetchCustomData: (ev) => this.onFetchCustomData(ev), model: this.model, tags: this.tags, clearSortsAndFilters: false }),
-      this.max && ((_c = this.pairs) === null || _c === void 0 ? void 0 : _c.length) >= this.max && index.h("div", { class: "max-message" }, overlays.translate('MAXSELECTEDITEMREACHED', { count: this.max }))
+      this.max && ((_c = this.pairs) === null || _c === void 0 ? void 0 : _c.length) >= this.max && index.h("div", { class: "max-message" }, index$1.translate('MAXSELECTEDITEMREACHED', { count: this.max }))
     ], (_d = this.pairs) === null || _d === void 0 ? void 0 :
       _d.map((p, index) => this.renderEntityCardListItem(p, index)));
   }

package/dist/cjs/yoo-form-explanation.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
-require('./index-9aadeb94.js');
-const overlays = require('./overlays-e5d2ff76.js');
+require('./index-6f92bccb.js');
+const index$1 = require('./index-0cfb67d1.js');
 require('./lodash-a9050d79.js');
 require('./index-a1bbe627.js');
 require('./_commonjsHelpers-94df2ea7.js');
@@ -20,7 +20,7 @@ const YooFormExplanationComponent = class {
     (_a = this.markdown) === null || _a === void 0 ? void 0 : _a.setContent();
   }
   render() {
-    return (index.h(index.Host, null, !!this.answer && [index.h("h3", null, overlays.translate('CORRECTANSWER')), index.h("p", null, this.answer)], !!this.text && [index.h("h3", null, overlays.translate('YOOBICWHY?')), index.h("yoo-markdown", { ref: (el) => (this.markdown = el), content: overlays.translateMulti(this.text) })], !!this.document && [index.h("h3", null, overlays.translate('EXTRA')), index.h("yoo-form-document", { showActionSheet: overlays.isNativeMobile() && overlays.isPdf(this.document), document: this.document })]));
+    return (index.h(index.Host, null, !!this.answer && [index.h("h3", null, index$1.translate('CORRECTANSWER')), index.h("p", null, this.answer)], !!this.text && [index.h("h3", null, index$1.translate('YOOBICWHY?')), index.h("yoo-markdown", { ref: (el) => (this.markdown = el), content: index$1.translateMulti(this.text) })], !!this.document && [index.h("h3", null, index$1.translate('EXTRA')), index.h("yoo-form-document", { showActionSheet: index$1.isNativeMobile() && index$1.isPdf(this.document), document: this.document })]));
   }
 };
 YooFormExplanationComponent.style = formExplanationCss;

package/dist/cjs/yoo-form-feed-preview.cjs.entry.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
-const formInputHelpers = require('./form-input-helpers-2d988e31.js');
-require('./overlays-e5d2ff76.js');
-require('./lodash-a9050d79.js');
+const formInputHelpers = require('./form-input-helpers-4ad38e19.js');
+require('./index-0cfb67d1.js');
 require('./index-a1bbe627.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-9aadeb94.js');
-require('./common-helpers-9f63a319.js');
+require('./lodash-a9050d79.js');
+require('./index-6f92bccb.js');
+require('./common-helpers-44428bf7.js');
 
 const formFeedPreviewCss = "svg:not(:root){overflow:hidden}:host{width:100%;height:100%}:host .readonly{border:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0);border-radius:var(--border-radius-04, 0.25rem)}";
 

package/dist/cjs/yoo-form-feedback.cjs.entry.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
-require('./index-9aadeb94.js');
+require('./index-6f92bccb.js');
 const lodash = require('./lodash-a9050d79.js');
-const commonHelpers = require('./common-helpers-9f63a319.js');
-const formInputHelpers = require('./form-input-helpers-2d988e31.js');
+const commonHelpers = require('./common-helpers-44428bf7.js');
+const formInputHelpers = require('./form-input-helpers-4ad38e19.js');
 const index$1 = require('./index-7d3c7ee7.js');
-const overlays = require('./overlays-e5d2ff76.js');
+const index$2 = require('./index-0cfb67d1.js');
 require('./index-a1bbe627.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
@@ -47,22 +47,22 @@ const YooFormFeedbackComponent = class {
     return isSelected ? 'app-color' : this.isConfidenceQuiz ? 'light-20' : 'light';
   }
   renderHeading() {
-    return this.heading ? index.h("h1", { class: "heading" }, overlays.translate(this.heading)) : '';
+    return this.heading ? index.h("h1", { class: "heading" }, index$2.translate(this.heading)) : '';
   }
   renderDescription(description) {
-    return description ? index.h("p", { class: "description" }, overlays.translate(description)) : '';
+    return description ? index.h("p", { class: "description" }, index$2.translate(description)) : '';
   }
   renderButtons() {
     this.buttonElements = this.emojis.map((emoji, index$1) => {
       var _a;
-      return (index.h("div", { class: "feedback" }, index.h("yoo-button", { class: this.isConfidenceQuiz ? 'no-border extra-large-emoji' : '', size: this.size, shape: this.shape || this.isConfidenceQuiz ? 'circular' : 'rectangular', color: this.getColor(this.value - 1 === index$1), animated: true, onClick: () => this.onStateClick(index$1) }, emoji), this.renderDescription(overlays.getConfidenceDescriptionKey((_a = this.confidenceValues) === null || _a === void 0 ? void 0 : _a[index$1]))));
+      return (index.h("div", { class: "feedback" }, index.h("yoo-button", { class: this.isConfidenceQuiz ? 'no-border extra-large-emoji' : '', size: this.size, shape: this.shape || this.isConfidenceQuiz ? 'circular' : 'rectangular', color: this.getColor(this.value - 1 === index$1), animated: true, onClick: () => this.onStateClick(index$1) }, emoji), this.renderDescription(index$2.getConfidenceDescriptionKey((_a = this.confidenceValues) === null || _a === void 0 ? void 0 : _a[index$1]))));
     });
     return this.buttonElements;
   }
   renderFormChoice() {
     return this.emojis.map((emoji, index$1) => {
       var _a;
-      return index.h("yoo-form-choice-card", { values: [{ description: overlays.getConfidenceDescriptionKey((_a = this.confidenceValues) === null || _a === void 0 ? void 0 : _a[index$1]), emoji, hideCheckbox: true }], customEvent: this.isConfidenceQuiz, selected: this.isConfidenceQuiz && (this.value - 1 === index$1), onChoiceSelected: () => this.onStateClick(index$1) });
+      return index.h("yoo-form-choice-card", { values: [{ description: index$2.getConfidenceDescriptionKey((_a = this.confidenceValues) === null || _a === void 0 ? void 0 : _a[index$1]), emoji, hideCheckbox: true }], customEvent: this.isConfidenceQuiz, selected: this.isConfidenceQuiz && (this.value - 1 === index$1), onChoiceSelected: () => this.onStateClick(index$1) });
     });
   }
   renderReadonly() {

package/dist/cjs/yoo-form-filter-date.cjs.entry.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
-const index$1 = require('./index-a1bbe627.js');
-require('./index-9aadeb94.js');
+const index$2 = require('./index-a1bbe627.js');
+require('./index-6f92bccb.js');
 const lodash = require('./lodash-a9050d79.js');
-const overlays = require('./overlays-e5d2ff76.js');
+const index$1 = require('./index-0cfb67d1.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const Option = ({ animated, selected, size, text, onToggle }, children) => (index.h("div", { class: "option" },
@@ -19,25 +19,25 @@ const Option = ({ animated, selected, size, text, onToggle }, children) => (inde
 const RangeAbsoluteOption = ({ selected, value, onChange }) => (index.h("yoo-calendar", { dateRange: value, hidden: !selected, isDatePicker: true, isRange: true, size: "small", onDateRangeChanged: (event) => onChange(event.detail.map(({ date }) => date)) }));
 const NonRangeAbsoluteOption = ({ selected, value, onChange }) => (index.h("yoo-calendar", { activeDay: value, hidden: !selected, isDatePicker: true, size: "small", onDateChanged: (event) => onChange(event.detail.date) }));
 const RelativeOption = ({ selected, size, value, onChange }) => (index.h("div", { class: "input", hidden: !selected },
-  overlays.translate('INTHELAST'),
+  index$1.translate('INTHELAST'),
   index.h("yoo-form-input", { clearable: false, hasIconPrefix: false, min: "1", size: size, type: "number", value: value, onInputChanged: (event) => {
       event.stopPropagation();
       onChange(event.detail);
     } })));
 
-const isRangeAbsolute = (operator) => operator === index$1.FormFilterDateOperator.absoluteRange;
-const isNonRangeAbsolute = (operator) => [index$1.FormFilterDateOperator.absoluteOn, index$1.FormFilterDateOperator.absoluteBefore, index$1.FormFilterDateOperator.absoluteAfter].includes(operator);
+const isRangeAbsolute = (operator) => operator === index$2.FormFilterDateOperator.absoluteRange;
+const isNonRangeAbsolute = (operator) => [index$2.FormFilterDateOperator.absoluteOn, index$2.FormFilterDateOperator.absoluteBefore, index$2.FormFilterDateOperator.absoluteAfter].includes(operator);
 const isAbsolute = (operator) => isRangeAbsolute(operator) || isNonRangeAbsolute(operator);
 const isRelative = (operator) => !isAbsolute(operator);
 
 const formFilterDateCss = "svg:not(:root){overflow:hidden}:host{--dialog-max-height:initial;--dialog-position:initial;--dialog-width:initial}:host h1{margin:0;color:var(--dark, #000000);font-size:inherit}:host yoo-calendar{width:13rem;height:13rem;padding:var(--spacing-08, 0.5rem)}:host yoo-form-input{width:5rem;padding-left:1rem}:host yoo-calendar,:host .input{grid-column:2/2}:host .input:not([hidden]){display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .option{display:grid;grid-template-rows:repeat(2, auto);grid-template-columns:auto 1fr;-ms-flex-align:center;align-items:center;-webkit-column-gap:var(--spacing-08, 0.5rem);-moz-column-gap:var(--spacing-08, 0.5rem);column-gap:var(--spacing-08, 0.5rem)}:host .options{display:grid;margin-bottom:var(--spacing-08, 0.5rem)}:host([size=small]) yoo-calendar,:host([size=small]) .input,:host([size=medium]) yoo-calendar,:host([size=medium]) .input{margin-top:var(--spacing-04, 0.25rem)}:host([size=small]) .options,:host([size=medium]) .options{gap:var(--spacing-08, 0.5rem)}:host([size=large]) yoo-calendar,:host([size=large]) .input{margin-top:var(--spacing-08, 0.5rem)}:host([size=large]) .options{gap:var(--spacing-16, 1rem)}";
 
 const suffixes = {
-  [index$1.FormFilterDateOperator.relativeDay]: 'YOOBICD',
-  [index$1.FormFilterDateOperator.relativeWeek]: 'YOOBICW',
-  [index$1.FormFilterDateOperator.relativeMonth]: 'YOOBICM',
-  [index$1.FormFilterDateOperator.relativeQuarter]: 'YOOBICQ',
-  [index$1.FormFilterDateOperator.relativeYear]: 'YOOBICY'
+  [index$2.FormFilterDateOperator.relativeDay]: 'YOOBICD',
+  [index$2.FormFilterDateOperator.relativeWeek]: 'YOOBICW',
+  [index$2.FormFilterDateOperator.relativeMonth]: 'YOOBICM',
+  [index$2.FormFilterDateOperator.relativeQuarter]: 'YOOBICQ',
+  [index$2.FormFilterDateOperator.relativeYear]: 'YOOBICY'
 };
 const YooFormFilterDateComponent = class {
   constructor(hostRef) {
@@ -56,33 +56,33 @@ const YooFormFilterDateComponent = class {
      */
     this.readonly = false;
     this.values = {
-      [index$1.FormFilterDateOperator.relativeDay]: undefined,
-      [index$1.FormFilterDateOperator.relativeWeek]: undefined,
-      [index$1.FormFilterDateOperator.relativeMonth]: undefined,
-      [index$1.FormFilterDateOperator.relativeQuarter]: undefined,
-      [index$1.FormFilterDateOperator.relativeYear]: undefined,
-      [index$1.FormFilterDateOperator.absoluteOn]: new Date(),
-      [index$1.FormFilterDateOperator.absoluteRange]: undefined,
-      [index$1.FormFilterDateOperator.absoluteBefore]: new Date(),
-      [index$1.FormFilterDateOperator.absoluteAfter]: new Date()
+      [index$2.FormFilterDateOperator.relativeDay]: undefined,
+      [index$2.FormFilterDateOperator.relativeWeek]: undefined,
+      [index$2.FormFilterDateOperator.relativeMonth]: undefined,
+      [index$2.FormFilterDateOperator.relativeQuarter]: undefined,
+      [index$2.FormFilterDateOperator.relativeYear]: undefined,
+      [index$2.FormFilterDateOperator.absoluteOn]: new Date(),
+      [index$2.FormFilterDateOperator.absoluteRange]: undefined,
+      [index$2.FormFilterDateOperator.absoluteBefore]: new Date(),
+      [index$2.FormFilterDateOperator.absoluteAfter]: new Date()
     };
   }
   get caption() {
     var _a, _b, _c;
     switch ((_a = this.value) === null || _a === void 0 ? void 0 : _a.operator) {
-      case index$1.FormFilterDateOperator.relativeDay:
-      case index$1.FormFilterDateOperator.relativeWeek:
-      case index$1.FormFilterDateOperator.relativeMonth:
-      case index$1.FormFilterDateOperator.relativeQuarter:
-      case index$1.FormFilterDateOperator.relativeYear:
-        return this.value.value != null ? [overlays.translate('INTHELAST'), `${this.value.value}${overlays.translate(suffixes[this.value.operator])}`].join(' ') : undefined;
-      case index$1.FormFilterDateOperator.absoluteOn:
-      case index$1.FormFilterDateOperator.absoluteBefore:
-      case index$1.FormFilterDateOperator.absoluteAfter:
-        return this.value.value != null ? [overlays.translate(this.value.operator.toUpperCase()), overlays.dateFormat(this.value.value, 'D MMM')].join(' ') : undefined;
-      case index$1.FormFilterDateOperator.absoluteRange:
+      case index$2.FormFilterDateOperator.relativeDay:
+      case index$2.FormFilterDateOperator.relativeWeek:
+      case index$2.FormFilterDateOperator.relativeMonth:
+      case index$2.FormFilterDateOperator.relativeQuarter:
+      case index$2.FormFilterDateOperator.relativeYear:
+        return this.value.value != null ? [index$1.translate('INTHELAST'), `${this.value.value}${index$1.translate(suffixes[this.value.operator])}`].join(' ') : undefined;
+      case index$2.FormFilterDateOperator.absoluteOn:
+      case index$2.FormFilterDateOperator.absoluteBefore:
+      case index$2.FormFilterDateOperator.absoluteAfter:
+        return this.value.value != null ? [index$1.translate(this.value.operator.toUpperCase()), index$1.dateFormat(this.value.value, 'D MMM')].join(' ') : undefined;
+      case index$2.FormFilterDateOperator.absoluteRange:
         return Array.isArray(this.value.value) && this.value.value.every((value) => value != null)
-          ? [overlays.dateFormat((_b = this.value.value) === null || _b === void 0 ? void 0 : _b[0], 'D MMM'), overlays.translate('YOOBICTO'), overlays.dateFormat((_c = this.value.value) === null || _c === void 0 ? void 0 : _c[1], 'D MMM')].join(' ')
+          ? [index$1.dateFormat((_b = this.value.value) === null || _b === void 0 ? void 0 : _b[0], 'D MMM'), index$1.translate('YOOBICTO'), index$1.dateFormat((_c = this.value.value) === null || _c === void 0 ? void 0 : _c[1], 'D MMM')].join(' ')
           : undefined;
       default:
         return undefined;
@@ -113,18 +113,18 @@ const YooFormFilterDateComponent = class {
     this.value = { operator, value };
   }
   render() {
-    return this.readonly ? (index.h("yoo-tag", { color: "text-color-10" }, this.caption)) : (index.h("yoo-form-filter", { caption: this.caption, color: this.color, expanded: this.expanded, icon: this.icon || 'calendar', placeholder: this.placeholder, size: this.size, onClear: () => this.clear(), onFinish: () => this.submit() }, index.h("div", { class: "options" }, index.h("h1", null, overlays.translate('RELATIVE')), Object.values(index$1.FormFilterDateOperator)
+    return this.readonly ? (index.h("yoo-tag", { color: "text-color-10" }, this.caption)) : (index.h("yoo-form-filter", { caption: this.caption, color: this.color, expanded: this.expanded, icon: this.icon || 'calendar', placeholder: this.placeholder, size: this.size, onClear: () => this.clear(), onFinish: () => this.submit() }, index.h("div", { class: "options" }, index.h("h1", null, index$1.translate('RELATIVE')), Object.values(index$2.FormFilterDateOperator)
       .filter((operator) => isRelative(operator))
       .map((operator) => {
       var _a;
       const selected = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.operator) === operator;
-      return (index.h(Option, { animated: this.animated, selected: selected, size: this.size, text: overlays.translate(operator.toUpperCase()), onToggle: () => this.toggleOption(operator) }, index.h(RelativeOption, { selected: selected, size: this.size, value: selected ? this.value.value : undefined, onChange: (value) => this.changeOptionValue(operator, value) })));
-    }), index.h("h1", null, overlays.translate('ABSOLUTE')), Object.values(index$1.FormFilterDateOperator)
+      return (index.h(Option, { animated: this.animated, selected: selected, size: this.size, text: index$1.translate(operator.toUpperCase()), onToggle: () => this.toggleOption(operator) }, index.h(RelativeOption, { selected: selected, size: this.size, value: selected ? this.value.value : undefined, onChange: (value) => this.changeOptionValue(operator, value) })));
+    }), index.h("h1", null, index$1.translate('ABSOLUTE')), Object.values(index$2.FormFilterDateOperator)
       .filter((operator) => isAbsolute(operator))
       .map((operator) => {
       var _a;
       const selected = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.operator) === operator;
-      return (index.h(Option, { animated: this.animated, selected: selected, size: this.size, text: overlays.translate(operator.toUpperCase()), onToggle: () => this.toggleOption(operator) }, isRangeAbsolute(operator) && (index.h(RangeAbsoluteOption, { selected: selected, value: selected ? this.value.value : undefined, onChange: (value) => selected && this.changeOptionValue(operator, value) })), isNonRangeAbsolute(operator) && (index.h(NonRangeAbsoluteOption, { selected: selected, value: selected ? this.value.value : undefined, onChange: (value) => selected && this.changeOptionValue(operator, value) }))));
+      return (index.h(Option, { animated: this.animated, selected: selected, size: this.size, text: index$1.translate(operator.toUpperCase()), onToggle: () => this.toggleOption(operator) }, isRangeAbsolute(operator) && (index.h(RangeAbsoluteOption, { selected: selected, value: selected ? this.value.value : undefined, onChange: (value) => selected && this.changeOptionValue(operator, value) })), isNonRangeAbsolute(operator) && (index.h(NonRangeAbsoluteOption, { selected: selected, value: selected ? this.value.value : undefined, onChange: (value) => selected && this.changeOptionValue(operator, value) }))));
     }))));
   }
 };

package/dist/cjs/yoo-form-filter-number.cjs.entry.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
 const index$1 = require('./index-a1bbe627.js');
-require('./index-9aadeb94.js');
+require('./index-6f92bccb.js');
 const lodash = require('./lodash-a9050d79.js');
-const overlays = require('./overlays-e5d2ff76.js');
+const index$2 = require('./index-0cfb67d1.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const Option = ({ animated, selected, size, text, onToggle }, children) => (index.h("div", { class: "option" },
@@ -71,10 +71,10 @@ const YooFormFilterNumberComponent = class {
       case index$1.FormFilterNumberOperator.equal:
       case index$1.FormFilterNumberOperator.greaterThan:
       case index$1.FormFilterNumberOperator.lessThan:
-        return this.value.value != null ? [overlays.translate(this.value.operator.toUpperCase()), this.value.value].join(' ') : undefined;
+        return this.value.value != null ? [index$2.translate(this.value.operator.toUpperCase()), this.value.value].join(' ') : undefined;
       case index$1.FormFilterNumberOperator.between:
         return Array.isArray(this.value.value) && this.value.value.every((value) => value != null)
-          ? [overlays.translate(this.value.operator.toUpperCase()), (_b = this.value.value) === null || _b === void 0 ? void 0 : _b[0], overlays.translate('YOOBICAND'), (_c = this.value.value) === null || _c === void 0 ? void 0 : _c[1]].join(' ')
+          ? [index$2.translate(this.value.operator.toUpperCase()), (_b = this.value.value) === null || _b === void 0 ? void 0 : _b[0], index$2.translate('YOOBICAND'), (_c = this.value.value) === null || _c === void 0 ? void 0 : _c[1]].join(' ')
           : undefined;
       default:
         return undefined;
@@ -108,7 +108,7 @@ const YooFormFilterNumberComponent = class {
     return this.readonly ? (index.h("yoo-tag", { color: "text-color-10" }, this.caption)) : (index.h("yoo-form-filter", { caption: this.caption, color: this.color, expanded: this.expanded, icon: this.icon, placeholder: this.placeholder, size: this.size, onClear: () => this.clear(), onFinish: () => this.submit() }, index.h("div", { class: "options" }, Object.values(index$1.FormFilterNumberOperator).map((operator) => {
       var _a, _b, _c;
       const selected = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.operator) === operator;
-      return (index.h(Option, { animated: this.animated, selected: selected, size: this.size, text: overlays.translate(operator.toUpperCase()), onToggle: () => this.toggleOption(operator) }, isRangeOperator(operator) && (index.h(RangeOption, { selected: selected, size: this.size, slider: this.showSlider ? { min: this.minValueSlider, max: this.maxValueSlider } : undefined, value: selected ? (_b = this.value) === null || _b === void 0 ? void 0 : _b.value : undefined, onChange: (value) => this.changeOptionValue(operator, value) })), isNonRangeOperator(operator) && (index.h(NonRangeOption, { selected: selected, size: this.size, value: selected ? (_c = this.value) === null || _c === void 0 ? void 0 : _c.value : undefined, onChange: (value) => this.changeOptionValue(operator, value) }))));
+      return (index.h(Option, { animated: this.animated, selected: selected, size: this.size, text: index$2.translate(operator.toUpperCase()), onToggle: () => this.toggleOption(operator) }, isRangeOperator(operator) && (index.h(RangeOption, { selected: selected, size: this.size, slider: this.showSlider ? { min: this.minValueSlider, max: this.maxValueSlider } : undefined, value: selected ? (_b = this.value) === null || _b === void 0 ? void 0 : _b.value : undefined, onChange: (value) => this.changeOptionValue(operator, value) })), isNonRangeOperator(operator) && (index.h(NonRangeOption, { selected: selected, size: this.size, value: selected ? (_c = this.value) === null || _c === void 0 ? void 0 : _c.value : undefined, onChange: (value) => this.changeOptionValue(operator, value) }))));
     }))));
   }
 };

package/dist/cjs/yoo-form-filter-text.cjs.entry.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
 const index$1 = require('./index-a1bbe627.js');
-require('./index-9aadeb94.js');
+require('./index-6f92bccb.js');
 const lodash = require('./lodash-a9050d79.js');
-const overlays = require('./overlays-e5d2ff76.js');
+const index$2 = require('./index-0cfb67d1.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const formFilterTextCss = "svg:not(:root){overflow:hidden}:host{--dialog-max-height:initial;--dialog-position:initial;--dialog-width:initial}:host yoo-form-input{grid-column:2/2;width:11rem}:host .option{display:grid;grid-template-rows:repeat(2, auto);grid-template-columns:auto 1fr;-ms-flex-align:center;align-items:center;-webkit-column-gap:var(--spacing-08, 0.5rem);-moz-column-gap:var(--spacing-08, 0.5rem);column-gap:var(--spacing-08, 0.5rem)}:host .options{display:grid;margin-bottom:var(--spacing-08, 0.5rem)}:host([size=small]) yoo-form-input,:host([size=medium]) yoo-form-input{margin-top:var(--spacing-04, 0.25rem)}:host([size=small]) .options,:host([size=medium]) .options{gap:var(--spacing-08, 0.5rem)}:host([size=large]) yoo-form-input{margin-top:var(--spacing-08, 0.5rem)}:host([size=large]) .options{gap:var(--spacing-16, 1rem)}";
@@ -42,7 +42,7 @@ const YooFormFilterTextComponent = class {
     };
   }
   get caption() {
-    return this.value && this.value.operator && this.value.value ? [overlays.translate(this.value.operator.toUpperCase()), this.value.value].join(' ') : undefined;
+    return this.value && this.value.operator && this.value.value ? [index$2.translate(this.value.operator.toUpperCase()), this.value.value].join(' ') : undefined;
   }
   componentWillLoad() {
     this.submittedValue = this.value;
@@ -72,7 +72,7 @@ const YooFormFilterTextComponent = class {
     return this.readonly ? (index.h("yoo-tag", { color: "text-color-10" }, this.caption)) : (index.h("yoo-form-filter", { caption: this.caption, color: this.color, expanded: this.expanded, icon: this.icon, placeholder: this.placeholder, size: this.size, onClear: () => this.clear(), onFinish: () => this.submit() }, index.h("div", { class: "options" }, Object.values(index$1.FormFilterTextOperator).map((operator) => {
       var _a;
       const selected = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.operator) === operator;
-      return (index.h(Option, { animated: this.animated, selected: selected, size: this.size, text: overlays.translate(operator.toUpperCase()), value: selected ? this.value.value : undefined, onChange: (value) => this.changeOptionValue(operator, value), onToggle: () => this.toggleOption(operator) }));
+      return (index.h(Option, { animated: this.animated, selected: selected, size: this.size, text: index$2.translate(operator.toUpperCase()), value: selected ? this.value.value : undefined, onChange: (value) => this.changeOptionValue(operator, value), onToggle: () => this.toggleOption(operator) }));
     }))));
   }
 };

package/dist/cjs/yoo-form-filter.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
-require('./index-9aadeb94.js');
-const overlays = require('./overlays-e5d2ff76.js');
+require('./index-6f92bccb.js');
+const index$1 = require('./index-0cfb67d1.js');
 require('./lodash-a9050d79.js');
 require('./index-a1bbe627.js');
 require('./_commonjsHelpers-94df2ea7.js');
@@ -23,7 +23,7 @@ const YooFormFilterComponent = class {
   }
   get isInline() {
     var _a, _b;
-    return (_b = (_a = overlays.findParent(this.host, 'yoo-form-input-container')) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.contains('inline-row');
+    return (_b = (_a = index$1.findParent(this.host, 'yoo-form-input-container')) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.contains('inline-row');
   }
   handleClickOutside(event) {
     if (this.expanded && !event.composedPath().includes(this.host)) {
@@ -40,7 +40,7 @@ const YooFormFilterComponent = class {
   }
   componentDidLoad() {
     var _a;
-    (_a = overlays.findParent(this.host)) === null || _a === void 0 ? void 0 : _a.addEventListener('scroll', () => {
+    (_a = index$1.findParent(this.host)) === null || _a === void 0 ? void 0 : _a.addEventListener('scroll', () => {
       this.expanded = false;
     });
   }
@@ -61,7 +61,7 @@ const YooFormFilterComponent = class {
   }
   render() {
     const iconSize = this.size === 'large' ? 'medium' : 'small';
-    return (index.h(index.Host, null, index.h("div", { class: "input", style: { gridTemplateColumns: `${this.icon ? 'auto ' : ''}minmax(0, 1fr) auto` }, onClick: () => this.toggleContextDialog(), ref: el => { this.inputEl = el; } }, !!this.icon && index.h("yoo-icon", { name: this.icon, size: iconSize }), index.h("input", { placeholder: overlays.translateMulti(this.placeholder), readOnly: true, value: this.caption }), index.h("yoo-icon", { name: this.expanded ? 'arrow-up' : 'arrow-down', size: iconSize })), index.h("yoo-context-dialog", { ref: el => { this.contextDialog = el; }, hidden: !this.expanded }, index.h("header", null, this.caption || overlays.translateMulti(this.placeholder), !!this.caption && (index.h("div", { class: "clear", onClick: () => this.clear.emit() }, overlays.translate('CLEAR')))), index.h("slot", null), index.h("footer", { onClick: () => this.toggleContextDialog() }, overlays.translate('YOOBICDONE')))));
+    return (index.h(index.Host, null, index.h("div", { class: "input", style: { gridTemplateColumns: `${this.icon ? 'auto ' : ''}minmax(0, 1fr) auto` }, onClick: () => this.toggleContextDialog(), ref: el => { this.inputEl = el; } }, !!this.icon && index.h("yoo-icon", { name: this.icon, size: iconSize }), index.h("input", { placeholder: index$1.translateMulti(this.placeholder), readOnly: true, value: this.caption }), index.h("yoo-icon", { name: this.expanded ? 'arrow-up' : 'arrow-down', size: iconSize })), index.h("yoo-context-dialog", { ref: el => { this.contextDialog = el; }, hidden: !this.expanded }, index.h("header", null, this.caption || index$1.translateMulti(this.placeholder), !!this.caption && (index.h("div", { class: "clear", onClick: () => this.clear.emit() }, index$1.translate('CLEAR')))), index.h("slot", null), index.h("footer", { onClick: () => this.toggleContextDialog() }, index$1.translate('YOOBICDONE')))));
   }
   get host() { return index.getElement(this); }
 };

package/dist/cjs/yoo-form-footer.cjs.entry.js

@@ -3,12 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
-require('./index-9aadeb94.js');
+require('./index-6f92bccb.js');
 const lodash = require('./lodash-a9050d79.js');
-const button_factory = require('./button.factory-604b2344.js');
-const commonHelpers = require('./common-helpers-9f63a319.js');
-const overlays = require('./overlays-e5d2ff76.js');
-require('./index-ec50fd6e.js');
+const button_factory = require('./button.factory-b50d940e.js');
+const commonHelpers = require('./common-helpers-44428bf7.js');
+const index$1 = require('./index-0cfb67d1.js');
 require('./index-a1bbe627.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
@@ -26,14 +25,14 @@ const YooFormFooterComponent = class {
   async getOuterContainer() {
     return this.outerContainer;
   }
-  renderButton(button, index$1) {
+  renderButton(button, index$2) {
     return (index.h("div", { class: {
         'button-container': true,
-        first: index$1 === 0 && this.countDownValue === null
-      } }, button_factory.getButton({ ...button, size: (overlays.isWeb(this.host) && !this.forceMobile) ? 'medium' : 'large' })));
+        first: index$2 === 0 && this.countDownValue === null
+      } }, button_factory.getButton({ ...button, size: (index$1.isWeb(this.host) && !this.forceMobile) ? 'medium' : 'large' })));
   }
   renderTimer() {
-    const countDownDisplay = overlays.getTimeOneLetterFormat(this.countDownValue);
+    const countDownDisplay = index$1.getTimeOneLetterFormat(this.countDownValue);
     const countDownProgress = lodash.isNumber(this.countDownValue) && lodash.isNumber(this.countDownStartValue) ? (this.countDownValue / this.countDownStartValue) * 100 : 0;
     const onCountingDown = (ev) => {
       if (ev && ev.target && ev.detail && ev.detail === 100) {
@@ -57,7 +56,7 @@ const YooFormFooterComponent = class {
     return (index.h(index.Host, { class: hostClasses }, index.h("div", { ref: (el) => (this.outerContainer = el), class: {
         'outer-container': true,
         'with-copyright': this.showCopyright
-      } }, this.showCopyright && index.h("yoo-copyright", null), hasControls && (index.h("div", { class: "mission-footer" }, lodash.isNumber(this.countDownValue) && this.renderTimer(), overlays.isWeb(this.host) && index.h("div", { class: "flex" }), this.slotHeader && index.h("div", { class: "header" }, index.h("slot", { name: "header" })), this.buttons && this.buttons.map((button, index) => this.renderButton(button, index)))))));
+      } }, this.showCopyright && index.h("yoo-copyright", null), hasControls && (index.h("div", { class: "mission-footer" }, lodash.isNumber(this.countDownValue) && this.renderTimer(), index$1.isWeb(this.host) && index.h("div", { class: "flex" }), this.slotHeader && index.h("div", { class: "header" }, index.h("slot", { name: "header" })), this.buttons && this.buttons.map((button, index) => this.renderButton(button, index)))))));
   }
   get host() { return index.getElement(this); }
 };

package/dist/cjs/yoo-form-formula.cjs.entry.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
-const formInputHelpers = require('./form-input-helpers-2d988e31.js');
-require('./overlays-e5d2ff76.js');
-require('./lodash-a9050d79.js');
+const formInputHelpers = require('./form-input-helpers-4ad38e19.js');
+require('./index-0cfb67d1.js');
 require('./index-a1bbe627.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-9aadeb94.js');
-require('./common-helpers-9f63a319.js');
+require('./lodash-a9050d79.js');
+require('./index-6f92bccb.js');
+require('./common-helpers-44428bf7.js');
 
 const formFormulaCss = "svg:not(:root){overflow:hidden}:host .readonly{padding:0.5rem 0.5rem 0 0}";
 

package/dist/cjs/yoo-form-hotzones-creator.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
-require('./index-9aadeb94.js');
+require('./index-6f92bccb.js');
 const pintura = require('./pintura-2b0cc167.js');
-const overlays = require('./overlays-e5d2ff76.js');
+const index$1 = require('./index-0cfb67d1.js');
 require('./lodash-a9050d79.js');
 require('./index-a1bbe627.js');
 require('./_commonjsHelpers-94df2ea7.js');
@@ -32,8 +32,8 @@ const YooFormHotzonesCreatorComponent = class {
     return this.type === 'hotzone';
   }
   componentWillLoad() {
-    this.value.hotzonesColor = this.value.hotzonesColor || overlays.getCssColor('app-color');
-    this.hotzonesColorRgb = overlays.hexToRgbArray(this.value.hotzonesColor);
+    this.value.hotzonesColor = this.value.hotzonesColor || index$1.getCssColor('app-color');
+    this.hotzonesColorRgb = index$1.hexToRgbArray(this.value.hotzonesColor);
     this.value.hotzones = this.value.hotzones || [];
   }
   componentDidLoad() {
@@ -160,35 +160,35 @@ const YooFormHotzonesCreatorComponent = class {
   updateColorPicker(ev) {
     const color = ev.detail.substring(0, 7); // remove alpha
     this.value.hotzonesColor = color;
-    this.hotzonesColorRgb = overlays.hexToRgbArray(color);
+    this.hotzonesColorRgb = index$1.hexToRgbArray(color);
     this.emitValues(ev);
   }
   renderColorPicker() {
-    return !this.isHotZones && (index.h("div", { class: "color-picker-container" }, index.h("h2", null, overlays.translate('HOTZONESCOLOUR')), index.h("yoo-form-color-field", { value: this.value.hotzonesColor, allowOther: true, rteColors: true, onInputChanged: (ev) => this.updateColorPicker(ev) })));
+    return !this.isHotZones && (index.h("div", { class: "color-picker-container" }, index.h("h2", null, index$1.translate('HOTZONESCOLOUR')), index.h("yoo-form-color-field", { value: this.value.hotzonesColor, allowOther: true, rteColors: true, onInputChanged: (ev) => this.updateColorPicker(ev) })));
   }
   renderAddHotZoneHeader() {
-    return index.h("section", { id: "add-hotzone-header" }, index.h("yoo-button", { color: "app-color", onClick: () => this.addHotzone() }, index.h("yoo-icon", { name: "circle-plus", color: "light", slot: "start", size: "small" }), overlays.translate('ADDHOTZONE')), index.h("yoo-tooltip", { content: overlays.translateMulti('CLICKHOTZONETOEDIT') }, index.h("yoo-icon", { name: "help", size: "small", color: "stable-alt" })));
+    return index.h("section", { id: "add-hotzone-header" }, index.h("yoo-button", { color: "app-color", onClick: () => this.addHotzone() }, index.h("yoo-icon", { name: "circle-plus", color: "light", slot: "start", size: "small" }), index$1.translate('ADDHOTZONE')), index.h("yoo-tooltip", { content: index$1.translateMulti('CLICKHOTZONETOEDIT') }, index.h("yoo-icon", { name: "help", size: "small", color: "stable-alt" })));
   }
   renderImageUploader(props, onInputChanged) {
     return index.h("yoo-form-capture", { ...props, allowLibrary: true, allowUnsplash: true, showCropper: true, onInputChanged: ev => onInputChanged(ev) });
   }
-  renderCollapsibleContent(index$1) {
+  renderCollapsibleContent(index$2) {
     return index.h("section", { id: "collapsible-content" }, this.renderImageUploader({
-      value: this.value.hotzones[index$1].image,
+      value: this.value.hotzones[index$2].image,
       required: false,
       size: 'medium'
-    }, (ev) => this.onHotspotImageUpdated(ev, index$1)), index.h("div", { class: "description-container" }, index.h("header", null, index.h("h2", null, overlays.translate('DESCRIPTION')), index.h("yoo-tooltip", { content: overlays.translateMulti('HELPERIMAGEMAPDESCRIPTION') }, index.h("yoo-icon", { name: "help", size: "small", color: "stable-alt" }))), index.h("yoo-form-text-area", { value: this.value.hotzones[index$1].description, onInputChanged: (ev) => this.onHotspotDescriptionUpdated(ev, index$1), onTranslationValueUpdated: (ev) => {
+    }, (ev) => this.onHotspotImageUpdated(ev, index$2)), index.h("div", { class: "description-container" }, index.h("header", null, index.h("h2", null, index$1.translate('DESCRIPTION')), index.h("yoo-tooltip", { content: index$1.translateMulti('HELPERIMAGEMAPDESCRIPTION') }, index.h("yoo-icon", { name: "help", size: "small", color: "stable-alt" }))), index.h("yoo-form-text-area", { value: this.value.hotzones[index$2].description, onInputChanged: (ev) => this.onHotspotDescriptionUpdated(ev, index$2), onTranslationValueUpdated: (ev) => {
         ev.stopImmediatePropagation();
         this.translationValueUpdated.emit(ev.detail);
       }, translations: this.translations })));
   }
   renderZoneDetails() {
     var _a;
-    return !this.isHotZones && ((_a = this.value.hotzones) === null || _a === void 0 ? void 0 : _a.map((_, index$1) => {
+    return !this.isHotZones && ((_a = this.value.hotzones) === null || _a === void 0 ? void 0 : _a.map((_, index$2) => {
       var _a, _b, _c, _d;
       return [
-        index.h("yoo-collapsible", { class: "form", collapsed: !((_c = (_b = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.imageAnnotation) === null || _b === void 0 ? void 0 : _b[index$1]) === null || _c === void 0 ? void 0 : _c.isSelected), onContentShown: (ev) => this.selectShape(ev.detail && index$1), header: `${overlays.translate('HOTZONE')} ${(index$1 + 1)}`, isDeletable: !!((_d = this.value.hotzones) === null || _d === void 0 ? void 0 : _d.length), onDeleteClicked: () => this.deleteHotzone(index$1) }, this.renderCollapsibleContent(index$1)),
-        this.value.hotzones[index$1 + 1] && index.h("hr", null)
+        index.h("yoo-collapsible", { class: "form", collapsed: !((_c = (_b = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.imageAnnotation) === null || _b === void 0 ? void 0 : _b[index$2]) === null || _c === void 0 ? void 0 : _c.isSelected), onContentShown: (ev) => this.selectShape(ev.detail && index$2), header: `${index$1.translate('HOTZONE')} ${(index$2 + 1)}`, isDeletable: !!((_d = this.value.hotzones) === null || _d === void 0 ? void 0 : _d.length), onDeleteClicked: () => this.deleteHotzone(index$2) }, this.renderCollapsibleContent(index$2)),
+        this.value.hotzones[index$2 + 1] && index.h("hr", null)
       ];
     }));
   }
@@ -200,7 +200,7 @@ const YooFormHotzonesCreatorComponent = class {
   }
   renderPreview() {
     var _a;
-    return !this.disconnected && index.h("main", { ref: (el) => (this.editorContainer = el), hidden: !((_a = this.value) === null || _a === void 0 ? void 0 : _a.image) }, index.h("h2", null, overlays.translate('PREVIEW')), index.h("section", { id: "preview", ref: (el) => (this.previewElement = el) }), this.renderAddHotZoneHeader(), this.renderZoneDetails());
+    return !this.disconnected && index.h("main", { ref: (el) => (this.editorContainer = el), hidden: !((_a = this.value) === null || _a === void 0 ? void 0 : _a.image) }, index.h("h2", null, index$1.translate('PREVIEW')), index.h("section", { id: "preview", ref: (el) => (this.previewElement = el) }), this.renderAddHotZoneHeader(), this.renderZoneDetails());
   }
   render() {
     return this.value && index.h(index.Host, null, this.renderHeader(), this.renderPreview());