fix(style-binding): replace class-name.bind with class.bind

`class-name.bind` replaces any existing classes on the element. This interferes with validation where `form-group` or `form-group-sm` are chosen via a binding.

dist/amd/checkbox.html

@@ -1,10 +1,10 @@
 <template>
-  <div class-name.bind="'form-group ' + (small ? 'form-group-sm' : '')">
+  <div class.bind="'form-group ' + (small ? 'form-group-sm' : '')">
     <button click.delegate="checkboxSelected()" focus.bind="grabFocus" disabled.bind="!enabled" type="button" class="btn btn-link form-control checkbox noselect">
       <div class="checkbox-selector ${enabled ? 'checkbox-selector-enabled' : 'checkbox-disabled'}">
         <i class="${iconFamilyClass} ${ checked ? checkedIconClass : '' }"></i>
       </div>
-      <div class-name.bind="'checkbox-label ' + (enabled ? '' : 'text-muted')">
+      <div class.bind="'checkbox-label ' + (enabled ? '' : 'text-muted')">
         <slot><span>${label}</span></slot>
       </div>
     </button>

dist/amd/currency-input.html

@@ -1,5 +1,5 @@
 <template>
-  <div class-name.bind="'form-group ' + (small ? 'form-group-sm' : '')">
+  <div class.bind="'form-group ' + (small ? 'form-group-sm' : '')">
     <label if.bind="label.length > 0" for="${'au-currency-' + id}" class="control-label">${label}</label>
     <input id="${'au-currency-' + id}" value.bind="displayValue" placeholder.bind="placeholder" focus.bind="grabFocus" disabled.bind="disabled" blur.trigger="blur()" selectonfocus type="text" autocomplete="off" class="form-control currency-input ${customCSS}" />
   </div>

dist/amd/text-widget.html

@@ -1,5 +1,5 @@
 <template>
-  <div class-name.bind="'form-group ' + (small ? 'form-group-sm' : '')">
+  <div class.bind="'form-group ' + (small ? 'form-group-sm' : '')">
     <label if.bind="label.length > 0" class="control-label">${label}</label>
     <input if.bind="!multiline" value.bind="textValue" placeholder.bind="placeholder" focus.bind="grabFocus" disabled.bind="disabled" readonly.bind="readonly"  blur.trigger="blur()" type="text" autocomplete="off" class="form-control" />
     <textarea if.bind="multiline" value.bind="textValue" placeholder.bind="placeholder" focus.bind="grabFocus" disabled.bind="disabled" readonly.bind="readonly"  blur.trigger="blur()" autcomplete="off" class="form-control"></textarea>

dist/commonjs/checkbox.html

@@ -1,10 +1,10 @@
 <template>
-  <div class-name.bind="'form-group ' + (small ? 'form-group-sm' : '')">
+  <div class.bind="'form-group ' + (small ? 'form-group-sm' : '')">
     <button click.delegate="checkboxSelected()" focus.bind="grabFocus" disabled.bind="!enabled" type="button" class="btn btn-link form-control checkbox noselect">
       <div class="checkbox-selector ${enabled ? 'checkbox-selector-enabled' : 'checkbox-disabled'}">
         <i class="${iconFamilyClass} ${ checked ? checkedIconClass : '' }"></i>
       </div>
-      <div class-name.bind="'checkbox-label ' + (enabled ? '' : 'text-muted')">
+      <div class.bind="'checkbox-label ' + (enabled ? '' : 'text-muted')">
         <slot><span>${label}</span></slot>
       </div>
     </button>

dist/commonjs/currency-input.html

@@ -1,5 +1,5 @@
 <template>
-  <div class-name.bind="'form-group ' + (small ? 'form-group-sm' : '')">
+  <div class.bind="'form-group ' + (small ? 'form-group-sm' : '')">
     <label if.bind="label.length > 0" for="${'au-currency-' + id}" class="control-label">${label}</label>
     <input id="${'au-currency-' + id}" value.bind="displayValue" placeholder.bind="placeholder" focus.bind="grabFocus" disabled.bind="disabled" blur.trigger="blur()" selectonfocus type="text" autocomplete="off" class="form-control currency-input ${customCSS}" />
   </div>

