@kompasid/lit-web-components 0.9.10 → 0.9.13

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

@@ -1 +1 @@
-{"version":3,"file":"KompasFreewallBody.js","sourceRoot":"","sources":["../../../../src/components/kompasid-freewall-body/KompasFreewallBody.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement, nothing } from 'lit'\nimport { property, customElement } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { addGoogleFonts } from '../../utils/googleFont.js'\nimport { JsonPackageData, PackageData } from '../kompasid-freewall/types.js'\nimport { faCheck } from '../../../assets/font-awesome.js'\nimport { redirectToRegister } from '../../utils/cta.js'\n\n@customElement('kompasid-freewall-body')\nexport class KompasFreewallBody extends LitElement {\n  static styles = [\n    css`\n      .font-lora {\n        font-family: 'Lora', 'Georgia', 'serif';\n      }\n\n      .font-roboto-condensed {\n        font-family: 'Roboto Condensed', sans-serif;\n      }\n\n      /* ----- Ribbon Container ---------------------------------------*/\n      #ribbon-container {\n        background: transparent;\n        height: 130px;\n        width: 200px;\n        position: absolute;\n        top: -5px;\n        right: -5px;\n        overflow: hidden;\n      }\n\n      /* ----- Top Curl ---------------------------------------*/\n      #ribbon-container:before {\n        content: '';\n        display: block;\n        -webkit-border-radius: 10px 10px 0px 0px;\n        border-radius: 10px 10px 0px 0px;\n        width: 35px;\n        height: 10px;\n        position: absolute;\n        right: 60px;\n        background: #b78b00;\n        z-index: 1;\n      }\n\n      /* ----- Right Curl ---------------------------------------*/\n      #ribbon-container:after {\n        content: '';\n        display: block;\n        -webkit-border-radius: 0px 10px 10px 0px;\n        border-radius: 0px 10px 10px 0px;\n        width: 10px;\n        height: 35px;\n        position: absolute;\n        right: 0px;\n        top: 60px;\n        background: #b78b00;\n      }\n\n      /* ----- Ribbon ---------------------------------------*/\n      #ribbon-container > div {\n        width: 140px;\n        height: 28px;\n        position: relative;\n        top: 24px;\n        right: -100px;\n        z-index: 11;\n        overflow: hidden;\n        transform: rotate(45deg);\n        -ms-transform: rotate(45deg); /* IE 9 */\n        -moz-transform: rotate(45deg); /* Firefox */\n        -webkit-transform: rotate(45deg); /* Safari and Chrome */\n        -o-transform: rotate(45deg); /* Opera */\n        background: #ffcc00;\n      }\n    `,\n    TWStyles,\n  ]\n\n  /**\n   * Props\n   */\n  /**\n   * property isLogin untuk menghandle apakah user sudah login atau belum\n   * property type untuk menghandle tipe freewall\n   * property onSubscriptionClick to handle cta when subscription button is clicked\n   * packageData sebagai data package yang diambil dari kompasid-freewall\n   */\n\n  @property({ type: Boolean }) isLogin = false\n  @property({ type: String }) type: 'article' | 'landing_page' = 'article'\n  @property() onSubscriptionClick = () => {}\n  @property({ type: Object }) packageData: PackageData = {} as PackageData\n  @property({ type: Object }) jsonPackageData: JsonPackageData =\n    {} as JsonPackageData\n\n  description = [\n    'Akses seluruh konten Kompas.id di web & aplikasi',\n    'ePaper hingga 30 edisi terakhir',\n    'Buku digital tiap bulannya di aplikasi ',\n  ]\n\n  /**\n   * Lifecycle\n   */\n\n  override async connectedCallback() {\n    super.connectedCallback()\n    await this.updateComplete\n    addGoogleFonts(['pt-sans', 'lora', 'roboto-condensed'])\n  }\n\n  /**\n   * Component\n   */\n\n  private subscriptionCardComponent() {\n    return html`\n      <div class=\"relative\">\n        <div\n          id=\"subscription-card\"\n          class=\"flex justify-between items-center relative z-10 flex-col w-[328px] ${this\n            .isLogin\n            ? 'md:w-[580px]'\n            : 'md:w-[350px] lg:w-[410px]'} py-3 px-[10px] md:p-5 md:pt-3 rounded-[10px] border-2 border-yellow-400 bg-white\"\n        >\n          <div\n            class=\"flex w-full flex-col ${this.isLogin\n              ? 'items-center md:w-[374px] text-center'\n              : 'items-start text-start'}\"\n          >\n            <h5\n              class=\"font-lora text-lg md:text-xl font-bold leading-[30px] ${this\n                .isLogin && 'w-60 md:w-full'} text-grey-600\"\n            >\n              ${this.isLogin\n                ? this.jsonPackageData.subscriptionTitle\n                : this.jsonPackageData.subscriptionTitleGuest}\n            </h5>\n            ${this.descriptionSection()}\n          </div>\n          <button\n            @click=${this.onSubscriptionClick}\n            class=\"bg-green-500 whitespace-nowrap w-full rounded ${this\n              .isLogin &&\n            'md:w-[370px]'} md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]\"\n          >\n            ${this.jsonPackageData.subscriptionButtonText}\n          </button>\n        </div>\n        <div id=\"ribbon-container\">\n          <div\n            class=\"text-[11px] font-medium text-grey-600 font-roboto-condensed flex justify-center items-center\"\n          >\n            <span class=\"-ml-2\">Penawaran Terbaik</span>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  private registerCardComponent() {\n    return html`\n      <div\n        class=\"flex flex-col justify-between md:min-h-[244px] lg:min-h-[220px] w-[328px] md:w-[350px] lg:w-[410px] py-3 px-[10px] md:p-5 md:pt-3 rounded-[10px] bg-white\"\n      >\n        <div>\n          <h5\n            class=\"font-lora text-lg md:text-xl font-bold leading-[30px] text-grey-600\"\n          >\n            ${this.jsonPackageData.registerTitle}\n          </h5>\n          <div class=\"flex flex-col space-y-1 mt-3 mb-4 md:mt-4 md:mb-5\">\n            ${this.jsonPackageData.registerDescription.map(\n              item => html`\n                <div class=\"flex items-start lg:items-center\">\n                  <div class=\"mt-1 lg:mt-0\">${faCheck()}</div>\n                  <h6 class=\"text-base text-grey-600 ml-1 text-start\">\n                    ${item}\n                  </h6>\n                </div>\n              `\n            )}\n          </div>\n        </div>\n        <button\n          @click=${() => redirectToRegister('freewall')}\n          class=\"bg-white border border-brand-1 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-brand-1 font-bold leading-[18px]\"\n        >\n          ${this.jsonPackageData.registerButtonText}\n        </button>\n      </div>\n    `\n  }\n\n  private descriptionSection() {\n    return html`<div class=\"flex flex-col space-y-1 mt-3 mb-4 md:mt-4 md:mb-5\">\n      ${this.jsonPackageData.subscriptionDescription.map(\n        item =>\n          html`\n            <div class=\"flex items-start lg:items-center\">\n              <div class=\"mt-1 lg:mt-0\">${faCheck()}</div>\n              <h6 class=\"text-base text-grey-600 ml-1 text-start\">${item}</h6>\n            </div>\n          `\n      )}\n    </div>`\n  }\n\n  /**\n   * Render Statement\n   */\n\n  render() {\n    return html`\n      <div\n        class=\"w-full h-full flex flex-col md:flex-row pt-[5px] relative space-y-4 md:space-x-5 md:space-y-0 justify-center items-center\"\n      >\n        ${this.subscriptionCardComponent()}\n        ${!this.isLogin ? this.registerCardComponent() : nothing}\n      </div>\n    `\n  }\n}\n"]}
+{"version":3,"file":"KompasFreewallBody.js","sourceRoot":"","sources":["../../../../src/components/kompasid-freewall-body/KompasFreewallBody.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAInD,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QA6EL;;WAEG;QACH;;;WAGG;QAES,kBAAa,GAAG,CAAC,GAAW,EAAE,QAAgB,EAAE,EAAE,CAAC,CAAC;YAC9D,GAAG;YACH,QAAQ;SACT,CAAC,CAAA;QAC0B,aAAQ,GAAkB,EAAE,CAAA;IAoF1D,CAAC;IAlFC;;OAEG;IAEM,KAAK,CAAC,iBAAiB;QAC9B,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,MAAM,IAAI,CAAC,cAAc,CAAA;QACzB,cAAc,CAAC,CAAC,SAAS,EAAE,MAAM,EAAE,kBAAkB,CAAC,CAAC,CAAA;IACzD,CAAC;IAED;;OAEG;IAEK,OAAO,CAAC,IAAiB;QAC/B,OAAO,IAAI,CAAA;;;;;;;;gBAQC,IAAI,CAAC,KAAK;;;;;gBAKV,IAAI,CAAC,aAAa;YAClB,CAAC,CAAC,IAAI,CAAA;;4BAEM,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC;;mBAEtC;YACH,CAAC,CAAC,OAAO;6BACI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE;mBACrD,YAAY,CACb,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAC1D;wBACO,IAAI,CAAC,QAAQ;;cAEvB,IAAI,CAAC,aAAa;YAClB,CAAC,CAAC,IAAI,CAAA;gCACY,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,QAAQ;uBACvD;YACT,CAAC,CAAC,OAAO;;;qBAGF,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC;iIACuD,IAAI,CAAC,MAAM;YAC9H,CAAC,CAAC,uBAAuB;YACzB,CAAC,CAAC,6CAA6C;;cAE/C,IAAI,CAAC,GAAG,CAAC,IAAI;;;UAGjB,IAAI,CAAC,MAAM;YACX,CAAC,CAAC,IAAI,CAAA;;;;;;mBAMG;YACT,CAAC,CAAC,OAAO;;KAEd,CAAA;IACH,CAAC;IAED;;OAEG;IAEH,MAAM;QACJ,OAAO,IAAI,CAAA;;;;UAIL,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;;KAElD,CAAA;IACH,CAAC;;AA3KM,yBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuEF;IACD,QAAQ;CACT,CAAA;AAUW;IAAX,QAAQ,EAAE;yDAGT;AAC0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAA6B;AAzF7C,kBAAkB;IAD9B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,kBAAkB,CA6K9B;SA7KY,kBAAkB","sourcesContent":["import { html, css, LitElement, nothing } from 'lit'\nimport { property, customElement } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { addGoogleFonts } from '../../utils/googleFont.js'\nimport { formatRupiah } from '../../utils/formatRupiah.js'\nimport { CardPackage } from '../kompasid-freewall/types.js'\n\n@customElement('kompasid-freewall-body')\nexport class KompasFreewallBody extends LitElement {\n  static styles = [\n    css`\n      .hideScroll::-webkit-scrollbar {\n        height: 0px;\n      }\n      .hideScroll {\n        scrollbar-width: none;\n      }\n\n      .font-lora {\n        font-family: 'Lora', 'Georgia', 'serif';\n      }\n\n      .font-roboto-condensed {\n        font-family: 'Roboto Condensed', sans-serif;\n      }\n\n      /* ----- Ribbon Container ---------------------------------------*/\n      #ribbon-container {\n        background: transparent;\n        height: 130px;\n        width: 200px;\n        position: absolute;\n        top: -5px;\n        right: -5px;\n        overflow: hidden;\n      }\n\n      /* ----- Top Curl ---------------------------------------*/\n      #ribbon-container:before {\n        content: '';\n        display: block;\n        -webkit-border-radius: 10px 10px 0px 0px;\n        border-radius: 10px 10px 0px 0px;\n        width: 35px;\n        height: 10px;\n        position: absolute;\n        right: 60px;\n        background: #b78b00;\n        z-index: 1;\n      }\n\n      /* ----- Right Curl ---------------------------------------*/\n      #ribbon-container:after {\n        content: '';\n        display: block;\n        -webkit-border-radius: 0px 10px 10px 0px;\n        border-radius: 0px 10px 10px 0px;\n        width: 10px;\n        height: 35px;\n        position: absolute;\n        right: 0px;\n        top: 60px;\n        background: #b78b00;\n      }\n\n      /* ----- Ribbon ---------------------------------------*/\n      #ribbon-container > div {\n        width: 140px;\n        height: 28px;\n        position: relative;\n        top: 24px;\n        right: -100px;\n        z-index: 11;\n        overflow: hidden;\n        transform: rotate(45deg);\n        -ms-transform: rotate(45deg); /* IE 9 */\n        -moz-transform: rotate(45deg); /* Firefox */\n        -webkit-transform: rotate(45deg); /* Safari and Chrome */\n        -o-transform: rotate(45deg); /* Opera */\n        background: #ffcc00;\n      }\n    `,\n    TWStyles,\n  ]\n\n  /**\n   * Props\n   */\n  /**\n   * property bodyData to handle multiple data card CardPackage\n   * property onButtonClick to handle cta when button is clicked and set specific card url and position\n   */\n\n  @property() onButtonClick = (url: string, position: number) => ({\n    url,\n    position,\n  })\n  @property({ type: Object }) bodyData: CardPackage[] = []\n\n  /**\n   * Lifecycle\n   */\n\n  override async connectedCallback() {\n    super.connectedCallback()\n    await this.updateComplete\n    addGoogleFonts(['pt-sans', 'lora', 'roboto-condensed'])\n  }\n\n  /**\n   * Component\n   */\n\n  private newCard(item: CardPackage) {\n    return html`\n      <div class=\"relative snap-start scroll-mx-4 w-[276px] flex lg:w-auto\">\n        <div\n          id=\"subscription-card\"\n          class=\"flex justify-between items-start relative z-10 flex-col w-[328px] py-3 px-[10px] md:p-5 md:pt-3 rounded-[10px] bg-white border border-grey-300\"\n        >\n          <div class=\"flex w-full flex-col items-start mb-4 text-start\">\n            <h5 class=\"font-lora leading-[30px] text-grey-600\">\n              ${item.title}\n            </h5>\n          </div>\n          <div class=\"text-xl text-grey-600 font-lora mb-8\">\n            <div>\n              ${item.priceDiscount\n                ? html`\n                    <span class=\"text-sm text-grey-400\"\n                      ><s>${formatRupiah(item.priceBased)}</s></span\n                    >\n                  `\n                : nothing}\n              <span class=\"${item.priceDiscount ? 'text-orange-400' : ''}\"\n                >${formatRupiah(\n                  item.priceDiscount ? item.priceDiscount : item.priceBased\n                )}</span\n              >/<span>${item.duration}</span>\n            </div>\n            ${item.priceDiscount\n              ? html` <div class=\"text-sm text-grey-500 font-sans mt-3\">\n                  Selanjutnya ${formatRupiah(item.priceBased)}/${item.duration}\n                </div>`\n              : nothing}\n          </div>\n          <button\n            @click=${() => this.onButtonClick(item.cta.url, item.position)}\n            class=\"whitespace-nowrap w-full rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base font-bold leading-[18px] ${item.ribbon\n              ? 'text-white bg-brand-1'\n              : 'text-brand-1 bg-white border border-brand-1'}\"\n          >\n            ${item.cta.text}\n          </button>\n        </div>\n        ${item.ribbon\n          ? html`<div id=\"ribbon-container\">\n              <div\n                class=\"text-[11px] font-medium text-grey-600 font-roboto-condensed flex justify-center items-center\"\n              >\n                <span class=\"-ml-2\">Penawaran Terbaik</span>\n              </div>\n            </div>`\n          : nothing}\n      </div>\n    `\n  }\n\n  /**\n   * Render Statement\n   */\n\n  render() {\n    return html`\n      <div\n        class=\"w-full h-full flex flex-row pt-[5px] relative snap-x overflow-x-scroll gap-4 hideScroll px-4 sm:px-0 sm:gap-6 sm:justify-center\"\n      >\n        ${this.bodyData.map(item => this.newCard(item))}\n      </div>\n    `\n  }\n}\n"]}

package/dist/src/components/kompasid-freewall-body/old_KompasFreewallBody.d.ts

@@ -0,0 +1,34 @@
+import { LitElement } from 'lit';
+import { JsonPackageData, PackageData } from '../kompasid-freewall/types.js';
+export declare class KompasFreewallBody extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Props
+     */
+    /**
+     * property isLogin untuk menghandle apakah user sudah login atau belum
+     * property type untuk menghandle tipe freewall
+     * property onSubscriptionClick to handle cta when subscription button is clicked
+     * packageData sebagai data package yang diambil dari kompasid-freewall
+     */
+    isLogin: boolean;
+    type: 'article' | 'landing_page';
+    onSubscriptionClick: () => void;
+    packageData: PackageData;
+    jsonPackageData: JsonPackageData;
+    description: string[];
+    /**
+     * Lifecycle
+     */
+    connectedCallback(): Promise<void>;
+    /**
+     * Component
+     */
+    private subscriptionCardComponent;
+    private registerCardComponent;
+    private descriptionSection;
+    /**
+     * Render Statement
+     */
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/components/kompasid-freewall-body/old_KompasFreewallBody.js

@@ -0,0 +1,228 @@
+import { __decorate } from "tslib";
+import { html, css, LitElement, nothing } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { TWStyles } from '../../../tailwind/tailwind.js';
+import { addGoogleFonts } from '../../utils/googleFont.js';
+import { faCheck } from '../../../assets/font-awesome.js';
+import { redirectToRegister } from '../../utils/cta.js';
+let KompasFreewallBody = class KompasFreewallBody extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Props
+         */
+        /**
+         * property isLogin untuk menghandle apakah user sudah login atau belum
+         * property type untuk menghandle tipe freewall
+         * property onSubscriptionClick to handle cta when subscription button is clicked
+         * packageData sebagai data package yang diambil dari kompasid-freewall
+         */
+        this.isLogin = false;
+        this.type = 'article';
+        this.onSubscriptionClick = () => { };
+        this.packageData = {};
+        this.jsonPackageData = {};
+        this.description = [
+            'Akses seluruh konten Kompas.id di web & aplikasi',
+            'ePaper hingga 30 edisi terakhir',
+            'Buku digital tiap bulannya di aplikasi ',
+        ];
+    }
+    /**
+     * Lifecycle
+     */
+    async connectedCallback() {
+        super.connectedCallback();
+        await this.updateComplete;
+        addGoogleFonts(['pt-sans', 'lora', 'roboto-condensed']);
+    }
+    /**
+     * Component
+     */
+    subscriptionCardComponent() {
+        return html `
+      <div class="relative">
+        <div
+          id="subscription-card"
+          class="flex justify-between items-center relative z-10 flex-col w-[328px] ${this
+            .isLogin
+            ? 'md:w-[580px]'
+            : 'md:w-[350px] lg:w-[410px]'} py-3 px-[10px] md:p-5 md:pt-3 rounded-[10px] border-2 border-yellow-400 bg-white"
+        >
+          <div
+            class="flex w-full flex-col ${this.isLogin
+            ? 'items-center md:w-[374px] text-center'
+            : 'items-start text-start'}"
+          >
+            <h5
+              class="font-lora text-lg md:text-xl font-bold leading-[30px] ${this
+            .isLogin && 'w-60 md:w-full'} text-grey-600"
+            >
+              ${this.isLogin
+            ? this.jsonPackageData.subscriptionTitle
+            : this.jsonPackageData.subscriptionTitleGuest}
+            </h5>
+            ${this.descriptionSection()}
+          </div>
+          <button
+            @click=${this.onSubscriptionClick}
+            class="bg-green-500 whitespace-nowrap w-full rounded ${this
+            .isLogin &&
+            'md:w-[370px]'} md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]"
+          >
+            ${this.jsonPackageData.subscriptionButtonText}
+          </button>
+        </div>
+        <div id="ribbon-container">
+          <div
+            class="text-[11px] font-medium text-grey-600 font-roboto-condensed flex justify-center items-center"
+          >
+            <span class="-ml-2">Penawaran Terbaik</span>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    registerCardComponent() {
+        return html `
+      <div
+        class="flex flex-col justify-between md:min-h-[244px] lg:min-h-[220px] w-[328px] md:w-[350px] lg:w-[410px] py-3 px-[10px] md:p-5 md:pt-3 rounded-[10px] bg-white"
+      >
+        <div>
+          <h5
+            class="font-lora text-lg md:text-xl font-bold leading-[30px] text-grey-600"
+          >
+            ${this.jsonPackageData.registerTitle}
+          </h5>
+          <div class="flex flex-col space-y-1 mt-3 mb-4 md:mt-4 md:mb-5">
+            ${this.jsonPackageData.registerDescription.map(item => html `
+                <div class="flex items-start lg:items-center">
+                  <div class="mt-1 lg:mt-0">${faCheck()}</div>
+                  <h6 class="text-base text-grey-600 ml-1 text-start">
+                    ${item}
+                  </h6>
+                </div>
+              `)}
+          </div>
+        </div>
+        <button
+          @click=${() => redirectToRegister('freewall')}
+          class="bg-white border border-brand-1 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-brand-1 font-bold leading-[18px]"
+        >
+          ${this.jsonPackageData.registerButtonText}
+        </button>
+      </div>
+    `;
+    }
+    descriptionSection() {
+        return html `<div class="flex flex-col space-y-1 mt-3 mb-4 md:mt-4 md:mb-5">
+      ${this.jsonPackageData.subscriptionDescription.map(item => html `
+            <div class="flex items-start lg:items-center">
+              <div class="mt-1 lg:mt-0">${faCheck()}</div>
+              <h6 class="text-base text-grey-600 ml-1 text-start">${item}</h6>
+            </div>
+          `)}
+    </div>`;
+    }
+    /**
+     * Render Statement
+     */
+    render() {
+        return html `
+      <div
+        class="w-full h-full flex flex-col md:flex-row pt-[5px] relative space-y-4 md:space-x-5 md:space-y-0 justify-center items-center"
+      >
+        ${this.subscriptionCardComponent()}
+        ${!this.isLogin ? this.registerCardComponent() : nothing}
+      </div>
+    `;
+    }
+};
+KompasFreewallBody.styles = [
+    css `
+      .font-lora {
+        font-family: 'Lora', 'Georgia', 'serif';
+      }
+
+      .font-roboto-condensed {
+        font-family: 'Roboto Condensed', sans-serif;
+      }
+
+      /* ----- Ribbon Container ---------------------------------------*/
+      #ribbon-container {
+        background: transparent;
+        height: 130px;
+        width: 200px;
+        position: absolute;
+        top: -5px;
+        right: -5px;
+        overflow: hidden;
+      }
+
+      /* ----- Top Curl ---------------------------------------*/
+      #ribbon-container:before {
+        content: '';
+        display: block;
+        -webkit-border-radius: 10px 10px 0px 0px;
+        border-radius: 10px 10px 0px 0px;
+        width: 35px;
+        height: 10px;
+        position: absolute;
+        right: 60px;
+        background: #b78b00;
+        z-index: 1;
+      }
+
+      /* ----- Right Curl ---------------------------------------*/
+      #ribbon-container:after {
+        content: '';
+        display: block;
+        -webkit-border-radius: 0px 10px 10px 0px;
+        border-radius: 0px 10px 10px 0px;
+        width: 10px;
+        height: 35px;
+        position: absolute;
+        right: 0px;
+        top: 60px;
+        background: #b78b00;
+      }
+
+      /* ----- Ribbon ---------------------------------------*/
+      #ribbon-container > div {
+        width: 140px;
+        height: 28px;
+        position: relative;
+        top: 24px;
+        right: -100px;
+        z-index: 11;
+        overflow: hidden;
+        transform: rotate(45deg);
+        -ms-transform: rotate(45deg); /* IE 9 */
+        -moz-transform: rotate(45deg); /* Firefox */
+        -webkit-transform: rotate(45deg); /* Safari and Chrome */
+        -o-transform: rotate(45deg); /* Opera */
+        background: #ffcc00;
+      }
+    `,
+    TWStyles,
+];
+__decorate([
+    property({ type: Boolean })
+], KompasFreewallBody.prototype, "isLogin", void 0);
+__decorate([
+    property({ type: String })
+], KompasFreewallBody.prototype, "type", void 0);
+__decorate([
+    property()
+], KompasFreewallBody.prototype, "onSubscriptionClick", void 0);
+__decorate([
+    property({ type: Object })
+], KompasFreewallBody.prototype, "packageData", void 0);
+__decorate([
+    property({ type: Object })
+], KompasFreewallBody.prototype, "jsonPackageData", void 0);
+KompasFreewallBody = __decorate([
+    customElement('kompasid-freewall-body')
+], KompasFreewallBody);
+export { KompasFreewallBody };
+//# sourceMappingURL=old_KompasFreewallBody.js.map

package/dist/src/components/kompasid-freewall-body/old_KompasFreewallBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"old_KompasFreewallBody.js","sourceRoot":"","sources":["../../../../src/components/kompasid-freewall-body/old_KompasFreewallBody.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement, nothing } from 'lit'\nimport { property, customElement } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { addGoogleFonts } from '../../utils/googleFont.js'\nimport { JsonPackageData, PackageData } from '../kompasid-freewall/types.js'\nimport { faCheck } from '../../../assets/font-awesome.js'\nimport { redirectToRegister } from '../../utils/cta.js'\n\n@customElement('kompasid-freewall-body')\nexport class KompasFreewallBody extends LitElement {\n  static styles = [\n    css`\n      .font-lora {\n        font-family: 'Lora', 'Georgia', 'serif';\n      }\n\n      .font-roboto-condensed {\n        font-family: 'Roboto Condensed', sans-serif;\n      }\n\n      /* ----- Ribbon Container ---------------------------------------*/\n      #ribbon-container {\n        background: transparent;\n        height: 130px;\n        width: 200px;\n        position: absolute;\n        top: -5px;\n        right: -5px;\n        overflow: hidden;\n      }\n\n      /* ----- Top Curl ---------------------------------------*/\n      #ribbon-container:before {\n        content: '';\n        display: block;\n        -webkit-border-radius: 10px 10px 0px 0px;\n        border-radius: 10px 10px 0px 0px;\n        width: 35px;\n        height: 10px;\n        position: absolute;\n        right: 60px;\n        background: #b78b00;\n        z-index: 1;\n      }\n\n      /* ----- Right Curl ---------------------------------------*/\n      #ribbon-container:after {\n        content: '';\n        display: block;\n        -webkit-border-radius: 0px 10px 10px 0px;\n        border-radius: 0px 10px 10px 0px;\n        width: 10px;\n        height: 35px;\n        position: absolute;\n        right: 0px;\n        top: 60px;\n        background: #b78b00;\n      }\n\n      /* ----- Ribbon ---------------------------------------*/\n      #ribbon-container > div {\n        width: 140px;\n        height: 28px;\n        position: relative;\n        top: 24px;\n        right: -100px;\n        z-index: 11;\n        overflow: hidden;\n        transform: rotate(45deg);\n        -ms-transform: rotate(45deg); /* IE 9 */\n        -moz-transform: rotate(45deg); /* Firefox */\n        -webkit-transform: rotate(45deg); /* Safari and Chrome */\n        -o-transform: rotate(45deg); /* Opera */\n        background: #ffcc00;\n      }\n    `,\n    TWStyles,\n  ]\n\n  /**\n   * Props\n   */\n  /**\n   * property isLogin untuk menghandle apakah user sudah login atau belum\n   * property type untuk menghandle tipe freewall\n   * property onSubscriptionClick to handle cta when subscription button is clicked\n   * packageData sebagai data package yang diambil dari kompasid-freewall\n   */\n\n  @property({ type: Boolean }) isLogin = false\n  @property({ type: String }) type: 'article' | 'landing_page' = 'article'\n  @property() onSubscriptionClick = () => {}\n  @property({ type: Object }) packageData: PackageData = {} as PackageData\n  @property({ type: Object }) jsonPackageData: JsonPackageData =\n    {} as JsonPackageData\n\n  description = [\n    'Akses seluruh konten Kompas.id di web & aplikasi',\n    'ePaper hingga 30 edisi terakhir',\n    'Buku digital tiap bulannya di aplikasi ',\n  ]\n\n  /**\n   * Lifecycle\n   */\n\n  override async connectedCallback() {\n    super.connectedCallback()\n    await this.updateComplete\n    addGoogleFonts(['pt-sans', 'lora', 'roboto-condensed'])\n  }\n\n  /**\n   * Component\n   */\n\n  private subscriptionCardComponent() {\n    return html`\n      <div class=\"relative\">\n        <div\n          id=\"subscription-card\"\n          class=\"flex justify-between items-center relative z-10 flex-col w-[328px] ${this\n            .isLogin\n            ? 'md:w-[580px]'\n            : 'md:w-[350px] lg:w-[410px]'} py-3 px-[10px] md:p-5 md:pt-3 rounded-[10px] border-2 border-yellow-400 bg-white\"\n        >\n          <div\n            class=\"flex w-full flex-col ${this.isLogin\n              ? 'items-center md:w-[374px] text-center'\n              : 'items-start text-start'}\"\n          >\n            <h5\n              class=\"font-lora text-lg md:text-xl font-bold leading-[30px] ${this\n                .isLogin && 'w-60 md:w-full'} text-grey-600\"\n            >\n              ${this.isLogin\n                ? this.jsonPackageData.subscriptionTitle\n                : this.jsonPackageData.subscriptionTitleGuest}\n            </h5>\n            ${this.descriptionSection()}\n          </div>\n          <button\n            @click=${this.onSubscriptionClick}\n            class=\"bg-green-500 whitespace-nowrap w-full rounded ${this\n              .isLogin &&\n            'md:w-[370px]'} md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]\"\n          >\n            ${this.jsonPackageData.subscriptionButtonText}\n          </button>\n        </div>\n        <div id=\"ribbon-container\">\n          <div\n            class=\"text-[11px] font-medium text-grey-600 font-roboto-condensed flex justify-center items-center\"\n          >\n            <span class=\"-ml-2\">Penawaran Terbaik</span>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  private registerCardComponent() {\n    return html`\n      <div\n        class=\"flex flex-col justify-between md:min-h-[244px] lg:min-h-[220px] w-[328px] md:w-[350px] lg:w-[410px] py-3 px-[10px] md:p-5 md:pt-3 rounded-[10px] bg-white\"\n      >\n        <div>\n          <h5\n            class=\"font-lora text-lg md:text-xl font-bold leading-[30px] text-grey-600\"\n          >\n            ${this.jsonPackageData.registerTitle}\n          </h5>\n          <div class=\"flex flex-col space-y-1 mt-3 mb-4 md:mt-4 md:mb-5\">\n            ${this.jsonPackageData.registerDescription.map(\n              item => html`\n                <div class=\"flex items-start lg:items-center\">\n                  <div class=\"mt-1 lg:mt-0\">${faCheck()}</div>\n                  <h6 class=\"text-base text-grey-600 ml-1 text-start\">\n                    ${item}\n                  </h6>\n                </div>\n              `\n            )}\n          </div>\n        </div>\n        <button\n          @click=${() => redirectToRegister('freewall')}\n          class=\"bg-white border border-brand-1 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-brand-1 font-bold leading-[18px]\"\n        >\n          ${this.jsonPackageData.registerButtonText}\n        </button>\n      </div>\n    `\n  }\n\n  private descriptionSection() {\n    return html`<div class=\"flex flex-col space-y-1 mt-3 mb-4 md:mt-4 md:mb-5\">\n      ${this.jsonPackageData.subscriptionDescription.map(\n        item =>\n          html`\n            <div class=\"flex items-start lg:items-center\">\n              <div class=\"mt-1 lg:mt-0\">${faCheck()}</div>\n              <h6 class=\"text-base text-grey-600 ml-1 text-start\">${item}</h6>\n            </div>\n          `\n      )}\n    </div>`\n  }\n\n  /**\n   * Render Statement\n   */\n\n  render() {\n    return html`\n      <div\n        class=\"w-full h-full flex flex-col md:flex-row pt-[5px] relative space-y-4 md:space-x-5 md:space-y-0 justify-center items-center\"\n      >\n        ${this.subscriptionCardComponent()}\n        ${!this.isLogin ? this.registerCardComponent() : nothing}\n      </div>\n    `\n  }\n}\n"]}

