@kompasid/lit-web-components 0.6.3 → 0.6.4

package/demo/index.html

@@ -51,6 +51,7 @@
       import '../dist/src/components/kompasid-metered-paywall/KompasMeteredPaywall.js'
       import '../dist/src/components/kompasid-freewall/KompasFreewall.js'
       import '../dist/src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.js'
+      import '../dist/src/components/kompasid-header-account/KompasHeaderAccount.js'
 
       const type = 'epaper'
       const theme = ''
@@ -88,9 +89,39 @@
       const trackerContentEditors = 'Editor 1|Editor 2'
       const trackerContentTags = 'Tag1|Tag2|Tag3'
       const trackerContentPublishedDate = '2023-10-12'
+      const cartUrl="/cart"
+      const logoutUrl="/logout"
+      const manageAccountUrl="/manage-count"
+      const notificationUrl="/notif"
+      const notificationTotal="10"
+      const ordersUrl="/orders"
+      const subscriptionUrl=""
+      const readLaterUrl="/baca-nanti"
+      const totalGracePeriod="5"
+
+      const userData = {
+        userName: 'User Fullname',
+          expired: 'Berakhir: 6 hari lagi',
+          isNearExpired: false,
+          activeInfo: 'Kompas Digital Premium 1 Bulan - Auto Renewal Example Text',
+          isMembership: true,
+          updateMembership: 'Perbarui Langganan',
+      }
 
       render(
         html`
+          <kompasid-header-account
+            .userData=${userData}
+            .cart_url=${cartUrl}
+            .logout_url=${logoutUrl}
+            .manage_account_url=${manageAccountUrl}
+            .notification_url=${notificationUrl}
+            .notification_total=${notificationTotal}
+            .orders_url=${ordersUrl}
+            .subscription_url=${subscriptionUrl}
+            .read_later_url=${readLaterUrl}
+            .total_grace_period=${totalGracePeriod}
+          ></kompasid-header-account>
           <kompasid-paywall
             .type=${type}
             .theme=${theme}

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

@@ -0,0 +1,27 @@
+import { LitElement } from 'lit';
+import { User } from './types.js';
+import '../kompasid-header-account-profile/KompasHeaderAccountProfile.js';
+import '../kompasid-header-account-help-center/KompasHeaderAccountHelpCenter.js';
+import '../kompasid-header-account-menu/KompasHeaderAccountMenu.js';
+export declare class KompasHeaderAccount extends LitElement {
+    static styles: import("lit").CSSResult[];
+    isShowSidebar: boolean;
+    formattedUserData: User;
+    cartUrl: string;
+    logoutUrl: string;
+    manageAccountUrl: string;
+    notificationTotal: number;
+    notificationUrl: string;
+    ordersUrl: string;
+    readLaterUrl: string;
+    userData: {};
+    sidebarTopSpacing: number;
+    subscriptionUrl: string;
+    totalGracePeriod: number;
+    private toggleSidebar;
+    private getInitialUserName;
+    private account;
+    private accountSidebar;
+    connectedCallback(): Promise<void>;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,233 @@
+import { __decorate } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js';
+import { TWStyles } from '../../../tailwind/tailwind.js';
+import '../kompasid-header-account-profile/KompasHeaderAccountProfile.js';
+import '../kompasid-header-account-help-center/KompasHeaderAccountHelpCenter.js';
+import '../kompasid-header-account-menu/KompasHeaderAccountMenu.js';
+let KompasHeaderAccount = class KompasHeaderAccount extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.isShowSidebar = false;
+        this.formattedUserData = {};
+        this.cartUrl = '';
+        this.logoutUrl = '';
+        this.manageAccountUrl = '';
+        this.notificationTotal = 0;
+        this.notificationUrl = '';
+        this.ordersUrl = '';
+        this.readLaterUrl = '';
+        this.userData = {};
+        this.sidebarTopSpacing = 0;
+        this.subscriptionUrl = '';
+        this.totalGracePeriod = 0;
+    }
+    toggleSidebar() {
+        this.isShowSidebar = !this.isShowSidebar;
+    }
+    getInitialUserName() {
+        var _a;
+        return ((_a = this.formattedUserData) === null || _a === void 0 ? void 0 : _a.userName)
+            ? this.formattedUserData.userName.charAt(0)
+            : '';
+    }
+    account() {
+        const notificationIndicator = () => {
+            if (!this.notificationTotal)
+                return html ``;
+            return html `<div class="header-account--notification-indicator"></div>`;
+        };
+        const membershipIcon = () => {
+            var _a;
+            if (!((_a = this.formattedUserData) === null || _a === void 0 ? void 0 : _a.isMembership))
+                return html ``;
+            return html `
+        <div>
+          <img
+            class="header-account--membership-icon h-2.5 w-2.5"
+            src="https://d3w4qaq4xm1ncv.cloudfront.net/global-header/crown-royal-blue-60.svg"
+            alt="membership-crown-icon"
+          />
+        </div>
+      `;
+        };
+        return html `
+      <button @click=${this.toggleSidebar} class="cursor-pointer p-3">
+        <div class="flex flex-row items-center self-center">
+          ${!this.getInitialUserName()
+            ? html `<div
+                class="bg-grey-300 rounded-full h-6 w-6 animate-pulse"
+              ></div>`
+            : html `
+                <div
+                  class="flex bg-grey-100 rounded-full h-6 w-6 items-center justify-center relative"
+                >
+                  <span class="capitalize text-xxs text-blue-600 font-bold"
+                    >${this.getInitialUserName()}</span
+                  >
+                  ${notificationIndicator()} ${membershipIcon()}
+                </div>
+              `}
+          <div
+            class="ml-3 icon-xs text-white chevron-icon ${this.isShowSidebar
+            ? 'chevron-down'
+            : 'rotate-180'}"
+          >
+            ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))}
+          </div>
+        </div>
+      </button>
+    `;
+    }
+    accountSidebar() {
+        return html `
+      <nav @keyup="${this.onkeyup}" @click=${this.toggleSidebar}>
+        <div
+          @keyup="${this.onkeyup}"
+          class="bg-grey-100 pb-20 pt-0 shadow-lg w-76 z-99 ml-auto"
+          style=${`margin-top: ${this.sidebarTopSpacing}px`}
+          @click=${(ev) => ev.stopPropagation()}
+        >
+          <kompasid-header-account-profile
+            .userInitialName=${this.getInitialUserName()}
+            .userData=${this.formattedUserData}
+            .subscriptionUrl=${this.subscriptionUrl}
+            .totalGracePeriod=${this.totalGracePeriod}
+          ></kompasid-header-account-profile>
+          <div class="pl-4 pr-3 py-4 text-left">
+            <kompasid-header-account-menu
+              .cart-url=${this.cartUrl}
+              .manage-account-url=${this.manageAccountUrl}
+              .logout-url=${this.logoutUrl}
+              .notification-url=${this.notificationUrl}
+              .notification-total=${this.notificationTotal}
+              .orders-url=${this.ordersUrl}
+              .read-later-url=${this.readLaterUrl}
+            ></kompasid-header-account-menu>
+            <kompasid-header-account-help-center></kompasid-header-account-help-center>
+          </div>
+        </div>
+      </nav>
+    `;
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        this.isShowSidebar = false;
+        if (typeof this.userData === 'string') {
+            this.formattedUserData = JSON.parse(this.userData);
+        }
+        else if (typeof this.userData === 'object' && this.userData !== null) {
+            // If userData is already an object, you might not need to parse it.
+            // You can assign it directly to formattedUserData:
+            this.formattedUserData = this.userData;
+        }
+    }
+    render() {
+        return html `
+      <header class="header flex flex-row justify-end h-[49px] relative z-50">
+        <div class="text-end">
+          ${this.account()} ${this.isShowSidebar ? this.accountSidebar() : ''}
+        </div>
+      </header>
+    `;
+    }
+};
+KompasHeaderAccount.styles = [
+    css `
+      :host {
+        font-family: 'PT Sans', sans-serif;
+      }
+      .header {
+        background-color: #0356a8;
+      }
+      .account-profile {
+        overflow-y: auto;
+      }
+
+      .header-account-help-center--item {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding: 0.75rem;
+      }
+
+      .header-account-help-center--content {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        margin-left: 1rem;
+        line-height: 1.5rem;
+      }
+
+      .header-account--membership-icon {
+        position: absolute;
+        bottom: -2px;
+        right: -2px;
+      }
+
+      .header-account--notification-indicator {
+        position: absolute;
+        top: 0;
+        height: 0.5rem;
+        width: 0.5rem;
+        background-color: #f6ad55;
+        border-radius: 50%;
+        right: -0.563rem;
+        top: -0.281rem;
+      }
+
+      .header-account-sidebar {
+        width: 19rem;
+        background-color: #edf2f7;
+        box-shadow: 0px 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
+        display: flex;
+        flex-direction: column;
+        font-family: 'PT Sans', sans-serif;
+        font-size: 0.875rem;
+      }
+    `,
+    TWStyles,
+];
+__decorate([
+    state()
+], KompasHeaderAccount.prototype, "isShowSidebar", void 0);
+__decorate([
+    property({ type: String })
+], KompasHeaderAccount.prototype, "cartUrl", void 0);
+__decorate([
+    property({ type: String })
+], KompasHeaderAccount.prototype, "logoutUrl", void 0);
+__decorate([
+    property({ type: String })
+], KompasHeaderAccount.prototype, "manageAccountUrl", void 0);
+__decorate([
+    property({ type: Number })
+], KompasHeaderAccount.prototype, "notificationTotal", void 0);
+__decorate([
+    property({ type: String })
+], KompasHeaderAccount.prototype, "notificationUrl", void 0);
+__decorate([
+    property({ type: String })
+], KompasHeaderAccount.prototype, "ordersUrl", void 0);
+__decorate([
+    property({ type: String })
+], KompasHeaderAccount.prototype, "readLaterUrl", void 0);
+__decorate([
+    property({ type: Object })
+], KompasHeaderAccount.prototype, "userData", void 0);
+__decorate([
+    property({ type: Number })
+], KompasHeaderAccount.prototype, "sidebarTopSpacing", void 0);
+__decorate([
+    property({ type: String })
+], KompasHeaderAccount.prototype, "subscriptionUrl", void 0);
+__decorate([
+    property({ type: Number })
+], KompasHeaderAccount.prototype, "totalGracePeriod", void 0);
+KompasHeaderAccount = __decorate([
+    customElement('kompasid-header-account')
+], KompasHeaderAccount);
+export { KompasHeaderAccount };
+//# sourceMappingURL=KompasHeaderAccount.js.map

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

@@ -0,0 +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 { 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 '../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: -2px;\n        right: -2px;\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      .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    `,\n    TWStyles,\n  ]\n\n  @state() isShowSidebar: boolean = false\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: Number }) notificationTotal = 0\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\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 account() {\n    const notificationIndicator = () => {\n      if (!this.notificationTotal) return html``\n      return html`<div class=\"header-account--notification-indicator\"></div>`\n    }\n\n    const membershipIcon = () => {\n      if (!this.formattedUserData?.isMembership) return html``\n      return html`\n        <div>\n          <img\n            class=\"header-account--membership-icon h-2.5 w-2.5\"\n            src=\"https://d3w4qaq4xm1ncv.cloudfront.net/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 p-3\">\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 bg-grey-100 rounded-full h-6 w-6 items-center justify-center relative\"\n                >\n                  <span class=\"capitalize text-xxs text-blue-600 font-bold\"\n                    >${this.getInitialUserName()}</span\n                  >\n                  ${notificationIndicator()} ${membershipIcon()}\n                </div>\n              `}\n          <div\n            class=\"ml-3 icon-xs text-white chevron-icon ${this.isShowSidebar\n              ? 'chevron-down'\n              : 'rotate-180'}\"\n          >\n            ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))}\n          </div>\n        </div>\n      </button>\n    `\n  }\n\n  private accountSidebar() {\n    return html`\n      <nav @keyup=\"${this.onkeyup}\" @click=${this.toggleSidebar}>\n        <div\n          @keyup=\"${this.onkeyup}\"\n          class=\"bg-grey-100 pb-20 pt-0 shadow-lg w-76 z-99 ml-auto\"\n          style=${`margin-top: ${this.sidebarTopSpacing}px`}\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          ></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              .notification-total=${this.notificationTotal}\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    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      <header class=\"header flex flex-row justify-end h-[49px] relative z-50\">\n        <div class=\"text-end\">\n          ${this.account()} ${this.isShowSidebar ? this.accountSidebar() : ''}\n        </div>\n      </header>\n    `\n  }\n}\n"]}

