@yoobic/yobi 8.2.2 → 8.3.0-2

package/dist/cjs/yoo-slides-media.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 commonHelpers = require('./common-helpers-6970c46c.js');
-const entitiesHelpers = require('./entities-helpers-66375a12.js');
-const formTextAreaHelpers = require('./form-text-area-helpers-a447a10d.js');
+const commonHelpers = require('./common-helpers-a4efe957.js');
+const entitiesHelpers = require('./entities-helpers-2edf446a.js');
+const formTextAreaHelpers = require('./form-text-area-helpers-12613cd7.js');
+require('./index-de8540eb.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
 
 const slidesMediaCss = ".sc-yoo-slides-media-h{--search-bar-display:none;width:100%;height:100%;background:var(--dark, #000000)}@-webkit-keyframes fadeInTransition{0%{opacity:1}50%{opacity:0.5}100%{visibility:hidden;opacity:0}}@keyframes fadeInTransition{0%{opacity:1}50%{opacity:0.5}100%{visibility:hidden;opacity:0}}.sc-yoo-slides-media-h .fade-in.sc-yoo-slides-media{margin-bottom:2.5rem !important;-webkit-animation:fadeInTransition 0.5s;animation:fadeInTransition 0.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.sc-yoo-slides-media-h .content-container.sc-yoo-slides-media{display:-ms-flexbox;display:flex;width:100%;height:100%}.sc-yoo-slides-media-h .content-container.video.sc-yoo-slides-media{padding-top:var(--spacing-64, 4rem);padding-bottom:var(--spacing-64, 4rem)}.sc-yoo-slides-media-h .content-container.sc-yoo-slides-media yoo-photo-editor.sc-yoo-slides-media{width:100%}.sc-yoo-slides-media-h .content-container.sc-yoo-slides-media yoo-videoplayer-core.sc-yoo-slides-media{z-index:6;width:100%;background:var(--dark, #000000)}.sc-yoo-slides-media-h .tag-container.sc-yoo-slides-media{position:absolute;top:0;left:0;z-index:9;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%;background:var(--light, #ffffff)}.sc-yoo-slides-media-h .tag-container.sc-yoo-slides-media .actions-container.sc-yoo-slides-media{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;margin:var(--spacing-16, 1rem)}.sc-yoo-slides-media-h .tag-container.sc-yoo-slides-media .actions-container.sc-yoo-slides-media yoo-form-input.sc-yoo-slides-media{padding-bottom:var(--spacing-08, 0.5rem)}.sc-yoo-slides-media-h .tag-container.sc-yoo-slides-media .actions-container.sc-yoo-slides-media .current-tag-container.sc-yoo-slides-media .header.sc-yoo-slides-media{display:-ms-flexbox;display:flex}.sc-yoo-slides-media-h .tag-container.sc-yoo-slides-media .actions-container.sc-yoo-slides-media .current-tag-container.sc-yoo-slides-media .header.sc-yoo-slides-media yoo-icon.sc-yoo-slides-media{margin-left:var(--spacing-04, 0.25rem)}.sc-yoo-slides-media-h .tag-container.sc-yoo-slides-media .actions-container.sc-yoo-slides-media .current-tag-container.sc-yoo-slides-media .badges-container.sc-yoo-slides-media{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;width:100%;padding-top:var(--spacing-08, 0.5rem);overflow:auto}.sc-yoo-slides-media-h .tag-container.sc-yoo-slides-media .actions-container.sc-yoo-slides-media .current-tag-container.sc-yoo-slides-media .badges-container.sc-yoo-slides-media::-webkit-scrollbar{width:var(--spacing-04, 0.25rem);height:var(--spacing-04, 0.25rem)}.sc-yoo-slides-media-h .tag-container.sc-yoo-slides-media .actions-container.sc-yoo-slides-media .current-tag-container.sc-yoo-slides-media .badges-container.sc-yoo-slides-media::-webkit-scrollbar-track{background-color:transparent;border-radius:var(--border-radius-04, 0.25rem)}.sc-yoo-slides-media-h .tag-container.sc-yoo-slides-media .actions-container.sc-yoo-slides-media .current-tag-container.sc-yoo-slides-media .badges-container.sc-yoo-slides-media::-webkit-scrollbar-thumb{background-color:transparent;border-radius:var(--border-radius-04, 0.25rem)}.sc-yoo-slides-media-h .tag-container.sc-yoo-slides-media .actions-container.sc-yoo-slides-media .current-tag-container.sc-yoo-slides-media .badges-container.sc-yoo-slides-media yoo-tooltip.sc-yoo-slides-media{max-width:100%}.sc-yoo-slides-media-h .tag-container.sc-yoo-slides-media .actions-container.sc-yoo-slides-media .current-tag-container.sc-yoo-slides-media .badges-container.sc-yoo-slides-media yoo-tag.sc-yoo-slides-media{max-width:100%;margin-right:var(--spacing-08, 0.5rem);margin-bottom:var(--spacing-08, 0.5rem)}.sc-yoo-slides-media-h .tag-container.sc-yoo-slides-media .actions-container.sc-yoo-slides-media .current-tag-container.sc-yoo-slides-media .badges-container.max-height.sc-yoo-slides-media{-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.sc-yoo-slides-media-h .tag-container.sc-yoo-slides-media .button-container.sc-yoo-slides-media{width:100%;margin-top:auto;padding:var(--spacing-16, 1rem);border-top:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}.sc-yoo-slides-media-h .tag-container.sc-yoo-slides-media .button-container.sc-yoo-slides-media yoo-button.sc-yoo-slides-media{width:50%;margin-left:auto}.sc-yoo-slides-media-h .action-buttons.sc-yoo-slides-media{display:-ms-flexbox;display:flex;padding-top:var(--spacing-04, 0.25rem);color:var(--light, #ffffff);font-size:var(--font-size-20, 1.25rem)}.sc-yoo-slides-media-h .slides-media-container.sc-yoo-slides-media{width:100%;height:100%}.sc-yoo-slides-media-h .slides-media-container.sc-yoo-slides-media .slides-container.sc-yoo-slides-media{height:100%}.sc-yoo-slides-media-h .slides-media-container.sc-yoo-slides-media .slides-container.sc-yoo-slides-media yoo-ion-slides.sc-yoo-slides-media{--host-background-color:var(--dark, #000000);height:100%}.sc-yoo-slides-media-h .slides-media-container.sc-yoo-slides-media yoo-swipe-container.sc-yoo-slides-media{--swiper-background:var(--dark, #000000);--wrapper-border-radius:0}.sc-yoo-slides-media-h mark.sc-yoo-slides-media{color:var(--light, #ffffff);background-color:transparent}.sc-yoo-slides-media-h .bottom-container.sc-yoo-slides-media{position:absolute;top:auto;right:0;bottom:0;left:0;z-index:8;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;margin-bottom:0 !important;padding:var(--spacing-16, 1rem);color:var(--stable, #adadad);word-break:break-word;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(7%, rgba(0, 0, 0, 0)), color-stop(6%, rgba(0, 0, 0, 0)), color-stop(70%, rgba(0, 0, 0, 0.85)));background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 7%, rgba(0, 0, 0, 0) 6%, rgba(0, 0, 0, 0.85) 70%);-webkit-transition:0.3s;transition:0.3s}.sc-yoo-slides-media-h .bottom-container.sc-yoo-slides-media .white-text.sc-yoo-slides-media{padding:0 var(--spacing-04, 0.25rem);color:var(--light, #ffffff)}.sc-yoo-slides-media-h .bottom-container.sc-yoo-slides-media .user-info.sc-yoo-slides-media{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start}.sc-yoo-slides-media-h .bottom-container.sc-yoo-slides-media .user-info.sc-yoo-slides-media .user-title.sc-yoo-slides-media{padding-left:var(--spacing-08, 0.5rem);color:var(--stable, #adadad);text-align:left}.sc-yoo-slides-media-h .bottom-container.sc-yoo-slides-media .photo-information.sc-yoo-slides-media{text-align:left}.sc-yoo-slides-media-h .bottom-container.sc-yoo-slides-media .tags.sc-yoo-slides-media{display:-ms-flexbox;display:flex;padding-top:var(--spacing-04, 0.25rem);padding-right:var(--spacing-04, 0.25rem);color:var(--app-color, #5a30f4)}.sc-yoo-slides-media-h .bottom-container.sc-yoo-slides-media .time.sc-yoo-slides-media{font-size:var(--font-size-14, 0.875rem)}.sc-yoo-slides-media-h .bottom-container.iphone-x.sc-yoo-slides-media{padding-bottom:var(--spacing-16, 1rem)}.sc-yoo-slides-media-h .bottom-container.sc-yoo-slides-media yoo-icon.sc-yoo-slides-media{margin-right:var(--spacing-16, 1rem)}.sc-yoo-slides-media-h yoo-header.sc-yoo-slides-media{position:absolute;top:0;right:0;bottom:auto;left:0;z-index:11;-webkit-transition:0.3s;transition:0.3s}.card-media.sc-yoo-slides-media-h .slides-media-container.sc-yoo-slides-media yoo-swipe-container.sc-yoo-slides-media{--wrapper-border-radius:var(--border-radius-08, 0.5rem)}.card-media.sc-yoo-slides-media-h .hover-buttons.sc-yoo-slides-media{position:absolute;right:0;bottom:var(--spacing-16, 1rem);display:-ms-flexbox;display:flex}.card-media.sc-yoo-slides-media-h .hover-buttons.sc-yoo-slides-media yoo-button.sc-yoo-slides-media{margin-right:var(--spacing-16, 1rem)}.card-media.sc-yoo-slides-media-h .hover-buttons.sc-yoo-slides-media .flex.sc-yoo-slides-media{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.card-media.sc-yoo-slides-media-h .hover-buttons.sc-yoo-slides-media .flex.sc-yoo-slides-media span.sc-yoo-slides-media{padding-left:var(--spacing-08, 0.5rem)}.tagging.sc-yoo-slides-media-h{--search-bar-display:block}";
 
@@ -94,7 +95,7 @@ const YooSlidesMediaComponent = class {
         this.currentPhotoEditorElement.close(true);
       }
       else {
-        index$1.closeModal(null);
+        overlays.closeModal(null);
       }
     }
   }
