npm - @kompasid/lit-web-components - Versions diffs - 0.8.6 → 0.8.8 - Mend

@kompasid/lit-web-components 0.8.6 → 0.8.8

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 (22) hide show

package/dist/src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.js CHANGED Viewed

@@ -1,9 +1,8 @@
 import { __decorate } from "tslib";
 import { html, css, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { format } from 'date-fns';
-import { id } from 'date-fns/locale/id';
 import { TWStyles } from '../../../tailwind/tailwind.js';
+import { useTimeDifference } from '../../utils/useTimeDIfference.js';
 let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault extends LitElement {
     constructor() {
         super(...arguments);
@@ -119,12 +118,6 @@ let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault
         const errorMessage = error instanceof Error ? error.message : 'Kesalahan tidak diketahui';
         alert(`Terjadi kesalahan: ${errorMessage}`);
     }
-    /**
-     * Function to format date
-     */
-    formatDate(date) {
-        return format(new Date(date), 'dd MMMM yyyy', { locale: id });
-    }
     /**
      * Render widget components
      */
@@ -161,12 +154,20 @@ let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault
     `;
     }
     renderChips(post) {
-        var _a, _b;
+        var _a, _b, _c;
         const chips = [];
         const isAnalisis = (_a = post.postTag) === null || _a === void 0 ? void 0 : _a.some(tag => tag.slug === 'analisis');
         const isEksklusif = (_b = post.postTag) === null || _b === void 0 ? void 0 : _b.some(tag => tag.slug === 'eksklusif');
+        const isKompasBrief = (_c = post.postTag) === null || _c === void 0 ? void 0 : _c.some(tag => tag.slug === 'kompas-brief');
         const isFreemium = post.isFreemium === true;
-        if (isEksklusif) {
+        if (isKompasBrief) {
+            chips.push(html `
+          <div class="flex">
+            <div class="chip bg-red-100 text-red-600">Kompas Brief</div>
+          </div>
+        `);
+        }
+        else if (isEksklusif) {
             chips.push(html `
           <div class="flex">
             <div class="chip bg-grey-600 text-white">
@@ -245,7 +246,7 @@ let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault
                 ? 'text-white'
                 : 'text-grey-600'}"
                             >
-                              ${this.formatDate(post.publishedDate)}
+                              ${useTimeDifference(post.publishedDate)}
                             </p>
                           </a>
                         </div>
@@ -279,7 +280,7 @@ let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault
                 ? 'text-white'
                 : 'text-grey-600'}"
                             >
-                              ${this.formatDate(post.publishedDate)}
+                              ${useTimeDifference(post.publishedDate)}
                             </p>
                           </a>
                         </div>

