@kompasid/lit-web-components 0.8.20 → 0.8.21

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 (28) hide show
  1. package/demo/index.html +8 -2
  2. package/dist/src/components/kompasid-header-account/KompasHeaderAccount.d.ts +1 -1
  3. package/dist/src/components/kompasid-header-account/KompasHeaderAccount.js +19 -20
  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 +0 -4
  6. package/dist/src/components/kompasid-header-account-menu/KompasHeaderAccountMenu.js +0 -7
  7. package/dist/src/components/kompasid-header-account-menu/KompasHeaderAccountMenu.js.map +1 -1
  8. package/dist/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.js +2 -2
  9. package/dist/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.js.map +1 -1
  10. package/dist/src/components/kompasid-header-notification/KompasHeaderNotification.d.ts +1 -0
  11. package/dist/src/components/kompasid-header-notification/KompasHeaderNotification.js +18 -4
  12. package/dist/src/components/kompasid-header-notification/KompasHeaderNotification.js.map +1 -1
  13. package/dist/src/utils/getHeaderTheme.d.ts +3 -0
  14. package/dist/src/utils/getHeaderTheme.js +17 -0
  15. package/dist/src/utils/getHeaderTheme.js.map +1 -0
  16. package/dist/tailwind/tailwind.js +13 -16
  17. package/dist/tailwind/tailwind.js.map +1 -1
  18. package/dist/tsconfig.tsbuildinfo +1 -1
  19. package/package.json +2 -1
  20. package/src/components/kompasid-header-account/KompasHeaderAccount.ts +18 -18
  21. package/src/components/kompasid-header-account/readme.md +46 -0
  22. package/src/components/kompasid-header-account-menu/KompasHeaderAccountMenu.ts +0 -5
  23. package/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.ts +2 -2
  24. package/src/components/kompasid-header-notification/KompasHeaderNotification.ts +16 -4
  25. package/src/components/kompasid-header-notification/readme.md +3 -0
  26. package/src/utils/getHeaderTheme.ts +19 -0
  27. package/tailwind/tailwind.css +4 -16
  28. package/tailwind/tailwind.ts +13 -16
package/demo/index.html CHANGED
@@ -104,6 +104,10 @@
104
104
  const totalGracePeriod = '5'
105
105
  const productId = 9802032
106
106
 
