@yoobic/yobi 8.3.0-6 → 8.3.0-9

package/dist/esm/yoo-login.entry.js

@@ -1,345 +1,357 @@
-import { r as registerInstance, i as createEvent, f as forceUpdate, h, e as Host, g as getElement } from './index-54cb3c5d.js';
-import { a3 as disableKeyboardResize, r as debounce, cr as LoginFocusAnimation, S as ScreenOrientation, a4 as enableKeyboardResize, f as isNativeMobile, l as isTablet, cd as isIonic, R as isIphone5, x as isIOS, a8 as showActionSheet, t as translate, q as isWeb, cs as getContrastColorName, T as isIphoneSE, h as isAndroid, X as getSession, i as isChromatic, w as isIphoneX } from './overlays-0a37ecfc.js';
-import './index-2546ce94.js';
-import { f as querySelectorAllDeep, b as getAppContext } from './common-helpers-22bb74ae.js';
-import { g as getElementDimensions } from './dimensions-helpers-74309fae.js';
+import { h, r as registerInstance, i as createEvent, f as forceUpdate, e as Host, g as getElement } from './index-54cb3c5d.js';
+import { t as translate, q as isWeb, ax as isPresent, ba as getContrastColor, cr as setStatusBarDarkMode, a3 as disableKeyboardResize, f as isNativeMobile, S as ScreenOrientation, h as isAndroid, cs as removeKeyboardEventListeners, cd as isIonic, a8 as showActionSheet, ct as addKeyboardEventListener, x as isIOS, bF as isTabletOrIpad } from './overlays-2b1f8cb5.js';
+import './index-945da793.js';
 import './lodash-bf91c7a4.js';
 import './index-efbd87e6.js';
 import './_commonjsHelpers-f4d11124.js';
 
