     else
       result = {}
       @properties.forEach (key, it) =>
-        if not it.hidden
+        if not it.extras.hidden
           result[key] = @value(key)
       result
 


  addPicker: (name, values, options = {}) ->
    @add name, 'select', 'div', ->
      c = 'hx-btn'

      elem = @append('button')

      if options.disabled then elem.attr('disabled', '')
      else
        if options.buttonClass?
          c += ' ' + options.buttonClass

      pickerOptions = hx.merge({}, options.pickerOptions)

      if values.length > 0
        pickerOptions.items = values

      select = new hx.Picker(elem.node(), pickerOptions)

      # Prevent the button submitting the form - must be done after the select
      # is initialised
      elem.classed(c, true).on 'click', 'hx.form-builder', (e) -> e.preventDefault()

      # XXX: replace this with classes in the css
      input = @append('input').class('hx-hidden-form-input').attr('size', 0)

      @style('position', 'relative')

      if typeof options.required isnt 'boolean'
        select.value(values[0])

      if options.required
        input.node().setCustomValidity('Please select a value from the list')

        select.on 'change', 'hx.form-builder', ->
          input.node().setCustomValidity('')


      {required: options.required, componentNode: elem.node(), select: select, key: options.key}

  addCheckbox: (name, options = {}) ->
    @add name, 'checkbox', 'input', ->
      @attr('type', 'checkbox')
      if options.required? then @attr('required', options.required)
      if options.disabled then @attr('disabled', '')
      {required: options.required, key: options.key}

  addRadio: (name, values, options = {}) ->
    self = this
    @add name, 'radio', 'div', ->
      id = self.formId + name.split(" ").join("-")
      count = 0
      for value in values
        selection  = @append('div').class('hx-radio-container')
        input = selection.append('input').attr('type', 'radio').attr('name', id).attr("id",id+"-"+count).value(value)
        if options.required? then input.attr('required', options.required)
        if options.disabled then input.attr('disabled', '')
        selection.append('label').attr("for", id + "-" + count).text(value)
        count += 1
      {required: options.required, key: options.key}

  addDatePicker: (name, options = {}) ->
    @add name, 'datepicker', 'div', ->

      elem = @append('div').node()
      datepicker = new hx.DatePicker(elem, options.datePickerOptions)

      if options.disabled
        datepicker.disable()

      if options.validStart? or options.validEnd?
        datepicker.validRange(options.validStart, options.validEnd)

          when 'datepicker', 'timepicker', 'datetimepicker' then it.extras.setValue(value)
          else hx.select(node).value(value)
      else
        if not it.hidden and not it.disabled
          value = switch it.type
            when 'checkbox' then hx.select(it.node).prop('checked')
            when 'radio' then hx.select(it.node).select('input:checked').value()
