Re-apply Drop Down Flexible "Merge pull request #2502 from umbraco/temp-U4-11032""

src/Umbraco.Web.UI.Client/src/views/prevalueeditors/boolean.html

@@ -1 +1 @@
-<input name="boolean" type="checkbox" ng-model="model.value" ng-true-value="1" ng-false-value="0" /> 
+<input name="boolean" type="checkbox" ng-model="model.value" ng-true-value="1" ng-false-value="0" id="boolean" /> <label for="boolean">True</label>

src/Umbraco.Web.UI.Client/src/views/propertyeditors/dropdownFlexible/dropdownFlexible.controller.js

@@ -0,0 +1,81 @@
+angular.module("umbraco").controller("Umbraco.PropertyEditors.DropdownFlexibleController",
+    function($scope) {
+
+        //setup the default config
+        var config = {
+            items: [],
+            multiple: false
+        };
+
+        //map the user config
+        angular.extend(config, $scope.model.config);
+
+        //map back to the model
+        $scope.model.config = config;
+        
+        function convertArrayToDictionaryArray(model){
+            //now we need to format the items in the dictionary because we always want to have an array
+            var newItems = [];
+            for (var i = 0; i < model.length; i++) {
+                newItems.push({ id: model[i], sortOrder: 0, value: model[i] });
+            }
+
+            return newItems;
+        }
+
+
+        function convertObjectToDictionaryArray(model){
+            //now we need to format the items in the dictionary because we always want to have an array
+            var newItems = [];
+            var vals = _.values($scope.model.config.items);
+            var keys = _.keys($scope.model.config.items);
+
+            for (var i = 0; i < vals.length; i++) {
+                var label = vals[i].value ? vals[i].value : vals[i]; 
+                newItems.push({ id: keys[i], sortOrder: vals[i].sortOrder, value: label });
+            }
+
+            return newItems;
+        }
+
+        $scope.updateSingleDropdownValue = function() {
+            $scope.model.value = [$scope.model.singleDropdownValue];
+        }
+
+        if (angular.isArray($scope.model.config.items)) {
+            //PP: I dont think this will happen, but we have tests that expect it to happen..
+            //if array is simple values, convert to array of objects
+            if(!angular.isObject($scope.model.config.items[0])){
+                $scope.model.config.items = convertArrayToDictionaryArray($scope.model.config.items);
+            }
+        }
+        else if (angular.isObject($scope.model.config.items)) {
+            $scope.model.config.items = convertObjectToDictionaryArray($scope.model.config.items);
+        }
+        else {
+            throw "The items property must be either an array or a dictionary";
+        }
+        
+
+        //sort the values
+        $scope.model.config.items.sort(function (a, b) { return (a.sortOrder > b.sortOrder) ? 1 : ((b.sortOrder > a.sortOrder) ? -1 : 0); });
+
+        //now we need to check if the value is null/undefined, if it is we need to set it to "" so that any value that is set
+        // to "" gets selected by default
+        if ($scope.model.value === null || $scope.model.value === undefined) {
+            if ($scope.model.config.multiple) {
+                $scope.model.value = [];
+            }
+            else {
+                $scope.model.value = "";
+            }
+        }
+        
+        // if we run in single mode we'll store the value in a local variable
+        // so we can pass an array as the model as our PropertyValueEditor expects that
+        $scope.model.singleDropdownValue = "";
+        if ($scope.model.config.multiple === "0") {
+            $scope.model.singleDropdownValue = Array.isArray($scope.model.value) ? $scope.model.value[0] : $scope.model.value;
+        }
+
+    });

src/Umbraco.Web.UI.Client/src/views/propertyeditors/dropdownFlexible/dropdownFlexible.html

@@ -0,0 +1,19 @@
+<div ng-controller="Umbraco.PropertyEditors.DropdownFlexibleController" ng-switch="model.config.multiple">
+
+    <select name="dropDownList"
+            class="umb-editor umb-dropdown"
+            ng-switch-default
+            ng-change="updateSingleDropdownValue()"
+            ng-model="model.singleDropdownValue"
+            ng-options="item.id as item.value for item in model.config.items">
+        <option></option>
+    </select>
+
+    <!--NOTE: This ng-switch is required because ng-multiple doesn't actually support dynamic bindings with multi-select lists -->
+    <select name="dropDownList"
+            class="umb-editor umb-dropdown"
+            ng-switch-when="1"
+            multiple
+            ng-model="model.value"
+            ng-options="item.id as item.value for item in model.config.items"></select>
+</div>