@yoobic/yobi 8.3.0-41 → 8.3.0-44

package/dist/collection/components/2.molecules/modal-controller/modal-controller.js

@@ -4,10 +4,30 @@ export class YooIonModalControllerComponent {
   constructor() {
     this.modals = new Map();
     this.topOverlayID = 0;
+    this.devices = [];
+  }
+  onDeviceCreated(ev) {
+    this.devices.push(ev.detail);
+  }
+  onDeviceDestroyed(ev) {
+    const index = this.devices.findIndex(device => device === ev.detail);
+    this.devices.splice(index, index + 1);
+  }
+  onClick(ev) {
+    if (this.devices.length) {
+      this.device = ev.composedPath().find(el => el.nodeName === 'YOO-DEVICE');
+    }
   }
   modalWillPresent(ev) {
-    this.modals.set(ev.target.overlayId, ev.target);
-    this.topOverlayID = ev.target.overlayId;
+    var _a, _b, _c, _d, _e;
+    if (ev.target.nodeName === 'YOO-ION-MODAL') {
+      this.modals.set(ev.target.overlayId, ev.target);
+      this.topOverlayID = ev.target.overlayId;
+    }
+    else {
+      this.modals.set((_b = (_a = ev.composedPath()) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.overlayId, (_c = ev.composedPath()) === null || _c === void 0 ? void 0 : _c[0]);
+      this.topOverlayID = (_e = (_d = ev.composedPath()) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.overlayId;
+    }
   }
   modalWillDismiss(ev) {
     this.modals.delete(ev.target.overlayId);
@@ -32,7 +52,7 @@ export class YooIonModalControllerComponent {
    * Create a modal overlay with modal options.
    */
   async create(opts) {
-    return createOverlay(document.createElement('yoo-ion-modal'), opts, opts.host);
+    return createOverlay(document.createElement('yoo-ion-modal'), opts, this.device || opts.host);
   }
   /**
    * Dismiss the open modal overlay.
@@ -188,6 +208,24 @@ export class YooIonModalControllerComponent {
     }
   }; }
   static get listeners() { return [{
+      "name": "deviceCreated",
+      "method": "onDeviceCreated",
+      "target": "body",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "deviceDestroyed",
+      "method": "onDeviceDestroyed",
+      "target": "body",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "click",
+      "method": "onClick",
+      "target": "body",
+      "capture": true,
+      "passive": false
+    }, {
       "name": "ionModalWillPresent",
       "method": "modalWillPresent",
       "target": "body",

package/dist/collection/components/2.molecules/toast-controller/toast-controller.js

@@ -3,9 +3,28 @@ import { createOverlay, dismissOverlay, getTopOverlay, removeLastOverlay } from
 export class YooIonToastControllerComponent {
   constructor() {
     this.toasts = new Map();
+    this.devices = [];
+  }
+  onDeviceCreated(ev) {
+    this.devices.push(ev.detail);
+  }
+  onDeviceDestroyed(ev) {
+    const index = this.devices.findIndex(device => device === ev.detail);
+    this.devices.splice(index, index + 1);
+  }
+  onClick(ev) {
+    if (this.devices.length) {
+      this.device = ev.composedPath().find((el) => el.nodeName === 'YOO-DEVICE');
+    }
   }
   toastWillPresent(ev) {
-    this.toasts.set(ev.target.overlayId, ev.target);
+    var _a, _b, _c;
+    if (ev.target.nodeName === 'YOO-TOAST') {
+      this.toasts.set(ev.target.overlayId, ev.target);
+    }
+    else {
+      this.toasts.set((_b = (_a = ev.composedPath()) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.overlayId, (_c = ev.composedPath()) === null || _c === void 0 ? void 0 : _c[0]);
+    }
   }
   toastWillDismiss(ev) {
     this.toasts.delete(ev.target.overlayId);
@@ -25,7 +44,7 @@ export class YooIonToastControllerComponent {
    * Create a toast overlay with toast options.
    */
   async create(opts) {
-    return createOverlay(document.createElement('yoo-toast'), opts);
+    return createOverlay(document.createElement('yoo-toast'), opts, this.device);
   }
   /**
    * Dismiss the open toast overlay.
@@ -151,6 +170,24 @@ export class YooIonToastControllerComponent {
     }
   }; }
   static get listeners() { return [{
+      "name": "deviceCreated",
+      "method": "onDeviceCreated",
+      "target": "body",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "deviceDestroyed",
+      "method": "onDeviceDestroyed",
+      "target": "body",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "click",
+      "method": "onClick",
+      "target": "body",
+      "capture": true,
+      "passive": false
+    }, {
       "name": "ionToastWillPresent",
       "method": "toastWillPresent",
       "target": "body",

package/dist/collection/components/3.organisms/device/device.css

@@ -3075,4 +3075,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host(.iphone-x.simple) .inner-shadow {
   box-shadow: none;
+}
+
+:host(.iphone-x) {
+  --safe-area-inset-top: var(--spacing-32, 2rem);
 }

package/dist/collection/components/3.organisms/device/device.js

@@ -1,6 +1,6 @@
 import { devices } from '@shared/interfaces';
 import { debounce, findParent } from '@shared/utils';
-import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';
+import { Component, Element, Event, h, Host, Prop, Watch } from '@stencil/core';
 export class YooDeviceComponent {
   constructor() {
     this.resizeOnUpdate = false;
@@ -23,6 +23,7 @@ export class YooDeviceComponent {
       window.addEventListener('resize', this.resizeListener);
       this.resize();
     }
+    this.deviceCreated.emit(this.host);
   }
   componentDidUpdate() {
     if (this.resizeOnUpdate) {
@@ -31,6 +32,7 @@ export class YooDeviceComponent {
   }
   disconnectedCallback() {
     window.removeEventListener('resize', this.resizeListener);
+    document.body.dispatchEvent(new CustomEvent('deviceDestroyed', { detail: this.host }));
   }
   resize() {
     const parent = findParent(this.host, this.scaledContainerSelector);
@@ -117,7 +119,7 @@ export class YooDeviceComponent {
     ];
   }
   render() {
-    return (h(Host, { class: { [this.deviceEntry.device]: true, 'web': this.deviceEntry.device === 'macbook' } },
+    return (h(Host, { class: { [this.deviceEntry.device]: true, 'mobile': this.deviceEntry.device !== 'macbook', 'web': this.deviceEntry.device === 'macbook' } },
       h("div", { class: {
           'marvel-device': true,
           [this.deviceEntry.device]: true,
@@ -189,6 +191,26 @@ export class YooDeviceComponent {
       }
     }
   }; }
+  static get events() { return [{
+      "method": "deviceCreated",
+      "name": "deviceCreated",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "HTMLYooDeviceElement",
+        "resolved": "HTMLYooDeviceElement",
+        "references": {
+          "HTMLYooDeviceElement": {
+            "location": "global"
+          }
+        }
+      }
+    }]; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
       "propName": "deviceEntry",

package/dist/collection/components/entities/card-list/color/card-list-color.css

@@ -498,4 +498,11 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 
 :host(.missiondescriptiontemplates) .outer-container .heading-container .heading {
   white-space: normal;
+}
+
+:host(.coursecategories) .outer-container {
+  justify-content: center;
+}
+:host(.coursecategories) .outer-container .heading-container {
+  font-weight: initial;
 }

package/dist/collection/components/entities/card-list/color/card-list-color.js

@@ -8,7 +8,7 @@ export class YooCardListColorComponent {
   }
   renderHeader() {
     var _a, _b, _c, _d;
-    const { iconTopMiddle, iconTopMiddleColor, iconTopRight, iconTopRightColor, iconTopLeft, iconTopLeftColor, color, heading } = this.entry;
+    const { iconTopMiddle, iconTopMiddleColor, iconTopMiddleCustomColor, iconTopRight, iconTopRightColor, iconTopLeft, iconTopLeftColor, color, heading } = this.entry;
     const bigIcon = ((_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.contains('creationtypes')) || ((_d = (_c = this.host) === null || _c === void 0 ? void 0 : _c.classList) === null || _d === void 0 ? void 0 : _d.contains('missiondescriptiontemplates'));
     return (h("div", { class: "heading-container", style: { '--align-items': iconTopMiddle ? 'center' : 'normal', '--flex-direction': iconTopMiddle ? 'column-reverse' : 'row', fill: color } },
       !!iconTopLeft && (h("div", { class: "icon-left" },
@@ -19,7 +19,7 @@ export class YooCardListColorComponent {
         h("yoo-icon", { size: "medium", name: iconTopRight, color: iconTopRightColor }),
         this.notif && h("yoo-badge", { shape: "dot" }))),
       !!iconTopMiddle && (h("div", { class: "icon-middle" },
-        h("yoo-icon", { size: "medium", name: iconTopMiddle, color: iconTopMiddleColor }),
+        h("yoo-icon", { size: "medium", name: iconTopMiddle, color: iconTopMiddleColor, customColor: iconTopMiddleCustomColor }),
         this.notif && h("yoo-badge", { shape: "dot" })))));
   }
   renderSubHeader() {

package/dist/collection/components/entities/card-list/simple/card-list-simple.js

@@ -40,7 +40,7 @@ export class YooCardListSimpleComponent {
       h("yoo-flag", { shape: "circle", country: countryCode })));
   }
   renderCardImage() {
-    return this.host.classList.contains('language') ? (this.renderFlagContainer()) : this.host.classList.contains('badges') ? (h("yoo-tag", { size: this.entry.avatarSize || 'medium', icon: this.entry.icon, customColor: this.entry.customColor })) : (this.renderAvatar());
+    return this.host.classList.contains('language') ? (this.renderFlagContainer()) : (this.host.classList.contains('badges') || this.host.classList.contains('coursecategories')) ? (h("yoo-tag", { size: this.entry.avatarSize || 'medium', icon: this.entry.icon, customColor: this.entry.customColor })) : (this.renderAvatar());
   }
   renderAvatar() {
     var _a, _b, _c;

package/dist/collection/components/entities/card-sticky/card-sticky.css

@@ -510,9 +510,13 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   content: "";
 }
 :host .outer-container.courses .tags-container, :host .outer-container.plans .tags-container, :host .outer-container.courses-small .tags-container {
+  display: flex;
   margin-bottom: -0.2rem;
   padding: 0 0 0 var(--spacing-16, 1rem);
 }
+:host .outer-container.courses .tags-container yoo-tag.bottom, :host .outer-container.plans .tags-container yoo-tag.bottom, :host .outer-container.courses-small .tags-container yoo-tag.bottom {
+  --padding: 0 var(--spacing-04, 0.25rem) 0 0;
+}
 :host .outer-container.courses .bottom-container, :host .outer-container.plans .bottom-container, :host .outer-container.courses-small .bottom-container {
   position: absolute;
   display: flex;
@@ -736,7 +740,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   background-color: var(--success-10, rgba(58, 167, 109, 0.1));
 }
 
-:host([ongoing]) yoo-icon[name=ongoing] {
+:host([inprogress]) yoo-icon[name=ongoing] {
   right: var(--spacing-48, 3rem);
   background-color: var(--info-20, rgba(216, 76, 150, 0.2));
 }

package/dist/collection/components/entities/card-sticky/card-sticky.js

@@ -38,11 +38,11 @@ export class YooCardStickyComponent {
     return { width: `${this.imageWidth}px`, height: `${this.imageHeight}px` };
   }
   renderIcons() {
-    const { isLocked, isBookmarked, isOngoing, isTicked } = this.entry;
+    const { isLocked, isBookmarked, inProgress, isTicked } = this.entry;
     return [
       isLocked && h("yoo-icon", { class: "isLocked", name: "lock", size: "small" }),
       !isLocked && h("yoo-icon", { name: "bookmark", size: "small", color: isBookmarked ? 'app-color' : 'stable-alt' }),
-      !isLocked && isOngoing && h("yoo-icon", { class: "ongoing", name: "ongoing", size: "small", color: "info" }),
+      !isLocked && inProgress && h("yoo-icon", { class: "ongoing", name: "ongoing", size: "small", color: "info" }),
       !isLocked && isTicked && h("yoo-icon", { class: "tick", name: "tick", size: "small", color: "success" })
     ];
   }
@@ -81,7 +81,7 @@ export class YooCardStickyComponent {
     var _a, _b;
     const hasMediaBadges = ((_b = (_a = this.entry) === null || _a === void 0 ? void 0 : _a.mediaBadges) === null || _b === void 0 ? void 0 : _b.length) > 0;
     const isFullWidth = this.host.classList.contains('full-width');
-    const showHeaderViewBadge = hasMediaBadges && !(isFullWidth || !isWeb(this.host));
+    const showHeaderViewBadge = hasMediaBadges && !isFullWidth;
     return (h("div", { class: { 'outer-container': true, [this.type]: true, ticked: this.entry.isTicked }, style: this.getCardSize() },
       h("yoo-img", { instant: true, type: "background", class: "image-container", disabled: this.entry.isLocked, src: this.entry.imgSrc }, this.renderIcons()),
       h("div", { class: "bottom-container" },
@@ -122,7 +122,8 @@ export class YooCardStickyComponent {
     }
   }
   render() {
-    return (this.entry && (h(Host, { ...{ locked: this.entry.isLocked, bookmarked: this.entry.isBookmarked, ticked: this.entry.isTicked, ongoing: this.entry.isOngoing }, class: { ...getAppContext(this.host) } }, this.renderBasedOnType())));
+    var _a;
+    return (this.entry && (h(Host, { ...{ locked: this.entry.isLocked, bookmarked: this.entry.isBookmarked, ticked: this.entry.isTicked, inprogress: (_a = this.entry) === null || _a === void 0 ? void 0 : _a.inProgress }, class: { ...getAppContext(this.host) } }, this.renderBasedOnType())));
   }
   static get is() { return "yoo-card-sticky"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/entities/entity/entity.css

@@ -881,4 +881,22 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --image-overlay: linear-gradient(to bottom, var(--transparent-linear-gradient, rgba(255, 255, 255, 0)) -73%, var(--dark-40, rgba(0, 0, 0, 0.4)));
   --title-font-size: var(--font-size-14, 0.875rem);
   --title-line-height: var(--font-size-32, 2rem);
+}
+
+:host(.coursecategories) yoo-card-menu:hover {
+  cursor: pointer;
+}
+:host(.coursecategories) yoo-card-menu {
+  --counter-color: var(--stable);
+  --icon-color: var(--dark);
+  --icon-background-color: var(--dark-10);
+  --icon-margin-left: var(--spacing-16);
+  --icon-border-radius: var(--spacing-64);
+  --icon-padding: var(--spacing-04);
+  --container-box-shadow: var(--shadow-01);
+  --container-padding-bottom: 0;
+  --container-border-radius: var(--border-radius-08);
+  --title-padding: 0.75rem 0 0.75rem 0;
+  --arrow-margin: 0;
+  --background-color: var(--light);
 }