@kompasid/lit-web-components 0.8.29 → 0.9.0
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/demo/index.html +3 -0
- package/dist/src/components/kompasid-header-account-help-center/KompasHeaderAccountHelpCenter.js +1 -1
- package/dist/src/components/kompasid-header-account-help-center/KompasHeaderAccountHelpCenter.js.map +1 -1
- package/dist/src/components/kompasid-menu-sidebar/KompasMenuSideBar.d.ts +64 -0
- package/dist/src/components/kompasid-menu-sidebar/KompasMenuSideBar.js +479 -0
- package/dist/src/components/kompasid-menu-sidebar/KompasMenuSideBar.js.map +1 -0
- package/dist/src/utils/decodeSpecialChars.d.ts +1 -0
- package/dist/src/utils/decodeSpecialChars.js +22 -0
- package/dist/src/utils/decodeSpecialChars.js.map +1 -0
- package/dist/src/utils/timedContent.d.ts +2 -0
- package/dist/src/utils/timedContent.js +19 -0
- package/dist/src/utils/timedContent.js.map +1 -0
- package/dist/tailwind/tailwind.js +117 -5
- package/dist/tailwind/tailwind.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/components/kompasid-header-account-help-center/KompasHeaderAccountHelpCenter.ts +1 -1
- package/src/components/kompasid-menu-sidebar/KompasMenuSideBar.ts +550 -0
- package/src/utils/decodeSpecialChars.ts +23 -0
- package/src/utils/timedContent.ts +32 -0
- package/tailwind/tailwind.css +117 -5
- package/tailwind/tailwind.ts +117 -5
package/demo/index.html
CHANGED
|
@@ -45,6 +45,7 @@
|
|
|
45
45
|
|
|
46
46
|
<script type="module">
|
|
47
47
|
import { html, render } from 'lit'
|
|
48
|
+
import '../dist/src/components/kompasid-menu-sidebar/KompasMenuSideBar.js'
|
|
48
49
|
import '../dist/src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.js'
|
|
49
50
|
import '../dist/src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.js'
|
|
50
51
|
import '../dist/src/components/kompasid-footer/KompasFooter.js'
|
|
@@ -143,6 +144,7 @@
|
|
|
143
144
|
titleLink: '/kategori/ekonomi',
|
|
144
145
|
}
|
|
145
146
|
|
|
147
|
+
|
|
146
148
|
render(
|
|
147
149
|
html`
|
|
148
150
|
<header
|
|
@@ -195,6 +197,7 @@
|
|
|
195
197
|
apiSlug="popular-article"
|
|
196
198
|
>
|
|
197
199
|
</kompasid-widget-recirculations-list>
|
|
200
|
+
<kompasid-menu-side-bar></kompasid-menu-side-bar>
|
|
198
201
|
|
|
199
202
|
<kompasid-widget-recirculations-list
|
|
200
203
|
widgetTitle="Terbaru"
|
package/dist/src/components/kompasid-header-account-help-center/KompasHeaderAccountHelpCenter.js
CHANGED
|
@@ -112,7 +112,7 @@ let KompasHeaderAccountHelpCenter = class KompasHeaderAccountHelpCenter extends
|
|
|
112
112
|
</div>
|
|
113
113
|
<div class="flex flex-col mx-4 leading-4 gap-y-2 text-base">
|
|
114
114
|
<p>Jam Kerja</p>
|
|
115
|
-
<p class="font-bold">06.00 -
|
|
115
|
+
<p class="font-bold">06.00 - 18.00 WIB</p>
|
|
116
116
|
</div>
|
|
117
117
|
</div>`;
|
|
118
118
|
}
|
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":"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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 -
|
|
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 - 18.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"]}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
interface DataExternalLink {
|
|
3
|
+
external?: boolean;
|
|
4
|
+
gtmClass?: string;
|
|
5
|
+
icon: object | null;
|
|
6
|
+
iconify: string | null;
|
|
7
|
+
isNew: boolean;
|
|
8
|
+
name: string;
|
|
9
|
+
url: string;
|
|
10
|
+
}
|
|
11
|
+
interface dataType {
|
|
12
|
+
href: string;
|
|
13
|
+
external?: boolean;
|
|
14
|
+
icon: object | null;
|
|
15
|
+
iconify: string | null;
|
|
16
|
+
name: string;
|
|
17
|
+
slug: string;
|
|
18
|
+
redDot: [
|
|
19
|
+
{
|
|
20
|
+
start: string;
|
|
21
|
+
end: string;
|
|
22
|
+
}
|
|
23
|
+
];
|
|
24
|
+
children: [
|
|
25
|
+
{
|
|
26
|
+
href: string;
|
|
27
|
+
external: boolean;
|
|
28
|
+
icon: string;
|
|
29
|
+
iconify: string | null;
|
|
30
|
+
name: string;
|
|
31
|
+
slug: string;
|
|
32
|
+
redDot: [
|
|
33
|
+
{
|
|
34
|
+
start: string;
|
|
35
|
+
end: string;
|
|
36
|
+
}
|
|
37
|
+
];
|
|
38
|
+
}
|
|
39
|
+
];
|
|
40
|
+
}
|
|
41
|
+
interface DataSideBarLink {
|
|
42
|
+
feature: dataType[];
|
|
43
|
+
category: dataType[];
|
|
44
|
+
}
|
|
45
|
+
export declare class KompasMenuSideBar extends LitElement {
|
|
46
|
+
static styles: import("lit").CSSResult[];
|
|
47
|
+
dataExternal: DataExternalLink[];
|
|
48
|
+
connectedCallback(): Promise<void>;
|
|
49
|
+
handleFetchError(error: unknown): void;
|
|
50
|
+
dataSidebar: DataSideBarLink;
|
|
51
|
+
fetchExternal(): Promise<void>;
|
|
52
|
+
renderChips(): import("lit").TemplateResult<1>[];
|
|
53
|
+
hasChildren(item: any): boolean;
|
|
54
|
+
rubricClicked(item: {
|
|
55
|
+
name: string;
|
|
56
|
+
href?: string;
|
|
57
|
+
}, event?: Event): void;
|
|
58
|
+
private expandedSlug;
|
|
59
|
+
private toggleChildren;
|
|
60
|
+
private showNavBar;
|
|
61
|
+
toggleNavSidebar: (e: Event) => void;
|
|
62
|
+
render(): import("lit").TemplateResult<1>;
|
|
63
|
+
}
|
|
64
|
+
export {};
|
|
@@ -0,0 +1,479 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
/* eslint-disable lit-a11y/click-events-have-key-events */
|
|
3
|
+
import { html, css, LitElement } from 'lit';
|
|
4
|
+
import { customElement, property, state } from 'lit/decorators.js';
|
|
5
|
+
import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
|
|
6
|
+
import { TWStyles } from '../../../tailwind/tailwind.js';
|
|
7
|
+
import { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js';
|
|
8
|
+
import { decodeSpecialChars } from '../../utils/decodeSpecialChars.js';
|
|
9
|
+
import { timedContent } from '../../utils/timedContent.js';
|
|
10
|
+
let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
|
|
11
|
+
constructor() {
|
|
12
|
+
super(...arguments);
|
|
13
|
+
this.dataExternal = [];
|
|
14
|
+
this.dataSidebar = {
|
|
15
|
+
feature: [],
|
|
16
|
+
category: [],
|
|
17
|
+
};
|
|
18
|
+
this.expandedSlug = null;
|
|
19
|
+
this.showNavBar = false;
|
|
20
|
+
this.toggleNavSidebar = (e) => {
|
|
21
|
+
e.stopPropagation(); // prevent bubbling
|
|
22
|
+
this.showNavBar = !this.showNavBar;
|
|
23
|
+
};
|
|
24
|
+
}
|
|
25
|
+
// @property({ type: Array }) dataSidebar: DataSideBarLink[] = []
|
|
26
|
+
async connectedCallback() {
|
|
27
|
+
super.connectedCallback();
|
|
28
|
+
try {
|
|
29
|
+
await this.fetchExternal();
|
|
30
|
+
}
|
|
31
|
+
catch (error) {
|
|
32
|
+
this.handleFetchError(error);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
handleFetchError(error) {
|
|
36
|
+
const errorMessage = error instanceof Error ? error.message : 'Kesalahan tidak diketahui';
|
|
37
|
+
alert(`Terjadi kesalahan: ${errorMessage}`);
|
|
38
|
+
}
|
|
39
|
+
async fetchExternal() {
|
|
40
|
+
var _a, _b;
|
|
41
|
+
// External
|
|
42
|
+
const endpointExternal = `https://cdn-www.kompas.id/assets/json/ApiMenuExternalLink.json`;
|
|
43
|
+
const response = await fetch(endpointExternal, {
|
|
44
|
+
headers: {
|
|
45
|
+
'Content-Type': 'application/json',
|
|
46
|
+
},
|
|
47
|
+
});
|
|
48
|
+
const resultExternal = await response.json();
|
|
49
|
+
// eslint-disable-next-line no-undef
|
|
50
|
+
if (!resultExternal || !Array.isArray(resultExternal)) {
|
|
51
|
+
console.error('Error: resultExternal.result is undefined or not an array', resultExternal);
|
|
52
|
+
this.dataExternal = []; // Ensure dataExternal is an empty array instead of undefined
|
|
53
|
+
}
|
|
54
|
+
else {
|
|
55
|
+
this.dataExternal = resultExternal.map((externalLink) => {
|
|
56
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
57
|
+
return ({
|
|
58
|
+
external: (_a = externalLink.external) !== null && _a !== void 0 ? _a : false,
|
|
59
|
+
gtmClass: (_b = externalLink.gtmClass) !== null && _b !== void 0 ? _b : '',
|
|
60
|
+
icon: (_c = externalLink.icon) !== null && _c !== void 0 ? _c : null,
|
|
61
|
+
iconify: (_d = externalLink.iconify) !== null && _d !== void 0 ? _d : null,
|
|
62
|
+
isNew: (_e = externalLink.isNew) !== null && _e !== void 0 ? _e : false,
|
|
63
|
+
name: (_f = externalLink.name) !== null && _f !== void 0 ? _f : '',
|
|
64
|
+
url: (_g = externalLink.url) !== null && _g !== void 0 ? _g : '',
|
|
65
|
+
});
|
|
66
|
+
});
|
|
67
|
+
}
|
|
68
|
+
// Sidebar
|
|
69
|
+
const endpointSidebar = `https://cdn-www.kompas.id/assets/json/ApiMenuSideV2.json`;
|
|
70
|
+
const responseSidebar = await fetch(endpointSidebar, {
|
|
71
|
+
headers: {
|
|
72
|
+
'Content-Type': 'application/json',
|
|
73
|
+
},
|
|
74
|
+
});
|
|
75
|
+
const resultSidebar = await responseSidebar.json();
|
|
76
|
+
// Validate the structure of the response
|
|
77
|
+
if (!resultSidebar || typeof resultSidebar !== 'object') {
|
|
78
|
+
console.error('Invalid response format:', resultSidebar);
|
|
79
|
+
return;
|
|
80
|
+
}
|
|
81
|
+
// Convert object to an array
|
|
82
|
+
const sidebarArray = Object.values(resultSidebar);
|
|
83
|
+
const [featureArray, categoryArray] = sidebarArray;
|
|
84
|
+
const features = (_a = featureArray === null || featureArray === void 0 ? void 0 : featureArray.map((item) => {
|
|
85
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
86
|
+
return ({
|
|
87
|
+
href: (_a = item === null || item === void 0 ? void 0 : item.href) !== null && _a !== void 0 ? _a : '',
|
|
88
|
+
external: (_b = item === null || item === void 0 ? void 0 : item.external) !== null && _b !== void 0 ? _b : false,
|
|
89
|
+
icon: (_c = item === null || item === void 0 ? void 0 : item.icon) !== null && _c !== void 0 ? _c : null,
|
|
90
|
+
iconify: (_d = item === null || item === void 0 ? void 0 : item.iconify) !== null && _d !== void 0 ? _d : null,
|
|
91
|
+
name: (_e = item === null || item === void 0 ? void 0 : item.name) !== null && _e !== void 0 ? _e : '',
|
|
92
|
+
slug: (_f = item === null || item === void 0 ? void 0 : item.slug) !== null && _f !== void 0 ? _f : '',
|
|
93
|
+
redDot: [
|
|
94
|
+
{
|
|
95
|
+
start: (_h = (_g = item === null || item === void 0 ? void 0 : item.redDot) === null || _g === void 0 ? void 0 : _g.start) !== null && _h !== void 0 ? _h : '',
|
|
96
|
+
end: (_k = (_j = item === null || item === void 0 ? void 0 : item.redDot) === null || _j === void 0 ? void 0 : _j.end) !== null && _k !== void 0 ? _k : '',
|
|
97
|
+
},
|
|
98
|
+
],
|
|
99
|
+
children: Array.isArray(item === null || item === void 0 ? void 0 : item.children)
|
|
100
|
+
? item.children.map((child) => {
|
|
101
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
102
|
+
return ({
|
|
103
|
+
href: (_a = child === null || child === void 0 ? void 0 : child.href) !== null && _a !== void 0 ? _a : '',
|
|
104
|
+
external: (_b = child === null || child === void 0 ? void 0 : child.external) !== null && _b !== void 0 ? _b : false,
|
|
105
|
+
icon: (_c = child === null || child === void 0 ? void 0 : child.icon) !== null && _c !== void 0 ? _c : '',
|
|
106
|
+
iconify: (_d = child === null || child === void 0 ? void 0 : child.iconify) !== null && _d !== void 0 ? _d : '',
|
|
107
|
+
name: (_e = child === null || child === void 0 ? void 0 : child.name) !== null && _e !== void 0 ? _e : '',
|
|
108
|
+
slug: (_f = child === null || child === void 0 ? void 0 : child.slug) !== null && _f !== void 0 ? _f : '',
|
|
109
|
+
redDot: [
|
|
110
|
+
{
|
|
111
|
+
start: (_h = (_g = child === null || child === void 0 ? void 0 : child.redDot) === null || _g === void 0 ? void 0 : _g.start) !== null && _h !== void 0 ? _h : '',
|
|
112
|
+
end: (_k = (_j = child === null || child === void 0 ? void 0 : child.redDot) === null || _j === void 0 ? void 0 : _j.end) !== null && _k !== void 0 ? _k : '',
|
|
113
|
+
},
|
|
114
|
+
],
|
|
115
|
+
});
|
|
116
|
+
})
|
|
117
|
+
: [],
|
|
118
|
+
});
|
|
119
|
+
})) !== null && _a !== void 0 ? _a : [];
|
|
120
|
+
// Map category data
|
|
121
|
+
const categories = (_b = categoryArray === null || categoryArray === void 0 ? void 0 : categoryArray.map((item) => {
|
|
122
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
123
|
+
return ({
|
|
124
|
+
href: (_a = item === null || item === void 0 ? void 0 : item.href) !== null && _a !== void 0 ? _a : '',
|
|
125
|
+
external: (_b = item === null || item === void 0 ? void 0 : item.external) !== null && _b !== void 0 ? _b : false,
|
|
126
|
+
icon: (_c = item === null || item === void 0 ? void 0 : item.icon) !== null && _c !== void 0 ? _c : null,
|
|
127
|
+
iconify: (_d = item === null || item === void 0 ? void 0 : item.iconify) !== null && _d !== void 0 ? _d : null,
|
|
128
|
+
name: (_e = item === null || item === void 0 ? void 0 : item.name) !== null && _e !== void 0 ? _e : '',
|
|
129
|
+
slug: (_f = item === null || item === void 0 ? void 0 : item.slug) !== null && _f !== void 0 ? _f : '',
|
|
130
|
+
redDot: [
|
|
131
|
+
{
|
|
132
|
+
start: (_h = (_g = item === null || item === void 0 ? void 0 : item.redDot) === null || _g === void 0 ? void 0 : _g.start) !== null && _h !== void 0 ? _h : '',
|
|
133
|
+
end: (_k = (_j = item === null || item === void 0 ? void 0 : item.redDot) === null || _j === void 0 ? void 0 : _j.end) !== null && _k !== void 0 ? _k : '',
|
|
134
|
+
},
|
|
135
|
+
],
|
|
136
|
+
children: Array.isArray(item === null || item === void 0 ? void 0 : item.children)
|
|
137
|
+
? item.children.map((child) => {
|
|
138
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
139
|
+
return ({
|
|
140
|
+
href: (_a = child === null || child === void 0 ? void 0 : child.href) !== null && _a !== void 0 ? _a : '',
|
|
141
|
+
external: (_b = child === null || child === void 0 ? void 0 : child.external) !== null && _b !== void 0 ? _b : false,
|
|
142
|
+
icon: (_c = child === null || child === void 0 ? void 0 : child.icon) !== null && _c !== void 0 ? _c : '',
|
|
143
|
+
iconify: (_d = child === null || child === void 0 ? void 0 : child.iconify) !== null && _d !== void 0 ? _d : '',
|
|
144
|
+
name: (_e = child === null || child === void 0 ? void 0 : child.name) !== null && _e !== void 0 ? _e : '',
|
|
145
|
+
slug: (_f = child === null || child === void 0 ? void 0 : child.slug) !== null && _f !== void 0 ? _f : '',
|
|
146
|
+
redDot: [
|
|
147
|
+
{
|
|
148
|
+
start: (_h = (_g = child === null || child === void 0 ? void 0 : child.redDot) === null || _g === void 0 ? void 0 : _g.start) !== null && _h !== void 0 ? _h : '',
|
|
149
|
+
end: (_k = (_j = child === null || child === void 0 ? void 0 : child.redDot) === null || _j === void 0 ? void 0 : _j.end) !== null && _k !== void 0 ? _k : '',
|
|
150
|
+
},
|
|
151
|
+
],
|
|
152
|
+
});
|
|
153
|
+
})
|
|
154
|
+
: [],
|
|
155
|
+
});
|
|
156
|
+
})) !== null && _b !== void 0 ? _b : [];
|
|
157
|
+
this.dataSidebar = { feature: features, category: categories };
|
|
158
|
+
this.requestUpdate();
|
|
159
|
+
}
|
|
160
|
+
renderChips() {
|
|
161
|
+
const chips = [];
|
|
162
|
+
chips.push(html `
|
|
163
|
+
<div class="flex">
|
|
164
|
+
<div
|
|
165
|
+
class="py-1 px-2 rounded text-xs"
|
|
166
|
+
style="position: absolute; top: -22px; right: -24px; display: inline-flex; background-color:#D71920;"
|
|
167
|
+
>
|
|
168
|
+
<span class="font-normal text-white capitalize">Baru</span>
|
|
169
|
+
</div>
|
|
170
|
+
</div>
|
|
171
|
+
`);
|
|
172
|
+
return chips;
|
|
173
|
+
}
|
|
174
|
+
hasChildren(item) {
|
|
175
|
+
return Array.isArray(item === null || item === void 0 ? void 0 : item.children) && item.children.length > 0;
|
|
176
|
+
}
|
|
177
|
+
rubricClicked(item, event) {
|
|
178
|
+
if (event) {
|
|
179
|
+
event.stopPropagation(); // Prevent parent click event
|
|
180
|
+
}
|
|
181
|
+
if (item.href) {
|
|
182
|
+
window.location.href = item.href;
|
|
183
|
+
}
|
|
184
|
+
// add data layer here
|
|
185
|
+
}
|
|
186
|
+
toggleChildren(item) {
|
|
187
|
+
this.expandedSlug = this.expandedSlug === item.slug ? null : item.slug;
|
|
188
|
+
}
|
|
189
|
+
render() {
|
|
190
|
+
return html `
|
|
191
|
+
<!-- Button Menu -->
|
|
192
|
+
<div
|
|
193
|
+
class="w-fit flex items-center justify-center cursor-pointer relative"
|
|
194
|
+
@click=${this.toggleNavSidebar}
|
|
195
|
+
>
|
|
196
|
+
<div class="h-4 inline-flex text-brand-1">
|
|
197
|
+
${unsafeSVG(getFontAwesomeIcon('fas', 'bars'))}
|
|
198
|
+
</div>
|
|
199
|
+
<span
|
|
200
|
+
class="font-sans hidden sm:inline ml-2 tracking-wide text-brand-1 font-bold"
|
|
201
|
+
>Menu</span
|
|
202
|
+
>
|
|
203
|
+
</div>
|
|
204
|
+
<!-- Side Menu -->
|
|
205
|
+
<nav
|
|
206
|
+
@click=${this.toggleNavSidebar}
|
|
207
|
+
class=${this.showNavBar
|
|
208
|
+
? 'fixed left-0 top-0 w-screen z-[100]'
|
|
209
|
+
: 'hidden'}
|
|
210
|
+
>
|
|
211
|
+
<div
|
|
212
|
+
ref="toggle-nav-sidebar"
|
|
213
|
+
class="bg-white h-screen menu-menu-sidebar overflow-y-auto pb-20 pt-0 shadow-lg"
|
|
214
|
+
style="width: 312px;"
|
|
215
|
+
>
|
|
216
|
+
<div
|
|
217
|
+
class="bg-[#e1f0ff] flex flex-col items-center justify-center mb-6 w-full"
|
|
218
|
+
>
|
|
219
|
+
<div
|
|
220
|
+
ref="logo-kompas"
|
|
221
|
+
class="flex items-center justify-between px-4 py-6 w-full"
|
|
222
|
+
>
|
|
223
|
+
<a href="/" class="flex h-9 w-9">
|
|
224
|
+
<img
|
|
225
|
+
src="https://cdn-www.kompas.id/assets/img/icons/kompas-icon.svg"
|
|
226
|
+
alt="Kompas.id"
|
|
227
|
+
scale="0"
|
|
228
|
+
class="block w-full"
|
|
229
|
+
/>
|
|
230
|
+
</a>
|
|
231
|
+
<span
|
|
232
|
+
class="bg-[#93c8fd] cursor-pointer flex h-10 items-center justify-center rounded text-base w-10 p-4"
|
|
233
|
+
@click=${this.toggleNavSidebar}
|
|
234
|
+
>
|
|
235
|
+
${unsafeSVG(getFontAwesomeIcon('fa', 'times'))}
|
|
236
|
+
</span>
|
|
237
|
+
</div>
|
|
238
|
+
<div class="flex flex-wrap px-4 w-full">
|
|
239
|
+
${this.dataExternal.map(item => html `
|
|
240
|
+
<a href="${item.url}" class="block w-1/2 no-underline">
|
|
241
|
+
<div class="cursor-pointer flex items-center pb-6 w-full">
|
|
242
|
+
<div class="flex mr-2">
|
|
243
|
+
${item.icon &&
|
|
244
|
+
Array.isArray(item.icon) &&
|
|
245
|
+
item.icon.length >= 2
|
|
246
|
+
? unsafeSVG(getFontAwesomeIcon(item.icon[0], item.icon[1]))
|
|
247
|
+
: ''}
|
|
248
|
+
</div>
|
|
249
|
+
<span class="font-sans relative text-sm text-brand-1">
|
|
250
|
+
${item.name} ${item.isNew ? this.renderChips() : ''}
|
|
251
|
+
</span>
|
|
252
|
+
</div>
|
|
253
|
+
</a>
|
|
254
|
+
`)}
|
|
255
|
+
</div>
|
|
256
|
+
</div>
|
|
257
|
+
<!-- feature -->
|
|
258
|
+
<div class="flex">
|
|
259
|
+
<div class="flex justify-between flex-col">
|
|
260
|
+
${this.dataSidebar.feature.map(item => html `
|
|
261
|
+
<div class="w-full font-sans">
|
|
262
|
+
<!-- Parent item -->
|
|
263
|
+
<div
|
|
264
|
+
class="flex items-center justify-between px-4 text-sm font-medium text-gray-700 transition-all cursor-pointer"
|
|
265
|
+
@click=${(e) => this.rubricClicked(item, e)}
|
|
266
|
+
>
|
|
267
|
+
<div
|
|
268
|
+
class="w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center"
|
|
269
|
+
>
|
|
270
|
+
<div class="flex items-center space-x-3">
|
|
271
|
+
<span
|
|
272
|
+
class="text-xl text-brand-1 w-8 h-8 flex items-center"
|
|
273
|
+
>
|
|
274
|
+
${item.icon &&
|
|
275
|
+
Array.isArray(item.icon) &&
|
|
276
|
+
item.icon.length >= 2
|
|
277
|
+
? unsafeSVG(getFontAwesomeIcon(item.icon[0], item.icon[1]))
|
|
278
|
+
: ''}
|
|
279
|
+
</span>
|
|
280
|
+
<span class="font-bold relative text-[#333] w-full"
|
|
281
|
+
>${decodeSpecialChars(item.name)}</span
|
|
282
|
+
>
|
|
283
|
+
${timedContent(item.redDot[0].start, item.redDot[0].end)
|
|
284
|
+
? html `<span
|
|
285
|
+
class="bg-orange-600 h-2 relative rounded-full w-2 -top-[12px]"
|
|
286
|
+
></span>`
|
|
287
|
+
: ''}
|
|
288
|
+
</div>
|
|
289
|
+
</div>
|
|
290
|
+
|
|
291
|
+
<!-- Toggle chevron -->
|
|
292
|
+
${this.hasChildren(item)
|
|
293
|
+
? html `
|
|
294
|
+
<span
|
|
295
|
+
class="text-xs bg-[#e1f0ff] flex justify-center items-center rounded my-1 p-4 w-10 h-10 cursor-pointer"
|
|
296
|
+
@click=${(e) => {
|
|
297
|
+
e.stopPropagation(); // Prevents click from bubbling to parent
|
|
298
|
+
this.toggleChildren(item);
|
|
299
|
+
}}
|
|
300
|
+
>
|
|
301
|
+
${this.expandedSlug === item.slug
|
|
302
|
+
? unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))
|
|
303
|
+
: unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}
|
|
304
|
+
</span>
|
|
305
|
+
`
|
|
306
|
+
: null}
|
|
307
|
+
</div>
|
|
308
|
+
|
|
309
|
+
<!-- Children items -->
|
|
310
|
+
${this.hasChildren(item) && this.expandedSlug === item.slug
|
|
311
|
+
? html `
|
|
312
|
+
<div class="pl-14 pt-1 pb-2 space-y-1">
|
|
313
|
+
${item.children.map(child => html `
|
|
314
|
+
<div
|
|
315
|
+
class="flex items-center text-sm text-gray-600 px-4 cursor-pointer transition-all"
|
|
316
|
+
@click=${() => this.rubricClicked(child)}
|
|
317
|
+
>
|
|
318
|
+
<div
|
|
319
|
+
class="w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center pl-11"
|
|
320
|
+
>
|
|
321
|
+
${decodeSpecialChars(child.name)}
|
|
322
|
+
${timedContent(child.redDot[0].start, child.redDot[0].end)
|
|
323
|
+
? html `<span
|
|
324
|
+
class="bg-orange-600 h-2 relative rounded-full w-2 -top-[12px]"
|
|
325
|
+
></span>`
|
|
326
|
+
: ''}
|
|
327
|
+
<div></div>
|
|
328
|
+
</div>
|
|
329
|
+
</div>
|
|
330
|
+
`)}
|
|
331
|
+
</div>
|
|
332
|
+
`
|
|
333
|
+
: ''}
|
|
334
|
+
</div>
|
|
335
|
+
`)}
|
|
336
|
+
</div>
|
|
337
|
+
</div>
|
|
338
|
+
<div class="border-b border-[#DDD] m-6 "></div>
|
|
339
|
+
<!-- category -->
|
|
340
|
+
<div class="flex">
|
|
341
|
+
<div class="w-full flex justify-between flex-col">
|
|
342
|
+
${this.dataSidebar.category.map(item => html `
|
|
343
|
+
<div class="w-full font-sans">
|
|
344
|
+
<!-- Parent item -->
|
|
345
|
+
<div
|
|
346
|
+
class="flex items-center justify-between text-sm font-medium text-gray-700 px-4 transition-all cursor-pointer"
|
|
347
|
+
@click=${(e) => this.rubricClicked(item, e)}
|
|
348
|
+
>
|
|
349
|
+
<div
|
|
350
|
+
class="w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center"
|
|
351
|
+
>
|
|
352
|
+
<div class="flex items-center space-x-3">
|
|
353
|
+
<span
|
|
354
|
+
class="text-xl text-brand-1 w-8 h-8 flex items-center"
|
|
355
|
+
>
|
|
356
|
+
${item.icon &&
|
|
357
|
+
Array.isArray(item.icon) &&
|
|
358
|
+
item.icon.length >= 2
|
|
359
|
+
? unsafeSVG(getFontAwesomeIcon(item.icon[0], item.icon[1]))
|
|
360
|
+
: ''}
|
|
361
|
+
</span>
|
|
362
|
+
<span
|
|
363
|
+
class="font-bold ${item.name === 'Beranda'
|
|
364
|
+
? 'text-[#00559a]'
|
|
365
|
+
: 'text-[#333] w-full'}"
|
|
366
|
+
>${decodeSpecialChars(item.name)}</span
|
|
367
|
+
>
|
|
368
|
+
|
|
369
|
+
${timedContent(item.redDot[0].start, item.redDot[0].end)
|
|
370
|
+
? html `<span
|
|
371
|
+
class="bg-orange-600 h-2 relative rounded-full w-2 -top-[12px]"
|
|
372
|
+
></span>`
|
|
373
|
+
: ''}
|
|
374
|
+
</div>
|
|
375
|
+
</div>
|
|
376
|
+
|
|
377
|
+
<!-- Toggle chevron -->
|
|
378
|
+
${this.hasChildren(item)
|
|
379
|
+
? html `
|
|
380
|
+
<span
|
|
381
|
+
class="text-xs bg-[#e1f0ff] flex justify-center items-center rounded my-1 p-4 w-10 h-10 cursor-pointer"
|
|
382
|
+
@click=${(e) => {
|
|
383
|
+
e.stopPropagation(); // Prevents click from bubbling to parent
|
|
384
|
+
this.toggleChildren(item);
|
|
385
|
+
}}
|
|
386
|
+
>
|
|
387
|
+
${this.expandedSlug === item.slug
|
|
388
|
+
? unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))
|
|
389
|
+
: unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}
|
|
390
|
+
</span>
|
|
391
|
+
`
|
|
392
|
+
: null}
|
|
393
|
+
</div>
|
|
394
|
+
|
|
395
|
+
<!-- Children items -->
|
|
396
|
+
${this.hasChildren(item) && this.expandedSlug === item.slug
|
|
397
|
+
? html `
|
|
398
|
+
<div class="pt-1 pb-2 space-y-1">
|
|
399
|
+
${item.children.map(child => html `
|
|
400
|
+
<div
|
|
401
|
+
class="flex items-center text-sm text-gray-600 px-4 cursor-pointer transition-all"
|
|
402
|
+
@click=${() => this.rubricClicked(child)}
|
|
403
|
+
>
|
|
404
|
+
<div
|
|
405
|
+
class="w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center pl-11"
|
|
406
|
+
>
|
|
407
|
+
${decodeSpecialChars(child.name)}
|
|
408
|
+
${timedContent(child.redDot[0].start, child.redDot[0].end)
|
|
409
|
+
? html `<span
|
|
410
|
+
class="bg-orange-600 h-2 relative rounded-full w-2 -top-[12px]"
|
|
411
|
+
></span>`
|
|
412
|
+
: ''}
|
|
413
|
+
</div>
|
|
414
|
+
</div>
|
|
415
|
+
`)}
|
|
416
|
+
</div>
|
|
417
|
+
`
|
|
418
|
+
: ''}
|
|
419
|
+
</div>
|
|
420
|
+
`)}
|
|
421
|
+
</div>
|
|
422
|
+
</div>
|
|
423
|
+
</div>
|
|
424
|
+
</nav>
|
|
425
|
+
`;
|
|
426
|
+
}
|
|
427
|
+
};
|
|
428
|
+
KompasMenuSideBar.styles = [
|
|
429
|
+
css `
|
|
430
|
+
.slide-side-enter-active,
|
|
431
|
+
.slide-side-leave-active {
|
|
432
|
+
transition: all 0.3s ease-out;
|
|
433
|
+
}
|
|
434
|
+
.slide-side-enter,
|
|
435
|
+
.slide-side-leave-to {
|
|
436
|
+
transform: translateX(-100%);
|
|
437
|
+
}
|
|
438
|
+
/* end: transisi buat sidebar */
|
|
439
|
+
.nuxt-link-exact-active {
|
|
440
|
+
@apply text-brand-1;
|
|
441
|
+
}
|
|
442
|
+
.menu-menu-sidebar {
|
|
443
|
+
z-index: 99999;
|
|
444
|
+
}
|
|
445
|
+
/* Force scrollbar to always show (for debugging) */
|
|
446
|
+
.menu-menu-sidebar::-webkit-scrollbar {
|
|
447
|
+
width: 4px;
|
|
448
|
+
}
|
|
449
|
+
|
|
450
|
+
.menu-menu-sidebar::-webkit-scrollbar-track {
|
|
451
|
+
background: white;
|
|
452
|
+
}
|
|
453
|
+
|
|
454
|
+
.menu-menu-sidebar::-webkit-scrollbar-thumb {
|
|
455
|
+
background-color: #00557d; /* Replace with your brand color */
|
|
456
|
+
border-radius: 8px;
|
|
457
|
+
}
|
|
458
|
+
|
|
459
|
+
.menu-menu-sidebar::-webkit-scrollbar-button,
|
|
460
|
+
.menu-menu-sidebar::-webkit-scrollbar-corner {
|
|
461
|
+
background-color: white;
|
|
462
|
+
}
|
|
463
|
+
`,
|
|
464
|
+
TWStyles,
|
|
465
|
+
];
|
|
466
|
+
__decorate([
|
|
467
|
+
property({ type: Array })
|
|
468
|
+
], KompasMenuSideBar.prototype, "dataExternal", void 0);
|
|
469
|
+
__decorate([
|
|
470
|
+
state()
|
|
471
|
+
], KompasMenuSideBar.prototype, "expandedSlug", void 0);
|
|
472
|
+
__decorate([
|
|
473
|
+
state()
|
|
474
|
+
], KompasMenuSideBar.prototype, "showNavBar", void 0);
|
|
475
|
+
KompasMenuSideBar = __decorate([
|
|
476
|
+
customElement('kompasid-menu-side-bar')
|
|
477
|
+
], KompasMenuSideBar);
|
|
478
|
+
export { KompasMenuSideBar };
|
|
479
|
+
//# sourceMappingURL=KompasMenuSideBar.js.map
|