forms-angular 0.12.0-beta.264 → 0.12.0-beta.265

package/dist/client/forms-angular.js

@@ -12,8 +12,60 @@ var fng;
 (function (fng) {
     var directives;
     (function (directives) {
-        /*@ngInject*/
         modelControllerDropdown.$inject = ["SecurityService"];
+        function dropDownItem($compile) {
+            return {
+                restrict: "AE",
+                replace: true,
+                link: function (scope, element) {
+                    var template = '   <a ng-show="choice.text || choice.textFunc" class="dropdown-option" ng-href="{{choice.url || choice.urlFunc()}}" ng-click="doClick($index, $event, choice)">' +
+                        "    {{ choice.text || choice.textFunc() }}" +
+                        "   </a>";
+                    element.replaceWith($compile(template)(scope));
+                },
+            };
+        }
+        directives.dropDownItem = dropDownItem;
+        function dropDownSubMenu($compile) {
+            return {
+                restrict: "AE",
+                replace: true,
+                link: function (scope, element) {
+                    var parent = element[0].parentElement;
+                    var template = ' <a ng-show="choice.text || choice.textFunc" class="dropdown-option open-sub-menu" data-ng-mouseenter="mouseenter()">' +
+                        "   {{ choice.text || choice.textFunc() }}" +
+                        " </a>" +
+                        // for now, the remainder of this template does not honour RBAC - come back to this if anyone ever reports it
+                        ' <ul class="uib-dropdown-menu dropdown-menu sub-menu">' +
+                        "  <li ng-repeat=\"choice in choice.items\" ng-attr-id=\"{{choice.id}}\">" + //  ${itemVisibilityStr} ${itemDisabledStr}
+                        '   <drop-down-item data-ng-if="::!choice.items"></drop-down-item>' +
+                        '   <drop-down-sub-menu data-ng-if="::choice.items"></drop-down-sub-menu>' +
+                        "  </li>" +
+                        " </ul>";
+                    var us = $compile(template)(scope);
+                    element.replaceWith(us);
+                    scope.mouseenter = function () {
+                        // generally-speaking, we want the bottom of the sub-menu to line-up with the bottom of its parent menu
+                        // item.  we could achieve that using css alone, but the problem comes when the sub menu is too tall, and bottom-
+                        // aligning it like that causes the top of the menu to overflow the navbar (or even higher).
+                        // so we need to detect that case, and cap the top of the sub-menu at the top of the parent menu.
+                        // this is harder than it sounds, as the top of the sub menu needs to be expressed (as a negative number)
+                        // relative to the top of the parent menu item (because that is the closest relative-positioned parent
+                        // to the submenu, and therefore what it - as an absolutely-positioned element - is expressed in relation to)
+                        var parentRect = parent.getBoundingClientRect();
+                        var ourHeight = us[2].getBoundingClientRect().height;
+                        var offset = ourHeight - 5; // this is the top padding
+                        if (offset > parentRect.top) {
+                            offset -= offset - parentRect.top + parentRect.height;
+                        }
+                        offset -= parentRect.height;
+                        us[2].style.top = "-".concat(offset, "px");
+                    };
+                },
+            };
+        }
+        directives.dropDownSubMenu = dropDownSubMenu;
+        /*@ngInject*/
         function modelControllerDropdown(SecurityService) {
             var menuVisibilityStr;
             var menuDisabledStr;
@@ -24,7 +76,7 @@ var fng;
             var oneTimeBinding = fng.formsAngular.elemSecurityFuncBinding !== "normal";
             var bindingStr = oneTimeBinding ? "::" : "";
             if (SecurityService.canDoSecurity("hidden")) {
-                menuVisibilityStr = "ng-if=\"contextMenuId && !contextMenuHidden\" ".concat(SecurityService.getHideableAttrs('{{ ::contextMenuId }}'));
+                menuVisibilityStr = "ng-if=\"contextMenuId && !contextMenuHidden\" ".concat(SecurityService.getHideableAttrs("{{ ::contextMenuId }}"));
                 if (oneTimeBinding) {
                     // because the isHidden(...) logic is highly likely to be model dependent, that cannot be one-time bound.  to
                     // be able to combine one-time and regular binding, we'll use ng-if for the one-time bound stuff and ng-hide for the rest
@@ -33,20 +85,20 @@ var fng;
                 else if (fng.formsAngular.elemSecurityFuncBinding === "normal") {
                     itemVisibilityStr = "ng-hide=\"".concat(itemVisibilityStr, " || (!choice.divider && isSecurelyHidden(choice.id))\"");
                 }
-                itemVisibilityStr += " ".concat(SecurityService.getHideableAttrs('{{ ::choice.id }}'));
+                itemVisibilityStr += " ".concat(SecurityService.getHideableAttrs("{{ ::choice.id }}"));
             }
             else {
                 menuVisibilityStr = "";
                 itemVisibilityStr = "ng-hide=\"".concat(itemVisibilityStr, "\"");
             }
             if (SecurityService.canDoSecurity("disabled")) {
-                menuDisabledStr = "disableable-link ng-disabled=\"contextMenuDisabled\" ".concat(SecurityService.getDisableableAttrs('{{ ::contextMenuId }}'));
+                menuDisabledStr = "disableable-link ng-disabled=\"contextMenuDisabled\" ".concat(SecurityService.getDisableableAttrs("{{ ::contextMenuId }}"));
                 // as ng-class is already being used, we'll add the .disabled class if the menu item is securely disabled using
                 // class="{{ }}".  note that we "prevent" a disabled menu item from being clicked by checking for the DISABLED
                 // attribute in the doClick(...) function, and aborting if this is found.
                 // note that the 'normal' class introduced here might not actually do anything, but for one-time binding to work
                 // properly, we need a truthy value
-                itemDisabledStr += " class=\"{{ ".concat(bindingStr, "(!choice.divider && isSecurelyDisabled(choice.id)) ? 'disabled' : 'normal' }}\" ").concat(SecurityService.getDisableableAttrs('{{ ::choice.id }}'));
+                itemDisabledStr += " class=\"{{ ".concat(bindingStr, "(!choice.divider && isSecurelyDisabled(choice.id)) ? 'disabled' : 'normal' }}\" ").concat(SecurityService.getDisableableAttrs("{{ ::choice.id }}"));
             }
             else {
                 menuDisabledStr = "";
@@ -60,9 +112,8 @@ var fng;
                     " </a>" +
                     ' <ul class="uib-dropdown-menu dropdown-menu">' +
                     "  <li ng-repeat=\"choice in items\" ng-attr-id=\"{{choice.id}}\" ".concat(itemVisibilityStr, " ").concat(itemDisabledStr, ">") +
-                    '   <a ng-show="choice.text || choice.textFunc" class="dropdown-option" ng-href="{{choice.url || choice.urlFunc()}}" ng-click="doClick($index, $event)">' +
-                    "    {{ choice.text || choice.textFunc() }}" +
-                    "   </a>" +
+                    '   <drop-down-item data-ng-if="!choice.items"></drop-down-item>' +
+                    '   <drop-down-sub-menu data-ng-if="choice.items"></drop-down-sub-menu>' +
                     "  </li>" +
                     " </ul>" +
                     "</li>",
@@ -914,8 +965,13 @@ var fng;
                             }
                         }
                         else {
+                            // NB: Any changes to what properties we support @@-wrapped pseudonyms for here should be repeated in
+                            // PluginHelperService.extractFromAttr
+                            info.help = FormMarkupHelperService.handlePseudos(scope, info.help);
+                            info.label = FormMarkupHelperService.handlePseudos(scope, info.label);
+                            info.popup = FormMarkupHelperService.handlePseudos(scope, info.popup);
                             // Handle arrays here
-                            var controlDivClasses = FormMarkupHelperService.controlDivClasses(options);
+                            var controlDivClasses = FormMarkupHelperService.controlDivClasses(options, info);
                             if (info.array) {
                                 controlDivClasses.push('fng-array');
                                 if (options.formstyle === 'inline' || options.formstyle === 'stacked') {
@@ -1116,179 +1172,201 @@ var fng;
                         }
                         return result;
                     };
+                    scope.$on("regenerateFormMarkup", function (event, formId) {
+                        if (!attrs.formid || attrs.formid !== formId) {
+                            return;
+                        }
+                        generateForm(scope[attrs.schema]);
+                    });
                     var unwatch = scope.$watch(attrs.schema, function (newValue) {
                         if (newValue) {
                             var newArrayValue = angular.isArray(newValue) ? newValue : [newValue]; // otherwise some old tests stop working for no real reason
                             if (newArrayValue.length > 0 && typeof unwatch === "function") {
                                 unwatch();
                                 unwatch = null;
-                                var elementHtml = '';
-                                var recordAttribute = attrs.model || 'record'; // By default data comes from scope.record
-                                var theRecord = scope[recordAttribute];
-                                var hideableTabs = newArrayValue.filter(function (s) { return s && s.containerType === "tab" && s.hideable; });
-                                var hiddenTabArrayProp = void 0;
-                                var hiddenTabReintroductionMethod = void 0;
-                                for (var _i = 0, hideableTabs_1 = hideableTabs; _i < hideableTabs_1.length; _i++) {
-                                    var tab = hideableTabs_1[_i];
-                                    if (tab.hiddenTabArrayProp) {
-                                        if (hiddenTabArrayProp && tab.hiddenTabArrayProp !== hiddenTabArrayProp) {
-                                            throw new Error("Currently, tab sets with more than one value for hiddenTabArrayProp are not supported");
-                                        }
-                                        hiddenTabArrayProp = tab.hiddenTabArrayProp;
-                                    }
-                                    if (tab.hiddenTabReintroductionMethod) {
-                                        if (hiddenTabReintroductionMethod && tab.hiddenTabReintroductionMethod !== hiddenTabReintroductionMethod) {
-                                            throw new Error("Currently, tab sets with more than one value for hiddenTabReintroductionMethod are not supported");
-                                        }
-                                        hiddenTabReintroductionMethod = tab.hiddenTabReintroductionMethod;
-                                    }
-                                }
-                                // now we have established that we don't have more than one value for hiddenTabArrayProp, apply a default if no
-                                // value has been provided at all...
-                                if (!hiddenTabArrayProp) {
-                                    hiddenTabArrayProp = "record.hiddenTabs";
-                                }
-                                // ...and then replace all blanks with this value so the processInstructions() call made below can deal with
-                                // each tab independently of the others
-                                for (var _a = 0, hideableTabs_2 = hideableTabs; _a < hideableTabs_2.length; _a++) {
-                                    var tab = hideableTabs_2[_a];
-                                    tab.hiddenTabArrayProp = hiddenTabArrayProp;
+                                generateForm(newArrayValue);
+                            }
+                        }
+                    }, true);
+                    var formElement;
+                    var generateForm = function (schema) {
+                        var elementHtml = '';
+                        var recordAttribute = attrs.model || 'record'; // By default data comes from scope.record
+                        var theRecord = scope[recordAttribute];
+                        var hideableTabs = schema.filter(function (s) { return s && s.containerType === "tab" && s.hideable; });
+                        var hiddenTabArrayProp;
+                        var hiddenTabReintroductionMethod;
+                        for (var _i = 0, hideableTabs_1 = hideableTabs; _i < hideableTabs_1.length; _i++) {
+                            var tab = hideableTabs_1[_i];
+                            if (tab.hiddenTabArrayProp) {
+                                if (hiddenTabArrayProp && tab.hiddenTabArrayProp !== hiddenTabArrayProp) {
+                                    throw new Error("Currently, tab sets with more than one value for hiddenTabArrayProp are not supported");
                                 }
-                                if (hiddenTabReintroductionMethod === "tab") {
-                                    newArrayValue.push({
-                                        containerType: "+tab",
-                                        hiddenTabArrayProp: hiddenTabArrayProp,
-                                        content: []
-                                    });
+                                hiddenTabArrayProp = tab.hiddenTabArrayProp;
+                            }
+                            if (tab.hiddenTabReintroductionMethod) {
+                                if (hiddenTabReintroductionMethod && tab.hiddenTabReintroductionMethod !== hiddenTabReintroductionMethod) {
+                                    throw new Error("Currently, tab sets with more than one value for hiddenTabReintroductionMethod are not supported");
                                 }
-                                theRecord = theRecord || {};
-                                if ((attrs.subschema || attrs.model) && !attrs.forceform) {
-                                    elementHtml = '';
+                                hiddenTabReintroductionMethod = tab.hiddenTabReintroductionMethod;
+                            }
+                        }
+                        // now we have established that we don't have more than one value for hiddenTabArrayProp, apply a default if no
+                        // value has been provided at all...
+                        if (!hiddenTabArrayProp) {
+                            hiddenTabArrayProp = "record.hiddenTabs";
+                        }
+                        // ...and then replace all blanks with this value so the processInstructions() call made below can deal with
+                        // each tab independently of the others
+                        for (var _a = 0, hideableTabs_2 = hideableTabs; _a < hideableTabs_2.length; _a++) {
+                            var tab = hideableTabs_2[_a];
+                            tab.hiddenTabArrayProp = hiddenTabArrayProp;
+                        }
+                        if (hiddenTabReintroductionMethod === "tab") {
+                            schema.push({
+                                containerType: "+tab",
+                                hiddenTabArrayProp: hiddenTabArrayProp,
+                                content: []
+                            });
+                        }
+                        theRecord = theRecord || {};
+                        if ((attrs.subschema || attrs.model) && !attrs.forceform) {
+                            elementHtml = '';
+                        }
+                        else {
+                            scope.topLevelFormName = attrs.name || 'myForm'; // Form name defaults to myForm
+                            // Copy attrs we don't process into form
+                            var customAttrs = '';
+                            for (var thisAttr in attrs) {
+                                if (attrs.hasOwnProperty(thisAttr)) {
+                                    if (thisAttr[0] !== '$' && ['name', 'formstyle', 'schema', 'subschema', 'model', 'viewform'].indexOf(thisAttr) === -1) {
+                                        customAttrs += ' ' + attrs.$attr[thisAttr] + '="' + attrs[thisAttr] + '"';
+                                    }
                                 }
-                                else {
-                                    scope.topLevelFormName = attrs.name || 'myForm'; // Form name defaults to myForm
-                                    // Copy attrs we don't process into form
-                                    var customAttrs = '';
-                                    for (var thisAttr in attrs) {
-                                        if (attrs.hasOwnProperty(thisAttr)) {
-                                            if (thisAttr[0] !== '$' && ['name', 'formstyle', 'schema', 'subschema', 'model', 'viewform'].indexOf(thisAttr) === -1) {
-                                                customAttrs += ' ' + attrs.$attr[thisAttr] + '="' + attrs[thisAttr] + '"';
-                                            }
+                            }
+                            var tag = attrs.forceform ? 'ng-form' : 'form';
+                            elementHtml = "<".concat(tag, " name=\"").concat(scope.topLevelFormName, "\" class=\"").concat(convertFormStyleToClass(attrs.formstyle), "\" novalidate ").concat(customAttrs, ">");
+                        }
+                        if (theRecord === scope.topLevelFormName) {
+                            throw new Error('Model and Name must be distinct - they are both ' + theRecord);
+                        }
+                        elementHtml += processInstructions(schema, true, attrs);
+                        if (tabsSetup === tabsSetupState.Forced) {
+                            elementHtml += '</uib-tabset>';
+                        }
+                        elementHtml += attrs.subschema ? '' : '</form>';
+                        var compiledFormElement = $compile(elementHtml)(scope);
+                        if (formElement) {
+                            var topLevelForm = scope[scope.topLevelFormName];
+                            formElement.replaceWith(compiledFormElement);
+                            // the replaceWith will cause the scope[scope.topLevelFormName] to be cleared, so we need to...:
+                            scope[scope.topLevelFormName] = topLevelForm;
+                        }
+                        else {
+                            element.replaceWith(compiledFormElement);
+                        }
+                        // remember the element that we're now represented by (which is no longer the value
+                        // of element passed to our link function).  This will enable us to replace the 
+                        // correct element upon receipt of a regenerateFormMarkup request.
+                        formElement = compiledFormElement;
+                        // If there are subkeys we need to fix up ng-model references when record is read
+                        // If we have modelControllers we need to let them know when we have form + data
+                        var sharedData = scope[attrs.shared || 'sharedData'];
+                        var modelControllers = sharedData ? sharedData.modelControllers : [];
+                        if ((subkeys.length > 0 || modelControllers.length > 0) && !scope.phaseWatcher) {
+                            var unwatch2 = scope.$watch('phase', function (newValue) {
+                                scope.phaseWatcher = true;
+                                if (newValue === 'ready' && typeof unwatch2 === "function") {
+                                    unwatch2();
+                                    unwatch2 = null;
+                                    // Tell the 'model controllers' that the form and data are there
+                                    for (var i = 0; i < modelControllers.length; i++) {
+                                        if (modelControllers[i].onAllReady) {
+                                            modelControllers[i].onAllReady(scope);
                                         }
                                     }
-                                    var tag = attrs.forceform ? 'ng-form' : 'form';
-                                    elementHtml = "<".concat(tag, " name=\"").concat(scope.topLevelFormName, "\" class=\"").concat(convertFormStyleToClass(attrs.formstyle), "\" novalidate ").concat(customAttrs, ">");
-                                }
-                                if (theRecord === scope.topLevelFormName) {
-                                    throw new Error('Model and Name must be distinct - they are both ' + theRecord);
-                                }
-                                elementHtml += processInstructions(newArrayValue, true, attrs);
-                                if (tabsSetup === tabsSetupState.Forced) {
-                                    elementHtml += '</uib-tabset>';
-                                }
-                                elementHtml += attrs.subschema ? '' : '</form>';
-                                //console.log(elementHtml);
-                                element.replaceWith($compile(elementHtml)(scope));
-                                // If there are subkeys we need to fix up ng-model references when record is read
-                                // If we have modelControllers we need to let them know when we have form + data
-                                var sharedData = scope[attrs.shared || 'sharedData'];
-                                var modelControllers_1 = sharedData ? sharedData.modelControllers : [];
-                                if ((subkeys.length > 0 || modelControllers_1.length > 0) && !scope.phaseWatcher) {
-                                    var unwatch2 = scope.$watch('phase', function (newValue) {
-                                        scope.phaseWatcher = true;
-                                        if (newValue === 'ready' && typeof unwatch2 === "function") {
-                                            unwatch2();
-                                            unwatch2 = null;
-                                            // Tell the 'model controllers' that the form and data are there
-                                            for (var i = 0; i < modelControllers_1.length; i++) {
-                                                if (modelControllers_1[i].onAllReady) {
-                                                    modelControllers_1[i].onAllReady(scope);
+                                    // For each one of the subkeys sets in the form we need to fix up ng-model references
+                                    for (var subkeyCtr = 0; subkeyCtr < subkeys.length; subkeyCtr++) {
+                                        var info = subkeys[subkeyCtr];
+                                        var arrayOffset;
+                                        var matching;
+                                        var arrayToProcess = angular.isArray(info.subkey) ? info.subkey : [info.subkey];
+                                        var parts = info.name.split('.');
+                                        var dataVal = theRecord;
+                                        while (parts.length > 1) {
+                                            dataVal = dataVal[parts.shift()] || {};
+                                        }
+                                        dataVal = dataVal[parts[0]] = dataVal[parts[0]] || [];
+                                        // For each of the required subkeys of this type
+                                        for (var thisOffset = 0; thisOffset < arrayToProcess.length; thisOffset++) {
+                                            if (arrayToProcess[thisOffset].selectFunc) {
+                                                // Get the array offset from a function
+                                                if (!scope[arrayToProcess[thisOffset].selectFunc] || typeof scope[arrayToProcess[thisOffset].selectFunc] !== 'function') {
+                                                    throw new Error('Subkey function ' + arrayToProcess[thisOffset].selectFunc + ' is not properly set up');
                                                 }
+                                                arrayOffset = scope[arrayToProcess[thisOffset].selectFunc](theRecord, info);
                                             }
-                                            // For each one of the subkeys sets in the form we need to fix up ng-model references
-                                            for (var subkeyCtr = 0; subkeyCtr < subkeys.length; subkeyCtr++) {
-                                                var info = subkeys[subkeyCtr];
-                                                var arrayOffset;
-                                                var matching;
-                                                var arrayToProcess = angular.isArray(info.subkey) ? info.subkey : [info.subkey];
-                                                var parts = info.name.split('.');
-                                                var dataVal = theRecord;
-                                                while (parts.length > 1) {
-                                                    dataVal = dataVal[parts.shift()] || {};
-                                                }
-                                                dataVal = dataVal[parts[0]] = dataVal[parts[0]] || [];
-                                                // For each of the required subkeys of this type
-                                                for (var thisOffset = 0; thisOffset < arrayToProcess.length; thisOffset++) {
-                                                    if (arrayToProcess[thisOffset].selectFunc) {
-                                                        // Get the array offset from a function
-                                                        if (!scope[arrayToProcess[thisOffset].selectFunc] || typeof scope[arrayToProcess[thisOffset].selectFunc] !== 'function') {
-                                                            throw new Error('Subkey function ' + arrayToProcess[thisOffset].selectFunc + ' is not properly set up');
-                                                        }
-                                                        arrayOffset = scope[arrayToProcess[thisOffset].selectFunc](theRecord, info);
-                                                    }
-                                                    else if (arrayToProcess[thisOffset].keyList) {
-                                                        // We are choosing the array element by matching one or more keys
-                                                        var thisSubkeyList = arrayToProcess[thisOffset].keyList;
-                                                        for (arrayOffset = 0; arrayOffset < dataVal.length; arrayOffset++) {
-                                                            matching = true;
-                                                            for (var keyField in thisSubkeyList) {
-                                                                if (thisSubkeyList.hasOwnProperty(keyField)) {
-                                                                    // Not (currently) concerned with objects here - just simple types and lookups
-                                                                    if (dataVal[arrayOffset][keyField] !== thisSubkeyList[keyField] &&
-                                                                        (typeof dataVal[arrayOffset][keyField] === 'undefined' || !dataVal[arrayOffset][keyField].text || dataVal[arrayOffset][keyField].text !== thisSubkeyList[keyField])) {
-                                                                        matching = false;
-                                                                        break;
-                                                                    }
-                                                                }
-                                                            }
-                                                            if (matching) {
+                                            else if (arrayToProcess[thisOffset].keyList) {
+                                                // We are choosing the array element by matching one or more keys
+                                                var thisSubkeyList = arrayToProcess[thisOffset].keyList;
+                                                for (arrayOffset = 0; arrayOffset < dataVal.length; arrayOffset++) {
+                                                    matching = true;
+                                                    for (var keyField in thisSubkeyList) {
+                                                        if (thisSubkeyList.hasOwnProperty(keyField)) {
+                                                            // Not (currently) concerned with objects here - just simple types and lookups
+                                                            if (dataVal[arrayOffset][keyField] !== thisSubkeyList[keyField] &&
+                                                                (typeof dataVal[arrayOffset][keyField] === 'undefined' || !dataVal[arrayOffset][keyField].text || dataVal[arrayOffset][keyField].text !== thisSubkeyList[keyField])) {
+                                                                matching = false;
                                                                 break;
                                                             }
                                                         }
-                                                        if (!matching) {
-                                                            // There is no matching array element
-                                                            switch (arrayToProcess[thisOffset].onNotFound) {
-                                                                case 'error':
-                                                                    var errorMessage = 'Cannot find matching ' + (arrayToProcess[thisOffset].title || arrayToProcess[thisOffset].path);
-                                                                    //Have to do this async as setPristine clears it
-                                                                    $timeout(function () {
-                                                                        scope.showError(errorMessage, 'Unable to set up form correctly');
-                                                                    });
-                                                                    arrayOffset = -1;
-                                                                    //throw new Error(scope.errorMessage);
-                                                                    break;
-                                                                case 'create':
-                                                                default:
-                                                                    var nameElements = info.name.split('.');
-                                                                    var lastPart = nameElements.pop();
-                                                                    var possibleArray = nameElements.join('.');
-                                                                    var obj = theRecord;
-                                                                    // Should loop here when / if we re-introduce nesting
-                                                                    if (possibleArray) {
-                                                                        obj = obj[possibleArray];
-                                                                    }
-                                                                    arrayOffset = obj[lastPart].push(thisSubkeyList) - 1;
-                                                                    break;
-                                                            }
-                                                        }
                                                     }
-                                                    else {
-                                                        throw new Error('Invalid subkey setup for ' + info.name);
+                                                    if (matching) {
+                                                        break;
+                                                    }
+                                                }
+                                                if (!matching) {
+                                                    // There is no matching array element
+                                                    switch (arrayToProcess[thisOffset].onNotFound) {
+                                                        case 'error':
+                                                            var errorMessage = 'Cannot find matching ' + (arrayToProcess[thisOffset].title || arrayToProcess[thisOffset].path);
+                                                            //Have to do this async as setPristine clears it
+                                                            $timeout(function () {
+                                                                scope.showError(errorMessage, 'Unable to set up form correctly');
+                                                            });
+                                                            arrayOffset = -1;
+                                                            //throw new Error(scope.errorMessage);
+                                                            break;
+                                                        case 'create':
+                                                        default:
+                                                            var nameElements = info.name.split('.');
+                                                            var lastPart = nameElements.pop();
+                                                            var possibleArray = nameElements.join('.');
+                                                            var obj = theRecord;
+                                                            // Should loop here when / if we re-introduce nesting
+                                                            if (possibleArray) {
+                                                                obj = obj[possibleArray];
+                                                            }
+                                                            arrayOffset = obj[lastPart].push(thisSubkeyList) - 1;
+                                                            break;
                                                     }
-                                                    scope['$_arrayOffset_' + info.name.replace(/\./g, '_') + '_' + thisOffset] = arrayOffset;
                                                 }
                                             }
+                                            else {
+                                                throw new Error('Invalid subkey setup for ' + info.name);
+                                            }
+                                            scope['$_arrayOffset_' + info.name.replace(/\./g, '_') + '_' + thisOffset] = arrayOffset;
                                         }
-                                    });
-                                }
-                                $rootScope.$broadcast('formInputDone', attrs.name);
-                                if (FormGeneratorService.updateDataDependentDisplay && theRecord && Object.keys(theRecord).length > 0) {
-                                    // If this is not a test force the data dependent updates to the DOM
-                                    FormGeneratorService.updateDataDependentDisplay(theRecord, null, true, scope);
+                                    }
                                 }
-                            }
+                            });
                         }
-                    }, true);
+                        $rootScope.$broadcast('formInputDone', attrs.name);
+                        if (FormGeneratorService.updateDataDependentDisplay && theRecord && Object.keys(theRecord).length > 0) {
+                            // If this is not a test force the data dependent updates to the DOM
+                            FormGeneratorService.updateDataDependentDisplay(theRecord, null, true, scope);
+                        }
+                    };
                 }
             };
         }
@@ -2851,9 +2929,78 @@ var fng;
             function isArrayElement(scope, info, options) {
                 return scope["$index"] !== undefined || !!options.subschema;
             }
+            function performPseudoReplacements(scope, str, substitutionSrc) {
+                while (str.includes("@@")) {
+                    var firstCharPos = str.indexOf("@@") + 2;
+                    var lastCharPos = str.indexOf("@@", firstCharPos) - 1;
+                    var token = str.substring(firstCharPos, lastCharPos + 1);
+                    var plural = token.endsWith("s");
+                    if (plural) {
+                        token = token.slice(0, -1);
+                    }
+                    var upperStr = token[0].toUpperCase() === token[0] ? "true" : "false";
+                    token = token.toLocaleLowerCase();
+                    var replacement = void 0;
+                    if (substitutionSrc === "global") {
+                        replacement = fng.formsAngular.pseudo(token, upperStr === "true");
+                    }
+                    else if (substitutionSrc === "scopeStatic") {
+                        replacement = scope.sharedData.pseudo(token, upperStr === "true");
+                    }
+                    else if (substitutionSrc === "scopeDynamic") {
+                        replacement = "{{ sharedData.pseudo('".concat(token, "', ").concat(upperStr, ") }}");
+                    }
+                    else {
+                        replacement = "";
+                    }
+                    str =
+                        str.substring(0, firstCharPos - 2) +
+                            replacement +
+                            (plural ? "s" : "") +
+                            str.substring(lastCharPos + 3);
+                }
+                return str;
+            }
+            // Text surrounded by @@ @@ is assumed to be something that can have a pseudonym:
+            //   - If the sharedData object has been assigned a pseudo() function:
+            //        - then if dynamicFuncName has a value, we will set up a function on scope that will call that function to perform
+            //          the necessary substitutions.  This would be useful for directives that use a template where labels, hints etc. already use {{ }}
+            //          notation (which would prevent any additional {{ }} that we nested in our result from working as intended).
+            //        - otherwise, we will set up the necessary dynamic calls to that sharedData.pseudo function using {{ }} notation
+            //   - Otherwise, if a pseudo callback has been provided in the IFng options, we will use that to perform a one-off (static) replacement.
+            //   - Otherwise (though not expected to happen), we will just remove the @@ tags, leaving the token(s) unchanged.
+            // If the first character of the pseudonym token is upper case, then its replacement will use
+            // titlecase, otherwise its replacement will be in lowercase.
+            // If the last character of the pseudonym token is "s", then its replacement will be pluralised.
+            function handlePseudos(scope, str, dynamicFuncName) {
+                var _a;
+                if (!(str === null || str === void 0 ? void 0 : str.includes("@@"))) {
+                    return str;
+                }
+                var substitutionSrc;
+                if (typeof ((_a = scope === null || scope === void 0 ? void 0 : scope.sharedData) === null || _a === void 0 ? void 0 : _a.pseudo) === "function") {
+                    if (dynamicFuncName) {
+                        scope[dynamicFuncName] = function () {
+                            return performPseudoReplacements(scope, str, "scopeStatic");
+                        };
+                        substitutionSrc = "none"; // now the dynamic function has been set up, remove the @@ @@ tags (probably not essential, but might avoid confusion)
+                    }
+                    else {
+                        substitutionSrc = "scopeDynamic";
+                    }
+                }
+                else if (typeof fng.formsAngular.pseudo === "function") {
+                    substitutionSrc = "global";
+                }
+                else {
+                    substitutionSrc = "none";
+                }
+                return performPseudoReplacements(scope, str, substitutionSrc);
+            }
             return {
                 isHorizontalStyle: isHorizontalStyle,
                 isArrayElement: isArrayElement,
+                handlePseudos: handlePseudos,
                 fieldChrome: function fieldChrome(scope, info, options) {
                     var insert = '';
                     if (info.id && typeof info.id.replace === "function") {
@@ -2909,7 +3056,7 @@ var fng;
                         classes += ' form-group';
                         if (options.formstyle === 'vertical' && info.size !== 'block-level') {
                             template += '<div class="row">';
-                            classes += ' col-sm-' + InputSizeHelperService.sizeAsNumber(info.size);
+                            classes += ' col-sm-' + InputSizeHelperService.sizeAsNumber(info);
                             closeTag += '</div>';
                         }
                         var modelControllerName;
@@ -2955,7 +3102,12 @@ var fng;
                                 classes += ' ' + fieldInfo.labelDefaultClass;
                             }
                             else if (CssFrameworkService.framework() === 'bs3') {
-                                classes += ' col-sm-3';
+                                if (fieldInfo.coloffset) {
+                                    classes += ' col-sm-' + (3 - fieldInfo.coloffset).toString();
+                                }
+                                else {
+                                    classes += ' col-sm-3';
+                                }
                             }
                         }
                         else if (['inline', 'stacked'].includes(options.formstyle)) {
@@ -2992,7 +3144,7 @@ var fng;
                     var formControl = '';
                     if (CssFrameworkService.framework() === 'bs3') {
                         compactClass = (['horizontal', 'vertical', 'inline'].indexOf(options.formstyle) === -1) ? ' input-sm' : '';
-                        sizeClassBS3 = 'col-sm-' + InputSizeHelperService.sizeAsNumber(fieldInfo.size);
+                        sizeClassBS3 = 'col-sm-' + InputSizeHelperService.sizeAsNumber(fieldInfo);
                         formControl = ' form-control';
                     }
                     else {
@@ -3069,10 +3221,18 @@ var fng;
                     result += ' />';
                     return result;
                 },
-                controlDivClasses: function controlDivClasses(options) {
+                controlDivClasses: function controlDivClasses(options, fieldInfo) {
                     var result = [];
                     if (isHorizontalStyle(options.formstyle, false)) {
-                        result.push(CssFrameworkService.framework() === 'bs2' ? 'controls' : 'col-sm-9');
+                        if (CssFrameworkService.framework() === 'bs2') {
+                            result.push('controls');
+                        }
+                        else if (fieldInfo.coloffset) {
+                            result.push('col-sm-' + (9 + fieldInfo.coloffset).toString());
+                        }
+                        else {
+                            result.push('col-sm-9');
+                        }
                     }
                     return result;
                 },
@@ -3134,8 +3294,12 @@ var fng;
                 sizeMapping: sizeMapping,
                 sizeDescriptions: sizeDescriptions,
                 defaultSizeOffset: defaultSizeOffset,
-                sizeAsNumber: function (fieldSizeAsText) {
-                    return sizeMapping[fieldSizeAsText ? sizeDescriptions.indexOf(fieldSizeAsText) : defaultSizeOffset];
+                sizeAsNumber: function (info) {
+                    var result = sizeMapping[info.size ? sizeDescriptions.indexOf(info.size) : defaultSizeOffset];
+                    if (info.coloffset) {
+                        result += info.coloffset;
+                    }
+                    return result;
                 }
             };
         }
@@ -3198,33 +3362,8 @@ var fng;
             function internalGenDisabledStr(scope, id, processedAttrs, idSuffix, params) {
                 return internalGenDisabledAttrs(scope, id, processedAttrs, idSuffix, params).join(" ");
             }
-            // Text surrounded by @@ @@ is assumed to be something that can have a pseudonym.  We'll rely
-            // upon the relevant controller assigning a pseudo() function to baseScope.
-            // If the first character of the pseudonym token is upper case, then its replacement will use
-            // titlecase, otherwise its replacement will be in lowercase.
-            // If the last character of the pseudonym token is "s", then its replacement will be pluralised.
-            function handlePseudos(str) {
-                if (!str) {
-                    return str;
-                }
-                var result = str;
-                while (result.includes("@@")) {
-                    var firstCharPos = result.indexOf("@@") + 2;
-                    var lastCharPos = result.indexOf("@@", firstCharPos) - 1;
-                    var token = result.substring(firstCharPos, lastCharPos + 1);
-                    var plural = token.endsWith("s");
-                    if (plural) {
-                        token = token.slice(0, -1);
-                    }
-                    var upperStr = token[0].toUpperCase() === token[0] ? "true" : "false";
-                    token = token.toLocaleLowerCase();
-                    result =
-                        result.substring(0, firstCharPos - 2) +
-                            "{{ baseScope.pseudo('".concat(token, "', ").concat(upperStr, ") }}") +
-                            (plural ? "s" : "") +
-                            result.substring(lastCharPos + 3);
-                }
-                return result;
+            function handlePseudos(scope, str, dynamicFuncName) {
+                return FormMarkupHelperService.handlePseudos(scope, str, dynamicFuncName);
             }
             function makeIdStringUniqueForArrayElements(scope, processedAttrs, idString) {
                 if (FormMarkupHelperService.isArrayElement(scope, processedAttrs.info, processedAttrs.options)) {
@@ -3287,7 +3426,7 @@ var fng;
                 // of whether or not the datetime picker is actually disabled) to indicate that it potentially could be
                 return disabledStr + " " + rawDisabledAttrs[1];
             }
-            function extractFromAttr(attr, directiveName) {
+            function extractFromAttr(attr, directiveName, scope, opts) {
                 function deserialize(str) {
                     var retVal = str.replace(/&quot;/g, '"');
                     if (retVal === "true") {
@@ -3326,12 +3465,9 @@ var fng;
                     }
                 }
                 var result = { info: info, options: options, directiveOptions: directiveOptions };
-                // any part of the help text or label that is surrounded by @@ @@ is assumed to be something that can have
-                // a pseudonym.  We'll be relying upon the parent controller assigning a pseudo() function to baseScope to
-                // actually perform the translation.
-                // TODO - do this better when fng is re-written!
-                result.info.help = handlePseudos(result.info.help);
-                result.info.label = handlePseudos(result.info.label);
+                result.info.help = handlePseudos(scope, result.info.help, (opts === null || opts === void 0 ? void 0 : opts.setUpDynamicHelpFunc) ? "help" : undefined);
+                result.info.label = handlePseudos(scope, result.info.label, (opts === null || opts === void 0 ? void 0 : opts.setUpDynamicLabelFunc) ? "label" : undefined);
+                result.info.popup = handlePseudos(scope, result.info.popup);
                 return result;
             }
             function genIdAndDisabledStr(scope, processedAttrs, idSuffix, params) {
@@ -3342,7 +3478,7 @@ var fng;
             return {
                 extractFromAttr: extractFromAttr,
                 buildInputMarkup: function buildInputMarkup(scope, attrs, params, generateInputControl) {
-                    var processedAttrs = params.processedAttrs || extractFromAttr(attrs, "");
+                    var processedAttrs = params.processedAttrs || extractFromAttr(attrs, "", scope);
                     var info = {};
                     if (!params.ignoreFieldInfoFromAttrs) {
                         Object.assign(info, processedAttrs.info);
@@ -3355,7 +3491,7 @@ var fng;
                     if (fieldChrome.omit) {
                         return "";
                     }
-                    var controlDivClasses = FormMarkupHelperService.controlDivClasses(options);
+                    var controlDivClasses = FormMarkupHelperService.controlDivClasses(options, info);
                     var elementHtml = fieldChrome.template + FormMarkupHelperService.label(scope, info, params.addButtons, options);
                     var idString = info.id;
                     if (info.array || options.subschema) {
@@ -3972,8 +4108,20 @@ var fng;
                     $scope.$watch("record", function (newValue, oldValue) {
                         if (newValue !== oldValue) {
                             if (Object.keys(oldValue).length > 0 && $scope.dropConversionWatcher) {
-                                $scope.dropConversionWatcher(); // Don't want to convert changed data
+                                // We don't want to convert changed data, so we need to stop watching the conversions
+                                // after the record has finished its initialisation and this watch has begun detecting actual changes.
+                                // In some rare cases, it is possible that a "change" to the record can be made programatically
+                                // before all of the directives that might need to add conversions have finished doing so.  
+                                // This can happen in situations where promise resolutions interrupt the compilation process. 
+                                // If we're not careful, we can end up with <select> inputs that are blank even when the underlying
+                                // field does have a value.
+                                // To avoid this, we'll use a $timeout to give for the digest queue to fully clear out - this should
+                                // ensure that all directives have been compiled before the conversion watcher is actually dropped.
+                                var dropWatcherFunc_1 = $scope.dropConversionWatcher;
                                 $scope.dropConversionWatcher = null;
+                                $timeout(function () {
+                                    dropWatcherFunc_1();
+                                });
                             }
                             force = formGeneratorInstance.updateDataDependentDisplay(newValue, oldValue, force, $scope);
                             processLookupHandlers(newValue, oldValue);
@@ -5492,9 +5640,9 @@ var fng;
             $scope.$on('fngControllersUnloaded', function (evt) {
                 clearContextMenu();
             });
-            $scope.doClick = function (index, event) {
+            $scope.doClick = function (index, event, item) {
                 var option = angular.element(event.target);
-                var item = $scope.items[index];
+                item = item || $scope.items[index];
                 if (item.divider || option.parent().hasClass('disabled')) {
                     event.preventDefault();
                 }
@@ -5602,6 +5750,8 @@ var fng;
         .controller('ModelCtrl', fng.controllers.ModelCtrl)
         .controller('NavCtrl', fng.controllers.NavCtrl)
         .directive('modelControllerDropdown', fng.directives.modelControllerDropdown)
+        .directive('dropDownItem', fng.directives.dropDownItem)
+        .directive('dropDownSubMenu', fng.directives.dropDownSubMenu)
         .directive('errorDisplay', fng.directives.errorDisplay)
         .directive('fngLink', fng.directives.fngLink)
         .directive('formInput', fng.directives.formInput)
@@ -5637,5 +5787,5 @@ $templateCache.put('error-display-bs3.html','<div id="display-error" ng-show="er
 $templateCache.put('error-messages.html','<div ng-message="required">A value is required for this field</div>\n<div ng-message="minlength">Too few characters entered</div>\n<div ng-message="maxlength">Too many characters entered</div>\n<div ng-message="min">That value is too small</div>\n<div ng-message="max">That value is too large</div>\n<div ng-message="email">You need to enter a valid email address</div>\n<div ng-message="pattern">This field does not match the expected pattern</div>\n');
 $templateCache.put('form-button-bs2.html','<div class="form-btn-grp">\n  <div class="btn-group pull-right">\n    <button id="saveButton" class="btn btn-mini btn-primary form-btn" ng-click="save()" ng-disabled="isSaveDisabled()"><i class="icon-ok"></i> Save</button>\n    <div id="why-disabled" ng-class="{showwhy:!!whyDisabled}" ng-bind-html="whyDisabled"></div>\n    <button id="cancelButton" class="btn btn-mini btn-warning form-btn" ng-click="cancel()" ng-disabled="isCancelDisabled()"><i class="icon-remove"></i> Cancel</button>\n  </div>\n  <div class="btn-group pull-right">\n    <button id="newButton" class="btn btn-mini btn-success form-btn" ng-click="newClick()" ng-disabled="isNewDisabled()"><i class="icon-plus"></i> New</button>\n    <button id="deleteButton" class="btn btn-mini btn-danger form-btn" ng-click="deleteClick()" ng-disabled="isDeleteDisabled()"><i class="icon-minus"></i> Delete</button>\n  </div>\n</div>\n');
 $templateCache.put('form-button-bs3.html','<div class="form-btn-grp">\n  <div class="btn-group pull-right">\n    <button id="saveButton" class="btn btn-primary form-btn btn-xs" ng-click="save()" ng-disabled="isSaveDisabled()"><i class="glyphicon glyphicon-ok"></i> Save</button>\n    <div id="why-disabled" ng-class="{showwhy:!!whyDisabled}" ng-bind-html="whyDisabled"></div>\n    <button id="cancelButton" class="btn btn-warning form-btn btn-xs" ng-click="cancel()" ng-disabled="isCancelDisabled()"><i class="glyphicon glyphicon-remove"></i> Cancel</button>\n  </div>\n  <div class="btn-group pull-right">\n    <button id="newButton" class="btn btn-success form-btn btn-xs" ng-click="newClick()" ng-disabled="isNewDisabled()"><i class="glyphicon glyphicon-plus"></i> New</button>\n    <button id="deleteButton" class="btn btn-danger form-btn btn-xs" ng-click="deleteClick()" ng-disabled="isDeleteDisabled()"><i class="glyphicon glyphicon-minus"></i> Delete</button>\n  </div>\n</div>\n');
-$templateCache.put('search-bs2.html','<form class="navbar-search pull-right">\n    <div id="search-cg" class="control-group" ng-class="errorClass">\n        <input type="text" spellcheck="false" autocomplete="off" id="searchinput" ng-model="searchTarget" ng-model-options="{debounce:500}" class="search-query" placeholder="{{searchPlaceholder}}" ng-keyup="handleKey($event)">\n    </div>\n</form>\n<div class="results-container" ng-show="results.length >= 1">\n    <div class="search-results">\n        <div ng-repeat="result in results">\n            <a href="{{result.href}}" ng-class="resultClass($index)" title="{{result.additional}}">{{result.resourceText}} {{result.text}}</a>\n        </div>\n        <div ng-show="moreCount > 0">(plus more - continue typing to narrow down search...)\n        </div>\n    </div>\n</div>\n');
-$templateCache.put('search-bs3.html','<form class="pull-right navbar-form">\n    <div id="search-cg" class="form-group" ng-class="errorClass">\n        <input type="text" spellcheck="false" autocomplete="off" id="searchinput" ng-model="searchTarget" ng-model-options="{debounce:500}" class="search-query form-control" placeholder="{{searchPlaceholder}}" ng-keyup="handleKey($event)">\n    </div>\n</form>\n<div class="results-container" ng-show="results.length >= 1">\n    <div class="search-results">\n        <div ng-repeat="result in results">\n            <a href="{{result.href}}" ng-class="resultClass($index)" title="{{result.additional}}">{{result.resourceText}} {{result.text}}</a>\n        </div>\n        <div ng-show="moreCount > 0">(plus more - continue typing to narrow down search...)\n        </div>\n    </div>\n</div>\n');}]);
+$templateCache.put('search-bs2.html','<form class="navbar-search pull-right">\n    <div id="search-cg" class="control-group" ng-class="errorClass">\n        <input type="text" spellcheck="false" autocomplete="off" id="searchinput" ng-model="searchTarget" ng-model-options="{debounce:250}" class="search-query" placeholder="{{searchPlaceholder}}" ng-keyup="handleKey($event)">\n    </div>\n</form>\n<div class="results-container" ng-show="results.length >= 1">\n    <div class="search-results">\n        <div ng-repeat="result in results">\n            <a href="{{result.href}}" ng-class="resultClass($index)" title="{{result.additional}}">{{result.resourceText}} {{result.text}}</a>\n        </div>\n        <div ng-show="moreCount > 0">(plus more - continue typing to narrow down search...)\n        </div>\n    </div>\n</div>\n');
+$templateCache.put('search-bs3.html','<form class="pull-right navbar-form">\n    <div id="search-cg" class="form-group" ng-class="errorClass">\n        <input type="text" spellcheck="false" autocomplete="off" id="searchinput" ng-model="searchTarget" ng-model-options="{debounce:250}" class="search-query form-control" placeholder="{{searchPlaceholder}}" ng-keyup="handleKey($event)">\n    </div>\n</form>\n<div class="results-container" ng-show="results.length >= 1">\n    <div class="search-results">\n        <div ng-repeat="result in results">\n            <a href="{{result.href}}" ng-class="resultClass($index)" title="{{result.additional}}">{{result.resourceText}} {{result.text}}</a>\n        </div>\n        <div ng-show="moreCount > 0">(plus more - continue typing to narrow down search...)\n        </div>\n    </div>\n</div>\n');}]);