@yoobic/yobi 8.3.0-14 → 8.3.0-17

package/dist/collection/components/form/form-autocomplete-dialog/form-autocomplete-dialog.css

@@ -201,6 +201,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
+:host {
+  --dialog-width: unset;
+}
 :host .outer-container {
   position: relative;
   display: flex;
@@ -237,6 +240,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 
 :host(.web) {
   position: absolute;
+  width: var(--dialog-width);
   max-height: 25rem;
   box-shadow: var(--shadow-04, 0 0.75rem 1.5rem 0 rgba(0, 0, 0, 0.1));
 }
@@ -249,7 +253,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host(.web) .web-dialog-container yoo-ion-scroll {
   position: relative;
-  width: 17.5rem;
   height: auto;
   min-height: 5.375rem;
   max-height: inherit;

package/dist/collection/components/form/form-choice/image/form-choice-image.js

@@ -31,11 +31,12 @@ export class YooFormChoiceImageComponent {
   }
   renderImage(image, text, values, index) {
     const readonly = this.readonly || this.isPdf;
-    const answer = [].concat(this.answer).map(a => a.text ? a.text : a);
+    const answer = [].concat(this.answer).map(a => { var _a; return (_a = a.text) !== null && _a !== void 0 ? _a : a; });
+    const noValidation = !((answer === null || answer === void 0 ? void 0 : answer.length) > 0);
     const isCorrect = answer.includes(text);
     const onOpenImage = (values, index) => showSlidesMedia({ items: values.map(({ image }) => ({ value: image })), currentSlideIndex: index, showBottomContainer: false });
     return (h("div", { class: "image-container", onClick: () => this.isHistory && onOpenImage(values, index), style: this.animated ? { '--choice-index': index.toString() } : {} },
-      h("div", { class: { 'content': true, 'correct-answer': this.readonly && isCorrect, 'wrong-answer': this.readonly && !isCorrect } },
+      h("div", { class: { 'content': true, 'correct-answer': this.readonly && isCorrect && !noValidation, 'wrong-answer': this.readonly && !isCorrect && !noValidation } },
         h("yoo-img", { cloudinaryOptions: { pad: true }, scaledUp: this.isPdf, src: image, onClick: () => !readonly && onItemSelect(text, this) }),
         !readonly && [
           h("yoo-form-checkbox", { value: isSelected(text, this.selection), onClick: () => onItemSelect(text, this), animated: this.animated }),
@@ -240,9 +241,17 @@ export class YooFormChoiceImageComponent {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "string[]",
-        "resolved": "string[]",
-        "references": {}
+        "original": "(string | Pick<IFormChoiceValue, 'text' | 'image'>)[]",
+        "resolved": "(string | Pick<IFormChoiceValue, \"image\" | \"text\">)[]",
+        "references": {
+          "Pick": {
+            "location": "global"
+          },
+          "IFormChoiceValue": {
+            "location": "import",
+            "path": "../../../../interfaces"
+          }
+        }
       },
       "required": false,
       "optional": false,

package/dist/collection/components/form/form-connect/form-connect.css

@@ -399,7 +399,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host {
   display: block;
   width: 100%;
-  max-width: 24rem;
+  max-width: 30rem;
   margin: 0 auto;
 }
 :host p {
@@ -429,37 +429,37 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host yoo-img {
   border-radius: inherit;
 }
-:host .inner-container,
-:host .draggables,
-:host .connectables {
+:host main,
+:host #draggables,
+:host #connectables {
   display: grid;
   grid-gap: var(--spacing-08, 0.5rem);
 }
-:host .draggables,
-:host .connectables {
+:host #draggables,
+:host #connectables {
   height: max-content;
   padding: var(--spacing-08, 0.5rem) 0;
 }
-:host .inner-container {
+:host main {
   grid-template-rows: repeat(auto-fit, 75%);
   grid-template-columns: 1fr 1fr;
   padding: 0 var(--spacing-08, 0.5rem);
-  overflow: hidden auto;
   word-break: break-word;
   background-color: var(--stable-alt-20, rgba(208, 208, 208, 0.2));
   border-radius: var(--border-radius-04, 0.25rem);
-  transition: height 500ms linear;
-  /* Track */
-  /* Handle */
+  transition: height 750ms ease-in-out;
+}
+:host main.overflowing {
+  overflow: hidden auto;
 }
-:host .inner-container::-webkit-scrollbar {
+:host main.overflowing::-webkit-scrollbar {
   width: var(--spacing-08, 0.5rem);
 }
-:host .inner-container::-webkit-scrollbar-track {
+:host main.overflowing::-webkit-scrollbar-track {
   border-radius: var(--border-radius-04, 0.25rem);
   box-shadow: inset 0 0 5px var(--stable, #adadad);
 }
-:host .inner-container::-webkit-scrollbar-thumb {
+:host main.overflowing::-webkit-scrollbar-thumb {
   background: var(--app-color, #5a30f4);
   border-radius: var(--border-radius-04, 0.25rem);
 }
@@ -467,7 +467,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .draggable {
   position: relative;
   width: 100%;
-  max-width: 12rem;
+  max-width: 15rem;
   height: 100%;
   background-color: var(--light, #ffffff);
   border-radius: var(--border-radius-08, 0.5rem);
@@ -475,10 +475,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   cursor: pointer;
   transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out;
 }
-:host .connectable[data-hit],
-:host .draggable[data-hit] {
-  background-color: var(--stable-light, #f1f1f1);
-}
 :host .connectable:before,
 :host .draggable:before {
   display: block;
@@ -487,14 +483,23 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   padding-bottom: 75%;
   content: "";
 }
-:host .connectable.image,
-:host .draggable.image {
+:host .connectable[type=image],
+:host .draggable[type=image] {
   padding: 0;
 }
-:host .connectable.image:not([data-hit]),
-:host .draggable.image:not([data-hit]) {
+:host .connectable[type=image]:not([data-hit]),
+:host .draggable[type=image]:not([data-hit]) {
   background-color: transparent;
 }
+:host .connectable[type=image][hit] yoo-img,
+:host .draggable[type=image][hit] yoo-img {
+  opacity: 0.6;
+  transition: opacity 0.25s ease-in-out;
+}
+:host .connectable[type=text][hit],
+:host .draggable[type=text][hit] {
+  background-color: var(--stable-light, #f1f1f1);
+}
 :host .connectable > *:not(yoo-icon),
 :host .draggable > *:not(yoo-icon) {
   position: absolute;
@@ -503,7 +508,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   width: 100%;
   height: 100%;
 }
-:host .overlay {
+:host #overlay {
   background-color: inherit;
   border-radius: inherit;
   opacity: 0.6;

package/dist/collection/components/form/form-connect/form-connect.js

@@ -1,7 +1,6 @@
 import { Draggable, getUUID, gsapTo, isImageUrl, translateMulti } from '@shared/utils';
 import { Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';
 import { difference, isEqual, shuffle } from 'lodash-es';
-import { getAppContext } from '../../../utils/helpers/common-helpers';
 import { showWarningAlert } from '../../../utils/helpers/draggable-tags-helpers';
 import { setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
 import { CONNECT_TYPES } from './form-connect.interfaces';
@@ -25,8 +24,10 @@ export class YooFormConnectComponent {
     this.isVisible = false;
     this.colors = ['warning', 'accent', 'app-color', 'info', 'energized'];
   }
-  onValuesChanged() {
-    showWarningAlert(this.host, !this.isGameMatchable, 'NOTALLPAIREDVALUES');
+  async onValuesChanged() {
+    var _a;
+    showWarningAlert(this.host, ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) > 1 && !this.isGamePairable, 'NOTALLPAIREDVALUES');
+    await this.scrollToRevealGame();
   }
   onValidityChanged() {
     this.validityChanged.emit(this.validity);
@@ -40,19 +41,16 @@ export class YooFormConnectComponent {
   initAnswerChanged() {
     this.prepareGame();
   }
-  async onIsVisibleChanged(state) {
-    if (state) {
-      await this.scrollToRevealGame();
-      this.setScrollableHeight();
-    }
+  async onIsVisibleChanged() {
+    this.isVisible && this.scrollToRevealGame();
   }
   get hasValues() {
     var _a, _b, _c, _d;
     return !!(((_b = (_a = this.values) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.length) || ((_d = (_c = this.values) === null || _c === void 0 ? void 0 : _c[1]) === null || _d === void 0 ? void 0 : _d.length));
   }
-  get isGameMatchable() {
+  get isGamePairable() {
     var _a, _b, _c, _d, _e, _f;
-    return ((_c = (_b = (_a = this.values) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.filter(v => v)) === null || _c === void 0 ? void 0 : _c.length) === ((_f = (_e = (_d = this.values) === null || _d === void 0 ? void 0 : _d[1]) === null || _e === void 0 ? void 0 : _e.filter(v => v)) === null || _f === void 0 ? void 0 : _f.length);
+    return ((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) && ((_c = (_b = this.values[0]) === null || _b === void 0 ? void 0 : _b.filter(v => v)) === null || _c === void 0 ? void 0 : _c.length) === ((_f = (_e = (_d = this.values) === null || _d === void 0 ? void 0 : _d[1]) === null || _e === void 0 ? void 0 : _e.filter(v => v)) === null || _f === void 0 ? void 0 : _f.length);
   }
   get draggableElements() {
     return Array.from(this.host.shadowRoot.querySelectorAll('.draggable') || []);
@@ -73,45 +71,49 @@ export class YooFormConnectComponent {
     this.initGame();
   }
   prepareGame() {
-    this.prepareItems();
+    this.prepareData();
     this.connectItems();
-    this.shuffleItems();
+    this.shuffleData();
   }
   async initGame() {
     await this.scrollToRevealGame();
-    this.setScrollableHeight();
     this.setDraggableObserver();
     this.initDraggables();
-    showWarningAlert(this.host, !this.isGameMatchable, 'NOTALLPAIREDVALUES');
   }
   initDraggables() {
     var _a;
     (_a = this.draggableElements) === null || _a === void 0 ? void 0 : _a.forEach(e => this.initDraggableActions(e));
   }
   async scrollToRevealGame() {
-    const scrollElement = this.host.closest('yoo-ion-scroll');
-    return scrollElement && !this.livePreview && new Promise(resolve => {
-      setTimeout(() => {
-        scrollElement.scrollTo({ top: scrollElement.scrollHeight, behavior: 'smooth' });
-        resolve();
-      }, 1000);
-    });
-  }
-  setScrollableHeight() {
-    var _a, _b, _c, _d, _e, _f, _g;
     const GAP_PADDING = 8;
-    const { bottom } = this.host.getBoundingClientRect();
-    const numberOfItems = ((_b = (_a = this.values) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.length) || 0;
-    const formBounding = (_c = this.host.closest('form')) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
-    const itemHeight = ((_e = (_d = this.innerContainerElement) === null || _d === void 0 ? void 0 : _d.querySelector('[id]')) === null || _e === void 0 ? void 0 : _e.clientHeight) + GAP_PADDING + GAP_PADDING / numberOfItems + 1;
-    if (itemHeight && formBounding && bottom > formBounding.bottom && ((_g = (_f = this.values) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.length)) {
-      const maxItems = Math.floor(formBounding.height / itemHeight);
-      const maxHeight = maxItems * itemHeight + (maxItems + 1) * GAP_PADDING;
-      this.innerContainerElement.style.maxHeight = `${Math.min(formBounding.height, maxHeight + GAP_PADDING)}px`;
+    const scrollElement = this.host.closest('yoo-ion-scroll');
+    if (scrollElement && this.values.length === 2) {
+      const setScrollableHeight = () => {
+        const getHeight = (el) => { var _a; return (_a = el === null || el === void 0 ? void 0 : el.getBoundingClientRect()) === null || _a === void 0 ? void 0 : _a.height; };
+        const formHeight = getHeight(this.host.closest('yoo-form-input-container'));
+        const tileHeight = getHeight(this.innerContainerElement.querySelector('[type]'));
+        if (formHeight && tileHeight && !this.readonly) {
+          const numberItems = Math.max(this.values[0].length, this.values[1].length);
+          const itemsHeight = numberItems * tileHeight + (numberItems + 1) * GAP_PADDING;
+          this.innerContainerElement.classList.toggle('overflowing', itemsHeight > formHeight);
+          this.innerContainerElement.style.height = `${Math.min(formHeight, itemsHeight)}px`;
+        }
+      };
+      await new Promise(resolve => {
+        setTimeout(() => {
+          scrollElement.scrollTo({
+            top: scrollElement.scrollHeight,
+            behavior: 'smooth'
+          });
+          resolve();
+        }, 1000);
+      });
+      setScrollableHeight();
     }
   }
   setDraggableObserver() {
-    this.draggables = this.draggables.map(d => {
+    var _a;
+    this.draggables = ((_a = this.draggables) === null || _a === void 0 ? void 0 : _a.map(d => {
       return new Proxy(d, {
         set: (draggable, key, value) => {
           draggable[key] = value;
@@ -134,16 +136,16 @@ export class YooFormConnectComponent {
           return true;
         }
       });
-    });
+    })) || [];
   }
-  shuffleItems() {
+  shuffleData() {
     this.shuffled && CONNECT_TYPES.forEach(type => this[`${type}s`] = shuffle(this[`${type}s`]));
   }
-  prepareItems() {
+  prepareData() {
     CONNECT_TYPES.forEach((type, index) => {
       var _a, _b;
       this[`${type}s`] = ((_b = (_a = this.values) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.map((value, i) => ({
-        value,
+        value: typeof value === 'string' ? value : (value === null || value === void 0 ? void 0 : value['text']) || (value === null || value === void 0 ? void 0 : value['file']),
         id: getUUID(),
         ...(!index && {
           color: this.colors[i]
@@ -167,25 +169,25 @@ export class YooFormConnectComponent {
   }
   initDraggableActions(draggableElement) {
     var _a;
-    if (draggableElement) {
+    const currentDraggable = draggableElement && ((_a = this.draggables) === null || _a === void 0 ? void 0 : _a.find(({ id }) => id === draggableElement.id));
+    if (currentDraggable) {
       let tempConnectableElement;
-      const currentDraggable = (_a = this.draggables) === null || _a === void 0 ? void 0 : _a.find(d => (d === null || d === void 0 ? void 0 : d.id) === draggableElement.id);
       const onDragStartElement = () => {
         this.blockMoves.emit(true);
-        draggableElement.removeAttribute('data-hit');
+        draggableElement.removeAttribute('hit');
       };
       const onDragElement = () => {
         var _a, _b;
         const overlapThreshold = '65%';
         const { x, width } = draggableElement.getBoundingClientRect();
-        const connectableThreshold = this.innerContainerElement.querySelector('.connectables').getBoundingClientRect().x;
+        const connectableThreshold = this.innerContainerElement.querySelector('#connectables').getBoundingClientRect().x;
         const isInConnectableArea = x + width >= connectableThreshold;
         if (isInConnectableArea) {
           this.connectableElements.forEach(e => {
             var _a, _b;
             if (((_b = (_a = currentDraggable === null || currentDraggable === void 0 ? void 0 : currentDraggable.draggableInstance) === null || _a === void 0 ? void 0 : _a.hitTest) === null || _b === void 0 ? void 0 : _b.call(_a, e, overlapThreshold)) && e.id !== currentDraggable.connectableId) {
               tempConnectableElement = e;
-              tempConnectableElement.setAttribute('data-hit', 'true');
+              tempConnectableElement.setAttribute('hit', 'true');
             }
           });
         }
@@ -198,7 +200,7 @@ export class YooFormConnectComponent {
               color: 'var(--light)'
             });
           }
-          tempConnectableElement.removeAttribute('data-hit');
+          tempConnectableElement.removeAttribute('hit');
           tempConnectableElement = null;
         }
       };
@@ -206,13 +208,13 @@ export class YooFormConnectComponent {
         await gsapTo(draggableElement, this.animated ? 0.25 : 0, { x: 0, y: 0 });
         if (tempConnectableElement) {
           currentDraggable.connectableId = tempConnectableElement.id;
-          tempConnectableElement.removeAttribute('data-hit');
+          tempConnectableElement.removeAttribute('hit');
           this.autoCompleteLastConnection();
         }
         tempConnectableElement = null;
         this.blockMoves.emit(false);
       };
-      const onClickElement = () => {
+      const onClickElement = async () => {
         var _a;
         currentDraggable.hit = { value: !((_a = currentDraggable.hit) === null || _a === void 0 ? void 0 : _a.value) && !currentDraggable.connectableId };
         delete currentDraggable.connectableId;
@@ -220,7 +222,7 @@ export class YooFormConnectComponent {
         this.getUserAnswers();
         this.validateUserAnswers();
       };
-      if (!this.readonly && this.isGameMatchable && draggableElement) {
+      if (!this.readonly && this.isGamePairable && draggableElement) {
         currentDraggable.draggableInstance = new Draggable(draggableElement, {
           autoScroll: 1,
           bound: this.innerContainerElement,
@@ -237,7 +239,8 @@ export class YooFormConnectComponent {
   }
   validateUserAnswers(userAnswers = this.userAnswers) {
     this.validity = !(userAnswers === null || userAnswers === void 0 ? void 0 : userAnswers.reduce((acc, v) => acc + v.filter(i => !i).length, 0));
-    setValueAndValidateInput(userAnswers, this);
+    this.value = userAnswers;
+    setValueAndValidateInput(this.value, this);
   }
   autoEraseLastConnection() {
     const connectedDraggables = this.draggables.filter(d => d.connectableId);
@@ -278,29 +281,32 @@ export class YooFormConnectComponent {
   }
   renderContainer(name) {
     var _a;
-    return (h("section", { class: { [`${name}s`]: true } }, (_a = this[`${name}s`]) === null || _a === void 0 ? void 0 : _a.map((item) => {
+    return (h("section", { id: `${name}s` }, (_a = this[`${name}s`]) === null || _a === void 0 ? void 0 : _a.map((item) => {
       var _a;
       const isDraggable = name === 'draggable';
       const { id, value, connectableId, color } = item || {};
-      const isImage = !!(value && isImageUrl(value));
+      const isImage = value && isImageUrl(value);
       const connectable = this.draggables.find(d => d.connectableId === id);
       const isConnected = !!(connectableId || connectable);
       const tileColor = color || (connectable === null || connectable === void 0 ? void 0 : connectable.color);
       const connectedAttr = { style: { backgroundColor: `var(--${tileColor})`, color: 'var(--light)' }, connected: true };
-      return !!value && (h("div", { class: "tile-container" },
-        h("div", { ...(isConnected && connectedAttr), "data-hit": !!((_a = item === null || item === void 0 ? void 0 : item.hit) === null || _a === void 0 ? void 0 : _a.value) && isDraggable, id: id, key: id, class: { [name]: true, image: isImage }, onClick: () => { !isDraggable && this.onConnectableClick(item); } },
-          !isImage ? h("p", null, this.truncateValue(value)) : [h("yoo-img", { type: "background", src: value }), h("div", { class: "overlay" })],
-          this.readonly && this.renderCorrectionIcon(value))));
+      const tileAttr = { ...(isConnected && connectedAttr), hit: !!((_a = item === null || item === void 0 ? void 0 : item.hit) === null || _a === void 0 ? void 0 : _a.value) && isDraggable, type: isImage ? 'image' : 'text' };
+      return !!value && (h("div", { ...tileAttr, id: id, key: id, class: { [name]: true }, onClick: () => { !isDraggable && this.onConnectableClick(item); } },
+        !isImage ? h("p", null, this.truncateValue(value)) : [h("yoo-img", { type: "background", src: value }), h("div", { id: "overlay" })],
+        this.readonly && this.renderCorrectionIcon(value)));
     })));
   }
   renderBanner() {
     return this.livePreview && h("yoo-banner", null,
       h("p", { slot: "content" }));
   }
+  renderMain() {
+    return this.hasValues && h("main", { ref: element => (this.innerContainerElement = element) }, CONNECT_TYPES.map(type => this.renderContainer(type)));
+  }
   render() {
-    return this.hasValues && (h(Host, { class: getAppContext(this.host) },
+    return h(Host, null,
       this.renderBanner(),
-      h("div", { class: "inner-container", ref: (element) => (this.innerContainerElement = element) }, CONNECT_TYPES.map(type => this.renderContainer(type)))));
+      this.renderMain());
   }
   static get is() { return "yoo-form-connect"; }
   static get encapsulation() { return "shadow"; }
@@ -359,7 +365,7 @@ export class YooFormConnectComponent {
         "text": "true if the component is loaded within the preview mode in the course-creator"
       },
       "attribute": "live-preview",
-      "reflect": false
+      "reflect": true
     },
     "animated": {
       "type": "boolean",
@@ -376,7 +382,7 @@ export class YooFormConnectComponent {
         "text": "true if the component can have animations"
       },
       "attribute": "animated",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "true"
     },
     "shuffled": {

package/dist/collection/components/form/form-dynamic/form-dynamic.js

@@ -3342,7 +3342,8 @@ export class YooFormDynamicComponent {
           onFetchCustomData: (ev) => this.onFetchCustomData(field, ev),
           onExtraDataChanged: (ev) => this.onFieldExtraDataChanged(ev, field),
           customDataLoader: field.customDataLoader,
-          showHeader: field.showAutocompleteHeader
+          showHeader: field.showAutocompleteHeader,
+          dialogWidth: field.name !== 'operator' ? '17.5rem' : 'unset'
         };
         if (((field.min && field.min > 1) || (field.max && field.max > 0)) && attrs.validators) {
           attrs.validators.push({ name: field.type, options: { ...extraAttrs } });

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

@@ -595,12 +595,30 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 .outer-login-container .outer-input-container yoo-context-dialog {
   width: 100%;
 }
-.outer-login-container yoo-button#help-button {
-  align-self: flex-end;
+.outer-login-container .help-buttons {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+.outer-login-container .help-buttons yoo-button#help-button {
+  width: fit-content;
+  height: 1.5rem;
+  margin: -0.5rem 0 0 0;
+}
+.outer-login-container .help-buttons yoo-button#magic-button {
   width: fit-content;
   height: 1.5rem;
   margin: -0.5rem 0 0 0;
 }
+.outer-login-container .help-buttons.mobile {
+  justify-content: flex-end;
+}
+.outer-login-container .help-buttons:not(.mobile) yoo-button#help-button {
+  margin: -0.25rem -0.5rem 0 0;
+}
+.outer-login-container .help-buttons:not(.mobile) yoo-button#magic-button {
+  margin: -0.25rem 0 0 -0.5rem;
+}
 .outer-login-container #default-login-button {
   box-sizing: border-box;
   width: 100%;
@@ -668,14 +686,22 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   visibility: hidden !important;
 }
 
-.login-options.hide-google-login:not(.hide-advanced-login) #google-login-button {
+.login-options.hide-google-login.mobile:not(.hide-advanced-login) #google-login-button {
   transform: translateY(4rem);
   visibility: hidden !important;
 }
-.login-options.hide-google-login:not(.hide-advanced-login) #sso-login-button {
+.login-options.hide-google-login.mobile:not(.hide-advanced-login) #sso-login-button {
   transform: translateY(-4rem);
 }
 
+.login-options.hide-google-login:not(.mobile):not(.hide-advanced-login) #google-login-button {
+  transform: translateY(3rem);
+  visibility: hidden !important;
+}
+.login-options.hide-google-login:not(.mobile):not(.hide-advanced-login) #sso-login-button {
+  transform: translateY(-3rem);
+}
+
 .login-options.hide-advanced-login.hide-google-login,
 .login-options.hide-advanced-login.hide-google-login * {
   visibility: hidden !important;

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

@@ -9,17 +9,17 @@ export class YooLoginComponent {
     // Title Text
     this.mainTitle = '';
     // Subtitle Text
-    this.subtitle = 'LOGINSUBTITLE';
+    this.subtitle = 'YOOBICLOGINSUBTITLE';
     // Username label text
-    this.usernameLabel = 'USERNAME';
+    this.usernameLabel = 'YOOBICUSERNAME';
     // Password label text
-    this.passwordLabel = 'PASSWORD';
+    this.passwordLabel = 'YOOBICPASSWORD';
     // Help text like 'forgot password?'
-    this.helpText = 'FORGOTPASSWORD';
+    this.helpText = 'YOOBICFORGOTPASSWORD';
     // Reset password text (for action sheet button)
-    this.resetPasswordText = 'RESETPASSWORD';
+    this.resetPasswordText = 'YOOBICRESETPASSWORD';
     // Magic link text (for action sheet button)
-    this.magicLinkText = 'MAGICLINK';
+    this.magicLinkText = 'YOOBICMAGICLINK';
     // A color to override any app-color / dynamic coloring
     this.textColor = null;
     this.isFocused = false;
@@ -210,12 +210,15 @@ export class YooLoginComponent {
   }
   getButton(type, onClick, ref = undefined) {
     const isOtherLoginOptions = ['GOOGLE', 'SSO'].includes(type);
-    return (h("yoo-button", { id: type !== 'HELP' ? `${type.toLowerCase()}-login-button` : 'help-button', color: !isOtherLoginOptions ? 'app-color' : 'light', customColor: this.textColor && type === 'HELP' ? { color: this.textColor } : undefined, fill: type === 'HELP' ? 'transparent' : 'solid', size: isWeb(this.host) ? 'medium' : type === 'HELP' ? 'medium' : 'large', animated: false, onClick: onClick, ref: ref },
+    const isHelpButton = ['HELP', 'MAGIC'].includes(type);
+    return (h("yoo-button", { id: !isHelpButton ? `${type.toLowerCase()}-login-button` : `${type.toLowerCase()}-button`, color: !isOtherLoginOptions ? 'app-color' : 'light', customColor: this.textColor && isHelpButton ? { color: this.textColor } : undefined, fill: isHelpButton ? 'transparent' : 'solid', size: isWeb(this.host)
+        ? isHelpButton ? 'small' : 'medium'
+        : isHelpButton ? 'medium' : 'large', animated: false, onClick: onClick, ref: ref },
       type === 'SSO' && h("yoo-icon", { size: isWeb(this.host) ? 'small' : 'medium', slot: "start", name: "lock", color: "dark" }),
       type === 'GOOGLE' && h("img", { class: "google-logo", src: googleLogo, alt: "google logo", slot: "start" }),
-      type === 'HELP'
-        ? translate(this.helpText)
-        : translate(`${type !== 'SSO-DEFAULT' ? type : ''}LOGIN`)));
+      isHelpButton
+        ? translate(type === 'HELP' ? this.helpText : this.magicLinkText)
+        : translate(`YOOBIC${type !== 'SSO-DEFAULT' ? type : ''}LOGIN`)));
   }
   render() {
     return (h(Host, { style: {
@@ -235,8 +238,8 @@ export class YooLoginComponent {
       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(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(Footer, { hasCustomBackground: this.hasCustomBackground, copyrightMessage: this.copyrightMessage, textColor: this.primaryColor, version: this.version, onClick: () => {
           if (this.ssoOnly) {
             this.ssoOnly = false;
@@ -329,7 +332,7 @@ export class YooLoginComponent {
       },
       "attribute": "subtitle",
       "reflect": false,
-      "defaultValue": "'LOGINSUBTITLE'"
+      "defaultValue": "'YOOBICLOGINSUBTITLE'"
     },
     "usernameLabel": {
       "type": "string",
@@ -347,7 +350,7 @@ export class YooLoginComponent {
       },
       "attribute": "username-label",
       "reflect": false,
-      "defaultValue": "'USERNAME'"
+      "defaultValue": "'YOOBICUSERNAME'"
     },
     "passwordLabel": {
       "type": "string",
@@ -365,7 +368,7 @@ export class YooLoginComponent {
       },
       "attribute": "password-label",
       "reflect": false,
-      "defaultValue": "'PASSWORD'"
+      "defaultValue": "'YOOBICPASSWORD'"
     },
     "helpText": {
       "type": "string",
@@ -383,7 +386,7 @@ export class YooLoginComponent {
       },
       "attribute": "help-text",
       "reflect": false,
-      "defaultValue": "'FORGOTPASSWORD'"
+      "defaultValue": "'YOOBICFORGOTPASSWORD'"
     },
     "resetPasswordText": {
       "type": "string",
@@ -401,7 +404,7 @@ export class YooLoginComponent {
       },
       "attribute": "reset-password-text",
       "reflect": false,
-      "defaultValue": "'RESETPASSWORD'"
+      "defaultValue": "'YOOBICRESETPASSWORD'"
     },
     "magicLinkText": {
       "type": "string",
@@ -419,7 +422,7 @@ export class YooLoginComponent {
       },
       "attribute": "magic-link-text",
       "reflect": false,
-      "defaultValue": "'MAGICLINK'"
+      "defaultValue": "'YOOBICMAGICLINK'"
     },
     "defaultUsername": {
       "type": "string",

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

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

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

@@ -15,7 +15,7 @@ export const Header = ({ logo, title, textColor, error, closeClick }) => ([
           'web': isWeb()
         } },
         h("p", null, translate(error)),
-        h("a", { class: "link", style: { color: `var(--${isWeb() ? 'danger' : 'light'})` }, href: "mailto:support@yoobic.com" }, translate('NEEDHELP')))),
+        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))