107
+ const urlParams = new URLSearchParams(window.location.search);
108
+ const headerColor = urlParams.get('header_color') || '#0356a8'
109
+ const headerTheme = urlParams.get('header_theme') || 'default'
110
+
107
111
  const getCookie = name => {
108
112
  const value = `; ${document.cookie}`
109
113
  const parts = value.split(`; ${name}=`)
@@ -142,15 +146,16 @@
142
146
  render(
143
147
  html`
144
148
  <header
145
- style="width: 100%; position: fixed; left: 0; top: 0px; background-color: #0356a8; padding: 0.75rem; z-index: 99"
149
+ style="width: 100%; position: fixed; left: 0; top: 0px; background-color: ${headerColor}; padding: 0.75rem; z-index: 99"
146
150
  >
147
151
  <div
148
152
  style="max-width: 1280px; margin: auto; display: flex;padding:0 30px; align-items: center"
149
153
  >
150
154
  <kompasid-header-notification
151
- style="margin-left: auto; padding-right: 16px;"
155
+ style="margin-left: auto; padding-right: 8px;"
152
156
  .accessToken=${accessToken}
153
157
  .refreshToken=${refreshToken}
158
+ .theme=${headerTheme}
154
159
  domain="cloud"
155
160
  ></kompasid-header-notification>
156
161
  <kompasid-header-account
@@ -181,6 +186,7 @@
181
186
  .metered_wall_type=${meteredWallType}
182
187
  .tracker_metered_wall_balance=${trackerMeteredWallBalance}
183
188
  style="margin-left: 10px; height: 25px; display: flex; align-items: center"
189
+ .theme=${headerTheme}
184
190
  ></kompasid-header-account>
185
191
  </div>
186
192
  </header>
package/dist/src/components/kompasid-header-account/KompasHeaderAccount.d.ts CHANGED
@@ -10,7 +10,6 @@ export declare class KompasHeaderAccount extends LitElement {
10
10
  cartUrl: string;
11
11
  logoutUrl: string;
12
12
  manageAccountUrl: string;
13
- notificationTotal: number;
14
13
  notificationUrl: string;
15
14
  ordersUrl: string;
16
15
  readLaterUrl: string;
@@ -18,6 +17,7 @@ export declare class KompasHeaderAccount extends LitElement {
18
17
  sidebarTopSpacing: number;
19
18
  subscriptionUrl: string;
20
19
  totalGracePeriod: number;
20
+ theme: 'default' | 'primary';
21
21
  /**
22
22
  * Props For Grace Period Tracker
23
23
  */
package/dist/src/components/kompasid-header-account/KompasHeaderAccount.js CHANGED
@@ -4,6 +4,7 @@ import { customElement, property, state } from 'lit/decorators.js';
4
4
  import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
5
5
  import { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js';
6
6
  import { TWStyles } from '../../../tailwind/tailwind.js';
7
+ import { getHeaderTheme } from '../../utils/getHeaderTheme.js';
7
8
  import '../kompasid-header-account-profile/KompasHeaderAccountProfile.js';
8
9
  import '../kompasid-header-account-help-center/KompasHeaderAccountHelpCenter.js';
9
10
  import '../kompasid-header-account-menu/KompasHeaderAccountMenu.js';
@@ -15,7 +16,6 @@ let KompasHeaderAccount = class KompasHeaderAccount extends LitElement {
15
16
  this.cartUrl = '';
16
17
  this.logoutUrl = '';
17
18
  this.manageAccountUrl = '';
18
- this.notificationTotal = 0;
19
19
  this.notificationUrl = '';
20
20
  this.ordersUrl = '';
21
21
  this.readLaterUrl = '';
@@ -23,6 +23,7 @@ let KompasHeaderAccount = class KompasHeaderAccount extends LitElement {
23
23
  this.sidebarTopSpacing = 0;
24
24
  this.subscriptionUrl = '';
25
25
  this.totalGracePeriod = 0;
26
+ this.theme = 'primary';
26
27
  /**
27
28
  * Props For Grace Period Tracker
28
29
  */
@@ -52,11 +53,6 @@ let KompasHeaderAccount = class KompasHeaderAccount extends LitElement {
52
53
  : '';
53
54
  }
54
55
  account() {
55
- const notificationIndicator = () => {
56
- if (!this.notificationTotal)
57
- return html ``;
58
- return html `<div class="header-account--notification-indicator"></div>`;
59
- };
60
56
  const membershipIcon = () => {
61
57
  var _a;
62
58
  if (!((_a = this.formattedUserData) === null || _a === void 0 ? void 0 : _a.isMembership))
@@ -64,7 +60,7 @@ let KompasHeaderAccount = class KompasHeaderAccount extends LitElement {
64
60
  return html `
65
61
  <div>
66
62
  <img
67
- class="header-account--membership-icon h-2.5 w-2.5"
63
+ class="header-account--membership-icon h-3 w-3"
68
64
  src="https://cdn-www.kompas.id/global-header/crown-royal-blue-60.svg"
69
65
  alt="membership-crown-icon"
70
66
  />
@@ -80,18 +76,22 @@ let KompasHeaderAccount = class KompasHeaderAccount extends LitElement {
80
76
  ></div>`
81
77
  : html `
82
78
  <div
83
- class="flex bg-grey-100 rounded-full h-6 w-6 items-center justify-center relative"
79
+ class="flex rounded-full h-6 w-6 items-center justify-center relative ${getHeaderTheme({ background: this.theme })}"
84
80
  >
85
- <span class="capitalize text-xxs text-blue-600 font-bold"
86
- >${this.getInitialUserName()}</span
81
+ <span
82
+ class="capitalize text-xxs font-bold ${getHeaderTheme({
83
+ text: this.theme,
84
+ })}"
87
85
  >
88
- ${notificationIndicator()} ${membershipIcon()}
86
+ ${this.getInitialUserName()}
87
+ </span>
88
+ ${membershipIcon()}
89
89
  </div>
