Enhancement #101 Add required option

Author: ruhley

examples/01-simple.html

@@ -16,6 +16,11 @@
             <h1>AngularJS Color Picker</h1>
             <p>An AngularJS directive for a color picker. No requirement on jQuery.</p>
             <form class="col-sm-12">
+                <div class="row">
+                    <label class="control-label">Required (required)</label>
+                    <select ng-model="options.required" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
+                </div>
+
                 <div class="row">
                     <label class="control-label">Disabled (disabled)</label>
                     <select ng-model="options.disabled" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>

src/scripts/options-service.js

@@ -1,6 +1,7 @@
 export default class AngularColorPickerOptions {
     constructor() {
         return {
+            required: false,
             disabled: false,
             hue: true,
             alpha: true,

src/scripts/template.js

@@ -6,7 +6,7 @@ export default function template($templateCache) {
         '}">' +
         '   <div class="color-picker-input-wrapper" ng-class="{\'input-group\': AngularColorPickerController.options.swatchBootstrap && AngularColorPickerController.options.swatch}">' +
         '       <span ng-if="AngularColorPickerController.options.swatchPos === \'left\'" class="color-picker-swatch" ng-click="AngularColorPickerController.focus()" ng-show="AngularColorPickerController.options.swatch" ng-class="{\'color-picker-swatch-left\': AngularColorPickerController.options.swatchPos !== \'right\', \'color-picker-swatch-right\': AngularColorPickerController.options.swatchPos === \'right\', \'input-group-addon\': AngularColorPickerController.options.swatchBootstrap}"></span>' +
-        '       <input class="color-picker-input form-control" type="text" ng-model="AngularColorPickerController.ngModel" ng-readonly="AngularColorPickerController.options.swatchOnly" ng-disabled="AngularColorPickerController.options.disabled" ng-blur="AngularColorPickerController.onBlur($event)" ng-change="AngularColorPickerController.onChange($event)" size="7" ng-focus="AngularColorPickerController.api.open($event)" ng-class="{\'color-picker-input-swatch\': AngularColorPickerController.options.swatch && !AngularColorPickerController.options.swatchOnly && AngularColorPickerController.options.swatchPos === \'left\'}" placeholder="{{AngularColorPickerController.options.placeholder}}">' +
+        '       <input class="color-picker-input form-control" type="text" ng-model="AngularColorPickerController.ngModel" ng-readonly="AngularColorPickerController.options.swatchOnly" ng-disabled="AngularColorPickerController.options.disabled" ng-blur="AngularColorPickerController.onBlur($event)" ng-change="AngularColorPickerController.onChange($event)" size="7" ng-focus="AngularColorPickerController.api.open($event)" ng-class="{\'color-picker-input-swatch\': AngularColorPickerController.options.swatch && !AngularColorPickerController.options.swatchOnly && AngularColorPickerController.options.swatchPos === \'left\'}" placeholder="{{AngularColorPickerController.options.placeholder}}" ng-required="AngularColorPickerController.options.required">' +
         '       <span ng-if="AngularColorPickerController.options.swatchPos === \'right\'" class="color-picker-swatch" ng-click="AngularColorPickerController.focus()" ng-show="AngularColorPickerController.options.swatch" ng-class="{\'color-picker-swatch-left\': AngularColorPickerController.options.swatchPos !== \'right\', \'color-picker-swatch-right\': AngularColorPickerController.options.swatchPos === \'right\', \'input-group-addon\': AngularColorPickerController.options.swatchBootstrap}"></span>' +
         '   </div>' +
         '   <div class="color-picker-panel" ng-show="AngularColorPickerController.visible" ng-class="{' +