@yoobic/yobi 8.3.0-45 → 8.3.0-48

package/dist/collection/components/form/form-todo-task-list/form-todo-task-list.js

@@ -96,9 +96,8 @@ export class YooFormTodoTaskListComponent {
     return updated;
   }
   async deleteTask(index, withConfirmation = true) {
-    var _a, _b;
     const result = withConfirmation
-      ? await showAlert(translate('DELETETASK'), [translate('CANCEL'), { cssClass: 'danger', text: translate('DELETE') }], translate('CONFIRMDELETETASK', { title: ((_b = (_a = this.value.values[index]) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.value) || '' }))
+      ? await showAlert(translate('DELETETASK'), [translate('CANCEL'), { cssClass: 'danger', text: translate('DELETE') }], translate('CONFIRMDELETETASK'))
       : true;
     if (result) {
       this.updateValue({ ...this.value, values: [...this.value.values.slice(0, index), ...this.value.values.slice(index + 1)] });

package/dist/collection/feature-communicate/feed/card-feed/components/sub-cards.js

@@ -48,14 +48,14 @@ export const CardEvent = ({ configs }) => {
         h("span", { class: "heading" },
           h("yoo-icon", { size: "small", color: "text-color", name: isPublic ? 'feed' : 'email' }),
           translate(`${isPublic ? 'PUBLICEVENT' : 'PRIVATEEVENT'}`)),
-        h("span", { class: "title" }, configs.title),
+        h("span", { class: "title" }, translateMulti(configs.title)),
         h("span", { class: "date dark" }, `${dateFormat(startDate, format)}${!isSameDay || !configs.allDay ? (` ${translate('YOOBICTO').toLowerCase()} ${dateFormat(endDate, endformat)}`) : ''}`),
         configs.location && (h("div", { class: "preview-container" },
           h("yoo-avatar", { imgSrc: configs.location.imageData, iconText: configs.location.title, size: "extra-small" }),
           h("span", null, configs.location.title))),
         configs.address && h("span", { class: "address" }, configs.address),
         configs.virtualRoomUrl && h("yoo-truncate", { class: "url", innerHTML: replaceAllLinks(configs.virtualRoomUrl) }),
-        configs.description && h("yoo-truncate", { class: "card-feeds", maxLength: 10, byWords: true, showEllipsisButton: true, content: replaceAllLinks(configs.description) }),
+        configs.description && h("yoo-truncate", { class: "card-feeds", maxLength: 10, byWords: true, showEllipsisButton: true, content: replaceAllLinks(translateMulti(configs.description)) }),
         ((_a = configs.tags) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { class: "feed-hashtags" }, configs.tags.map((a) => (a === null || a === void 0 ? void 0 : a.toLowerCase) && h("span", { class: "hashtag", innerHTML: `#${translateMulti(a.toUpperCase()).toLowerCase()} ` })))),
         configs.type && h("span", { class: "dark flex" },
           `${translate('YOOBICCATEGORY')}: `,

package/dist/collection/feature-operate/campaign/detail-bar/detail-bar.js

@@ -188,10 +188,10 @@ export class YooDetailBarComponent {
           translate('STATUS'),
           ":"),
         h("yoo-tag", { color: "text-color-10" }, this.status))),
-      this.renderContent('ACTIVE', isBoolean(this.isActive) ? (this.isActive ? 'YES' : 'NO') : '-'),
+      this.renderContent('ACTIVE', isBoolean(this.isActive) ? (this.isActive ? 'YOOBICYES' : 'YOOBICNO') : '-'),
       this.period && this.period !== '-' && this.renderContent('PERIOD', this.period),
-      this.isFeatured !== null && this.renderContent('FEATURED', this.isFeatured ? 'YES' : 'NO'),
-      this.progressiveLessons != null && this.renderContent('PROGRESSIVELESSONS', this.progressiveLessons ? 'Yes' : 'No'),
+      this.isFeatured !== null && this.renderContent('FEATUREDCOURSE', this.isFeatured ? 'YOOBICYES' : 'YOOBICNO'),
+      this.progressiveLessons != null && this.renderContent('PROGRESSIVELESSONS', this.progressiveLessons ? 'YOOBICYES' : 'YOOBICNO'),
       this.category && this.renderContent('CATEGORY', this.category),
       havePoints &&
         this.renderContent('POINTS', h("yoo-tag", { color: "app-color" },

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

@@ -254,35 +254,42 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 
 @media screen and (max-height: 699px) {
-  .outer-login-container.keyboard-closed .content-container {
+  .outer-login-container:not(.emulated).keyboard-closed .content-container {
     padding-top: 0;
   }
 }
 @media screen and (min-width: 750px) {
-  .outer-login-container {
+  .outer-login-container:not(.emulated) {
     --header-footer-border-color: var(--stable-light, #f1f1f1);
   }
-  .outer-login-container .content-container {
+  .outer-login-container:not(.emulated) .content-container {
     padding-top: var(--spacing-96, 6rem);
   }
-  .outer-login-container:not([is-whitelabel]) .content-container {
+  .outer-login-container:not(.emulated):not([is-whitelabel]):not(.emulated) .content-container {
     padding-top: 0;
   }
-  .outer-login-container.keyboard-open {
+  .outer-login-container:not(.emulated).keyboard-open {
     justify-content: flex-end;
     padding-bottom: 20%;
   }
 }
 @media screen and (min-width: 1000px) and (max-height: 500px) {
-  .outer-login-container.keyboard-open {
+  .outer-login-container:not(.emulated).keyboard-open {
     padding-bottom: var(--spacing-16, 1rem);
   }
 }
 @media screen and (min-width: 1000px) and (orientation: landscape) {
-  .outer-login-container.tablet.ios.keyboard-transitioning .content-container, .outer-login-container.tablet.ios.keyboard-open .content-container {
+  .outer-login-container.tablet.ios:not(.emulated).keyboard-transitioning .content-container, .outer-login-container.tablet.ios:not(.emulated).keyboard-open .content-container {
     transform: translateY(-20%);
   }
 }
+.outer-login-container.emulated:not([is-whitelabel]) .content-container {
+  padding-top: 9rem;
+}
+.outer-login-container.emulated[is-whitelabel] .content-container {
+  padding-top: 8rem;
+}
+
 .outer-login-container .background-overlay {
   position: absolute;
   z-index: 1;
@@ -325,7 +332,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 
 @media screen and (min-width: 900px) {
-  .outer-login-container #divider {
+  .outer-login-container:not(.emulated) #divider {
     margin: var(--spacing-32, 2rem) 0;
   }
 }
@@ -355,18 +362,18 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 
 @media screen and (min-width: 900px) {
-  .outer-login-container footer {
+  .outer-login-container:not(.emulated) footer {
     width: 41.5rem;
     margin: 0 calc((100% - 41.5rem) / 2);
     border-top: var(--header-footer-border-color) 0.0675rem solid;
   }
-  .outer-login-container footer * {
+  .outer-login-container:not(.emulated) footer * {
     margin: var(--spacing-24, 1.5rem) 0 1.875rem 0;
     line-height: 1.125rem;
   }
 }
 @media screen and (max-height: 550px) {
-  .outer-login-container footer {
+  .outer-login-container:not(.emulated) footer {
     display: none;
   }
 }
@@ -452,47 +459,47 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 
 @media screen and (min-width: 750px) {
-  .outer-login-container .header img {
+  .outer-login-container:not(.emulated) .header img {
     height: 4rem;
     max-height: 4rem;
   }
-  .outer-login-container[logo-shape=square] .header img {
+  .outer-login-container:not(.emulated)[logo-shape=square] .header img {
     height: 6rem;
     max-height: 6rem;
   }
 }
 @media screen and (min-width: 1000px) {
-  .outer-login-container .header img {
+  .outer-login-container:not(.emulated) .header img {
     height: 4rem;
     max-height: 4rem;
   }
-  .outer-login-container .header {
+  .outer-login-container:not(.emulated) .header {
     width: 41.5rem;
     margin: 0 calc((100% - 41.5rem) / 2);
     border-bottom: var(--header-footer-border-color) 0.0675rem solid;
   }
-  .outer-login-container .header img {
+  .outer-login-container:not(.emulated) .header img {
     margin: 2rem 0;
   }
-  .outer-login-container .header h1 {
+  .outer-login-container:not(.emulated) .header h1 {
     display: none;
   }
-  .outer-login-container #error-alert {
+  .outer-login-container:not(.emulated) #error-alert {
     top: 7.5rem;
     width: 41.5rem;
     margin: 0 calc((100% - 41.5rem) / 2);
   }
-  .outer-login-container[is-whitelabel] #error-alert {
+  .outer-login-container:not(.emulated)[is-whitelabel] #error-alert {
     top: 9rem;
   }
-  .outer-login-container[logo-shape=square] .header img {
+  .outer-login-container:not(.emulated)[logo-shape=square] .header img {
     height: 6rem;
     max-height: 6rem;
   }
-  .outer-login-container[logo-shape=square] #error-alert {
+  .outer-login-container:not(.emulated)[logo-shape=square] #error-alert {
     top: 11rem;
   }
-  .outer-login-container.tablet #error-alert {
+  .outer-login-container:not(.emulated).tablet #error-alert {
     position: absolute;
     top: 0;
     z-index: 10;
@@ -501,44 +508,74 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   }
 }
 @media screen and (max-width: 750px) {
-  .outer-login-container[is-whitelabel] .header img {
+  .outer-login-container[is-whitelabel]:not(.emulated) .header img {
     height: 4rem;
     max-height: 4rem;
   }
-  .outer-login-container[is-whitelabel] header h1 {
+  .outer-login-container[is-whitelabel]:not(.emulated) header h1 {
     display: none;
   }
-  .outer-login-container[is-whitelabel] header img {
+  .outer-login-container[is-whitelabel]:not(.emulated) header img {
     max-width: 90%;
     margin-top: var(--spacing-48, 3rem);
   }
-  .outer-login-container[is-whitelabel][logo-shape=square] .header img {
+  .outer-login-container[is-whitelabel]:not(.emulated)[logo-shape=square] .header img {
     height: 6rem;
     max-height: 6rem;
   }
-  .outer-login-container[is-whitelabel][logo-shape=square] .header img {
+  .outer-login-container[is-whitelabel]:not(.emulated)[logo-shape=square] .header img {
     margin-top: var(--spacing-64, 4rem);
   }
 }
+.outer-login-container[is-whitelabel].emulated .header img {
+  height: 4rem;
+  max-height: 4rem;
+}
+.outer-login-container[is-whitelabel].emulated header h1 {
+  display: none;
+}
+.outer-login-container[is-whitelabel].emulated header img {
+  max-width: 90%;
+  margin-top: var(--spacing-48, 3rem);
+}
+.outer-login-container[is-whitelabel].emulated[logo-shape=square] .header img {
+  height: 6rem;
+  max-height: 6rem;
+}
+.outer-login-container[is-whitelabel].emulated[logo-shape=square] .header img {
+  margin-top: var(--spacing-64, 4rem);
+}
+.outer-login-container[is-whitelabel].emulated:not(.hide-advanced-login):not(.hide-google-login)[logo-shape=square] .header img {
+  height: 6rem;
+  max-height: 6rem;
+}
+.outer-login-container[is-whitelabel].emulated:not(.hide-advanced-login):not(.hide-google-login)[logo-shape=square] .header img {
+  margin-top: var(--spacing-48, 3rem);
+}
+
+.outer-login-container:not([is-whitelabel]).emulated:not(.hide-advanced-login):not(.hide-google-login) .header img {
+  margin-top: var(--spacing-24, 1.5rem);
+}
+
 @media screen and (min-width: 900px) and (max-width: 1300px) {
-  .outer-login-container .header {
+  .outer-login-container:not(.emulated) .header {
     margin-bottom: var(--spacing-32, 2rem);
   }
-  .outer-login-container .header img {
+  .outer-login-container:not(.emulated) .header img {
     margin: var(--spacing-16, 1rem) 0;
   }
-  .outer-login-container #error-alert {
+  .outer-login-container:not(.emulated) #error-alert {
     top: 6.5rem;
     width: 41.5rem;
     margin: 0 calc((100% - 41.5rem) / 2);
   }
-  .outer-login-container[is-whitelabel] #error-alert {
+  .outer-login-container:not(.emulated)[is-whitelabel] #error-alert {
     top: 7rem;
   }
-  .outer-login-container[logo-shape=square] #error-alert {
+  .outer-login-container:not(.emulated)[logo-shape=square] #error-alert {
     top: 9rem;
   }
-  .outer-login-container.tablet #error-alert {
+  .outer-login-container:not(.emulated).tablet #error-alert {
     position: absolute;
     top: 0;
     z-index: 10;
@@ -547,22 +584,23 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   }
 }
 @media screen and (max-height: 799px) {
-  .outer-login-container:not([is-whitelabel]).keyboard-closed .header img {
+  .outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) .header img {
     margin-top: var(--spacing-32, 2rem);
   }
 }
 @media screen and (max-height: 699px) {
-  .outer-login-container:not([is-whitelabel]).keyboard-closed .header h1 {
+  .outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) .header h1 {
     display: none;
   }
 }
 @media screen and (max-height: 665px) {
-  .outer-login-container.keyboard-closed .header {
+  .outer-login-container.keyboard-closed:not(.emulated) .header h1,
+.outer-login-container.keyboard-closed:not(.emulated) .header img {
     display: none;
   }
 }
 @media screen and (max-height: 500px) {
-  .outer-login-container.keyboard-open .header {
+  .outer-login-container.keyboard-open:not(.emulated) .header {
     display: none;
   }
 }
@@ -577,6 +615,10 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin-bottom: var(--spacing-24, 1.5rem);
 }
 
+.outer-login-container.emulated #error-alert {
+  padding-top: var(--spacing-24, 1.5rem);
+}
+
 .outer-login-container {
   --disabled-color: var(--stable-light, #f1f1f1);
   --hover-color: var(--stable-light, #f1f1f1);
@@ -609,13 +651,13 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   height: 1.5rem;
   margin: -0.5rem 0 0 0;
 }
-.outer-login-container .help-buttons.mobile {
+.outer-login-container .help-buttons.mobile, .outer-login-container .help-buttons.emulated {
   justify-content: flex-end;
 }
-.outer-login-container .help-buttons:not(.mobile) yoo-button#help-button {
+.outer-login-container .help-buttons:not(.mobile):not(.emulated) yoo-button#help-button {
   margin: -0.25rem -0.5rem 0 0;
 }
-.outer-login-container .help-buttons:not(.mobile) yoo-button#magic-button {
+.outer-login-container .help-buttons:not(.mobile):not(.emulated) yoo-button#magic-button {
   margin: -0.25rem 0 0 -0.5rem;
 }
 .outer-login-container #default-login-button {
@@ -642,7 +684,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   height: 2rem;
   font-size: var(--font-size-14, 0.875rem);
 }
-.outer-login-container #default-login-button.medium.mobile {
+.outer-login-container #default-login-button.medium.mobile,
+.outer-login-container #default-login-button.medium.emulated {
   font-size: var(--font-size-16, 1rem);
 }
 .outer-login-container #default-login-button.large {
@@ -716,10 +759,29 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   }
 }
 @media screen and (min-width: 900px) {
-  .outer-login-container .login-options .google-logo {
+  .outer-login-container:not(.emulated) .login-options .google-logo {
     height: 1rem;
   }
 }
+.outer-login-container.emulated .login-options.hide-google-login:not(.hide-advanced-login) #google-login-button {
+  display: none;
+}
+.outer-login-container.emulated .login-options.hide-google-login:not(.hide-advanced-login) #sso-login-button {
+  transform: translateY(0);
+}
+.outer-login-container.emulated .login-options.hide-advanced-login:not(.hide-google-login) #sso-login-button {
+  display: none;
+}
+.outer-login-container.emulated .login-options.hide-advanced-login:not(.hide-google-login) #google-login-button {
+  transform: translateY(0);
+}
+.outer-login-container.emulated .login-options.hide-advanced-login.hide-google-login #sso-login-button {
+  display: none;
+}
+.outer-login-container.emulated .login-options.hide-advanced-login.hide-google-login #google-login-button {
+  transform: translateY(0);
+}
+
 .outer-login-container .main-content {
   display: flex;
   flex-direction: column;
@@ -733,12 +795,12 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 
 @media screen and (min-width: 900px) {
-  .outer-login-container .main-content {
+  .outer-login-container:not(.emulated) .main-content {
     display: flex;
     flex-direction: column;
     width: 18.75rem;
   }
-  .outer-login-container .main-content yoo-form-input-container {
+  .outer-login-container:not(.emulated) .main-content yoo-form-input-container {
     font-size: var(--font-size-12, 0.75rem);
   }
 }
@@ -751,6 +813,13 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
     transform: scale(1.2) translateX(10%);
   }
 }
+.outer-login-container.emulated:not([is-whitelabel]) .main-content h3 {
+  display: none;
+}
+.outer-login-container.emulated.focused h3 {
+  transform: scale(1.2) translateX(10%);
+}
+
 .outer-login-container .sidepanel {
   margin-right: var(--spacing-64, 4rem);
 }
@@ -759,12 +828,12 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 
 @media screen and (min-width: 1000px) {
-  .outer-login-container .sidepanel {
+  .outer-login-container:not(.emulated) .sidepanel {
     display: flex;
     flex-direction: column;
     width: 18.75rem;
   }
-  .outer-login-container .sidepanel yoo-form-input-container {
+  .outer-login-container:not(.emulated) .sidepanel yoo-form-input-container {
     font-size: var(--font-size-12, 0.75rem);
   }
 }
@@ -773,6 +842,10 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
     display: none;
   }
 }
+.outer-login-container.emulated .sidepanel {
+  display: none;
+}
+
 .outer-login-container:not([is-double-column]) .sidepanel {
   display: none;
 }

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

@@ -1,11 +1,11 @@
 import { ScreenOrientation } from '@awesome-cordova-plugins/screen-orientation';
-import { addKeyboardEventListener, disableKeyboardResize, isAndroid, isIonic, isIOS, isNativeMobile, isTabletOrIpad, isWeb, removeKeyboardEventListeners, setStatusBarDarkMode, showActionSheet, translate } from '@shared/utils';
+import { addKeyboardEventListener, disableKeyboardResize, isAndroid, isFullScreenFalse, isIonic, isIOS, isNativeMobile, isTabletOrIpad, isWeb, removeKeyboardEventListeners, setStatusBarDarkMode, showActionSheet, translate } from '@shared/utils';
 import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, State } from '@stencil/core';
 import googleLogo from './assets/login/google_color.svg';
 import { Background, Footer, Header, LoginForm, LoginOptions, MainContent, Sidepanel } from './parts';
 export class YooLoginComponent {
   constructor() {
-    //* COMPONENT TEXT 
+    //* COMPONENT TEXT
     // Title Text
     this.mainTitle = '';
     // Subtitle Text
@@ -37,22 +37,16 @@ export class YooLoginComponent {
     return !!((_a = this.passwordInputElement) === null || _a === void 0 ? void 0 : _a.value);
   }
   get hasBackgroundMedia() {
-    return (this.backgroundSrc)
-      ? true
-      : false;
+    return this.backgroundSrc ? true : false;
   }
   get hasCustomBackground() {
-    return (this.hasBackgroundMedia || this.backgroundColor) ? true : false;
+    return this.hasBackgroundMedia || this.backgroundColor ? true : false;
   }
   get primaryColor() {
     if (this.textColor) {
       return this.textColor;
     }
-    const color = this.hasBackgroundMedia
-      ? 'light'
-      : !this.backgroundColor
-        ? 'dark'
-        : 'app-color';
+    const color = this.hasBackgroundMedia ? 'light' : !this.backgroundColor ? 'dark' : 'app-color';
     return `var(--${color})`;
   }
   async getPassword() {
@@ -63,8 +57,7 @@ export class YooLoginComponent {
     this.defaultPassword && (this.password = this.defaultPassword);
     setStatusBarDarkMode(true);
     disableKeyboardResize();
-    isNativeMobile() &&
-      this.setKeyboardListeners();
+    isNativeMobile() && this.setKeyboardListeners();
   }
   componentDidLoad() {
     var _a;
@@ -86,7 +79,8 @@ export class YooLoginComponent {
     if (!isNativeMobile()) {
       this.isFocused = true;
     }
-    else { // Has to be called here, as the 'keyboardWillShow' is called after, causing jittering
+    else {
+      // Has to be called here, as the 'keyboardWillShow' is called after, causing jittering
       if (this.keyboardState !== 'open') {
         this.contentContainerElement.style.top = `${this.contentContainerElement.offsetTop || 150}px`;
         this.contentContainerElement.style.position = 'absolute';
@@ -104,7 +98,8 @@ export class YooLoginComponent {
     if (!isNativeMobile()) {
       this.isFocused = false;
     }
-    else { // Has to be called here, as the 'keyboardWillHide' is called after, causing jittering
+    else {
+      // Has to be called here, as the 'keyboardWillHide' is called after, causing jittering
       this.contentContainerElement.style.position = 'absolute';
     }
     this.focusedInput = undefined;
@@ -211,35 +206,35 @@ export class YooLoginComponent {
   getButton(type, onClick, ref = undefined) {
     const isOtherLoginOptions = ['GOOGLE', 'SSO'].includes(type);
     const isHelpButton = ['HELP', 'MAGIC'].includes(type);
-    return (h("yoo-button", { id: !isHelpButton ? `${type.toLowerCase()}-login-button` : `${type.toLowerCase()}-button`, color: !isOtherLoginOptions ? 'app-color' : 'light', customColor: this.textColor && isHelpButton ? { color: this.textColor } : undefined, fill: isHelpButton ? 'transparent' : 'solid', size: isWeb(this.host)
-        ? isHelpButton ? 'small' : 'medium'
-        : isHelpButton ? 'medium' : 'large', animated: false, onClick: onClick, ref: ref },
+    return (h("yoo-button", { id: !isHelpButton ? `${type.toLowerCase()}-login-button` : `${type.toLowerCase()}-button`, color: !isOtherLoginOptions ? 'app-color' : 'light', customColor: this.textColor && isHelpButton ? { color: this.textColor } : undefined, fill: isHelpButton ? 'transparent' : 'solid', size: isWeb(this.host) ? (isHelpButton ? 'small' : 'medium') : isHelpButton ? 'medium' : 'large', animated: false, onClick: onClick, ref: ref },
       type === 'SSO' && h("yoo-icon", { size: isWeb(this.host) ? 'small' : 'medium', slot: "start", name: "lock", color: "dark" }),
       type === 'GOOGLE' && h("img", { class: "google-logo", src: googleLogo, alt: "google logo", slot: "start" }),
-      isHelpButton
-        ? translate(type === 'HELP' ? this.helpText : this.magicLinkText)
-        : translate(`YOOBIC${type !== 'SSO-DEFAULT' ? type : ''}LOGIN`)));
+      isHelpButton ? translate(type === 'HELP' ? this.helpText : this.magicLinkText) : translate(`YOOBIC${type !== 'SSO-DEFAULT' ? type : ''}LOGIN`)));
   }
   render() {
     return (h(Host, { style: {
-        ...this.hasCustomBackground ? {
-          '--header-footer-border-color': `var(--${this.hasBackgroundMedia ? 'light-40' : 'app-color-20'})`,
-          backgroundColor: this.backgroundColor ? this.backgroundColor : 'unset'
-        } : {}
+        ...(this.hasCustomBackground
+          ? {
+            '--header-footer-border-color': `var(--${this.hasBackgroundMedia ? 'light-40' : 'app-color-20'})`,
+            backgroundColor: this.backgroundColor ? this.backgroundColor : 'unset'
+          }
+          : {})
       }, class: {
         'outer-login-container': true,
         focused: this.isFocused,
         [`keyboard-${this.keyboardState}`]: true,
-        'ios': isIOS(),
-        'tablet': isTabletOrIpad()
+        emulated: isFullScreenFalse(),
+        web: isWeb(),
+        ios: isIOS(),
+        tablet: isTabletOrIpad()
       } },
       h(Header, { error: this.error, logo: this.logo, title: this.mainTitle, textColor: this.primaryColor, closeClick: () => this.onAlertClosed() }),
       h(Background, { hasBackgroundMedia: this.hasBackgroundMedia, image: this.backgroundSrc }),
-      h("div", { class: "content-container", ref: (el) => this.contentContainerElement = el },
+      h("div", { class: "content-container", ref: (el) => (this.contentContainerElement = el) },
         h(Sidepanel, { title: this.mainTitle, textColor: this.primaryColor, image: this.sidepanelImage }),
         h(MainContent, { subtitle: this.subtitle, textColor: this.primaryColor },
-          h(LoginForm, { buttonColor: this.textColor, ssoOnly: this.ssoOnly, fieldTitleColor: this.primaryColor, getInputLabel: this.getInputLabel.bind(this), getDefaultInputValue: this.getDefaultInputValue.bind(this), getInputValue: this.getInputValue.bind(this), focusedInput: this.focusedInput, host: this.host, bindReference: this.bindReference.bind(this), onIconClicked: this.onIconClicked.bind(this), onInputChanged: this.onInputChanged.bind(this), onInputFocused: this.onInputFocused.bind(this), onInputBlurred: () => this.onInputBlurred(), onEnterPressed: () => this.validateAndLogin(), onFormSubmit: (e) => this.onFormSubmit(e), onShowPassword: this.onShowPassword.bind(this), showPassword: this.showPassword, loginButtonRef: (el) => this.loginButtonElement = el, helpButtonElement: this.getButton('HELP', () => this.onForgotPassword()), magicButtonElement: this.getButton('MAGIC', () => this.magicLinkModalRequested.emit(true)), ssoLoginButtonElement: this.getButton('SSO-DEFAULT', () => this.onAdvancedLogin()), clearInput: this.clearInput.bind(this), isWhitelabel: this.isWhitelabel }),
-          h(LoginOptions, { ssoOnly: this.ssoOnly, hideGoogleLogin: this.hideGoogleLogin, hideAdvancedLogin: this.hideAdvancedLogin, hasCustomBackground: this.hasCustomBackground, dividerColor: this.primaryColor, googleLoginButtonElement: this.getButton('GOOGLE', () => this.onGoogleLogin()), ssoLoginButtonElement: this.getButton('SSO', () => this.onAdvancedLogin()), host: this.host }))),
+          h(LoginForm, { buttonColor: this.textColor, ssoOnly: this.ssoOnly, fieldTitleColor: this.primaryColor, getInputLabel: this.getInputLabel.bind(this), getDefaultInputValue: this.getDefaultInputValue.bind(this), getInputValue: this.getInputValue.bind(this), focusedInput: this.focusedInput, bindReference: this.bindReference.bind(this), onIconClicked: this.onIconClicked.bind(this), onInputChanged: this.onInputChanged.bind(this), onInputFocused: this.onInputFocused.bind(this), onInputBlurred: () => this.onInputBlurred(), onEnterPressed: () => this.validateAndLogin(), onFormSubmit: (e) => this.onFormSubmit(e), onShowPassword: this.onShowPassword.bind(this), showPassword: this.showPassword, loginButtonRef: (el) => (this.loginButtonElement = el), helpButtonElement: this.getButton('HELP', () => this.onForgotPassword()), magicButtonElement: this.getButton('MAGIC', () => this.magicLinkModalRequested.emit(true)), ssoLoginButtonElement: this.getButton('SSO-DEFAULT', () => this.onAdvancedLogin()), clearInput: this.clearInput.bind(this), isWhitelabel: this.isWhitelabel }),
+          h(LoginOptions, { ssoOnly: this.ssoOnly, hideGoogleLogin: this.hideGoogleLogin, hideAdvancedLogin: this.hideAdvancedLogin, hasCustomBackground: this.hasCustomBackground, dividerColor: this.primaryColor, googleLoginButtonElement: this.getButton('GOOGLE', () => this.onGoogleLogin()), ssoLoginButtonElement: this.getButton('SSO', () => this.onAdvancedLogin()) }))),
       h(Footer, { hasCustomBackground: this.hasCustomBackground, copyrightMessage: this.copyrightMessage, textColor: this.primaryColor, version: this.version, onClick: () => {
           if (this.ssoOnly) {
             this.ssoOnly = false;

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

@@ -1,22 +1,21 @@
 import { isWeb, translate } from '@shared/utils';
 import { h } from '@stencil/core';
-export 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'})`
+export 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("div", { slot: "content", class: {
-          'error-content': true,
-          'web': isWeb()
-        } },
-        h("p", null, translate(error)),
-        h("a", { class: "link", style: { color: `var(--${isWeb() ? 'danger' : 'light'})` }, href: "mailto:support@yoobic.com" }, translate('YOOBICNEEDHELP')))),
+      h("p", null, translate(error)),
+      h("a", { class: "link", style: { color: `var(--${isWeb() ? 'danger' : 'light'})` }, href: "mailto:support@yoobic.com" }, translate('YOOBICNEEDHELP'))))),
   h("header", { class: "header" },
     h("img", { src: logo, alt: "app logo" }),
     h("h1", { style: { color: textColor } }, title))
-]);
+];

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

@@ -1,29 +1,26 @@
 import { getContrastColor, isPresent, isWeb, translate } from '@shared/utils';
 import { h } from '@stencil/core';
 import { LoginInput } from './LoginInput';
-export const LoginForm = ({ ssoOnly, fieldTitleColor, getInputLabel, getDefaultInputValue, getInputValue, bindReference, clearInput, onIconClicked, focusedInput, host, showPassword, loginButtonRef, onEnterPressed, onInputBlurred, onInputChanged, onInputFocused, onFormSubmit, onShowPassword, helpButtonElement, magicButtonElement, ssoLoginButtonElement, isWhitelabel, buttonColor }) => {
-  const inputAndButtonSize = isWeb(host) ? 'medium' : 'large';
-  const loginDisabled = !(!!(getInputValue('username') || '') &&
-    !!(getInputValue('password') || ''));
+export const LoginForm = ({ ssoOnly, fieldTitleColor, getInputLabel, getDefaultInputValue, getInputValue, bindReference, clearInput, onIconClicked, focusedInput, showPassword, loginButtonRef, onEnterPressed, onInputBlurred, onInputChanged, onInputFocused, onFormSubmit, onShowPassword, helpButtonElement, magicButtonElement, ssoLoginButtonElement, isWhitelabel, buttonColor }) => {
+  const inputAndButtonSize = isWeb() ? '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 (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(), isWhitelabel: isWhitelabel }));
   };
-  return !ssoOnly
-    ? h("form", { autoComplete: "on", id: "login-form", novalidate: true, onSubmit: onFormSubmit },
-      renderInputContainer('username'),
-      renderInputContainer('password'),
-      h("div", { class: { 'help-buttons': true, mobile: !isWeb(host) } },
-        isWeb(host) && magicButtonElement,
-        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('YOOBICLOGIN'), style: buttonColor && !loginDisabled ? { backgroundColor: buttonColor, color: getContrastColor(buttonColor) } : undefined }))
-    : h("div", { class: "sso-only-login" }, ssoLoginButtonElement);
+  return !ssoOnly ? (h("form", { autoComplete: "on", id: "login-form", novalidate: true, onSubmit: onFormSubmit },
+    renderInputContainer('username'),
+    renderInputContainer('password'),
+    h("div", { class: { 'help-buttons': true, mobile: !isWeb() } },
+      isWeb() && magicButtonElement,
+      helpButtonElement),
+    h("input", { id: "default-login-button", class: {
+        [inputAndButtonSize]: true,
+        mobile: !isWeb(),
+        disabled: loginDisabled
+      }, ref: loginButtonRef, type: "submit", form: "login-form", name: "doLogin", disabled: loginDisabled, value: translate('YOOBICLOGIN'), style: buttonColor && !loginDisabled ? { backgroundColor: buttonColor, color: getContrastColor(buttonColor) } : undefined }))) : (h("div", { class: "sso-only-login" }, ssoLoginButtonElement));
 };

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

@@ -1,14 +1,14 @@
 import { isWeb } from '@shared/utils';
 import { h } from '@stencil/core';
 import { Divider } from './Divider';
-export const LoginOptions = ({ ssoOnly, hideAdvancedLogin, hideGoogleLogin, hasCustomBackground, dividerColor, googleLoginButtonElement, ssoLoginButtonElement, host }) => {
+export 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,
-        mobile: !isWeb(host)
+        mobile: !isWeb()
       } },
       h(Divider, { style: hasCustomBackground ? { '--divider-color': dividerColor } : undefined }),
       googleLoginButtonElement,