90
90
  `}
91
91
  <div
92
- class="ml-1 text-white icon-xs ${this.isShowSidebar
92
+ class="ml-1 icon-xs ${this.isShowSidebar
93
93
  ? 'chevron-down'
94
- : 'rotate-180'}"
94
+ : 'rotate-180'} ${getHeaderTheme({ icon: this.theme })}"
95
95
  >
96
96
  ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))}
97
97
  </div>
@@ -139,7 +139,6 @@ let KompasHeaderAccount = class KompasHeaderAccount extends LitElement {
139
139
  .manage-account-url=${this.manageAccountUrl}
140
140
  .logout-url=${this.logoutUrl}
141
141
  .notification-url=${this.notificationUrl}
142
- .notification-total=${this.notificationTotal}
143
142
  .orders-url=${this.ordersUrl}
144
143
  .read-later-url=${this.readLaterUrl}
145
144
  ></kompasid-header-account-menu>
@@ -196,8 +195,8 @@ KompasHeaderAccount.styles = [
196
195
 
197
196
  .header-account--membership-icon {
198
197
  position: absolute;
199
- bottom: -2px;
200
- right: -2px;
198
+ bottom: -2.5px;
199
+ right: -2.5px;
201
200
  }
202
201
 
203
202
  .header-account--notification-indicator {
@@ -212,7 +211,7 @@ KompasHeaderAccount.styles = [
212
211
  }
213
212
 
214
213
  .icon-xs svg {
215
- width: 12px;
214
+ width: 11px;
216
215
  height: 12px;
217
216
  }
218
217
 
@@ -265,9 +264,6 @@ __decorate([
265
264
  __decorate([
266
265
  property({ type: String })
267
266
  ], KompasHeaderAccount.prototype, "manageAccountUrl", void 0);
268
- __decorate([
269
- property({ type: Number })
270
- ], KompasHeaderAccount.prototype, "notificationTotal", void 0);
271
267
  __decorate([
272
268
  property({ type: String })
273
269
  ], KompasHeaderAccount.prototype, "notificationUrl", void 0);
@@ -289,6 +285,9 @@ __decorate([
289
285
  __decorate([
290
286
  property({ type: Number })
291
287
  ], KompasHeaderAccount.prototype, "totalGracePeriod", void 0);
288
+ __decorate([
289
+ property({ type: String })
290
+ ], KompasHeaderAccount.prototype, "theme", void 0);
292
291
  __decorate([
293
292
  property({ type: String })
294
293
  ], KompasHeaderAccount.prototype, "paywall_location", 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 { 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 '../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: -2px;\n right: -2px;\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: 12px;\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\n formattedUserData: User = {} as User\n\n @property({ type: String }) cartUrl = ''\n @property({ type: String }) logoutUrl = ''\n @property({ type: String }) manageAccountUrl = ''\n @property({ type: Number }) notificationTotal = 0\n @property({ type: String }) notificationUrl = ''\n @property({ type: String }) ordersUrl = ''\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\n\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 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 account() {\n const notificationIndicator = () => {\n if (!this.notificationTotal) return html``\n return html`<div class=\"header-account--notification-indicator\"></div>`\n }\n\n const membershipIcon = () => {\n if (!this.formattedUserData?.isMembership) return html``\n return html`\n <div>\n <img\n class=\"header-account--membership-icon h-2.5 w-2.5\"\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 bg-grey-100 rounded-full h-6 w-6 items-center justify-center relative\"\n >\n <span class=\"capitalize text-xxs text-blue-600 font-bold\"\n >${this.getInitialUserName()}</span\n >\n ${notificationIndicator()} ${membershipIcon()}\n </div>\n `}\n <div\n class=\"ml-1 text-white icon-xs ${this.isShowSidebar\n ? 'chevron-down'\n : 'rotate-180'}\"\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 .notification-total=${this.notificationTotal}\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 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 { 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/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\n formattedUserData: User = {} as User\n\n @property({ type: String }) cartUrl = ''\n @property({ type: String }) logoutUrl = ''\n @property({ type: String }) manageAccountUrl = ''\n @property({ type: String }) notificationUrl = ''\n @property({ type: String }) ordersUrl = ''\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\n @property({ type: String }) theme: 'default' | 'primary' = 'primary'\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 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 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 ${getHeaderTheme(\n { background: this.theme }\n )}\"\n >\n <span\n class=\"capitalize text-xxs font-bold ${getHeaderTheme({\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'} ${getHeaderTheme({ 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 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
