npm - @kompasid/lit-web-components - Versions diffs - 0.9.13 → 0.9.14 - Mend

@kompasid/lit-web-components 0.9.13 → 0.9.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (31) hide show

package/dist/src/components/kompasid-freewall/KompasFreewall.js CHANGED Viewed

@@ -2,6 +2,7 @@ import { __decorate } from "tslib";
 import { html, css, LitElement, nothing } from 'lit';
 import { property, customElement, state } from 'lit/decorators.js';
 import { TWStyles } from '../../../tailwind/tailwind.js';
+import { redirectToCheckout } from '../../utils/cta.js';
 import '../kompasid-freewall-head/KompasFreewallHead.js';
 import '../kompasid-freewall-body/KompasFreewallBody.js';
 let KompasFreewall = class KompasFreewall extends LitElement {
@@ -123,7 +124,11 @@ let KompasFreewall = class KompasFreewall extends LitElement {
         if (!url)
             return;
         this.sendDataLayerSubscribeButtonClicked(position);
-        window.open(url, '_blank');
+        const originHost = encodeURIComponent(window.location.href);
+        redirectToCheckout({
+            link: `${url.replace('https://checkoutv2.kompas.id/', '')}&referrer=${originHost}`,
+            source: this.type,
+        });
     }
     /**
      * Lifecycle
@@ -132,8 +137,8 @@ let KompasFreewall = class KompasFreewall extends LitElement {
         super.connectedCallback();
         await this.updateComplete;
         this.isExpand = this.expand;
-        this.getFreewallData();
-        this.sendDataLayerPaywallViewed();
+        await this.getFreewallData();
+        await this.sendDataLayerPaywallViewed();
     }
     async getFreewallData() {
         try {

package/dist/src/components/kompasid-freewall/KompasFreewall.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"KompasFreewall.js","sourceRoot":"","sources":["../../../../src/components/kompasid-freewall/KompasFreewall.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement, nothing } from 'lit'\nimport { property, customElement, state } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { JsonPullDataFreeWall, CardPackage } from './types.js'\nimport '../kompasid-freewall-head/KompasFreewallHead.js'\nimport '../kompasid-freewall-body/KompasFreewallBody.js'\n\n@customElement('kompasid-freewall')\nexport class KompasFreewall extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n\n .top-shadow {\n box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16);\n }\n `,\n TWStyles,\n ]\n\n /*\n Props\n /\n /\n property type untuk menghandle tipe freewall (akan menyematkan beberapa tipe data layer)\n * property expand to handle expand/collapse\n * property tracker_paywall_location is the location where user encounter the paywall\n * property tracker_page_type is the type of the page\n * property tracker_page_title is the title of the page\n * property tracker_user_type is the type of user based on their subscription\n * property tracker_subscription_status is the status of their subscription\n * property tracker_page_domain is the page domain\n * property tracker_metered_wall_type is the type of metered wall\n * property tracker_metered_wall_balance is the balance of their metered wall\n * property tracker_content_title is the title of article [type=article]\n * property tracker_content_id is the ID of article (slug) [type=article]\n * property tracker_content_categories is the category of the content [type=article]\n * property tracker_content_type is to decide whether it's free article or paid article [type=article]\n /\n\n @property({ type: String }) type: 'article' \| 'landing_page' = 'article'\n @property({ type: Boolean }) expand = true\n @property({ type: String }) tracker_paywall_location = ''\n @property({ type: String }) tracker_page_type = ''\n @property({ type: String }) tracker_page_title = ''\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\n showPackage = {\n duration: 1,\n durationType: 3,\n id: '9802035',\n link: 'kdp?productId=9802035&referrer=',\n price: 50000,\n position: 1,\n title: 'Kompas Digital Premium 1 Bulan',\n slug: 'cash-b2c-halaman-berlangganan-reguler_digital-kdp-1',\n referrer: '',\n }\n\n /\n State\n /\n\n @state() private isLoading: Boolean = true\n @state() private isExpand: boolean = true\n @state() private pullData: JsonPullDataFreeWall = {} as JsonPullDataFreeWall\n\n /\n Getter\n /\n\n get isArticle() {\n return this.type === 'article'\n }\n\n /\n Data Layer\n /\n\n private prepareImpressionsData(item: CardPackage): Record<string, any> {\n const baseData = {\n paywall_subscription_package: item.packageSlug,\n paywall_subscription_id: item.packageId,\n paywall_subscription_price: item.priceDiscount \|\| item.priceBased,\n paywall_position: item.position,\n paywall_location: this.tracker_paywall_location, // from user\n user_type: this.tracker_user_type, // from user\n subscription_status: this.tracker_subscription_status, // from user\n page_domain: this.tracker_page_domain \|\| 'Kompas.id', // from user\n page_type: this.tracker_page_type, // from user\n metered_wall_type: this.tracker_metered_wall_type \|\| 'FP', // from user\n metered_wall_balance: this.tracker_metered_wall_balance, // from user\n }\n\n if (this.isArticle) {\n return {\n ...baseData,\n content_id: this.tracker_content_id,\n content_title: this.tracker_content_title,\n content_categories: this.tracker_content_categories,\n content_type: this.tracker_content_type,\n }\n }\n return {\n ...baseData,\n page_title: this.tracker_page_title,\n }\n }\n\n private sendDataLayer(\n event: string,\n position: number = 0 // ganti ke specific package\n ): void {\n const impressionsData = this.pullData.body.map((item: CardPackage) =>\n this.prepareImpressionsData(item)\n )\n\n const get = this.pullData.body.find(item => item.position === position)\n\n const specificData = get ? this.prepareImpressionsData(get) : []\n\n const data = position\n ? { event, ...specificData }\n : { event, impressions: [impressionsData] }\n\n window.dataLayer.push(data)\n }\n\n private sendDataLayerPaywallViewed(): void {\n if (this.isExpand) this.sendDataLayer('paywall_viewed')\n }\n\n private sendDataLayerSubscribeButtonClicked(pos?: number): void {\n this.sendDataLayer('subscribe_button_clicked', pos)\n }\n\n /\n Logic Function\n /\n\n private toggleExpand() {\n this.isExpand = !this.isExpand\n this.sendDataLayerPaywallViewed()\n }\n\n private goToUrl(url: string, position?: number) {\n if (!url) return\n this.sendDataLayerSubscribeButtonClicked(position)\n window.open(url, '_blank')\n }\n\n /\n Lifecycle\n /\n\n override async connectedCallback() {\n super.connectedCallback()\n await this.updateComplete\n\n this.isExpand = this.expand\n this.getFreewallData()\n\n this.sendDataLayerPaywallViewed()\n }\n\n async getFreewallData() {\n try {\n const response = await fetch(\n 'https://cdn-www.kompas.id/web-component/freewall-new.json'\n )\n const json: JsonPullDataFreeWall = await response.json()\n this.pullData = json\n } catch (error) {\n throw Error('Failed to get metered paywall data')\n } finally {\n this.isLoading = false\n }\n }\n\n /\n Render Statement\n */\n\n render() {\n return !this.isLoading\n ? html`\n <div class=\"sticky bottom-0 w-full h-full z-20 top-shadow\">\n <div\n class=\"flex flex-col transition-all w-full bg-blue-100 justify-center ${this\n .isExpand && 'pb-6 md:pb-7'} md:px-4 lg:px-24\"\n >\n <kompasid-freewall-head\n .expand=${this.isExpand}\n .toggleExpand=${() => this.toggleExpand()}\n .headData=${this.pullData.head}\n .onButtonClick=${(url: string) => this.goToUrl(url)}\n ></kompasid-freewall-head>\n ${this.isExpand\n ? html` <div>\n <kompasid-freewall-body\n .bodyData=${this.pullData.body}\n .onButtonClick=${(url: string, position: number) =>\n this.goToUrl(url, position)}\n ></kompasid-freewall-body>\n </div>`\n : nothing}\n </div>\n </div>\n `\n : nothing\n }\n}\n"]}
1	+ {"version":3,"file":"KompasFreewall.js","sourceRoot":"","sources":["../../../../src/components/kompasid-freewall/KompasFreewall.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement, nothing } from 'lit'\nimport { property, customElement, state } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { JsonPullDataFreeWall, CardPackage } from './types.js'\nimport { redirectToCheckout } from '../../utils/cta.js'\nimport '../kompasid-freewall-head/KompasFreewallHead.js'\nimport '../kompasid-freewall-body/KompasFreewallBody.js'\n\n@customElement('kompasid-freewall')\nexport class KompasFreewall extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n\n .top-shadow {\n box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16);\n }\n `,\n TWStyles,\n ]\n\n /*\n Props\n /\n /\n property type untuk menghandle tipe freewall (akan menyematkan beberapa tipe data layer)\n * property expand to handle expand/collapse\n * property tracker_paywall_location is the location where user encounter the paywall\n * property tracker_page_type is the type of the page\n * property tracker_page_title is the title of the page\n * property tracker_user_type is the type of user based on their subscription\n * property tracker_subscription_status is the status of their subscription\n * property tracker_page_domain is the page domain\n * property tracker_metered_wall_type is the type of metered wall\n * property tracker_metered_wall_balance is the balance of their metered wall\n * property tracker_content_title is the title of article [type=article]\n * property tracker_content_id is the ID of article (slug) [type=article]\n * property tracker_content_categories is the category of the content [type=article]\n * property tracker_content_type is to decide whether it's free article or paid article [type=article]\n /\n\n @property({ type: String }) type: 'article' \| 'landing_page' = 'article'\n @property({ type: Boolean }) expand = true\n @property({ type: String }) tracker_paywall_location = ''\n @property({ type: String }) tracker_page_type = ''\n @property({ type: String }) tracker_page_title = ''\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\n showPackage = {\n duration: 1,\n durationType: 3,\n id: '9802035',\n link: 'kdp?productId=9802035&referrer=',\n price: 50000,\n position: 1,\n title: 'Kompas Digital Premium 1 Bulan',\n slug: 'cash-b2c-halaman-berlangganan-reguler_digital-kdp-1',\n referrer: '',\n }\n\n /\n State\n /\n\n @state() private isLoading: Boolean = true\n @state() private isExpand: boolean = true\n @state() private pullData: JsonPullDataFreeWall = {} as JsonPullDataFreeWall\n\n /\n Getter\n /\n\n get isArticle() {\n return this.type === 'article'\n }\n\n /\n Data Layer\n /\n\n private prepareImpressionsData(item: CardPackage): Record<string, any> {\n const baseData = {\n paywall_subscription_package: item.packageSlug,\n paywall_subscription_id: item.packageId,\n paywall_subscription_price: item.priceDiscount \|\| item.priceBased,\n paywall_position: item.position,\n paywall_location: this.tracker_paywall_location, // from user\n user_type: this.tracker_user_type, // from user\n subscription_status: this.tracker_subscription_status, // from user\n page_domain: this.tracker_page_domain \|\| 'Kompas.id', // from user\n page_type: this.tracker_page_type, // from user\n metered_wall_type: this.tracker_metered_wall_type \|\| 'FP', // from user\n metered_wall_balance: this.tracker_metered_wall_balance, // from user\n }\n\n if (this.isArticle) {\n return {\n ...baseData,\n content_id: this.tracker_content_id,\n content_title: this.tracker_content_title,\n content_categories: this.tracker_content_categories,\n content_type: this.tracker_content_type,\n }\n }\n return {\n ...baseData,\n page_title: this.tracker_page_title,\n }\n }\n\n private sendDataLayer(\n event: string,\n position: number = 0 // ganti ke specific package\n ): void {\n const impressionsData = this.pullData.body.map((item: CardPackage) =>\n this.prepareImpressionsData(item)\n )\n\n const get = this.pullData.body.find(item => item.position === position)\n\n const specificData = get ? this.prepareImpressionsData(get) : []\n\n const data = position\n ? { event, ...specificData }\n : { event, impressions: [impressionsData] }\n\n window.dataLayer.push(data)\n }\n\n private sendDataLayerPaywallViewed(): void {\n if (this.isExpand) this.sendDataLayer('paywall_viewed')\n }\n\n private sendDataLayerSubscribeButtonClicked(pos?: number): void {\n this.sendDataLayer('subscribe_button_clicked', pos)\n }\n\n /\n Logic Function\n /\n\n private toggleExpand() {\n this.isExpand = !this.isExpand\n this.sendDataLayerPaywallViewed()\n }\n\n private goToUrl(url: string, position?: number) {\n if (!url) return\n this.sendDataLayerSubscribeButtonClicked(position)\n const originHost: string = encodeURIComponent(window.location.href)\n redirectToCheckout({\n link: `${url.replace(\n 'https://checkoutv2.kompas.id/',\n ''\n )}&referrer=${originHost}`,\n source: this.type,\n })\n }\n\n /\n Lifecycle\n /\n\n override async connectedCallback() {\n super.connectedCallback()\n await this.updateComplete\n\n this.isExpand = this.expand\n await this.getFreewallData()\n\n await this.sendDataLayerPaywallViewed()\n }\n\n async getFreewallData() {\n try {\n const response = await fetch(\n 'https://cdn-www.kompas.id/web-component/freewall-new.json'\n )\n const json: JsonPullDataFreeWall = await response.json()\n this.pullData = json\n } catch (error) {\n throw Error('Failed to get metered paywall data')\n } finally {\n this.isLoading = false\n }\n }\n\n /\n Render Statement\n */\n\n render() {\n return !this.isLoading\n ? html`\n <div class=\"sticky bottom-0 w-full h-full z-20 top-shadow\">\n <div\n class=\"flex flex-col transition-all w-full bg-blue-100 justify-center ${this\n .isExpand && 'pb-6 md:pb-7'} md:px-4 lg:px-24\"\n >\n <kompasid-freewall-head\n .expand=${this.isExpand}\n .toggleExpand=${() => this.toggleExpand()}\n .headData=${this.pullData.head}\n .onButtonClick=${(url: string) => this.goToUrl(url)}\n ></kompasid-freewall-head>\n ${this.isExpand\n ? html` <div>\n <kompasid-freewall-body\n .bodyData=${this.pullData.body}\n .onButtonClick=${(url: string, position: number) =>\n this.goToUrl(url, position)}\n ></kompasid-freewall-body>\n </div>`\n : nothing}\n </div>\n </div>\n `\n : nothing\n }\n}\n"]}

