Boolean editors - adds ID attribute to umbToggle (#6512)

src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbtoggle.directive.js

@@ -54,6 +54,7 @@
 </pre>
 
 @param {boolean} checked Set to <code>true</code> or <code>false</code> to toggle the switch.
+@param {string} inputId Set the <code>id</code> of the toggle.
 @param {callback} onClick The function which should be called when the toggle is clicked.
 @param {string=} showLabels Set to <code>true</code> or <code>false</code> to show a "On" or "Off" label next to the switch.
 @param {string=} labelOn Set a custom label for when the switched is turned on. It will default to "On".
@@ -122,6 +123,7 @@
             scope: {
                 checked: "=",
                 disabled: "=",
+                inputId: "@",
                 onClick: "&",
                 labelOn: "@?",
                 labelOff: "@?",

src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-toggle.html

@@ -1,4 +1,4 @@
-<button role="checkbox" aria-checked="{{checked}}" ng-click="click()" type="button" class="umb-toggle" ng-disabled="disabled" ng-class="{'umb-toggle--checked': checked, 'umb-toggle--disabled': disabled}">
+<button role="checkbox" aria-checked="{{checked}}" ng-click="click()" type="button" class="umb-toggle" ng-disabled="disabled" ng-class="{'umb-toggle--checked': checked, 'umb-toggle--disabled': disabled}" id="{{inputId}}">
 
     <span ng-if="!labelPosition && showLabels === 'true' || labelPosition === 'left' && showLabels === 'true'">
         <span ng-if="!checked" class="umb-toggle__label umb-toggle__label--left">{{ displayLabelOff }}</span>

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

@@ -1,5 +1,6 @@
 <div ng-controller="Umbraco.PrevalueEditors.BooleanController">
     <umb-toggle
+        input-id="{{model.alias}}"
         checked="toggleValue"
         on-click="toggle()">
     </umb-toggle>

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

@@ -1,5 +1,6 @@
 <div class="umb-property-editor umb-boolean" ng-controller="Umbraco.PropertyEditors.BooleanController">
     <umb-toggle
+        input-id="{{model.alias}}"
         checked="renderModel.value"
         on-click="toggle()"
         show-labels="{{model.config.labelOn ? 'true': 'false'}}"
@@ -7,4 +8,4 @@
         label-on="{{model.config.labelOn}}"
         label-off="{{model.config.labelOn}}">
     </umb-toggle>
-</div>
+</div>