package/dist/src/components/kompasid-freewall-head/KompasFreewallHead.d.ts

@@ -1,31 +1,20 @@
 import { LitElement } from 'lit';
-import { JsonPackageData, PackageData } from '../kompasid-freewall/types.js';
+import { HeadDataFreeWall } from '../kompasid-freewall/types.js';
 export declare class KompasFreewallHead extends LitElement {
     static styles: import("lit").CSSResult[];
     /**
      * Props
      */
     /**
-     * property isLogin untuk menghandle apakah user sudah login atau belum
-     * property type untuk menghandle tipe freewall
-     * property head_copy_expand to update copy header when expand
-     * property head_copy_collapse to update copy header when collapse
-     * property expand to handle expand/collapse
-     * property toggleExpand to handle toggle expand/collapse
-     * property onSubscriptionClick to handle cta when subscription button is clicked
+     * property headData to handle data copy text and cta button
+     * property expand to handle what copy text is used
+     * property onButtonClick to handle cta when button is clicked and set specific card url
+     * property toggleExpand to handle expand and collpase button
      */
-    isLogin: boolean;
-    type: 'article' | 'landing_page';
-    head_copy_expand: string;
-    head_copy_collapse: string;
-    expand: boolean;
     toggleExpand: () => void;
-    onSubscriptionClick: () => void;
-    packageData: PackageData;
-    jsonPackageData: JsonPackageData;
-    /**
-     * Getter
-     */
+    expand: boolean;
+    onButtonClick: (url: string) => string;
+    headData: HeadDataFreeWall;
     get headCopy(): string;
     /**
      * Lifecycle

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

@@ -12,30 +12,28 @@ let KompasFreewallHead = class KompasFreewallHead extends LitElement {
          * Props
          */
         /**
-         * property isLogin untuk menghandle apakah user sudah login atau belum
-         * property type untuk menghandle tipe freewall
-         * property head_copy_expand to update copy header when expand
-         * property head_copy_collapse to update copy header when collapse
-         * property expand to handle expand/collapse
-         * property toggleExpand to handle toggle expand/collapse
-         * property onSubscriptionClick to handle cta when subscription button is clicked
+         * property headData to handle data copy text and cta button
+         * property expand to handle what copy text is used
+         * property onButtonClick to handle cta when button is clicked and set specific card url
+         * property toggleExpand to handle expand and collpase button
          */
-        this.isLogin = false;
-        this.type = 'article';
-        this.head_copy_expand = '';
-        this.head_copy_collapse = '';
-        this.expand = true;
         this.toggleExpand = () => { };
-        this.onSubscriptionClick = () => { };
-        this.packageData = {};
-        this.jsonPackageData = {};
+        this.expand = true;
+        this.onButtonClick = (url) => url;
+        this.headData = {
+            headCopyExpand: 'Expand Default.',
+            headCopyCollapse: 'Collapse Default.',
+            cta: {
+                text: 'Langganan',
+                url: '#',
+            },
+        };
     }