-const loginCss = ":host{display:block;width:100%;height:100%}:host yoo-form-input-container:first-of-type{margin-bottom:1rem}:host p{margin:0}:host video{width:100%;-o-object-fit:cover;object-fit:cover}:host .inner-container{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end}:host .login-button{margin-top:var(--spacing-16, 1rem)}:host .powered-by{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;font-size:var(--font-size-12, 0.75rem)}:host .powered-by.light{color:var(--light, #ffffff)}:host .powered-by.dark{color:var(--dark, #000000)}:host .powered-by *{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .powered-by *+*{margin-top:var(--spacing-04, 0.25rem)}:host .powered-by img{margin:0 var(--spacing-04, 0.25rem)}:host .powered-by [hidden]{display:none}:host .outer-container{position:absolute;top:0;right:0;bottom:0;left:0;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}:host .outer-container .left-panel,:host .outer-container .right-panel{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;overflow:hidden;background-color:var(--light, #ffffff)}:host .outer-container .left-panel yoo-banner,:host .outer-container .right-panel yoo-banner{--main-color:var(--danger, #d44333);--close-icon-color:var(--light, #ffffff);z-index:2}:host .outer-container .left-panel yoo-banner p,:host .outer-container .right-panel yoo-banner p{padding:var(--spacing-24, 1.5rem)}:host .outer-container .left-panel .content-container,:host .outer-container .right-panel .content-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:100%}:host .outer-container .left-panel .content-container .content,:host .outer-container .right-panel .content-container .content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-line-pack:center;align-content:center;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host .outer-container .left-panel .content-container .header,:host .outer-container .left-panel .content-container .footer,:host .outer-container .right-panel .content-container .header,:host .outer-container .right-panel .content-container .footer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:80%;padding:0 2rem}:host .outer-container .left-panel .background,:host .outer-container .right-panel .background{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;background-repeat:no-repeat;background-position-x:50%;background-size:cover}:host .outer-container .left-panel .background-overlay,:host .outer-container .right-panel .background-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;background-color:var(--dark, #000000);opacity:0.5}:host .outer-container .left-panel{-ms-flex:0 0 25rem;flex:0 0 25rem;color:var(--light, #ffffff)}:host .outer-container .left-panel video{position:absolute;height:100%}:host .outer-container .left-panel .content-container{z-index:2}:host .outer-container .left-panel .content-container .header{-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:start;justify-content:flex-start}:host .outer-container .left-panel .content-container .content{font-size:var(--font-size-18, 1.125rem)}:host .outer-container .left-panel .content-container .content .title-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;padding-bottom:1.25rem;font-size:var(--font-size-14, 0.875rem)}:host .outer-container .left-panel .content-container .content .subtitle-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding:0 2rem;letter-spacing:0.0625rem;text-align:center}:host .outer-container .left-panel .content-container .footer{-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}:host .outer-container .left-panel .text-container{padding-top:2rem;font-weight:var(--font-weight-700, 700);font-size:var(--font-size-18, 1.125rem);text-align:center}:host .outer-container .right-panel{width:100%;height:100%;color:var(--text-color, #807f83)}:host .outer-container .right-panel yoo-alert{width:100%}:host .outer-container .right-panel.ios yoo-banner{--margin-top-inner-container:0.6315rem}:host .outer-container .right-panel .content-container .header{-ms-flex-pack:end;justify-content:flex-end}:host .outer-container .right-panel .content-container .header.no-padding{padding-top:0.375rem !important}:host .outer-container .right-panel .content-container .header.reset{-ms-flex-pack:justify;justify-content:space-between}:host .outer-container .right-panel .content-container .header.iphone-x{padding-top:3rem !important}:host .outer-container .right-panel .content-container .header .close{width:1.875rem;height:1.875rem;border:solid var(--border-width-01, 0.0625rem) var(--stable, #adadad);border-radius:var(--spacing-16, 1rem);opacity:0}:host .outer-container .right-panel .content-container .header .close:hover{cursor:pointer}:host .outer-container .right-panel .content-container .header .logo{display:-ms-flexbox;display:flex;padding-right:1rem}:host .outer-container .right-panel .content-container .header .logo.hide{display:none}:host .outer-container .right-panel .content-container .content{width:100%}:host .outer-container .right-panel .content-container .content .login-title{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;padding-bottom:0.5rem;color:var(--dark, #000000);font-weight:var(--font-weight-700, 700);font-size:var(--font-size-28, 1.75rem)}:host .outer-container .right-panel .content-container .content .login-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;margin:auto}:host .outer-container .right-panel .content-container .content .login-container .login-subtitle{padding-bottom:2rem}:host .outer-container .right-panel .content-container .content .login-container .login-button{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center}:host .outer-container .right-panel .content-container .content .login-container-mobile{width:calc(100% - 4rem);height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:0 2rem;-webkit-transition:0.3s;transition:0.3s}:host .outer-container .right-panel .content-container .content .login-container-mobile.unfocused{margin-top:10%}:host .outer-container .right-panel .content-container .content .login-container-mobile.iphone-se-focus{margin-bottom:10rem}:host .outer-container .right-panel .content-container .content .login-container-mobile .login-button{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;margin-bottom:var(--spacing-16, 1rem);-webkit-transition:0.3s;transition:0.3s}:host .outer-container .right-panel .content-container .content .login-container-mobile .login-button.device-padding{margin-top:var(--spacing-08, 0.5rem)}:host .outer-container .right-panel .content-container .footer{width:100%}:host .outer-container .right-panel .content-container .footer.iphone-x{padding-bottom:var(--spacing-16, 1rem)}:host .outer-container .right-panel .content-container .video-header-container-mobile{position:relative;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;width:80%;padding:0 2rem;text-align:center}:host .outer-container .right-panel .content-container .video-header-container-mobile:not(.hide):not(.focused){min-height:120px}:host .outer-container .right-panel .content-container .video-header-container-mobile.hide{display:none}:host .outer-container .right-panel .content-container .video-header-container-mobile .auto-margin{margin:auto}:host .outer-container .right-panel .content-container .video-header-container-mobile .text{position:absolute;top:0;left:2rem;margin-bottom:1.875rem;font-weight:var(--font-weight-700, 700);font-size:var(--font-size-28, 1.75rem);letter-spacing:normal;text-align:left;text-transform:initial;opacity:0}:host .outer-container .right-panel .content-container .video-header-container-mobile .text.iphone-5{margin-bottom:0}:host .outer-container .right-panel .background{position:absolute;z-index:0;min-width:100%;min-height:100%;-webkit-filter:blur(0.15rem);filter:blur(0.15rem)}:host .outer-container .right-panel.video-background{color:var(--light, #ffffff);background-color:var(--dark-40, rgba(0, 0, 0, 0.4))}@-webkit-keyframes show{from{visibility:hidden;opacity:0}to{visibility:visible;opacity:1}}@keyframes show{from{visibility:hidden;opacity:0}to{visibility:visible;opacity:1}}:host .outer-container .right-panel.video-background video{position:absolute;min-width:100%;min-height:100%;-webkit-filter:blur(0.15rem);filter:blur(0.15rem)}:host .outer-container .right-panel.video-background video.android{visibility:hidden;opacity:0;-webkit-animation:show 500ms forwards;animation:show 500ms forwards;-webkit-animation-delay:1s;animation-delay:1s}:host .outer-container .right-panel.video-background .content-container .login-container-mobile yoo-form-input-container yoo-form-input{--input-text-color:cssvar(light) !important}:host .outer-container .right-panel.video-background .content-container .login-container-mobile yoo-form-input-container yoo-form-input.has-invalid-format{margin-top:0}:host(.web) .outer-container .left-panel .content-container .footer,:host(.web) .outer-container .left-panel .content-container .header,:host(.web) .outer-container .right-panel .content-container .footer,:host(.web) .outer-container .right-panel .content-container .header{height:6rem}:host(.web) .outer-container .left-panel .content-container .subtitle-container,:host(.web) .outer-container .right-panel .content-container .subtitle-container{padding:0 3rem;font-weight:300;font-size:var(--font-size-14, 0.875rem);line-height:1.3125rem;letter-spacing:normal}:host(.web) .outer-container .left-panel .content-container .subtitle-container b,:host(.web) .outer-container .right-panel .content-container .subtitle-container b{font-size:var(--font-size-18, 1.125rem);text-transform:uppercase}:host(.web) .outer-container .left-panel .content-container .footer,:host(.web) .outer-container .right-panel .content-container .footer{-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;font-size:var(--font-size-14, 0.875rem)}:host(.web) .outer-container .left-panel .content-container .header{-ms-flex-pack:center;justify-content:center}:host(.web) .outer-container .left-panel .content-container .header .logo img{height:2rem}:host(.web) .outer-container .left-panel .content-container .header .logo.big img{height:6rem;margin-top:4rem}:host(.web) .outer-container .right-panel .content-container .content{max-width:25rem}:host(.web) .outer-container .right-panel .content-container .content .login-container{width:100%;margin:auto}:host(.mobile) .outer-container .right-panel yoo-banner{--padding-top-container:1.325rem;margin-bottom:-1rem}:host(.mobile) .outer-container .right-panel .background-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;background-color:var(--dark, #000000);opacity:0.5}:host(.mobile) .outer-container .right-panel .content-container .header.reduce-padding,:host(.mobile) .outer-container .right-panel .content-container .footer.reduce-padding{padding-top:1rem}:host(.mobile) .outer-container .right-panel .content-container .header:not(.android){padding-top:2rem}:host(.mobile) .outer-container .right-panel .content-container .header.android{padding-top:1rem}:host(.mobile) .outer-container .right-panel .content-container .content{z-index:10;-ms-flex-pack:center;justify-content:center;width:100%;max-width:25rem;height:100%}:host(.mobile) .outer-container .right-panel .content-container .content.android{padding-top:0rem}:host(.mobile) .outer-container .right-panel .content-container .content .login-title{-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center;height:25%}:host(.mobile) .outer-container .right-panel .content-container .content .login-title .inner-title{text-align:center}:host(.mobile) .outer-container .right-panel .content-container .footer.android{padding-top:0}:host(.mobile) .outer-container .right-panel .content-container .footer.hide{display:none}:host(.mobile) .outer-container .right-panel .content-container .footer:not(.android){padding-bottom:1rem}@media (orientation: landscape){:host(.tablet.ios:not(.emulate-preview)) .outer-container .right-panel .content-container .content .video-header-container-mobile.focused{display:none}}";
+const googleColorSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMSAyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZD0iTTUuMDI1IDEwYzAtLjYzNS4xMDgtMS4yNDQuMy0xLjgxNUwxLjk2IDUuNjY4QTkuNjA2IDkuNjA2IDAgMCAwIC45MzQgMTBjMCAxLjU1Ny4zNyAzLjAyNSAxLjAyNCA0LjMyOGwzLjM2NC0yLjUyQTUuNjc2IDUuNjc2IDAgMCAxIDUuMDI1IDEwIiBmaWxsPSIjRkJCQzA1Ii8+CiAgICAgICAgPHBhdGggZD0iTTEwLjkzNCA0LjIyMmMxLjQxIDAgMi42ODIuNDkgMy42ODIgMS4yOWwyLjkxLTIuODQ1QzE1Ljc1MSAxLjE1NiAxMy40OC4yMjIgMTAuOTMzLjIyMmMtMy45NTIgMC03LjM0OCAyLjIxMy04Ljk3NCA1LjQ0NmwzLjM2NSAyLjUxN2MuNzc2LTIuMzA1IDIuOTg2LTMuOTYzIDUuNjEtMy45NjMiIGZpbGw9IiNFQTQzMzUiLz4KICAgICAgICA8cGF0aCBkPSJNMTAuOTM0IDE1Ljc3OGMtMi42MjMgMC00LjgzMy0xLjY1OC01LjYwOS0zLjk2M0wxLjk2IDE0LjMzMWMxLjYyNiAzLjIzNCA1LjAyMiA1LjQ0NyA4Ljk3NCA1LjQ0NyAyLjQ0IDAgNC43NjgtLjg0OCA2LjUxNi0yLjQzN2wtMy4xOTUtMi40MThjLS45MDEuNTU2LTIuMDM2Ljg1NS0zLjMyLjg1NSIgZmlsbD0iIzM0QTg1MyIvPgogICAgICAgIDxwYXRoIGQ9Ik0yMC40OCAxMGMwLS41NzgtLjA5MS0xLjItLjIyOC0xLjc3OGgtOS4zMThWMTJoNS4zNjRhNC40MDQgNC40MDQgMCAwIDEtMi4wNDMgMi45MjNsMy4xOTUgMi40MThjMS44MzYtMS42NjkgMy4wMy00LjE1NCAzLjAzLTcuMzQxIiBmaWxsPSIjNDI4NUY0Ii8+CiAgICA8L2c+Cjwvc3ZnPgo=';
+
+const Background = ({ hasBackgroundMedia, image }) => {
+  if (hasBackgroundMedia) {
+    return ([
+      h("div", { class: "background-overlay" }),
+      h("div", { class: "background-image", style: {
+          backgroundImage: `url(${image})`
+        } })
+    ]);
+  }
+};
+
+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: "copyright" }, copyrightMessage),
+  h("p", null, "|"),
+  h("p", { class: "version" }, `V${version}`)));
+
+const Header = ({ logo, title, textColor, error, closeClick }) => ([
+  error &&
+    h("yoo-banner", { id: "error-alert", class: {
+        'center header': true,
+        'sharp': !isWeb()
+      }, fill: true, closable: true, leftIcon: { name: 'info', color: isWeb() ? 'danger' : 'light' }, onCloseClick: closeClick, style: {
+        '--main-color': `var(--${isWeb() ? 'danger-20' : 'danger'})`,
+        '--main-text-color': `var(--${isWeb() ? 'dark' : 'light'})`,
+        '--close-icon-color': `var(--${isWeb() ? 'danger' : 'light'})`
+      } },
+      h("div", { slot: "content", class: {
+          'error-content': true,
+          'web': isWeb()
+        } },
+        h("p", null, translate(error)),
+        h("p", { class: "link", style: { color: `var(--${isWeb() ? 'danger' : 'light'})` }, innerHTML: translate('NEEDHELP') }))),
+  h("header", { class: "header" },
+    h("img", { src: logo, alt: "app logo" }),
+    h("h1", { style: { color: textColor } }, title))
+]);
+
+const LoginInput = ({ style, label, inputType, isFocused, bindReference, onIconClicked, onInputChanged, onInputBlurred, onInputFocused, onKeyPress, onShowPassword, clearInput, inputSize, hasValue, inputValue, showPassword, isMobile, isWhitelabel }) => (h("div", { class: {
+    'outer-input-container': true,
+    [inputSize]: true,
+    mobile: isMobile,
+    focused: isFocused,
+    'has-value': hasValue
+  }, style: style },
+  h("label", { htmlFor: `${inputType}-input` }, translate(label).toUpperCase()),
+  h("div", { class: `inner-input-container ${inputType}` },
+    h("div", { class: "icon-prefix", onMouseDown: (e) => e.preventDefault(), onClick: onIconClicked },
+      h("yoo-icon", { name: inputType === 'username' ? 'email' : 'password', size: inputSize === 'medium' ? 'small' : 'medium', color: !isWhitelabel ? 'app-color' : 'dark' })),
+    h("input", { id: `${inputType}-input`, type: inputType === 'username' || showPassword ? 'text' : 'password', name: inputType, ref: (el) => bindReference(el, inputType), autoComplete: inputType === 'username' ? inputType : 'current-password', placeholder: translate(`${inputType === 'username' ? 'USERNAME' : 'PASSWORD'}ENTER`), required: true, onBlur: () => onInputBlurred(), onChange: (ev) => onInputChanged(ev), onInput: (ev) => onInputChanged(ev), onFocus: () => onInputFocused(), onKeyDown: (ev) => onKeyPress(ev), value: inputValue }),
+    inputType === 'password' && h("div", { class: 'icon-suffix-focus input-show-icon', onMouseDown: (e) => e.preventDefault(), onClick: () => onShowPassword() },
+      h("yoo-icon", { size: inputSize === 'medium' ? 'small' : 'medium', name: showPassword ? 'offline' : 'eye', color: "stable-alt" })),
+    h("div", { class: `icon-suffix-focus ${inputType}-input-clear-icon`, onMouseDown: (e) => e.preventDefault(), onClick: () => (hasValue ? clearInput() : null) },
+      h("yoo-icon", { size: inputSize === 'medium' ? 'small' : 'medium', name: "cross" })))));
+
+const LoginForm = ({ ssoOnly, fieldTitleColor, getInputLabel, getDefaultInputValue, getInputValue, bindReference, clearInput, onIconClicked, focusedInput, host, showPassword, loginButtonRef, onEnterPressed, onInputBlurred, onInputChanged, onInputFocused, onFormSubmit, onShowPassword, helpButtonElement, ssoLoginButtonElement, isWhitelabel, buttonColor }) => {
+  const inputAndButtonSize = isWeb(host) ? 'medium' : 'large';
+  const loginDisabled = !(!!(getInputValue('username') || '') &&
+    !!(getInputValue('password') || ''));
+  const onKeyPress = (e) => {
+    if (e.key === 'Enter') {
+      onEnterPressed();
+    }
+  };
+  const renderInputContainer = (type) => {
+    return (h(LoginInput, { style: { '--field-title-color': fieldTitleColor }, isFocused: type === focusedInput, inputType: type, label: getInputLabel(type), bindReference: bindReference, onIconClicked: () => onIconClicked(type), inputSize: inputAndButtonSize, inputValue: isPresent(getInputValue(type)) ? getInputValue(type) : getDefaultInputValue(type) || '', hasValue: (getInputValue(type) || getDefaultInputValue(type) || '') ? true : false, onShowPassword: onShowPassword, showPassword: showPassword, onInputChanged: (e) => onInputChanged(e, type), onKeyPress: (e) => onKeyPress(e), onInputFocused: () => onInputFocused(type), onInputBlurred: () => onInputBlurred(), clearInput: () => clearInput(type), isMobile: !isWeb(host), isWhitelabel: isWhitelabel }));
+  };
+  return !ssoOnly
+    ? h("form", { autoComplete: "on", id: "login-form", novalidate: true, onSubmit: onFormSubmit },
+      renderInputContainer('username'),
+      renderInputContainer('password'),
+      helpButtonElement,
+      h("input", { id: "default-login-button", class: {
+          [inputAndButtonSize]: true,
+          mobile: !isWeb(host),
+          disabled: loginDisabled
+        }, ref: loginButtonRef, type: "submit", form: "login-form", name: "doLogin", disabled: loginDisabled, value: translate('LOGIN'), style: buttonColor && !loginDisabled ? { backgroundColor: buttonColor, color: getContrastColor(buttonColor) } : undefined }))
+    : h("div", { class: "sso-only-login" }, ssoLoginButtonElement);
+};
+
+const Divider = ({ style }) => (h("div", { id: "divider", style: style },
+  h("div", null),
+  h("p", null, "or"),
+  h("div", null)));
+
+const LoginOptions = ({ ssoOnly, hideAdvancedLogin, hideGoogleLogin, hasCustomBackground, dividerColor, googleLoginButtonElement, ssoLoginButtonElement }) => {
+  if (!ssoOnly) {
+    return (h("div", { class: {
+        'login-options': true,
+        'sso-only': ssoOnly,
+        'hide-google-login': hideGoogleLogin,
+        'hide-advanced-login': hideAdvancedLogin
+      } },
+      h(Divider, { style: hasCustomBackground ? { '--divider-color': dividerColor } : undefined }),
+      googleLoginButtonElement,
+      ssoLoginButtonElement));
+  }
+};
+
+const MainContent = ({ subtitle, textColor }, children) => (h("div", { class: "main-content" },
+  h("h3", { style: { color: textColor } }, translate(subtitle)),
+  children));
+
+const Sidepanel = ({ image, title, textColor }) => (h("div", { class: "sidepanel" },
+  h("h1", { style: { color: textColor } }, title),
+  image && h("img", { src: image })));
+
+const loginCss = ".outer-login-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;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}.outer-login-container h1{font-size:2.25rem;-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container h3{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:80%;margin-top:0;margin-bottom:0.875rem;font-size:var(--font-size-24, 1.5rem);-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container .content-container{z-index:2;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;padding:8rem var(--spacing-24, 1.5rem) 0}.outer-login-container.ios .content-container{position:absolute}.outer-login-container yoo-button{width:100%;margin-top:var(--spacing-16, 1rem)}.outer-login-container.keyboard-open:not(.ios){-ms-flex-pack:end;justify-content:flex-end}.outer-login-container.keyboard-transitioning.ios .content-container,.outer-login-container.keyboard-open.ios .content-container{-webkit-transform:translateY(-1rem);transform:translateY(-1rem)}.outer-login-container[sso-only] .content-container{padding-top:0}.outer-login-container[is-whitelabel] .content-container{padding-top:var(--spacing-96, 6rem)}@media screen and (max-height: 699px){.outer-login-container.keyboard-closed .content-container{padding-top:0}}@media screen and (min-width: 750px){.outer-login-container{--header-footer-border-color:var(--stable-light, #f1f1f1)}.outer-login-container .content-container{padding-top:var(--spacing-96, 6rem)}.outer-login-container:not([is-whitelabel]) .content-container{padding-top:0}.outer-login-container.keyboard-open{-ms-flex-pack:end;justify-content:flex-end;padding-bottom:20%}}@media screen and (min-width: 1000px) and (max-height: 500px){.outer-login-container.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{-webkit-transform:translateY(-20%);transform:translateY(-20%)}}.outer-login-container .background-overlay{position:absolute;z-index:1;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.25)}.outer-login-container .background-image{position:absolute;width:100%;height:100%;overflow:hidden;background-repeat:no-repeat;background-position:center;background-size:cover;background-attachment:fixed;-webkit-filter:blur(0.1rem);filter:blur(0.1rem)}.outer-login-container #divider{--divider-color:var(--stable-alt, #d0d0d0);display:grid;grid-template-areas:\". or .\";grid-template-columns:1fr auto 1fr;-ms-flex-align:center;align-items:center;width:100%;height:1.125rem;margin:var(--spacing-24, 1.5rem) 0;color:var(--divider-color);font-size:var(--font-size-12, 0.75rem)}.outer-login-container #divider div{border-top:0.0675rem solid var(--divider-color)}.outer-login-container #divider p{grid-area:or;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:0;padding:0 var(--spacing-16, 1rem)}@media screen and (min-width: 900px){.outer-login-container #divider{margin:var(--spacing-32, 2rem) 0}}.outer-login-container footer{position:absolute;bottom:0;z-index:2;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;font-size:var(--font-size-12, 0.75rem);text-align:center}.outer-login-container footer .powered-by{padding-right:var(--spacing-04, 0.25rem)}.outer-login-container footer .copyright{padding-right:var(--spacing-08, 0.5rem)}.outer-login-container footer .version{padding-left:var(--spacing-08, 0.5rem)}.outer-login-container.ios footer{padding-bottom:var(--spacing-16, 1rem)}@media screen and (min-width: 900px){.outer-login-container 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 *{margin:var(--spacing-24, 1.5rem) 0 1.875rem 0;line-height:1.125rem}}@media screen and (max-height: 550px){.outer-login-container footer{display:none}}.outer-login-container:not([is-whitelabel]) .powered-by{display:none}.outer-login-container.keyboard-transitioning footer,.outer-login-container.keyboard-open footer{display:none}.outer-login-container #error-alert{position:absolute;top:0;z-index:10;width:100%;margin:0;text-align:left}.outer-login-container #error-alert .error-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;margin:0.5rem 0}.outer-login-container #error-alert .error-content p{margin:0}.outer-login-container #error-alert .error-content .link{text-decoration:underline;cursor:pointer}.outer-login-container #error-alert .error-content .link yoo-link{color:inherit}.outer-login-container #error-alert .error-content.web{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;margin:1rem 0}.outer-login-container #error-alert .error-content.web p:not(.link){margin:0 1rem 0 0;text-align:left}.outer-login-container #error-alert .error-content.web .link{text-align:right}.outer-login-container.ios #error-alert{padding-top:var(--spacing-32, 2rem)}.outer-login-container .header img{height:4rem;max-height:4rem}.outer-login-container .header{position:absolute;top:0;z-index:2;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;width:100%;margin-top:var(--spacing-24, 1.5rem);text-align:center;-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container .header h1{margin:0}.outer-login-container .header img{max-width:80%;margin-top:var(--spacing-48, 3rem);-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container[shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container[is-whitelabel] .header h1{display:none}@media screen and (min-width: 750px){.outer-login-container .header img{height:4rem;max-height:4rem}.outer-login-container[logo-shape=square] .header img{height:6rem;max-height:6rem}}@media screen and (min-width: 1000px){.outer-login-container .header img{height:4rem;max-height:4rem}.outer-login-container .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{margin:2rem 0}.outer-login-container .header h1{display:none}.outer-login-container #error-alert{top:7.5rem;width:41.5rem;margin:0 calc((100% - 41.5rem) / 2)}.outer-login-container[is-whitelabel] #error-alert{top:9rem}.outer-login-container[logo-shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container[logo-shape=square] #error-alert{top:11rem}.outer-login-container.tablet #error-alert{position:absolute;top:0;z-index:10;width:100%;margin:0}}@media screen and (max-width: 750px){.outer-login-container[is-whitelabel] .header img{height:4rem;max-height:4rem}.outer-login-container[is-whitelabel] header h1{display:none}.outer-login-container[is-whitelabel] header img{max-width:90%;margin-top:var(--spacing-48, 3rem)}.outer-login-container[is-whitelabel][logo-shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container[is-whitelabel][logo-shape=square] .header img{margin-top:var(--spacing-64, 4rem)}}@media screen and (min-width: 900px) and (max-width: 1300px){.outer-login-container .header{margin-bottom:var(--spacing-32, 2rem)}.outer-login-container .header img{margin:var(--spacing-16, 1rem) 0}.outer-login-container #error-alert{top:6.5rem;width:41.5rem;margin:0 calc((100% - 41.5rem) / 2)}.outer-login-container[is-whitelabel] #error-alert{top:7rem}.outer-login-container[logo-shape=square] #error-alert{top:9rem}.outer-login-container.tablet #error-alert{position:absolute;top:0;z-index:10;width:100%;margin:0}}@media screen and (max-height: 799px){.outer-login-container:not([is-whitelabel]).keyboard-closed .header img{margin-top:var(--spacing-32, 2rem)}}@media screen and (max-height: 699px){.outer-login-container:not([is-whitelabel]).keyboard-closed .header h1{display:none}}@media screen and (max-height: 665px){.outer-login-container.keyboard-closed .header{display:none}}@media screen and (max-height: 500px){.outer-login-container.keyboard-open .header{display:none}}.outer-login-container:not([is-whitelabel]) .header img{height:2rem;max-height:2rem}.outer-login-container:not([is-whitelabel]) .header{margin-top:var(--spacing-16, 1rem)}.outer-login-container:not([is-whitelabel]) .header img{margin-bottom:var(--spacing-24, 1.5rem)}.outer-login-container{--disabled-color:var(--stable-light, #f1f1f1);--hover-color:var(--stable-light, #f1f1f1)}.outer-login-container #login-form{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:end;align-items:flex-end;width:100%}.outer-login-container .outer-input-container{width:100%;margin-bottom:0.75rem}.outer-login-container .outer-input-container yoo-context-dialog{width:100%}.outer-login-container yoo-button#help-button{-ms-flex-item-align:end;align-self:flex-end;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:1.5rem;margin:-0.5rem 0 0 0}.outer-login-container #default-login-button{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;margin-top:var(--spacing-16, 1rem);color:var(--stable-light, #f1f1f1);background-color:var(--app-color, #5a30f4);border-radius:var(--border-radius-08, 0.5rem);-webkit-transition:color 0.1s ease-in-out;transition:color 0.1s ease-in-out}.outer-login-container #default-login-button.disabled{color:var(--stable-alt, #d0d0d0);background-color:var(--disabled-color)}.outer-login-container #default-login-button:hover:not(.disabled){-webkit-filter:brightness(90%);filter:brightness(90%)}.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{font-size:var(--font-size-16, 1rem)}.outer-login-container #default-login-button.large{height:3rem;font-size:var(--font-size-16, 1rem)}.outer-login-container.keyboard-open:not(.ios) #login-form{padding-bottom:var(--spacing-64, 4rem)}.outer-login-container.keyboard-open:not(.ios) #login-form #default-login-button{position:absolute;bottom:var(--spacing-16, 1rem);left:var(--spacing-24, 1.5rem);width:calc(100% - var(--spacing-48, 3rem))}.outer-login-container[sso-only] #login-form{display:none}.outer-login-container[sso-only] .sso-only-login{display:block}.outer-login-container:not([sso-only]) .sso-only-login{display:none}.login-options .google-logo{margin-right:var(--spacing-08, 0.5rem)}.login-options.sso-only{display:none}.outer-login-container.keyboard-open .login-options,.outer-login-container.keyboard-transitioning:not(.ios) .login-options{display:none}.login-options.hide-advanced-login:not(.hide-google-login) #sso-login-button,.login-options.hide-advanced-login:not(.hide-google-login) #sso-login-button *{visibility:hidden !important}.login-options.hide-google-login:not(.hide-advanced-login) #google-login-button{-webkit-transform:translateY(4rem);transform:translateY(4rem);visibility:hidden !important}.login-options.hide-google-login:not(.hide-advanced-login) #sso-login-button{-webkit-transform:translateY(-4rem);transform:translateY(-4rem)}.login-options.hide-advanced-login.hide-google-login,.login-options.hide-advanced-login.hide-google-login *{visibility:hidden !important}@media screen and (min-width: 750px) and (max-width: 999px) and (orientation: portrait){.outer-login-container.keyboard-transitioning .login-options,.outer-login-container.keyboard-open .login-options{display:block}}@media screen and (min-width: 900px){.outer-login-container .login-options .google-logo{height:1rem}}.outer-login-container .main-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;max-width:22rem;-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container[sso-only] .main-content{margin-top:calc(var(--spacing-64, 4rem) * -1)}@media screen and (min-width: 900px){.outer-login-container .main-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:18.75rem}.outer-login-container .main-content yoo-form-input-container{font-size:var(--font-size-12, 0.75rem)}}@media screen and (max-width: 899px){.outer-login-container:not([is-whitelabel]) .main-content h3{display:none}.outer-login-container.focused h3{-webkit-transform:scale(1.2) translateX(10%);transform:scale(1.2) translateX(10%)}}.outer-login-container .sidepanel{margin-right:var(--spacing-64, 4rem)}.outer-login-container .sidepanel h1{margin-top:0}@media screen and (min-width: 1000px){.outer-login-container .sidepanel{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:18.75rem}.outer-login-container .sidepanel yoo-form-input-container{font-size:var(--font-size-12, 0.75rem)}}@media screen and (max-width: 999px){.outer-login-container .sidepanel{display:none}}.outer-login-container:not([is-double-column]) .sidepanel{display:none}.outer-input-container{--input-background-color:var(--light, #ffffff);--input-border-color:var(--dark, #000000);--input-text-color:var(--text-color, #807f83);--input-font-size:var(--font-size-16, 1rem);--caret-color:var(--app-color, #5a30f4);display:block;width:100%;color:var(--dark, #000000);display:inline-block;-webkit-box-sizing:content-box;box-sizing:content-box;min-width:0;margin:0;padding:0;font-family:var(--font-family, \"Lato\");line-height:1;white-space:normal;vertical-align:middle;background:none;border:0}.outer-input-container:focus{outline:0}.outer-input-container[type=reset],.outer-input-container[type=button],.outer-input-container[type=submit],.outer-input-container[type=checkbox],.outer-input-container[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box}.outer-input-container[type=search]{-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}.outer-input-container label{color:var(--field-title-color);font-size:var(--font-size-12, 0.75rem)}.outer-input-container .float-left{float:left;margin-top:var(--spacing-04, 0.25rem);margin-right:var(--spacing-08, 0.5rem);cursor:pointer}.outer-input-container .float-left:hover{fill:var(--app-color, #5a30f4)}.outer-input-container .truncate{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.outer-input-container .truncate:hover{color:var(--app-color, #5a30f4)}.outer-input-container.focused .inner-input-container{border:var(--border-width-01, 0.0625rem) solid var(--input-border-color)}.outer-input-container .inner-input-container{position:relative;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;margin-top:0.625rem;direction:ltr;background:var(--input-background-color);border:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0);border-radius:var(--border-radius-08, 0.5rem)}.outer-input-container .inner-input-container.noborder{border:none !important}.outer-input-container .inner-input-container .icon-prefix,.outer-input-container .inner-input-container .icon-suffix{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:0.4375rem var(--spacing-08, 0.5rem);color:inherit}.outer-input-container .inner-input-container .inline-left{display:inline-block;margin-left:var(--spacing-04, 0.25rem)}.outer-input-container .inner-input-container .icon-suffix-focus{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:0.4375rem var(--spacing-08, 0.5rem);color:inherit;display:flex;flex-direction:row;padding-right:var(--spacing-08, 0.5rem);-webkit-transition:display ease-in-out 0.2s;transition:display ease-in-out 0.2s}.outer-input-container .inner-input-container .icon-suffix-focus yoo-icon{visibility:hidden !important}.outer-input-container .inner-input-container input{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;position:relative;display:block;-ms-flex:1;flex:1;width:100%;min-width:0;padding:var(--spacing-08, 0.5rem);padding-right:2rem;padding-left:2rem;color:inherit;font-weight:var(--font-weight-400, 400);font-size:var(--input-font-size);font-family:var(--font-family, \"Lato\");line-height:1.5;text-align:left;background:transparent;border:none;border-radius:var(--border-radius-08, 0.5rem);-webkit-box-shadow:transparent 0 0 0 62.5rem inset;box-shadow:transparent 0 0 0 62.5rem inset;-webkit-appearance:none;caret-color:var(--caret-color)}.outer-input-container .inner-input-container input::-webkit-input-placeholder{color:var(--text-color, #807f83);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);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);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);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}.outer-input-container .inner-input-container input:focus{outline:none}.outer-input-container .inner-input-container input.hide-value{color:transparent}.outer-input-container .inner-input-container.password input{padding-right:4rem}.outer-input-container .inner-input-container .icon-prefix,.outer-input-container .inner-input-container .password-input-clear-icon,.outer-input-container .inner-input-container .username-input-clear-icon,.outer-input-container .inner-input-container .input-show-icon{position:absolute;z-index:5}.outer-input-container .inner-input-container .icon-prefix{left:0}.outer-input-container .inner-input-container .password-input-clear-icon,.outer-input-container .inner-input-container .username-input-clear-icon{right:0}.outer-input-container .inner-input-container .input-show-icon{right:2rem}.outer-input-container.has-value.focused .inner-input-container.username .username-input-clear-icon yoo-icon{visibility:visible !important}.outer-input-container.has-value.focused .inner-input-container.password .input-show-icon yoo-icon{visibility:visible !important}.outer-input-container.has-value.focused .inner-input-container.password .password-input-clear-icon yoo-icon{visibility:visible !important}.outer-input-container.large .inner-input-container{height:3rem}.outer-input-container.large .inner-input-container input{padding-right:2.5rem;padding-left:2.5rem}.outer-input-container.large .inner-input-container.password input{padding-right:4.5rem}.outer-input-container.large .inner-input-container .icon-prefix{padding:0.75rem var(--spacing-08, 0.5rem)}.outer-input-container.large .inner-input-container .password-input-clear-icon,.outer-input-container.large .inner-input-container .username-input-clear-icon{padding:0.75rem var(--spacing-08, 0.5rem)}.outer-input-container.large .inner-input-container .input-show-icon{padding:0.75rem var(--spacing-08, 0.5rem)}.outer-input-container.medium .inner-input-container{height:2rem;font-size:var(--font-size-14, 0.875rem);border-radius:var(--border-radius-04, 0.25rem)}.outer-input-container.medium .inner-input-container input{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input::-webkit-input-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input:-moz-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input::-moz-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input:-ms-input-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.small .inner-input-container{height:1.5rem;border-radius:var(--border-radius-04, 0.25rem)}.outer-input-container.small .inner-input-container input{font-size:var(--font-size-14, 0.875rem)}.accent .inner-input-container{border-color:var(--accent, #276ef1)}.accent .inner-input-container .icon-prefix{border-right:none}.accent .inner-input-container .icon-prefix yoo-icon{fill:var(--accent, #276ef1)}.accent .inner-input-container .icon-suffix{color:var(--accent, #276ef1);border-left:none}.accent .inner-input-container input{color:var(--accent, #276ef1)}.accent .inner-input-container input::-webkit-input-placeholder{color:var(--accent, #276ef1)}.accent .inner-input-container input:-moz-placeholder{color:var(--accent, #276ef1)}.accent .inner-input-container input::-moz-placeholder{color:var(--accent, #276ef1)}.accent .inner-input-container input:-ms-input-placeholder{color:var(--accent, #276ef1)}.success .inner-input-container{border-color:var(--success, #3aa76d)}.success .inner-input-container .icon-prefix{border-right:none}.success .inner-input-container .icon-prefix yoo-icon{fill:var(--success, #3aa76d)}.success .inner-input-container .icon-suffix{color:var(--success, #3aa76d);border-left:none}.success .inner-input-container input{color:var(--success, #3aa76d)}.success .inner-input-container input::-webkit-input-placeholder{color:var(--success, #3aa76d)}.success .inner-input-container input:-moz-placeholder{color:var(--success, #3aa76d)}.success .inner-input-container input::-moz-placeholder{color:var(--success, #3aa76d)}.success .inner-input-container input:-ms-input-placeholder{color:var(--success, #3aa76d)}.app-color .inner-input-container{border-color:var(--app-color, #5a30f4)}.app-color .inner-input-container .icon-prefix{border-right:none}.app-color .inner-input-container .icon-prefix yoo-icon{fill:var(--app-color, #5a30f4)}.app-color .inner-input-container .icon-suffix{color:var(--app-color, #5a30f4);border-left:none}.app-color .inner-input-container input{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input::-webkit-input-placeholder{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input:-moz-placeholder{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input::-moz-placeholder{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input:-ms-input-placeholder{color:var(--app-color, #5a30f4)}.info .inner-input-container{border-color:var(--info, #d84c96)}.info .inner-input-container .icon-prefix{border-right:none}.info .inner-input-container .icon-prefix yoo-icon{fill:var(--info, #d84c96)}.info .inner-input-container .icon-suffix{color:var(--info, #d84c96);border-left:none}.info .inner-input-container input{color:var(--info, #d84c96)}.info .inner-input-container input::-webkit-input-placeholder{color:var(--info, #d84c96)}.info .inner-input-container input:-moz-placeholder{color:var(--info, #d84c96)}.info .inner-input-container input::-moz-placeholder{color:var(--info, #d84c96)}.info .inner-input-container input:-ms-input-placeholder{color:var(--info, #d84c96)}.warning .inner-input-container{border-color:var(--warning, #ed6e33)}.warning .inner-input-container .icon-prefix{border-right:none}.warning .inner-input-container .icon-prefix yoo-icon{fill:var(--warning, #ed6e33)}.warning .inner-input-container .icon-suffix{color:var(--warning, #ed6e33);border-left:none}.warning .inner-input-container input{color:var(--warning, #ed6e33)}.warning .inner-input-container input::-webkit-input-placeholder{color:var(--warning, #ed6e33)}.warning .inner-input-container input:-moz-placeholder{color:var(--warning, #ed6e33)}.warning .inner-input-container input::-moz-placeholder{color:var(--warning, #ed6e33)}.warning .inner-input-container input:-ms-input-placeholder{color:var(--warning, #ed6e33)}.danger .inner-input-container{border-color:var(--danger, #d44333)}.danger .inner-input-container .icon-prefix{border-right:none}.danger .inner-input-container .icon-prefix yoo-icon{fill:var(--danger, #d44333)}.danger .inner-input-container .icon-suffix{color:var(--danger, #d44333);border-left:none}.danger .inner-input-container input{color:var(--danger, #d44333)}.danger .inner-input-container input::-webkit-input-placeholder{color:var(--danger, #d44333)}.danger .inner-input-container input:-moz-placeholder{color:var(--danger, #d44333)}.danger .inner-input-container input::-moz-placeholder{color:var(--danger, #d44333)}.danger .inner-input-container input:-ms-input-placeholder{color:var(--danger, #d44333)}.dark .inner-input-container{border-color:var(--dark, #000000)}.dark .inner-input-container .icon-prefix{border-right:none}.dark .inner-input-container .icon-prefix yoo-icon{fill:var(--dark, #000000)}.dark .inner-input-container .icon-suffix{color:var(--dark, #000000);border-left:none}.dark .inner-input-container input{color:var(--dark, #000000)}.dark .inner-input-container input::-webkit-input-placeholder{color:var(--dark, #000000)}.dark .inner-input-container input:-moz-placeholder{color:var(--dark, #000000)}.dark .inner-input-container input::-moz-placeholder{color:var(--dark, #000000)}.dark .inner-input-container input:-ms-input-placeholder{color:var(--dark, #000000)}.stable-light .inner-input-container{border-color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container .icon-prefix{border-right:none}.stable-light .inner-input-container .icon-prefix yoo-icon{fill:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container .icon-suffix{color:var(--stable-light, #f1f1f1);border-left:none}.stable-light .inner-input-container input{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input::-webkit-input-placeholder{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input:-moz-placeholder{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input::-moz-placeholder{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input:-ms-input-placeholder{color:var(--stable-light, #f1f1f1)}.stable .inner-input-container{border-color:var(--stable, #adadad)}.stable .inner-input-container .icon-prefix{border-right:none}.stable .inner-input-container .icon-prefix yoo-icon{fill:var(--stable, #adadad)}.stable .inner-input-container .icon-suffix{color:var(--stable, #adadad);border-left:none}.stable .inner-input-container input{color:var(--stable, #adadad)}.stable .inner-input-container input::-webkit-input-placeholder{color:var(--stable, #adadad)}.stable .inner-input-container input:-moz-placeholder{color:var(--stable, #adadad)}.stable .inner-input-container input::-moz-placeholder{color:var(--stable, #adadad)}.stable .inner-input-container input:-ms-input-placeholder{color:var(--stable, #adadad)}.light .inner-input-container{border-color:var(--light, #ffffff)}.light .inner-input-container .icon-prefix{border-right:none}.light .inner-input-container .icon-prefix yoo-icon{fill:var(--light, #ffffff)}.light .inner-input-container .icon-suffix{color:var(--light, #ffffff);border-left:none}.light .inner-input-container input{color:var(--light, #ffffff)}.light .inner-input-container input::-webkit-input-placeholder{color:var(--light, #ffffff)}.light .inner-input-container input:-moz-placeholder{color:var(--light, #ffffff)}.light .inner-input-container input::-moz-placeholder{color:var(--light, #ffffff)}.light .inner-input-container input:-ms-input-placeholder{color:var(--light, #ffffff)}";
 
