@yoobic/yobi 8.2.0-3 → 8.2.0-6

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

@@ -206,11 +206,24 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --feed-card-max-height: 230px;
   cursor: pointer;
 }
+:host yoo-tag {
+  --padding: 0 var(--spacing-04, 0.25rem) 0 var(--spacing-04, 0.25rem);
+  color: var(--text-color);
+}
 :host yoo-tag.top.left {
   position: absolute;
-  top: var(--spacing-08, 0.5rem);
-  left: var(--spacing-08, 0.5rem);
+  top: var(--spacing-16, 1rem);
+  left: var(--spacing-16, 1rem);
   z-index: 9;
+  border-radius: var(--border-radius-04, 0.25rem);
+}
+:host yoo-icon {
+  width: var(--spacing-16, 1rem);
+  height: var(--spacing-16, 1rem);
+}
+:host yoo-icon[name=bookmark] {
+  right: var(--spacing-16, 1rem);
+  background-color: var(--light-20, rgba(255, 255, 255, 0.2));
 }
 :host .outer-container {
   position: relative;
@@ -233,8 +246,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   position: absolute;
   width: 100%;
   height: 100%;
-  background: linear-gradient(90deg, var(--light, #ffffff), var(--light, #ffffff) 40%, rgba(255, 255, 255, 0));
-  border-radius: 0.25rem;
+  background: linear-gradient(90deg, var(--light, #ffffff), var(--light, #ffffff) 40%, var(--dark-10, rgba(0, 0, 0, 0.1)));
+  border-radius: var(--border-radius-04, 0.25rem);
 }
 :host .outer-container .gradient-container .text-container {
   display: flex;
@@ -468,34 +481,49 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin-left: auto;
 }
 :host .outer-container.courses, :host .outer-container.plans, :host .outer-container.courses-small {
+  --text-color: var(--light, #ffffff);
   display: flex;
   flex-direction: column;
   box-shadow: var(--card-shadow-2, 0 0.3125rem 0.9375rem 0 rgba(40, 47, 54, 0.08));
 }
 :host .outer-container.courses yoo-img, :host .outer-container.plans yoo-img, :host .outer-container.courses-small yoo-img {
+  position: relative;
   width: 100%;
   height: 100%;
+  border-radius: var(--border-radius-08, 0.5rem);
 }
 :host .outer-container.courses yoo-img yoo-icon, :host .outer-container.plans yoo-img yoo-icon, :host .outer-container.courses-small yoo-img yoo-icon {
   position: absolute;
-  top: var(--spacing-08, 0.5rem);
-  right: var(--spacing-08, 0.5rem);
+  top: var(--spacing-16, 1rem);
   z-index: 1;
-  padding: 0.5rem;
-  background: var(--stable-alt-60, rgba(208, 208, 208, 0.6));
+  padding: var(--spacing-04, 0.25rem);
   border: none;
-  border-radius: 50%;
-  fill: var(--app-color, #5a30f4);
+  border-radius: var(--border-radius-24, 1.5rem);
+}
+:host .outer-container.courses yoo-img::after, :host .outer-container.plans yoo-img::after, :host .outer-container.courses-small yoo-img::after {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 14%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0.5) 85%, black 100%);
+  background-blend-mode: multiply;
+  border-radius: var(--border-radius-08, 0.5rem);
+  content: "";
+}
+:host .outer-container.courses .tags-container, :host .outer-container.plans .tags-container, :host .outer-container.courses-small .tags-container {
+  margin-bottom: -0.2rem;
+  padding: 0 0 0 var(--spacing-16, 1rem);
 }
 :host .outer-container.courses .bottom-container, :host .outer-container.plans .bottom-container, :host .outer-container.courses-small .bottom-container {
   position: absolute;
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  flex-wrap: wrap;
+  justify-content: flex-end;
   width: 100%;
   height: 100%;
   overflow-y: auto;
   background-color: var(--dark-40, rgba(0, 0, 0, 0.4));
+  border-radius: var(--border-radius-08, 0.5rem);
   /* Track */
   /* Handle */
 }
@@ -518,27 +546,58 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   background: var(--stable, #adadad);
 }
 :host .outer-container.courses .bottom-container .text-wrapper, :host .outer-container.plans .bottom-container .text-wrapper, :host .outer-container.courses-small .bottom-container .text-wrapper {
+  overflow: hidden;
+  margin: 0 0 var(--spacing-16, 1rem) var(--spacing-16, 1rem);
   overflow-y: hidden;
   color: var(--light, #ffffff);
   font-weight: var(--font-weight-700, 700);
 }
+@supports (display: -webkit-box) {
+  :host .outer-container.courses .bottom-container .text-wrapper, :host .outer-container.plans .bottom-container .text-wrapper, :host .outer-container.courses-small .bottom-container .text-wrapper {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+}
 :host .outer-container.courses .bottom-container .subheading, :host .outer-container.plans .bottom-container .subheading, :host .outer-container.courses-small .bottom-container .subheading {
   color: transparent;
 }
 :host .outer-container.courses .bottom-container .text-wrapper, :host .outer-container.plans .bottom-container .text-wrapper {
+  overflow: hidden;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: flex-end;
   max-width: 90%;
-  margin: auto;
-  font-size: var(--font-size-24, 1.5rem);
-  text-align: center;
+  margin: 0 0 var(--spacing-16, 1rem) var(--spacing-16, 1rem);
+  font-size: var(--font-size-18, 1.125rem);
+  text-align: left;
+}
+@supports (display: -webkit-box) {
+  :host .outer-container.courses .bottom-container .text-wrapper, :host .outer-container.plans .bottom-container .text-wrapper {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
 }
 :host .outer-container.courses-small {
   width: 133px;
   height: 90px;
 }
 :host .outer-container.courses-small .bottom-container .text-wrapper {
+  overflow: hidden;
+  flex-direction: column-reverse;
+  justify-content: flex-start;
+  margin: 0 0 var(--spacing-16, 1rem) var(--spacing-16, 1rem);
   font-size: var(--font-size-18, 1.125rem);
   line-height: var(--font-size-18, 1.125rem);
 }
+@supports (display: -webkit-box) {
+  :host .outer-container.courses-small .bottom-container .text-wrapper {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+}
 
 @media only screen and (max-width: 320px) {
   :host .outer-container.feeds {
@@ -648,5 +707,33 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 
 :host(.courses.horizontal:not(.web)) .outer-container.courses .bottom-container .text-wrapper {
+  overflow: hidden;
+  margin: 0 0 var(--spacing-16, 1rem) var(--spacing-16, 1rem);
   font-size: var(--font-size-16, 1rem);
+}
+@supports (display: -webkit-box) {
+  :host(.courses.horizontal:not(.web)) .outer-container.courses .bottom-container .text-wrapper {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+}
+
+:host([bookmarked]) yoo-icon[name=bookmark] {
+  right: var(--spacing-16, 1rem);
+  background-color: var(--app-color-10, rgba(90, 48, 244, 0.1));
+}
+
+:host([ticked]) yoo-icon[name=tick] {
+  right: var(--spacing-48, 3rem);
+  background-color: var(--success-10, rgba(58, 167, 109, 0.1));
+}
+
+:host([ongoing]) yoo-icon[name=ongoing] {
+  right: var(--spacing-48, 3rem);
+  background-color: var(--info-20, rgba(216, 76, 150, 0.2));
+}
+
+:host([locked]) yoo-icon[name=lock] {
+  right: var(--spacing-16, 1rem);
 }

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

@@ -32,17 +32,22 @@ export class YooCardStickyComponent {
     const isPlan = this.type === 'plans';
     const standardWidth = isCourse ? 190 : isPlan ? 239 : 310;
     const standardHeight = isCourse ? 130 : isPlan ? 180 : 230;
-    this.imageWidth = isWeb(this.host) || isCourse ? standardWidth : window.innerWidth * .8;
-    this.imageHeight = isWeb(this.host) || isCourse ? standardHeight : this.imageWidth * .75;
+    this.imageWidth = isWeb(this.host) || isCourse ? standardWidth : window.innerWidth * 0.8;
+    this.imageHeight = isWeb(this.host) || isCourse ? standardHeight : this.imageWidth * 0.75;
     return { width: `${this.imageWidth}px`, height: `${this.imageHeight}px` };
   }
+  renderIcons() {
+    const { isLocked, isBookmarked, isOngoing, 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 && isTicked && h("yoo-icon", { class: "tick", name: "tick", size: "small", color: "success" })
+    ];
+  }
   renderMediaBadges(badges, size, headerView) {
     return badges.map((badge) => {
-      return (badge.iconOnlyInHeaderView && headerView ? h("yoo-icon", { size: size === 'extra-small' ? 'small' : size, name: badge.icon, color: badge.color, class: "header" }) :
-        h("yoo-tag", { class: !headerView ? badge.position : null, size: size, icon: headerView ? badge.icon : null, color: badge.color }, !headerView && [
-          h("yoo-icon", { slot: "start", size: "small", color: "light", name: badge.icon }),
-          badge.text
-        ]));
+      return badge.iconOnlyInHeaderView && headerView ? (h("yoo-icon", { size: size === 'extra-small' ? 'small' : size, name: badge.icon, color: badge.color, class: "header" })) : (h("yoo-tag", { class: !headerView ? badge.position : null, size: size, icon: headerView ? badge.icon : null, color: badge.color }, !headerView && [h("yoo-icon", { slot: "start", size: "small", color: "light", name: badge.icon }), badge.text]));
     });
   }
   renderNewsfeedCard() {
@@ -52,29 +57,39 @@ export class YooCardStickyComponent {
     const isFullWidth = this.host.classList.contains('full-width');
     const showMainViewBadge = hasMediaBadges && (isFullWidth || !isWeb(this.host));
     const showHeaderViewBadge = hasMediaBadges && !(isFullWidth || !isWeb(this.host));
-    return (h("div", { class: `outer-container  ${this.type} ${isGif((_e = this.entry) === null || _e === void 0 ? void 0 : _e.imgSrc) ? 'gif' : ''}`, onClick: (ev) => { this.onOuterContainerClick(ev); } },
+    return (h("div", { class: `outer-container  ${this.type} ${isGif((_e = this.entry) === null || _e === void 0 ? void 0 : _e.imgSrc) ? 'gif' : ''}`, onClick: (ev) => {
+        this.onOuterContainerClick(ev);
+      } },
       showMainViewBadge && this.renderMediaBadges(this.entry.mediaBadges),
       h("yoo-img", { instant: true, type: "background", class: { 'image-container': true, 'no-radius': isWeb(this.host) }, src: this.entry.imgSrc }),
       h("div", { class: "bottom-container" },
         h("yoo-truncate", { class: "text-wrapper", innerHTML: removeTextStyle((_f = this.entry) === null || _f === void 0 ? void 0 : _f.title) }),
         this.entry.subheadings && this.entry.subheadings[0] && (h("div", { class: "subheading" },
-          this.entry.user && h("yoo-avatar", { onClick: (ev) => { this.onUserClicked(ev); }, iconSize: (_g = this.entry) === null || _g === void 0 ? void 0 : _g.avatarIconSize, size: (isWeb(this.host) ? 'extra-small' : 'small'), user: this.entry.user }),
+          this.entry.user && (h("yoo-avatar", { onClick: (ev) => {
+              this.onUserClicked(ev);
+            }, iconSize: (_g = this.entry) === null || _g === void 0 ? void 0 : _g.avatarIconSize, size: isWeb(this.host) ? 'extra-small' : 'small', user: this.entry.user })),
           this.entry.postedBy && h("span", null,
             `${this.entry.postedBy} • ${this.entry.subheadings[0]}`,
             " "),
           showHeaderViewBadge && this.renderMediaBadges(this.entry.mediaBadges, 'extra-small', true),
-          hasActions && !isWeb(this.host) && h("yoo-icon", { name: "more", color: "stable", size: ((_h = this.entry) === null || _h === void 0 ? void 0 : _h.actionIconSize) || 'small', onClick: (ev) => this.onMoreClicked(ev) }),
-          hasActions && isWeb(this.host) && h("yoo-context-menu", { contentButtons: this.entry.secondaryActionSheet, onClick: (ev) => ev.stopPropagation() },
-            h("yoo-icon", { color: "stable", name: "more", size: ((_j = this.entry) === null || _j === void 0 ? void 0 : _j.actionIconSize) || 'small' })))))));
+          hasActions && !isWeb(this.host) && (h("yoo-icon", { name: "more", color: "stable", size: ((_h = this.entry) === null || _h === void 0 ? void 0 : _h.actionIconSize) || 'small', onClick: (ev) => this.onMoreClicked(ev) })),
+          hasActions && isWeb(this.host) && (h("yoo-context-menu", { contentButtons: this.entry.secondaryActionSheet, onClick: (ev) => ev.stopPropagation() },
+            h("yoo-icon", { color: "stable", name: "more", size: ((_j = this.entry) === null || _j === void 0 ? void 0 : _j.actionIconSize) || 'small' }))))))));
   }
   renderCoursesCard() {
-    return (h("div", { class: `outer-container  ${this.type}`, style: this.getCardSize() },
-      h("yoo-img", { instant: true, type: "background", class: "image-container", disabled: this.entry.isLocked, src: this.entry.imgSrc },
-        this.entry.isLocked && h("yoo-icon", { name: "lock", size: "small" }),
-        this.entry.isBookmarked && h("yoo-icon", { name: "bookmark", size: "small" })),
+    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));
+    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" },
+        h("div", { class: "tags-container" }, showHeaderViewBadge && this.renderMediaBadges(this.entry.mediaBadges, 'small')),
         h("div", { class: "text-wrapper" }, removeTextStyle(this.title)),
-        this.entry.subheadings && this.entry.subheadings[0] && h("div", { class: "subheading" }, this.entry.subheadings[0]))));
+        this.entry.subheadings && this.entry.subheadings[0] && h("div", { class: "subheading" }, this.entry.subheadings[0]),
+        h("div", { class: "subheading" }, this.entry.postedBy && h("span", null,
+          `${this.entry.postedBy} • ${this.entry.subheadings[0]}`,
+          " ")))));
   }
   renderBase() {
     return (h("div", { class: "outer-container image" },
@@ -84,7 +99,7 @@ export class YooCardStickyComponent {
             h("span", null, this.entry.category))),
           this.title && (h("div", { class: "title" },
             h("span", null, this.title))),
-          this.entry.buttonText && h("yoo-button", { color: "app-color", size: "small", onClick: () => (this.entry.handler ? this.entry.handler() : {}) }, this.entry.buttonText))),
+          this.entry.buttonText && (h("yoo-button", { color: "app-color", size: "small", onClick: () => { var _a, _b; return (_b = (_a = this.entry) === null || _a === void 0 ? void 0 : _a.handler) === null || _b === void 0 ? void 0 : _b.call(_a); } }, this.entry.buttonText)))),
       h("yoo-img", { instant: true, type: "background", class: "image-container", src: this.entry.imgSrc })));
   }
   renderBasedOnType() {
@@ -100,7 +115,7 @@ export class YooCardStickyComponent {
     }
   }
   render() {
-    return h(Host, { class: { web: isWeb(this.host), ...getAppContext(this.host) } }, this.entry && this.renderBasedOnType());
+    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())));
   }
   static get is() { return "yoo-card-sticky"; }
   static get encapsulation() { return "shadow"; }
@@ -125,7 +140,7 @@ export class YooCardStickyComponent {
         }
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
@@ -135,9 +150,14 @@ export class YooCardStickyComponent {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+        "original": "TCardStickyType",
+        "resolved": "\"courses\" | \"courses-small\" | \"feeds\" | \"plans\"",
+        "references": {
+          "TCardStickyType": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
       },
       "required": false,
       "optional": true,