@yoobic/yobi 8.3.0-4 → 8.3.0-41

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

@@ -1,5 +1,5 @@
-import { generateYoobicQRCode } from '@shared/utils';
-import { Component, Event, h, Prop, Watch } from '@stencil/core';
+import { copyToClipboard, downloadFile, generateYoobicQRCode, showToast, translate, updateSVGCustomColors } from '@shared/utils';
+import { Component, Event, getAssetPath, h, Prop, Watch } from '@stencil/core';
 import { setValidator } from '../../../utils/helpers/form-input-helpers';
 export class YooFormQrcodeComponent {
   constructor() {
@@ -9,13 +9,13 @@ export class YooFormQrcodeComponent {
     this.validate();
   }
   onValueChanged() {
-    this.renderQRCode();
+    this.generateQRCode();
   }
   componentWillLoad() {
     setValidator(this);
   }
   componentDidLoad() {
-    this.renderQRCode();
+    this.generateQRCode();
   }
   validate() {
     let isValid = true;
@@ -28,14 +28,54 @@ export class YooFormQrcodeComponent {
     }
     return this.validity;
   }
-  renderQRCode() {
-    if (this.value && this.canvasEl) {
+  generateQRCode() {
+    if (this.canvasEl) {
       return generateYoobicQRCode(this.value, this.canvasEl, this.size, this.logo, this.whiteLabel);
     }
   }
+  onDownloadQRCode() {
+    downloadFile(this.canvasEl.toDataURL('image/jpeg'), translate('QRCODE'));
+  }
+  onCopyLinkToClipboard() {
+    copyToClipboard(this.value);
+    showToast({
+      message: translate('COPIEDTOCLIPBOARD'),
+      duration: 2000,
+      cssClass: 'success header',
+      closable: true
+    });
+  }
+  renderIllustration() {
+    const path = getAssetPath('./assets/form-qrcode/general-course-qr-code.svg');
+    return (h("yoo-img", { src: path, svgOptions: { afterLoad: (_, svgString) => updateSVGCustomColors(svgString) } }));
+  }
+  renderShareLink() {
+    return (h("div", { class: "inner-container" },
+      h("div", { class: "header-container" },
+        h("span", null, translate('YOOBICSHARELINK')),
+        h("yoo-button", { color: "light", onClick: () => this.onCopyLinkToClipboard() },
+          h("yoo-icon", { slot: "start", size: "small", name: "link" }),
+          translate('COPYLINK')))));
+  }
+  renderDownload() {
+    return (h("div", { class: "header-container" },
+      h("span", null, translate('QRCODE')),
+      h("yoo-button", { color: "light", onClick: () => this.onDownloadQRCode() },
+        h("yoo-icon", { slot: "start", size: "small", name: "download" }),
+        translate('DOWNLOAD'))));
+  }
+  renderQRCode() {
+    return (h("div", { class: "inner-container" },
+      this.showDownload && this.renderDownload(),
+      h("div", { class: "canvas-container" },
+        h("canvas", { class: "canvas", ref: (el) => (this.canvasEl = el) }))));
+  }
   render() {
-    return (h("div", { class: { 'outer-container': true, readonly: this.readonly } },
-      h("canvas", { class: "canvas", ref: (el) => (this.canvasEl = el) })));
+    return this.value && (h("div", { class: { 'outer-container': true, readonly: this.readonly } },
+      this.showIllustration && this.renderIllustration(),
+      !!this.description && h("p", { class: "description" }, this.description),
+      this.showShareLink && this.renderShareLink(),
+      this.renderQRCode()));
   }
   static get is() { return "yoo-form-qrcode"; }
   static get encapsulation() { return "shadow"; }
@@ -45,6 +85,7 @@ export class YooFormQrcodeComponent {
   static get styleUrls() { return {
     "$": ["form-qrcode.css"]
   }; }
+  static get assetsDirs() { return ["assets/form-qrcode"]; }
   static get properties() { return {
     "validators": {
       "type": "unknown",
@@ -182,6 +223,74 @@ export class YooFormQrcodeComponent {
       "attribute": "logo",
       "reflect": false
     },
+    "showIllustration": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Show illustration on top of the description"
+      },
+      "attribute": "show-illustration",
+      "reflect": false
+    },
+    "description": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Description displayed on top of Share Link button and QR Code"
+      },
+      "attribute": "description",
+      "reflect": false
+    },
+    "showShareLink": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Show button to share QR Code link"
+      },
+      "attribute": "show-share-link",
+      "reflect": false
+    },
+    "showDownload": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Show button to download QR Code link"
+      },
+      "attribute": "show-download",
+      "reflect": false
+    },
     "size": {
       "type": "string",
       "mutable": false,

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

@@ -1,3 +1,4 @@
+import { IRoute } from '@shared/interfaces';
 import { getAsyncExtraData, getCssColor, getCurrentLanguage, getLocaleVariantScormCloudId, getSession, isAndroid, isNativeMobile, isSafari, isWeb, screenOrientationLock, screenOrientationUnlock, showAlert, showModal, translate, translateMulti } from '@shared/utils';
 import { Component, Element, Event, forceUpdate, h, Method, Prop, State, Watch } from '@stencil/core';
 import { get, isNumber } from 'lodash-es';
@@ -13,8 +14,9 @@ export class YooFormScormComponent {
     this.reloadScorm = true;
   }
   componentWillLoad() {
+    var _a;
     setValidator(this);
-    this.isPreview = window.location.href.indexOf('missionviewer') >= 0 || window.location.href.indexOf('courseeditor') >= 0;
+    this.isPreview = window.location.href.indexOf(IRoute.missionviewer) >= 0 || window.location.href.indexOf(IRoute.courseeditor) >= 0 || ((_a = getSession()) === null || _a === void 0 ? void 0 : _a.isExternal);
     this.fetchLocalizedScorm();
   }
   componentWillUpdate() {

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

@@ -92,7 +92,7 @@ export class YooFormShoppingComponent {
         h("div", { class: "title" },
           translate('TOTAL'),
           ":"),
-        h("div", { class: "price" }, pipes.currency.transform(ret.price, false, this.currencySymbol, true)))),
+        h("div", { class: "price" }, pipes.currency.transform(ret.price, { strictPrecision: false, customSymbol: this.currencySymbol, forceSymbol: true })))),
       this.shoppingView === 'checkout-complete' && h("span", { class: "bottom-info" }, translate('VQEMAILCONFIRM')))) : (h("yoo-empty-state", { type: "shopping" }));
   }
   renderInnerProducts(readonly) {
@@ -117,7 +117,7 @@ export class YooFormShoppingComponent {
                   this.setProduct(product, ev.detail);
                 } })),
               price > 0 && h("div", { class: "price" },
-                pipes.currency.transform(price, false, this.currencySymbol, true),
+                pipes.currency.transform(price, { strictPrecision: false, customSymbol: this.currencySymbol, forceSymbol: true }),
                 " ")))
           ];
         }

