@kompasid/lit-web-components 0.7.1 → 0.7.2

package/src/components/kompasid-grace-period/readme.md

@@ -0,0 +1,17 @@
+# kompasid-grace-period
+
+Ini adalah redesign komponen _grace period_ yang digunakan pada [kompas.id](https://kompas.id).
+
+## Properties
+
+| Property                       | Attribute                      | Description | Type                                        | Default     |             
+| ------------------------------ | ------------------------------ | ----------- | ------------------------------------------- | ----------- |
+| `totalGracePeriod`             | `total-grace-period`           | how many days are left in grace period                    | `number`    | `0`         |
+| `isColumn`                     | `is-column`                    | changes how the component looks on different screen sizes | `boolean`   | `false`     |
+| `isShowButton`                 | `is-show-button`               | shows or hides a subscription button                      | `boolean`   | `false`     |
+| `subscriptionId`               | `subscription-id`              | used for renewal subs                                     | `string`    | `false`     |
+
+
+----------------------------------------------
+
+*Terbikin oleh tim front-end kompas.id*

package/src/index.ts

@@ -7,6 +7,7 @@ export { KompasMeteredPaywall } from './components/kompasid-metered-paywall/Komp
 export { KompasFreewall } from './components/kompasid-freewall/KompasFreewall.js'
 export { KompasMeteredWallRegister } from './components/kompasid-metered-wall-register/KompasMeteredWallRegister.js'
 export { KompasHeaderAccount } from './components/kompasid-header-account/KompasHeaderAccount.js'
+export { KompasGracePeriod } from './components/kompasid-grace-period/KompasGracePeriod.js'
 
 declare global {
   interface Window {

package/tailwind/tailwind.css

@@ -974,14 +974,6 @@ video {
   width: 100%;
 }
 
-.w-\[165px\] {
-  width: 165px;
-}
-
-.min-w-\[165px\] {
-  min-width: 165px;
-}
-
 .max-w-7xl {
   max-width: 80rem;
 }
@@ -1002,10 +994,6 @@ video {
   max-width: 20rem;
 }
 
-.max-w-\[165px\] {
-  max-width: 165px;
-}
-
 .flex-none {
   flex: none;
 }
@@ -1470,6 +1458,11 @@ video {
   padding-right: 1rem;
 }
 
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
 .px-8 {
   padding-left: 2rem;
   padding-right: 2rem;
@@ -1520,11 +1513,6 @@ video {
   padding-bottom: 5.6px;
 }
 
-.px-5 {
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
-}
-
 .pb-1 {
   padding-bottom: 0.25rem;
 }
@@ -2004,6 +1992,10 @@ video {
     width: 13rem;
   }
 
+  .md\:w-\[165px\] {
+    width: 165px;
+  }
+
   .md\:w-\[350px\] {
     width: 350px;
   }
@@ -2032,10 +2024,6 @@ video {
     width: auto;
   }
 
-  .md\:w-\[165px\] {
-    width: 165px;
-  }
-
   .md\:max-w-\[137px\] {
     max-width: 137px;
   }
@@ -2100,6 +2088,12 @@ video {
     margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
   }
 
+  .md\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(1rem * var(--tw-space-x-reverse));
+    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
   .md\:space-x-5 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(1.25rem * var(--tw-space-x-reverse));
@@ -2200,6 +2194,10 @@ video {
     padding-bottom: 1.75rem;
   }
 
+  .md\:pt-0 {
+    padding-top: 0px;
+  }
+
   .md\:pt-3 {
     padding-top: 0.75rem;
   }
@@ -2363,6 +2361,11 @@ video {
     padding-right: 0px;
   }
 
+  .lg\:px-20 {
+    padding-left: 5rem;
+    padding-right: 5rem;
+  }
+
   .lg\:px-24 {
     padding-left: 6rem;
     padding-right: 6rem;
@@ -2373,6 +2376,11 @@ video {
     padding-bottom: 2.5rem;
   }
 
+  .lg\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
   .lg\:pb-0 {
     padding-bottom: 0px;
   }

package/tailwind/tailwind.ts

@@ -984,14 +984,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     width: 100%;
   }
 
-  .w-\\[165px\\] {
-    width: 165px;
-  }
-
-  .min-w-\\[165px\\] {
-    min-width: 165px;
-  }
-
   .max-w-7xl {
     max-width: 80rem;
   }
@@ -1012,10 +1004,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     max-width: 20rem;
   }
 
-  .max-w-\\[165px\\] {
-    max-width: 165px;
-  }
-
   .flex-none {
     flex: none;
   }
@@ -1484,6 +1472,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     padding-right: 1rem;
   }
 
+  .px-5 {
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+  }
+
   .px-8 {
     padding-left: 2rem;
     padding-right: 2rem;
@@ -1534,11 +1527,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     padding-bottom: 5.6px;
   }
 
-  .px-5 {
-    padding-left: 1.25rem;
-    padding-right: 1.25rem;
-  }
-
   .pb-1 {
     padding-bottom: 0.25rem;
   }
@@ -2031,6 +2019,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       width: 13rem;
     }
 
+    .md\\:w-\\[165px\\] {
+      width: 165px;
+    }
+
     .md\\:w-\\[350px\\] {
       width: 350px;
     }
@@ -2059,10 +2051,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       width: auto;
     }
 
-    .md\\:w-\\[165px\\] {
-      width: 165px;
-    }
-
     .md\\:max-w-\\[137px\\] {
       max-width: 137px;
     }
@@ -2127,6 +2115,12 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
     }
 
+    .md\\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
+      --tw-space-x-reverse: 0;
+      margin-right: calc(1rem * var(--tw-space-x-reverse));
+      margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+    }
+
     .md\\:space-x-5 > :not([hidden]) ~ :not([hidden]) {
       --tw-space-x-reverse: 0;
       margin-right: calc(1.25rem * var(--tw-space-x-reverse));
@@ -2227,6 +2221,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       padding-bottom: 1.75rem;
     }
 
+    .md\\:pt-0 {
+      padding-top: 0px;
+    }
+
     .md\\:pt-3 {
       padding-top: 0.75rem;
     }
@@ -2390,6 +2388,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       padding-right: 0px;
     }
 
+    .lg\\:px-20 {
+      padding-left: 5rem;
+      padding-right: 5rem;
+    }
+
     .lg\\:px-24 {
       padding-left: 6rem;
       padding-right: 6rem;
@@ -2400,6 +2403,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       padding-bottom: 2.5rem;
     }
 
+    .lg\\:px-8 {
+      padding-left: 2rem;
+      padding-right: 2rem;
+    }
+
     .lg\\:pb-0 {
       padding-bottom: 0px;
     }