package/dist/src/components/kompasid-freewall-body/KompasFreewallBody.js CHANGED Viewed

@@ -36,7 +36,7 @@ let KompasFreewallBody = class KompasFreewallBody extends LitElement {
       <div class="relative snap-start scroll-mx-4 w-[276px] flex lg:w-auto">
         <div
           id="subscription-card"
-          class="flex justify-between items-start relative z-10 flex-col w-[328px] py-3 px-[10px] md:p-5 md:pt-3 rounded-[10px] bg-white border border-grey-300"
+          class="flex justify-between items-start font-bold relative z-10 flex-col w-[328px] py-3 px-[10px] md:p-5 md:pt-3 rounded-[10px] bg-white border border-grey-300"
         >
           <div class="flex w-full flex-col items-start mb-4 text-start">
             <h5 class="font-lora leading-[30px] text-grey-600">
@@ -44,7 +44,7 @@ let KompasFreewallBody = class KompasFreewallBody extends LitElement {
             </h5>
           </div>
           <div class="text-xl text-grey-600 font-lora mb-8">
-            <div>
+            <div class="flex flex-wrap items-center gap-1">
               ${item.priceDiscount
             ? html `
                     <span class="text-sm text-grey-400"
@@ -52,19 +52,23 @@ let KompasFreewallBody = class KompasFreewallBody extends LitElement {
                     >
                   `
             : nothing}
-              <span class="${item.priceDiscount ? 'text-orange-400' : ''}"
-                >${formatRupiah(item.priceDiscount ? item.priceDiscount : item.priceBased)}</span
-              >/<span>${item.duration}</span>
+              <div class="flex">
+                <span class="${item.priceDiscount ? 'text-orange-400' : ''}"
+                  >${formatRupiah(item.priceDiscount ? item.priceDiscount : item.priceBased)}</span
+                >/<span>${item.duration}</span>
+              </div>
             </div>
             ${item.priceDiscount
-            ? html ` <div class="text-sm text-grey-500 font-sans mt-3">
+            ? html ` <div
+                  class="text-sm text-grey-500 font-normal font-sans mt-3"
+                >
                   Selanjutnya ${formatRupiah(item.priceBased)}/${item.duration}
                 </div>`
             : nothing}
           </div>
           <button
             @click=${() => this.onButtonClick(item.cta.url, item.position)}
-            class="whitespace-nowrap w-full rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base font-bold leading-[18px] ${item.ribbon
+            class="whitespace-nowrap w-full rounded md:rounded h-10 px-4 md:px-5 text-base font-bold leading-[18px] ${item.ribbon
             ? 'text-white bg-brand-1'
             : 'text-brand-1 bg-white border border-brand-1'}"
           >

package/dist/src/components/kompasid-freewall-body/KompasFreewallBody.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"KompasFreewallBody.js","sourceRoot":"","sources":["../../../../src/components/kompasid-freewall-body/KompasFreewallBody.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAInD,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QA6EL;;WAEG;QACH;;;WAGG;QAES,kBAAa,GAAG,CAAC,GAAW,EAAE,QAAgB,EAAE,EAAE,CAAC,CAAC;YAC9D,GAAG;YACH,QAAQ;SACT,CAAC,CAAA;QAC0B,aAAQ,GAAkB,EAAE,CAAA;~~IAoF1D~~,CAAC;~~IAlFC~~;;OAEG;IAEM,KAAK,CAAC,iBAAiB;QAC9B,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,MAAM,IAAI,CAAC,cAAc,CAAA;QACzB,cAAc,CAAC,CAAC,SAAS,EAAE,MAAM,EAAE,kBAAkB,CAAC,CAAC,CAAA;IACzD,CAAC;IAED;;OAEG;IAEK,OAAO,CAAC,IAAiB;QAC/B,OAAO,IAAI,CAAA;;;;;;;;gBAQC,IAAI,CAAC,KAAK;;;;;gBAKV,IAAI,CAAC,aAAa;YAClB,CAAC,CAAC,IAAI,CAAA;;4BAEM,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC;;mBAEtC;YACH,CAAC,CAAC,OAAO~~;6BACI~~,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE;~~mBACrD~~,YAAY,CACb,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAC1D;~~wBACO~~,IAAI,CAAC,QAAQ~~;;cAEvB~~,IAAI,CAAC,aAAa;YAClB,CAAC,CAAC,IAAI,CAAA~~;gCACY~~,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,QAAQ;uBACvD;YACT,CAAC,CAAC,OAAO;;;qBAGF,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC;~~iIACuD~~,IAAI,CAAC,MAAM;~~YAC9H~~,CAAC,CAAC,uBAAuB;YACzB,CAAC,CAAC,6CAA6C;;cAE/C,IAAI,CAAC,GAAG,CAAC,IAAI;;;UAGjB,IAAI,CAAC,MAAM;YACX,CAAC,CAAC,IAAI,CAAA;;;;;;mBAMG;YACT,CAAC,CAAC,OAAO;;KAEd,CAAA;IACH,CAAC;IAED;;OAEG;IAEH,MAAM;QACJ,OAAO,IAAI,CAAA;;;;UAIL,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;;KAElD,CAAA;IACH,CAAC;;~~AA3KM~~,yBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuEF;IACD,QAAQ;CACT,CAAA;AAUW;IAAX,QAAQ,EAAE;yDAGT;AAC0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAA6B;AAzF7C,kBAAkB;IAD9B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,kBAAkB,~~CA6K9B~~;~~SA7KY~~,kBAAkB","sourcesContent":["import { html, css, LitElement, nothing } from 'lit'\nimport { property, customElement } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { addGoogleFonts } from '../../utils/googleFont.js'\nimport { formatRupiah } from '../../utils/formatRupiah.js'\nimport { CardPackage } from '../kompasid-freewall/types.js'\n\n@customElement('kompasid-freewall-body')\nexport class KompasFreewallBody extends LitElement {\n static styles = [\n css`\n .hideScroll::-webkit-scrollbar {\n height: 0px;\n }\n .hideScroll {\n scrollbar-width: none;\n }\n\n .font-lora {\n font-family: 'Lora', 'Georgia', 'serif';\n }\n\n .font-roboto-condensed {\n font-family: 'Roboto Condensed', sans-serif;\n }\n\n /* ----- Ribbon Container ---------------------------------------/\n #ribbon-container {\n background: transparent;\n height: 130px;\n width: 200px;\n position: absolute;\n top: -5px;\n right: -5px;\n overflow: hidden;\n }\n\n / ----- Top Curl ---------------------------------------/\n #ribbon-container:before {\n content: '';\n display: block;\n -webkit-border-radius: 10px 10px 0px 0px;\n border-radius: 10px 10px 0px 0px;\n width: 35px;\n height: 10px;\n position: absolute;\n right: 60px;\n background: #b78b00;\n z-index: 1;\n }\n\n / ----- Right Curl ---------------------------------------/\n #ribbon-container:after {\n content: '';\n display: block;\n -webkit-border-radius: 0px 10px 10px 0px;\n border-radius: 0px 10px 10px 0px;\n width: 10px;\n height: 35px;\n position: absolute;\n right: 0px;\n top: 60px;\n background: #b78b00;\n }\n\n / ----- Ribbon ---------------------------------------/\n #ribbon-container > div {\n width: 140px;\n height: 28px;\n position: relative;\n top: 24px;\n right: -100px;\n z-index: 11;\n overflow: hidden;\n transform: rotate(45deg);\n -ms-transform: rotate(45deg); / IE 9 /\n -moz-transform: rotate(45deg); / Firefox /\n -webkit-transform: rotate(45deg); / Safari and Chrome /\n -o-transform: rotate(45deg); / Opera /\n background: #ffcc00;\n }\n `,\n TWStyles,\n ]\n\n /\n Props\n /\n /\n property bodyData to handle multiple data card CardPackage\n * property onButtonClick to handle cta when button is clicked and set specific card url and position\n /\n\n @property() onButtonClick = (url: string, position: number) => ({\n url,\n position,\n })\n @property({ type: Object }) bodyData: CardPackage[] = []\n\n /\n Lifecycle\n /\n\n override async connectedCallback() {\n super.connectedCallback()\n await this.updateComplete\n addGoogleFonts(['pt-sans', 'lora', 'roboto-condensed'])\n }\n\n /\n Component\n /\n\n private newCard(item: CardPackage) {\n return html`\n <div class=\"relative snap-start scroll-mx-4 w-[276px] flex lg:w-auto\">\n <div\n id=\"subscription-card\"\n class=\"flex justify-between items-start relative z-10 flex-col w-[328px] py-3 px-[10px] md:p-5 md:pt-3 rounded-[10px] bg-white border border-grey-300\"\n >\n <div class=\"flex w-full flex-col items-start mb-4 text-start\">\n <h5 class=\"font-lora leading-[30px] text-grey-600\">\n ${item.title}\n </h5>\n </div>\n <div class=\"text-xl text-grey-600 font-lora mb-8\">\n <div>\n ${item.priceDiscount\n ? html`\n <span class=\"text-sm text-grey-400\"\n ><s>${formatRupiah(item.priceBased)}</s></span\n >\n `\n : nothing}\n <span class=\"${item.priceDiscount ? 'text-orange-400' : ''}\"\n >${formatRupiah(\n item.priceDiscount ? item.priceDiscount : item.priceBased\n )}</span\n >/<span>${item.duration}</span>\n </div>\n ${item.priceDiscount\n ? html` <div class=\"text-sm text-grey-500 font-sans mt-3\">\n Selanjutnya ${formatRupiah(item.priceBased)}/${item.duration}\n </div>`\n : nothing}\n </div>\n <button\n @click=${() => this.onButtonClick(item.cta.url, item.position)}\n class=\"whitespace-nowrap w-full rounded md:rounded h-10 px-4 md:px-5 text-~~sm md:text-~~base font-bold leading-[18px] ${item.ribbon\n ? 'text-white bg-brand-1'\n : 'text-brand-1 bg-white border border-brand-1'}\"\n >\n ${item.cta.text}\n </button>\n </div>\n ${item.ribbon\n ? html`<div id=\"ribbon-container\">\n <div\n class=\"text-[11px] font-medium text-grey-600 font-roboto-condensed flex justify-center items-center\"\n >\n <span class=\"-ml-2\">Penawaran Terbaik</span>\n </div>\n </div>`\n : nothing}\n </div>\n `\n }\n\n /\n Render Statement\n */\n\n render() {\n return html`\n <div\n class=\"w-full h-full flex flex-row pt-[5px] relative snap-x overflow-x-scroll gap-4 hideScroll px-4 sm:px-0 sm:gap-6 sm:justify-center\"\n >\n ${this.bodyData.map(item => this.newCard(item))}\n </div>\n `\n }\n}\n"]}
1	+ {"version":3,"file":"KompasFreewallBody.js","sourceRoot":"","sources":["../../../../src/components/kompasid-freewall-body/KompasFreewallBody.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAInD,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QA6EL;;WAEG;QACH;;;WAGG;QAES,kBAAa,GAAG,CAAC,GAAW,EAAE,QAAgB,EAAE,EAAE,CAAC,CAAC;YAC9D,GAAG;YACH,QAAQ;SACT,CAAC,CAAA;QAC0B,aAAQ,GAAkB,EAAE,CAAA;IAwF1D,CAAC;IAtFC;;OAEG;IAEM,KAAK,CAAC,iBAAiB;QAC9B,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,MAAM,IAAI,CAAC,cAAc,CAAA;QACzB,cAAc,CAAC,CAAC,SAAS,EAAE,MAAM,EAAE,kBAAkB,CAAC,CAAC,CAAA;IACzD,CAAC;IAED;;OAEG;IAEK,OAAO,CAAC,IAAiB;QAC/B,OAAO,IAAI,CAAA;;;;;;;;gBAQC,IAAI,CAAC,KAAK;;;;;gBAKV,IAAI,CAAC,aAAa;YAClB,CAAC,CAAC,IAAI,CAAA;;4BAEM,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC;;mBAEtC;YACH,CAAC,CAAC,OAAO;;+BAEM,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE;qBACrD,YAAY,CACb,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAC1D;0BACO,IAAI,CAAC,QAAQ;;;cAGzB,IAAI,CAAC,aAAa;YAClB,CAAC,CAAC,IAAI,CAAA;;;gCAGY,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,QAAQ;uBACvD;YACT,CAAC,CAAC,OAAO;;;qBAGF,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC;sHAC4C,IAAI,CAAC,MAAM;YACnH,CAAC,CAAC,uBAAuB;YACzB,CAAC,CAAC,6CAA6C;;cAE/C,IAAI,CAAC,GAAG,CAAC,IAAI;;;UAGjB,IAAI,CAAC,MAAM;YACX,CAAC,CAAC,IAAI,CAAA;;;;;;mBAMG;YACT,CAAC,CAAC,OAAO;;KAEd,CAAA;IACH,CAAC;IAED;;OAEG;IAEH,MAAM;QACJ,OAAO,IAAI,CAAA;;;;UAIL,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;;KAElD,CAAA;IACH,CAAC;;AA/KM,yBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuEF;IACD,QAAQ;CACT,CAAA;AAUW;IAAX,QAAQ,EAAE;yDAGT;AAC0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAA6B;AAzF7C,kBAAkB;IAD9B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,kBAAkB,CAiL9B;SAjLY,kBAAkB","sourcesContent":["import { html, css, LitElement, nothing } from 'lit'\nimport { property, customElement } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { addGoogleFonts } from '../../utils/googleFont.js'\nimport { formatRupiah } from '../../utils/formatRupiah.js'\nimport { CardPackage } from '../kompasid-freewall/types.js'\n\n@customElement('kompasid-freewall-body')\nexport class KompasFreewallBody extends LitElement {\n static styles = [\n css`\n .hideScroll::-webkit-scrollbar {\n height: 0px;\n }\n .hideScroll {\n scrollbar-width: none;\n }\n\n .font-lora {\n font-family: 'Lora', 'Georgia', 'serif';\n }\n\n .font-roboto-condensed {\n font-family: 'Roboto Condensed', sans-serif;\n }\n\n /* ----- Ribbon Container ---------------------------------------/\n #ribbon-container {\n background: transparent;\n height: 130px;\n width: 200px;\n position: absolute;\n top: -5px;\n right: -5px;\n overflow: hidden;\n }\n\n / ----- Top Curl ---------------------------------------/\n #ribbon-container:before {\n content: '';\n display: block;\n -webkit-border-radius: 10px 10px 0px 0px;\n border-radius: 10px 10px 0px 0px;\n width: 35px;\n height: 10px;\n position: absolute;\n right: 60px;\n background: #b78b00;\n z-index: 1;\n }\n\n / ----- Right Curl ---------------------------------------/\n #ribbon-container:after {\n content: '';\n display: block;\n -webkit-border-radius: 0px 10px 10px 0px;\n border-radius: 0px 10px 10px 0px;\n width: 10px;\n height: 35px;\n position: absolute;\n right: 0px;\n top: 60px;\n background: #b78b00;\n }\n\n / ----- Ribbon ---------------------------------------/\n #ribbon-container > div {\n width: 140px;\n height: 28px;\n position: relative;\n top: 24px;\n right: -100px;\n z-index: 11;\n overflow: hidden;\n transform: rotate(45deg);\n -ms-transform: rotate(45deg); / IE 9 /\n -moz-transform: rotate(45deg); / Firefox /\n -webkit-transform: rotate(45deg); / Safari and Chrome /\n -o-transform: rotate(45deg); / Opera /\n background: #ffcc00;\n }\n `,\n TWStyles,\n ]\n\n /\n Props\n /\n /\n property bodyData to handle multiple data card CardPackage\n * property onButtonClick to handle cta when button is clicked and set specific card url and position\n /\n\n @property() onButtonClick = (url: string, position: number) => ({\n url,\n position,\n })\n @property({ type: Object }) bodyData: CardPackage[] = []\n\n /\n Lifecycle\n /\n\n override async connectedCallback() {\n super.connectedCallback()\n await this.updateComplete\n addGoogleFonts(['pt-sans', 'lora', 'roboto-condensed'])\n }\n\n /\n Component\n /\n\n private newCard(item: CardPackage) {\n return html`\n <div class=\"relative snap-start scroll-mx-4 w-[276px] flex lg:w-auto\">\n <div\n id=\"subscription-card\"\n class=\"flex justify-between items-start font-bold relative z-10 flex-col w-[328px] py-3 px-[10px] md:p-5 md:pt-3 rounded-[10px] bg-white border border-grey-300\"\n >\n <div class=\"flex w-full flex-col items-start mb-4 text-start\">\n <h5 class=\"font-lora leading-[30px] text-grey-600\">\n ${item.title}\n </h5>\n </div>\n <div class=\"text-xl text-grey-600 font-lora mb-8\">\n <div class=\"flex flex-wrap items-center gap-1\">\n ${item.priceDiscount\n ? html`\n <span class=\"text-sm text-grey-400\"\n ><s>${formatRupiah(item.priceBased)}</s></span\n >\n `\n : nothing}\n <div class=\"flex\">\n <span class=\"${item.priceDiscount ? 'text-orange-400' : ''}\"\n >${formatRupiah(\n item.priceDiscount ? item.priceDiscount : item.priceBased\n )}</span\n >/<span>${item.duration}</span>\n </div>\n </div>\n ${item.priceDiscount\n ? html` <div\n class=\"text-sm text-grey-500 font-normal font-sans mt-3\"\n >\n Selanjutnya ${formatRupiah(item.priceBased)}/${item.duration}\n </div>`\n : nothing}\n </div>\n <button\n @click=${() => this.onButtonClick(item.cta.url, item.position)}\n class=\"whitespace-nowrap w-full rounded md:rounded h-10 px-4 md:px-5 text-base font-bold leading-[18px] ${item.ribbon\n ? 'text-white bg-brand-1'\n : 'text-brand-1 bg-white border border-brand-1'}\"\n >\n ${item.cta.text}\n </button>\n </div>\n ${item.ribbon\n ? html`<div id=\"ribbon-container\">\n <div\n class=\"text-[11px] font-medium text-grey-600 font-roboto-condensed flex justify-center items-center\"\n >\n <span class=\"-ml-2\">Penawaran Terbaik</span>\n </div>\n </div>`\n : nothing}\n </div>\n `\n }\n\n /\n Render Statement\n */\n\n render() {\n return html`\n <div\n class=\"w-full h-full flex flex-row pt-[5px] relative snap-x overflow-x-scroll gap-4 hideScroll px-4 sm:px-0 sm:gap-6 sm:justify-center\"\n >\n ${this.bodyData.map(item => this.newCard(item))}\n </div>\n `\n }\n}\n"]}

package/dist/src/components/kompasid-freewall-head/KompasFreewallHead.js CHANGED Viewed

@@ -49,14 +49,14 @@ let KompasFreewallHead = class KompasFreewallHead extends LitElement {
     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="flex justify-between md:items-center h-full">
           <div class="hidden sm:block w-9 h-9"></div>
           <div class="flex items-center md:justify-start">
             <p class="w-full text-grey-600 font-bold">${this.headCopy}</p>
             ${!this.expand && this.headData.cta.url
             ? html `<button
                   @click=${() => this.onButtonClick(this.headData.cta.url)}
-                  class="bg-brand-1 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]"
+                  class="bg-brand-1 hidden md:block ml-3 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-base text-white font-bold leading-[18px]"
                 >
                   ${this.headData.cta.text}
                 </button>`
@@ -77,7 +77,7 @@ let KompasFreewallHead = class KompasFreewallHead extends LitElement {
         ${!this.expand && this.headData.cta.url && this.headData.cta.text
             ? html `<button
               @click=${() => this.onButtonClick(this.headData.cta.url)}
-              class="bg-brand-1 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]"
+              class="bg-brand-1 block md:hidden whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-base text-white font-bold leading-[18px]"
             >
               ${this.headData.cta.text}
             </button>`

package/dist/src/components/kompasid-freewall-head/KompasFreewallHead.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"KompasFreewallHead.js","sourceRoot":"","sources":["../../../../src/components/kompasid-freewall-head/KompasFreewallHead.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAA;AAI9D,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QAGL;;WAEG;QAEH;;;;;WAKG;QACS,iBAAY,GAAG,GAAG,EAAE,GAAE,CAAC,CAAA;QACN,WAAM,GAAG,IAAI,CAAA;QAC9B,kBAAa,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,GAAG,CAAA;QACpB,aAAQ,GAAqB;YACvD,cAAc,EAAE,iBAAiB;YACjC,gBAAgB,EAAE,mBAAmB;YACrC,GAAG,EAAE;gBACH,IAAI,EAAE,WAAW;gBACjB,GAAG,EAAE,GAAG;aACT;SACF,CAAA;IA8DH,CAAC;IA5DC,SAAS;IACT,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,MAAM;YAChB,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,cAAc;YAC9B,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAA;IACpC,CAAC;IAED;;OAEG;IAEM,KAAK,CAAC,iBAAiB;QAC9B,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,MAAM,IAAI,CAAC,cAAc,CAAA;QACzB,cAAc,CAAC,CAAC,SAAS,CAAC,CAAC,CAAA;IAC7B,CAAC;IAED;;OAEG;IAEH,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;wDAKyC,IAAI,CAAC,QAAQ;cACvD,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG;YACrC,CAAC,CAAC,IAAI,CAAA;2BACO,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC;;;oBAGtD,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI;0BAChB;YACZ,CAAC,CAAC,OAAO;;;;uBAIA,IAAI,CAAC,YAAY;;;;2CAIG,CAAC,IAAI,CAAC,MAAM,IAAI,YAAY;kBACrD,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC;;;;;UAK5D,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI;YAC/D,CAAC,CAAC,IAAI,CAAA;uBACO,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC;;;gBAGtD,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI;sBAChB;YACZ,CAAC,CAAC,OAAO;;KAEd,CAAA;IACH,CAAC;;AAnFM,yBAAM,GAAG,CAAC,GAAG,CAAA,EAAE,EAAE,QAAQ,CAAC,CAAA;AAYrB;IAAX,QAAQ,EAAE;wDAAwB;AACN;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAAc;AAC9B;IAAX,QAAQ,EAAE;yDAAqC;AACpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAO1B;AAvBU,kBAAkB;IAD9B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,kBAAkB,CAqF9B;SArFY,kBAAkB","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 { HeadDataFreeWall } 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 /\n property headData to handle data copy text and cta button\n * property expand to handle what copy text is used\n * property onButtonClick to handle cta when button is clicked and set specific card url\n * property toggleExpand to handle expand and collpase button\n /\n @property() toggleExpand = () => {}\n @property({ type: Boolean }) expand = true\n @property() onButtonClick = (url: string) => url\n @property({ type: Object }) headData: HeadDataFreeWall = {\n headCopyExpand: 'Expand Default.',\n headCopyCollapse: 'Collapse Default.',\n cta: {\n text: 'Langganan',\n url: '#',\n },\n }\n\n // Getter\n get headCopy() {\n return this.expand\n ? this.headData.headCopyExpand\n : this.headData.headCopyCollapse\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 class=\"hidden sm:block w-9 h-9\"></div>\n <div class=\"flex items-center md:justify-start\">\n <p class=\"w-full text-grey-600 font-bold\">${this.headCopy}</p>\n ${!this.expand && this.headData.cta.url\n ? html`<button\n @click=${() => this.onButtonClick(this.headData.cta.url)}\n class=\"bg-brand-1 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.headData.cta.text}\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=\"transition-all ${!this.expand && 'rotate-180'}\">\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}\n </div>\n </button>\n </div>\n </div>\n ${!this.expand && this.headData.cta.url && this.headData.cta.text\n ? html`<button\n @click=${() => this.onButtonClick(this.headData.cta.url)}\n class=\"bg-brand-1 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.headData.cta.text}\n </button>`\n : nothing}\n </div>\n `\n }\n}\n"]}
1	+ {"version":3,"file":"KompasFreewallHead.js","sourceRoot":"","sources":["../../../../src/components/kompasid-freewall-head/KompasFreewallHead.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAA;AAI9D,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QAGL;;WAEG;QAEH;;;;;WAKG;QACS,iBAAY,GAAG,GAAG,EAAE,GAAE,CAAC,CAAA;QACN,WAAM,GAAG,IAAI,CAAA;QAC9B,kBAAa,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,GAAG,CAAA;QACpB,aAAQ,GAAqB;YACvD,cAAc,EAAE,iBAAiB;YACjC,gBAAgB,EAAE,mBAAmB;YACrC,GAAG,EAAE;gBACH,IAAI,EAAE,WAAW;gBACjB,GAAG,EAAE,GAAG;aACT;SACF,CAAA;IA8DH,CAAC;IA5DC,SAAS;IACT,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,MAAM;YAChB,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,cAAc;YAC9B,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAA;IACpC,CAAC;IAED;;OAEG;IAEM,KAAK,CAAC,iBAAiB;QAC9B,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,MAAM,IAAI,CAAC,cAAc,CAAA;QACzB,cAAc,CAAC,CAAC,SAAS,CAAC,CAAC,CAAA;IAC7B,CAAC;IAED;;OAEG;IAEH,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;wDAKyC,IAAI,CAAC,QAAQ;cACvD,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG;YACrC,CAAC,CAAC,IAAI,CAAA;2BACO,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC;;;oBAGtD,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI;0BAChB;YACZ,CAAC,CAAC,OAAO;;;;uBAIA,IAAI,CAAC,YAAY;;;;2CAIG,CAAC,IAAI,CAAC,MAAM,IAAI,YAAY;kBACrD,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC;;;;;UAK5D,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI;YAC/D,CAAC,CAAC,IAAI,CAAA;uBACO,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC;;;gBAGtD,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI;sBAChB;YACZ,CAAC,CAAC,OAAO;;KAEd,CAAA;IACH,CAAC;;AAnFM,yBAAM,GAAG,CAAC,GAAG,CAAA,EAAE,EAAE,QAAQ,CAAC,CAAA;AAYrB;IAAX,QAAQ,EAAE;wDAAwB;AACN;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAAc;AAC9B;IAAX,QAAQ,EAAE;yDAAqC;AACpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAO1B;AAvBU,kBAAkB;IAD9B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,kBAAkB,CAqF9B;SArFY,kBAAkB","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 { HeadDataFreeWall } 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 /\n property headData to handle data copy text and cta button\n * property expand to handle what copy text is used\n * property onButtonClick to handle cta when button is clicked and set specific card url\n * property toggleExpand to handle expand and collpase button\n /\n @property() toggleExpand = () => {}\n @property({ type: Boolean }) expand = true\n @property() onButtonClick = (url: string) => url\n @property({ type: Object }) headData: HeadDataFreeWall = {\n headCopyExpand: 'Expand Default.',\n headCopyCollapse: 'Collapse Default.',\n cta: {\n text: 'Langganan',\n url: '#',\n },\n }\n\n // Getter\n get headCopy() {\n return this.expand\n ? this.headData.headCopyExpand\n : this.headData.headCopyCollapse\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 md:items-center h-full\">\n <div class=\"hidden sm:block w-9 h-9\"></div>\n <div class=\"flex items-center md:justify-start\">\n <p class=\"w-full text-grey-600 font-bold\">${this.headCopy}</p>\n ${!this.expand && this.headData.cta.url\n ? html`<button\n @click=${() => this.onButtonClick(this.headData.cta.url)}\n class=\"bg-brand-1 hidden md:block ml-3 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-base text-white font-bold leading-[18px]\"\n >\n ${this.headData.cta.text}\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=\"transition-all ${!this.expand && 'rotate-180'}\">\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}\n </div>\n </button>\n </div>\n </div>\n ${!this.expand && this.headData.cta.url && this.headData.cta.text\n ? html`<button\n @click=${() => this.onButtonClick(this.headData.cta.url)}\n class=\"bg-brand-1 block md:hidden whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-base text-white font-bold leading-[18px]\"\n >\n ${this.headData.cta.text}\n </button>`\n : nothing}\n </div>\n `\n }\n}\n"]}

package/dist/src/components/kompasid-header-account/KompasHeaderAccount.d.ts CHANGED Viewed

@@ -8,6 +8,9 @@ export declare class KompasHeaderAccount extends LitElement {
     isShowSidebar: boolean;
     themeList: any;
     formattedUserData: User;
+    /**
+     * Props default
+     */
     cartUrl: string;
     logoutUrl: string;
     manageAccountUrl: string;
@@ -20,7 +23,7 @@ export declare class KompasHeaderAccount extends LitElement {
     totalGracePeriod: number;
     theme: 'default' | 'primary';
     /**
-     * Props For Grace Period Tracker
+     * Props For Grace Period and Tracker
      */
     paywall_location: string;
     paywall_subscription_package: string;

package/dist/src/components/kompasid-header-account/KompasHeaderAccount.js CHANGED Viewed

@@ -15,35 +15,38 @@ let KompasHeaderAccount = class KompasHeaderAccount extends LitElement {
         this.isShowSidebar = false;
         this.themeList = null;
         this.formattedUserData = {};
-        this.cartUrl = '';
+        /**
+         * Props default
+         */
+        this.cartUrl = ''; // tidak terpakai
         this.logoutUrl = '';
         this.manageAccountUrl = '';
         this.notificationUrl = '';
-        this.ordersUrl = '';
+        this.ordersUrl = ''; // tidak terpakai
         this.readLaterUrl = '';
         this.userData = {};
         this.sidebarTopSpacing = 0;
         this.subscriptionUrl = '';
-        this.totalGracePeriod = 0;
+        this.totalGracePeriod = 0; // tidak terpakai
         this.theme = 'default';
         /**
-         * Props For Grace Period Tracker
+         * Props For Grace Period and Tracker
          */
-        this.paywall_location = '';
-        this.paywall_subscription_package = '';
+        this.paywall_location = ''; // belum tau terpakai dimana
+        this.paywall_subscription_package = ''; // belum tau terpakai dimana
         this.paywall_subscription_id = 0;
-        this.paywall_subscription_price = 0;
-        this.paywall_position = 0;
-        this.tracker_page_type = '';
-        this.tracker_content_id = '';
-        this.tracker_content_title = '';
-        this.tracker_content_categories = '';
-        this.tracker_content_type = '';
-        this.tracker_user_type = '';
-        this.tracker_subscription_status = '';
-        this.tracker_page_domain = '';
-        this.tracker_metered_wall_type = '';
-        this.tracker_metered_wall_balance = 0;
+        this.paywall_subscription_price = 0; // belum tau terpakai dimana
+        this.paywall_position = 0; // belum tau terpakai dimana
+        this.tracker_page_type = ''; // belum tau terpakai dimana
+        this.tracker_content_id = ''; // belum tau terpakai dimana
+        this.tracker_content_title = ''; // belum tau terpakai dimana
+        this.tracker_content_categories = ''; // belum tau terpakai dimana
+        this.tracker_content_type = ''; // belum tau terpakai dimana
+        this.tracker_user_type = ''; // belum tau terpakai dimana
+        this.tracker_subscription_status = ''; // belum tau terpakai dimana
+        this.tracker_page_domain = ''; // belum tau terpakai dimana
+        this.tracker_metered_wall_type = ''; // belum tau terpakai dimana
+        this.tracker_metered_wall_balance = 0; // belum tau terpakai dimana
     }
     toggleSidebar() {
         this.isShowSidebar = !this.isShowSidebar;

package/dist/src/components/kompasid-header-account/KompasHeaderAccount.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"KompasHeaderAccount.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account/KompasHeaderAccount.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { cva } from 'class-variance-authority'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { User } from './types.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { getHeaderTheme } from '../../utils/api/getHeaderTheme.js'\nimport '../kompasid-header-account-profile/KompasHeaderAccountProfile.js'\nimport '../kompasid-header-account-help-center/KompasHeaderAccountHelpCenter.js'\nimport '../kompasid-header-account-menu/KompasHeaderAccountMenu.js'\n\n@customElement('kompasid-header-account')\nexport class KompasHeaderAccount extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n .header {\n background-color: #0356a8;\n }\n .account-profile {\n overflow-y: auto;\n }\n\n .header-account-help-center--item {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0.75rem;\n }\n\n .header-account-help-center--content {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n margin-left: 1rem;\n line-height: 1.5rem;\n }\n\n .header-account--membership-icon {\n position: absolute;\n bottom: -2.5px;\n right: -2.5px;\n }\n\n .header-account--notification-indicator {\n position: absolute;\n top: 0;\n height: 0.5rem;\n width: 0.5rem;\n background-color: #f6ad55;\n border-radius: 50%;\n right: -0.563rem;\n top: -0.281rem;\n }\n\n .icon-xs svg {\n width: 11px;\n height: 12px;\n }\n\n .header-account-sidebar {\n width: 19rem;\n background-color: #edf2f7;\n box-shadow: 0px 0.125rem 0.25rem rgba(0, 0, 0, 0.1);\n display: flex;\n flex-direction: column;\n font-family: 'PT Sans', sans-serif;\n font-size: 0.875rem;\n }\n .z-index-max {\n z-index: 99999;\n }\n\n /* Custom Scrollbar for header /\n / width /\n ::-webkit-scrollbar {\n width: 4px;\n }\n\n / Track /\n ::-webkit-scrollbar-track {\n background: transparent;\n }\n\n / Handle /\n ::-webkit-scrollbar-thumb {\n background: #0356a8;\n border-radius: 100px;\n }\n\n / Handle on hover /\n ::-webkit-scrollbar-thumb:hover {\n background: #0356a8;\n }\n `,\n TWStyles,\n ]\n\n @state() isShowSidebar: boolean = false\n @state() themeList: any = null\n\n formattedUserData: User = {} as User\n\n @property({ type: String }) cartUrl = ''\n @property({ type: String }) logoutUrl = ''\n @property({ type: String }) manageAccountUrl = ''\n @property({ type: String }) notificationUrl = ''\n @property({ type: String }) ordersUrl = ''\n @property({ type: String }) readLaterUrl = ''\n @property({ type: Object }) userData = {}\n @property({ type: Number }) sidebarTopSpacing = 0\n @property({ type: String }) subscriptionUrl = ''\n @property({ type: Number }) totalGracePeriod = 0\n @property({ type: String }) theme: 'default' \| 'primary' = 'default'\n /\n Props For Grace Period Tracker\n */\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\n private toggleSidebar() {\n this.isShowSidebar = !this.isShowSidebar\n }\n\n private getInitialUserName() {\n return this.formattedUserData?.userName\n ? this.formattedUserData.userName.charAt(0)\n : ''\n }\n\n private setTheme(param: any): String {\n if (!this.themeList) return 'text-grey-100'\n const cvaFn = cva('', { variants: this.themeList })\n\n return cvaFn(param)\n }\n\n private account() {\n const membershipIcon = () => {\n if (!this.formattedUserData?.isMembership) return html``\n return html`\n <div>\n <img\n class=\"header-account--membership-icon h-3 w-3\"\n src=\"https://cdn-www.kompas.id/global-header/crown-royal-blue-60.svg\"\n alt=\"membership-crown-icon\"\n />\n </div>\n `\n }\n\n return html`\n <button @click=${this.toggleSidebar} class=\"cursor-pointer \">\n <div class=\"flex flex-row items-center self-center\">\n ${!this.getInitialUserName()\n ? html`<div\n class=\"bg-grey-300 rounded-full h-6 w-6 animate-pulse\"\n ></div>`\n : html`\n <div\n class=\"flex rounded-full h-6 w-6 items-center justify-center relative ${this.setTheme(\n { background: this.theme }\n )}\"\n >\n <span\n class=\"capitalize text-xxs font-bold ${this.setTheme({\n text: this.theme,\n })}\"\n >\n ${this.getInitialUserName()}\n </span>\n ${membershipIcon()}\n </div>\n `}\n <div\n class=\"ml-1 icon-xs ${this.isShowSidebar\n ? 'chevron-down'\n : 'rotate-180'} ${this.setTheme({ icon: this.theme })}\"\n >\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))}\n </div>\n </div>\n </button>\n `\n }\n\n private accountSidebar() {\n return html`\n <nav\n class=\"w-screen fixed right-0 top-0 bottom-0\"\n @keyup=\"${this.onkeyup}\"\n @click=${this.toggleSidebar}\n >\n <div\n class=\"bg-grey-100 pb-20 pt-0 shadow-lg w-76 z-index-max ml-auto\"\n style=${`margin-top: ${this.sidebarTopSpacing}px;height:100vh;overflow-y:auto`}\n @keyup=\"${this.onkeyup}\"\n @click=${(ev: any) => ev.stopPropagation()}\n >\n <kompasid-header-account-profile\n .userInitialName=${this.getInitialUserName()}\n .userData=${this.formattedUserData}\n .subscriptionUrl=${this.subscriptionUrl}\n .totalGracePeriod=${this.totalGracePeriod}\n paywall_location=${this.paywall_location}\n paywall_subscription_package=${this.paywall_subscription_package}\n paywall_subscription_id=${this.paywall_subscription_id}\n paywall_subscription_price=${this.paywall_subscription_price}\n paywall_position=${this.paywall_position}\n tracker_page_type=${this.tracker_page_type}\n tracker_content_id=${this.tracker_content_id}\n tracker_content_title=${this.tracker_content_title}\n tracker_content_categories=${this.tracker_content_categories}\n tracker_content_type=${this.tracker_content_type}\n tracker_user_type=${this.tracker_user_type}\n tracker_subscription_status=${this.tracker_subscription_status}\n tracker_page_domain=${this.tracker_page_domain}\n tracker_metered_wall_type=${this.tracker_metered_wall_type}\n tracker_metered_wall_balance=${this.tracker_metered_wall_balance}\n ></kompasid-header-account-profile>\n <div class=\"pl-4 pr-3 py-4 text-left\">\n <kompasid-header-account-menu\n .cart-url=${this.cartUrl}\n .manage-account-url=${this.manageAccountUrl}\n .logout-url=${this.logoutUrl}\n .notification-url=${this.notificationUrl}\n .orders-url=${this.ordersUrl}\n .read-later-url=${this.readLaterUrl}\n ></kompasid-header-account-menu>\n <kompasid-header-account-help-center></kompasid-header-account-help-center>\n </div>\n </div>\n </nav>\n `\n }\n\n override async connectedCallback() {\n super.connectedCallback()\n this.isShowSidebar = false\n this.themeList = await getHeaderTheme()\n\n if (typeof this.userData === 'string') {\n this.formattedUserData = JSON.parse(this.userData)\n } else if (typeof this.userData === 'object' && this.userData !== null) {\n // If userData is already an object, you might not need to parse it.\n // You can assign it directly to formattedUserData:\n this.formattedUserData = this.userData as User\n }\n }\n\n render() {\n return html`\n ${this.account()} ${this.isShowSidebar ? this.accountSidebar() : ''}\n `\n }\n}\n"]}
1	+ {"version":3,"file":"KompasHeaderAccount.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account/KompasHeaderAccount.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { cva } from 'class-variance-authority'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { User } from './types.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { getHeaderTheme } from '../../utils/api/getHeaderTheme.js'\nimport '../kompasid-header-account-profile/KompasHeaderAccountProfile.js'\nimport '../kompasid-header-account-help-center/KompasHeaderAccountHelpCenter.js'\nimport '../kompasid-header-account-menu/KompasHeaderAccountMenu.js'\n\n@customElement('kompasid-header-account')\nexport class KompasHeaderAccount extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n .header {\n background-color: #0356a8;\n }\n .account-profile {\n overflow-y: auto;\n }\n\n .header-account-help-center--item {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0.75rem;\n }\n\n .header-account-help-center--content {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n margin-left: 1rem;\n line-height: 1.5rem;\n }\n\n .header-account--membership-icon {\n position: absolute;\n bottom: -2.5px;\n right: -2.5px;\n }\n\n .header-account--notification-indicator {\n position: absolute;\n top: 0;\n height: 0.5rem;\n width: 0.5rem;\n background-color: #f6ad55;\n border-radius: 50%;\n right: -0.563rem;\n top: -0.281rem;\n }\n\n .icon-xs svg {\n width: 11px;\n height: 12px;\n }\n\n .header-account-sidebar {\n width: 19rem;\n background-color: #edf2f7;\n box-shadow: 0px 0.125rem 0.25rem rgba(0, 0, 0, 0.1);\n display: flex;\n flex-direction: column;\n font-family: 'PT Sans', sans-serif;\n font-size: 0.875rem;\n }\n .z-index-max {\n z-index: 99999;\n }\n\n /* Custom Scrollbar for header /\n / width /\n ::-webkit-scrollbar {\n width: 4px;\n }\n\n / Track /\n ::-webkit-scrollbar-track {\n background: transparent;\n }\n\n / Handle /\n ::-webkit-scrollbar-thumb {\n background: #0356a8;\n border-radius: 100px;\n }\n\n / Handle on hover /\n ::-webkit-scrollbar-thumb:hover {\n background: #0356a8;\n }\n `,\n TWStyles,\n ]\n\n @state() isShowSidebar: boolean = false\n @state() themeList: any = null\n\n formattedUserData: User = {} as User\n\n /\n Props default\n /\n @property({ type: String }) cartUrl = '' // tidak terpakai\n @property({ type: String }) logoutUrl = ''\n @property({ type: String }) manageAccountUrl = ''\n @property({ type: String }) notificationUrl = ''\n @property({ type: String }) ordersUrl = '' // tidak terpakai\n @property({ type: String }) readLaterUrl = ''\n @property({ type: Object }) userData = {}\n @property({ type: Number }) sidebarTopSpacing = 0\n @property({ type: String }) subscriptionUrl = ''\n @property({ type: Number }) totalGracePeriod = 0 // tidak terpakai\n @property({ type: String }) theme: 'default' \| 'primary' = 'default'\n /\n Props For Grace Period and Tracker\n */\n @property({ type: String }) paywall_location = '' // belum tau terpakai dimana\n @property({ type: String }) paywall_subscription_package = '' // belum tau terpakai dimana\n @property({ type: Number }) paywall_subscription_id = 0\n @property({ type: Number }) paywall_subscription_price = 0 // belum tau terpakai dimana\n @property({ type: Number }) paywall_position = 0 // belum tau terpakai dimana\n @property({ type: String }) tracker_page_type = '' // belum tau terpakai dimana\n @property({ type: String }) tracker_content_id = '' // belum tau terpakai dimana\n @property({ type: String }) tracker_content_title = '' // belum tau terpakai dimana\n @property({ type: String }) tracker_content_categories = '' // belum tau terpakai dimana\n @property({ type: String }) tracker_content_type = '' // belum tau terpakai dimana\n @property({ type: String }) tracker_user_type = '' // belum tau terpakai dimana\n @property({ type: String }) tracker_subscription_status = '' // belum tau terpakai dimana\n @property({ type: String }) tracker_page_domain = '' // belum tau terpakai dimana\n @property({ type: String }) tracker_metered_wall_type = '' // belum tau terpakai dimana\n @property({ type: Number }) tracker_metered_wall_balance = 0 // belum tau terpakai dimana\n\n private toggleSidebar() {\n this.isShowSidebar = !this.isShowSidebar\n }\n\n private getInitialUserName() {\n return this.formattedUserData?.userName\n ? this.formattedUserData.userName.charAt(0)\n : ''\n }\n\n private setTheme(param: any): String {\n if (!this.themeList) return 'text-grey-100'\n const cvaFn = cva('', { variants: this.themeList })\n\n return cvaFn(param)\n }\n\n private account() {\n const membershipIcon = () => {\n if (!this.formattedUserData?.isMembership) return html``\n return html`\n <div>\n <img\n class=\"header-account--membership-icon h-3 w-3\"\n src=\"https://cdn-www.kompas.id/global-header/crown-royal-blue-60.svg\"\n alt=\"membership-crown-icon\"\n />\n </div>\n `\n }\n\n return html`\n <button @click=${this.toggleSidebar} class=\"cursor-pointer \">\n <div class=\"flex flex-row items-center self-center\">\n ${!this.getInitialUserName()\n ? html`<div\n class=\"bg-grey-300 rounded-full h-6 w-6 animate-pulse\"\n ></div>`\n : html`\n <div\n class=\"flex rounded-full h-6 w-6 items-center justify-center relative ${this.setTheme(\n { background: this.theme }\n )}\"\n >\n <span\n class=\"capitalize text-xxs font-bold ${this.setTheme({\n text: this.theme,\n })}\"\n >\n ${this.getInitialUserName()}\n </span>\n ${membershipIcon()}\n </div>\n `}\n <div\n class=\"ml-1 icon-xs ${this.isShowSidebar\n ? 'chevron-down'\n : 'rotate-180'} ${this.setTheme({ icon: this.theme })}\"\n >\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))}\n </div>\n </div>\n </button>\n `\n }\n\n private accountSidebar() {\n return html`\n <nav\n class=\"w-screen fixed right-0 top-0 bottom-0\"\n @keyup=\"${this.onkeyup}\"\n @click=${this.toggleSidebar}\n >\n <div\n class=\"bg-grey-100 pb-20 pt-0 shadow-lg w-76 z-index-max ml-auto\"\n style=${`margin-top: ${this.sidebarTopSpacing}px;height:100vh;overflow-y:auto`}\n @keyup=\"${this.onkeyup}\"\n @click=${(ev: any) => ev.stopPropagation()}\n >\n <kompasid-header-account-profile\n .userInitialName=${this.getInitialUserName()}\n .userData=${this.formattedUserData}\n .subscriptionUrl=${this.subscriptionUrl}\n .totalGracePeriod=${this.totalGracePeriod}\n paywall_location=${this.paywall_location}\n paywall_subscription_package=${this.paywall_subscription_package}\n paywall_subscription_id=${this.paywall_subscription_id}\n paywall_subscription_price=${this.paywall_subscription_price}\n paywall_position=${this.paywall_position}\n tracker_page_type=${this.tracker_page_type}\n tracker_content_id=${this.tracker_content_id}\n tracker_content_title=${this.tracker_content_title}\n tracker_content_categories=${this.tracker_content_categories}\n tracker_content_type=${this.tracker_content_type}\n tracker_user_type=${this.tracker_user_type}\n tracker_subscription_status=${this.tracker_subscription_status}\n tracker_page_domain=${this.tracker_page_domain}\n tracker_metered_wall_type=${this.tracker_metered_wall_type}\n tracker_metered_wall_balance=${this.tracker_metered_wall_balance}\n ></kompasid-header-account-profile>\n <div class=\"pl-4 pr-3 py-4 text-left\">\n <kompasid-header-account-menu\n .cart-url=${this.cartUrl}\n .manage-account-url=${this.manageAccountUrl}\n .logout-url=${this.logoutUrl}\n .notification-url=${this.notificationUrl}\n .orders-url=${this.ordersUrl}\n .read-later-url=${this.readLaterUrl}\n ></kompasid-header-account-menu>\n <kompasid-header-account-help-center></kompasid-header-account-help-center>\n </div>\n </div>\n </nav>\n `\n }\n\n override async connectedCallback() {\n super.connectedCallback()\n this.isShowSidebar = false\n this.themeList = await getHeaderTheme()\n\n if (typeof this.userData === 'string') {\n this.formattedUserData = JSON.parse(this.userData)\n } else if (typeof this.userData === 'object' && this.userData !== null) {\n // If userData is already an object, you might not need to parse it.\n // You can assign it directly to formattedUserData:\n this.formattedUserData = this.userData as User\n }\n }\n\n render() {\n return html`\n ${this.account()} ${this.isShowSidebar ? this.accountSidebar() : ''}\n `\n }\n}\n"]}

package/dist/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.js CHANGED Viewed

@@ -115,7 +115,7 @@ let KompasHeaderAccountProfile = class KompasHeaderAccountProfile extends LitEle
             if (isGracePeriod) {
                 const totalGraceSubs = Math.max(totalGracePeriod - 1, 0);
                 startGracePeriodDate = this.formatDate(subDays(new Date(), totalGraceSubs));
-                endGracePeriodDate = this.formatDate(addDays(new Date(), this.maxGracePeriod - totalGracePeriod));
+                endGracePeriodDate = this.formatDate(addDays(new Date(), this.maxGracePeriod - totalGraceSubs));
             }
             const expiredTextColor = isGracePeriod
                 ? `text-orange-500`

package/dist/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"KompasHeaderAccountProfile.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { format, subDays, addDays } from 'date-fns'\nimport { id } from 'date-fns/locale/id'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { truncate } from '../../utils/text.js'\nimport { User } from '../kompasid-header-account/types.js'\nimport '../kompasid-grace-period/KompasGracePeriod.js'\n\n@customElement('kompasid-header-account-profile')\nexport class KompasHeaderAccountProfile extends LitElement {\n static styles = [\n css`\n .header-account--membership-icon {\n position: absolute;\n bottom: -2px;\n right: -2px;\n }\n `,\n TWStyles,\n ]\n\n /*\n Props\n /\n @property({ type: String }) userInitialName = ''\n @property({ type: Object }) userData = {} as User\n @property({ type: String }) subscriptionUrl = ''\n @property({ type: Number }) totalGracePeriod = 0\n @property({ type: String }) openFrom = ''\n /\n Props For Grace Period Tracker\n /\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\n /\n State\n /\n @state() private maxGracePeriod = 7\n\n formatDate(date: Date \| string) {\n return format(new Date(date), 'dd MMM yyyy', { locale: id })\n }\n\n private renderSkeletonLoading() {\n return html`\n <div>\n <div class=\"flex flex-row mb-5 items-center gap-4 leading-none\">\n <div\n class=\"bg-grey-300 py-5 rounded-full h-16 w-16 animate-pulse\"\n ></div>\n <div class=\"flex flex-col text-left w-40 gap-y-2\">\n <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n </div>\n </div>\n <div>\n <div class=\"h-6 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n </div>\n </div>\n `\n }\n\n private renderProfileContent() {\n /\n Subs Button Element\n /\n const subscribeButton = () => {\n if (!(this.userData as any)?.updateMembership) {\n return html``\n }\n const handleSubscribe = () => {\n const openFromValue = this.openFrom \|\| 'Sidebar_Menu'\n window.location.href = `${this.subscriptionUrl}?open_from=${openFromValue}`\n }\n\n return html`\n <div class=\"w-full\">\n <button\n @click=${handleSubscribe}\n class=\"w-full rounded-lg px-4 py-3 mt-4 h-10 flex justify-center items-center bg-green-500 text-grey-100 font-bold text-base focus:outline-none\"\n >\n ${(this.userData as any)?.updateMembership}\n </button>\n </div>\n `\n }\n /\n membership icon element, show if isMebership has truthy value\n /\n const membershipIcon = () => {\n if (!this.userData?.isMembership) {\n return html``\n }\n\n return html`\n <div>\n <img\n class=\"header-account--membership-icon h-6 w-6\"\n src=\"https://cdn-www.kompas.id/global-header/crown-royal-blue-60.svg\"\n alt=\"membership-crown-icon\"\n />\n </div>\n `\n }\n\n /\n Active Info Element\n */\n\n const activeInfoTemplate = () => {\n const { isGracePeriod, totalGracePeriod, activeInfo, expired } =\n this.userData\n\n let startGracePeriodDate\n let endGracePeriodDate\n\n if (isGracePeriod) {\n const totalGraceSubs = Math.max(totalGracePeriod - 1, 0)\n startGracePeriodDate = this.formatDate(\n subDays(new Date(), totalGraceSubs)\n )\n endGracePeriodDate = this.formatDate(\n addDays(new Date(), this.maxGracePeriod - totalGracePeriod)\n )\n }\n\n const expiredTextColor = isGracePeriod\n ? `text-orange-500`\n : `text-grey-600`\n\n const text = isGracePeriod\n ? html`<span> Periode Masa Tenggang </span>\n <p class=\"font-bold\">\n ${startGracePeriodDate} - ${endGracePeriodDate}\n </p> `\n : html`<p>${activeInfo}</p>\n <p class=\"font-bold\">${expired}</p>` \|\| ''\n\n return html`<p class=\"text-sm ${expiredTextColor}\">${text}</p>`\n }\n\n return html`<div\n class=\"active-info flex flex-col items-start leading-none text-left font-sans\"\n >\n <div class=\"flex flex-row items-center gap-4\">\n <div\n class=\"flex bg-brand-1 flex-shrink-0 p-5 rounded-full h-16 w-16 items-center justify-center relative\"\n >\n <span class=\"capitalize text-2xl text-grey-100 font-bold\"\n >${this.userInitialName}</span\n >\n ${membershipIcon()}\n </div>\n\n <div class=\"flex flex-col text-left\">\n <p class=\"capitalize font-bold text-base text-blue-600\">\n ${truncate(this.userData.userName, 25)}\n </p>\n ${activeInfoTemplate()}\n </div>\n </div>\n\n ${this.userData?.isGracePeriod\n ? html`<div class=\"mt-4\">\n <kompasid-grace-period\n totalGracePeriod=${this.userData.totalGracePeriod}\n isColumn=\"true\"\n isShowButton=\"true\"\n isBackgroundOnContentOnly=\"true\"\n paywall_location=${this.paywall_location}\n paywall_subscription_package=${this.paywall_subscription_package}\n paywall_subscription_id=${this.paywall_subscription_id}\n paywall_subscription_price=${this.paywall_subscription_price}\n paywall_position=${this.paywall_position}\n tracker_page_type=${this.tracker_page_type}\n tracker_content_id=${this.tracker_content_id}\n tracker_content_title=${this.tracker_content_title}\n tracker_content_categories=${this.tracker_content_categories}\n tracker_content_type=${this.tracker_content_type}\n tracker_user_type=${this.tracker_user_type}\n tracker_subscription_status=${this.tracker_subscription_status}\n tracker_page_domain=${this.tracker_page_domain}\n tracker_metered_wall_type=${this.tracker_metered_wall_type}\n tracker_metered_wall_balance=${this.tracker_metered_wall_balance}\n ></kompasid-grace-period>\n </div>`\n : subscribeButton()}\n </div>`\n }\n\n override async connectedCallback() {\n super.connectedCallback()\n }\n\n render() {\n return html`\n <div class=\"flex flex-shrink-0 flex-col bg-blue-100 p-4\">\n ${!this.userData\n ? this.renderSkeletonLoading()\n : this.renderProfileContent()}\n </div>\n `\n }\n}\n"]}
1	+ {"version":3,"file":"KompasHeaderAccountProfile.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { format, subDays, addDays } from 'date-fns'\nimport { id } from 'date-fns/locale/id'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { truncate } from '../../utils/text.js'\nimport { User } from '../kompasid-header-account/types.js'\nimport '../kompasid-grace-period/KompasGracePeriod.js'\n\n@customElement('kompasid-header-account-profile')\nexport class KompasHeaderAccountProfile extends LitElement {\n static styles = [\n css`\n .header-account--membership-icon {\n position: absolute;\n bottom: -2px;\n right: -2px;\n }\n `,\n TWStyles,\n ]\n\n /*\n Props\n /\n @property({ type: String }) userInitialName = ''\n @property({ type: Object }) userData = {} as User\n @property({ type: String }) subscriptionUrl = ''\n @property({ type: Number }) totalGracePeriod = 0\n @property({ type: String }) openFrom = ''\n /\n Props For Grace Period Tracker\n /\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\n /\n State\n /\n @state() private maxGracePeriod = 7\n\n formatDate(date: Date \| string) {\n return format(new Date(date), 'dd MMM yyyy', { locale: id })\n }\n\n private renderSkeletonLoading() {\n return html`\n <div>\n <div class=\"flex flex-row mb-5 items-center gap-4 leading-none\">\n <div\n class=\"bg-grey-300 py-5 rounded-full h-16 w-16 animate-pulse\"\n ></div>\n <div class=\"flex flex-col text-left w-40 gap-y-2\">\n <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n </div>\n </div>\n <div>\n <div class=\"h-6 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n </div>\n </div>\n `\n }\n\n private renderProfileContent() {\n /\n Subs Button Element\n /\n const subscribeButton = () => {\n if (!(this.userData as any)?.updateMembership) {\n return html``\n }\n const handleSubscribe = () => {\n const openFromValue = this.openFrom \|\| 'Sidebar_Menu'\n window.location.href = `${this.subscriptionUrl}?open_from=${openFromValue}`\n }\n\n return html`\n <div class=\"w-full\">\n <button\n @click=${handleSubscribe}\n class=\"w-full rounded-lg px-4 py-3 mt-4 h-10 flex justify-center items-center bg-green-500 text-grey-100 font-bold text-base focus:outline-none\"\n >\n ${(this.userData as any)?.updateMembership}\n </button>\n </div>\n `\n }\n /\n membership icon element, show if isMebership has truthy value\n /\n const membershipIcon = () => {\n if (!this.userData?.isMembership) {\n return html``\n }\n\n return html`\n <div>\n <img\n class=\"header-account--membership-icon h-6 w-6\"\n src=\"https://cdn-www.kompas.id/global-header/crown-royal-blue-60.svg\"\n alt=\"membership-crown-icon\"\n />\n </div>\n `\n }\n\n /\n Active Info Element\n */\n\n const activeInfoTemplate = () => {\n const { isGracePeriod, totalGracePeriod, activeInfo, expired } =\n this.userData\n\n let startGracePeriodDate\n let endGracePeriodDate\n\n if (isGracePeriod) {\n const totalGraceSubs = Math.max(totalGracePeriod - 1, 0)\n startGracePeriodDate = this.formatDate(\n subDays(new Date(), totalGraceSubs)\n )\n endGracePeriodDate = this.formatDate(\n addDays(new Date(), this.maxGracePeriod - totalGraceSubs)\n )\n }\n\n const expiredTextColor = isGracePeriod\n ? `text-orange-500`\n : `text-grey-600`\n\n const text = isGracePeriod\n ? html`<span> Periode Masa Tenggang </span>\n <p class=\"font-bold\">\n ${startGracePeriodDate} - ${endGracePeriodDate}\n </p> `\n : html`<p>${activeInfo}</p>\n <p class=\"font-bold\">${expired}</p>` \|\| ''\n\n return html`<p class=\"text-sm ${expiredTextColor}\">${text}</p>`\n }\n\n return html`<div\n class=\"active-info flex flex-col items-start leading-none text-left font-sans\"\n >\n <div class=\"flex flex-row items-center gap-4\">\n <div\n class=\"flex bg-brand-1 flex-shrink-0 p-5 rounded-full h-16 w-16 items-center justify-center relative\"\n >\n <span class=\"capitalize text-2xl text-grey-100 font-bold\"\n >${this.userInitialName}</span\n >\n ${membershipIcon()}\n </div>\n\n <div class=\"flex flex-col text-left\">\n <p class=\"capitalize font-bold text-base text-blue-600\">\n ${truncate(this.userData.userName, 25)}\n </p>\n ${activeInfoTemplate()}\n </div>\n </div>\n\n ${this.userData?.isGracePeriod\n ? html`<div class=\"mt-4\">\n <kompasid-grace-period\n totalGracePeriod=${this.userData.totalGracePeriod}\n isColumn=\"true\"\n isShowButton=\"true\"\n isBackgroundOnContentOnly=\"true\"\n paywall_location=${this.paywall_location}\n paywall_subscription_package=${this.paywall_subscription_package}\n paywall_subscription_id=${this.paywall_subscription_id}\n paywall_subscription_price=${this.paywall_subscription_price}\n paywall_position=${this.paywall_position}\n tracker_page_type=${this.tracker_page_type}\n tracker_content_id=${this.tracker_content_id}\n tracker_content_title=${this.tracker_content_title}\n tracker_content_categories=${this.tracker_content_categories}\n tracker_content_type=${this.tracker_content_type}\n tracker_user_type=${this.tracker_user_type}\n tracker_subscription_status=${this.tracker_subscription_status}\n tracker_page_domain=${this.tracker_page_domain}\n tracker_metered_wall_type=${this.tracker_metered_wall_type}\n tracker_metered_wall_balance=${this.tracker_metered_wall_balance}\n ></kompasid-grace-period>\n </div>`\n : subscribeButton()}\n </div>`\n }\n\n override async connectedCallback() {\n super.connectedCallback()\n }\n\n render() {\n return html`\n <div class=\"flex flex-shrink-0 flex-col bg-blue-100 p-4\">\n ${!this.userData\n ? this.renderSkeletonLoading()\n : this.renderProfileContent()}\n </div>\n `\n }\n}\n"]}

package/dist/src/components/kompasid-header-notification/KompasHeaderNotification.js CHANGED Viewed

@@ -291,7 +291,7 @@ let KompasHeaderNotification = class KompasHeaderNotification extends LitElement
     </div>`;
     }
     redirectToNotification(tab) {
-        window.open(`https://account.kompas.${this.domain}/manage-account/notification/${tab}`, '_blank');
+        window.open(`https://manage-account.kompas.${this.domain}/manage-account/notification/${tab}`, '_blank');
     }
     // Notification Content
     notificationContentSection() {