package/dist/collection/components/form/form-swipe-cards/form-swipe-cards.css

@@ -300,7 +300,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   position: relative;
   display: block;
   height: 100%;
-  overflow: hidden;
 }
 :host yoo-banner {
   height: 0;
@@ -310,13 +309,11 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   transition: opacity 1s ease-in-out;
 }
 :host #instructions #header {
-  padding: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
-  background: var(--dark, #000000);
-  border-radius: var(--border-radius-04, 0.25rem);
+  display: flex;
+  flex-direction: column;
 }
-:host #instructions #header h1 {
-  margin: 0;
-  color: var(--light, #ffffff);
+:host #instructions #header #title {
+  font-weight: bold;
 }
 :host #instructions #categories {
   display: inline-grid;
@@ -325,9 +322,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin: var(--spacing-24, 1.5rem) 0;
   text-align: center;
 }
-:host #instructions #categories yoo-icon {
-  margin: 0 auto;
-}
 :host #instructions #categories .category {
   display: flex;
   flex-direction: column;
@@ -339,12 +333,17 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   max-width: 75%;
   margin: auto;
   padding: var(--spacing-16, 1rem) 0;
+  font-weight: bold;
 }
 :host #instructions #categories .category yoo-tag {
   margin: 0 auto;
 }
 :host #instructions yoo-button {
