@kompasid/lit-web-components 0.1.0

package/.editorconfig

@@ -0,0 +1,29 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.json]
+indent_size = 2
+
+[*.{html,js,md}]
+block_comment_start = /**
+block_comment = *
+block_comment_end = */

package/.github/workflows/npm-publish.yml

@@ -0,0 +1,35 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
+
+name: Node.js Package
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps: 
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - run: yarn install --frozen-lockfile
+
+  publish-npm:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          registry-url: https://registry.npmjs.org/
+          scope: '@kompasid'
+      - run: yarn install --frozen-lockfile
+      - run: tsc && npm run analyze -- --exclude dist
+      - run: npm publish --access=public
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 lit-web-component
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,62 @@
+# \<lit-web-component>
+
+This web component follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
+
+## Installation
+
+```bash
+npm i lit-web-component
+```
+
+## Usage
+
+```html
+<script type="module">
+  import 'lit-web-component/lit-web-component.js';
+</script>
+
+<lit-web-component></lit-web-component>
+```
+
+## Linting and formatting
+
+To scan the project for linting and formatting errors, run
+
+```bash
+npm run lint
+```
+
+To automatically fix linting and formatting errors, run
+
+```bash
+npm run format
+```
+
+## Testing with Web Test Runner
+
+To execute a single test run:
+
+```bash
+npm run test
+```
+
+To run the tests in interactive watch mode run:
+
+```bash
+npm run test:watch
+```
+
+
+## Tooling configs
+
+For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
+
+If you customize the configuration a lot, you can consider moving them to individual files.
+
+## Local Demo with `web-dev-server`
+
+```bash
+npm start
+```
+
+To run a local development server that serves the basic demo located in `demo/index.html`

package/assets/font-awesome.ts

@@ -0,0 +1,21 @@
+import { html } from 'lit'
+
+export const faArrowLeft = html`<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 448 512"
+>
+  <!-- Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) -->
+  <path
+    d="M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z"
+  />
+</svg>`
+
+export const faCheck = html`<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 512 512"
+>
+  <!-- Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) -->
+  <path
+    d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+  />
+</svg>`

package/components.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: any
+  export default content
+}

package/demo/index.html

