V8: Add indicators to required properties within nested content (#7217)

src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less

@@ -14,6 +14,17 @@
     pointer-events: none;
 }
 
+.umb-nested-content--mandatory {
+    /*
+        yeah so this is a pain, but we must be super specific in targeting the mandatory property labels,
+        otherwise all properties within a reqired, nested, nested content property will all appear mandatory
+    */
+    > ng-form > .control-group > .umb-el-wrap > .control-header label:after {
+        content: '*';
+        color: @red;
+    }
+}
+
 .umb-nested-content-overlay {
     position: absolute;
     top: 0;

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

@@ -503,6 +503,7 @@
                     // Force validation to occur server side as this is the
                     // only way we can have consistency between mandatory and
                     // regex validation messages. Not ideal, but it works.
+                    prop.ncMandatory = prop.validation.mandatory;
                     prop.validation = {
                         mandatory: false,
                         pattern: ""

src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.editor.html

@@ -1,7 +1,7 @@
 <div class="umb-pane">
   <div ng-repeat="property in tab.properties" class="umb-nested-content-property-container">
 
-    <umb-property property="property" ng-class="{'umb-nested-content--not-supported': property.notSupported}" data-element="property-{{property.alias}}">
+    <umb-property property="property" ng-class="{'umb-nested-content--not-supported': property.notSupported, 'umb-nested-content--mandatory': property.ncMandatory}" data-element="property-{{property.alias}}">
       <umb-property-editor model="property"></umb-property-editor>
     </umb-property>
 
@@ -10,4 +10,4 @@
     <p ng-if="property.notSupported">{{property.notSupportedMessage}}</p>
 
   </div>
-</div>
+</div>