@yoobic/yobi 8.4.0-1 → 8.4.0-2

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

@@ -210,7 +210,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   width: 100%;
   height: 100%;
 }
-.outer-login-container .login-main-title, .outer-login-container .login-sub-title {
+.outer-login-container .login-main-title,
+.outer-login-container .login-sub-title {
   font-weight: 900;
 }
 .outer-login-container .login-main-title {
@@ -220,7 +221,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 .outer-login-container .login-sub-title {
   width: fit-content;
   margin-top: 0;
-  margin-bottom: 0.875rem;
+  margin-bottom: var(--spacing-16, 1rem);
   transition: all ease-in-out 0.2s;
 }
 .outer-login-container .content-container {
@@ -320,7 +321,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   font-size: var(--font-size-12, 0.75rem);
 }
 .outer-login-container #divider div {
-  border-top: 0.0675rem solid var(--divider-color);
+  border-top: var(--border-width-01, 0.0625rem) solid var(--divider-color);
 }
 .outer-login-container #divider p {
   grid-area: or;
@@ -363,10 +364,10 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   .outer-login-container:not(.emulated) footer {
     width: 41.5rem;
     margin: 0 calc((100% - 41.5rem) / 2);
-    border-top: var(--header-footer-border-color) 0.0675rem solid;
+    border-top: var(--border-width-01, 0.0625rem) solid var(--header-footer-border-color);
   }
   .outer-login-container:not(.emulated) footer * {
-    margin: var(--spacing-24, 1.5rem) 0 1.875rem 0;
+    margin: var(--spacing-24, 1.5rem) 0 var(--spacing-32, 2rem) 0;
     line-height: 1.125rem;
   }
 }
@@ -396,7 +397,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  margin: 0.5rem 0;
+  margin: var(--spacing-08, 0.5rem) 0;
 }
 .outer-login-container #error-alert .error-content p {
   margin: 0;
@@ -412,21 +413,21 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  margin: 1rem 0;
+  margin: var(--spacing-16, 1rem) 0;
 }
 .outer-login-container #error-alert .error-content.web p {
