@kompasid/lit-web-components 0.8.20 → 0.8.22

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 +2 -1
  3. package/dist/src/components/kompasid-header-account/KompasHeaderAccount.js +23 -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 +2 -0
  11. package/dist/src/components/kompasid-header-notification/KompasHeaderNotification.js +22 -4
  12. package/dist/src/components/kompasid-header-notification/KompasHeaderNotification.js.map +1 -1
  13. package/dist/src/utils/api/getHeaderTheme.d.ts +1 -0
  14. package/dist/src/utils/api/getHeaderTheme.js +30 -0
  15. package/dist/src/utils/api/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 +21 -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 +18 -4
  25. package/src/components/kompasid-header-notification/readme.md +3 -0
  26. package/src/utils/api/getHeaderTheme.ts +32 -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
@@ -6,11 +6,11 @@ import '../kompasid-header-account-menu/KompasHeaderAccountMenu.js';
6
6
  export declare class KompasHeaderAccount extends LitElement {
7
7
  static styles: import("lit").CSSResult[];
8
8
  isShowSidebar: boolean;
9
+ setTheme: any;
9
10
  formattedUserData: User;
10
11
  cartUrl: string;
11
12
  logoutUrl: string;
12
13
  manageAccountUrl: string;
13
- notificationTotal: number;
14
14
  notificationUrl: string;
15
15
  ordersUrl: string;
16
16
  readLaterUrl: string;
@@ -18,6 +18,7 @@ export declare class KompasHeaderAccount extends LitElement {
18
18
  sidebarTopSpacing: number;
19
19
  subscriptionUrl: string;
20
20
  totalGracePeriod: number;
21
+ theme: 'default' | 'primary';
21
22
  /**
22
23
  * Props For Grace Period Tracker
23
24
  */
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/api/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 ${this.setTheme({ 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 ${this.setTheme({
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'} ${this.setTheme({ 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>
@@ -152,6 +151,7 @@ let KompasHeaderAccount = class KompasHeaderAccount extends LitElement {
152
151
  async connectedCallback() {
153
152
  super.connectedCallback();
154
153
  this.isShowSidebar = false;
154
+ this.setTheme = await getHeaderTheme();
155
155
  if (typeof this.userData === 'string') {
156
156
  this.formattedUserData = JSON.parse(this.userData);
157
157
  }
@@ -196,8 +196,8 @@ KompasHeaderAccount.styles = [
196
196
 
197
197
  .header-account--membership-icon {
198
198
  position: absolute;
199
- bottom: -2px;
200
- right: -2px;
199
+ bottom: -2.5px;
200
+ right: -2.5px;
201
201
  }
202
202
 
203
203
  .header-account--notification-indicator {
@@ -212,7 +212,7 @@ KompasHeaderAccount.styles = [
212
212
  }
213
213
 
214
214
  .icon-xs svg {
215
- width: 12px;
215
+ width: 11px;
216
216
  height: 12px;
217
217
  }
218
218
 
@@ -256,6 +256,9 @@ KompasHeaderAccount.styles = [
256
256
  __decorate([
257
257
  state()
258
258
  ], KompasHeaderAccount.prototype, "isShowSidebar", void 0);
259
+ __decorate([
260
+ state()
261
+ ], KompasHeaderAccount.prototype, "setTheme", void 0);
259
262
  __decorate([
260
263
  property({ type: String })
261
264
  ], KompasHeaderAccount.prototype, "cartUrl", void 0);
@@ -265,9 +268,6 @@ __decorate([
265
268
  __decorate([
266
269
  property({ type: String })
267
270
  ], KompasHeaderAccount.prototype, "manageAccountUrl", void 0);
268
- __decorate([
269
- property({ type: Number })
270
- ], KompasHeaderAccount.prototype, "notificationTotal", void 0);
271
271
  __decorate([
272
272
  property({ type: String })
273
273
  ], KompasHeaderAccount.prototype, "notificationUrl", void 0);
@@ -289,6 +289,9 @@ __decorate([
289
289
  __decorate([
290
290
  property({ type: Number })
291
291
  ], KompasHeaderAccount.prototype, "totalGracePeriod", void 0);
292
+ __decorate([
293
+ property({ type: String })
294
+ ], KompasHeaderAccount.prototype, "theme", void 0);
292
295
  __decorate([
293
296
  property({ type: String })
294
297
  ], 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":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAA;AAErE,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAA;AAClE,OAAO,kEAAkE,CAAA;AACzE,OAAO,yEAAyE,CAAA;AAChF,OAAO,4DAA4D,CAAA;AAG5D,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,UAAU;IAA5C;;QAwFI,kBAAa,GAAY,KAAK,CAAA;QAGvC,sBAAiB,GAAS,EAAU,CAAA;QAER,YAAO,GAAG,EAAE,CAAA;QACZ,cAAS,GAAG,EAAE,CAAA;QACd,qBAAgB,GAAG,EAAE,CAAA;QACrB,oBAAe,GAAG,EAAE,CAAA;QACpB,cAAS,GAAG,EAAE,CAAA;QACd,iBAAY,GAAG,EAAE,CAAA;QACjB,aAAQ,GAAG,EAAE,CAAA;QACb,sBAAiB,GAAG,CAAC,CAAA;QACrB,oBAAe,GAAG,EAAE,CAAA;QACpB,qBAAgB,GAAG,CAAC,CAAA;QACpB,UAAK,GAA0B,SAAS,CAAA;QACpE;;WAEG;QACyB,qBAAgB,GAAG,EAAE,CAAA;QACrB,iCAA4B,GAAG,EAAE,CAAA;QACjC,4BAAuB,GAAG,CAAC,CAAA;QAC3B,+BAA0B,GAAG,CAAC,CAAA;QAC9B,qBAAgB,GAAG,CAAC,CAAA;QACpB,sBAAiB,GAAG,EAAE,CAAA;QACtB,uBAAkB,GAAG,EAAE,CAAA;QACvB,0BAAqB,GAAG,EAAE,CAAA;QAC1B,+BAA0B,GAAG,EAAE,CAAA;QAC/B,yBAAoB,GAAG,EAAE,CAAA;QACzB,sBAAiB,GAAG,EAAE,CAAA;QACtB,gCAA2B,GAAG,EAAE,CAAA;QAChC,wBAAmB,GAAG,EAAE,CAAA;QACxB,8BAAyB,GAAG,EAAE,CAAA;QAC9B,iCAA4B,GAAG,CAAC,CAAA;IAkI9D,CAAC;IAhIS,aAAa;QACnB,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAA;IAC1C,CAAC;IAEO,kBAAkB;;QACxB,OAAO,CAAA,MAAA,IAAI,CAAC,iBAAiB,0CAAE,QAAQ;YACrC,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;YAC3C,CAAC,CAAC,EAAE,CAAA;IACR,CAAC;IAEO,OAAO;QACb,MAAM,cAAc,GAAG,GAAG,EAAE;;YAC1B,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,iBAAiB,0CAAE,YAAY,CAAA;gBAAE,OAAO,IAAI,CAAA,EAAE,CAAA;YACxD,OAAO,IAAI,CAAA;;;;;;;;OAQV,CAAA;QACH,CAAC,CAAA;QAED,OAAO,IAAI,CAAA;uBACQ,IAAI,CAAC,aAAa;;YAE7B,CAAC,IAAI,CAAC,kBAAkB,EAAE;YAC1B,CAAC,CAAC,IAAI,CAAA;;sBAEI;YACV,CAAC,CAAC,IAAI,CAAA;;0FAEwE,IAAI,CAAC,QAAQ,CACnF,EAAE,UAAU,EAAE,IAAI,CAAC,KAAK,EAAE,CAC3B;;;2DAGwC,IAAI,CAAC,QAAQ,CAAC;gBACnD,IAAI,EAAE,IAAI,CAAC,KAAK;aACjB,CAAC;;sBAEA,IAAI,CAAC,kBAAkB,EAAE;;oBAE3B,cAAc,EAAE;;eAErB;;kCAEmB,IAAI,CAAC,aAAa;YACtC,CAAC,CAAC,cAAc;YAChB,CAAC,CAAC,YAAY,IAAI,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;;cAErD,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;;;;KAI3D,CAAA;IACH,CAAC;IAEO,cAAc;QACpB,OAAO,IAAI,CAAA;;;kBAGG,IAAI,CAAC,OAAO;iBACb,IAAI,CAAC,aAAa;;;;kBAIjB,eAAe,IAAI,CAAC,iBAAiB,iCAAiC;oBACpE,IAAI,CAAC,OAAO;mBACb,CAAC,EAAO,EAAE,EAAE,CAAC,EAAE,CAAC,eAAe,EAAE;;;+BAGrB,IAAI,CAAC,kBAAkB,EAAE;wBAChC,IAAI,CAAC,iBAAiB;+BACf,IAAI,CAAC,eAAe;gCACnB,IAAI,CAAC,gBAAgB;+BACtB,IAAI,CAAC,gBAAgB;2CACT,IAAI,CAAC,4BAA4B;sCACtC,IAAI,CAAC,uBAAuB;yCACzB,IAAI,CAAC,0BAA0B;+BACzC,IAAI,CAAC,gBAAgB;gCACpB,IAAI,CAAC,iBAAiB;iCACrB,IAAI,CAAC,kBAAkB;oCACpB,IAAI,CAAC,qBAAqB;yCACrB,IAAI,CAAC,0BAA0B;mCACrC,IAAI,CAAC,oBAAoB;gCAC5B,IAAI,CAAC,iBAAiB;0CACZ,IAAI,CAAC,2BAA2B;kCACxC,IAAI,CAAC,mBAAmB;wCAClB,IAAI,CAAC,yBAAyB;2CAC3B,IAAI,CAAC,4BAA4B;;;;0BAIlD,IAAI,CAAC,OAAO;oCACF,IAAI,CAAC,gBAAgB;4BAC7B,IAAI,CAAC,SAAS;kCACR,IAAI,CAAC,eAAe;4BAC1B,IAAI,CAAC,SAAS;gCACV,IAAI,CAAC,YAAY;;;;;;KAM5C,CAAA;IACH,CAAC;IAEQ,KAAK,CAAC,iBAAiB;QAC9B,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAA;QAC1B,IAAI,CAAC,QAAQ,GAAG,MAAM,cAAc,EAAE,CAAA;QAEtC,IAAI,OAAO,IAAI,CAAC,QAAQ,KAAK,QAAQ,EAAE;YACrC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;SACnD;aAAM,IAAI,OAAO,IAAI,CAAC,QAAQ,KAAK,QAAQ,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,EAAE;YACtE,oEAAoE;YACpE,mDAAmD;YACnD,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,QAAgB,CAAA;SAC/C;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,OAAO,EAAE,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE;KACpE,CAAA;IACH,CAAC;;AAzPM,0BAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkFF;IACD,QAAQ;CACT,CAAA;AAEQ;IAAR,KAAK,EAAE;0DAA+B;AAC9B;IAAR,KAAK,EAAE;qDAAc;AAIM;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAAa;AACZ;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6DAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DAAqB;AACpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAAc;AACb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8DAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DAAqB;AACpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6DAAqB;AACpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAyC;AAIxC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6DAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yEAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oEAA4B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uEAA+B;AAC9B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6DAAqB;AACpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8DAAuB;AACtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+DAAwB;AACvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kEAA2B;AAC1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uEAAgC;AAC/B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iEAA0B;AACzB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8DAAuB;AACtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wEAAiC;AAChC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gEAAyB;AACxB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sEAA+B;AAC9B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yEAAiC;AAzHjD,mBAAmB;IAD/B,aAAa,CAAC,yBAAyB,CAAC;GAC5B,mBAAmB,CA2P/B;SA3PY,mBAAmB","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/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() setTheme: any\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 ${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.setTheme = 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
@@ -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
@@ -7,9 +7,11 @@ export declare class KompasHeaderNotification extends LitElement {
7
7
  notificationInfoData: UserNotification;
8
8
  notificationContentData: any[];
9
9
  isDataLoaded: boolean;
10
+ setTheme: any;
10
11
  accessToken: string;
11
12
  refreshToken: string;
12
13
  domain: string;
14
+ theme: 'default' | 'primary';
13
15
  tracker_user_type: string;
14
16
  tracker_subscription_status: string;
15
17
  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/api/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 = '';
@@ -94,6 +96,7 @@ let KompasHeaderNotification = class KompasHeaderNotification extends LitElement
94
96
  async connectedCallback() {
95
97
  super.connectedCallback();
96
98
  this.isShowDropdown = false;
99
+ this.setTheme = await getHeaderTheme();
97
100
  if ((this.accessToken || this.refreshToken) && this.domain)
98
101
  await this.loadData();
99
102
  document.addEventListener('click', this.handleClickOutside);
@@ -199,7 +202,11 @@ let KompasHeaderNotification = class KompasHeaderNotification extends LitElement
199
202
  >
200
203
  ${notificationIndicator()}
201
204
  <div class="flex flex-row items-center self-center">
202
- <div class="text-white cursor-pointer mt-0.5">
205
+ <div
206
+ class="cursor-pointer mt-0.5 ${this.setTheme({
207
+ icon: this.theme,
208
+ })}"
209
+ >
203
210
  ${unsafeSVG(getFontAwesomeIcon('fas', 'bell', 21, 21))}
204
211
  </div>
205
212
  </div>
@@ -423,7 +430,11 @@ let KompasHeaderNotification = class KompasHeaderNotification extends LitElement
423
430
  return html `<div id="headerNotification" class="relative">
424
431
  ${this.isDataLoaded
425
432
  ? this.notificationIcon()
426
- : html `<div class="text-white cursor-pointer mt-0.5 animate-spin">
433
+ : html `<div
434
+ class="cursor-pointer mt-0.5 animate-spin ${this.setTheme({
435
+ icon: this.theme,
436
+ })}"
437
+ >
427
438
  ${unsafeSVG(getFontAwesomeIcon('fa', 'circle-notch', 21, 21))}
428
439
  </div>`}
429
440
  ${this.isShowDropdown ? this.notificationPopup() : ''}
@@ -443,8 +454,9 @@ KompasHeaderNotification.styles = [
443
454
  width: 0.5rem;
444
455
  background-color: #ff7a00;
445
456
  border-radius: 50%;
446
- right: -0.403rem;
447
- top: -0.281rem;
457
+ right: 0.03rem;
458
+ top: 0.09rem;
459
+ border: 1.2px solid white;
448
460
  }
449
461
 
450
462
  .break-words {
@@ -564,6 +576,9 @@ __decorate([
564
576
  __decorate([
565
577
  state()
566
578
  ], KompasHeaderNotification.prototype, "isDataLoaded", void 0);
579
+ __decorate([
580
+ state()
581
+ ], KompasHeaderNotification.prototype, "setTheme", void 0);
567
582
  __decorate([
568
583
  property({ type: String })
569
584
  ], KompasHeaderNotification.prototype, "accessToken", void 0);
@@ -573,6 +588,9 @@ __decorate([
573
588
  __decorate([
574
589
  property({ type: String })
575
590
  ], KompasHeaderNotification.prototype, "domain", void 0);
591
+ __decorate([
592
+ property({ type: String })
593
+ ], KompasHeaderNotification.prototype, "theme", void 0);
576
594
  __decorate([
577
595
  property({ type: String })
578
596
  ], KompasHeaderNotification.prototype, "tracker_user_type", void 0);