@yoobic/yobi 8.3.3 → 8.4.0-0

package/dist/collection/components/entities/entity-search-filters/entity-search-filters.js

@@ -39,18 +39,9 @@ export class YooEntitySearchFiltersComponent {
       ev.stopPropagation();
     }
     const filters = this.filters || [];
+    const value = isString(item) ? item : isObject(item) || field.idOnly ? (_a = item) === null || _a === void 0 ? void 0 : _a._id : item;
     let found = false;
     let remove = false;
-    let value;
-    if (isString(item)) {
-      value = item;
-    }
-    else if (isObject(item) || field.idOnly) {
-      value = (_a = item) === null || _a === void 0 ? void 0 : _a._id;
-    }
-    else {
-      value = item;
-    }
     for (const filter of filters) {
       if (filter.fieldname === field.name && filter.fieldfiltername === (field.filterName || field.name)) {
         found = true;
@@ -83,7 +74,8 @@ export class YooEntitySearchFiltersComponent {
         fieldfiltername: field.filterName || field.name,
         multiple: field.multiple,
         values: [value],
-        type, handleUndefined: field.handleUndefined,
+        type,
+        handleUndefined: field.handleUndefined,
         subQuery: type === 'subquery' ? field.subQuery : null
       });
     }
@@ -98,13 +90,7 @@ export class YooEntitySearchFiltersComponent {
     this.filters = this.filters.filter((f) => f.fieldname !== field.name && f.fieldfiltername !== (field.filterName || field.name));
     const values = ev.detail;
     if (values && values.length > 0) {
-      this.filters.push({
-        fieldname: field.name,
-        fieldfiltername: field.filterName || field.name,
-        multiple: field.multiple,
-        values,
-        type: 'date'
-      });
+      this.filters.push({ fieldname: field.name, fieldfiltername: field.filterName || field.name, multiple: field.multiple, values, type: 'date' });
     }
     this.filter.emit(this.filters);
   }
@@ -113,13 +99,7 @@ export class YooEntitySearchFiltersComponent {
     this.filters = this.filters.filter((f) => f.fieldname !== field.name && f.fieldfiltername !== (field.filterName || field.name));
     const text = ev.detail;
     if (text && text.length > 0) {
-      this.filters.push({
-        fieldname: field.name,
-        fieldfiltername: field.filterName || field.name,
-        multiple: field.multiple,
-        values: text,
-        type: 'text'
-      });
+      this.filters.push({ fieldname: field.name, fieldfiltername: field.filterName || field.name, multiple: field.multiple, values: text, type: 'text' });
     }
     this.filter.emit(this.filters);
   }
@@ -128,13 +108,7 @@ export class YooEntitySearchFiltersComponent {
     this.filters = this.filters.filter((f) => f.fieldname !== field.name && f.fieldfiltername !== (field.filterName || field.name));
     const value = ev.detail;
     if (isObject(value) && !isEmpty(value) && (isNumber(value === null || value === void 0 ? void 0 : value.min) || isNumber(value === null || value === void 0 ? void 0 : value.max))) {
-      this.filters.push({
-        fieldname: field.name,
-        fieldfiltername: field.filterName || field.name,
-        multiple: field.multiple,
-        values: value,
-        type: 'number'
-      });
+      this.filters.push({ fieldname: field.name, fieldfiltername: field.filterName || field.name, multiple: field.multiple, values: value, type: 'number' });
     }
     this.filter.emit(this.filters);
   }