-  margin: 0 1rem 0 0;
+  margin: 0 var(--spacing-16, 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);
+  padding-top: var(--safe-area-inset-top);
 }
 .outer-login-container .header img {
-  height: 4rem;
-  max-height: 4rem;
+  height: var(--logo-06, 4rem);
+  max-height: var(--logo-06, 4rem);
 }
 .outer-login-container .header {
   position: absolute;
@@ -443,7 +444,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 .outer-login-container .header .login-main-title {
   margin: 0;
-  padding: 0 0.3rem;
+  padding: 0 var(--spacing-04, 0.25rem);
 }
 .outer-login-container .header img {
   max-width: 80%;
@@ -451,8 +452,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   transition: all ease-in-out 0.2s;
 }
 .outer-login-container[shape=square] .header img {
-  height: 6rem;
-  max-height: 6rem;
+  height: var(--logo-08, 6rem);
+  max-height: var(--logo-08, 6rem);
 }
 .outer-login-container[is-whitelabel] .header .login-main-title {
   display: none;
@@ -460,26 +461,26 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 
 @media screen and (min-width: 750px) {
   .outer-login-container:not(.emulated) .header img {
-    height: 4rem;
-    max-height: 4rem;
+    height: var(--logo-06, 4rem);
+    max-height: var(--logo-06, 4rem);
   }
   .outer-login-container:not(.emulated)[logo-shape=square] .header img {
-    height: 6rem;
-    max-height: 6rem;
+    height: var(--logo-08, 6rem);
+    max-height: var(--logo-08, 6rem);
   }
 }
 @media screen and (min-width: 1000px) {
   .outer-login-container:not(.emulated) .header img {
-    height: 4rem;
-    max-height: 4rem;
+    height: var(--logo-06, 4rem);
+    max-height: var(--logo-06, 4rem);
   }
   .outer-login-container:not(.emulated) .header {
     width: 41.5rem;
     margin: 0 calc((100% - 41.5rem) / 2);
-    border-bottom: var(--header-footer-border-color) 0.0675rem solid;
+    border-bottom: var(--border-width-01, 0.0625rem) solid var(--header-footer-border-color);
   }
   .outer-login-container:not(.emulated) .header img {
-    margin: 2rem 0;
+    margin: var(--spacing-32, 2rem) 0;
   }
   .outer-login-container:not(.emulated) .header .login-main-title {
     display: none;
@@ -493,8 +494,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
     top: 9rem;
   }
   .outer-login-container:not(.emulated)[logo-shape=square] .header img {
-    height: 6rem;
-    max-height: 6rem;
+    height: var(--logo-08, 6rem);
+    max-height: var(--logo-08, 6rem);
   }
   .outer-login-container:not(.emulated)[logo-shape=square] #error-alert {
     top: 11rem;
@@ -509,8 +510,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 @media screen and (max-width: 750px) {
   .outer-login-container[is-whitelabel]:not(.emulated) .header img {
-    height: 4rem;
-    max-height: 4rem;
+    height: var(--logo-06, 4rem);
+    max-height: var(--logo-06, 4rem);
   }
   .outer-login-container[is-whitelabel]:not(.emulated) header .login-main-title {
     display: none;
@@ -520,16 +521,16 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
     margin-top: var(--spacing-48, 3rem);
   }
   .outer-login-container[is-whitelabel]:not(.emulated)[logo-shape=square] .header img {
-    height: 6rem;
-    max-height: 6rem;
+    height: var(--logo-08, 6rem);
+    max-height: var(--logo-08, 6rem);
   }
   .outer-login-container[is-whitelabel]:not(.emulated)[logo-shape=square] .header img {
     margin-top: var(--spacing-64, 4rem);
   }
 }
 .outer-login-container[is-whitelabel].emulated .header img {
-  height: 4rem;
-  max-height: 4rem;
+  height: var(--logo-06, 4rem);
+  max-height: var(--logo-06, 4rem);
 }
 .outer-login-container[is-whitelabel].emulated header .login-main-title {
   display: none;
@@ -539,15 +540,15 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin-top: var(--spacing-48, 3rem);
 }
 .outer-login-container[is-whitelabel].emulated[logo-shape=square] .header img {
-  height: 6rem;
-  max-height: 6rem;
+  height: var(--logo-08, 6rem);
+  max-height: var(--logo-08, 6rem);
 }
 .outer-login-container[is-whitelabel].emulated[logo-shape=square] .header img {
   margin-top: var(--spacing-64, 4rem);
 }
 .outer-login-container[is-whitelabel].emulated:not(.hide-advanced-login):not(.hide-google-login)[logo-shape=square] .header img {
-  height: 6rem;
-  max-height: 6rem;
+  height: var(--logo-08, 6rem);
+  max-height: var(--logo-08, 6rem);
 }
 .outer-login-container[is-whitelabel].emulated:not(.hide-advanced-login):not(.hide-google-login)[logo-shape=square] .header img {
   margin-top: var(--spacing-48, 3rem);
@@ -625,8 +626,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   }
 }
 .outer-login-container:not([is-whitelabel]) .header img {
-  height: 2rem;
-  max-height: 2rem;
+  height: var(--logo-04, 2rem);
+  max-height: var(--logo-04, 2rem);
 }
 .outer-login-container:not([is-whitelabel]) .header {
   margin-top: var(--spacing-16, 1rem);
@@ -636,7 +637,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 
 .outer-login-container.emulated #error-alert {
-  padding-top: var(--spacing-24, 1.5rem);
+  padding-top: var(--safe-area-inset-top);
 }
 
 .outer-login-container {
@@ -664,21 +665,21 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 .outer-login-container .help-buttons yoo-button#help-button {
   width: fit-content;
   height: 1.5rem;
-  margin: -0.5rem 0 0 0;
+  margin: calc(var(--spacing-08, 0.5rem) * -1) 0 0 0;
 }
 .outer-login-container .help-buttons yoo-button#magic-button {
   width: fit-content;
   height: 1.5rem;
-  margin: -0.5rem 0 0 0;
+  margin: calc(var(--spacing-08, 0.5rem) * -1) 0 0 0;
 }
 .outer-login-container .help-buttons.mobile, .outer-login-container .help-buttons.emulated {
   justify-content: flex-end;
 }
 .outer-login-container .help-buttons:not(.mobile):not(.emulated) yoo-button#help-button {
-  margin: -0.25rem -0.5rem 0 0;
+  margin: calc(var(--spacing-04, 0.25rem) * -1) calc(var(--spacing-08, 0.5rem) * -1) 0 0;
 }
 .outer-login-container .help-buttons:not(.mobile):not(.emulated) yoo-button#magic-button {