package/dist/src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"KompasWidgetRecirculationsDefault.js","sourceRoot":"","sources":["../../../../src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { format } from 'date-fns'\nimport { id } from 'date-fns/locale/id'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { Post } from './types.js'\n\n@customElement('kompasid-widget-recirculations-default')\nexport class KompasWidgetRecirculationsDefault extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n .chip {\n align-items: center;\n border-radius: 0.25rem;\n display: flex;\n font-family: 'PT Sans', sans-serif;\n font-size: 0.75rem;\n font-weight: bold;\n height: 1.5rem;\n justify-content: center;\n line-height: 1rem;\n margin-bottom: 0.25rem;\n padding: 0.375rem 0.5rem;\n }\n `,\n TWStyles,\n ]\n\n /*\n Props\n /\n @property({ type: Array }) posts: Post[][] = []\n @property({ type: String }) accessToken = ''\n @property({ type: String }) permalinkArticle = ''\n @property({ type: String }) userGuid = '0'\n @property({ type: String }) slugs = ''\n @property({ type: String }) type: 'relatedArticle' \| 'otherArticle' =\n 'relatedArticle'\n @property({ type: String }) mainCategory = ''\n @property({ type: String }) titleName = '' // contoh: Artikel Terkait / Lainnya dalam 'kategori'\n @property({ type: String }) titleLink = '' // contoh: /kategori/opini\n\n @property({ type: Boolean }) isDark = false\n\n /\n Fetch Data\n /\n async connectedCallback() {\n super.connectedCallback()\n try {\n await this.fetchAccessToken()\n if (this.type === 'relatedArticle') {\n await this.relatedArticles()\n } else if (this.type === 'otherArticle') {\n await this.otherArticles()\n }\n } catch (error) {\n this.handleFetchError(error)\n }\n }\n\n async fetchAccessToken() {\n const response = await fetch(\n 'https://api.kompas.id/account/api/v1/login/guest',\n {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({\n email: 'anonynous.user@kompas.id',\n }),\n }\n )\n\n const result = await response.json()\n\n if (result?.data?.accessToken) {\n this.accessToken = result.data.accessToken\n } else {\n throw new Error('Token akses tidak tersedia dalam respons')\n }\n }\n\n async relatedArticles() {\n if (!this.accessToken) {\n throw new Error('Token akses tidak tersedia')\n }\n\n const kompasApiAi = 'https://ai.kompas.id/api/v1'\n\n // Constructing parameters\n const params = new URLSearchParams()\n params.append('page_url', this.permalinkArticle)\n params.append('page_type', 'read')\n params.append('item_type', 'articles')\n params.append('guid', this.userGuid)\n params.append('slugs', this.slugs)\n\n // Constructing the URL with parameters\n const endpoint = `${kompasApiAi}/recommendation?${params.toString()}`\n\n const response = await fetch(endpoint, {\n headers: {\n Authorization: `Bearer ${this.accessToken}`,\n 'Content-Type': 'application/json',\n },\n })\n\n const result = await response.json()\n\n if (result?.result) {\n const items = result.result\n const firstChunk = items.slice(0, 5)\n const secondChunk = items.slice(5, 7)\n this.posts = [Object.freeze(firstChunk), Object.freeze(secondChunk)]\n console.log('related article:', this.posts)\n } else {\n throw new Error('Data artikel terkait tidak ditemukan')\n }\n }\n\n async otherArticles() {\n if (!this.accessToken) {\n throw new Error('Token akses tidak tersedia')\n }\n\n const kompasApiCdsSPA = 'https://cds.kompas.id/api/v1'\n\n // Constructing the URL with parameters\n const endpoint = `${kompasApiCdsSPA}/article/list/category/${this.mainCategory}`\n\n const response = await fetch(endpoint, {\n headers: {\n Authorization: `Bearer ${this.accessToken}`,\n 'Content-Type': 'application/json',\n },\n })\n\n const result = await response.json()\n\n if (result?.result) {\n const items = result.result\n const firstChunk = items.slice(0, 5)\n const secondChunk = items.slice(5, 7)\n this.posts = [Object.freeze(firstChunk), Object.freeze(secondChunk)]\n console.log('other article:', this.posts)\n } else {\n throw new Error('Data artikel lainnya tidak ditemukan')\n }\n }\n\n handleFetchError(error: unknown) {\n const errorMessage =\n error instanceof Error ? error.message : 'Kesalahan tidak diketahui'\n alert(`Terjadi kesalahan: ${errorMessage}`)\n }\n\n /\n Function to format date\n /\n formatDate(date: string) {\n return format(new Date(date), 'dd MMMM yyyy', { locale: id })\n }\n\n /\n Render widget components\n */\n\n private titleRelatedArticle() {\n return html`\n <div class=\"flex font-sans uppercase items-start mb-6 mt-8\">\n <div>\n <h5\n class=\"capitalize font-bold font-sans text-lg md:text-xl ${this\n .isDark\n ? 'text-white'\n : 'text-grey-600'}\"\n >\n Artikel Terkait\n </h5>\n </div>\n </div>\n `\n }\n\n private titleOtherArticle() {\n return html`\n <a\n href=\"${this.titleLink}\"\n class=\"flex font-sans uppercase items-start mb-6 mt-8\"\n >\n <h5\n class=\"capitalize font-bold font-sans text-lg md:text-xl ${this.isDark\n ? 'text-blue-200'\n : 'text-brand-1'}\"\n >\n ${this.titleName}\n </h5>\n </a>\n `\n }\n\n renderChips(post: Post) {\n const chips = []\n const isAnalisis = post.postTag?.some(tag => tag.slug === 'analisis')\n const isEksklusif = post.postTag?.some(tag => tag.slug === 'eksklusif')\n const isFreemium = post.isFreemium === true\n\n if (isEksklusif) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-grey-600 text-white\">\n <img\n src=\"https://cdn-www.kompas.id/assets/img/icons/kompas-icon-small.svg\"\n alt=\"Kompas Icon\"\n style=\"width: 16px; height: 16px; margin-right: 4px;\"\n />\n Eksklusif\n </div>\n </div>\n `\n )\n } else if (isFreemium) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-blue-100 text-brand-1\">Bebas Akses</div>\n </div>\n `\n )\n } else if (isAnalisis) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-orange-100 text-orange-500\">Analisis</div>\n </div>\n `\n )\n }\n\n return chips\n }\n\n renderImage(post: Post) {\n const { thumbnailMedium } = post.thumbnails?.sizes \|\| {}\n if (!thumbnailMedium) return ''\n\n const { permalink, width, height } = thumbnailMedium\n return html`\n <img\n src=\"${permalink}\"\n width=\"${width}\"\n height=\"${height}\"\n alt=\"${post.title}\"\n class=\"aspect-video object-cover w-full\"\n />\n `\n }\n\n render() {\n return html`\n <div class=\"w-full ${this.isDark ? 'bg-dark-5 ' : ''}\">\n <!-- start: widget title -->\n ${this.type === 'relatedArticle'\n ? this.titleRelatedArticle()\n : this.titleOtherArticle()}\n <!-- end: widget title -->\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8\">\n <!-- start: left-post-loop -->\n <div class=\"grid grid-cols-1 gap-6\">\n ${this.posts[0]\n ? this.posts[0].map(\n post => html`\n <div class=\"w-full\">\n <div class=\"flex\">\n <div class=\"w-1/2\">${this.renderImage(post)}</div>\n <div class=\"flex-grow pl-4 w-1/2\">\n <a href=\"${post.permalink}\">\n ${this.renderChips(post)}\n <h5\n class=\"hover:underline font-bold font-sans leading-tight text-lg md:text-xl ${this\n .isDark\n ? 'text-white'\n : 'text-grey-600'}\"\n >\n ${post.title}\n </h5>\n <p\n class=\"font-sans pt-2 text-sm ${this.isDark\n ? 'text-white'\n : 'text-grey-600'}\"\n >\n ${this.formatDate(post.publishedDate)}\n </p>\n </a>\n </div>\n </div>\n </div>\n `\n )\n : 'Belum ada artikel'}\n </div>\n <!-- end: left-post-loop -->\n\n <!-- start: right-post-loop -->\n <div class=\"flex flex-col w-full\">\n ${this.posts[1]\n ? this.posts[1].map(\n post => html`\n <div class=\"mb-6\">\n <div class=\"flex\">\n <div class=\"w-1/2\">${this.renderImage(post)}</div>\n <div class=\"flex-grow pl-4 w-1/2\">\n <a href=\"${post.permalink}\">\n ${this.renderChips(post)}\n <h5\n class=\"hover:underline font-bold font-sans leading-tight text-lg md:text-xl ${this\n .isDark\n ? 'text-white'\n : 'text-grey-600'}\"\n >\n ${post.title}\n </h5>\n <p\n class=\"font-sans pt-2 text-sm ${this.isDark\n ? 'text-white'\n : 'text-grey-600'}\"\n >\n ${this.formatDate(post.publishedDate)}\n </p>\n </a>\n </div>\n </div>\n </div>\n `\n )\n : ''}\n <!-- start: ads -->\n <slot></slot>\n <!-- end: ads -->\n </div>\n <!-- end: right-post-loop -->\n </div>\n </div>\n `\n }\n}\n"]}
1	+ {"version":3,"file":"KompasWidgetRecirculationsDefault.js","sourceRoot":"","sources":["../../../../src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { Post } from './types.js'\nimport { useTimeDifference } from '../../utils/useTimeDIfference.js'\n\n@customElement('kompasid-widget-recirculations-default')\nexport class KompasWidgetRecirculationsDefault extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n .chip {\n align-items: center;\n border-radius: 0.25rem;\n display: flex;\n font-family: 'PT Sans', sans-serif;\n font-size: 0.75rem;\n font-weight: bold;\n height: 1.5rem;\n justify-content: center;\n line-height: 1rem;\n margin-bottom: 0.25rem;\n padding: 0.375rem 0.5rem;\n }\n `,\n TWStyles,\n ]\n\n /*\n Props\n /\n @property({ type: Array }) posts: Post[][] = []\n @property({ type: String }) accessToken = ''\n @property({ type: String }) permalinkArticle = ''\n @property({ type: String }) userGuid = '0'\n @property({ type: String }) slugs = ''\n @property({ type: String }) type: 'relatedArticle' \| 'otherArticle' =\n 'relatedArticle'\n @property({ type: String }) mainCategory = ''\n @property({ type: String }) titleName = '' // contoh: Artikel Terkait / Lainnya dalam 'kategori'\n @property({ type: String }) titleLink = '' // contoh: /kategori/opini\n\n @property({ type: Boolean }) isDark = false\n\n /\n Fetch Data\n /\n async connectedCallback() {\n super.connectedCallback()\n try {\n await this.fetchAccessToken()\n if (this.type === 'relatedArticle') {\n await this.relatedArticles()\n } else if (this.type === 'otherArticle') {\n await this.otherArticles()\n }\n } catch (error) {\n this.handleFetchError(error)\n }\n }\n\n async fetchAccessToken() {\n const response = await fetch(\n 'https://api.kompas.id/account/api/v1/login/guest',\n {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({\n email: 'anonynous.user@kompas.id',\n }),\n }\n )\n\n const result = await response.json()\n\n if (result?.data?.accessToken) {\n this.accessToken = result.data.accessToken\n } else {\n throw new Error('Token akses tidak tersedia dalam respons')\n }\n }\n\n async relatedArticles() {\n if (!this.accessToken) {\n throw new Error('Token akses tidak tersedia')\n }\n\n const kompasApiAi = 'https://ai.kompas.id/api/v1'\n\n // Constructing parameters\n const params = new URLSearchParams()\n params.append('page_url', this.permalinkArticle)\n params.append('page_type', 'read')\n params.append('item_type', 'articles')\n params.append('guid', this.userGuid)\n params.append('slugs', this.slugs)\n\n // Constructing the URL with parameters\n const endpoint = `${kompasApiAi}/recommendation?${params.toString()}`\n\n const response = await fetch(endpoint, {\n headers: {\n Authorization: `Bearer ${this.accessToken}`,\n 'Content-Type': 'application/json',\n },\n })\n\n const result = await response.json()\n\n if (result?.result) {\n const items = result.result\n const firstChunk = items.slice(0, 5)\n const secondChunk = items.slice(5, 7)\n this.posts = [Object.freeze(firstChunk), Object.freeze(secondChunk)]\n console.log('related article:', this.posts)\n } else {\n throw new Error('Data artikel terkait tidak ditemukan')\n }\n }\n\n async otherArticles() {\n if (!this.accessToken) {\n throw new Error('Token akses tidak tersedia')\n }\n\n const kompasApiCdsSPA = 'https://cds.kompas.id/api/v1'\n\n // Constructing the URL with parameters\n const endpoint = `${kompasApiCdsSPA}/article/list/category/${this.mainCategory}`\n\n const response = await fetch(endpoint, {\n headers: {\n Authorization: `Bearer ${this.accessToken}`,\n 'Content-Type': 'application/json',\n },\n })\n\n const result = await response.json()\n\n if (result?.result) {\n const items = result.result\n const firstChunk = items.slice(0, 5)\n const secondChunk = items.slice(5, 7)\n this.posts = [Object.freeze(firstChunk), Object.freeze(secondChunk)]\n console.log('other article:', this.posts)\n } else {\n throw new Error('Data artikel lainnya tidak ditemukan')\n }\n }\n\n handleFetchError(error: unknown) {\n const errorMessage =\n error instanceof Error ? error.message : 'Kesalahan tidak diketahui'\n alert(`Terjadi kesalahan: ${errorMessage}`)\n }\n\n /\n Render widget components\n */\n\n private titleRelatedArticle() {\n return html`\n <div class=\"flex font-sans uppercase items-start mb-6 mt-8\">\n <div>\n <h5\n class=\"capitalize font-bold font-sans text-lg md:text-xl ${this\n .isDark\n ? 'text-white'\n : 'text-grey-600'}\"\n >\n Artikel Terkait\n </h5>\n </div>\n </div>\n `\n }\n\n private titleOtherArticle() {\n return html`\n <a\n href=\"${this.titleLink}\"\n class=\"flex font-sans uppercase items-start mb-6 mt-8\"\n >\n <h5\n class=\"capitalize font-bold font-sans text-lg md:text-xl ${this.isDark\n ? 'text-blue-200'\n : 'text-brand-1'}\"\n >\n ${this.titleName}\n </h5>\n </a>\n `\n }\n\n renderChips(post: Post) {\n const chips = []\n const isAnalisis = post.postTag?.some(tag => tag.slug === 'analisis')\n const isEksklusif = post.postTag?.some(tag => tag.slug === 'eksklusif')\n const isKompasBrief = post.postTag?.some(tag => tag.slug === 'kompas-brief')\n const isFreemium = post.isFreemium === true\n\n if (isKompasBrief) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-red-100 text-red-600\">Kompas Brief</div>\n </div>\n `\n )\n } else if (isEksklusif) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-grey-600 text-white\">\n <img\n src=\"https://cdn-www.kompas.id/assets/img/icons/kompas-icon-small.svg\"\n alt=\"Kompas Icon\"\n style=\"width: 16px; height: 16px; margin-right: 4px;\"\n />\n Eksklusif\n </div>\n </div>\n `\n )\n } else if (isFreemium) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-blue-100 text-brand-1\">Bebas Akses</div>\n </div>\n `\n )\n } else if (isAnalisis) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-orange-100 text-orange-500\">Analisis</div>\n </div>\n `\n )\n }\n\n return chips\n }\n\n renderImage(post: Post) {\n const { thumbnailMedium } = post.thumbnails?.sizes \|\| {}\n if (!thumbnailMedium) return ''\n\n const { permalink, width, height } = thumbnailMedium\n return html`\n <img\n src=\"${permalink}\"\n width=\"${width}\"\n height=\"${height}\"\n alt=\"${post.title}\"\n class=\"aspect-video object-cover w-full\"\n />\n `\n }\n\n render() {\n return html`\n <div class=\"w-full ${this.isDark ? 'bg-dark-5 ' : ''}\">\n <!-- start: widget title -->\n ${this.type === 'relatedArticle'\n ? this.titleRelatedArticle()\n : this.titleOtherArticle()}\n <!-- end: widget title -->\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8\">\n <!-- start: left-post-loop -->\n <div class=\"grid grid-cols-1 gap-6\">\n ${this.posts[0]\n ? this.posts[0].map(\n post => html`\n <div class=\"w-full\">\n <div class=\"flex\">\n <div class=\"w-1/2\">${this.renderImage(post)}</div>\n <div class=\"flex-grow pl-4 w-1/2\">\n <a href=\"${post.permalink}\">\n ${this.renderChips(post)}\n <h5\n class=\"hover:underline font-bold font-sans leading-tight text-lg md:text-xl ${this\n .isDark\n ? 'text-white'\n : 'text-grey-600'}\"\n >\n ${post.title}\n </h5>\n <p\n class=\"font-sans pt-2 text-sm ${this.isDark\n ? 'text-white'\n : 'text-grey-600'}\"\n >\n ${useTimeDifference(post.publishedDate)}\n </p>\n </a>\n </div>\n </div>\n </div>\n `\n )\n : 'Belum ada artikel'}\n </div>\n <!-- end: left-post-loop -->\n\n <!-- start: right-post-loop -->\n <div class=\"flex flex-col w-full\">\n ${this.posts[1]\n ? this.posts[1].map(\n post => html`\n <div class=\"mb-6\">\n <div class=\"flex\">\n <div class=\"w-1/2\">${this.renderImage(post)}</div>\n <div class=\"flex-grow pl-4 w-1/2\">\n <a href=\"${post.permalink}\">\n ${this.renderChips(post)}\n <h5\n class=\"hover:underline font-bold font-sans leading-tight text-lg md:text-xl ${this\n .isDark\n ? 'text-white'\n : 'text-grey-600'}\"\n >\n ${post.title}\n </h5>\n <p\n class=\"font-sans pt-2 text-sm ${this.isDark\n ? 'text-white'\n : 'text-grey-600'}\"\n >\n ${useTimeDifference(post.publishedDate)}\n </p>\n </a>\n </div>\n </div>\n </div>\n `\n )\n : ''}\n <!-- start: ads -->\n <slot></slot>\n <!-- end: ads -->\n </div>\n <!-- end: right-post-loop -->\n </div>\n </div>\n `\n }\n}\n"]}

