@kompasid/lit-web-components 0.7.2 → 0.7.4
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.
- package/.github/workflows/npm-publish.yml +2 -2
- package/demo/index.html +68 -58
- package/dist/src/components/kompasid-header-account/KompasHeaderAccount.js +34 -9
- package/dist/src/components/kompasid-header-account/KompasHeaderAccount.js.map +1 -1
- package/dist/src/components/kompasid-header-account-help-center/KompasHeaderAccountHelpCenter.js +14 -10
- package/dist/src/components/kompasid-header-account-help-center/KompasHeaderAccountHelpCenter.js.map +1 -1
- package/dist/src/components/kompasid-header-account-menu/KompasHeaderAccountMenu.js +5 -2
- package/dist/src/components/kompasid-header-account-menu/KompasHeaderAccountMenu.js.map +1 -1
- package/dist/src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.d.ts +5 -7
- package/dist/src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.js +26 -38
- package/dist/src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.js.map +1 -1
- package/dist/src/components/kompasid-widget-recirculations-default/types.d.ts +0 -4
- package/dist/src/components/kompasid-widget-recirculations-default/types.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/components/kompasid-header-account/KompasHeaderAccount.ts +34 -9
- package/src/components/kompasid-header-account-help-center/KompasHeaderAccountHelpCenter.ts +14 -10
- package/src/components/kompasid-header-account-menu/KompasHeaderAccountMenu.ts +5 -2
- package/src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.ts +22 -36
- package/src/components/kompasid-widget-recirculations-default/readme.md +6 -11
- package/src/components/kompasid-widget-recirculations-default/types.ts +0 -5
|
@@ -9,7 +9,7 @@ on:
|
|
|
9
9
|
|
|
10
10
|
jobs:
|
|
11
11
|
build:
|
|
12
|
-
runs-on: [
|
|
12
|
+
runs-on: [node20]
|
|
13
13
|
steps:
|
|
14
14
|
- uses: actions/checkout@v3
|
|
15
15
|
- uses: actions/setup-node@v3
|
|
@@ -20,7 +20,7 @@ jobs:
|
|
|
20
20
|
|
|
21
21
|
publish-npm:
|
|
22
22
|
needs: build
|
|
23
|
-
runs-on: [
|
|
23
|
+
runs-on: [node20]
|
|
24
24
|
steps:
|
|
25
25
|
- uses: actions/checkout@v3
|
|
26
26
|
- uses: actions/setup-node@v3
|
package/demo/index.html
CHANGED
|
@@ -92,69 +92,79 @@
|
|
|
92
92
|
const trackerContentEditors = 'Editor 1|Editor 2'
|
|
93
93
|
const trackerContentTags = 'Tag1|Tag2|Tag3'
|
|
94
94
|
const trackerContentPublishedDate = '2023-10-12'
|
|
95
|
-
const cartUrl=
|
|
96
|
-
const logoutUrl=
|
|
97
|
-
const manageAccountUrl=
|
|
98
|
-
const notificationUrl=
|
|
99
|
-
const notificationTotal=
|
|
100
|
-
const ordersUrl=
|
|
101
|
-
const subscriptionUrl=
|
|
102
|
-
const readLaterUrl=
|
|
103
|
-
const totalGracePeriod=
|
|
95
|
+
const cartUrl = '/cart'
|
|
96
|
+
const logoutUrl = '/logout'
|
|
97
|
+
const manageAccountUrl = '/manage-count'
|
|
98
|
+
const notificationUrl = '/notif'
|
|
99
|
+
const notificationTotal = '10'
|
|
100
|
+
const ordersUrl = '/orders'
|
|
101
|
+
const subscriptionUrl = ''
|
|
102
|
+
const readLaterUrl = '/baca-nanti'
|
|
103
|
+
const totalGracePeriod = '5'
|
|
104
104
|
|
|
105
105
|
const userData = {
|
|
106
106
|
userName: 'User Fullname',
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
107
|
+
expired: 'Berakhir: 6 hari lagi',
|
|
108
|
+
isNearExpired: false,
|
|
109
|
+
activeInfo:
|
|
110
|
+
'Kompas Digital Premium 1 Bulan - Auto Renewal Example Text',
|
|
111
|
+
isMembership: true,
|
|
112
|
+
updateMembership: 'Perbarui Langganan',
|
|
112
113
|
}
|
|
113
114
|
|
|
114
115
|
const widgetRelatedPost = {
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
permalinkArticle: 'https://www.kompas.id/baca/opini/2024/05/02/pesan-bung-karno-jaga-persatuan-dan-keutuhan?open_from=Section_Artikel_Lainnya',
|
|
120
|
-
slugs: 'persatuan,bung-karno, surat pembaca, eduard lukman, bharoto, wira hardiprakoso, vision'
|
|
116
|
+
permalinkArticle:
|
|
117
|
+
'https://www.kompas.id/baca/opini/2024/05/02/pesan-bung-karno-jaga-persatuan-dan-keutuhan?open_from=Section_Artikel_Lainnya',
|
|
118
|
+
slugs:
|
|
119
|
+
'persatuan,bung-karno, surat pembaca, eduard lukman, bharoto, wira hardiprakoso, vision',
|
|
121
120
|
}
|
|
122
121
|
|
|
123
122
|
const widgetOtherPost = {
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
permalink: '/kategori/opini'
|
|
127
|
-
}
|
|
123
|
+
titleName: 'Lainnya Dalam Opini',
|
|
124
|
+
titleLink: '/kategori/opini',
|
|
128
125
|
}
|
|
129
126
|
|
|
130
127
|
render(
|
|
131
128
|
html`
|
|
132
|
-
<
|
|
133
|
-
.
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
129
|
+
<header
|
|
130
|
+
style="width: 100%; position: fixed; left: 0; top: 0px; background-color: #0356a8; padding: 0.75rem; z-index: 99"
|
|
131
|
+
>
|
|
132
|
+
<div
|
|
133
|
+
style="max-width: 1280px; margin: auto; display: flex;padding:0 30px"
|
|
134
|
+
>
|
|
135
|
+
<kompasid-header-account
|
|
136
|
+
.userData=${userData}
|
|
137
|
+
.cart_url=${cartUrl}
|
|
138
|
+
.logout_url=${logoutUrl}
|
|
139
|
+
sidebarTopSpacing="49"
|
|
140
|
+
.manage_account_url=${manageAccountUrl}
|
|
141
|
+
.notification_url=${notificationUrl}
|
|
142
|
+
.notification_total=${notificationTotal}
|
|
143
|
+
.orders_url=${ordersUrl}
|
|
144
|
+
.subscription_url=${subscriptionUrl}
|
|
145
|
+
.read_later_url=${readLaterUrl}
|
|
146
|
+
.total_grace_period=${totalGracePeriod}
|
|
147
|
+
style="margin-left: auto; height: 25px; display: flex; align-items: center"
|
|
148
|
+
></kompasid-header-account>
|
|
149
|
+
</div>
|
|
150
|
+
</header>
|
|
144
151
|
|
|
145
152
|
<kompasid-widget-recirculations-default
|
|
146
|
-
.navigation=${widgetRelatedPost.navigation}
|
|
147
153
|
.permalinkArticle=${widgetRelatedPost.permalinkArticle}
|
|
148
154
|
.slugs=${widgetRelatedPost.slugs}
|
|
149
155
|
></kompasid-widget-recirculations-default>
|
|
150
156
|
|
|
151
157
|
<kompasid-widget-recirculations-default
|
|
152
|
-
.
|
|
153
|
-
|
|
154
|
-
|
|
158
|
+
.titleName=${widgetOtherPost.titleName}
|
|
159
|
+
.titleLink=${widgetOtherPost.titleLink}
|
|
160
|
+
type="otherArticle"
|
|
161
|
+
mainCategory="opini"
|
|
155
162
|
></kompasid-widget-recirculations-default>
|
|
156
163
|
|
|
157
|
-
<kompasid-widget-recirculations-list
|
|
164
|
+
<kompasid-widget-recirculations-list
|
|
165
|
+
widgetTitle="Terpopuler"
|
|
166
|
+
apiSlug="popular-article"
|
|
167
|
+
>
|
|
158
168
|
</kompasid-widget-recirculations-list>
|
|
159
169
|
|
|
160
170
|
<kompasid-paywall
|
|
@@ -233,23 +243,23 @@
|
|
|
233
243
|
>
|
|
234
244
|
</kompasid-freewall>
|
|
235
245
|
<kompasid-metered-wall-register
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
246
|
+
.id=${'metered-wall-register'}
|
|
247
|
+
.countdownArticle=${countdownArticle}
|
|
248
|
+
.tracker_page_title=${trackerPageTitle}
|
|
249
|
+
.tracker_page_type=${trackerPageType}
|
|
250
|
+
.tracker_content_type=${trackerContentType}
|
|
251
|
+
.tracker_content_id=${trackerContentId}
|
|
252
|
+
.tracker_content_title=${trackerContentTitle}
|
|
253
|
+
.tracker_content_authors=${trackerContentAuthors}
|
|
254
|
+
.tracker_content_editors=${trackerContentEditors}
|
|
255
|
+
.tracker_content_tags=${trackerContentTags}
|
|
256
|
+
.tracker_content_published_date=${trackerContentPublishedDate}
|
|
257
|
+
.tracker_content_categories=${trackerContentCategories}
|
|
258
|
+
.tracker_user_type=${trackerUserType}
|
|
259
|
+
.tracker_subscription_status=${trackerSubscriptionStatus}
|
|
260
|
+
.tracker_metered_wall_type=${meteredWallType}
|
|
261
|
+
.tracker_metered_wall_balance=${trackerMeteredWallBalance}
|
|
262
|
+
.tracker_page_domain=${trackerPageDomain}
|
|
253
263
|
></kompasid-metered-wall-register>
|
|
254
264
|
|
|
255
265
|
<!-- <kompasid-grace-period totalGracePeriod="5" subscriptionId="9802032"></kompasid-grace-period> -->
|
|
@@ -54,7 +54,7 @@ let KompasHeaderAccount = class KompasHeaderAccount extends LitElement {
|
|
|
54
54
|
`;
|
|
55
55
|
};
|
|
56
56
|
return html `
|
|
57
|
-
<button @click=${this.toggleSidebar} class="cursor-pointer
|
|
57
|
+
<button @click=${this.toggleSidebar} class="cursor-pointer ">
|
|
58
58
|
<div class="flex flex-row items-center self-center">
|
|
59
59
|
${!this.getInitialUserName()
|
|
60
60
|
? html `<div
|
|
@@ -83,11 +83,15 @@ let KompasHeaderAccount = class KompasHeaderAccount extends LitElement {
|
|
|
83
83
|
}
|
|
84
84
|
accountSidebar() {
|
|
85
85
|
return html `
|
|
86
|
-
<nav
|
|
86
|
+
<nav
|
|
87
|
+
class="w-screen fixed right-0 top-0 bottom-0"
|
|
88
|
+
@keyup="${this.onkeyup}"
|
|
89
|
+
@click=${this.toggleSidebar}
|
|
90
|
+
>
|
|
87
91
|
<div
|
|
92
|
+
class="bg-grey-100 pb-20 pt-0 shadow-lg w-76 z-index-max ml-auto"
|
|
93
|
+
style=${`margin-top: ${this.sidebarTopSpacing}px;height:100vh;overflow-y:auto`}
|
|
88
94
|
@keyup="${this.onkeyup}"
|
|
89
|
-
class="bg-grey-100 pb-20 pt-0 shadow-lg w-76 z-99 ml-auto"
|
|
90
|
-
style=${`margin-top: ${this.sidebarTopSpacing}px`}
|
|
91
95
|
@click=${(ev) => ev.stopPropagation()}
|
|
92
96
|
>
|
|
93
97
|
<kompasid-header-account-profile
|
|
@@ -126,11 +130,7 @@ let KompasHeaderAccount = class KompasHeaderAccount extends LitElement {
|
|
|
126
130
|
}
|
|
127
131
|
render() {
|
|
128
132
|
return html `
|
|
129
|
-
|
|
130
|
-
<div class="text-end">
|
|
131
|
-
${this.account()} ${this.isShowSidebar ? this.accountSidebar() : ''}
|
|
132
|
-
</div>
|
|
133
|
-
</header>
|
|
133
|
+
${this.account()} ${this.isShowSidebar ? this.accountSidebar() : ''}
|
|
134
134
|
`;
|
|
135
135
|
}
|
|
136
136
|
};
|
|
@@ -187,6 +187,31 @@ KompasHeaderAccount.styles = [
|
|
|
187
187
|
font-family: 'PT Sans', sans-serif;
|
|
188
188
|
font-size: 0.875rem;
|
|
189
189
|
}
|
|
190
|
+
.z-index-max {
|
|
191
|
+
z-index: 99999;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
/* Custom Scrollbar for header */
|
|
195
|
+
/* width */
|
|
196
|
+
::-webkit-scrollbar {
|
|
197
|
+
width: 4px;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
/* Track */
|
|
201
|
+
::-webkit-scrollbar-track {
|
|
202
|
+
background: transparent;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
/* Handle */
|
|
206
|
+
::-webkit-scrollbar-thumb {
|
|
207
|
+
background: #0356a8;
|
|
208
|
+
border-radius: 100px;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
/* Handle on hover */
|
|
212
|
+
::-webkit-scrollbar-thumb:hover {
|
|
213
|
+
background: #0356a8;
|
|
214
|
+
}
|
|
190
215
|
`,
|
|
191
216
|
TWStyles,
|
|
192
217
|
];
|
|
@@ -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 .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 `,\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 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://d3w4qaq4xm1ncv.cloudfront.net/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 p-3\">\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-3 icon-xs text-white chevron-icon ${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 @keyup=\"${this.onkeyup}\" @click=${this.toggleSidebar}>\n <div\n @keyup=\"${this.onkeyup}\"\n class=\"bg-grey-100 pb-20 pt-0 shadow-lg w-76 z-99 ml-auto\"\n style=${`margin-top: ${this.sidebarTopSpacing}px`}\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 ></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 <header class=\"header flex flex-row justify-end h-[49px] relative z-50\">\n <div class=\"text-end\">\n ${this.account()} ${this.isShowSidebar ? this.accountSidebar() : ''}\n </div>\n </header>\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 '../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 .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 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://d3w4qaq4xm1ncv.cloudfront.net/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-3 icon-xs text-white chevron-icon ${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 ></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"]}
|
package/dist/src/components/kompasid-header-account-help-center/KompasHeaderAccountHelpCenter.js
CHANGED
|
@@ -142,23 +142,27 @@ KompasHeaderAccountHelpCenter.styles = [
|
|
|
142
142
|
display: flex;
|
|
143
143
|
flex-direction: row;
|
|
144
144
|
align-items: center;
|
|
145
|
-
padding: 0.75rem;
|
|
146
|
-
transition: background-color 0.3s ease-in-out;
|
|
147
|
-
border-radius: 0.25rem;
|
|
145
|
+
padding: 0 0.75rem;
|
|
148
146
|
}
|
|
149
|
-
.header-account-help-center--
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
147
|
+
.header-account-help-center--content {
|
|
148
|
+
display: flex;
|
|
149
|
+
flex-direction: column;
|
|
150
|
+
flex-grow: 1;
|
|
151
|
+
margin-left: 1rem; /* Equivalent to mx-4 (margin-left: 1rem and margin-right: 1rem) */
|
|
152
|
+
margin-right: 1rem;
|
|
153
|
+
line-height: 1.25rem; /* Equivalent to leading-4 (line-height: 1.25rem) */
|
|
154
|
+
font-size: 1rem; /* Equivalent to text-base (font-size: 1rem) */
|
|
155
|
+
gap: 0.5rem; /* Equivalent to gap-y-2 (gap between rows: 0.5rem) */
|
|
154
156
|
}
|
|
155
157
|
.icon {
|
|
156
|
-
width: 20px;
|
|
157
|
-
height: 20px;
|
|
158
158
|
margin-top: auto;
|
|
159
159
|
margin-bottom: auto;
|
|
160
160
|
color: rgb(0 85 154);
|
|
161
161
|
}
|
|
162
|
+
.icon svg {
|
|
163
|
+
width: 20px;
|
|
164
|
+
height: 20px;
|
|
165
|
+
}
|
|
162
166
|
`,
|
|
163
167
|
TWStyles,
|
|
164
168
|
];
|
package/dist/src/components/kompasid-header-account-help-center/KompasHeaderAccountHelpCenter.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KompasHeaderAccountHelpCenter.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account-help-center/KompasHeaderAccountHelpCenter.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACxD,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,6BAA6B,GAAnC,MAAM,6BAA8B,SAAQ,UAAU;IAAtD;;
|
|
1
|
+
{"version":3,"file":"KompasHeaderAccountHelpCenter.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account-help-center/KompasHeaderAccountHelpCenter.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, state } 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-help-center')\nexport class KompasHeaderAccountHelpCenter extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n .header-account-help-center--item {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0 0.75rem;\n }\n .header-account-help-center--content {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n margin-left: 1rem; /* Equivalent to mx-4 (margin-left: 1rem and margin-right: 1rem) */\n margin-right: 1rem;\n line-height: 1.25rem; /* Equivalent to leading-4 (line-height: 1.25rem) */\n font-size: 1rem; /* Equivalent to text-base (font-size: 1rem) */\n gap: 0.5rem; /* Equivalent to gap-y-2 (gap between rows: 0.5rem) */\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 TWStyles,\n ]\n\n kompasKring?: HTMLInputElement\n\n @state() clipboardClicked: boolean = false\n\n // Q & A\n private qna = () =>\n html` <div class=\"header-account-help-center--item\">\n <div class=\"icon\">\n ${unsafeSVG(getFontAwesomeIcon('fas', 'comments'))}\n </div>\n <div\n class=\"header-account-help-center--content mx-4 leading-4 gap-y-2 text-base\"\n >\n <p>Tanya Jawab</p>\n <a href=\"http://kb.kompas.id/\" class=\"font-bold hover:underline\"\n >http://kb.kompas.id/</a\n >\n </div>\n </div>`\n\n // Telephone\n private telephone = () => {\n // Clipboard Action\n const clipboardAction = async () => {\n const phoneNumberCopy =\n this.shadowRoot?.getElementById('kompasKring')?.innerHTML\n if (phoneNumberCopy) {\n try {\n await navigator.clipboard.writeText(phoneNumberCopy)\n this.clipboardClicked = true\n setTimeout(() => {\n this.clipboardClicked = false\n }, 2000)\n } catch (error) {\n // Handle clipboard write error\n console.error('Failed to copy to clipboard:', error)\n }\n }\n }\n\n // Keyboard event handler\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Enter') {\n clipboardAction()\n }\n }\n\n return html`<div class=\"header-account-help-center--item\">\n <div class=\"icon\">${unsafeSVG(getFontAwesomeIcon('fas', 'phone'))}</div>\n <div\n class=\"relative header-account-help-center--content mx-4 leading-4 gap-y-2 text-base\"\n >\n ${this.clipboardClicked\n ? html`<p\n class=\"absolute bg-grey-200 rounded-md h-full top-0 w-full flex items-center justify-center\"\n >\n Berhasil menyalin!\n </p>`\n : html``}\n <p>Kompas Kring</p>\n <p id=\"kompasKring\" class=\"font-bold\">+6221 2567 6000</p>\n </div>\n <div\n class=\"bg-grey-200 px-3 py-2 rounded cursor-pointer\"\n @click=${clipboardAction}\n @keydown=${handleKeyDown}\n tabindex=\"0\"\n >\n <div class=\"icon-sm icon-grey-600\">\n ${unsafeSVG(getFontAwesomeIcon('fas', 'copy'))}\n </div>\n </div>\n </div>`\n }\n\n // Whatsapp\n private whatsapp = () =>\n html`<a\n href=\"https://api.whatsapp.com/send?phone=6281290050800\"\n class=\"header-account-help-center--item\"\n >\n <div class=\"icon\">\n ${unsafeSVG(getFontAwesomeIcon('fab', 'whatsapp'))}\n </div>\n <div\n class=\"header-account-help-center--content mx-4 leading-4 gap-y-2 text-base\"\n >\n <p>Whatsapp</p>\n <p class=\"font-bold hover:underline\">+62812 900 50 800</p>\n </div>\n </a>`\n\n // Email\n private email = () =>\n html`<a\n href=\"mailto:hotline@kompas.id\"\n class=\"header-account-help-center--item\"\n >\n <div class=\"icon-md text-brand-1\">\n ${unsafeSVG(getFontAwesomeIcon('fas', 'envelope'))}\n </div>\n <div\n class=\"header-account-help-center--content mx-4 leading-4 gap-y-2 text-base\"\n >\n <p>Email</p>\n <p class=\"font-bold hover:underline\">hotline@kompas.id</p>\n </div>\n </a>`\n\n // Working Hour\n private workingHour = () =>\n html`<div class=\"header-account-help-center--item\">\n <div class=\"icon-md text-brand-1\">\n ${unsafeSVG(getFontAwesomeIcon('fas', 'clock'))}\n </div>\n <div class=\"flex flex-col mx-4 leading-4 gap-y-2 text-base\">\n <p>Jam Kerja</p>\n <p class=\"font-bold\">06.00 - 16.00 WIB</p>\n </div>\n </div>`\n\n override async connectedCallback() {\n super.connectedCallback()\n }\n\n render() {\n return html`\n <div\n class=\"account-help-center-container text-left leading-none mt-4 text-grey-600\"\n >\n <p class=\"text-base mx-1\">Pusat Bantuan</p>\n <div class=\"flex flex-col text-sm gap-y-4 my-4\">\n ${this.qna()} ${this.telephone()} ${this.whatsapp()} ${this.email()}\n ${this.workingHour()}\n </div>\n </div>\n `\n }\n}\n"]}
|
|
@@ -145,12 +145,15 @@ KompasHeaderAccountMenu.styles = [
|
|
|
145
145
|
width: 1.75rem;
|
|
146
146
|
}
|
|
147
147
|
.icon {
|
|
148
|
-
width: 20px;
|
|
149
|
-
height: 20px;
|
|
150
148
|
margin-top: auto;
|
|
151
149
|
margin-bottom: auto;
|
|
152
150
|
color: rgb(0 85 154);
|
|
153
151
|
}
|
|
152
|
+
.icon svg {
|
|
153
|
+
width: 20px;
|
|
154
|
+
height: 20px;
|
|
155
|
+
}
|
|
156
|
+
.
|
|
154
157
|
`,
|
|
155
158
|
TWStyles,
|
|
156
159
|
];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KompasHeaderAccountMenu.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account-menu/KompasHeaderAccountMenu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAA;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AAGjD,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;IAAhD;;
|
|
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 <!-- Notifications -->\n <a href=${this.notificationUrl} class=\"header-account-menu--item\">\n <div class=\"icon icon-md icon-blue-600\">\n ${unsafeSVG(getFontAwesomeIcon('fas', 'bell'))}\n </div>\n <p class=\"header-account-menu--title\">Notifikasi</p>\n <p class=\"flex-none\">\n <!-- Conditional rendering based on notification count -->\n ${this.renderTotalBubble(this.notificationTotal)}\n </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,22 +1,19 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
|
-
import { Post
|
|
2
|
+
import { Post } from './types.js';
|
|
3
3
|
export declare class KompasWidgetRecirculationsDefault extends LitElement {
|
|
4
4
|
static styles: import("lit").CSSResult[];
|
|
5
5
|
/**
|
|
6
6
|
* Props
|
|
7
7
|
*/
|
|
8
8
|
posts: Post[][];
|
|
9
|
-
navigation: Navigation | undefined;
|
|
10
9
|
accessToken: string;
|
|
11
10
|
permalinkArticle: string;
|
|
12
11
|
userGuid: string;
|
|
13
12
|
slugs: string;
|
|
14
13
|
type: 'relatedArticle' | 'otherArticle';
|
|
15
14
|
mainCategory: string;
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
*/
|
|
19
|
-
get navigationPermalink(): string | undefined;
|
|
15
|
+
titleName: string;
|
|
16
|
+
titleLink: string;
|
|
20
17
|
/**
|
|
21
18
|
* Fetch Data
|
|
22
19
|
*/
|
|
@@ -32,7 +29,8 @@ export declare class KompasWidgetRecirculationsDefault extends LitElement {
|
|
|
32
29
|
/**
|
|
33
30
|
* Render widget components
|
|
34
31
|
*/
|
|
35
|
-
private
|
|
32
|
+
private titleRelatedArticle;
|
|
33
|
+
private titleOtherArticle;
|
|
36
34
|
renderChips(post: Post): import("lit").TemplateResult<1>[];
|
|
37
35
|
renderImage(post: Post): import("lit").TemplateResult<1> | "";
|
|
38
36
|
render(): import("lit").TemplateResult<1>;
|
|
@@ -11,20 +11,14 @@ let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault
|
|
|
11
11
|
* Props
|
|
12
12
|
*/
|
|
13
13
|
this.posts = [];
|
|
14
|
-
this.navigation = undefined;
|
|
15
14
|
this.accessToken = '';
|
|
16
15
|
this.permalinkArticle = '';
|
|
17
16
|
this.userGuid = '0';
|
|
18
17
|
this.slugs = '';
|
|
19
18
|
this.type = 'relatedArticle';
|
|
20
19
|
this.mainCategory = '';
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
* Getters
|
|
24
|
-
*/
|
|
25
|
-
get navigationPermalink() {
|
|
26
|
-
var _a;
|
|
27
|
-
return (_a = this.navigation) === null || _a === void 0 ? void 0 : _a.permalink;
|
|
20
|
+
this.titleName = ''; // contoh: Artikel Terkait / Lainnya dalam 'kategori'
|
|
21
|
+
this.titleLink = ''; // contoh: /kategori/opini
|
|
28
22
|
}
|
|
29
23
|
/**
|
|
30
24
|
* Fetch Data
|
|
@@ -133,40 +127,29 @@ let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault
|
|
|
133
127
|
/**
|
|
134
128
|
* Render widget components
|
|
135
129
|
*/
|
|
136
|
-
|
|
137
|
-
var _a, _b;
|
|
138
|
-
if (this.navigationPermalink) {
|
|
139
|
-
return html `
|
|
140
|
-
<a
|
|
141
|
-
href="${this.navigationPermalink}"
|
|
142
|
-
class="flex font-sans uppercase items-start mb-6 mt-8"
|
|
143
|
-
>
|
|
144
|
-
<h5
|
|
145
|
-
class="${[
|
|
146
|
-
'capitalize font-bold font-sans',
|
|
147
|
-
this.navigationPermalink ? 'text-brand-1' : 'text-grey-600',
|
|
148
|
-
].join(' ')}"
|
|
149
|
-
>
|
|
150
|
-
${(_a = this.navigation) === null || _a === void 0 ? void 0 : _a.name}
|
|
151
|
-
</h5>
|
|
152
|
-
</a>
|
|
153
|
-
`;
|
|
154
|
-
}
|
|
130
|
+
titleRelatedArticle() {
|
|
155
131
|
return html `
|
|
156
132
|
<div class="flex font-sans uppercase items-start mb-6 mt-8">
|
|
157
133
|
<div>
|
|
158
|
-
<h5
|
|
159
|
-
|
|
160
|
-
'capitalize font-bold font-sans',
|
|
161
|
-
this.navigationPermalink ? 'text-brand-1' : 'text-grey-600',
|
|
162
|
-
].join(' ')}"
|
|
163
|
-
>
|
|
164
|
-
${(_b = this.navigation) === null || _b === void 0 ? void 0 : _b.name}
|
|
134
|
+
<h5 class="capitalize font-bold font-sans text-grey-600">
|
|
135
|
+
Artikel Terkait
|
|
165
136
|
</h5>
|
|
166
137
|
</div>
|
|
167
138
|
</div>
|
|
168
139
|
`;
|
|
169
140
|
}
|
|
141
|
+
titleOtherArticle() {
|
|
142
|
+
return html `
|
|
143
|
+
<a
|
|
144
|
+
href="${this.titleLink}"
|
|
145
|
+
class="flex font-sans uppercase items-start mb-6 mt-8"
|
|
146
|
+
>
|
|
147
|
+
<h5 class="capitalize font-bold font-sans text-brand-1">
|
|
148
|
+
${this.titleName}
|
|
149
|
+
</h5>
|
|
150
|
+
</a>
|
|
151
|
+
`;
|
|
152
|
+
}
|
|
170
153
|
renderChips(post) {
|
|
171
154
|
var _a, _b;
|
|
172
155
|
const chips = [];
|
|
@@ -223,7 +206,9 @@ let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault
|
|
|
223
206
|
return html `
|
|
224
207
|
<div class="w-full">
|
|
225
208
|
<!-- start: widget title -->
|
|
226
|
-
${this.
|
|
209
|
+
${this.type === 'relatedArticle'
|
|
210
|
+
? this.titleRelatedArticle()
|
|
211
|
+
: this.titleOtherArticle()}
|
|
227
212
|
<!-- end: widget title -->
|
|
228
213
|
|
|
229
214
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
|
|
@@ -312,9 +297,6 @@ KompasWidgetRecirculationsDefault.styles = [
|
|
|
312
297
|
__decorate([
|
|
313
298
|
property({ type: Array })
|
|
314
299
|
], KompasWidgetRecirculationsDefault.prototype, "posts", void 0);
|
|
315
|
-
__decorate([
|
|
316
|
-
property({ type: Object })
|
|
317
|
-
], KompasWidgetRecirculationsDefault.prototype, "navigation", void 0);
|
|
318
300
|
__decorate([
|
|
319
301
|
property({ type: String })
|
|
320
302
|
], KompasWidgetRecirculationsDefault.prototype, "accessToken", void 0);
|
|
@@ -333,6 +315,12 @@ __decorate([
|
|
|
333
315
|
__decorate([
|
|
334
316
|
property({ type: String })
|
|
335
317
|
], KompasWidgetRecirculationsDefault.prototype, "mainCategory", void 0);
|
|
318
|
+
__decorate([
|
|
319
|
+
property({ type: String })
|
|
320
|
+
], KompasWidgetRecirculationsDefault.prototype, "titleName", void 0);
|
|
321
|
+
__decorate([
|
|
322
|
+
property({ type: String })
|
|
323
|
+
], KompasWidgetRecirculationsDefault.prototype, "titleLink", void 0);
|
|
336
324
|
KompasWidgetRecirculationsDefault = __decorate([
|
|
337
325
|
customElement('kompasid-widget-recirculations-default')
|
|
338
326
|
], KompasWidgetRecirculationsDefault);
|