Add range input to freestyle-dynamic

.gitignore

@@ -22,3 +22,6 @@ jsconfig.json
 .node_modules.ember-try/
 bower.json.ember-try
 package.json.ember-try
+
+# text editors
+.vscode/*

addon/components/freestyle-dynamic-input.js

@@ -11,6 +11,7 @@ export default Component.extend({
   isTextarea: equal('inputType', 'textarea'),
   isSelect: equal('inputType', 'select'),
   isNumber: equal('inputType', 'number'),
+  isRange: equal('inputType', 'range'),
 
   inputId: computed('propertyName',  function() {
     return `${this.get('elementId')}_${this.get('propertyName')}`;

addon/templates/components/freestyle-dynamic-input.hbs

@@ -29,6 +29,16 @@
     id=inputId
     input=(action 'sendChangedNumberValue' value='target.value')
   }}
+{{else if isRange}}
+  {{input
+    type='range'
+    id=inputId
+    min=min
+    max=max
+    input=(action 'sendChangedNumberValue' value='target.value')
+    value=(readonly value)
+  }}
+  {{value}}
 {{else}}
   {{input value=value id=inputId key-up=(action 'sendChangedValue')}}
 {{/if}}

addon/templates/components/freestyle-dynamic.hbs

@@ -8,6 +8,8 @@
         options=propertyHash.options
         inputType=propertyHash.inputType
         description=propertyHash.description
+        min=propertyHash.min
+        max=propertyHash.max
         changeValueTo=(action 'changeValueTo' propertyName)
       }}
     {{/each-in}}

tests/dummy/app/components/x-bar/component.js

@@ -1,5 +1,7 @@
 import Component from '@ember/component';
 import layout from './template';
+import { computed } from '@ember/object';
+import { htmlSafe } from '@ember/string';
 
 export default Component.extend({
   layout,
@@ -9,4 +11,15 @@ export default Component.extend({
   showBorder: true,
   isVisible: true,
   isTasteful: false,
+
+  innerBorderThicknessStyle: computed('innerBorderThickness', function() {
+    const innerBorderThickness = this.get('innerBorderThickness');
+
+    // allow 0
+    if (innerBorderThickness != null) {
+      return htmlSafe(`border-width: ${innerBorderThickness}px`);
+    } else {
+      return '';
+    }
+  })
 });

tests/dummy/app/components/x-bar/template.hbs

@@ -8,7 +8,7 @@
     <div class="x-Bar-rank">{{rank}}</div>
   </div>
   <p>{{description}}</p>
-  <div class="x-Bar-description">
+  <div class="x-Bar-description" style={{innerBorderThicknessStyle}}>
     {{yield}}
   </div>
 </div>

tests/dummy/app/controllers/acceptance.js

@@ -34,6 +34,13 @@ export default FreestyleController.extend({
         value: false,
         inputType: 'checkbox',
         description: 'Changes to a tasteful color scheme'
+      },
+      innerBorderThickness: {
+        value: 1,
+        inputType: 'range',
+        min: 0,
+        max: 20,
+        description: 'Width of the inner border, in pixels',
       }
     }
   }),

tests/dummy/app/templates/acceptance.hbs

@@ -92,6 +92,7 @@
         rank=dynamic.rank
         isVisible=dynamic.isVisible
         isTasteful=dynamic.isTasteful
+        innerBorderThickness=dynamic.innerBorderThickness
       }}
         <p>{{dynamic.blockContent}}</p>
         <p>Static block content</p>