package/dist/src/components/kompasid-header-account/types.d.ts

@@ -0,0 +1,8 @@
+export interface User {
+    userName: string;
+    expired: string;
+    isNearExpired: boolean;
+    activeInfo: string;
+    isMembership: boolean;
+    updateMembership: string;
+}

package/dist/src/components/kompasid-header-account/types.js

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

package/dist/src/components/kompasid-header-account/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface User {\n  userName: string\n  expired: string\n  isNearExpired: boolean\n  activeInfo: string\n  isMembership: boolean\n  updateMembership: string\n}\n"]}

package/dist/src/components/kompasid-header-account-help-center/KompasHeaderAccountHelpCenter.d.ts

@@ -0,0 +1,13 @@
+import { LitElement } from 'lit';
+export declare class KompasHeaderAccountHelpCenter extends LitElement {
+    static styles: import("lit").CSSResult[];
+    kompasKring?: HTMLInputElement;
+    clipboardClicked: boolean;
+    private qna;
+    private telephone;
+    private whatsapp;
+    private email;
+    private workingHour;
+    connectedCallback(): Promise<void>;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/src/components/kompasid-header-account-help-center/KompasHeaderAccountHelpCenter.js

@@ -0,0 +1,172 @@
+import { __decorate } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js';
+import { TWStyles } from '../../../tailwind/tailwind.js';
+let KompasHeaderAccountHelpCenter = class KompasHeaderAccountHelpCenter extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.clipboardClicked = false;
+        // Q & A
+        this.qna = () => html ` <div class="header-account-help-center--item">
+      <div class="icon">
+        ${unsafeSVG(getFontAwesomeIcon('fas', 'comments'))}
+      </div>
+      <div
+        class="header-account-help-center--content mx-4 leading-4 gap-y-2 text-base"
+      >
+        <p>Tanya Jawab</p>
+        <a href="http://kb.kompas.id/" class="font-bold hover:underline"
+          >http://kb.kompas.id/</a
+        >
+      </div>
+    </div>`;
+        // Telephone
+        this.telephone = () => {
+            // Clipboard Action
+            const clipboardAction = async () => {
+                var _a, _b;
+                const phoneNumberCopy = (_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('kompasKring')) === null || _b === void 0 ? void 0 : _b.innerHTML;
+                if (phoneNumberCopy) {
+                    try {
+                        await navigator.clipboard.writeText(phoneNumberCopy);
+                        this.clipboardClicked = true;
+                        setTimeout(() => {
+                            this.clipboardClicked = false;
+                        }, 2000);
+                    }
+                    catch (error) {
+                        // Handle clipboard write error
+                        console.error('Failed to copy to clipboard:', error);
+                    }
+                }
+            };
+            // Keyboard event handler
+            const handleKeyDown = (event) => {
+                if (event.key === 'Enter') {
+                    clipboardAction();
+                }
+            };
+            return html `<div class="header-account-help-center--item">
+      <div class="icon">${unsafeSVG(getFontAwesomeIcon('fas', 'phone'))}</div>
+      <div
+        class="relative header-account-help-center--content mx-4 leading-4 gap-y-2 text-base"
+      >
+        ${this.clipboardClicked
+                ? html `<p
+              class="absolute bg-grey-200 rounded-md h-full top-0 w-full flex items-center justify-center"
+            >
+              Berhasil menyalin!
+            </p>`
+                : html ``}
+        <p>Kompas Kring</p>
+        <p id="kompasKring" class="font-bold">+6221 2567 6000</p>
+      </div>
+      <div
+        class="bg-grey-200 px-3 py-2 rounded cursor-pointer"
+        @click=${clipboardAction}
+        @keydown=${handleKeyDown}
+        tabindex="0"
+      >
+        <div class="icon-sm icon-grey-600">
+          ${unsafeSVG(getFontAwesomeIcon('fas', 'copy'))}
+        </div>
+      </div>
+    </div>`;
+        };
+        // Whatsapp
+        this.whatsapp = () => html `<a
+      href="https://api.whatsapp.com/send?phone=6281290050800"
+      class="header-account-help-center--item"
+    >
+      <div class="icon">
+        ${unsafeSVG(getFontAwesomeIcon('fab', 'whatsapp'))}
+      </div>
+      <div
+        class="header-account-help-center--content mx-4 leading-4 gap-y-2 text-base"
+      >
+        <p>Whatsapp</p>
+        <p class="font-bold hover:underline">+62812 900 50 800</p>
+      </div>
+    </a>`;
+        // Email
+        this.email = () => html `<a
+      href="mailto:hotline@kompas.id"
+      class="header-account-help-center--item"
+    >
+      <div class="icon-md text-brand-1">
+        ${unsafeSVG(getFontAwesomeIcon('fas', 'envelope'))}
+      </div>
+      <div
+        class="header-account-help-center--content mx-4 leading-4 gap-y-2 text-base"
+      >
+        <p>Email</p>
+        <p class="font-bold hover:underline">hotline@kompas.id</p>
+      </div>
+    </a>`;
+        // Working Hour
+        this.workingHour = () => html `<div class="header-account-help-center--item">
+      <div class="icon-md text-brand-1">
+        ${unsafeSVG(getFontAwesomeIcon('fas', 'clock'))}
+      </div>
+      <div class="flex flex-col mx-4 leading-4 gap-y-2 text-base">
+        <p>Jam Kerja</p>
+        <p class="font-bold">06.00 - 16.00 WIB</p>
+      </div>
+    </div>`;
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+    }
+    render() {
+        return html `
+      <div
+        class="account-help-center-container text-left leading-none mt-4 text-grey-600"
+      >
+        <p class="text-base mx-1">Pusat Bantuan</p>
+        <div class="flex flex-col text-sm gap-y-4 my-4">
+          ${this.qna()} ${this.telephone()} ${this.whatsapp()} ${this.email()}
+          ${this.workingHour()}
+        </div>
+      </div>
+    `;
+    }
+};
+KompasHeaderAccountHelpCenter.styles = [
+    css `
+      :host {
+        font-family: 'PT Sans', sans-serif;
+      }
+      .header-account-help-center--item {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding: 0.75rem;
+        transition: background-color 0.3s ease-in-out;
+        border-radius: 0.25rem;
+      }
+      .header-account-help-center--item:hover {
+        background-color: #e5e7eb;
+      }
+      .header-help-center--content {
+        text-align: left;
+      }
+      .icon {
+        width: 20px;
+        height: 20px;
+        margin-top: auto;
+        margin-bottom: auto;
+        color: rgb(0 85 154);
+      }
+    `,
+    TWStyles,
+];
+__decorate([
+    state()
+], KompasHeaderAccountHelpCenter.prototype, "clipboardClicked", void 0);
+KompasHeaderAccountHelpCenter = __decorate([
+    customElement('kompasid-header-account-help-center')
+], KompasHeaderAccountHelpCenter);
+export { KompasHeaderAccountHelpCenter };
+//# sourceMappingURL=KompasHeaderAccountHelpCenter.js.map