dist/commonjs/text-widget.html

@@ -1,5 +1,5 @@
 <template>
-  <div class-name.bind="'form-group ' + (small ? 'form-group-sm' : '')">
+  <div class.bind="'form-group ' + (small ? 'form-group-sm' : '')">
     <label if.bind="label.length > 0" class="control-label">${label}</label>
     <input if.bind="!multiline" value.bind="textValue" placeholder.bind="placeholder" focus.bind="grabFocus" disabled.bind="disabled" readonly.bind="readonly"  blur.trigger="blur()" type="text" autocomplete="off" class="form-control" />
     <textarea if.bind="multiline" value.bind="textValue" placeholder.bind="placeholder" focus.bind="grabFocus" disabled.bind="disabled" readonly.bind="readonly"  blur.trigger="blur()" autcomplete="off" class="form-control"></textarea>

dist/es2015/checkbox.html

@@ -1,10 +1,10 @@
 <template>
-  <div class-name.bind="'form-group ' + (small ? 'form-group-sm' : '')">
+  <div class.bind="'form-group ' + (small ? 'form-group-sm' : '')">
     <button click.delegate="checkboxSelected()" focus.bind="grabFocus" disabled.bind="!enabled" type="button" class="btn btn-link form-control checkbox noselect">
       <div class="checkbox-selector ${enabled ? 'checkbox-selector-enabled' : 'checkbox-disabled'}">
         <i class="${iconFamilyClass} ${ checked ? checkedIconClass : '' }"></i>
       </div>
-      <div class-name.bind="'checkbox-label ' + (enabled ? '' : 'text-muted')">
+      <div class.bind="'checkbox-label ' + (enabled ? '' : 'text-muted')">
         <slot><span>${label}</span></slot>
       </div>
     </button>

dist/es2015/currency-input.html

@@ -1,5 +1,5 @@
 <template>
-  <div class-name.bind="'form-group ' + (small ? 'form-group-sm' : '')">
+  <div class.bind="'form-group ' + (small ? 'form-group-sm' : '')">
     <label if.bind="label.length > 0" for="${'au-currency-' + id}" class="control-label">${label}</label>
     <input id="${'au-currency-' + id}" value.bind="displayValue" placeholder.bind="placeholder" focus.bind="grabFocus" disabled.bind="disabled" blur.trigger="blur()" selectonfocus type="text" autocomplete="off" class="form-control currency-input ${customCSS}" />
   </div>

dist/es2015/text-widget.html

@@ -1,5 +1,5 @@
 <template>
-  <div class-name.bind="'form-group ' + (small ? 'form-group-sm' : '')">
+  <div class.bind="'form-group ' + (small ? 'form-group-sm' : '')">
     <label if.bind="label.length > 0" class="control-label">${label}</label>
     <input if.bind="!multiline" value.bind="textValue" placeholder.bind="placeholder" focus.bind="grabFocus" disabled.bind="disabled" readonly.bind="readonly"  blur.trigger="blur()" type="text" autocomplete="off" class="form-control" />
     <textarea if.bind="multiline" value.bind="textValue" placeholder.bind="placeholder" focus.bind="grabFocus" disabled.bind="disabled" readonly.bind="readonly"  blur.trigger="blur()" autcomplete="off" class="form-control"></textarea>

dist/system/checkbox.html

@@ -1,10 +1,10 @@
 <template>
-  <div class-name.bind="'form-group ' + (small ? 'form-group-sm' : '')">
+  <div class.bind="'form-group ' + (small ? 'form-group-sm' : '')">
     <button click.delegate="checkboxSelected()" focus.bind="grabFocus" disabled.bind="!enabled" type="button" class="btn btn-link form-control checkbox noselect">
       <div class="checkbox-selector ${enabled ? 'checkbox-selector-enabled' : 'checkbox-disabled'}">
         <i class="${iconFamilyClass} ${ checked ? checkedIconClass : '' }"></i>
       </div>
-      <div class-name.bind="'checkbox-label ' + (enabled ? '' : 'text-muted')">
+      <div class.bind="'checkbox-label ' + (enabled ? '' : 'text-muted')">
         <slot><span>${label}</span></slot>
       </div>
     </button>

dist/system/currency-input.html