-  padding: var(--spacing-16, 1rem);
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  box-sizing: border-box;
 }
 :host #instructions #document {
   background-color: var(--light, #ffffff);
@@ -382,7 +381,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host [direction].card.current.card + .card + .card + .card {
   transform: translate(0%, -2%) scale(0.9);
-  opacity: 0.7;
+  opacity: 1;
 }
 :host [direction=left]#game, :host [direction=left].current > .content-category {
   background-color: var(--app-color, #5a30f4) !important;
@@ -440,23 +439,23 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   padding-top: 85%;
   content: "";
 }
-:host #stack {
+:host #cards {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 100%;
   width: 65%;
-  max-width: 25rem;
+  max-width: 16rem;
   height: 100%;
   margin-top: var(--spacing-16, 1rem);
 }
-:host #stack.rtl {
+:host #cards.rtl {
   top: 50%;
   right: 50%;
   transform: translate(50%, -50%);
 }
-:host #stack .card {
+:host #cards .card {
   position: absolute;
   top: 0;
   right: 0;
@@ -475,20 +474,21 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   border-radius: var(--border-radius-08, 0.5rem);
   box-shadow: var(--shadow-05, -0.375rem -0.375rem 0.5rem 0 rgba(0, 0, 0, 0.1));
   transition: transform 0.25s, opacity 0.25s, background-color 0.25s;
+  will-change: transform, opacity;
 }
-:host #stack .card:not([direction]) {
+:host #cards .card:not([direction]) {
   transform: translate(0, -5%) scale(0.85);
   opacity: 0;
 }
-:host #stack .card.current {
+:host #cards .card.current {
   z-index: 3;
 }
-:host #stack .card.current:not(.revealing) {
+:host #cards .card.current:not(.revealing) {
   transform: translate(0%, 9%) scale(1);
   opacity: 1;
   transition-delay: 200ms;
 }
-:host #stack .card.current.revealing {
+:host #cards .card.current.revealing {
   animation: "current" 0.25s ease-in-out;
   animation-delay: 150ms;
   animation-fill-mode: forwards;
@@ -499,15 +499,15 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
     opacity: 1;
   }
 }
-:host #stack .card.second {
+:host #cards .card.second {
   z-index: 2;
 }
-:host #stack .card.second:not(.revealing) {
+:host #cards .card.second:not(.revealing) {
   transform: translate(0%, 3.5%) scale(0.95);
   opacity: 1;
   transition-delay: 400ms;
 }
-:host #stack .card.second.revealing {
+:host #cards .card.second.revealing {
   animation: "second" 0.25s ease-in-out;
   animation-delay: 300ms;
   animation-fill-mode: forwards;
@@ -518,15 +518,15 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
     opacity: 1;
   }
 }
-:host #stack .card.third {
+:host #cards .card.third {
   z-index: 1;
 }
-:host #stack .card.third:not(.revealing) {
+:host #cards .card.third:not(.revealing) {
   transform: translate(0%, -2%) scale(0.9);
-  opacity: 0.7;
+  opacity: 1;
   transition-delay: 600ms;
 }
-:host #stack .card.third.revealing {
+:host #cards .card.third.revealing {
   animation: "third" 0.25s ease-in-out;
   animation-delay: 450ms;
   animation-fill-mode: forwards;
@@ -534,60 +534,54 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 @keyframes third {
   to {
     transform: translate(0%, -2%) scale(0.9);
-    opacity: 0.7;
+    opacity: 1;
   }
 }
-:host #stack .card:after {
-  display: block;
-  height: 0;
-  padding-top: 133%;
-  content: "";
-}
-:host #stack .card.current .content-image,
-:host #stack .card.current .content-text, :host #stack .card[direction] .content-image,
-:host #stack .card[direction] .content-text {
+:host #cards .card.current .content-image,
+:host #cards .card.current .content-text, :host #cards .card[direction] .content-image,
+:host #cards .card[direction] .content-text {
   opacity: 1 !important;
 }
-:host #stack .card[swiped] {
+:host #cards .card[swiped] {
   animation: fade-out 1s ease-out;
   animation-fill-mode: forwards;
 }
