@yoobic/yobi 8.6.0-4 → 8.6.0-5

package/dist/collection/components/entities/entity/entity.js

@@ -126,7 +126,7 @@ export class YooEntityComponent {
     modal.modalTitle = ((_b = this.item) === null || _b === void 0 ? void 0 : _b._filename) || translate('YOOBICDOCUMENT');
     const type = getType(this.item);
     modal.modalMode = type && type === 'video';
-    showModal(modal, {}, '', getAnimation('Enter'), getAnimation('Leave'), true);
+    showModal({ component: modal, enterAnimation: getAnimation('Enter'), leaveAnimation: getAnimation('Leave'), showBackdrop: true });
   }
   onEmbeddedEntityClicked(event) {
     event.stopPropagation();
@@ -785,7 +785,7 @@ export class YooEntityComponent {
     return address;
   }
   renderCardList(extraClasses) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63, _64;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60;
     let entry = {};
     if (this.entityMapping) {
       entry = this.entityMapping(this.item, this.entityType, this.displayType);
@@ -1405,66 +1405,6 @@ export class YooEntityComponent {
         allowCustomHtml: true
       };
     }
-    else if (this.entityType === 'violetproducts') {
-      const product = this.item;
-      let subheadings = [product.description];
-      if (((_19 = this.item.offers) === null || _19 === void 0 ? void 0 : _19.length) && ((_20 = this.item.offers[0].skus) === null || _20 === void 0 ? void 0 : _20.length) && ((_21 = this.item.offers[0].skus[0]) === null || _21 === void 0 ? void 0 : _21.sale_price)) {
-        subheadings = [pipes.currency.transform(this.item.offers[0].skus[0].sale_price / 100, { strictPrecision: false, customSymbol: this.item.offers[0].skus[0].currency, forceSymbol: true })];
-      }
-      if (!product.available) {
-        extraClasses += ' outofstock ';
-      }
-      entry = {
-        heading: product.title || product.name,
-        subheadings,
-        tags: product.tags,
-        imgSrc: product.default_image_url,
-        avatarSize: 'large',
-        avatarFrame: 'square',
-        contained: true,
-        showRightArrow: true
-      };
-    }
-    else if (this.entityType === 'violetproductofferskus') {
-      const sku = this.item;
-      entry = {
-        heading: sku.name,
-        imgSrc: get(sku, 'albums[0].primary_media.url') || get(this.item, 'product.default_image_url'),
-        avatarSize: 'extra-extra-large',
-        avatarFrame: 'square',
-        contained: true
-      };
-    }
-    else if (this.entityType === 'violetbasketitems') {
-      const sku = (_22 = this.item) === null || _22 === void 0 ? void 0 : _22.sku;
-      const price = (sku.sale_price * (this.item.quantity || 1)) / 100;
-      const subheadings = [pipes.currency.transform(price, { strictPrecision: false, customSymbol: sku.currency, forceSymbol: true })];
-      entry = {
-        heading: sku.name,
-        subheadings,
-        imgSrc: get(sku, 'albums[0].primary_media.url') || get(this.item, 'product.default_image_url'),
-        avatarSize: 'large',
-        avatarFrame: 'square',
-        contained: true,
-        showRightArrow: true
-      };
-    }
-    else if (this.entityType === 'violetshippingmethods') {
-      const shipping = this.item;
-      entry = {
-        heading: shipping.label + ' - ' + (shipping.price / 100).toLocaleString(),
-        subheadings: [shipping.carrier]
-      };
-    }
-    else if (this.entityType === 'liveshoppings') {
-      const shopping = this.item;
-      entry = {
-        heading: shopping.title,
-        date: isWeb(this.host) || !shopping.date ? null : pipes.timeAgo.transform(shopping.date),
-        imgSrc: shopping.image,
-        subheadings: [shopping.description]
-      };
-    }
     else if (this.entityType === 'arexperience') {
       const arExperience = this.item;
       entry = {
@@ -1478,11 +1418,11 @@ export class YooEntityComponent {
       entry = {
         heading: arModel.product ? arModel.product.title : 'YOOBICNA',
         tagElements: arModel.experience ? [{ innerHTML: translate((arModel.experience.mode || 'object').toUpperCase()), color: 'dark' }] : null,
-        topLeftBadge: ((_23 = arModel.photos) === null || _23 === void 0 ? void 0 : _23.length) > 0 ? arModel.photos.length.toLocaleString() : null,
+        topLeftBadge: ((_19 = arModel.photos) === null || _19 === void 0 ? void 0 : _19.length) > 0 ? arModel.photos.length.toLocaleString() : null,
         subheadings: [arModel.product ? arModel.product.reference : '', arModel.rating ? translate('RATING') + ' ' + arModel.rating.toLocaleString() : null],
         tags: arModel.experience ? [arModel.experience.name] : null,
-        icon: ((_25 = (_24 = arModel.product) === null || _24 === void 0 ? void 0 : _24.image) === null || _25 === void 0 ? void 0 : _25._downloadURL) ? null : 'photo-library',
-        imgSrc: ((_27 = (_26 = arModel.product) === null || _26 === void 0 ? void 0 : _26.image) === null || _27 === void 0 ? void 0 : _27._downloadURL) ? arModel.product.image._downloadURL : null
+        icon: ((_21 = (_20 = arModel.product) === null || _20 === void 0 ? void 0 : _20.image) === null || _21 === void 0 ? void 0 : _21._downloadURL) ? null : 'photo-library',
+        imgSrc: ((_23 = (_22 = arModel.product) === null || _22 === void 0 ? void 0 : _22.image) === null || _23 === void 0 ? void 0 : _23._downloadURL) ? arModel.product.image._downloadURL : null
       };
     }
     else if (this.entityType === 'algorithm') {
@@ -1505,14 +1445,14 @@ export class YooEntityComponent {
         subheadings: [
           productBatch.product ? productBatch.product.reference : '',
           ...(getSession().user && getSession().user.locationRef === productBatch.locationRef
-            ? compact([((_28 = this.extraClass) === null || _28 === void 0 ? void 0 : _28.indexOf('show-aisle')) >= 0 && productBatch.aisle ? productBatch.aisle.title : null])
-            : ((_29 = productBatch.location) === null || _29 === void 0 ? void 0 : _29.title)
-              ? [productBatch.location.title + ' - ' + (((_30 = productBatch.aisle) === null || _30 === void 0 ? void 0 : _30.title) || '')]
+            ? compact([((_24 = this.extraClass) === null || _24 === void 0 ? void 0 : _24.indexOf('show-aisle')) >= 0 && productBatch.aisle ? productBatch.aisle.title : null])
+            : ((_25 = productBatch.location) === null || _25 === void 0 ? void 0 : _25.title)
+              ? [productBatch.location.title + ' - ' + (((_26 = productBatch.aisle) === null || _26 === void 0 ? void 0 : _26.title) || '')]
               : [])
         ],
         tags: productBatch.tags,
-        icon: productBatch.product.image && ((_32 = (_31 = productBatch.product) === null || _31 === void 0 ? void 0 : _31.image) === null || _32 === void 0 ? void 0 : _32._downloadURL) ? null : 'photo-library',
-        imgSrc: ((_34 = (_33 = productBatch.product) === null || _33 === void 0 ? void 0 : _33.image) === null || _34 === void 0 ? void 0 : _34._downloadURL) ? productBatch.product.image._downloadURL : null
+        icon: productBatch.product.image && ((_28 = (_27 = productBatch.product) === null || _27 === void 0 ? void 0 : _27.image) === null || _28 === void 0 ? void 0 : _28._downloadURL) ? null : 'photo-library',
+        imgSrc: ((_30 = (_29 = productBatch.product) === null || _29 === void 0 ? void 0 : _29.image) === null || _30 === void 0 ? void 0 : _30._downloadURL) ? productBatch.product.image._downloadURL : null
       };
       if (productBatch.archived) {
         extraClasses += ' archived ';
@@ -1549,7 +1489,7 @@ export class YooEntityComponent {
         heading: product.title,
         subheadings,
         date: isPresent(this.item.description) ? this.item.description : null,
-        imgSrc: ((_35 = product === null || product === void 0 ? void 0 : product.image) === null || _35 === void 0 ? void 0 : _35._downloadURL) ? product.image._downloadURL : null,
+        imgSrc: ((_31 = product === null || product === void 0 ? void 0 : product.image) === null || _31 === void 0 ? void 0 : _31._downloadURL) ? product.image._downloadURL : null,
         avatarFrame: 'square',
         // keep it explicit here to prevent to be overwritten by the autocomplete, with which the card-list is used in combination with, and that changes the size of the avatar to 'small' when only one product is selected
         // this case is described into the form-entity-value-pairs.spec tests
@@ -1727,7 +1667,7 @@ export class YooEntityComponent {
         heading: getUserDisplayName(user),
         rank: userrank.rank,
         points: userrank.points,
-        current: ((_36 = this.item) === null || _36 === void 0 ? void 0 : _36._id) === getSession().userId,
+        current: ((_32 = this.item) === null || _32 === void 0 ? void 0 : _32._id) === getSession().userId,
         hasSelectableIcon: true,
         users: [user]
       };
@@ -1746,10 +1686,10 @@ export class YooEntityComponent {
     else if (this.entityType === 'topusers') {
       entry = {
         heading: `${this.item.firstName} ${this.item.lastName}`,
-        rank: (_37 = this.item) === null || _37 === void 0 ? void 0 : _37.rank,
+        rank: (_33 = this.item) === null || _33 === void 0 ? void 0 : _33.rank,
         points: null,
         users: [this.item],
-        tagElementsInHeader: { tags: (_38 = this.item) === null || _38 === void 0 ? void 0 : _38.tagElements, location: 'end' }
+        tagElementsInHeader: { tags: (_34 = this.item) === null || _34 === void 0 ? void 0 : _34.tagElements, location: 'end' }
       };
     }
     else if (this.entityType === 'questions') {
@@ -1814,17 +1754,17 @@ export class YooEntityComponent {
         subheadings: [
           'Operation Id: ' + op.operationId,
           'Request Id: ' + op.requestId,
-          ((_39 = op.operation) === null || _39 === void 0 ? void 0 : _39.accessToken) ? 'User:' + getUserDisplayName(op.operation.accessToken) : null,
-          ((_42 = (_41 = (_40 = op.requestLog) === null || _40 === void 0 ? void 0 : _40.meta) === null || _41 === void 0 ? void 0 : _41.req) === null || _42 === void 0 ? void 0 : _42.headers) ? 'Origin/Referer:' + op.requestLog.meta.req.headers.origin || op.requestLog.meta.req.headers.referer : null,
-          ((_45 = (_44 = (_43 = op.requestLog) === null || _43 === void 0 ? void 0 : _43.meta) === null || _44 === void 0 ? void 0 : _44.req) === null || _45 === void 0 ? void 0 : _45.headers) && op.requestLog.meta.req.headers['yoobic-client-version']
+          ((_35 = op.operation) === null || _35 === void 0 ? void 0 : _35.accessToken) ? 'User:' + getUserDisplayName(op.operation.accessToken) : null,
+          ((_38 = (_37 = (_36 = op.requestLog) === null || _36 === void 0 ? void 0 : _36.meta) === null || _37 === void 0 ? void 0 : _37.req) === null || _38 === void 0 ? void 0 : _38.headers) ? 'Origin/Referer:' + op.requestLog.meta.req.headers.origin || op.requestLog.meta.req.headers.referer : null,
+          ((_41 = (_40 = (_39 = op.requestLog) === null || _39 === void 0 ? void 0 : _39.meta) === null || _40 === void 0 ? void 0 : _40.req) === null || _41 === void 0 ? void 0 : _41.headers) && op.requestLog.meta.req.headers['yoobic-client-version']
             ? 'Client Version:' + op.requestLog.meta.req.headers['yoobic-client-version']
             : null,
-          ((_48 = (_47 = (_46 = op.requestLog) === null || _46 === void 0 ? void 0 : _46.meta) === null || _47 === void 0 ? void 0 : _47.req) === null || _48 === void 0 ? void 0 : _48.headers) && op.requestLog.meta.req.headers['user-agent']
+          ((_44 = (_43 = (_42 = op.requestLog) === null || _42 === void 0 ? void 0 : _42.meta) === null || _43 === void 0 ? void 0 : _43.req) === null || _44 === void 0 ? void 0 : _44.headers) && op.requestLog.meta.req.headers['user-agent']
             ? 'User Agent:' + op.requestLog.meta.req.headers['user-agent']
             : null
         ],
         date: pipes.dateFormat.transform(op._ect, 'L LT'),
-        users: ((_49 = op.operation) === null || _49 === void 0 ? void 0 : _49.accessToken) ? [op.operation.accessToken] : null,
+        users: ((_45 = op.operation) === null || _45 === void 0 ? void 0 : _45.accessToken) ? [op.operation.accessToken] : null,
         tagElements: compact([
           op.isCreation
             ? {
@@ -1865,7 +1805,7 @@ export class YooEntityComponent {
     else if (this.entityType === 'formfield') {
       const formfield = this.item;
       const icon = getMobileFieldIcon(formfield.type) || formfield.icon;
-      const title = translateMulti(formfield.title || ((_50 = formfield.name) === null || _50 === void 0 ? void 0 : _50.toUpperCase()) || 'NA');
+      const title = translateMulti(formfield.title || ((_46 = formfield.name) === null || _46 === void 0 ? void 0 : _46.toUpperCase()) || 'NA');
       entry = {
         icon,
         heading: title,
@@ -1878,12 +1818,12 @@ export class YooEntityComponent {
       entry = {
         heading: translateMulti(battleList.title),
         subheadings: [lessonsCount + ' ' + translate(lessonsCount > 1 ? 'LESSONS' : 'LESSON')],
-        imgSrc: ((_51 = battleList.background) === null || _51 === void 0 ? void 0 : _51._downloadURL) ? battleList.background._downloadURL : null,
+        imgSrc: ((_47 = battleList.background) === null || _47 === void 0 ? void 0 : _47._downloadURL) ? battleList.background._downloadURL : null,
         avatarSize: this.isAutocompleteSelected() && this.item.avatarSize ? this.item.avatarSize : 'extra-extra-large',
         avatarFrame: 'square'
       };
     }
-    else if (this.entityType !== 'tag' && ((_53 = (_52 = this.customModel) === null || _52 === void 0 ? void 0 : _52.appearance) === null || _53 === void 0 ? void 0 : _53.size)) {
+    else if (this.entityType !== 'tag' && ((_49 = (_48 = this.customModel) === null || _48 === void 0 ? void 0 : _48.appearance) === null || _49 === void 0 ? void 0 : _49.size)) {
       entry = {};
       this.customModel.appearance.forEach((value, key) => {
         if (key === 'displayTypes') {
@@ -2001,16 +1941,16 @@ export class YooEntityComponent {
       }
       const title = this.useTranslate ? defaultTitle.toUpperCase() : defaultTitle;
       entry.heading = translateMulti(title);
-      if ((_54 = this.item) === null || _54 === void 0 ? void 0 : _54.description) {
+      if ((_50 = this.item) === null || _50 === void 0 ? void 0 : _50.description) {
         entry.subheadings = [translateMulti(this.item.description)];
       }
-      if ((_56 = (_55 = this.item) === null || _55 === void 0 ? void 0 : _55.background) === null || _56 === void 0 ? void 0 : _56._downloadURL) {
+      if ((_52 = (_51 = this.item) === null || _51 === void 0 ? void 0 : _51.background) === null || _52 === void 0 ? void 0 : _52._downloadURL) {
         entry.imgSrc = this.item.background._downloadURL;
       }
-      else if (((_57 = this.item) === null || _57 === void 0 ? void 0 : _57.background) && isString(this.item.background)) {
+      else if (((_53 = this.item) === null || _53 === void 0 ? void 0 : _53.background) && isString(this.item.background)) {
         entry.imgSrc = this.item.background;
       }
-      if ((_59 = (_58 = this.item) === null || _58 === void 0 ? void 0 : _58.icon) === null || _59 === void 0 ? void 0 : _59._downloadURL) {
+      if ((_55 = (_54 = this.item) === null || _54 === void 0 ? void 0 : _54.icon) === null || _55 === void 0 ? void 0 : _55._downloadURL) {
         entry.imgSrc = this.item.icon._downloadURL;
       }
       else if (this.item && isString(this.item.icon)) {
@@ -2034,7 +1974,7 @@ export class YooEntityComponent {
         const comment = this.item;
         entry = parseEntityCommentsForCardList(comment);
       }
-      if ((_60 = this.item) === null || _60 === void 0 ? void 0 : _60.badge) {
+      if ((_56 = this.item) === null || _56 === void 0 ? void 0 : _56.badge) {
         entry.tagElements = [{ innerHTML: this.item.badge, color: 'app-color' }];
       }
     }
@@ -2043,7 +1983,7 @@ export class YooEntityComponent {
       !this.isAutocompleteSelected() &&
       !this.hideUIFields &&
       this.customModel &&
-      ((_62 = (_61 = this.customModel.formFields) === null || _61 === void 0 ? void 0 : _61.filter((f) => f.showInCard)) === null || _62 === void 0 ? void 0 : _62.length) > 0) {
+      ((_58 = (_57 = this.customModel.formFields) === null || _57 === void 0 ? void 0 : _57.filter((f) => f.showInCard)) === null || _58 === void 0 ? void 0 : _58.length) > 0) {
       entry.uiFields = {
         fields: this.customModel.formFields.filter((f) => f.showInCard),
         data: this.item
@@ -2085,7 +2025,7 @@ export class YooEntityComponent {
     if (this.host.classList.contains('full-width')) {
       extraClasses += ' full-width ';
     }
-    if (((_63 = this.item) === null || _63 === void 0 ? void 0 : _63._id) === getSession().userId) {
+    if (((_59 = this.item) === null || _59 === void 0 ? void 0 : _59._id) === getSession().userId) {
       extraClasses += ' current ';
     }
     if (this.extraClass) {
@@ -2114,7 +2054,7 @@ export class YooEntityComponent {
           [extraClasses]: true,
           [this.entityType]: this.entityType !== undefined,
           'form-permission': this.host.classList.contains('form-permission')
-        } }, ((_64 = this.inlineActions) === null || _64 === void 0 ? void 0 : _64.length) > 0 && (h("span", { class: "slot-container", slot: "content-slot" }, this.inlineActions.map((action) => {
+        } }, ((_60 = this.inlineActions) === null || _60 === void 0 ? void 0 : _60.length) > 0 && (h("span", { class: "slot-container", slot: "content-slot" }, this.inlineActions.map((action) => {
         return (h("span", { class: action.cssClass, onClick: () => (action.handler ? action.handler(this.item) : null) }, action.text));
       })))));
     }
@@ -2810,7 +2750,7 @@ export class YooEntityComponent {
         "mutable": false,
         "complexType": {
           "original": "EntityType",
-          "resolved": "\"aisles\" | \"community\" | \"courses\" | \"dashboards\" | \"language\" | \"operations\" | \"pages\" | \"questions\" | \"scoring\" | \"tableau\" | \"tag\" | \"user\" | \"weekdays\" | \"aclPermission\" | \"aclPermissionList\" | \"aclRole\" | \"aislelist\" | \"algorithm\" | \"apps\" | \"arexperience\" | \"armodel\" | \"audiences\" | \"badges\" | \"blog\" | \"broadcasts\" | \"calendarEvents\" | \"campaignfilters\" | \"creationtypes\" | \"catalogs\" | \"certificates\" | \"channel\" | \"channels\" | \"charttype\" | \"communities\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"custommodels\" | \"days\" | \"emails\" | \"entitycomments\" | \"environnement\" | \"feeds\" | \"feedsComments\" | \"files\" | \"filesFolders\" | \"filesPdf\" | \"folders\" | \"formfield\" | \"geofilters\" | \"giphy\" | \"googlemaps\" | \"groups\" | \"hashtags\" | \"hierarchy\" | \"htmltemplates\" | \"icons\" | \"incentives\" | \"journeys\" | \"lessondescriptions\" | \"lessons\" | \"liveshoppings\" | \"locations\" | \"locationsaudience\" | \"locationspublic\" | \"locationtypes\" | \"markas\" | \"mediacapturedevices\" | \"memolist\" | \"memos\" | \"missiondatas\" | \"missiondescriptions\" | \"missiondescriptioncategories\" | \"missiondescriptionreviewhistories\" | \"missiondescriptiontemplates\" | \"missionfield\" | \"missions\" | \"notes\" | \"notifications\" | \"photos\" | \"plans\" | \"productbatch\" | \"productbatchlist\" | \"products\" | \"productweightpair\" | \"publicAPITokens\" | \"questionsAnswers\" | \"regex\" | \"reporttemplates\" | \"reviewapps\" | \"salesdata\" | \"scorms\" | \"scormcloud\" | \"shifts\" | \"slots\" | \"tableauShared\" | \"tagGroups\" | \"tenants\" | \"topusers\" | \"translations\" | \"type\" | \"unsplash\" | \"useraudience\" | \"userranks\" | \"userhighscores\" | \"userlearningmanager\" | \"usercourseinfo\" | \"users\" | \"violetproducts\" | \"violetproductofferskus\" | \"violetbasketitems\" | \"violetshippingmethods\" | \"version\" | \"videocallusers\" | \"visits\" | \"waitlistvisit\" | \"waitlistcustomer\" | \"waitliststats\" | \"plansorlessons\" | \"widgets\"",
+          "resolved": "\"aisles\" | \"community\" | \"courses\" | \"dashboards\" | \"language\" | \"operations\" | \"pages\" | \"questions\" | \"scoring\" | \"tableau\" | \"tag\" | \"user\" | \"weekdays\" | \"aclPermission\" | \"aclPermissionList\" | \"aclRole\" | \"aislelist\" | \"algorithm\" | \"apps\" | \"arexperience\" | \"armodel\" | \"audiences\" | \"badges\" | \"blog\" | \"broadcasts\" | \"calendarEvents\" | \"campaignfilters\" | \"creationtypes\" | \"catalogs\" | \"certificates\" | \"channel\" | \"channels\" | \"charttype\" | \"communities\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"custommodels\" | \"days\" | \"emails\" | \"entitycomments\" | \"environnement\" | \"feeds\" | \"feedsComments\" | \"files\" | \"filesFolders\" | \"filesPdf\" | \"folders\" | \"formfield\" | \"geofilters\" | \"giphy\" | \"googlemaps\" | \"groups\" | \"hashtags\" | \"hierarchy\" | \"htmltemplates\" | \"icons\" | \"incentives\" | \"journeys\" | \"lessondescriptions\" | \"lessons\" | \"locations\" | \"locationsaudience\" | \"locationspublic\" | \"locationtypes\" | \"markas\" | \"mediacapturedevices\" | \"memolist\" | \"memos\" | \"missiondatas\" | \"missiondescriptions\" | \"missiondescriptioncategories\" | \"missiondescriptionreviewhistories\" | \"missiondescriptiontemplates\" | \"missionfield\" | \"missions\" | \"notes\" | \"notifications\" | \"photos\" | \"plans\" | \"productbatch\" | \"productbatchlist\" | \"products\" | \"productweightpair\" | \"publicAPITokens\" | \"questionsAnswers\" | \"regex\" | \"reporttemplates\" | \"reviewapps\" | \"salesdata\" | \"scorms\" | \"scormcloud\" | \"shifts\" | \"slots\" | \"tableauShared\" | \"tagGroups\" | \"tenants\" | \"topusers\" | \"translations\" | \"type\" | \"unsplash\" | \"useraudience\" | \"userranks\" | \"userhighscores\" | \"userlearningmanager\" | \"usercourseinfo\" | \"users\" | \"version\" | \"videocallusers\" | \"visits\" | \"waitlistvisit\" | \"waitlistcustomer\" | \"waitliststats\" | \"plansorlessons\" | \"widgets\"",
           "references": {
             "EntityType": {
               "location": "import",

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

@@ -157,7 +157,7 @@ export class YooEntitySearchComponent {
       this.fieldFetchData.emit(ev.detail);
     };
     modal.addEventListener('fieldFetchData', fieldFetchDataListener);
-    showModal(modal).then((ret) => {
+    showModal({ component: modal }).then((ret) => {
       if (modal) {
         modal.removeEventListener('fieldFetchData', fieldFetchDataListener);
         modal = null;

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

@@ -13,6 +13,10 @@ export class YooEntitySearchTagsComponent {
     this.expandedTags = undefined;
     this.selects = [];
     this.slidesOptions = undefined;
+    this.slidesOptions = {
+      spaceBetween: 10,
+      freeMode: true
+    };
   }
   componentWillLoad() {
     this.selects = this.values;

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

@@ -111,7 +111,16 @@ export class YooFormAutocompleteComponent {
       else if (isWeb(this.host)) {
         modalOptions = Object.assign(modalOptions, { hostElement: this.outerContainer, dialogContentElement: this.dialog });
       }
-      const ret = await showModal(this.dialog, modalOptions, isWeb(this.host) && !isExpanding ? 'context-menu' : isExpanding ? ' visible-overflow' : null, getModalAnimation('Enter', 'Y', { host: this.host }), getModalAnimation('Leave', 'Y', { host: this.host }), true, false, null, this.collectionName === 'giphy' ? './assets/logo/giphy.png' : null);
+      const ret = await showModal({
+        component: this.dialog,
+        componentProps: modalOptions,
+        cssClass: isWeb(this.host) && !isExpanding ? 'context-menu' : isExpanding ? ' visible-overflow' : null,
+        enterAnimation: getModalAnimation('Enter', 'Y', { host: this.host }),
+        leaveAnimation: getModalAnimation('Leave', 'Y', { host: this.host }),
+        showBackdrop: true,
+        displayFullscreenButton: false,
+        watermarkLogo: this.collectionName === 'giphy' ? './assets/logo/giphy.png' : null
+      });
       if (ret && !ret.overlayDismiss && !isWeb(this.host)) {
         await this.setValue(ret.data);
       }
@@ -1707,7 +1716,7 @@ export class YooFormAutocompleteComponent {
         "mutable": false,
         "complexType": {
           "original": "EntityType",
-          "resolved": "\"aisles\" | \"community\" | \"courses\" | \"dashboards\" | \"language\" | \"operations\" | \"pages\" | \"questions\" | \"scoring\" | \"tableau\" | \"tag\" | \"user\" | \"weekdays\" | \"aclPermission\" | \"aclPermissionList\" | \"aclRole\" | \"aislelist\" | \"algorithm\" | \"apps\" | \"arexperience\" | \"armodel\" | \"audiences\" | \"badges\" | \"blog\" | \"broadcasts\" | \"calendarEvents\" | \"campaignfilters\" | \"creationtypes\" | \"catalogs\" | \"certificates\" | \"channel\" | \"channels\" | \"charttype\" | \"communities\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"custommodels\" | \"days\" | \"emails\" | \"entitycomments\" | \"environnement\" | \"feeds\" | \"feedsComments\" | \"files\" | \"filesFolders\" | \"filesPdf\" | \"folders\" | \"formfield\" | \"geofilters\" | \"giphy\" | \"googlemaps\" | \"groups\" | \"hashtags\" | \"hierarchy\" | \"htmltemplates\" | \"icons\" | \"incentives\" | \"journeys\" | \"lessondescriptions\" | \"lessons\" | \"liveshoppings\" | \"locations\" | \"locationsaudience\" | \"locationspublic\" | \"locationtypes\" | \"markas\" | \"mediacapturedevices\" | \"memolist\" | \"memos\" | \"missiondatas\" | \"missiondescriptions\" | \"missiondescriptioncategories\" | \"missiondescriptionreviewhistories\" | \"missiondescriptiontemplates\" | \"missionfield\" | \"missions\" | \"notes\" | \"notifications\" | \"photos\" | \"plans\" | \"productbatch\" | \"productbatchlist\" | \"products\" | \"productweightpair\" | \"publicAPITokens\" | \"questionsAnswers\" | \"regex\" | \"reporttemplates\" | \"reviewapps\" | \"salesdata\" | \"scorms\" | \"scormcloud\" | \"shifts\" | \"slots\" | \"tableauShared\" | \"tagGroups\" | \"tenants\" | \"topusers\" | \"translations\" | \"type\" | \"unsplash\" | \"useraudience\" | \"userranks\" | \"userhighscores\" | \"userlearningmanager\" | \"usercourseinfo\" | \"users\" | \"violetproducts\" | \"violetproductofferskus\" | \"violetbasketitems\" | \"violetshippingmethods\" | \"version\" | \"videocallusers\" | \"visits\" | \"waitlistvisit\" | \"waitlistcustomer\" | \"waitliststats\" | \"plansorlessons\" | \"widgets\"",
+          "resolved": "\"aisles\" | \"community\" | \"courses\" | \"dashboards\" | \"language\" | \"operations\" | \"pages\" | \"questions\" | \"scoring\" | \"tableau\" | \"tag\" | \"user\" | \"weekdays\" | \"aclPermission\" | \"aclPermissionList\" | \"aclRole\" | \"aislelist\" | \"algorithm\" | \"apps\" | \"arexperience\" | \"armodel\" | \"audiences\" | \"badges\" | \"blog\" | \"broadcasts\" | \"calendarEvents\" | \"campaignfilters\" | \"creationtypes\" | \"catalogs\" | \"certificates\" | \"channel\" | \"channels\" | \"charttype\" | \"communities\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"custommodels\" | \"days\" | \"emails\" | \"entitycomments\" | \"environnement\" | \"feeds\" | \"feedsComments\" | \"files\" | \"filesFolders\" | \"filesPdf\" | \"folders\" | \"formfield\" | \"geofilters\" | \"giphy\" | \"googlemaps\" | \"groups\" | \"hashtags\" | \"hierarchy\" | \"htmltemplates\" | \"icons\" | \"incentives\" | \"journeys\" | \"lessondescriptions\" | \"lessons\" | \"locations\" | \"locationsaudience\" | \"locationspublic\" | \"locationtypes\" | \"markas\" | \"mediacapturedevices\" | \"memolist\" | \"memos\" | \"missiondatas\" | \"missiondescriptions\" | \"missiondescriptioncategories\" | \"missiondescriptionreviewhistories\" | \"missiondescriptiontemplates\" | \"missionfield\" | \"missions\" | \"notes\" | \"notifications\" | \"photos\" | \"plans\" | \"productbatch\" | \"productbatchlist\" | \"products\" | \"productweightpair\" | \"publicAPITokens\" | \"questionsAnswers\" | \"regex\" | \"reporttemplates\" | \"reviewapps\" | \"salesdata\" | \"scorms\" | \"scormcloud\" | \"shifts\" | \"slots\" | \"tableauShared\" | \"tagGroups\" | \"tenants\" | \"topusers\" | \"translations\" | \"type\" | \"unsplash\" | \"useraudience\" | \"userranks\" | \"userhighscores\" | \"userlearningmanager\" | \"usercourseinfo\" | \"users\" | \"version\" | \"videocallusers\" | \"visits\" | \"waitlistvisit\" | \"waitlistcustomer\" | \"waitliststats\" | \"plansorlessons\" | \"widgets\"",
           "references": {
             "EntityType": {
               "location": "import",
@@ -2020,7 +2029,7 @@ export class YooFormAutocompleteComponent {
         "mutable": false,
         "complexType": {
           "original": "EntityType",
-          "resolved": "\"aisles\" | \"community\" | \"courses\" | \"dashboards\" | \"language\" | \"operations\" | \"pages\" | \"questions\" | \"scoring\" | \"tableau\" | \"tag\" | \"user\" | \"weekdays\" | \"aclPermission\" | \"aclPermissionList\" | \"aclRole\" | \"aislelist\" | \"algorithm\" | \"apps\" | \"arexperience\" | \"armodel\" | \"audiences\" | \"badges\" | \"blog\" | \"broadcasts\" | \"calendarEvents\" | \"campaignfilters\" | \"creationtypes\" | \"catalogs\" | \"certificates\" | \"channel\" | \"channels\" | \"charttype\" | \"communities\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"custommodels\" | \"days\" | \"emails\" | \"entitycomments\" | \"environnement\" | \"feeds\" | \"feedsComments\" | \"files\" | \"filesFolders\" | \"filesPdf\" | \"folders\" | \"formfield\" | \"geofilters\" | \"giphy\" | \"googlemaps\" | \"groups\" | \"hashtags\" | \"hierarchy\" | \"htmltemplates\" | \"icons\" | \"incentives\" | \"journeys\" | \"lessondescriptions\" | \"lessons\" | \"liveshoppings\" | \"locations\" | \"locationsaudience\" | \"locationspublic\" | \"locationtypes\" | \"markas\" | \"mediacapturedevices\" | \"memolist\" | \"memos\" | \"missiondatas\" | \"missiondescriptions\" | \"missiondescriptioncategories\" | \"missiondescriptionreviewhistories\" | \"missiondescriptiontemplates\" | \"missionfield\" | \"missions\" | \"notes\" | \"notifications\" | \"photos\" | \"plans\" | \"productbatch\" | \"productbatchlist\" | \"products\" | \"productweightpair\" | \"publicAPITokens\" | \"questionsAnswers\" | \"regex\" | \"reporttemplates\" | \"reviewapps\" | \"salesdata\" | \"scorms\" | \"scormcloud\" | \"shifts\" | \"slots\" | \"tableauShared\" | \"tagGroups\" | \"tenants\" | \"topusers\" | \"translations\" | \"type\" | \"unsplash\" | \"useraudience\" | \"userranks\" | \"userhighscores\" | \"userlearningmanager\" | \"usercourseinfo\" | \"users\" | \"violetproducts\" | \"violetproductofferskus\" | \"violetbasketitems\" | \"violetshippingmethods\" | \"version\" | \"videocallusers\" | \"visits\" | \"waitlistvisit\" | \"waitlistcustomer\" | \"waitliststats\" | \"plansorlessons\" | \"widgets\"",
+          "resolved": "\"aisles\" | \"community\" | \"courses\" | \"dashboards\" | \"language\" | \"operations\" | \"pages\" | \"questions\" | \"scoring\" | \"tableau\" | \"tag\" | \"user\" | \"weekdays\" | \"aclPermission\" | \"aclPermissionList\" | \"aclRole\" | \"aislelist\" | \"algorithm\" | \"apps\" | \"arexperience\" | \"armodel\" | \"audiences\" | \"badges\" | \"blog\" | \"broadcasts\" | \"calendarEvents\" | \"campaignfilters\" | \"creationtypes\" | \"catalogs\" | \"certificates\" | \"channel\" | \"channels\" | \"charttype\" | \"communities\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"custommodels\" | \"days\" | \"emails\" | \"entitycomments\" | \"environnement\" | \"feeds\" | \"feedsComments\" | \"files\" | \"filesFolders\" | \"filesPdf\" | \"folders\" | \"formfield\" | \"geofilters\" | \"giphy\" | \"googlemaps\" | \"groups\" | \"hashtags\" | \"hierarchy\" | \"htmltemplates\" | \"icons\" | \"incentives\" | \"journeys\" | \"lessondescriptions\" | \"lessons\" | \"locations\" | \"locationsaudience\" | \"locationspublic\" | \"locationtypes\" | \"markas\" | \"mediacapturedevices\" | \"memolist\" | \"memos\" | \"missiondatas\" | \"missiondescriptions\" | \"missiondescriptioncategories\" | \"missiondescriptionreviewhistories\" | \"missiondescriptiontemplates\" | \"missionfield\" | \"missions\" | \"notes\" | \"notifications\" | \"photos\" | \"plans\" | \"productbatch\" | \"productbatchlist\" | \"products\" | \"productweightpair\" | \"publicAPITokens\" | \"questionsAnswers\" | \"regex\" | \"reporttemplates\" | \"reviewapps\" | \"salesdata\" | \"scorms\" | \"scormcloud\" | \"shifts\" | \"slots\" | \"tableauShared\" | \"tagGroups\" | \"tenants\" | \"topusers\" | \"translations\" | \"type\" | \"unsplash\" | \"useraudience\" | \"userranks\" | \"userhighscores\" | \"userlearningmanager\" | \"usercourseinfo\" | \"users\" | \"version\" | \"videocallusers\" | \"visits\" | \"waitlistvisit\" | \"waitlistcustomer\" | \"waitliststats\" | \"plansorlessons\" | \"widgets\"",
           "references": {
             "EntityType": {
               "location": "import",

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

@@ -171,7 +171,14 @@ export class YooFormAutocompleteDialogComponent {
   }
   onExpandGrid() {
     this.gridIsExpanded = true;
-    showModal(this.host, { height: 'medium' }, 'visible-overflow ', getModalAnimation('Enter', 'Y', { host: this.host }), getModalAnimation('Leave', 'Y', { host: this.host }), true).then(() => {
+    showModal({
+      component: this.host,
+      componentProps: { height: 'medium' },
+      cssClass: 'visible-overflow ',
+      enterAnimation: getModalAnimation('Enter', 'Y', { host: this.host }),
+      leaveAnimation: getModalAnimation('Leave', 'Y', { host: this.host }),
+      showBackdrop: true
+    }).then(() => {
       var _a;
       (_a = document.querySelector('yoo-modal:last-child')) === null || _a === void 0 ? void 0 : _a.remove();
       this.gridIsExpanded = false;
@@ -458,7 +465,7 @@ export class YooFormAutocompleteDialogComponent {
         "mutable": false,
         "complexType": {
           "original": "EntityType",
-          "resolved": "\"aisles\" | \"community\" | \"courses\" | \"dashboards\" | \"language\" | \"operations\" | \"pages\" | \"questions\" | \"scoring\" | \"tableau\" | \"tag\" | \"user\" | \"weekdays\" | \"aclPermission\" | \"aclPermissionList\" | \"aclRole\" | \"aislelist\" | \"algorithm\" | \"apps\" | \"arexperience\" | \"armodel\" | \"audiences\" | \"badges\" | \"blog\" | \"broadcasts\" | \"calendarEvents\" | \"campaignfilters\" | \"creationtypes\" | \"catalogs\" | \"certificates\" | \"channel\" | \"channels\" | \"charttype\" | \"communities\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"custommodels\" | \"days\" | \"emails\" | \"entitycomments\" | \"environnement\" | \"feeds\" | \"feedsComments\" | \"files\" | \"filesFolders\" | \"filesPdf\" | \"folders\" | \"formfield\" | \"geofilters\" | \"giphy\" | \"googlemaps\" | \"groups\" | \"hashtags\" | \"hierarchy\" | \"htmltemplates\" | \"icons\" | \"incentives\" | \"journeys\" | \"lessondescriptions\" | \"lessons\" | \"liveshoppings\" | \"locations\" | \"locationsaudience\" | \"locationspublic\" | \"locationtypes\" | \"markas\" | \"mediacapturedevices\" | \"memolist\" | \"memos\" | \"missiondatas\" | \"missiondescriptions\" | \"missiondescriptioncategories\" | \"missiondescriptionreviewhistories\" | \"missiondescriptiontemplates\" | \"missionfield\" | \"missions\" | \"notes\" | \"notifications\" | \"photos\" | \"plans\" | \"productbatch\" | \"productbatchlist\" | \"products\" | \"productweightpair\" | \"publicAPITokens\" | \"questionsAnswers\" | \"regex\" | \"reporttemplates\" | \"reviewapps\" | \"salesdata\" | \"scorms\" | \"scormcloud\" | \"shifts\" | \"slots\" | \"tableauShared\" | \"tagGroups\" | \"tenants\" | \"topusers\" | \"translations\" | \"type\" | \"unsplash\" | \"useraudience\" | \"userranks\" | \"userhighscores\" | \"userlearningmanager\" | \"usercourseinfo\" | \"users\" | \"violetproducts\" | \"violetproductofferskus\" | \"violetbasketitems\" | \"violetshippingmethods\" | \"version\" | \"videocallusers\" | \"visits\" | \"waitlistvisit\" | \"waitlistcustomer\" | \"waitliststats\" | \"plansorlessons\" | \"widgets\"",
+          "resolved": "\"aisles\" | \"community\" | \"courses\" | \"dashboards\" | \"language\" | \"operations\" | \"pages\" | \"questions\" | \"scoring\" | \"tableau\" | \"tag\" | \"user\" | \"weekdays\" | \"aclPermission\" | \"aclPermissionList\" | \"aclRole\" | \"aislelist\" | \"algorithm\" | \"apps\" | \"arexperience\" | \"armodel\" | \"audiences\" | \"badges\" | \"blog\" | \"broadcasts\" | \"calendarEvents\" | \"campaignfilters\" | \"creationtypes\" | \"catalogs\" | \"certificates\" | \"channel\" | \"channels\" | \"charttype\" | \"communities\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"custommodels\" | \"days\" | \"emails\" | \"entitycomments\" | \"environnement\" | \"feeds\" | \"feedsComments\" | \"files\" | \"filesFolders\" | \"filesPdf\" | \"folders\" | \"formfield\" | \"geofilters\" | \"giphy\" | \"googlemaps\" | \"groups\" | \"hashtags\" | \"hierarchy\" | \"htmltemplates\" | \"icons\" | \"incentives\" | \"journeys\" | \"lessondescriptions\" | \"lessons\" | \"locations\" | \"locationsaudience\" | \"locationspublic\" | \"locationtypes\" | \"markas\" | \"mediacapturedevices\" | \"memolist\" | \"memos\" | \"missiondatas\" | \"missiondescriptions\" | \"missiondescriptioncategories\" | \"missiondescriptionreviewhistories\" | \"missiondescriptiontemplates\" | \"missionfield\" | \"missions\" | \"notes\" | \"notifications\" | \"photos\" | \"plans\" | \"productbatch\" | \"productbatchlist\" | \"products\" | \"productweightpair\" | \"publicAPITokens\" | \"questionsAnswers\" | \"regex\" | \"reporttemplates\" | \"reviewapps\" | \"salesdata\" | \"scorms\" | \"scormcloud\" | \"shifts\" | \"slots\" | \"tableauShared\" | \"tagGroups\" | \"tenants\" | \"topusers\" | \"translations\" | \"type\" | \"unsplash\" | \"useraudience\" | \"userranks\" | \"userhighscores\" | \"userlearningmanager\" | \"usercourseinfo\" | \"users\" | \"version\" | \"videocallusers\" | \"visits\" | \"waitlistvisit\" | \"waitlistcustomer\" | \"waitliststats\" | \"plansorlessons\" | \"widgets\"",
           "references": {
             "EntityType": {
               "location": "import",

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

@@ -389,14 +389,17 @@ svg:not(:root) {
   text-align: right;
   cursor: pointer;
 }
-:host .outer-container .multiple .capture-status .status {
+:host .outer-container .multiple .capture-status .status-counters {
+  display: flex;
+}
+:host .outer-container .multiple .capture-status .status-counters .status {
   width: 100%;
   padding-right: var(--spacing-16, 1rem);
   color: var(--stable, #adadad);
   white-space: nowrap;
   text-align: start;
 }
-:host .outer-container .multiple .capture-status .status.max-reached {
+:host .outer-container .multiple .capture-status .status-counters .status.max-reached {
   color: var(--dark, #000000);
 }
 :host .outer-container .multiple .camera-containers {
@@ -987,7 +990,7 @@ svg:not(:root) {
     display: none;
   }
 }
-:host(.rtl) .outer-container .multiple .capture-status .status {
+:host(.rtl) .outer-container .multiple .capture-status .status-counters .status {
   padding-right: 0;
   padding-left: var(--spacing-16, 1rem);
 }

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

@@ -364,7 +364,7 @@ export class YooFormCaptureComponent {
     imageTag.addEventListener('fetchData', (ev) => {
       this.onFetchGridData(ev);
     });
-    return showModal(imageTag, null, '', 'slideYEnterAnimation', 'slideYLeaveAnimation');
+    return showModal({ component: imageTag, enterAnimation: 'slideYEnterAnimation', leaveAnimation: 'slideYLeaveAnimation' });
   }
   updateTagData(tag, index) {
     this.initTags();
@@ -401,7 +401,7 @@ export class YooFormCaptureComponent {
     if (isNativeMobile() && isIOS() && !isIphoneX()) {
       StatusBar.hide();
     }
-    return showModal(cameraPreviewer, null, `${extraClass} transparent`, 'slideYEnterAnimation', 'slideYLeaveAnimation').then((ret) => {
+    return showModal({ component: cameraPreviewer, cssClass: `${extraClass} transparent`, enterAnimation: 'slideYEnterAnimation', leaveAnimation: 'slideYLeaveAnimation' }).then((ret) => {
       if (isNativeMobile() && isIOS() && !isIphoneX()) {
         StatusBar.show();
       }
@@ -432,12 +432,16 @@ export class YooFormCaptureComponent {
     if (this.algorithm && this.algorithm.stitch && !useLibrary) {
       let stitchDirection = null;
       const buttons = [
-        { text: translate('TOPTOBOTTOM'), icon: 'big-arrow-down', handler: () => {
+        {
+          text: translate('TOPTOBOTTOM'), icon: 'big-arrow-down', handler: () => {
             stitchDirection = 'from-top';
-          }, separator: true },
-        { text: translate('LEFTTORIGHT'), icon: 'big-arrow-right', handler: () => {
+          }, separator: true
+        },
+        {
+          text: translate('LEFTTORIGHT'), icon: 'big-arrow-right', handler: () => {
             stitchDirection = 'from-left';
-          }, separator: true }
+          }, separator: true
+        }
       ];
       await showActionSheet(buttons, null, {}, null, null);
       if (stitchDirection) {
@@ -561,8 +565,13 @@ export class YooFormCaptureComponent {
   }
   async captureFromWebcam(device, index) {
     var _a;
-    const mediaData = (_a = (await showModal(Object.assign(document.createElement('yoo-form-capture-webcam-dialog'), { device }), null, !isWeb(this.host) ? '' : 'fullscreen', 'fadeEnterAnimation', 'fadeLeaveAnimation'))) === null || _a === void 0 ? void 0 : _a.data;
-    //  this.allowCrop(mediaData) && (mediaData = await this.onOpenCropper(mediaData));
+    let mediaData = (_a = (await showModal({
+      component: Object.assign(document.createElement('yoo-form-capture-webcam-dialog'), { device }),
+      cssClass: !isWeb(this.host) ? '' : 'fullscreen',
+      enterAnimation: 'fadeEnterAnimation',
+      leaveAnimation: 'fadeLeaveAnimation'
+    }))) === null || _a === void 0 ? void 0 : _a.data;
+    this.allowCrop(mediaData) && (mediaData = await this.onOpenCropper(mediaData));
     mediaData && await this.processMediaData(mediaData, index);
   }
   captureFromDisk(index) {
@@ -838,7 +847,7 @@ export class YooFormCaptureComponent {
       if (this.type === 'audio') {
         documentViewer.type = this.type;
       }
-      showModal(documentViewer, null, 'fullscreen');
+      showModal({ component: documentViewer, cssClass: 'fullscreen' });
     }
   }
   openGallery(index) {
@@ -966,7 +975,7 @@ export class YooFormCaptureComponent {
     photoView.imageRecognitionResults = this.imageRecognitionResults;
     photoView.imageRecognitionDisplay = this.algorithmDisplay;
     photoView.isStitch = this.isStitch();
-    showModal(photoView);
+    showModal({ component: photoView });
   }
   onShowMaximumCaptureReached() {
     const description = translate('MAXIMUMCAPTUREREACHED');
@@ -1340,7 +1349,7 @@ export class YooFormCaptureComponent {
       }
     }
     dialog.markers = markers;
-    showModal(dialog, null, '', 'slideYEnterAnimation', 'slideYLeaveAnimation', isWeb(this.host));
+    showModal({ component: dialog, enterAnimation: 'slideYEnterAnimation', leaveAnimation: 'slideYLeaveAnimation', showBackdrop: isWeb(this.host) });
   }
   renderDistance(index) {
     return [
@@ -1359,12 +1368,7 @@ export class YooFormCaptureComponent {
   }
   renderCaptureStatus() {
     const value = this.value || [];
-    return (value && (h("div", { class: { 'capture-status': true, 'image-reco': this.isImageRecognition } }, this.required && (h("div", { class: "status" }, value.length > this.min
-      ? translate('PHOTOTAKEN', { captured_number: `${this.min}/${this.min}` })
-      : translate('PHOTOTAKEN', { captured_number: `${value.length}/${this.min}` }))), !this.hideOptional && this.max && this.max > 0 && (h("div", { class: {
-        status: true,
-        'max-reached': value.length === this.max
-      } }, translate('MAXIMUMCAPTURE', { captured_number: `${value.length}/${this.max}` }))), value.length > 0 && (h("div", { class: "action", onClick: () => {
+    return (value && (h("div", { class: { 'capture-status': true, 'image-reco': this.isImageRecognition } }, h("div", { class: "status-counters" }, this.required && (h("div", { class: "status" }, translate('PHOTOTAKEN', { captured_number: `${value.length > this.min ? this.min : value.length}/${this.min}` }))), !this.hideOptional && this.max > 0 && (h("div", { class: { status: true, 'max-reached': value.length === this.max } }, translate('MAXIMUMCAPTURE', { captured_number: `${value.length}/${this.max}` })))), value.length > 0 && (h("div", { class: "action", onClick: () => {
         this.toggleSelectorMode();
       } }, translate('SELECT2'))))));
   }

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

@@ -258,7 +258,13 @@ export class YooFormCatalogComponent {
   onOpenCatalogDialog(product) {
     this.dialog = document.createElement('yoo-form-catalog-dialog');
     this.dialog.product = product;
-    showModal(this.dialog, { half: false }, null, getModalAnimation('Enter', 'X', { host: this.host }), getModalAnimation('Leave', 'X', { host: this.host }), true).then(() => {
+    showModal({
+      component: this.dialog,
+      componentProps: { half: false },
+      enterAnimation: getModalAnimation('Enter', 'X', { host: this.host }),
+      leaveAnimation: getModalAnimation('Leave', 'X', { host: this.host }),
+      showBackdrop: true
+    }).then(() => {
       this.dialog = null;
     });
   }

package/dist/collection/components/form/form-date-time/form-date-time.js

@@ -244,7 +244,15 @@ export class YooFormDateTimeComponent {
       this.dialog.style.boxShadow = 'var(--shadow-03)';
       this.dialog.style.backgroundColor = 'var(--light)';
     }
-    await showModal(this.dialog, web ? null : { half: true, coeffHalf: hasCalendar ? 0.66 : 0.33 }, web ? this.updateModalCssClass() : null, web ? this.getModalAnimation('Enter') : getModalAnimation('Enter', 'Y', { host: this.host }), web ? this.getModalAnimation('Leave') : getModalAnimation('Leave', 'Y', { host: this.host }), true, false);
+    await showModal({
+      component: this.dialog,
+      componentProps: web ? null : { half: true, coeffHalf: hasCalendar ? 0.66 : 0.33 },
+      cssClass: web ? this.updateModalCssClass() : null,
+      enterAnimation: web ? this.getModalAnimation('Enter') : getModalAnimation('Enter', 'Y', { host: this.host }),
+      leaveAnimation: web ? this.getModalAnimation('Leave') : getModalAnimation('Leave', 'Y', { host: this.host }),
+      showBackdrop: true,
+      displayFullscreenButton: false
+    });
     this.dialog = null;
     this.timePicker = null;
     this.currentTime = null;
@@ -336,7 +344,7 @@ export class YooFormDateTimeComponent {
         closeModal(null, dialog);
       };
       dialog.addEventListener('scannedSuccess', scannedSuccessListener);
-      await showModal(dialog);
+      await showModal({ component: dialog });
       dialog.removeEventListener('scannedSuccess', scannedSuccessListener);
       dialog = null;
     }

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

@@ -91,7 +91,7 @@ export class YooFormDocumentComponent {
     modal.hideSecondaryActions = this.hideSecondaryActions;
     const type = getType(this.document);
     modal.modalMode = type && type === 'video';
-    showModal(modal, {}, '', getAnimation('Enter'), getAnimation('Leave'), true);
+    showModal({ component: modal, enterAnimation: getAnimation('Enter'), leaveAnimation: getAnimation('Leave'), showBackdrop: true });
     this.inputChanged.emit(true);
     this.validityChanged.emit(true);
   }

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

@@ -1270,9 +1270,6 @@ svg:not(:root) {
   background: var(--stable-ultralight, #fafafa);
   border-radius: var(--border-radius-08, 0.5rem);
 }
-:host .field-placeholder:not(.readonly):not(.invisible).textarea.html {
-  z-index: 1;
-}
 :host .field-placeholder:not(.readonly):not(.invisible) yoo-collapsible {
   padding: var(--spacing-16, 1rem) 0 0;
 }