-    /**
-     * Getter
-     */
+    // Getter
     get headCopy() {
-        return ((this.expand ? this.head_copy_expand : this.head_copy_collapse) ||
-            'Akses seluruh konten dan fitur Kompas.id dengan berlangganan.');
+        return this.expand
+            ? this.headData.headCopyExpand
+            : this.headData.headCopyCollapse;
     }
     /**
      * Lifecycle
@@ -52,17 +50,15 @@ let KompasFreewallHead = class KompasFreewallHead extends LitElement {
         return html `
       <div class="flex flex-col px-4 md:px-0 space-y-4 pt-4 pb-5 md:py-2">
         <div class="flex justify-between items-center h-full">
-          <div
-            class="hidden ${this.expand ? 'md:block' : 'lg:block'} w-9 h-9"
-          ></div>
+          <div class="hidden sm:block w-9 h-9"></div>
           <div class="flex items-center md:justify-start">
-            <p class="w-full text-grey-600">${this.headCopy}</p>
-            ${!this.expand
+            <p class="w-full text-grey-600 font-bold">${this.headCopy}</p>
+            ${!this.expand && this.headData.cta.url
             ? html `<button
-                  @click=${this.onSubscriptionClick}
-                  class="bg-green-500 hidden md:block ml-3 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]"
+                  @click=${() => this.onButtonClick(this.headData.cta.url)}
+                  class="bg-brand-1 hidden md:block ml-3 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]"
                 >
-                  ${this.jsonPackageData.subscriptionButtonText}
+                  ${this.headData.cta.text}
                 </button>`
             : nothing}
           </div>
@@ -72,18 +68,18 @@ let KompasFreewallHead = class KompasFreewallHead extends LitElement {
               aria-label="Toggle Expand"
               class="h-9 w-9 flex ml-2 items-center justify-center text-blue-500 rounded bg-blue-200"
             >
-              <div class="${!this.expand && 'rotate-180'}">
+              <div class="transition-all ${!this.expand && 'rotate-180'}">
                 ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}
               </div>
             </button>
           </div>
         </div>
-        ${!this.expand
+        ${!this.expand && this.headData.cta.url && this.headData.cta.text
             ? html `<button
-              @click=${this.onSubscriptionClick}
-              class="bg-green-500 block md:hidden whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]"
+              @click=${() => this.onButtonClick(this.headData.cta.url)}
+              class="bg-brand-1 block md:hidden whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]"
             >
-              ${this.jsonPackageData.subscriptionButtonText}
+              ${this.headData.cta.text}
             </button>`
             : nothing}
       </div>
@@ -92,32 +88,17 @@ let KompasFreewallHead = class KompasFreewallHead extends LitElement {
 };
 KompasFreewallHead.styles = [css ``, TWStyles];
 __decorate([
-    property({ type: Boolean })
-], KompasFreewallHead.prototype, "isLogin", void 0);
-__decorate([
-    property({ type: String })
-], KompasFreewallHead.prototype, "type", void 0);
-__decorate([
-    property({ type: String })
-], KompasFreewallHead.prototype, "head_copy_expand", void 0);
-__decorate([
-    property({ type: String })
-], KompasFreewallHead.prototype, "head_copy_collapse", void 0);
+    property()
+], KompasFreewallHead.prototype, "toggleExpand", void 0);
 __decorate([
     property({ type: Boolean })
 ], KompasFreewallHead.prototype, "expand", void 0);
 __decorate([
     property()
-], KompasFreewallHead.prototype, "toggleExpand", void 0);
-__decorate([
-    property()
-], KompasFreewallHead.prototype, "onSubscriptionClick", void 0);
-__decorate([
-    property({ type: Object })
-], KompasFreewallHead.prototype, "packageData", void 0);
+], KompasFreewallHead.prototype, "onButtonClick", void 0);
 __decorate([
     property({ type: Object })
-], KompasFreewallHead.prototype, "jsonPackageData", void 0);
+], KompasFreewallHead.prototype, "headData", void 0);
 KompasFreewallHead = __decorate([
     customElement('kompasid-freewall-head')
 ], KompasFreewallHead);

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

@@ -1 +1 @@
-{"version":3,"file":"KompasFreewallHead.js","sourceRoot":"","sources":["../../../../src/components/kompasid-freewall-head/KompasFreewallHead.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement, nothing } from 'lit'\nimport { property, customElement } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { addGoogleFonts } from '../../utils/googleFont.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { JsonPackageData, PackageData } from '../kompasid-freewall/types.js'\n\n@customElement('kompasid-freewall-head')\nexport class KompasFreewallHead extends LitElement {\n  static styles = [css``, TWStyles]\n\n  /**\n   * Props\n   */\n  /**\n   * property isLogin untuk menghandle apakah user sudah login atau belum\n   * property type untuk menghandle tipe freewall\n   * property head_copy_expand to update copy header when expand\n   * property head_copy_collapse to update copy header when collapse\n   * property expand to handle expand/collapse\n   * property toggleExpand to handle toggle expand/collapse\n   * property onSubscriptionClick to handle cta when subscription button is clicked\n   */\n\n  @property({ type: Boolean }) isLogin = false\n  @property({ type: String }) type: 'article' | 'landing_page' = 'article'\n  @property({ type: String }) head_copy_expand = ''\n  @property({ type: String }) head_copy_collapse = ''\n  @property({ type: Boolean }) expand = true\n  @property() toggleExpand = () => {}\n  @property() onSubscriptionClick = () => {}\n  @property({ type: Object }) packageData: PackageData = {} as PackageData\n  @property({ type: Object }) jsonPackageData: JsonPackageData =\n    {} as JsonPackageData\n\n  /**\n   * Getter\n   */\n\n  get headCopy() {\n    return (\n      (this.expand ? this.head_copy_expand : this.head_copy_collapse) ||\n      'Akses seluruh konten dan fitur Kompas.id dengan berlangganan.'\n    )\n  }\n\n  /**\n   * Lifecycle\n   */\n\n  override async connectedCallback() {\n    super.connectedCallback()\n    await this.updateComplete\n    addGoogleFonts(['pt-sans'])\n  }\n\n  /**\n   * Render Statement\n   */\n\n  render() {\n    return html`\n      <div class=\"flex flex-col px-4 md:px-0 space-y-4 pt-4 pb-5 md:py-2\">\n        <div class=\"flex justify-between items-center h-full\">\n          <div\n            class=\"hidden ${this.expand ? 'md:block' : 'lg:block'} w-9 h-9\"\n          ></div>\n          <div class=\"flex items-center md:justify-start\">\n            <p class=\"w-full text-grey-600\">${this.headCopy}</p>\n            ${!this.expand\n              ? html`<button\n                  @click=${this.onSubscriptionClick}\n                  class=\"bg-green-500 hidden md:block ml-3 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]\"\n                >\n                  ${this.jsonPackageData.subscriptionButtonText}\n                </button>`\n              : nothing}\n          </div>\n          <div>\n            <button\n              @click=${this.toggleExpand}\n              aria-label=\"Toggle Expand\"\n              class=\"h-9 w-9 flex ml-2 items-center justify-center text-blue-500 rounded bg-blue-200\"\n            >\n              <div class=\"${!this.expand && 'rotate-180'}\">\n                ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}\n              </div>\n            </button>\n          </div>\n        </div>\n        ${!this.expand\n          ? html`<button\n              @click=${this.onSubscriptionClick}\n              class=\"bg-green-500 block md:hidden whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]\"\n            >\n              ${this.jsonPackageData.subscriptionButtonText}\n            </button>`\n          : nothing}\n      </div>\n    `\n  }\n}\n"]}
+{"version":3,"file":"KompasFreewallHead.js","sourceRoot":"","sources":["../../../../src/components/kompasid-freewall-head/KompasFreewallHead.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAA;AAI9D,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QAGL;;WAEG;QAEH;;;;;WAKG;QACS,iBAAY,GAAG,GAAG,EAAE,GAAE,CAAC,CAAA;QACN,WAAM,GAAG,IAAI,CAAA;QAC9B,kBAAa,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,GAAG,CAAA;QACpB,aAAQ,GAAqB;YACvD,cAAc,EAAE,iBAAiB;YACjC,gBAAgB,EAAE,mBAAmB;YACrC,GAAG,EAAE;gBACH,IAAI,EAAE,WAAW;gBACjB,GAAG,EAAE,GAAG;aACT;SACF,CAAA;IA8DH,CAAC;IA5DC,SAAS;IACT,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,MAAM;YAChB,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,cAAc;YAC9B,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAA;IACpC,CAAC;IAED;;OAEG;IAEM,KAAK,CAAC,iBAAiB;QAC9B,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,MAAM,IAAI,CAAC,cAAc,CAAA;QACzB,cAAc,CAAC,CAAC,SAAS,CAAC,CAAC,CAAA;IAC7B,CAAC;IAED;;OAEG;IAEH,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;wDAKyC,IAAI,CAAC,QAAQ;cACvD,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG;YACrC,CAAC,CAAC,IAAI,CAAA;2BACO,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC;;;oBAGtD,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI;0BAChB;YACZ,CAAC,CAAC,OAAO;;;;uBAIA,IAAI,CAAC,YAAY;;;;2CAIG,CAAC,IAAI,CAAC,MAAM,IAAI,YAAY;kBACrD,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC;;;;;UAK5D,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI;YAC/D,CAAC,CAAC,IAAI,CAAA;uBACO,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC;;;gBAGtD,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI;sBAChB;YACZ,CAAC,CAAC,OAAO;;KAEd,CAAA;IACH,CAAC;;AAnFM,yBAAM,GAAG,CAAC,GAAG,CAAA,EAAE,EAAE,QAAQ,CAAC,CAAA;AAYrB;IAAX,QAAQ,EAAE;wDAAwB;AACN;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAAc;AAC9B;IAAX,QAAQ,EAAE;yDAAqC;AACpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAO1B;AAvBU,kBAAkB;IAD9B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,kBAAkB,CAqF9B;SArFY,kBAAkB","sourcesContent":["import { html, css, LitElement, nothing } from 'lit'\nimport { property, customElement } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { addGoogleFonts } from '../../utils/googleFont.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { HeadDataFreeWall } from '../kompasid-freewall/types.js'\n\n@customElement('kompasid-freewall-head')\nexport class KompasFreewallHead extends LitElement {\n  static styles = [css``, TWStyles]\n\n  /**\n   * Props\n   */\n\n  /**\n   * property headData to handle data copy text and cta button\n   * property expand to handle what copy text is used\n   * property onButtonClick to handle cta when button is clicked and set specific card url\n   * property toggleExpand to handle expand and collpase button\n   */\n  @property() toggleExpand = () => {}\n  @property({ type: Boolean }) expand = true\n  @property() onButtonClick = (url: string) => url\n  @property({ type: Object }) headData: HeadDataFreeWall = {\n    headCopyExpand: 'Expand Default.',\n    headCopyCollapse: 'Collapse Default.',\n    cta: {\n      text: 'Langganan',\n      url: '#',\n    },\n  }\n\n  // Getter\n  get headCopy() {\n    return this.expand\n      ? this.headData.headCopyExpand\n      : this.headData.headCopyCollapse\n  }\n\n  /**\n   * Lifecycle\n   */\n\n  override async connectedCallback() {\n    super.connectedCallback()\n    await this.updateComplete\n    addGoogleFonts(['pt-sans'])\n  }\n\n  /**\n   * Render Statement\n   */\n\n  render() {\n    return html`\n      <div class=\"flex flex-col px-4 md:px-0 space-y-4 pt-4 pb-5 md:py-2\">\n        <div class=\"flex justify-between items-center h-full\">\n          <div class=\"hidden sm:block w-9 h-9\"></div>\n          <div class=\"flex items-center md:justify-start\">\n            <p class=\"w-full text-grey-600 font-bold\">${this.headCopy}</p>\n            ${!this.expand && this.headData.cta.url\n              ? html`<button\n                  @click=${() => this.onButtonClick(this.headData.cta.url)}\n                  class=\"bg-brand-1 hidden md:block ml-3 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]\"\n                >\n                  ${this.headData.cta.text}\n                </button>`\n              : nothing}\n          </div>\n          <div>\n            <button\n              @click=${this.toggleExpand}\n              aria-label=\"Toggle Expand\"\n              class=\"h-9 w-9 flex ml-2 items-center justify-center text-blue-500 rounded bg-blue-200\"\n            >\n              <div class=\"transition-all ${!this.expand && 'rotate-180'}\">\n                ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}\n              </div>\n            </button>\n          </div>\n        </div>\n        ${!this.expand && this.headData.cta.url && this.headData.cta.text\n          ? html`<button\n              @click=${() => this.onButtonClick(this.headData.cta.url)}\n              class=\"bg-brand-1 block md:hidden whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]\"\n            >\n              ${this.headData.cta.text}\n            </button>`\n          : nothing}\n      </div>\n    `\n  }\n}\n"]}

package/dist/src/components/kompasid-freewall-head/old_KompasFreewallHead.d.ts

@@ -0,0 +1,38 @@
+import { LitElement } from 'lit';
+import { JsonPackageData, PackageData } from '../kompasid-freewall/types.js';
+export declare class KompasFreewallHead extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Props
+     */
+    /**
+     * property isLogin untuk menghandle apakah user sudah login atau belum
+     * property type untuk menghandle tipe freewall
+     * property head_copy_expand to update copy header when expand
+     * property head_copy_collapse to update copy header when collapse
+     * property expand to handle expand/collapse
+     * property toggleExpand to handle toggle expand/collapse
+     * property onSubscriptionClick to handle cta when subscription button is clicked
+     */
+    isLogin: boolean;
+    type: 'article' | 'landing_page';
+    head_copy_expand: string;
+    head_copy_collapse: string;
+    expand: boolean;
+    toggleExpand: () => void;
+    onSubscriptionClick: () => void;
+    packageData: PackageData;
+    jsonPackageData: JsonPackageData;
+    /**
+     * Getter
+     */
+    get headCopy(): string;
+    /**
+     * Lifecycle
+     */
+    connectedCallback(): Promise<void>;
+    /**
+     * Render Statement
+     */
+    render(): import("lit-html").TemplateResult<1>;
+}