ColorPicker for Umbraco Grid DataType Settings/Style sections

colorpicker.html

<div ng-controller="Umbraco.PropertyEditors.ColorPickerController">
    <ul class="thumbnails color-picker">
        <li ng-repeat="preval in model.prevalues" ng-class="{active: model.value === preval}">
            <a ng-click="toggleItem(preval)" class="thumbnail" hex-bg-color="{{preval}}">

            </a>
        </li>
    </ul>
    <input type="hidden" name="modelValue" ng-model="model.value" val-property-validator="validateMandatory"/>
</div>

1. Copy colorpicker.html to Umbraco\Views\prevalueeditors
2. Place editor config in Settings\Style section of Grid Data Type, eg:
   { "label": "Color", "description": "Choose main color theme", "key": "class", "view": "colorpicker", "applyTo": "cell", "modifier": "color-theme-{0}", "prevalues": [ "1041cd", "ab8fbf", "f1e300", "" ] }

This appears to have stopped working, for me at least. I'm running 7.7.6. When selecting a color in the backoffice, I get TypeError: Cannot read property 'hasOwnProperty' of undefined.

Had a quick look, since U4-5322 was implemented a change was made to the ColorPickerController which does a hasOwnProperty check on the existing model.value when toggling: https://github.com/umbraco/Umbraco-CMS/blob/529ae961ffa31b4d768f0792901cd10db729d69c/src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.controller.js#L18

Not sure about a fix. It's almost as though a value should be set by default, otherwise I'd expect one to always get the undefined error when initially selecting a color.

I made a tweak to this earlier to get it working based on the updated colorpicker.html (using Umbraco 7.7.6). I have forked and updated to provide an example: https://gist.github.com/charlieanstey/ab9c4987b7540082c5d934d8dc90ea14