@kompasid/lit-web-components 0.9.11 → 0.9.13

package/dist/src/components/kompasid-freewall-head/old_KompasFreewallHead.js

@@ -0,0 +1,125 @@
+import { __decorate } from "tslib";
+import { html, css, LitElement, nothing } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import { TWStyles } from '../../../tailwind/tailwind.js';
+import { addGoogleFonts } from '../../utils/googleFont.js';
+import { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js';
+let KompasFreewallHead = class KompasFreewallHead extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Props
+         */
+        /**
+         * property isLogin untuk menghandle apakah user sudah login atau belum
+         * property type untuk menghandle tipe freewall
+         * property head_copy_expand to update copy header when expand
+         * property head_copy_collapse to update copy header when collapse
+         * property expand to handle expand/collapse
+         * property toggleExpand to handle toggle expand/collapse
+         * property onSubscriptionClick to handle cta when subscription button is clicked
+         */
+        this.isLogin = false;
+        this.type = 'article';
+        this.head_copy_expand = '';
+        this.head_copy_collapse = '';
+        this.expand = true;
+        this.toggleExpand = () => { };
+        this.onSubscriptionClick = () => { };
+        this.packageData = {};
+        this.jsonPackageData = {};
+    }
+    /**
+     * Getter
+     */
+    get headCopy() {
+        return ((this.expand ? this.head_copy_expand : this.head_copy_collapse) ||
+            'Akses seluruh konten dan fitur Kompas.id dengan berlangganan.');
+    }
+    /**
+     * Lifecycle
+     */
+    async connectedCallback() {
+        super.connectedCallback();
+        await this.updateComplete;
+        addGoogleFonts(['pt-sans']);
+    }
+    /**
+     * Render Statement
+     */
+    render() {
+        return html `
+      <div class="flex flex-col px-4 md:px-0 space-y-4 pt-4 pb-5 md:py-2">
+        <div class="flex justify-between items-center h-full">
+          <div
+            class="hidden ${this.expand ? 'md:block' : 'lg:block'} w-9 h-9"
+          ></div>
+          <div class="flex items-center md:justify-start">
+            <p class="w-full text-grey-600">${this.headCopy}</p>
+            ${!this.expand
+            ? html `<button
+                  @click=${this.onSubscriptionClick}
+                  class="bg-green-500 hidden md:block ml-3 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]"
+                >
+                  ${this.jsonPackageData.subscriptionButtonText}
+                </button>`
+            : nothing}
+          </div>
+          <div>
+            <button
+              @click=${this.toggleExpand}
+              aria-label="Toggle Expand"
+              class="h-9 w-9 flex ml-2 items-center justify-center text-blue-500 rounded bg-blue-200"
+            >
+              <div class="${!this.expand && 'rotate-180'}">
+                ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}
+              </div>
+            </button>
+          </div>
+        </div>
+        ${!this.expand
+            ? html `<button
+              @click=${this.onSubscriptionClick}
+              class="bg-green-500 block md:hidden whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]"
+            >
+              ${this.jsonPackageData.subscriptionButtonText}
+            </button>`
+            : nothing}
+      </div>
+    `;
+    }
+};
+KompasFreewallHead.styles = [css ``, TWStyles];
+__decorate([
+    property({ type: Boolean })
+], KompasFreewallHead.prototype, "isLogin", void 0);
+__decorate([
+    property({ type: String })
+], KompasFreewallHead.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], KompasFreewallHead.prototype, "head_copy_expand", void 0);
+__decorate([
+    property({ type: String })
+], KompasFreewallHead.prototype, "head_copy_collapse", void 0);
+__decorate([
+    property({ type: Boolean })
+], KompasFreewallHead.prototype, "expand", void 0);
+__decorate([
+    property()
+], KompasFreewallHead.prototype, "toggleExpand", void 0);
+__decorate([
+    property()
+], KompasFreewallHead.prototype, "onSubscriptionClick", void 0);
+__decorate([
+    property({ type: Object })
+], KompasFreewallHead.prototype, "packageData", void 0);
+__decorate([
+    property({ type: Object })
+], KompasFreewallHead.prototype, "jsonPackageData", void 0);
+KompasFreewallHead = __decorate([
+    customElement('kompasid-freewall-head')
+], KompasFreewallHead);
+export { KompasFreewallHead };
+//# sourceMappingURL=old_KompasFreewallHead.js.map

package/dist/src/components/kompasid-freewall-head/old_KompasFreewallHead.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"old_KompasFreewallHead.js","sourceRoot":"","sources":["../../../../src/components/kompasid-freewall-head/old_KompasFreewallHead.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement, nothing } from 'lit'\nimport { property, customElement } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { addGoogleFonts } from '../../utils/googleFont.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { JsonPackageData, PackageData } from '../kompasid-freewall/types.js'\n\n@customElement('kompasid-freewall-head')\nexport class KompasFreewallHead extends LitElement {\n  static styles = [css``, TWStyles]\n\n  /**\n   * Props\n   */\n  /**\n   * property isLogin untuk menghandle apakah user sudah login atau belum\n   * property type untuk menghandle tipe freewall\n   * property head_copy_expand to update copy header when expand\n   * property head_copy_collapse to update copy header when collapse\n   * property expand to handle expand/collapse\n   * property toggleExpand to handle toggle expand/collapse\n   * property onSubscriptionClick to handle cta when subscription button is clicked\n   */\n\n  @property({ type: Boolean }) isLogin = false\n  @property({ type: String }) type: 'article' | 'landing_page' = 'article'\n  @property({ type: String }) head_copy_expand = ''\n  @property({ type: String }) head_copy_collapse = ''\n  @property({ type: Boolean }) expand = true\n  @property() toggleExpand = () => {}\n  @property() onSubscriptionClick = () => {}\n  @property({ type: Object }) packageData: PackageData = {} as PackageData\n  @property({ type: Object }) jsonPackageData: JsonPackageData =\n    {} as JsonPackageData\n\n  /**\n   * Getter\n   */\n\n  get headCopy() {\n    return (\n      (this.expand ? this.head_copy_expand : this.head_copy_collapse) ||\n      'Akses seluruh konten dan fitur Kompas.id dengan berlangganan.'\n    )\n  }\n\n  /**\n   * Lifecycle\n   */\n\n  override async connectedCallback() {\n    super.connectedCallback()\n    await this.updateComplete\n    addGoogleFonts(['pt-sans'])\n  }\n\n  /**\n   * Render Statement\n   */\n\n  render() {\n    return html`\n      <div class=\"flex flex-col px-4 md:px-0 space-y-4 pt-4 pb-5 md:py-2\">\n        <div class=\"flex justify-between items-center h-full\">\n          <div\n            class=\"hidden ${this.expand ? 'md:block' : 'lg:block'} w-9 h-9\"\n          ></div>\n          <div class=\"flex items-center md:justify-start\">\n            <p class=\"w-full text-grey-600\">${this.headCopy}</p>\n            ${!this.expand\n              ? html`<button\n                  @click=${this.onSubscriptionClick}\n                  class=\"bg-green-500 hidden md:block ml-3 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]\"\n                >\n                  ${this.jsonPackageData.subscriptionButtonText}\n                </button>`\n              : nothing}\n          </div>\n          <div>\n            <button\n              @click=${this.toggleExpand}\n              aria-label=\"Toggle Expand\"\n              class=\"h-9 w-9 flex ml-2 items-center justify-center text-blue-500 rounded bg-blue-200\"\n            >\n              <div class=\"${!this.expand && 'rotate-180'}\">\n                ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}\n              </div>\n            </button>\n          </div>\n        </div>\n        ${!this.expand\n          ? html`<button\n              @click=${this.onSubscriptionClick}\n              class=\"bg-green-500 block md:hidden whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]\"\n            >\n              ${this.jsonPackageData.subscriptionButtonText}\n            </button>`\n          : nothing}\n      </div>\n    `\n  }\n}\n"]}

package/dist/src/components/kompasid-grace-period/KompasGracePeriod.js

@@ -106,7 +106,7 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
         this.dataLayeronPerbaruiLanggananButton();
         const originHost = encodeURIComponent(window.location.href);
         this.sendGtmEvent('subscribe_button_clicked');
