@kompasid/lit-web-components 0.9.13 → 0.9.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/dist/src/components/kompasid-freewall/KompasFreewall.js +8 -3
  2. package/dist/src/components/kompasid-freewall/KompasFreewall.js.map +1 -1
  3. package/dist/src/components/kompasid-freewall-body/KompasFreewallBody.js +11 -7
  4. package/dist/src/components/kompasid-freewall-body/KompasFreewallBody.js.map +1 -1
  5. package/dist/src/components/kompasid-freewall-head/KompasFreewallHead.js +3 -3
  6. package/dist/src/components/kompasid-freewall-head/KompasFreewallHead.js.map +1 -1
  7. package/dist/src/components/kompasid-header-account/KompasHeaderAccount.d.ts +4 -1
  8. package/dist/src/components/kompasid-header-account/KompasHeaderAccount.js +21 -18
  9. package/dist/src/components/kompasid-header-account/KompasHeaderAccount.js.map +1 -1
  10. package/dist/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.js +1 -1
  11. package/dist/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.js.map +1 -1
  12. package/dist/src/components/kompasid-header-notification/KompasHeaderNotification.js +1 -1
  13. package/dist/src/components/kompasid-header-notification/KompasHeaderNotification.js.map +1 -1
  14. package/dist/src/utils/googleFont.js +1 -1
  15. package/dist/src/utils/googleFont.js.map +1 -1
  16. package/dist/tailwind/tailwind.js +8 -0
  17. package/dist/tailwind/tailwind.js.map +1 -1
  18. package/dist/tsconfig.tsbuildinfo +1 -1
  19. package/package.json +1 -1
  20. package/src/components/kompasid-freewall/KompasFreewall.ts +11 -3
  21. package/src/components/kompasid-freewall/readme.md +2 -1
  22. package/src/components/kompasid-freewall-body/KompasFreewallBody.ts +13 -9
  23. package/src/components/kompasid-freewall-head/KompasFreewallHead.ts +3 -3
  24. package/src/components/kompasid-header-account/KompasHeaderAccount.ts +21 -18
  25. package/src/components/kompasid-header-account/readme.md +47 -28
  26. package/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.ts +1 -1
  27. package/src/components/kompasid-header-notification/KompasHeaderNotification.ts +1 -1
  28. package/src/components/kompasid-metered-paywall/readme.md +1 -1
  29. package/src/utils/googleFont.ts +1 -1
  30. package/tailwind/tailwind.css +8 -0
  31. package/tailwind/tailwind.ts +8 -0