@@ -0,0 +1,137 @@
+<!doctype html>
+<html lang="en-GB">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <style>
+    body {
+      background: #fafafa;
+    }
+    .video {
+      background-color: green;
+      position: relative;
+      width: 70%;
+      height: 400px;
+      margin: 20px 0;
+    }
+    @media screen and (max-width: 600px)  {
+      .video {
+        width: 100%;
+      }
+    }
+  </style>
+  <script>
+    (function initGTM(w, d, s, l, i) {
+      const _w = w;
+      _w[l] = _w[l] || [];
+      _w[l].push({
+        'gtm.start': new Date().getTime(),
+        'event': 'gtm.js'
+      });
+
+      const f = d.getElementsByTagName(s)[0];
+      const j = d.createElement(s);
+      const dl = l !== 'dataLayer' ? `&l=${l}` : '';
+
+      j.async = true;
+      j.src = `https://www.googletagmanager.com/gtm.js?id=${i}${dl}`;
+      f.parentNode.insertBefore(j, f);
+
+    })(window, document, 'script', 'dataLayer');
+  </script>
+</head>
+<body>
+  <div id="demo"></div>
+
+  <script type="module">
+    import { html, render } from 'lit';
+    import '../dist/src/components/kompas-footer/KompasFooter.js'
+    import '../dist/src/components/kompas-paywall/KompasPaywall.js'
+    import '../dist/src/components/kompas-paywall-video/KompasPaywallVideo.js'
+    import '../dist/src/components/kompas-metered-paywall/KompasMeteredPaywall.js'
+
+    const type = 'epaper'
+    const theme=""
+    const paywallLocation = "Article Detail Page";
+    const paywallSubscriptionId = "testId";
+    const paywallSubscriptionPrice = 0;
+    const paywallPosition = 1;
+    const paywallSubscriptionPackage = "test subscription";
+    const trackerPageType = "page_type";
+    const trackerContentId = "content_id";
+    const trackerContentType = "content_type";
+    const trackerContentTitle = "content_title";
+    const trackerContentCategories = "content_categories";
+    const trackerUserType = "user_type";
+    const trackerMeteredWallBalance = "metered_wall_balance";
+    const subscriptionStatus = "subscription_status";
+    const trackerPageDomain = "page_domain";
+    const meteredWallType = "metered_wall_type";
+    const trackerEpaperEdition = "edition";
+    const meteredWallBalance = 0;
+    const isLogin = true;
+    const isWithHeader = true;
+    const textHeader = "this is message for header information";
+    const userGuid = "111000";
+    const trackerSubscriptionStatus = "register";
+    const swgEnable = true;
+    const pageDomain = 'kompas.id'
+
+    render(
+      html`
+        <kompas-paywall
+          .type=${type}
+          .theme=${theme}
+          .paywall_location=${paywallLocation}
+          .paywall_subscription_id=${paywallSubscriptionId}
+          .paywall_subscription_price=${paywallSubscriptionPrice}
+          .paywall_position=${paywallPosition}
+          .tracker_page_type=${trackerPageType}
+          .tracker_content_id=${trackerContentId}
+          .tracker_content_type=${trackerContentType}
+          .tracker_content_title=${trackerContentTitle}
+          .tracker_content_categories=${trackerContentCategories}
+          .tracker_user_type=${trackerUserType}
+          .subscriptionStatus=${subscriptionStatus}
+          .tracker_page_domain=${trackerPageDomain}
+          .metered_wall_type=${meteredWallType}
+          .subscriptionStatus=${subscriptionStatus}
+          .tracker_epaper_edition=${trackerEpaperEdition}
+          .metered_wall_balance=${meteredWallBalance}
+          .isLogin=${isLogin}
+          .isWithHeader=${isWithHeader}
+          .swgEnable=${swgEnable}
+          .textHeader=${textHeader}
+          .userGuid=${userGuid}
+          .tracker_subscription_status=${trackerSubscriptionStatus}
+        >
+        </kompas-paywall>
+        <div class="video">
+          <kompas-paywall-video
+          .paywall_location=${paywallLocation}
+          .paywall_subscription_package=${paywallSubscriptionPackage}
+          .paywall_subscription_id=${paywallSubscriptionId}
+          .paywall_subscription_price=${paywallSubscriptionPrice}
+          .paywall_position=${paywallPosition}
+          .tracker_page_type=${trackerPageType}
+          .tracker_content_id=${trackerContentId}
+          .tracker_content_type=${trackerContentType}
+          .tracker_content_title=${trackerContentTitle}
+          .tracker_content_categories=${trackerContentCategories}
+          .tracker_user_type=${trackerUserType}
+          .tracker_subscription_status=${trackerSubscriptionStatus}
+          .page_domain=${pageDomain}
+          .metered_wall_type=${meteredWallType}
+          .tracker_metered_wall_balance=${trackerMeteredWallBalance}
+        >
+        </kompas-paywall-video>
+        </div>
+        <kompas-footer></kompas-footer>
+        <kompas-metered-paywall></kompas-metered-paywall>
+      `,
+      document.querySelector('#demo')
+    );
+    window.dataLayer = window.dataLayer || [];
+  </script>
+</body>
+</html>

package/dist/assets/font-awesome.d.ts

@@ -0,0 +1,2 @@
+export declare const faArrowLeft: import("lit-html").TemplateResult<1>;
+export declare const faCheck: import("lit-html").TemplateResult<1>;

package/dist/assets/font-awesome.js

@@ -0,0 +1,20 @@
+import { html } from 'lit';
+export const faArrowLeft = html `<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 448 512"
+>
+  <!-- Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) -->
+  <path
+    d="M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z"
+  />
+</svg>`;
+export const faCheck = html `<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 512 512"
+>
+  <!-- Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) -->
+  <path
+    d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+  />
+</svg>`;
+//# sourceMappingURL=font-awesome.js.map