package/dist/src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.d.ts CHANGED Viewed

@@ -7,6 +7,7 @@ interface ListItem {
     isAnalisis?: boolean;
     isEksklusif?: boolean;
     isFreemium?: boolean;
+    isKompasBrief?: boolean;
     permalink: string;
     publishedDate?: string;
     postTag?: PostTag[];
@@ -21,7 +22,6 @@ export declare class KompasWidgetRecirculationsList extends LitElement {
     connectedCallback(): Promise<void>;
     fetchAccessToken(): Promise<void>;
     fetchArticles(): Promise<void>;
-    formatDate(date: string): string;
     handleFetchError(error: unknown): void;
     renderChips(item: ListItem): import("lit").TemplateResult<1>[];
     render(): import("lit").TemplateResult<1>;

package/dist/src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.js CHANGED Viewed

@@ -1,9 +1,8 @@
 import { __decorate } from "tslib";
 import { html, css, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { format } from 'date-fns';
-import { id } from 'date-fns/locale/id';
 import { TWStyles } from '../../../tailwind/tailwind.js';
+import { useTimeDifference } from '../../utils/useTimeDIfference.js';
 let KompasWidgetRecirculationsList = class KompasWidgetRecirculationsList extends LitElement {
     constructor() {
         super(...arguments);
@@ -59,10 +58,12 @@ let KompasWidgetRecirculationsList = class KompasWidgetRecirculationsList extend
                 const { postTag = [], isFreemium = false, title, permalink, publishedDate, } = article;
                 const isAnalisis = postTag.some((tag) => tag.slug === 'analisis');
                 const isEksklusif = postTag.some((tag) => tag.slug === 'eksklusif');
+                const isKompasBrief = postTag.some((tag) => tag.slug === 'kompas-brief');
                 return {
                     isAnalisis,
                     isEksklusif,
                     isFreemium,
+                    isKompasBrief,
                     title,
                     permalink,
                     publishedDate,
@@ -73,23 +74,20 @@ let KompasWidgetRecirculationsList = class KompasWidgetRecirculationsList extend
             throw new Error('Data artikel populer tidak ditemukan');
         }
     }
-    formatDate(date) {
-        return format(new Date(date), "dd MMMM yyyy' · 'HH:mm' WIB", { locale: id });
-    }
     handleFetchError(error) {
         const errorMessage = error instanceof Error ? error.message : 'Kesalahan tidak diketahui';
         alert(`Terjadi kesalahan: ${errorMessage}`);
     }
     renderChips(item) {
         const chips = [];
-        if (item.isAnalisis) {
+        if (item.isKompasBrief) {
             chips.push(html `
           <div class="flex">
-            <div class="chip bg-orange-100 text-orange-500">Analisis</div>
+            <div class="chip bg-red-100 text-red-600">Kompas Brief</div>
           </div>
         `);
         }
-        if (item.isEksklusif) {
+        else if (item.isEksklusif) {
             chips.push(html `
           <div class="flex">
             <div class="chip bg-grey-600 text-white">
@@ -103,13 +101,20 @@ let KompasWidgetRecirculationsList = class KompasWidgetRecirculationsList extend
           </div>
         `);
         }
-        if (item.isFreemium) {
+        else if (item.isFreemium) {
             chips.push(html `
           <div class="flex">
             <div class="chip bg-blue-100 text-brand-1">Bebas Akses</div>
           </div>
         `);
         }
+        else if (item.isAnalisis) {
+            chips.push(html `
+          <div class="flex">
+            <div class="chip bg-orange-100 text-orange-500">Analisis</div>
+          </div>
+        `);
+        }
         return chips;
     }
     render() {
@@ -148,7 +153,7 @@ let KompasWidgetRecirculationsList = class KompasWidgetRecirculationsList extend
             : 'text-grey-500'}"
                       >
                         ${item.publishedDate
-            ? this.formatDate(item.publishedDate)
+            ? useTimeDifference(item.publishedDate, true)
             : 'Tanggal tidak tersedia'}
                       </div>
                     </div>

package/dist/src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"KompasWidgetRecirculationsList.js","sourceRoot":"","sources":["../../../../src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { format } from 'date-fns'\nimport { id } from 'date-fns/locale/id'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\n\ninterface PostTag {\n slug: string\n}\n\ninterface ListItem {\n title: string\n isAnalisis?: boolean\n isEksklusif?: boolean\n isFreemium?: boolean\n permalink: string\n publishedDate?: string\n postTag?: PostTag[]\n}\n\n@customElement('kompasid-widget-recirculations-list')\nexport class KompasWidgetRecirculationsList extends LitElement {\n @property({ type: String }) widgetTitle = ''\n @property({ type: Array }) articleList: ListItem[] = []\n @property({ type: String }) accessToken = ''\n @property({ type: String }) apiSlug = ''\n\n @property({ type: Boolean }) isDark = false\n\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n .chip {\n align-items: center;\n border-radius: 0.25rem;\n display: flex;\n font-family: 'PT Sans', sans-serif;\n font-size: 0.75rem;\n font-weight: bold;\n height: 1.5rem;\n justify-content: center;\n line-height: 1rem;\n margin-bottom: 0.25rem;\n padding: 0.375rem 0.5rem;\n }\n `,\n TWStyles,\n ]\n\n async connectedCallback() {\n super.connectedCallback()\n try {\n await this.fetchAccessToken()\n await this.fetchArticles()\n } catch (error) {\n this.handleFetchError(error)\n }\n }\n\n async fetchAccessToken() {\n const response = await fetch(\n 'https://api.kompas.id/account/api/v1/login/guest',\n {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({\n email: 'anonynous.user@kompas.id',\n }),\n }\n )\n\n const result = await response.json()\n\n if (result?.data?.accessToken) {\n this.accessToken = result.data.accessToken\n } else {\n throw new Error('Token akses tidak tersedia dalam respons')\n }\n }\n\n async fetchArticles() {\n if (!this.accessToken) {\n throw new Error('Token akses tidak tersedia')\n }\n\n const endpoint = `https://cds.kompas.id/api/v1/article/${this.apiSlug}`\n\n const response = await fetch(endpoint, {\n headers: {\n Authorization: `Bearer ${this.accessToken}`,\n 'Content-Type': 'application/json',\n },\n })\n\n const result = await response.json()\n\n if (result?.result) {\n this.articleList = result.result.map(\n (article: {\n postTag?: never[] \| undefined\n isFreemium?: false \| undefined\n title: any\n permalink: any\n publishedDate: any\n }) => {\n const {\n postTag = [],\n isFreemium = false,\n title,\n permalink,\n publishedDate,\n } = article\n\n const isAnalisis = postTag.some(\n (tag: { slug: string }) => tag.slug === 'analisis'\n )\n const isEksklusif = postTag.some(\n (tag: { slug: string }) => tag.slug === 'eksklusif'\n )\n\n return {\n isAnalisis,\n isEksklusif,\n isFreemium,\n title,\n permalink,\n publishedDate,\n }\n }\n )\n } else {\n throw new Error('Data artikel populer tidak ditemukan')\n }\n }\n\n formatDate(date: string) {\n return format(new Date(date), \"dd MMMM yyyy' · 'HH:mm' WIB\", { locale: id })\n }\n\n handleFetchError(error: unknown) {\n const errorMessage =\n error instanceof Error ? error.message : 'Kesalahan tidak diketahui'\n alert(`Terjadi kesalahan: ${errorMessage}`)\n }\n\n renderChips(item: ListItem) {\n const chips = []\n\n if (item.isAnalisis) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-orange-100 text-orange-500\">Analisis</div>\n </div>\n `\n )\n }\n\n if (item.isEksklusif) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-grey-600 text-white\">\n <img\n src=\"https://cdn-www.kompas.id/assets/img/icons/kompas-icon-small.svg\"\n alt=\"Kompas Icon\"\n style=\"width: 16px; height: 16px; margin-right: 4px;\"\n />\n Eksklusif\n </div>\n </div>\n `\n )\n }\n\n if (item.isFreemium) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-blue-100 text-brand-1\">Bebas Akses</div>\n </div>\n `\n )\n }\n\n return chips\n }\n\n render() {\n return html`\n <div class=\"${this.isDark ? 'bg-dark-5 ' : ''}\">\n <div class=\"mb-6\">\n <h5\n class=\"capitalize font-bold font-sans text-lg md:text-xl ${this\n .isDark\n ? 'text-white'\n : 'text-grey-600'}\"\n >\n ${this.widgetTitle}\n </h5>\n </div>\n\n <ul class=\"flex flex-col\">\n ${this.articleList.slice(0, 5).map(\n item =>\n html`\n <li class=\"flex flex-col items-start mb-3\">\n <div class=\"flex w-full\">\n <div class=\"flex flex-col w-full\">\n ${this.renderChips(item)}\n <a\n href=\"${item.permalink}\"\n class=\"font-bold font-lora hover:underline leading-normal text-xl ${this\n .isDark\n ? 'text-white'\n : 'text-grey-600'}\"\n >\n ${item.title}\n </a>\n <div\n class=\"flex w-full flex-row font-sans items-center leading-normal justify-between pt-2 text-sm ${this\n .isDark\n ? 'text-white'\n : 'text-grey-500'}\"\n >\n ${item.publishedDate\n ? this.formatDate(item.publishedDate)\n : 'Tanggal tidak tersedia'}\n </div>\n </div>\n </div>\n </li>\n `\n )}\n </ul>\n </div>\n `\n }\n}\n"]}
1	+ {"version":3,"file":"KompasWidgetRecirculationsList.js","sourceRoot":"","sources":["../../../../src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { useTimeDifference } from '../../utils/useTimeDIfference.js'\n\ninterface PostTag {\n slug: string\n}\n\ninterface ListItem {\n title: string\n isAnalisis?: boolean\n isEksklusif?: boolean\n isFreemium?: boolean\n isKompasBrief?: boolean\n permalink: string\n publishedDate?: string\n postTag?: PostTag[]\n}\n\n@customElement('kompasid-widget-recirculations-list')\nexport class KompasWidgetRecirculationsList extends LitElement {\n @property({ type: String }) widgetTitle = ''\n @property({ type: Array }) articleList: ListItem[] = []\n @property({ type: String }) accessToken = ''\n @property({ type: String }) apiSlug = ''\n\n @property({ type: Boolean }) isDark = false\n\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n .chip {\n align-items: center;\n border-radius: 0.25rem;\n display: flex;\n font-family: 'PT Sans', sans-serif;\n font-size: 0.75rem;\n font-weight: bold;\n height: 1.5rem;\n justify-content: center;\n line-height: 1rem;\n margin-bottom: 0.25rem;\n padding: 0.375rem 0.5rem;\n }\n `,\n TWStyles,\n ]\n\n async connectedCallback() {\n super.connectedCallback()\n try {\n await this.fetchAccessToken()\n await this.fetchArticles()\n } catch (error) {\n this.handleFetchError(error)\n }\n }\n\n async fetchAccessToken() {\n const response = await fetch(\n 'https://api.kompas.id/account/api/v1/login/guest',\n {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({\n email: 'anonynous.user@kompas.id',\n }),\n }\n )\n\n const result = await response.json()\n\n if (result?.data?.accessToken) {\n this.accessToken = result.data.accessToken\n } else {\n throw new Error('Token akses tidak tersedia dalam respons')\n }\n }\n\n async fetchArticles() {\n if (!this.accessToken) {\n throw new Error('Token akses tidak tersedia')\n }\n\n const endpoint = `https://cds.kompas.id/api/v1/article/${this.apiSlug}`\n\n const response = await fetch(endpoint, {\n headers: {\n Authorization: `Bearer ${this.accessToken}`,\n 'Content-Type': 'application/json',\n },\n })\n\n const result = await response.json()\n\n if (result?.result) {\n this.articleList = result.result.map(\n (article: {\n postTag?: never[] \| undefined\n isFreemium?: false \| undefined\n title: any\n permalink: any\n publishedDate: any\n }) => {\n const {\n postTag = [],\n isFreemium = false,\n title,\n permalink,\n publishedDate,\n } = article\n\n const isAnalisis = postTag.some(\n (tag: { slug: string }) => tag.slug === 'analisis'\n )\n const isEksklusif = postTag.some(\n (tag: { slug: string }) => tag.slug === 'eksklusif'\n )\n const isKompasBrief = postTag.some(\n (tag: { slug: string }) => tag.slug === 'kompas-brief'\n )\n\n return {\n isAnalisis,\n isEksklusif,\n isFreemium,\n isKompasBrief,\n title,\n permalink,\n publishedDate,\n }\n }\n )\n } else {\n throw new Error('Data artikel populer tidak ditemukan')\n }\n }\n\n handleFetchError(error: unknown) {\n const errorMessage =\n error instanceof Error ? error.message : 'Kesalahan tidak diketahui'\n alert(`Terjadi kesalahan: ${errorMessage}`)\n }\n\n renderChips(item: ListItem) {\n const chips = []\n\n if (item.isKompasBrief) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-red-100 text-red-600\">Kompas Brief</div>\n </div>\n `\n )\n } else if (item.isEksklusif) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-grey-600 text-white\">\n <img\n src=\"https://cdn-www.kompas.id/assets/img/icons/kompas-icon-small.svg\"\n alt=\"Kompas Icon\"\n style=\"width: 16px; height: 16px; margin-right: 4px;\"\n />\n Eksklusif\n </div>\n </div>\n `\n )\n } else if (item.isFreemium) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-blue-100 text-brand-1\">Bebas Akses</div>\n </div>\n `\n )\n } else if (item.isAnalisis) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-orange-100 text-orange-500\">Analisis</div>\n </div>\n `\n )\n }\n\n return chips\n }\n\n render() {\n return html`\n <div class=\"${this.isDark ? 'bg-dark-5 ' : ''}\">\n <div class=\"mb-6\">\n <h5\n class=\"capitalize font-bold font-sans text-lg md:text-xl ${this\n .isDark\n ? 'text-white'\n : 'text-grey-600'}\"\n >\n ${this.widgetTitle}\n </h5>\n </div>\n\n <ul class=\"flex flex-col\">\n ${this.articleList.slice(0, 5).map(\n item =>\n html`\n <li class=\"flex flex-col items-start mb-3\">\n <div class=\"flex w-full\">\n <div class=\"flex flex-col w-full\">\n ${this.renderChips(item)}\n <a\n href=\"${item.permalink}\"\n class=\"font-bold font-lora hover:underline leading-normal text-xl ${this\n .isDark\n ? 'text-white'\n : 'text-grey-600'}\"\n >\n ${item.title}\n </a>\n <div\n class=\"flex w-full flex-row font-sans items-center leading-normal justify-between pt-2 text-sm ${this\n .isDark\n ? 'text-white'\n : 'text-grey-500'}\"\n >\n ${item.publishedDate\n ? useTimeDifference(item.publishedDate, true)\n : 'Tanggal tidak tersedia'}\n </div>\n </div>\n </div>\n </li>\n `\n )}\n </ul>\n </div>\n `\n }\n}\n"]}

package/dist/src/utils/useTimeDIfference.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const useTimeDifference: (dt: string, showTime?: boolean) => string;

package/dist/src/utils/useTimeDIfference.js ADDED Viewed

@@ -0,0 +1,27 @@
+import { id } from 'date-fns/locale/id';
+import { differenceInMinutes, differenceInHours, format, isToday, } from 'date-fns';
+export const useTimeDifference = (dt, showTime = false) => {
+    const currentDate = new Date();
+    if (isToday(dt)) {
+        // If the date is today
+        const minutesDifference = differenceInMinutes(currentDate, dt);
+        if (minutesDifference < 60) {
+            return `${minutesDifference} menit lalu`; // If less than 1 hour
+        }
+        const hoursDifference = differenceInHours(currentDate, dt);
+        return `${hoursDifference} jam lalu`; // If more than 1 hour
+    }
+    const hoursDifference = differenceInHours(currentDate, dt);
+    if (hoursDifference < 24) {
+        // If the date is within the last 24 hours
+        return `${hoursDifference} jam lalu`;
+    }
+    // If the date is more than 24 hours ago
+    const formattedDate = format(dt, 'dd MMMM yyyy', { locale: id });
+    if (showTime) {
+        const formattedTime = format(dt, "HH:mm 'WIB'"); // Format time to include WIB
+        return `${formattedDate} · ${formattedTime}`; // Return date and time
+    }
+    return formattedDate; // Return only the date if showTime is false
+};
+//# sourceMappingURL=useTimeDIfference.js.map

package/dist/src/utils/useTimeDIfference.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useTimeDIfference.js","sourceRoot":"","sources":["../../../src/utils/useTimeDIfference.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AACvC,OAAO,EACL,mBAAmB,EACnB,iBAAiB,EACjB,MAAM,EACN,OAAO,GACR,MAAM,UAAU,CAAA;AAEjB,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAAU,EAAE,QAAQ,GAAG,KAAK,EAAE,EAAE;IAChE,MAAM,WAAW,GAAG,IAAI,IAAI,EAAE,CAAA;IAE9B,IAAI,OAAO,CAAC,EAAE,CAAC,EAAE;QACf,uBAAuB;QACvB,MAAM,iBAAiB,GAAG,mBAAmB,CAAC,WAAW,EAAE,EAAE,CAAC,CAAA;QAE9D,IAAI,iBAAiB,GAAG,EAAE,EAAE;YAC1B,OAAO,GAAG,iBAAiB,aAAa,CAAA,CAAC,sBAAsB;SAChE;QACD,MAAM,eAAe,GAAG,iBAAiB,CAAC,WAAW,EAAE,EAAE,CAAC,CAAA;QAC1D,OAAO,GAAG,eAAe,WAAW,CAAA,CAAC,sBAAsB;KAC5D;IACD,MAAM,eAAe,GAAG,iBAAiB,CAAC,WAAW,EAAE,EAAE,CAAC,CAAA;IAE1D,IAAI,eAAe,GAAG,EAAE,EAAE;QACxB,0CAA0C;QAC1C,OAAO,GAAG,eAAe,WAAW,CAAA;KACrC;IACD,wCAAwC;IACxC,MAAM,aAAa,GAAG,MAAM,CAAC,EAAE,EAAE,cAAc,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAA;IAEhE,IAAI,QAAQ,EAAE;QACZ,MAAM,aAAa,GAAG,MAAM,CAAC,EAAE,EAAE,aAAa,CAAC,CAAA,CAAC,6BAA6B;QAC7E,OAAO,GAAG,aAAa,MAAM,aAAa,EAAE,CAAA,CAAC,uBAAuB;KACrE;IAED,OAAO,aAAa,CAAA,CAAC,4CAA4C;AACnE,CAAC,CAAA","sourcesContent":["import { id } from 'date-fns/locale/id'\nimport {\n differenceInMinutes,\n differenceInHours,\n format,\n isToday,\n} from 'date-fns'\n\nexport const useTimeDifference = (dt: string, showTime = false) => {\n const currentDate = new Date()\n\n if (isToday(dt)) {\n // If the date is today\n const minutesDifference = differenceInMinutes(currentDate, dt)\n\n if (minutesDifference < 60) {\n return `${minutesDifference} menit lalu` // If less than 1 hour\n }\n const hoursDifference = differenceInHours(currentDate, dt)\n return `${hoursDifference} jam lalu` // If more than 1 hour\n }\n const hoursDifference = differenceInHours(currentDate, dt)\n\n if (hoursDifference < 24) {\n // If the date is within the last 24 hours\n return `${hoursDifference} jam lalu`\n }\n // If the date is more than 24 hours ago\n const formattedDate = format(dt, 'dd MMMM yyyy', { locale: id })\n\n if (showTime) {\n const formattedTime = format(dt, \"HH:mm 'WIB'\") // Format time to include WIB\n return `${formattedDate} · ${formattedTime}` // Return date and time\n }\n\n return formattedDate // Return only the date if showTime is false\n}\n"]}