/**
 * @license
 * Copyright 2017 The FOAM Authors. All Rights Reserved.
 * http://www.apache.org/licenses/LICENSE-2.0
 */

foam.CLASS({
  package: 'foam.u2.view',
  name: 'StringArrayView',
  extends: 'foam.u2.tag.Input',

  properties: [
    {
      name: 'data',
      preSet: function(o, d) { return d; }
    },
    {
      class: 'Function',
      name: 'valueToText',
      value: function(value) {
        return value.map(function(m) {
          return m.replace("\\", "\\\\").replace(",", "\\,");
        }).join(',');
      }
    },
    {
      class: 'Function',
      name: 'textToValue',
      value: function(text) {
        if ( ! text ) return [];

        var value  = [];
        var escape = false;
        var start  = 0;
        for ( var i = 0 ; i < text.length ; i++ ) {
          if ( escape ) {
            escape = false;
            continue;
          }

          if ( i == text.length - 1 ) {
            value.push(text.substring(start, i+1).replace(/\\(.)/, "$0"));
          } else if ( text[i] == ',' || i == text.length - 1 ) {
            value.push(text.substring(start, i).replace(/\\(.)/, "$0"));
            start = i + 1;
          } else if ( text[i] == '\\' ) {
            escape = true;
          }
        }

        return value;
      }
    }
  ],

  methods: [
    function link() {
      this.attrSlot().relateFrom(this.data$, this.textToValue, this.valueToText);
    }
  ]
});

@@ -208,21 +208,25 @@
 .u2.
-tag.Input
+view.ArrayView
 ',%0A
-%0A
   pr
@@ -247,109 +247,8 @@
   %7B%0A
-      name: 'data',%0A      preSet: function(o, d) %7B return d; %7D%0A    %7D,%0A    %7B%0A      class: 'Function',%0A
     
@@ -261,22 +261,20 @@
 : 'value
-ToText
+View
 ',%0A     
@@ -285,1034 +285,38 @@
 ue: 
-function(value) %7B%0A        return value.map(function(m) %7B%0A          return m.replace(%22%5C%5C%22, %22%5C%5C%5C%5C%22).replace(%22,%22, %22%5C%5C,%22);%0A        %7D).join(',');%0A      %7D%0A    %7D,%0A    %7B%0A      class: 'Function',%0A      name: 'textToValue',%0A      value: function(text) %7B%0A        if ( ! text ) return %5B%5D;%0A%0A        var value  = %5B%5D;%0A        var escape = false;%0A        var start  = 0;%0A        for ( var i = 0 ; i %3C text.length ; i++ ) %7B%0A          if ( escape ) %7B%0A            escape = false;%0A            continue;%0A          %7D%0A%0A          if ( i == text.length - 1 ) %7B%0A            value.push(text.substring(start, i+1).replace(/%5C%5C(.)/, %22$0%22));%0A          %7D else if ( text%5Bi%5D == ',' %7C%7C i == text.length - 1 ) %7B%0A            value.push(text.substring(start, i).replace(/%5C%5C(.)/, %22$0%22));%0A            start = i + 1;%0A          %7D else if ( text%5Bi%5D == '%5C%5C' ) %7B%0A            escape = true;%0A          %7D%0A        %7D%0A%0A        return value;%0A      %7D%0A    %7D%0A  %5D,%0A%0A  methods: %5B%0A    function link() %7B%0A      this.attrSlot().relateFrom(this.data$, this.textToValue, this.valueToText);
+%7B class: 'foam.u2.TextField' %7D
 %0A   
@@ -326,8 +326,7 @@
   %5D%0A
+
 %7D);
-%0A

Update StringArrayView to use ArrayView