fix: add dist js files and update readme

Signed-off-by: James Chien <james@numbersprotocol.io>

.gitignore

@@ -4,12 +4,4 @@
 /test/
 custom-elements.json
 .npmrc
-.DS_Store
-/dist/
-# top level source
-capture-eye.js
-capture-eye.js.map
-capture-eye.d.ts
-capture-eye.d.ts.map
-# only generated for size check
-capture-eye.bundled.js
+.DS_Store

README.md

@@ -37,9 +37,9 @@ Visit the [interactive playground](https://playcode.io/capture_eye_demo) for the
 
 | Attribute Name  | Required | Description                                                                                                                       | Example                                                       |
 | --------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
-| `nid`           | true     | The unique [Nid](https://docs.numbersprotocol.io/introduction/numbers-protocol/defining-web3-assets/numbers-id-nid) of the asset. | `bafybeigppahabe4x6r52jyvh2k7u7udpxm2vciqcamzzuung7rhfe6pkbe` |
-| `prefetch`      | false    | If set to `true`, the component will start fetching asset data when added to the DOM. Default is `false`.                         | `false`                                                       |
-| `capture_token` | false    | The authentication token required to access private assets.                                                                       | `false`                                                       |
+| `nid`           | true     | The unique [Nid](https://docs.numbersprotocol.io/introduction/numbers-protocol/defining-web3-assets/numbers-id-nid) of the asset. | `<capture-eye nid="bafybeigppahabe4x6r52jyvh2k7u7udpxm2vciqcamzzuung7rhfe6pkbe"></capture-eye>` |
+| `prefetch`      | false    | If it is present, the component will start fetching asset data when added to the DOM. Only use when you have only 1 Capture Eye component on the webpage because prefetching multiple Capture Eyes is not supported.                          | `<capture-eye nid="..." prefetch></capture-eye>`                                               |
+
 
 ## Integration with Frontend Frameworks
 
@@ -190,3 +190,44 @@ import '@numbersprotocol/capture-eye';
   </main>
 </template>
 ```
+
+## Style customization
+
+Capture Eye utilizes shadow DOM for encapsulation as a web component. However, if needed, the encapsulated styles could still be modified for any specific customization need. The section uses vanilla HTML/JavaScript to demonstrate how it is done. For different frontend frameworks it could also be done easily following the same logic.
+
+To customize the Capture Eye button, access and modify the shadow DOM of Capture Eye after it is loaded.
+
+Example of changing the icon and width/height:
+
+```html
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    const captureEyeElements = document.querySelectorAll('capture-eye');
+
+    captureEyeElements.forEach((element) => {
+      const img = element.shadowRoot.querySelector(
+        '.capture-eye-button img'
+      );
+      img.src =
+        'https://ipfs-pin.numbersprotocol.io/ipfs/bafkreifqdodt35fu3ok62wurery47vgtdxw6ahcqdtsbi77gwiuzyvcsu4';
+      img.style.width = '30px';
+      img.style.height = '30px';
+    });
+  });
+</script>
+```
+
+In contrast to Capture Eye button, the Capture Eye modal is not a child element of it, instead it is injected to document root to act as a singleton and ensure it is not affected by parent element's inheritable styles, such as CSS transform.
+
+Example of changing the modal background color:
+
+```html
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    const captureEyeModal = document.querySelector('capture-eye-modal');
+    const modalContentDiv =
+      captureEyeModal.shadowRoot.querySelector('.modal-container');
+    modalContentDiv.style.background = 'midnightblue';
+  });
+</script>
+```

dist/capture-eye.d.ts

@@ -0,0 +1,27 @@
+import { LitElement } from 'lit';
+export declare class CaptureEye extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * If yes, start fetching asset data when the Capture Eye is loaded.
+     * Otherwise the data will only be fetched when the panel is opened.
+     */
+    prefetch: boolean;
+    /**
+     * Nid of the asset.
+     */
+    nid: string;
+    get assetUrl(): string;
+    get assetProfileUrl(): string;
+    constructor();
+    buttonTemplate(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): Promise<void>;
+    handleMouseOver(): void;
+    private showModal;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'capture-eye': CaptureEye;
+    }
+}
+//# sourceMappingURL=capture-eye.d.ts.map

dist/constant.d.ts

@@ -0,0 +1,22 @@
+interface Url {
+    dataApi: string;
+    ipfsGateway: string;
+    explorer: string;
+    profile: string;
+    collect: string;
+    captureEyeIcon: string;
+    closeIcon: string;
+    contentCopyIcon: string;
+    helpIcon: string;
+    previewIcon: string;
+}
+interface Text {
+    not_available: string;
+}
+interface ConstantType {
+    url: Url;
+    text: Text;
+}
+export declare const Constant: ConstantType;
+export {};
+//# sourceMappingURL=constant.d.ts.map

dist/interfaces/asset.d.ts

@@ -0,0 +1,17 @@
+export interface Asset {
+    nid: string;
+    assetCreator: string;
+    creatorWallet: string;
+    assetTimestampCreated: string;
+    digitalSourceType: string;
+    geolocation: string;
+    mimetype: string;
+    initialCommitter: string;
+    generatedBy: string;
+    initialMinter: string;
+    license: string;
+    miningPreference: string;
+    integrityProof: string;
+    inStock: number;
+}
+//# sourceMappingURL=asset.d.ts.map

dist/interfaces/tooltip_state.d.ts

@@ -0,0 +1,6 @@
+export interface TooltipState {
+    show: boolean;
+    top: number;
+    left: number;
+}
+//# sourceMappingURL=tooltip_state.d.ts.map

dist/interfaces/tooltip_states.d.ts

@@ -0,0 +1,5 @@
+import { TooltipState } from './tooltip_state';
+export interface TooltipStates {
+    [key: string]: TooltipState;
+}
+//# sourceMappingURL=tooltip_states.d.ts.map