dromo-uploader-angular 0.1.4 → 0.1.5

package/README.md

@@ -6,38 +6,43 @@ Check out our [developer documentation here](https://developer.dromo.io/)
 
 Install the packge using `npm install dromo-uploader-angular`
 
-Import the component and module and add to inputs and declarations
+Import module and add to imports
 
 ```TypeScript
-import { DromoImporterComponent } from './dromo-importer/dromo-importer.component';
-import { DromoUploaderComponent } from './dromo-uploader.component';
+// app.module.ts
+
+import { DromoUploaderModule } from 'dromo-uploader-angular';
 
 @NgModule({
-  declarations: [AppComponent, DromoImporterComponent],
+  declarations: [AppComponent],
   imports: [BrowserModule, DromoUploaderModule],
   providers: [],
   bootstrap: [AppComponent],
 })
+
 export class AppModule {}
 ```
 
-Implement a component.
+The DromoUploaderModule provides the Dromo Uploader component, with the selector `lib-dromo-uploader`.
+
+You may create a wrapper component which provides the Dromo Uploader component with
+your configuration.
 
 ```TypeScript
+// my-uploader.component.ts
+
+import { Component } from '@angular/core';
 import {
   DromoMethods,
   IColumnHook,
-  IColumnHookInput,
   IRowDeleteHook,
-  IDeveloperField,
-  IDeveloperSettings,
   IRowHook,
-  IUser,
   IStepHook,
   IUploadStepData,
 } from 'dromo-uploader-angular';
+
 @Component({
-  selector: 'app-dromo-importer',
+  selector: 'my-uploader',
   template: `
     <lib-dromo-uploader
       [licenseKey]="licenseKey"
@@ -53,24 +58,27 @@ import {
       class="dromo-importer"
       [onCancel]="onCancel"
       [onResults]="onResults"
-      >Import with Dromo!</lib-dromo-uploader
-    >
-  `,
-  styleUrls: ['./dromo-importer.component.css'],
+      >
+      Import with Dromo!
+    </lib-dromo-uploader>
+  `
 })
-export class DromoImporterComponent implements DromoMethods {
-  constructor() {}
 
+export class MyUploader implements DromoMethods {
   licenseKey = 'YOUR_LICENSE_KEY_HERE';
-  user: IUser = { id: 'angular tester' };
-  fields: IDeveloperField[] = [
+
+  user = { id: 'angular tester' };
+
+  fields = [
     { label: 'first name', key: 'first_name' },
     { label: 'email address', key: 'email' },
   ];
-  settings: IDeveloperSettings = {
+
+  settings = {
     importIdentifier: 'angular imports',
     developmentMode: true,
   };
+
   rowHooks: IRowHook[] = [
     (record) => {
       const newRecord = { ...record };
@@ -79,9 +87,11 @@ export class DromoImporterComponent implements DromoMethods {
       return newRecord;
     },
   ];
+
   rowDeleteHooks: IRowDeleteHook[] = [
     (record) => alert(`deleted ${record.index}`),
   ];
+
   columnHooks: IColumnHook[] = [
     {
       fieldName: 'email',
@@ -109,6 +119,7 @@ export class DromoImporterComponent implements DromoMethods {
   ];
 
   onCancel = () => alert('Something I said?');
+
   onResults = (data: any[], metaData: any) => {
     alert(`Submitted ${data.length} records`);
     console.table(data);
@@ -116,6 +127,7 @@ export class DromoImporterComponent implements DromoMethods {
   };
 
   class = 'dromo-button';
+
   styles = {
     'background-color': 'rgb(0, 123, 255)',
     border: '1px solid rgb(0, 123, 255)',
@@ -128,7 +140,5 @@ export class DromoImporterComponent implements DromoMethods {
     'font-size': '16px',
     'box-shadow': '5px 5px 5px 0px #7F7F7F',
   };
-
-  ngOnInit(): void {}
 }
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dromo-uploader-angular",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "peerDependencies": {
     "@angular/common": "^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0",
     "@angular/core": "^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0"