From a89903ceeac1af306efa3ece10ddeff5f6d616bf Mon Sep 17 00:00:00 2001
From: BoykoAlex <aboyko@pivotal.io>
Date: Thu, 31 Aug 2017 14:06:12 -0400
Subject: [PATCH] Simple list of string property control

---
 src/demo/app/editor.ts                     |  4 ++++
 src/demo/app/metamodel.ts                  |  5 ++++-
 src/lib/src/palette/palette.component.html |  2 +-
 src/lib/src/shared/flo.properties.ts       | 16 ++++++++++++++++
 4 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/demo/app/editor.ts b/src/demo/app/editor.ts
index 2763622..726ffa8 100644
--- a/src/demo/app/editor.ts
+++ b/src/demo/app/editor.ts
@@ -566,6 +566,10 @@ class SamplePropertiesGroupModel extends Properties.PropertiesGroupModel {
       case 'number':
         inputType = Properties.InputType.EMAIL;
         break;
+      case 'list':
+      case 'list[number]':
+      case 'list[boolean]':
+        return new Properties.GenericListControlModel(property);
       case 'enum':
         if (Array.isArray(property.metadata.options)) {
           return new Properties.SelectControlModel(property, Properties.InputType.SELECT, (<Array<string>> property.metadata.options).map(o => {
diff --git a/src/demo/app/metamodel.ts b/src/demo/app/metamodel.ts
index a678d6b..1fc8c37 100644
--- a/src/demo/app/metamodel.ts
+++ b/src/demo/app/metamodel.ts
@@ -15,7 +15,10 @@ const metamodelData: Array<RawMetadata> = [{
     {id: 'heart-beat', name: 'heart-beat', description: 'Heart beat on/off', type: 'boolean', defaultValue: false},
     {id: 'interval', name: 'interval', description: 'Time period being consecutive heart beat messages', type: 'number', defaultValue: 20},
     {id: 'url', name: 'url', description: 'Service URL', type: 'url'},
-    {id: 'password', name: 'password', description: 'Password to login to service', type: 'password'}
+    {id: 'password', name: 'password', description: 'Password to login to service', type: 'password'},
+    {id: 'messages', name: 'messages', description: 'List of messages', type: 'list'},
+    {id: 'counts', name: 'counts', description: 'List of counts', type: 'list[number]'},
+    {id: 'successes', name: 'successes', description: 'List of successes', type: 'list[boolean]'},
   ],
 }, {
   name: 'filewatch', group: 'source', description: 'Produce messages from the content of files created in a directory',
diff --git a/src/lib/src/palette/palette.component.html b/src/lib/src/palette/palette.component.html
index c4de25b..81c18c9 100644
--- a/src/lib/src/palette/palette.component.html
+++ b/src/lib/src/palette/palette.component.html
@@ -1,7 +1,7 @@
 <div id="palette-filter" class="palette-filter">
   <input type="text" id="palette-filter-textfield" class="palette-filter-textfield" [(ngModel)]="filterText"/>
 </div>
-<div id="palette-paper-container" style="height:calc(100% - 46px); width:100%; overflow:auto;">
+<div id="palette-paper-container" style="height:calc(100% - 40px); width:100%; overflow:auto;">
   <div id="palette-paper" class="palette-paper" style="overflow:hidden;"></div>
 </div>
 
diff --git a/src/lib/src/shared/flo.properties.ts b/src/lib/src/shared/flo.properties.ts
index 11ad1ff..2665e58 100644
--- a/src/lib/src/shared/flo.properties.ts
+++ b/src/lib/src/shared/flo.properties.ts
@@ -88,6 +88,22 @@ export namespace Properties {
 
   }
 
+  export class GenericListControlModel extends GenericControlModel<string> {
+
+    constructor(property : Property, validation? : Validation) {
+      super(property, InputType.TEXT, validation);
+    }
+
+    get value() : string {
+      return this.property.value ? this.property.value.join(', ') : '';
+    }
+
+    set value(value : string) {
+      this.property.value = value && value.trim() ? value.split(/\s*,\s*/) : undefined;
+    }
+
+  }
+
   export class SelectControlModel extends GenericControlModel<any> {
     constructor(_property : Property, type : InputType, public options : Array<SelectOption>) {
       super(_property, type);