npm - @yoobic/yobi - Versions diffs - 8.3.0-8 → 8.3.1-0 - Mend

@yoobic/yobi 8.3.0-8 → 8.3.1-0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1617) hide show

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

@@ -209,7 +209,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   box-sizing: border-box;
   width: 100%;
   height: 100%;
-  padding-bottom: var(--spacing-16, 1rem);
 }
 .outer-login-container h1, .outer-login-container h3 {
   font-weight: 900;
@@ -232,7 +231,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   justify-content: center;
   box-sizing: border-box;
   width: 100%;
-  padding: 8rem var(--spacing-24, 1.5rem) 0;
+  padding: 7.5rem var(--spacing-24, 1.5rem) 0;
 }
 .outer-login-container.ios .content-container {
   position: absolute;
@@ -255,35 +254,42 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 @media screen and (max-height: 699px) {
-  .outer-login-container.keyboard-closed .content-container {
+  .outer-login-container:not(.emulated).keyboard-closed .content-container {
     padding-top: 0;
   }
 }
 @media screen and (min-width: 750px) {
-  .outer-login-container {
+  .outer-login-container:not(.emulated) {
     --header-footer-border-color: var(--stable-light, #f1f1f1);
   }
-  .outer-login-container .content-container {
+  .outer-login-container:not(.emulated) .content-container {
     padding-top: var(--spacing-96, 6rem);
   }
-  .outer-login-container:not([is-whitelabel]) .content-container {
+  .outer-login-container:not(.emulated):not([is-whitelabel]):not(.emulated) .content-container {
     padding-top: 0;
   }
-  .outer-login-container.keyboard-open {
+  .outer-login-container:not(.emulated).keyboard-open {
     justify-content: flex-end;
     padding-bottom: 20%;
   }
 }
 @media screen and (min-width: 1000px) and (max-height: 500px) {
-  .outer-login-container.keyboard-open {
+  .outer-login-container:not(.emulated).keyboard-open {
     padding-bottom: var(--spacing-16, 1rem);
   }
 }
 @media screen and (min-width: 1000px) and (orientation: landscape) {
-  .outer-login-container.tablet.ios.keyboard-transitioning .content-container, .outer-login-container.tablet.ios.keyboard-open .content-container {
+  .outer-login-container.tablet.ios:not(.emulated).keyboard-transitioning .content-container, .outer-login-container.tablet.ios:not(.emulated).keyboard-open .content-container {
     transform: translateY(-20%);
   }
 }
+.outer-login-container.emulated:not([is-whitelabel]) .content-container {
+  padding-top: 9rem;
+}
+.outer-login-container.emulated[is-whitelabel] .content-container {
+  padding-top: 8rem;
+}
 .outer-login-container .background-overlay {
   position: absolute;
   z-index: 1;
@@ -326,7 +332,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 @media screen and (min-width: 900px) {
-  .outer-login-container #divider {
+  .outer-login-container:not(.emulated) #divider {
     margin: var(--spacing-32, 2rem) 0;
   }
 }
@@ -356,18 +362,18 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 @media screen and (min-width: 900px) {
-  .outer-login-container footer {
+  .outer-login-container:not(.emulated) footer {
     width: 41.5rem;
     margin: 0 calc((100% - 41.5rem) / 2);
     border-top: var(--header-footer-border-color) 0.0675rem solid;
   }
-  .outer-login-container footer * {
+  .outer-login-container:not(.emulated) footer * {
     margin: var(--spacing-24, 1.5rem) 0 1.875rem 0;
     line-height: 1.125rem;
   }
 }
 @media screen and (max-height: 550px) {
-  .outer-login-container footer {
+  .outer-login-container:not(.emulated) footer {
     display: none;
   }
 }
@@ -410,7 +416,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   justify-content: space-between;
   margin: 1rem 0;
 }
-.outer-login-container #error-alert .error-content.web p:not(.link) {
+.outer-login-container #error-alert .error-content.web p {
   margin: 0 1rem 0 0;
   text-align: left;
 }
@@ -453,47 +459,47 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 @media screen and (min-width: 750px) {
-  .outer-login-container .header img {
+  .outer-login-container:not(.emulated) .header img {
     height: 4rem;
     max-height: 4rem;
   }
-  .outer-login-container[logo-shape=square] .header img {
+  .outer-login-container:not(.emulated)[logo-shape=square] .header img {
     height: 6rem;
     max-height: 6rem;
   }
 }
 @media screen and (min-width: 1000px) {
-  .outer-login-container .header img {
+  .outer-login-container:not(.emulated) .header img {
     height: 4rem;
     max-height: 4rem;
   }
-  .outer-login-container .header {
+  .outer-login-container:not(.emulated) .header {
     width: 41.5rem;
     margin: 0 calc((100% - 41.5rem) / 2);
     border-bottom: var(--header-footer-border-color) 0.0675rem solid;
   }
-  .outer-login-container .header img {
+  .outer-login-container:not(.emulated) .header img {
     margin: 2rem 0;
   }
-  .outer-login-container .header h1 {
+  .outer-login-container:not(.emulated) .header h1 {
     display: none;
   }
-  .outer-login-container #error-alert {
+  .outer-login-container:not(.emulated) #error-alert {
     top: 7.5rem;
     width: 41.5rem;
     margin: 0 calc((100% - 41.5rem) / 2);
   }
-  .outer-login-container[is-whitelabel] #error-alert {
+  .outer-login-container:not(.emulated)[is-whitelabel] #error-alert {
     top: 9rem;
   }
-  .outer-login-container[logo-shape=square] .header img {
+  .outer-login-container:not(.emulated)[logo-shape=square] .header img {
     height: 6rem;
     max-height: 6rem;
   }
-  .outer-login-container[logo-shape=square] #error-alert {
+  .outer-login-container:not(.emulated)[logo-shape=square] #error-alert {
     top: 11rem;
   }
-  .outer-login-container.tablet #error-alert {
+  .outer-login-container:not(.emulated).tablet #error-alert {
     position: absolute;
     top: 0;
     z-index: 10;
@@ -502,44 +508,74 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   }
 }
 @media screen and (max-width: 750px) {
-  .outer-login-container[is-whitelabel] .header img {
+  .outer-login-container[is-whitelabel]:not(.emulated) .header img {
     height: 4rem;
     max-height: 4rem;
   }
-  .outer-login-container[is-whitelabel] header h1 {
+  .outer-login-container[is-whitelabel]:not(.emulated) header h1 {
     display: none;
   }
-  .outer-login-container[is-whitelabel] header img {
+  .outer-login-container[is-whitelabel]:not(.emulated) header img {
     max-width: 90%;
     margin-top: var(--spacing-48, 3rem);
   }
-  .outer-login-container[is-whitelabel][logo-shape=square] .header img {
+  .outer-login-container[is-whitelabel]:not(.emulated)[logo-shape=square] .header img {
     height: 6rem;
     max-height: 6rem;
   }
-  .outer-login-container[is-whitelabel][logo-shape=square] .header img {
+  .outer-login-container[is-whitelabel]:not(.emulated)[logo-shape=square] .header img {
     margin-top: var(--spacing-64, 4rem);
   }
 }
+.outer-login-container[is-whitelabel].emulated .header img {
+  height: 4rem;
+  max-height: 4rem;
+}
+.outer-login-container[is-whitelabel].emulated header h1 {
+  display: none;
+}
+.outer-login-container[is-whitelabel].emulated header img {
+  max-width: 90%;
+  margin-top: var(--spacing-48, 3rem);
+}
+.outer-login-container[is-whitelabel].emulated[logo-shape=square] .header img {
+  height: 6rem;
+  max-height: 6rem;
+}
+.outer-login-container[is-whitelabel].emulated[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 {
+  height: 6rem;
+  max-height: 6rem;
+}
+.outer-login-container[is-whitelabel].emulated: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 {
+  margin-top: var(--spacing-24, 1.5rem);
+}
 @media screen and (min-width: 900px) and (max-width: 1300px) {
-  .outer-login-container .header {
+  .outer-login-container:not(.emulated) .header {
     margin-bottom: var(--spacing-32, 2rem);
   }
-  .outer-login-container .header img {
+  .outer-login-container:not(.emulated) .header img {
     margin: var(--spacing-16, 1rem) 0;
   }
-  .outer-login-container #error-alert {
+  .outer-login-container:not(.emulated) #error-alert {
     top: 6.5rem;
     width: 41.5rem;
     margin: 0 calc((100% - 41.5rem) / 2);
   }
-  .outer-login-container[is-whitelabel] #error-alert {
+  .outer-login-container:not(.emulated)[is-whitelabel] #error-alert {
     top: 7rem;
   }
-  .outer-login-container[logo-shape=square] #error-alert {
+  .outer-login-container:not(.emulated)[logo-shape=square] #error-alert {
     top: 9rem;
   }
-  .outer-login-container.tablet #error-alert {
+  .outer-login-container:not(.emulated).tablet #error-alert {
     position: absolute;
     top: 0;
     z-index: 10;
@@ -548,22 +584,23 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   }
 }
 @media screen and (max-height: 799px) {
-  .outer-login-container:not([is-whitelabel]).keyboard-closed .header img {
+  .outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) .header img {
     margin-top: var(--spacing-32, 2rem);
   }
 }
 @media screen and (max-height: 699px) {
-  .outer-login-container:not([is-whitelabel]).keyboard-closed .header h1 {
+  .outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) .header h1 {
     display: none;
   }
 }
 @media screen and (max-height: 665px) {
-  .outer-login-container.keyboard-closed .header {
+  .outer-login-container.keyboard-closed:not(.emulated) .header h1,
+.outer-login-container.keyboard-closed:not(.emulated) .header img {
     display: none;
   }
 }
 @media screen and (max-height: 500px) {
-  .outer-login-container.keyboard-open .header {
+  .outer-login-container.keyboard-open:not(.emulated) .header {
     display: none;
   }
 }
@@ -578,6 +615,10 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin-bottom: var(--spacing-24, 1.5rem);
 }
+.outer-login-container.emulated #error-alert {
+  padding-top: var(--spacing-24, 1.5rem);
+}
 .outer-login-container {
   --disabled-color: var(--stable-light, #f1f1f1);
   --hover-color: var(--stable-light, #f1f1f1);
@@ -595,12 +636,30 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 .outer-login-container .outer-input-container yoo-context-dialog {
   width: 100%;
 }
-.outer-login-container yoo-button#help-button {
-  align-self: flex-end;
+.outer-login-container .help-buttons {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+.outer-login-container .help-buttons yoo-button#help-button {
+  width: fit-content;
+  height: 1.5rem;
+  margin: -0.5rem 0 0 0;
+}
+.outer-login-container .help-buttons yoo-button#magic-button {
   width: fit-content;
   height: 1.5rem;
   margin: -0.5rem 0 0 0;
 }
+.outer-login-container .help-buttons.mobile, .outer-login-container .help-buttons.emulated {
+  justify-content: flex-end;
+}
+.outer-login-container .help-buttons:not(.mobile):not(.emulated) yoo-button#help-button {
+  margin: -0.25rem -0.5rem 0 0;
+}
+.outer-login-container .help-buttons:not(.mobile):not(.emulated) yoo-button#magic-button {
+  margin: -0.25rem 0 0 -0.5rem;
+}
 .outer-login-container #default-login-button {
   box-sizing: border-box;
   width: 100%;
@@ -615,13 +674,18 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   background-color: var(--disabled-color);
 }
 .outer-login-container #default-login-button:hover:not(.disabled) {
+  cursor: pointer;
   filter: brightness(90%);
 }
+.outer-login-container #default-login-button:hover.disabled {
+  cursor: not-allowed;
+}
 .outer-login-container #default-login-button.medium {
   height: 2rem;
   font-size: var(--font-size-14, 0.875rem);
 }
-.outer-login-container #default-login-button.medium.mobile {
+.outer-login-container #default-login-button.medium.mobile,
+.outer-login-container #default-login-button.medium.emulated {
   font-size: var(--font-size-16, 1rem);
 }
 .outer-login-container #default-login-button.large {
@@ -668,14 +732,22 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   visibility: hidden !important;
 }
-.login-options.hide-google-login:not(.hide-advanced-login) #google-login-button {
+.login-options.hide-google-login.mobile:not(.hide-advanced-login) #google-login-button {
   transform: translateY(4rem);
   visibility: hidden !important;
 }
-.login-options.hide-google-login:not(.hide-advanced-login) #sso-login-button {
+.login-options.hide-google-login.mobile:not(.hide-advanced-login) #sso-login-button {
   transform: translateY(-4rem);
 }
+.login-options.hide-google-login:not(.mobile):not(.hide-advanced-login) #google-login-button {
+  transform: translateY(3rem);
+  visibility: hidden !important;
+}
+.login-options.hide-google-login:not(.mobile):not(.hide-advanced-login) #sso-login-button {
+  transform: translateY(-3rem);
+}
 .login-options.hide-advanced-login.hide-google-login,
 .login-options.hide-advanced-login.hide-google-login * {
   visibility: hidden !important;
@@ -687,10 +759,29 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   }
 }
 @media screen and (min-width: 900px) {
-  .outer-login-container .login-options .google-logo {
+  .outer-login-container:not(.emulated) .login-options .google-logo {
     height: 1rem;
   }
 }
+.outer-login-container.emulated .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 {
+  transform: translateY(0);
+}
+.outer-login-container.emulated .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 {
+  transform: translateY(0);
+}
+.outer-login-container.emulated .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 {
+  transform: translateY(0);
+}
 .outer-login-container .main-content {
   display: flex;
   flex-direction: column;
@@ -704,12 +795,12 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 @media screen and (min-width: 900px) {
-  .outer-login-container .main-content {
+  .outer-login-container:not(.emulated) .main-content {
     display: flex;
     flex-direction: column;
     width: 18.75rem;
   }
-  .outer-login-container .main-content yoo-form-input-container {
+  .outer-login-container:not(.emulated) .main-content yoo-form-input-container {
     font-size: var(--font-size-12, 0.75rem);
   }
 }
@@ -722,6 +813,13 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
     transform: scale(1.2) translateX(10%);
   }
 }
+.outer-login-container.emulated:not([is-whitelabel]) .main-content h3 {
+  display: none;
+}
+.outer-login-container.emulated.focused h3 {
+  transform: scale(1.2) translateX(10%);
+}
 .outer-login-container .sidepanel {
   margin-right: var(--spacing-64, 4rem);
 }
@@ -730,12 +828,12 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 @media screen and (min-width: 1000px) {
-  .outer-login-container .sidepanel {
+  .outer-login-container:not(.emulated) .sidepanel {
     display: flex;
     flex-direction: column;
     width: 18.75rem;
   }
-  .outer-login-container .sidepanel yoo-form-input-container {
+  .outer-login-container:not(.emulated) .sidepanel yoo-form-input-container {
     font-size: var(--font-size-12, 0.75rem);
   }
 }
@@ -744,6 +842,10 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
     display: none;
   }
 }
+.outer-login-container.emulated .sidepanel {
+  display: none;
+}
 .outer-login-container:not([is-double-column]) .sidepanel {
   display: none;
 }
@@ -872,22 +974,22 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   caret-color: var(--caret-color);
 }
 .outer-input-container .inner-input-container input::-webkit-input-placeholder {
-  color: var(--text-color, #807f83);
+  color: var(--stable, #adadad);
   font-weight: var(--font-weight-400, 400);
   font-family: var(--font-family, "Lato") !important;
 }
 .outer-input-container .inner-input-container input:-moz-placeholder {
-  color: var(--text-color, #807f83);
+  color: var(--stable, #adadad);
   font-weight: var(--font-weight-400, 400);
   font-family: var(--font-family, "Lato") !important;
 }
 .outer-input-container .inner-input-container input::-moz-placeholder {
-  color: var(--text-color, #807f83);
+  color: var(--stable, #adadad);
   font-weight: var(--font-weight-400, 400);
   font-family: var(--font-family, "Lato") !important;
 }
 .outer-input-container .inner-input-container input:-ms-input-placeholder {
-  color: var(--text-color, #807f83);
+  color: var(--stable, #adadad);
   font-weight: var(--font-weight-400, 400);
   font-family: var(--font-family, "Lato") !important;
 }

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

@@ -1,25 +1,25 @@
-import { ScreenOrientation } from '@ionic-native/screen-orientation';
-import { addKeyboardEventListener, disableKeyboardResize, isAndroid, isIonic, isIOS, isNativeMobile, isTabletOrIpad, isWeb, removeKeyboardEventListeners, setStatusBarDarkMode, showActionSheet, translate } from '@shared/utils';
+import { ScreenOrientation } from '@awesome-cordova-plugins/screen-orientation';
+import { addKeyboardEventListener, disableKeyboardResize, isAndroid, isFullScreenFalse, isIonic, isIOS, isNativeMobile, isTabletOrIpad, isWeb, removeKeyboardEventListeners, setStatusBarDarkMode, showActionSheet, translate } from '@shared/utils';
 import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, State } from '@stencil/core';
 import googleLogo from './assets/login/google_color.svg';
 import { Background, Footer, Header, LoginForm, LoginOptions, MainContent, Sidepanel } from './parts';
 export class YooLoginComponent {
   constructor() {
-    //* COMPONENT TEXT
+    //* COMPONENT TEXT
     // Title Text
     this.mainTitle = '';
     // Subtitle Text
-    this.subtitle = 'LOGINSUBTITLE';
+    this.subtitle = 'YOOBICLOGINSUBTITLE';
     // Username label text
-    this.usernameLabel = 'USERNAME';
+    this.usernameLabel = 'YOOBICUSERNAME';
     // Password label text
-    this.passwordLabel = 'PASSWORD';
+    this.passwordLabel = 'YOOBICPASSWORD';
     // Help text like 'forgot password?'
-    this.helpText = 'FORGOTPASSWORD';
+    this.helpText = 'YOOBICFORGOTPASSWORD';
     // Reset password text (for action sheet button)
-    this.resetPasswordText = 'RESETPASSWORD';
+    this.resetPasswordText = 'YOOBICRESETPASSWORD';
     // Magic link text (for action sheet button)
-    this.magicLinkText = 'MAGICLINK';
+    this.magicLinkText = 'YOOBICMAGICLINK';
     // A color to override any app-color / dynamic coloring
     this.textColor = null;
     this.isFocused = false;
@@ -37,22 +37,16 @@ export class YooLoginComponent {
     return !!((_a = this.passwordInputElement) === null || _a === void 0 ? void 0 : _a.value);
   }
   get hasBackgroundMedia() {
-    return (this.backgroundSrc)
-      ? true
-      : false;
+    return this.backgroundSrc ? true : false;
   }
   get hasCustomBackground() {
-    return (this.hasBackgroundMedia || this.backgroundColor) ? true : false;
+    return this.hasBackgroundMedia || this.backgroundColor ? true : false;
   }
   get primaryColor() {
     if (this.textColor) {
       return this.textColor;
     }
-    const color = this.hasBackgroundMedia
-      ? 'light'
-      : !this.backgroundColor
-        ? 'dark'
-        : 'app-color';
+    const color = this.hasBackgroundMedia ? 'light' : !this.backgroundColor ? 'dark' : 'app-color';
     return `var(--${color})`;
   }
   async getPassword() {
@@ -63,8 +57,7 @@ export class YooLoginComponent {
     this.defaultPassword && (this.password = this.defaultPassword);
     setStatusBarDarkMode(true);
     disableKeyboardResize();
-    isNativeMobile() &&
-      this.setKeyboardListeners();
+    isNativeMobile() && this.setKeyboardListeners();
   }
   componentDidLoad() {
     var _a;
@@ -86,7 +79,8 @@ export class YooLoginComponent {
     if (!isNativeMobile()) {
       this.isFocused = true;
     }
-    else { // Has to be called here, as the 'keyboardWillShow' is called after, causing jittering
+    else {
+      // Has to be called here, as the 'keyboardWillShow' is called after, causing jittering
       if (this.keyboardState !== 'open') {
         this.contentContainerElement.style.top = `${this.contentContainerElement.offsetTop || 150}px`;
         this.contentContainerElement.style.position = 'absolute';
@@ -104,7 +98,8 @@ export class YooLoginComponent {
     if (!isNativeMobile()) {
       this.isFocused = false;
     }
-    else { // Has to be called here, as the 'keyboardWillHide' is called after, causing jittering
+    else {
+      // Has to be called here, as the 'keyboardWillHide' is called after, causing jittering
       this.contentContainerElement.style.position = 'absolute';
     }
     this.focusedInput = undefined;
@@ -210,32 +205,35 @@ export class YooLoginComponent {
   }
   getButton(type, onClick, ref = undefined) {
     const isOtherLoginOptions = ['GOOGLE', 'SSO'].includes(type);
-    return (h("yoo-button", { id: type !== 'HELP' ? `${type.toLowerCase()}-login-button` : 'help-button', color: !isOtherLoginOptions ? 'app-color' : 'light', customColor: this.textColor && type === 'HELP' ? { color: this.textColor } : undefined, fill: type === 'HELP' ? 'transparent' : 'solid', size: isWeb(this.host) ? 'medium' : type === 'HELP' ? 'medium' : 'large', animated: false, onClick: onClick, ref: ref },
+    const isHelpButton = ['HELP', 'MAGIC'].includes(type);
+    return (h("yoo-button", { id: !isHelpButton ? `${type.toLowerCase()}-login-button` : `${type.toLowerCase()}-button`, color: !isOtherLoginOptions ? 'app-color' : 'light', customColor: this.textColor && isHelpButton ? { color: this.textColor } : undefined, fill: isHelpButton ? 'transparent' : 'solid', size: isWeb(this.host) ? (isHelpButton ? 'small' : 'medium') : isHelpButton ? 'medium' : 'large', animated: false, onClick: onClick, ref: ref },
       type === 'SSO' && h("yoo-icon", { size: isWeb(this.host) ? 'small' : 'medium', slot: "start", name: "lock", color: "dark" }),
       type === 'GOOGLE' && h("img", { class: "google-logo", src: googleLogo, alt: "google logo", slot: "start" }),
-      type === 'HELP'
-        ? translate(this.helpText)
-        : translate(`${type !== 'SSO-DEFAULT' ? type : ''}LOGIN`)));
+      isHelpButton ? translate(type === 'HELP' ? this.helpText : this.magicLinkText) : translate(`YOOBIC${type !== 'SSO-DEFAULT' ? type : ''}LOGIN`)));
   }
   render() {
     return (h(Host, { style: {
-        ...this.hasCustomBackground ? {
-          '--header-footer-border-color': `var(--${this.hasBackgroundMedia ? 'light-40' : 'app-color-20'})`,
-          backgroundColor: this.backgroundColor ? this.backgroundColor : 'unset'
-        } : {}
+        ...(this.hasCustomBackground
+          ? {
+            '--header-footer-border-color': `var(--${this.hasBackgroundMedia ? 'light-40' : 'app-color-20'})`,
+            backgroundColor: this.backgroundColor ? this.backgroundColor : 'unset'
+          }
+          : {})
       }, class: {
         'outer-login-container': true,
         focused: this.isFocused,
         [`keyboard-${this.keyboardState}`]: true,
-        'ios': isIOS(),
-        'tablet': isTabletOrIpad()
+        emulated: isFullScreenFalse(),
+        web: isWeb(),
+        ios: isIOS(),
+        tablet: isTabletOrIpad()
       } },
       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("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, host: this.host, 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()), ssoLoginButtonElement: this.getButton('SSO-DEFAULT', () => this.onAdvancedLogin()), clearInput: this.clearInput.bind(this), isWhitelabel: this.isWhitelabel }),
+          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) {
@@ -329,7 +327,7 @@ export class YooLoginComponent {
       },
       "attribute": "subtitle",
       "reflect": false,
-      "defaultValue": "'LOGINSUBTITLE'"
+      "defaultValue": "'YOOBICLOGINSUBTITLE'"
     },
     "usernameLabel": {
       "type": "string",
@@ -347,7 +345,7 @@ export class YooLoginComponent {
       },
       "attribute": "username-label",
       "reflect": false,
-      "defaultValue": "'USERNAME'"
+      "defaultValue": "'YOOBICUSERNAME'"
     },
     "passwordLabel": {
       "type": "string",
@@ -365,7 +363,7 @@ export class YooLoginComponent {
       },
       "attribute": "password-label",
       "reflect": false,
-      "defaultValue": "'PASSWORD'"
+      "defaultValue": "'YOOBICPASSWORD'"
     },
     "helpText": {
       "type": "string",
@@ -383,7 +381,7 @@ export class YooLoginComponent {
       },
       "attribute": "help-text",
       "reflect": false,
-      "defaultValue": "'FORGOTPASSWORD'"
+      "defaultValue": "'YOOBICFORGOTPASSWORD'"
     },
     "resetPasswordText": {
       "type": "string",
@@ -401,7 +399,7 @@ export class YooLoginComponent {
       },
       "attribute": "reset-password-text",
       "reflect": false,
-      "defaultValue": "'RESETPASSWORD'"
+      "defaultValue": "'YOOBICRESETPASSWORD'"
     },
     "magicLinkText": {
       "type": "string",
@@ -419,7 +417,7 @@ export class YooLoginComponent {
       },
       "attribute": "magic-link-text",
       "reflect": false,
-      "defaultValue": "'MAGICLINK'"
+      "defaultValue": "'YOOBICMAGICLINK'"
     },
     "defaultUsername": {
       "type": "string",

package/dist/collection/feature-platform/login/login/parts/Footer.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { translate } from '@shared/utils';
 import { h } from '@stencil/core';
 export const Footer = ({ textColor, copyrightMessage, version, hasCustomBackground, onClick }) => (h("footer", { onClick: onClick, style: { color: hasCustomBackground ? textColor : 'inherit' } },
-  h("p", { class: "powered-by" }, translate('POWEREDBY')),
+  h("p", { class: "powered-by" }, translate('YOOBICPOWEREDBY')),
   h("p", { class: "copyright" }, copyrightMessage),
   h("p", null, "|"),
   h("p", { class: "version" }, `V${version}`)));