@@ -27,10 +27,6 @@ export declare class KompasHeaderAccountMenu extends LitElement {
27
27
  * Read Later Url
28
28
  */
29
29
  readLaterUrl: string;
30
- /**
31
- * Total Notification Count
32
- */
33
- notificationTotal: number;
34
30
  private renderTotalBubble;
35
31
  connectedCallback(): Promise<void>;
36
32
  render(): import("lit").TemplateResult<1>;
package/dist/src/components/kompasid-header-account-menu/KompasHeaderAccountMenu.js CHANGED
@@ -32,10 +32,6 @@ let KompasHeaderAccountMenu = class KompasHeaderAccountMenu extends LitElement {
32
32
  * Read Later Url
33
33
  */
34
34
  this.readLaterUrl = 'https://www.kompas.id/baca-nanti';
35
- /**
36
- * Total Notification Count
37
- */
38
- this.notificationTotal = 0;
39
35
  // Render Total Bubble
40
36
  this.renderTotalBubble = (total) => {
41
37
  if (!total) {
@@ -167,9 +163,6 @@ __decorate([
167
163
  __decorate([
168
164
  property({ type: String })
169
165
  ], KompasHeaderAccountMenu.prototype, "readLaterUrl", void 0);
170
- __decorate([
171
- property({ type: Number })
172
- ], KompasHeaderAccountMenu.prototype, "notificationTotal", void 0);
173
166
  KompasHeaderAccountMenu = __decorate([
174
167
  customElement('kompasid-header-account-menu')
175
168
  ], 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":"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","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 /**\n * Total Notification Count\n */\n @property({ type: Number }) notificationTotal: number = 0\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,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"]}
package/dist/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.js CHANGED
@@ -96,8 +96,8 @@ let KompasHeaderAccountProfile = class KompasHeaderAccountProfile extends LitEle
96
96
  return html `
97
97
  <div>
98
98
  <img
99
- class="header-account--membership-icon"
100
- src="https://cdn-www.kompas.id/global-header/crown-blue-10.svg"
99
+ class="header-account--membership-icon h-6 w-6"
100
+ src="https://cdn-www.kompas.id/global-header/crown-royal-blue-60.svg"
101
101
  alt="membership-crown-icon"
102
102
  />
103
103
  </div>
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, subDays, addDays } 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 { truncate } from '../../utils/text.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\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 as any)?.updateMembership) {\n return html``\n }\n const handleSubscribe = () => {\n window.location.href = this.subscriptionUrl\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-green-500 text-grey-100 font-bold text-base focus:outline-none\"\n >\n ${(this.userData as any)?.updateMembership}\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\"\n src=\"https://cdn-www.kompas.id/global-header/crown-blue-10.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, activeInfo } = this.userData\n\n const expiredTextColor = isGracePeriod\n ? `text-orange-500`\n : `text-grey-600`\n\n const startGracePeriodDate = this.formatDate(\n subDays(new Date().toLocaleDateString(), totalGracePeriod - 1)\n )\n const endGracePeriodDate = this.formatDate(\n addDays(\n new Date().toLocaleDateString(),\n this.maxGracePeriod - totalGracePeriod\n )\n )\n\n const text = isGracePeriod\n ? html`<span> Periode Masa Tenggang </span>\n <p class=\"font-bold\">\n ${startGracePeriodDate} - ${endGracePeriodDate}\n </p> `\n : activeInfo || ''\n\n return html`<p class=\"capitalize text-sm ${expiredTextColor}\">${text}</p>`\n }\n\n return html`<div\n class=\"active-info flex flex-col items-start leading-none text-left\"\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}</span\n >\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 ${truncate(this.userData.userName, 25)}\n </p>\n ${activeInfoTemplate()}\n </div>\n </div>\n\n ${this.userData?.isGracePeriod\n ? html`<div class=\"mt-4\">\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.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-grace-period>\n </div>`\n : subscribeButton()}\n </div>`\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 bg-blue-100 p-4\">\n ${!this.userData\n ? this.renderSkeletonLoading()\n : this.renderProfileContent()}\n </div>\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, subDays, addDays } 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 { truncate } from '../../utils/text.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\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 as any)?.updateMembership) {\n return html``\n }\n const handleSubscribe = () => {\n window.location.href = this.subscriptionUrl\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-green-500 text-grey-100 font-bold text-base focus:outline-none\"\n >\n ${(this.userData as any)?.updateMembership}\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, activeInfo } = this.userData\n\n const expiredTextColor = isGracePeriod\n ? `text-orange-500`\n : `text-grey-600`\n\n const startGracePeriodDate = this.formatDate(\n subDays(new Date().toLocaleDateString(), totalGracePeriod - 1)\n )\n const endGracePeriodDate = this.formatDate(\n addDays(\n new Date().toLocaleDateString(),\n this.maxGracePeriod - totalGracePeriod\n )\n )\n\n const text = isGracePeriod\n ? html`<span> Periode Masa Tenggang </span>\n <p class=\"font-bold\">\n ${startGracePeriodDate} - ${endGracePeriodDate}\n </p> `\n : activeInfo || ''\n\n return html`<p class=\"capitalize text-sm ${expiredTextColor}\">${text}</p>`\n }\n\n return html`<div\n class=\"active-info flex flex-col items-start leading-none text-left\"\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}</span\n >\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 ${truncate(this.userData.userName, 25)}\n </p>\n ${activeInfoTemplate()}\n </div>\n </div>\n\n ${this.userData?.isGracePeriod\n ? html`<div class=\"mt-4\">\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.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-grace-period>\n </div>`\n : subscribeButton()}\n </div>`\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 bg-blue-100 p-4\">\n ${!this.userData\n ? this.renderSkeletonLoading()\n : this.renderProfileContent()}\n </div>\n `\n }\n}\n"]}
package/dist/src/components/kompasid-header-notification/KompasHeaderNotification.d.ts CHANGED
@@ -10,6 +10,7 @@ export declare class KompasHeaderNotification extends LitElement {
10
10
  accessToken: string;
11
11
  refreshToken: string;
12
12
  domain: string;
13
+ theme: 'default' | 'primary';
13
14
  tracker_user_type: string;
14
15
  tracker_subscription_status: string;
15
16
  tracker_page_domain: string;
package/dist/src/components/kompasid-header-notification/KompasHeaderNotification.js CHANGED
@@ -7,6 +7,7 @@ import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
7
7
  import { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js';
8
8
  import { TWStyles } from '../../../tailwind/tailwind.js';
9
9
  import { customFetch } from './utils.js';
10
+ import { getHeaderTheme } from '../../utils/getHeaderTheme.js';
10
11
  let KompasHeaderNotification = class KompasHeaderNotification extends LitElement {
11
12
  constructor() {
12
13
  super();
@@ -28,6 +29,7 @@ let KompasHeaderNotification = class KompasHeaderNotification extends LitElement
28
29
  this.accessToken = '';
29
30
  this.refreshToken = '';
30
31
  this.domain = 'id'; // 'id' | 'cloud'
32
+ this.theme = 'default';
31
33
  this.tracker_user_type = '';
32
34
  this.tracker_subscription_status = '';
33
35
  this.tracker_page_domain = '';
@@ -199,7 +201,11 @@ let KompasHeaderNotification = class KompasHeaderNotification extends LitElement
199
201
  >
200
202
  ${notificationIndicator()}
201
203
  <div class="flex flex-row items-center self-center">
202
- <div class="text-white cursor-pointer mt-0.5">
204
+ <div
205
+ class="cursor-pointer mt-0.5 ${getHeaderTheme({
206
+ icon: this.theme,
207
+ })}"
208
+ >
203
209
  ${unsafeSVG(getFontAwesomeIcon('fas', 'bell', 21, 21))}
204
210
  </div>
205
211
  </div>
@@ -423,7 +429,11 @@ let KompasHeaderNotification = class KompasHeaderNotification extends LitElement
423
429
  return html `<div id="headerNotification" class="relative">
424
430
  ${this.isDataLoaded
425
431
  ? this.notificationIcon()
426
- : html `<div class="text-white cursor-pointer mt-0.5 animate-spin">
432
+ : html `<div
433
+ class="cursor-pointer mt-0.5 animate-spin ${getHeaderTheme({
434
+ icon: this.theme,
435
+ })}"
436
+ >
427
437
  ${unsafeSVG(getFontAwesomeIcon('fa', 'circle-notch', 21, 21))}
428
438
  </div>`}
429
439
  ${this.isShowDropdown ? this.notificationPopup() : ''}
@@ -443,8 +453,9 @@ KompasHeaderNotification.styles = [
443
453
  width: 0.5rem;
444
454
  background-color: #ff7a00;
445
455
  border-radius: 50%;
446
- right: -0.403rem;
447
- top: -0.281rem;
456
+ right: 0.03rem;
457
+ top: 0.09rem;
458
+ border: 1.2px solid white;
448
459
  }
449
460
 
450
461
  .break-words {
@@ -573,6 +584,9 @@ __decorate([
573
584
  __decorate([
574
585
  property({ type: String })
575
586
  ], KompasHeaderNotification.prototype, "domain", void 0);
587
+ __decorate([
588
+ property({ type: String })
589
+ ], KompasHeaderNotification.prototype, "theme", void 0);
576
590
  __decorate([
577
591
  property({ type: String })
578
592
  ], KompasHeaderNotification.prototype, "tracker_user_type", void 0);