package/dist/src/components/kompasid-header-account-help-center/KompasHeaderAccountHelpCenter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KompasHeaderAccountHelpCenter.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account-help-center/KompasHeaderAccountHelpCenter.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, state } 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-help-center')\nexport class KompasHeaderAccountHelpCenter extends LitElement {\n  static styles = [\n    css`\n      :host {\n        font-family: 'PT Sans', sans-serif;\n      }\n      .header-account-help-center--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-help-center--item:hover {\n        background-color: #e5e7eb;\n      }\n      .header-help-center--content {\n        text-align: left;\n      }\n      .icon {\n        width: 20px;\n        height: 20px;\n        margin-top: auto;\n        margin-bottom: auto;\n        color: rgb(0 85 154);\n      }\n    `,\n    TWStyles,\n  ]\n\n  kompasKring?: HTMLInputElement\n\n  @state() clipboardClicked: boolean = false\n\n  // Q & A\n  private qna = () =>\n    html` <div class=\"header-account-help-center--item\">\n      <div class=\"icon\">\n        ${unsafeSVG(getFontAwesomeIcon('fas', 'comments'))}\n      </div>\n      <div\n        class=\"header-account-help-center--content mx-4 leading-4 gap-y-2 text-base\"\n      >\n        <p>Tanya Jawab</p>\n        <a href=\"http://kb.kompas.id/\" class=\"font-bold hover:underline\"\n          >http://kb.kompas.id/</a\n        >\n      </div>\n    </div>`\n\n  // Telephone\n  private telephone = () => {\n    // Clipboard Action\n    const clipboardAction = async () => {\n      const phoneNumberCopy =\n        this.shadowRoot?.getElementById('kompasKring')?.innerHTML\n      if (phoneNumberCopy) {\n        try {\n          await navigator.clipboard.writeText(phoneNumberCopy)\n          this.clipboardClicked = true\n          setTimeout(() => {\n            this.clipboardClicked = false\n          }, 2000)\n        } catch (error) {\n          // Handle clipboard write error\n          console.error('Failed to copy to clipboard:', error)\n        }\n      }\n    }\n\n    // Keyboard event handler\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Enter') {\n        clipboardAction()\n      }\n    }\n\n    return html`<div class=\"header-account-help-center--item\">\n      <div class=\"icon\">${unsafeSVG(getFontAwesomeIcon('fas', 'phone'))}</div>\n      <div\n        class=\"relative header-account-help-center--content mx-4 leading-4 gap-y-2 text-base\"\n      >\n        ${this.clipboardClicked\n          ? html`<p\n              class=\"absolute bg-grey-200 rounded-md h-full top-0 w-full flex items-center justify-center\"\n            >\n              Berhasil menyalin!\n            </p>`\n          : html``}\n        <p>Kompas Kring</p>\n        <p id=\"kompasKring\" class=\"font-bold\">+6221 2567 6000</p>\n      </div>\n      <div\n        class=\"bg-grey-200 px-3 py-2 rounded cursor-pointer\"\n        @click=${clipboardAction}\n        @keydown=${handleKeyDown}\n        tabindex=\"0\"\n      >\n        <div class=\"icon-sm icon-grey-600\">\n          ${unsafeSVG(getFontAwesomeIcon('fas', 'copy'))}\n        </div>\n      </div>\n    </div>`\n  }\n\n  // Whatsapp\n  private whatsapp = () =>\n    html`<a\n      href=\"https://api.whatsapp.com/send?phone=6281290050800\"\n      class=\"header-account-help-center--item\"\n    >\n      <div class=\"icon\">\n        ${unsafeSVG(getFontAwesomeIcon('fab', 'whatsapp'))}\n      </div>\n      <div\n        class=\"header-account-help-center--content mx-4 leading-4 gap-y-2 text-base\"\n      >\n        <p>Whatsapp</p>\n        <p class=\"font-bold hover:underline\">+62812 900 50 800</p>\n      </div>\n    </a>`\n\n  // Email\n  private email = () =>\n    html`<a\n      href=\"mailto:hotline@kompas.id\"\n      class=\"header-account-help-center--item\"\n    >\n      <div class=\"icon-md text-brand-1\">\n        ${unsafeSVG(getFontAwesomeIcon('fas', 'envelope'))}\n      </div>\n      <div\n        class=\"header-account-help-center--content mx-4 leading-4 gap-y-2 text-base\"\n      >\n        <p>Email</p>\n        <p class=\"font-bold hover:underline\">hotline@kompas.id</p>\n      </div>\n    </a>`\n\n  // Working Hour\n  private workingHour = () =>\n    html`<div class=\"header-account-help-center--item\">\n      <div class=\"icon-md text-brand-1\">\n        ${unsafeSVG(getFontAwesomeIcon('fas', 'clock'))}\n      </div>\n      <div class=\"flex flex-col mx-4 leading-4 gap-y-2 text-base\">\n        <p>Jam Kerja</p>\n        <p class=\"font-bold\">06.00 - 16.00 WIB</p>\n      </div>\n    </div>`\n\n  override async connectedCallback() {\n    super.connectedCallback()\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"account-help-center-container text-left leading-none mt-4 text-grey-600\"\n      >\n        <p class=\"text-base mx-1\">Pusat Bantuan</p>\n        <div class=\"flex flex-col text-sm gap-y-4 my-4\">\n          ${this.qna()} ${this.telephone()} ${this.whatsapp()} ${this.email()}\n          ${this.workingHour()}\n        </div>\n      </div>\n    `\n  }\n}\n"]}

package/dist/src/components/kompasid-header-account-menu/KompasHeaderAccountMenu.d.ts

@@ -0,0 +1,37 @@
+import { LitElement } from 'lit';
+export declare class KompasHeaderAccountMenu extends LitElement {
+    static styles: import("lit").CSSResult[];
+    kompasKring?: HTMLInputElement;
+    clipboardClicked: boolean;
+    /**
+     * Cart Url
+     */
+    cartUrl: string;
+    /**
+     * Logout Url
+     */
+    logoutUrl: string;
+    /**
+     * Manage Account Url
+     */
+    manageAccountUrl: string;
+    /**
+     * Notification Url
+     */
+    notificationUrl: string;
+    /**
+     * Orders Url
+     */
+    ordersUrl: string;
+    /**
+     * Read Later Url
+     */
+    readLaterUrl: string;
+    /**
+     * Total Notification Count
+     */
+    notificationTotal: number;
+    private renderTotalBubble;
+    connectedCallback(): Promise<void>;
+    render(): import("lit").TemplateResult<1>;
+}