-:host #stack .card[swiped=left] {
+:host #cards .card[swiped=left] {
   transform: translate(-100%, 15%) rotate(-15deg);
 }
-:host #stack .card[swiped=right] {
+:host #cards .card[swiped=right] {
   transform: translate(100%, 15%) rotate(15deg);
 }
-:host #stack .card .content-category,
-:host #stack .card .content-image,
-:host #stack .card .content-text {
+:host #cards .card [class^=content] {
   position: absolute;
   width: 100%;
   height: 100%;
   word-break: break-word;
   opacity: 0;
 }
-:host #stack .card .content-category,
-:host #stack .card .content-text {
+:host #cards .card .content-category,
+:host #cards .card .content-text {
   display: flex;
   align-items: center;
   justify-content: center;
+  box-sizing: border-box;
+  padding: var(--spacing-16, 1rem);
 }
-:host #stack .card .content-image {
+:host #cards .card .content-image {
   transition: opacity 0.25s linear;
 }
-:host #stack .card[type=image] yoo-img {
+:host #cards .card[type=image] yoo-img {
   height: 100%;
 }
-:host #stack .card[type=textimage] .content-image {
+:host #cards .card[type=textimage] .content-image {
   top: 0;
   bottom: 3.5rem;
 }
-:host #stack .card[type=textimage] .content-image yoo-img {
+:host #cards .card[type=textimage] .content-image yoo-img {
   height: calc(100% - 3.5rem);
 }
-:host #stack .card[type=textimage] .content-text,
-:host #stack .card[type=textimage] .content-category {
+:host #cards .card[type=textimage] .content-text,
+:host #cards .card[type=textimage] .content-category {
   bottom: 0;
   height: 3.5rem;
 }
@@ -726,6 +720,22 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   transition: transform 0.8s linear;
 }
 
+:host([live-preview]),
+:host(.mobile) {
+  min-height: 70vh;
+}
+:host([live-preview]) #instructions #header,
+:host(.mobile) #instructions #header {
+  padding: var(--spacing-16, 1rem);
+  background: var(--dark, #000000);
+  border-radius: var(--border-radius-04, 0.25rem);
+}
+:host([live-preview]) #instructions #header #title,
+:host(.mobile) #instructions #header #title {
+  color: var(--light, #ffffff);
+  font-weight: bold;
+  font-size: var(--font-size-28, 1.75rem);
+}
 :host([live-preview]) #instructions yoo-button,
 :host(.mobile) #instructions yoo-button {
   position: absolute;
@@ -733,20 +743,28 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   width: stretch;
 }
 
-:host(.web:not([live-preview])) #instructions #header {
-  background: unset;
+:host(.web:not([live-preview])) #instructions {
+  position: relative;
+}
+:host(.web:not([live-preview])) #instructions yoo-icon[name=swipe-explanation] {
+  width: 5rem;
+  height: 5rem;
+  margin: auto;
+  --inner-width: 5rem;
+  --inner-height: 5rem;
 }
 :host(.web:not([live-preview])) #instructions yoo-button {
   position: fixed;
-  right: var(--spacing-16, 1rem);
+  right: var(--spacing-32, 2rem);
   bottom: var(--spacing-16, 1rem);
   z-index: 1;
   transform: translateY(-50%);
 }
 :host(.web:not([live-preview])) #game {
+  height: 60%;
   max-height: 21rem;
 }
-:host(.web:not([live-preview])) #game #stack {
+:host(.web:not([live-preview])) #game #cards {
   top: 5%;
   margin-top: unset;
   transform: translate(-50%, 0);
@@ -761,11 +779,15 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   align-self: end;
 }
 :host(.web:not([live-preview])) #header {
-  margin-bottom: var(--spacing-24, 1.5rem);
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
   line-height: 1.75;
   text-align: center;
+  background-color: var(--stable-ultralight, #fafafa);
 }
-:host(.web:not([live-preview])) #header h1 {
-  margin: var(--spacing-08, 0.5rem) 0 !important;
+:host(.web:not([live-preview])) #header #title {
   color: var(--dark, #000000) !important;
+  font-weight: bold;
+  font-size: var(--font-size-28, 1.75rem);
 }