Feature/leytech 20220714

README.md

@@ -8,7 +8,7 @@ npm install getaddress-find
 ```
 ### Or CDN
 ```
-<script src="https://cdn.getaddress.io/scripts/getaddress-find-2.0.0.min.js"></script>
+<script src="https://cdn.getaddress.io/scripts/getaddress-find-2.0.3.min.js"></script>
 ```
 
 ## Usage
@@ -73,13 +73,16 @@ getAddress.find(
               id:'getaddress_input',  /* The id of the textbox' */
               name:'getaddress_input',  /* The name of the textbox' */
               class:'',  /* The class of the textbox' */
-              label:'Enter your Postcode'  /* The label of the textbox' */
+              label:'Enter your Postcode',  /* The label of the textbox (deprecated, use placeholder)' */
+              placeholder:'Enter your Postcode',  /* The placeholder of the textbox' */
+              value:''  /* The initial value of the textbox' */
           },
           button:{
               id:'getaddress_button',  /* The id of the botton' */
               class:'',  /* The class of the botton' */
               label:'Search',  /* The label of the botton' */
-              disabled_message:'disabled message'  /* The disabled message of the botton' */
+              disabled_message:'disabled message',  /* The disabled message of the botton' */
+              clear_on_submit:true  /* Clear output fields on submit ' */
           },
           dropdown:{
               id:'getaddress_dropdown',  /* The id of the dropdown' */

package.json

@@ -1,6 +1,6 @@
 {
   "name": "getaddress-find",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "GetAddress.io - Find by postcode plug-in",
   "main": "dist/getaddress-find.mjs",
   "type": "module",

src/Find.ts

@@ -53,6 +53,10 @@ export default class Find{
                 let addressResult = await this.getAddress.get(id);
                 if(addressResult.isSuccess){
                     let success = addressResult.toSuccess();
+                    if (!this.button.config.clear_on_submit)
+                    {
+                        this.clearAll();
+                    }
                     this.outputFields.bind(success.address);
 
                     AddressSelectedEvent.dispatch(this.context,success.address);
@@ -117,7 +121,10 @@ export default class Find{
             if(query && query !== this.input.config.label)
             {
                 button.disable();
-                this.clearAll();
+                if(this.button.config.clear_on_submit)
+                {
+                    this.clearAll();
+                }
                 await this.lookup(query);
             }
             return false;

src/Input.ts

@@ -14,7 +14,8 @@ export default class Input
         let input = document.createElement("input");
         input.id = this.config.id;
         input.type = "text";
-        input.value = this.config.label;
+        input.placeholder = this.config.label !== '' ? this.config.label : this.config.placeholder;
+        input.value = this.config.value;
 
         if(this.config.class)
         {
@@ -24,28 +25,8 @@ export default class Input
         input.name = this.config.name;
         input.autocomplete = "off";
 
-        let styleAttr:Attr = this.getDefaultStyle();
-        input.attributes.setNamedItem(styleAttr);
-
         input.addEventListener("submit", ()=>{return false});
 
-        input.addEventListener("focus", ()=>
-        {
-            input.removeAttribute('style');
-            if(input.value === this.config.label){
-                input.value = '';
-            }
-        });
-
-        input.addEventListener("blur", ()=>
-        {
-            if(!input.value){
-                input.value = this.config.label;
-                let styleAttr:Attr = this.getDefaultStyle();
-                input.attributes.setNamedItem(styleAttr);
-            }
-        });
-
         let container = document.getElementById(this.config.container_id);
 
         if(container){
@@ -55,13 +36,6 @@ export default class Input
         return input;
     }
 
-    private getDefaultStyle = ()=>
-    {
-        let styleAttr:Attr = document.createAttribute("style");
-        styleAttr.value = this.config.muted_style;
-        return styleAttr;
-    }
-
     onKeyPress = (action:()=>void) =>
     {
         this.inputElement.addEventListener("keypress", (e) =>

src/Types.ts

@@ -18,8 +18,9 @@ export class Config{
 
 export class InputConfig extends Config
 {
-    label:string = "Search..";
-    muted_style:string = "color:#CBCBCB;";
+    label:string = "";
+    placeholder:string = "Search..";
+    value:string = "";
     class = "";
     id = "getaddress_input" + this.getIdSuffix();
     name = "getaddress_input" + this.getIdSuffix();
@@ -32,7 +33,7 @@ export class ButtonConfig extends Config
     id = "getaddress_button" + this.getIdSuffix();
     class = "";
     disabled_message= "Fetching Addresses...";
-
+    clear_on_submit:boolean = true;
 }
 
 export class DropdownConfig extends Config