@yoobic/yobi 8.2.2 → 8.3.0-2

package/dist/cjs/yoo-feed-detail.cjs.entry.js

@@ -2,14 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+const overlays = require('./overlays-b6c94fc8.js');
+require('./index-1fdbd9b3.js');
 const lodash = require('./lodash-597bda6d.js');
-const button_factory = require('./button.factory-0133597a.js');
-const commonHelpers = require('./common-helpers-6970c46c.js');
+const button_factory = require('./button.factory-a01664d3.js');
+const commonHelpers = require('./common-helpers-a4efe957.js');
+require('./index-de8540eb.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
-require('./index-1ff4deca.js');
+require('./index-933cab98.js');
 
 const feedDetailCss = ":host{--card-feed-media-height:260px;--gradient-background-image:linear-gradient(to top, var(--dark, #000000), transparent);--slide-pagination-size:0.4375rem;--slide-pagination-space:var(--spacing-04, 0.25rem);color:var(--light, #ffffff)}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}:host .feed-mention-actions{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding-bottom:var(--spacing-08, 0.5rem);font-size:var(--font-size-16, 1rem)}:host .feed-mention-actions yoo-avatar{padding-right:var(--spacing-04, 0.25rem)}:host .feed-mention-actions span.first-comment-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .global{padding-bottom:var(--spacing-08, 0.5rem);font-size:var(--font-size-16, 1rem)}:host .global.last{padding-bottom:var(--spacing-16, 1rem)}:host .global.last.iphone-x{padding-bottom:var(--spacing-48, 3rem)}:host .feed-bottom-action{padding-bottom:var(--spacing-08, 0.5rem);color:var(--text-color, #807f83);font-size:var(--font-size-16, 1rem);line-height:1.7rem;cursor:pointer}:host .feed-bottom-action.middle{padding:var(--spacing-16, 1rem) 0}:host .feed-bottom-action.subheading{color:var(--dark, #000000);font-weight:var(--font-weight-700, 700)}:host .feed-bottom-action .action yoo-icon{margin-right:0.5rem}:host .feed-details-container{position:fixed;top:0;right:0;bottom:0;left:0;position:absolute;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;font-weight:var(--font-weight-400, 400);font-size:var(--font-size-16, 1rem);font-style:normal;font-stretch:normal;line-height:normal;letter-spacing:normal;background-color:var(--dark, #000000)}:host .feed-details-container yoo-form-carousel{position:absolute}:host .feed-details-container.text-expanded{--gradient-background-image:linear-gradient(var(--dark-60, rgba(0, 0, 0, 0.6)) 100%, var(--dark-60, rgba(0, 0, 0, 0.6)) 100%)}:host .feed-details-container.text-expanded .media-outer-container{z-index:5}:host .feed-details-container.text-expanded .gradient{z-index:7}:host .feed-details-container.has-overflow .bottom-container .feed-text .feed-description .description-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:12vh}:host .feed-details-container.has-overflow .bottom-container .feed-text .feed-description .description-content.expanded{height:40vh;max-height:40vh}:host .feed-details-container.has-overflow .bottom-container .feed-text .feed-description .description-content.expanded .scroll-wrapper{height:auto}:host .feed-details-container.image-focus .bottom-container{z-index:-1;opacity:0;-webkit-transition:all 0.5s ease;transition:all 0.5s ease;pointer-events:none}:host .feed-details-container.image-focus .image-container{z-index:3}:host .feed-details-container.hide-overlay .overlay{display:none}:host .feed-details-container.offline .bottom-container{padding:var(--spacing-16, 1rem)}:host .feed-details-container .bottom-container{position:absolute;right:0;bottom:0;left:0;z-index:6;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:end;justify-content:flex-end;margin-top:auto;padding:var(--spacing-16, 1rem);padding-bottom:0;background-image:var(--gradient-background-image);opacity:1;-webkit-transition:all 0.5s ease;transition:all 0.5s ease}:host .feed-details-container .bottom-container.hidden{visibility:hidden;opacity:0}:host .feed-details-container .bottom-container .feed-header{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding-bottom:var(--spacing-16, 1rem)}:host .feed-details-container .bottom-container .feed-header yoo-avatar{margin-right:0.8rem;-webkit-transform:translateY(3px);transform:translateY(3px)}:host .feed-details-container .bottom-container .feed-header .feed-heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;color:var(--light, #ffffff)}:host .feed-details-container .bottom-container .feed-header .feed-heading .inner-span,:host .feed-details-container .bottom-container .feed-header .feed-heading .extra-heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-top:var(--spacing-04, 0.25rem)}:host .feed-details-container .bottom-container .feed-header .feed-heading .feed-date,:host .feed-details-container .bottom-container .feed-header .feed-heading .feed-shared-in{color:var(--stable-alt, #d0d0d0);font-weight:var(--font-weight-400, 400);font-size:var(--font-size-16, 1rem)}:host .feed-details-container .bottom-container .feed-header .feed-heading .feed-subheading{color:var(--light, #ffffff)}:host .feed-details-container .bottom-container .feed-header .feed-heading .feed-subheading .feed-group{padding-left:0.125rem;color:var(--light, #ffffff);font-weight:var(--font-weight-400, 400)}:host .feed-details-container .bottom-container .feed-text{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;color:var(--light, #ffffff)}:host .feed-details-container .bottom-container .feed-text .feed-hashtags{display:block;line-height:1.2rem}:host .feed-details-container .bottom-container .feed-text .feed-description{font-size:var(--font-size-16, 1rem)}:host .feed-details-container .bottom-container .feed-text .feed-description .description-content{-webkit-transition:all 0.3s ease;transition:all 0.3s ease}:host .feed-details-container .bottom-container .feed-text .feed-description .description-content.expanded{-webkit-transition:all 0.3s ease;transition:all 0.3s ease}:host .feed-details-container .bottom-container .feed-text .feed-description .description-content.expanded .scroll-wrapper yoo-ion-scroll{max-height:40vh}:host .feed-details-container .bottom-container .feed-text .feed-description .description-content .scroll-wrapper{height:inherit;overflow:hidden}:host .feed-details-container .bottom-container .feed-text .feed-description .description-content .scroll-wrapper p{margin:0}:host .feed-details-container .bottom-container .feed-text .feed-description .description-content .more-button{color:var(--stable-alt, #d0d0d0)}:host .feed-details-container .bottom-container .feed-interactions{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;height:var(--spacing-64, 4rem);white-space:nowrap}:host .feed-details-container .bottom-container .feed-interactions .start{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-pack:start;justify-content:flex-start}:host .feed-details-container .bottom-container .feed-interactions .middle{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%}:host .feed-details-container .bottom-container .feed-interactions .middle .dot{width:var(--slide-pagination-size);height:var(--slide-pagination-size);margin:var(--slide-pagination-space);background-color:var(--light-20, rgba(255, 255, 255, 0.2));border-radius:50%;-webkit-transition:background-color 0.2s ease;transition:background-color 0.2s ease}:host .feed-details-container .bottom-container .feed-interactions .middle .dot.active{background-color:var(--light, #ffffff);-webkit-transition:background-color 0.2s ease;transition:background-color 0.2s ease}:host .feed-details-container .bottom-container .feed-interactions .end{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-pack:end;justify-content:flex-end}:host .feed-details-container .bottom-container .feed-interactions .interaction{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:var(--light, #ffffff);cursor:pointer}:host .feed-details-container .bottom-container .feed-interactions .interaction yoo-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;margin:0 var(--spacing-16, 1rem) 0 0}:host .feed-details-container .bottom-container .feed-interactions .interaction yoo-icon.hide-content{padding-right:0}:host .feed-details-container .bottom-container .feed-interactions .interaction yoo-lottie{width:var(--icon-size-02, 1.5rem);height:var(--icon-size-02, 1.5rem);margin:0 var(--spacing-16, 1rem) 0 0}:host .feed-details-container .bottom-container .feed-interactions .interaction.counter{margin-left:var(--spacing-08, 0.5rem)}:host .feed-details-container .bottom-container .feed-interactions .interaction.counter yoo-icon{margin-right:var(--spacing-08, 0.5rem)}:host .feed-details-container .bottom-container .feed-interactions .interaction.counter.auto{margin-left:auto}:host .feed-details-container .bottom-container .feed-interactions .interaction.stable{color:var(--stable, #adadad)}:host .feed-details-container .bottom-container .feed-interactions .interaction.comment,:host .feed-details-container .bottom-container .feed-interactions .interaction.comment span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:auto;margin-left:5px}:host .feed-details-container .bottom-container .interaction-counter{white-space:break-spaces}:host .feed-details-container .image-container{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%}:host .feed-details-container.show-overlay .bottom-container{-ms-flex-align:start;align-items:flex-start;height:100%;max-height:100vh;-webkit-transition:all 0.5s ease;transition:all 0.5s ease}:host .feed-details-container.show-overlay .bottom-container .feed-text .feed-description{display:-ms-flexbox;display:flex}:host .feed-details-container.show-overlay .overlay{display:-ms-flexbox;display:flex}:host(.fullscreen-preview){width:100%;height:100%;background:var(--light, #ffffff)}:host(.fullscreen-preview) .fullscreen-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%;background-color:var(--dark-80, rgba(0, 0, 0, 0.8))}:host(.fullscreen-preview) .fullscreen-container .feed-header{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:var(--toolbar-web-height, 3.5rem);padding:var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);overflow:hidden}:host(.fullscreen-preview) .fullscreen-container .feed-header yoo-icon.close{margin-right:var(--spacing-16, 1rem)}:host(.fullscreen-preview) .fullscreen-container .feed-header yoo-avatar{padding-right:var(--spacing-08, 0.5rem)}:host(.fullscreen-preview) .fullscreen-container .feed-header .feed-heading{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;color:var(--stable, #adadad);font-size:var(--font-size-16, 1rem)}:host(.fullscreen-preview) .fullscreen-container .feed-header .feed-heading .subheading{padding-left:var(--spacing-16, 1rem);color:var(--light, #ffffff);font-size:var(--font-size-16, 1rem)}:host(.fullscreen-preview) .fullscreen-container .feed-header .feed-heading span.username{padding-right:var(--spacing-16, 1rem);color:var(--light, #ffffff);font-size:var(--font-size-16, 1rem);border-right:var(--border-width-01, 0.0625rem) solid var(--light-20, rgba(255, 255, 255, 0.2))}:host(.fullscreen-preview) .fullscreen-container .feed-header .feed-heading span.feed-date{padding-right:var(--spacing-08, 0.5rem);padding-left:var(--spacing-16, 1rem)}:host(.fullscreen-preview) .fullscreen-container .feed-header .feed-heading .inner-span{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host(.fullscreen-preview) .fullscreen-container .feed-header .feed-heading .inner-span yoo-icon.group{margin-right:var(--spacing-04, 0.25rem)}:host(.fullscreen-preview) .fullscreen-container .feed-header .feed-heading .inner-span .feed-group{padding-right:var(--spacing-04, 0.25rem)}:host(.fullscreen-preview) .fullscreen-container .feed-header .fullscreen-preview-container{display:-ms-flexbox;display:flex;height:100%;margin-left:auto}:host(.fullscreen-preview) .fullscreen-container .feed-header .fullscreen-preview-container yoo-img{margin-left:var(--spacing-08, 0.5rem);border:solid var(--spacing-02, 0.125rem) transparent;-webkit-box-shadow:var(--shadow-04, 0 0.75rem 1.5rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-04, 0 0.75rem 1.5rem 0 rgba(0, 0, 0, 0.1))}:host(.fullscreen-preview) .fullscreen-container .feed-header .fullscreen-preview-container yoo-img.selected{border:solid var(--spacing-02, 0.125rem) var(--app-color, #5a30f4)}:host(.fullscreen-preview) .fullscreen-container .main-view-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:100%;max-width:calc(100% - 6rem);height:100%;max-height:calc(100% - 2rem);margin:0 auto;overflow:hidden}:host(.fullscreen-preview) .fullscreen-container .main-view-container yoo-photo-editor{max-height:calc(100% - 2rem);margin:0 auto;--editor-background:transparent}";
 
@@ -39,7 +40,7 @@ const YooFeedDetailComponent = class {
   }
   handleKeyDown(ev) {
     if (this.fullscreenView && !this.zoomed) {
-      const arr = index$1.getMediaSrcFromFeed(this.feed);
+      const arr = overlays.getMediaSrcFromFeed(this.feed);
       if (ev.key === 'ArrowRight' && this.activeMediaIndex < arr.length - 1) {
         this.activeMediaIndex++;
         if (this.feed) {
@@ -56,7 +57,7 @@ const YooFeedDetailComponent = class {
   }
   componentWillLoad() {
     var _a;
-    const arr = index$1.getMediaSrcFromFeed(this.feed);
+    const arr = overlays.getMediaSrcFromFeed(this.feed);
     if ((arr === null || arr === void 0 ? void 0 : arr.length) >= 0) {
       this.activeMediaIndex = ((_a = this.feed) === null || _a === void 0 ? void 0 : _a.currentSlideIndex) || 0;
     }
@@ -66,8 +67,8 @@ const YooFeedDetailComponent = class {
     (_a = this.photoEditorElement) === null || _a === void 0 ? void 0 : _a.prepareImageSize();
   }
   componentDidLoad() {
-    if (index$1.isNativeMobile()) {
-      index$1.StatusBar.hide();
+    if (overlays.isNativeMobile()) {
+      overlays.StatusBar.hide();
     }
     if (this.ionScrollDiv && this.ionScrollDiv.firstElementChild) {
       if (this.ionScrollDiv.firstElementChild.clientHeight > commonHelpers.getWindowHeightRatio(0.1)) {
@@ -80,8 +81,8 @@ const YooFeedDetailComponent = class {
     }
   }
   disconnectedCallback() {
-    if (index$1.isNativeMobile()) {
-      index$1.StatusBar.show();
+    if (overlays.isNativeMobile()) {
+      overlays.StatusBar.show();
     }
   }
   updateIonScroll() {
@@ -119,7 +120,7 @@ const YooFeedDetailComponent = class {
     if (ev) {
       ev.stopPropagation();
     }
-    index$1.dispatchCustomEvent('_globalEvent', this.host, { type: 'feed-comment', eventTarget: 'app-feeds', params: { feed: this.feed } });
+    overlays.dispatchCustomEvent('_globalEvent', this.host, { type: 'feed-comment', eventTarget: 'app-feeds', params: { feed: this.feed } });
   }
   onGroupClicked(ev) {
     if (this.feed.group.length > 1) {
@@ -138,16 +139,16 @@ const YooFeedDetailComponent = class {
     const multiGroups = this.feed.group.length > 1;
     return ([
       index.h("span", { class: "feed-group" }, `${multiGroups ? this.feed.group.length : this.feed.group[0]} `),
-      multiGroups && index$1.translate('GROUPS')
+      multiGroups && overlays.translate('GROUPS')
     ]);
   }
   renderFullscreenHeader() {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    const arr = ((_a = this.fullscreenParams) === null || _a === void 0 ? void 0 : _a.mediaSrc) || index$1.getMediaSrcFromFeed(this.feed);
-    const heading = ((_b = this.fullscreenParams) === null || _b === void 0 ? void 0 : _b.heading) || (((_c = this.feed) === null || _c === void 0 ? void 0 : _c.user) ? index$1.getUserDisplayName(this.feed.user) : null);
-    const isOnline = index$1.isNullOrUndefined(this.feed) ? undefined : (_d = this.feed) === null || _d === void 0 ? void 0 : _d.isOnline;
+    const arr = ((_a = this.fullscreenParams) === null || _a === void 0 ? void 0 : _a.mediaSrc) || overlays.getMediaSrcFromFeed(this.feed);
+    const heading = ((_b = this.fullscreenParams) === null || _b === void 0 ? void 0 : _b.heading) || (((_c = this.feed) === null || _c === void 0 ? void 0 : _c.user) ? overlays.getUserDisplayName(this.feed.user) : null);
+    const isOnline = overlays.isNullOrUndefined(this.feed) ? undefined : (_d = this.feed) === null || _d === void 0 ? void 0 : _d.isOnline;
     const user = ((_e = this.fullscreenParams) === null || _e === void 0 ? void 0 : _e.user) || ((_f = this.feed) === null || _f === void 0 ? void 0 : _f.user);
-    return (index.h("div", { class: "feed-header" }, this.fullscreenView && index.h("yoo-icon", { onClick: () => index$1.closeModal(null), name: "close", class: "close", color: "light" }), index.h("yoo-avatar", { user: user, size: "small", isOnline: isOnline, onClick: () => this.userClicked.emit() }), index.h("div", { class: "feed-heading" }, heading && index.h("span", { class: "username" }, heading), ((_g = this.fullscreenParams) === null || _g === void 0 ? void 0 : _g.subheading) && index.h("span", { class: "subheading" }, this.fullscreenParams.subheading), ((_h = this.feed) === null || _h === void 0 ? void 0 : _h.date) && index.h("span", { class: "feed-date" }, index$1.pipes.timeAgo.transform((_j = this.feed) === null || _j === void 0 ? void 0 : _j._ect)), ((_l = (_k = this.feed) === null || _k === void 0 ? void 0 : _k.group) === null || _l === void 0 ? void 0 : _l.length) &&
+    return (index.h("div", { class: "feed-header" }, this.fullscreenView && index.h("yoo-icon", { onClick: () => overlays.closeModal(null), name: "close", class: "close", color: "light" }), index.h("yoo-avatar", { user: user, size: "small", isOnline: isOnline, onClick: () => this.userClicked.emit() }), index.h("div", { class: "feed-heading" }, heading && index.h("span", { class: "username" }, heading), ((_g = this.fullscreenParams) === null || _g === void 0 ? void 0 : _g.subheading) && index.h("span", { class: "subheading" }, this.fullscreenParams.subheading), ((_h = this.feed) === null || _h === void 0 ? void 0 : _h.date) && index.h("span", { class: "feed-date" }, overlays.pipes.timeAgo.transform((_j = this.feed) === null || _j === void 0 ? void 0 : _j._ect)), ((_l = (_k = this.feed) === null || _k === void 0 ? void 0 : _k.group) === null || _l === void 0 ? void 0 : _l.length) &&
       index.h("span", { class: "inner-span", onClick: (ev) => this.onGroupClicked(ev) }, index.h("yoo-icon", { name: "group", class: "group", color: "stable", size: "small" }), this.renderSharedIn())), (arr === null || arr === void 0 ? void 0 : arr.length) >= 0 && this.fullscreenView &&
       index.h("div", { class: "fullscreen-preview-container" }, arr.map((src, index$1) => {
         var _a, _b;
@@ -160,9 +161,9 @@ const YooFeedDetailComponent = class {
       }))));
   }
   renderHeader() {
-    return (index.h("div", { class: "feed-header" }, index.h("yoo-avatar", { user: this.feed ? this.feed.user : null, size: "large", isOnline: this.feed.isOnline, onClick: () => this.userClicked.emit() }), index.h("div", { class: "feed-heading" }, this.feed && this.feed.user ? index.h("span", null, index$1.getUserDisplayName(this.feed.user)) : null, index.h("div", { class: "extra-heading" }, this.feed && this.feed.date ? index.h("span", { class: "feed-date" }, index$1.pipes.timeAgo.transform(this.feed._ect), ".") : null, this.feed && this.feed.group && this.feed.group.length
+    return (index.h("div", { class: "feed-header" }, index.h("yoo-avatar", { user: this.feed ? this.feed.user : null, size: "large", isOnline: this.feed.isOnline, onClick: () => this.userClicked.emit() }), index.h("div", { class: "feed-heading" }, this.feed && this.feed.user ? index.h("span", null, overlays.getUserDisplayName(this.feed.user)) : null, index.h("div", { class: "extra-heading" }, this.feed && this.feed.date ? index.h("span", { class: "feed-date" }, overlays.pipes.timeAgo.transform(this.feed._ect), ".") : null, this.feed && this.feed.group && this.feed.group.length
       ? [
-        index.h("span", { class: "inner-span", onClick: (ev) => this.onGroupClicked(ev) }, index.h("span", { class: "feed-shared-in" }, " ", ` • ${index$1.translate('SHAREDIN')} `), index.h("span", { class: "feed-subheading" }, typeof this.feed.group === 'string' ? [
+        index.h("span", { class: "inner-span", onClick: (ev) => this.onGroupClicked(ev) }, index.h("span", { class: "feed-shared-in" }, " ", ` • ${overlays.translate('SHAREDIN')} `), index.h("span", { class: "feed-subheading" }, typeof this.feed.group === 'string' ? [
           index.h("span", null, " "),
           index.h("span", { class: "feed-group" }, this.feed.group)
         ] : this.renderSharedIn()))
@@ -181,11 +182,11 @@ const YooFeedDetailComponent = class {
   renderText() {
     var _a;
     let description = (_a = this.feed) === null || _a === void 0 ? void 0 : _a.description;
-    description = this.feed.descriptionTranslated || index$1.translateMulti(index$1.replaceAllLinks(index$1.parseMarkDown(description), true));
+    description = this.feed.descriptionTranslated || overlays.translateMulti(overlays.replaceAllLinks(overlays.parseMarkDown(description), true));
     return (index.h("div", { class: "feed-text" }, description && (index.h("div", { class: "feed-description" }, index.h("div", { class: {
         'description-content': true,
         'expanded': this.expandText
-      } }, index.h("div", { class: "scroll-wrapper" }, index.h("yoo-ion-scroll", { class: "relative no-contain", showScrollbar: false, ref: (el) => (this.ionScrollDiv = el) }, index.h("div", { class: "scroll-inner-container" }, this.feed && index.h("yoo-truncate", { content: description, collapsed: !this.expandText, byWords: true, showEllipsisButton: true, onContentToggled: (ev) => this.onToggleMore(ev), maxLength: 10 }, " "), this.feed && this.feed.tags ? index.h("div", { class: "feed-hashtags" }, this.feed && this.feed.tags.map((a) => index.h("span", { class: { 'hashtag': true, 'app-color': true }, innerHTML: `#${index$1.translateMulti(a).toLowerCase()} ` }))) : null))))))));
+      } }, index.h("div", { class: "scroll-wrapper" }, index.h("yoo-ion-scroll", { class: "relative no-contain", showScrollbar: false, ref: (el) => (this.ionScrollDiv = el) }, index.h("div", { class: "scroll-inner-container" }, this.feed && index.h("yoo-truncate", { content: description, collapsed: !this.expandText, byWords: true, showEllipsisButton: true, onContentToggled: (ev) => this.onToggleMore(ev), maxLength: 10 }, " "), this.feed && this.feed.tags ? index.h("div", { class: "feed-hashtags" }, this.feed && this.feed.tags.map((a) => index.h("span", { class: { 'hashtag': true, 'app-color': true }, innerHTML: `#${overlays.translateMulti(a).toLowerCase()} ` }))) : null))))))));
   }
   renderOverlay() {
     return (index.h("div", { onClick: () => {
@@ -197,7 +198,7 @@ const YooFeedDetailComponent = class {
     return (index.h("div", { class: "feed-interactions" }, this.isOffline
       ? null
       : [
-        index.h("div", { class: "start" }, this.feed.disableLikes ? null : this.renderInteraction('heart', '', () => this.likeClicked.emit(true), '', this.feed.isLikedByMe ? 'danger' : 'stable-alt'), this.feed.disableComments ? null : this.renderInteraction('comment', '', () => this.commentClicked.emit(true), '', 'stable-alt'), index$1.getPermissions().canSocialShare && index$1.isNativeMobile() && !this.feed.disableSharing && this.renderInteraction('share', '', () => this.socialShareClicked.emit(true), '', 'stable-alt')),
+        index.h("div", { class: "start" }, this.feed.disableLikes ? null : this.renderInteraction('heart', '', () => this.likeClicked.emit(true), '', this.feed.isLikedByMe ? 'danger' : 'stable-alt'), this.feed.disableComments ? null : this.renderInteraction('comment', '', () => this.commentClicked.emit(true), '', 'stable-alt'), overlays.getPermissions().canSocialShare && overlays.isNativeMobile() && !this.feed.disableSharing && this.renderInteraction('share', '', () => this.socialShareClicked.emit(true), '', 'stable-alt')),
         index.h("div", { class: "middle" }, ((_a = this.feed.mediaSrc) === null || _a === void 0 ? void 0 : _a.length) > 1 && this.renderSlidePagination()),
         index.h("div", { class: "end" }, this.showReadReceipt && this.renderInteraction('read', (this.feed.readsCount ? this.feed.readsCount : 0).toString(), () => this.readReceiptClickd.emit(true), 'auto counter', 'stable-alt'), this.showViewCount && this.renderInteraction('eye', (this.feed.viewsCount ? this.feed.viewsCount : 0).toString(), () => this.viewCountClicked.emit(true), 'counter', 'stable-alt'))
       ]));
@@ -211,7 +212,7 @@ const YooFeedDetailComponent = class {
   }
   renderMainView() {
     return (index.h("div", { class: "main-view-container" }, this.renderPhotoEditors({
-      ...(this.feed && { src: index$1.getMediaSrcFromFeed(this.feed) }),
+      ...(this.feed && { src: overlays.getMediaSrcFromFeed(this.feed) }),
       ...(this.fullscreenParams && this.fullscreenParams.photoEditorParams)
     })));
   }
@@ -223,14 +224,14 @@ const YooFeedDetailComponent = class {
       description = description.replace(/<br[^>]*>/g, '');
     }
     const mentionedBy = this.feed.firstComment.user || null;
-    const hasImage = index$1.isMedia(description) || description.includes('<ionic-chat-image');
+    const hasImage = overlays.isMedia(description) || description.includes('<ionic-chat-image');
     let firstCommentText = (_b = (_a = this.feed) === null || _a === void 0 ? void 0 : _a.firstComment) === null || _b === void 0 ? void 0 : _b.text;
     if (firstCommentText && this.feed.firstComment.mentions) {
-      firstCommentText = index$1.replaceAtTagToMentionTag(firstCommentText, this.feed.firstComment.mentions);
+      firstCommentText = overlays.replaceAtTagToMentionTag(firstCommentText, this.feed.firstComment.mentions);
     }
     return (index.h("div", { class: "feed-mention-actions", onClick: (ev) => {
         this.onFirstCommentClicked(ev);
-      } }, mentionedBy && index.h("yoo-avatar", { user: mentionedBy, size: "extra-small" }), hasImage ? index.h("span", { class: "app-color" }, index$1.translate('VIEWMEDIA'), " ") : index.h("span", { class: "first-comment-text" }, index$1.removeMarkdown(firstCommentText))));
+      } }, mentionedBy && index.h("yoo-avatar", { user: mentionedBy, size: "extra-small" }), hasImage ? index.h("span", { class: "app-color" }, overlays.translate('VIEWMEDIA'), " ") : index.h("span", { class: "first-comment-text" }, overlays.removeMarkdown(firstCommentText))));
   }
   renderActions(actions, middle, slotName) {
     return actions.map((item) => {
@@ -260,7 +261,7 @@ const YooFeedDetailComponent = class {
           extraClass = this.addExtraClass(extraClass, 'offline');
         }
         if (this.feed && this.feed.document) {
-          extraClass = this.addExtraClass(extraClass, index$1.getType(this.feed.document));
+          extraClass = this.addExtraClass(extraClass, overlays.getType(this.feed.document));
         }
         if (this.imageEnlarged) {
           extraClass = this.addExtraClass(extraClass, 'image-focus');
@@ -283,7 +284,7 @@ const YooFeedDetailComponent = class {
   render() {
     var _a;
     return (index.h(index.Host, { class: { 'fullscreen-preview': this.fullscreenView, ...commonHelpers.getAppContext(this.host) } }, this.fullscreenView ? this.renderFullscreenView() :
-      index.h("div", { class: this._class('feed-details-container'), ref: (el) => (this.feedDetailContainer = el) }, this.hasMediaSrc() && this.renderMedia(), index.h("div", { class: "bottom-container", ref: ev => this.bottomContainerElement = ev }, this.renderHeader(), this.renderText(), !!((_a = this.actions) === null || _a === void 0 ? void 0 : _a.length) && this.renderActions(this.actions), this.renderInteractionContainer(), !this.feed.disableLikes && this.renderInteraction(null, index$1.getFeedLikes(this.feed.likesCount), () => this.likeCountClicked.emit(true), 'global'), this.feed.firstComment && this.renderFirstComment(), !this.feed.disableComments && this.renderInteraction(null, this.feed.comments && this.feed.comments.length ? index$1.translate('VIEWALLCOMMENTS', { count: this.feed.comments.length || 0 }) : index$1.translate('FIRSTCOMMENT'), () => this.commentClicked.emit(false), `global stable comment last ${index$1.isIphoneX() ? 'iphone-x' : ''}`)))));
+      index.h("div", { class: this._class('feed-details-container'), ref: (el) => (this.feedDetailContainer = el) }, this.hasMediaSrc() && this.renderMedia(), index.h("div", { class: "bottom-container", ref: ev => this.bottomContainerElement = ev }, this.renderHeader(), this.renderText(), !!((_a = this.actions) === null || _a === void 0 ? void 0 : _a.length) && this.renderActions(this.actions), this.renderInteractionContainer(), !this.feed.disableLikes && this.renderInteraction(null, overlays.getFeedLikes(this.feed.likesCount), () => this.likeCountClicked.emit(true), 'global'), this.feed.firstComment && this.renderFirstComment(), !this.feed.disableComments && this.renderInteraction(null, this.feed.comments && this.feed.comments.length ? overlays.translate('VIEWALLCOMMENTS', { count: this.feed.comments.length || 0 }) : overlays.translate('FIRSTCOMMENT'), () => this.commentClicked.emit(false), `global stable comment last ${overlays.isIphoneX() ? 'iphone-x' : ''}`)))));
   }
   get host() { return index.getElement(this); }
 };

package/dist/cjs/yoo-flag.cjs.entry.js

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const flagCss = ":host{display:-ms-flexbox;display:flex;width:100%;height:100%}:host img{width:inherit;height:inherit}:host([shape=circle]) img{border-radius:50%}:host([has-shadow]) img{-webkit-box-shadow:var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1))}";
 
@@ -29,7 +30,7 @@ const YooFlagComponent = class {
     return this.shape === 'rectangular' ? '4x3' : '1x1';
   }
   render() {
-    return !!this.country && index.h("img", { src: index.getAssetPath(`./assets/flag/${this.format}/${this.code}.svg`), alt: index$1.translate(`COUNTRYCODE${this.code.toUpperCase()}`) });
+    return !!this.country && index.h("img", { src: index.getAssetPath(`./assets/flag/${this.format}/${this.code}.svg`), alt: overlays.translate(`COUNTRYCODE${this.code.toUpperCase()}`) });
   }
 };
 YooFlagComponent.style = flagCss;

package/dist/cjs/yoo-flip-card.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
+const index = require('./index-e182c32d.js');
 
 const flipCardCss = ":host([flip-direction=vertical]) .back{-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}:host([flip-direction=vertical][revealed]) .inner{-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}:host([flip-direction=horizontal]) .back{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}:host([flip-direction=horizontal][revealed]) .inner{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}:host{display:grid;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}:host .card{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;background-color:transparent;-webkit-perspective:62.5rem;perspective:62.5rem}:host .card .inner{position:relative;margin:0 auto;text-align:center;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:height 0.6s, -webkit-transform 0.6s;transition:height 0.6s, -webkit-transform 0.6s;transition:height 0.6s, transform 0.6s;transition:height 0.6s, transform 0.6s, -webkit-transform 0.6s}:host .card .inner .front,:host .card .inner .back{position:absolute;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-backface-visibility:hidden;backface-visibility:hidden;cursor:pointer;-webkit-transition:height 0.6s;transition:height 0.6s}:host([layout=card]){--front-card-background-color:var(--light, #ffffff);--back-card-background-color:var(--app-color, #5a30f4);--front-card-text-color:var(--dark, #000000);--back-card-text-color:var(--light, #ffffff)}:host([layout=card]) .card{-webkit-transform:scale(0.95);transform:scale(0.95);opacity:0;-webkit-transition:opacity 0.3s, -webkit-transform 0.4s;transition:opacity 0.3s, -webkit-transform 0.4s;transition:transform 0.4s, opacity 0.3s;transition:transform 0.4s, opacity 0.3s, -webkit-transform 0.4s}:host([layout=card]) .card .inner{width:100%;height:100%}:host([layout=card]) .card .inner .front,:host([layout=card]) .card .inner .back{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;padding:var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);border-radius:var(--border-radius-08, 0.5rem);-webkit-box-shadow:var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1))}:host([layout=card]) .card .inner .front{color:var(--front-card-text-color);background-color:var(--front-card-background-color)}:host([layout=card]) .card .inner .back{color:var(--back-card-text-color);background-color:var(--back-card-background-color)}:host([layout=card]) .card.loaded{-webkit-transform:scale(1);transform:scale(1);opacity:1}";
 

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

@@ -2,13 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
 const lodash = require('./lodash-597bda6d.js');
-const formInputHelpers = require('./form-input-helpers-a04f76d2.js');
+const formInputHelpers = require('./form-input-helpers-a2843dc0.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
-require('./common-helpers-6970c46c.js');
+require('./index-de8540eb.js');
+require('./common-helpers-a4efe957.js');
 
 const formAudienceCss = ":host .outer-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%}:host .outer-container yoo-tabs{--height-tabs:2.5rem;--tab-padding:0 var(--spacing-16, 1rem) 0 0}:host .outer-container .save-container{position:absolute;top:4.0625rem;right:0;z-index:11}:host .outer-container yoo-form-input-container.bordered{margin-bottom:var(--spacing-08, 0.5rem);padding-bottom:var(--spacing-08, 0.5rem);border-bottom:var(--spacing-04, 0.25rem) solid var(--stable-light, #f1f1f1)}:host .outer-container .segment-container,:host .outer-container .radio-container{--form-radio-label-gap:0;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}:host .outer-container .segment-container yoo-segmented-control,:host .outer-container .radio-container yoo-segmented-control{max-width:18.75rem;margin-right:var(--spacing-16, 1rem)}:host .outer-container .segment-container yoo-icon,:host .outer-container .radio-container yoo-icon{margin-right:var(--spacing-08, 0.5rem)}:host .outer-container .segment-container .info,:host .outer-container .radio-container .info{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;color:var(--text-color, #807f83);font-size:var(--font-size-12, 0.75rem)}:host .outer-container .field-title{margin-bottom:var(--spacing-08, 0.5rem);font-weight:var(--font-weight-400, 400)}:host .outer-container yoo-collapsible.margin-bottom{margin-bottom:var(--spacing-08, 0.5rem)}:host .outer-container .rules{margin-bottom:var(--spacing-08, 0.5rem);padding-bottom:var(--spacing-08, 0.5rem);border-bottom:var(--spacing-04, 0.25rem) solid var(--stable-light, #f1f1f1)}:host .outer-container .rules .rule-container{margin-bottom:var(--spacing-08, 0.5rem);padding-bottom:var(--spacing-08, 0.5rem)}:host .outer-container .rules .rule-container .rule-title{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-bottom:var(--spacing-08, 0.5rem);font-size:var(--font-size-14, 0.875rem)}:host .outer-container .rules .rule-container .rule-title yoo-icon{margin-right:var(--spacing-08, 0.5rem)}:host .outer-container .rules .rule-container .rule-title yoo-icon[name=info]{margin-left:var(--spacing-08, 0.5rem)}:host .outer-container .rules .rule-container .rule-title .info{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;color:var(--text-color, #807f83);font-size:var(--font-size-12, 0.75rem)}:host .outer-container .rules .rule-container .rule{padding:var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);padding-bottom:var(--spacing-04, 0.25rem);background:var(--stable-ultralight, #fafafa);border:solid 0.0625rem var(--stable-alt, #d0d0d0);border-radius:var(--border-radius-08, 0.5rem)}:host .outer-container .preview{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;margin-bottom:var(--spacing-08, 0.5rem);padding-bottom:var(--spacing-08, 0.5rem)}:host .outer-container .preview .preview-container{padding:var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);background:var(--stable-ultralight, #fafafa);border:solid 0.0625rem var(--stable-alt, #d0d0d0);border-radius:var(--border-radius-08, 0.5rem);-webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out}:host .outer-container .preview .preview-container.opened{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;min-height:34rem}:host .outer-container .preview .preview-container .preview-header{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}:host .outer-container .preview .preview-container .preview-header.clickable{cursor:pointer}:host .outer-container .preview .preview-container .preview-header yoo-form-toggle{margin-left:var(--spacing-24, 1.5rem)}:host .outer-container .preview .preview-container .preview-header .preview-total,:host .outer-container .preview .preview-container .preview-header .preview-sub,:host .outer-container .preview .preview-container .preview-header .preview-toggle{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .outer-container .preview .preview-container .preview-header .preview-total,:host .outer-container .preview .preview-container .preview-header .preview-sub{margin-right:var(--spacing-08, 0.5rem)}:host .outer-container .preview .preview-container .preview-header .preview-total yoo-icon,:host .outer-container .preview .preview-container .preview-header .preview-sub yoo-icon{margin-right:var(--spacing-04, 0.25rem)}:host .outer-container .preview .preview-container .preview-header .preview-total{font-weight:bold;font-size:var(--font-size-32, 2rem)}:host .outer-container .preview .preview-container .preview-header .preview-sub{margin-top:var(--spacing-08, 0.5rem);font-size:var(--font-size-16, 1rem)}:host .outer-container .preview .preview-container .preview-header .preview-toggle{-ms-flex:1;flex:1;-ms-flex-pack:end;justify-content:flex-end;color:var(--app-color, #5a30f4);font-size:var(--font-size-14, 0.875rem)}:host .outer-container .preview .preview-container .preview-header .preview-toggle yoo-icon{margin-left:var(--spacing-04, 0.25rem)}:host .outer-container .preview .preview-container .preview-grid{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column}:host .outer-container .preview .preview-container .preview-grid yoo-grid{position:inherit !important;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column}:host .outer-container .saved-grid{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column}:host .outer-container .saved-grid yoo-grid{position:inherit !important;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column}:host(.mobile) .outer-container .preview .preview-container .preview-header{-ms-flex-wrap:wrap;flex-wrap:wrap}:host(.mobile) .outer-container .preview .preview-container .preview-header yoo-form-toggle{width:100%;margin-left:0}:host(.mobile) .outer-container .preview .preview-container .preview-header .preview-toggle{margin-top:var(--spacing-08, 0.5rem)}:host(.mobile) .outer-container .preview .preview-container .preview-header .preview-sub{margin-top:calc(var(--spacing-08, 0.5rem) + var(--spacing-04, 0.25rem));font-size:var(--font-size-12, 0.75rem)}:host(.mobile) .outer-container .preview .preview-container .preview-header .preview-sub+.preview-sub{-ms-flex:1 0 100%;flex:1 0 100%;-ms-flex-order:1;order:1;margin-top:0}:host(.mobile) .outer-container yoo-grid.audiences{min-height:25rem}:host(.mobile) .outer-container .save-container{top:3rem}";
 
@@ -29,22 +30,22 @@ const YooFormAudienceComponent = class {
     this.typeValues = ['automatic', 'manual'];
     this.tabs = [
       {
-        title: index$1.translate('AUDIENCECREATE'),
+        title: overlays.translate('AUDIENCECREATE'),
         value: 'create'
       },
       {
-        title: index$1.translate('AUDIENCEUSESAVED'),
+        title: overlays.translate('AUDIENCEUSESAVED'),
         value: 'saved'
       }
     ];
     this.gridTabs = [
       {
-        title: index$1.translate('USERS'),
+        title: overlays.translate('USERS'),
         icon: 'user',
         value: 'users'
       },
       {
-        title: index$1.translate('LOCATIONS'),
+        title: overlays.translate('LOCATIONS'),
         icon: 'pin',
         value: 'saved'
       }
@@ -80,7 +81,7 @@ const YooFormAudienceComponent = class {
   async updateCount() {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     this.value = this.value || {};
-    const ret = await index$1.getAsyncExtraData({
+    const ret = await overlays.getAsyncExtraData({
       type: 'audience-count',
       params: { ...(this.value || {}), mode: this.mode }
     });
@@ -136,7 +137,7 @@ const YooFormAudienceComponent = class {
     await this.updateUserQuery(ev.detail, true, null, null, null, true);
   }
   async updateUserQuery(sortsAndFilters, isSelectAll, selectionIds, selectionRemovedIds, search, refreshGrids) {
-    const ret = await index$1.getAsyncExtraData({
+    const ret = await overlays.getAsyncExtraData({
       type: 'grid-query',
       params: {
         collectionName: 'user',
@@ -158,7 +159,7 @@ const YooFormAudienceComponent = class {
     await this.updateStoreQuery(ev.detail, true, null, null, null, true);
   }
   async updateStoreQuery(sortsAndFilters, isSelectAll, selectionIds, selectionRemovedIds, search, refreshGrids) {
-    const ret = await index$1.getAsyncExtraData({
+    const ret = await overlays.getAsyncExtraData({
       type: 'grid-query',
       params: {
         collectionName: 'locations',
@@ -183,7 +184,7 @@ const YooFormAudienceComponent = class {
     field.collectionName = 'user';
     field.gridCurrentSearch = ev.detail;
     field.gridGetCustomDataLoader = field.gridGetCustomDataLoader || this.gridGetCustomDataLoader;
-    index$1.getAsyncExtraData({
+    overlays.getAsyncExtraData({
       type: 'field-fetch-data', params: {
         field: field,
         search: field.gridCurrentSearch,
@@ -223,7 +224,7 @@ const YooFormAudienceComponent = class {
     field.collectionName = 'locations';
     field.gridCurrentSearch = ev.detail;
     delete field.gridGetCustomDataLoader;
-    index$1.getAsyncExtraData({
+    overlays.getAsyncExtraData({
       type: 'field-fetch-data', params: {
         field: field,
         search: field.gridCurrentSearch,
@@ -264,7 +265,7 @@ const YooFormAudienceComponent = class {
     field.collectionName = 'audiences';
     field.gridCurrentSearch = ev.detail;
     delete field.gridGetCustomDataLoader;
-    index$1.getAsyncExtraData({
+    overlays.getAsyncExtraData({
       type: 'field-fetch-data',
       params: {
         field: field,
@@ -283,7 +284,7 @@ const YooFormAudienceComponent = class {
   }
   onUseSavedAudience(audience) {
     if (audience === null || audience === void 0 ? void 0 : audience._id) {
-      index$1.getAsyncExtraData({
+      overlays.getAsyncExtraData({
         type: 'show-entity-by-id',
         params: {
           entityType: 'audiences',
@@ -302,7 +303,7 @@ const YooFormAudienceComponent = class {
     }
   }
   onSaveAudience() {
-    index$1.getAsyncExtraData({
+    overlays.getAsyncExtraData({
       type: 'audience-save',
       params: this.value
     }).then((ret) => {
@@ -321,65 +322,65 @@ const YooFormAudienceComponent = class {
     return this.allowLibrary && index.h("yoo-tabs", { class: "web", ref: (el) => this.tabsEl = el, tabs: this.tabs, onTabSelected: (event) => this.onTabSelected(event), initialIndex: 0 });
   }
   renderSave() {
-    return !this.readonly && this.allowLibrary && this.isDirty && index.h("div", { class: "save-container" }, index.h("yoo-tooltip", { hoverable: index$1.isWeb(this.host), placement: "bottom", content: index$1.translate('AUDIENCESAVEBUTTONHOVER') }, index.h("yoo-button", { onClick: () => this.onSaveAudience(), color: "light", class: "margin-right", shape: "rectangular", size: "medium" }, index$1.translate('AUDIENCESAVEAS'))));
+    return !this.readonly && this.allowLibrary && this.isDirty && index.h("div", { class: "save-container" }, index.h("yoo-tooltip", { hoverable: overlays.isWeb(this.host), placement: "bottom", content: overlays.translate('AUDIENCESAVEBUTTONHOVER') }, index.h("yoo-button", { onClick: () => this.onSaveAudience(), color: "light", class: "margin-right", shape: "rectangular", size: "medium" }, overlays.translate('AUDIENCESAVEAS'))));
   }
   renderHelp(text) {
-    return index$1.isWeb(this.host) ? [
+    return overlays.isWeb(this.host) ? [
       !this.readonly && index.h("yoo-icon", { name: "info", color: "stable", size: "small" }),
-      !this.readonly && index.h("div", { class: "info", innerHTML: index$1.translate(text) })
+      !this.readonly && index.h("div", { class: "info", innerHTML: overlays.translate(text) })
     ] : [
-      !this.readonly && index.h("yoo-tooltip", { placement: "bottom", content: index$1.translate(text) }, index.h("yoo-icon", { name: "info", color: "stable", size: "small" }))
+      !this.readonly && index.h("yoo-tooltip", { placement: "bottom", content: overlays.translate(text) }, index.h("yoo-icon", { name: "info", color: "stable", size: "small" }))
     ];
   }
   renderTarget() {
     var _a;
     const target = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.target) || 'byuser';
-    const index$2 = this.targetValues.findIndex((v) => v.id === target);
-    return this.enableTarget && index.h("yoo-form-input-container", { class: "bordered", hideOptional: true, field: { title: index$1.translate('AUDIENCETARGET') } }, index.h("div", { class: "segment-container" }, index.h("yoo-segmented-control", { readonly: this.readonly, size: "medium", class: "segment", values: this.targetValues, initialIndex: index$2, onSegmentSelected: (ev) => this.onTargetChanged(ev) }), this.renderHelp(`AUDIENCETARGET${target.toUpperCase()}HELP`)));
+    const index$1 = this.targetValues.findIndex((v) => v.id === target);
+    return this.enableTarget && index.h("yoo-form-input-container", { class: "bordered", hideOptional: true, field: { title: overlays.translate('AUDIENCETARGET') } }, index.h("div", { class: "segment-container" }, index.h("yoo-segmented-control", { readonly: this.readonly, size: "medium", class: "segment", values: this.targetValues, initialIndex: index$1, onSegmentSelected: (ev) => this.onTargetChanged(ev) }), this.renderHelp(`AUDIENCETARGET${target.toUpperCase()}HELP`)));
   }
   renderStoreTarget() {
     var _a;
     const target = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.target) || 'byuser';
-    return index.h("yoo-form-toggle", { size: "small", readonly: false, header: index$1.translate('AUDIENCESTORETARGET'), value: target === 'byuser', onInputChanged: (ev) => this.onStoreTargetToggleSelected(ev) });
+    return index.h("yoo-form-toggle", { size: "small", readonly: false, header: overlays.translate('AUDIENCESTORETARGET'), value: target === 'byuser', onInputChanged: (ev) => this.onStoreTargetToggleSelected(ev) });
   }
   renderType() {
     var _a;
     const type = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.type) || 'automatic';
-    return index.h("yoo-form-input-container", { class: "bordered", hideOptional: true, field: { title: index$1.translate('AUDIENCETYPE') } }, index.h("yoo-form-radio", { flow: "row", options: this.typeValues, readonly: this.forceManualType || this.readonly, size: "medium", value: type, onInputChanged: (ev) => this.onTypeChanged(ev), helpers: this.typeValues.map((option) => index$1.translate((this.tooltipPrefix || '') + `AUDIENCETYPE${option.toUpperCase()}HELP`)) }, this.typeValues.map((option, index$2) => index.h("div", { class: "radio-container", slot: `${index$2}` }, index.h("span", { class: "radio-title" }, index$1.translate('AUDIENCETYPE' + option.toUpperCase()))))));
+    return index.h("yoo-form-input-container", { class: "bordered", hideOptional: true, field: { title: overlays.translate('AUDIENCETYPE') } }, index.h("yoo-form-radio", { flow: "row", options: this.typeValues, readonly: this.forceManualType || this.readonly, size: "medium", value: type, onInputChanged: (ev) => this.onTypeChanged(ev), helpers: this.typeValues.map((option) => overlays.translate((this.tooltipPrefix || '') + `AUDIENCETYPE${option.toUpperCase()}HELP`)) }, this.typeValues.map((option, index$1) => index.h("div", { class: "radio-container", slot: `${index$1}` }, index.h("span", { class: "radio-title" }, overlays.translate('AUDIENCETYPE' + option.toUpperCase()))))));
   }
   renderUserRules() {
     var _a, _b, _c;
     const type = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.type) || 'automatic';
     const value = ((_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.usersQuery) === null || _c === void 0 ? void 0 : _c.sortsAndFilters) || {};
-    return (index.h("div", { class: "rule-container" }, index.h("div", { class: "rule-title" }, index.h("yoo-icon", { name: "user", color: "dark", size: "small" }), index$1.translate(type === 'manual' ? 'AUDIENCEFILTERUSER' : 'AUDIENCERULEUSER')), index.h("div", { class: "rule" }, index.h("yoo-form-query-builder", { readonly: this.readonly, size: index$1.isWeb(this.host) ? 'small' : 'medium', hideSorts: true, value: value, model: this.models[0], onInputChanged: (ev) => this.onUserQueryChanged(ev) }))));
+    return (index.h("div", { class: "rule-container" }, index.h("div", { class: "rule-title" }, index.h("yoo-icon", { name: "user", color: "dark", size: "small" }), overlays.translate(type === 'manual' ? 'AUDIENCEFILTERUSER' : 'AUDIENCERULEUSER')), index.h("div", { class: "rule" }, index.h("yoo-form-query-builder", { readonly: this.readonly, size: overlays.isWeb(this.host) ? 'small' : 'medium', hideSorts: true, value: value, model: this.models[0], onInputChanged: (ev) => this.onUserQueryChanged(ev) }))));
   }
   renderStoreRules() {
     var _a, _b, _c;
     const type = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.type) || 'automatic';
     const value = ((_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.storesQuery) === null || _c === void 0 ? void 0 : _c.sortsAndFilters) || {};
-    return (index.h("div", { class: "rule-container" }, index.h("div", { class: "rule-title" }, index.h("yoo-icon", { name: "pin", color: "dark", size: "small" }), index$1.translate(type === 'manual' ? 'AUDIENCEFILTERSITE' : 'AUDIENCERULESITE'), this.renderHelp('AUDIENCEFILTERSITEHELP')), index.h("div", { class: "rule" }, index.h("yoo-form-query-builder", { readonly: this.readonly, size: index$1.isWeb(this.host) ? 'small' : 'medium', hideSorts: true, value: value, model: this.models[1], onInputChanged: (ev) => this.onStoreQueryChanged(ev) }))));
+    return (index.h("div", { class: "rule-container" }, index.h("div", { class: "rule-title" }, index.h("yoo-icon", { name: "pin", color: "dark", size: "small" }), overlays.translate(type === 'manual' ? 'AUDIENCEFILTERSITE' : 'AUDIENCERULESITE'), this.renderHelp('AUDIENCEFILTERSITEHELP')), index.h("div", { class: "rule" }, index.h("yoo-form-query-builder", { readonly: this.readonly, size: overlays.isWeb(this.host) ? 'small' : 'medium', hideSorts: true, value: value, model: this.models[1], onInputChanged: (ev) => this.onStoreQueryChanged(ev) }))));
   }
   renderRules() {
     var _a;
     const type = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.type) || 'automatic';
     return index.h("yoo-collapsible", { class: { 'margin-bottom': this.rulesCollapsed }, collapsed: this.rulesCollapsed, onContentShown: (v) => {
         this.rulesCollapsed = !v.detail;
-      }, header: index$1.translate(type === 'manual' ? 'AUDIENCEFILTERS' : 'AUDIENCERULES') }, index.h("div", { class: "rules" }, this.renderUserRules(), this.mode !== 'store' && this.renderStoreRules()));
+      }, header: overlays.translate(type === 'manual' ? 'AUDIENCEFILTERS' : 'AUDIENCERULES') }, index.h("div", { class: "rules" }, this.renderUserRules(), this.mode !== 'store' && this.renderStoreRules()));
   }
   renderPreview() {
     var _a, _b;
     const type = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.type) || 'automatic';
     const target = ((_b = this.value) === null || _b === void 0 ? void 0 : _b.target) || 'byuser';
     const canTogglePreview = type !== 'manual';
-    return index.h("div", { class: "preview" }, index.h("div", { class: "field-title" }, index$1.translate('AUDIENCEPREVIEW')), index.h("div", { class: { 'preview-container': true, 'opened': this.showPreviewGrid || type === 'manual' } }, index.h("div", { class: { 'preview-header': true, clickable: canTogglePreview }, onClick: canTogglePreview && (() => this.onPreviewToggle()) }, (target === 'byuser' || this.mode === 'store') && this.renderUsersGridHeader(), target === 'bysite' && this.mode !== 'store' && this.renderStoresGridHeader(), canTogglePreview && index.h("div", { class: "preview-toggle" }, index$1.translate('AUDIENCEPREVIEWTOGGLE'), index.h("yoo-icon", { color: "app-color", size: "small", name: this.showPreviewGrid ? 'arrow-up' : 'arrow-down' }))), (this.showPreviewGrid || type === 'manual') && index.h("div", { class: "preview-grid" }, this.mode !== 'store' && this.renderTabsGridHeader(), (!this.showStores || this.mode === 'store') && this.renderUsersGrid(), this.showStores && this.mode !== 'store' && this.renderStoresGrid())));
+    return index.h("div", { class: "preview" }, index.h("div", { class: "field-title" }, overlays.translate('AUDIENCEPREVIEW')), index.h("div", { class: { 'preview-container': true, 'opened': this.showPreviewGrid || type === 'manual' } }, index.h("div", { class: { 'preview-header': true, clickable: canTogglePreview }, onClick: canTogglePreview && (() => this.onPreviewToggle()) }, (target === 'byuser' || this.mode === 'store') && this.renderUsersGridHeader(), target === 'bysite' && this.mode !== 'store' && this.renderStoresGridHeader(), canTogglePreview && index.h("div", { class: "preview-toggle" }, overlays.translate('AUDIENCEPREVIEWTOGGLE'), index.h("yoo-icon", { color: "app-color", size: "small", name: this.showPreviewGrid ? 'arrow-up' : 'arrow-down' }))), (this.showPreviewGrid || type === 'manual') && index.h("div", { class: "preview-grid" }, this.mode !== 'store' && this.renderTabsGridHeader(), (!this.showStores || this.mode === 'store') && this.renderUsersGrid(), this.showStores && this.mode !== 'store' && this.renderStoresGrid())));
   }
   renderUsersGridHeader() {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const type = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.type) || 'automatic';
     return [
       index.h("div", { class: "preview-total" }, index.h("yoo-icon", { name: "user", size: "medium" }), (((_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.usersQuery) === null || _c === void 0 ? void 0 : _c.total) || 0).toLocaleString()),
-      index.h("div", { class: "preview-sub" }, index$1.translate('AUDIENCEBYUSERTITLE' + type.toUpperCase())),
-      ((_e = (_d = this.value) === null || _d === void 0 ? void 0 : _d.storesQuery) === null || _e === void 0 ? void 0 : _e.query) && !lodash.isEmpty(this.value.storesQuery.query.where) && this.mode !== 'store' && index.h("div", { class: "preview-sub" }, index.h("yoo-icon", { name: "pin", size: index$1.isWeb(this.host) ? 'small' : 'extra-small' }), index.h("span", { class: "text" }, index$1.translate('AUDIENCEBYUSERSUBTITLE' + type.toUpperCase(), { count: (((_f = this.value.storesQuery) === null || _f === void 0 ? void 0 : _f.total) || 0).toLocaleString() }))),
+      index.h("div", { class: "preview-sub" }, overlays.translate('AUDIENCEBYUSERTITLE' + type.toUpperCase())),
+      ((_e = (_d = this.value) === null || _d === void 0 ? void 0 : _d.storesQuery) === null || _e === void 0 ? void 0 : _e.query) && !lodash.isEmpty(this.value.storesQuery.query.where) && this.mode !== 'store' && index.h("div", { class: "preview-sub" }, index.h("yoo-icon", { name: "pin", size: overlays.isWeb(this.host) ? 'small' : 'extra-small' }), index.h("span", { class: "text" }, overlays.translate('AUDIENCEBYUSERSUBTITLE' + type.toUpperCase(), { count: (((_f = this.value.storesQuery) === null || _f === void 0 ? void 0 : _f.total) || 0).toLocaleString() }))),
       this.selectedTabIndex === 0 && this.mode === 'store' && ((_h = (_g = this.value) === null || _g === void 0 ? void 0 : _g.usersQuery) === null || _h === void 0 ? void 0 : _h.total) > 1 && index.h("div", { class: "preview-sub" }, this.renderStoreTarget())
     ];
   }
@@ -405,15 +406,15 @@ const YooFormAudienceComponent = class {
           (_a = this.gridUsers) === null || _a === void 0 ? void 0 : _a.updateGridConfig();
           this.refreshConfig = false;
         }
-      }, key: "grid-users", collectionName: "user", displayType: index$1.isWeb(this.host) ? 'card-grid' : 'card-list', entityType: "useraudience", model: this.models[0], gridConfig: gridConfig, initialQuery: (_c = this.value) === null || _c === void 0 ? void 0 : _c.usersQuery, isFormField: true, showSearch: true, hideAdvancedFilters: true, scrollable: true, class: "no-margin", gridClass: "transparent grid-font-small", showSelectionOnlyToggle: type === 'manual', multiple: true, returnQuery: true, showGridTotalHeader: false, showSelectAll: type === 'manual', keepSelection: type === 'manual', isSelectAll: type === 'manual' && ((this.mode !== 'store' && ((_e = (_d = this.value) === null || _d === void 0 ? void 0 : _d.usersQuery) === null || _e === void 0 ? void 0 : _e.isSelectAll) !== false) || (this.mode === 'store' && ((_g = (_f = this.value) === null || _f === void 0 ? void 0 : _f.usersQuery) === null || _g === void 0 ? void 0 : _g.isSelectAll))), hideRefreshButton: true, onFetchData: (ev) => this.onPreviewGridUsersFetchData(ev), onInputChanged: (ev) => this.onPreviewGridUsersChanged(ev), isReadonly: this.readonly }));
+      }, key: "grid-users", collectionName: "user", displayType: overlays.isWeb(this.host) ? 'card-grid' : 'card-list', entityType: "useraudience", model: this.models[0], gridConfig: gridConfig, initialQuery: (_c = this.value) === null || _c === void 0 ? void 0 : _c.usersQuery, isFormField: true, showSearch: true, hideAdvancedFilters: true, scrollable: true, class: "no-margin", gridClass: "transparent grid-font-small", showSelectionOnlyToggle: type === 'manual', multiple: true, returnQuery: true, showGridTotalHeader: false, showSelectAll: type === 'manual', keepSelection: type === 'manual', isSelectAll: type === 'manual' && ((this.mode !== 'store' && ((_e = (_d = this.value) === null || _d === void 0 ? void 0 : _d.usersQuery) === null || _e === void 0 ? void 0 : _e.isSelectAll) !== false) || (this.mode === 'store' && ((_g = (_f = this.value) === null || _f === void 0 ? void 0 : _f.usersQuery) === null || _g === void 0 ? void 0 : _g.isSelectAll))), hideRefreshButton: true, onFetchData: (ev) => this.onPreviewGridUsersFetchData(ev), onInputChanged: (ev) => this.onPreviewGridUsersChanged(ev), isReadonly: this.readonly }));
   }
   renderStoresGridHeader() {
     var _a, _b, _c, _d;
     const type = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.type) || 'automatic';
     return [
       index.h("div", { class: "preview-total" }, index.h("yoo-icon", { name: "pin", size: "medium" }), (((_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.storesQuery) === null || _c === void 0 ? void 0 : _c.total) || 0).toLocaleString()),
-      index.h("div", { class: "preview-sub" }, index$1.translate('AUDIENCEBYSITETITLE' + type.toUpperCase())),
-      index.h("div", { class: "preview-sub" }, index.h("yoo-icon", { name: "user", size: index$1.isWeb(this.host) ? 'small' : 'extra-small' }), index.h("span", { class: "text" }, index$1.translate('AUDIENCEBYSITESUBTITLE' + type.toUpperCase(), { count: (((_d = this.value.usersQuery) === null || _d === void 0 ? void 0 : _d.total) || 0).toLocaleString() })))
+      index.h("div", { class: "preview-sub" }, overlays.translate('AUDIENCEBYSITETITLE' + type.toUpperCase())),
+      index.h("div", { class: "preview-sub" }, index.h("yoo-icon", { name: "user", size: overlays.isWeb(this.host) ? 'small' : 'extra-small' }), index.h("span", { class: "text" }, overlays.translate('AUDIENCEBYSITESUBTITLE' + type.toUpperCase(), { count: (((_d = this.value.usersQuery) === null || _d === void 0 ? void 0 : _d.total) || 0).toLocaleString() })))
     ];
   }
   renderStoresGrid() {
@@ -438,7 +439,7 @@ const YooFormAudienceComponent = class {
           (_a = this.gridStores) === null || _a === void 0 ? void 0 : _a.updateGridConfig();
           this.refreshConfig = false;
         }
-      }, collectionName: "locations", entityType: "locationsaudience", displayType: index$1.isWeb(this.host) ? 'card-grid' : 'card-list', model: this.models[1], gridConfig: gridConfig, initialQuery: (_c = this.value) === null || _c === void 0 ? void 0 : _c.storesQuery, isFormField: true, showSearch: true, hideAdvancedFilters: true, scrollable: true, class: "no-margin", gridClass: "transparent grid-font-small", showSelectionOnlyToggle: type === 'manual', multiple: true, returnQuery: true, showGridTotalHeader: false, hideRefreshButton: true, showSelectAll: type === 'manual', keepSelection: type === 'manual', isSelectAll: type === 'manual' && ((_e = (_d = this.value) === null || _d === void 0 ? void 0 : _d.storesQuery) === null || _e === void 0 ? void 0 : _e.isSelectAll) !== false, onFetchData: (ev) => this.onPreviewGridStoresFetchData(ev), onInputChanged: (ev) => this.onPreviewGridStoresChanged(ev), isReadonly: this.readonly }));
+      }, collectionName: "locations", entityType: "locationsaudience", displayType: overlays.isWeb(this.host) ? 'card-grid' : 'card-list', model: this.models[1], gridConfig: gridConfig, initialQuery: (_c = this.value) === null || _c === void 0 ? void 0 : _c.storesQuery, isFormField: true, showSearch: true, hideAdvancedFilters: true, scrollable: true, class: "no-margin", gridClass: "transparent grid-font-small", showSelectionOnlyToggle: type === 'manual', multiple: true, returnQuery: true, showGridTotalHeader: false, hideRefreshButton: true, showSelectAll: type === 'manual', keepSelection: type === 'manual', isSelectAll: type === 'manual' && ((_e = (_d = this.value) === null || _d === void 0 ? void 0 : _d.storesQuery) === null || _e === void 0 ? void 0 : _e.isSelectAll) !== false, onFetchData: (ev) => this.onPreviewGridStoresFetchData(ev), onInputChanged: (ev) => this.onPreviewGridStoresChanged(ev), isReadonly: this.readonly }));
   }
   renderTabsGridHeader() {
     var _a, _b, _c;
@@ -450,14 +451,14 @@ const YooFormAudienceComponent = class {
   }
   renderSavedGrid() {
     const secondaryActions = [{
-        text: () => index$1.translate('AUDIENCEPREVIEW'),
+        text: () => overlays.translate('AUDIENCEPREVIEW'),
         handler: (item) => this.onUseSavedAudience(item),
         forceInCard: () => true,
         icon: () => 'eye'
       }];
     const gridConfig = lodash.cloneDeep(this.models[2].gridOptions);
     gridConfig.columnDefs.push({
-      headerName: index$1.translate('YOOBICACTIONS'),
+      headerName: overlays.translate('YOOBICACTIONS'),
       headerClass: 'hidden-force-menu',
       sortable: false,
       suppressMovable: true,
@@ -471,13 +472,13 @@ const YooFormAudienceComponent = class {
       maxWidth: 2 * 48,
       suppressColumnsToolPanel: true
     });
-    return index.h("div", { class: "saved-grid" }, index.h("yoo-grid", { ref: (el) => this.gridAudiences = el, entityType: "audiences", displayType: index$1.isWeb(this.host) ? 'card-grid' : 'card-list', isFormField: true, showSearch: true, scrollable: true, class: "no-margin", model: this.models[2], gridConfig: gridConfig, gridClass: "transparent grid-font-small", showGridTotalHeader: false, onFetchData: (ev) => this.onSavedGridFetchData(ev), onInputChanged: (ev) => ev.stopPropagation(), onSelected: (ev) => this.onUseSavedAudience(ev.detail), gridDomLayout: !index$1.isWeb(this.host) ? 'autoHeight' : null, isReadonly: this.readonly }));
+    return index.h("div", { class: "saved-grid" }, index.h("yoo-grid", { ref: (el) => this.gridAudiences = el, entityType: "audiences", displayType: overlays.isWeb(this.host) ? 'card-grid' : 'card-list', isFormField: true, showSearch: true, scrollable: true, class: "no-margin", model: this.models[2], gridConfig: gridConfig, gridClass: "transparent grid-font-small", showGridTotalHeader: false, onFetchData: (ev) => this.onSavedGridFetchData(ev), onInputChanged: (ev) => ev.stopPropagation(), onSelected: (ev) => this.onUseSavedAudience(ev.detail), gridDomLayout: !overlays.isWeb(this.host) ? 'autoHeight' : null, isReadonly: this.readonly }));
   }
   renderContent() {
     return index.h("div", { class: "outer-container" }, !this.readonly && this.allowLibrary && this.renderTabs(), !this.readonly && this.allowLibrary && this.selectedTabIndex === 0 && this.renderSave(), this.selectedTabIndex === 0 && this.mode !== 'store' && this.renderTarget(), this.selectedTabIndex === 0 && !this.forceManualType && this.renderType(), this.selectedTabIndex === 0 && this.renderRules(), this.selectedTabIndex === 0 && this.renderPreview(), !this.readonly && this.selectedTabIndex === 1 && this.renderSavedGrid());
   }
   render() {
-    return index.h(index.Host, { class: { mobile: !index$1.isWeb(this.host) } }, this.renderContent());
+    return index.h(index.Host, { class: { mobile: !overlays.isWeb(this.host) } }, this.renderContent());
   }
   get host() { return index.getElement(this); }
 };