@kompasid/lit-web-components 0.9.40 → 0.9.42

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 (26) hide show
  1. package/demo/header.html +3 -3
  2. package/dist/src/components/kompasid-header-account/KompasHeaderAccount.d.ts +3 -7
  3. package/dist/src/components/kompasid-header-account/KompasHeaderAccount.js +9 -29
  4. package/dist/src/components/kompasid-header-account/KompasHeaderAccount.js.map +1 -1
  5. package/dist/src/components/kompasid-header-account-menu/KompasHeaderAccountMenu.d.ts +3 -15
  6. package/dist/src/components/kompasid-header-account-menu/KompasHeaderAccountMenu.js +9 -30
  7. package/dist/src/components/kompasid-header-account-menu/KompasHeaderAccountMenu.js.map +1 -1
  8. package/dist/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.d.ts +0 -1
  9. package/dist/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.js +0 -4
  10. package/dist/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.js.map +1 -1
  11. package/dist/src/components/kompasid-paywall/KompasPaywall.js +4 -0
  12. package/dist/src/components/kompasid-paywall/KompasPaywall.js.map +1 -1
  13. package/dist/src/components/kompasid-paywall/types.d.ts +1 -0
  14. package/dist/src/components/kompasid-paywall/types.js.map +1 -1
  15. package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.js +29 -25
  16. package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.js.map +1 -1
  17. package/dist/tsconfig.tsbuildinfo +1 -1
  18. package/package.json +1 -1
  19. package/src/components/kompasid-header-account/KompasHeaderAccount.ts +6 -14
  20. package/src/components/kompasid-header-account/readme.md +29 -7
  21. package/src/components/kompasid-header-account-menu/KompasHeaderAccountMenu.ts +8 -24
  22. package/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.ts +0 -1
  23. package/src/components/kompasid-paywall/KompasPaywall.ts +4 -0
  24. package/src/components/kompasid-paywall/readme.md +4 -2
  25. package/src/components/kompasid-paywall/types.ts +1 -0
  26. package/src/components/kompasid-paywall-body/KompasPaywallBody.ts +1 -0
package/demo/header.html CHANGED
@@ -102,7 +102,7 @@
102
102
  let renderKey = 0
103
103
 
104
104
  const cartUrl = '/cart'
105
- const logoutUrl = '/logout'
105
+ const logoutUrl = 'https://account.kompas.id/logout/tests'
106
106
  const manageAccountUrl = '/manage-count'
107
107
  const notificationUrl = '/notif'
108
108
  const notificationTotal = '10'
@@ -154,13 +154,13 @@
154
154
  .userData=${userData}
155
155
  .cart_url=${cartUrl}
156
156
  .logout_url=${logoutUrl}
157
- sidebarTopSpacing="49"
157
+ .read_later_url=${readLaterUrl}
158
158
  .manage_account_url=${manageAccountUrl}
159
+ sidebarTopSpacing="49"
159
160
  .notification_url=${notificationUrl}
160
161
  .notification_total=${notificationTotal}
161
162
  .orders_url=${ordersUrl}
162
163
  .subscriptionUrl=${subscriptionUrl}
163
- .read_later_url=${readLaterUrl}
164
164
  .total_grace_period=${totalGracePeriod}
165
165
  .paywall_location=${paywallLocation}
166
166
  .paywall_subscription_package=${paywallSubscriptionPackage}
