npm - @kompasid/lit-web-components - Versions diffs - 0.9.47 → 0.9.49 - Mend

@kompasid/lit-web-components 0.9.47 → 0.9.49

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

package/demo/header.html CHANGED Viewed

@@ -46,6 +46,7 @@
     import { format, addDays } from 'date-fns'
     import { id } from 'date-fns/locale/id'
     import '../dist/src/components/kompasid-header-account/KompasHeaderAccount.js'
+    import "../dist/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.js"
     import '../dist/src/components/kompasid-header-notification/KompasHeaderNotification.js'
     const urlParams = new URLSearchParams(window.location.search);
@@ -102,14 +103,15 @@
     let renderKey = 0
     const cartUrl = '/cart'
-    const logoutUrl = 'https://account.kompas.id/logout/tests'
-    const manageAccountUrl = '/manage-count'
+    const logoutUrl = ''
+    const manageAccountUrl = ''
     const notificationUrl = '/notif'
     const notificationTotal = '10'
     const ordersUrl = '/orders'
+    const companyName = 'PT Toyota Motor Manufacturing Indonesia'
     const subscriptionUrl = 'https://www.kompas.id/berlangganan/v2'
     // const subscriptionUrl = 'https://www.kompas.cloud/berlangganan/v2'
-    const readLaterUrl = '/baca-nanti'
+    const readLaterUrl = ''
     const totalGracePeriod = '5'
     const paywallLocation = 'paywall'
     const paywallSubscriptionPackage = 'kompasid'
@@ -156,6 +158,7 @@
               .logout_url=${logoutUrl}
               .read_later_url=${readLaterUrl}
               .manage_account_url=${manageAccountUrl}
+              .company_name=${companyName}
               sidebarTopSpacing="49"
               .notification_url=${notificationUrl}
               .notification_total=${notificationTotal}
@@ -188,7 +191,11 @@
       )
     }
+    function getInitialUserName(name) {
+      return name
+        ? name.charAt(0)
+        : ''
+    }
     function handleInput(e) {
       try {
@@ -214,7 +221,16 @@
             <button @click=${() => handleTemplateClick('tidakBerlangganan')}>Tidak berlangganan</button>
           </div>
           <textarea @input=${handleInput} .value=${JSON.stringify(userData, null, 2)} style="width: 100%; height: 200px; font-family: monospace;"></textarea>
-        `,
+          <div style="max-width: 300px;">
+            <kompasid-header-account-profile
+              .userInitialName=${getInitialUserName(userData?.userName)}
+              .userData=${userData}
+              .theme=${headerTheme}
+              .company_name=${companyName}
+              .manage_account_url=${manageAccountUrl}
+            ></kompasid-header-account-profile>
+          </div>
+          `,
         document.getElementById('controller-container')
       )
     }

package/demo/paywall.html CHANGED Viewed

@@ -38,8 +38,9 @@
     import { html, render } from 'lit'
     import '../dist/src/components/kompasid-paywall/KompasPaywall.js'
     import '../dist/src/components/kompasid-metered-paywall/KompasMeteredPaywall.js'
+    import '../dist/src/components/kompasid-paywall-modal-register/KompasPaywallModalRegister.js'
-    const type = 'audio'
+    const type = 'proMiningArticle'
     const theme = ''
     const paywallLocation = 'paywall_location'
     const paywallSubscriptionId = 'testId'
@@ -51,7 +52,7 @@
     const trackerContentTitle = 'content_title'
     const trackerContentCategories = 'content_categories'
     const trackerUserType = 'user_type'
-    const trackerContentTags = 'ekonomi|polhuk'
+    const trackerContentTags = 'english|bonjour'
     const trackerContentPublishedDate = '2026-02-27 08:00:12'
     const trackerContentVariant = 'testa'
     const trackerContentPublisher = 'publisher'

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

