@kompasid/lit-web-components 0.9.50 → 0.9.52

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

@@ -27,22 +27,19 @@ 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;
       }
 
       .close-button {
         position: absolute;
-        top: 10px;
-        right: 10px;
+        top: 32px;
+        right: 32px;
         background: none;
         border: none;
         font-size: 1.5em;
@@ -293,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}"
@@ -326,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}"
@@ -359,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}"
@@ -391,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}"
@@ -427,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">
@@ -445,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>
@@ -459,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 mx-auto 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"
@@ -553,22 +550,22 @@ export class KompasPaywallModalRegister extends LitElement {
                         Butuh bantuan? Hubungi
                         <button
                           @click=${this.customerServiceClicked}
-                          class="font-bold underline"
+                          class="font-bold underline text-white"
                         >
                           ${this.dataModalRegister.modal.registerPopUp.hotline
                             .text}
                         </button>
                       </div>
                     </div>
-                    <div class="w-full h-full">
+                    <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"
+                        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"
+                          class="font-bold underline text-white"
                         >
                           ${this.dataModalRegister.modal.registerPopUp.hotline
                             .text}
@@ -586,14 +583,14 @@ export class KompasPaywallModalRegister extends LitElement {
                 @keydown=${() => this.closeModal()}
               >
                 <div
-                  class="modal-content max-w-[624px] max-h-[577px] items-end flex flex-col justify-end h-full w-full p-4 md:p-10"
+                  class="modal-content m-auto max-w-[624px] max-h-[577px] items-end flex flex-col justify-end h-full w-full p-4 md:p-10"
                   @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>
                   ${this.dataModalRegister.modal.successPopUp.logo
                     ? html`

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

@@ -2371,10 +2371,6 @@ video {
     margin-bottom: 1.25rem;
   }
 
-  .md\:ml-2 {
-    margin-left: 0.5rem;
-  }
-
   .md\:ml-6 {
     margin-left: 1.5rem;
   }
@@ -2435,11 +2431,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,15 +2812,15 @@ video {
     height: 2rem;
   }
 
-  .lg\:max-h-none {
-    max-height: none;
-  }
-
   .lg\:max-h-fit {
     max-height: -moz-fit-content;
     max-height: fit-content;
   }
 
+  .lg\:max-h-none {
+    max-height: none;
+  }
+
   .lg\:min-h-\[220px\] {
     min-height: 220px;
   }
@@ -2911,6 +2902,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

@@ -2394,10 +2394,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       margin-bottom: 1.25rem;
     }
 
-    .md\\:ml-2 {
-      margin-left: 0.5rem;
-    }
-
     .md\\:ml-6 {
       margin-left: 1.5rem;
     }
@@ -2458,11 +2454,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,15 +2835,15 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       height: 2rem;
     }
 
-    .lg\\:max-h-none {
-      max-height: none;
-    }
-
     .lg\\:max-h-fit {
       max-height: -moz-fit-content;
       max-height: fit-content;
     }
 
+    .lg\\:max-h-none {
+      max-height: none;
+    }
+
     .lg\\:min-h-\\[220px\\] {
       min-height: 220px;
     }
@@ -2934,6 +2925,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;