-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;
 const YooLoginComponent = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.doLogin = createEvent(this, "doLogin", 7);
-    this.languageSelectedParent = createEvent(this, "languageSelectedParent", 7);
+    this.googleLoginRequested = createEvent(this, "googleLoginRequested", 7);
     this.passwordResetModalRequested = createEvent(this, "passwordResetModalRequested", 7);
-    this.magicLinkModalRequested = createEvent(this, "magicLinkModalRequested", 7);
     this.advancedLoginRequested = createEvent(this, "advancedLoginRequested", 7);
-    this.webSubtitleText = [];
-    this.webLoginFormTitle = '';
-    this.leftPanelFooterText = 'POWEREDBY';
-    this.webLoginFormSubtitle = 'LOGINSUBTITLE';
-    this.forgotPasswordText = 'YOOBICHELP';
-    this.emailLabel = 'USERNAME';
+    this.magicLinkModalRequested = createEvent(this, "magicLinkModalRequested", 7);
+    //* COMPONENT TEXT 
+    // Title Text
+    this.mainTitle = '';
+    // Subtitle Text
+    this.subtitle = 'LOGINSUBTITLE';
+    // Username label text
+    this.usernameLabel = 'USERNAME';
+    // Password label text
     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() {
+    // Help text like 'forgot password?'
+    this.helpText = 'FORGOTPASSWORD';
+    // Reset password text (for action sheet button)
+    this.resetPasswordText = 'RESETPASSWORD';
+    // Magic link text (for action sheet button)
+    this.magicLinkText = 'MAGICLINK';
+    // 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);
+  }
+  get hasBackgroundMedia() {
+    return (this.backgroundSrc)
+      ? true
+      : false;
   }