package/dist/assets/font-awesome.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"font-awesome.js","sourceRoot":"","sources":["../../assets/font-awesome.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,IAAI,CAAA;;;;;;;;OAQxB,CAAA;AAEP,MAAM,CAAC,MAAM,OAAO,GAAG,IAAI,CAAA;;;;;;;;OAQpB,CAAA","sourcesContent":["import { html } from 'lit'\n\nexport const faArrowLeft = html`<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  viewBox=\"0 0 448 512\"\n>\n  <!-- Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) -->\n  <path\n    d=\"M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z\"\n  />\n</svg>`\n\nexport const faCheck = html`<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  viewBox=\"0 0 512 512\"\n>\n  <!-- Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) -->\n  <path\n    d=\"M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z\"\n  />\n</svg>`\n"]}

package/dist/src/components/kompas-footer/KompasFooter.d.ts

@@ -0,0 +1,13 @@
+import { LitElement } from 'lit';
+import { Footer } from './types.js';
+export declare class KompasFooter extends LitElement {
+    static styles: import("lit").CSSResult[];
+    footer: Footer | null;
+    isDark: boolean;
+    connectedCallback(): void;
+    private addStylesheetToHead;
+    private initializeFooter;
+    fetchFooter(): Promise<void>;
+    getYear(): number;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/components/kompas-footer/KompasFooter.js

@@ -0,0 +1,304 @@
+import { __decorate } from "tslib";
+import { html, css, LitElement } from 'lit';
+import { customElement, property } 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';
+let KompasFooter = class KompasFooter extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.footer = null;
+        this.isDark = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addStylesheetToHead();
+        this.initializeFooter();
+    }
+    addStylesheetToHead() {
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href =
+            'https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap';
+        document.head.appendChild(link);
+    }
+    initializeFooter() {
+        if (this.footer === undefined || this.footer === null) {
+            this.fetchFooter();
+        }
+    }
+    async fetchFooter() {
+        const response = await fetch('https://d3w4qaq4xm1ncv.cloudfront.net/assets/json/footer/ApiFooterDefault.json');
+        const jsonResponse = await response.json();
+        this.footer = jsonResponse;
+    }
+    getYear() {
+        return new Date().getFullYear();
+    }
+    render() {
+        if (this.footer) {
+            const { isDark } = this;
+            const bgClass = isDark ? 'bg-[#2C2C2C]' : 'bg-transparent';
+            const primaryTextColor = isDark ? 'text-[#FFFFFF]' : '';
+            const secondaryTextColor = isDark ? 'text-[#FFFFFF]' : 'text-grey-60';
+            const itemTextColor = isDark ? 'text-[#FFFFFF]' : 'text-[#00559a]';
+            return html `
+        <div
+          class="border-t border-grey-30 mx-auto w-full md:px-20 px-4 ${bgClass} ${primaryTextColor}"
+        >
+          <div class="max-w-7xl mx-auto">
+            <div class="md:px-0 pb-6 lg:pb-0 mx-auto w-full">
+              <div
+                class="grid grid-cols-4 lg:grid-cols-12 gap-6 lg:gap-8 lg:justify-between pt-10 pb-8 lg:py-10"
+              >
+                ${Object.values(this.footer.brands.itemsLeft).map(brand => html `
+                    <a
+                      class="col-span-4 lg:col-span-2 flex gap-4 cursor-pointer"
+                      title="Kompas.id"
+                      href="${brand.permalink}"
+                    >
+                      <img
+                        src="https://d3w4qaq4xm1ncv.cloudfront.net/assets/img/logos/kompas-logo-footer.svg"
+                        height="${brand.image.height}"
+                        width="${brand.image.width}"
+                        alt="${brand.image.alt}"
+                        class="w-auto h-10 lg:mx-auto"
+                      />
+                    </a>
+                  `)}
+                <div
+                  class="col-span-4 lg:col-start-10 lg:col-span-3 gap-4 flex lg:justify-end mx-auto w-full"
+                >
+                  <a
+                    class="cursor-pointer"
+                    href="${this.footer.brands.itemsRight[0].permalink}"
+                    target="_blank"
+                  >
+                    <img
+                      src="https://d3w4qaq4xm1ncv.cloudfront.net/halaman-unduh/image/ios-badge.png"
+                      class="h-10 w-[120px]"
+                      alt="Logo iOS"
+                  /></a>
+                  <a
+                    class="cursor-pointer"
+                    href="${this.footer.brands.itemsRight[1].permalink}"
+                    target="_blank"
+                  >
+                    <img
+                      src="https://d3w4qaq4xm1ncv.cloudfront.net/halaman-unduh/image/google-play-badge.png"
+                      class="h-10 w-[138px]"
+                      alt="Logo Android"
+                  /></a>
+                </div>
+              </div>
+            </div>
+            <div class="grid grid-cols-4 lg:grid-cols-12 gap-8 pb-2">
+              <div
+                class="col-span-4 lg:col-span-3 flex flex-row lg:flex-col gap-8 lg:gap-0"
+              >
+                ${Object.values(this.footer.address.items).map(address => html ` <div class="lg:pb-6">
+                    <div
+                      class="font-bold leading-none pb-3 text-sm ${itemTextColor}"
+                    >
+                      ${address.title}
+                    </div>
+                    <div class="leading-normal pb-3 text-sm ${secondaryTextColor}">
+                      ${address.text}
+                    </div>
+                    <div class="flex flex-row">
+                      <div
+                        class="font-bold leading-none pb-3 pr-2 text-sm ${itemTextColor} hidden lg:block"
+                      >
+                        Tlp.
+                      </div>
+                      <div
+                        class="grid lg:gap-x-6 lg:grid-cols-2 md:grid-cols-1 grid-cols-1"
+                      >
+                        ${Object.values(address.phones).map(num => html `
+                            <div
+                              class="leading-normal pb-2 text-sm ${secondaryTextColor}"
+                            >
+                              ${num.number}
+                            </div>
+                          `)}
+                      </div>
+                    </div>
+                  </div>`)}
+              </div>
+              <div class="col-span-4 lg:col-span-5 gap-4">
+                <div class="grid grid-cols-2 sm:grid-cols-4 gap-6 shrink-0">
+                  ${Object.values(this.footer.products.items).map(product => html `
+                      <div>
+                        <div
+                          class="font-bold leading-none pb-4 text-sm ${itemTextColor}"
+                        >
+                          ${product.title}
+                        </div>
+                        ${Object.values(product.sites).map(prod => html `
+                            <a
+                              class="leading-normal text-sm ${secondaryTextColor}"
+                              href="${prod.permalink}"
+                            >
+                              <div class="flex flex-col pb-4 cursor-pointer">
+                                ${prod.text}
+                              </div>
+                            </a>
+                          `)}
+                      </div>
+                    `)}
+                </div>
+              </div>
+              <div class="col-span-2 flex flex-col">
+                <div
+                  class="font-bold leading-none pb-4 text-sm ${itemTextColor}"
+                >
+                  ${this.footer.contacts.title}
+                </div>
+                ${Object.values(this.footer.contacts.items).map(contact => html ` <div class="flex flex-row pb-4">
+                    <div
+                      class="flex items-center mr-3 text-base ${itemTextColor}"
+                    >
+                      ${unsafeSVG(getFontAwesomeIcon(contact.icon[0], contact.icon[1]))}
+                    </div>
+                    <div class="flex flex-col">
+                      <div class="pb-1 text-sm w-full ${secondaryTextColor}">
+                        ${contact.label}
+                      </div>
+                      <a
+                        class="font-bold text-sm w-full cursor-pointer"
+                        href="${contact.action}"
+                      >
+                        <span class="text-gray-500"> ${contact.text} </span>
+                      </a>
+                    </div>
+                  </div>`)}
+              </div>
+              <div class="col-span-2 flex flex-col">
+                <div
+                  class="font-bold leading-none pb-4 text-sm ${itemTextColor}"
+                >
+                  ${this.footer.sosmed.title}
+                </div>
+                ${Object.values(this.footer.sosmed.items).map(sosmed => html `
+                    <a
+                      class="border border-grey-30 hover-border-blue-20 hover-bg-blue-10 p-2 mb-2 flex flex-row md:self-end rounded w-full cursor-pointer"
+                      href="${sosmed.url}"
+                    >
+                      <div
+                        class="h-5 flex justify-center items-center rounded text-white w-5 ${sosmed.color}"
+                      >
+                        <div class="h-3 text-xs">
+                          ${unsafeSVG(getFontAwesomeIcon(sosmed.icon[0], sosmed.icon[1], 12, 12))}
+                        </div>
+                      </div>
+                      <div class="leading-normal pl-2 text-sm ${secondaryTextColor}">
+                        ${sosmed.name}
+                      </div>
+                    </a>
+                  `)}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="flex flex-col pb-32 pt-6 px-4 text-xs bg-black">
+          <div class="flex flex-col lg:flex-row max-w-7xl mx-auto w-full">
+            <div class="flex flex-wrap mb-2 lg:mb-0 w-full">
+              <div
+                class="flex flex-col lg:flex-row flex-grow lg:justify-between"
+              >
+                <div class="flex flex-wrap">
+                  <div class="flex text-white">
+                    &copy; ${this.getYear()} PT Kompas Media Nusantara
+                    <span class="mx-2 text-grey-50">&centerdot;</span>
+                  </div>
+                  ${Object.values(this.footer.universal.itemsLeft).map(universal => html ` <a
+                      class="flex justify-center items-center"
+                      href="${universal.url}"
+                    >
+                      <div class="pb-2 lg:pb-0 text-white cursor-pointer">
+                        ${universal.name}
+                        <span class="mx-2 text-grey-50">&centerdot;</span>
+                      </div>
+                    </a>`)}
+                </div>
+                <div class="flex flex-wrap shrink-0">
+                  ${Object.values(this.footer.universal.itemsRight).map(universal => html `
+                      <a class="flex cursor-pointer" href="${universal.url}">
+                        <div class="text-white flex items-center">
+                          ${universal.name}
+                          <span class="mx-2 text-grey-50">&centerdot;</span>
+                        </div>
+                      </a>
+                    `)}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      `;
+        }
+        return html ``;
+    }
+};
+KompasFooter.styles = [
+    css `
+      :host {
+        font-family: 'PT Sans', sans-serif;
+      }
+
+      .bg-instagram {
+        background-image: linear-gradient(90deg, #ffc107, #f44336, #9c27b0);
+      }
+
+      .bg-sosmed-facebook {
+        background-color: #3d5b9b;
+      }
+
+      .bg-sosmed-twitter {
+        background-color: #2daae4;
+      }
+
+      .bg-sosmed-youtube {
+        background-color: #f44336;
+      }
+
+      .text-brand-1 {
+        color: #00559a;
+      }
+
+      .text-grey-50 {
+        color: #666;
+        color: rgb(102 102 102/1);
+      }
+
+      .text-grey-60 {
+        color: #333;
+        color: rgb(51 51 51/1);
+      }
+
+      .border-grey-30 {
+        --tw-border-opacity: 1;
+        border-color: rgb(221 221 221 / var(--tw-border-opacity));
+      }
+
+      .hover-bg-blue-10:hover {
+        background-color: #e1f0ff;
+      }
+
+      .hover-border-blue-20:hover {
+        border-color: #93c8fd;
+      }
+    `,
+    TWStyles,
+];
+__decorate([
+    property({ type: Object })
+], KompasFooter.prototype, "footer", void 0);
+__decorate([
+    property({ type: Boolean })
+], KompasFooter.prototype, "isDark", void 0);
+KompasFooter = __decorate([
+    customElement('kompas-footer')
+], KompasFooter);
+export { KompasFooter };
+//# sourceMappingURL=KompasFooter.js.map