@kompasid/lit-web-components 0.7.7 → 0.7.9

package/src/components/kompasid-paywall-body/KompasPaywallBody.ts

@@ -113,6 +113,7 @@ export class KompasIdPaywallBody extends LitElement {
   @state() private swgProductId = 'kompas.id:kompas_digital_premium'
   @state() private errorFlag = 0
 
+  _packages!: Packages
   buttonElement!: HTMLButtonElement
   targetElement!: HTMLElement
 
@@ -134,6 +135,10 @@ export class KompasIdPaywallBody extends LitElement {
     return !this.isLogin || this.tracker_subscription_status === 'IA'
   }
 
+  get packages(): Packages {
+    return this._packages
+  }
+
   /**
    * Logic Function
    */
@@ -181,11 +186,11 @@ export class KompasIdPaywallBody extends LitElement {
   }
 
   private handleClickOutside() {
-    if (this.targetElement.classList.contains('wrapper-body')) {
+    if (this.targetElement?.classList.contains('wrapper-body')) {
       this.togglePaywall()
     }
 
-    if (this.targetElement.id === 'freeTrialPopup') {
+    if (this.targetElement?.id === 'freeTrialPopup') {
       this.closeFreeTrialPopup()
     }
   }
@@ -411,9 +416,12 @@ export class KompasIdPaywallBody extends LitElement {
   }
 
   override async connectedCallback() {
+    this._packages = this.paywallData?.packages ?? ({} as Packages)
+
     super.connectedCallback()
     await this.updateComplete
-    if (this.swgEnable) {
+
+    if (this.packages.swgEnable) {
       this.jsonScript()
       const appendSWGButton = () => {
         this.buttonElement = this.shadowRoot?.getElementById(
@@ -928,7 +936,7 @@ export class KompasIdPaywallBody extends LitElement {
             : this.secondaryPackages(item)
         )}
         ${this.freeTrialPackageSection()} ${this.freeTrialPopUp()}
-        ${this.swgEnable ? this.swgPackageSection() : nothing}
+        ${this.packages.swgEnable ? this.swgPackageSection() : nothing}
       </div>
     `
   }
@@ -1122,8 +1130,7 @@ export class KompasIdPaywallBody extends LitElement {
                 ? 'text-dark-7'
                 : 'text-grey-600'}"
             >
-              Coba gratis 3 hari Kompas.id melalui aplikasi. Pindai kode QR
-              dengan ponsel atau tablet untuk mengunduh aplikasi.
+              ${this.packages.freeTrial?.desktopText}
             </div>
           </div>
           <div
@@ -1131,8 +1138,7 @@ export class KompasIdPaywallBody extends LitElement {
               ? 'text-dark-7'
               : 'text-grey-600'}"
           >
-            Dapatkan akses gratis selama 3 hari ke konten dan fitur premium
-            Kompas.id di aplikasi.
+            ${this.packages.freeTrial?.mobileText}
           </div>
           <div class="lg:flex flex justify-center mt-4 hidden lg:block gap-4">
             <a
@@ -1162,9 +1168,7 @@ export class KompasIdPaywallBody extends LitElement {
   }
 
   private freeTrialPackageSection() {
-    const packages = this.paywallData?.packages ?? ({} as Packages)
-
-    if (packages.freeTrial) {
+    if (this.packages.freeTrial) {
       return html`
         <div
           class="flex flex-wrap items-center justify-between py-3 px-4 rounded-lg md:mx-0 w-full h-[68px] max-w-xs md:max-w-sm md:w-3/5 mt-3 md:mt-4 ${this
@@ -1182,7 +1186,7 @@ export class KompasIdPaywallBody extends LitElement {
               <p
                 class="text-xs ${this.isDark ? 'text-dark-7' : 'text-grey-600'}"
               >
-                ${packages.freeTrial}
+                ${this.packages.freeTrial?.packageText}
               </p>
             </div>
           </div>

package/src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.ts

@@ -43,6 +43,8 @@ export class KompasWidgetRecirculationsDefault extends LitElement {
   @property({ type: String }) titleName = '' // contoh: Artikel Terkait / Lainnya dalam 'kategori'
   @property({ type: String }) titleLink = '' // contoh: /kategori/opini
 
+  @property({ type: Boolean }) isDark = false
+
   /**
    * Fetch Data
    */
@@ -172,7 +174,12 @@ export class KompasWidgetRecirculationsDefault extends LitElement {
     return html`
       <div class="flex font-sans uppercase items-start mb-6 mt-8">
         <div>
-          <h5 class="capitalize font-bold font-sans text-grey-600">
+          <h5
+            class="capitalize font-bold font-sans text-lg md:text-xl ${this
+              .isDark
+              ? 'text-white'
+              : 'text-grey-600'}"
+          >
             Artikel Terkait
           </h5>
         </div>
@@ -186,7 +193,11 @@ export class KompasWidgetRecirculationsDefault extends LitElement {
         href="${this.titleLink}"
         class="flex font-sans uppercase items-start mb-6 mt-8"
       >
-        <h5 class="capitalize font-bold font-sans text-brand-1">
+        <h5
+          class="capitalize font-bold font-sans text-lg md:text-xl ${this.isDark
+            ? 'text-blue-200'
+            : 'text-brand-1'}"
+        >
           ${this.titleName}
         </h5>
       </a>
@@ -253,7 +264,7 @@ export class KompasWidgetRecirculationsDefault extends LitElement {
 
   render() {
     return html`
-      <div class="w-full">
+      <div class="w-full ${this.isDark ? 'bg-dark-5 ' : ''}">
         <!-- start: widget title -->
         ${this.type === 'relatedArticle'
           ? this.titleRelatedArticle()
@@ -273,11 +284,18 @@ export class KompasWidgetRecirculationsDefault extends LitElement {
                           <a href="${post.permalink}">
                             ${this.renderChips(post)}
                             <h5
-                              class="hover:underline font-bold font-sans leading-tight text-grey-600"
+                              class="hover:underline font-bold font-sans leading-tight text-lg md:text-xl ${this
+                                .isDark
+                                ? 'text-white'
+                                : 'text-grey-600'}"
                             >
                               ${post.title}
                             </h5>
-                            <p class="text-grey-600 pt-2">
+                            <p
+                              class="font-sans pt-2 text-sm ${this.isDark
+                                ? 'text-white'
+                                : 'text-grey-600'}"
+                            >
                               ${this.formatDate(post.publishedDate)}
                             </p>
                           </a>
@@ -302,11 +320,18 @@ export class KompasWidgetRecirculationsDefault extends LitElement {
                           <a href="${post.permalink}">
                             ${this.renderChips(post)}
                             <h5
-                              class="hover:underline font-bold font-sans leading-tight text-grey-600"
+                              class="hover:underline font-bold font-sans leading-tight text-lg md:text-xl ${this
+                                .isDark
+                                ? 'text-white'
+                                : 'text-grey-600'}"
                             >
                               ${post.title}
                             </h5>
-                            <p class="text-grey-600 pt-2">
+                            <p
+                              class="font-sans pt-2 text-sm ${this.isDark
+                                ? 'text-white'
+                                : 'text-grey-600'}"
+                            >
                               ${this.formatDate(post.publishedDate)}
                             </p>
                           </a>

package/src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.ts

@@ -25,6 +25,8 @@ export class KompasWidgetRecirculationsList extends LitElement {
   @property({ type: String }) accessToken = ''
   @property({ type: String }) apiSlug = ''
 
+  @property({ type: Boolean }) isDark = false
+
   static styles = [
     css`
       :host {
@@ -190,9 +192,14 @@ export class KompasWidgetRecirculationsList extends LitElement {
 
   render() {
     return html`
-      <div>
+      <div class="${this.isDark ? 'bg-dark-5 ' : ''}">
         <div class="mb-6">
-          <h5 class="capitalize font-bold text-grey-600 font-sans">
+          <h5
+            class="capitalize font-bold font-sans text-lg md:text-xl ${this
+              .isDark
+              ? 'text-white'
+              : 'text-grey-600'}"
+          >
             ${this.widgetTitle}
           </h5>
         </div>
@@ -207,12 +214,18 @@ export class KompasWidgetRecirculationsList extends LitElement {
                       ${this.renderChips(item)}
                       <a
                         href="${item.permalink}"
-                        class="font-bold font-sans hover:underline leading-tight text-base text-grey-600"
+                        class="font-bold font-lora hover:underline leading-normal text-xl ${this
+                          .isDark
+                          ? 'text-white'
+                          : 'text-grey-600'}"
                       >
                         ${item.title}
                       </a>
                       <div
-                        class="flex w-full flex-row items-center leading-normal justify-between text-sm text-grey-500 font-sans pt-2"
+                        class="flex w-full flex-row font-sans items-center leading-normal justify-between pt-2 text-sm ${this
+                          .isDark
+                          ? 'text-white'
+                          : 'text-grey-500'}"
                       >
                         ${item.publishedDate
                           ? this.formatDate(item.publishedDate)