@@ -150,7 +124,19 @@ export class YooEntitySearchFiltersComponent {
   }
   hasFilters() {
     var _a;
-    return (_a = this.fields) === null || _a === void 0 ? void 0 : _a.some(f => f.filterable && [FormFieldType.autocomplete, FormFieldType.radio, FormFieldType.date, FormFieldType.datetime, FormFieldType.checkbox, FormFieldType.toggle, FormFieldType.segment, FormFieldType.location, FormFieldType.catalog, FormFieldType.tags].includes(f.type));
+    return (_a = this.fields) === null || _a === void 0 ? void 0 : _a.some((f) => f.filterable &&
+      [
+        FormFieldType.autocomplete,
+        FormFieldType.radio,
+        FormFieldType.date,
+        FormFieldType.datetime,
+        FormFieldType.checkbox,
+        FormFieldType.toggle,
+        FormFieldType.segment,
+        FormFieldType.location,
+        FormFieldType.catalog,
+        FormFieldType.tags
+      ].includes(f.type));
   }
   getDisplayValue(field, v) {
     if (v === true || (v && v._id === true)) {
@@ -171,16 +157,7 @@ export class YooEntitySearchFiltersComponent {
   }
   isChecked(item, field) {
     var _a;
-    let value;
-    if (isString(item)) {
-      value = item;
-    }
-    else if (isObject(item) || field.idOnly) {
-      value = (_a = item) === null || _a === void 0 ? void 0 : _a._id;
-    }
-    else {
-      value = item;
-    }
+    const value = isString(item) ? item : isObject(item) || field.idOnly ? (_a = item) === null || _a === void 0 ? void 0 : _a._id : item;
     for (const filter of this.filters) {
       if (filter.fieldname === field.name && filter.fieldfiltername === (field.filterName || field.name)) {
         return filter.values.indexOf(value) > -1;
@@ -190,30 +167,26 @@ export class YooEntitySearchFiltersComponent {
   }
   renderMenuItem(values, field, type) {
     if (type === 'ref' || type === 'subquery' || type === 'toggle') {
-      return h("li", { class: "menu-item" },
-        h("yoo-form-toggle", { value: this.isChecked(true, field), onInputChanged: (ev) => this.onSimpleFilter(null, ev.detail, field, type) }));
+      return (h("li", { class: "menu-item" },
+        h("yoo-form-toggle", { value: this.isChecked(true, field), onInputChanged: (ev) => this.onSimpleFilter(null, ev.detail, field, type) })));
     }
     else {
-      return values.map((v) => {
-        return [
-          h("li", { class: "menu-item", onClick: (ev) => this.onSimpleFilter(ev, v, field, type) },
-            h("div", { class: "menu-item-title" },
-              " ",
-              this.getDisplayValue(field, v),
-              " "),
-            h("yoo-form-checkbox", { value: this.isChecked(v, field) })),
-          h("div", { class: "border" })
-        ];
-      });
+      return values.map((v) => [
+        h("li", { class: "menu-item", onClick: (ev) => this.onSimpleFilter(ev, v, field, type) },
+          h("div", { class: "menu-item-title" },
+            " ",
+            this.getDisplayValue(field, v),
+            " "),
+          h("yoo-form-checkbox", { value: this.isChecked(v, field) })),
+        h("div", { class: "border" })
+      ]);
     }
   }
   renderAllAutocomplete(fields) {
-    if (fields) {
-      const filteredFields = fields.filter((f) => filterIsAutocomplete(f) || filterIsRadio(f));
-      if (filteredFields === null || filteredFields === void 0 ? void 0 : filteredFields.length) {
-        const { slides, data } = filterRenderFormDynamic(filteredFields, this.filters, this.formAutocompletes);
-        return h("yoo-form-dynamic", { class: "inline margin-top", ref: (el) => (this.formAutocompletes = el), animated: false, showRecap: false, slides: slides, data: data, hideOptional: true, onFieldChanged: (ev) => this.onAutocompleteChange(ev), onFieldFetchData: (ev) => this.onFieldFetchData(ev), onFieldFetchCustomData: (ev) => this.onFieldFetchCustomData(ev) });
-      }
+    const filteredFields = fields.filter((f) => filterIsAutocomplete(f) || filterIsRadio(f));
+    if (filteredFields === null || filteredFields === void 0 ? void 0 : filteredFields.length) {
+      const { slides, data } = filterRenderFormDynamic(filteredFields, this.filters, this.formAutocompletes);
+      return (h("yoo-form-dynamic", { class: "inline margin-top", ref: (el) => (this.formAutocompletes = el), animated: false, showRecap: false, slides: slides, data: data, hideOptional: true, onFieldChanged: (ev) => this.onAutocompleteChange(ev), onFieldFetchData: (ev) => this.onFieldFetchData(ev), onFieldFetchCustomData: (ev) => this.onFieldFetchCustomData(ev) }));
     }
   }
   renderUl(field) {
@@ -228,68 +201,34 @@ export class YooEntitySearchFiltersComponent {
         h("ul", { class: "menu" }, this.renderMenuItem(field.values, field, 'autocomplete'))));
     }
     else if (filterIsBoolean(field)) {
-      return (h("div", { class: { 'filter-container': true, 'flex': field.type === FormFieldType.ref || field.type === FormFieldType.subquery || field.type === FormFieldType.toggle } },
+      return (h("div", { class: { 'filter-container': true, flex: field.type === FormFieldType.ref || field.type === FormFieldType.subquery || field.type === FormFieldType.toggle } },
         h("div", { class: "menu-title" }, name ? h("div", { class: "title" }, title) : null),
         h("ul", { class: "menu" }, this.renderMenuItem([true, false], field, field.type))));
     }
     else if (filterIsDate(field)) {
-      const newField = {
-        ...field,
-        // name: this.getFieldFilterName(field),
-        required: false,
-        clearable: true
-      };
+      const newField = { ...field, required: false, clearable: true };
       this.cleanupNewField(newField);
       const filter = this.filters.find((f) => f.fieldname === field.name && f.fieldfiltername === (field.filterName || field.name));
-      let value = null;
-      if (filter) {
-        value = filter.values;
-      }
+      const value = filter ? filter.values : null;
       return (h("yoo-form-input-container", { field: newField, hideOptional: true },
         h("yoo-form-date-time", { onInputChanged: (ev) => this.onDateChange(ev, newField), isRange: true, clearable: true, value: value })));
     }
     else if (filterIsText(field)) {
-      const newField = {
-        ...field,
-        type: FormFieldType.text,
-        // name: this.getFieldFilterName(field),
-        required: false,
-        clearable: true
-      };
+      const newField = { ...field, type: FormFieldType.text, required: false, clearable: true };
       this.cleanupNewField(newField);
       const filter = this.filters.find((f) => f.fieldname === field.name && f.fieldfiltername === (field.filterName || field.name));
-      let value = null;
-      if (filter) {
-        value = filter.values;
-      }
+      const value = filter ? filter.values : null;
       return (h("yoo-form-input-container", { field: newField, hideOptional: true },
         h("yoo-form-input", { onInputChanged: (ev) => this.onTextChange(ev, newField), clearable: true, value: value })));
     }
     else if (filterIsNumber(field)) {
-      const newField = {
-        ...field,
-        // name: this.getFieldFilterName(field),
-        required: false,
-        clearable: true
-      };
+      const newField = { ...field, required: false, clearable: true };
       this.cleanupNewField(newField);
-      const slides = [
-        {
-          title: 'YOOBICGENERAL',
-          items: [
-            { name: 'min', type: FormFieldType.number, flex: 50 },
-            { name: 'max', type: FormFieldType.number, flex: 50 } // field.type
-          ]
-        }
-      ];
+      const slides = [{ title: 'YOOBICGENERAL', items: [{ name: 'min', type: FormFieldType.number, flex: 50 }, { name: 'max', type: FormFieldType.number, flex: 50 }] }];
       const filter = this.filters.find((f) => f.fieldname === field.name && f.fieldfiltername === (field.filterName || field.name));
-      let data = {};
-      if (filter) {
-        data = filter.values;
-      }
-      const retVal = (h("yoo-form-input-container", { field: newField, hideOptional: true },
+      const data = filter ? filter.values : {};
+      return (h("yoo-form-input-container", { field: newField, hideOptional: true },
         h("yoo-form-dynamic", { class: "inline inline-narrow flex", animated: false, showRecap: false, slides: slides, data: data, hideOptional: true, onDataChanged: (ev) => this.onNumberChange(ev, field) })));
-      return retVal;
     }
     return null;
   }
@@ -297,16 +236,10 @@ export class YooEntitySearchFiltersComponent {
     filterCleanupNewField(newField);
   }
   render() {
-    return h(Host, { class: getAppContext(this.host) },
-      h("div", { class: "outer-container" },
-        this.header && this.hasFilters() ? h("div", { class: "heading" }, translate(this.header)) : null,
-        this.fields
-          ? this.renderAllAutocomplete(this.fields) : null,
-        this.fields
-          ? this.fields.filter((f) => !filterIsAutocomplete(f)).map((field) => {
-            return this.renderUl(field);
-          })
-          : null));
+    return (h(Host, { class: getAppContext(this.host) },
+      this.header && this.hasFilters() ? h("div", { class: "heading" }, translate(this.header)) : null,
+      this.fields ? this.renderAllAutocomplete(this.fields) : null,
+      this.fields ? this.fields.filter((f) => !filterIsAutocomplete(f)).map((field) => this.renderUl(field)) : null));
   }
   static get is() { return "yoo-entity-search-filters"; }
   static get encapsulation() { return "shadow"; }
@@ -326,7 +259,7 @@ export class YooEntitySearchFiltersComponent {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
@@ -349,7 +282,7 @@ export class YooEntitySearchFiltersComponent {
         }
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
@@ -369,7 +302,7 @@ export class YooEntitySearchFiltersComponent {
         }
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""

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

@@ -16,6 +16,7 @@ export class YooFormCaptureComponent {
     this.type = 'photo';
     this.min = 1;
     this.max = 1;
+    this.allowCamera = true;
     this.validators = [];
     this.isProcessingPhoto = true;
     this.isSelectorMode = false;
@@ -956,7 +957,7 @@ export class YooFormCaptureComponent {
         handler: () => this.capture(null, index)
       });
     }
-    else if (!isNativeMobile() && this.type === 'photo') {
+    else if (!isNativeMobile() && this.type === 'photo' && this.allowCamera) {
       this.devices = await getVideoDevices();
       if (((_a = this.devices) === null || _a === void 0 ? void 0 : _a.length) > 0) {
         const separator = isWeb(this.host) ? ': ' : ':<br/> ';
@@ -2201,6 +2202,24 @@ export class YooFormCaptureComponent {
       "attribute": "allow-annotate",
       "reflect": false
     },
+    "allowCamera": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "allow-camera",
+      "reflect": false,
+      "defaultValue": "true"
+    },
     "isImageRecognition": {
       "type": "boolean",
       "mutable": false,

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

@@ -206,6 +206,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --slide-pagination-space: var(--spacing-04, 0.25rem);
   --pagination-height: var(--spacing-16, 1rem);
   --media-min-height: 11.25rem;
+  display: block;
+  height: fit-content;
 }
 :host yoo-swipe-container {
   --swiper-background: var(--dark, #000000);
@@ -416,6 +418,10 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --editor-background: var(--light);
 }
 
+:host([hidden]) {
+  display: none;
+}
+
 :host(.overlay) {
   position: relative;
 }

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

@@ -233,7 +233,7 @@ export class YooFormCarouselComponent {
       return h("yoo-audio-player", { onClick: ev => ev === null || ev === void 0 ? void 0 : ev.stopPropagation(), class: "audio-player", src: src });
     }
     else if (type === 'document') {
-      return h("yoo-form-document", { class: "expanded", isPdf: this.isPdf, extraClass: "feed", showDialog: true, showActionSheet: isNativeMobile() && isPdf(src), document: src });
+      return h("yoo-form-document", { class: "expanded", isPdf: this.isPdf, hideSecondaryActions: this.hideSecondaryActions, extraClass: "feed", showDialog: true, showActionSheet: isNativeMobile() && isPdf(src), document: src });
     }
   }
   renderImage(src, index) {
@@ -348,8 +348,9 @@ export class YooFormCarouselComponent {
       h("slot", { name: "end" })));
   }
   render() {
+    var _a;
     const multiple = this.isMultiMedia(this.mediaSrc);
-    return (h(Host, { class: {
+    return (h(Host, { hidden: !((_a = this.mediaSrc) === null || _a === void 0 ? void 0 : _a.length), class: {
         ...getAppContext(this.host),
         [this.mediaType]: true,
         preview: this.previewMode,
@@ -842,6 +843,23 @@ export class YooFormCarouselComponent {
       "attribute": "display-photo-counter",
       "reflect": false,
       "defaultValue": "true"
+    },
+    "hideSecondaryActions": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "hide-secondary-actions",
+      "reflect": false
     }
   }; }
   static get states() { return {

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

@@ -1,6 +1,7 @@
 import { translateMulti } from '@shared/utils';
 import { Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';
 import { showSlidesMedia } from '../../../../utils/helpers/common-helpers';
+import { hasDuplicates } from '../../../../utils/helpers/draggable-tags-helpers';
 import { hasWarnings, isSelected, onItemSelect, prepareChoice, updateValue, updateValues } from '../form-choice-helpers';
 export class YooFormChoiceImageComponent {
   constructor() {
@@ -22,37 +23,37 @@ export class YooFormChoiceImageComponent {
   get hasEmptyValues() {
     return this.values.length >= 2 && !!this.values.filter(({ image, text }) => (image && !text) || (!image && text)).length;
   }
+  get hasDuplicateTexts() {
+    var _a;
+    return hasDuplicates((_a = this.values) === null || _a === void 0 ? void 0 : _a.map(v => typeof v === 'string' ? v : v === null || v === void 0 ? void 0 : v.text));
+  }
   componentWillLoad() {
+    var _a;
+    this.answer = (Array.isArray(this.answer) && ((_a = this.answer) === null || _a === void 0 ? void 0 : _a.length)) ? this.answer.map(a => (a === null || a === void 0 ? void 0 : a[this.hasDuplicateTexts ? 'image' : 'text']) || a) : this.answer;
     prepareChoice(this);
   }
   componentDidLoad() {
     hasWarnings(this.values, this, this.hasEmptyValues && ['NOEMPTYVALUES']);
   }
-  renderImage(image, text, values, index) {
+  renderImage(image, text, index) {
+    var _a;
+    const item = this.hasDuplicateTexts ? image : text;
     const readonly = this.readonly || this.isPdf;
-    const answer = [].concat(this.answer).map(a => { var _a; return (_a = a.text) !== null && _a !== void 0 ? _a : a; });
-    const noValidation = !((answer === null || answer === void 0 ? void 0 : answer.length) > 0);
-    const isCorrect = answer.includes(text);
-    const onOpenImage = (values, index) => showSlidesMedia(this.host, { items: values.map(({ image }) => ({ value: image })), currentSlideIndex: index, showBottomContainer: false });
-    return (h("div", { class: "image-container", onClick: () => this.isHistory && onOpenImage(values, index), style: this.animated ? { '--choice-index': index.toString() } : {} },
+    const noValidation = !((_a = this.answer) === null || _a === void 0 ? void 0 : _a.length);
+    const isCorrect = this.answer.includes(item);
+    const onOpenImage = () => showSlidesMedia(this.host, { items: this.values.map(({ image }) => ({ value: image })), currentSlideIndex: index, showBottomContainer: false });
+    return (h("div", { class: "image-container", onClick: () => this.isHistory && onOpenImage(), style: this.animated ? { '--choice-index': index.toString() } : {} },
       h("div", { class: { content: true, 'correct-answer': this.readonly && isCorrect && !noValidation, 'wrong-answer': this.readonly && !isCorrect && !noValidation } },
-        h("yoo-img", { cloudinaryOptions: { pad: true }, scaledUp: this.isPdf, src: image, onClick: () => !readonly && onItemSelect(text, this) }),
+        h("yoo-img", { cloudinaryOptions: { pad: true }, scaledUp: this.isPdf, src: image, onClick: () => !readonly && onItemSelect(item, this) }),
         !readonly && [
-          h("yoo-form-checkbox", { value: isSelected(text, this.selection), onClick: () => onItemSelect(text, this), animated: this.animated }),
-          h("yoo-tag", { color: "dark-60", icon: "maximize", iconOnlyColor: "light", size: "small", onClick: () => onOpenImage(values, index) })
+          h("yoo-form-checkbox", { value: isSelected(item, this.selection), onClick: () => onItemSelect(item, this), animated: this.animated }),
+          h("yoo-tag", { color: "dark-60", icon: "maximize", iconOnlyColor: "light", size: "small", onClick: () => onOpenImage() })
         ]),
       text && h("div", { class: "text truncate" }, translateMulti(text))));
   }
   renderImages() {
-    let values = this.choices || [];
-    if (this.readonly && this.value) {
-      const answers = Array.isArray(this.value) ? this.value : [this.value];
-      values = values.filter(({ text }) => answers.some((answer) => answer === text));
-    }
-    return values.map((value, index) => {
-      const { text, image } = value || {};
-      return image && this.renderImage(image, text, values, index);
-    });
+    var _a;
+    return (_a = this.values) === null || _a === void 0 ? void 0 : _a.map(({ text, image }, index) => image && this.renderImage(image, text, index));
   }
   renderBanner() {
     return this.livePreview && !this.readonly && h("yoo-banner", null,
@@ -238,7 +239,7 @@ export class YooFormChoiceImageComponent {
     },
     "answer": {
       "type": "unknown",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "(string | Pick<IFormChoiceValue, 'text' | 'image'>)[]",
         "resolved": "(string | Pick<IFormChoiceValue, \"image\" | \"text\">)[]",

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

@@ -400,18 +400,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   display: block;
   width: 100%;
   max-width: 30rem;
-  margin: 0 auto;
-}
-:host p {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  margin: 0;
-  padding: var(--spacing-16, 1rem);
-  overflow: hidden;
-  font-size: var(--font-size-14, 0.875rem);
-  text-align: center;
 }
 :host yoo-banner {
   height: 0;
@@ -487,8 +475,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .draggable[type=image] {
   padding: 0;
 }
-:host .connectable[type=image]:not([data-hit]),
-:host .draggable[type=image]:not([data-hit]) {
+:host .connectable[type=image]:not([hit]),
+:host .draggable[type=image]:not([hit]) {
   background-color: transparent;
 }
 :host .connectable[type=image][hit] yoo-img,
@@ -496,17 +484,49 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   opacity: 0.6;
   transition: opacity 0.25s ease-in-out;
 }
+:host .connectable[type=image] > *:not(yoo-icon),
+:host .draggable[type=image] > *:not(yoo-icon) {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
 :host .connectable[type=text][hit],
 :host .draggable[type=text][hit] {
   background-color: var(--stable-light, #f1f1f1);
 }
+:host .connectable[type=text] p,
+:host .draggable[type=text] p {
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  margin: 0;
+  padding: var(--spacing-16, 1rem);
+  overflow: hidden;
+  font-size: var(--font-size-14, 0.875rem);
+  text-align: center;
+}
+@supports (display: -webkit-box) {
+  :host .connectable[type=text] p,
+:host .draggable[type=text] p {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+}
+:host .connectable[type=text] > *:not(yoo-icon),
+:host .draggable[type=text] > *:not(yoo-icon) {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  left: 0;
+  transform: translateY(-50%);
+}
 :host .connectable > *:not(yoo-icon),
 :host .draggable > *:not(yoo-icon) {
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
 }
 :host .draggable {
   z-index: 1;

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

@@ -176,6 +176,7 @@ export class YooFormConnectComponent {
       const onDragStartElement = () => {
         this.blockMoves.emit(true);
         draggableElement.removeAttribute('hit');
+        draggableElement.style.zIndex = '2';
       };
       const onDragElement = () => {
         var _a, _b;
@@ -207,6 +208,7 @@ export class YooFormConnectComponent {
       };
       const onReleaseElement = async () => {
         await gsapTo(draggableElement, this.animated ? 0.25 : 0, { x: 0, y: 0 });
+        draggableElement.style.removeProperty('z-index');
         if (tempConnectableElement) {
           currentDraggable.connectableId = tempConnectableElement.id;
           [...this.connectableElements, ...this.draggableElements].forEach(e => e.removeAttribute('hit'));
@@ -241,15 +243,6 @@ export class YooFormConnectComponent {
       lastDraggable.connectableId = lastConectableId;
     }
   }
-  truncateValue(valueToTruncate) {
-    if (valueToTruncate) {
-      const MAX_LENGTH = 50;
-      const translatedValue = translateMulti(valueToTruncate);
-      const valueLength = translatedValue.length;
-      const isTruncabled = valueLength > MAX_LENGTH;
-      return isTruncabled ? translatedValue.substr(0, MAX_LENGTH).concat('...') : translatedValue;
-    }
-  }
   renderCorrectionIcon(value) {
     const getCouple = (values) => values === null || values === void 0 ? void 0 : values.find(v => v.includes(value));
     const isCorrect = isEqual(getCouple(this.value), getCouple(this.answer));
@@ -285,7 +278,7 @@ export class YooFormConnectComponent {
         ...(isConnected && connectedAttributes), hit: !!(hit === null || hit === void 0 ? void 0 : hit.value) && isDraggable, type: isImage ? 'image' : 'text'
       };
       return !!value && h("div", { ...tileAttr, id: id, key: id, class: name, onClick: () => { isDraggable ? onDraggableClick(item) : onConnectableClick(item); } },
-        !isImage ? h("p", null, this.truncateValue(value)) : [h("yoo-img", { type: "background", src: value }), h("div", { id: "overlay" })],
+        !isImage ? h("p", null, translateMulti(value)) : [h("yoo-img", { type: "background", src: value }), h("div", { id: "overlay" })],
         this.readonly && this.renderCorrectionIcon(value));
     })));
   }

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

@@ -80,6 +80,7 @@ export class YooFormDocumentComponent {
     const getAnimation = (enterLeave) => (isWeb(this.host) ? `fade${enterLeave}Animation` : `slideY${enterLeave}Animation`);
     modal.document = Object.assign(this.document, { _downloadURL: base64 || ((_a = this.document) === null || _a === void 0 ? void 0 : _a._downloadURL) });
     modal.allowOrientation = this.allowOrientation;
+    modal.hideSecondaryActions = this.hideSecondaryActions;
     const type = getType(this.document);
     modal.modalMode = type && type === 'video';
     showModal(modal, {}, '', getAnimation('Enter'), getAnimation('Leave'), true);
@@ -244,6 +245,23 @@ export class YooFormDocumentComponent {
       "attribute": "show-action-sheet",
       "reflect": false
     },
+    "hideSecondaryActions": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "hide-secondary-actions",
+      "reflect": false
+    },
     "mode": {
       "type": "string",
       "mutable": false,

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

@@ -45,7 +45,7 @@ export class YooFormDocumentDialogComponent {
     }
   }
   onInitDocumentActions() {
-    if (this.selectionMode) {
+    if (this.selectionMode || this.hideSecondaryActions) {
       return;
     }
     this.documentSecondaryActions = [
@@ -532,6 +532,23 @@ export class YooFormDocumentDialogComponent {
       },
       "attribute": "selection-mode",
       "reflect": false
+    },
+    "hideSecondaryActions": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "hide-secondary-actions",
+      "reflect": false
     }
   }; }
   static get states() { return {