@yoobic/yobi 8.3.0-5 → 8.3.0-50

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

@@ -1,378 +1,247 @@
-import { ScreenOrientation } from '@ionic-native/screen-orientation';
-import { debounce, disableKeyboardResize, enableKeyboardResize, getContrastColorName, getSession, 
-// getUserLanguageKeys,
-isAndroid, isChromatic, isIonic, isIOS, isIphone5, isIphoneSE, isIphoneX, isNativeMobile, isTablet, isWeb, LoginFocusAnimation, showActionSheet, translate } from '@shared/utils';
-import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, State, Watch } from '@stencil/core';
-import { getAppContext, querySelectorAllDeep } from '../../../utils/helpers/common-helpers';
-import { getElementDimensions } from '../../../utils/helpers/dimensions-helpers';
-const MIN_SCREEN_SIZE_LEFT_PANEL = 900;
-const IPHONE5_HEIGHT = 580;
-const IPAD_MINI_SCREEN_HEIGHT = 1025;
-const MINIMUM_SCREEN_SIZE_TO_SHOW_HEADER = 665;
+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() {
-    this.webSubtitleText = [];
-    this.webLoginFormTitle = '';
-    this.leftPanelFooterText = 'POWEREDBY';
-    this.webLoginFormSubtitle = 'LOGINSUBTITLE';
-    this.forgotPasswordText = 'YOOBICHELP';
-    this.emailLabel = 'USERNAME';
-    this.passwordLabel = 'PASSWORD';
-    this.magicLinkButtonText = 'MAGICLINK';
-    this.resetPasswordButtonText = 'RESETPASSWORD';
-    this.loginButtonText = 'LOGIN';
-    this.logoSubtitle = 'GLADTOSEEYOU';
-    this.videoHidden = false;
-    this.passwordInputChanged = false;
-    this.inputFocused = false;
-    this.deviceInputFocused = false;
-    this.hideLoginForm = false;
-    this.showLeftPanel = true;
-    this.language = 'EN';
-    this.emailFocused = false;
-    this.passwordFocused = false;
-    this.fullWindowHeight = 0;
-    this.loginContainerMobileHeight = 0;
-    this.showHeaderFooterOnFocus = true;
-    this.hideTitleAndFooterForIpadMini = false;
-    this.inputValidators = [{ name: 'required' }];
-    this.inputUIValidation = { valid: false, invalid: false };
-  }
-  get isEmailValid() {
+    //* COMPONENT TEXT
+    // Title Text
+    this.mainTitle = '';
+    // Subtitle Text
+    this.subtitle = 'YOOBICLOGINSUBTITLE';
+    // Username label text
+    this.usernameLabel = 'YOOBICUSERNAME';
+    // Password label text
+    this.passwordLabel = 'YOOBICPASSWORD';
+    // Help text like 'forgot password?'
+    this.helpText = 'YOOBICFORGOTPASSWORD';
+    // Reset password text (for action sheet button)
+    this.resetPasswordText = 'YOOBICRESETPASSWORD';
+    // Magic link text (for action sheet button)
+    this.magicLinkText = 'YOOBICMAGICLINK';
+    // A color to override any app-color / dynamic coloring
+    this.textColor = null;
+    this.isFocused = false;
+    this.showPassword = false;
+    this.keyboardState = 'closed';
+    this.copyrightMessage = `YOOBIC © ${new Date().getFullYear()}`;
+  }
+  // private contentPixelsFromTop: number;
+  get isUsernameValid() {
     var _a;
-    return (_a = this.emailInputEl) === null || _a === void 0 ? void 0 : _a.validity;
+    return !!((_a = this.usernameInputElement) === null || _a === void 0 ? void 0 : _a.value);
   }
   get isPasswordValid() {
     var _a;
-    return (_a = this.passwordInputEl) === null || _a === void 0 ? void 0 : _a.validity;
+    return !!((_a = this.passwordInputElement) === null || _a === void 0 ? void 0 : _a.value);
   }
