@kompasid/lit-web-components 0.2.0 → 0.3.1

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 (24) hide show
  1. package/.github/workflows/npm-publish.yml +2 -2
  2. package/demo/index.html +2 -2
  3. package/dist/src/components/kompas-metered-paywall/KompasMeteredPaywall.js +1 -1
  4. package/dist/src/components/kompas-metered-paywall/KompasMeteredPaywall.js.map +1 -1
  5. package/dist/src/components/kompas-paywall/KompasPaywall.js +21 -0
  6. package/dist/src/components/kompas-paywall/KompasPaywall.js.map +1 -1
  7. package/dist/src/components/kompas-paywall-body/KompasPaywallBody.js +28 -12
  8. package/dist/src/components/kompas-paywall-body/KompasPaywallBody.js.map +1 -1
  9. package/dist/tailwind/tailwind.js +1369 -1343
  10. package/dist/tailwind/tailwind.js.map +1 -1
  11. package/dist/tsconfig.tsbuildinfo +1 -1
  12. package/package.json +1 -1
  13. package/pull_request_template.md +9 -0
  14. package/src/components/kompas-metered-paywall/KompasMeteredPaywall.ts +1 -1
  15. package/src/components/kompas-metered-paywall/readme.md +19 -25
  16. package/src/components/kompas-paywall/KompasPaywall.ts +21 -0
  17. package/src/components/kompas-paywall/readme.md +0 -111
  18. package/src/components/kompas-paywall-banner-registration/readme.md +0 -5
  19. package/src/components/kompas-paywall-body/KompasPaywallBody.ts +29 -11
  20. package/src/components/kompas-paywall-body/readme.md +0 -5
  21. package/src/components/kompas-paywall-information-header/readme.md +0 -5
  22. package/src/components/kompas-paywall-video/readme.md +17 -21
  23. package/tailwind/tailwind.css +10 -0
  24. package/tailwind/tailwind.ts +1369 -1344
package/src/components/kompas-paywall/readme.md CHANGED
@@ -2,117 +2,6 @@
2
2
 
