@yoobic/yobi 8.2.0-2 → 8.2.0-22

package/dist/cjs/yoo-side-menu.cjs.entry.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-2e908abb.js');
+const index$1 = require('./index-bc221b8a.js');
 const lodash = require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-d31793a3.js');
+require('./index-ea29129a.js');
 
-const sideMenuCss = ".accent{color:var(--accent, #276ef1);fill:var(--accent, #276ef1)}.app-color{color:var(--app-color, #5a30f4);fill:var(--app-color, #5a30f4)}.danger{color:var(--danger, #d44333);fill:var(--danger, #d44333)}.dark{color:var(--dark, #000000);fill:var(--dark, #000000)}.energized{color:var(--energized, #ffc043);fill:var(--energized, #ffc043)}.info{color:var(--info, #d84c96);fill:var(--info, #d84c96)}.light{color:var(--light, #ffffff);fill:var(--light, #ffffff)}.stable{color:var(--stable, #adadad);fill:var(--stable, #adadad)}.stable-alt{color:var(--stable-alt, #d0d0d0);fill:var(--stable-alt, #d0d0d0)}.stable-light{color:var(--stable-light, #f1f1f1);fill:var(--stable-light, #f1f1f1)}.stable-ultralight{color:var(--stable-ultralight, #fafafa);fill:var(--stable-ultralight, #fafafa)}.success{color:var(--success, #3aa76d);fill:var(--success, #3aa76d)}.text-color{color:var(--text-color, #807f83);fill:var(--text-color, #807f83)}.warning{color:var(--warning, #ed6e33);fill:var(--warning, #ed6e33)}.wood{color:var(--wood, #99644c);fill:var(--wood, #99644c)}:host{--menu-width:15rem;position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:var(--menu-width);height:100%;background:var(--stable-ultralight-80, rgba(250, 250, 250, 0.8));border-right:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);-webkit-transition:0.3s;transition:0.3s}:host .scrolling-container{position:initial;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:justify;justify-content:space-between;width:100%}:host .divider{height:0.0625rem;margin:var(--spacing-08, 0.5rem) 0;background-color:var(--stable-light, #f1f1f1)}:host .avatar-divider{width:2.25rem;margin:auto;background-color:transparent}:host .top-container .header-items{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin:0 0 var(--spacing-16, 1rem) 0}:host .top-container .header-items yoo-tag{margin-left:var(--spacing-08, 0.5rem)}:host .top-container yoo-form-input{margin:var(--spacing-08, 0.5rem) 0 var(--spacing-16, 1rem) 0}:host .top-container yoo-form-input.hidden{display:none;opacity:0}:host .top-container .header-logo yoo-img{--logo-text-color:var(--dark, #000000);height:2.125rem}:host .top-container .header-logo:hover{cursor:pointer}:host .avatar-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:2rem;margin-bottom:var(--spacing-08, 0.5rem);padding-left:var(--spacing-04, 0.25rem);border-radius:var(--border-radius-08, 0.5rem)}:host .avatar-container:hover{background:var(--app-color-10, rgba(90, 48, 244, 0.1));cursor:pointer}:host .avatar-container yoo-icon{margin-right:var(--spacing-04, 0.25rem);margin-left:var(--spacing-08, 0.5rem)}:host .avatar-container .profile-avatar-and-name{display:-ms-flexbox;display:flex}:host .avatar-container .profile-avatar-and-name .user-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-left:var(--spacing-08, 0.5rem);color:var(--dark, #000000)}:host yoo-accordion{--accordion-background:transparent;--title-font-size:var(--font-size-16, 1rem);--title-font-weight:var(--font-weight-400, 400);--title-font-color:var(--dark, #000000);--title-icon-color:var(--text-color, #807f83);--right-icon-color:var(--stable, #adadad);--hover-background:var(--app-color-10, rgba(90, 48, 244, 0.1));--selected-background:var(--app-color-10, rgba(90, 48, 244, 0.1));--selected-color:var(--app-color, #5a30f4)}:host .icon-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;min-height:2.25rem}:host .top-list{padding-bottom:var(--spacing-04, 0.25rem)}:host .top-list .menu-icon{margin-bottom:0 !important}:host .bottom-container,:host .top-container{margin:var(--spacing-16, 1rem) var(--spacing-24, 1.5rem) var(--spacing-16, 1rem) var(--spacing-24, 1.5rem);-webkit-transition:0.3s;transition:0.3s}:host .bottom-container .icon-container,:host .top-container .icon-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;position:relative;width:2.25rem;height:2.25rem;margin:var(--spacing-02, 0.125rem) 0;border-radius:50%;cursor:pointer}:host .bottom-container .icon-container:hover,:host .top-container .icon-container:hover{background:var(--stable-light-60, rgba(241, 241, 241, 0.6))}:host .bottom-container .icon-container yoo-badge,:host .top-container .icon-container yoo-badge{position:absolute;top:1rem;right:auto;bottom:auto;left:-0.325rem}:host .bottom-container .icon-container yoo-badge.count,:host .top-container .icon-container yoo-badge.count{background-color:var(--light, #ffffff);border:solid var(--light, #ffffff) 0.1875rem;border-radius:50%;position:absolute;top:-0.5625rem;right:-0.6875rem;bottom:auto;left:auto}:host .bottom-container .icon-row,:host .top-container .icon-row{display:-ms-flexbox;display:flex}:host .bottom-container .icon-row .icon-container.toggle-icon,:host .top-container .icon-row .icon-container.toggle-icon{position:absolute;right:1.5rem}:host(.collapsed){width:4.5rem}:host(.collapsed) .bottom-container,:host(.collapsed) .top-container{margin:var(--spacing-08, 0.5rem) 0}:host(.collapsed) .top-container .header-logo{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:2.25rem;height:2.25rem;margin:var(--spacing-04, 0.25rem) 0}:host(.collapsed) .top-container .header-logo:hover{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:2.25rem;height:2.25rem;background:var(--stable-light-60, rgba(241, 241, 241, 0.6));border-radius:50%}:host(.collapsed) .top-container .header-logo yoo-img{width:1.5rem;height:1.5rem}:host(.hidden){width:0}:host(.custom-theme){background:var(--app-color, #5a30f4);--dark:var(--light, #ffffff);--text-color:var(--light-40, rgba(255, 255, 255, 0.4))}:host(.custom-theme) yoo-accordion{--divider-background:var(--light-10, rgba(255, 255, 255, 0.1));--hover-background:var(--stable-light-60, rgba(241, 241, 241, 0.6));--selected-background:var(--stable-light-60, rgba(241, 241, 241, 0.6))}:host(.custom-theme) .avatar-container:hover{background-color:var(--stable-light-60, rgba(241, 241, 241, 0.6))}";
+const sideMenuCss = ".accent{color:var(--accent, #276ef1);fill:var(--accent, #276ef1)}.app-color{color:var(--app-color, #5a30f4);fill:var(--app-color, #5a30f4)}.danger{color:var(--danger, #d44333);fill:var(--danger, #d44333)}.dark{color:var(--dark, #000000);fill:var(--dark, #000000)}.energized{color:var(--energized, #ffc043);fill:var(--energized, #ffc043)}.info{color:var(--info, #d84c96);fill:var(--info, #d84c96)}.light{color:var(--light, #ffffff);fill:var(--light, #ffffff)}.stable{color:var(--stable, #adadad);fill:var(--stable, #adadad)}.stable-alt{color:var(--stable-alt, #d0d0d0);fill:var(--stable-alt, #d0d0d0)}.stable-light{color:var(--stable-light, #f1f1f1);fill:var(--stable-light, #f1f1f1)}.stable-ultralight{color:var(--stable-ultralight, #fafafa);fill:var(--stable-ultralight, #fafafa)}.success{color:var(--success, #3aa76d);fill:var(--success, #3aa76d)}.text-color{color:var(--text-color, #807f83);fill:var(--text-color, #807f83)}.warning{color:var(--warning, #ed6e33);fill:var(--warning, #ed6e33)}.wood{color:var(--wood, #99644c);fill:var(--wood, #99644c)}:host{--menu-width:15rem;position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:var(--menu-width);height:100%;background:var(--stable-ultralight-80, rgba(250, 250, 250, 0.8));border-right:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);-webkit-transition:0.3s;transition:0.3s}:host .scrolling-container{position:initial;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:justify;justify-content:space-between;width:100%}:host .divider{height:0.0625rem;margin:var(--spacing-08, 0.5rem) 0;background-color:var(--stable-light, #f1f1f1)}:host .avatar-divider{width:2.25rem;margin:auto;background-color:transparent}:host .top-container{-ms-flex:1;flex:1}:host .top-container .header-items{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin:0 0 var(--spacing-16, 1rem) 0}:host .top-container .header-items yoo-tag{margin-left:var(--spacing-08, 0.5rem)}:host .top-container yoo-form-input{margin:var(--spacing-16, 1rem) 0 var(--spacing-16, 1rem) 0}:host .top-container yoo-form-input.has-header{margin:var(--spacing-08, 0.5rem) 0 var(--spacing-16, 1rem) 0}:host .top-container yoo-form-input.hidden{display:none;opacity:0}:host .top-container .header-logo yoo-img{--logo-text-color:var(--dark, #000000);height:2.125rem}:host .top-container .header-logo:hover{cursor:pointer}:host .avatar-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;max-width:100%;height:2rem;margin-bottom:var(--spacing-08, 0.5rem);padding-left:var(--spacing-04, 0.25rem);border-radius:var(--border-radius-08, 0.5rem)}:host .avatar-container:hover{background:var(--app-color-10, rgba(90, 48, 244, 0.1));cursor:pointer}:host .avatar-container yoo-icon{margin-right:var(--spacing-04, 0.25rem);margin-left:var(--spacing-08, 0.5rem)}:host .avatar-container .profile-avatar-and-name{display:-ms-flexbox;display:flex;width:calc(100% - (var(--icon-size-02, 1.5rem) + var(--spacing-08, 0.5rem)))}:host .avatar-container .profile-avatar-and-name .user-name{width:calc(100% - (var(--icon-size-02, 1.5rem) + var(--spacing-08, 0.5rem)));margin-left:var(--spacing-08, 0.5rem);color:var(--dark, #000000)}:host yoo-accordion{--accordion-background:transparent;--title-font-size:var(--font-size-16, 1rem);--title-font-weight:var(--font-weight-400, 400);--title-font-color:var(--dark, #000000);--title-icon-color:var(--text-color, #807f83);--right-icon-color:var(--stable, #adadad);--hover-background:var(--app-color-10, rgba(90, 48, 244, 0.1));--selected-background:var(--app-color-10, rgba(90, 48, 244, 0.1));--selected-color:var(--app-color, #5a30f4)}:host .icon-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;min-height:2.25rem}:host .top-list{padding-bottom:var(--spacing-04, 0.25rem)}:host .top-list .menu-icon{margin-bottom:0 !important}:host .bottom-container,:host .top-container{margin:var(--spacing-16, 1rem) var(--spacing-24, 1.5rem) var(--spacing-16, 1rem) var(--spacing-24, 1.5rem);-webkit-transition:0.3s;transition:0.3s}:host .bottom-container .icon-container,:host .top-container .icon-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;position:relative;width:2.25rem;height:2.25rem;margin:var(--spacing-02, 0.125rem) 0;border-radius:50%;cursor:pointer}:host .bottom-container .icon-container:hover,:host .top-container .icon-container:hover{background:var(--stable-light-60, rgba(241, 241, 241, 0.6))}:host .bottom-container .icon-container yoo-badge,:host .top-container .icon-container yoo-badge{position:absolute;top:1rem;right:auto;bottom:auto;left:-0.325rem}:host .bottom-container .icon-container yoo-badge.count,:host .top-container .icon-container yoo-badge.count{background-color:var(--light, #ffffff);border:solid var(--light, #ffffff) 0.1875rem;border-radius:50%;position:absolute;top:-0.5625rem;right:-0.6875rem;bottom:auto;left:auto}:host .bottom-container .icon-row,:host .top-container .icon-row{display:-ms-flexbox;display:flex}:host .bottom-container .icon-row .icon-container.toggle-icon,:host .top-container .icon-row .icon-container.toggle-icon{position:absolute;right:1.5rem}:host(.collapsed){width:4.5rem}:host(.collapsed) .bottom-container,:host(.collapsed) .top-container{margin:var(--spacing-08, 0.5rem) 0}:host(.collapsed) .top-container .header-logo{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:2.25rem;height:2.25rem;margin:var(--spacing-04, 0.25rem) 0}:host(.collapsed) .top-container .header-logo:hover{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:2.25rem;height:2.25rem;background:var(--stable-light-60, rgba(241, 241, 241, 0.6));border-radius:50%}:host(.collapsed) .top-container .header-logo yoo-img{width:1.5rem;height:1.5rem}:host(.hidden){width:0}:host(.custom-theme:not(.feed)){background:var(--app-color, #5a30f4);--dark:var(--light, #ffffff);--text-color:var(--light-40, rgba(255, 255, 255, 0.4))}:host(.custom-theme:not(.feed)) yoo-accordion{--divider-background:var(--light-10, rgba(255, 255, 255, 0.1));--hover-background:var(--stable-light-60, rgba(241, 241, 241, 0.6));--selected-background:var(--stable-light-60, rgba(241, 241, 241, 0.6))}:host(.custom-theme:not(.feed)) .avatar-container:hover{background-color:var(--stable-light-60, rgba(241, 241, 241, 0.6))}:host(.no-margin) .top-container{margin-top:0;margin-bottom:0}";
 
 const YooSideMenuComponent = class {
   constructor(hostRef) {
@@ -68,6 +68,9 @@ const YooSideMenuComponent = class {
       this.searchInput.blurInput();
       this.search.emit(this.searchText);
     }
+    else if (this.searchText) {
+      this.search.emit(this.searchText);
+    }
   }
   onSearch() {
     this.search.emit(this.searchText);
@@ -92,17 +95,18 @@ const YooSideMenuComponent = class {
     return (index.h("div", { class: "top-container", ref: (el) => (this.topContainerElement = el) }, this.renderHeader(), !this.isMenuCollapsed && this.renderSearchInput(), index.h("slot", { name: "top" }), this.isMenuCollapsed ? this.renderIconOnlyItems(this.topItems, true) : this.renderAccordionItems(this.topItems, false)));
   }
   renderBottomContainer() {
-    return (index.h("div", { class: "bottom-container" }, index.h("div", { class: { 'icon-list': this.isMenuCollapsed } }, this.user && this.renderAvatarContainer(), this.renderIconOnlyItems(this.bottomItems, false, true))));
+    var _a;
+    return ((this.user || ((_a = this.bottomItems) === null || _a === void 0 ? void 0 : _a.length) > 0) && index.h("div", { class: "bottom-container" }, index.h("div", { class: { 'icon-list': this.isMenuCollapsed } }, this.user && this.renderAvatarContainer(), this.renderIconOnlyItems(this.bottomItems, false, true))));
   }
   renderHeader() {
-    return index.h("div", { class: this.isMenuCollapsed ? 'icon-list top-list' : 'header-items' }, this.logoItem && this.renderHeaderLogo());
+    return this.logoItem && index.h("div", { class: this.isMenuCollapsed ? 'icon-list top-list' : 'header-items' }, this.renderHeaderLogo());
   }
   renderHeaderLogo() {
     const src = this.isMenuCollapsed ? this.logoItem.logoDefault : this.logoItem.logoHorizontal;
     return (index.h("div", { class: "header-logo" }, index.h("yoo-img", { key: src, src: src, cloudinaryOptions: { pad: true }, onClick: () => this.onLogoClicked() })));
   }
   renderSearchInput() {
-    return (index.h("yoo-form-input", { ref: (el) => (this.searchInput = el), class: { menu: true, hidden: this.hideSearch }, size: "medium", iconPrefix: "search", hideOptional: true, disabled: this.hideSearch, forceValueUpdate: true, placeholder: index$1.translate('SEARCH'), onInputChanged: (ev) => {
+    return (index.h("yoo-form-input", { ref: (el) => (this.searchInput = el), class: { menu: true, hidden: this.hideSearch, 'has-header': !!this.logoItem }, size: "medium", iconPrefix: "search", hideOptional: true, disabled: this.hideSearch, forceValueUpdate: true, debounce: 500, placeholder: index$1.translate('SEARCH'), onInputChanged: (ev) => {
         this.searchText = ev.detail;
         this.onSearch();
       }, onInputFocused: () => this.onSearchInputFocused() }));
@@ -123,21 +127,26 @@ const YooSideMenuComponent = class {
           notif: item.notif,
           selected: item.selected || (!isSubMenu && this.selectedIndex === index && ((_a = item.subMenu) === null || _a === void 0 ? void 0 : _a.some((s) => s.selected))),
           badge: item.badge,
-          tagElements: item.tagElements
+          tagElements: item.tagElements,
+          slotName: item.slotName
         };
       });
       if (!isSubMenu && (this.selectedIndex || this.selectedIndex === 0) && entries[this.selectedIndex]) {
         entries[this.selectedIndex].selected = true;
       }
       const isCustomTheme = index$1.getSession().isCustomTheme;
-      return (index.h("yoo-accordion", { class: { 'side-menu': !isSubMenu, 'side-menu-sub': isSubMenu, 'custom-theme': isCustomTheme }, forceEntryUpdate: true, entries: entries, maxTitleCharacters: !isSubMenu ? 18 : undefined, iconPairRight: ['arrow-down', 'arrow-up'], allowMultipleSelection: false, isSubMenu: isSubMenu, onAccordionSelected: (ev) => {
+      return (index.h("yoo-accordion", { class: { 'side-menu': !isSubMenu, 'side-menu-sub': isSubMenu, 'custom-theme': isCustomTheme }, forceEntryUpdate: true, entries: entries, iconPairRight: ['arrow-down', 'arrow-up'], allowMultipleSelection: false, isSubMenu: isSubMenu, onAccordionSelected: (ev) => {
           if (!isSubMenu) {
             this.selectedIndex = ev.detail.selected ? ev.detail.index : undefined;
           }
         } }, items
         .filter((item) => !item.isVisible || item.isVisible() !== false)
         .map((item) => {
-        return [index.h("div", { slot: item.text }, this.renderAccordionItems(item.subMenu, true)), item.hasDivider && index.h("div", { class: "divider" })];
+        return [
+          index.h("div", { slot: item.text }, this.renderAccordionItems(item.subMenu, true)),
+          item.slotName && index.h("slot", { slot: item.slotName, name: item.slotName }),
+          item.hasDivider && index.h("div", { class: "divider" })
+        ];
       })));
     }
   }
@@ -158,8 +167,9 @@ const YooSideMenuComponent = class {
     const tooltipPlacement = !this.isMenuCollapsed && footer ? 'top' : 'right';
     const buttons = (_a = item.subMenu) === null || _a === void 0 ? void 0 : _a.filter((option) => (option.isVisible ? option.isVisible() : true));
     const isCustomTheme = index$1.getSession().isCustomTheme;
+    // const isNight = getSession().currentTheme === 'Night';
     const IconContainer = () => [
-      index.h("div", { class: "icon-container", onClick: () => { var _a; return (_a = item.handler) === null || _a === void 0 ? void 0 : _a.call(item); } }, item.notif && !lodash.isNumber(item.notif) && index.h("yoo-badge", { shape: "dot", color: "danger" }), index.h("yoo-icon", { name: item.icon, color: item.selected ? 'app-color' : 'text-color', size: "medium", class: item.icon }), item.notif && lodash.isNumber(item.notif) && index.h("yoo-badge", { class: { count: true, 'custom-theme': isCustomTheme }, color: "danger", text: `${item.notif > 9 ? 9 : item.notif}${item.notif > 9 ? '+' : ''}` })),
+      index.h("div", { class: "icon-container", onClick: () => { var _a; return (_a = item.handler) === null || _a === void 0 ? void 0 : _a.call(item); } }, item.notif && !lodash.isNumber(item.notif) && index.h("yoo-badge", { shape: "dot", color: "danger" }), index.h("yoo-icon", { name: item.icon, color: item.selected && isCustomTheme ? 'light' : item.selected ? 'app-color' : 'text-color', size: "medium", class: item.icon }), item.notif && lodash.isNumber(item.notif) && index.h("yoo-badge", { class: { count: true, 'custom-theme': isCustomTheme }, color: "danger", text: `${item.notif > 9 ? 9 : item.notif}${item.notif > 9 ? '+' : ''}` })),
       item.hasDivider && index.h("div", { class: "divider" })
     ];
     if (buttons) {
@@ -178,7 +188,7 @@ const YooSideMenuComponent = class {
   }
   renderAccountAvatar() {
     return this.isMenuCollapsed ? (index.h("yoo-tooltip", { hoverable: true, placement: "right" }, index.h("div", { class: "icon-container" }, index.h("yoo-avatar", { size: "small", user: this.user, isOnline: true })))) : ([
-      index.h("div", { class: "profile-avatar-and-name" }, index.h("yoo-avatar", { size: "small", user: this.user, isOnline: true }), this.user && (index.h("div", { class: "user-name" }, index.h("yoo-truncate", { content: `${this.user.firstName} ${this.user.lastName}`, maxLength: 14 })))),
+      index.h("div", { class: "profile-avatar-and-name" }, index.h("yoo-avatar", { size: "small", user: this.user, isOnline: true }), this.user && (index.h("div", { class: "user-name" }, index.h("yoo-truncated-line", { withTooltip: false, content: `${this.user.firstName} ${this.user.lastName}` })))),
       index.h("yoo-icon", { name: this.isContextMenuOpen ? 'arrow-up' : 'arrow-down', color: "stable" })
     ]);
   }

package/dist/cjs/yoo-slides-media.cjs.entry.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-2e908abb.js');
+const index$1 = require('./index-bc221b8a.js');
 const lodash = require('./lodash-597bda6d.js');
-const commonHelpers = require('./common-helpers-bc54ccb6.js');
-const entitiesHelpers = require('./entities-helpers-fa8a5e89.js');
-const formTextAreaHelpers = require('./form-text-area-helpers-a108831e.js');
+const commonHelpers = require('./common-helpers-70f1fa4b.js');
+const entitiesHelpers = require('./entities-helpers-1fcadfd9.js');
+const formTextAreaHelpers = require('./form-text-area-helpers-24bae948.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-d31793a3.js');
+require('./index-ea29129a.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}";
 
@@ -388,7 +388,7 @@ const YooSlidesMediaComponent = class {
     return [index$1.translate('DERIVEDFROM'), index.h("mark", null, ' "' + index$1.translateMulti(item.title) + '" ')];
   }
   renderImageTitle(item) {
-    return index.h("mark", null, " ", item.imageTitle);
+    return index.h("mark", null, " ", index$1.translateMulti(item.imageTitle));
   }
   onSlideDidChange(ev) {
     // This method gets called when an image is opened for an index !== 0
@@ -438,7 +438,7 @@ const YooSlidesMediaComponent = class {
         'bottom-container': true,
         'iphone-x': index$1.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, " ", ' "' + 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 && [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)));
   }
   renderHoverButtons(item) {
     const isPhoto = !item.type || item.isMulti || item.type === 'photo' || item.type === 'multiphotos';

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

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-2e908abb.js');
-const commonHelpers = require('./common-helpers-bc54ccb6.js');
+const index$1 = require('./index-bc221b8a.js');
+const commonHelpers = require('./common-helpers-70f1fa4b.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-d31793a3.js');
+require('./index-ea29129a.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)}";
 

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

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c8609d4f.js');
-const index$2 = require('./index-37871664.js');
-const index$1 = require('./index-2e908abb.js');
+const index$2 = require('./index-14bd2747.js');
+const index$1 = require('./index-bc221b8a.js');
 const lodash = require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-d31793a3.js');
+require('./index-ea29129a.js');
 
-const tabsCss = ":host{--justify-tabs:flex-start;--height-tabs: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:not([shape=dot]),yoo-tag{-ms-flex-item-align:center;align-self:center}yoo-badge[shape=dot]{-ms-flex-item-align:start;align-self:flex-start}.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;height:2.5rem;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 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-container{margin-top:var(--vertical-tab-gap)}.outer-container-vertical .tab-description{padding-right:var(--spacing-16, 1rem);padding-bottom:var(--spacing-08, 0.5rem);padding-left:var(--spacing-32, 2rem);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(.community-editor) .tab-container{padding-bottom:0px;border:none;-webkit-transition:color 0.3s ease;transition:color 0.3s ease}:host(.community-editor) .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(.community-editor) .tab-container.active{background-color:transparent}:host(.community-editor) .tab-container+.tab-container{margin:0}:host(.community-editor) .tab-description{border-bottom:var(--tab-border-width) solid var(--active-tab-border-color)}";
+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)}";
 
 const YooTabsComponent = class {
   constructor(hostRef) {
@@ -47,10 +47,6 @@ const YooTabsComponent = class {
      * Initial index when the tabs is loaded.
      */
     this.initialIndex = 0;
-    /**
-     * Maximum amount of title characters before truncating it
-     */
-    this.maxTitleCharacters = 18;
     this.currentIndex = 0;
     this.tabElements = [];
     this.notifElements = [];
@@ -119,12 +115,17 @@ const YooTabsComponent = class {
     }
   }
   renderTab(tab, index$2) {
-    var _a;
     const isActive = this.initialIndex === index$2;
     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: "flex" }, 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 && ((_a = tab.title) === null || _a === void 0 ? void 0 : _a.length) > this.maxTitleCharacters ? (index.h("yoo-tooltip", { content: index$1.translateMulti(tab.title) }, index.h("yoo-truncate", { content: index$1.translateMulti(tab.title), maxLength: this.maxTitleCharacters }))) : (index.h("span", { class: "flex", innerHTML: 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: "flex 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("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
+            ? 'sandwich'
+            : this.isEditable && this.editableOptions && this.tabs.length > index$2 || icon
+              ? 'plus-one'
+              : ''}` }, index.h("yoo-truncated-line", { tooltipPlacement: "right", 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) })),
       this.vertical && isActive && tab.description && index.h("div", { class: "tab-description", innerHTML: tab.description })
     ];
   }

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

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c8609d4f.js');
-const commonHelpers = require('./common-helpers-bc54ccb6.js');
-require('./index-2e908abb.js');
+const commonHelpers = require('./common-helpers-70f1fa4b.js');
+require('./index-bc221b8a.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-d31793a3.js');
+require('./index-ea29129a.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

@@ -3,15 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-2e908abb.js');
+const index$1 = require('./index-bc221b8a.js');
 const lodash = require('./lodash-597bda6d.js');
-require('./index-dba65392.js');
-const commonHelpers = require('./common-helpers-bc54ccb6.js');
-const localForage = require('./localForage-46c54344.js');
+const commonHelpers = require('./common-helpers-70f1fa4b.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-d31793a3.js');
+require('./index-ea29129a.js');
 
-const textSequenceCss = ":host{position:relative;display:block;height:100%;overflow:hidden}:host #sequences{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--spacing-16, 1rem);padding:0 var(--spacing-16, 1rem);text-align:center;-webkit-transform:translateY(calc(-1 * var(--spacing-16, 1rem)));transform:translateY(calc(-1 * var(--spacing-16, 1rem)))}:host #sequences .sequence{overflow:scroll;color:var(--stable, #adadad);word-break:break-word;-webkit-transform:scale(0.9);transform:scale(0.9)}:host #sequences .sequence.active{color:var(--dark, #000000);-webkit-transform:scale(1);transform:scale(1)}:host #sequences .sequence.title{margin-top:50%;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([live-preview]) #sequences,:host(.mobile) #sequences{margin-top:35%}:host([animated]) yoo-button,:host([animated]) #sequences,:host([animated]) .sequence,:host([animated]) .overlay{-webkit-transition:all 300ms ease 0s;transition:all 300ms ease 0s}";
+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}";
 
 const YooTextSequence = class {
   constructor(hostRef) {
@@ -20,78 +18,74 @@ const YooTextSequence = class {
     this.animated = true;
     this.validity = false;
     this.currentIndex = 0;
-    this.currentYPosition = 0;
+    this.translateY = 0;
   }
   onValuesChanged() {
-    this.currentYPosition = 0;
+    this.translateY = 0;
     this.currentIndex = 0;
   }
   onValidityChanged() {
     this.validityChanged.emit(this.validity);
   }
   onIsVisibleChanged() {
-    this.setComponentHeight();
-    this.initComponent();
+    this.isVisible && this.initSequenceHeight();
+  }
+  onModalAnimationFinished() {
+    this.isAnimationFinished && this.initSequenceHeight();
   }
   get wrapperElement() {
     return index$1.findParent(this.host, 'yoo-ion-scroll') || this.host;
   }
   get sequenceElements() {
+    var _a, _b;
+    return (_b = Array.from(((_a = this.sequencesContainerElement) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.sequence')) || [])) === null || _b === void 0 ? void 0 : _b.filter(e => e);
+  }
+  get maxSequenceHeight() {
     var _a;
-    return (_a = Array.from(this.host.shadowRoot.querySelectorAll('.sequence') || [])) === null || _a === void 0 ? void 0 : _a.filter(e => e);
+    return ((_a = this.viewFinderElement) === null || _a === void 0 ? void 0 : _a.clientHeight) || (this.host.clientHeight / 2);
+  }
+  get sequenceValues() {
+    var _a, _b, _c;
+    return (_c = (_b = lodash.compact([(_a = this.heading) === null || _a === void 0 ? void 0 : _a.trim(), ...(this.values || [])])) === null || _b === void 0 ? void 0 : _b.filter(v => v)) === null || _c === void 0 ? void 0 : _c.map(v => Array.isArray(v) ? v[0] : v);
   }
   componentWillRender() {
     this.wrapperElement && (this.wrapperElement.style.overflow = 'hidden');
   }
   componentDidLoad() {
-    this.initComponent();
-    this.setComponentHeight();
+    this.initSequenceHeight();
   }
   componentDidRender() {
-    this.setComponentHeight();
+    this.initSequenceHeight();
   }
-  setComponentHeight() {
+  initSequenceHeight() {
     var _a;
-    if ((_a = this.sequenceElements) === null || _a === void 0 ? void 0 : _a.length) {
-      const { height } = this.host.getBoundingClientRect();
-      this.sequenceElements.forEach(e => {
-        e && height && (e.style.maxHeight = `${height * .5}px`);
-      });
-    }
-  }
-  initComponent() {
-    var _a;
-    (_a = this.sequenceElements) === null || _a === void 0 ? void 0 : _a.forEach(async (e) => {
-      if (e === null || e === void 0 ? void 0 : e.querySelector('img')) {
-        const img = e.querySelector('img');
-        img.src = index$1.cleanupWKWebViewFilePath((await localForage.getFromLocalForage(index$1.getKeyToCache(img.src))) || img.src);
-      }
-    });
-  }
-  onRTEContentClick(ev, index) {
-    var _a;
-    commonHelpers.onRTEClick(this.sequenceElements[index], (_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a.src);
-  }
-  clickArrow(direction) {
-    var _a;
-    if ((_a = this.sequenceElements) === null || _a === void 0 ? void 0 : _a.length) {
-      const GAP_INTER_SEQUENCES = 16;
-      this.currentIndex = lodash.clamp(this.sequenceElements.findIndex(e => e.classList.contains('active')) + (direction === 'top' ? -1 : 1), 0, this.sequenceElements.length - 1);
-      const textsHeight = this.sequenceElements.map(e => e.offsetHeight);
-      this.currentYPosition = 0 - (textsHeight.slice(0, this.currentIndex).reduce((acc, a) => acc + a, 0) + textsHeight[this.currentIndex] / 2) - GAP_INTER_SEQUENCES * this.currentIndex;
+    if (((_a = this.sequenceElements) === null || _a === void 0 ? void 0 : _a.length) && this.maxSequenceHeight) {
+      this.host.style.setProperty('--max-sequence-height', `${this.maxSequenceHeight}px`);
+      this.sequenceElements.forEach(e => e.classList.toggle('overflowing', e.scrollHeight > this.maxSequenceHeight));
       this.validity = this.currentIndex === this.sequenceElements.length - 1;
     }
   }
   renderSequences() {
-    var _a, _b;
-    return index.h("section", { id: "sequences", style: { transform: `translateY(${this.currentYPosition}px)` } }, (_b = (_a = lodash.compact([this.heading, ...(this.values || [])])) === null || _a === void 0 ? void 0 : _a.map((v) => Array.isArray(v) ? v[0] : v)) === null || _b === void 0 ? void 0 : _b.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)), ref: (el) => this.sequenceElements[index$2] = el, onClick: (ev) => this.onRTEContentClick(ev, index$2) });
-    }));
+    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']); } });
+    })));
   }
   renderArrow(placement) {
     var _a;
     const isUp = placement === 'top';
-    return index.h("yoo-button", { size: "large", ...{ placement }, hidden: (isUp && !this.currentIndex) || (!isUp && this.currentIndex === ((_a = lodash.compact([this.heading, ...(this.values || [])])) === null || _a === void 0 ? void 0 : _a.length) - 1), onClick: () => this.clickArrow(placement) }, index.h("yoo-icon", { name: `big-arrow-${isUp ? 'up' : 'down'}` }));
+    const clickArrow = () => {
+      var _a;
+      if ((_a = this.sequenceElements) === null || _a === void 0 ? void 0 : _a.length) {
+        const GAP_INTER_SEQUENCES = 16;
+        this.currentIndex = lodash.clamp(this.sequenceElements.findIndex(e => e.classList.contains('active')) + (isUp ? -1 : 1), 0, this.sequenceElements.length - 1);
+        const textsHeight = this.sequenceElements.map((e, i) => Math.round(e.offsetHeight * (i <= this.currentIndex ? 1 : .9)));
+        this.host.style.setProperty('--max-sequence-height', `${this.maxSequenceHeight}px`);
+        this.translateY = 0 - ((textsHeight.slice(0, this.currentIndex).reduce((acc, a) => acc + a, 0) + GAP_INTER_SEQUENCES * this.currentIndex));
+        this.initSequenceHeight();
+      }
+    };
+    return index.h("yoo-button", { size: "large", ...{ placement }, hidden: (isUp && !this.currentIndex) || (!isUp && this.currentIndex === ((_a = this.sequenceValues) === null || _a === void 0 ? void 0 : _a.length) - 1), onClick: () => clickArrow() }, index.h("yoo-icon", { name: `big-arrow-${isUp ? 'up' : 'down'}` }));
   }
   renderOverlay(placement) {
     return index.h("section", { class: "overlay", ...{ placement } });
@@ -106,7 +100,8 @@ const YooTextSequence = class {
   static get watchers() { return {
     "values": ["onValuesChanged"],
     "validity": ["onValidityChanged"],
-    "isVisible": ["onIsVisibleChanged"]
+    "isVisible": ["onIsVisibleChanged"],
+    "isAnimationFinished": ["onModalAnimationFinished"]
   }; }
 };
 YooTextSequence.style = textSequenceCss;

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

@@ -4,10 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c8609d4f.js');
 const lodash = require('./lodash-597bda6d.js');
-const commonHelpers = require('./common-helpers-bc54ccb6.js');
-require('./index-2e908abb.js');
+const commonHelpers = require('./common-helpers-70f1fa4b.js');
+require('./index-bc221b8a.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-d31793a3.js');
+require('./index-ea29129a.js');
 
 const YooTextComponent = class {
   constructor(hostRef) {

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

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-2e908abb.js');
-const commonHelpers = require('./common-helpers-bc54ccb6.js');
-const overlays = require('./overlays-5c97dd59.js');
+const index$1 = require('./index-bc221b8a.js');
+const commonHelpers = require('./common-helpers-70f1fa4b.js');
+const overlays = require('./overlays-63966755.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-d31793a3.js');
+require('./index-ea29129a.js');
 
-const toastCss = ".bg-accent{background-color:var(--accent, #276ef1) !important}.accent{color:var(--accent, #276ef1);fill:var(--accent, #276ef1)}.bg-app-color{background-color:var(--app-color, #5a30f4) !important}.app-color{color:var(--app-color, #5a30f4);fill:var(--app-color, #5a30f4)}.bg-danger{background-color:var(--danger, #d44333) !important}.danger{color:var(--danger, #d44333);fill:var(--danger, #d44333)}.bg-dark{background-color:var(--dark, #000000) !important}.dark{color:var(--dark, #000000);fill:var(--dark, #000000)}.bg-energized{background-color:var(--energized, #ffc043) !important}.energized{color:var(--energized, #ffc043);fill:var(--energized, #ffc043)}.bg-info{background-color:var(--info, #d84c96) !important}.info{color:var(--info, #d84c96);fill:var(--info, #d84c96)}.bg-light{background-color:var(--light, #ffffff) !important}.light{color:var(--light, #ffffff);fill:var(--light, #ffffff)}.bg-stable{background-color:var(--stable, #adadad) !important}.stable{color:var(--stable, #adadad);fill:var(--stable, #adadad)}.bg-stable-alt{background-color:var(--stable-alt, #d0d0d0) !important}.stable-alt{color:var(--stable-alt, #d0d0d0);fill:var(--stable-alt, #d0d0d0)}.bg-stable-light{background-color:var(--stable-light, #f1f1f1) !important}.stable-light{color:var(--stable-light, #f1f1f1);fill:var(--stable-light, #f1f1f1)}.bg-stable-ultralight{background-color:var(--stable-ultralight, #fafafa) !important}.stable-ultralight{color:var(--stable-ultralight, #fafafa);fill:var(--stable-ultralight, #fafafa)}.bg-success{background-color:var(--success, #3aa76d) !important}.success{color:var(--success, #3aa76d);fill:var(--success, #3aa76d)}.bg-text-color{background-color:var(--text-color, #807f83) !important}.text-color{color:var(--text-color, #807f83);fill:var(--text-color, #807f83)}.bg-warning{background-color:var(--warning, #ed6e33) !important}.warning{color:var(--warning, #ed6e33);fill:var(--warning, #ed6e33)}.bg-wood{background-color:var(--wood, #99644c) !important}.wood{color:var(--wood, #99644c);fill:var(--wood, #99644c)}:host{--media-size:48px}:host yoo-truncate{--max-lines:3}:host .outer-container{position:absolute;top:0;right:0;bottom:0;left:0;bottom:unset;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:2.25rem;padding:0.75rem 1rem;font-size:var(--font-size-16, 1rem);background:var(--stable-ultralight, #fafafa);border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-40, rgba(173, 173, 173, 0.4))}:host .outer-container .danger{color:var(--danger, #d44333)}:host .outer-container .success{color:var(--success, #3aa76d)}:host .outer-container .app-color{color:var(--app-color, #5a30f4)}:host .outer-container .button-container{padding:0 1rem}:host .outer-container .button-container .danger{color:var(--danger, #d44333)}:host .outer-container .button-container .success{color:var(--success, #3aa76d)}:host .outer-container .button-container .app-color{color:var(--app-color, #5a30f4)}:host .outer-container .text-container{-ms-flex:1;flex:1;margin-right:auto;padding-right:var(--spacing-08, 0.5rem);color:var(--dark, #000000)}:host .outer-container .text-container.sub-messages{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-height:unset !important}:host .outer-container .icon-container{padding-right:var(--spacing-08, 0.5rem)}:host .outer-container .icon-container yoo-icon{display:block}:host .outer-container .image-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding-right:var(--spacing-08, 0.5rem)}:host .outer-container .image-container yoo-img{--border-radius:50%;width:var(--media-size);height:var(--media-size)}:host .outer-container .extra-button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;min-width:55px;min-height:55px;margin-right:0.8rem;margin-bottom:0.5rem;line-height:55px;text-align:center;border-radius:50%}:host .outer-container .extra-button.bg-app-color{background:var(--app-color, #5a30f4)}:host .outer-container .extra-button.flex{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host .outer-container .extra-button.light{color:var(--light, #ffffff)}:host .overlay{position:absolute;top:0;right:0;bottom:0;left:0;background-color:var(--dark, #000000);opacity:0.4}:host(:not(.fullscreen):not(.progress):not(.form-creator.warning)) .outer-container .text-container{max-width:65%;max-height:unset;overflow-y:hidden;word-break:break-word}:host(.fullscreen) .outer-container{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100% !important;padding:3rem !important}:host(.fullscreen) .outer-container .image-container{-ms-flex:initial;flex:initial;width:100%;margin-bottom:1rem}:host(.fullscreen) .outer-container .image-container yoo-img{--border-radius:unset;width:100%;height:4rem}:host(.fullscreen) .outer-container .text-container{-ms-flex:initial;flex:initial;-ms-flex-pack:center;justify-content:center;width:100%;text-align:center}:host(.bg-stable-light) .outer-container{background:var(--stable-light, #f1f1f1)}:host(.global-actions){-webkit-box-shadow:var(--toast-shadow, 0 0.3125rem 1.875rem 0 rgba(40, 47, 54, 0.2));box-shadow:var(--toast-shadow, 0 0.3125rem 1.875rem 0 rgba(40, 47, 54, 0.2))}:host(.global-actions) .outer-container{height:2.75rem !important;margin-bottom:0 !important;overflow:hidden;border-radius:5px}:host(.global-actions) .outer-container .count-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:100%;line-height:44px}:host(.global-actions) .outer-container .text-container{-ms-flex:1;flex:1}:host(.global-actions) .outer-container .extra-button{width:2rem;min-width:initial;min-height:initial;margin:0;font-size:var(--font-size-18, 1.125rem);line-height:1rem}:host(.global-actions) .outer-container .extra-button:last-child:not(.context-menu){margin-right:1rem}:host(.bottom) .outer-container{top:unset;bottom:0;border-top:var(--border-width-01, 0.0625rem) solid var(--stable-40, rgba(173, 173, 173, 0.4));border-bottom:none}:host(.progress) .outer-container{-ms-flex-direction:column;flex-direction:column;padding:0.75rem 1rem}:host(.progress) .outer-container .text-container{display:-ms-flexbox;display:flex;width:100%;padding:0.5rem 0}:host(.progress) .outer-container .text-container .message,:host(.progress) .outer-container .text-container .icon-container{display:initial;margin:0}:host(.progress) .outer-container .text-container .button-container{margin-left:auto;padding-right:0}:host(.progress) .outer-container .progressbar-wrapper{width:100%}:host(.progress) .outer-container .progressbar-wrapper yoo-progress-bar{--progress-value-color:var(--app-color, #5a30f4)}:host(.header:not(.block)) .outer-container.iphone-x{padding-top:2.75rem !important}:host(.header.ios:not(.block)) .outer-container{padding-top:1.75rem}:host(.web:not(.rounded-rectangle)){display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;height:100%}:host(.web:not(.rounded-rectangle)) .outer-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:450px;min-height:60px;margin-top:4.25rem;border-radius:0.375rem;-webkit-box-shadow:var(--toast-shadow, 0 0.3125rem 1.875rem 0 rgba(40, 47, 54, 0.2));box-shadow:var(--toast-shadow, 0 0.3125rem 1.875rem 0 rgba(40, 47, 54, 0.2))}:host(.web:not(.rounded-rectangle)) .outer-container .message{margin:0 0 0 var(--spacing-16, 1rem)}:host(.web:not(.rounded-rectangle)) .outer-container .button{margin-bottom:0}:host(.web.global-actions) .outer-container{padding:0;color:var(--stable, #adadad)}:host(.web.global-actions) .outer-container .count-container{padding-left:var(--spacing-16, 1rem);color:var(--app-color, #5a30f4)}:host(.web.global-actions) .outer-container .text-container{padding:var(--spacing-08, 0.5rem);color:var(--app-color, #5a30f4)}:host(.web.global-actions) .outer-container .extra-button:last-child{margin-left:var(--spacing-08, 0.5rem);padding-left:var(--spacing-08, 0.5rem);border-left:solid var(--border-width-01, 0.0625rem) var(--stable-light, #f1f1f1);border-radius:0}:host(.web.top.progress) .outer-container .message{display:block;white-space:nowrap}:host(.web.top.header) .outer-container{border-bottom:none}:host(.web.top.header) .outer-container .icon-container{margin-bottom:0}:host(.web.bottom){border-radius:0.375rem}:host(.web.bottom) .outer-container{-ms-flex-item-align:end;align-self:flex-end;margin-top:0;margin-bottom:var(--spacing-16, 1rem);overflow:visible}:host(.web.bottom) .outer-container .count-container{border-radius:0.375rem 0 0 0.375rem}:host(.block) .outer-container{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;max-height:var(--spacing-48, 3rem);border-bottom:none}:host(.block.iphone-x){min-height:var(--spacing-64, 4rem)}:host(.form-creator) .outer-container{padding:0;background:var(--stable-light, #f1f1f1);border:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0) !important}:host(.form-creator) .outer-container .text-container{padding-left:var(--spacing-16, 1rem)}:host(.form-creator) .outer-container .extra-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;line-height:0.5rem}:host(.form-creator) .outer-container .extra-button.context-menu:last-child{margin-left:0;padding-left:0}:host(.form-creator) .outer-container .icon-container{padding-left:var(--spacing-08, 0.5rem)}:host(.media){--media-size:48px}:host(.media) yoo-truncate{--max-lines:2}:host(.media) .right-media-container{width:var(--media-size);height:var(--media-size)}:host(.photo-actions) .outer-container{min-height:auto;margin-top:var(--spacing-08, 0.5rem);padding:var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);color:var(--light, #ffffff);font-size:var(--font-size-14, 0.875rem);background-color:var(--app-color, #5a30f4)}:host(.photo-actions) .outer-container .text-container{color:var(--light, #ffffff)}:host(.photo-actions) .outer-container yoo-icon{font-size:var(--font-size-14, 0.875rem)}:host(.photo-actions) .outer-container yoo-icon.close{min-height:initial;padding:var(--spacing-02, 0.125rem);color:var(--app-color, #5a30f4);font-size:var(--font-size-14, 0.875rem);background:var(--light, #ffffff);border-radius:50%}:host(.photo-actions) .outer-container .button{padding:0 var(--spacing-16, 1rem)}:host(.photo-actions) .outer-container .button:not(:last-of-type){border-right:var(--border-width-01, 0.0625rem) solid var(--light-40, rgba(255, 255, 255, 0.4))}:host(.form-creator.warning) .outer-container{background:var(--warning, #ed6e33);border:none}:host(.form-creator.warning) .outer-container .text-container{padding-top:var(--spacing-16, 1rem);padding-bottom:var(--spacing-16, 1rem);color:var(--light, #ffffff);font-size:var(--font-size-14, 0.875rem)}:host(.form-creator.warning) .outer-container .button-container.close-icon-divider{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:3rem;border-left:var(--border-width-01, 0.0625rem) solid var(--light-40, rgba(255, 255, 255, 0.4))}:host(.form-creator.warning.web) .outer-container{width:37.5rem}:host(.form-creator.warning.translate){margin-top:var(--spacing-32, 2rem)}:host(.form-creator.warning.translate) .outer-container yoo-icon{margin:0 var(--spacing-16, 1rem);cursor:pointer}:host(.form-creator.warning.translate) .outer-container .light{cursor:pointer}:host(.form){display:block;overflow:hidden}:host(.form) .outer-container{position:initial;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;min-height:unset;padding:var(--spacing-04, 0.25rem);font-size:var(--font-size-12, 0.75rem);border:none;border-radius:0.375rem;-webkit-box-shadow:none;box-shadow:none}:host(.rounded-rectangle) .outer-container{margin:var(--spacing-16, 1rem) var(--spacing-16, 1rem) 0 var(--spacing-16, 1rem);border-radius:var(--border-radius-08, 0.5rem)}:host(.bg-app-color) .outer-container{background:var(--app-color, #5a30f4)}:host(.bg-app-color) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--light, #ffffff)}:host(.bg-app-color) .outer-container .button-container{padding:0 1rem}:host(.bg-app-color) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-app-color) .outer-container .button-container .success,:host(.bg-app-color) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-app-color-10) .outer-container{background:var(--app-color-10, rgba(90, 48, 244, 0.1))}:host(.bg-app-color-10) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--dark, #000000)}:host(.bg-app-color-10) .outer-container .button-container{padding:0 1rem}:host(.bg-app-color-10) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-app-color-10) .outer-container .button-container .success,:host(.bg-app-color-10) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-danger) .outer-container{background:var(--danger, #d44333)}:host(.bg-danger) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--light, #ffffff)}:host(.bg-danger) .outer-container .button-container{padding:0 1rem}:host(.bg-danger) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-danger) .outer-container .button-container .success,:host(.bg-danger) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-danger-10) .outer-container{background:var(--danger-10, rgba(212, 67, 51, 0.1))}:host(.bg-danger-10) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--dark, #000000)}:host(.bg-danger-10) .outer-container .button-container{padding:0 1rem}:host(.bg-danger-10) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-danger-10) .outer-container .button-container .success,:host(.bg-danger-10) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-energized) .outer-container{background:var(--energized, #ffc043)}:host(.bg-energized) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--light, #ffffff)}:host(.bg-energized) .outer-container .button-container{padding:0 1rem}:host(.bg-energized) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-energized) .outer-container .button-container .success,:host(.bg-energized) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-warning) .outer-container{background:var(--warning, #ed6e33)}:host(.bg-warning) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--light, #ffffff)}:host(.bg-warning) .outer-container .button-container{padding:0 1rem}:host(.bg-warning) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-warning) .outer-container .button-container .success,:host(.bg-warning) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-warning-10) .outer-container{background:var(--warning-10, rgba(237, 110, 51, 0.1))}:host(.bg-warning-10) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--dark, #000000)}:host(.bg-warning-10) .outer-container .button-container{padding:0 1rem}:host(.bg-warning-10) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-warning-10) .outer-container .button-container .success,:host(.bg-warning-10) .outer-container .button-container .app-color{color:var(--light, #ffffff)}";
+const toastCss = ".bg-accent{background-color:var(--accent, #276ef1) !important}.accent{color:var(--accent, #276ef1);fill:var(--accent, #276ef1)}.bg-app-color{background-color:var(--app-color, #5a30f4) !important}.app-color{color:var(--app-color, #5a30f4);fill:var(--app-color, #5a30f4)}.bg-danger{background-color:var(--danger, #d44333) !important}.danger{color:var(--danger, #d44333);fill:var(--danger, #d44333)}.bg-dark{background-color:var(--dark, #000000) !important}.dark{color:var(--dark, #000000);fill:var(--dark, #000000)}.bg-energized{background-color:var(--energized, #ffc043) !important}.energized{color:var(--energized, #ffc043);fill:var(--energized, #ffc043)}.bg-info{background-color:var(--info, #d84c96) !important}.info{color:var(--info, #d84c96);fill:var(--info, #d84c96)}.bg-light{background-color:var(--light, #ffffff) !important}.light{color:var(--light, #ffffff);fill:var(--light, #ffffff)}.bg-stable{background-color:var(--stable, #adadad) !important}.stable{color:var(--stable, #adadad);fill:var(--stable, #adadad)}.bg-stable-alt{background-color:var(--stable-alt, #d0d0d0) !important}.stable-alt{color:var(--stable-alt, #d0d0d0);fill:var(--stable-alt, #d0d0d0)}.bg-stable-light{background-color:var(--stable-light, #f1f1f1) !important}.stable-light{color:var(--stable-light, #f1f1f1);fill:var(--stable-light, #f1f1f1)}.bg-stable-ultralight{background-color:var(--stable-ultralight, #fafafa) !important}.stable-ultralight{color:var(--stable-ultralight, #fafafa);fill:var(--stable-ultralight, #fafafa)}.bg-success{background-color:var(--success, #3aa76d) !important}.success{color:var(--success, #3aa76d);fill:var(--success, #3aa76d)}.bg-text-color{background-color:var(--text-color, #807f83) !important}.text-color{color:var(--text-color, #807f83);fill:var(--text-color, #807f83)}.bg-warning{background-color:var(--warning, #ed6e33) !important}.warning{color:var(--warning, #ed6e33);fill:var(--warning, #ed6e33)}.bg-wood{background-color:var(--wood, #99644c) !important}.wood{color:var(--wood, #99644c);fill:var(--wood, #99644c)}:host{--media-size:48px}:host yoo-truncate{--max-lines:3}:host .outer-container{position:absolute;top:0;right:0;bottom:0;left:0;bottom:unset;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:2.25rem;padding:0.75rem 1rem;font-size:var(--font-size-16, 1rem);background:var(--stable-ultralight, #fafafa);border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-40, rgba(173, 173, 173, 0.4))}:host .outer-container .danger{color:var(--danger, #d44333)}:host .outer-container .warning{color:var(--warning, #ed6e33)}:host .outer-container .success{color:var(--success, #3aa76d)}:host .outer-container .app-color{color:var(--app-color, #5a30f4)}:host .outer-container .button-container{padding:0 1rem}:host .outer-container .button-container .danger{color:var(--danger, #d44333)}:host .outer-container .button-container .warning{color:var(--warning, #ed6e33)}:host .outer-container .button-container .success{color:var(--success, #3aa76d)}:host .outer-container .button-container .app-color{color:var(--app-color, #5a30f4)}:host .outer-container .text-container{-ms-flex:1;flex:1;margin-right:auto;padding-right:var(--spacing-08, 0.5rem);color:var(--dark, #000000)}:host .outer-container .text-container.sub-messages{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-height:unset !important}:host .outer-container .icon-container{padding-right:var(--spacing-08, 0.5rem)}:host .outer-container .icon-container yoo-icon{display:block}:host .outer-container .image-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding-right:var(--spacing-08, 0.5rem)}:host .outer-container .image-container yoo-img{--border-radius:50%;width:var(--media-size);height:var(--media-size)}:host .outer-container .extra-button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;min-width:55px;min-height:55px;margin-right:0.8rem;margin-bottom:0.5rem;line-height:55px;text-align:center;border-radius:50%}:host .outer-container .extra-button.bg-app-color{background:var(--app-color, #5a30f4)}:host .outer-container .extra-button.flex{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host .outer-container .extra-button.light{color:var(--light, #ffffff)}:host .overlay{position:absolute;top:0;right:0;bottom:0;left:0;background-color:var(--dark, #000000);opacity:0.4}:host(:not(.fullscreen):not(.progress):not(.form-creator.warning)) .outer-container .text-container{max-width:65%;max-height:unset;overflow-y:hidden;word-break:break-word}:host(:not(.fullscreen):not(.progress):not(.form-creator.warning)) .outer-container .text-container.full-width{max-width:100%}:host(.fullscreen) .outer-container{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100% !important;padding:3rem !important}:host(.fullscreen) .outer-container .image-container{-ms-flex:initial;flex:initial;width:100%;margin-bottom:1rem}:host(.fullscreen) .outer-container .image-container yoo-img{--border-radius:unset;width:100%;height:4rem}:host(.fullscreen) .outer-container .text-container{-ms-flex:initial;flex:initial;-ms-flex-pack:center;justify-content:center;width:100%;text-align:center}:host(.bg-stable-light) .outer-container{background:var(--stable-light, #f1f1f1)}:host(.global-actions){-webkit-box-shadow:var(--toast-shadow, 0 0.3125rem 1.875rem 0 rgba(40, 47, 54, 0.2));box-shadow:var(--toast-shadow, 0 0.3125rem 1.875rem 0 rgba(40, 47, 54, 0.2))}:host(.global-actions) .outer-container{height:2.75rem !important;margin-bottom:0 !important;overflow:hidden;border-radius:5px}:host(.global-actions) .outer-container .count-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:100%;line-height:44px}:host(.global-actions) .outer-container .text-container{-ms-flex:1;flex:1}:host(.global-actions) .outer-container .extra-button{width:2rem;min-width:initial;min-height:initial;margin:0;font-size:var(--font-size-18, 1.125rem);line-height:1rem}:host(.global-actions) .outer-container .extra-button:last-child:not(.context-menu){margin-right:1rem}:host(.bottom) .outer-container{top:unset;bottom:0;border-top:var(--border-width-01, 0.0625rem) solid var(--stable-40, rgba(173, 173, 173, 0.4));border-bottom:none}:host(.progress) .outer-container{-ms-flex-direction:column;flex-direction:column;padding:0.75rem 1rem}:host(.progress) .outer-container .text-container{display:-ms-flexbox;display:flex;width:100%;padding:0.5rem 0}:host(.progress) .outer-container .text-container .message,:host(.progress) .outer-container .text-container .icon-container{display:initial;margin:0}:host(.progress) .outer-container .text-container .button-container{margin-left:auto;padding-right:0}:host(.progress) .outer-container .progressbar-wrapper{width:100%}:host(.progress) .outer-container .progressbar-wrapper yoo-progress-bar{--progress-value-color:var(--app-color, #5a30f4)}:host(.header:not(.block)) .outer-container.iphone-x{padding-top:2.75rem !important}:host(.header.ios:not(.block)) .outer-container{padding-top:1.75rem}:host(.web:not(.rounded-rectangle)){display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;height:100%}:host(.web:not(.rounded-rectangle)) .outer-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:450px;min-height:60px;margin-top:4.25rem;border-radius:0.375rem;-webkit-box-shadow:var(--toast-shadow, 0 0.3125rem 1.875rem 0 rgba(40, 47, 54, 0.2));box-shadow:var(--toast-shadow, 0 0.3125rem 1.875rem 0 rgba(40, 47, 54, 0.2))}:host(.web:not(.rounded-rectangle)) .outer-container .message{margin:0 0 0 var(--spacing-16, 1rem)}:host(.web:not(.rounded-rectangle)) .outer-container .button{margin-bottom:0}:host(.web.global-actions) .outer-container{padding:0;color:var(--stable, #adadad)}:host(.web.global-actions) .outer-container .count-container{padding-left:var(--spacing-16, 1rem);color:var(--app-color, #5a30f4)}:host(.web.global-actions) .outer-container .text-container{padding:var(--spacing-08, 0.5rem);color:var(--app-color, #5a30f4)}:host(.web.global-actions) .outer-container .extra-button:last-child{margin-left:var(--spacing-08, 0.5rem);padding-left:var(--spacing-08, 0.5rem);border-left:solid var(--border-width-01, 0.0625rem) var(--stable-light, #f1f1f1);border-radius:0}:host(.web.top.progress) .outer-container .message{display:block;white-space:nowrap}:host(.web.top.header) .outer-container{border-bottom:none}:host(.web.top.header) .outer-container .icon-container{margin-bottom:0}:host(.web.bottom){border-radius:0.375rem}:host(.web.bottom) .outer-container{-ms-flex-item-align:end;align-self:flex-end;margin-top:0;margin-bottom:var(--spacing-16, 1rem);overflow:visible}:host(.web.bottom) .outer-container .count-container{border-radius:0.375rem 0 0 0.375rem}:host(.block) .outer-container{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;max-height:var(--spacing-48, 3rem);border-bottom:none}:host(.block.iphone-x){min-height:var(--spacing-64, 4rem)}:host(.form-creator) .outer-container{padding:0;background:var(--stable-light, #f1f1f1);border:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0) !important}:host(.form-creator) .outer-container .text-container{padding-left:var(--spacing-16, 1rem)}:host(.form-creator) .outer-container .extra-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;line-height:0.5rem}:host(.form-creator) .outer-container .extra-button.context-menu:last-child{margin-left:0;padding-left:0}:host(.form-creator) .outer-container .icon-container{padding-left:var(--spacing-08, 0.5rem)}:host(.media){--media-size:48px}:host(.media) yoo-truncate{--max-lines:2}:host(.media) .right-media-container{width:var(--media-size);height:var(--media-size)}:host(.photo-actions) .outer-container{min-height:auto;margin-top:var(--spacing-08, 0.5rem);padding:var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);color:var(--light, #ffffff);font-size:var(--font-size-14, 0.875rem);background-color:var(--app-color, #5a30f4)}:host(.photo-actions) .outer-container .text-container{color:var(--light, #ffffff)}:host(.photo-actions) .outer-container yoo-icon{font-size:var(--font-size-14, 0.875rem)}:host(.photo-actions) .outer-container yoo-icon.close{min-height:initial;padding:var(--spacing-02, 0.125rem);color:var(--app-color, #5a30f4);font-size:var(--font-size-14, 0.875rem);background:var(--light, #ffffff);border-radius:50%}:host(.photo-actions) .outer-container .button{padding:0 var(--spacing-16, 1rem)}:host(.photo-actions) .outer-container .button:not(:last-of-type){border-right:var(--border-width-01, 0.0625rem) solid var(--light-40, rgba(255, 255, 255, 0.4))}:host(.form-creator.warning) .outer-container{background:var(--warning, #ed6e33);border:none}:host(.form-creator.warning) .outer-container .text-container{padding-top:var(--spacing-16, 1rem);padding-bottom:var(--spacing-16, 1rem);color:var(--light, #ffffff);font-size:var(--font-size-14, 0.875rem)}:host(.form-creator.warning) .outer-container .button-container.close-icon-divider{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:3rem;border-left:var(--border-width-01, 0.0625rem) solid var(--light-40, rgba(255, 255, 255, 0.4))}:host(.form-creator.warning.web) .outer-container{width:37.5rem}:host(.form-creator.warning.translate){margin-top:var(--spacing-32, 2rem)}:host(.form-creator.warning.translate) .outer-container yoo-icon{margin:0 var(--spacing-16, 1rem);cursor:pointer}:host(.form-creator.warning.translate) .outer-container .light{cursor:pointer}:host(.form){display:block;overflow:hidden}:host(.form) .outer-container{position:initial;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;min-height:unset;padding:var(--spacing-04, 0.25rem);font-size:var(--font-size-12, 0.75rem);border:none;border-radius:0.375rem;-webkit-box-shadow:none !important;box-shadow:none !important}:host(.rounded-rectangle) .outer-container{margin:var(--spacing-16, 1rem) var(--spacing-16, 1rem) 0 var(--spacing-16, 1rem);border-radius:var(--border-radius-08, 0.5rem)}:host(.bg-app-color) .outer-container{background:var(--app-color, #5a30f4)}:host(.bg-app-color) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--light, #ffffff)}:host(.bg-app-color) .outer-container .button-container{padding:0 1rem}:host(.bg-app-color) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-app-color) .outer-container .button-container .success,:host(.bg-app-color) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-app-color-10) .outer-container{background:var(--app-color-10, rgba(90, 48, 244, 0.1))}:host(.bg-app-color-10) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--dark, #000000)}:host(.bg-app-color-10) .outer-container .button-container{padding:0 1rem}:host(.bg-app-color-10) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-app-color-10) .outer-container .button-container .success,:host(.bg-app-color-10) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-danger) .outer-container{background:var(--danger, #d44333)}:host(.bg-danger) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--light, #ffffff)}:host(.bg-danger) .outer-container .button-container{padding:0 1rem}:host(.bg-danger) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-danger) .outer-container .button-container .success,:host(.bg-danger) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-danger-10) .outer-container{background:var(--danger-10, rgba(212, 67, 51, 0.1))}:host(.bg-danger-10) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--dark, #000000)}:host(.bg-danger-10) .outer-container .button-container{padding:0 1rem}:host(.bg-danger-10) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-danger-10) .outer-container .button-container .success,:host(.bg-danger-10) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-energized) .outer-container{background:var(--energized, #ffc043)}:host(.bg-energized) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--light, #ffffff)}:host(.bg-energized) .outer-container .button-container{padding:0 1rem}:host(.bg-energized) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-energized) .outer-container .button-container .success,:host(.bg-energized) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-energized-10) .outer-container{background:var(--energized-10, rgba(255, 192, 67, 0.1))}:host(.bg-energized-10) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--dark, #000000)}:host(.bg-energized-10) .outer-container .button-container{padding:0 1rem}:host(.bg-energized-10) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-energized-10) .outer-container .button-container .success,:host(.bg-energized-10) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-warning) .outer-container{background:var(--warning, #ed6e33)}:host(.bg-warning) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--light, #ffffff)}:host(.bg-warning) .outer-container .button-container{padding:0 1rem}:host(.bg-warning) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-warning) .outer-container .button-container .success,:host(.bg-warning) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-warning-10) .outer-container{background:var(--warning-10, rgba(237, 110, 51, 0.1))}:host(.bg-warning-10) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--dark, #000000)}:host(.bg-warning-10) .outer-container .button-container{padding:0 1rem}:host(.bg-warning-10) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-warning-10) .outer-container .button-container .success,:host(.bg-warning-10) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-success) .outer-container{background:var(--success, #3aa76d)}:host(.bg-success) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--light, #ffffff)}:host(.bg-success) .outer-container .button-container{padding:0 1rem}:host(.bg-success) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-success) .outer-container .button-container .success,:host(.bg-success) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-success-10) .outer-container{background:var(--success-10, rgba(58, 167, 109, 0.1))}:host(.bg-success-10) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--dark, #000000)}:host(.bg-success-10) .outer-container .button-container{padding:0 1rem}:host(.bg-success-10) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-success-10) .outer-container .button-container .success,:host(.bg-success-10) .outer-container .button-container .app-color{color:var(--light, #ffffff)}";
 
 const LIFECYCLE_MAP = {
   ionToastDidPresent: 'ionViewDidEnter',
@@ -157,7 +157,7 @@ const YooToastComponent = class {
         header: this.position !== 'bottom' && !this.isFormField,
         fullscreen: this.fullscreen,
         ...commonHelpers.getAppContext(this.host)
-      } }, index.h("yoo-swipe-container", { onSwipedUp: () => this.onSwipeUp(), onClick: () => this.onClosableSwipeClick() }, index.h("div", { ref: (el) => (this.outerContainerDiv = el), class: { 'outer-container': true, 'iphone-x': index$1.isIphoneX() }, style: { 'z-index': (20000 + this.overlayId).toString() } }, this.count > -1 && this.renderCount(), this.image && this.renderImage(), this.icon && !this.image && this.renderIcon(), index.h("div", { class: { 'text-container': true, 'sub-messages': ((_a = this.subMessages) === null || _a === void 0 ? void 0 : _a.length) > 0 } }, index.h("yoo-truncate", { maxLength: this.maxLength, content: index$1.translateMulti(this.message) }), (_b = this.subMessages) === null || _b === void 0 ? void 0 :
+      } }, index.h("yoo-swipe-container", { onSwipedUp: () => this.onSwipeUp(), onClick: () => this.onClosableSwipeClick() }, index.h("div", { ref: (el) => (this.outerContainerDiv = el), class: { 'outer-container': true, 'iphone-x': index$1.isIphoneX() }, style: { 'z-index': (20000 + this.overlayId).toString() } }, this.count > -1 && this.renderCount(), this.image && this.renderImage(), this.icon && !this.image && this.renderIcon(), index.h("div", { class: { 'text-container': true, 'full-width': !this.closable, 'sub-messages': ((_a = this.subMessages) === null || _a === void 0 ? void 0 : _a.length) > 0 } }, index.h("yoo-truncate", { maxLength: this.maxLength, content: index$1.translateMulti(this.message) }), (_b = this.subMessages) === null || _b === void 0 ? void 0 :
       _b.map((subMessage) => {
         return index.h("yoo-truncate", { maxLength: this.maxLength, content: index$1.translateMulti(subMessage) });
       }), this.link && index.h("span", { class: "link", innerHTML: index$1.translateMulti(this.link) }), this.progressEvent && (this.closable !== false || this.showCloseButton) && this.renderCloseButton()), this.rightMediaSrc && this.rendeMediaImage(), this.extraButtons &&