package/dist/src/components/kompasid-header-account/KompasHeaderAccount.d.ts CHANGED
@@ -11,16 +11,12 @@ export declare class KompasHeaderAccount extends LitElement {
11
11
  /**
12
12
  * Props default
13
13
  */
14
- cartUrl: string;
15
- logoutUrl: string;
16
- manageAccountUrl: string;
17
- notificationUrl: string;
18
- ordersUrl: string;
19
- readLaterUrl: string;
14
+ logout_url: string;
15
+ manage_account_url: string;
16
+ read_later_url: string;
20
17
  userData: {};
21
18
  sidebarTopSpacing: number;
22
19
  subscriptionUrl: string;
23
- totalGracePeriod: number;
24
20
  theme: 'default' | 'primary';
25
21
  /**
26
22
  * Props For Grace Period and Tracker
package/dist/src/components/kompasid-header-account/KompasHeaderAccount.js CHANGED
@@ -18,16 +18,12 @@ let KompasHeaderAccount = class KompasHeaderAccount extends LitElement {
18
18
  /**
19
19
  * Props default
20
20
  */
21
- this.cartUrl = ''; // tidak terpakai
22
- this.logoutUrl = '';
23
- this.manageAccountUrl = '';
24
- this.notificationUrl = '';
25
- this.ordersUrl = ''; // tidak terpakai
26
- this.readLaterUrl = '';
21
+ this.logout_url = '';
22
+ this.manage_account_url = '';
23
+ this.read_later_url = '';
27
24
  this.userData = {};
28
25
  this.sidebarTopSpacing = 0;
29
26
  this.subscriptionUrl = '';
30
- this.totalGracePeriod = 0; // tidak terpakai
31
27
  this.theme = 'default';
32
28
  /**
33
29
  * Props For Grace Period and Tracker
@@ -127,7 +123,6 @@ let KompasHeaderAccount = class KompasHeaderAccount extends LitElement {
127
123
  .userInitialName=${this.getInitialUserName()}
128
124
  .userData=${this.formattedUserData}
129
125
  .subscriptionUrl=${this.subscriptionUrl}
130
- .totalGracePeriod=${this.totalGracePeriod}
131
126
  paywall_location=${this.paywall_location}
132
127
  paywall_subscription_package=${this.paywall_subscription_package}
133
128
  paywall_subscription_id=${this.paywall_subscription_id}
@@ -146,12 +141,9 @@ let KompasHeaderAccount = class KompasHeaderAccount extends LitElement {
146
141
  ></kompasid-header-account-profile>
147
142
  <div class="pl-4 pr-3 py-4 text-left">
148
143
  <kompasid-header-account-menu
149
- .cart-url=${this.cartUrl}
150
- .manage-account-url=${this.manageAccountUrl}
151
- .logout-url=${this.logoutUrl}
152
- .notification-url=${this.notificationUrl}
153
- .orders-url=${this.ordersUrl}
154
- .read-later-url=${this.readLaterUrl}
144
+ .manage_account_url=${this.manage_account_url}
145
+ .logout_url=${this.logout_url}
146
+ .read_later_url=${this.read_later_url}
155
147
  ></kompasid-header-account-menu>
156
148
  <kompasid-header-account-help-center></kompasid-header-account-help-center>
157
149
  </div>
@@ -272,22 +264,13 @@ __decorate([
272
264
  ], KompasHeaderAccount.prototype, "themeList", void 0);
273
265
  __decorate([
274
266
  property({ type: String })
275
- ], KompasHeaderAccount.prototype, "cartUrl", void 0);
267
+ ], KompasHeaderAccount.prototype, "logout_url", void 0);
276
268
  __decorate([
277
269
  property({ type: String })
278
- ], KompasHeaderAccount.prototype, "logoutUrl", void 0);
270
+ ], KompasHeaderAccount.prototype, "manage_account_url", void 0);
279
271
  __decorate([
280
272
  property({ type: String })
281
- ], KompasHeaderAccount.prototype, "manageAccountUrl", void 0);
282
- __decorate([
283
- property({ type: String })
284
- ], KompasHeaderAccount.prototype, "notificationUrl", void 0);
285
- __decorate([
286
- property({ type: String })
287
- ], KompasHeaderAccount.prototype, "ordersUrl", void 0);
288
- __decorate([
289
- property({ type: String })
290
- ], KompasHeaderAccount.prototype, "readLaterUrl", void 0);
273
+ ], KompasHeaderAccount.prototype, "read_later_url", void 0);
291
274
  __decorate([
292
275
  property({ type: Object })
293
276
  ], KompasHeaderAccount.prototype, "userData", void 0);
@@ -297,9 +280,6 @@ __decorate([
297
280
  __decorate([
298
281
  property({ type: String })
299
282
  ], KompasHeaderAccount.prototype, "subscriptionUrl", void 0);
300
- __decorate([
301
- property({ type: Number })
302
- ], KompasHeaderAccount.prototype, "totalGracePeriod", void 0);
303
283
  __decorate([
304
284
  property({ type: String })
305
285
  ], KompasHeaderAccount.prototype, "theme", void 0);
package/dist/src/components/kompasid-header-account/KompasHeaderAccount.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"KompasHeaderAccount.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account/KompasHeaderAccount.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { cva } from 'class-variance-authority'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { User } from './types.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { getHeaderTheme } from '../../utils/api/getHeaderTheme.js'\nimport '../kompasid-header-account-profile/KompasHeaderAccountProfile.js'\nimport '../kompasid-header-account-help-center/KompasHeaderAccountHelpCenter.js'\nimport '../kompasid-header-account-menu/KompasHeaderAccountMenu.js'\n\n@customElement('kompasid-header-account')\nexport class KompasHeaderAccount extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n .header {\n background-color: #0356a8;\n }\n .account-profile {\n overflow-y: auto;\n }\n\n .header-account-help-center--item {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0.75rem;\n }\n\n .header-account-help-center--content {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n margin-left: 1rem;\n line-height: 1.5rem;\n }\n\n .header-account--membership-icon {\n position: absolute;\n bottom: -2.5px;\n right: -2.5px;\n }\n\n .header-account--notification-indicator {\n position: absolute;\n top: 0;\n height: 0.5rem;\n width: 0.5rem;\n background-color: #f6ad55;\n border-radius: 50%;\n right: -0.563rem;\n top: -0.281rem;\n }\n\n .icon-xs svg {\n width: 11px;\n height: 12px;\n }\n\n .header-account-sidebar {\n width: 19rem;\n background-color: #edf2f7;\n box-shadow: 0px 0.125rem 0.25rem rgba(0, 0, 0, 0.1);\n display: flex;\n flex-direction: column;\n font-family: 'PT Sans', sans-serif;\n font-size: 0.875rem;\n }\n .z-index-max {\n z-index: 99999;\n }\n\n /* Custom Scrollbar for header */\n /* width */\n ::-webkit-scrollbar {\n width: 4px;\n }\n\n /* Track */\n ::-webkit-scrollbar-track {\n background: transparent;\n }\n\n /* Handle */\n ::-webkit-scrollbar-thumb {\n background: #0356a8;\n border-radius: 100px;\n }\n\n /* Handle on hover */\n ::-webkit-scrollbar-thumb:hover {\n background: #0356a8;\n }\n `,\n TWStyles,\n ]\n\n @state() isShowSidebar: boolean = false\n @state() themeList: any = null\n\n formattedUserData: User = {} as User\n\n /**\n * Props default\n */\n @property({ type: String }) cartUrl = '' // tidak terpakai\n @property({ type: String }) logoutUrl = ''\n @property({ type: String }) manageAccountUrl = ''\n @property({ type: String }) notificationUrl = ''\n @property({ type: String }) ordersUrl = '' // tidak terpakai\n @property({ type: String }) readLaterUrl = ''\n @property({ type: Object }) userData = {}\n @property({ type: Number }) sidebarTopSpacing = 0\n @property({ type: String }) subscriptionUrl = ''\n @property({ type: Number }) totalGracePeriod = 0 // tidak terpakai\n @property({ type: String }) theme: 'default' | 'primary' = 'default'\n /**\n * Props For Grace Period and Tracker\n */\n @property({ type: String }) paywall_location = '' // belum tau terpakai dimana\n @property({ type: String }) paywall_subscription_package = '' // belum tau terpakai dimana\n @property({ type: Number }) paywall_subscription_id = 0\n @property({ type: Number }) paywall_subscription_price = 0 // belum tau terpakai dimana\n @property({ type: Number }) paywall_position = 0 // belum tau terpakai dimana\n @property({ type: String }) tracker_page_type = '' // belum tau terpakai dimana\n @property({ type: String }) tracker_content_id = '' // belum tau terpakai dimana\n @property({ type: String }) tracker_content_title = '' // belum tau terpakai dimana\n @property({ type: String }) tracker_content_categories = '' // belum tau terpakai dimana\n @property({ type: String }) tracker_content_type = '' // belum tau terpakai dimana\n @property({ type: String }) tracker_user_type = '' // belum tau terpakai dimana\n @property({ type: String }) tracker_subscription_status = '' // belum tau terpakai dimana\n @property({ type: String }) tracker_page_domain = '' // belum tau terpakai dimana\n @property({ type: String }) tracker_metered_wall_type = '' // belum tau terpakai dimana\n @property({ type: Number }) tracker_metered_wall_balance = 0 // belum tau terpakai dimana\n\n private toggleSidebar() {\n this.isShowSidebar = !this.isShowSidebar\n }\n\n private getInitialUserName() {\n return this.formattedUserData?.userName\n ? this.formattedUserData.userName.charAt(0)\n : ''\n }\n\n private setTheme(param: any): String {\n if (!this.themeList) return 'text-grey-100'\n const cvaFn = cva('', { variants: this.themeList })\n\n return cvaFn(param)\n }\n\n private account() {\n const membershipIcon = () => {\n if (!this.formattedUserData?.isMembership) return html``\n return html`\n <div>\n <img\n class=\"header-account--membership-icon h-3 w-3\"\n src=\"https://cdn-www.kompas.id/global-header/crown-royal-blue-60.svg\"\n alt=\"membership-crown-icon\"\n />\n </div>\n `\n }\n\n return html`\n <button @click=${this.toggleSidebar} class=\"cursor-pointer \">\n <div class=\"flex flex-row items-center self-center\">\n ${!this.getInitialUserName()\n ? html`<div\n class=\"bg-grey-300 rounded-full h-6 w-6 animate-pulse\"\n ></div>`\n : html`\n <div\n class=\"flex rounded-full h-6 w-6 items-center justify-center relative ${this.setTheme(\n { background: this.theme }\n )}\"\n >\n <span\n class=\"capitalize text-xxs font-bold ${this.setTheme({\n text: this.theme,\n })}\"\n >\n ${this.getInitialUserName()}\n </span>\n ${membershipIcon()}\n </div>\n `}\n <div\n class=\"ml-1 icon-xs ${this.isShowSidebar\n ? 'chevron-down'\n : 'rotate-180'} ${this.setTheme({ icon: this.theme })}\"\n >\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))}\n </div>\n </div>\n </button>\n `\n }\n\n private accountSidebar() {\n return html`\n <nav\n class=\"w-screen fixed right-0 top-0 bottom-0\"\n @keyup=\"${this.onkeyup}\"\n @click=${this.toggleSidebar}\n >\n <div\n class=\"bg-grey-100 pb-20 pt-0 shadow-lg w-76 z-index-max ml-auto\"\n style=${`margin-top: ${this.sidebarTopSpacing}px;height:100vh;overflow-y:auto`}\n @keyup=\"${this.onkeyup}\"\n @click=${(ev: any) => ev.stopPropagation()}\n >\n <kompasid-header-account-profile\n .userInitialName=${this.getInitialUserName()}\n .userData=${this.formattedUserData}\n .subscriptionUrl=${this.subscriptionUrl}\n .totalGracePeriod=${this.totalGracePeriod}\n paywall_location=${this.paywall_location}\n paywall_subscription_package=${this.paywall_subscription_package}\n paywall_subscription_id=${this.paywall_subscription_id}\n paywall_subscription_price=${this.paywall_subscription_price}\n paywall_position=${this.paywall_position}\n tracker_page_type=${this.tracker_page_type}\n tracker_content_id=${this.tracker_content_id}\n tracker_content_title=${this.tracker_content_title}\n tracker_content_categories=${this.tracker_content_categories}\n tracker_content_type=${this.tracker_content_type}\n tracker_user_type=${this.tracker_user_type}\n tracker_subscription_status=${this.tracker_subscription_status}\n tracker_page_domain=${this.tracker_page_domain}\n tracker_metered_wall_type=${this.tracker_metered_wall_type}\n tracker_metered_wall_balance=${this.tracker_metered_wall_balance}\n ></kompasid-header-account-profile>\n <div class=\"pl-4 pr-3 py-4 text-left\">\n <kompasid-header-account-menu\n .cart-url=${this.cartUrl}\n .manage-account-url=${this.manageAccountUrl}\n .logout-url=${this.logoutUrl}\n .notification-url=${this.notificationUrl}\n .orders-url=${this.ordersUrl}\n .read-later-url=${this.readLaterUrl}\n ></kompasid-header-account-menu>\n <kompasid-header-account-help-center></kompasid-header-account-help-center>\n </div>\n </div>\n </nav>\n `\n }\n\n override async connectedCallback() {\n super.connectedCallback()\n this.isShowSidebar = false\n this.themeList = await getHeaderTheme()\n\n if (typeof this.userData === 'string') {\n this.formattedUserData = JSON.parse(this.userData)\n } else if (typeof this.userData === 'object' && this.userData !== null) {\n // If userData is already an object, you might not need to parse it.\n // You can assign it directly to formattedUserData:\n this.formattedUserData = this.userData as User\n }\n }\n\n render() {\n return html`\n ${this.account()} ${this.isShowSidebar ? this.accountSidebar() : ''}\n `\n }\n}\n"]}
1
+ {"version":3,"file":"KompasHeaderAccount.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account/KompasHeaderAccount.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { cva } from 'class-variance-authority'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { User } from './types.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { getHeaderTheme } from '../../utils/api/getHeaderTheme.js'\nimport '../kompasid-header-account-profile/KompasHeaderAccountProfile.js'\nimport '../kompasid-header-account-help-center/KompasHeaderAccountHelpCenter.js'\nimport '../kompasid-header-account-menu/KompasHeaderAccountMenu.js'\n\n@customElement('kompasid-header-account')\nexport class KompasHeaderAccount extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n .header {\n background-color: #0356a8;\n }\n .account-profile {\n overflow-y: auto;\n }\n\n .header-account-help-center--item {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0.75rem;\n }\n\n .header-account-help-center--content {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n margin-left: 1rem;\n line-height: 1.5rem;\n }\n\n .header-account--membership-icon {\n position: absolute;\n bottom: -2.5px;\n right: -2.5px;\n }\n\n .header-account--notification-indicator {\n position: absolute;\n top: 0;\n height: 0.5rem;\n width: 0.5rem;\n background-color: #f6ad55;\n border-radius: 50%;\n right: -0.563rem;\n top: -0.281rem;\n }\n\n .icon-xs svg {\n width: 11px;\n height: 12px;\n }\n\n .header-account-sidebar {\n width: 19rem;\n background-color: #edf2f7;\n box-shadow: 0px 0.125rem 0.25rem rgba(0, 0, 0, 0.1);\n display: flex;\n flex-direction: column;\n font-family: 'PT Sans', sans-serif;\n font-size: 0.875rem;\n }\n .z-index-max {\n z-index: 99999;\n }\n\n /* Custom Scrollbar for header */\n /* width */\n ::-webkit-scrollbar {\n width: 4px;\n }\n\n /* Track */\n ::-webkit-scrollbar-track {\n background: transparent;\n }\n\n /* Handle */\n ::-webkit-scrollbar-thumb {\n background: #0356a8;\n border-radius: 100px;\n }\n\n /* Handle on hover */\n ::-webkit-scrollbar-thumb:hover {\n background: #0356a8;\n }\n `,\n TWStyles,\n ]\n\n @state() isShowSidebar: boolean = false\n @state() themeList: any = null\n\n formattedUserData: User = {} as User\n\n /**\n * Props default\n */\n @property({ type: String }) logout_url = ''\n @property({ type: String }) manage_account_url = ''\n @property({ type: String }) read_later_url = ''\n @property({ type: Object }) userData = {}\n @property({ type: Number }) sidebarTopSpacing = 0\n @property({ type: String }) subscriptionUrl = ''\n @property({ type: String }) theme: 'default' | 'primary' = 'default'\n /**\n * Props For Grace Period and Tracker\n */\n @property({ type: String }) paywall_location = '' // belum tau terpakai dimana\n @property({ type: String }) paywall_subscription_package = '' // belum tau terpakai dimana\n @property({ type: Number }) paywall_subscription_id = 0\n @property({ type: Number }) paywall_subscription_price = 0 // belum tau terpakai dimana\n @property({ type: Number }) paywall_position = 0 // belum tau terpakai dimana\n @property({ type: String }) tracker_page_type = '' // belum tau terpakai dimana\n @property({ type: String }) tracker_content_id = '' // belum tau terpakai dimana\n @property({ type: String }) tracker_content_title = '' // belum tau terpakai dimana\n @property({ type: String }) tracker_content_categories = '' // belum tau terpakai dimana\n @property({ type: String }) tracker_content_type = '' // belum tau terpakai dimana\n @property({ type: String }) tracker_user_type = '' // belum tau terpakai dimana\n @property({ type: String }) tracker_subscription_status = '' // belum tau terpakai dimana\n @property({ type: String }) tracker_page_domain = '' // belum tau terpakai dimana\n @property({ type: String }) tracker_metered_wall_type = '' // belum tau terpakai dimana\n @property({ type: Number }) tracker_metered_wall_balance = 0 // belum tau terpakai dimana\n\n private toggleSidebar() {\n this.isShowSidebar = !this.isShowSidebar\n }\n\n private getInitialUserName() {\n return this.formattedUserData?.userName\n ? this.formattedUserData.userName.charAt(0)\n : ''\n }\n\n private setTheme(param: any): String {\n if (!this.themeList) return 'text-grey-100'\n const cvaFn = cva('', { variants: this.themeList })\n\n return cvaFn(param)\n }\n\n private account() {\n const membershipIcon = () => {\n if (!this.formattedUserData?.isMembership) return html``\n return html`\n <div>\n <img\n class=\"header-account--membership-icon h-3 w-3\"\n src=\"https://cdn-www.kompas.id/global-header/crown-royal-blue-60.svg\"\n alt=\"membership-crown-icon\"\n />\n </div>\n `\n }\n\n return html`\n <button @click=${this.toggleSidebar} class=\"cursor-pointer \">\n <div class=\"flex flex-row items-center self-center\">\n ${!this.getInitialUserName()\n ? html`<div\n class=\"bg-grey-300 rounded-full h-6 w-6 animate-pulse\"\n ></div>`\n : html`\n <div\n class=\"flex rounded-full h-6 w-6 items-center justify-center relative ${this.setTheme(\n { background: this.theme }\n )}\"\n >\n <span\n class=\"capitalize text-xxs font-bold ${this.setTheme({\n text: this.theme,\n })}\"\n >\n ${this.getInitialUserName()}\n </span>\n ${membershipIcon()}\n </div>\n `}\n <div\n class=\"ml-1 icon-xs ${this.isShowSidebar\n ? 'chevron-down'\n : 'rotate-180'} ${this.setTheme({ icon: this.theme })}\"\n >\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))}\n </div>\n </div>\n </button>\n `\n }\n\n private accountSidebar() {\n return html`\n <nav\n class=\"w-screen fixed right-0 top-0 bottom-0\"\n @keyup=\"${this.onkeyup}\"\n @click=${this.toggleSidebar}\n >\n <div\n class=\"bg-grey-100 pb-20 pt-0 shadow-lg w-76 z-index-max ml-auto\"\n style=${`margin-top: ${this.sidebarTopSpacing}px;height:100vh;overflow-y:auto`}\n @keyup=\"${this.onkeyup}\"\n @click=${(ev: any) => ev.stopPropagation()}\n >\n <kompasid-header-account-profile\n .userInitialName=${this.getInitialUserName()}\n .userData=${this.formattedUserData}\n .subscriptionUrl=${this.subscriptionUrl}\n paywall_location=${this.paywall_location}\n paywall_subscription_package=${this.paywall_subscription_package}\n paywall_subscription_id=${this.paywall_subscription_id}\n paywall_subscription_price=${this.paywall_subscription_price}\n paywall_position=${this.paywall_position}\n tracker_page_type=${this.tracker_page_type}\n tracker_content_id=${this.tracker_content_id}\n tracker_content_title=${this.tracker_content_title}\n tracker_content_categories=${this.tracker_content_categories}\n tracker_content_type=${this.tracker_content_type}\n tracker_user_type=${this.tracker_user_type}\n tracker_subscription_status=${this.tracker_subscription_status}\n tracker_page_domain=${this.tracker_page_domain}\n tracker_metered_wall_type=${this.tracker_metered_wall_type}\n tracker_metered_wall_balance=${this.tracker_metered_wall_balance}\n ></kompasid-header-account-profile>\n <div class=\"pl-4 pr-3 py-4 text-left\">\n <kompasid-header-account-menu\n .manage_account_url=${this.manage_account_url}\n .logout_url=${this.logout_url}\n .read_later_url=${this.read_later_url}\n ></kompasid-header-account-menu>\n <kompasid-header-account-help-center></kompasid-header-account-help-center>\n </div>\n </div>\n </nav>\n `\n }\n\n override async connectedCallback() {\n super.connectedCallback()\n this.isShowSidebar = false\n this.themeList = await getHeaderTheme()\n\n if (typeof this.userData === 'string') {\n this.formattedUserData = JSON.parse(this.userData)\n } else if (typeof this.userData === 'object' && this.userData !== null) {\n // If userData is already an object, you might not need to parse it.\n // You can assign it directly to formattedUserData:\n this.formattedUserData = this.userData as User\n }\n }\n\n render() {\n return html`\n ${this.account()} ${this.isShowSidebar ? this.accountSidebar() : ''}\n `\n }\n}\n"]}
package/dist/src/components/kompasid-header-account-menu/KompasHeaderAccountMenu.d.ts CHANGED
@@ -3,30 +3,18 @@ export declare class KompasHeaderAccountMenu extends LitElement {
3
3
  static styles: import("lit").CSSResult[];
4
4
  kompasKring?: HTMLInputElement;
5
5
  clipboardClicked: boolean;
6
- /**
7
- * Cart Url
8
- */
9
- cartUrl: string;
10
6
  /**
11
7
  * Logout Url
12
8
  */
13
- logoutUrl: string;
9
+ logout_url: string;
14
10
  /**
15
11
  * Manage Account Url
16
12
  */
17
- manageAccountUrl: string;
18
- /**
19
- * Notification Url
20
- */
21
- notificationUrl: string;
22
- /**
23
- * Orders Url
24
- */
25
- ordersUrl: string;
13
+ manage_account_url: string;
26
14
  /**
27
15
  * Read Later Url
28
16
  */
29
- readLaterUrl: string;
17
+ read_later_url: string;
30
18
  private renderTotalBubble;
31
19
  connectedCallback(): Promise<void>;
32
20
  render(): import("lit-html").TemplateResult<1>;
package/dist/src/components/kompasid-header-account-menu/KompasHeaderAccountMenu.js CHANGED
@@ -8,30 +8,18 @@ let KompasHeaderAccountMenu = class KompasHeaderAccountMenu extends LitElement {
8
8
  constructor() {
9
9
  super(...arguments);
10
10
  this.clipboardClicked = false;
11
- /**
12
- * Cart Url
13
- */
14
- this.cartUrl = 'https://gerai.kompas.id/cart';
15
11
  /**
16
12
  * Logout Url
17
13
  */
18
- this.logoutUrl = 'https://account.kompas.id/logout';
14
+ this.logout_url = 'https://auth.kompas.id/logout';
19
15
  /**
20
16
  * Manage Account Url
21
17
  */
22
- this.manageAccountUrl = 'https://account.kompas.id/manage-account/my-account';
23
- /**
24
- * Notification Url
25
- */
26
- this.notificationUrl = 'https://account.kompas.id/manage-account/notification';
27
- /**
28
- * Orders Url
29
- */
30
- this.ordersUrl = 'https://gerai.kompas.id/my-account/orders';
18
+ this.manage_account_url = 'https://manage-account.kompas.id/manage-account/my-account';
31
19
  /**
32
20
  * Read Later Url
33
21
  */
34
- this.readLaterUrl = 'https://www.kompas.id/baca-nanti';
22
+ this.read_later_url = 'https://www.kompas.id/baca-nanti';
35
23
  // Render Total Bubble
36
24
  this.renderTotalBubble = (total) => {
37
25
  if (!total) {
@@ -66,7 +54,7 @@ let KompasHeaderAccountMenu = class KompasHeaderAccountMenu extends LitElement {
66
54
  <p class="header-account-menu--title">Keranjang</p>
67
55
  </a> -->
68
56
  <!-- Manage Account -->
69
- <a href=${this.manageAccountUrl} class="header-account-menu--item">
57
+ <a href=${this.manage_account_url} class="header-account-menu--item">
70
58
  <div class="icon icon-md icon-blue-600">
71
59
  ${unsafeSVG(getFontAwesomeIcon('fas', 'user-gear'))}
72
60
  </div>
@@ -78,14 +66,14 @@ let KompasHeaderAccountMenu = class KompasHeaderAccountMenu extends LitElement {
78
66
  <p class="header-account-menu--title">Transaksi</p>
79
67
  </a> -->
80
68
  <!-- Read Later -->
81
- <a href=${this.readLaterUrl} class="header-account-menu--item">
69
+ <a href=${this.read_later_url} class="header-account-menu--item">
82
70
  <div class="icon icon-md icon-blue-600">
83
71
  ${unsafeSVG(getFontAwesomeIcon('fas', 'bookmark'))}
84
72
  </div>
85
73
  <p class="header-account-menu--title">Baca Nanti</p>
86
74
  </a>
87
75
  <!-- Logout -->
88
- <a href=${this.logoutUrl} class="header-account-menu--item">
76
+ <a href=${this.logout_url} class="header-account-menu--item">
89
77
  <div class="icon icon-md icon-blue-600">
90
78
  ${unsafeSVG(getFontAwesomeIcon('fas', 'right-from-bracket'))}
91
79
  </div>
@@ -147,22 +135,13 @@ __decorate([
147
135
  ], KompasHeaderAccountMenu.prototype, "clipboardClicked", void 0);
148
136
  __decorate([
149
137
  property({ type: String })
150
- ], KompasHeaderAccountMenu.prototype, "cartUrl", void 0);
151
- __decorate([
152
- property({ type: String })
153
- ], KompasHeaderAccountMenu.prototype, "logoutUrl", void 0);
154
- __decorate([
155
- property({ type: String })
156
- ], KompasHeaderAccountMenu.prototype, "manageAccountUrl", void 0);
157
- __decorate([
158
- property({ type: String })
159
- ], KompasHeaderAccountMenu.prototype, "notificationUrl", void 0);
138
+ ], KompasHeaderAccountMenu.prototype, "logout_url", void 0);
160
139
  __decorate([
161
140
  property({ type: String })
162
- ], KompasHeaderAccountMenu.prototype, "ordersUrl", void 0);
141
+ ], KompasHeaderAccountMenu.prototype, "manage_account_url", void 0);
163
142
  __decorate([
164
143
  property({ type: String })
165
- ], KompasHeaderAccountMenu.prototype, "readLaterUrl", void 0);
144
+ ], KompasHeaderAccountMenu.prototype, "read_later_url", void 0);
166
145
  KompasHeaderAccountMenu = __decorate([
167
146
  customElement('kompasid-header-account-menu')
168
147
  ], KompasHeaderAccountMenu);
package/dist/src/components/kompasid-header-account-menu/KompasHeaderAccountMenu.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"KompasHeaderAccountMenu.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account-menu/KompasHeaderAccountMenu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAA;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AAGjD,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;IAAhD;;QAkDI,qBAAgB,GAAY,KAAK,CAAA;QAE1C;;WAEG;QACyB,YAAO,GAAG,8BAA8B,CAAA;QAEpE;;WAEG;QACyB,cAAS,GAAG,kCAAkC,CAAA;QAE1E;;WAEG;QACyB,qBAAgB,GAC1C,qDAAqD,CAAA;QAEvD;;WAEG;QACyB,oBAAe,GACzC,uDAAuD,CAAA;QAEzD;;WAEG;QACyB,cAAS,GACnC,2CAA2C,CAAA;QAE7C;;WAEG;QACyB,iBAAY,GAAG,kCAAkC,CAAA;QAE7E,sBAAsB;QACd,sBAAiB,GAAG,CAAC,KAAa,EAAE,EAAE;YAC5C,IAAI,CAAC,KAAK,EAAE;gBACV,OAAO,IAAI,CAAA,EAAE,CAAA;aACd;YAED,MAAM,sBAAsB,GAAG,KAAK,GAAG,CAAC,IAAI,KAAK,IAAI,CAAC,CAAA;YACtD,MAAM,iBAAiB,GAAG,sBAAsB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAA;YAEhE,OAAO,IAAI,CAAA;;gBAEC,0CAA0C,iBAAiB,EAAE;;;UAGnE,sBAAsB;gBACtB,CAAC,CAAC,KAAK;gBACP,CAAC,CAAC,IAAI,CAAA,4CAA4C;;KAEvD,CAAA;QACH,CAAC,CAAA;IA+CH,CAAC;IA7CU,KAAK,CAAC,iBAAiB;QAC9B,KAAK,CAAC,iBAAiB,EAAE,CAAA;IAC3B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;oBAWK,IAAI,CAAC,gBAAgB;;gBAEzB,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;;;;;;;;;;oBAU7C,IAAI,CAAC,YAAY;;gBAErB,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;;;;;oBAK5C,IAAI,CAAC,SAAS;;gBAElB,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,oBAAoB,CAAC,CAAC;;;;;;KAMrE,CAAA;IACH,CAAC;;AArJM,8BAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0CF;IACD,QAAQ;CACT,CAAA;AAIQ;IAAR,KAAK,EAAE;iEAAkC;AAKd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAyC;AAKxC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0DAA+C;AAK9C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iEAC4B;AAK3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gEAC8B;AAK7B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0DACkB;AAKjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6DAAkD;AAnFlE,uBAAuB;IADnC,aAAa,CAAC,8BAA8B,CAAC;GACjC,uBAAuB,CAuJnC;SAvJY,uBAAuB","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, state, property } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\n\n@customElement('kompasid-header-account-menu')\nexport class KompasHeaderAccountMenu extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n .header-account-menu--item {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0.75rem;\n transition: background-color 0.3s ease-in-out;\n border-radius: 0.25rem;\n }\n .header-account-menu--item:hover {\n background-color: #e5e7eb; /* Assuming grey-200 */\n }\n .header-account-menu--title {\n flex-grow: 1;\n font-size: 1rem;\n font-weight: bold;\n margin-left: 1rem;\n }\n .header-account-menu--notification-info {\n font-size: 0.875rem;\n border-radius: 1.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: rgb(255, 122, 0);\n color: #f7fafc;\n height: 1.75rem;\n width: 1.75rem;\n }\n .icon {\n margin-top: auto;\n margin-bottom: auto;\n color: rgb(0 85 154);\n }\n .icon svg {\n width: 20px;\n height: 20px;\n }\n .\n `,\n TWStyles,\n ]\n\n kompasKring?: HTMLInputElement\n\n @state() clipboardClicked: boolean = false\n\n /**\n * Cart Url\n */\n @property({ type: String }) cartUrl = 'https://gerai.kompas.id/cart'\n\n /**\n * Logout Url\n */\n @property({ type: String }) logoutUrl = 'https://account.kompas.id/logout'\n\n /**\n * Manage Account Url\n */\n @property({ type: String }) manageAccountUrl =\n 'https://account.kompas.id/manage-account/my-account'\n\n /**\n * Notification Url\n */\n @property({ type: String }) notificationUrl =\n 'https://account.kompas.id/manage-account/notification'\n\n /**\n * Orders Url\n */\n @property({ type: String }) ordersUrl =\n 'https://gerai.kompas.id/my-account/orders'\n\n /**\n * Read Later Url\n */\n @property({ type: String }) readLaterUrl = 'https://www.kompas.id/baca-nanti'\n\n // Render Total Bubble\n private renderTotalBubble = (total: number) => {\n if (!total) {\n return html``\n }\n\n const isOneDigitNotification = total > 0 && total <= 9\n const additionalStyling = isOneDigitNotification ? '' : 'pl-0.5'\n\n return html`\n <div\n class=${`header-account-menu--notification-info ${additionalStyling}`}\n >\n <!-- Limit Display to use \"9+\"\" if total notification exceed 9 -->\n ${isOneDigitNotification\n ? total\n : html`<span>9<span class=\"pl-px\">+</span></span>`}\n </div>\n `\n }\n\n override async connectedCallback() {\n super.connectedCallback()\n }\n\n render() {\n return html`\n <div class=\"border-b border-grey-300 text-grey-600\">\n <li\n class=\"font-bold flex flex-shrink-0 flex-col text-left text-sm mb-4\"\n >\n <!-- Cart -->\n <!--<a href={this.cartUrl} class=\"header-account-menu--item\">\n <div class=\"icon icon-md icon-blue-600\">{unsafeSVG(getFontAwesomeIcon('fas', 'cart-shopping'))}</div>\n <p class=\"header-account-menu--title\">Keranjang</p>\n </a> -->\n <!-- Manage Account -->\n <a href=${this.manageAccountUrl} class=\"header-account-menu--item\">\n <div class=\"icon icon-md icon-blue-600\">\n ${unsafeSVG(getFontAwesomeIcon('fas', 'user-gear'))}\n </div>\n <p class=\"header-account-menu--title\">Kelola Akun</p>\n </a>\n <!-- Transaction -->\n <!-- <a href={this.ordersUrl} class=\"header-account-menu--item\">\n <div class=\"icon icon-md icon-blue-600\">{unsafeSVG(getFontAwesomeIcon('fas', 'arrow-right-arrow-left'))}</div>\n <p class=\"header-account-menu--title\">Transaksi</p>\n </a> -->\n <!-- Read Later -->\n <a href=${this.readLaterUrl} class=\"header-account-menu--item\">\n <div class=\"icon icon-md icon-blue-600\">\n ${unsafeSVG(getFontAwesomeIcon('fas', 'bookmark'))}\n </div>\n <p class=\"header-account-menu--title\">Baca Nanti</p>\n </a>\n <!-- Logout -->\n <a href=${this.logoutUrl} class=\"header-account-menu--item\">\n <div class=\"icon icon-md icon-blue-600\">\n ${unsafeSVG(getFontAwesomeIcon('fas', 'right-from-bracket'))}\n </div>\n <p class=\"header-account-menu--title\">Keluar</p>\n </a>\n </li>\n </div>\n `\n }\n}\n"]}
1
+ {"version":3,"file":"KompasHeaderAccountMenu.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account-menu/KompasHeaderAccountMenu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAA;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AAGjD,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;IAAhD;;QAkDI,qBAAgB,GAAY,KAAK,CAAA;QAE1C;;WAEG;QACyB,eAAU,GAAG,+BAA+B,CAAA;QAExE;;WAEG;QACyB,uBAAkB,GAC5C,4DAA4D,CAAA;QAE9D;;WAEG;QACyB,mBAAc,GACxC,kCAAkC,CAAA;QAEpC,sBAAsB;QACd,sBAAiB,GAAG,CAAC,KAAa,EAAE,EAAE;YAC5C,IAAI,CAAC,KAAK,EAAE;gBACV,OAAO,IAAI,CAAA,EAAE,CAAA;aACd;YAED,MAAM,sBAAsB,GAAG,KAAK,GAAG,CAAC,IAAI,KAAK,IAAI,CAAC,CAAA;YACtD,MAAM,iBAAiB,GAAG,sBAAsB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAA;YAEhE,OAAO,IAAI,CAAA;;gBAEC,0CAA0C,iBAAiB,EAAE;;;UAGnE,sBAAsB;gBACtB,CAAC,CAAC,KAAK;gBACP,CAAC,CAAC,IAAI,CAAA,4CAA4C;;KAEvD,CAAA;QACH,CAAC,CAAA;IA+CH,CAAC;IA7CU,KAAK,CAAC,iBAAiB;QAC9B,KAAK,CAAC,iBAAiB,EAAE,CAAA;IAC3B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;oBAWK,IAAI,CAAC,kBAAkB;;gBAE3B,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;;;;;;;;;;oBAU7C,IAAI,CAAC,cAAc;;gBAEvB,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;;;;;oBAK5C,IAAI,CAAC,UAAU;;gBAEnB,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,oBAAoB,CAAC,CAAC;;;;;;KAMrE,CAAA;IACH,CAAC;;AArIM,8BAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0CF;IACD,QAAQ;CACT,CAAA;AAIQ;IAAR,KAAK,EAAE;iEAAkC;AAKd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DAA6C;AAK5C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mEACmC;AAKlC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+DACS;AAnEzB,uBAAuB;IADnC,aAAa,CAAC,8BAA8B,CAAC;GACjC,uBAAuB,CAuInC;SAvIY,uBAAuB","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, state, property } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\n\n@customElement('kompasid-header-account-menu')\nexport class KompasHeaderAccountMenu extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n .header-account-menu--item {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0.75rem;\n transition: background-color 0.3s ease-in-out;\n border-radius: 0.25rem;\n }\n .header-account-menu--item:hover {\n background-color: #e5e7eb; /* Assuming grey-200 */\n }\n .header-account-menu--title {\n flex-grow: 1;\n font-size: 1rem;\n font-weight: bold;\n margin-left: 1rem;\n }\n .header-account-menu--notification-info {\n font-size: 0.875rem;\n border-radius: 1.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: rgb(255, 122, 0);\n color: #f7fafc;\n height: 1.75rem;\n width: 1.75rem;\n }\n .icon {\n margin-top: auto;\n margin-bottom: auto;\n color: rgb(0 85 154);\n }\n .icon svg {\n width: 20px;\n height: 20px;\n }\n .\n `,\n TWStyles,\n ]\n\n kompasKring?: HTMLInputElement\n\n @state() clipboardClicked: boolean = false\n\n /**\n * Logout Url\n */\n @property({ type: String }) logout_url = 'https://auth.kompas.id/logout'\n\n /**\n * Manage Account Url\n */\n @property({ type: String }) manage_account_url =\n 'https://manage-account.kompas.id/manage-account/my-account'\n\n /**\n * Read Later Url\n */\n @property({ type: String }) read_later_url =\n 'https://www.kompas.id/baca-nanti'\n\n // Render Total Bubble\n private renderTotalBubble = (total: number) => {\n if (!total) {\n return html``\n }\n\n const isOneDigitNotification = total > 0 && total <= 9\n const additionalStyling = isOneDigitNotification ? '' : 'pl-0.5'\n\n return html`\n <div\n class=${`header-account-menu--notification-info ${additionalStyling}`}\n >\n <!-- Limit Display to use \"9+\"\" if total notification exceed 9 -->\n ${isOneDigitNotification\n ? total\n : html`<span>9<span class=\"pl-px\">+</span></span>`}\n </div>\n `\n }\n\n override async connectedCallback() {\n super.connectedCallback()\n }\n\n render() {\n return html`\n <div class=\"border-b border-grey-300 text-grey-600\">\n <li\n class=\"font-bold flex flex-shrink-0 flex-col text-left text-sm mb-4\"\n >\n <!-- Cart -->\n <!--<a href={this.cartUrl} class=\"header-account-menu--item\">\n <div class=\"icon icon-md icon-blue-600\">{unsafeSVG(getFontAwesomeIcon('fas', 'cart-shopping'))}</div>\n <p class=\"header-account-menu--title\">Keranjang</p>\n </a> -->\n <!-- Manage Account -->\n <a href=${this.manage_account_url} class=\"header-account-menu--item\">\n <div class=\"icon icon-md icon-blue-600\">\n ${unsafeSVG(getFontAwesomeIcon('fas', 'user-gear'))}\n </div>\n <p class=\"header-account-menu--title\">Kelola Akun</p>\n </a>\n <!-- Transaction -->\n <!-- <a href={this.ordersUrl} class=\"header-account-menu--item\">\n <div class=\"icon icon-md icon-blue-600\">{unsafeSVG(getFontAwesomeIcon('fas', 'arrow-right-arrow-left'))}</div>\n <p class=\"header-account-menu--title\">Transaksi</p>\n </a> -->\n <!-- Read Later -->\n <a href=${this.read_later_url} class=\"header-account-menu--item\">\n <div class=\"icon icon-md icon-blue-600\">\n ${unsafeSVG(getFontAwesomeIcon('fas', 'bookmark'))}\n </div>\n <p class=\"header-account-menu--title\">Baca Nanti</p>\n </a>\n <!-- Logout -->\n <a href=${this.logout_url} class=\"header-account-menu--item\">\n <div class=\"icon icon-md icon-blue-600\">\n ${unsafeSVG(getFontAwesomeIcon('fas', 'right-from-bracket'))}\n </div>\n <p class=\"header-account-menu--title\">Keluar</p>\n </a>\n </li>\n </div>\n `\n }\n}\n"]}
package/dist/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.d.ts CHANGED
@@ -9,7 +9,6 @@ export declare class KompasHeaderAccountProfile extends LitElement {
9
9
  userInitialName: string;
10
10
  userData: User;
11
11
  subscriptionUrl: string;
12
- totalGracePeriod: number;
13
12
  openFrom: string;
14
13
  /**
15
14
  * Props For Grace Period Tracker
package/dist/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.js CHANGED
@@ -14,7 +14,6 @@ let KompasHeaderAccountProfile = class KompasHeaderAccountProfile extends LitEle
14
14
  this.userInitialName = '';
15
15
  this.userData = {};
16
16
  this.subscriptionUrl = '';
17
- this.totalGracePeriod = 0;
18
17
  this.openFrom = '';
19
18
  /**
20
19
  * Props For Grace Period Tracker
@@ -244,9 +243,6 @@ __decorate([
244
243
  __decorate([
245
244
  property({ type: String })
246
245
  ], KompasHeaderAccountProfile.prototype, "subscriptionUrl", void 0);
247
- __decorate([
248
- property({ type: Number })
249
- ], KompasHeaderAccountProfile.prototype, "totalGracePeriod", void 0);
250
246
  __decorate([
251
247
  property({ type: String })
252
248
  ], KompasHeaderAccountProfile.prototype, "openFrom", void 0);
package/dist/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"KompasHeaderAccountProfile.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { format, addDays, differenceInDays } from 'date-fns'\nimport { id } from 'date-fns/locale/id'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { User } from '../kompasid-header-account/types.js'\nimport '../kompasid-grace-period/KompasGracePeriod.js'\n\n@customElement('kompasid-header-account-profile')\nexport class KompasHeaderAccountProfile extends LitElement {\n static styles = [\n css`\n .header-account--membership-icon {\n position: absolute;\n bottom: -2px;\n right: -2px;\n }\n `,\n TWStyles,\n ]\n\n /**\n * Props\n */\n @property({ type: String }) userInitialName = ''\n @property({ type: Object }) userData = {} as User\n @property({ type: String }) subscriptionUrl = ''\n @property({ type: Number }) totalGracePeriod = 0\n @property({ type: String }) openFrom = ''\n /**\n * Props For Grace Period Tracker\n */\n @property({ type: String }) paywall_location = ''\n @property({ type: String }) paywall_subscription_package = ''\n @property({ type: Number }) paywall_subscription_id = 0\n @property({ type: Number }) paywall_subscription_price = 0\n @property({ type: Number }) paywall_position = 0\n @property({ type: String }) tracker_page_type = ''\n @property({ type: String }) tracker_content_id = ''\n @property({ type: String }) tracker_content_title = ''\n @property({ type: String }) tracker_content_categories = ''\n @property({ type: String }) tracker_content_type = ''\n @property({ type: String }) tracker_user_type = ''\n @property({ type: String }) tracker_subscription_status = ''\n @property({ type: String }) tracker_page_domain = ''\n @property({ type: String }) tracker_metered_wall_type = ''\n @property({ type: Number }) tracker_metered_wall_balance = 0\n\n /**\n * State\n */\n @state() private maxGracePeriod = 7\n\n formatDate(date: Date | string) {\n return format(new Date(date), 'dd MMM yyyy', { locale: id })\n }\n\n private renderSkeletonLoading() {\n return html`\n <div>\n <div class=\"flex flex-row mb-5 items-center gap-4 leading-none\">\n <div\n class=\"bg-grey-300 py-5 rounded-full h-16 w-16 animate-pulse\"\n ></div>\n <div class=\"flex flex-col text-left w-40 gap-y-2\">\n <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n </div>\n </div>\n <div>\n <div class=\"h-6 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n </div>\n </div>\n `\n }\n\n private renderProfileContent() {\n /**\n * Subs Button Element\n */\n const subscribeButton = () => {\n if (this.userData.isMembership) {\n return html``\n }\n const handleSubscribe = () => {\n const openFromValue = this.openFrom || 'Sidebar_Menu'\n window.location.href = `${this.subscriptionUrl}?open_from=${openFromValue}`\n }\n\n return html`\n <div class=\"w-full\">\n <button\n @click=${handleSubscribe}\n class=\"w-full rounded-lg px-4 py-3 mt-4 h-10 flex justify-center items-center bg-brand-1 text-grey-100 font-bold text-base focus:outline-none\"\n >\n Berlangganan Sekarang\n </button>\n </div>\n `\n }\n /**\n * membership icon element, show if isMebership has truthy value\n */\n const membershipIcon = () => {\n if (!this.userData?.isMembership) {\n return html``\n }\n\n return html`\n <div>\n <img\n class=\"header-account--membership-icon h-6 w-6\"\n src=\"https://cdn-www.kompas.id/global-header/crown-royal-blue-60.svg\"\n alt=\"membership-crown-icon\"\n />\n </div>\n `\n }\n\n /**\n * Active Info Element\n */\n\n const activeInfoTemplate = () => {\n const { isGracePeriod, totalGracePeriod, expired } = this.userData\n\n let result = html`Tidak Berlangganan` // default\n let endGracePeriodDate = ''\n\n const nowDate = new Date()\n const isoDateString = expired.replace(' ', 'T')\n const expiredDate = new Date(isoDateString)\n const subsDaysLeft: number = differenceInDays(expiredDate, nowDate) + 1 // differenceInDays + 1 jika tanggal bertepatan di hari yang sama\n\n const gracePeriodCard = () => {\n if (isGracePeriod) {\n const totalGraceSubs =\n this.maxGracePeriod - Math.max(totalGracePeriod, 0)\n endGracePeriodDate = this.formatDate(\n addDays(\n new Date(),\n totalGracePeriod > this.maxGracePeriod ? 0 : totalGraceSubs\n )\n )\n }\n const label = 'Periode Masa Tenggang'\n return html`\n <div class=\"text-orange-500 gracePeriodCard\">\n <span>${label}</span>\n <p class=\"font-bold\">hingga ${endGracePeriodDate}</p>\n </div>\n `\n }\n\n const lessThan3daysCard = () => {\n const label = 'Aktif Berlangganan'\n return html`\n <div class=\"lessThan3daysCard\">\n <span> ${label} </span>\n <p class=\"font-bold\">Berakhir ${subsDaysLeft} hari lagi</p>\n </div>\n `\n }\n\n const moreThan3daysCard = () => {\n const formattedExpired = this.formatDate(expired)\n const label = 'Aktif Berlangganan'\n return html`\n <div class=\"moreThan3daysCard\">\n <span>${label}</span>\n <p class=\"font-bold\">hingga ${formattedExpired}</p>\n </div>\n `\n }\n\n if (isGracePeriod && totalGracePeriod > 0) {\n result = gracePeriodCard()\n } else if (subsDaysLeft >= 0 && subsDaysLeft <= 3) {\n result = lessThan3daysCard()\n } else if (subsDaysLeft > 3) {\n result = moreThan3daysCard()\n }\n\n return html`<p class=\"text-sm text-grey-600 ${subsDaysLeft}-days-left\">\n ${result}\n </p>`\n }\n\n return html`\n <div\n class=\"active-info flex flex-col items-start leading-none text-left font-sans\"\n >\n <div class=\"flex flex-row items-center gap-4\">\n <div\n class=\"flex bg-brand-1 flex-shrink-0 p-5 rounded-full h-16 w-16 items-center justify-center relative\"\n >\n <span class=\"capitalize text-2xl text-grey-100 font-bold\">\n ${this.userInitialName}\n </span>\n ${membershipIcon()}\n </div>\n\n <div class=\"flex flex-col text-left\">\n <p class=\"capitalize font-bold text-base text-blue-600\">\n ${this.userData.userName}\n </p>\n ${activeInfoTemplate()}\n </div>\n </div>\n\n ${this.userData?.isGracePeriod\n ? html` <div class=\"mt-4 kompasid-grace-period\">\n <kompasid-grace-period\n totalGracePeriod=${this.userData.totalGracePeriod}\n isColumn=\"true\"\n isShowButton=\"true\"\n isBackgroundOnContentOnly=\"true\"\n paywall_location=${this.paywall_location}\n paywall_subscription_package=${this\n .paywall_subscription_package}\n paywall_subscription_id=${this.paywall_subscription_id}\n paywall_subscription_price=${this.paywall_subscription_price}\n paywall_position=${this.paywall_position}\n tracker_page_type=${this.tracker_page_type}\n tracker_content_id=${this.tracker_content_id}\n tracker_content_title=${this.tracker_content_title}\n tracker_content_categories=${this.tracker_content_categories}\n tracker_content_type=${this.tracker_content_type}\n tracker_user_type=${this.tracker_user_type}\n tracker_subscription_status=${this.tracker_subscription_status}\n tracker_page_domain=${this.tracker_page_domain}\n tracker_metered_wall_type=${this.tracker_metered_wall_type}\n tracker_metered_wall_balance=${this\n .tracker_metered_wall_balance}\n ></kompasid-grace-period>\n </div>`\n : subscribeButton()}\n </div>\n `\n }\n\n override async connectedCallback() {\n super.connectedCallback()\n }\n\n render() {\n return html`\n <div class=\"flex flex-shrink-0 flex-col p-4\">\n ${!this.userData\n ? this.renderSkeletonLoading()\n : this.renderProfileContent()}\n </div>\n <hr class=\"border-grey-300 mx-4\" />\n `\n }\n}\n"]}
1
+ {"version":3,"file":"KompasHeaderAccountProfile.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { format, addDays, differenceInDays } from 'date-fns'\nimport { id } from 'date-fns/locale/id'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { User } from '../kompasid-header-account/types.js'\nimport '../kompasid-grace-period/KompasGracePeriod.js'\n\n@customElement('kompasid-header-account-profile')\nexport class KompasHeaderAccountProfile extends LitElement {\n static styles = [\n css`\n .header-account--membership-icon {\n position: absolute;\n bottom: -2px;\n right: -2px;\n }\n `,\n TWStyles,\n ]\n\n /**\n * Props\n */\n @property({ type: String }) userInitialName = ''\n @property({ type: Object }) userData = {} as User\n @property({ type: String }) subscriptionUrl = ''\n @property({ type: String }) openFrom = ''\n /**\n * Props For Grace Period Tracker\n */\n @property({ type: String }) paywall_location = ''\n @property({ type: String }) paywall_subscription_package = ''\n @property({ type: Number }) paywall_subscription_id = 0\n @property({ type: Number }) paywall_subscription_price = 0\n @property({ type: Number }) paywall_position = 0\n @property({ type: String }) tracker_page_type = ''\n @property({ type: String }) tracker_content_id = ''\n @property({ type: String }) tracker_content_title = ''\n @property({ type: String }) tracker_content_categories = ''\n @property({ type: String }) tracker_content_type = ''\n @property({ type: String }) tracker_user_type = ''\n @property({ type: String }) tracker_subscription_status = ''\n @property({ type: String }) tracker_page_domain = ''\n @property({ type: String }) tracker_metered_wall_type = ''\n @property({ type: Number }) tracker_metered_wall_balance = 0\n\n /**\n * State\n */\n @state() private maxGracePeriod = 7\n\n formatDate(date: Date | string) {\n return format(new Date(date), 'dd MMM yyyy', { locale: id })\n }\n\n private renderSkeletonLoading() {\n return html`\n <div>\n <div class=\"flex flex-row mb-5 items-center gap-4 leading-none\">\n <div\n class=\"bg-grey-300 py-5 rounded-full h-16 w-16 animate-pulse\"\n ></div>\n <div class=\"flex flex-col text-left w-40 gap-y-2\">\n <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n </div>\n </div>\n <div>\n <div class=\"h-6 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n </div>\n </div>\n `\n }\n\n private renderProfileContent() {\n /**\n * Subs Button Element\n */\n const subscribeButton = () => {\n if (this.userData.isMembership) {\n return html``\n }\n const handleSubscribe = () => {\n const openFromValue = this.openFrom || 'Sidebar_Menu'\n window.location.href = `${this.subscriptionUrl}?open_from=${openFromValue}`\n }\n\n return html`\n <div class=\"w-full\">\n <button\n @click=${handleSubscribe}\n class=\"w-full rounded-lg px-4 py-3 mt-4 h-10 flex justify-center items-center bg-brand-1 text-grey-100 font-bold text-base focus:outline-none\"\n >\n Berlangganan Sekarang\n </button>\n </div>\n `\n }\n /**\n * membership icon element, show if isMebership has truthy value\n */\n const membershipIcon = () => {\n if (!this.userData?.isMembership) {\n return html``\n }\n\n return html`\n <div>\n <img\n class=\"header-account--membership-icon h-6 w-6\"\n src=\"https://cdn-www.kompas.id/global-header/crown-royal-blue-60.svg\"\n alt=\"membership-crown-icon\"\n />\n </div>\n `\n }\n\n /**\n * Active Info Element\n */\n\n const activeInfoTemplate = () => {\n const { isGracePeriod, totalGracePeriod, expired } = this.userData\n\n let result = html`Tidak Berlangganan` // default\n let endGracePeriodDate = ''\n\n const nowDate = new Date()\n const isoDateString = expired.replace(' ', 'T')\n const expiredDate = new Date(isoDateString)\n const subsDaysLeft: number = differenceInDays(expiredDate, nowDate) + 1 // differenceInDays + 1 jika tanggal bertepatan di hari yang sama\n\n const gracePeriodCard = () => {\n if (isGracePeriod) {\n const totalGraceSubs =\n this.maxGracePeriod - Math.max(totalGracePeriod, 0)\n endGracePeriodDate = this.formatDate(\n addDays(\n new Date(),\n totalGracePeriod > this.maxGracePeriod ? 0 : totalGraceSubs\n )\n )\n }\n const label = 'Periode Masa Tenggang'\n return html`\n <div class=\"text-orange-500 gracePeriodCard\">\n <span>${label}</span>\n <p class=\"font-bold\">hingga ${endGracePeriodDate}</p>\n </div>\n `\n }\n\n const lessThan3daysCard = () => {\n const label = 'Aktif Berlangganan'\n return html`\n <div class=\"lessThan3daysCard\">\n <span> ${label} </span>\n <p class=\"font-bold\">Berakhir ${subsDaysLeft} hari lagi</p>\n </div>\n `\n }\n\n const moreThan3daysCard = () => {\n const formattedExpired = this.formatDate(expired)\n const label = 'Aktif Berlangganan'\n return html`\n <div class=\"moreThan3daysCard\">\n <span>${label}</span>\n <p class=\"font-bold\">hingga ${formattedExpired}</p>\n </div>\n `\n }\n\n if (isGracePeriod && totalGracePeriod > 0) {\n result = gracePeriodCard()\n } else if (subsDaysLeft >= 0 && subsDaysLeft <= 3) {\n result = lessThan3daysCard()\n } else if (subsDaysLeft > 3) {\n result = moreThan3daysCard()\n }\n\n return html`<p class=\"text-sm text-grey-600 ${subsDaysLeft}-days-left\">\n ${result}\n </p>`\n }\n\n return html`\n <div\n class=\"active-info flex flex-col items-start leading-none text-left font-sans\"\n >\n <div class=\"flex flex-row items-center gap-4\">\n <div\n class=\"flex bg-brand-1 flex-shrink-0 p-5 rounded-full h-16 w-16 items-center justify-center relative\"\n >\n <span class=\"capitalize text-2xl text-grey-100 font-bold\">\n ${this.userInitialName}\n </span>\n ${membershipIcon()}\n </div>\n\n <div class=\"flex flex-col text-left\">\n <p class=\"capitalize font-bold text-base text-blue-600\">\n ${this.userData.userName}\n </p>\n ${activeInfoTemplate()}\n </div>\n </div>\n\n ${this.userData?.isGracePeriod\n ? html` <div class=\"mt-4 kompasid-grace-period\">\n <kompasid-grace-period\n totalGracePeriod=${this.userData.totalGracePeriod}\n isColumn=\"true\"\n isShowButton=\"true\"\n isBackgroundOnContentOnly=\"true\"\n paywall_location=${this.paywall_location}\n paywall_subscription_package=${this\n .paywall_subscription_package}\n paywall_subscription_id=${this.paywall_subscription_id}\n paywall_subscription_price=${this.paywall_subscription_price}\n paywall_position=${this.paywall_position}\n tracker_page_type=${this.tracker_page_type}\n tracker_content_id=${this.tracker_content_id}\n tracker_content_title=${this.tracker_content_title}\n tracker_content_categories=${this.tracker_content_categories}\n tracker_content_type=${this.tracker_content_type}\n tracker_user_type=${this.tracker_user_type}\n tracker_subscription_status=${this.tracker_subscription_status}\n tracker_page_domain=${this.tracker_page_domain}\n tracker_metered_wall_type=${this.tracker_metered_wall_type}\n tracker_metered_wall_balance=${this\n .tracker_metered_wall_balance}\n ></kompasid-grace-period>\n </div>`\n : subscribeButton()}\n </div>\n `\n }\n\n override async connectedCallback() {\n super.connectedCallback()\n }\n\n render() {\n return html`\n <div class=\"flex flex-shrink-0 flex-col p-4\">\n ${!this.userData\n ? this.renderSkeletonLoading()\n : this.renderProfileContent()}\n </div>\n <hr class=\"border-grey-300 mx-4\" />\n `\n }\n}\n"]}
package/dist/src/components/kompasid-paywall/KompasPaywall.js CHANGED
@@ -93,6 +93,7 @@ let KompasPaywall = class KompasPaywall extends LitElement {
93
93
  text: 'Lihat Paket Lainnya',
94
94
  url: 'https://www.kompas.id/berlangganan/v2',
95
95
  },
96
+ typeVariant: '',
96
97
  },
97
98
  packages: {
98
99
  title: 'Sekali bayar, tanpa perpanjang otomatis',
@@ -281,6 +282,9 @@ let KompasPaywall = class KompasPaywall extends LitElement {
281
282
  ? json[defaultType][typeContextual].content
282
283
  : json[defaultType].content,
283
284
  cta: json[defaultType].cta,
285
+ typeVariant: json[defaultType][typeContextual]
286
+ ? json[defaultType][typeContextual].variant
287
+ : '',
284
288
  },
285
289
  packages: {
286
290
  ...this.mockResult.packages,