@@ -106,11 +107,11 @@ const YooSlidesMediaComponent = class {
       this.isFirstLoad = false;
     }
     if (this.allowOrientation) {
-      index$1.ScreenOrientation.unlock();
+      overlays.ScreenOrientation.unlock();
     }
   }
   componentDidLoad() {
-    this.modal = index$1.findParent(this.host, 'yoo-ion-modal');
+    this.modal = overlays.findParent(this.host, 'yoo-ion-modal');
   }
   disconnectedCallback() {
     this.resetCordovaChanges();
@@ -135,12 +136,12 @@ const YooSlidesMediaComponent = class {
   isImage(item) {
     const src = typeof item !== 'string' ? this.getPhotoSrc(item) : item;
     const finalSrc = Array.isArray(src) ? src[0] : src;
-    return index$1.isImage(finalSrc) || index$1.isImageUrl(finalSrc);
+    return overlays.isImage(finalSrc) || overlays.isImageUrl(finalSrc);
   }
   resetCordovaChanges() {
-    if (index$1.isNativeMobile()) {
-      const orientation = index$1.isAndroid() ? 'portrait-primary' : 'portrait';
-      index$1.ScreenOrientation.lock(orientation);
+    if (overlays.isNativeMobile()) {
+      const orientation = overlays.isAndroid() ? 'portrait-primary' : 'portrait';
+      overlays.ScreenOrientation.lock(orientation);
     }
   }
   pauseMedia() {
@@ -158,8 +159,8 @@ const YooSlidesMediaComponent = class {
         feedDetail.fullscreenView = true;
         feedDetail.fullscreenParams = {
           mediaSrc,
-          heading: index$1.capitalizeFirstLetter(((_b = this.currentItem.location) === null || _b === void 0 ? void 0 : _b.title) || ''),
-          subheading: index$1.translateMulti(this.currentItem.title),
+          heading: overlays.capitalizeFirstLetter(((_b = this.currentItem.location) === null || _b === void 0 ? void 0 : _b.title) || ''),
+          subheading: overlays.translateMulti(this.currentItem.title),
           user: { ...this.currentItem.location, username: (_c = this.currentItem.location) === null || _c === void 0 ? void 0 : _c.title },
           photoEditorParams: {
             src: this.currentItem.value,
@@ -169,7 +170,7 @@ const YooSlidesMediaComponent = class {
             annotations: this.currentItem.annotations
           }
         };
-        index$1.showModal(feedDetail, null, 'fullscreen', index$1.isWeb(this.host) ? 'fadeEnterAnimation' : 'slideXEnterReverseAnimation', index$1.isWeb(this.host) ? 'fadeLeaveAnimation' : 'slideXLeaveReverseAnimation');
+        overlays.showModal(feedDetail, null, 'fullscreen', overlays.isWeb(this.host) ? 'fadeEnterAnimation' : 'slideXEnterReverseAnimation', overlays.isWeb(this.host) ? 'fadeLeaveAnimation' : 'slideXLeaveReverseAnimation');
       }
     }
   }
@@ -185,7 +186,7 @@ const YooSlidesMediaComponent = class {
     // limit query to db with debounce
     if (this.allowFetchTags) {
       this.allowFetchTags = false;
-      promise = index$1.getAsyncExtraData({ type: 'tags', params: { text: this.currentText, lastUpdated: this.searchMode === 'lastused' } });
+      promise = overlays.getAsyncExtraData({ type: 'tags', params: { text: this.currentText, lastUpdated: this.searchMode === 'lastused' } });
       setTimeout(() => {
         this.allowFetchTags = true;
       }, 2000);
@@ -211,7 +212,7 @@ const YooSlidesMediaComponent = class {
   }
   onShowFlagActionToast(photoFlagged) {
     const toastEntry = {
-      message: index$1.translate(photoFlagged ? 'YOUHAVEFLAGGEDPHOTO' : 'YOUHAVEUNFLAGGEDPHOTO'),
+      message: overlays.translate(photoFlagged ? 'YOUHAVEFLAGGEDPHOTO' : 'YOUHAVEUNFLAGGEDPHOTO'),
       closable: false,
       icon: 'flag',
       duration: 3000,
@@ -245,7 +246,7 @@ const YooSlidesMediaComponent = class {
     }
     promise.then(() => {
       this.toastEl = null;
-      index$1.showToast(toastEntry).then((el) => {
+      overlays.showToast(toastEntry).then((el) => {
         this.toastEl = el;
       });
     });
@@ -261,7 +262,7 @@ const YooSlidesMediaComponent = class {
         case 'flag':
           item.flagged = !item.flagged;
           this.flag.emit(item);
-          if (index$1.isWeb(this.host) && !preventToast) {
+          if (overlays.isWeb(this.host) && !preventToast) {
             this.onShowFlagActionToast(item.flagged);
           }
           index.forceUpdate(this);
@@ -293,12 +294,12 @@ const YooSlidesMediaComponent = class {
     this.itemFocused = !this.itemFocused;
   }
   /** @deprecated */
-  async onAnnotate(index$2) {
-    const photoEditorElement = this.getCurrentElement(this.photoEditorElements, index$2);
-    const cardMediaElement = this.getCurrentElement(this.cardMediaElements, index$2);
-    const bottonContainerElement = this.getCurrentElement(this.bottomContainerElements, index$2);
-    if (index$1.isWeb(this.host) && cardMediaElement && photoEditorElement) {
-      const timeline = await index$1.gsapTimeline();
+  async onAnnotate(index$1) {
+    const photoEditorElement = this.getCurrentElement(this.photoEditorElements, index$1);
+    const cardMediaElement = this.getCurrentElement(this.cardMediaElements, index$1);
+    const bottonContainerElement = this.getCurrentElement(this.bottomContainerElements, index$1);
+    if (overlays.isWeb(this.host) && cardMediaElement && photoEditorElement) {
+      const timeline = await overlays.gsapTimeline();
       const mainElement = cardMediaElement.shadowRoot.querySelector('.main');
       const footerElement = cardMediaElement.shadowRoot.querySelector('.footer');
       const actionButtonContainer = mainElement.querySelector('.hover-container');
@@ -310,17 +311,17 @@ const YooSlidesMediaComponent = class {
           validated,
           flagged,
           tags,
-          annotated: index$1.isPhotoEdited(this.currentItem)
+          annotated: overlays.isPhotoEdited(this.currentItem)
         });
         actionButtonContainer.style.display = 'block';
       };
       const switchToPreviewAnimation = async () => {
-        const timeline = await index$1.gsapTimeline();
+        const timeline = await overlays.gsapTimeline();
         const tl = timeline({
           paused: true, onComplete: () => {
             photoEditorElement.isReadonly = true;
             photoEditorElement.hasBackButton = false;
-            photoEditorElement.closeHandler = () => index$1.closeModal(null);
+            photoEditorElement.closeHandler = () => overlays.closeModal(null);
             photoEditorElement.prepareImageSize();
             switchToPreview();
             index.forceUpdate(this);
@@ -359,11 +360,11 @@ const YooSlidesMediaComponent = class {
         bottonContainerElement.style.display = 'none';
         photoEditorElement.isReadonly = false;
       };
-      index$1.gsapTo(bottonContainerElement, .35, { opacity: 0, onComplete: hideBottomContainer });
+      overlays.gsapTo(bottonContainerElement, .35, { opacity: 0, onComplete: hideBottomContainer });
     }
   }
   async onTag(photo) {
-    if (index$1.isWeb(this.host)) {
+    if (overlays.isWeb(this.host)) {
       this.isTagging = true;
     }
     this.tag.emit(photo);
@@ -385,10 +386,10 @@ const YooSlidesMediaComponent = class {
     this.isTagging = false;
   }
   renderMissionDescription(item) {
-    return [index$1.translate('DERIVEDFROM'), index.h("mark", null, ' "' + index$1.translateMulti(item.title) + '" ')];
+    return [overlays.translate('DERIVEDFROM'), index.h("mark", null, ' "' + overlays.translateMulti(item.title) + '" ')];
   }
   renderImageTitle(item) {
-    return index.h("mark", null, " ", index$1.translateMulti(item.imageTitle));
+    return index.h("mark", null, " ", overlays.translateMulti(item.imageTitle));
   }
   onSlideDidChange(ev) {
     // This method gets called when an image is opened for an index !== 0
@@ -412,9 +413,9 @@ const YooSlidesMediaComponent = class {
         'top-container': true,
         'fade-in': this.hideContainer
       } }, index.h("yoo-navbar", { class: "gradient" }, index.h("yoo-items", { slot: "start" }, !this.hideCloseButton &&
-      index.h("yoo-button", { shape: this.isLight ? 'rectangular' : 'circular', fill: this.isLight ? 'solid' : 'transparent', rippleType: this.isLight ? 'bounded' : 'unbounded', onClick: () => index$1.closeModal(null) }, index.h("yoo-icon", { name: "close", color: "light" }))), this.secondaryActions.length ? this.renderSecondaryActions() : [
+      index.h("yoo-button", { shape: this.isLight ? 'rectangular' : 'circular', fill: this.isLight ? 'solid' : 'transparent', rippleType: this.isLight ? 'bounded' : 'unbounded', onClick: () => overlays.closeModal(null) }, index.h("yoo-icon", { name: "close", color: "light" }))), this.secondaryActions.length ? this.renderSecondaryActions() : [
       item.type === 'image' &&
-        index.h("yoo-truncate", null, index$1.translate('GUIDELINES')),
+        index.h("yoo-truncate", null, overlays.translate('GUIDELINES')),
       index.h("yoo-items", { slot: "end" }, item.type === 'image' &&
         index.h("yoo-button", { shape: this.isLight ? 'rectangular' : 'circular', fill: this.isLight ? 'solid' : 'transparent', rippleType: this.isLight ? 'bounded' : 'unbounded' }, index.h("yoo-icon", { name: "info", color: "light" })))
     ])));
@@ -431,28 +432,28 @@ const YooSlidesMediaComponent = class {
         }, name: item.icon, color: "light" }));
     })));
   }
-  renderBottomContainer(item, index$2) {
+  renderBottomContainer(item, index$1) {
     var _a, _b;
     const title = ((_a = item.missiondescription) === null || _a === void 0 ? void 0 : _a.title) || item.fieldTitle;
-    return (index.h("div", { ref: (el) => (this.bottomContainerElements[index$2] = el), class: {
+    return (index.h("div", { ref: (el) => (this.bottomContainerElements[index$1] = el), class: {
         'bottom-container': true,
-        'iphone-x': index$1.isIphoneX(),
+        'iphone-x': overlays.isIphoneX(),
         'fade-in': this.hideContainer
-      } }, item.user && this.renderUserInfo(item), index.h("div", { class: "photo-information" }, item.missiondescription && this.renderMissionDescription(item), !!title && [index$1.translate('YOOBICIN'), index.h("mark", null, " ", ' "' + index$1.translateMulti(title) + '" '), index$1.translate('MISSION')], item.imageTitle && this.renderImageTitle(item)), !!((_b = item === null || item === void 0 ? void 0 : item.tags) === null || _b === void 0 ? void 0 : _b.length) && index.h("div", { class: "tags" }, item.tags.map((tag) => `#${index$1.translateMulti(tag)}`)), this.renderBottomContainerActionButtons(item)));
+      } }, item.user && this.renderUserInfo(item), index.h("div", { class: "photo-information" }, item.missiondescription && this.renderMissionDescription(item), !!title && [overlays.translate('YOOBICIN'), index.h("mark", null, " ", ' "' + overlays.translateMulti(title) + '" '), overlays.translate('MISSION')], item.imageTitle && this.renderImageTitle(item)), !!((_b = item === null || item === void 0 ? void 0 : item.tags) === null || _b === void 0 ? void 0 : _b.length) && index.h("div", { class: "tags" }, item.tags.map((tag) => `#${overlays.translateMulti(tag)}`)), this.renderBottomContainerActionButtons(item)));
   }
   renderHoverButtons(item) {
     const isPhoto = !item.type || item.isMulti || item.type === 'photo' || item.type === 'multiphotos';
-    return (!this.isReadonly && index$1.isWeb(this.host) && (index.h("div", { class: "hover-buttons", slot: "hover-actions" }, isPhoto && (index.h("yoo-button", { onClick: (ev) => this.onActionButtonClick('expand', ev) }, index.h("div", { class: "flex" }, index.h("yoo-icon", { name: "maximize" }), index.h("span", null, index$1.translate('EXPAND'))))), index.h("yoo-button", { onClick: (ev) => this.onActionButtonClick('tag', ev) }, index.h("div", { class: "flex" }, index.h("yoo-icon", { name: "tag" }), index.h("span", null, index$1.translate('YOOBICTAG')))), this.canFlag && (index.h("yoo-button", { onClick: (ev) => this.onActionButtonClick('flag', ev) }, index.h("div", { class: "flex" }, index.h("yoo-icon", { name: "flag" }), index.h("span", null, item.flagged ? index$1.translate('UNFLAG') : index$1.translate('YOOBICFLAG'))))), isPhoto && this.canAnnotate && (index.h("yoo-button", { onClick: (ev) => this.onActionButtonClick('pen', ev) }, index.h("div", { class: "flex" }, index.h("yoo-icon", { name: "photo-annotated" }), index.h("span", null, index$1.translate('ANNOTATE'))))))));
+    return (!this.isReadonly && overlays.isWeb(this.host) && (index.h("div", { class: "hover-buttons", slot: "hover-actions" }, isPhoto && (index.h("yoo-button", { onClick: (ev) => this.onActionButtonClick('expand', ev) }, index.h("div", { class: "flex" }, index.h("yoo-icon", { name: "maximize" }), index.h("span", null, overlays.translate('EXPAND'))))), index.h("yoo-button", { onClick: (ev) => this.onActionButtonClick('tag', ev) }, index.h("div", { class: "flex" }, index.h("yoo-icon", { name: "tag" }), index.h("span", null, overlays.translate('YOOBICTAG')))), this.canFlag && (index.h("yoo-button", { onClick: (ev) => this.onActionButtonClick('flag', ev) }, index.h("div", { class: "flex" }, index.h("yoo-icon", { name: "flag" }), index.h("span", null, item.flagged ? overlays.translate('UNFLAG') : overlays.translate('YOOBICFLAG'))))), isPhoto && this.canAnnotate && (index.h("yoo-button", { onClick: (ev) => this.onActionButtonClick('pen', ev) }, index.h("div", { class: "flex" }, index.h("yoo-icon", { name: "photo-annotated" }), index.h("span", null, overlays.translate('ANNOTATE'))))))));
   }
   renderBottomContainerActionButtons(item) {
-    const photoEdited = index$1.isPhotoEdited(item);
+    const photoEdited = overlays.isPhotoEdited(item);
     // Will need to look into this code once all the permissions for this are fully settled,
     // Currently it has been made consistent between what is seen in the feed view of the photos
     // and when the slides-media open - canAnnotate and the readonly variable are toggled from the activity page
     return !this.isReadonly ? (index.h("div", { class: "action-buttons" }, index.h("yoo-icon", { name: "flag", color: item.flagged ? 'app-color' : 'stable-alt', onClick: () => this.onActionButtonClick('flag') }), index.h("yoo-icon", { name: "tag", color: item.tags && item.tags.length > 0 ? 'app-color' : 'stable-alt', onClick: () => this.onActionButtonClick('tag') }), item.type !== 'video' ? (index.h("yoo-icon", { name: "pen", color: photoEdited ? 'app-color' : 'stable-alt', onClick: () => this.onActionButtonClick('pen') })) : null)) : (this.canAnnotate && item.type !== 'video' && (index.h("div", { class: "action-buttons" }, index.h("yoo-icon", { name: "pen", color: photoEdited ? 'app-color' : 'stable-alt', onClick: () => this.onActionButtonClick('pen') }))));
   }
   renderUserInfo(item) {
-    return (index.h("div", { class: "user-info" }, index.h("yoo-avatar", { user: item.user, size: "medium" }), item && item.location && item.location.title ? (index.h("div", { class: "user-title" }, index$1.translate('YOOBICBY'), index.h("mark", null, ' ' + item.userDisplayname + ' '), index$1.translate('YOOBICAT'), index.h("mark", null, ' ' + item.location.title), item.date ? index.h("div", { class: "time" }, index$1.pipes.timeAgo.transform(item.date)) : null)) : (index.h("div", { class: "user-title" }, index$1.translate('YOOBICBY'), index.h("mark", null, ' ' + item.userDisplayname + ' '), item.date ? index.h("div", { class: "time" }, index$1.pipes.timeAgo.transform(item.date)) : null))));
+    return (index.h("div", { class: "user-info" }, index.h("yoo-avatar", { user: item.user, size: "medium" }), item && item.location && item.location.title ? (index.h("div", { class: "user-title" }, overlays.translate('YOOBICBY'), index.h("mark", null, ' ' + item.userDisplayname + ' '), overlays.translate('YOOBICAT'), index.h("mark", null, ' ' + item.location.title), item.date ? index.h("div", { class: "time" }, overlays.pipes.timeAgo.transform(item.date)) : null)) : (index.h("div", { class: "user-title" }, overlays.translate('YOOBICBY'), index.h("mark", null, ' ' + item.userDisplayname + ' '), item.date ? index.h("div", { class: "time" }, overlays.pipes.timeAgo.transform(item.date)) : null))));
   }
   renderVideoPlayer(item, index$1, controls = item.control || false) {
     const attrs = {
@@ -470,29 +471,29 @@ const YooSlidesMediaComponent = class {
     };
     return index.h("yoo-videoplayer-core", { class: "video", onClick: () => this.onItemClicked(), ref: (el) => (this.videoPlayerElement = el), ...attrs });
   }
-  renderPhotoEditor(item, index$2) {
+  renderPhotoEditor(item, index$1) {
     var _a, _b, _c, _d;
     const extraActions = (this.secondaryActions || [])
-      .filter((item) => (item.isVisible ? item.isVisible(index$2) : true));
-    return (index.h("yoo-photo-editor", { id: `${index$2}`, class: {
-        current: index$2 === this.currentIndex,
+      .filter((item) => (item.isVisible ? item.isVisible(index$1) : true));
+    return (index.h("yoo-photo-editor", { id: `${index$1}`, class: {
+        current: index$1 === this.currentIndex,
         light: this.isLight,
         [item === null || item === void 0 ? void 0 : item.extraClass]: !!(item === null || item === void 0 ? void 0 : item.extraClass)
-      }, editable: this.canAnnotate, zoomable: true, ref: (el) => (this.photoEditorElements[index$2] = el), onZoomClicked: () => this.onItemClicked(), isReadonly: true, src: this.getPhotoSrc(item), animated: item.animated, display: item.display, cloudinaryOptions: item.cloudinaryOptions, submitView: item.submitView, extraActions: !this.displayType && extraActions, drawings: (_c = (_b = (item.drawings || ((_a = item.photoEditorParams) === null || _a === void 0 ? void 0 : _a.drawings) || '')) !== null && _b !== void 0 ? _b : item.edit) !== null && _c !== void 0 ? _c : item.svgData, annotations: item.annotations || ((_d = item.photoEditorParams) === null || _d === void 0 ? void 0 : _d.annotations) || item.texts, submitButton: this.submitPhotoEditorButton, onImageZoomed: (ev) => this.hideContainer = ev === null || ev === void 0 ? void 0 : ev.detail, onImageClicked: () => !index$1.isWeb(this.host) && this.showPhotoDetailView(), onSaveChanges: (ev) => {
+      }, editable: this.canAnnotate, zoomable: true, ref: (el) => (this.photoEditorElements[index$1] = el), onZoomClicked: () => this.onItemClicked(), isReadonly: true, src: this.getPhotoSrc(item), animated: item.animated, display: item.display, cloudinaryOptions: item.cloudinaryOptions, submitView: item.submitView, extraActions: !this.displayType && extraActions, drawings: (_c = (_b = (item.drawings || ((_a = item.photoEditorParams) === null || _a === void 0 ? void 0 : _a.drawings) || '')) !== null && _b !== void 0 ? _b : item.edit) !== null && _c !== void 0 ? _c : item.svgData, annotations: item.annotations || ((_d = item.photoEditorParams) === null || _d === void 0 ? void 0 : _d.annotations) || item.texts, submitButton: this.submitPhotoEditorButton, onImageZoomed: (ev) => this.hideContainer = ev === null || ev === void 0 ? void 0 : ev.detail, onImageClicked: () => !overlays.isWeb(this.host) && this.showPhotoDetailView(), onSaveChanges: (ev) => {
         if (ev === null || ev === void 0 ? void 0 : ev.detail) {
           const { drawings, annotations } = ev.detail;
-          this.items[index$2] = { ...this.items[index$2], drawings, annotations };
-          this.annotate.emit(this.items[index$2]);
+          this.items[index$1] = { ...this.items[index$1], drawings, annotations };
+          this.annotate.emit(this.items[index$1]);
         }
       }, onSwitchFromEditable: () => {
         var _a, _b;
-        const slideIndex = parseFloat((_a = this.photoEditorElements) === null || _a === void 0 ? void 0 : _a[index$2].id);
-        if (isFinite(slideIndex) && ((_b = this.bottomContainerElements) === null || _b === void 0 ? void 0 : _b[index$2])) {
+        const slideIndex = parseFloat((_a = this.photoEditorElements) === null || _a === void 0 ? void 0 : _a[index$1].id);
+        if (isFinite(slideIndex) && ((_b = this.bottomContainerElements) === null || _b === void 0 ? void 0 : _b[index$1])) {
           const showBottomContainer = () => {
-            this.bottomContainerElements[index$2].style.display = 'block';
+            this.bottomContainerElements[index$1].style.display = 'block';
             index.forceUpdate(this);
           };
-          index$1.gsapTo(this.bottomContainerElements[index$2], .35, { opacity: 1, onComplete: showBottomContainer });
+          overlays.gsapTo(this.bottomContainerElements[index$1], .35, { opacity: 1, onComplete: showBottomContainer });
         }
       } }));
   }
@@ -557,9 +558,9 @@ const YooSlidesMediaComponent = class {
   renderTags(photo, tags, searchMode) {
     var _a;
     const tagColor = searchMode ? 'app-color-10' : 'dark';
-    return (_a = (tags || [])) === null || _a === void 0 ? void 0 : _a.map((tag, index$2) => {
-      const translatedTag = index$1.translateMulti(tag);
-      return (index.h("yoo-tooltip", { hoverable: index$1.isWeb(this.host), content: translatedTag }, index.h("yoo-tag", { onClosed: () => this.onUpdateSingleTag(photo, index$2, searchMode, tags), color: tagColor, closable: !searchMode }, translatedTag, searchMode && index.h("yoo-icon", { onClick: () => this.onUpdateSingleTag(photo, index$2, searchMode, tags), slot: "end", name: "circle-plus", color: "app-color", size: "small" }))));
+    return (_a = (tags || [])) === null || _a === void 0 ? void 0 : _a.map((tag, index$1) => {
+      const translatedTag = overlays.translateMulti(tag);
+      return (index.h("yoo-tooltip", { hoverable: overlays.isWeb(this.host), content: translatedTag }, index.h("yoo-tag", { onClosed: () => this.onUpdateSingleTag(photo, index$1, searchMode, tags), color: tagColor, closable: !searchMode }, translatedTag, searchMode && index.h("yoo-icon", { onClick: () => this.onUpdateSingleTag(photo, index$1, searchMode, tags), slot: "end", name: "circle-plus", color: "app-color", size: "small" }))));
     });
   }
   renderList(photo, searchMode = false) {
@@ -575,17 +576,17 @@ const YooSlidesMediaComponent = class {
       'badges-container': true,
       'max-height': searchMode
     };
-    return (index.h("div", { class: "current-tag-container" }, index.h("div", { class: "header" }, searchMode ? index$1.translate((_a = this.searchMode) === null || _a === void 0 ? void 0 : _a.toUpperCase()) : `${(tags || []).length} ${index$1.translate('YOOBICTAGS')}`, index.h("yoo-icon", { name: "arrow-up", color: "stable" })), index.h("div", { class: cssClass }, this.renderTags(photo, tags, searchMode))));
+    return (index.h("div", { class: "current-tag-container" }, index.h("div", { class: "header" }, searchMode ? overlays.translate((_a = this.searchMode) === null || _a === void 0 ? void 0 : _a.toUpperCase()) : `${(tags || []).length} ${overlays.translate('YOOBICTAGS')}`, index.h("yoo-icon", { name: "arrow-up", color: "stable" })), index.h("div", { class: cssClass }, this.renderTags(photo, tags, searchMode))));
   }
   renderTagContent(photo) {
     return (index.h("div", { ref: (el) => {
         this.tagContainerRef = el;
-      }, class: "tag-container" }, index.h("div", { class: "actions-container" }, index.h("yoo-form-input", { placeholder: index$1.translate('ENTERATAG'), onEnterPressed: (ev) => this.onEnterPressed(ev, photo), onInputChanged: (ev) => (this.currentText = (ev === null || ev === void 0 ? void 0 : ev.detail) || ''), value: this.currentText, class: "side-menu large", "icon-prefix": "search" }), index.h("yoo-ion-content", null, this.renderList(photo), this.renderList(photo, true))), index.h("div", { class: "button-container" }, index.h("yoo-button", { color: "app-color", onClick: () => this.onCloseTagging() }, index$1.translate('YOOBICDONE')))));
+      }, class: "tag-container" }, index.h("div", { class: "actions-container" }, index.h("yoo-form-input", { placeholder: overlays.translate('ENTERATAG'), onEnterPressed: (ev) => this.onEnterPressed(ev, photo), onInputChanged: (ev) => (this.currentText = (ev === null || ev === void 0 ? void 0 : ev.detail) || ''), value: this.currentText, class: "side-menu large", "icon-prefix": "search" }), index.h("yoo-ion-content", null, this.renderList(photo), this.renderList(photo, true))), index.h("div", { class: "button-container" }, index.h("yoo-button", { color: "app-color", onClick: () => this.onCloseTagging() }, overlays.translate('YOOBICDONE')))));
   }
-  renderSlideContentByDisplayType(item, index$2) {
-    const isTypeVideo = index$1.isVideo(this.getPhotoSrc(item));
+  renderSlideContentByDisplayType(item, index$1) {
+    const isTypeVideo = overlays.isVideo(this.getPhotoSrc(item));
     if (this.displayType === 'card-media' || item.type === 'audio') {
-      return (index.h("yoo-card-media", { showCloseButton: !this.isImage(item), ref: (el) => (this.cardMediaElements[index$2] = el), onUserClicked: () => this.onUserClicked(item), onHeadlineClicked: () => this.onHeadlineClicked(item), onDescriptionClicked: () => this.onDescriptionClicked(item), ...entitiesHelpers.parseEntityForCardMedia(item, this.secondaryActions, 'photos', 'fullscreen', 'large', undefined, this.isReadonly) }, index.h("div", { slot: "main", class: { 'content-container': true, video: isTypeVideo } }, this.isImage(item) && this.renderPhotoEditor(item, index$2), isTypeVideo && this.renderVideoPlayer(item, index$2, true)), this.isTagging && index.h("div", { slot: "footer" }, this.renderTagContent(item)), !this.isTagging && this.renderHoverButtons(item)));
+      return (index.h("yoo-card-media", { showCloseButton: !this.isImage(item), ref: (el) => (this.cardMediaElements[index$1] = el), onUserClicked: () => this.onUserClicked(item), onHeadlineClicked: () => this.onHeadlineClicked(item), onDescriptionClicked: () => this.onDescriptionClicked(item), ...entitiesHelpers.parseEntityForCardMedia(item, this.secondaryActions, 'photos', 'fullscreen', 'large', undefined, this.isReadonly) }, index.h("div", { slot: "main", class: { 'content-container': true, video: isTypeVideo } }, this.isImage(item) && this.renderPhotoEditor(item, index$1), isTypeVideo && this.renderVideoPlayer(item, index$1, true)), this.isTagging && index.h("div", { slot: "footer" }, this.renderTagContent(item)), !this.isTagging && this.renderHoverButtons(item)));
     }
     else if (this.displayType === 'card-feed') {
       //TODO: update flow to open media detail for feeds
@@ -605,12 +606,12 @@ const YooSlidesMediaComponent = class {
     }
   }
   renderInnerSwipeContent() {
-    return (index.h("div", { class: "slides-container" }, index.h("yoo-ion-slides", { ref: (el) => (this.slides = el), class: { 'outside-navigation-arrows': index$1.isWeb(this.host) }, initialSlide: this.currentSlideIndex, onIonSlideTransitionStart: () => {
+    return (index.h("div", { class: "slides-container" }, index.h("yoo-ion-slides", { ref: (el) => (this.slides = el), class: { 'outside-navigation-arrows': overlays.isWeb(this.host) }, initialSlide: this.currentSlideIndex, onIonSlideTransitionStart: () => {
         var _a;
         this.isImage(this.currentItem) && ((_a = this.currentPhotoEditorElement) === null || _a === void 0 ? void 0 : _a.hideAllTooltips());
         this.pauseMedia();
-      }, onIonSlideTransitionEnd: (ev) => this.onSlideDidChange(ev) }, this.isFirstLoad && index.h("yoo-loader", { class: { fixed: true, 'backdrop-dark': !this.isLight }, size: "large" }), this.items.map((item, index$2) => {
-      return index.h("yoo-ion-slide", { class: { 'outside-navigation-arrows': index$1.isWeb(this.host) } }, this.shouldRenderSlideContent(index$2) && this.renderSlideContent(item, index$2));
+      }, onIonSlideTransitionEnd: (ev) => this.onSlideDidChange(ev) }, this.isFirstLoad && index.h("yoo-loader", { class: { fixed: true, 'backdrop-dark': !this.isLight }, size: "large" }), this.items.map((item, index$1) => {
+      return index.h("yoo-ion-slide", { class: { 'outside-navigation-arrows': overlays.isWeb(this.host) } }, this.shouldRenderSlideContent(index$1) && this.renderSlideContent(item, index$1));
     }))));
   }
   render() {

package/dist/cjs/yoo-start-meeting-popup.cjs.entry.js

@@ -2,12 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
-const commonHelpers = require('./common-helpers-6970c46c.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
+const commonHelpers = require('./common-helpers-a4efe957.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const startMeetingPopupCss = ":host .outer-container{position:relative;width:15rem}:host .outer-container yoo-icon.cross{position:absolute;margin:var(--spacing-08, 0.5rem);cursor:pointer}:host .outer-container yoo-empty-state{height:17.6rem;background-color:var(--app-color-20, rgba(90, 48, 244, 0.2));border-radius:var(--border-radius-04, 0.25rem)}:host .outer-container .description-container{padding:var(--spacing-16, 1rem);text-align:center}:host .outer-container .button-content{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}:host .outer-container .button-content yoo-button{margin-bottom:var(--spacing-16, 1rem)}:host .outer-container .button-content yoo-button yoo-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .outer-container .button-content yoo-button yoo-icon span{padding-left:var(--spacing-08, 0.5rem);font-size:var(--font-size-12, 0.75rem)}";
 
@@ -22,7 +23,7 @@ const YooStartMeetingPopupComponent = class {
   }
   render() {
     var _a;
-    return (index.h(index.Host, { class: commonHelpers.getAppContext(this.host) }, index.h("div", { class: "outer-container" }, index.h("yoo-icon", { onClick: () => this.closeTooltip(), class: "cross", color: "app-color", name: "cross" }), index.h("yoo-empty-state", { type: "videocall" }), index.h("div", { class: "description-container" }, index$1.translate('STAYCONNECTED')), index.h("div", { class: "button-content" }, ((_a = this.extraButtons) === null || _a === void 0 ? void 0 : _a.length) && this.extraButtons.map((button) => {
+    return (index.h(index.Host, { class: commonHelpers.getAppContext(this.host) }, index.h("div", { class: "outer-container" }, index.h("yoo-icon", { onClick: () => this.closeTooltip(), class: "cross", color: "app-color", name: "cross" }), index.h("yoo-empty-state", { type: "videocall" }), index.h("div", { class: "description-container" }, overlays.translate('STAYCONNECTED')), index.h("div", { class: "button-content" }, ((_a = this.extraButtons) === null || _a === void 0 ? void 0 : _a.length) && this.extraButtons.map((button) => {
       return (index.h("yoo-button", { onClick: () => {
           this.closeTooltip();
           button.handler();

package/dist/cjs/yoo-swipe-container.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 hammerHelpers = require('./hammer-helpers-e8117959.js');
 require('./_commonjsHelpers-94df2ea7.js');
 

package/dist/cjs/yoo-tabs-slides.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 tabsSlidesCss = ":host{position:relative;width:100%;color:var(--stable-alt, #d0d0d0)}.outer-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;width:100%;height:6.25rem;overflow:hidden;background:var(--stable-ultralight, #fafafa);-webkit-box-shadow:inset 0 -0.25rem var(--spacing-04, 0.25rem) -0.25rem var(--dark-10, rgba(0, 0, 0, 0.1));box-shadow:inset 0 -0.25rem var(--spacing-04, 0.25rem) -0.25rem var(--dark-10, rgba(0, 0, 0, 0.1))}yoo-ion-slides{width:100%;height:100%}yoo-ion-slide{width:unset !important;max-width:17.5rem}.slide-padding{max-height:var(--spacing-48, 3rem);margin:0 1.5rem;overflow:hidden}.active{color:var(--dark, #000000)}.indicator{position:absolute;bottom:-0.5rem;z-index:1;width:var(--spacing-16, 1rem);height:var(--spacing-16, 1rem);background:var(--light, #ffffff);-webkit-box-shadow:0 0 var(--spacing-04, 0.25rem) var(--dark-10, rgba(0, 0, 0, 0.1));box-shadow:0 0 var(--spacing-04, 0.25rem) var(--dark-10, rgba(0, 0, 0, 0.1));-webkit-transform:rotate(45deg);transform:rotate(45deg)}";
 

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

@@ -2,12 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$2 = require('./index-5951fd43.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+const index$1 = require('./index-0455f2ed.js');
+require('./index-1fdbd9b3.js');
 const lodash = require('./lodash-597bda6d.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const tabsCss = ":host{--justify-tabs:flex-start;--height-tabs:var(--spacing-40, 2.5rem);--opacity-tabs:1;--active-tab-background:none;--active-text-color:var(--text-color, #807f83);--active-tab-border-color:var(--app-color, #5a30f4);--tab-border-color:transparent;--tab-border-width:var(--border-width-02, 0.125rem);--tab-padding:0 var(--spacing-16, 1rem);--vertical-tab-gap:var(--spacing-08, 0.5rem);display:block;width:100%;overflow:hidden}:host .tab-container yoo-icon{fill:var(--text-color, #807f83)}:host .tab-container.active{background:var(--active-tab-background)}:host .tab-container.active .accent{color:var(--accent, #276ef1);fill:var(--accent, #276ef1)}:host .tab-container.active .app-color{color:var(--app-color, #5a30f4);fill:var(--app-color, #5a30f4)}:host .tab-container.active .danger{color:var(--danger, #d44333);fill:var(--danger, #d44333)}:host .tab-container.active .dark{color:var(--dark, #000000);fill:var(--dark, #000000)}:host .tab-container.active .energized{color:var(--energized, #ffc043);fill:var(--energized, #ffc043)}:host .tab-container.active .info{color:var(--info, #d84c96);fill:var(--info, #d84c96)}:host .tab-container.active .light{color:var(--light, #ffffff);fill:var(--light, #ffffff)}:host .tab-container.active .stable{color:var(--stable, #adadad);fill:var(--stable, #adadad)}:host .tab-container.active .stable-alt{color:var(--stable-alt, #d0d0d0);fill:var(--stable-alt, #d0d0d0)}:host .tab-container.active .stable-light{color:var(--stable-light, #f1f1f1);fill:var(--stable-light, #f1f1f1)}:host .tab-container.active .stable-ultralight{color:var(--stable-ultralight, #fafafa);fill:var(--stable-ultralight, #fafafa)}:host .tab-container.active .success{color:var(--success, #3aa76d);fill:var(--success, #3aa76d)}:host .tab-container.active .text-color{color:var(--text-color, #807f83);fill:var(--text-color, #807f83)}:host .tab-container.active .warning{color:var(--warning, #ed6e33);fill:var(--warning, #ed6e33)}:host .tab-container.active .wood{color:var(--wood, #99644c);fill:var(--wood, #99644c)}:host .tab-container.active yoo-icon{fill:var(--dark, #000000)}:host(.transparent) .tab-container:hover,:host(.transparent) .tab-container.active{color:var(--light, #ffffff)}:host(.web) .tab-container{-ms-flex:0;flex:0;padding:var(--tab-padding)}:host(.web) .outer-container-vertical .tab-container{padding:var(--tab-padding)}:host(.web) yoo-ripple-effect{display:none}:host(.web) .tab-container:hover{color:var(--dark, #000000)}:host(.web) .extra:hover{color:var(--app-color, #5a30f4)}:host(.web) .outer-container{margin-top:var(--spacing-08, 0.5rem)}:host(.web.no-margin) .outer-container{margin-top:0}:host(.center){--justify-tabs:center}:host([disabled=\"\"]),:host([disabled=true]){pointer-events:none}:host([disabled=\"\"]) .outer-container,:host([disabled=true]) .outer-container{color:var(--stable, #adadad);opacity:0.4}:host(.no-border) .static-container{border:none}yoo-ripple-effect{--color:var(--app-color, #5a30f4);--opacity:0.1}yoo-icon{-ms-flex-item-align:center;align-self:center;margin-right:0.5625rem}yoo-context-menu.editable{width:var(--icon-size-01, 1rem);margin-left:var(--spacing-08, 0.5rem)}yoo-context-menu.editable yoo-icon{margin-right:0}yoo-button{margin:0 var(--spacing-08, 0.5rem)}span{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}yoo-badge,yoo-tag{margin-left:var(--spacing-04, 0.25rem)}yoo-badge.margin-right{margin-right:var(--spacing-08, 0.5rem)}yoo-badge[shape=dot]{-ms-flex-item-align:start;align-self:flex-start}yoo-badge:not([shape=dot]),yoo-tag{-ms-flex-item-align:center;align-self:center}.outer-container{position:relative;height:var(--height-tabs);opacity:var(--opacity-tabs)}.outer-container-vertical{font-size:var(--font-size-16, 1rem)}.outer-container-vertical .tab-container{-ms-flex-pack:left;justify-content:left;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:2.5rem;height:var(--height-tabs);padding:var(--spacing-08, 0.5rem);color:var(--dark, #000000);text-align:left}.outer-container-vertical .tab-container:hover{color:var(--app-color, #5a30f4)}.outer-container-vertical .tab-container .flex{-ms-flex:1;flex:1}.outer-container-vertical .tab-container .full-width{width:100%}.outer-container-vertical .tab-container yoo-icon{margin-right:var(--spacing-08, 0.5rem);fill:var(--text-color, #807f83)}.outer-container-vertical .tab-container.active{color:var(--app-color, #5a30f4)}.outer-container-vertical .tab-container.active yoo-icon{fill:var(--app-color, #5a30f4)}.outer-container-vertical .tab-container .tab-title{width:100%}.outer-container-vertical .tab-container .tab-title.plus-one{width:calc(100% - var(--spacing-32, 2rem))}.outer-container-vertical .tab-container .tab-title.sandwich{width:calc(100% - var(--spacing-64, 4rem))}.outer-container-vertical .tab-container+.tab-container{margin-top:var(--vertical-tab-gap)}.outer-container-vertical .tab-description{padding:var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);color:var(--text-color);font-size:var(--font-size-14, 0.875rem);border-bottom:var(--tab-border-width) solid var(--tab-border-color)}.static-container{position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;border-bottom:var(--spacing-02, 0.125rem) solid var(--stable-light, #f1f1f1)}.scrolling-container{position:absolute;display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:var(--justify-tabs);justify-content:var(--justify-tabs);width:100%;height:100%}.tab-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:0 var(--spacing-08, 0.5rem);color:var(--active-text-color);white-space:nowrap;border-bottom:var(--tab-border-width) solid var(--tab-border-color);cursor:pointer;-webkit-transition:0.3s ease;transition:0.3s ease}.tab-container.active{color:var(--dark, #000000);border-bottom-color:var(--active-tab-border-color)}.extra.active{color:var(--app-color, #5a30f4)}:host(.tabs-padding-top) .outer-container-vertical{padding-top:4rem}:host(.big-tabs) .tab-container{padding-bottom:0;border:none;-webkit-transition:color 0.3s ease;transition:color 0.3s ease}:host(.big-tabs) .tab-container:not(.active){padding-bottom:var(--spacing-08, 0.5rem);border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host(.big-tabs) .tab-container.active{background-color:transparent}:host(.big-tabs) .tab-container+.tab-container{margin:0}:host(.big-tabs) .tab-description{border-bottom:var(--tab-border-width) solid var(--active-tab-border-color)}";
 
@@ -53,8 +54,8 @@ const YooTabsComponent = class {
     this.rippleElements = [];
     this.openedTabs = [];
     this.tabClicked = (index, event) => {
-      if (index$1.isNativeMobile() && index$1.isIOS()) {
-        index$2.TapticEngine.impact({ style: 'medium' });
+      if (overlays.isNativeMobile() && overlays.isIOS()) {
+        index$1.TapticEngine.impact({ style: 'medium' });
       }
       if (this.rippleEffect && this.rippleElements && this.rippleElements[index] && this.rippleElements[index].addRipple && event) {
         this.rippleElements[index].addRipple(event.pageX, event.pageY);
@@ -82,7 +83,7 @@ const YooTabsComponent = class {
       if (index != null && index >= 0 && index < tabsCount) {
         if (this.tabElements.length > 0) {
           if (this.currentIndex !== index && this.tabElements[index] && this.autoScroll) {
-            index$1.safeScrollIntoView(this.tabElements[index]);
+            overlays.safeScrollIntoView(this.tabElements[index]);
           }
           (_d = (_c = this.tabElements[this.currentIndex]) === null || _c === void 0 ? void 0 : _c.classList) === null || _d === void 0 ? void 0 : _d.remove('active');
           (_f = (_e = this.tabElements[index]) === null || _e === void 0 ? void 0 : _e.classList) === null || _f === void 0 ? void 0 : _f.add('active');
@@ -101,7 +102,7 @@ const YooTabsComponent = class {
     this.openedTabs = ((_a = this.tabs) === null || _a === void 0 ? void 0 : _a.map((_tab, index) => this.initialIndex === index)) || [];
   }
   onShowOptions(index) {
-    index$1.showActionSheet(this.editableOptions(index));
+    overlays.showActionSheet(this.editableOptions(index));
   }
   getBadgeColor(tab, index, isActive) {
     if (isActive) {
@@ -114,24 +115,24 @@ const YooTabsComponent = class {
       return tab.iconColor || 'stable';
     }
   }
-  renderTab(tab, index$2) {
-    const isActive = this.initialIndex === index$2;
+  renderTab(tab, index$1) {
+    const isActive = this.initialIndex === index$1;
     const icon = tab.icon;
     const tagColor = isActive ? 'app-color-10' : 'text-color-10';
     return [
-      index.h("div", { key: 'tab_' + index$2, class: { 'tab-container': true, extra: index$2 >= this.tabs.length, active: isActive }, onClick: (event) => this.tabClicked(index$2, event), ref: (el) => (this.tabElements[index$2] = el) }, index.h("span", { class: "full-width" }, this.showBadges && index.h("yoo-badge", { class: "margin-right", color: this.getBadgeColor(tab, index$2, isActive), shape: "circle", text: (index$2 + 1).toLocaleString() }), icon && index.h("yoo-icon", { class: tab.iconColor, name: icon, size: tab.iconOnlySize || (this.vertical ? 'medium' : 'small') }), this.vertical
-        ? index.h("div", { class: `full-width tab-title ${this.isEditable && this.editableOptions && this.tabs.length > index$2 && icon
+      index.h("div", { key: 'tab_' + index$1, class: { 'tab-container': true, extra: index$1 >= this.tabs.length, active: isActive }, onClick: (event) => this.tabClicked(index$1, event), ref: (el) => (this.tabElements[index$1] = el) }, index.h("span", { class: "full-width" }, this.showBadges && index.h("yoo-badge", { class: "margin-right", color: this.getBadgeColor(tab, index$1, isActive), shape: "circle", text: (index$1 + 1).toLocaleString() }), icon && index.h("yoo-icon", { class: tab.iconColor, name: icon, size: tab.iconOnlySize || (this.vertical ? 'medium' : 'small') }), this.vertical
+        ? index.h("div", { class: `full-width tab-title ${this.isEditable && this.editableOptions && this.tabs.length > index$1 && icon
             ? 'sandwich'
-            : this.isEditable && this.editableOptions && this.tabs.length > index$2 || icon
+            : this.isEditable && this.editableOptions && this.tabs.length > index$1 || icon
               ? 'plus-one'
-              : ''}` }, index.h("yoo-truncated-line", { tooltipPlacement: "auto", content: index$1.translateMulti(tab.title) }))
-        : index.h("span", null, index$1.translateMulti(tab.title)), this.isEditable && this.editableOptions && this.tabs.length > index$2 && index$1.isWeb(this.host) && (index.h("yoo-context-menu", { class: "full-width editable", contentButtons: this.editableOptions(index$2) }, index.h("yoo-icon", { class: tab.iconColor, size: tab.iconOnlySize || (this.vertical ? 'medium' : 'small'), name: "more" }))), this.isEditable && this.editableOptions && this.tabs.length > index$2 && !index$1.isWeb(this.host) && (index.h("yoo-icon", { class: tab.iconColor, size: tab.iconOnlySize || (this.vertical ? 'medium' : 'small'), name: "more", onClick: () => this.onShowOptions(index$2) })), lodash.isNumber(tab.notif) && tab.notif > 0 && !this.isEditable && (index.h("yoo-badge", { ref: (el) => (this.notifElements[index$2] = el), color: tagColor, shape: "oval", text: index$1.pipes.number.transform(tab.notif, '', 0) })), lodash.isString(tab.notif) && tab.notif.length > 0 && !this.isEditable && (index.h("yoo-tag", { ref: (el) => (this.notifElements[index$2] = el), color: tagColor }, tab.notif)), lodash.isBoolean(tab.notif) && tab.notif == true && !this.isEditable && index.h("yoo-badge", { shape: "dot" }), this.vertical && tab.description && index.h("yoo-icon", { name: isActive ? 'arrow-up' : 'arrow-down', size: "medium", color: "dark" })), !index$1.isWeb(this.host) && this.rippleEffect && index.h("yoo-ripple-effect", { ref: (el) => (this.rippleElements[index$2] = el) })),
+              : ''}` }, index.h("yoo-truncated-line", { tooltipPlacement: "auto", content: overlays.translateMulti(tab.title) }))
+        : index.h("span", null, overlays.translateMulti(tab.title)), this.isEditable && this.editableOptions && this.tabs.length > index$1 && overlays.isWeb(this.host) && (index.h("yoo-context-menu", { class: "full-width editable", contentButtons: this.editableOptions(index$1) }, index.h("yoo-icon", { class: tab.iconColor, size: tab.iconOnlySize || (this.vertical ? 'medium' : 'small'), name: "more" }))), this.isEditable && this.editableOptions && this.tabs.length > index$1 && !overlays.isWeb(this.host) && (index.h("yoo-icon", { class: tab.iconColor, size: tab.iconOnlySize || (this.vertical ? 'medium' : 'small'), name: "more", onClick: () => this.onShowOptions(index$1) })), lodash.isNumber(tab.notif) && tab.notif > 0 && !this.isEditable && (index.h("yoo-badge", { ref: (el) => (this.notifElements[index$1] = el), color: tagColor, shape: "oval", text: overlays.pipes.number.transform(tab.notif, '', 0) })), lodash.isString(tab.notif) && tab.notif.length > 0 && !this.isEditable && (index.h("yoo-tag", { ref: (el) => (this.notifElements[index$1] = el), color: tagColor }, tab.notif)), lodash.isBoolean(tab.notif) && tab.notif == true && !this.isEditable && index.h("yoo-badge", { shape: "dot" }), this.vertical && tab.description && index.h("yoo-icon", { name: isActive ? 'arrow-up' : 'arrow-down', size: "medium", color: "dark" })), !overlays.isWeb(this.host) && this.rippleEffect && index.h("yoo-ripple-effect", { ref: (el) => (this.rippleElements[index$1] = el) })),
       this.vertical && isActive && tab.description && index.h("div", { class: "tab-description", innerHTML: tab.description })
     ];
   }
   renderHorizontal() {
     var _a, _b;
-    return (index.h("div", { class: "outer-container" }, index.h("div", { class: "static-container" }), index.h("yoo-ion-scroll", { class: { 'scrolling-container': true, horizontal: true, 'no-scrollbar': !index$1.isWeb(this.host) } }, (_a = this.tabs) === null || _a === void 0 ? void 0 :
+    return (index.h("div", { class: "outer-container" }, index.h("div", { class: "static-container" }), index.h("yoo-ion-scroll", { class: { 'scrolling-container': true, horizontal: true, 'no-scrollbar': !overlays.isWeb(this.host) } }, (_a = this.tabs) === null || _a === void 0 ? void 0 :
       _a.map((tab, index) => this.renderTab(tab, index)), this.isEditable && ((_b = this.extraTabs) === null || _b === void 0 ? void 0 : _b.map((tab, index) => this.renderTab(tab, this.tabs.length + index))))));
   }
   renderVertical() {
@@ -139,7 +140,7 @@ const YooTabsComponent = class {
     return index.h("div", { class: "outer-container-vertical" }, (_a = this.tabs) === null || _a === void 0 ? void 0 : _a.map((tab, index) => this.renderTab(tab, index)));
   }
   render() {
-    return (index.h(index.Host, { class: { web: index$1.isWeb(this.host) } }, !this.vertical && this.renderHorizontal(), this.vertical && this.renderVertical()));
+    return (index.h(index.Host, { class: { web: overlays.isWeb(this.host) } }, !this.vertical && this.renderHorizontal(), this.vertical && this.renderVertical()));
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {

package/dist/cjs/yoo-tag.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');
 
 function changeRgbOpacity(rgbColor, opacity) {
   const _opacity = Math.round(Math.min(Math.max(opacity || 1, 0), 1) * 255);

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

@@ -2,12 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const commonHelpers = require('./common-helpers-6970c46c.js');
-require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+const commonHelpers = require('./common-helpers-a4efe957.js');
+require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
+require('./index-de8540eb.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-1fdbd9b3.js');
 
 const tappableCss = ":host{position:relative;z-index:0;display:-ms-flexbox;display:flex;width:100%;overflow:hidden}:host .dot{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);background-color:var(--app-color, #5a30f4);z-index:-1;opacity:0.2}@-webkit-keyframes expand-to-full{0%{background-color:var(--app-color, #5a30f4);width:0;opacity:0}100%{background-color:var(--app-color, #5a30f4);width:100%;opacity:0.8}}@keyframes expand-to-full{0%{background-color:var(--app-color, #5a30f4);width:0;opacity:0}100%{background-color:var(--app-color, #5a30f4);width:100%;opacity:0.8}}@-webkit-keyframes anim-in{0%{width:0}100%{z-index:-1;width:100%}}@keyframes anim-in{0%{width:0}100%{z-index:-1;width:100%}}:host .dot.rtl{top:50%;right:50%;-webkit-transform:translate(50%, -50%);transform:translate(50%, -50%)}:host .dot:before{position:relative;display:block;margin-top:100%;border-radius:50%;content:\"\"}:host .dot:after{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;content:\"\"}:host .dot.tapped,:host .dot.active,:host .dot.tapped:after,:host .dot.active:after{border-radius:50%;-webkit-animation:anim-in 0.35s;animation:anim-in 0.35s}:host .dot.hovered,:host .dot.hovered:after{border-radius:50%;-webkit-animation:anim-in 0.15s;animation:anim-in 0.15s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.neutral) .dot{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);background-color:var(--dark, #000000) !important;z-index:-1;opacity:0.2}@keyframes expand-to-full{0%{background-color:var(--dark, #000000) !important;width:0;opacity:0}100%{background-color:var(--dark, #000000) !important;width:100%;opacity:0.8}}@keyframes anim-in{0%{width:0}100%{z-index:-1;width:100%}}:host(.neutral) .dot.rtl{top:50%;right:50%;-webkit-transform:translate(50%, -50%);transform:translate(50%, -50%)}:host(.neutral) .dot:before{position:relative;display:block;margin-top:100%;border-radius:50%;content:\"\"}:host(.neutral) .dot:after{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;content:\"\"}:host(.neutral) .dot.tapped,:host(.neutral) .dot.active,:host(.neutral) .dot.tapped:after,:host(.neutral) .dot.active:after{border-radius:50%;-webkit-animation:anim-in 0.35s;animation:anim-in 0.35s}:host(.neutral) .dot.hovered,:host(.neutral) .dot.hovered:after{border-radius:50%;-webkit-animation:anim-in 0.15s;animation:anim-in 0.15s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.center){-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}";
 

package/dist/cjs/yoo-text-sequence.cjs.entry.js

@@ -2,12 +2,13 @@
 
 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 commonHelpers = require('./common-helpers-6970c46c.js');
+const commonHelpers = require('./common-helpers-a4efe957.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const textSequenceCss = ":host{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:100%;height:100%;overflow:hidden}:host #view-finder{position:relative;width:100%;height:50%}:host #view-finder #sequences{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--spacing-16, 1rem);width:100%}:host #view-finder .sequence{display:grid;height:var(--max-sequence-height);padding:0 var(--spacing-16, 1rem);overflow:auto;color:var(--stable, #adadad);text-align:center;word-break:break-word;-webkit-transform:scale(0.9);transform:scale(0.9);-webkit-transition:all 500ms ease-in-out;transition:all 500ms ease-in-out}:host #view-finder .sequence:not(.overflowing){place-content:center}:host #view-finder .sequence *{-webkit-box-sizing:border-box;box-sizing:border-box;max-width:100%;margin:var(--spacing-08, 0.5rem) auto;text-align:center}:host #view-finder .sequence::-webkit-scrollbar{display:none}:host #view-finder .sequence.active{color:var(--dark, #000000);-webkit-transform:scale(1);transform:scale(1)}:host #view-finder .sequence.title{font-weight:var(--font-weight-700, 700);font-size:var(--font-size-28, 1.75rem)}:host .overlay{position:absolute;left:0;z-index:1;width:100%;height:35%}:host .overlay[placement=top]{top:0;background:-webkit-gradient(linear, left bottom, left top, from(var(--transparent-linear-gradient, rgba(255, 255, 255, 0))), color-stop(65%, var(--light, #ffffff)));background:linear-gradient(0deg, var(--transparent-linear-gradient, rgba(255, 255, 255, 0)) 0%, var(--light, #ffffff) 65%)}:host .overlay[placement=bottom]{bottom:0;background:-webkit-gradient(linear, left bottom, left top, color-stop(35%, var(--light, #ffffff)), to(var(--transparent-linear-gradient, rgba(255, 255, 255, 0))));background:linear-gradient(0deg, var(--light, #ffffff) 35%, var(--transparent-linear-gradient, rgba(255, 255, 255, 0)) 100%)}:host yoo-button{position:absolute;left:50%;z-index:2;width:5rem;-webkit-transform:translateX(-50%);transform:translateX(-50%);-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out}:host yoo-button[placement=top]{top:var(--spacing-16, 1rem)}:host yoo-button[placement=bottom]{bottom:var(--spacing-16, 1rem)}:host yoo-button[hidden]{opacity:0}:host yoo-button yoo-icon{fill:var(--app-color, #5a30f4)}:host([animated]) yoo-button,:host([animated]) #sequences,:host([animated]) .sequence,:host([animated]) .overlay{-webkit-transition:-webkit-transform 300ms;transition:-webkit-transform 300ms;transition:transform 300ms;transition:transform 300ms, -webkit-transform 300ms}";
 
@@ -34,7 +35,7 @@ const YooTextSequence = class {
     this.isAnimationFinished && this.initSequenceHeight();
   }
   get wrapperElement() {
-    return index$1.findParent(this.host, 'yoo-ion-scroll') || this.host;
+    return overlays.findParent(this.host, 'yoo-ion-scroll') || this.host;
   }
   get sequenceElements() {
     var _a, _b;
@@ -64,8 +65,8 @@ const YooTextSequence = class {
   }
   renderSequences() {
     var _a;
-    return index.h("section", { id: "view-finder", ref: el => this.viewFinderElement = el }, index.h("div", { id: "sequences", ref: el => this.sequencesContainerElement = el, style: { transform: `translateY(${this.translateY}px)` } }, (_a = this.sequenceValues) === null || _a === void 0 ? void 0 : _a.map((text, index$2) => {
-      return text && index.h("div", { class: { sequence: true, title: !!this.heading && !index$2, active: index$2 === this.currentIndex }, innerHTML: index$1.setSecuredContent(index$1.translateMulti(text)), onClick: ev => { var _a; return commonHelpers.openImageDetailFromRTE(this.sequenceElements[index$2], (_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a['src']); } });
+    return index.h("section", { id: "view-finder", ref: el => this.viewFinderElement = el }, index.h("div", { id: "sequences", ref: el => this.sequencesContainerElement = el, style: { transform: `translateY(${this.translateY}px)` } }, (_a = this.sequenceValues) === null || _a === void 0 ? void 0 : _a.map((text, index$1) => {
+      return text && index.h("div", { class: { sequence: true, title: !!this.heading && !index$1, active: index$1 === this.currentIndex }, innerHTML: overlays.setSecuredContent(overlays.translateMulti(text)), onClick: ev => { var _a; return commonHelpers.openImageDetailFromRTE(this.sequenceElements[index$1], (_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a['src']); } });
     })));
   }
   renderArrow(placement) {