@kompasid/lit-web-components 0.9.49 → 0.9.51

package/src/components/kompasid-paywall-modal-register/KompasPaywallModalRegister.ts

@@ -27,15 +27,12 @@ export class KompasPaywallModalRegister extends LitElement {
         height: 100%;
         background-color: rgba(0, 0, 0, 0.5);
         display: flex;
-        justify-content: center;
-        align-items: center;
         z-index: 1000;
       }
 
       .modal-content {
         background-color: #222222;
         border-radius: 12px;
-        overflow: hidden;
         position: relative;
       }
 
@@ -254,7 +251,8 @@ export class KompasPaywallModalRegister extends LitElement {
   private redirectToHelpdesk(): void {
     this.sendDataLayeronHelpDesk()
     window.open(
-      'https://api.whatsapp.com/send/?phone=6281290050800&text=Halo,%20saya%20perlu%20informasi%20mengenai%20kompas.id'
+      this.dataModalRegister.modal.registerPopUp.hotline.url ||
+        'https://api.whatsapp.com/send/?phone=6281290050800&text=Halo,%20saya%20perlu%20informasi%20mengenai%20kompas.id'
     )
   }
 
@@ -292,7 +290,7 @@ export class KompasPaywallModalRegister extends LitElement {
               name="nameUser"
               type="text"
               placeholder=""
-              class="p-2 bg-grey-500 rounded border border-grey-400"
+              class="p-2 bg-grey-600 rounded border border-grey-500"
               .value="${this.formData.nameUser}"
               @input="${this.handleInput}"
               @blur="${this.handleBlur}"
@@ -325,7 +323,7 @@ export class KompasPaywallModalRegister extends LitElement {
               name="email"
               type="email"
               placeholder=""
-              class="p-2 bg-grey-500 rounded border border-grey-400"
+              class="p-2 bg-grey-600 rounded border border-grey-500"
               .value="${this.formData.email}"
               @input="${this.handleInput}"
               @blur="${this.handleBlur}"
@@ -358,7 +356,7 @@ export class KompasPaywallModalRegister extends LitElement {
               name="nomor"
               type="tel"
               placeholder=""
-              class="p-2 bg-grey-500 rounded border border-grey-400"
+              class="p-2 bg-grey-600 rounded border border-grey-500"
               .value="${this.formData.nomor}"
               @input="${this.handleInput}"
               @blur="${this.handleBlur}"
@@ -390,7 +388,7 @@ export class KompasPaywallModalRegister extends LitElement {
               name="nameCompany"
               type="text"
               placeholder=""
-              class="p-2 bg-grey-500 rounded border border-grey-400"
+              class="p-2 bg-grey-600 rounded border border-grey-500"
               .value="${this.formData.nameCompany}"
               @input="${this.handleInput}"
               @blur="${this.handleBlur}"
@@ -426,7 +424,7 @@ export class KompasPaywallModalRegister extends LitElement {
   render() {
     return this.showModalRegister
       ? html`<div
-            class="px-4 font-sans flex flex-wrap items-center justify-between rounded-lg md:mx-0 w-full min-h-[68px] bg-white relative"
+            class="p-4 gap-2 font-sans flex flex-wrap items-center justify-between rounded-lg md:mx-0 w-full min-h-[68px] bg-white relative"
           >
             <div class="flex flex-col gap-1">
               <span class="text-xs leading-tight text-grey-500">
@@ -444,7 +442,7 @@ export class KompasPaywallModalRegister extends LitElement {
                 ? 'bg-green-500 text-white'
                 : 'bg-white border border-green-500 text-green-500'} flex items-center"
             >
-              <h6 class="text-xs md:text-sm font-bold py-2 px-4">
+              <h6 class="text-sm font-bold py-2 px-4">
                 ${this.dataModalRegister.card.textButton}
               </h6>
             </button>
@@ -458,14 +456,14 @@ export class KompasPaywallModalRegister extends LitElement {
                   @keydown=${() => this.closeModal()}
                 >
                   <div
-                    class="modal-content max-w-7xl w-full flex flex-col lg:flex-row max-h-full overflow-auto"
+                    class="modal-content max-w-7xl w-full flex flex-col lg:flex-row max-h-full overflow-auto lg:overflow-hidden"
                     @click="${(e: { stopPropagation: () => any }) =>
                       e.stopPropagation()}"
                     @keydown=${(e: { stopPropagation: () => any }) =>
                       e.stopPropagation()}
                   >
                     <button class="close-button" @click="${this.closeModal}">
-                      ${unsafeSVG(getFontAwesomeIcon('fa', 'times', 20, 20))}
+                      ${unsafeSVG(getFontAwesomeIcon('fa', 'times', 32, 32))}
                     </button>
                     <div
                       class="bg-grey-600 lg:max-w-[515px] w-full p-4 md:p-16 justify-between items-center flex flex-col relative"
@@ -485,7 +483,7 @@ export class KompasPaywallModalRegister extends LitElement {
                           class="flex flex-col mt-6 md:mt-10 gap-2 text-left overflow-hidden ${this
                             .showMobileBenefit
                             ? 'max-h-fit'
-                            : 'max-h-[150px] md:max-h-fit'}"
+                            : 'max-h-[150px] lg:max-h-fit'}"
                         >
                           ${this.dataModalRegister.modal.registerPopUp
                             .benefits &&
@@ -522,7 +520,7 @@ export class KompasPaywallModalRegister extends LitElement {
                       </div>
                       <button
                         @click="${this.toggleMobileBenefit}"
-                        class="bg-grey-600 absolute text-grey-100 py-6 w-full bottom-0 left-0 text-center md:hidden"
+                        class="bg-grey-600 absolute text-grey-100 py-6 w-full bottom-0 left-0 text-center lg:hidden"
                       >
                         <div
                           class="h-12 transparent-linear-dark -mt-[72px] z-0 w-full absolute ${this
@@ -547,18 +545,33 @@ export class KompasPaywallModalRegister extends LitElement {
                         </div>
                       </button>
                       <div
-                        class="hidden md:block text-grey-300 pt-10 border-t border-grey-500 w-full text-center"
+                        class="hidden lg:block text-grey-300 pt-10 border-t border-grey-500 w-full text-center"
                       >
                         Butuh bantuan? Hubungi
                         <button
                           @click=${this.customerServiceClicked}
-                          class="font-bold underline"
+                          class="font-bold underline text-white"
                         >
-                          Layanan Pelanggan.
+                          ${this.dataModalRegister.modal.registerPopUp.hotline
+                            .text}
+                        </button>
+                      </div>
+                    </div>
+                    <div class="w-full h-full lg:overflow-auto">
+                      ${this.templateForm()}
+                      <div
+                        class="block lg:hidden text-grey-300 py-5 bg-grey-600 w-full text-center text-xs"
+                      >
+                        Butuh bantuan? Hubungi
+                        <button
+                          @click=${this.customerServiceClicked}
+                          class="font-bold underline text-white"
+                        >
+                          ${this.dataModalRegister.modal.registerPopUp.hotline
+                            .text}
                         </button>
                       </div>
                     </div>
-                    <div class="w-full h-full">${this.templateForm()}</div>
                   </div>
                 </div>
               `

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

@@ -75,7 +75,7 @@ export class KompasWidgetRecirculationsDefault extends LitElement {
   }
 
   async relatedArticles() {
-    const kompasApiAi = 'https://ai.kompas.id/api/v1'
+    const kompasApiAi = 'https://api.kompas.id/icm/api/v1'
 
     // Constructing parameters
     const params = new URLSearchParams()
@@ -86,7 +86,7 @@ export class KompasWidgetRecirculationsDefault extends LitElement {
     params.append('slugs', this.slugs)
 
     // Constructing the URL with parameters
-    const endpoint = `${kompasApiAi}/recommendation?${params.toString()}`
+    const endpoint = `${kompasApiAi}/recommendations?${params.toString()}`
 
     const response = await fetch(endpoint, {
       headers: {

package/tailwind/tailwind.css

@@ -997,6 +997,19 @@ video {
   max-height: 100%;
 }
 
+.max-h-screen {
+  max-height: 100vh;
+}
+
+.max-h-\[90vh\] {
+  max-height: 90vh;
+}
+
+.max-h-max {
+  max-height: -moz-max-content;
+  max-height: max-content;
+}
+
 .min-h-\[68px\] {
   min-height: 68px;
 }
@@ -2435,11 +2448,6 @@ video {
     max-height: 220px;
   }
 
-  .md\:max-h-fit {
-    max-height: -moz-fit-content;
-    max-height: fit-content;
-  }
-
   .md\:min-h-\[244px\] {
     min-height: 244px;
   }
@@ -2821,6 +2829,11 @@ video {
     height: 2rem;
   }
 
+  .lg\:max-h-fit {
+    max-height: -moz-fit-content;
+    max-height: fit-content;
+  }
+
   .lg\:max-h-none {
     max-height: none;
   }
@@ -2906,6 +2919,14 @@ video {
          column-gap: 1.5rem;
   }
 
+  .lg\:overflow-auto {
+    overflow: auto;
+  }
+
+  .lg\:overflow-hidden {
+    overflow: hidden;
+  }
+
   .lg\:px-0 {
     padding-left: 0px;
     padding-right: 0px;

package/tailwind/tailwind.ts

@@ -1004,6 +1004,19 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     max-height: 100%;
   }
 
+  .max-h-screen {
+    max-height: 100vh;
+  }
+
+  .max-h-\\[90vh\\] {
+    max-height: 90vh;
+  }
+
+  .max-h-max {
+    max-height: -moz-max-content;
+    max-height: max-content;
+  }
+
   .min-h-\\[68px\\] {
     min-height: 68px;
   }
@@ -2458,11 +2471,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       max-height: 220px;
     }
 
-    .md\\:max-h-fit {
-      max-height: -moz-fit-content;
-      max-height: fit-content;
-    }
-
     .md\\:min-h-\\[244px\\] {
       min-height: 244px;
     }
@@ -2844,6 +2852,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       height: 2rem;
     }
 
+    .lg\\:max-h-fit {
+      max-height: -moz-fit-content;
+      max-height: fit-content;
+    }
+
     .lg\\:max-h-none {
       max-height: none;
     }
@@ -2929,6 +2942,14 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       column-gap: 1.5rem;
     }
 
+    .lg\\:overflow-auto {
+      overflow: auto;
+    }
+
+    .lg\\:overflow-hidden {
+      overflow: hidden;
+    }
+
     .lg\\:px-0 {
       padding-left: 0px;
       padding-right: 0px;