Simple list of string property control

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 => {

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',

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>
 

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);