@yoobic/yobi 8.5.0-60 → 8.5.0-62

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

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
-const index$1 = require('./index-9aadeb94.js');
+const index$2 = require('./index-7790c794.js');
 const lodash = require('./lodash-a9050d79.js');
-const commonHelpers = require('./common-helpers-9f63a319.js');
-const overlays = require('./overlays-e5d2ff76.js');
-require('./index-a1bbe627.js');
+const commonHelpers = require('./common-helpers-0724ae60.js');
+const index$1 = require('./index-4cdf7949.js');
+require('./index-cb8276bc.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const formCarouselCss = "svg:not(:root){overflow:hidden}:host{--slide-pagination-size:0.4375rem;--slide-pagination-space:var(--spacing-04, 0.25rem);--pagination-height:var(--spacing-16, 1rem);--media-min-height:11.25rem;display:block;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}:host yoo-swipe-container{--swiper-background:var(--dark, #000000);--wrapper-border-radius:0}:host .media-container{position:-webkit-sticky;position:sticky;width:100%;height:var(--card-feed-media-height)}:host .media-container yoo-photo-editor{width:100%;height:100%}:host .media-container.readonly{padding:0.5rem 0.5rem 0 0}:host .icons-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;min-height:var(--pagination-height);padding:0 var(--spacing-16, 1rem)}:host .icons-container .pagination-outer-container{position:absolute;left:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:var(--spacing-16, 1rem)}:host .icons-container .pagination-outer-container .dot{width:var(--slide-pagination-size);height:var(--slide-pagination-size);margin:var(--slide-pagination-space);background-color:var(--dark-20, rgba(0, 0, 0, 0.2));border-radius:50%;-webkit-transition:background-color 0.2s ease;transition:background-color 0.2s ease}:host .icons-container .pagination-outer-container .dot.active{background-color:var(--dark, #000000);-webkit-transition:background-color 0.2s ease;transition:background-color 0.2s ease}:host .overlay{position:absolute;z-index:999;width:100%;height:100%}:host yoo-ion-slides{width:100%;height:100%;height:var(--card-feed-media-height)}:host yoo-ion-slide{overflow-y:auto;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-overflow-scrolling:touch}:host yoo-ion-slide yoo-photo-editor{width:100%;height:100%}:host .slide-nav{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);z-index:999;width:100%}:host .slide-nav.rtl{top:50%;right:50%;-webkit-transform:translate(50%, -50%);transform:translate(50%, -50%)}:host .slide-nav yoo-tag{border-radius:50%;-webkit-box-shadow:var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1))}:host .slide-nav .left,:host .slide-nav .right{position:absolute}:host .slide-nav .left{left:var(--spacing-16, 1rem)}:host .slide-nav .right{right:var(--spacing-16, 1rem)}:host .media-counts-container{position:absolute;top:var(--spacing-16, 1rem);right:var(--spacing-16, 1rem);z-index:10;opacity:0;-webkit-transition:opacity 0.3s ease;transition:opacity 0.3s ease;will-change:opacity}:host .media-counts-container.active{opacity:1;-webkit-transition:opacity 0.3s ease;transition:opacity 0.3s ease}:host(.no-margin) .media-container.readonly{padding:0}:host(.preview){position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin-top:0;border-radius:var(--card-feed-radius)}:host(.preview) yoo-ion-slides{z-index:6;width:100%;height:100%}:host(.preview) .pagination-outer-container{z-index:1}:host(.photo){--card-feed-media-height:initial}:host(.photo) yoo-ion-slides{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;position:initial}:host(.photo) yoo-ion-slide{height:auto}:host(.photo.preview){--card-feed-media-height:100%}:host(.video){--card-feed-media-height:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host(.video) yoo-ion-slide{margin:auto 0}:host(.video) .media-container{min-height:var(--media-min-height);margin:var(--spacing-08, 0.5rem) var(--spacing-08, 0.5rem) 0 0;padding:0;background:var(--dark, #000000)}:host(.video) yoo-videoplayer-videojs{-ms-flex-item-align:center;align-self:center}:host(.audio){--card-feed-media-height:5rem}:host(.audio) yoo-ion-slides{overflow:visible}:host(.audio) .icons-container{padding:0}:host(.audio) yoo-videoplayer-core{width:100%}:host(.audio) yoo-audio-player{width:calc(100% - var(--spacing-08, 0.5rem))}:host(.audio) .media-badge-container,:host(.audio) .media-icon-container{display:none}:host(.web.video){--card-feed-media-height:100%}:host(.feed-detail){background-color:var(--dark, #000000)}:host(.auto){--card-feed-media-height:100%}:host(.auto) .media-container{position:relative}:host(.form-preview){--card-feed-media-height:13.75rem}:host(.light) yoo-photo-editor{--editor-background:var(--light)}:host([hidden]){display:none}:host(.overlay){position:relative}:host(.overlay) .icons-container{position:absolute;bottom:var(--spacing-16, 1rem)}:host(.overlay) .icons-container .pagination-outer-container .dot{background-color:var(--light-20, rgba(255, 255, 255, 0.2))}:host(.overlay) .icons-container .pagination-outer-container .dot.active{background-color:var(--light, #ffffff)}@media print{:host .media-container,:host .media-container .pdf-container{display:block !important;page-break-before:avoid}:host .media-container .field-container,:host .media-container .pdf-container .field-container{page-break-inside:avoid}:host .media-container yoo-img,:host .media-container .pdf-container yoo-img{max-height:43.75rem;-o-object-fit:contain !important;object-fit:contain !important;page-break-after:avoid !important;page-break-before:avoid !important;page-break-inside:avoid !important;background-size:contain !important}}";
@@ -67,7 +67,7 @@ const YooFormCarouselComponent = class {
     if (!this.instant) {
       this.observeVisibility();
     }
-    if (this.ionSlides && (this.currentSlideIndex > 0 || overlays.isRTL())) {
+    if (this.ionSlides && (this.currentSlideIndex > 0 || index$1.isRTL())) {
       this.ionSlides.slideTo(this.currentSlideIndex);
     }
   }
@@ -83,8 +83,8 @@ const YooFormCarouselComponent = class {
    * catching event first
    */
   async fixParentSwipeEvent() {
-    if (overlays.isWeb(this.host)) {
-      const parentSwiper = overlays.findParent(this.host, 'yoo-ion-slides');
+    if (index$1.isWeb(this.host)) {
+      const parentSwiper = index$1.findParent(this.host, 'yoo-ion-slides');
       if (parentSwiper) {
         await parentSwiper.updateEvents();
       }
@@ -98,7 +98,7 @@ const YooFormCarouselComponent = class {
     if (this.ionSlides) {
       this.showPhotoCounts = this.displayPhotoCounter;
       const newIndex = ev === null || ev === void 0 ? void 0 : ev.detail;
-      if (!overlays.isNullOrUndefined(newIndex)) {
+      if (!index$1.isNullOrUndefined(newIndex)) {
         this.currentActiveIndex = newIndex;
         this.slideChanges.emit(this.currentActiveIndex);
       }
@@ -111,7 +111,7 @@ const YooFormCarouselComponent = class {
   }
   onSwipeDown() {
     if (!this.hasGradient && this.allowSwipeDownDismiss && !this.isZoomed) {
-      overlays.closeModal(null);
+      index$1.closeModal(null);
     }
   }
   showPhotoDialog(ev) {
@@ -126,42 +126,42 @@ const YooFormCarouselComponent = class {
             icon: 'more',
             isVisible: () => true,
             handler: (localEv) => {
-              const el = overlays.findParent(localEv === null || localEv === void 0 ? void 0 : localEv.target, 'yoo-photo-editor');
+              const el = index$1.findParent(localEv === null || localEv === void 0 ? void 0 : localEv.target, 'yoo-photo-editor');
               const index = (el === null || el === void 0 ? void 0 : el.id) || 0;
               const item = this.mediaSrc[index];
               const actions = [
                 {
-                  text: overlays.translate('EMAIL'),
+                  text: index$1.translate('EMAIL'),
                   icon: 'email',
                   color: 'dark',
-                  isVisible: () => { var _a, _b, _c; return !!item && !((_a = overlays.getSession()) === null || _a === void 0 ? void 0 : _a.isExternal) && overlays.getPermissions().canShareByEmail && !((_c = (_b = overlays.getSession()) === null || _b === void 0 ? void 0 : _b.tenant) === null || _c === void 0 ? void 0 : _c.securedDoc); },
+                  isVisible: () => { var _a, _b, _c; return !!item && !((_a = index$1.getSession()) === null || _a === void 0 ? void 0 : _a.isExternal) && index$1.getPermissions().canShareByEmail && !((_c = (_b = index$1.getSession()) === null || _b === void 0 ? void 0 : _b.tenant) === null || _c === void 0 ? void 0 : _c.securedDoc); },
                   handler: () => {
                     const filename = (item === null || item === void 0 ? void 0 : item._filename) || new Date().getTime().toString();
-                    overlays.getAsyncExtraData({
+                    index$1.getAsyncExtraData({
                       type: 'email-dialog',
-                      params: { item: (item === null || item === void 0 ? void 0 : item._downloadURL) ? item : { _downloadURL: item, filename }, forceMobile: !overlays.isWeb(this.host) }
+                      params: { item: (item === null || item === void 0 ? void 0 : item._downloadURL) ? item : { _downloadURL: item, filename }, forceMobile: !index$1.isWeb(this.host) }
                     });
                   }
                 },
                 {
-                  text: overlays.translate('DOWNLOAD'),
+                  text: index$1.translate('DOWNLOAD'),
                   icon: 'download',
                   color: 'dark',
-                  isVisible: () => !!item && overlays.getPermissions().canDownloadFile,
+                  isVisible: () => !!item && index$1.getPermissions().canDownloadFile,
                   handler: () => {
                     const downloadURL = (item === null || item === void 0 ? void 0 : item._downloadURL) || item;
                     if (downloadURL) {
                       const filename = (item === null || item === void 0 ? void 0 : item._filename) ? item._filename : new Date().getTime().toString();
-                      overlays.downloadFile(downloadURL, filename);
+                      index$1.downloadFile(downloadURL, filename);
                     }
                   }
                 }
               ];
-              overlays.isWeb(this.host) ?
-                overlays.showContextMenu(localEv, {
+              index$1.isWeb(this.host) ?
+                index$1.showContextMenu(localEv, {
                   hostElement: localEv === null || localEv === void 0 ? void 0 : localEv.target,
                   contentButtons: actions
-                }) : overlays.showActionSheet(actions, null, {}, null, ev);
+                }) : index$1.showActionSheet(actions, null, {}, null, ev);
             }
           }
         ],
@@ -178,8 +178,8 @@ const YooFormCarouselComponent = class {
     }
   }
   observeVisibility() {
-    if (index$1.isIntersectionObserverSupported()) {
-      this.observer = index$1.intersectionObserve(this.host, (nodes) => {
+    if (index$2.isIntersectionObserverSupported()) {
+      this.observer = index$2.intersectionObserve(this.host, (nodes) => {
         nodes.forEach((node) => {
           if (node.isIntersecting) {
             this.removeIntersectionObserver();
@@ -218,7 +218,7 @@ const YooFormCarouselComponent = class {
     }
   }
   renderSlidePagination() {
-    const currentActiveIndex = overlays.isRTL()
+    const currentActiveIndex = index$1.isRTL()
       ? this.currentActiveIndex < 0 ? 0 : this.currentActiveIndex
       : this.currentActiveIndex;
     return (index.h("div", { class: "pagination-outer-container" }, this.mediaSrc.map((_, index$1) => {
@@ -237,22 +237,22 @@ const YooFormCarouselComponent = class {
     }
     return;
   }
-  renderMediaByType(src, index$1 = 0) {
+  renderMediaByType(src, index$2 = 0) {
     const type = this.mediaType;
     if (!src) {
       return;
     }
     if (type === 'photo') {
-      return this.renderImage(src, index$1);
+      return this.renderImage(src, index$2);
     }
     else if (type === 'video') {
-      return this.renderVideo(src, index$1);
+      return this.renderVideo(src, index$2);
     }
     else if (type === 'audio') {
       return index.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 index.h("yoo-form-document", { class: "expanded", isPdf: this.isPdf, hideSecondaryActions: this.hideSecondaryActions, extraClass: "feed", showDialog: true, showActionSheet: overlays.isNativeMobile() && overlays.isPdf(src), document: src });
+      return index.h("yoo-form-document", { class: "expanded", isPdf: this.isPdf, hideSecondaryActions: this.hideSecondaryActions, extraClass: "feed", showDialog: true, showActionSheet: index$1.isNativeMobile() && index$1.isPdf(src), document: src });
     }
   }
   renderImage(src, index$1) {
@@ -281,7 +281,7 @@ const YooFormCarouselComponent = class {
     }
     return (index.h("yoo-img", { src: src, contained: this.contained, style: imageStyle, scaledUp: !this.preventScaledUp && !this.maxHeight, instant: this.visibility || this.instant, mediaDimension: this.mediaDimension ? this.mediaDimension[index$1] : null, onClick: (ev) => this.showPhotoDialog(ev) }));
   }
-  renderVideo(src, index$1) {
+  renderVideo(src, index$2) {
     const isPreview = this.previewMode;
     const scaledUp = !isPreview;
     const isNotPreviewAutoPlay = !isPreview && !this.preventAutoPlayMedia;
@@ -296,26 +296,26 @@ const YooFormCarouselComponent = class {
         simpleMode: !isPreview,
         autoPauseOnLeavingViewPort: !isPreview,
         // props for autoplay
-        autoPlayOnEnteringViewPort: isNotPreviewAutoPlay && !overlays.isChromatic(),
+        autoPlayOnEnteringViewPort: isNotPreviewAutoPlay && !index$1.isChromatic(),
         autoplay: isNotPreviewAutoPlay,
         muted: isNotPreviewAutoPlay,
         playerCommand: !isPreview && this.playerCommand ? this.playerCommand : null,
         onClick: !isPreview ? (ev) => ev.stopPropagation() : null,
         scaledUp,
         scaledUpWidth: scaledUp,
-        mediaDimension: this.mediaDimension ? this.mediaDimension[index$1] : null
+        mediaDimension: this.mediaDimension ? this.mediaDimension[index$2] : null
       },
       modalOptions: {
         modalSecondaryActions: [
           {
-            text: overlays.translate('DOWNLOAD'),
+            text: index$1.translate('DOWNLOAD'),
             name: 'download',
-            cssClass: overlays.isWeb(this.host) ? 'bg-dark-hover' : 'bg-dark light',
-            isVisible: () => overlays.isCloudinaryLink(src),
+            cssClass: index$1.isWeb(this.host) ? 'bg-dark-hover' : 'bg-dark light',
+            isVisible: () => index$1.isCloudinaryLink(src),
             handler: () => {
               if (src) {
                 const filename = new Date().getTime().toString();
-                overlays.downloadFile(src, filename);
+                index$1.downloadFile(src, filename);
               }
             }
           }
@@ -337,9 +337,9 @@ const YooFormCarouselComponent = class {
     const SlideWrapper = this.allowSwipeDownDismiss ? 'yoo-swipe-container' : 'div';
     const attrs = this.allowSwipeDownDismiss ? { onSwipedDown: () => this.onSwipeDown() } : {};
     const isDocument = this.mediaType === 'document';
-    const tagSize = overlays.isWeb(this.host) ? 'small' : 'medium';
-    const prevBtnLocation = overlays.isRTL() ? 'right' : 'left';
-    const nextBtnLocation = overlays.isRTL() ? 'left' : 'right';
+    const tagSize = index$1.isWeb(this.host) ? 'small' : 'medium';
+    const prevBtnLocation = index$1.isRTL() ? 'right' : 'left';
+    const nextBtnLocation = index$1.isRTL() ? 'left' : 'right';
     if (this.isPdf) {
       return this.renderPdfImage();
     }
@@ -351,7 +351,7 @@ const YooFormCarouselComponent = class {
       }, navigation: false }, this.mediaSrc.map((src, index) => this.renderSlide(src, index))), !this.previewMode && this.mediaType !== 'audio' && !isDocument && (index.h("yoo-tag", { class: {
         'media-counts-container': true,
         active: this.showPhotoCounts
-      }, color: "dark-40", size: tagSize }, index.h("yoo-icon", { name: "multiple-photos", color: "light", size: tagSize, slot: "start" }), index.h("div", { class: "text" }, `${this.currentActiveIndex + 1}/${this.mediaSrc.length}`))), overlays.isWeb(this.host) && this.isMultiMedia(this.mediaSrc) && this.paginationType !== 'progressbar' && (index.h("div", { class: "slide-nav" }, this.currentActiveIndex > 0 && index.h("yoo-tag", { onClick: (ev) => this.onSlidePrev(ev), class: prevBtnLocation, icon: prevBtnLocation, color: "light", size: "medium" }), this.currentActiveIndex < this.mediaSrc.length - 1 && (index.h("yoo-tag", { onClick: (ev) => this.onSlideNext(ev), class: nextBtnLocation, icon: nextBtnLocation, color: "light", size: "medium" }))))));
+      }, color: "dark-40", size: tagSize }, index.h("yoo-icon", { name: "multiple-photos", color: "light", size: tagSize, slot: "start" }), index.h("div", { class: "text" }, `${this.currentActiveIndex + 1}/${this.mediaSrc.length}`))), index$1.isWeb(this.host) && this.isMultiMedia(this.mediaSrc) && this.paginationType !== 'progressbar' && (index.h("div", { class: "slide-nav" }, this.currentActiveIndex > 0 && index.h("yoo-tag", { onClick: (ev) => this.onSlidePrev(ev), class: prevBtnLocation, icon: prevBtnLocation, color: "light", size: "medium" }), this.currentActiveIndex < this.mediaSrc.length - 1 && (index.h("yoo-tag", { onClick: (ev) => this.onSlideNext(ev), class: nextBtnLocation, icon: nextBtnLocation, color: "light", size: "medium" }))))));
   }
   renderIconsContainer() {
     return (this.paginationType !== 'progressbar' && index.h("div", { class: "icons-container" }, index.h("slot", { name: "start" }), this.isMultiMedia(this.mediaSrc) && !this.isPdf && this.renderSlidePagination(), index.h("slot", { name: "end" })));

package/dist/cjs/yoo-form-catalog-dialog.cjs.entry.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
-require('./index-9aadeb94.js');
-const commonHelpers = require('./common-helpers-9f63a319.js');
+require('./index-7790c794.js');
+const commonHelpers = require('./common-helpers-0724ae60.js');
 const dimensionsHelpers = require('./dimensions-helpers-54685523.js');
-const overlays = require('./overlays-e5d2ff76.js');
+const index$1 = require('./index-4cdf7949.js');
 require('./lodash-a9050d79.js');
-require('./index-a1bbe627.js');
+require('./index-cb8276bc.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const formCatalogDialogCss = "svg:not(:root){overflow:hidden}:host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .inner-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:var(--font-size-18, 1.125rem)}:host .inner-container .image-container{position:relative;height:12.5rem}:host .inner-container .image-container yoo-img{position:inherit;width:100%;height:100%}:host .inner-container .row-container{padding:0.5rem 0;font-size:var(--font-size-16, 1rem);border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host .inner-container .row-container .value{color:var(--text-color, #807f83)}:host .inner-container .tags{position:relative;height:100px}:host .inner-container .tags yoo-ion-scroll{top:0 !important;padding:0 0.75rem}:host .inner-container .text-container{padding:0.75rem}:host .inner-container .tablet-mod{width:100%;margin:0 auto;padding-top:0.5rem}:host .inner-container .tag-item{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;margin-right:0.5rem;padding:0.5rem;padding-bottom:0.75rem;font-size:var(--font-size-16, 1rem);border:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);border-radius:15px}";
@@ -28,7 +28,7 @@ const YooFormCatalogDialogComponent = class {
     this.tagsContainer.style.top = `${this.topTagPosition}px`;
   }
   onClose() {
-    overlays.closeModal(null);
+    index$1.closeModal(null);
   }
   onShowImage() {
     var _a;
@@ -39,18 +39,18 @@ const YooFormCatalogDialogComponent = class {
         src: imgSrc,
         hasBackButton: true,
         description: imgName,
-        extraActions: overlays.getDownloadAction(imgSrc, imgName)
+        extraActions: index$1.getDownloadAction(imgSrc, imgName)
       });
     }
   }
   renderHeader() {
-    return (index.h("yoo-header", null, index.h("yoo-navbar", null, index.h("yoo-items", { slot: "start" }, index.h("yoo-button", { color: "text-color", fill: "transparent", shape: "circular", rippleType: "unbounded", onClick: () => this.onClose() }, index.h("yoo-icon", { name: "close" }))), index.h("yoo-truncate", null, overlays.translate('PRODUCT')))));
+    return (index.h("yoo-header", null, index.h("yoo-navbar", null, index.h("yoo-items", { slot: "start" }, index.h("yoo-button", { color: "text-color", fill: "transparent", shape: "circular", rippleType: "unbounded", onClick: () => this.onClose() }, index.h("yoo-icon", { name: "close" }))), index.h("yoo-truncate", null, index$1.translate('PRODUCT')))));
   }
   renderTag(tag) {
     return index.h("span", { class: "bg-light tag-item" }, tag);
   }
   renderContent() {
-    return (index.h("yoo-ion-content", { scrollEnabled: true, class: "bg-light" }, index.h("div", { class: "inner-container", ref: (el) => (this.innerContainer = el) }, this.product && this.product.image && this.product.image._downloadURL && (index.h("div", { onClick: () => this.onShowImage(), class: 'image-container ' + (this.tabletMod ? 'tablet-mod' : '') }, index.h("yoo-img", { type: "background", src: this.product.image._downloadURL, cloudinaryOptions: { pad: true } }))), index.h("div", { class: "text-container", ref: (el) => (this.textContainer = el) }, index.h("div", { class: "row-container" }, index.h("div", { class: "title" }, overlays.translate('TITLE')), index.h("div", { class: "value" }, this.product.title)), this.product.price ? (index.h("div", { class: "row-container" }, index.h("div", { class: "title" }, overlays.translate('PRICE')), index.h("div", { class: "value" }, overlays.pipes.currency.transform(this.product.price)))) : null, this.product.color ? (index.h("div", { class: "row-container" }, index.h("div", { class: "title" }, overlays.translate('COLOR')), index.h("div", { class: "value" }, this.product.color))) : null, this.product.reference ? (index.h("div", { class: "row-container" }, index.h("div", { class: "title" }, overlays.translate('REFERENCE')), index.h("div", { class: "value" }, this.product.reference))) : null, this.product.shortdescription || this.product.description ? (index.h("div", { class: "row-container description" }, index.h("div", { class: "title" }, overlays.translate('DESCRIPTION')), index.h("div", { class: "value", innerHTML: this.product.shortdescription || this.product.description }))) : null), index.h("div", { class: "tags" }, index.h("yoo-ion-scroll", { class: "horizontal" }, index.h("div", { class: "button-spacer" }), this.product.tags
+    return (index.h("yoo-ion-content", { scrollEnabled: true, class: "bg-light" }, index.h("div", { class: "inner-container", ref: (el) => (this.innerContainer = el) }, this.product && this.product.image && this.product.image._downloadURL && (index.h("div", { onClick: () => this.onShowImage(), class: 'image-container ' + (this.tabletMod ? 'tablet-mod' : '') }, index.h("yoo-img", { type: "background", src: this.product.image._downloadURL, cloudinaryOptions: { pad: true } }))), index.h("div", { class: "text-container", ref: (el) => (this.textContainer = el) }, index.h("div", { class: "row-container" }, index.h("div", { class: "title" }, index$1.translate('TITLE')), index.h("div", { class: "value" }, this.product.title)), this.product.price ? (index.h("div", { class: "row-container" }, index.h("div", { class: "title" }, index$1.translate('PRICE')), index.h("div", { class: "value" }, index$1.pipes.currency.transform(this.product.price)))) : null, this.product.color ? (index.h("div", { class: "row-container" }, index.h("div", { class: "title" }, index$1.translate('COLOR')), index.h("div", { class: "value" }, this.product.color))) : null, this.product.reference ? (index.h("div", { class: "row-container" }, index.h("div", { class: "title" }, index$1.translate('REFERENCE')), index.h("div", { class: "value" }, this.product.reference))) : null, this.product.shortdescription || this.product.description ? (index.h("div", { class: "row-container description" }, index.h("div", { class: "title" }, index$1.translate('DESCRIPTION')), index.h("div", { class: "value", innerHTML: this.product.shortdescription || this.product.description }))) : null), index.h("div", { class: "tags" }, index.h("yoo-ion-scroll", { class: "horizontal" }, index.h("div", { class: "button-spacer" }), this.product.tags
       ? this.product.tags.map((value) => {
         return this.renderTag(value);
       })

package/dist/cjs/yoo-form-catalog.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-7790c794.js');
 const lodash = require('./lodash-a9050d79.js');
-const formInputHelpers = require('./form-input-helpers-2d988e31.js');
-const overlays = require('./overlays-e5d2ff76.js');
-require('./index-a1bbe627.js');
-require('./common-helpers-9f63a319.js');
+const formInputHelpers = require('./form-input-helpers-fb275467.js');
+const index$1 = require('./index-4cdf7949.js');
+require('./index-cb8276bc.js');
+require('./common-helpers-0724ae60.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const formCatalogCss = "svg:not(:root){overflow:hidden}:host .readonly{padding:0.5rem 0.5rem 0 0}:host .outer-container .or,:host .readonly .or{padding:0.5rem;color:var(--text-color, #807f83);font-size:var(--font-size-14, 0.875rem);text-align:center}:host .outer-container .selected,:host .readonly .selected{background-color:var(--light, #ffffff)}:host .outer-container .error,:host .readonly .error{color:var(--danger, #d44333)}:host .outer-container .products>.title,:host .readonly .products>.title{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;margin-top:0.5rem;color:var(--dark, #000000);font-weight:var(--font-weight-400, 400);font-size:var(--font-size-16, 1rem);line-height:1.5;text-align:left;text-transform:uppercase}:host .outer-container .products .subtitle,:host .readonly .products .subtitle{margin-top:0.125rem;color:var(--text-color, #807f83);font-size:var(--font-size-12, 0.75rem)}:host .outer-container .products .remove,:host .readonly .products .remove{display:-ms-flexbox;display:flex;-ms-flex-line-pack:center;align-content:center;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:40px;text-align:center}:host .outer-container .products .entity,:host .readonly .products .entity{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;padding:1rem 0}:host .outer-container .products .toolbar,:host .readonly .products .toolbar{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:0.5rem;font-size:var(--font-size-16, 1rem);border-top:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host .outer-container .products .toolbar.history,:host .readonly .products .toolbar.history{font-size:var(--font-size-14, 0.875rem)}:host .outer-container .products .toolbar .title,:host .readonly .products .toolbar .title{-ms-flex:1;flex:1;padding:3px 0.5rem 3px 0;color:var(--dark, #000000);font-size:var(--font-size-12, 0.75rem)}:host .outer-container .products .toolbar .title.align-right,:host .readonly .products .toolbar .title.align-right{text-align:right}:host .outer-container .products .toolbar .price,:host .readonly .products .toolbar .price{-ms-flex:1;flex:1;min-width:4rem;padding-left:0.5rem;color:var(--dark, #000000);white-space:nowrap;text-align:right}:host .outer-container .products .toolbar .price-title,:host .readonly .products .toolbar .price-title{min-width:5rem;font-size:var(--font-size-12, 0.75rem)}:host .outer-container .products .toolbar.wrap,:host .readonly .products .toolbar.wrap{-ms-flex-wrap:wrap;flex-wrap:wrap}:host .outer-container .products .toolbar.wrap .price-title,:host .outer-container .products .toolbar.wrap .price,:host .readonly .products .toolbar.wrap .price-title,:host .readonly .products .toolbar.wrap .price{margin-top:var(--spacing-08, 0.5rem)}:host .outer-container .products .footer,:host .readonly .products .footer{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;padding:0.5rem;padding-top:1rem;padding-bottom:0.5rem;color:var(--dark, #000000);font-weight:var(--font-weight-900, 900)}:host .outer-container .products .footer .title,:host .readonly .products .footer .title{-ms-flex:1;flex:1;text-transform:uppercase}:host .outer-container .products .footer .price,:host .readonly .products .footer .price{text-align:right}:host(.history) .readonly{max-width:800px}:host(.grid-cell) .readonly{padding:0}:host(.grid-cell) .readonly .title{display:none}:host(.grid-cell) .readonly .products .subtitle{margin-top:0}:host(.grid-cell) .readonly .subtitle{color:var(--dark, #000000);font-weight:var(--font-weight-400, 400);font-size:var(--font-size-16, 1rem)}:host(.grid-cell) .readonly .footer{padding:0;font-weight:var(--font-weight-400, 400)}";
@@ -39,8 +39,8 @@ const YooFormCatalogComponent = class {
   }
   componentDidLoad() {
     var _a;
-    if (!this.isCheck && this.value && !((_a = this.products) === null || _a === void 0 ? void 0 : _a.length) && !overlays.isOffline()) {
-      overlays.getAsyncExtraData({ type: 'products-search', params: this.getProductRefs() }).then((ret) => {
+    if (!this.isCheck && this.value && !((_a = this.products) === null || _a === void 0 ? void 0 : _a.length) && !index$1.isOffline()) {
+      index$1.getAsyncExtraData({ type: 'products-search', params: this.getProductRefs() }).then((ret) => {
         this.products = ret === null || ret === void 0 ? void 0 : ret.data;
         index.forceUpdate(this);
       });
@@ -63,7 +63,7 @@ const YooFormCatalogComponent = class {
             this.value = {};
           }
         }
-        if (!overlays.isWeb(this.host)) {
+        if (!index$1.isWeb(this.host)) {
           this.addProducts(ev.detail);
         }
       }
@@ -71,7 +71,7 @@ const YooFormCatalogComponent = class {
   }
   onWebAutocompleteClosed(ev) {
     ev.stopPropagation();
-    if (overlays.isWeb(this.host) && !lodash.isEqual(ev === null || ev === void 0 ? void 0 : ev.detail, this.selectedProducts)) {
+    if (index$1.isWeb(this.host) && !lodash.isEqual(ev === null || ev === void 0 ? void 0 : ev.detail, this.selectedProducts)) {
       this.addProducts(ev.detail);
     }
   }
@@ -128,11 +128,11 @@ const YooFormCatalogComponent = class {
           this.productScanned.emit(ev.detail);
         }
       }
-      else if (overlays.isOffline()) {
-        this.onProductNotFound(ref + ' ' + overlays.translate('NOTFOUND'));
+      else if (index$1.isOffline()) {
+        this.onProductNotFound(ref + ' ' + index$1.translate('NOTFOUND'));
       }
       else {
-        overlays.getAsyncExtraData({
+        index$1.getAsyncExtraData({
           type: 'product-search',
           params: { reference: ref, catalog: this.catalog }
         }).then((ret) => {
@@ -148,7 +148,7 @@ const YooFormCatalogComponent = class {
             }
           }
           else {
-            this.onProductNotFound(ref + ' ' + overlays.translate('NOTFOUND'));
+            this.onProductNotFound(ref + ' ' + index$1.translate('NOTFOUND'));
           }
         });
       }
@@ -262,7 +262,7 @@ const YooFormCatalogComponent = class {
   onOpenCatalogDialog(product) {
     this.dialog = document.createElement('yoo-form-catalog-dialog');
     this.dialog.product = product;
-    overlays.showModal(this.dialog, { half: false }, null, overlays.getModalAnimation('Enter', 'X', { host: this.host }), overlays.getModalAnimation('Leave', 'X', { host: this.host }), true).then(() => {
+    index$1.showModal(this.dialog, { half: false }, null, index$1.getModalAnimation('Enter', 'X', { host: this.host }), index$1.getModalAnimation('Leave', 'X', { host: this.host }), true).then(() => {
       this.dialog = null;
     });
   }
@@ -271,7 +271,7 @@ const YooFormCatalogComponent = class {
       return index.h("yoo-entity", { class: "simple no-border", displayType: "card-list", entityType: "products", item: this.value });
     }
     const ret = this.getTotalAndPrice(readonly);
-    return (!this.selectorMode && (index.h("div", { class: "products" }, index.h("div", { class: "title" }, " ", overlays.translate('PRODUCTS')), index.h("div", { class: "subtitle" }, " ", ret.total + ' ' + overlays.translate('ITEMS')), !this.isGridCell && this.renderInnerProducts(readonly), !this.isInventory && !this.isPresence && !this.isCheck && ret.price > 0 && (index.h("div", { class: "footer" }, index.h("div", { class: "title" }, overlays.translate('TOTAL'), ":"), index.h("div", { class: "price" }, overlays.pipes.currency.transform(ret.price)))))));
+    return (!this.selectorMode && (index.h("div", { class: "products" }, index.h("div", { class: "title" }, " ", index$1.translate('PRODUCTS')), index.h("div", { class: "subtitle" }, " ", ret.total + ' ' + index$1.translate('ITEMS')), !this.isGridCell && this.renderInnerProducts(readonly), !this.isInventory && !this.isPresence && !this.isCheck && ret.price > 0 && (index.h("div", { class: "footer" }, index.h("div", { class: "title" }, index$1.translate('TOTAL'), ":"), index.h("div", { class: "price" }, index$1.pipes.currency.transform(ret.price)))))));
   }
   renderInnerProducts(readonly) {
     var _a;
@@ -288,12 +288,12 @@ const YooFormCatalogComponent = class {
           const price = product.price * quantity;
           return [
             index.h("div", { class: "entity" }, index.h("yoo-entity", { onClick: () => this.onOpenCatalogDialog(product), class: "catalog-display no-border", isHistory: this.isHistory, displayType: "card-list", entityType: "products", item: product }), !readonly && (index.h("div", { class: "remove", onClick: () => this.clearProduct(product) }, index.h("yoo-icon", { name: "cross" })))),
-            !this.isPresence && (index.h("div", { class: { toolbar: true, history: this.isHistory, wrap: ((_a = this.host) === null || _a === void 0 ? void 0 : _a.offsetWidth) < 305 && !readonly } }, index.h("div", { class: "title" }, ((_b = this.host) === null || _b === void 0 ? void 0 : _b.offsetWidth) < 350 && ((_c = this.host) === null || _c === void 0 ? void 0 : _c.offsetWidth) > 305 && !readonly ? overlays.translate('QUANTITYABBREVATION') : overlays.translate('QUANTITY'), ": "), readonly ? (quantity) : (index.h("yoo-form-number-picker", { key: ref, min: 1, stepAmount: product.step, value: quantity, required: true, clearable: false, useButtons: true, invalidMessage: product.step ? 'MIN_AND_STEP_VALUES' : null, onInputChanged: (ev) => {
+            !this.isPresence && (index.h("div", { class: { toolbar: true, history: this.isHistory, wrap: ((_a = this.host) === null || _a === void 0 ? void 0 : _a.offsetWidth) < 305 && !readonly } }, index.h("div", { class: "title" }, ((_b = this.host) === null || _b === void 0 ? void 0 : _b.offsetWidth) < 350 && ((_c = this.host) === null || _c === void 0 ? void 0 : _c.offsetWidth) > 305 && !readonly ? index$1.translate('QUANTITYABBREVATION') : index$1.translate('QUANTITY'), ": "), readonly ? (quantity) : (index.h("yoo-form-number-picker", { key: ref, min: 1, stepAmount: product.step, value: quantity, required: true, clearable: false, useButtons: true, invalidMessage: product.step ? 'MIN_AND_STEP_VALUES' : null, onInputChanged: (ev) => {
                 ev.stopPropagation();
                 if (lodash.isNumber(ev.detail)) {
                   this.setProduct(product, ev.detail);
                 }
-              } })), !this.isInventory && ((_d = this.host) === null || _d === void 0 ? void 0 : _d.offsetWidth) < 305 && !readonly && index.h("div", { class: "price-title" }, overlays.translate('PRICE2'), ":"), !this.isInventory && price > 0 && index.h("div", { class: "price" }, overlays.pipes.currency.transform(price, { shorten: true, decimals: 2 }), " ")))
+              } })), !this.isInventory && ((_d = this.host) === null || _d === void 0 ? void 0 : _d.offsetWidth) < 305 && !readonly && index.h("div", { class: "price-title" }, index$1.translate('PRICE2'), ":"), !this.isInventory && price > 0 && index.h("div", { class: "price" }, index$1.pipes.currency.transform(price, { shorten: true, decimals: 2 }), " ")))
           ];
         }
       });
@@ -303,7 +303,7 @@ const YooFormCatalogComponent = class {
     ev.stopPropagation();
   }
   renderEditable() {
-    return (index.h("div", { class: "outer-container" }, index.h("yoo-form-autocomplete", { ref: (el) => (this.formAutocomplete = el), multiple: !this.isCheck, keepSelection: this.keepAutocompleteSelection, entityType: "products", displayType: "card-list", iconPrefix: "catalogue", onFetchData: (ev) => this.onFetchData(ev), onFetchFieldFilterData: (ev) => this.onFetchFieldFilterData(ev), onInputChanged: (ev) => this.onSelect(ev), onInputBlurred: (ev) => this.onInputBlurred(ev), onInputFocused: (ev) => this.onInputFocused(ev), onValidityChanged: (ev) => this.onAutoCompleteValidityChanged(ev), onWebAutocompleteClosed: (ev) => this.onWebAutocompleteClosed(ev), placeholder: overlays.translate('ADDPRODUCTTOBASKET'), tags: this.tags, isLocal: false, model: this.model, size: this.size }), !this.disableScanner && index.h("div", { class: "or" }, overlays.translate('YOOBICOR')), !this.disableScanner && index.h("yoo-form-barcode", { onInputChanged: (ev) => this.onScanned(ev), placeholder: overlays.translate('SCANPRODUCTTOBASKET'), hideValue: true }), !this.selectorMode && this.notFoundError ? index.h("div", { class: "error", innerHTML: this.notFoundError }) : null, this.isCheck ? null : this.renderProducts(false)));
+    return (index.h("div", { class: "outer-container" }, index.h("yoo-form-autocomplete", { ref: (el) => (this.formAutocomplete = el), multiple: !this.isCheck, keepSelection: this.keepAutocompleteSelection, entityType: "products", displayType: "card-list", iconPrefix: "catalogue", onFetchData: (ev) => this.onFetchData(ev), onFetchFieldFilterData: (ev) => this.onFetchFieldFilterData(ev), onInputChanged: (ev) => this.onSelect(ev), onInputBlurred: (ev) => this.onInputBlurred(ev), onInputFocused: (ev) => this.onInputFocused(ev), onValidityChanged: (ev) => this.onAutoCompleteValidityChanged(ev), onWebAutocompleteClosed: (ev) => this.onWebAutocompleteClosed(ev), placeholder: index$1.translate('ADDPRODUCTTOBASKET'), tags: this.tags, isLocal: false, model: this.model, size: this.size }), !this.disableScanner && index.h("div", { class: "or" }, index$1.translate('YOOBICOR')), !this.disableScanner && index.h("yoo-form-barcode", { onInputChanged: (ev) => this.onScanned(ev), placeholder: index$1.translate('SCANPRODUCTTOBASKET'), hideValue: true }), !this.selectorMode && this.notFoundError ? index.h("div", { class: "error", innerHTML: this.notFoundError }) : null, this.isCheck ? null : this.renderProducts(false)));
   }
   renderHistory() {
     return index.h("yoo-ion-scroll", { class: "relative" }, this.renderReadonly());

package/dist/cjs/yoo-form-categorize-words.cjs.entry.js

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
-require('./index-9aadeb94.js');
+require('./index-7790c794.js');
 const lodash = require('./lodash-a9050d79.js');
-const index$1 = require('./index-6242d9ab.js');
-const draggableTagsHelpers = require('./draggable-tags-helpers-618109cc.js');
-const formInputHelpers = require('./form-input-helpers-2d988e31.js');
-const overlays = require('./overlays-e5d2ff76.js');
-require('./index-a1bbe627.js');
-require('./common-helpers-9f63a319.js');
+const index$2 = require('./index-6a4201ff.js');
+const draggableTagsHelpers = require('./draggable-tags-helpers-b7dfe5f6.js');
+const formInputHelpers = require('./form-input-helpers-fb275467.js');
+const index$1 = require('./index-4cdf7949.js');
+require('./index-cb8276bc.js');
+require('./common-helpers-0724ae60.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const formCategorizeWordsCss = "svg:not(:root){overflow:hidden}:host{display:block;overflow:hidden auto}:host yoo-banner{height:0}:host yoo-tag{position:relative;max-width:100%;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}:host [placement]{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--spacing-08, 0.5rem);-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;margin:0 auto}:host [placement] #counter{padding-left:var(--spacing-04, 0.25rem);font-size:var(--font-size-12, 0.75rem);opacity:0.5}:host [placement] #title[hidden]{opacity:0}:host [placement] #title span:first-of-type{font-weight:bold}:host [placement] .dropzone{-ms-flex-positive:1;flex-grow:1}:host .dropzone{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-line-pack:baseline;align-content:baseline;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;white-space:nowrap;border-radius:var(--border-radius-08, 0.5rem)}:host .dropzone[hit]{background-color:var(--light-10, rgba(255, 255, 255, 0.1))}:host .dropzone yoo-tag{margin-right:var(--spacing-08, 0.5rem);margin-bottom:var(--spacing-08, 0.5rem)}:host .dropzone#zone-tags{height:calc(var(--spacing-64, 4rem) * 2);padding:var(--spacing-08, 0.5rem)}:host(:not([readonly])) main::-webkit-scrollbar{display:none}:host(:not([readonly])) [placement]{min-height:calc(var(--spacing-32, 2rem) * 5);padding:var(--spacing-16, 1rem);border-radius:var(--border-radius-08, 0.5rem);-webkit-box-shadow:var(--card-shadow-2, 0 0.3125rem 0.9375rem 0 rgba(40, 47, 54, 0.08));box-shadow:var(--card-shadow-2, 0 0.3125rem 0.9375rem 0 rgba(40, 47, 54, 0.08))}:host(:not([readonly])) [placement] .dropzone{min-height:calc(var(--spacing-32, 2rem) * 2)}:host(:not([readonly])) [placement] #title{color:var(--light, #ffffff)}:host(:not([readonly])) [placement][placement=top]{background:var(--warning, #ed6e33)}:host(:not([readonly])) [placement][placement=top].completed{background-color:var(--warning-60, rgba(237, 110, 51, 0.6))}:host(:not([readonly])) [placement][placement=bottom]{background:var(--app-color, #5a30f4)}:host(:not([readonly])) [placement][placement=bottom].completed{background-color:var(--app-color-60, rgba(90, 48, 244, 0.6))}:host([readonly]) main{display:grid;grid-gap:var(--spacing-08, 0.5rem)}:host([readonly]) main [placement]{padding:0}:host([readonly]) main .drop-container:last-of-type{margin-top:var(--spacing-16, 1rem)}:host([readonly]) main #title{margin-bottom:var(--spacing-08, 0.5rem)}:host([animated]) .dropzone,:host([animated]) section{-webkit-transition:background-color 500ms ease-in-out, height 750ms ease-in-out;transition:background-color 500ms ease-in-out, height 750ms ease-in-out}:host([animated]) #title{-webkit-transition:opacity 750ms ease-in-out;transition:opacity 750ms ease-in-out}";
@@ -57,7 +57,7 @@ const YooFormCategorizeWordsComponent = class {
   }
   get droppedValues() {
     var _a;
-    return ((_a = this.tags.getDroppedValues()) === null || _a === void 0 ? void 0 : _a.map(droppedValues => droppedValues.map(droppedValue => { var _a; return (_a = this.values) === null || _a === void 0 ? void 0 : _a.find(value => droppedValue === overlays.translateMulti(value)); }))) || [];
+    return ((_a = this.tags.getDroppedValues()) === null || _a === void 0 ? void 0 : _a.map(droppedValues => droppedValues.map(droppedValue => { var _a; return (_a = this.values) === null || _a === void 0 ? void 0 : _a.find(value => droppedValue === index$1.translateMulti(value)); }))) || [];
   }
   get tagConfig() {
     const getColorTag = (tagValue, zoneIndex) => {
@@ -94,7 +94,7 @@ const YooFormCategorizeWordsComponent = class {
     this.initGame();
   }
   initGame() {
-    this.tags = index$1.initTags(this.tagConfig, this.zonesConfig);
+    this.tags = index$2.initTags(this.tagConfig, this.zonesConfig);
   }
   renderTagsZone() {
     return !this.readonly && index.h("section", { class: "dropzone", id: "zone-tags" });
@@ -106,7 +106,7 @@ const YooFormCategorizeWordsComponent = class {
     const isZoneCompleted = (value === null || value === void 0 ? void 0 : value.length) === (answer === null || answer === void 0 ? void 0 : answer.length);
     const maxAnswers = ((_d = (_c = this.answer) === null || _c === void 0 ? void 0 : _c[zoneIndex]) === null || _d === void 0 ? void 0 : _d.length) || 0;
     const nbrDroppedTags = ((_f = (_e = this.value) === null || _e === void 0 ? void 0 : _e[zoneIndex]) === null || _f === void 0 ? void 0 : _f.length) || 0;
-    return (index.h("section", { ...{ placement: !zoneIndex ? 'top' : 'bottom', ...(isZoneCompleted && { class: 'completed' }) } }, index.h("div", { id: "title", hidden: !this.readonly && this.animated && !(value === null || value === void 0 ? void 0 : value.length) && !this.revealCategories }, index.h("span", null, overlays.translateMulti((_g = this.categories) === null || _g === void 0 ? void 0 : _g[zoneIndex])), this.readonly && ` (${nbrDroppedTags} / ${maxAnswers})`, !this.readonly && !!(answer === null || answer === void 0 ? void 0 : answer.length) && (index.h("span", { ref: (el) => (this.counterElement[zoneIndex] = el), id: "counter" }, index.h("span", null, nbrDroppedTags), " / ", maxAnswers))), index.h("div", { class: "dropzone", id: `zone-${zoneIndex}` })));
+    return (index.h("section", { ...{ placement: !zoneIndex ? 'top' : 'bottom', ...(isZoneCompleted && { class: 'completed' }) } }, index.h("div", { id: "title", hidden: !this.readonly && this.animated && !(value === null || value === void 0 ? void 0 : value.length) && !this.revealCategories }, index.h("span", null, index$1.translateMulti((_g = this.categories) === null || _g === void 0 ? void 0 : _g[zoneIndex])), this.readonly && ` (${nbrDroppedTags} / ${maxAnswers})`, !this.readonly && !!(answer === null || answer === void 0 ? void 0 : answer.length) && (index.h("span", { ref: (el) => (this.counterElement[zoneIndex] = el), id: "counter" }, index.h("span", null, nbrDroppedTags), " / ", maxAnswers))), index.h("div", { class: "dropzone", id: `zone-${zoneIndex}` })));
   }
   renderBanner() {
     return this.livePreview && !this.readonly && index.h("yoo-banner", null, index.h("p", { slot: "content" }));

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

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
-require('./index-9aadeb94.js');
-const commonHelpers = require('./common-helpers-9f63a319.js');
-const formInputHelpers = require('./form-input-helpers-2d988e31.js');
-const overlays = require('./overlays-e5d2ff76.js');
+require('./index-7790c794.js');
+const commonHelpers = require('./common-helpers-0724ae60.js');
+const formInputHelpers = require('./form-input-helpers-fb275467.js');
+const index$1 = require('./index-4cdf7949.js');
 require('./lodash-a9050d79.js');
-require('./index-a1bbe627.js');
+require('./index-cb8276bc.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const formCheckboxCss = "svg:not(:root){overflow:hidden}:host{--margin-top-container:0;--font-size-outer-container:var(--font-size-18, 1.125rem)}:host .optional{margin-left:var(--spacing-08, 0.5rem) !important;color:var(--stable, #adadad);white-space:nowrap}:host .outer-container,:host .readonly{display:-ms-flexbox;display:flex;font-size:var(--font-size-outer-container);word-break:break-word}:host .outer-container .label,:host .readonly .label{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;font-weight:var(--font-weight-400, 400);font-size:var(--font-size-16, 1rem);line-height:1.5;text-align:left;font-variant-caps:normal}:host .outer-container .label .required,:host .readonly .label .required{margin-right:var(--spacing-04, 0.25rem);color:var(--danger, #d44333);font-variant-caps:normal}:host .outer-container .label .label-required,:host .readonly .label .label-required{margin-left:var(--spacing-04, 0.25rem);color:var(--danger, #d44333)}:host .outer-container{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}:host .outer-container .label{padding-left:var(--spacing-08, 0.5rem)}:host .outer-container .label.readonly{letter-spacing:0px}:host .outer-container .label .tooltip-container{position:relative;width:var(--spacing-16, 1rem)}:host .outer-container .label .tooltip-container .tooltip{position:absolute;top:auto;right:auto;bottom:var(--spacing-04, 0.25rem);left:0.125rem;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:var(--spacing-16, 1rem);height:var(--spacing-16, 1rem);color:var(--light, #ffffff);font-size:var(--font-size-12, 0.75rem);background:var(--stable, #adadad);border-radius:50%}:host .outer-container .tick-container{padding:var(--spacing-04, 0.25rem);border-radius:50%}:host .readonly{-ms-flex-direction:column;flex-direction:column}:host .readonly yoo-icon{line-height:1}:host .readonly yoo-icon.disabled{max-width:1.5rem;background:var(--stable-light, #f1f1f1);border-radius:50%}:host .readonly .label{padding-bottom:var(--spacing-08, 0.5rem)}:host(.rtl) .outer-container .label{padding-right:var(--spacing-08, 0.5rem);padding-left:0}:host(:not([disabled])) .outer-container{cursor:pointer}:host(.web) .readonly .label{padding-bottom:var(--spacing-08, 0.5rem);font-weight:var(--font-weight-400, 400);font-size:var(--font-size-12, 0.75rem);white-space:nowrap;text-transform:uppercase}:host(.web) .outer-container .label{font-size:var(--font-size-14, 0.875rem)}:host(.top-right-help) yoo-icon[name=help]{--inner-height:0.5rem;-ms-flex-align:start;align-items:start;width:0.5rem;margin-top:calc(var(--spacing-08, 0.5rem) * -1)}:host(.energized) .outer-container yoo-icon:not([name=help]){fill:var(--energized, #ffc043);stroke:var(--)}:host(.energized) .readonly .yoo-icon:not([name=help]){fill:var(--energized, #ffc043);stroke:var(--)}:host(.warning) .outer-container yoo-icon:not([name=help]){fill:var(--warning, #ed6e33);stroke:var(--)}:host(.warning) .readonly .yoo-icon:not([name=help]){fill:var(--warning, #ed6e33);stroke:var(--)}:host(.info) .outer-container yoo-icon:not([name=help]){fill:var(--info, #d84c96);stroke:var(--)}:host(.info) .readonly .yoo-icon:not([name=help]){fill:var(--info, #d84c96);stroke:var(--)}:host(.danger) .outer-container yoo-icon:not([name=help]){fill:var(--danger, #d44333);stroke:var(--)}:host(.danger) .readonly .yoo-icon:not([name=help]){fill:var(--danger, #d44333);stroke:var(--)}:host(.app-color) .outer-container yoo-icon:not([name=help]){fill:var(--app-color, #5a30f4);stroke:var(--)}:host(.app-color) .readonly .yoo-icon:not([name=help]){fill:var(--app-color, #5a30f4);stroke:var(--)}:host(.accent) .outer-container yoo-icon:not([name=help]){fill:var(--accent, #276ef1);stroke:var(--)}:host(.accent) .readonly .yoo-icon:not([name=help]){fill:var(--accent, #276ef1);stroke:var(--)}:host(.dark) .outer-container yoo-icon:not([name=help]){fill:var(--dark, #000000);stroke:var(--)}:host(.dark) .readonly .yoo-icon:not([name=help]){fill:var(--dark, #000000);stroke:var(--)}:host(.wood) .outer-container yoo-icon:not([name=help]){fill:var(--wood, #99644c);stroke:var(--)}:host(.wood) .readonly .yoo-icon:not([name=help]){fill:var(--wood, #99644c);stroke:var(--)}:host(.success) .outer-container yoo-icon:not([name=help]){fill:var(--success, #3aa76d);stroke:var(--)}:host(.success) .readonly .yoo-icon:not([name=help]){fill:var(--success, #3aa76d);stroke:var(--)}:host(.app-color-10) .outer-container yoo-icon:not([name=help]){fill:var(--app-color-10, rgba(90, 48, 244, 0.1));stroke:var(--app-color, #5a30f4)}:host(.app-color-10) .readonly .yoo-icon:not([name=help]){fill:var(--app-color-10, rgba(90, 48, 244, 0.1));stroke:var(--app-color, #5a30f4)}:host(.energized-10) .outer-container yoo-icon:not([name=help]){fill:var(--energized-10, rgba(255, 192, 67, 0.1));stroke:var(--energized, #ffc043)}:host(.energized-10) .readonly .yoo-icon:not([name=help]){fill:var(--energized-10, rgba(255, 192, 67, 0.1));stroke:var(--energized, #ffc043)}:host(.warning-10) .outer-container yoo-icon:not([name=help]){fill:var(--warning-10, rgba(237, 110, 51, 0.1));stroke:var(--warning, #ed6e33)}:host(.warning-10) .readonly .yoo-icon:not([name=help]){fill:var(--warning-10, rgba(237, 110, 51, 0.1));stroke:var(--warning, #ed6e33)}:host(.info-10) .outer-container yoo-icon:not([name=help]){fill:var(--info-10, rgba(216, 76, 150, 0.1));stroke:var(--info, #d84c96)}:host(.info-10) .readonly .yoo-icon:not([name=help]){fill:var(--info-10, rgba(216, 76, 150, 0.1));stroke:var(--info, #d84c96)}:host(.royal-10) .outer-container yoo-icon:not([name=help]){fill:var(--royal-10);stroke:var(--royal)}:host(.royal-10) .readonly .yoo-icon:not([name=help]){fill:var(--royal-10);stroke:var(--royal)}:host(.accent-10) .outer-container yoo-icon:not([name=help]){fill:var(--accent-10, rgba(39, 110, 241, 0.1));stroke:var(--accent, #276ef1)}:host(.accent-10) .readonly .yoo-icon:not([name=help]){fill:var(--accent-10, rgba(39, 110, 241, 0.1));stroke:var(--accent, #276ef1)}:host(.dark-10) .outer-container yoo-icon:not([name=help]){fill:var(--dark-10, rgba(0, 0, 0, 0.1));stroke:var(--dark, #000000)}:host(.dark-10) .readonly .yoo-icon:not([name=help]){fill:var(--dark-10, rgba(0, 0, 0, 0.1));stroke:var(--dark, #000000)}:host(.wood-10) .outer-container yoo-icon:not([name=help]){fill:var(--wood-10, rgba(153, 100, 76, 0.1));stroke:var(--wood, #99644c)}:host(.wood-10) .readonly .yoo-icon:not([name=help]){fill:var(--wood-10, rgba(153, 100, 76, 0.1));stroke:var(--wood, #99644c)}:host(.success-10) .outer-container yoo-icon:not([name=help]){fill:var(--success-10, rgba(58, 167, 109, 0.1));stroke:var(--success, #3aa76d)}:host(.success-10) .readonly .yoo-icon:not([name=help]){fill:var(--success-10, rgba(58, 167, 109, 0.1));stroke:var(--success, #3aa76d)}";
@@ -116,7 +116,7 @@ const YooFormCheckboxComponent = class {
     }
     const newSize = this.size === 'large' ? 'medium' : 'small';
     if (this.iconColor && this.internalValue) {
-      const bgColor = overlays.getCssColor(`${this.iconColor}-10`);
+      const bgColor = index$1.getCssColor(`${this.iconColor}-10`);
       return (index.h("div", { class: "tick-container", style: { backgroundColor: bgColor } }, index.h("yoo-icon", { name: "tick", color: this.iconColor, size: "small" })));
     }
     else {
@@ -131,7 +131,7 @@ const YooFormCheckboxComponent = class {
     return (index.h("div", { class: baseClass }, index.h("span", { innerHTML: this.header })));
   }
   renderHelp() {
-    return this.help && (index.h("yoo-tooltip", { class: "help", content: overlays.translate(this.help), hoverable: overlays.isWeb(this.host), onClick: (ev) => ev.stopPropagation() }, index.h("yoo-icon", { color: "stable", name: "help", size: overlays.isWeb(this.host) ? 'small' : 'medium' })));
+    return this.help && (index.h("yoo-tooltip", { class: "help", content: index$1.translate(this.help), hoverable: index$1.isWeb(this.host), onClick: (ev) => ev.stopPropagation() }, index.h("yoo-icon", { color: "stable", name: "help", size: index$1.isWeb(this.host) ? 'small' : 'medium' })));
   }
   renderReadonly() {
     return (index.h("div", { class: "readonly" }, this.header && this.renderHeader(), this.renderCheck()));

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

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
-const index$1 = require('./index-a1bbe627.js');
-require('./index-9aadeb94.js');
-const formInputHelpers = require('./form-input-helpers-2d988e31.js');
-const overlays = require('./overlays-e5d2ff76.js');
+const index$1 = require('./index-cb8276bc.js');
+require('./index-7790c794.js');
+const formInputHelpers = require('./form-input-helpers-fb275467.js');
+const index$2 = require('./index-4cdf7949.js');
 require('./lodash-a9050d79.js');
-require('./common-helpers-9f63a319.js');
+require('./common-helpers-0724ae60.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const formChecklistCss = "svg:not(:root){overflow:hidden}:host yoo-truncate{--max-lines:2}:host .outer-container,:host .readonly{text-align:left}:host .outer-container .title,:host .readonly .title{margin-top:0.5rem;margin-bottom:0.625rem;font-size:var(--font-size-16, 1rem)}:host .outer-container .title:first-child,:host .readonly .title:first-child{margin-top:0}:host .outer-container yoo-form-input,:host .readonly yoo-form-input{margin-bottom:0.5rem}:host .outer-container .flex,:host .readonly .flex{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}:host .outer-container .previous,:host .outer-container .task,:host .readonly .previous,:host .readonly .task{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;margin-bottom:0.25rem;padding:0.6rem 0;font-weight:var(--font-weight-400, 400);font-size:var(--font-size-16, 1rem);line-height:17px;border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0)}:host .outer-container .previous yoo-icon,:host .outer-container .task yoo-icon,:host .readonly .previous yoo-icon,:host .readonly .task yoo-icon{padding:0 0.2rem;opacity:0.3}:host .outer-container .previous yoo-icon.repeat,:host .outer-container .task yoo-icon.repeat,:host .readonly .previous yoo-icon.repeat,:host .readonly .task yoo-icon.repeat{opacity:1}:host .outer-container .previous .text,:host .outer-container .task .text,:host .readonly .previous .text,:host .readonly .task .text{padding-left:0.2rem}:host .outer-container .previous.first,:host .outer-container .task.first,:host .readonly .previous.first,:host .readonly .task.first{padding-top:var(--spacing-08, 0.5rem)}:host .outer-container .previous.validated yoo-icon.check,:host .outer-container .task.validated yoo-icon.check,:host .readonly .previous.validated yoo-icon.check,:host .readonly .task.validated yoo-icon.check{opacity:1}:host .outer-container .previous.rejected yoo-icon.cross,:host .outer-container .task.rejected yoo-icon.cross,:host .readonly .previous.rejected yoo-icon.cross,:host .readonly .task.rejected yoo-icon.cross{opacity:1}:host .readonly{padding:0.5rem 0.5rem 0 0}:host .readonly .task,:host .readonly .previous{border-bottom:none}:host(.history) .outer-container .title,:host(.history) .readonly .title{margin-top:0rem;margin-bottom:0rem}:host(.history) .outer-container .previous,:host(.history) .outer-container .task,:host(.history) .readonly .previous,:host(.history) .readonly .task{margin-bottom:0}";
@@ -78,14 +78,14 @@ const YooFormChecklistComponent = class {
   renderPreviousTasks(readonly) {
     if (this.previousTasks && this.previousTasks.length > 0) {
       return [
-        index.h("div", { class: "title" }, " ", overlays.translate('PREVIOUSACTIONS')),
+        index.h("div", { class: "title" }, " ", index$2.translate('PREVIOUSACTIONS')),
         index.h("div", { class: "tasks" }, this.previousTasks.map((task, i) => (index.h("div", { class: 'previous ' + (task.validated ? 'validated' : task.validated === false ? 'rejected' : '') + (i === 0 ? ' first' : '') }, !readonly || task.validated === true ? index.h("yoo-icon", { class: "check", name: "check", color: task.validated ? 'app-color' : 'dark', onClick: () => this.onValidate(i) }) : null, !readonly || task.validated === false ? index.h("yoo-icon", { class: "cross", name: "cross", color: task.validated ? 'dark' : 'danger', onClick: () => this.onReject(i) }) : null, index.h("div", { class: "flex text" }, task.text), !readonly ? index.h("yoo-icon", { class: "repeat", name: "repeat", onClick: () => this.onReport(i) }) : null))))
       ];
     }
   }
   renderCurrentTasks(readonly) {
     return [
-      !readonly || (this.currentTasks && this.currentTasks.length > 0) ? index.h("div", { class: "title" }, " ", overlays.translate('NEXTACTIONS')) : null,
+      !readonly || (this.currentTasks && this.currentTasks.length > 0) ? index.h("div", { class: "title" }, " ", index$2.translate('NEXTACTIONS')) : null,
       !readonly ? this.renderTextArea() : null,
       !readonly || (this.currentTasks && this.currentTasks.length > 0) ? (index.h("div", { class: "tasks" }, this.currentTasks
         ? this.currentTasks.map((task, i) => (index.h("div", { class: 'task' + (i === 0 ? ' first' : '') }, index.h("div", { class: "flex" }, " ", task), !readonly ? index.h("yoo-icon", { name: "cross", onClick: () => this.onNewTaskRemove(i) }) : null)))
@@ -93,7 +93,7 @@ const YooFormChecklistComponent = class {
     ];
   }
   renderTextArea() {
-    return (index.h("yoo-form-text-area", { ref: (el) => (this.taskTextArea = el), resizable: "none", size: this.size, initialRows: this.rows, maxRows: 5, placeholder: overlays.translate(this.placeholder), disableEnter: true, validateInput: false, inputTabIndex: this.inputTabIndex, disableTab: true, onInputChanged: (ev) => this.onInputChanged(ev), onInputBlurred: () => this.onInputBlurred(), onEnterPressed: () => this.onInputBlurred(), onTabPressed: () => this.onInputBlurred() }));
+    return (index.h("yoo-form-text-area", { ref: (el) => (this.taskTextArea = el), resizable: "none", size: this.size, initialRows: this.rows, maxRows: 5, placeholder: index$2.translate(this.placeholder), disableEnter: true, validateInput: false, inputTabIndex: this.inputTabIndex, disableTab: true, onInputChanged: (ev) => this.onInputChanged(ev), onInputBlurred: () => this.onInputBlurred(), onEnterPressed: () => this.onInputBlurred(), onTabPressed: () => this.onInputBlurred() }));
   }
   renderEditable() {
     return (index.h("div", { class: "outer-container" }, this.renderPreviousTasks(false), this.renderCurrentTasks(false)));
@@ -103,7 +103,7 @@ const YooFormChecklistComponent = class {
   }
   parseHistoryData() {
     let value = '';
-    value = ' ' + overlays.translate('NEXTACTIONS');
+    value = ' ' + index$2.translate('NEXTACTIONS');
     this.currentTasks.forEach((item) => {
       value += ', ' + item;
     });