Merge pull request #8 from kit-data-manager/fix-production-mode

Fix production mode

Author: Pfeil

package.json

@@ -3,7 +3,7 @@
   "description": "This component contains an option to select an input file form which metadata needs to be extracted, an option to search from available mapping schemas whose name will be self explainatory .",
   "author": "Ajay",
   "license": "Apache License 2.0",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "private": false,
   "keywords": [
     "metadata",
@@ -20,6 +20,16 @@
   },
   "type": "module",
   "main": "./dist/com_mapping-service-input.umd.js",
+  "module": "./dist/com_mapping-service-input.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/com_mapping-service-input.es.js",
+      "require": "./dist/com_mapping-service-input.umd.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "dev": "vite",
     "format": "prettier --write .",
@@ -28,7 +38,6 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@types/typeahead": "^0.11.32",
     "@typescript-eslint/eslint-plugin": "^5.52.0",
     "eslint": "^8.34.0",
     "eslint-config-prettier": "^8.6.0",
@@ -37,8 +46,8 @@
     "eslint-plugin-n": "^15.6.1",
     "eslint-plugin-promise": "^6.1.1",
     "prettier": "2.8.4",
-    "typescript": "^4.9.5",
-    "vite": "^4.1.1"
+    "typescript": "^5.0.2",
+    "vite": "^4.3.5"
   },
   "dependencies": {
     "filepond": "^4.30.4",

src/main.ts

@@ -3,20 +3,18 @@ import * as FilePondLib from "filepond";
 import { FilePond, FilePondOptions } from "filepond";
 import filepondCSS from "filepond/dist/filepond.min.css?inline";
 import typeahead from "typeahead-standalone";
-import { Dictionary, typeaheadResult } from "typeahead-standalone/dist/types";
 import typeaheadCSS from "typeahead-standalone/dist/basic.css?inline";
+import customCSS from './style.css?inline';
 
-const ATTRIBUTES: string[] = ["base-url"
-];
-export class MappingInputProvider extends HTMLElement {
+const ATTRIBUTES: string[] = ["base-url"];
+class MappingInputProvider extends HTMLElement {
   shadowRoot: ShadowRoot;
   private testingFileChooser: FilePond | null = null;
-  private mappingchooser: typeaheadResult<Dictionary> | null = null;
   // --- Attribute accessible from the HTML tag:
   baseUrl: URL = new URL("http://localhost:8090/");
-
   // ---
 
+
   // --- Helper methods
   addCssContent(css: string): void {
     let styleElem: HTMLStyleElement = document.createElement("style");
@@ -41,13 +39,12 @@ export class MappingInputProvider extends HTMLElement {
     this.shadowRoot = this.attachShadow({ mode: "open" });
     this.addCssContent(filepondCSS);
     this.addCssContent(typeaheadCSS);
+    this.addCssContent(customCSS);
 
-    {
-      // Apply HTML Template to shadow DOM
-      const template = document.createElement("template");
-      template.innerHTML = templateContent;
-      this.shadowRoot.append(template.content.cloneNode(true));
-    }
+    // Apply HTML Template to shadow DOM
+    const template = document.createElement("template");
+    template.innerHTML = templateContent;
+    this.shadowRoot.append(template.content.cloneNode(true));
   }
 
   /**
@@ -93,7 +90,7 @@ export class MappingInputProvider extends HTMLElement {
       this.shadowRoot.getElementById("mappingchooser")
     );
     if (inputElement != null) {
-      this.mappingchooser = typeahead({
+      typeahead({
         input: inputElement,
         minLength: -1,
         highlight: true,
@@ -148,9 +145,8 @@ export class MappingInputProvider extends HTMLElement {
       this.baseUrl = newValue;
       this.connectedCallback();
     }
-    this.testingFileChooser;
-    this.mappingchooser;
   }
+
   /**
    * Optional boolean parameter download used in executeMapping method, user can choose to download the result.
    * It will help user chose between true, false or no parameter
@@ -186,6 +182,7 @@ export class MappingInputProvider extends HTMLElement {
       }
     }
   }
+
   /**
    * In case if download is required triggerDownload can be used
    */
@@ -194,9 +191,9 @@ export class MappingInputProvider extends HTMLElement {
     element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(JSON.stringify(response)));
     element.setAttribute('download', "result.json");
     element.style.display = 'none';
-    this.shadowRoot.appendChild;
+    this.shadowRoot.appendChild(element);
     element.click();
-    this.shadowRoot.removeChild;
+    this.shadowRoot.removeChild(element);
   }
 }
 

src/template.html

@@ -1,4 +1,3 @@
-<link rel="stylesheet" href="src/style.css">
 <div class="mapping-container">
 	<h2 class="mapping-title">Choose a Mapping</h2>
 	<div class="mapping-input-container">