@yoobic/yobi 8.5.0-45 → 8.5.0-47

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

@@ -257,39 +257,39 @@ svg:not(:root) {
 }
 
 @media screen and (max-height: 649px) {
-  .outer-login-container:not(.emulated).keyboard-closed .content-container {
+  .outer-login-container:not(.emulate-preview).keyboard-closed .content-container {
     padding-top: 0;
   }
 }
 @media screen and (min-width: 750px) {
-  .outer-login-container:not(.emulated) {
+  .outer-login-container:not(.emulate-preview) {
     --header-footer-border-color: var(--stable-light, #f1f1f1);
   }
-  .outer-login-container:not(.emulated) .content-container {
+  .outer-login-container:not(.emulate-preview) .content-container {
     padding-top: var(--spacing-96, 6rem);
   }
-  .outer-login-container:not(.emulated):not([is-whitelabel]):not(.emulated) .content-container {
+  .outer-login-container:not(.emulate-preview):not([is-whitelabel]):not(.emulate-preview) .content-container {
     padding-top: 0;
   }
-  .outer-login-container:not(.emulated).keyboard-open {
+  .outer-login-container:not(.emulate-preview).keyboard-open {
     justify-content: flex-end;
     padding-bottom: 20%;
   }
 }
 @media screen and (min-width: 1000px) and (max-height: 500px) {
-  .outer-login-container:not(.emulated).keyboard-open {
+  .outer-login-container:not(.emulate-preview).keyboard-open {
     padding-bottom: var(--spacing-16, 1rem);
   }
 }
 @media screen and (min-width: 1000px) and (orientation: landscape) {
-  .outer-login-container.tablet.ios:not(.emulated).keyboard-transitioning .content-container, .outer-login-container.tablet.ios:not(.emulated).keyboard-open .content-container {
+  .outer-login-container.tablet.ios:not(.emulate-preview).keyboard-transitioning .content-container, .outer-login-container.tablet.ios:not(.emulate-preview).keyboard-open .content-container {
     transform: translateY(-20%);
   }
 }
-.outer-login-container.emulated:not([is-whitelabel]) .content-container {
+.outer-login-container.emulate-preview:not([is-whitelabel]) .content-container {
   padding-top: 9rem;
 }
-.outer-login-container.emulated[is-whitelabel] .content-container {
+.outer-login-container.emulate-preview[is-whitelabel] .content-container {
   padding-top: 8rem;
 }
 
@@ -335,7 +335,7 @@ svg:not(:root) {
 }
 
 @media screen and (min-width: 900px) {
-  .outer-login-container:not(.emulated) #divider {
+  .outer-login-container:not(.emulate-preview) #divider {
     margin: var(--spacing-32, 2rem) 0;
   }
 }
@@ -365,18 +365,18 @@ svg:not(:root) {
 }
 
 @media screen and (min-width: 900px) {
-  .outer-login-container:not(.emulated) footer {
+  .outer-login-container:not(.emulate-preview) footer {
     width: 41.5rem;
     margin: 0 calc((100% - 41.5rem) / 2);
     border-top: var(--border-width-01, 0.0625rem) solid var(--header-footer-border-color);
   }
-  .outer-login-container:not(.emulated) footer * {
+  .outer-login-container:not(.emulate-preview) footer * {
     margin: var(--spacing-24, 1.5rem) 0 var(--spacing-32, 2rem) 0;
     line-height: 1.125rem;
   }
 }
 @media screen and (max-height: 550px) {
-  .outer-login-container:not(.emulated) footer {
+  .outer-login-container:not(.emulate-preview) footer {
     display: none;
   }
 }
@@ -465,47 +465,47 @@ svg:not(:root) {
 }
 
 @media screen and (min-width: 750px) {
-  .outer-login-container:not(.emulated) .header img {
+  .outer-login-container:not(.emulate-preview) .header img {
     height: var(--logo-06, 4rem);
     max-height: var(--logo-06, 4rem);
   }
-  .outer-login-container:not(.emulated)[logo-shape=square] .header img {
+  .outer-login-container:not(.emulate-preview)[logo-shape=square] .header img {
     height: var(--logo-08, 6rem);
     max-height: var(--logo-08, 6rem);
   }
 }
 @media screen and (min-width: 1000px) {
-  .outer-login-container:not(.emulated) .header img {
+  .outer-login-container:not(.emulate-preview) .header img {
     height: var(--logo-06, 4rem);
     max-height: var(--logo-06, 4rem);
   }
-  .outer-login-container:not(.emulated) .header {
+  .outer-login-container:not(.emulate-preview) .header {
     width: 41.5rem;
     margin: 0 calc((100% - 41.5rem) / 2);
     border-bottom: var(--border-width-01, 0.0625rem) solid var(--header-footer-border-color);
   }
-  .outer-login-container:not(.emulated) .header img {
+  .outer-login-container:not(.emulate-preview) .header img {
     margin: var(--spacing-32, 2rem) 0;
   }
-  .outer-login-container:not(.emulated) .header .login-main-title {
+  .outer-login-container:not(.emulate-preview) .header .login-main-title {
     display: none;
   }
-  .outer-login-container:not(.emulated) #error-alert:not(.mobile) {
+  .outer-login-container:not(.emulate-preview) #error-alert:not(.mobile) {
     top: 7.5rem;
     width: 41.5rem;
     margin: 0 calc((100% - 41.5rem) / 2);
   }
-  .outer-login-container:not(.emulated)[is-whitelabel] #error-alert:not(.mobile) {
+  .outer-login-container:not(.emulate-preview)[is-whitelabel] #error-alert:not(.mobile) {
     top: 9rem;
   }
-  .outer-login-container:not(.emulated)[logo-shape=square] .header img {
+  .outer-login-container:not(.emulate-preview)[logo-shape=square] .header img {
     height: var(--logo-08, 6rem);
     max-height: var(--logo-08, 6rem);
   }
-  .outer-login-container:not(.emulated)[logo-shape=square] #error-alert:not(.mobile) {
+  .outer-login-container:not(.emulate-preview)[logo-shape=square] #error-alert:not(.mobile) {
     top: 11rem;
   }
-  .outer-login-container:not(.emulated).tablet #error-alert {
+  .outer-login-container:not(.emulate-preview).tablet #error-alert {
     position: absolute;
     top: 0;
     z-index: 10;
@@ -514,74 +514,74 @@ svg:not(:root) {
   }
 }
 @media screen and (max-width: 750px) {
-  .outer-login-container[is-whitelabel]:not(.emulated) .header img {
+  .outer-login-container[is-whitelabel]:not(.emulate-preview) .header img {
     height: var(--logo-06, 4rem);
     max-height: var(--logo-06, 4rem);
   }
-  .outer-login-container[is-whitelabel]:not(.emulated) header .login-main-title {
+  .outer-login-container[is-whitelabel]:not(.emulate-preview) header .login-main-title {
     display: none;
   }
-  .outer-login-container[is-whitelabel]:not(.emulated) header img {
+  .outer-login-container[is-whitelabel]:not(.emulate-preview) header img {
     max-width: 90%;
     margin-top: var(--spacing-48, 3rem);
   }
-  .outer-login-container[is-whitelabel]:not(.emulated)[logo-shape=square] .header img {
+  .outer-login-container[is-whitelabel]:not(.emulate-preview)[logo-shape=square] .header img {
     height: var(--logo-08, 6rem);
     max-height: var(--logo-08, 6rem);
   }
-  .outer-login-container[is-whitelabel]:not(.emulated)[logo-shape=square] .header img {
+  .outer-login-container[is-whitelabel]:not(.emulate-preview)[logo-shape=square] .header img {
     margin-top: var(--spacing-64, 4rem);
   }
 }
-.outer-login-container[is-whitelabel].emulated .header img {
+.outer-login-container[is-whitelabel].emulate-preview .header img {
   height: var(--logo-06, 4rem);
   max-height: var(--logo-06, 4rem);
 }
-.outer-login-container[is-whitelabel].emulated header .login-main-title {
+.outer-login-container[is-whitelabel].emulate-preview header .login-main-title {
   display: none;
 }
-.outer-login-container[is-whitelabel].emulated header img {
+.outer-login-container[is-whitelabel].emulate-preview header img {
   max-width: 90%;
   margin-top: var(--spacing-48, 3rem);
 }
-.outer-login-container[is-whitelabel].emulated[logo-shape=square] .header img {
+.outer-login-container[is-whitelabel].emulate-preview[logo-shape=square] .header img {
   height: var(--logo-08, 6rem);
   max-height: var(--logo-08, 6rem);
 }
-.outer-login-container[is-whitelabel].emulated[logo-shape=square] .header img {
+.outer-login-container[is-whitelabel].emulate-preview[logo-shape=square] .header img {
   margin-top: var(--spacing-64, 4rem);
 }
-.outer-login-container[is-whitelabel].emulated:not(.hide-advanced-login):not(.hide-google-login)[logo-shape=square] .header img {
+.outer-login-container[is-whitelabel].emulate-preview:not(.hide-advanced-login):not(.hide-google-login)[logo-shape=square] .header img {
   height: var(--logo-08, 6rem);
   max-height: var(--logo-08, 6rem);
 }
-.outer-login-container[is-whitelabel].emulated:not(.hide-advanced-login):not(.hide-google-login)[logo-shape=square] .header img {
+.outer-login-container[is-whitelabel].emulate-preview:not(.hide-advanced-login):not(.hide-google-login)[logo-shape=square] .header img {
   margin-top: var(--spacing-48, 3rem);
 }
 
-.outer-login-container:not([is-whitelabel]).emulated:not(.hide-advanced-login):not(.hide-google-login) .header img {
+.outer-login-container:not([is-whitelabel]).emulate-preview:not(.hide-advanced-login):not(.hide-google-login) .header img {
   margin-top: var(--spacing-24, 1.5rem);
 }
 
 @media screen and (min-width: 900px) and (max-width: 1300px) {
-  .outer-login-container:not(.emulated) .header {
+  .outer-login-container:not(.emulate-preview) .header {
     margin-bottom: var(--spacing-32, 2rem);
   }
-  .outer-login-container:not(.emulated) .header img {
+  .outer-login-container:not(.emulate-preview) .header img {
     margin: var(--spacing-16, 1rem) 0;
   }
-  .outer-login-container:not(.emulated) #error-alert {
+  .outer-login-container:not(.emulate-preview) #error-alert {
     top: 6.5rem;
     width: 41.5rem;
     margin: 0 calc((100% - 41.5rem) / 2);
   }
-  .outer-login-container:not(.emulated)[is-whitelabel] #error-alert {
+  .outer-login-container:not(.emulate-preview)[is-whitelabel] #error-alert {
     top: 7rem;
   }
-  .outer-login-container:not(.emulated)[logo-shape=square] #error-alert {
+  .outer-login-container:not(.emulate-preview)[logo-shape=square] #error-alert {
     top: 9rem;
   }
-  .outer-login-container:not(.emulated).tablet #error-alert {
+  .outer-login-container:not(.emulate-preview).tablet #error-alert {
     position: absolute;
     top: 0;
     z-index: 10;
@@ -590,69 +590,69 @@ svg:not(:root) {
   }
 }
 @media screen and (max-height: 799px) {
-  .outer-login-container.keyboard-closed:not(.emulated) .header img {
+  .outer-login-container.keyboard-closed:not(.emulate-preview) .header img {
     margin-top: var(--spacing-32, 2rem);
   }
-  .outer-login-container.keyboard-closed:not(.emulated)[logo-shape=square] .header img {
+  .outer-login-container.keyboard-closed:not(.emulate-preview)[logo-shape=square] .header img {
     margin-top: var(--spacing-48, 3rem);
   }
 }
 @media screen and (max-height: 749px) {
-  .outer-login-container.keyboard-closed:not(.emulated) .header img {
+  .outer-login-container.keyboard-closed:not(.emulate-preview) .header img {
     margin-top: var(--spacing-16, 1rem);
   }
-  .outer-login-container.keyboard-closed:not(.emulated)[logo-shape=square] .header img {
+  .outer-login-container.keyboard-closed:not(.emulate-preview)[logo-shape=square] .header img {
     margin-top: var(--spacing-32, 2rem);
   }
-  .outer-login-container.keyboard-closed:not(.emulated) #error-alert:not(.mobile):not(.tablet) {
+  .outer-login-container.keyboard-closed:not(.emulate-preview) #error-alert:not(.mobile):not(.tablet) {
     top: 6rem;
   }
 }
 @media screen and (max-height: 699px) {
-  .outer-login-container.keyboard-closed:not(.emulated) .header img {
+  .outer-login-container.keyboard-closed:not(.emulate-preview) .header img {
     margin-top: var(--spacing-08, 0.5rem);
     margin-bottom: var(--spacing-08, 0.5rem);
   }
-  .outer-login-container.keyboard-closed:not(.emulated)[logo-shape=square] .header img {
+  .outer-login-container.keyboard-closed:not(.emulate-preview)[logo-shape=square] .header img {
     margin-top: 0;
     margin-bottom: 0;
   }
-  .outer-login-container.keyboard-closed:not(.emulated) #error-alert:not(.mobile):not(.tablet) {
+  .outer-login-container.keyboard-closed:not(.emulate-preview) #error-alert:not(.mobile):not(.tablet) {
     top: 4.5rem;
   }
 }
 @media screen and (max-height: 649px) {
-  .outer-login-container.keyboard-closed:not(.emulated) .header .login-main-title {
+  .outer-login-container.keyboard-closed:not(.emulate-preview) .header .login-main-title {
     display: none;
   }
-  .outer-login-container.keyboard-closed:not(.emulated)[logo-shape=square] .header img {
+  .outer-login-container.keyboard-closed:not(.emulate-preview)[logo-shape=square] .header img {
     display: none;
   }
-  .outer-login-container.keyboard-closed:not(.emulated) #error-alert:not(.mobile):not(.tablet) {
+  .outer-login-container.keyboard-closed:not(.emulate-preview) #error-alert:not(.mobile):not(.tablet) {
     top: 3rem;
   }
 }
 @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 {
+  .outer-login-container.keyboard-closed:not(.emulate-preview) .header .login-main-title,
+.outer-login-container.keyboard-closed:not(.emulate-preview) .header img {
     display: none;
   }
 
-  .outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) #error-alert:not(.mobile):not(.tablet) {
+  .outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulate-preview) #error-alert:not(.mobile):not(.tablet) {
     top: 0.5rem;
   }
 }
 @media screen and (max-height: 500px) {
-  .outer-login-container.keyboard-open:not(.emulated) .header {
+  .outer-login-container.keyboard-open:not(.emulate-preview) .header {
     transform: scale(80%) translateY(-10%);
   }
-  .outer-login-container.keyboard-open:not(.emulated) .header img {
+  .outer-login-container.keyboard-open:not(.emulate-preview) .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 {
+  .outer-login-container.keyboard-open:not(.emulate-preview) .header .login-main-title,
+.outer-login-container.keyboard-open:not(.emulate-preview) .header img {
     display: none;
   }
 }
@@ -667,7 +667,7 @@ svg:not(:root) {
   margin-bottom: var(--spacing-24, 1.5rem);
 }
 
-.outer-login-container.emulated #error-alert {
+.outer-login-container.emulate-preview #error-alert {
   padding-top: var(--safe-area-inset-top);
 }
 
@@ -703,13 +703,13 @@ svg:not(:root) {
   height: 1.5rem;
   margin: calc(var(--spacing-08, 0.5rem) * -1) 0 0 0;
 }
-.outer-login-container .help-buttons.mobile, .outer-login-container .help-buttons.emulated {
+.outer-login-container .help-buttons.mobile, .outer-login-container .help-buttons.emulate-preview {
   justify-content: flex-end;
 }
-.outer-login-container .help-buttons:not(.mobile):not(.emulated) yoo-button#help-button {
+.outer-login-container .help-buttons:not(.mobile):not(.emulate-preview) yoo-button#help-button {
   margin: calc(var(--spacing-04, 0.25rem) * -1) calc(var(--spacing-08, 0.5rem) * -1) 0 0;
 }
-.outer-login-container .help-buttons:not(.mobile):not(.emulated) yoo-button#magic-button {
+.outer-login-container .help-buttons:not(.mobile):not(.emulate-preview) yoo-button#magic-button {
   margin: calc(var(--spacing-04, 0.25rem) * -1) 0 0 calc(var(--spacing-08, 0.5rem) * -1);
 }
 .outer-login-container #default-login-button {
@@ -737,7 +737,7 @@ svg:not(:root) {
   font-size: var(--font-size-14, 0.875rem);
 }
 .outer-login-container #default-login-button.medium.mobile,
-.outer-login-container #default-login-button.medium.emulated {
+.outer-login-container #default-login-button.medium.emulate-preview {
   font-size: var(--font-size-16, 1rem);
 }
 .outer-login-container #default-login-button.large {
@@ -811,26 +811,26 @@ svg:not(:root) {
   }
 }
 @media screen and (min-width: 900px) {
-  .outer-login-container:not(.emulated) .login-options .google-logo {
+  .outer-login-container:not(.emulate-preview) .login-options .google-logo {
     height: 1rem;
   }
 }
-.outer-login-container.emulated .login-options.hide-google-login:not(.hide-advanced-login) #google-login-button {
+.outer-login-container.emulate-preview .login-options.hide-google-login:not(.hide-advanced-login) #google-login-button {
   display: none;
 }
-.outer-login-container.emulated .login-options.hide-google-login:not(.hide-advanced-login) #sso-login-button {
+.outer-login-container.emulate-preview .login-options.hide-google-login:not(.hide-advanced-login) #sso-login-button {
   transform: translateY(0);
 }
-.outer-login-container.emulated .login-options.hide-advanced-login:not(.hide-google-login) #sso-login-button {
+.outer-login-container.emulate-preview .login-options.hide-advanced-login:not(.hide-google-login) #sso-login-button {
   display: none;
 }
-.outer-login-container.emulated .login-options.hide-advanced-login:not(.hide-google-login) #google-login-button {
+.outer-login-container.emulate-preview .login-options.hide-advanced-login:not(.hide-google-login) #google-login-button {
   transform: translateY(0);
 }
-.outer-login-container.emulated .login-options.hide-advanced-login.hide-google-login #sso-login-button {
+.outer-login-container.emulate-preview .login-options.hide-advanced-login.hide-google-login #sso-login-button {
   display: none;
 }
-.outer-login-container.emulated .login-options.hide-advanced-login.hide-google-login #google-login-button {
+.outer-login-container.emulate-preview .login-options.hide-advanced-login.hide-google-login #google-login-button {
   transform: translateY(0);
 }
 
@@ -847,12 +847,12 @@ svg:not(:root) {
 }
 
 @media screen and (min-width: 900px) {
-  .outer-login-container:not(.emulated) .main-content {
+  .outer-login-container:not(.emulate-preview) .main-content {
     display: flex;
     flex-direction: column;
     width: 18.75rem;
   }
-  .outer-login-container:not(.emulated) .main-content yoo-form-input-container {
+  .outer-login-container:not(.emulate-preview) .main-content yoo-form-input-container {
     font-size: var(--font-size-12, 0.75rem);
   }
 }
@@ -865,28 +865,33 @@ svg:not(:root) {
     transform: scale(1.2) translateX(10%);
   }
 }
-.outer-login-container.emulated:not([is-whitelabel]) .main-content .login-sub-title {
+.outer-login-container.emulate-preview:not([is-whitelabel]) .main-content .login-sub-title {
   display: none;
 }
-.outer-login-container.emulated.focused .login-sub-title {
+.outer-login-container.emulate-preview.focused .login-sub-title {
   transform: scale(1.2) translateX(10%);
 }
 
 .outer-login-container .sidepanel {
   margin-right: var(--spacing-64, 4rem);
+  margin-left: 0;
 }
 .outer-login-container .sidepanel .login-main-title {
   margin-top: 0;
   margin-bottom: var(--spacing-24, 1.5rem);
 }
+.outer-login-container.rtl .sidepanel {
+  margin-right: 0;
+  margin-left: var(--spacing-64, 4rem);
+}
 
 @media screen and (min-width: 1000px) {
-  .outer-login-container:not(.emulated) .sidepanel {
+  .outer-login-container:not(.emulate-preview) .sidepanel {
     display: flex;
     flex-direction: column;
     width: 18.75rem;
   }
-  .outer-login-container:not(.emulated) .sidepanel yoo-form-input-container {
+  .outer-login-container:not(.emulate-preview) .sidepanel yoo-form-input-container {
     font-size: var(--font-size-12, 0.75rem);
   }
 }
@@ -895,7 +900,7 @@ svg:not(:root) {
     display: none;
   }
 }
-.outer-login-container.emulated .sidepanel {
+.outer-login-container.emulate-preview .sidepanel {
   display: none;
 }
 

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

@@ -1,6 +1,7 @@
 import { ScreenOrientation } from '@awesome-cordova-plugins/screen-orientation';
-import { addKeyboardEventListener, disableKeyboardResize, isAndroid, isChrome, isFullScreenFalse, isIonic, isIOS, isNativeMobile, isTabletOrIpad, isWeb, removeKeyboardEventListeners, setStatusBarDarkMode, showActionSheet, translate } from '@shared/utils';
+import { addKeyboardEventListener, disableKeyboardResize, isAndroid, isChrome, isIonic, isNativeMobile, isWeb, removeKeyboardEventListeners, setStatusBarDarkMode, showActionSheet, translate } from '@shared/utils';
 import { forceUpdate, h, Host } from '@stencil/core';
+import { getAppContext } from '../../../utils/helpers/common-helpers';
 import googleLogo from './assets/login/google_color.svg';
 import { Background, Footer, Header, LoginForm, LoginOptions, MainContent, Sidepanel } from './parts';
 export class YooLoginComponent {
@@ -232,10 +233,7 @@ export class YooLoginComponent {
         'outer-login-container': true,
         focused: this.isFocused,
         [`keyboard-${this.keyboardState}`]: true,
-        emulated: isFullScreenFalse(),
-        web: isWeb(),
-        ios: isIOS(),
-        tablet: isTabletOrIpad()
+        ...getAppContext(this.host)
       } }, h(Header, { error: this.error, logo: this.logo, title: this.mainTitle, textColor: this.primaryColor, closeClick: () => this.onAlertClosed() }), h(Background, { hasBackgroundMedia: this.hasBackgroundMedia, image: this.backgroundSrc }), h("div", { class: "content-container", ref: (el) => (this.contentContainerElement = el) }, h(Sidepanel, { title: this.mainTitle, textColor: this.primaryColor, image: this.sidepanelImage }), h(MainContent, { subtitle: this.subtitle, textColor: this.primaryColor }, h(LoginForm, { buttonColor: this.textColor, ssoOnly: this.ssoOnly, fieldTitleColor: this.primaryColor, getInputLabel: this.getInputLabel.bind(this), getDefaultInputValue: this.getDefaultInputValue.bind(this), getInputValue: this.getInputValue.bind(this), focusedInput: this.focusedInput, bindReference: this.bindReference.bind(this), onIconClicked: this.onIconClicked.bind(this), onInputChanged: this.onInputChanged.bind(this), onInputFocused: this.onInputFocused.bind(this), onInputBlurred: () => this.onInputBlurred(), onEnterPressed: () => this.validateAndLogin(), onFormSubmit: (e) => this.onFormSubmit(e), onShowPassword: this.onShowPassword.bind(this), showPassword: this.showPassword, loginButtonRef: (el) => (this.loginButtonElement = el), helpButtonElement: this.getButton('HELP', () => this.onForgotPassword()), magicButtonElement: this.getButton('MAGIC', () => this.magicLinkModalRequested.emit(true)), ssoLoginButtonElement: this.getButton('SSO-DEFAULT', () => this.onAdvancedLogin()), clearInput: this.clearInput.bind(this), isWhitelabel: this.isWhitelabel }), h(LoginOptions, { ssoOnly: this.ssoOnly, hideGoogleLogin: this.hideGoogleLogin, hideAdvancedLogin: this.hideAdvancedLogin, hasCustomBackground: this.hasCustomBackground, dividerColor: this.primaryColor, googleLoginButtonElement: this.getButton('GOOGLE', () => this.onGoogleLogin()), ssoLoginButtonElement: this.getButton('SSO', () => this.onAdvancedLogin()) }))), h(Footer, { hasCustomBackground: this.hasCustomBackground, copyrightMessage: this.copyrightMessage, textColor: this.primaryColor, version: this.version, onClick: () => {
         if (this.ssoOnly) {
           this.ssoOnly = false;

package/dist/collection/feature-platform/menu/side-menu/side-menu.css

@@ -492,4 +492,9 @@ svg:not(:root) {
 :host(.no-margin) .top-container {
   margin-top: 0;
   margin-bottom: 0;
+}
+
+:host(.rtl) {
+  border-right-width: 0;
+  border-left: var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);
 }

package/dist/collection/feature-platform/menu/side-menu/side-menu.js

@@ -6,6 +6,7 @@
 import { dispatchCustomEvent, getSession, isWeb, translate } from '@shared/utils';
 import { forceUpdate, h, Host } from '@stencil/core';
 import { isNumber } from 'lodash-es';
+import { getAppContext } from '../../../utils/helpers/common-helpers';
 export class YooSideMenuComponent {
   constructor() {
     /**
@@ -127,7 +128,11 @@ export class YooSideMenuComponent {
         entries[this.selectedIndex].selected = true;
       }
       const isCustomTheme = getSession().isCustomTheme;
-      return (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) => {
+      return (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;
           }
@@ -194,7 +199,7 @@ export class YooSideMenuComponent {
   }
   render() {
     const isCustomTheme = getSession().isCustomTheme;
-    return (h(Host, { class: { collapsed: this.isMenuCollapsed, 'custom-theme': isCustomTheme } }, h("yoo-ion-scroll", { class: "scrolling-container no-scrollbar" }, this.renderTopContainer(), h("slot", { name: "bottom" })), this.renderBottomContainer()));
+    return (h(Host, { class: { collapsed: this.isMenuCollapsed, 'custom-theme': isCustomTheme, ...getAppContext(this.host) } }, h("yoo-ion-scroll", { class: "scrolling-container no-scrollbar" }, this.renderTopContainer(), h("slot", { name: "bottom" })), this.renderBottomContainer()));
   }
   static get is() { return "yoo-side-menu"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/feature-platform/menu/user-profile/user-profile.css

@@ -309,4 +309,22 @@ svg:not(:root) {
   padding-top: var(--spacing-16, 1rem);
   font-size: var(--font-size-12, 0.75rem);
   text-transform: uppercase;
+}
+
+:host(.rtl) .profile-content.advanced .profile-links {
+  padding-right: var(--spacing-16, 1rem);
+  padding-left: 0;
+}
+:host(.rtl) .profile-content.advanced .profile-links .profile-links-menu .profile-links-menu-item {
+  justify-content: right;
+  margin-right: 0;
+  margin-left: var(--spacing-16, 1rem);
+}
+:host(.rtl) .profile-content.advanced .profile-links .profile-links-menu .multiple-items-margin {
+  margin-right: 0;
+  margin-left: var(--spacing-16, 1rem);
+}
+:host(.rtl) .profile-content.advanced .profile-links .profile-links-menu yoo-avatar {
+  margin-right: 0;
+  margin-left: var(--spacing-08, 0.5rem);
 }

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

@@ -1,5 +1,5 @@
 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 { animations, cleanupWKWebViewFilePath, Cloudinary, CloudinaryGradientLayer, dateDiffInCalendarDays, debounce, findDevice, findParent, getAsyncExtraData, getCssColor, getModalAnimation, getProtocol, isAndroid, isDateAfter, isDateBefore, isFullScreenFalse, isIOS, isIpadPro, isIphoneX, isNativeFilePath, isNativeMobile, isRTL, isTablet, isWeb, querySelectorDeep as _querySelectorDeep, setAnimation, showModal, startOf, translate, YOOBICON_ENTITIES_MAP } from '@shared/utils';
 import { get } from 'lodash-es';
 function getDefaultModalAnimation(host) {
   return ['Enter', 'Leave'].map((v) => getModalAnimation(v, 'X', { host, reversedSlide: true }));
@@ -104,7 +104,7 @@ export function getAppContext(host) {
       mobile: true
     };
   }
-  if ((document === null || document === void 0 ? void 0 : document.dir) === 'rtl') {
+  if (isRTL()) {
     classes['rtl'] = true;
   }
   if (isIphoneX()) {

package/dist/design-system/{button.factory-eb60a001.js → button.factory-8fdc4aca.js}

@@ -1,6 +1,6 @@
-import './index-b817ec62.js';
+import './index-d179d6eb.js';
 import { h } from './index-0a59e2a1.js';
-import { a2 as translateMulti } from './overlays-fc8b6c29.js';
+import { a3 as translateMulti } from './overlays-0cc9a656.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/{esm/camera-helpers-2c0e1970.js → design-system/camera-helpers-3e2eccbc.js}

@@ -1,5 +1,5 @@
-import { cv as cordova, cw as AwesomeCordovaNativePlugin, cx as cordovaPropertyGet, cy as cordovaPropertySet, cz as registerPlugin, a7 as getSession, cA as isIonic, o as isNativeMobile, cB as Device, p as isAndroid, M as isIOS, cC as getMediaDevices, G as showModal, F as getModalAnimation, H as isWeb } from './overlays-fc8b6c29.js';
-import './index-1daea473.js';
+import { cw as cordova, cx as AwesomeCordovaNativePlugin, cy as cordovaPropertyGet, cz as cordovaPropertySet, cA as registerPlugin, a8 as getSession, cB as isIonic, o as isNativeMobile, cC as Device, p as isAndroid, N as isIOS, cD as getMediaDevices, G as showModal, F as getModalAnimation, H as isWeb } from './overlays-0cc9a656.js';
+import './index-d375d097.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-a1807e99.js').then(m => new m.CameraWeb()),
+    web: () => import('./web-119f1325.js').then(m => new m.CameraWeb()),
 });
 
 var MediaPictureOptions;

package/dist/design-system/{chat-helpers-96049a66.js → chat-helpers-27e645c3.js}

@@ -1,6 +1,6 @@
-import './index-1daea473.js';
+import './index-d375d097.js';
 import { i as isArray } from './lodash-777f91de.js';
-import { ap as is24Hour, aq as isFile, ar as replaceAtTagToMentionTag, as as replaceAllLinks, a2 as translateMulti } from './overlays-fc8b6c29.js';
+import { aq as is24Hour, ar as isFile, as as replaceAtTagToMentionTag, at as replaceAllLinks, a3 as translateMulti } from './overlays-0cc9a656.js';
 
 /**
  * Get the proper data format for a single message aswell as grouped messages

package/dist/{esm/common-helpers-61e87a96.js → design-system/common-helpers-c2933562.js}

@@ -1,5 +1,5 @@
-import { F as getModalAnimation, t as translate, G as showModal, H as isWeb, I as debounce, J as querySelectorDeep$1, o as isNativeMobile, S as ScreenOrientation, K as findDevice, L as isIphoneX, q as isIpadPro, s as isTablet, n as isFullScreenFalse, M as isIOS, p as isAndroid, N as setAnimation, O as animations, P as getCssColor, Y as YOOBICON_ENTITIES_MAP, Q as startOf, R as isDateBefore, T as dateDiffInCalendarDays, U as isDateAfter, V as getAsyncExtraData, W as findParent, X as isNativeFilePath, Z as cleanupWKWebViewFilePath, $ as Cloudinary, a0 as getProtocol, a1 as CloudinaryGradientLayer } from './overlays-fc8b6c29.js';
-import './index-1daea473.js';
+import { F as getModalAnimation, t as translate, G as showModal, H as isWeb, I as debounce, J as querySelectorDeep$1, o as isNativeMobile, S as ScreenOrientation, K as findDevice, L as isRTL, M as isIphoneX, q as isIpadPro, s as isTablet, n as isFullScreenFalse, N as isIOS, p as isAndroid, O as setAnimation, P as animations, Q as getCssColor, Y as YOOBICON_ENTITIES_MAP, R as startOf, T as isDateBefore, U as dateDiffInCalendarDays, V as isDateAfter, W as getAsyncExtraData, X as findParent, Z as isNativeFilePath, $ as cleanupWKWebViewFilePath, a0 as Cloudinary, a1 as getProtocol, a2 as CloudinaryGradientLayer } from './overlays-0cc9a656.js';
+import './index-d375d097.js';
 import { C as get } from './lodash-777f91de.js';
 
 function getDefaultModalAnimation(host) {
@@ -105,7 +105,7 @@ function getAppContext(host) {
       mobile: true
     };
   }
-  if ((document === null || document === void 0 ? void 0 : document.dir) === 'rtl') {
+  if (isRTL()) {
     classes['rtl'] = true;
   }
   if (isIphoneX()) {