-        window.open(`${this.checkoutPage}/kdp?productId=${this.paywall_subscription_id}&referrer=${originHost}&source=${this.source}`);
+        window.open(`${this.checkoutPage}/v2/kdp?productId=${this.paywall_subscription_id}&autorenewal=1&referrer=${originHost}&source=${this.source}`);
     }
     getGtmParams(excludeSubscriptionParams = false) {
         const gtmParams = {};

package/dist/src/components/kompasid-grace-period/KompasGracePeriod.js.map

@@ -1 +1 @@
-{"version":3,"file":"KompasGracePeriod.js","sourceRoot":"","sources":["../../../../src/components/kompasid-grace-period/KompasGracePeriod.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { deviceType } from '../../utils/deviceType.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\n\n@customElement('kompasid-grace-period')\nexport class KompasGracePeriod extends LitElement {\n  static styles = [\n    css`\n      :host {\n        font-family: 'PT Sans', sans-serif;\n      }\n\n      .body {\n        position: sticky;\n        top: 0;\n        height: 100%;\n        width: 100%;\n      }\n    `,\n    TWStyles,\n  ]\n\n  /**\n   * Props\n   */\n  /**\n   * property totalGracePeriod = how many days are left in grace period\n   * property isColumn = changes how the component looks on different screen sizes\n   * property isShowButton = shows or hides a subscription button\n   * property isEpaper = is paywall opened in epaper page\n   * property paywall_location = the location where user encounter the paywall\n   * property paywall_subscription_package = the name of the subscription package viewed by user\n   * property paywall_subscription_id = the ID of the subscription package viewed by user\n   * property paywall_subscription_price = the price of the subscriprtion package viewed by user\n   * property paywall_position = the position of the subscription package viewed by user\n   * property tracker_page_type = type of the page\n   * property tracker_content_id = ID of article (slug)\n   * property tracker_content_type = whether it's free article or paid article\n   * property tracker_content_title = the title of article\n   * property tracker_content_categories = the category of the content\n   * property tracker_user_type = type of user based on their subscription\n   * property tracker_subscription_status = status of their subscription\n   * property tracker_page_domain = page Domain\n   * property tracker_metered_wall_type = the type of Metered Wall\n   * property tracker_metered_wall_balance = the balance of their metered wall\n   * property tracker_epaper_edition = the edition of epaper viewed by user\n   */\n\n  @property({ type: Number }) totalGracePeriod = 0\n  @property({ type: Boolean }) isColumn = false\n  @property({ type: Boolean }) isShowButton = true\n  @property({ type: Boolean }) isEpaper = false\n  @property({ type: Boolean }) isBackgroundOnContentOnly = false\n  @property({ type: String }) source = 'article'\n  @property({ type: String }) paywall_location = ''\n  @property({ type: String }) paywall_subscription_package = ''\n  @property({ type: Number }) paywall_subscription_id = 0\n  @property({ type: Number }) paywall_subscription_price = 0\n  @property({ type: Number }) paywall_position = 0\n  @property({ type: String }) tracker_page_type = ''\n  @property({ type: String }) tracker_content_id = ''\n  @property({ type: String }) tracker_content_title = ''\n  @property({ type: String }) tracker_content_categories = ''\n  @property({ type: String }) tracker_content_type = ''\n  @property({ type: String }) tracker_user_type = ''\n  @property({ type: String }) tracker_subscription_status = ''\n  @property({ type: String }) tracker_page_domain = ''\n  @property({ type: String }) tracker_metered_wall_type = ''\n  @property({ type: Number }) tracker_metered_wall_balance = 0\n  @property({ type: String }) tracker_epaper_edition = ''\n\n  /**\n   * State\n   */\n  @state() private maxGracePeriod = 7\n  @state() private subscriptionPage = 'https://www.kompas.id/berlangganan'\n  @state() private checkoutPage = 'https://checkoutv2.kompas.id'\n\n  private getCountdownGracePeriod() {\n    const { totalGracePeriod } = this\n    const { maxGracePeriod } = this\n    if (totalGracePeriod === 7) {\n      return html`\n        <p>\n          Anda dalam\n          <a\n            href=\"#\"\n            class=\"text-orange-500 underline font-bold cursor-pointer\"\n            @click=${this.redirectToKnowledgeBase}\n          >\n            hari terakhir\n          </a>\n          masa tenggang langganan. Segera perbarui paket langganan untuk tetap\n          mengakses konten premium tanpa batas.\n        </p>\n      `\n    }\n    return html`\n      <p>\n        Masa tenggang langganan Anda tersisa\n        <a\n          href=\"#\"\n          class=\"text-orange-500 underline font-bold cursor-pointer\"\n          @click=${this.redirectToKnowledgeBase}\n        >\n          ${maxGracePeriod - totalGracePeriod + 1} hari lagi </a\n        >. Segera perbarui paket langganan untuk tetap mengakses konten premium\n        tanpa batas.\n      </p>\n    `\n  }\n\n  private redirectToKnowledgeBase(): void {\n    window.open(\n      'https://kb.kompas.id/baca/berlangganan-kompas-id/masa-tenggang-atau-grace-period-langganan/',\n      '_blank'\n    )\n  }\n\n  private redirectToBerlangganan(): void {\n    this.dataLayeronPerbaruiLanggananButton()\n    this.sendGtmEvent('subscribe_button_clicked', true)\n\n    const url = `${this.subscriptionPage}?open_from=Grace_Period`\n    window.open(url)\n  }\n\n  private redirectToCheckout(): void {\n    this.dataLayeronPerbaruiLanggananButton()\n    const originHost: string = encodeURIComponent(window.location.href)\n\n    this.sendGtmEvent('subscribe_button_clicked')\n\n    window.open(\n      `${this.checkoutPage}/kdp?productId=${this.paywall_subscription_id}&referrer=${originHost}&source=${this.source}`\n    )\n  }\n\n  private getGtmParams(\n    excludeSubscriptionParams: boolean = false\n  ): Record<string, any> {\n    const gtmParams: Record<string, any> = {}\n\n    if (!this.isEpaper) {\n      gtmParams.content_title = this.tracker_content_title\n      gtmParams.content_id = this.tracker_content_id\n      gtmParams.content_categories = this.tracker_content_categories\n      gtmParams.content_type = this.tracker_content_type\n      gtmParams.page_type = this.tracker_page_type\n    } else {\n      gtmParams.epaper_edition = this.tracker_epaper_edition\n    }\n\n    if (!excludeSubscriptionParams) {\n      gtmParams.paywall_subscription_package = this.paywall_subscription_package\n      gtmParams.paywall_subscription_id = this.paywall_subscription_id\n      gtmParams.paywall_subscription_price = this.paywall_subscription_price\n    }\n\n    gtmParams.paywall_location = this.paywall_location\n    gtmParams.paywall_position = this.paywall_position\n    gtmParams.user_type = this.tracker_user_type\n    gtmParams.subscription_status = this.tracker_subscription_status\n    gtmParams.page_domain = this.tracker_page_domain || 'Kompas.id'\n    gtmParams.metered_wall_type = this.tracker_metered_wall_type || 'GP'\n    gtmParams.metered_wall_balance = this.tracker_metered_wall_balance\n\n    return gtmParams\n  }\n\n  private sendGtmEvent(\n    event: string,\n    excludeSubscriptionParams: boolean = false\n  ) {\n    let gtmParams: Record<string, any> = { event }\n\n    if (event === 'paywall_viewed') {\n      gtmParams.impressions = [\n        {\n          ...this.getGtmParams(excludeSubscriptionParams),\n        },\n      ]\n    } else {\n      gtmParams = {\n        ...gtmParams,\n        ...this.getGtmParams(excludeSubscriptionParams),\n      }\n    }\n\n    window.dataLayer.push(gtmParams)\n  }\n\n  private dataLayeronPerbaruiLanggananButton(): void {\n    window.dataLayer.push({\n      event: 'gracePeriodClick',\n      interface: deviceType(),\n      dayLeft: this.maxGracePeriod - this.totalGracePeriod,\n      urlName: window.location.href,\n    })\n  }\n\n  private dataLayeronGracePeriod(): void {\n    window.dataLayer.push({\n      event: 'gracePeriodImpression',\n      interface: deviceType(),\n      dayLeft: this.maxGracePeriod - this.totalGracePeriod,\n      urlName: window.location.href,\n    })\n  }\n\n  private gracePeriodTemplate() {\n    const { isColumn, isBackgroundOnContentOnly } = this\n\n    const wrapperColumnClass = isColumn\n      ? 'rounded-lg'\n      : 'md:flex-row lg:px-8 md:space-x-4 px-4 py-4'\n    const buttonColumnClass = isColumn\n      ? ''\n      : 'md:w-1/2 justify-end md:flex-row pt-4 md:pt-0'\n    const otherBtnColumnClass = isColumn ? '' : 'md:w-auto'\n    const wrapperBgClass = !isBackgroundOnContentOnly ? 'p-4' : ''\n    const contentBgClass = isBackgroundOnContentOnly\n      ? 'bg-orange-100 p-4 rounded-lg mb-4'\n      : ''\n\n    return html`\n      <div\n        class=\"bottom-0 mx-auto flex w-full max-w-7xl flex-col justify-end ${wrapperColumnClass} ${wrapperBgClass}\"\n      >\n        <div\n          class=\"self-center text-left text-sm text-grey-600 md:text-base ${contentBgClass}\"\n        >\n          ${this.getCountdownGracePeriod()}\n        </div>\n        ${this.isShowButton\n          ? html`\n              <div\n                class=\"flex w-full flex-col gap-4 self-center ${buttonColumnClass}\"\n              >\n                <button\n                  @click=${this.redirectToCheckout}\n                  class=\"w-full rounded-md bg-green-500 p-2 px-5 text-sm font-bold text-grey-100 md:w-auto md:text-base\"\n                >\n                  Perbarui Langganan\n                </button>\n                <div class=\"md:block hidden\">\n                  <button\n                    @click=${this.redirectToBerlangganan}\n                    class=\"bg-transparent w-full rounded-md border border-green-500 p-1.5 px-5 text-sm font-bold text-green-500 md:text-base ${otherBtnColumnClass}\"\n                  >\n                    Paket Lainnya\n                  </button>\n                </div>\n                <div class=\"md:hidden block\">\n                  <button\n                    @click=${this.redirectToBerlangganan}\n                    class=\"bg-transparent w-full rounded-md border border-green-500 p-1.5 px-5 text-sm font-bold text-green-500 md:text-base ${otherBtnColumnClass}\"\n                  >\n                    Lihat Paket Lainnya\n                  </button>\n                </div>\n              </div>\n            `\n          : nothing}\n      </div>\n    `\n  }\n\n  override async connectedCallback() {\n    super.connectedCallback()\n\n    this.sendGtmEvent('paywall_viewed')\n\n    this.dataLayeronGracePeriod()\n  }\n\n  render() {\n    const bgClass = !this.isBackgroundOnContentOnly\n      ? 'bg-orange-100 sticky bottom-0 z-20'\n      : ''\n    return html`\n      <div class=\"h-full w-full ${bgClass}\">\n        ${this.totalGracePeriod > 0 ? this.gracePeriodTemplate() : nothing}\n      </div>\n    `\n  }\n}\n"]}
+{"version":3,"file":"KompasGracePeriod.js","sourceRoot":"","sources":["../../../../src/components/kompasid-grace-period/KompasGracePeriod.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { deviceType } from '../../utils/deviceType.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\n\n@customElement('kompasid-grace-period')\nexport class KompasGracePeriod extends LitElement {\n  static styles = [\n    css`\n      :host {\n        font-family: 'PT Sans', sans-serif;\n      }\n\n      .body {\n        position: sticky;\n        top: 0;\n        height: 100%;\n        width: 100%;\n      }\n    `,\n    TWStyles,\n  ]\n\n  /**\n   * Props\n   */\n  /**\n   * property totalGracePeriod = how many days are left in grace period\n   * property isColumn = changes how the component looks on different screen sizes\n   * property isShowButton = shows or hides a subscription button\n   * property isEpaper = is paywall opened in epaper page\n   * property paywall_location = the location where user encounter the paywall\n   * property paywall_subscription_package = the name of the subscription package viewed by user\n   * property paywall_subscription_id = the ID of the subscription package viewed by user\n   * property paywall_subscription_price = the price of the subscriprtion package viewed by user\n   * property paywall_position = the position of the subscription package viewed by user\n   * property tracker_page_type = type of the page\n   * property tracker_content_id = ID of article (slug)\n   * property tracker_content_type = whether it's free article or paid article\n   * property tracker_content_title = the title of article\n   * property tracker_content_categories = the category of the content\n   * property tracker_user_type = type of user based on their subscription\n   * property tracker_subscription_status = status of their subscription\n   * property tracker_page_domain = page Domain\n   * property tracker_metered_wall_type = the type of Metered Wall\n   * property tracker_metered_wall_balance = the balance of their metered wall\n   * property tracker_epaper_edition = the edition of epaper viewed by user\n   */\n\n  @property({ type: Number }) totalGracePeriod = 0\n  @property({ type: Boolean }) isColumn = false\n  @property({ type: Boolean }) isShowButton = true\n  @property({ type: Boolean }) isEpaper = false\n  @property({ type: Boolean }) isBackgroundOnContentOnly = false\n  @property({ type: String }) source = 'article'\n  @property({ type: String }) paywall_location = ''\n  @property({ type: String }) paywall_subscription_package = ''\n  @property({ type: Number }) paywall_subscription_id = 0\n  @property({ type: Number }) paywall_subscription_price = 0\n  @property({ type: Number }) paywall_position = 0\n  @property({ type: String }) tracker_page_type = ''\n  @property({ type: String }) tracker_content_id = ''\n  @property({ type: String }) tracker_content_title = ''\n  @property({ type: String }) tracker_content_categories = ''\n  @property({ type: String }) tracker_content_type = ''\n  @property({ type: String }) tracker_user_type = ''\n  @property({ type: String }) tracker_subscription_status = ''\n  @property({ type: String }) tracker_page_domain = ''\n  @property({ type: String }) tracker_metered_wall_type = ''\n  @property({ type: Number }) tracker_metered_wall_balance = 0\n  @property({ type: String }) tracker_epaper_edition = ''\n\n  /**\n   * State\n   */\n  @state() private maxGracePeriod = 7\n  @state() private subscriptionPage = 'https://www.kompas.id/berlangganan'\n  @state() private checkoutPage = 'https://checkoutv2.kompas.id'\n\n  private getCountdownGracePeriod() {\n    const { totalGracePeriod } = this\n    const { maxGracePeriod } = this\n    if (totalGracePeriod === 7) {\n      return html`\n        <p>\n          Anda dalam\n          <a\n            href=\"#\"\n            class=\"text-orange-500 underline font-bold cursor-pointer\"\n            @click=${this.redirectToKnowledgeBase}\n          >\n            hari terakhir\n          </a>\n          masa tenggang langganan. Segera perbarui paket langganan untuk tetap\n          mengakses konten premium tanpa batas.\n        </p>\n      `\n    }\n    return html`\n      <p>\n        Masa tenggang langganan Anda tersisa\n        <a\n          href=\"#\"\n          class=\"text-orange-500 underline font-bold cursor-pointer\"\n          @click=${this.redirectToKnowledgeBase}\n        >\n          ${maxGracePeriod - totalGracePeriod + 1} hari lagi </a\n        >. Segera perbarui paket langganan untuk tetap mengakses konten premium\n        tanpa batas.\n      </p>\n    `\n  }\n\n  private redirectToKnowledgeBase(): void {\n    window.open(\n      'https://kb.kompas.id/baca/berlangganan-kompas-id/masa-tenggang-atau-grace-period-langganan/',\n      '_blank'\n    )\n  }\n\n  private redirectToBerlangganan(): void {\n    this.dataLayeronPerbaruiLanggananButton()\n    this.sendGtmEvent('subscribe_button_clicked', true)\n\n    const url = `${this.subscriptionPage}?open_from=Grace_Period`\n    window.open(url)\n  }\n\n  private redirectToCheckout(): void {\n    this.dataLayeronPerbaruiLanggananButton()\n    const originHost: string = encodeURIComponent(window.location.href)\n\n    this.sendGtmEvent('subscribe_button_clicked')\n\n    window.open(\n      `${this.checkoutPage}/v2/kdp?productId=${this.paywall_subscription_id}&autorenewal=1&referrer=${originHost}&source=${this.source}`\n    )\n  }\n\n  private getGtmParams(\n    excludeSubscriptionParams: boolean = false\n  ): Record<string, any> {\n    const gtmParams: Record<string, any> = {}\n\n    if (!this.isEpaper) {\n      gtmParams.content_title = this.tracker_content_title\n      gtmParams.content_id = this.tracker_content_id\n      gtmParams.content_categories = this.tracker_content_categories\n      gtmParams.content_type = this.tracker_content_type\n      gtmParams.page_type = this.tracker_page_type\n    } else {\n      gtmParams.epaper_edition = this.tracker_epaper_edition\n    }\n\n    if (!excludeSubscriptionParams) {\n      gtmParams.paywall_subscription_package = this.paywall_subscription_package\n      gtmParams.paywall_subscription_id = this.paywall_subscription_id\n      gtmParams.paywall_subscription_price = this.paywall_subscription_price\n    }\n\n    gtmParams.paywall_location = this.paywall_location\n    gtmParams.paywall_position = this.paywall_position\n    gtmParams.user_type = this.tracker_user_type\n    gtmParams.subscription_status = this.tracker_subscription_status\n    gtmParams.page_domain = this.tracker_page_domain || 'Kompas.id'\n    gtmParams.metered_wall_type = this.tracker_metered_wall_type || 'GP'\n    gtmParams.metered_wall_balance = this.tracker_metered_wall_balance\n\n    return gtmParams\n  }\n\n  private sendGtmEvent(\n    event: string,\n    excludeSubscriptionParams: boolean = false\n  ) {\n    let gtmParams: Record<string, any> = { event }\n\n    if (event === 'paywall_viewed') {\n      gtmParams.impressions = [\n        {\n          ...this.getGtmParams(excludeSubscriptionParams),\n        },\n      ]\n    } else {\n      gtmParams = {\n        ...gtmParams,\n        ...this.getGtmParams(excludeSubscriptionParams),\n      }\n    }\n\n    window.dataLayer.push(gtmParams)\n  }\n\n  private dataLayeronPerbaruiLanggananButton(): void {\n    window.dataLayer.push({\n      event: 'gracePeriodClick',\n      interface: deviceType(),\n      dayLeft: this.maxGracePeriod - this.totalGracePeriod,\n      urlName: window.location.href,\n    })\n  }\n\n  private dataLayeronGracePeriod(): void {\n    window.dataLayer.push({\n      event: 'gracePeriodImpression',\n      interface: deviceType(),\n      dayLeft: this.maxGracePeriod - this.totalGracePeriod,\n      urlName: window.location.href,\n    })\n  }\n\n  private gracePeriodTemplate() {\n    const { isColumn, isBackgroundOnContentOnly } = this\n\n    const wrapperColumnClass = isColumn\n      ? 'rounded-lg'\n      : 'md:flex-row lg:px-8 md:space-x-4 px-4 py-4'\n    const buttonColumnClass = isColumn\n      ? ''\n      : 'md:w-1/2 justify-end md:flex-row pt-4 md:pt-0'\n    const otherBtnColumnClass = isColumn ? '' : 'md:w-auto'\n    const wrapperBgClass = !isBackgroundOnContentOnly ? 'p-4' : ''\n    const contentBgClass = isBackgroundOnContentOnly\n      ? 'bg-orange-100 p-4 rounded-lg mb-4'\n      : ''\n\n    return html`\n      <div\n        class=\"bottom-0 mx-auto flex w-full max-w-7xl flex-col justify-end ${wrapperColumnClass} ${wrapperBgClass}\"\n      >\n        <div\n          class=\"self-center text-left text-sm text-grey-600 md:text-base ${contentBgClass}\"\n        >\n          ${this.getCountdownGracePeriod()}\n        </div>\n        ${this.isShowButton\n          ? html`\n              <div\n                class=\"flex w-full flex-col gap-4 self-center ${buttonColumnClass}\"\n              >\n                <button\n                  @click=${this.redirectToCheckout}\n                  class=\"w-full rounded-md bg-green-500 p-2 px-5 text-sm font-bold text-grey-100 md:w-auto md:text-base\"\n                >\n                  Perbarui Langganan\n                </button>\n                <div class=\"md:block hidden\">\n                  <button\n                    @click=${this.redirectToBerlangganan}\n                    class=\"bg-transparent w-full rounded-md border border-green-500 p-1.5 px-5 text-sm font-bold text-green-500 md:text-base ${otherBtnColumnClass}\"\n                  >\n                    Paket Lainnya\n                  </button>\n                </div>\n                <div class=\"md:hidden block\">\n                  <button\n                    @click=${this.redirectToBerlangganan}\n                    class=\"bg-transparent w-full rounded-md border border-green-500 p-1.5 px-5 text-sm font-bold text-green-500 md:text-base ${otherBtnColumnClass}\"\n                  >\n                    Lihat Paket Lainnya\n                  </button>\n                </div>\n              </div>\n            `\n          : nothing}\n      </div>\n    `\n  }\n\n  override async connectedCallback() {\n    super.connectedCallback()\n\n    this.sendGtmEvent('paywall_viewed')\n\n    this.dataLayeronGracePeriod()\n  }\n\n  render() {\n    const bgClass = !this.isBackgroundOnContentOnly\n      ? 'bg-orange-100 sticky bottom-0 z-20'\n      : ''\n    return html`\n      <div class=\"h-full w-full ${bgClass}\">\n        ${this.totalGracePeriod > 0 ? this.gracePeriodTemplate() : nothing}\n      </div>\n    `\n  }\n}\n"]}

package/dist/src/components/kompasid-menu-side-bar/KompasMenuSideBar.js

@@ -172,7 +172,7 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
             class="py-0.5 px-1.5 rounded-full"
             style="position: relative; display: inline-flex; background-color:#D71920;"
           >
-            <span class="font-bold font-pt-sans text-xs text-white capitalize"
+            <span class="font-bold font-sans text-xs text-white capitalize"
               >Baru</span
             >
           </div>
@@ -213,7 +213,7 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
                 ${unsafeSVG(getFontAwesomeIcon('fas', 'bars'))}
               </div>
               <span
-                class="font-pt-sans hidden sm:inline ml-2 tracking-wide font-bold ${this
+                class="font-sans hidden sm:inline ml-2 tracking-wide font-bold ${this
                 .isDark
                 ? 'text-[#FFFFFF]'
                 : 'text-brand-1'}"
