npm - @kompasid/lit-web-components - Versions diffs - 0.1.0 → 0.2.0 - Mend

@kompasid/lit-web-components 0.1.0 → 0.2.0

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

Files changed (32) hide show

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

@@ -5,22 +5,22 @@ name: Node.js Package
 on:
   push:
-    branches:
-      - master
+    branches: master
 jobs:
   build:
-    runs-on: ubuntu-latest
+    runs-on: [self-hosted]
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
           node-version: 18
+      - run: yarn install --ignore-optional
       - run: yarn install --frozen-lockfile
   publish-npm:
     needs: build
-    runs-on: ubuntu-latest
+    runs-on: [self-hosted]
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
@@ -29,7 +29,7 @@ jobs:
           registry-url: https://registry.npmjs.org/
           scope: '@kompasid'
       - run: yarn install --frozen-lockfile
-      - run: tsc && npm run analyze -- --exclude dist
+      - run: npx tsc && npm run analyze -- --exclude dist
       - run: npm publish --access=public
         env:
           NODE_AUTH_TOKEN: ${{secrets.npm_token}}

package/README.md CHANGED Viewed

@@ -1,21 +1,33 @@
-# \<lit-web-component>
+# Kompas Lit Web Components
-This web component follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
+Kompas Lit Web Components is frontend reusable component for Harian Kompas project.
 ## Installation
+To start building a new web component using Lit, clone this repo to a new directory:
 ```bash
-npm i lit-web-component
+git clone https://github.com/pt-kompas-media-nusantara/lit-web-component.git
+cd lit-web-component
+```
+Then run yarn install to install Kompas Lit Web Component.
+```bash
+yarn install
 ```
 ## Usage
-```html
-<script type="module">
-  import 'lit-web-component/lit-web-component.js';
-</script>
+Run:
+```bash
+yarn start
+```
+To develop component and run twlit concurrently, run:
-<lit-web-component></lit-web-component>
+```bash
+yarn dev
 ```
 ## Linting and formatting
@@ -23,13 +35,13 @@ npm i lit-web-component
 To scan the project for linting and formatting errors, run
 ```bash
-npm run lint
+yarn lint
 ```
 To automatically fix linting and formatting errors, run
 ```bash
-npm run format
+yarn format
 ```
 ## Testing with Web Test Runner
@@ -37,13 +49,13 @@ npm run format
 To execute a single test run:
 ```bash
-npm run test
+yarn test
 ```
 To run the tests in interactive watch mode run:
 ```bash
-npm run test:watch
+yarn test:watch
 ```
@@ -56,7 +68,26 @@ If you customize the configuration a lot, you can consider moving them to indivi
 ## Local Demo with `web-dev-server`
 ```bash