@@ -14,6 +14,7 @@ export declare class KompasHeaderAccount extends LitElement {
     logout_url: string;
     manage_account_url: string;
     read_later_url: string;
+    company_name: string;
     userData: {};
     sidebarTopSpacing: number;
     subscriptionUrl: string;

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

@@ -4,6 +4,7 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { cva } from 'class-variance-authority';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js';
+import { addGoogleFonts } from '../../utils/googleFont.js';
 import { TWStyles } from '../../../tailwind/tailwind.js';
 import { getHeaderTheme } from '../../utils/api/getHeaderTheme.js';
 import '../kompasid-header-account-profile/KompasHeaderAccountProfile.js';
@@ -21,6 +22,7 @@ let KompasHeaderAccount = class KompasHeaderAccount extends LitElement {
         this.logout_url = '';
         this.manage_account_url = '';
         this.read_later_url = '';
+        this.company_name = '';
         this.userData = {};
         this.sidebarTopSpacing = 0;
         this.subscriptionUrl = '';
@@ -123,6 +125,8 @@ let KompasHeaderAccount = class KompasHeaderAccount extends LitElement {
             .userInitialName=${this.getInitialUserName()}
             .userData=${this.formattedUserData}
             .subscriptionUrl=${this.subscriptionUrl}
+            .company_name=${this.company_name}
+            .manage_account_url=${this.manage_account_url}
             paywall_location=${this.paywall_location}
             paywall_subscription_package=${this.paywall_subscription_package}
             paywall_subscription_id=${this.paywall_subscription_id}
@@ -155,6 +159,7 @@ let KompasHeaderAccount = class KompasHeaderAccount extends LitElement {
         super.connectedCallback();
         this.isShowSidebar = false;
         this.themeList = await getHeaderTheme();
+        addGoogleFonts(['pt-sans']);
         if (typeof this.userData === 'string') {
             this.formattedUserData = JSON.parse(this.userData);
         }
@@ -271,6 +276,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], KompasHeaderAccount.prototype, "read_later_url", void 0);
+__decorate([
+    property({ type: String })
+], KompasHeaderAccount.prototype, "company_name", void 0);
 __decorate([
     property({ type: Object })
 ], KompasHeaderAccount.prototype, "userData", void 0);

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 /\n Props default\n /\n @property({ type: String }) logout_url = ''\n @property({ type: String }) manage_account_url = ''\n @property({ type: String }) read_later_url = ''\n @property({ type: Object }) userData = {}\n @property({ type: Number }) sidebarTopSpacing = 0\n @property({ type: String }) subscriptionUrl = ''\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 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 .manage_account_url=${this.manage_account_url}\n .logout_url=${this.logout_url}\n .read_later_url=${this.read_later_url}\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 { addGoogleFonts } from '../../utils/googleFont.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 }) logout_url = ''\n @property({ type: String }) manage_account_url = ''\n @property({ type: String }) read_later_url = ''\n @property({ type: String }) company_name = ''\n @property({ type: Object }) userData = {}\n @property({ type: Number }) sidebarTopSpacing = 0\n @property({ type: String }) subscriptionUrl = ''\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 .company_name=${this.company_name}\n .manage_account_url=${this.manage_account_url}\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 .manage_account_url=${this.manage_account_url}\n .logout_url=${this.logout_url}\n .read_later_url=${this.read_later_url}\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 addGoogleFonts(['pt-sans'])\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-menu/KompasHeaderAccountMenu.d.ts CHANGED Viewed

@@ -16,6 +16,7 @@ export declare class KompasHeaderAccountMenu extends LitElement {
      */
     read_later_url: string;
     private renderTotalBubble;
+    private komputasiUrl;
     connectedCallback(): Promise<void>;
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -11,15 +11,15 @@ let KompasHeaderAccountMenu = class KompasHeaderAccountMenu extends LitElement {
         /**
          * Logout Url
          */
-        this.logout_url = 'https://auth.kompas.id/logout';
+        this.logout_url = '';
         /**
          * Manage Account Url
          */
-        this.manage_account_url = 'https://manage-account.kompas.id/manage-account/my-account';
+        this.manage_account_url = '';
         /**
          * Read Later Url
          */
-        this.read_later_url = 'https://www.kompas.id/baca-nanti';
+        this.read_later_url = '';
         // Render Total Bubble
         this.renderTotalBubble = (total) => {
             if (!total) {
@@ -39,6 +39,14 @@ let KompasHeaderAccountMenu = class KompasHeaderAccountMenu extends LitElement {
     `;
         };
     }
+    komputasiUrl() {
+        return {
+            read_later_url: this.read_later_url || 'https://www.kompas.id/baca-nanti',
+            manage_account_url: this.manage_account_url ||
+                'https://manage-account.kompas.id/manage-account/my-account',
+            logout_url: this.logout_url || 'https://auth.kompas.id/logout',
+        };
+    }
     async connectedCallback() {
         super.connectedCallback();
     }
@@ -54,7 +62,10 @@ let KompasHeaderAccountMenu = class KompasHeaderAccountMenu extends LitElement {
             <p class="header-account-menu--title">Keranjang</p>
           </a> -->
           <!-- Manage Account  -->
-          <a href=${this.manage_account_url} class="header-account-menu--item">
+          <a
+            href=${this.komputasiUrl().manage_account_url}
+            class="header-account-menu--item"
+          >
             <div class="icon icon-md icon-blue-600">
               ${unsafeSVG(getFontAwesomeIcon('fas', 'user-gear'))}
             </div>
@@ -66,14 +77,20 @@ let KompasHeaderAccountMenu = class KompasHeaderAccountMenu extends LitElement {
             <p class="header-account-menu--title">Transaksi</p>
           </a> -->
           <!-- Read Later  -->
-          <a href=${this.read_later_url} class="header-account-menu--item">
+          <a
+            href=${this.komputasiUrl().read_later_url}
+            class="header-account-menu--item"
+          >
             <div class="icon icon-md icon-blue-600">
               ${unsafeSVG(getFontAwesomeIcon('fas', 'bookmark'))}
             </div>
             <p class="header-account-menu--title">Baca Nanti</p>
           </a>
           <!-- Logout -->
-          <a href=${this.logout_url} class="header-account-menu--item">
+          <a
+            href=${this.komputasiUrl().logout_url}
+            class="header-account-menu--item"
+          >
             <div class="icon icon-md icon-blue-600">
               ${unsafeSVG(getFontAwesomeIcon('fas', 'right-from-bracket'))}
             </div>

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

	@@ -1 +1 @@
1	- {"version":3,"file":"KompasHeaderAccountMenu.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account-menu/KompasHeaderAccountMenu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAA;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AAGjD,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;IAAhD;;QAkDI,qBAAgB,GAAY,KAAK,CAAA;QAE1C;;WAEG;QACyB,eAAU,GAAG~~,+BAA+B~~,CAAA;~~QAExE~~;;WAEG;QACyB,uBAAkB,~~GAC5C~~,~~4DAA4D~~,CAAA;~~QAE9D~~;;WAEG;QACyB,mBAAc,~~GACxC~~,~~kCAAkC~~,CAAA;~~QAEpC~~,sBAAsB;QACd,sBAAiB,GAAG,CAAC,KAAa,EAAE,EAAE;YAC5C,IAAI,CAAC,KAAK,EAAE;gBACV,OAAO,IAAI,CAAA,EAAE,CAAA;aACd;YAED,MAAM,sBAAsB,GAAG,KAAK,GAAG,CAAC,IAAI,KAAK,IAAI,CAAC,CAAA;YACtD,MAAM,iBAAiB,GAAG,sBAAsB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAA;YAEhE,OAAO,IAAI,CAAA;;gBAEC,0CAA0C,iBAAiB,EAAE;;;UAGnE,sBAAsB;gBACtB,CAAC,CAAC,KAAK;gBACP,CAAC,CAAC,IAAI,CAAA,4CAA4C;;KAEvD,CAAA;QACH,CAAC,CAAA;IA+CH,CAAC;~~IA7CU~~,KAAK,CAAC,iBAAiB;QAC9B,KAAK,CAAC,iBAAiB,EAAE,CAAA;IAC3B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA~~;;;;;;;;;;;oBAWK~~,IAAI,CAAC,kBAAkB~~;;gBAE3B~~,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC~~;;;;;;;;;;oBAU7C~~,IAAI,CAAC,cAAc~~;;gBAEvB~~,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC~~;;;;;oBAK5C~~,IAAI,CAAC,UAAU~~;;gBAEnB~~,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,oBAAoB,CAAC,CAAC;;;;;;KAMrE,CAAA;IACH,CAAC;;~~AArIM~~,8BAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0CF;IACD,QAAQ;CACT,CAAA;AAIQ;IAAR,KAAK,EAAE;iEAAkC;AAKd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;~~2DAA6C~~;~~AAK5C~~;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;~~mEACmC~~;~~AAKlC~~;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+~~DACS~~;~~AAnEzB~~,uBAAuB;IADnC,aAAa,CAAC,8BAA8B,CAAC;GACjC,uBAAuB,~~CAuInC~~;~~SAvIY~~,uBAAuB","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, state, property } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\n\n@customElement('kompasid-header-account-menu')\nexport class KompasHeaderAccountMenu extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n .header-account-menu--item {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0.75rem;\n transition: background-color 0.3s ease-in-out;\n border-radius: 0.25rem;\n }\n .header-account-menu--item:hover {\n background-color: #e5e7eb; /* Assuming grey-200 /\n }\n .header-account-menu--title {\n flex-grow: 1;\n font-size: 1rem;\n font-weight: bold;\n margin-left: 1rem;\n }\n .header-account-menu--notification-info {\n font-size: 0.875rem;\n border-radius: 1.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: rgb(255, 122, 0);\n color: #f7fafc;\n height: 1.75rem;\n width: 1.75rem;\n }\n .icon {\n margin-top: auto;\n margin-bottom: auto;\n color: rgb(0 85 154);\n }\n .icon svg {\n width: 20px;\n height: 20px;\n }\n .\n `,\n TWStyles,\n ]\n\n kompasKring?: HTMLInputElement\n\n @state() clipboardClicked: boolean = false\n\n /\n Logout Url\n /\n @property({ type: String }) logout_url = '~~https://auth.kompas.id/logout~~'\n\n /\n Manage Account Url\n /\n @property({ type: String }) manage_account_url ~~=\n~~ '~~https://manage-account.kompas.id/manage-account/my-account~~'\n\n /\n Read Later Url\n */\n @property({ type: String }) read_later_url ~~=\n~~ '~~https://www.kompas.id/baca-nanti~~'\n\n // Render Total Bubble\n private renderTotalBubble = (total: number) => {\n if (!total) {\n return html``\n }\n\n const isOneDigitNotification = total > 0 && total <= 9\n const additionalStyling = isOneDigitNotification ? '' : 'pl-0.5'\n\n return html`\n <div\n class=${`header-account-menu--notification-info ${additionalStyling}`}\n >\n <!-- Limit Display to use \"9+\"\" if total notification exceed 9 -->\n ${isOneDigitNotification\n ? total\n : html`<span>9<span class=\"pl-px\">+</span></span>`}\n </div>\n `\n }\n\n override async connectedCallback() {\n super.connectedCallback()\n }\n\n render() {\n return html`\n <div class=\"border-b border-grey-300 text-grey-600\">\n <li\n class=\"font-bold flex flex-shrink-0 flex-col text-left text-sm mb-4\"\n >\n <!-- Cart -->\n <!--<a href={this.cartUrl} class=\"header-account-menu--item\">\n <div class=\"icon icon-md icon-blue-600\">{unsafeSVG(getFontAwesomeIcon('fas', 'cart-shopping'))}</div>\n <p class=\"header-account-menu--title\">Keranjang</p>\n </a> -->\n <!-- Manage Account -->\n <a href=${this.manage_account_url} class=\"header-account-menu--item\">\n <div class=\"icon icon-md icon-blue-600\">\n ${unsafeSVG(getFontAwesomeIcon('fas', 'user-gear'))}\n </div>\n <p class=\"header-account-menu--title\">Kelola Akun</p>\n </a>\n <!-- Transaction -->\n <!-- <a href={this.ordersUrl} class=\"header-account-menu--item\">\n <div class=\"icon icon-md icon-blue-600\">{unsafeSVG(getFontAwesomeIcon('fas', 'arrow-right-arrow-left'))}</div>\n <p class=\"header-account-menu--title\">Transaksi</p>\n </a> -->\n <!-- Read Later -->\n <a href=${this.read_later_url} class=\"header-account-menu--item\">\n <div class=\"icon icon-md icon-blue-600\">\n ${unsafeSVG(getFontAwesomeIcon('fas', 'bookmark'))}\n </div>\n <p class=\"header-account-menu--title\">Baca Nanti</p>\n </a>\n <!-- Logout -->\n <a href=${this.logout_url} class=\"header-account-menu--item\">\n <div class=\"icon icon-md icon-blue-600\">\n ${unsafeSVG(getFontAwesomeIcon('fas', 'right-from-bracket'))}\n </div>\n <p class=\"header-account-menu--title\">Keluar</p>\n </a>\n </li>\n </div>\n `\n }\n}\n"]}
1	+ {"version":3,"file":"KompasHeaderAccountMenu.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account-menu/KompasHeaderAccountMenu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAA;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AAGjD,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;IAAhD;;QAkDI,qBAAgB,GAAY,KAAK,CAAA;QAE1C;;WAEG;QACyB,eAAU,GAAG,EAAE,CAAA;QAE3C;;WAEG;QACyB,uBAAkB,GAAG,EAAE,CAAA;QAEnD;;WAEG;QACyB,mBAAc,GAAG,EAAE,CAAA;QAE/C,sBAAsB;QACd,sBAAiB,GAAG,CAAC,KAAa,EAAE,EAAE;YAC5C,IAAI,CAAC,KAAK,EAAE;gBACV,OAAO,IAAI,CAAA,EAAE,CAAA;aACd;YAED,MAAM,sBAAsB,GAAG,KAAK,GAAG,CAAC,IAAI,KAAK,IAAI,CAAC,CAAA;YACtD,MAAM,iBAAiB,GAAG,sBAAsB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAA;YAEhE,OAAO,IAAI,CAAA;;gBAEC,0CAA0C,iBAAiB,EAAE;;;UAGnE,sBAAsB;gBACtB,CAAC,CAAC,KAAK;gBACP,CAAC,CAAC,IAAI,CAAA,4CAA4C;;KAEvD,CAAA;QACH,CAAC,CAAA;IAkEH,CAAC;IAhES,YAAY;QAClB,OAAO;YACL,cAAc,EAAE,IAAI,CAAC,cAAc,IAAI,kCAAkC;YACzE,kBAAkB,EAChB,IAAI,CAAC,kBAAkB;gBACvB,4DAA4D;YAC9D,UAAU,EAAE,IAAI,CAAC,UAAU,IAAI,+BAA+B;SAC/D,CAAA;IACH,CAAC;IAEQ,KAAK,CAAC,iBAAiB;QAC9B,KAAK,CAAC,iBAAiB,EAAE,CAAA;IAC3B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;mBAYI,IAAI,CAAC,YAAY,EAAE,CAAC,kBAAkB;;;;gBAIzC,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;;;;;;;;;;;mBAW9C,IAAI,CAAC,YAAY,EAAE,CAAC,cAAc;;;;gBAIrC,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;;;;;;mBAM7C,IAAI,CAAC,YAAY,EAAE,CAAC,UAAU;;;;gBAIjC,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,oBAAoB,CAAC,CAAC;;;;;;KAMrE,CAAA;IACH,CAAC;;AAtJM,8BAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0CF;IACD,QAAQ;CACT,CAAA;AAIQ;IAAR,KAAK,EAAE;iEAAkC;AAKd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DAAgB;AAKf;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mEAAwB;AAKvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+DAAoB;AAjEpC,uBAAuB;IADnC,aAAa,CAAC,8BAA8B,CAAC;GACjC,uBAAuB,CAwJnC;SAxJY,uBAAuB","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, state, property } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\n\n@customElement('kompasid-header-account-menu')\nexport class KompasHeaderAccountMenu extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n .header-account-menu--item {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0.75rem;\n transition: background-color 0.3s ease-in-out;\n border-radius: 0.25rem;\n }\n .header-account-menu--item:hover {\n background-color: #e5e7eb; /* Assuming grey-200 /\n }\n .header-account-menu--title {\n flex-grow: 1;\n font-size: 1rem;\n font-weight: bold;\n margin-left: 1rem;\n }\n .header-account-menu--notification-info {\n font-size: 0.875rem;\n border-radius: 1.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: rgb(255, 122, 0);\n color: #f7fafc;\n height: 1.75rem;\n width: 1.75rem;\n }\n .icon {\n margin-top: auto;\n margin-bottom: auto;\n color: rgb(0 85 154);\n }\n .icon svg {\n width: 20px;\n height: 20px;\n }\n .\n `,\n TWStyles,\n ]\n\n kompasKring?: HTMLInputElement\n\n @state() clipboardClicked: boolean = false\n\n /\n Logout Url\n /\n @property({ type: String }) logout_url = ''\n\n /\n Manage Account Url\n /\n @property({ type: String }) manage_account_url = ''\n\n /\n Read Later Url\n */\n @property({ type: String }) read_later_url = ''\n\n // Render Total Bubble\n private renderTotalBubble = (total: number) => {\n if (!total) {\n return html``\n }\n\n const isOneDigitNotification = total > 0 && total <= 9\n const additionalStyling = isOneDigitNotification ? '' : 'pl-0.5'\n\n return html`\n <div\n class=${`header-account-menu--notification-info ${additionalStyling}`}\n >\n <!-- Limit Display to use \"9+\"\" if total notification exceed 9 -->\n ${isOneDigitNotification\n ? total\n : html`<span>9<span class=\"pl-px\">+</span></span>`}\n </div>\n `\n }\n\n private komputasiUrl() {\n return {\n read_later_url: this.read_later_url \|\| 'https://www.kompas.id/baca-nanti',\n manage_account_url:\n this.manage_account_url \|\|\n 'https://manage-account.kompas.id/manage-account/my-account',\n logout_url: this.logout_url \|\| 'https://auth.kompas.id/logout',\n }\n }\n\n override async connectedCallback() {\n super.connectedCallback()\n }\n\n render() {\n return html`\n <div class=\"border-b border-grey-300 text-grey-600\">\n <li\n class=\"font-bold flex flex-shrink-0 flex-col text-left text-sm mb-4\"\n >\n <!-- Cart -->\n <!--<a href={this.cartUrl} class=\"header-account-menu--item\">\n <div class=\"icon icon-md icon-blue-600\">{unsafeSVG(getFontAwesomeIcon('fas', 'cart-shopping'))}</div>\n <p class=\"header-account-menu--title\">Keranjang</p>\n </a> -->\n <!-- Manage Account -->\n <a\n href=${this.komputasiUrl().manage_account_url}\n class=\"header-account-menu--item\"\n >\n <div class=\"icon icon-md icon-blue-600\">\n ${unsafeSVG(getFontAwesomeIcon('fas', 'user-gear'))}\n </div>\n <p class=\"header-account-menu--title\">Kelola Akun</p>\n </a>\n <!-- Transaction -->\n <!-- <a href={this.ordersUrl} class=\"header-account-menu--item\">\n <div class=\"icon icon-md icon-blue-600\">{unsafeSVG(getFontAwesomeIcon('fas', 'arrow-right-arrow-left'))}</div>\n <p class=\"header-account-menu--title\">Transaksi</p>\n </a> -->\n <!-- Read Later -->\n <a\n href=${this.komputasiUrl().read_later_url}\n class=\"header-account-menu--item\"\n >\n <div class=\"icon icon-md icon-blue-600\">\n ${unsafeSVG(getFontAwesomeIcon('fas', 'bookmark'))}\n </div>\n <p class=\"header-account-menu--title\">Baca Nanti</p>\n </a>\n <!-- Logout -->\n <a\n href=${this.komputasiUrl().logout_url}\n class=\"header-account-menu--item\"\n >\n <div class=\"icon icon-md icon-blue-600\">\n ${unsafeSVG(getFontAwesomeIcon('fas', 'right-from-bracket'))}\n </div>\n <p class=\"header-account-menu--title\">Keluar</p>\n </a>\n </li>\n </div>\n `\n }\n}\n"]}

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

@@ -9,6 +9,8 @@ export declare class KompasHeaderAccountProfile extends LitElement {
     userInitialName: string;
     userData: User;
     subscriptionUrl: string;
+    company_name: string;
+    manage_account_url: string;
     openFrom: string;
     /**
      * Props For Grace Period Tracker
@@ -35,6 +37,7 @@ export declare class KompasHeaderAccountProfile extends LitElement {
     formatDate(date: Date | string): string;
     private renderSkeletonLoading;
     private renderProfileContent;
+    clickToManageAccount(): void;
     connectedCallback(): Promise<void>;
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -1,9 +1,11 @@
 import { __decorate } from "tslib";
-import { LitElement, html, css } from 'lit';
+import { LitElement, html, css, nothing } from 'lit';
 import { format, addDays, differenceInDays } from 'date-fns';
 import { id } from 'date-fns/locale/id';
 import { customElement, property, state } from 'lit/decorators.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { TWStyles } from '../../../tailwind/tailwind.js';
+import { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js';
 import '../kompasid-grace-period/KompasGracePeriod.js';
 let KompasHeaderAccountProfile = class KompasHeaderAccountProfile extends LitElement {
     constructor() {
@@ -14,6 +16,8 @@ let KompasHeaderAccountProfile = class KompasHeaderAccountProfile extends LitEle
         this.userInitialName = '';
         this.userData = {};
         this.subscriptionUrl = '';
+        this.company_name = '';
+        this.manage_account_url = '';
         this.openFrom = '';
         /**
          * Props For Grace Period Tracker
@@ -158,13 +162,52 @@ let KompasHeaderAccountProfile = class KompasHeaderAccountProfile extends LitEle
         ${result}
       </p>`;
         };
+        /**
+         * Kompeni Element
+         */
+        const kompeniTemplate = () => html ` <div
+      class="flex relative group bg-[#FFF8D6] text-yellow-700 gap-1 p-2 mt-2 rounded items-center justify-center text-xs max-w-[190px] font-sans leading-none"
+    >
+      <div class="w-5 h-5 flex items-center justify-center flex-shrink-0">
+        ${unsafeSVG(getFontAwesomeIcon('fa', 'building-circle-check', 13, 10))}
+      </div>
+      <p class="truncate">${this.company_name}</p>
+      <div
+        class="absolute px-2 top-full -right-[5%] w-max max-w-[300px] mt-1 hidden group-hover:block"
+      >
+        <div
+          class="bg-grey-600 text-white text-sm font-sans p-4 rounded-lg relative leading-5"
+        >
+          ${this.company_name}
+          <svg
+            width="16"
+            height="12"
+            viewBox="0 0 24 13"
+            class="text-grey-600 absolute left-[80%] -top-[11px]"
+          >
+            <polygon
+              points="3,15 12,3 21,15"
+              fill="currentColor"
+              stroke="currentColor"
+              stroke-width="4"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>`;
         return html `
       <div
         class="active-info flex flex-col items-start leading-none text-left font-sans"
       >
         <div class="flex flex-row items-center gap-4">
           <div
-            class="flex bg-brand-1 flex-shrink-0 p-5 rounded-full h-16 w-16 items-center justify-center relative"
+            @click=${() => this.clickToManageAccount()}
+            @keydown=${() => this.clickToManageAccount()}
+            class="flex bg-brand-1 flex-shrink-0 p-5 rounded-full h-16 w-16 items-center justify-center relative select-none ${this
+            .manage_account_url
+            ? 'cursor-pointer'
+            : ''}"
           >
             <span class="capitalize text-2xl text-grey-100 font-bold">
               ${this.userInitialName}
@@ -173,10 +216,21 @@ let KompasHeaderAccountProfile = class KompasHeaderAccountProfile extends LitEle
           </div>
           <div class="flex flex-col text-left">
-            <p class="capitalize font-bold text-base text-blue-600">
-              ${this.userData.userName}
-            </p>
-            ${activeInfoTemplate()}
+            <div
+              @click=${() => this.clickToManageAccount()}
+              @keydown=${() => this.clickToManageAccount()}
+              class="select-none"
+            >
+              <p
+                class="capitalize font-bold text-base ${this.manage_account_url
+            ? 'text-blue-600 cursor-pointer'
+            : 'text-grey-600'}"
+              >
+                ${this.userData.userName}
+              </p>
+              ${activeInfoTemplate()}
+            </div>
+            ${this.company_name ? kompeniTemplate() : nothing}
           </div>
         </div>
@@ -210,6 +264,11 @@ let KompasHeaderAccountProfile = class KompasHeaderAccountProfile extends LitEle
       </div>
     `;
     }
+    clickToManageAccount() {
+        if (this.manage_account_url) {
+            window.location.href = this.manage_account_url;
+        }
+    }
     async connectedCallback() {
         super.connectedCallback();
     }
@@ -231,6 +290,18 @@ KompasHeaderAccountProfile.styles = [
         bottom: -2px;
         right: -2px;
       }
+      .tooltip::after {
+        content: '';
+        position: absolute;
+        width: 24px;
+        height: 16px;
+        background-color: #333333;
+        /* Memotong kotak menjadi segitiga */
+        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+        /* Menghaluskan sudut potongan */
+        border-radius: 4px;
+      }
     `,
     TWStyles,
 ];
@@ -243,6 +314,12 @@ __decorate([
 __decorate([
     property({ type: String })
 ], KompasHeaderAccountProfile.prototype, "subscriptionUrl", void 0);
+__decorate([
+    property({ type: String })
+], KompasHeaderAccountProfile.prototype, "company_name", void 0);
+__decorate([
+    property({ type: String })
+], KompasHeaderAccountProfile.prototype, "manage_account_url", void 0);
 __decorate([
     property({ type: String })
 ], KompasHeaderAccountProfile.prototype, "openFrom", void 0);

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, addDays, differenceInDays } 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 { 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: 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.isMembership) {\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-brand-1 text-grey-100 font-bold text-base focus:outline-none\"\n >\n Berlangganan Sekarang\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, expired } = this.userData\n\n let result = html`Tidak Berlangganan` // default\n let endGracePeriodDate = ''\n\n const nowDate = new Date()\n const isoDateString = expired.replace(' ', 'T')\n const expiredDate = new Date(isoDateString)\n const subsDaysLeft: number = differenceInDays(expiredDate, nowDate) + 1 // differenceInDays + 1 jika tanggal bertepatan di hari yang sama\n\n const gracePeriodCard = () => {\n if (isGracePeriod) {\n const totalGraceSubs =\n this.maxGracePeriod - Math.max(totalGracePeriod, 0)\n endGracePeriodDate = this.formatDate(\n addDays(\n new Date(),\n totalGracePeriod > this.maxGracePeriod ? 0 : totalGraceSubs\n )\n )\n }\n const label = 'Periode Masa Tenggang'\n return html`\n <div class=\"text-orange-500 gracePeriodCard\">\n <span>${label}</span>\n <p class=\"font-bold\">hingga ${endGracePeriodDate}</p>\n </div>\n `\n }\n\n const lessThan3daysCard = () => {\n const label = 'Aktif Berlangganan'\n return html`\n <div class=\"lessThan3daysCard\">\n <span> ${label} </span>\n <p class=\"font-bold\">Berakhir ${subsDaysLeft} hari lagi</p>\n </div>\n `\n }\n\n const moreThan3daysCard = () => {\n const formattedExpired = this.formatDate(expired)\n const label = 'Aktif Berlangganan'\n return html`\n <div class=\"moreThan3daysCard\">\n <span>${label}</span>\n <p class=\"font-bold\">hingga ${formattedExpired}</p>\n </div>\n `\n }\n\n if (isGracePeriod && totalGracePeriod > 0) {\n result = gracePeriodCard()\n } else if (subsDaysLeft >= 0 && subsDaysLeft <= 3) {\n result = lessThan3daysCard()\n } else if (subsDaysLeft > 3) {\n result = moreThan3daysCard()\n }\n\n return html`<p class=\"text-sm text-grey-600 ${subsDaysLeft}-days-left\">\n ${result}\n </p>`\n }\n\n return html`\n <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}\n </span>\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 ${this.userData.userName}\n </p>\n ${activeInfoTemplate()}\n </div>\n </div>\n\n ${this.userData?.isGracePeriod\n ? html` <div class=\"mt-4 kompasid-grace-period\">\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\n .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\n .tracker_metered_wall_balance}\n ></kompasid-grace-period>\n </div>`\n : subscribeButton()}\n </div>\n `\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 p-4\">\n ${!this.userData\n ? this.renderSkeletonLoading()\n : this.renderProfileContent()}\n </div>\n <hr class=\"border-grey-300 mx-4\" />\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, nothing } from 'lit'\nimport { format, addDays, differenceInDays } from 'date-fns'\nimport { id } from 'date-fns/locale/id'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { User } from '../kompasid-header-account/types.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.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 .tooltip::after {\n content: '';\n position: absolute;\n width: 24px;\n height: 16px;\n background-color: #333333;\n /* Memotong kotak menjadi segitiga /\n clip-path: polygon(50% 0%, 0% 100%, 100% 100%);\n / Menghaluskan sudut potongan /\n border-radius: 4px;\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: String }) company_name = ''\n @property({ type: String }) manage_account_url = ''\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.isMembership) {\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-brand-1 text-grey-100 font-bold text-base focus:outline-none\"\n >\n Berlangganan Sekarang\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, expired } = this.userData\n\n let result = html`Tidak Berlangganan` // default\n let endGracePeriodDate = ''\n\n const nowDate = new Date()\n const isoDateString = expired.replace(' ', 'T')\n const expiredDate = new Date(isoDateString)\n const subsDaysLeft: number = differenceInDays(expiredDate, nowDate) + 1 // differenceInDays + 1 jika tanggal bertepatan di hari yang sama\n\n const gracePeriodCard = () => {\n if (isGracePeriod) {\n const totalGraceSubs =\n this.maxGracePeriod - Math.max(totalGracePeriod, 0)\n endGracePeriodDate = this.formatDate(\n addDays(\n new Date(),\n totalGracePeriod > this.maxGracePeriod ? 0 : totalGraceSubs\n )\n )\n }\n const label = 'Periode Masa Tenggang'\n return html`\n <div class=\"text-orange-500 gracePeriodCard\">\n <span>${label}</span>\n <p class=\"font-bold\">hingga ${endGracePeriodDate}</p>\n </div>\n `\n }\n\n const lessThan3daysCard = () => {\n const label = 'Aktif Berlangganan'\n return html`\n <div class=\"lessThan3daysCard\">\n <span> ${label} </span>\n <p class=\"font-bold\">Berakhir ${subsDaysLeft} hari lagi</p>\n </div>\n `\n }\n\n const moreThan3daysCard = () => {\n const formattedExpired = this.formatDate(expired)\n const label = 'Aktif Berlangganan'\n return html`\n <div class=\"moreThan3daysCard\">\n <span>${label}</span>\n <p class=\"font-bold\">hingga ${formattedExpired}</p>\n </div>\n `\n }\n\n if (isGracePeriod && totalGracePeriod > 0) {\n result = gracePeriodCard()\n } else if (subsDaysLeft >= 0 && subsDaysLeft <= 3) {\n result = lessThan3daysCard()\n } else if (subsDaysLeft > 3) {\n result = moreThan3daysCard()\n }\n\n return html`<p class=\"text-sm text-grey-600 ${subsDaysLeft}-days-left\">\n ${result}\n </p>`\n }\n\n /\n Kompeni Element\n */\n const kompeniTemplate = () => html` <div\n class=\"flex relative group bg-[#FFF8D6] text-yellow-700 gap-1 p-2 mt-2 rounded items-center justify-center text-xs max-w-[190px] font-sans leading-none\"\n >\n <div class=\"w-5 h-5 flex items-center justify-center flex-shrink-0\">\n ${unsafeSVG(getFontAwesomeIcon('fa', 'building-circle-check', 13, 10))}\n </div>\n <p class=\"truncate\">${this.company_name}</p>\n <div\n class=\"absolute px-2 top-full -right-[5%] w-max max-w-[300px] mt-1 hidden group-hover:block\"\n >\n <div\n class=\"bg-grey-600 text-white text-sm font-sans p-4 rounded-lg relative leading-5\"\n >\n ${this.company_name}\n <svg\n width=\"16\"\n height=\"12\"\n viewBox=\"0 0 24 13\"\n class=\"text-grey-600 absolute left-[80%] -top-[11px]\"\n >\n <polygon\n points=\"3,15 12,3 21,15\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n stroke-width=\"4\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n </div>`\n\n return html`\n <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 @click=${() => this.clickToManageAccount()}\n @keydown=${() => this.clickToManageAccount()}\n class=\"flex bg-brand-1 flex-shrink-0 p-5 rounded-full h-16 w-16 items-center justify-center relative select-none ${this\n .manage_account_url\n ? 'cursor-pointer'\n : ''}\"\n >\n <span class=\"capitalize text-2xl text-grey-100 font-bold\">\n ${this.userInitialName}\n </span>\n ${membershipIcon()}\n </div>\n\n <div class=\"flex flex-col text-left\">\n <div\n @click=${() => this.clickToManageAccount()}\n @keydown=${() => this.clickToManageAccount()}\n class=\"select-none\"\n >\n <p\n class=\"capitalize font-bold text-base ${this.manage_account_url\n ? 'text-blue-600 cursor-pointer'\n : 'text-grey-600'}\"\n >\n ${this.userData.userName}\n </p>\n ${activeInfoTemplate()}\n </div>\n ${this.company_name ? kompeniTemplate() : nothing}\n </div>\n </div>\n\n ${this.userData?.isGracePeriod\n ? html` <div class=\"mt-4 kompasid-grace-period\">\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\n .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\n .tracker_metered_wall_balance}\n ></kompasid-grace-period>\n </div>`\n : subscribeButton()}\n </div>\n `\n }\n clickToManageAccount() {\n if (this.manage_account_url) {\n window.location.href = this.manage_account_url\n }\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 p-4\">\n ${!this.userData\n ? this.renderSkeletonLoading()\n : this.renderProfileContent()}\n </div>\n <hr class=\"border-grey-300 mx-4\" />\n `\n }\n}\n"]}

package/dist/src/components/kompasid-paywall/KompasPaywall.js CHANGED Viewed

@@ -343,9 +343,6 @@ let KompasPaywall = class KompasPaywall extends LitElement {
             return false;
         }
         const { tracker_content_published_date: publishedDate, tracker_content_tags: trackerTags, tracker_content_variant: trackerVariant, } = this;
-        if (!publishedDate || !trackerVariant || !trackerTags) {
-            return false;
-        }
         const nowDate = new Date();
         const isoDateString = publishedDate.replace(' ', 'T');
         const publishedDateObj = new Date(isoDateString);