Merge pull request #1 from Encanto/webcomponent

Webcomponent

README.md

@@ -1,5 +1,8 @@
 # NgxFileSelect
 
+This is a local file browse web component that you can integrate into your website.  
+<img src="./doc/FileBrowseComponent.png" width="600">
+
 This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.1.1.
 
 ## Development server
@@ -25,3 +28,19 @@ Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protrac
 ## Further help
 
 To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+
+
+## Custom Components
+
+The file-browse custom component is exported from this library.  The goal of this component is to select files from your local filesystem, and return the result to anyone who is listening.  Anywhere in your code, you can add the following text to listen:
+
+```javascript
+      window.addEventListener('fselect', (event) => { 
+        alert('File selected: ' + JSON.stringify(event.detail))
+      })
+```
+And add the following tag to display the listener:
+
+```html
+      <file-browse></file-browse>
+```

build-component.js

@@ -0,0 +1,13 @@
+const fs = require('fs-extra');
+const concat = require('concat');
+
+build = async () =>{
+    const files = [
+        './dist/ngx-file-select/runtime.js',
+        './dist/ngx-file-select/polyfills.js',
+        './dist/ngx-file-select/main.js'
+      ];
+
+      await concat(files, 'dist/ngx-file-select.js');
+}
+build();

package.json

@@ -4,7 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
-    "build": "ng build",
+    "build": "ng build --prod --output-hashing none && node build-component.js",
     "test": "ng test",
     "test-headless": "ng test --watch=false --browsers=ChromeHeadless",
     "lint": "ng lint",
@@ -31,10 +31,12 @@
     "@angular-devkit/build-angular": "~0.1001.1",
     "@angular/cli": "~10.1.1",
     "@angular/compiler-cli": "~10.1.1",
-    "@types/node": "^12.11.1",
     "@types/jasmine": "~3.5.0",
     "@types/jasminewd2": "~2.0.3",
+    "@types/node": "^12.11.1",
     "codelyzer": "^6.0.0",
+    "concat": "^1.0.3",
+    "fs-extra": "^10.0.0",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
     "karma": "~5.0.0",

src/app/app.module.ts

@@ -1,20 +1,29 @@
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import { Injector, NgModule } from '@angular/core';
+import { createCustomElement } from '@angular/elements';
 
-import { AppComponent } from './app.component';
 import { HttpClientModule } from '@angular/common/http';
 import { FileBrowseComponent } from './file-browse/file-browse.component';
 
 @NgModule({
-  declarations: [
-    AppComponent,
-    FileBrowseComponent
-  ],
   imports: [
     BrowserModule,
-    HttpClientModule
+    HttpClientModule,
   ],
   providers: [],
-  bootstrap: [AppComponent]
+  declarations: [FileBrowseComponent]
 })
-export class AppModule { }
+export class AppModule {
+
+  constructor(private injector: Injector) {
+
+  }
+
+  ngDoBootstrap(){
+    const fbComp = createCustomElement(FileBrowseComponent, { injector: this.injector });
+    if (!customElements.get('file-browse')) {
+        customElements.define('file-browse', fbComp);  
+    }
+  }
+
+ }

src/app/file-browse/file-browse.component.ts

@@ -1,6 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, Output, Injector, OnInit } from '@angular/core';
+import { createCustomElement } from '@angular/elements';
 import { FileServiceService } from '../services/file-service.service';
 
+
 @Component({
   selector: 'local-file-browse',
   templateUrl: './file-browse.component.html',
@@ -12,7 +14,14 @@ export class FileBrowseComponent implements OnInit {
   public selectedFile;
   private rootPath;
 
-  constructor(private fileService: FileServiceService) {
+  constructor(injector: Injector, private fileService: FileServiceService) {
+    // Convert `FileBrowseComponent` to a custom element.
+    const FileBrowseElement = createCustomElement(FileBrowseComponent, {injector});
+
+    if (!customElements.get('file-browse')) {
+      // Register the custom element with the browser.
+      customElements.define('file-browse', FileBrowseElement);
+    }
   }
 
   ngOnInit(): void {
@@ -40,12 +49,14 @@ export class FileBrowseComponent implements OnInit {
     // Compute the full path.
     if (this.selectedFile) {
       console.log('file selected: ' + this.rootPath + this.getCurrentPath() + '/' + this.selectedFile.name);
-      let event = new CustomEvent("file-select", {
+      // Dispatch using window custom event so we can listen from anywhere.  
+      let event = new CustomEvent("fselect", {
         detail: {
           path: this.rootPath + this.getCurrentPath() + '/' + this.selectedFile.name
         }
       });
       window.dispatchEvent(event);  
+
     }
   }
 

src/index.html

@@ -9,6 +9,6 @@
   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
-  <app-root></app-root>
+  <file-browse></file-browse>
 </body>
 </html>

src/main.ts

@@ -8,5 +8,6 @@ if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
+platformBrowserDynamic()
+  .bootstrapModule(AppModule, { })
   .catch(err => console.error(err));