-npm start
+yarn start
 ```
 To run a local development server that serves the basic demo located in `demo/index.html`
+## How to develop
+* Create component that want to build on /src/components
+* Use .ts format (We use TypeScript for functionality)
+* Import TWStyles for the component you want to develop
+* Declare every components, states and props (if exist) and run yarn dev to load tailwind automatically
+* We use twlit for styling component that is based on Tailwind CSS, check out [twlit](https://www.npmjs.com/package/twlit).
+## Contributing
+Pull requests are welcome. For major changes, please open an issue first
+to discuss what you would like to change.
+Please make sure to update tests as appropriate.
+## License
+[MIT](https://choosealicense.com/licenses/mit/)

package/assets/kompas-icon.svg ADDED Viewed

@@ -0,0 +1,362 @@
+<svg width="150" height="150" viewBox="0 0 150 150" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2152_12363)">
+<path d="M128.092 21.9079L75.0989 0L22.1055 21.9079L0.098877 75L22.1055 127.993L75.0989 150L128.092 127.993L150.099 75L128.092 21.9079Z" fill="#DDB831"/>
+<g opacity="0.81">
+<mask id="mask0_2152_12363" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="151" height="150">
+<path d="M150.099 0H0.098877V150H150.099V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_2152_12363)">
+<g opacity="0.44">
+<mask id="mask1_2152_12363" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="75" y="75" width="54" height="75">
+<path d="M128.092 75H75.0989V150H128.092V75Z" fill="white"/>
+</mask>
+<g mask="url(#mask1_2152_12363)">
+<mask id="mask2_2152_12363" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="75" y="75" width="54" height="75">
+<path d="M75.0989 75V150L128.092 127.993L75.0989 75Z" fill="white"/>
+</mask>
+<g mask="url(#mask2_2152_12363)">
+<path d="M42.6318 131.25L88.3226 52.0066L160.658 93.75L114.869 172.895L42.6318 131.25Z" fill="url(#paint0_linear_2152_12363)"/>
+</g>
+</g>
+</g>
+</g>
+<mask id="mask3_2152_12363" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="151" height="150">
+<path d="M150.099 0H0.098877V150H150.099V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask3_2152_12363)">
+<g opacity="0.44">
+<mask id="mask4_2152_12363" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="75" y="21" width="76" height="54">
+<path d="M150.099 21.9079H75.0989V74.9013H150.099V21.9079Z" fill="white"/>
+</mask>
+<g mask="url(#mask4_2152_12363)">
+<mask id="mask5_2152_12363" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="75" y="21" width="76" height="54">
+<path d="M75.0989 75L128.092 21.9079L150.099 75H75.0989Z" fill="white"/>
+</mask>
+<g mask="url(#mask5_2152_12363)">
+<path d="M77.3687 87.829L66.02 23.4869L147.829 9.07898L159.178 73.3224L77.3687 87.829Z" fill="url(#paint1_linear_2152_12363)"/>
+</g>
+</g>
+</g>
+</g>
+<mask id="mask6_2152_12363" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="151" height="150">
+<path d="M150.099 0H0.098877V150H150.099V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask6_2152_12363)">
+<g opacity="0.44">
+<mask id="mask7_2152_12363" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="22" y="0" width="54" height="75">
+<path d="M75.0989 0H22.1055V75H75.0989V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask7_2152_12363)">
+<mask id="mask8_2152_12363" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="22" y="0" width="54" height="75">
+<path d="M75.0989 75L22.1055 21.9079L75.0989 0V75Z" fill="white"/>
+</mask>
+<g mask="url(#mask8_2152_12363)">
+<path d="M75.0989 0H22.1055V75H75.0989V0Z" fill="url(#paint2_linear_2152_12363)"/>
+</g>
+</g>
+</g>
+</g>
+<mask id="mask9_2152_12363" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="151" height="150">
+<path d="M150.099 0H0.098877V150H150.099V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask9_2152_12363)">
+<g opacity="0.44">
+<mask id="mask10_2152_12363" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="75" width="76" height="53">
+<path d="M75.0989 75H0.098877V127.993H75.0989V75Z" fill="white"/>
+</mask>
+<g mask="url(#mask10_2152_12363)">
+<mask id="mask11_2152_12363" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="75" width="76" height="53">
+<path d="M75.0989 75H0.098877L22.1055 127.993L75.0989 75Z" fill="white"/>
+</mask>
+<g mask="url(#mask11_2152_12363)">
+<path d="M75.0989 75H0.098877V127.993H75.0989V75Z" fill="url(#paint3_linear_2152_12363)"/>
+</g>
+</g>
+</g>
+</g>
+<mask id="mask12_2152_12363" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="151" height="150">
+<path d="M150.099 0H0.098877V150H150.099V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask12_2152_12363)">
+<g opacity="0.44">
+<mask id="mask13_2152_12363" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="75" y="75" width="54" height="75">
+<path d="M128.092 75H75.0989V150H128.092V75Z" fill="white"/>
+</mask>
+<g mask="url(#mask13_2152_12363)">
+<mask id="mask14_2152_12363" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="75" y="75" width="54" height="75">
+<path d="M75.0989 75V150L128.092 127.993L75.0989 75Z" fill="white"/>
+</mask>
+<g mask="url(#mask14_2152_12363)">
+<path d="M42.6318 131.25L88.3226 52.0066L160.658 93.75L114.869 172.895L42.6318 131.25Z" fill="url(#paint4_linear_2152_12363)"/>
+</g>
+</g>
+</g>
+</g>
+<mask id="mask15_2152_12363" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="151" height="150">
+<path d="M150.099 0H0.098877V150H150.099V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask15_2152_12363)">
+<g opacity="0.44">
+<mask id="mask16_2152_12363" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="75" y="21" width="76" height="54">
+<path d="M150.099 21.9079H75.0989V74.9013H150.099V21.9079Z" fill="white"/>
+</mask>
+<g mask="url(#mask16_2152_12363)">
+<mask id="mask17_2152_12363" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="75" y="21" width="76" height="54">
+<path d="M75.0989 75L128.092 21.9079L150.099 75H75.0989Z" fill="white"/>
+</mask>
+<g mask="url(#mask17_2152_12363)">
+<path d="M77.3687 87.829L66.02 23.4869L147.829 9.07898L159.178 73.3224L77.3687 87.829Z" fill="url(#paint5_linear_2152_12363)"/>
+</g>
+</g>
+</g>
+</g>
+<mask id="mask18_2152_12363" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="151" height="150">
+<path d="M150.099 0H0.098877V150H150.099V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask18_2152_12363)">
+<g opacity="0.44">
+<mask id="mask19_2152_12363" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="22" y="0" width="54" height="75">
+<path d="M75.0989 0H22.1055V75H75.0989V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask19_2152_12363)">
+<mask id="mask20_2152_12363" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="22" y="0" width="54" height="75">
+<path d="M75.0989 75L22.1055 21.9079L75.0989 0V75Z" fill="white"/>
+</mask>
+<g mask="url(#mask20_2152_12363)">
+<path d="M75.0989 0H22.1055V75H75.0989V0Z" fill="url(#paint6_linear_2152_12363)"/>
+</g>
+</g>
+</g>
+</g>
+<mask id="mask21_2152_12363" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="151" height="150">
+<path d="M150.099 0H0.098877V150H150.099V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask21_2152_12363)">
+<g opacity="0.44">
+<mask id="mask22_2152_12363" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="75" width="76" height="53">
+<path d="M75.0989 75H0.098877V127.993H75.0989V75Z" fill="white"/>
+</mask>
+<g mask="url(#mask22_2152_12363)">
+<mask id="mask23_2152_12363" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="75" width="76" height="53">
+<path d="M75.0989 75H0.098877L22.1055 127.993L75.0989 75Z" fill="white"/>
+</mask>
+<g mask="url(#mask23_2152_12363)">
+<path d="M75.0989 75H0.098877V127.993H75.0989V75Z" fill="url(#paint7_linear_2152_12363)"/>
+</g>
+</g>
+</g>
+</g>
+<mask id="mask24_2152_12363" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="151" height="150">
+<path d="M150.099 0H0.098877V150H150.099V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask24_2152_12363)">
+<g opacity="0.44">
+<mask id="mask25_2152_12363" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="75" y="75" width="76" height="53">
+<path d="M150.099 75H75.0989V127.993H150.099V75Z" fill="white"/>
+</mask>
+<g mask="url(#mask25_2152_12363)">
+<mask id="mask26_2152_12363" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="75" y="75" width="76" height="53">
+<path d="M75.0989 75L128.092 127.993L150.099 75H75.0989Z" fill="white"/>
+</mask>
+<g mask="url(#mask26_2152_12363)">
+<path d="M80.1318 146.743L61.8752 78.5526L145.066 56.25L163.323 124.441L80.1318 146.743Z" fill="url(#paint8_linear_2152_12363)"/>
+</g>
+</g>
+</g>
+</g>
+<mask id="mask27_2152_12363" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="151" height="150">
+<path d="M150.099 0H0.098877V150H150.099V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask27_2152_12363)">
+<g opacity="0.44">
+<mask id="mask28_2152_12363" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="75" y="0" width="54" height="75">
+<path d="M128.092 0H75.0989V75H128.092V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask28_2152_12363)">
+<mask id="mask29_2152_12363" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="75" y="0" width="54" height="75">
+<path d="M75.0989 75V0L128.092 21.9079L75.0989 75Z" fill="white"/>
+</mask>
+<g mask="url(#mask29_2152_12363)">
+<path d="M110.724 99.8684L39.8687 50.329L92.566 -24.9671L163.421 24.6711L110.724 99.8684Z" fill="url(#paint9_linear_2152_12363)"/>
+</g>
+</g>
+</g>
+</g>
+<mask id="mask30_2152_12363" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="151" height="150">
+<path d="M150.099 0H0.098877V150H150.099V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask30_2152_12363)">
+<g opacity="0.44">
+<mask id="mask31_2152_12363" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="21" width="76" height="54">
+<path d="M75.0989 21.9079H0.098877V74.9013H75.0989V21.9079Z" fill="white"/>
+</mask>
+<g mask="url(#mask31_2152_12363)">
+<mask id="mask32_2152_12363" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="21" width="76" height="54">
+<path d="M75.0989 75H0.098877L22.1055 21.9079L75.0989 75Z" fill="white"/>
+</mask>
+<g mask="url(#mask32_2152_12363)">
+<path d="M-26.4473 48.4539L37.5988 -15.5921L101.645 48.4539L37.5988 112.5L-26.4473 48.4539Z" fill="url(#paint10_linear_2152_12363)"/>
+</g>
+</g>
+</g>
+</g>
+<mask id="mask33_2152_12363" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="151" height="150">
+<path d="M150.099 0H0.098877V150H150.099V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask33_2152_12363)">
+<g opacity="0.44">
+<mask id="mask34_2152_12363" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="22" y="75" width="54" height="75">
+<path d="M75.0989 75H22.1055V150H75.0989V75Z" fill="white"/>
+</mask>
+<g mask="url(#mask34_2152_12363)">
+<mask id="mask35_2152_12363" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="22" y="75" width="54" height="75">
+<path d="M75.0989 75L22.1055 127.993L75.0989 150V75Z" fill="white"/>
+</mask>
+<g mask="url(#mask35_2152_12363)">
+<path d="M-15.3945 112.5L48.5528 48.4539L112.599 112.5L48.5528 176.447L-15.3945 112.5Z" fill="url(#paint11_linear_2152_12363)"/>
+</g>
+</g>
+</g>
+</g>
+</g>
+<path d="M77.4672 68.3882L105.197 42.829H113.98V40.0658H89.8027V42.829H100.461L66.908 73.6184L87.533 107.664H77.8619V110.23H111.513V107.664H102.237L77.7632 68.3882H77.4672Z" fill="#005993"/>
+<path d="M71.9407 42.829H81.9078V40.0658H50.0328V42.829H58.717L46.0855 107.664H36.217V110.23H68.1907V107.664H59.4078L71.842 42.829H71.9407Z" fill="#005993"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_2152_12363" x1="78.7527" y1="152.075" x2="111.23" y2="95.8225" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.1217" stop-color="#F8E8C8"/>
+<stop offset="0.2454" stop-color="#F3D89E"/>
+<stop offset="0.3716" stop-color="#F0CB7B"/>
+<stop offset="0.4975" stop-color="#ECC15D"/>
+<stop offset="0.6234" stop-color="#EABA43"/>
+<stop offset="0.749" stop-color="#E8B430"/>
+<stop offset="0.8745" stop-color="#E7B125"/>
+<stop offset="1" stop-color="#E7B022"/>
+</linearGradient>
+<linearGradient id="paint1_linear_2152_12363" x1="118.275" y1="80.5737" x2="108.543" y2="25.3807" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.1217" stop-color="#F8E8C8"/>
+<stop offset="0.2454" stop-color="#F3D89E"/>
+<stop offset="0.3716" stop-color="#F0CB7B"/>
+<stop offset="0.4975" stop-color="#ECC15D"/>
+<stop offset="0.6234" stop-color="#EABA43"/>
+<stop offset="0.749" stop-color="#E8B430"/>
+<stop offset="0.8745" stop-color="#E7B125"/>
+<stop offset="1" stop-color="#E7B022"/>
+</linearGradient>
+<linearGradient id="paint2_linear_2152_12363" x1="22.0688" y1="37.4651" x2="75.1043" y2="37.4651" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.1217" stop-color="#F8E8C8"/>
+<stop offset="0.2454" stop-color="#F3D89E"/>
+<stop offset="0.3716" stop-color="#F0CB7B"/>
+<stop offset="0.4975" stop-color="#ECC15D"/>
+<stop offset="0.6234" stop-color="#EABA43"/>
+<stop offset="0.749" stop-color="#E8B430"/>
+<stop offset="0.8745" stop-color="#E7B125"/>
+<stop offset="1" stop-color="#E7B022"/>
+</linearGradient>
+<linearGradient id="paint3_linear_2152_12363" x1="0.100966" y1="101.488" x2="75.1044" y2="101.488" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.1217" stop-color="#F8E8C8"/>
+<stop offset="0.2454" stop-color="#F3D89E"/>
+<stop offset="0.3716" stop-color="#F0CB7B"/>
+<stop offset="0.4975" stop-color="#ECC15D"/>
+<stop offset="0.6234" stop-color="#EABA43"/>
+<stop offset="0.749" stop-color="#E8B430"/>
+<stop offset="0.8745" stop-color="#E7B125"/>
+<stop offset="1" stop-color="#E7B022"/>
+</linearGradient>
+<linearGradient id="paint4_linear_2152_12363" x1="78.7527" y1="152.075" x2="111.23" y2="95.8225" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.1217" stop-color="#F8E8C8"/>
+<stop offset="0.2454" stop-color="#F3D89E"/>
+<stop offset="0.3716" stop-color="#F0CB7B"/>
+<stop offset="0.4975" stop-color="#ECC15D"/>
+<stop offset="0.6234" stop-color="#EABA43"/>
+<stop offset="0.749" stop-color="#E8B430"/>
+<stop offset="0.8745" stop-color="#E7B125"/>
+<stop offset="1" stop-color="#E7B022"/>
+</linearGradient>
+<linearGradient id="paint5_linear_2152_12363" x1="118.275" y1="80.5737" x2="108.543" y2="25.3807" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.1217" stop-color="#F8E8C8"/>
+<stop offset="0.2454" stop-color="#F3D89E"/>
+<stop offset="0.3716" stop-color="#F0CB7B"/>
+<stop offset="0.4975" stop-color="#ECC15D"/>
+<stop offset="0.6234" stop-color="#EABA43"/>
+<stop offset="0.749" stop-color="#E8B430"/>
+<stop offset="0.8745" stop-color="#E7B125"/>
+<stop offset="1" stop-color="#E7B022"/>
+</linearGradient>
+<linearGradient id="paint6_linear_2152_12363" x1="22.0688" y1="37.4651" x2="75.1043" y2="37.4651" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.1217" stop-color="#F8E8C8"/>
+<stop offset="0.2454" stop-color="#F3D89E"/>
+<stop offset="0.3716" stop-color="#F0CB7B"/>
+<stop offset="0.4975" stop-color="#ECC15D"/>
+<stop offset="0.6234" stop-color="#EABA43"/>
+<stop offset="0.749" stop-color="#E8B430"/>
+<stop offset="0.8745" stop-color="#E7B125"/>
+<stop offset="1" stop-color="#E7B022"/>
+</linearGradient>
+<linearGradient id="paint7_linear_2152_12363" x1="0.100966" y1="101.488" x2="75.1044" y2="101.488" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.1217" stop-color="#F8E8C8"/>
+<stop offset="0.2454" stop-color="#F3D89E"/>
+<stop offset="0.3716" stop-color="#F0CB7B"/>
+<stop offset="0.4975" stop-color="#ECC15D"/>
+<stop offset="0.6234" stop-color="#EABA43"/>
+<stop offset="0.749" stop-color="#E8B430"/>
+<stop offset="0.8745" stop-color="#E7B125"/>
+<stop offset="1" stop-color="#E7B022"/>
+</linearGradient>
+<linearGradient id="paint8_linear_2152_12363" x1="120.28" y1="130.107" x2="103.468" y2="67.365" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.1217" stop-color="#F8E8C8"/>
+<stop offset="0.2454" stop-color="#F3D89E"/>
+<stop offset="0.3716" stop-color="#F0CB7B"/>
+<stop offset="0.4975" stop-color="#ECC15D"/>
+<stop offset="0.6234" stop-color="#EABA43"/>
+<stop offset="0.749" stop-color="#E8B430"/>
+<stop offset="0.8745" stop-color="#E7B125"/>
+<stop offset="1" stop-color="#E7B022"/>
+</linearGradient>
+<linearGradient id="paint9_linear_2152_12363" x1="112.122" y1="44.8077" x2="66.2127" y2="12.6619" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.1217" stop-color="#F8E8C8"/>
+<stop offset="0.2454" stop-color="#F3D89E"/>
+<stop offset="0.3716" stop-color="#F0CB7B"/>
+<stop offset="0.4975" stop-color="#ECC15D"/>
+<stop offset="0.6234" stop-color="#EABA43"/>
+<stop offset="0.749" stop-color="#E8B430"/>
+<stop offset="0.8745" stop-color="#E7B125"/>
+<stop offset="1" stop-color="#E7B022"/>
+</linearGradient>
+<linearGradient id="paint10_linear_2152_12363" x1="5.58536" y1="80.4502" x2="43.087" y2="42.9485" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.1217" stop-color="#F8E8C8"/>
+<stop offset="0.2454" stop-color="#F3D89E"/>
+<stop offset="0.3716" stop-color="#F0CB7B"/>
+<stop offset="0.4975" stop-color="#ECC15D"/>
+<stop offset="0.6234" stop-color="#EABA43"/>
+<stop offset="0.749" stop-color="#E8B430"/>
+<stop offset="0.8745" stop-color="#E7B125"/>
+<stop offset="1" stop-color="#E7B022"/>
+</linearGradient>
+<linearGradient id="paint11_linear_2152_12363" x1="27.5671" y1="133.493" x2="80.6026" y2="80.458" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.1217" stop-color="#F8E8C8"/>
+<stop offset="0.2454" stop-color="#F3D89E"/>
+<stop offset="0.3716" stop-color="#F0CB7B"/>
+<stop offset="0.4975" stop-color="#ECC15D"/>
+<stop offset="0.6234" stop-color="#EABA43"/>
+<stop offset="0.749" stop-color="#E8B430"/>
+<stop offset="0.8745" stop-color="#E7B125"/>
+<stop offset="1" stop-color="#E7B022"/>
+</linearGradient>
+<clipPath id="clip0_2152_12363">
+<rect width="150" height="150" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/demo/index.html CHANGED Viewed

@@ -3,6 +3,8 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Kompas.id Web Components</title>
+  <link rel="icon" type="image/x-icon" href="/assets/kompas-icon.svg">
   <style>
     body {
       background: #fafafa;

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

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

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

@@ -9,5 +9,5 @@ export declare class KompasFooter extends LitElement {
     private initializeFooter;
     fetchFooter(): Promise<void>;
     getYear(): number;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }

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

@@ -168,7 +168,7 @@ let KompasFooter = class KompasFooter extends LitElement {
                         class="font-bold text-sm w-full cursor-pointer"
                         href="${contact.action}"
                       >
-                        <span class="text-gray-500"> ${contact.text} </span>
+                        <span class="text-grey-50"> ${contact.text} </span>
                       </a>
                     </div>
                   </div>`)}

package/dist/src/components/kompas-footer/KompasFooter.js.map CHANGED Viewed

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

package/dist/src/components/kompas-metered-paywall/KompasMeteredPaywall.d.ts CHANGED Viewed

@@ -46,5 +46,5 @@ export declare class KompasMeteredPaywall extends LitElement {
     private redirectToBerlangganan;
     private dataLayeronLanggananButton;
     private dataLayeronMeteredPaywall;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }