Sort on y-axis in listview config layouts

[bjarnef]

Prerequisites

• I have added steps to test this contribution in the description below

Description

This PR restrict sorting on y-axis and within parent element. I also noticed the remove button no longer was rendered for custom listviews, because of the self-closing <umb-checkbox ng-if="layout.isSystem === 1" model="layout.selected" />. Changing this to <umb-checkbox ng-if="layout.isSystem === 1" model="layout.selected"></umb-checkbox> fixes this issue.

Previous it looked like this as the GIF in this PR:
#5405

In both umb-checkbox and umb-radiobutton I noticed the label had child <div> elements, which isn't valid for <label>, so changing this to <span> instead.

Finally the "Add layout" button is also removed outside the sortable placeholder, so it isn't part of the sortable area.

[nul800sebastiaan]

Wonderful @bjarnef! Since 8.7.0 has been closed for additional changes, I'll mark this for 8.7.1 - we'll need to cherrypick this one after 8.7.0 release.

[bjarnef]

@nul800sebastiaan was this one merged correctly to v8/contrib branch?
I see some of the changes here, but not this change which changed this self-closing umb-checkbox:
https://github.com/umbraco/Umbraco-CMS/pull/8422/files#diff-c84512d9cc059db603911cd477e1d82eR34

Since angular element directives/components are custom HTML elements, they can't be self-closing elements like native elements like e.g. <input type="checkbox" value="" />
https://stackoverflow.com/a/25012451/1693918

At the moment it isn't possible via the backoffice UI to remove custom listview layouts, because the umb-checkbox isn't rendered correct.
https://github.com/umbraco/Umbraco-CMS/blob/v8/contrib/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.html#L34

[bjarnef]

@nul800sebastiaan okay, it was merged, but overwritten again when you merged the PR from @BatJan 1cd79d8#diff-c84512d9cc059db603911cd477e1d82e

I have submitted a new PR to fix this: #8478