3
3
  Ini adalah redesign komponen _paywall_ yang digunakan pada [epaper.kompas.id](https://epaper.kompas.id) dan [kompas.id](https://kompas.id). Penggunaan komponen ini dapat dibedakan berdasarkan type productnya ( epaper atau reguler(kompas.id)).
4
4
 
5
- ## Pemasangan
6
-
7
- ### - CDN
8
-
9
- Selalu menggunakan versi terbaru:
10
- ```html
11
- <script src="https://unpkg.com/@kompasid/web-components@latest" type="module" async defer></script>
12
- ```
13
- atau menggunakan versi tertentu, saat ini belum disarankan:
14
- ```html
15
- <script src="https://unpkg.com/@kompasid/web-components@0.0.1-alpha-5" type="module" async defer></script>
16
- ```
17
-
18
- ### - NPM
19
- ```bash
20
- npm i -D @kompasid/web-components
21
- ```
22
-
23
- ### - Yarn
24
- ```bash
25
- yarn add -D @kompasid/web-components
26
- ```
27
-
28
- ## Penggunaan
29
-
30
- ### - Vue.js
31
- Apabila menggunakan Vue.js sebagai kerangka kerja Javascript, Anda perlu menambahkan konfigurasi berikut di `./src/main.js`:
32
-
33
- ```javascript
34
- import Vue from "vue";
35
- import App from "./App.vue";
36
-
37
- import {
38
- applyPolyfills,
39
- defineCustomElements,
40
- } from "@kompasid/web-components/loader";
41
-
42
- Vue.config.productionTip = false;
43
-
44
- // Perintahkan Vue untuk mengabaikan komponen dengan prefiks 'kompas-'
45
- Vue.config.ignoredElements = [/kompas-\w*/];
46
-
47
- // Bebat komponen kustom ke obyek window
48
- applyPolyfills().then(() => {
49
- defineCustomElements();
50
- });
51
-
52
- new Vue({
53
- render: (h) => h(App),
54
- }).$mount("#app");
55
- ```
56
-
57
- ### - NuxtJS
58
- Apabila menggunakan NuxtJS, Anda bisa menggunakan pustaka [Gomah/nuxt-stencil](https://github.com/Gomah/nuxt-stencil). Tugas selanjutnya adalah menambahkan konfigurasi berikut di `nuxt.config.js`:
59
-
60
- ```javascript
61
- export default {
62
- modules: [
63
- 'nuxt-stencil'
64
- ],
65
- stencil: {
66
- lib: '@kompasid/web-components',
67
- prefix: 'kompas-',
68
- renderOptions: {},
69
- hydratePath: '@kompasid/web-components/hydrate',
70
- loaderPath: '@kompasid/web-components/loader',
71
- ignoredElements: null
72
- },
73
- }
74
- ```
75
-
76
- ### Standar
77
- Anda perlu meletakkan _tag_ komponen `<kompas-paywall />` pada halaman anda.
78
-
79
- Contoh:
80
-
81
- <img width="500" alt="" src="https://i.ibb.co/BwdhYsJ/Screenshot-2022-04-07-151048.png">
82
-
83
-
84
- ### Elemen
85
- ```javascript
86
- <kompas-paywall
87
- type="reguler"
88
- is-with-header="true"
89
- header-text="this is defult text message"
90
- />
91
- ```
92
-
93
- ### Catatan
94
-
95
- Kompas Paywall ini terdiri dari beberapa sub-komponen sebagai berikut :
96
-
97
- 1. kompas-paywall-body <br>
98
- sub-komponen ini merupakan bagian paywall body yang memiliki dua tipe yaitu _epaper_ dan _reguler_
99
- <br>
100
- * epaper <br>
101
- <img width="300" src="https://user-images.githubusercontent.com/43400392/162157850-b82cd11a-a15e-4a44-9f7e-b5b9bab62ee9.png">
102
- * reguler <br>
103
- <img width="300" src="https://user-images.githubusercontent.com/43400392/162159351-9dbef0ce-0113-4cbb-a8a6-9709fbaf1974.png">
104
-
105
- 2. kompas-paywall-banner-registration <br>
106
- sub-komponen ini merupakan komponen banner registration user <br>
107
- <img width="300" src="https://user-images.githubusercontent.com/43400392/162159659-3bbc12ca-78bb-4985-baf6-0df35a5e89a2.png">
108
-
109
- 3. kompas-paywall-information-header <br>
110
- sub-komponen ini merupakan komponen yang digunakan pada mettered paywall ketika mencapai kuota maksimal <br>
111
- <img width="300" src="https://user-images.githubusercontent.com/43400392/162159671-39462ffd-8dd8-4cf5-93ed-fb3bd8751d89.png">
112
-
113
- <!-- Auto Generated Below -->
114
-
115
-
116
5
  ## Properties
117
6
 
118
7
  | Property | Attribute | Description | Type | Default |
package/src/components/kompas-paywall-banner-registration/readme.md CHANGED
@@ -1,10 +1,5 @@
1
1
  # kompas-paywall-banner-registration
2
2
 
3
-
4
-
5
- <!-- Auto Generated Below -->
6
-
7
-
8
3
  ## Properties
9
4
 
10
5
  | Property | Attribute | Description | Type | Default |
package/src/components/kompas-paywall-body/KompasPaywallBody.ts CHANGED
@@ -15,7 +15,17 @@ import { deviceType } from '../../utils/deviceType.js'
15
15
 
16
16
  @customElement('kompas-paywall-body')
17
17
  export class KompasPaywallBody extends LitElement {
18
- static styles = [css``, TWStyles]
18
+ static styles = [
19
+ css`
20
+ .wrapper-body {
21
+ display: flex;
22
+ flex-direction: column;
23
+ justify-items: center;
24
+ align-items: center;
25
+ }
26
+ `,
27
+ TWStyles,
28
+ ]
19
29
 
20
30
  /**
21
31
  * Props
@@ -105,7 +115,8 @@ export class KompasPaywallBody extends LitElement {
105
115
  ): void {
106
116
  this.sendDataLayeronButtonBuyPackage(name, id, price, position)
107
117
  const originHost: string = encodeURIComponent(window.location.href)
108
- const directUrlCheckout: string = url + originHost
118
+ const source: string = this.type === 'epaper' ? 'epaper' : ''
119
+ const directUrlCheckout: string = `${url}${originHost}&source=${source}`
109
120
  window.open(directUrlCheckout)
110
121
  }
111
122
 
@@ -330,16 +341,23 @@ export class KompasPaywallBody extends LitElement {
330
341
  super.connectedCallback()
331
342
  if (this.swgEnable) {
332
343
  this.jsonScript()
333
- if (this.buttonElement) {
334
- const head = document.querySelector('head')
335
- const script = document.createElement('script')
336
- script.src = 'https://news.google.com/swg/js/v1/swg.js'
337
- script.defer = true
338
- script.onload = this.subscribeWithGoogleButton()
339
- if (head) {
340
- head.appendChild(script)
344
+ const appendSWGButton = () => {
345
+ this.buttonElement = this.shadowRoot?.getElementById(
346
+ 'subscribe-with-google'
347
+ ) as HTMLButtonElement
348
+ if (this.buttonElement) {
349
+ const head = document.querySelector('head')
350
+ const script = document.createElement('script')
351
+ script.src = 'https://news.google.com/swg/js/v1/swg.js'
352
+ script.defer = true
353
+ script.onload = this.subscribeWithGoogleButton()
354
+ if (head) {
355
+ head.appendChild(script)
356
+ }
341
357
  }
342
358
  }
359
+
360
+ setTimeout(appendSWGButton, 500)
343
361
  }
344
362
  }
345
363
 
@@ -817,7 +835,7 @@ export class KompasPaywallBody extends LitElement {
817
835
  ${this.swgEnable
818
836
  ? html`<button
819
837
  class="border-2 bg-grey-100 border-grey-100 rounded-lg px-6 shadow-sm flex flex-row py-2 mt-1 mb-4"
820
- ref=${(el: any) => (this.buttonElement = el as HTMLButtonElement)}
838
+ id="subscribe-with-google"
821
839
  >
822
840
  <p>Subscribe with</p>
823
841
  <img class="pl-2 object-scale-down w-20 pt-0.5" src="https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/paywall-asset/google.png" alt="subscribe with google"></img>
package/src/components/kompas-paywall-body/readme.md CHANGED
@@ -1,10 +1,5 @@
1
1
  # kompas-paywall-body
2
2
 
3
-
4
-
5
- <!-- Auto Generated Below -->
6
-
7
-
8
3
  ## Properties
9
4
 
10
5
  | Property | Attribute | Description | Type | Default |
package/src/components/kompas-paywall-information-header/readme.md CHANGED
@@ -1,10 +1,5 @@
1
1
  # kompas-paywall-information-header
2
2
 
3
-
4
-
5
- <!-- Auto Generated Below -->
6
-
7
-
8
3
  ## Properties
9
4
 
10
5
  | Property | Attribute | Description | Type | Default |
package/src/components/kompas-paywall-video/readme.md CHANGED
@@ -16,30 +16,26 @@ Contoh Penerapan:
16
16
  <img width="500" src="https://user-images.githubusercontent.com/43400392/198214862-16f0f0b1-d179-48b8-9e30-a7667ede1a95.jpg">
17
17
 
18
18
 
19
- <!-- Auto Generated Below -->
20
-
21
-
22
19
  ## Properties
23
20
 
24
21
  | Property | Attribute | Description | Type | Default |
25
- | ------------------------------ | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
26
- | `isLogin` | `is-login` | prop isLogin untuk menghandle apakah user sudah login atau belum prop paywall_location = The location where user encounter the paywall prop paywall_subscription_package = The name of the subscription package viewed by user prop paywall_subscription_id = The ID of the subscription package viewed by user prop paywall_subscription_price = The price of the subscriprtion package viewed by user prop paywall_position = The position of the subscription package viewed by user prop page_type = Type of the page prop content_id = ID of article (slug) prop content_type = Whether it's free article or paid article prop content_title = The title of article prop tracker_content_categories = The category of the content prop user_type = Type of user based on their subscription prop subscription_status = Status of their subscription prop page_domain = Page Domain prop metered_wall_type = The type of Metered Wall prop metered_wall_balance = The balance of their metered wall | `boolean` | `false` |
27
- | `paywall_location` | `paywall_location` | | `string` | `''` |
28
- | `paywall_position` | `paywall_position` | | `number` | `0` |
29
- | `paywall_subscription_id` | `paywall_subscription_id` | | `string` | `''` |
30
- | `paywall_subscription_package` | `paywall_subscription_package` | | `string` | `''` |
31
- | `paywall_subscription_price` | `paywall_subscription_price` | | `number` | `0` |
32
- | `tracker_content_categories` | `tracker_content_categories` | | `string` | `''` |
33
- | `tracker_content_id` | `tracker_content_id` | | `string` | `''` |
34
- | `tracker_content_title` | `tracker_content_title` | | `string` | `''` |
35
- | `tracker_content_type` | `tracker_content_type` | | `string` | `''` |
36
- | `tracker_metered_wall_balance` | `tracker_metered_wall_balance` | | `number` | `0` |
37
- | `tracker_metered_wall_type` | `tracker_metered_wall_type` | | `string` | `''` |
38
- | `tracker_page_domain` | `tracker_page_domain` | | `string` | `''` |
39
- | `tracker_page_type` | `tracker_page_type` | | `string` | `''` |
40
- | `tracker_subscription_status` | `tracker_subscription_status` | | `string` | `''` |
41
- | `tracker_user_type` | `tracker_user_type` | | `string` | `''` |
42
-
22
+ | ------------------------------ | ------------------------------ | ---------------------------------------------------------------------------------------- | --------- | ------- |
23
+ | `isLogin` | `is-login` | prop isLogin untuk menghandle apakah user sudah login atau belum | `boolean` | `false` |
24
+ | `paywall_location` | `paywall_location` | prop paywall_location = The location where user encounter the paywall | `string` | `''` |
25
+ | `paywall_position` | `paywall_position` | prop paywall_position = The position of the subscription package viewed by user | `number` | `0` |
26
+ | `paywall_subscription_id` | `paywall_subscription_id` | prop paywall_subscription_id = The ID of the subscription package viewed by user | `string` | `''` |
27
+ | `paywall_subscription_package` | `paywall_subscription_package` | prop paywall_subscription_package = The name of the subscription package viewed by user | `string` | `''` |
28
+ | `paywall_subscription_price` | `paywall_subscription_price` | prop paywall_subscription_price = The price of the subscriprtion package viewed by user | `number` | `0` |
29
+ | `tracker_content_categories` | `tracker_content_categories` | prop tracker_content_categories = The category of the content | `string` | `''` |
30
+ | `tracker_content_id` | `tracker_content_id` | prop content_id = ID of article (slug) | `string` | `''` |
31
+ | `tracker_content_title` | `tracker_content_title` | prop content_title = The title of article | `string` | `''` |
32
+ | `tracker_content_type` | `tracker_content_type` | prop content_type = Whether it's free article or paid article | `string` | `''` |
33
+ | `tracker_metered_wall_balance` | `tracker_metered_wall_balance` | prop metered_wall_balance = The balance of their metered wall | `number` | `0` |
34
+ | `tracker_metered_wall_type` | `tracker_metered_wall_type` | prop metered_wall_type = The type of Metered Wall | `string` | `''` |
35
+ | `tracker_page_domain` | `tracker_page_domain` | prop page_domain = Page Domain | `string` | `''` |
36
+ | `tracker_page_type` | `tracker_page_type` | prop page_type = Type of the page | `string` | `''` |
37
+ | `tracker_subscription_status` | `tracker_subscription_status` | prop subscription_status = Status of their subscription | `string` | `''` |
38
+ | `tracker_user_type` | `tracker_user_type` | prop user_type = Type of user based on their subscription | `string` | `''` |
43
39
 
44
40
  ----------------------------------------------
45
41
 
package/tailwind/tailwind.css CHANGED
@@ -1114,6 +1114,16 @@ video {
1114
1114
  background-color: rgb(255 220 63 / var(--tw-bg-opacity));
1115
1115
  }
1116
1116
 
1117
+ .bg-red-400 {
1118
+ --tw-bg-opacity: 1;
1119
+ background-color: rgb(243 32 19 / var(--tw-bg-opacity));
1120
+ }
1121
+
1122
+ .bg-yellow-400 {
1123
+ --tw-bg-opacity: 1;
1124
+ background-color: rgb(255 204 0 / var(--tw-bg-opacity));
1125
+ }
1126
+
1117
1127
  .bg-opacity-50 {
1118
1128
  --tw-bg-opacity: 0.5;
1119
1129
  }