-  margin: -0.25rem 0 0 -0.5rem;
+  margin: calc(var(--spacing-04, 0.25rem) * -1) 0 0 calc(var(--spacing-08, 0.5rem) * -1);
 }
 .outer-login-container #default-login-button {
   box-sizing: border-box;
@@ -932,7 +933,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   display: flex;
   box-sizing: border-box;
   width: 100%;
-  margin-top: 0.625rem;
+  margin-top: var(--spacing-08, 0.5rem);
   direction: ltr;
   background: var(--input-background-color);
   border: var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0);
@@ -946,7 +947,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 0.4375rem var(--spacing-08, 0.5rem);
+  padding: var(--spacing-08, 0.5rem);
   color: inherit;
 }
 .outer-input-container .inner-input-container .inline-left {
@@ -957,7 +958,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 0.4375rem var(--spacing-08, 0.5rem);
+  padding: var(--spacing-08, 0.5rem);
   color: inherit;
   display: flex;
   flex-direction: row;
@@ -978,9 +979,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   flex: 1;
   width: 100%;
   min-width: 0;
-  padding: var(--spacing-08, 0.5rem);
-  padding-right: 2rem;
-  padding-left: 2rem;
+  padding: var(--spacing-08, 0.5rem) var(--spacing-32, 2rem);
   color: inherit;
   font-weight: var(--font-weight-400, 400);
   font-size: var(--input-font-size);
@@ -1021,7 +1020,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   color: transparent;
 }
 .outer-input-container .inner-input-container.password input {
-  padding-right: 4rem;
+  padding-right: var(--spacing-64, 4rem);
 }
 .outer-input-container .inner-input-container .icon-prefix,
 .outer-input-container .inner-input-container .password-input-clear-icon,
@@ -1038,7 +1037,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   right: 0;
 }
 .outer-input-container .inner-input-container .input-show-icon {
-  right: 2rem;
+  right: var(--spacing-32, 2rem);
 }
 
 .outer-input-container.has-value.focused .inner-input-container.username .username-input-clear-icon yoo-icon {
@@ -1055,21 +1054,22 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   height: 3rem;
 }
 .outer-input-container.large .inner-input-container input {
-  padding-right: 2.5rem;
-  padding-left: 2.5rem;
+  padding-right: var(--spacing-56, 3.5rem);
+  padding-left: var(--spacing-56, 3.5rem);
 }
 .outer-input-container.large .inner-input-container.password input {
-  padding-right: 4.5rem;
+  padding-right: var(--spacing-96, 6rem);
 }
 .outer-input-container.large .inner-input-container .icon-prefix {
-  padding: 0.75rem var(--spacing-08, 0.5rem);
+  padding: 0.75rem var(--spacing-16, 1rem);
 }
 .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);
