@kompasid/lit-web-components 0.6.8 → 0.7.0

package/demo/index.html

@@ -45,6 +45,8 @@
 
     <script type="module">
       import { html, render } from 'lit'
+      import '../dist/src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.js'
+      import '../dist/src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.js'
       import '../dist/src/components/kompasid-footer/KompasFooter.js'
       import '../dist/src/components/kompasid-paywall/KompasPaywall.js'
       import '../dist/src/components/kompasid-paywall-video/KompasPaywallVideo.js'
@@ -108,6 +110,22 @@
           updateMembership: 'Perbarui Langganan',
       }
 
+      const widgetRelatedPost = {
+        navigation: {
+          name: 'Artikel Terkait',
+          permalink: undefined
+        },
+        permalinkArticle: 'https://www.kompas.id/baca/opini/2024/05/02/pesan-bung-karno-jaga-persatuan-dan-keutuhan?open_from=Section_Artikel_Lainnya',
+        slugs: 'persatuan,bung-karno, surat pembaca, eduard lukman, bharoto, wira hardiprakoso, vision'
+      }
+
+      const widgetOtherPost = {
+        navigation: {
+          name: 'Lainnya Dalam Opini',
+          permalink: '/kategori/opini'
+        }
+      }
+
       render(
         html`
           <kompasid-header-account
@@ -122,6 +140,22 @@
             .read_later_url=${readLaterUrl}
             .total_grace_period=${totalGracePeriod}
           ></kompasid-header-account>
+
+          <kompasid-widget-recirculations-default
+            .navigation=${widgetRelatedPost.navigation}
+            .permalinkArticle=${widgetRelatedPost.permalinkArticle}
+            .slugs=${widgetRelatedPost.slugs}
+          ></kompasid-widget-recirculations-default>
+
+          <kompasid-widget-recirculations-default
+            .navigation=${widgetOtherPost.navigation}
+            type='otherArticle'
+            mainCategory='opini'
+          ></kompasid-widget-recirculations-default>
+
+          <kompasid-widget-recirculations-list widgetTitle="Terpopuler" apiSlug="popular-article">
+          </kompasid-widget-recirculations-list>
+
           <kompasid-paywall
             .type=${type}
             .theme=${theme}

package/dist/src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.d.ts

@@ -0,0 +1,39 @@
+import { LitElement } from 'lit';
+import { Post, Navigation } from './types.js';
+export declare class KompasWidgetRecirculationsDefault extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Props
+     */
+    posts: Post[][];
+    navigation: Navigation | undefined;
+    accessToken: string;
+    permalinkArticle: string;
+    userGuid: string;
+    slugs: string;
+    type: 'relatedArticle' | 'otherArticle';
+    mainCategory: string;
+    /**
+     * Getters
+     */
+    get navigationPermalink(): string | undefined;
+    /**
+     * Fetch Data
+     */
+    connectedCallback(): Promise<void>;
+    fetchAccessToken(): Promise<void>;
+    relatedArticles(): Promise<void>;
+    otherArticles(): Promise<void>;
+    handleFetchError(error: unknown): void;
+    /**
+     * Function to format date
+     */
+    formatDate(date: string): string;
+    /**
+     * Render widget components
+     */
+    private WidgetTitle;
+    renderChips(post: Post): import("lit").TemplateResult<1>[];
+    renderImage(post: Post): import("lit").TemplateResult<1> | "";
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,340 @@
+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';
+let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Props
+         */
+        this.posts = [];
+        this.navigation = undefined;
+        this.accessToken = '';
+        this.permalinkArticle = '';
+        this.userGuid = '0';
+        this.slugs = '';
+        this.type = 'relatedArticle';
+        this.mainCategory = '';
+    }
+    /**
+     * Getters
+     */
+    get navigationPermalink() {
+        var _a;
+        return (_a = this.navigation) === null || _a === void 0 ? void 0 : _a.permalink;
+    }
+    /**
+     * Fetch Data
+     */
+    async connectedCallback() {
+        super.connectedCallback();
+        try {
+            await this.fetchAccessToken();
+            if (this.type === 'relatedArticle') {
+                await this.relatedArticles();
+            }
+            else if (this.type === 'otherArticle') {
+                await this.otherArticles();
+            }
+        }
+        catch (error) {
+            this.handleFetchError(error);
+        }
+    }
+    async fetchAccessToken() {
+        var _a;
+        const response = await fetch('https://api.kompas.id/account/api/v1/login/guest', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                email: 'anonynous.user@kompas.id',
+            }),
+        });
+        const result = await response.json();
+        if ((_a = result === null || result === void 0 ? void 0 : result.data) === null || _a === void 0 ? void 0 : _a.accessToken) {
+            this.accessToken = result.data.accessToken;
+        }
+        else {
+            throw new Error('Token akses tidak tersedia dalam respons');
+        }
+    }
+    async relatedArticles() {
+        if (!this.accessToken) {
+            throw new Error('Token akses tidak tersedia');
+        }
+        const kompasApiAi = 'https://ai.kompas.id/api/v1';
+        // Constructing parameters
+        const params = new URLSearchParams();
+        params.append('page_url', this.permalinkArticle);
+        params.append('page_type', 'read');
+        params.append('item_type', 'articles');
+        params.append('guid', this.userGuid);
+        params.append('slugs', this.slugs);
+        // Constructing the URL with parameters
+        const endpoint = `${kompasApiAi}/recommendation?${params.toString()}`;
+        const response = await fetch(endpoint, {
+            headers: {
+                Authorization: `Bearer ${this.accessToken}`,
+                'Content-Type': 'application/json',
+            },
+        });
+        const result = await response.json();
+        if (result === null || result === void 0 ? void 0 : result.result) {
+            const items = result.result;
+            const firstChunk = items.slice(0, 5);
+            const secondChunk = items.slice(5, 7);
+            this.posts = [Object.freeze(firstChunk), Object.freeze(secondChunk)];
+            console.log('related article:', this.posts);
+        }
+        else {
+            throw new Error('Data artikel terkait tidak ditemukan');
+        }
+    }
+    async otherArticles() {
+        if (!this.accessToken) {
+            throw new Error('Token akses tidak tersedia');
+        }
+        const kompasApiCdsSPA = 'https://cds.kompas.id/api/v1';
+        // Constructing the URL with parameters
+        const endpoint = `${kompasApiCdsSPA}/article/list/category/${this.mainCategory}`;
+        const response = await fetch(endpoint, {
+            headers: {
+                Authorization: `Bearer ${this.accessToken}`,
+                'Content-Type': 'application/json',
+            },
+        });
+        const result = await response.json();
+        if (result === null || result === void 0 ? void 0 : result.result) {
+            const items = result.result;
+            const firstChunk = items.slice(0, 5);
+            const secondChunk = items.slice(5, 7);
+            this.posts = [Object.freeze(firstChunk), Object.freeze(secondChunk)];
+            console.log('other article:', this.posts);
+        }
+        else {
+            throw new Error('Data artikel lainnya tidak ditemukan');
+        }
+    }
+    handleFetchError(error) {
+        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
+     */
+    WidgetTitle() {
+        var _a, _b;
+        if (this.navigationPermalink) {
+            return html `
+        <a
+          href="${this.navigationPermalink}"
+          class="flex font-sans uppercase items-start mb-6 mt-8"
+        >
+          <h5
+            class="${[
+                'capitalize font-bold font-sans',
+                this.navigationPermalink ? 'text-brand-1' : 'text-grey-600',
+            ].join(' ')}"
+          >
+            ${(_a = this.navigation) === null || _a === void 0 ? void 0 : _a.name}
+          </h5>
+        </a>
+      `;
+        }
+        return html `
+      <div class="flex font-sans uppercase items-start mb-6 mt-8">
+        <div>
+          <h5
+            class="${[
+            'capitalize font-bold font-sans',
+            this.navigationPermalink ? 'text-brand-1' : 'text-grey-600',
+        ].join(' ')}"
+          >
+            ${(_b = this.navigation) === null || _b === void 0 ? void 0 : _b.name}
+          </h5>
+        </div>
+      </div>
+    `;
+    }
+    renderChips(post) {
+        var _a, _b;
+        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 isFreemium = post.isFreemium === true;
+        if (isEksklusif) {
+            chips.push(html `
+          <div class="flex">
+            <div class="chip bg-grey-600 text-white">
+              <img
+                src="https://cdn-www.kompas.id/assets/img/icons/kompas-icon-small.svg"
+                alt="Kompas Icon"
+                style="width: 16px; height: 16px; margin-right: 4px;"
+              />
+              Eksklusif
+            </div>
+          </div>
+        `);
+        }
+        else if (isFreemium) {
+            chips.push(html `
+          <div class="flex">
+            <div class="chip bg-blue-100 text-brand-1">Bebas Akses</div>
+          </div>
+        `);
+        }
+        else if (isAnalisis) {
+            chips.push(html `
+          <div class="flex">
+            <div class="chip bg-orange-100 text-orange-500">Analisis</div>
+          </div>
+        `);
+        }
+        return chips;
+    }
+    renderImage(post) {
+        var _a;
+        const { thumbnailMedium } = ((_a = post.thumbnails) === null || _a === void 0 ? void 0 : _a.sizes) || {};
+        if (!thumbnailMedium)
+            return '';
+        const { permalink, width, height } = thumbnailMedium;
+        return html `
+      <img
+        src="${permalink}"
+        width="${width}"
+        height="${height}"
+        alt="${post.title}"
+        class="aspect-video object-cover w-full"
+      />
+    `;
+    }
+    render() {
+        return html `
+      <div class="w-full">
+        <!-- start: widget title -->
+        ${this.WidgetTitle()}
+        <!-- end: widget title -->
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
+          <!-- start: left-post-loop -->
+          <div class="grid grid-cols-1 gap-6">
+            ${this.posts[0]
+            ? this.posts[0].map(post => html `
+                    <div class="w-full">
+                      <div class="flex">
+                        <div class="w-1/2">${this.renderImage(post)}</div>
+                        <div class="flex-grow pl-4 w-1/2">
+                          <a href="${post.permalink}">
+                            ${this.renderChips(post)}
+                            <h5
+                              class="hover:underline font-bold font-sans leading-tight text-grey-600"
+                            >
+                              ${post.title}
+                            </h5>
+                            <p class="text-grey-600 pt-2">
+                              ${this.formatDate(post.publishedDate)}
+                            </p>
+                          </a>
+                        </div>
+                      </div>
+                    </div>
+                  `)
+            : 'Belum ada artikel'}
+          </div>
+          <!-- end: left-post-loop -->
+
+          <!-- start: right-post-loop -->
+          <div class="flex flex-col w-full">
+            ${this.posts[1]
+            ? this.posts[1].map(post => html `
+                    <div class="mb-6">
+                      <div class="flex">
+                        <div class="w-1/2">${this.renderImage(post)}</div>
+                        <div class="flex-grow pl-4 w-1/2">
+                          <a href="${post.permalink}">
+                            ${this.renderChips(post)}
+                            <h5
+                              class="hover:underline font-bold font-sans leading-tight text-grey-600"
+                            >
+                              ${post.title}
+                            </h5>
+                            <p class="text-grey-600 pt-2">
+                              ${this.formatDate(post.publishedDate)}
+                            </p>
+                          </a>
+                        </div>
+                      </div>
+                    </div>
+                  `)
+            : ''}
+            <!-- start: ads -->
+            <slot></slot>
+            <!-- end: ads -->
+          </div>
+          <!-- end: right-post-loop -->
+        </div>
+      </div>
+    `;
+    }
+};
+KompasWidgetRecirculationsDefault.styles = [
+    css `
+      :host {
+        font-family: 'PT Sans', sans-serif;
+      }
+      .chip {
+        align-items: center;
+        border-radius: 0.25rem;
+        display: flex;
+        font-family: 'PT Sans', sans-serif;
+        font-size: 0.75rem;
+        font-weight: bold;
+        height: 1.5rem;
+        justify-content: center;
+        line-height: 1rem;
+        margin-bottom: 0.25rem;
+        padding: 0.375rem 0.5rem;
+      }
+    `,
+    TWStyles,
+];
+__decorate([
+    property({ type: Array })
+], KompasWidgetRecirculationsDefault.prototype, "posts", void 0);
+__decorate([
+    property({ type: Object })
+], KompasWidgetRecirculationsDefault.prototype, "navigation", void 0);
+__decorate([
+    property({ type: String })
+], KompasWidgetRecirculationsDefault.prototype, "accessToken", void 0);
+__decorate([
+    property({ type: String })
+], KompasWidgetRecirculationsDefault.prototype, "permalinkArticle", void 0);
+__decorate([
+    property({ type: String })
+], KompasWidgetRecirculationsDefault.prototype, "userGuid", void 0);
+__decorate([
+    property({ type: String })
+], KompasWidgetRecirculationsDefault.prototype, "slugs", void 0);
+__decorate([
+    property({ type: String })
+], KompasWidgetRecirculationsDefault.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], KompasWidgetRecirculationsDefault.prototype, "mainCategory", void 0);
+KompasWidgetRecirculationsDefault = __decorate([
+    customElement('kompasid-widget-recirculations-default')
+], KompasWidgetRecirculationsDefault);
+export { KompasWidgetRecirculationsDefault };
+//# sourceMappingURL=KompasWidgetRecirculationsDefault.js.map

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

@@ -0,0 +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, Navigation } 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: Object }) navigation: Navigation | undefined = undefined\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\n  /**\n   * Getters\n   */\n  get navigationPermalink(): string | undefined {\n    return this.navigation?.permalink\n  }\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 WidgetTitle() {\n    if (this.navigationPermalink) {\n      return html`\n        <a\n          href=\"${this.navigationPermalink}\"\n          class=\"flex font-sans uppercase items-start mb-6 mt-8\"\n        >\n          <h5\n            class=\"${[\n              'capitalize font-bold font-sans',\n              this.navigationPermalink ? 'text-brand-1' : 'text-grey-600',\n            ].join(' ')}\"\n          >\n            ${this.navigation?.name}\n          </h5>\n        </a>\n      `\n    }\n\n    return html`\n      <div class=\"flex font-sans uppercase items-start mb-6 mt-8\">\n        <div>\n          <h5\n            class=\"${[\n              'capitalize font-bold font-sans',\n              this.navigationPermalink ? 'text-brand-1' : 'text-grey-600',\n            ].join(' ')}\"\n          >\n            ${this.navigation?.name}\n          </h5>\n        </div>\n      </div>\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\">\n        <!-- start: widget title -->\n        ${this.WidgetTitle()}\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-grey-600\"\n                            >\n                              ${post.title}\n                            </h5>\n                            <p class=\"text-grey-600 pt-2\">\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-grey-600\"\n                            >\n                              ${post.title}\n                            </h5>\n                            <p class=\"text-grey-600 pt-2\">\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"]}