package/src/components/kompasid-freewall-body/KompasFreewallBody.ts CHANGED
@@ -116,7 +116,7 @@ export class KompasFreewallBody extends LitElement {
116
116
  <div class="relative snap-start scroll-mx-4 w-[276px] flex lg:w-auto">
117
117
  <div
118
118
  id="subscription-card"
119
- class="flex justify-between items-start relative z-10 flex-col w-[328px] py-3 px-[10px] md:p-5 md:pt-3 rounded-[10px] bg-white border border-grey-300"
119
+ class="flex justify-between items-start font-bold relative z-10 flex-col w-[328px] py-3 px-[10px] md:p-5 md:pt-3 rounded-[10px] bg-white border border-grey-300"
120
120
  >
121
121
  <div class="flex w-full flex-col items-start mb-4 text-start">
122
122
  <h5 class="font-lora leading-[30px] text-grey-600">
@@ -124,7 +124,7 @@ export class KompasFreewallBody extends LitElement {
124
124
  </h5>
125
125
  </div>
126
126
  <div class="text-xl text-grey-600 font-lora mb-8">
127
- <div>
127
+ <div class="flex flex-wrap items-center gap-1">
128
128
  ${item.priceDiscount
129
129
  ? html`
130
130
  <span class="text-sm text-grey-400"
@@ -132,21 +132,25 @@ export class KompasFreewallBody extends LitElement {
132
132
  >
133
133
  `
134
134
  : nothing}
135
- <span class="${item.priceDiscount ? 'text-orange-400' : ''}"
136
- >${formatRupiah(
137
- item.priceDiscount ? item.priceDiscount : item.priceBased
138
- )}</span
139
- >/<span>${item.duration}</span>
135
+ <div class="flex">
136
+ <span class="${item.priceDiscount ? 'text-orange-400' : ''}"
137
+ >${formatRupiah(
138
+ item.priceDiscount ? item.priceDiscount : item.priceBased
139
+ )}</span
140
+ >/<span>${item.duration}</span>
141
+ </div>
140
142
  </div>
141
143
  ${item.priceDiscount
142
- ? html` <div class="text-sm text-grey-500 font-sans mt-3">
144
+ ? html` <div
145
+ class="text-sm text-grey-500 font-normal font-sans mt-3"
146
+ >
143
147
  Selanjutnya ${formatRupiah(item.priceBased)}/${item.duration}
144
148
  </div>`
145
149
  : nothing}
146
150
  </div>
147
151
  <button
148
152
  @click=${() => this.onButtonClick(item.cta.url, item.position)}
149
- class="whitespace-nowrap w-full rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base font-bold leading-[18px] ${item.ribbon
153
+ class="whitespace-nowrap w-full rounded md:rounded h-10 px-4 md:px-5 text-base font-bold leading-[18px] ${item.ribbon
150
154
  ? 'text-white bg-brand-1'
151
155
  : 'text-brand-1 bg-white border border-brand-1'}"
152
156
  >
package/src/components/kompasid-freewall-head/KompasFreewallHead.ts CHANGED
@@ -56,14 +56,14 @@ export class KompasFreewallHead extends LitElement {
56
56
  render() {
57
57
  return html`
58
58
  <div class="flex flex-col px-4 md:px-0 space-y-4 pt-4 pb-5 md:py-2">
59
- <div class="flex justify-between items-center h-full">
59
+ <div class="flex justify-between md:items-center h-full">
60
60
  <div class="hidden sm:block w-9 h-9"></div>
61
61
  <div class="flex items-center md:justify-start">
62
62
  <p class="w-full text-grey-600 font-bold">${this.headCopy}</p>
63
63
  ${!this.expand && this.headData.cta.url
64
64
  ? html`<button
65
65
  @click=${() => this.onButtonClick(this.headData.cta.url)}
66
- class="bg-brand-1 hidden md:block ml-3 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]"
66
+ class="bg-brand-1 hidden md:block ml-3 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-base text-white font-bold leading-[18px]"
67
67
  >
68
68
  ${this.headData.cta.text}
69
69
  </button>`
@@ -84,7 +84,7 @@ export class KompasFreewallHead extends LitElement {
84
84
  ${!this.expand && this.headData.cta.url && this.headData.cta.text
85
85
  ? html`<button
86
86
  @click=${() => this.onButtonClick(this.headData.cta.url)}
87
- class="bg-brand-1 block md:hidden whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]"
87
+ class="bg-brand-1 block md:hidden whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-base text-white font-bold leading-[18px]"
88
88
  >
89
89
  ${this.headData.cta.text}
90
90
  </button>`
package/src/components/kompasid-header-account/KompasHeaderAccount.ts CHANGED
@@ -104,35 +104,38 @@ export class KompasHeaderAccount extends LitElement {
104
104
 
105
105
  formattedUserData: User = {} as User
106
106
 
107
- @property({ type: String }) cartUrl = ''
107
+ /**
108
+ * Props default
109
+ */
110
+ @property({ type: String }) cartUrl = '' // tidak terpakai
108
111
  @property({ type: String }) logoutUrl = ''
109
112
  @property({ type: String }) manageAccountUrl = ''
110
113
  @property({ type: String }) notificationUrl = ''
111
- @property({ type: String }) ordersUrl = ''
114
+ @property({ type: String }) ordersUrl = '' // tidak terpakai
112
115
  @property({ type: String }) readLaterUrl = ''
113
116
  @property({ type: Object }) userData = {}
114
117
  @property({ type: Number }) sidebarTopSpacing = 0
115
118
  @property({ type: String }) subscriptionUrl = ''
116
- @property({ type: Number }) totalGracePeriod = 0
119
+ @property({ type: Number }) totalGracePeriod = 0 // tidak terpakai
117
120
  @property({ type: String }) theme: 'default' | 'primary' = 'default'
118
121
  /**
119
- * Props For Grace Period Tracker
122
+ * Props For Grace Period and Tracker
120
123
  */
121
- @property({ type: String }) paywall_location = ''
122
- @property({ type: String }) paywall_subscription_package = ''
124
+ @property({ type: String }) paywall_location = '' // belum tau terpakai dimana
125
+ @property({ type: String }) paywall_subscription_package = '' // belum tau terpakai dimana
123
126
  @property({ type: Number }) paywall_subscription_id = 0
124
- @property({ type: Number }) paywall_subscription_price = 0
125
- @property({ type: Number }) paywall_position = 0
126
- @property({ type: String }) tracker_page_type = ''
127
- @property({ type: String }) tracker_content_id = ''
128
- @property({ type: String }) tracker_content_title = ''
129
- @property({ type: String }) tracker_content_categories = ''
130
- @property({ type: String }) tracker_content_type = ''
131
- @property({ type: String }) tracker_user_type = ''
132
- @property({ type: String }) tracker_subscription_status = ''
133
- @property({ type: String }) tracker_page_domain = ''
134
- @property({ type: String }) tracker_metered_wall_type = ''
135
- @property({ type: Number }) tracker_metered_wall_balance = 0
127
+ @property({ type: Number }) paywall_subscription_price = 0 // belum tau terpakai dimana
128
+ @property({ type: Number }) paywall_position = 0 // belum tau terpakai dimana
129
+ @property({ type: String }) tracker_page_type = '' // belum tau terpakai dimana
130
+ @property({ type: String }) tracker_content_id = '' // belum tau terpakai dimana
131
+ @property({ type: String }) tracker_content_title = '' // belum tau terpakai dimana
132
+ @property({ type: String }) tracker_content_categories = '' // belum tau terpakai dimana
133
+ @property({ type: String }) tracker_content_type = '' // belum tau terpakai dimana
134
+ @property({ type: String }) tracker_user_type = '' // belum tau terpakai dimana
135
+ @property({ type: String }) tracker_subscription_status = '' // belum tau terpakai dimana
136
+ @property({ type: String }) tracker_page_domain = '' // belum tau terpakai dimana
137
+ @property({ type: String }) tracker_metered_wall_type = '' // belum tau terpakai dimana
138
+ @property({ type: Number }) tracker_metered_wall_balance = 0 // belum tau terpakai dimana
136
139
 
137
140
  private toggleSidebar() {
138
141
  this.isShowSidebar = !this.isShowSidebar
package/src/components/kompasid-header-account/readme.md CHANGED
@@ -2,45 +2,64 @@
2
2
 
3
3
  Ini adalah komponen _header account_ yang akan di implementasi pada header
4
4
 
5
- ## Properties
5
+ ## Properties Default
6
6
  | Property | Attribute | Description | Type | Default | Required |
7
7
  | ------------------------------ | ------------------------------ | --------------------------------------------- | ------------------------- | -------------- | -------- |
8
- | `cartUrl` | `cart-url` | `URL to the shopping cart page` | `string` | `''` | `no` |
9
- | `logoutUrl` | `logout-url` | `URL to log the user out` | `string` | `''` | `no` |
10
- | `manageAccountUrl` | `manage-account-url` | `URL to manage user account settings` | `string` | `''` | `no` |
11
- | `notificationUrl` | `notification-url` | `URL to view user notifications` | `string` | `''` | `no` |
12
- | `ordersUrl` | `orders-url` | `URL to view user orders` | `string` | `''` | `no` |
13
- | `readLaterUrl` | `read-later-url` | `URL to access the "Read Later" feature` | `string` | `''` | `no` |
14
- | `userData` | `user-data` | `Object containing user data` | `object` | `{}` | `yes` |
15
- | `sidebarTopSpacing` | `sidebar-top-spacing` | `Top spacing for the sidebar (in pixels)` | `number` | `0` | `no` |
16
- | `subscriptionUrl` | `subscription-url` | `URL to manage subscriptions` | `string` | `''` | `no` |
17
- | `totalGracePeriod` | `total-grace-period` | `Total grace period (in days)` | `number` | `0` | `no` |
18
- | `theme` | `theme` | `Component theme` | `'default' \| 'primary'` | `'primary'` | `no` |
19
- | `paywall_location` | `paywall-location` | `Location of the paywall` | `string` | `''` | `no` |
20
- | `paywall_subscription_package` | `paywall-subscription-package` | `Subscription package for the paywall` | `string` | `''` | `no` |
21
- | `paywall_subscription_id` | `paywall-subscription-id` | `ID of the subscription` | `number` | `0` | `no` |
22
- | `paywall_subscription_price` | `paywall-subscription-price` | `Price of the subscription` | `number` | `0` | `no` |
23
- | `paywall_position` | `paywall-position` | `Position of the paywall` | `number` | `0` | `no` |
24
- | `tracker_page_type` | `tracker-page-type` | `Type of the tracked page` | `string` | `''` | `no` |
25
- | `tracker_content_id` | `tracker-content-id` | `ID of the tracked content` | `string` | `''` | `no` |
8
+ | `userData` | `userData` | `Object containing user data` | `object` | `{}` | `yes` |
9
+ | `logoutUrl` | `logoutUrl` | `URL to log the user out` | `string` | `''` | `no` |
10
+ | `manageAccountUrl` | `manageAccountUrl` | `URL to manage user account settings` | `string` | `''` | `no` |
11
+ | `notificationUrl` | `notificationUrl` | `URL to view user notifications` | `string` | `''` | `no` |
12
+ | `readLaterUrl` | `readLaterUrl` | `URL to access the "Read Later" feature` | `string` | `''` | `no` |
13
+ | `sidebarTopSpacing` | `sidebarTopSpacing` | `Top spacing for the sidebar (in pixels)` | `number` | `0` | `no` |
14
+ | `subscriptionUrl` | `subscriptionUrl` | `URL to manage subscriptions` | `string` | `''` | `no` |
15
+ | `theme` | `theme` | `Component theme` | `'default' \| 'primary'` | `'primary'` | `no` |
16
+ | `paywall_subscription_id` | `paywall_subscription_id` | `ID of the subscription from [API Last Order]` | `number` | `0` | `no` |
26
17
 
18
+ ### Properties User Data (userData)
19
+ | Property | Attribute | Description | Type | Default | Required |
20
+ | ------------------------------ | ------------------------------ | --------------------------------------------- | ------------------------- | -------------- | -------- |
21
+ | `userName` | `userName` | `String from user firsname and lastname [API Membership]` | `string` | `''` | `yes` |
22
+ | `expired` | `expired` | `String from user expired [API Membership]` | `string` | `''` | `yes` |
23
+ | `totalGracePeriod` | `totalGracePeriod` | `String from user totalGracePeriod [API Membership]` | `number` | `0` | `yes` |
24
+ | `isGracePeriod` | `isGracePeriod` | `Boolean from user gracePeriod [API Membership]` | `boolean` | `false` | `yes` |
25
+ | `activeInfo` | `activeInfo` | `String from user active firs key [API Membership]` | `string` | `''` | `yes` |
26
+ | `isMembership` | `isMembership` | `Bolean if user active is not empty [API Membership]` | `boolean` | `false` | `yes` |
27
+ | `updateMembership` | `updateMembership` | `String from user updateMembership > label [API Membership]` | `string` | `''` | `yes` |
27
28
  ---
28
29
 
29
30
  ## Usage
31
+ ```js
32
+ // Jika ada update API tolong konfirmasi ke tim terkait
33
+ API Membership = "https://api.kompas.cloud/account/api/v2/users/membership"
34
+ API Last Order = "https://api.kompas.cloud/order/api/v1/product/latest"
35
+
36
+ ```
30
37
 
31
38
  ```js
32
39
  <kompas-header-account
33
- cart-url="https://gerai.kompas.id/cart"
34
- logout-url="https://account.kompas.cloud/logout"
35
- manage-account-url="https://account.kompas.cloud/manage-account"
36
- notification-url="https://account.kompas.cloud/manage-account/notification"
37
- orders-url="https://gerai.kompas.id/my-account/orders"
38
- sidebar-top-spacing=48
39
- subscription-url="https://www.kompas.id/berlangganan"
40
- read-later-url="https://www.kompas.id/bacananti"
40
+ logoutUrl="https://account.kompas.cloud/logout"
41
+ manageAccountUrl="https://account.kompas.cloud/manage-account"
42
+ notificationUrl="https://account.kompas.cloud/manage-account/notification"
43
+ :sidebarTopSpacing="48"
44
+ subscriptionUrl="https://www.kompas.id/berlangganan"
45
+ readLaterUrl="https://www.kompas.id/bacananti"
46
+ :paywall_subscription_id="98888"
41
47
  theme="primary"
42
- :user-data="{}"
48
+ :userData="userData"
43
49
  />
44
50
  ```
45
51
 
52
+ ```js
53
+ const userData = {
54
+ userName: 'Sample User'
55
+ expired: '18 Feb 2025 - 13 Oct 3010'
56
+ totalGracePeriod: 0
57
+ isGracePeriod: false
58
+ activeInfo: 'Karyawan - Akses Tanpa Batas'
59
+ isMembership: false
60
+ updateMembership: ''
61
+ }
62
+ ```
63
+
64
+ Update 21 07 2025 - Penggunaan yang sudah berjalan di tim terkait
46
65
  _Terbikin oleh tim front-end kompas.id_
package/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.ts CHANGED
@@ -136,7 +136,7 @@ export class KompasHeaderAccountProfile extends LitElement {
136
136
  subDays(new Date(), totalGraceSubs)
137
137
  )
138
138
  endGracePeriodDate = this.formatDate(
139
- addDays(new Date(), this.maxGracePeriod - totalGracePeriod)
139
+ addDays(new Date(), this.maxGracePeriod - totalGraceSubs)
140
140
  )
141
141
  }
142
142
 
package/src/components/kompasid-header-notification/KompasHeaderNotification.ts CHANGED
@@ -489,7 +489,7 @@ export class KompasHeaderNotification extends LitElement {
489
489
 
490
490
  private redirectToNotification(tab: string) {
491
491
  window.open(
492
- `https://account.kompas.${this.domain}/manage-account/notification/${tab}`,
492
+ `https://manage-account.kompas.${this.domain}/manage-account/notification/${tab}`,
493
493
  '_blank'
494
494
  )
495
495
  }
package/src/components/kompasid-metered-paywall/readme.md CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  | Property | Attribute | Description | Type | Default |
6
6
  | ------------------------------ | ------------------------------ | ---------------------------------------------------------------------------------------- | -------- | ------- |
7
- | `countdownArticle` | `countdown-article` | prop countdownArticle untuk menghandle sudah berapa artikel gratis yang user baca | `number` | `0` |
7
+ | `countdownArticle` | `countdown-article` | prop countdownArticle untuk menghandle sudah berapa artikel gratis yang user baca (User tidak bisa melihat kuota countdown dari update terbaru lit, namun data tetap di gunakan untuk GTM) | `number` | `0` |
8
8
  | `paywall_location` | `paywall_location` | prop paywall_location = The location where user encounter the paywall | `string` | `''` |
9
9
  | `paywall_position` | `paywall_position` | prop paywall_position = The position of ther subscription package viewed by user | `number` | `0` |
10
10
  | `paywall_subscription_id` | `paywall_subscription_id` | prop paywall_subscription_id = The ID of the subscription package viewed by user | `string` | `''` |
package/src/utils/googleFont.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  export const addGoogleFonts = (fonts: string[]) => {
2
2
  const fontMap: { [key: string]: string } = {
3
- lora: 'https://fonts.googleapis.com/css2?family=Lora:wght@700&display=swap',
3
+ lora: 'https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,700&display=swap',
4
4
  'pt-sans':
5
5
  'https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap',
6
6
  'roboto-condensed':
package/tailwind/tailwind.css CHANGED
@@ -1215,6 +1215,10 @@ video {
1215
1215
  justify-content: space-evenly;
1216
1216
  }
1217
1217
 
1218
+ .gap-1 {
1219
+ gap: 0.25rem;
1220
+ }
1221
+
1218
1222
  .gap-4 {
1219
1223
  gap: 1rem;
1220
1224
  }
@@ -2320,6 +2324,10 @@ video {
2320
2324
  align-items: flex-start;
2321
2325
  }
2322
2326
 
2327
+ .md\:items-center {
2328
+ align-items: center;
2329
+ }
2330
+
2323
2331
  .md\:justify-start {
2324
2332
  justify-content: flex-start;
2325
2333
  }
package/tailwind/tailwind.ts CHANGED
@@ -1226,6 +1226,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1226
1226
  justify-content: space-evenly;
1227
1227
  }
1228
1228
 
1229
+ .gap-1 {
1230
+ gap: 0.25rem;
1231
+ }
1232
+
1229
1233
  .gap-4 {
1230
1234
  gap: 1rem;
1231
1235
  }
@@ -2341,6 +2345,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
2341
2345
  align-items: flex-start;
2342
2346
  }
2343
2347
 
2348
+ .md\\:items-center {
2349
+ align-items: center;
2350
+ }
2351
+
2344
2352
  .md\\:justify-start {
2345
2353
  justify-content: flex-start;
2346
2354
  }