Block grid area allowance editor (#14582)

* Add position relative to button to fix issue with umb-outline on button element

* Add pattern attribute to get more specific virtual numeric keyboard on some devices as we expect integer values

* Fix missing localization of title attributes due missing @ prefix

* Fix incorrect end-closing tag

src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umb-block-grid-area-allowance-editor.html

@@ -8,38 +8,39 @@
             <select 
                 ng-model="allowance.$chosenValue"
                 localize="title"
-                title="blockEditor_pickSpecificAllowance"
-                required
-            >
+                title="@blockEditor_pickSpecificAllowance"
+                required>
                 <option ng-repeat="blockGroup in vm.allBlockGroups" value="groupKey:{{blockGroup.key}}">{{blockGroup.name}}</option>
                 <option disabled value="">---------</option>
                 <option ng-repeat="blockType in vm.allBlockTypes" ng-init="elementType = vm.getElementTypeByKey(blockType.contentElementTypeKey)" value="elementTypeKey:{{elementType.key}}">{{elementType.name}}</option>
             </select>
             <input 
                 type="number"
+                pattern="[0-9]*"
                 name="label"
                 min="0"
                 ng-max="model.value.max"
                 placeholder="0"
                 ng-model="allowance.minAllowed"
                 localize="title"
-                title="blockEditor_allowanceMinimum"
-                fix-number/>
+                title="@blockEditor_allowanceMinimum"
+                fix-number />
             <span>–</span>
             <input 
                 type="number"
+                pattern="[0-9]*"
                 name="label"
                 ng-model="allowance.maxAllowed"
                 placeholder="∞"
                 ng-min="model.value.min || 0"
                 localize="title"
-                title="blockEditor_allowanceMaximum"
-                fix-number/>
+                title="@blockEditor_allowanceMaximum"
+                fix-number />
             <button 
                 type="button" 
                 class="btn-reset umb-outline"
                 localize="title"
-                title="actions_delete"
+                title="@actions_delete"
                 ng-click="vm.deleteAllowance(allowance);">
                 <umb-icon icon="icon-trash" class="icon"></umb-icon>
                 <span class="sr-only">

src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umb-block-grid-area-allowance-editor.less

@@ -28,19 +28,19 @@
 }
 
 .umb-block-grid-area-allowance-editor__entry button {
+    position: relative;
     border-radius: 3px;
     color: @ui-action-type;
-
     height: 32px;
     display: inline-flex;
     justify-content: center;
     align-items: center;
     width: 32px;
-
     margin-left: 5px;
     align-self: normal;
 }
+
 .umb-block-grid-area-allowance-editor__entry button:hover {
     background-color: @ui-action-hover;
     color: @ui-action-type-hover;
-}
+}

src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umb-block-grid-area-editor.html

@@ -2,7 +2,7 @@
 
     <umb-load-indicator ng-if="vm.loading"></umb-load-indicator>
 
-<div ng-if="vm.loading === false"
+    <div ng-if="vm.loading === false"
         class="umb-block-grid-area-editor__grid-wrapper"
         style="--umb-block-grid--block-grid-columns: {{vm.block.areaGridColumns || vm.rootLayoutColumns}}"
         umb-block-grid-sorter="::vm.sorterOptions"

src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umb-block-grid-configuration-area-entry.html

@@ -1,17 +1,21 @@
 <div>
-
     <div class="__label">{{vm.area.alias}}</div>
 
     <div class="umb-block-grid__area--actions">
-
-        <button type="button" class="btn-reset umb-outline action --edit" localize="title" title="blockEditor_configureArea"
+        <button type="button"
+                class="btn-reset umb-outline action --edit"
+                localize="title"
+                title="@blockEditor_configureArea"
                 ng-click="vm.onEditClick($event);">
             <umb-icon icon="icon-edit" class="icon"></umb-icon>
             <span class="sr-only">
                 <localize key="blockEditor_configureArea">Edit</localize>
             </span>
         </button>
-        <button type="button" class="btn-reset umb-outline action --delete" localize="title" title="blockEditor_deleteArea"
+        <button type="button"
+                class="btn-reset umb-outline action --delete"
+                localize="title"
+                title="@blockEditor_deleteArea"
                 ng-click="vm.onDeleteClick($event);">
             <umb-icon icon="icon-trash" class="icon"></umb-icon>
             <span class="sr-only">
@@ -19,10 +23,14 @@
             </span>
         </button>
     </div>
-
-    <button type="button" class="btn-reset umb-block-grid-area-editor__scale-handler umb-outline" ng-mousedown="vm.scaleHandlerMouseDown($event)" ng-keyup="vm.scaleHandlerKeyUp($event)">
+    
+    <button type="button"
+            class="btn-reset umb-block-grid-area-editor__scale-handler umb-outline"
+            ng-mousedown="vm.scaleHandlerMouseDown($event)"
+            ng-keyup="vm.scaleHandlerKeyUp($event)">
     </button>
+    
     <div class="umb-block-grid-area-editor__scale-label">
         {{vm.area.columnSpan}} x {{vm.area.rowSpan}}
     </div>
-<div>
+</div>