package/dist/src/components/kompasid-widget-recirculations-default/types.d.ts

@@ -0,0 +1,27 @@
+interface PostTag {
+    slug: string;
+}
+export interface Post {
+    title: string;
+    isAnalisis?: boolean;
+    isEksklusif?: boolean;
+    isFreemium?: boolean;
+    featuredImageThumbnailMedium: string;
+    permalink: string;
+    publishedDate: string;
+    postTag?: PostTag[];
+    thumbnails: {
+        sizes: {
+            thumbnailMedium: {
+                permalink: string;
+                width: number;
+                height: number;
+            };
+        };
+    };
+}
+export interface Navigation {
+    name: string;
+    permalink: string;
+}
+export {};

package/dist/src/components/kompasid-widget-recirculations-default/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/src/components/kompasid-widget-recirculations-default/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kompasid-widget-recirculations-default/types.ts"],"names":[],"mappings":"","sourcesContent":["interface PostTag {\n  slug: string\n}\n\nexport interface Post {\n  title: string\n  isAnalisis?: boolean\n  isEksklusif?: boolean\n  isFreemium?: boolean\n  featuredImageThumbnailMedium: string\n  permalink: string\n  publishedDate: string\n  postTag?: PostTag[]\n  thumbnails: {\n    sizes: {\n      thumbnailMedium: {\n        permalink: string\n        width: number\n        height: number\n      }\n    }\n  }\n}\n\nexport interface Navigation {\n  name: string\n  permalink: string\n}\n"]}

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

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+interface PostTag {
+    slug: string;
+}
+interface ListItem {
+    title: string;
+    isAnalisis?: boolean;
+    isEksklusif?: boolean;
+    isFreemium?: boolean;
+    permalink: string;
+    publishedDate?: string;
+    postTag?: PostTag[];
+}
+export declare class KompasWidgetRecirculationsList extends LitElement {
+    widgetTitle: string;
+    articleList: ListItem[];
+    accessToken: string;
+    apiSlug: string;
+    static styles: import("lit").CSSResult[];
+    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>;
+}
+export {};