@@ -272,9 +272,7 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
                             </div>
                           `
             : ''}
-                      <span
-                        class="font-pt-sans relative text-xs text-[#666666]"
-                      >
+                      <span class="font-sans relative text-xs text-[#666666]">
                         ${item.name}
                       </span>
                       <div class="ml-1">
@@ -290,7 +288,7 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
           <div class="flex">
             <div class="flex justify-between flex-col">
               ${this.dataSidebar.feature.map(item => html `
-                  <div class="w-full font-pt-sans">
+                  <div class="w-full font-sans">
                     <!-- Parent item -->
                     <div
                       class="flex items-center justify-between px-4 text-sm font-medium text-gray-700 transition-all cursor-pointer"
@@ -373,7 +371,7 @@ let KompasMenuSideBar = class KompasMenuSideBar extends LitElement {
           <div class="flex">
             <div class="w-full flex justify-between flex-col">
               ${this.dataSidebar.category.map(item => html `
-                  <div class="w-full font-pt-sans">
+                  <div class="w-full font-sans">
                     <!-- Parent item -->
                     <div
                       class="flex items-center justify-between text-sm font-medium px-4 transition-all cursor-pointer"

package/dist/src/components/kompasid-menu-side-bar/KompasMenuSideBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"KompasMenuSideBar.js","sourceRoot":"","sources":["../../../../src/components/kompasid-menu-side-bar/KompasMenuSideBar.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable lit-a11y/click-events-have-key-events */\nimport { html, css, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { decodeSpecialChars } from '../../utils/decodeSpecialChars.js'\nimport { timedContent } from '../../utils/timedContent.js'\n\ninterface DataExternalLink {\n  external?: boolean\n  gtmClass?: string\n  icon: object | null\n  iconify: string | null\n  isNew: boolean\n  name: string\n  url: string\n}\n\ninterface dataType {\n  href: string\n  external?: boolean\n  icon: object | null\n  iconify: string | null\n  name: string\n  slug: string\n  redDot: [\n    {\n      start: string\n      end: string\n    }\n  ]\n  children: [\n    {\n      href: string\n      external: boolean\n      icon: string\n      iconify: string | null\n      name: string\n      slug: string\n      redDot: [\n        {\n          start: string\n          end: string\n        }\n      ]\n    }\n  ]\n}\ninterface DataSideBarLink {\n  feature: dataType[]\n  category: dataType[]\n}\n\n@customElement('kompasid-menu-side-bar')\nexport class KompasMenuSideBar extends LitElement {\n  hasSlotContent = false\n  shadowRoot: any\n\n  firstUpdated() {\n    const slot = this.shadowRoot?.querySelector('slot')\n    const assignedNodes = slot!.assignedNodes({ flatten: true })\n\n    this.hasSlotContent = assignedNodes.length > 0\n  }\n\n  static styles = [\n    css`\n      .slide-side-enter-active,\n      .slide-side-leave-active {\n        transition: all 0.3s ease-out;\n      }\n      .slide-side-enter,\n      .slide-side-leave-to {\n        transform: translateX(-100%);\n      }\n      /* end: transisi buat sidebar */\n      .nuxt-link-exact-active {\n        @apply text-brand-1;\n      }\n      .menu-menu-sidebar {\n        z-index: 99999;\n      }\n      /* Force scrollbar to always show (for debugging) */\n      .menu-menu-sidebar::-webkit-scrollbar {\n        width: 4px;\n      }\n\n      .menu-menu-sidebar::-webkit-scrollbar-track {\n        background: white;\n      }\n\n      .menu-menu-sidebar::-webkit-scrollbar-thumb {\n        background-color: #00557d; /* Replace with your brand color */\n        border-radius: 8px;\n      }\n\n      .menu-menu-sidebar::-webkit-scrollbar-button,\n      .menu-menu-sidebar::-webkit-scrollbar-corner {\n        background-color: white;\n      }\n    `,\n    TWStyles,\n  ]\n  @property({ type: Array }) dataExternal: DataExternalLink[] = []\n  @property({ type: Boolean }) isDark = false\n\n  async connectedCallback() {\n    super.connectedCallback()\n    try {\n      await this.fetchExternal()\n    } catch (error) {\n      this.handleFetchError(error)\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  dataSidebar: DataSideBarLink = {\n    feature: [],\n    category: [],\n  }\n  async fetchExternal() {\n    // External\n    const endpointExternal = `https://cdn-www.kompas.id/assets/json/ApiMenuExternalLink.json`\n    const response = await fetch(endpointExternal, {\n      headers: {\n        'Content-Type': 'application/json',\n      },\n    })\n    const resultExternal = await response.json()\n    // eslint-disable-next-line no-undef\n    if (!resultExternal || !Array.isArray(resultExternal)) {\n      console.error(\n        'Error: resultExternal.result is undefined or not an array',\n        resultExternal\n      )\n      this.dataExternal = [] // Ensure dataExternal is an empty array instead of undefined\n    } else {\n      this.dataExternal = resultExternal.map(\n        (externalLink: Partial<DataExternalLink>) => ({\n          external: externalLink.external ?? false,\n          gtmClass: externalLink.gtmClass ?? '',\n          icon: externalLink.icon ?? null,\n          iconify: externalLink.iconify ?? null,\n          isNew: externalLink.isNew ?? false,\n          name: externalLink.name ?? '',\n          url: externalLink.url ?? '',\n        })\n      )\n    }\n    // Sidebar\n    const endpointSidebar = `https://cdn-www.kompas.id/assets/json/ApiMenuSideV2.json`\n    const responseSidebar = await fetch(endpointSidebar, {\n      headers: {\n        'Content-Type': 'application/json',\n      },\n    })\n    const resultSidebar = await responseSidebar.json()\n    // Validate the structure of the response\n    if (!resultSidebar || typeof resultSidebar !== 'object') {\n      console.error('Invalid response format:', resultSidebar)\n      return\n    }\n\n    // Convert object to an array\n    const sidebarArray = Object.values(resultSidebar)\n    const [featureArray, categoryArray] = sidebarArray as [any[], any[]]\n    const features: dataType[] =\n      featureArray?.map((item: any) => ({\n        href: item?.href ?? '',\n        external: item?.external ?? false,\n        icon: item?.icon ?? null,\n        iconify: item?.iconify ?? null,\n        name: item?.name ?? '',\n        slug: item?.slug ?? '',\n        redDot: [\n          {\n            start: item?.redDot?.start ?? '',\n            end: item?.redDot?.end ?? '',\n          },\n        ],\n        children: Array.isArray(item?.children)\n          ? item.children.map((child: any) => ({\n              href: child?.href ?? '',\n              external: child?.external ?? false,\n              icon: child?.icon ?? '',\n              iconify: child?.iconify ?? '',\n              name: child?.name ?? '',\n              slug: child?.slug ?? '',\n              redDot: [\n                {\n                  start: child?.redDot?.start ?? '',\n                  end: child?.redDot?.end ?? '',\n                },\n              ],\n            }))\n          : [],\n      })) ?? []\n\n    // Map category data\n    const categories: dataType[] =\n      categoryArray?.map((item: any) => ({\n        href: item?.href ?? '',\n        external: item?.external ?? false,\n        icon: item?.icon ?? null,\n        iconify: item?.iconify ?? null,\n        name: item?.name ?? '',\n        slug: item?.slug ?? '',\n        redDot: [\n          {\n            start: item?.redDot?.start ?? '',\n            end: item?.redDot?.end ?? '',\n          },\n        ],\n        children: Array.isArray(item?.children)\n          ? item.children.map((child: any) => ({\n              href: child?.href ?? '',\n              external: child?.external ?? false,\n              icon: child?.icon ?? '',\n              iconify: child?.iconify ?? '',\n              name: child?.name ?? '',\n              slug: child?.slug ?? '',\n              redDot: [\n                {\n                  start: child?.redDot?.start ?? '',\n                  end: child?.redDot?.end ?? '',\n                },\n              ],\n            }))\n          : [],\n      })) ?? []\n    this.dataSidebar = { feature: features, category: categories }\n    this.requestUpdate()\n  }\n\n  renderChips() {\n    const chips = []\n    chips.push(\n      html`\n        <div class=\"flex\">\n          <div\n            class=\"py-0.5 px-1.5 rounded-full\"\n            style=\"position: relative; display: inline-flex; background-color:#D71920;\"\n          >\n            <span class=\"font-bold font-pt-sans text-xs text-white capitalize\"\n              >Baru</span\n            >\n          </div>\n        </div>\n      `\n    )\n    return chips\n  }\n\n  hasChildren(item: any): boolean {\n    return Array.isArray(item?.children) && item.children.length > 0\n  }\n\n  rubricClicked(item: { name: string; href?: string }, event?: Event): void {\n    if (event) {\n      event.stopPropagation() // Prevent parent click event\n    }\n    if (item.href) {\n      window.location.href = item.href\n    }\n\n    // add data layer here\n  }\n\n  @state()\n  private expandedSlug: string | null = null\n  private toggleChildren(item: any) {\n    this.expandedSlug = this.expandedSlug === item.slug ? null : item.slug\n  }\n\n  @state()\n  private showNavBar: boolean = false\n\n  toggleNavSidebar = (e: Event) => {\n    e.stopPropagation() // prevent bubbling\n    this.showNavBar = !this.showNavBar\n  }\n\n  render() {\n    return html`\n      <!-- Button Menu -->\n      <div\n        class=\"w-fit flex items-center justify-center cursor-pointer relative\"\n        @click=${this.toggleNavSidebar}\n      >\n        <slot></slot>\n        ${!this.hasSlotContent\n          ? html`\n              <div\n                class=\"h-4 inline-flex ${this.isDark\n                  ? 'text-[#FFFFFF]'\n                  : 'text-brand-1'}\"\n              >\n                ${unsafeSVG(getFontAwesomeIcon('fas', 'bars'))}\n              </div>\n              <span\n                class=\"font-pt-sans hidden sm:inline ml-2 tracking-wide font-bold ${this\n                  .isDark\n                  ? 'text-[#FFFFFF]'\n                  : 'text-brand-1'}\"\n              >\n                Menu\n              </span>\n            `\n          : ''}\n      </div>\n      <!-- Side Menu -->\n      <nav\n        @click=${this.toggleNavSidebar}\n        class=${this.showNavBar\n          ? 'fixed left-0 top-0 w-screen z-[100]'\n          : 'hidden'}\n      >\n        <div\n          ref=\"toggle-nav-sidebar\"\n          class=\"bg-white h-screen menu-menu-sidebar overflow-y-auto pb-20 pt-0 shadow-lg\"\n          style=\"width: 312px;\"\n        >\n          <div\n            class=\"bg-[#FFFFFF] flex flex-col items-center justify-center mb-6 w-full\"\n          >\n            <div\n              ref=\"logo-kompas\"\n              class=\"flex items-center justify-between px-4 py-6 w-full\"\n            >\n              <a href=\"/\" class=\"flex h-9 w-9\">\n                <img\n                  src=\"https://cdn-www.kompas.id/assets/img/icons/kompas-icon-gold.svg\"\n                  alt=\"Kompas.id\"\n                  scale=\"0\"\n                  class=\"block w-full\"\n                />\n              </a>\n              <span\n                class=\"bg-[#E1F0FF] text-brand-1 cursor-pointer flex h-10 items-center justify-center rounded text-base w-10 py-4\"\n                @click=${this.toggleNavSidebar}\n              >\n                ${unsafeSVG(getFontAwesomeIcon('fa', 'times', 12, 12))}\n              </span>\n            </div>\n            <div class=\"flex flex-wrap px-4 w-full\">\n              ${this.dataExternal.map(\n                item => html`\n                  <a href=\"${item.url}\" class=\"flex w-1/2 no-underline\">\n                    <div\n                      class=\"cursor-pointer flex items-center pb-4 w-[312px]\"\n                    >\n                      ${item.icon &&\n                      Array.isArray(item.icon) &&\n                      item.icon.length >= 2\n                        ? html`\n                            <div class=\"flex mr-2 text-brand-1\">\n                              ${unsafeSVG(\n                                getFontAwesomeIcon(item.icon[0], item.icon[1])\n                              )}\n                            </div>\n                          `\n                        : ''}\n                      <span\n                        class=\"font-pt-sans relative text-xs text-[#666666]\"\n                      >\n                        ${item.name}\n                      </span>\n                      <div class=\"ml-1\">\n                        ${item.isNew ? this.renderChips() : ''}\n                      </div>\n                    </div>\n                  </a>\n                `\n              )}\n            </div>\n          </div>\n          <div class=\"border-b border-[#DDD] m-6 \"></div>\n          <!-- feature -->\n          <div class=\"flex\">\n            <div class=\"flex justify-between flex-col\">\n              ${this.dataSidebar.feature.map(\n                item => html`\n                  <div class=\"w-full font-pt-sans\">\n                    <!-- Parent item -->\n                    <div\n                      class=\"flex items-center justify-between px-4 text-sm font-medium text-gray-700 transition-all cursor-pointer\"\n                      @click=${(e: Event) => this.rubricClicked(item, e)}\n                    >\n                      <div\n                        class=\"w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center\"\n                      >\n                        <div class=\"flex items-center space-x-3\">\n                          <span\n                            class=\"text-xl text-brand-1 h-8 flex items-center \n                            ${item.icon === null ? 'w-8' : 'max-w-max w-8'}\"\n                          >\n                            ${item.icon &&\n                            Array.isArray(item.icon) &&\n                            item.icon.length >= 2\n                              ? unsafeSVG(\n                                  getFontAwesomeIcon(\n                                    item.icon[0],\n                                    item.icon[1],\n                                    20,\n                                    20\n                                  )\n                                )\n                              : ''}\n                          </span>\n                          <span class=\"font-bold relative text-[#333] w-full\"\n                            >${decodeSpecialChars(item.name)}</span\n                          >\n                          ${timedContent(\n                            item.redDot[0].start,\n                            item.redDot[0].end\n                          )\n                            ? html`<span\n                                class=\"bg-orange-400 h-2 relative rounded-full w-2 flex shrink-0 -top-[12px]\"\n                              ></span>`\n                            : ''}\n                        </div>\n                      </div>\n\n                      <!-- Toggle chevron -->\n                      ${this.hasChildren(item)\n                        ? html`\n                            <span\n                              class=\"text-xs text-brand-1 bg-[#e1f0ff] flex justify-center items-center rounded my-1 p-4 w-10 h-10 cursor-pointer\"\n                              @click=${(e: Event) => {\n                                e.stopPropagation() // Prevents click from bubbling to parent\n                                this.toggleChildren(item)\n                              }}\n                            >\n                              ${this.expandedSlug === item.slug\n                                ? unsafeSVG(\n                                    getFontAwesomeIcon(\n                                      'fas',\n                                      'chevron-up',\n                                      12,\n                                      12\n                                    )\n                                  )\n                                : unsafeSVG(\n                                    getFontAwesomeIcon(\n                                      'fas',\n                                      'chevron-down',\n                                      12,\n                                      12\n                                    )\n                                  )}\n                            </span>\n                          `\n                        : null}\n                    </div>\n\n                    <!-- Children items -->\n                    ${this.hasChildren(item) && this.expandedSlug === item.slug\n                      ? html`\n                          <div class=\"pl-14 pt-1 pb-2 space-y-1\">\n                            ${item.children.map(\n                              child => html`\n                                <div\n                                  class=\"flex items-center text-sm text-[#333] px-4 cursor-pointer transition-all\"\n                                  @click=${() => this.rubricClicked(child)}\n                                >\n                                  <div\n                                    class=\"w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center pl-11\"\n                                  >\n                                    ${decodeSpecialChars(child.name)}\n                                    ${timedContent(\n                                      child.redDot[0].start,\n                                      child.redDot[0].end\n                                    )\n                                      ? html`<span\n                                          class=\"bg-orange-400 h-2 relative rounded-full w-2 flex shrink-0 -top-[12px]\"\n                                        ></span>`\n                                      : ''}\n                                    <div></div>\n                                  </div>\n                                </div>\n                              `\n                            )}\n                          </div>\n                        `\n                      : ''}\n                  </div>\n                `\n              )}\n            </div>\n          </div>\n          <div class=\"border-b border-[#DDD] m-6 \"></div>\n          <!-- category -->\n          <div class=\"flex\">\n            <div class=\"w-full flex justify-between flex-col\">\n              ${this.dataSidebar.category.map(\n                item => html`\n                  <div class=\"w-full font-pt-sans\">\n                    <!-- Parent item -->\n                    <div\n                      class=\"flex items-center justify-between text-sm font-medium px-4 transition-all cursor-pointer\"\n                      @click=${(e: Event) => this.rubricClicked(item, e)}\n                    >\n                      <div\n                        class=\"w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center\"\n                      >\n                        <div class=\"flex items-center space-x-3\">\n                          <span\n                            class=\"text-xl text-brand-1 max-w-max w-8 h-8 flex items-center\"\n                          >\n                            ${item.icon &&\n                            Array.isArray(item.icon) &&\n                            item.icon.length >= 2\n                              ? unsafeSVG(\n                                  getFontAwesomeIcon(\n                                    item.icon[0],\n                                    item.icon[1],\n                                    20,\n                                    20\n                                  )\n                                )\n                              : ''}\n                          </span>\n                          <span\n                            class=\"font-bold ${item.name === 'Beranda'\n                              ? 'text-[#00559a]'\n                              : 'text-[#333] w-full'}\"\n                            >${decodeSpecialChars(item.name)}</span\n                          >\n\n                          ${timedContent(\n                            item.redDot[0].start,\n                            item.redDot[0].end\n                          )\n                            ? html`<span\n                                class=\"bg-orange-400 h-2 relative rounded-full w-2 flex shrink-0 -top-[12px]\"\n                              ></span>`\n                            : ''}\n                        </div>\n                      </div>\n\n                      <!-- Toggle chevron -->\n                      ${this.hasChildren(item)\n                        ? html`\n                            <span\n                              class=\"bg-[#e1f0ff] flex justify-center items-center rounded my-1 py-4 w-10 h-10 cursor-pointer font-bold text-brand-1\"\n                              @click=${(e: Event) => {\n                                e.stopPropagation() // Prevents click from bubbling to parent\n                                this.toggleChildren(item)\n                              }}\n                            >\n                              ${this.expandedSlug === item.slug\n                                ? unsafeSVG(\n                                    getFontAwesomeIcon(\n                                      'fas',\n                                      'chevron-up',\n                                      12,\n                                      12\n                                    )\n                                  )\n                                : unsafeSVG(\n                                    getFontAwesomeIcon(\n                                      'fas',\n                                      'chevron-down',\n                                      12,\n                                      12\n                                    )\n                                  )}\n                            </span>\n                          `\n                        : null}\n                    </div>\n\n                    <!-- Children items -->\n                    ${this.hasChildren(item) && this.expandedSlug === item.slug\n                      ? html`\n                          <div class=\"pt-1 pb-2 space-y-1\">\n                            ${item.children.map(\n                              child => html`\n                                <div\n                                  class=\"flex items-center text-sm text-[#333] px-4 cursor-pointer transition-all\"\n                                  @click=${() => this.rubricClicked(child)}\n                                >\n                                  <div\n                                    class=\"w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center pl-11\"\n                                  >\n                                    ${decodeSpecialChars(child.name)}\n                                    ${timedContent(\n                                      child.redDot[0].start,\n                                      child.redDot[0].end\n                                    )\n                                      ? html`<span\n                                          class=\"bg-orange-400 h-2 relative rounded-full w-2 flex shrink-0 -top-[12px]\"\n                                        ></span>`\n                                      : ''}\n                                  </div>\n                                </div>\n                              `\n                            )}\n                          </div>\n                        `\n                      : ''}\n                  </div>\n                `\n              )}\n            </div>\n          </div>\n        </div>\n      </nav>\n    `\n  }\n}\n"]}
+{"version":3,"file":"KompasMenuSideBar.js","sourceRoot":"","sources":["../../../../src/components/kompasid-menu-side-bar/KompasMenuSideBar.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable lit-a11y/click-events-have-key-events */\nimport { html, css, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { decodeSpecialChars } from '../../utils/decodeSpecialChars.js'\nimport { timedContent } from '../../utils/timedContent.js'\n\ninterface DataExternalLink {\n  external?: boolean\n  gtmClass?: string\n  icon: object | null\n  iconify: string | null\n  isNew: boolean\n  name: string\n  url: string\n}\n\ninterface dataType {\n  href: string\n  external?: boolean\n  icon: object | null\n  iconify: string | null\n  name: string\n  slug: string\n  redDot: [\n    {\n      start: string\n      end: string\n    }\n  ]\n  children: [\n    {\n      href: string\n      external: boolean\n      icon: string\n      iconify: string | null\n      name: string\n      slug: string\n      redDot: [\n        {\n          start: string\n          end: string\n        }\n      ]\n    }\n  ]\n}\ninterface DataSideBarLink {\n  feature: dataType[]\n  category: dataType[]\n}\n\n@customElement('kompasid-menu-side-bar')\nexport class KompasMenuSideBar extends LitElement {\n  hasSlotContent = false\n  shadowRoot: any\n\n  firstUpdated() {\n    const slot = this.shadowRoot?.querySelector('slot')\n    const assignedNodes = slot!.assignedNodes({ flatten: true })\n\n    this.hasSlotContent = assignedNodes.length > 0\n  }\n\n  static styles = [\n    css`\n      .slide-side-enter-active,\n      .slide-side-leave-active {\n        transition: all 0.3s ease-out;\n      }\n      .slide-side-enter,\n      .slide-side-leave-to {\n        transform: translateX(-100%);\n      }\n      /* end: transisi buat sidebar */\n      .nuxt-link-exact-active {\n        @apply text-brand-1;\n      }\n      .menu-menu-sidebar {\n        z-index: 99999;\n      }\n      /* Force scrollbar to always show (for debugging) */\n      .menu-menu-sidebar::-webkit-scrollbar {\n        width: 4px;\n      }\n\n      .menu-menu-sidebar::-webkit-scrollbar-track {\n        background: white;\n      }\n\n      .menu-menu-sidebar::-webkit-scrollbar-thumb {\n        background-color: #00557d; /* Replace with your brand color */\n        border-radius: 8px;\n      }\n\n      .menu-menu-sidebar::-webkit-scrollbar-button,\n      .menu-menu-sidebar::-webkit-scrollbar-corner {\n        background-color: white;\n      }\n    `,\n    TWStyles,\n  ]\n  @property({ type: Array }) dataExternal: DataExternalLink[] = []\n  @property({ type: Boolean }) isDark = false\n\n  async connectedCallback() {\n    super.connectedCallback()\n    try {\n      await this.fetchExternal()\n    } catch (error) {\n      this.handleFetchError(error)\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  dataSidebar: DataSideBarLink = {\n    feature: [],\n    category: [],\n  }\n  async fetchExternal() {\n    // External\n    const endpointExternal = `https://cdn-www.kompas.id/assets/json/ApiMenuExternalLink.json`\n    const response = await fetch(endpointExternal, {\n      headers: {\n        'Content-Type': 'application/json',\n      },\n    })\n    const resultExternal = await response.json()\n    // eslint-disable-next-line no-undef\n    if (!resultExternal || !Array.isArray(resultExternal)) {\n      console.error(\n        'Error: resultExternal.result is undefined or not an array',\n        resultExternal\n      )\n      this.dataExternal = [] // Ensure dataExternal is an empty array instead of undefined\n    } else {\n      this.dataExternal = resultExternal.map(\n        (externalLink: Partial<DataExternalLink>) => ({\n          external: externalLink.external ?? false,\n          gtmClass: externalLink.gtmClass ?? '',\n          icon: externalLink.icon ?? null,\n          iconify: externalLink.iconify ?? null,\n          isNew: externalLink.isNew ?? false,\n          name: externalLink.name ?? '',\n          url: externalLink.url ?? '',\n        })\n      )\n    }\n    // Sidebar\n    const endpointSidebar = `https://cdn-www.kompas.id/assets/json/ApiMenuSideV2.json`\n    const responseSidebar = await fetch(endpointSidebar, {\n      headers: {\n        'Content-Type': 'application/json',\n      },\n    })\n    const resultSidebar = await responseSidebar.json()\n    // Validate the structure of the response\n    if (!resultSidebar || typeof resultSidebar !== 'object') {\n      console.error('Invalid response format:', resultSidebar)\n      return\n    }\n\n    // Convert object to an array\n    const sidebarArray = Object.values(resultSidebar)\n    const [featureArray, categoryArray] = sidebarArray as [any[], any[]]\n    const features: dataType[] =\n      featureArray?.map((item: any) => ({\n        href: item?.href ?? '',\n        external: item?.external ?? false,\n        icon: item?.icon ?? null,\n        iconify: item?.iconify ?? null,\n        name: item?.name ?? '',\n        slug: item?.slug ?? '',\n        redDot: [\n          {\n            start: item?.redDot?.start ?? '',\n            end: item?.redDot?.end ?? '',\n          },\n        ],\n        children: Array.isArray(item?.children)\n          ? item.children.map((child: any) => ({\n              href: child?.href ?? '',\n              external: child?.external ?? false,\n              icon: child?.icon ?? '',\n              iconify: child?.iconify ?? '',\n              name: child?.name ?? '',\n              slug: child?.slug ?? '',\n              redDot: [\n                {\n                  start: child?.redDot?.start ?? '',\n                  end: child?.redDot?.end ?? '',\n                },\n              ],\n            }))\n          : [],\n      })) ?? []\n\n    // Map category data\n    const categories: dataType[] =\n      categoryArray?.map((item: any) => ({\n        href: item?.href ?? '',\n        external: item?.external ?? false,\n        icon: item?.icon ?? null,\n        iconify: item?.iconify ?? null,\n        name: item?.name ?? '',\n        slug: item?.slug ?? '',\n        redDot: [\n          {\n            start: item?.redDot?.start ?? '',\n            end: item?.redDot?.end ?? '',\n          },\n        ],\n        children: Array.isArray(item?.children)\n          ? item.children.map((child: any) => ({\n              href: child?.href ?? '',\n              external: child?.external ?? false,\n              icon: child?.icon ?? '',\n              iconify: child?.iconify ?? '',\n              name: child?.name ?? '',\n              slug: child?.slug ?? '',\n              redDot: [\n                {\n                  start: child?.redDot?.start ?? '',\n                  end: child?.redDot?.end ?? '',\n                },\n              ],\n            }))\n          : [],\n      })) ?? []\n    this.dataSidebar = { feature: features, category: categories }\n    this.requestUpdate()\n  }\n\n  renderChips() {\n    const chips = []\n    chips.push(\n      html`\n        <div class=\"flex\">\n          <div\n            class=\"py-0.5 px-1.5 rounded-full\"\n            style=\"position: relative; display: inline-flex; background-color:#D71920;\"\n          >\n            <span class=\"font-bold font-sans text-xs text-white capitalize\"\n              >Baru</span\n            >\n          </div>\n        </div>\n      `\n    )\n    return chips\n  }\n\n  hasChildren(item: any): boolean {\n    return Array.isArray(item?.children) && item.children.length > 0\n  }\n\n  rubricClicked(item: { name: string; href?: string }, event?: Event): void {\n    if (event) {\n      event.stopPropagation() // Prevent parent click event\n    }\n    if (item.href) {\n      window.location.href = item.href\n    }\n\n    // add data layer here\n  }\n\n  @state()\n  private expandedSlug: string | null = null\n  private toggleChildren(item: any) {\n    this.expandedSlug = this.expandedSlug === item.slug ? null : item.slug\n  }\n\n  @state()\n  private showNavBar: boolean = false\n\n  toggleNavSidebar = (e: Event) => {\n    e.stopPropagation() // prevent bubbling\n    this.showNavBar = !this.showNavBar\n  }\n\n  render() {\n    return html`\n      <!-- Button Menu -->\n      <div\n        class=\"w-fit flex items-center justify-center cursor-pointer relative\"\n        @click=${this.toggleNavSidebar}\n      >\n        <slot></slot>\n        ${!this.hasSlotContent\n          ? html`\n              <div\n                class=\"h-4 inline-flex ${this.isDark\n                  ? 'text-[#FFFFFF]'\n                  : 'text-brand-1'}\"\n              >\n                ${unsafeSVG(getFontAwesomeIcon('fas', 'bars'))}\n              </div>\n              <span\n                class=\"font-sans hidden sm:inline ml-2 tracking-wide font-bold ${this\n                  .isDark\n                  ? 'text-[#FFFFFF]'\n                  : 'text-brand-1'}\"\n              >\n                Menu\n              </span>\n            `\n          : ''}\n      </div>\n      <!-- Side Menu -->\n      <nav\n        @click=${this.toggleNavSidebar}\n        class=${this.showNavBar\n          ? 'fixed left-0 top-0 w-screen z-[100]'\n          : 'hidden'}\n      >\n        <div\n          ref=\"toggle-nav-sidebar\"\n          class=\"bg-white h-screen menu-menu-sidebar overflow-y-auto pb-20 pt-0 shadow-lg\"\n          style=\"width: 312px;\"\n        >\n          <div\n            class=\"bg-[#FFFFFF] flex flex-col items-center justify-center mb-6 w-full\"\n          >\n            <div\n              ref=\"logo-kompas\"\n              class=\"flex items-center justify-between px-4 py-6 w-full\"\n            >\n              <a href=\"/\" class=\"flex h-9 w-9\">\n                <img\n                  src=\"https://cdn-www.kompas.id/assets/img/icons/kompas-icon-gold.svg\"\n                  alt=\"Kompas.id\"\n                  scale=\"0\"\n                  class=\"block w-full\"\n                />\n              </a>\n              <span\n                class=\"bg-[#E1F0FF] text-brand-1 cursor-pointer flex h-10 items-center justify-center rounded text-base w-10 py-4\"\n                @click=${this.toggleNavSidebar}\n              >\n                ${unsafeSVG(getFontAwesomeIcon('fa', 'times', 12, 12))}\n              </span>\n            </div>\n            <div class=\"flex flex-wrap px-4 w-full\">\n              ${this.dataExternal.map(\n                item => html`\n                  <a href=\"${item.url}\" class=\"flex w-1/2 no-underline\">\n                    <div\n                      class=\"cursor-pointer flex items-center pb-4 w-[312px]\"\n                    >\n                      ${item.icon &&\n                      Array.isArray(item.icon) &&\n                      item.icon.length >= 2\n                        ? html`\n                            <div class=\"flex mr-2 text-brand-1\">\n                              ${unsafeSVG(\n                                getFontAwesomeIcon(item.icon[0], item.icon[1])\n                              )}\n                            </div>\n                          `\n                        : ''}\n                      <span class=\"font-sans relative text-xs text-[#666666]\">\n                        ${item.name}\n                      </span>\n                      <div class=\"ml-1\">\n                        ${item.isNew ? this.renderChips() : ''}\n                      </div>\n                    </div>\n                  </a>\n                `\n              )}\n            </div>\n          </div>\n          <div class=\"border-b border-[#DDD] m-6 \"></div>\n          <!-- feature -->\n          <div class=\"flex\">\n            <div class=\"flex justify-between flex-col\">\n              ${this.dataSidebar.feature.map(\n                item => html`\n                  <div class=\"w-full font-sans\">\n                    <!-- Parent item -->\n                    <div\n                      class=\"flex items-center justify-between px-4 text-sm font-medium text-gray-700 transition-all cursor-pointer\"\n                      @click=${(e: Event) => this.rubricClicked(item, e)}\n                    >\n                      <div\n                        class=\"w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center\"\n                      >\n                        <div class=\"flex items-center space-x-3\">\n                          <span\n                            class=\"text-xl text-brand-1 h-8 flex items-center \n                            ${item.icon === null ? 'w-8' : 'max-w-max w-8'}\"\n                          >\n                            ${item.icon &&\n                            Array.isArray(item.icon) &&\n                            item.icon.length >= 2\n                              ? unsafeSVG(\n                                  getFontAwesomeIcon(\n                                    item.icon[0],\n                                    item.icon[1],\n                                    20,\n                                    20\n                                  )\n                                )\n                              : ''}\n                          </span>\n                          <span class=\"font-bold relative text-[#333] w-full\"\n                            >${decodeSpecialChars(item.name)}</span\n                          >\n                          ${timedContent(\n                            item.redDot[0].start,\n                            item.redDot[0].end\n                          )\n                            ? html`<span\n                                class=\"bg-orange-400 h-2 relative rounded-full w-2 flex shrink-0 -top-[12px]\"\n                              ></span>`\n                            : ''}\n                        </div>\n                      </div>\n\n                      <!-- Toggle chevron -->\n                      ${this.hasChildren(item)\n                        ? html`\n                            <span\n                              class=\"text-xs text-brand-1 bg-[#e1f0ff] flex justify-center items-center rounded my-1 p-4 w-10 h-10 cursor-pointer\"\n                              @click=${(e: Event) => {\n                                e.stopPropagation() // Prevents click from bubbling to parent\n                                this.toggleChildren(item)\n                              }}\n                            >\n                              ${this.expandedSlug === item.slug\n                                ? unsafeSVG(\n                                    getFontAwesomeIcon(\n                                      'fas',\n                                      'chevron-up',\n                                      12,\n                                      12\n                                    )\n                                  )\n                                : unsafeSVG(\n                                    getFontAwesomeIcon(\n                                      'fas',\n                                      'chevron-down',\n                                      12,\n                                      12\n                                    )\n                                  )}\n                            </span>\n                          `\n                        : null}\n                    </div>\n\n                    <!-- Children items -->\n                    ${this.hasChildren(item) && this.expandedSlug === item.slug\n                      ? html`\n                          <div class=\"pl-14 pt-1 pb-2 space-y-1\">\n                            ${item.children.map(\n                              child => html`\n                                <div\n                                  class=\"flex items-center text-sm text-[#333] px-4 cursor-pointer transition-all\"\n                                  @click=${() => this.rubricClicked(child)}\n                                >\n                                  <div\n                                    class=\"w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center pl-11\"\n                                  >\n                                    ${decodeSpecialChars(child.name)}\n                                    ${timedContent(\n                                      child.redDot[0].start,\n                                      child.redDot[0].end\n                                    )\n                                      ? html`<span\n                                          class=\"bg-orange-400 h-2 relative rounded-full w-2 flex shrink-0 -top-[12px]\"\n                                        ></span>`\n                                      : ''}\n                                    <div></div>\n                                  </div>\n                                </div>\n                              `\n                            )}\n                          </div>\n                        `\n                      : ''}\n                  </div>\n                `\n              )}\n            </div>\n          </div>\n          <div class=\"border-b border-[#DDD] m-6 \"></div>\n          <!-- category -->\n          <div class=\"flex\">\n            <div class=\"w-full flex justify-between flex-col\">\n              ${this.dataSidebar.category.map(\n                item => html`\n                  <div class=\"w-full font-sans\">\n                    <!-- Parent item -->\n                    <div\n                      class=\"flex items-center justify-between text-sm font-medium px-4 transition-all cursor-pointer\"\n                      @click=${(e: Event) => this.rubricClicked(item, e)}\n                    >\n                      <div\n                        class=\"w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center\"\n                      >\n                        <div class=\"flex items-center space-x-3\">\n                          <span\n                            class=\"text-xl text-brand-1 max-w-max w-8 h-8 flex items-center\"\n                          >\n                            ${item.icon &&\n                            Array.isArray(item.icon) &&\n                            item.icon.length >= 2\n                              ? unsafeSVG(\n                                  getFontAwesomeIcon(\n                                    item.icon[0],\n                                    item.icon[1],\n                                    20,\n                                    20\n                                  )\n                                )\n                              : ''}\n                          </span>\n                          <span\n                            class=\"font-bold ${item.name === 'Beranda'\n                              ? 'text-[#00559a]'\n                              : 'text-[#333] w-full'}\"\n                            >${decodeSpecialChars(item.name)}</span\n                          >\n\n                          ${timedContent(\n                            item.redDot[0].start,\n                            item.redDot[0].end\n                          )\n                            ? html`<span\n                                class=\"bg-orange-400 h-2 relative rounded-full w-2 flex shrink-0 -top-[12px]\"\n                              ></span>`\n                            : ''}\n                        </div>\n                      </div>\n\n                      <!-- Toggle chevron -->\n                      ${this.hasChildren(item)\n                        ? html`\n                            <span\n                              class=\"bg-[#e1f0ff] flex justify-center items-center rounded my-1 py-4 w-10 h-10 cursor-pointer font-bold text-brand-1\"\n                              @click=${(e: Event) => {\n                                e.stopPropagation() // Prevents click from bubbling to parent\n                                this.toggleChildren(item)\n                              }}\n                            >\n                              ${this.expandedSlug === item.slug\n                                ? unsafeSVG(\n                                    getFontAwesomeIcon(\n                                      'fas',\n                                      'chevron-up',\n                                      12,\n                                      12\n                                    )\n                                  )\n                                : unsafeSVG(\n                                    getFontAwesomeIcon(\n                                      'fas',\n                                      'chevron-down',\n                                      12,\n                                      12\n                                    )\n                                  )}\n                            </span>\n                          `\n                        : null}\n                    </div>\n\n                    <!-- Children items -->\n                    ${this.hasChildren(item) && this.expandedSlug === item.slug\n                      ? html`\n                          <div class=\"pt-1 pb-2 space-y-1\">\n                            ${item.children.map(\n                              child => html`\n                                <div\n                                  class=\"flex items-center text-sm text-[#333] px-4 cursor-pointer transition-all\"\n                                  @click=${() => this.rubricClicked(child)}\n                                >\n                                  <div\n                                    class=\"w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center pl-11\"\n                                  >\n                                    ${decodeSpecialChars(child.name)}\n                                    ${timedContent(\n                                      child.redDot[0].start,\n                                      child.redDot[0].end\n                                    )\n                                      ? html`<span\n                                          class=\"bg-orange-400 h-2 relative rounded-full w-2 flex shrink-0 -top-[12px]\"\n                                        ></span>`\n                                      : ''}\n                                  </div>\n                                </div>\n                              `\n                            )}\n                          </div>\n                        `\n                      : ''}\n                  </div>\n                `\n              )}\n            </div>\n          </div>\n        </div>\n      </nav>\n    `\n  }\n}\n"]}

package/dist/tailwind/tailwind.js

@@ -158,8 +158,7 @@ export const TWStyles = css `
     -o-tab-size: 4;
     tab-size: 4;
     /* 3 */
-    font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
-      'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    font-family: 'PT Sans', Arial, Verdana, Helvetica, sans-serif;
     /* 4 */
     font-feature-settings: normal;
     /* 5 */
@@ -737,6 +736,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     margin-bottom: 1.5rem;
   }
 
+  .mb-8 {
+    margin-bottom: 2rem;
+  }
+
   .ml-0\\.5 {
     margin-left: 0.125rem;
   }
@@ -1022,6 +1025,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     width: 216px;
   }
 
+  .w-\\[276px\\] {
+    width: 276px;
+  }
+
   .w-\\[296px\\] {
     width: 296px;
   }
@@ -1129,6 +1136,19 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     cursor: pointer;
   }
 
+  .snap-x {
+    scroll-snap-type: x var(--tw-scroll-snap-strictness);
+  }
+
+  .snap-start {
+    scroll-snap-align: start;
+  }
+
+  .scroll-mx-4 {
+    scroll-margin-left: 1rem;
+    scroll-margin-right: 1rem;
+  }
+
   .grid-flow-row {
     grid-auto-flow: row;
   }
@@ -1279,6 +1299,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     overflow-y: auto;
   }
 
+  .overflow-x-scroll {
+    overflow-x: scroll;
+  }
+
   .overflow-y-scroll {
     overflow-y: scroll;
   }
@@ -1792,13 +1816,8 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     text-align: start;
   }
 
-  .font-pt-sans {
-    font-family: 'PT Sans', Arial, Verdana, Helvetica, sans-serif;
-  }
-
   .font-sans {
-    font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
-      'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    font-family: 'PT Sans', Arial, Verdana, Helvetica, sans-serif;
   }
 
   .font-serif {
@@ -2088,6 +2107,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   }
 
   @media (min-width: 640px) {
+    .sm\\:block {
+      display: block;
+    }
+
     .sm\\:inline {
       display: inline;
     }
@@ -2104,6 +2127,19 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
 
+    .sm\\:justify-center {
+      justify-content: center;
+    }
+
+    .sm\\:gap-6 {
+      gap: 1.5rem;
+    }
+
+    .sm\\:px-0 {
+      padding-left: 0px;
+      padding-right: 0px;
+    }
+
     .sm\\:px-16 {
       padding-left: 4rem;
       padding-right: 4rem;
@@ -2553,6 +2589,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       width: 410px;
     }
 
+    .lg\\:w-auto {
+      width: auto;
+    }
+
     .lg\\:max-w-7xl {
       max-width: 80rem;
     }