@yoobic/yobi 8.3.0 → 8.3.1-10

package/dist/collection/components/form-creator/form-creator-live-preview/form-creator-live-preview.css

@@ -208,6 +208,16 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host h1, :host p {
   margin: 0;
 }
+:host yoo-navbar {
+  --bottom-shadow: 0;
+}
+:host yoo-navbar:not(.device-preview) {
+  --top-container-padding: 0;
+  --center-padding: 0;
+}
+:host yoo-navbar.no-heading {
+  --top-container-min-height: auto;
+}
 :host .outer-container {
   display: flex;
   flex-direction: column;

package/dist/collection/components/form-creator/form-creator-live-preview/form-creator-live-preview.js

@@ -38,6 +38,19 @@ export class YooFormCreatorLivePreviewComponent {
     return h("div", { class: "language-selector" },
       h("yoo-form-autocomplete", { value: this.selectedLanguage, values: getTranslateLanguageKeys(this.availableLanguages), onInputChanged: (ev) => this.onLanguageChanged(ev), idOnly: true, entityType: "language", useTranslate: true, displayType: "card-list", forceHideSearch: true, iconPrefix: "feed", size: "medium" }));
   }
+  renderHeader() {
+    var _a;
+    return [
+      h("yoo-header", null,
+        h("yoo-navbar", { class: { 'no-heading': this.hideHeading } },
+          h("div", { class: { 'outer-container': true, 'not-closable': !this.closable } },
+            !this.hideHeading && h("div", { class: "heading" },
+              this.mode === 'fullscreen' && this.renderFullscreenHeader(),
+              this.mode === 'panel' && this.renderPanelHeader()),
+            ((_a = this.availableLanguages) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.renderLanguageSelector(),
+            this.showDevices && this.renderSubheader())))
+    ];
+  }
   renderFullscreenHeader() {
     return [
       h("div", { class: { title: true, 'align-left': !this.closable } }, translate(this.fullscreenHeading || 'LIVEPREVIEW')),
@@ -87,20 +100,15 @@ export class YooFormCreatorLivePreviewComponent {
         h("yoo-device", { class: "mobile app-creator-device", deviceEntry: this.selectedDevice, scaledContainerSelector: ".columns-container", resizeOnUpdate: this.mode === 'fullscreen' },
           h("div", { class: "form-dynamic-container" },
             this.missionDescriptionTitle && (h("yoo-header", null,
-              h("yoo-navbar", null,
+              h("yoo-navbar", { class: "device-preview" },
                 h("yoo-truncate", null, translateMulti(this.missionDescriptionTitle))))),
             h("div", { class: "slot-container" },
               h("slot", { name: "livePreview" })))))));
   }
   render() {
-    var _a;
     return (h(Host, { class: { panel: this.mode === 'panel', ...getAppContext(this.host) } },
+      this.renderHeader(),
       h("div", { class: { 'outer-container': true, 'not-closable': !this.closable } },
-        !this.hideHeading && h("div", { class: "heading" },
-          this.mode === 'fullscreen' && this.renderFullscreenHeader(),
-          this.mode === 'panel' && this.renderPanelHeader()),
-        ((_a = this.availableLanguages) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.renderLanguageSelector(),
-        this.showDevices && this.renderSubheader(),
         this.renderContent(),
         !!this.logo && (h("div", { class: "image-container" },
           h("yoo-img", { src: this.logo, cloudinaryOptions: { pad: true }, svgOptions: { afterLoad: (_, svgString) => replaceSVGColors(svgString) } }))),

package/dist/collection/feature-communicate/chat/card-chat/card-chat.css

@@ -210,7 +210,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   border-bottom: var(--border-width-01, 0.0625rem) solid var(--stable-alt-40, rgba(208, 208, 208, 0.4));
 }
 :host #content {
-  width: 100%;
+  width: calc(100% - var(--spacing-64, 4rem));
+  overflow: hidden;
 }
 :host #content #heading {
   display: flex;
@@ -236,6 +237,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   gap: var(--spacing-04, 0.25rem);
   align-items: center;
   width: 100%;
+  overflow: hidden;
 }
 :host #content #message yoo-truncated-line {
   width: 100%;

package/dist/collection/feature-communicate/chat/chat/chat.js

@@ -73,7 +73,7 @@ export class YooChatComponent {
     const items = parseMediaMessageForSlidesMedia(mediaMessages);
     const { message, item } = this.getCurrentItemAndMessage(findIndex, items, mediaMessages) || {};
     const secondaryActions = this.getMediaSecondaryActions(findIndex, items, mediaMessages);
-    showSlidesMedia({
+    showSlidesMedia(this.host, {
       items,
       currentSlideIndex: findIndex,
       showBottomContainer: false,

package/dist/collection/feature-communicate/chat/chat-message/chat-message.js

@@ -175,7 +175,7 @@ export class YooChatMessageComponent {
   onStatusClicked(ev) {
     if (!this.preventDetailView) {
       ev.stopPropagation();
-      showMessageInfoDialog(this.message, this.allUsers, this.isGroup, this.receivedByOthers);
+      showMessageInfoDialog(this.message, this.allUsers, this.host, this.isGroup, this.receivedByOthers);
     }
   }
   onShowMore(ev) {

package/dist/collection/feature-communicate/feed/card-feed/default/card-feed.js

@@ -198,7 +198,7 @@ export class YooCardFeedComponent {
     var _a;
     const preventNewLine = (_a = this.entry.description) === null || _a === void 0 ? void 0 : _a.includes('name="slide"');
     const content = parseMarkDown(replaceAllLinks(this.entry.description, preventNewLine), true);
-    return this.modalMode ? h("div", { ref: (el) => this.textElement = el, onClick: (ev) => { var _a; return openImageDetailFromRTE(this.textElement, (_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a['src']); }, innerHTML: content }) :
+    return this.modalMode ? h("div", { ref: (el) => this.textElement = el, onClick: (ev) => { var _a; return openImageDetailFromRTE(this.host, this.textElement, (_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a['src']); }, innerHTML: content }) :
       h("yoo-truncate", { class: "card-feeds", maxLength: 20, byWords: true, replaceBreakWithClosed: true, showEllipsisButton: !this.isBlog(), onContentToggled: (ev) => this.viewMoreToggled.emit(ev.detail), content: replaceAllLinks(this.entry.description, preventNewLine) });
   }
   renderEntryDescription() {

package/dist/collection/feature-learn/learning/lesson-question-result/lesson-question-result.css

@@ -330,10 +330,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   padding-top: calc(var(--safe-area-inset-top) + var(--spacing-32, 2rem));
 }
 :host .answers {
-  width: 100%;
-  padding-bottom: var(--spacing-16, 1rem);
+  padding: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
 }
 :host .answers .title {
-  padding: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
+  padding-bottom: var(--spacing-08, 0.5rem);
   font-size: var(--font-size-24, 1.5rem);
 }

package/dist/collection/feature-operate/mission/announcement-heading/announcement-heading.css

@@ -250,22 +250,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host .outer-container .progress-separator {
   margin-bottom: var(--spacing-08, 0.5rem);
-  border-bottom: 1px solid var(--announcement-color);
-}
-
-:host(.campaign-photos-mission-details) .outer-container {
-  color: #fff;
-  background-color: transparent;
-}
-:host(.campaign-photos-mission-details) .outer-container .progress .quick-task-progress yoo-progress-bar {
-  --trail-bar-color: var(--light-40, rgba(255, 255, 255, 0.4));
-  --progress-bar-color: var(--light, #ffffff);
-}
-:host(.campaign-photos-mission-details) .outer-container .progress .quick-task-progress yoo-truncate {
-  color: var(--light, #ffffff);
-}
-:host(.campaign-photos-mission-details) .outer-container .progress-separator {
-  border-bottom: var(--border-width-01, 0.0625rem) solid var(--announcement-background-color);
+  border-bottom: var(--border-width-01, 0.0625rem) solid var(--announcement-color);
 }
 
 :host(.feed) {
@@ -308,4 +293,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   color: var(--light, #ffffff);
   font-size: var(--font-size-16, 1rem);
   background-color: var(--announcement-color);
+}
+
+:host([is-preview]) .outer-container .progress .quick-task-progress yoo-progress-bar {
+  --svg-width: 1.5rem;
 }

package/dist/collection/feature-operate/mission/announcement-heading/announcement-heading.js

@@ -176,7 +176,7 @@ export class YooAnnouncementHeadingComponent {
         "text": ""
       },
       "attribute": "is-preview",
-      "reflect": false
+      "reflect": true
     },
     "viewAllHandler": {
       "type": "unknown",

package/dist/collection/feature-platform/login/login/login.css

@@ -210,19 +210,17 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   width: 100%;
   height: 100%;
 }
-.outer-login-container h1, .outer-login-container h3 {
+.outer-login-container .login-main-title, .outer-login-container .login-sub-title {
   font-weight: 900;
 }
-.outer-login-container h1 {
-  font-size: 2.25rem;
+.outer-login-container .login-main-title {
+  margin: 0;
   transition: all ease-in-out 0.2s;
 }
-.outer-login-container h3 {
+.outer-login-container .login-sub-title {
   width: fit-content;
-  max-width: 80%;
   margin-top: 0;
   margin-bottom: 0.875rem;
-  font-size: var(--font-size-24, 1.5rem);
   transition: all ease-in-out 0.2s;
 }
 .outer-login-container .content-container {
@@ -253,7 +251,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   padding-top: var(--spacing-96, 6rem);
 }
 
-@media screen and (max-height: 699px) {
+@media screen and (max-height: 649px) {
   .outer-login-container:not(.emulated).keyboard-closed .content-container {
     padding-top: 0;
   }
@@ -440,10 +438,12 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   width: 100%;
   margin-top: var(--spacing-24, 1.5rem);
   text-align: center;
+  transform: scale(100%) translateY(0);
   transition: all ease-in-out 0.2s;
 }
-.outer-login-container .header h1 {
+.outer-login-container .header .login-main-title {
   margin: 0;
+  padding: 0 0.3rem;
 }
 .outer-login-container .header img {
   max-width: 80%;
@@ -454,7 +454,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   height: 6rem;
   max-height: 6rem;
 }
-.outer-login-container[is-whitelabel] .header h1 {
+.outer-login-container[is-whitelabel] .header .login-main-title {
   display: none;
 }
 
@@ -481,7 +481,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   .outer-login-container:not(.emulated) .header img {
     margin: 2rem 0;
   }
-  .outer-login-container:not(.emulated) .header h1 {
+  .outer-login-container:not(.emulated) .header .login-main-title {
     display: none;
   }
   .outer-login-container:not(.emulated) #error-alert {
@@ -512,7 +512,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
     height: 4rem;
     max-height: 4rem;
   }
-  .outer-login-container[is-whitelabel]:not(.emulated) header h1 {
+  .outer-login-container[is-whitelabel]:not(.emulated) header .login-main-title {
     display: none;
   }
   .outer-login-container[is-whitelabel]:not(.emulated) header img {
@@ -531,7 +531,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   height: 4rem;
   max-height: 4rem;
 }
-.outer-login-container[is-whitelabel].emulated header h1 {
+.outer-login-container[is-whitelabel].emulated header .login-main-title {
   display: none;
 }
 .outer-login-container[is-whitelabel].emulated header img {
@@ -588,19 +588,39 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
     margin-top: var(--spacing-32, 2rem);
   }
 }
+@media screen and (max-height: 739px) {
+  .outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) .header img {
+    margin-top: var(--spacing-16, 1rem);
+  }
+}
 @media screen and (max-height: 699px) {
-  .outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) .header h1 {
+  .outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) .header img {
+    margin-top: var(--spacing-08, 0.5rem);
+    margin-bottom: var(--spacing-08, 0.5rem);
+  }
+}
+@media screen and (max-height: 649px) {
+  .outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) .header .login-main-title {
     display: none;
   }
 }
-@media screen and (max-height: 665px) {
-  .outer-login-container.keyboard-closed:not(.emulated) .header h1,
+@media screen and (max-height: 599px) {
+  .outer-login-container.keyboard-closed:not(.emulated) .header .login-main-title,
 .outer-login-container.keyboard-closed:not(.emulated) .header img {
     display: none;
   }
 }
 @media screen and (max-height: 500px) {
   .outer-login-container.keyboard-open:not(.emulated) .header {
+    transform: scale(80%) translateY(-10%);
+  }
+  .outer-login-container.keyboard-open:not(.emulated) .header img {
+    margin-top: var(--spacing-32, 2rem);
+  }
+}
+@media screen and (max-height: 400px) {
+  .outer-login-container.keyboard-open:not(.emulated) .header .login-main-title,
+.outer-login-container.keyboard-open:not(.emulated) .header img {
     display: none;
   }
 }
@@ -805,26 +825,27 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   }
 }
 @media screen and (max-width: 899px) {
-  .outer-login-container:not([is-whitelabel]) .main-content h3 {
+  .outer-login-container:not([is-whitelabel]) .main-content .login-sub-title {
     display: none;
   }
 
-  .outer-login-container.focused h3 {
+  .outer-login-container.focused .login-sub-title {
     transform: scale(1.2) translateX(10%);
   }
 }
-.outer-login-container.emulated:not([is-whitelabel]) .main-content h3 {
+.outer-login-container.emulated:not([is-whitelabel]) .main-content .login-sub-title {
   display: none;
 }
-.outer-login-container.emulated.focused h3 {
+.outer-login-container.emulated.focused .login-sub-title {
   transform: scale(1.2) translateX(10%);
 }
 
 .outer-login-container .sidepanel {
   margin-right: var(--spacing-64, 4rem);
 }
-.outer-login-container .sidepanel h1 {
+.outer-login-container .sidepanel .login-main-title {
   margin-top: 0;
+  margin-bottom: var(--spacing-24, 1.5rem);
 }
 
 @media screen and (min-width: 1000px) {

package/dist/collection/feature-platform/login/login/parts/Header.js

@@ -1,5 +1,6 @@
 import { isWeb, translate } from '@shared/utils';
 import { h } from '@stencil/core';
+import { LoginTitle } from './LoginTitle';
 export const Header = ({ logo, title, textColor, error, closeClick }) => [
   error && (h("yoo-banner", { id: "error-alert", class: {
       'center header': true,
@@ -17,5 +18,5 @@ export const Header = ({ logo, title, textColor, error, closeClick }) => [
       h("a", { class: "link", style: { color: `var(--${isWeb() ? 'danger' : 'light'})` }, href: "mailto:support@yoobic.com" }, translate('YOOBICNEEDHELP'))))),
   h("header", { class: "header" },
     h("img", { src: logo, alt: "app logo" }),
-    h("h1", { style: { color: textColor } }, title))
+    h(LoginTitle, { style: { color: textColor }, title: title }))
 ];

package/dist/collection/feature-platform/login/login/parts/LoginTitle.js

@@ -0,0 +1,10 @@
+import { h } from '@stencil/core';
+export const LoginTitle = ({ style = {}, title, type = 'main' }) => {
+  if (type === 'main') {
+    style.fontSize = title.length > 60 ? '18px' : title.length > 50 ? '24px' : title.length > 36 ? '28px' : title.length > 30 ? '32px' : '36px';
+  }
+  else {
+    style.fontSize = title.length > 40 ? '12px' : title.length > 30 ? '14px' : title.length > 25 ? '18px' : title.length > 18 ? '20px' : '24px';
+  }
+  return type === 'main' ? (h("h1", { class: 'login-main-title', style: style }, title)) : (h("h3", { class: 'login-sub-title', style: style }, title));
+};

package/dist/collection/feature-platform/login/login/parts/MainContent.js

@@ -1,5 +1,6 @@
 import { translate } from '@shared/utils';
 import { h } from '@stencil/core';
+import { LoginTitle } from './LoginTitle';
 export const MainContent = ({ subtitle, textColor }, children) => (h("div", { class: "main-content" },
-  h("h3", { style: { color: textColor } }, translate(subtitle)),
+  h(LoginTitle, { style: { color: textColor }, title: translate(subtitle), type: "sub" }),
   children));

package/dist/collection/feature-platform/login/login/parts/Sidepanel.js

@@ -1,4 +1,5 @@
 import { h } from '@stencil/core';
+import { LoginTitle } from './LoginTitle';
 export const Sidepanel = ({ image, title, textColor }) => (h("div", { class: "sidepanel" },
-  h("h1", { style: { color: textColor } }, title),
+  h(LoginTitle, { style: { color: textColor }, title: title }),
   image && h("img", { src: image })));

package/dist/collection/feature-platform/login/reset-password/reset-password.css

@@ -225,8 +225,11 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   height: 15rem;
   margin-top: var(--spacing-08, 0.5rem);
 }
-:host yoo-form-input {
+:host yoo-form-input-container {
   display: block;
   max-width: 18.75rem;
   margin: auto;
+}
+:host yoo-form-input-container.web {
+  font-size: var(--font-size-12, 0.75rem);
 }

package/dist/collection/feature-platform/login/reset-password/reset-password.js

@@ -52,13 +52,13 @@ export class YooResetPasswordComponent {
   }
   renderRequest() {
     return [
-      !!this.instruction && h("p", null, this.instruction),
+      !!this.instruction && h("p", { style: { maxWidth: '350px', margin: '0 auto' } }, this.instruction),
       h("yoo-empty-state", { ref: (el) => (this.emptyState = el), type: this.isMagicLink ? 'magic-link' : 'password' }),
-      h("yoo-form-input-container", { field: { title: translate('YOOBICUSERNAME') }, hideOptional: true, hideLabel: true },
-        h("yoo-form-input", { ref: (el) => (this.emailInput = el), validators: [{ name: 'required' }], type: "email", uiValidation: { valid: false, invalid: false }, onInputChanged: (event) => this.onInputChanged(event), placeholder: translate('YOOBICUSERNAMEENTER'), 
-          //! Do not set up onInputBlur without confirming on mobile device (We don't want to have to press submit more than once)
+      h("yoo-form-input-container", { field: { title: 'YOOBICUSERNAME' }, hideOptional: true, useUppercaseLabel: true },
+        h("yoo-form-input", { ref: (el) => (this.emailInput = el), iconPrefixColor: 'app-color', validators: [{ name: 'required' }], type: "email", uiValidation: { valid: false, invalid: false }, onInputChanged: (event) => this.onInputChanged(event), placeholder: translate('YOOBICUSERNAMEENTER'), 
+          //! Do not set up onInputBlur without confirming on mobile device. We don't want to have to press submit more than once
           size: isWeb(this.host) ? 'medium' : 'large' })),
-      h("yoo-button", { ref: (el) => (this.submitButton = el), size: isWeb(this.host) ? 'medium' : 'large', color: "app-color", disabled: !this.validity, class: "expanded", onClick: () => this.onSubmit() }, translate('SUBMIT'))
+      h("yoo-button", { ref: (el) => (this.submitButton = el), size: isWeb(this.host) ? 'medium' : 'large', color: "app-color", disabled: !this.validity, class: "expanded", onClick: () => this.onSubmit() }, this.isMagicLink ? translate('YOOBICMAGICLINK') : translate('YOOBICRESETPASSWORD'))
     ];
   }
   renderResetForm() {
@@ -80,6 +80,7 @@ export class YooResetPasswordComponent {
           },
           {
             type: FormFieldType.password,
+            iconPrefixColor: 'app-color',
             name: 'newpassword',
             placeholder: 'NEWPASSWORD',
             required: true,
@@ -88,6 +89,7 @@ export class YooResetPasswordComponent {
           },
           {
             type: FormFieldType.password,
+            iconPrefixColor: 'app-color',
             name: 'verify',
             placeholder: 'CONFIRMPASSWORD',
             required: true,
@@ -97,9 +99,9 @@ export class YooResetPasswordComponent {
         ]
       }
     ];
-    return h("yoo-form-dynamic", { class: "margin-top", animated: false, slides: slides, showRecap: false, showSave: true, skipValidation: true, onDataChanged: (ev) => this.onDataChanged(ev), onFormValidityChanged: (ev) => this.onValidityChanged(ev), onSave: () => this.onSubmit() },
+    return (h("yoo-form-dynamic", { class: "margin-top", animated: false, slides: slides, showRecap: false, showSave: true, skipValidation: true, onDataChanged: (ev) => this.onDataChanged(ev), onFormValidityChanged: (ev) => this.onValidityChanged(ev), onSave: () => this.onSubmit() },
       h("div", { slot: "footer" },
-        h("yoo-button", { size: isWeb(this.host) ? 'medium' : 'large', color: "app-color", disabled: !this.validity, onClick: () => this.onSubmit() }, translate('SUBMIT'))));
+        h("yoo-button", { size: isWeb(this.host) ? 'medium' : 'large', color: "app-color", disabled: !this.validity, onClick: () => this.onSubmit() }, translate('SUBMIT')))));
   }
   render() {
     return h("div", null, this.token ? this.renderResetForm() : this.renderRequest());

package/dist/collection/utils/helpers/camera-helpers.js

@@ -105,7 +105,7 @@ export async function getVideoDevices() {
     }));
   }
 }
-export function showAudioRecorder() {
+export function showAudioRecorder(host) {
   const audioRecorderDialog = document.createElement('yoo-audio-recorder-dialog');
-  return showModal(audioRecorderDialog, { height: 'medium' }, '', getModalAnimation('Enter', 'Y'), getModalAnimation('Leave', 'Y'), isWeb());
+  return showModal(audioRecorderDialog, { height: 'medium' }, '', getModalAnimation('Enter', 'Y', { host }), getModalAnimation('Leave', 'Y', { host }), isWeb());
 }

package/dist/collection/utils/helpers/chat-helpers.js

@@ -1,4 +1,4 @@
-import { is24Hour, isFile, isWeb, replaceAllLinks, replaceAtTagToMentionTag, showModal, translateMulti } from '@shared/utils';
+import { is24Hour, isFile, replaceAllLinks, replaceAtTagToMentionTag, translateMulti } from '@shared/utils';
 import { isArray } from 'lodash-es';
 /**
  * Get the proper data format for a single message aswell as grouped messages
@@ -52,14 +52,6 @@ export function parseMediaMessageForSlidesMedia(mediaMessages) {
     };
   });
 }
-export function showMessageInfoDialog(message, allUsers, isMultiple, receivedByOthers) {
-  const dialog = document.createElement('yoo-chat-message-dialog');
-  dialog.message = message;
-  dialog.allUsers = allUsers;
-  dialog.isMultiple = isMultiple;
-  dialog.receivedByOthers = receivedByOthers;
-  showModal(dialog, null, null, isWeb() ? 'fadeEnterAnimation' : 'slideXEnterReverseAnimation', isWeb() ? 'fadeLeaveAnimation' : 'slideXLeaveReverseAnimation', true);
-}
 /**
  * Convert a text into HTMLElement where yoo-mention-tags and <br> is parsed as component
  */

package/dist/collection/utils/helpers/common-helpers.js

@@ -1,39 +1,39 @@
 import { ScreenOrientation } from '@awesome-cordova-plugins/screen-orientation';
 import { animations, cleanupWKWebViewFilePath, Cloudinary, CloudinaryGradientLayer, dateDiffInCalendarDays, debounce, findDevice, findParent, getAsyncExtraData, getCssColor, getModalAnimation, getProtocol, isAndroid, isDateAfter, isDateBefore, isFullScreenFalse, isIOS, isIpadPro, isIphoneX, isNativeFilePath, isNativeMobile, isTablet, isWeb, querySelectorDeep as _querySelectorDeep, setAnimation, showModal, startOf, translate, YOOBICON_ENTITIES_MAP } from '@shared/utils';
 import { get } from 'lodash-es';
-function getDefaultModalAnimation() {
-  return ['Enter', 'Leave'].map((v) => getModalAnimation(v, 'X', true));
+function getDefaultModalAnimation(host) {
+  return ['Enter', 'Leave'].map((v) => getModalAnimation(v, 'X', { host, reversedSlide: true }));
 }
-export function showImageCropper(imageCropperParams, modalOptions) {
+export function showImageCropper(host, imageCropperParams, modalOptions) {
   const { enterAnimation, leaveAnimation } = modalOptions || {};
   const imageCropper = document.createElement('yoo-image-cropper-dialog');
   imageCropper.heading = translate('RESIZE');
   imageCropperParams && Object.entries(imageCropperParams).forEach(([prop, value]) => (imageCropper[prop] = value));
-  return showModal(imageCropper, null, 'fullscreen ', enterAnimation || getDefaultModalAnimation()[0], leaveAnimation || getDefaultModalAnimation()[1], null, null);
+  return showModal(imageCropper, null, 'fullscreen ', enterAnimation || getDefaultModalAnimation(host)[0], leaveAnimation || getDefaultModalAnimation(host)[1], null, null);
 }
-export function showPhotoEditor(photoEditorParams, modalOptions) {
+export function showPhotoEditor(host, photoEditorParams, modalOptions) {
   const { enterAnimation, leaveAnimation } = modalOptions || {};
   let photoEditor = document.createElement('yoo-photo-editor');
   photoEditorParams && Object.entries(photoEditorParams).forEach(([prop, value]) => (photoEditor[prop] = value));
-  return showModal(photoEditor, null, 'hidden-overflow ', enterAnimation || getDefaultModalAnimation()[0], leaveAnimation || getDefaultModalAnimation()[1], true).then((res) => {
+  return showModal(photoEditor, null, 'hidden-overflow ', enterAnimation || getDefaultModalAnimation(host)[0], leaveAnimation || getDefaultModalAnimation(host)[1], true).then((res) => {
     photoEditor = null;
     return res === null || res === void 0 ? void 0 : res.data;
   });
 }
-export function openImageDetailFromRTE(el, currentImageSrc) {
+export function openImageDetailFromRTE(host, el, currentImageSrc) {
   var _a;
   const imgSrcs = (_a = Array.from(el === null || el === void 0 ? void 0 : el.querySelectorAll('img'))) === null || _a === void 0 ? void 0 : _a.map((e) => e === null || e === void 0 ? void 0 : e.src);
   const items = (imgSrcs === null || imgSrcs === void 0 ? void 0 : imgSrcs.map(value => ({ value }))) || [];
   if (items === null || items === void 0 ? void 0 : items.length) {
-    showSlidesMedia({ items, isTagging: false, isReadonly: true, canAnnotate: false, currentSlideIndex: imgSrcs.indexOf(currentImageSrc) });
+    showSlidesMedia(host, { items, isTagging: false, isReadonly: true, canAnnotate: false, currentSlideIndex: imgSrcs.indexOf(currentImageSrc) });
   }
 }
-export function showSlidesMedia(slideMediaParams, modalOptions) {
+export function showSlidesMedia(host, slideMediaParams, modalOptions) {
   const { enterAnimation, leaveAnimation } = modalOptions || {};
   const modalClass = (modalOptions === null || modalOptions === void 0 ? void 0 : modalOptions.cssClass) ? (Array.isArray(modalOptions.cssClass) ? modalOptions.cssClass.join(' ') : modalOptions.cssClass) : '';
   let slidesMedia = document.createElement('yoo-slides-media');
   slideMediaParams && Object.entries(slideMediaParams).forEach(([prop, value]) => (slidesMedia[prop] = value));
-  return showModal(slidesMedia, null, modalClass.concat(' hidden-overflow'), enterAnimation || getDefaultModalAnimation()[0], leaveAnimation || getDefaultModalAnimation()[1], true, null, null, null, null, null, null, null, isWeb()).then((res) => {
+  return showModal(slidesMedia, null, modalClass.concat(' hidden-overflow'), enterAnimation || getDefaultModalAnimation(host)[0], leaveAnimation || getDefaultModalAnimation(host)[1], true, null, null, null, null, null, null, null, isWeb()).then((res) => {
     slidesMedia = null;
     return res === null || res === void 0 ? void 0 : res.data;
   });

package/dist/design-system/{button.factory-ee287fe8.js → button.factory-8372bcb4.js}

@@ -1,6 +1,6 @@
-import './index-ffa651b0.js';
+import './index-a61fa6a9.js';
 import { h } from './index-becca019.js';
-import { Z as translateMulti } from './overlays-ccc6076c.js';
+import { Z as translateMulti } from './overlays-d9ef0a1c.js';
 
 const getButton = (button) => {
   return !button.isVisible || button.isVisible() ? (h("yoo-button", { class: button.cssClass, color: button.color || 'light', type: button.type || 'button', size: button.size || 'medium', shape: button.shape || 'rectangular', fill: button.fill || 'solid', rippleType: button.rippleType || 'bounded', disabled: button.disabled === null ? false : button.disabled, animated: button.animated === null ? true : button.animated, onClick: button.handler },

package/dist/design-system/{camera-helpers-3f566403.js → camera-helpers-3ecb08a1.js}

@@ -1,5 +1,5 @@
-import { cn as cordova, co as AwesomeCordovaNativePlugin, cp as cordovaPropertyGet, cq as cordovaPropertySet, cr as registerPlugin, a3 as getSession, cs as isIonic, j as isNativeMobile, ct as Device, k as isAndroid, H as isIOS, cu as getMediaDevices, z as showModal, y as getModalAnimation, A as isWeb } from './overlays-ccc6076c.js';
-import './index-4bc6078a.js';
+import { co as cordova, cp as AwesomeCordovaNativePlugin, cq as cordovaPropertyGet, cr as cordovaPropertySet, cs as registerPlugin, a3 as getSession, ct as isIonic, j as isNativeMobile, cu as Device, k as isAndroid, H as isIOS, cv as getMediaDevices, z as showModal, y as getModalAnimation, A as isWeb } from './overlays-d9ef0a1c.js';
+import './index-abd62f7b.js';
 
 var __extends$2 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -243,7 +243,7 @@ var CameraResultType;
 })(CameraResultType || (CameraResultType = {}));
 
 const Camera = registerPlugin('Camera', {
-    web: () => import('./web-8e517222.js').then(m => new m.CameraWeb()),
+    web: () => import('./web-45ede75c.js').then(m => new m.CameraWeb()),
 });
 
 var MediaPictureOptions;
@@ -347,9 +347,9 @@ async function getVideoDevices() {
     }));
   }
 }
-function showAudioRecorder() {
+function showAudioRecorder(host) {
   const audioRecorderDialog = document.createElement('yoo-audio-recorder-dialog');
-  return showModal(audioRecorderDialog, { height: 'medium' }, '', getModalAnimation('Enter', 'Y'), getModalAnimation('Leave', 'Y'), isWeb());
+  return showModal(audioRecorderDialog, { height: 'medium' }, '', getModalAnimation('Enter', 'Y', { host }), getModalAnimation('Leave', 'Y', { host }), isWeb());
 }
 
 export { CameraSource as C, MediaType as M, PictureSourceType as P, getVideoDevices as a, getVideo as b, MediaCapture as c, getPictureMaxSize as d, CameraDirection as e, getPicture as g, importMultipleFromLibrary as i, showAudioRecorder as s };

package/dist/design-system/{chat-helpers-a64386f1.js → chat-helpers-16b20973.js}

@@ -1,6 +1,6 @@
-import './index-4bc6078a.js';
+import './index-abd62f7b.js';
 import { i as isArray } from './lodash-f6e59a8e.js';
-import { am as is24Hour, an as isFile, z as showModal, A as isWeb, ao as replaceAtTagToMentionTag, ap as replaceAllLinks, Z as translateMulti } from './overlays-ccc6076c.js';
+import { am as is24Hour, an as isFile, ao as replaceAtTagToMentionTag, ap as replaceAllLinks, Z as translateMulti } from './overlays-d9ef0a1c.js';
 
 /**
  * Get the proper data format for a single message aswell as grouped messages
@@ -54,14 +54,6 @@ function parseMediaMessageForSlidesMedia(mediaMessages) {
     };
   });
 }
-function showMessageInfoDialog(message, allUsers, isMultiple, receivedByOthers) {
-  const dialog = document.createElement('yoo-chat-message-dialog');
-  dialog.message = message;
-  dialog.allUsers = allUsers;
-  dialog.isMultiple = isMultiple;
-  dialog.receivedByOthers = receivedByOthers;
-  showModal(dialog, null, null, isWeb() ? 'fadeEnterAnimation' : 'slideXEnterReverseAnimation', isWeb() ? 'fadeLeaveAnimation' : 'slideXLeaveReverseAnimation', true);
-}
 /**
  * Convert a text into HTMLElement where yoo-mention-tags and <br> is parsed as component
  */