-  onLeftPanelChanged(newValue) {
-    if (newValue) {
-      this.updateVideoSrcOnDidUpdate = true;
+  get hasBackgroundMedia() {
+    return this.backgroundSrc ? true : false;
+  }
+  get hasCustomBackground() {
+    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';
+    return `var(--${color})`;
   }
   async getPassword() {
-    return Promise.resolve(this.userPassword);
+    return Promise.resolve(this.password || '');
   }
   componentWillLoad() {
-    this.showLeftPanel = window.innerWidth > MIN_SCREEN_SIZE_LEFT_PANEL;
-    this.language = this.currentLanguage;
-    this.hideLoginForm = this.ssoOnly;
+    this.defaultUsername && (this.username = this.defaultUsername);
+    this.defaultPassword && (this.password = this.defaultPassword);
+    setStatusBarDarkMode(true);
     disableKeyboardResize();
+    isNativeMobile() && this.setKeyboardListeners();
   }
   componentDidLoad() {
     var _a;
-    this.resizePage();
-    this.resizeListener = debounce(this.resizePage, 500).bind(this);
-    window.addEventListener('resize', this.resizeListener);
-    this.loginContainerMobileHeight = getElementDimensions(this.loginContainerMobile).height;
-    if (this.videoHeaderContainerEl) {
-      this.focusAnimation = new LoginFocusAnimation();
-      this.focusAnimation.addContainer(this.videoHeaderContainerEl);
-    }
     (_a = ScreenOrientation === null || ScreenOrientation === void 0 ? void 0 : ScreenOrientation.onChange) === null || _a === void 0 ? void 0 : _a.call(ScreenOrientation).subscribe(() => forceUpdate(this));
-    if (this.ssoOnly) {
-      this.poweredByElement.onclick = () => { this.hideLoginForm = false; };
-    }
-  }
-  componentDidUpdate() {
-    if (this.updateVideoSrcOnDidUpdate && this.loginVideoEl) {
-      this.loginVideoEl.src = this.videoBackgroundUrl;
-      this.loginVideoEl.play();
-      this.updateVideoSrcOnDidUpdate = false;
-    }
+    this.validateLogin();
   }
   disconnectedCallback() {
-    window.removeEventListener('resize', this.resizeListener);
-    enableKeyboardResize();
-  }
-  isIphone5Screensize() {
-    return window.innerHeight < IPHONE5_HEIGHT;
-  }
-  hasVideoBackground() {
-    return !!this.videoBackgroundUrl;
-  }
-  hasCustomBackground() {
-    return (this.hasVideoBackground() || !!this.backgroundSrc);
+    setStatusBarDarkMode(false);
+    isAndroid() && removeKeyboardEventListeners();
   }
   onAlertClosed() {
     this.error = '';
   }
-  onAlertActionSelected() {
-    this.error = '';
-    window.location.href = 'mailto:support@yoobic.com';
-  }
-  onInputChanged(ev, type) {
-    this.validateLoginInputs();
-    if (type === 'email') {
-      this.userEmail = ev.detail;
-    }
-    else if (type === 'password') {
-      this.userPassword = ev.detail;
-    }
-  }
-  onAdvancedLogin() {
-    this.advancedLoginRequested.emit(true);
-  }
-  onEnterPressed() {
-    this.validateLoginInputs();
-    this.onLogin();
-  }
-  onCanPlay() {
-    var _a, _b, _c;
-    (_c = (_b = (_a = this.loginVideoEl) === null || _a === void 0 ? void 0 : _a.play()) === null || _b === void 0 ? void 0 : _b.catch) === null || _c === void 0 ? void 0 : _c.call(_b, () => this.videoHidden = true);
-  }
-  validateLoginInputs() {
-    if (this.loginBtnEl) {
-      this.loginBtnEl.disabled = !(this.isEmailValid && this.isPasswordValid);
-    }
+  onInputChanged(e, type) {
+    this.validateLogin();
+    this[type] = e.target.value;
   }
   onInputFocused(type) {
-    this.error = '';
-    type === 'password' ? (this.passwordFocused = true) : (this.emailFocused = true);
-    if (isNativeMobile() && (!isTablet() || this.hideTitleAndFooterForIpadMini)) {
-      this.hideTitleAndFooter();
+    if (!isNativeMobile()) {
+      this.isFocused = true;
     }
-    if (isIonic(this.host)) {
-      this.inputFocused = true;
-      if (this.focusAnimation && this.videoHeaderContainerEl && !this.shouldHideHeaderVideo()) {
-        this.focusAnimation.playFocus();
+    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';
       }
-    }
-  }
-  onInputBlurred(type) {
-    this.validateLoginInputs();
-    if (isIonic(this.host)) {
-      type === 'password' ? (this.passwordFocused = false) : (this.emailFocused = false);
-      setTimeout(() => isNativeMobile() && this.hideTitleAndFooter(), 100);
-      this.inputFocused = false;
-      if (this.videoHeaderContainerEl && !this.shouldHideHeaderVideo()) {
-        this.focusAnimation.playBlur();
+      else {
+        isAndroid() && (this.contentContainerElement.style.position = 'unset');
+        this.keyboardState = 'open';
+        this.isFocused = true;
       }
     }
+    this.error = '';
+    this.focusedInput = type;
   }
-  onPasswordIconClicked(ev) {
-    if (ev.detail === 'clear') {
-      this.validateLoginInputs();
-    }
-  }
-  hideTitleAndFooter() {
-    if (this.emailFocused || this.passwordFocused) {
-      if (this.loginContainerMobile) {
-        const height = isIphone5() ? '75%' : '100%';
-        this.loginContainerMobile.setAttribute('style', `height: ${height};`);
-      }
-      this.deviceInputFocused = true;
+  onInputBlurred() {
+    if (!isNativeMobile()) {
+      this.isFocused = false;
     }
     else {
-      if (this.loginContainerMobile) {
-        this.loginContainerMobile.setAttribute('style', `height: ${this.loginContainerMobileHeight}px;`);
-      }
-      this.deviceInputFocused = false;
+      // Has to be called here, as the 'keyboardWillHide' is called after, causing jittering
+      this.contentContainerElement.style.position = 'absolute';
     }
+    this.focusedInput = undefined;
   }
-  resizePage() {
-    if (isIonic(this.host)) {
-      this.fullWindowHeight = window.innerHeight > this.fullWindowHeight ? window.innerHeight : this.fullWindowHeight;
-    }
-    this.showLeftPanel = window.innerWidth > MIN_SCREEN_SIZE_LEFT_PANEL;
-    this.showHeaderFooterOnFocus = window.innerHeight > MINIMUM_SCREEN_SIZE_TO_SHOW_HEADER;
-    this.hideTitleAndFooterForIpadMini = window.innerHeight < IPAD_MINI_SCREEN_HEIGHT && isIOS();
-  }
-  onLanguageChanged(ev) {
-    if (this.language !== ev.detail) {
-      this.language = ev.detail;
-      this.languageSelectedParent.emit(ev.detail);
-    }
+  onAdvancedLogin() {
+    this.advancedLoginRequested.emit(true);
   }
   onLogin() {
-    if (this.userEmail && this.userPassword && this.loginBtnEl && this.loginBtnEl.disabled === false) {
-      const inputs = querySelectorAllDeep(this.host, 'input');
-      if (inputs && inputs.forEach) {
-        inputs.forEach((el) => el && el.blur && el.blur());
-      }
-      const loginDetails = { username: this.userEmail, password: this.userPassword, hiddenSsoLogin: this.ssoOnly && !this.hideLoginForm };
-      this.doLogin.emit(loginDetails);
+    var _a, _b, _c;
+    if (this.username && this.password && !((_a = this.loginButtonElement) === null || _a === void 0 ? void 0 : _a.disabled)) {
+      (_b = this.usernameInputElement) === null || _b === void 0 ? void 0 : _b.blur();
+      (_c = this.passwordInputElement) === null || _c === void 0 ? void 0 : _c.blur();
+      this.doLogin.emit({
+        username: this.username,
+        password: this.password,
+        hiddenSsoLogin: this.ssoOnly
+      });
+      history.pushState({}, null);
     }
-    else if (this.ssoOnly && this.hideLoginForm) {
+    else if (this.ssoOnly) {
       this.doLogin.emit(null);
     }
   }
+  onGoogleLogin() {
+    this.googleLoginRequested.emit(true);
+  }
   onForgotPassword() {
     isIonic(this.host) ? this.presentActionSheet() : this.passwordResetModalRequested.emit(true);
   }
+  validateAndLogin() {
+    this.validateLogin();
+    this.onLogin();
+  }
+  onFormSubmit(e) {
+    e.preventDefault();
+    this.validateAndLogin();
+  }
   presentActionSheet() {
     showActionSheet([
-      { text: translate(this.resetPasswordButtonText), handler: () => this.passwordResetModalRequested.emit(true) },
-      { text: translate(this.magicLinkButtonText), handler: () => this.magicLinkModalRequested.emit(true) }
+      { text: translate(this.resetPasswordText), handler: () => this.passwordResetModalRequested.emit(true) },
+      { text: translate(this.magicLinkText), handler: () => this.magicLinkModalRequested.emit(true) }
     ]);
   }
-  getVideoBackgroundClasses() {
-    if ((this.hasVideoBackground() || this.backgroundSrc) && !isWeb(this.host)) {
-      return { 'no-border': true, translucent: true };
-    }
-    else if (this.backgroundColor && !isWeb(this.host)) {
-      return { solid: true };
+  clearInput(type) {
+    const input = this[`${type}InputElement`];
+    if (this.focusedInput === type) {
+      this[type] = '';
+      if (input) {
+        input.value = '';
+      }
     }
+    input.focus();
   }
-  renderLoginForm() {
-    const isweb = isWeb(this.host);
-    const hasCustomBackground = this.hasVideoBackground() || this.backgroundSrc;
-    const fieldColors = {
-      border: isweb ? '' : hasCustomBackground ? '' : 'var(--app-color)',
-      title: isweb ? '' : hasCustomBackground ? 'var(--light)' : this.backgroundColor ? `var(--${getContrastColorName(this.backgroundColor)})` : 'var(--app-color)',
-      text: isweb ? '' : hasCustomBackground ? 'var(--light)' : 'var(--dark)'
-    };
-    return [
-      h("div", { ref: (el) => (this.loginContainerMobile = el), class: {
-          'login-container-mobile': isIonic(this.host),
-          unfocused: !this.inputFocused,
-          'login-container': !isIonic(this.host),
-          'iphone-se-focus': this.inputFocused && isIphoneSE()
-        } },
-        isIonic(this.host) ? null : [h("div", { class: "login-title" }, translate(this.webLoginFormTitle)), h("div", { class: "login-subtitle" }, translate(this.webLoginFormSubtitle))],
-        !this.hideLoginForm && (h("yoo-form-input-container", { style: { '--field-title-color': fieldColors.title }, field: { title: translate(this.emailLabel) }, required: true },
-          h("yoo-form-input", { class: { ...this.getVideoBackgroundClasses() }, style: { '--input-border-color': fieldColors.border, color: fieldColors.text }, ref: (el) => (this.emailInputEl = el), "data-test-id": "email", name: "email", type: "email", size: isWeb(this.host) ? 'medium' : 'large', validators: this.inputValidators, uiValidation: this.inputUIValidation, fireInputChangeEvent: true, onInputChanged: (event) => this.onInputChanged(event, 'email'), onInputFocused: () => this.onInputFocused('email'), onInputBlurred: () => this.onInputBlurred('email'), onEnterPressed: () => this.onEnterPressed() }))),
-        !this.hideLoginForm && (h("yoo-form-input-container", { style: { '--field-title-color': fieldColors.title }, field: { title: translate(this.passwordLabel) }, required: true },
-          h("yoo-form-input", { class: { ...this.getVideoBackgroundClasses() }, style: { '--input-border-color': fieldColors.border, color: fieldColors.text }, ref: (el) => (this.passwordInputEl = el), "data-test-id": "password", name: "password", type: "password", size: isWeb(this.host) ? 'medium' : 'large', showPasswordToggle: true, validators: this.inputValidators, uiValidation: this.inputUIValidation, fireInputChangeEvent: true, onInputChanged: (event) => this.onInputChanged(event, 'password'), onInputFocused: () => this.onInputFocused('password'), onInputBlurred: () => this.onInputBlurred('password'), onIconClicked: (ev) => this.onPasswordIconClicked(ev), onEnterPressed: () => this.onEnterPressed() }))),
-        !this.hideLoginForm && (h("div", { class: "inner-container" },
-          h("yoo-button", { id: "forgot-password", color: isWeb(this.host)
-              ? 'app-color'
-              : this.backgroundColor
-                ? getContrastColorName(this.backgroundColor)
-                : !hasCustomBackground
-                  ? 'app-color'
-                  : 'light', fill: "transparent", size: isWeb(this.host) ? 'small' : 'medium', animated: false, onClick: () => this.onForgotPassword() }, translate(this.forgotPasswordText)))),
-        (!this.hideLoginForm || (this.hideLoginForm && !this.hasToken)) && (h("div", { class: 'login-button ' + (isNativeMobile() ? 'device-padding' : '') },
-          h("yoo-button", { id: "login-btn", ref: (el) => (this.loginBtnEl = el), class: "expanded", color: "app-color", size: isWeb(this.host) ? 'medium' : 'large', disabled: !this.hideLoginForm && !(this.isEmailValid && this.isPasswordValid), onClick: () => this.onLogin() }, translate(this.loginButtonText)))),
-        isIonic(this.host) && !this.isIphone5Screensize() && this.renderPoweredBy())
-    ];
-  }
-  shouldHideHeaderVideo() {
-    return ((!this.hasVideoBackground() && !this.backgroundColor && !this.backgroundSrc) ||
-      isWeb(this.host) ||
-      ((isIphone5() || isIphoneSE()) && !!this.error) ||
-      (this.deviceInputFocused && isAndroid() && !this.showHeaderFooterOnFocus));
-  }
-  renderHeaderVideo() {
-    return (h("div", { ref: (el) => (this.videoHeaderContainerEl = el), class: { 'video-header-container-mobile': true, hide: this.shouldHideHeaderVideo(), focused: this.deviceInputFocused } },
-      h("img", { class: { logo: true, hide: this.inputFocused, 'auto-margin': !(isNativeMobile() && isAndroid()) }, src: this.videoHeaderIcon, height: "120", alt: "YOOBIC Logo" }),
-      h("div", { class: { text: true, 'iphone-5': isIphone5() || isIphoneSE() }, style: { color: this.hasVideoBackground() ? 'light' : isWeb(this.host) ? 'stable' : 'app-color' } }, translate(this.logoSubtitle))));
-  }
-  renderLanguageSelector() {
-    return (null
-    // <yoo-form-autocomplete
-    //   class="hide-icon"
-    //   color="light"
-    //   size="medium"
-    //   values={getUserLanguageKeys(this.languages)}
-    //   value={this.language}
-    //   idOnly={true}
-    //   entityType="language"
-    //   displayType="card-list"
-    //   forceHideSearch={true}
-    //   disableSingleDeselection={true}
-    //   onInputChanged={(ev) => this.onLanguageChanged(ev)}
-    // />
-    );
-  }
-  renderPoweredBy() {
-    const session = getSession();
-    return (h("div", { class: {
-        'powered-by': true,
-        [this.hasCustomBackground() ? 'light' : getContrastColorName(this.backgroundColor)]: true
-      }, ref: (el) => (this.poweredByElement = el) },
-      h("p", null,
-        translate(this.leftPanelFooterText),
-        h("img", { src: `assets/logo/yoobic${this.hasCustomBackground()
-            ? '_white'
-            : getContrastColorName(this.backgroundColor) === 'light'
-              ? '_white'
-              : ''}.svg`, height: "12.8", alt: "" }),
-        "YOOBIC"),
-      h("p", { class: "version", hidden: !this.version || (session === null || session === void 0 ? void 0 : session.isStorybook) },
-        "v",
-        this.version)));
-  }
-  renderFooter() {
-    return isIonic(this.host) ? (this.hideAdvancedLogin ? null : (h("yoo-button", { color: this.hasCustomBackground() ? 'light' : getContrastColorName(this.backgroundColor), size: "large", fill: "transparent", animated: false, class: "expanded", onClick: () => this.onAdvancedLogin() }, translate('ADVANCEDLOGIN')))) : (this.renderPoweredBy());
-  }
-  renderVideo() {
-    const autoplay = !isIOS() || !isNativeMobile();
-    return (h("video", { ref: (el) => (this.loginVideoEl = el), class: { android: isAndroid() }, autoplay: autoplay && !isChromatic(), hidden: this.videoHidden, loop: true, muted: true, playsinline: true, src: this.videoBackgroundUrl, "webkit-playsinline": true, onLoadedMetaData: () => !autoplay && this.onCanPlay() }));
-  }
-  renderHeader() {
-    return (h("div", { class: "header" },
-      h("div", { class: { logo: true, big: this.webLogoBig } },
-        h("img", { src: this.leftPanelWebHeaderIcon, height: this.webLogoBig ? 70 : 32, alt: "Logo" }))));
-  }
-  renderPanelBody(type) {
-    if (type === 'leftPanel') {
-      return (h("div", { class: "content", style: { color: this.backgroundColor ? `var(--${getContrastColorName(this.backgroundColor)})` : null } }, this.webSubtitleText.map((text) => (h("div", { class: "subtitle-container", innerHTML: translate(text) })))));
+  onShowPassword() {
+    if (this.focusedInput === 'password') {
+      this.showPassword = !this.showPassword;
     }
-    return '';
-  }
-  renderLeftPanel() {
-    var _a;
-    let backStyle;
-    if (!this.hasVideoBackground()) {
-      backStyle = { backgroundImage: `url(${this.backgroundSrc})` };
+    this.passwordInputElement.focus();
+  }
+  onIconClicked(type) {
+    const input = this[`${type}InputElement`];
+    input.focus();
+  }
+  setKeyboardListeners() {
+    addKeyboardEventListener('keyboardWillShow', () => {
+      this.keyboardState = 'transitioning';
+    });
+    addKeyboardEventListener('keyboardWillHide', () => {
+      this.keyboardState = 'transitioning';
+    });
+    addKeyboardEventListener('keyboardDidShow', () => {
+      isAndroid() && (this.contentContainerElement.style.position = 'unset');
+      this.keyboardState = 'open';
+      this.isFocused = true;
+    });
+    addKeyboardEventListener('keyboardDidHide', () => {
+      isAndroid() && (this.contentContainerElement.style.position = 'unset');
+      this.keyboardState = 'closed';
+      this.isFocused = false;
+    });
+  }
+  bindReference(el, type) {
+    this[`${type}InputElement`] = el;
+  }
+  getDefaultInputValue(type) {
+    if (type === 'username') {
+      return this.defaultUsername;
     }
-    return (h("div", { class: "left-panel" },
-      this.backgroundSrc && backStyle ? h("div", { class: "background", style: backStyle }) : this.hasVideoBackground() ? this.renderVideo() : null,
-      h("div", { class: "background-overlay", style: { background: this.backgroundColor, opacity: ((_a = this.backgroundColor) === null || _a === void 0 ? void 0 : _a.startsWith('#')) ? '1' : null } }),
-      h("div", { class: "content-container" },
-        this.renderHeader(),
-        this.renderPanelBody('leftPanel'),
-        h("div", { class: { footer: true, android: isAndroid() } }, this.renderFooter()))));
-  }
-  renderErrorBanner() {
-    return (h("yoo-banner", { class: "center sharp", fill: true, closable: !isIonic(this.host), linkText: !isIonic(this.host) ? translate('NEEDHELP') : '', onLinkClick: () => this.onAlertActionSelected(), onCloseClick: () => this.onAlertClosed() },
-      h("p", { slot: "content" }, translate(this.error))));
-  }
-  renderRightPanel() {
-    let backStyle;
-    if (!this.hasVideoBackground() && !isWeb(this.host)) {
-      backStyle = { backgroundImage: `url(${this.backgroundSrc})` };
+    else {
+      return this.defaultPassword;
     }
-    return (h("div", { class: { 'right-panel': true, ios: isNativeMobile() && isIOS(), 'video-background': this.hasVideoBackground() && !isWeb(this.host) }, "justify-content": "flex-start", style: { background: !isWeb(this.host) && this.backgroundColor } },
-      this.backgroundSrc && backStyle && h("div", { class: "background", style: backStyle }),
-      this.hasVideoBackground() && !isWeb(this.host) && this.renderVideo(),
-      this.error && this.renderErrorBanner(),
-      !isWeb(this.host) && (this.hasVideoBackground || this.backgroundSrc) &&
-        h("div", { class: "background-overlay", style: { opacity: (!this.hasVideoBackground() && !this.backgroundSrc) && '0' } }),
-      h("div", { class: "content-container", "justify-content": "space-between" },
-        h("div", { id: "header", class: { header: true, ios: isNativeMobile() && isIOS(), android: isAndroid(), 'iphone-x': isIphoneX(), 'no-padding': +this.error && isIonic(this.host) } },
-          isIonic(this.host) ||
-            (!this.showLeftPanel && [
-              h("div", { class: "space-fill" }),
-              h("div", { class: "logo" }, this.hasVideoBackground() && !isWeb(this.host)
-                ? null
-                : this.leftPanelMobileHeaderIcon && h("img", { src: this.leftPanelMobileHeaderIcon, height: "25", alt: "YOOBIC Logo" }))
-            ]),
-          h("div", { class: "language-container" }, this.languages && this.languages.length > 1 && this.renderLanguageSelector())),
-        h("div", { class: { content: true, android: isAndroid() && !this.showHeaderFooterOnFocus }, "justify-content": "center" },
-          this.renderHeaderVideo(),
-          this.renderLoginForm()),
-        h("div", { class: {
-            footer: true,
-            hide: isIonic(this.host) && this.inputFocused && isNativeMobile(),
-            android: isAndroid(),
-            'iphone-x': isIphoneX(),
-            'reduce-padding': this.isIphone5Screensize()
-          } },
-          (isIonic(this.host) || !this.showLeftPanel) && this.renderFooter(),
-          !isIonic(this.host) && !this.hideAdvancedLogin && (h("yoo-button", { color: "app-color", fill: "transparent", animated: false, onClick: () => this.onAdvancedLogin() }, translate('ADVANCEDLOGIN')))))));
+  }
+  getInputValue(type) {
+    return this[type];
+  }
+  getInputLabel(type) {
+    return this[`${type}Label`];
+  }
+  validateLogin() {
+    if (this.loginButtonElement) {
+      this.loginButtonElement.disabled = !(this.isUsernameValid && this.isPasswordValid);
+    }
+  }
+  getButton(type, onClick, ref = undefined) {
+    const isOtherLoginOptions = ['GOOGLE', 'SSO'].includes(type);
+    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" }),
+      isHelpButton ? translate(type === 'HELP' ? this.helpText : this.magicLinkText) : translate(`YOOBIC${type !== 'SSO-DEFAULT' ? type : ''}LOGIN`)));
   }
   render() {
-    const isTokenSsoLogin = this.ssoOnly && this.hasToken;
-    return (h(Host, { class: { ...getAppContext(this.host) } },
-      h("div", { class: "outer-container" },
-        !isTokenSsoLogin && isWeb(this.host) && this.showLeftPanel && this.renderLeftPanel(),
-        !isTokenSsoLogin && this.renderRightPanel())));
+    return (h(Host, { style: {
+        ...(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,
+        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(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;
+          }
+        } })));
   }
   static get is() { return "yoo-login"; }
-  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
     "$": ["login.scss"]
   }; }
@@ -380,41 +249,51 @@ export class YooLoginComponent {
     "$": ["login.css"]
   }; }
   static get properties() { return {
-    "leftPanelMobileHeaderIcon": {
+    "backgroundColor": {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "string",
+        "original": "THexColor",
         "resolved": "string",
-        "references": {}
+        "references": {
+          "THexColor": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
       },
-      "attribute": "left-panel-mobile-header-icon",
+      "attribute": "background-color",
       "reflect": false
     },
-    "leftPanelWebHeaderIcon": {
+    "backgroundSrc": {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "string",
+        "original": "TMediaSource",
         "resolved": "string",
-        "references": {}
+        "references": {
+          "TMediaSource": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
       },
-      "attribute": "left-panel-web-header-icon",
+      "attribute": "background-src",
       "reflect": false
     },
-    "videoBackgroundUrl": {
+    "mainTitle": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -423,15 +302,16 @@ export class YooLoginComponent {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
       },
-      "attribute": "video-background-url",
-      "reflect": false
+      "attribute": "main-title",
+      "reflect": false,
+      "defaultValue": "''"
     },
-    "videoHeaderIcon": {
+    "subtitle": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -440,15 +320,16 @@ export class YooLoginComponent {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
       },
-      "attribute": "video-header-icon",
-      "reflect": false
+      "attribute": "subtitle",
+      "reflect": false,
+      "defaultValue": "'YOOBICLOGINSUBTITLE'"
     },
-    "backgroundSrc": {
+    "usernameLabel": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -457,15 +338,16 @@ export class YooLoginComponent {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
       },
-      "attribute": "background-src",
-      "reflect": false
+      "attribute": "username-label",
+      "reflect": false,
+      "defaultValue": "'YOOBICUSERNAME'"
     },
-    "backgroundColor": {
+    "passwordLabel": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -474,48 +356,34 @@ export class YooLoginComponent {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
       },
-      "attribute": "background-color",
-      "reflect": false
+      "attribute": "password-label",
+      "reflect": false,
+      "defaultValue": "'YOOBICPASSWORD'"
     },
-    "error": {
+    "helpText": {
       "type": "string",
-      "mutable": true,
+      "mutable": false,
       "complexType": {
         "original": "string",
         "resolved": "string",
         "references": {}
       },
       "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "error",
-      "reflect": false
-    },
-    "webSubtitleText": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "string[]",
-        "resolved": "string[]",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
       },
-      "defaultValue": "[]"
+      "attribute": "help-text",
+      "reflect": false,
+      "defaultValue": "'YOOBICFORGOTPASSWORD'"
     },
-    "webLoginFormTitle": {
+    "resetPasswordText": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -524,31 +392,16 @@ export class YooLoginComponent {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
       },
-      "attribute": "web-login-form-title",
+      "attribute": "reset-password-text",
       "reflect": false,
-      "defaultValue": "''"
+      "defaultValue": "'YOOBICRESETPASSWORD'"
     },
-    "languages": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "string[]",
-        "resolved": "string[]",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "version": {
+    "magicLinkText": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -557,15 +410,16 @@ export class YooLoginComponent {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
       },
-      "attribute": "version",
-      "reflect": false
+      "attribute": "magic-link-text",
+      "reflect": false,
+      "defaultValue": "'YOOBICMAGICLINK'"
     },
-    "currentLanguage": {
+    "defaultUsername": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -574,15 +428,15 @@ export class YooLoginComponent {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
       },
-      "attribute": "current-language",
+      "attribute": "default-username",
       "reflect": false
     },
-    "leftPanelFooterText": {
+    "defaultPassword": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -591,16 +445,15 @@ export class YooLoginComponent {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
       },
-      "attribute": "left-panel-footer-text",
-      "reflect": false,
-      "defaultValue": "'POWEREDBY'"
+      "attribute": "default-password",
+      "reflect": false
     },
-    "webLoginFormSubtitle": {
+    "textColor": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -609,16 +462,16 @@ export class YooLoginComponent {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
       },
-      "attribute": "web-login-form-subtitle",
+      "attribute": "text-color",
       "reflect": false,
-      "defaultValue": "'LOGINSUBTITLE'"
+      "defaultValue": "null"
     },
-    "forgotPasswordText": {
+    "version": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -627,130 +480,111 @@ export class YooLoginComponent {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
       },
-      "attribute": "forgot-password-text",
-      "reflect": false,
-      "defaultValue": "'YOOBICHELP'"
+      "attribute": "version",
+      "reflect": false
     },
-    "emailLabel": {
-      "type": "string",
+    "isWhitelabel": {
+      "type": "boolean",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "boolean",
+        "resolved": "boolean",
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
       },
-      "attribute": "email-label",
-      "reflect": false,
-      "defaultValue": "'USERNAME'"
+      "attribute": "is-whitelabel",
+      "reflect": true
     },
-    "passwordLabel": {
-      "type": "string",
-      "mutable": false,
+    "ssoOnly": {
+      "type": "boolean",
+      "mutable": true,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "boolean",
+        "resolved": "boolean",
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
       },
-      "attribute": "password-label",
-      "reflect": false,
-      "defaultValue": "'PASSWORD'"
+      "attribute": "sso-only",
+      "reflect": true
     },
-    "magicLinkButtonText": {
-      "type": "string",
+    "isDoubleColumn": {
+      "type": "boolean",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "boolean",
+        "resolved": "boolean",
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
       },
-      "attribute": "magic-link-button-text",
-      "reflect": false,
-      "defaultValue": "'MAGICLINK'"
+      "attribute": "is-double-column",
+      "reflect": true
     },
-    "resetPasswordButtonText": {
-      "type": "string",
+    "hideAdvancedLogin": {
+      "type": "boolean",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "boolean",
+        "resolved": "boolean",
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
       },
-      "attribute": "reset-password-button-text",
-      "reflect": false,
-      "defaultValue": "'RESETPASSWORD'"
+      "attribute": "hide-advanced-login",
+      "reflect": true
     },
-    "loginButtonText": {
-      "type": "string",
+    "hideGoogleLogin": {
+      "type": "boolean",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "boolean",
+        "resolved": "boolean",
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
       },
-      "attribute": "login-button-text",
-      "reflect": false,
-      "defaultValue": "'LOGIN'"
+      "attribute": "hide-google-login",
+      "reflect": true
     },
-    "logoSubtitle": {
+    "logoShape": {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "logo-subtitle",
-      "reflect": false,
-      "defaultValue": "'GLADTOSEEYOU'"
-    },
-    "hideAdvancedLogin": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+        "original": "TLogoShape",
+        "resolved": "\"horizontal\" | \"square\"",
+        "references": {
+          "TLogoShape": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
       },
       "required": false,
       "optional": false,
@@ -758,33 +592,43 @@ export class YooLoginComponent {
         "tags": [],
         "text": ""
       },
-      "attribute": "hide-advanced-login",
-      "reflect": false
+      "attribute": "logo-shape",
+      "reflect": true
     },
-    "ssoOnly": {
-      "type": "boolean",
+    "sidepanelImage": {
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+        "original": "TMediaSource",
+        "resolved": "string",
+        "references": {
+          "TMediaSource": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
       },
-      "attribute": "sso-only",
+      "attribute": "sidepanel-image",
       "reflect": false
     },
-    "hasToken": {
-      "type": "boolean",
+    "logo": {
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+        "original": "TMediaSource",
+        "resolved": "string",
+        "references": {
+          "TMediaSource": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
       },
       "required": false,
       "optional": true,
@@ -792,15 +636,15 @@ export class YooLoginComponent {
         "tags": [],
         "text": ""
       },
-      "attribute": "has-token",
+      "attribute": "logo",
       "reflect": false
     },
-    "webLogoBig": {
-      "type": "boolean",
-      "mutable": false,
+    "error": {
+      "type": "string",
+      "mutable": true,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "string",
+        "resolved": "string",
         "references": {}
       },
       "required": false,
@@ -809,19 +653,16 @@ export class YooLoginComponent {
         "tags": [],
         "text": ""
       },
-      "attribute": "web-logo-big",
+      "attribute": "error",
       "reflect": false
     }
   }; }
   static get states() { return {
-    "videoHidden": {},
-    "pageWidthSize": {},
-    "passwordInputChanged": {},
-    "inputFocused": {},
-    "deviceInputFocused": {},
-    "showSupport": {},
-    "hideLoginForm": {},
-    "showLeftPanel": {}
+    "isFocused": {},
+    "showPassword": {},
+    "username": {},
+    "password": {},
+    "keyboardState": {}
   }; }
   static get events() { return [{
       "method": "doLogin",
@@ -844,8 +685,8 @@ export class YooLoginComponent {
         }
       }
     }, {
-      "method": "languageSelectedParent",
-      "name": "languageSelectedParent",
+      "method": "googleLoginRequested",
+      "name": "googleLoginRequested",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -854,8 +695,8 @@ export class YooLoginComponent {
         "text": ""
       },
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "boolean",
+        "resolved": "boolean",
         "references": {}
       }
     }, {
@@ -874,8 +715,8 @@ export class YooLoginComponent {
         "references": {}
       }
     }, {
-      "method": "magicLinkModalRequested",
-      "name": "magicLinkModalRequested",
+      "method": "advancedLoginRequested",
+      "name": "advancedLoginRequested",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -889,8 +730,8 @@ export class YooLoginComponent {
         "references": {}
       }
     }, {
-      "method": "advancedLoginRequested",
-      "name": "advancedLoginRequested",
+      "method": "magicLinkModalRequested",
+      "name": "magicLinkModalRequested",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -923,8 +764,4 @@ export class YooLoginComponent {
     }
   }; }
   static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "showLeftPanel",
-      "methodName": "onLeftPanelChanged"
-    }]; }
 }