EpiServer v10 all properties view - Add a red star (*) to required properties / field labels

edit-mode.css

/* Add a required star (*) to fields marked as required */
.Sleek .epi-form-container__section__row label span.edit-required {
    font-weight: bold;
    color: red;
}

edit-mode.js

// Add star (*) after required property labels
require(["dojo/topic"], function(topic){
    topic.subscribe("/dojo/io/stop", function() {
        var elems = document.querySelectorAll(".Sleek .epi-form-container__section__row *[aria-required='true']");
        for (var i = 0; i < elems.length; i++) {
            var getParent = function(elem, cls) {
                if (elem) return (elem.classList.contains(cls)) ? elem : getParent(elem.parentElement, cls);
            }
            var row = getParent(elems[i], 'epi-form-container__section__row');
            if (row && !row.getAttribute('data-required')) {
                row.setAttribute('data-required', '1')
                var label = row.querySelector('label');
                var span = document.createElement('span')
                span.className = 'edit-required';
                span.title = 'Required';
                span.innerHTML = ' *';
                label.appendChild(span);
            }
        }
    });
});

module.config

<?xml version="1.0" encoding="utf-8"?>
<module>
  <clientResources>
    <add name="epi-cms.widgets.base" path="ClientResources/Styles/edit-mode.css" resourceType="Style"/>
    <add name="epi-cms.widgets.base" path="ClientResources/Scripts/edit-mode.js" resourceType="Script"/>
  </clientResources>

  <clientModule>
    <moduleDependencies>
      <add dependency="CMS" type="RunAfter" />
    </moduleDependencies>
  </clientModule>
  
  <dojo>
    <paths>
      <add name="events" path="Scripts" />
    </paths>
  </dojo>
</module>