-  onLeftPanelChanged(newValue) {
-    if (newValue) {
-      this.updateVideoSrcOnDidUpdate = true;
+  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();
+  onInputBlurred() {
+    if (!isNativeMobile()) {
+      this.isFocused = false;
     }
-  }
-  hideTitleAndFooter() {
-    if (this.emailFocused || this.passwordFocused) {
-      if (this.loginContainerMobile) {
-        const height = isIphone5() ? '75%' : '100%';
-        this.loginContainerMobile.setAttribute('style', `height: ${height};`);
-      }
-      this.deviceInputFocused = true;
-    }
-    else {
-      if (this.loginContainerMobile) {
-        this.loginContainerMobile.setAttribute('style', `height: ${this.loginContainerMobileHeight}px;`);
-      }
-      this.deviceInputFocused = false;
+    else { // 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;
+    }
+    else {
+      return this.defaultPassword;
     }
-    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))));
+  getInputValue(type) {
+    return this[type];
   }
-  renderRightPanel() {
-    let backStyle;
-    if (!this.hasVideoBackground() && !isWeb(this.host)) {
-      backStyle = { backgroundImage: `url(${this.backgroundSrc})` };
+  getInputLabel(type) {
+    return this[`${type}Label`];
+  }
+  validateLogin() {
+    if (this.loginButtonElement) {
+      this.loginButtonElement.disabled = !(this.isUsernameValid && this.isPasswordValid);
     }
-    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')))))));
+  }
+  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 }, 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: googleColorSvg, alt: "google logo", slot: "start" }), type === 'HELP'
+      ? translate(this.helpText)
+      : translate(`${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,
+        '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, 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(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;
+        }
+      } })));
   }
   get host() { return getElement(this); }
-  static get watchers() { return {
-    "showLeftPanel": ["onLeftPanelChanged"]
-  }; }
 };
 YooLoginComponent.style = loginCss;