@@ -1,5 +1,5 @@
 <template>
-  <div class-name.bind="'form-group ' + (small ? 'form-group-sm' : '')">
+  <div class.bind="'form-group ' + (small ? 'form-group-sm' : '')">
     <label if.bind="label.length > 0" for="${'au-currency-' + id}" class="control-label">${label}</label>
     <input id="${'au-currency-' + id}" value.bind="displayValue" placeholder.bind="placeholder" focus.bind="grabFocus" disabled.bind="disabled" blur.trigger="blur()" selectonfocus type="text" autocomplete="off" class="form-control currency-input ${customCSS}" />
   </div>

dist/system/text-widget.html

@@ -1,5 +1,5 @@
 <template>
-  <div class-name.bind="'form-group ' + (small ? 'form-group-sm' : '')">
+  <div class.bind="'form-group ' + (small ? 'form-group-sm' : '')">
     <label if.bind="label.length > 0" class="control-label">${label}</label>
     <input if.bind="!multiline" value.bind="textValue" placeholder.bind="placeholder" focus.bind="grabFocus" disabled.bind="disabled" readonly.bind="readonly"  blur.trigger="blur()" type="text" autocomplete="off" class="form-control" />
     <textarea if.bind="multiline" value.bind="textValue" placeholder.bind="placeholder" focus.bind="grabFocus" disabled.bind="disabled" readonly.bind="readonly"  blur.trigger="blur()" autcomplete="off" class="form-control"></textarea>

doc/CHANGELOG.md

@@ -1,3 +1,6 @@
+### 2.0.4 (2017-06-20)
+
+
 ### 2.0.3 (2017-05-12)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "aurelia-widgets",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "A Collection of UI Widgets for use in Aurelia applications",
   "homepage": "http://drivesoftware.co.nz",
   "main": "index",

src/checkbox.html

@@ -1,10 +1,10 @@
 <template>
-  <div class-name.bind="'form-group ' + (small ? 'form-group-sm' : '')">
+  <div class.bind="'form-group ' + (small ? 'form-group-sm' : '')">
     <button click.delegate="checkboxSelected()" focus.bind="grabFocus" disabled.bind="!enabled" type="button" class="btn btn-link form-control checkbox noselect">
       <div class="checkbox-selector ${enabled ? 'checkbox-selector-enabled' : 'checkbox-disabled'}">
         <i class="${iconFamilyClass} ${ checked ? checkedIconClass : '' }"></i>
       </div>
-      <div class-name.bind="'checkbox-label ' + (enabled ? '' : 'text-muted')">
+      <div class.bind="'checkbox-label ' + (enabled ? '' : 'text-muted')">
         <slot><span>${label}</span></slot>
       </div>
     </button>

src/currency-input.html

@@ -1,5 +1,5 @@
 <template>
-  <div class-name.bind="'form-group ' + (small ? 'form-group-sm' : '')">
+  <div class.bind="'form-group ' + (small ? 'form-group-sm' : '')">
     <label if.bind="label.length > 0" for="${'au-currency-' + id}" class="control-label">${label}</label>
     <input id="${'au-currency-' + id}" value.bind="displayValue" placeholder.bind="placeholder" focus.bind="grabFocus" disabled.bind="disabled" blur.trigger="blur()" selectonfocus type="text" autocomplete="off" class="form-control currency-input ${customCSS}" />
   </div>

src/text-widget.html

@@ -1,5 +1,5 @@
 <template>
-  <div class-name.bind="'form-group ' + (small ? 'form-group-sm' : '')">
+  <div class.bind="'form-group ' + (small ? 'form-group-sm' : '')">
     <label if.bind="label.length > 0" class="control-label">${label}</label>
     <input if.bind="!multiline" value.bind="textValue" placeholder.bind="placeholder" focus.bind="grabFocus" disabled.bind="disabled" readonly.bind="readonly"  blur.trigger="blur()" type="text" autocomplete="off" class="form-control" />
     <textarea if.bind="multiline" value.bind="textValue" placeholder.bind="placeholder" focus.bind="grabFocus" disabled.bind="disabled" readonly.bind="readonly"  blur.trigger="blur()" autcomplete="off" class="form-control"></textarea>