+  padding: 0.75rem var(--spacing-16, 1rem);
 }
 .outer-input-container.large .inner-input-container .input-show-icon {
-  padding: 0.75rem var(--spacing-08, 0.5rem);
+  right: var(--spacing-40, 2.5rem);
+  padding: 0.75rem var(--spacing-16, 1rem);
 }
 
 .outer-input-container.medium .inner-input-container {

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

@@ -1,5 +1,5 @@
 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 { addKeyboardEventListener, disableKeyboardResize, isAndroid, isChrome, 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';
@@ -61,6 +61,7 @@ export class YooLoginComponent {
   }
   componentDidLoad() {
     var _a;
+    !isNativeMobile() && isChrome() && this.checkAutofill();
     (_a = ScreenOrientation === null || ScreenOrientation === void 0 ? void 0 : ScreenOrientation.onChange) === null || _a === void 0 ? void 0 : _a.call(ScreenOrientation).subscribe(() => forceUpdate(this));
     this.validateLogin();
   }
@@ -68,6 +69,17 @@ export class YooLoginComponent {
     setStatusBarDarkMode(false);
     isAndroid() && removeKeyboardEventListeners();
   }
+  checkAutofill() {
+    let areFieldsAutofilled = false;
+    const intervalCheck = setInterval(() => {
+      if (document.querySelectorAll(':-webkit-autofill').length === 2 && !areFieldsAutofilled) {
+        this.loginButtonElement.classList.remove('disabled');
+        this.loginButtonElement.removeAttribute('disabled');
+        areFieldsAutofilled = true;
+        clearInterval(intervalCheck);
+      }
+    });
+  }
   onAlertClosed() {
     this.error = '';
   }

package/dist/collection/utils/helpers/draggable-tags-helpers.js

@@ -25,19 +25,14 @@ export async function showWarningBanner(container, showBanner = true, messageKey
   const bannerElement = (container === null || container === void 0 ? void 0 : container.querySelector('yoo-banner')) || ((_a = container === null || container === void 0 ? void 0 : container.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('yoo-banner'));
   if (bannerElement) {
     const bannerStyle = {
-      width: '100%',
       transition: ['height', 'opacity'].map(prop => `${prop} .5s ease-in-out`).join(', '),
-      backgroundColor: `var(--${backgroundColor})`,
       height: 'auto',
       opacity: '1',
-      padding: `${showBanner ? 'var(--spacing-08)' : '0'}`
+      padding: `${showBanner ? 'var(--spacing-08)' : '0'}`,
+      fontWeight: 'var(--font-weight-700)'
     };
     const content = bannerElement.querySelector('p[slot="content"]');
     content.innerHTML = translate(messageKey);
-    Object.assign(content.style, {
-      color: 'var(--light)',
-      fontWeight: 'var(--font-weight-700)'
-    });
     await bannerElement.componentOnReady();
     const bannerHeight = bannerElement.firstElementChild.clientHeight;
     Object.assign(bannerElement.style, {
@@ -45,6 +40,8 @@ export async function showWarningBanner(container, showBanner = true, messageKey
       height: `${showBanner ? bannerHeight : 0}px`,
       opacity: showBanner ? '1' : '0'
     });
+    bannerElement.style.setProperty('--main-color', `var(--${backgroundColor})`);
+    bannerElement.style.setProperty('--main-text-color', 'var(--light)');
     bannerElement.classList.add('sharp');
   }
 }

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

@@ -158,7 +158,7 @@ export function filterRenderFormDynamic(filteredFields, filters, formAutocomplet
           newField.type = FormFieldType.filternumber;
         }
         if (filterIsText(field) || filterIsDate(field) || filterIsNumber(field)) {
-          newField.style = { ...(newField.style || {}), '--dialog-position': 'fixed', '--dialog-max-height': '25rem', '--dialog-width': '17.5rem' };
+          newField.style = { ...(newField.style || {}), '--dialog-position': 'absolute', '--dialog-max-height': '25rem', '--dialog-width': '17.5rem' };
         }
         if (filterIsAutocomplete(field)) {
           newField.type = FormFieldType.filterautocomplete;