feat(StatusBaseInput): introduce `component` property

This property enables users to load any component into the input field.
This is useful for rendering a "clearable" icon button, simple icons or
even more complex buttons.

Usage:

```qml
StatusBaseInput {
    ...
    component: StatusIcon {
        name: "cancel"
        color: Theme.palette.dangerColor1
        width: 16
    }
}
```

The `clearable` property of `StatusBaseInput` also renders and icon button
on the right hand side. With this new feature, `clearable` is just a short-hand
for:

```qml
StatusBaseInput {
    ...
    component: StatusFlatRoundButton {
        visible: edit.text.length != 0 &&
                statusBaseInput.clearable &&
                !statusBaseInput.multiline &&
                edit.activeFocus
        type: StatusFlatRoundButton.Type.Secondary
        width: 24
        height: 24
        icon.name: "clear"
        icon.width: 16
        icon.height: 16
        icon.color: Theme.palette.baseColor1
        onClicked: {
            edit.clear()
        }
    }
}
```

Closes #380

ui/StatusQ/sandbox/StatusInputPage.qml

@@ -102,6 +102,17 @@ Column {
         ]
     }
 
+    StatusInput {
+        label: "Label"
+        input.placeholderText: "Input width component (right side)"
+        input.component: StatusIcon {
+            icon: "cancel"
+            height: 16
+            color: Theme.palette.dangerColor1
+        }
+    }
+
+
     StatusInput {
         input.multiline: true
         input.placeholderText: "Multiline"

ui/StatusQ/src/StatusQ/Controls/StatusBaseInput.qml

@@ -56,6 +56,23 @@ Item {
         color: Theme.palette.baseColor1
     }
 
+    property Item component
+
+    onClearableChanged: {
+        if (clearable && !component) {
+            clearButtonLoader.active = true
+            clearButtonLoader.parent = statusBaseInputComponentSlot
+        } else {
+            clearButtonLoader.active = false
+        }
+    }
+
+    onComponentChanged: {
+        if (!!component) {
+            component.parent = statusBaseInputComponentSlot
+        }
+    }
+
     implicitWidth: 448
     implicitHeight: multiline ? Math.max((edit.implicitHeight + topPadding + bottomPadding), 44) : 44
 
@@ -80,6 +97,17 @@ Item {
             return sensor.containsMouse ? Theme.palette.primaryColor2 : "transparent"
         }
 
+
+        MouseArea {
+            id: sensor
+            enabled: !edit.activeFocus
+            hoverEnabled: true
+            anchors.fill: parent
+            cursorShape: Qt.IBeamCursor
+            onClicked: {
+                edit.forceActiveFocus()
+            }
+
             StatusIcon {
                 id: statusIcon
                 anchors.topMargin: 10
@@ -101,12 +129,18 @@ Item {
                 anchors.bottom: parent.bottom
                 anchors.left: (statusIcon.visible && statusBaseInput.leftIcon) ?
                               statusIcon.right : parent.left
-            anchors.right: (statusIcon.visible && !statusBaseInput.leftIcon) ?
-                            statusIcon.left : parent.right
+                anchors.right: {
+                    if (!!statusBaseInput.component) {
+                        return statusBaseInputComponentSlot.left
+                    }
+                    return statusIcon.visible && !statusBaseInput.leftIcon ? statusIcon.left : parent.right
+                }
                 anchors.leftMargin: statusIcon.visible && statusBaseInput.leftIcon ? 8
                                     : statusBaseInput.leftPadding
-            anchors.rightMargin: statusBaseInput.rightPadding + clearable ? clearButton.width
-                                 : statusIcon.visible && !leftIcon ? 8: 0
+                anchors.rightMargin: {
+                    return clearable ? clearButtonLoader.width + 12 : 
+                        (statusIcon.visible && !leftIcon) || !!statusBaseInput.component ? 8 : 0
+                }
                 anchors.topMargin: statusBaseInput.topPadding
                 anchors.bottomMargin: statusBaseInput.bottomPadding
                 contentWidth: edit.paintedWidth
@@ -193,26 +227,26 @@ Item {
                 }
 
             } // Flickable
-        MouseArea {
-            id: sensor
-            enabled: !edit.activeFocus
-            hoverEnabled: true
-            anchors.fill: parent
-            cursorShape: Qt.IBeamCursor
-            onClicked: edit.forceActiveFocus()
-        }
 
+            Item {
+                id: statusBaseInputComponentSlot
+                anchors.right: parent.right
+                anchors.rightMargin: 12
+                width: childrenRect.width
+                height: childrenRect.height
+                anchors.verticalCenter: parent.verticalCenter
+            }
+        }
     } // Rectangle
 
-    StatusFlatRoundButton {
+    Loader {
+        id: clearButtonLoader
+        sourceComponent: StatusFlatRoundButton {
             id: clearButton
             visible: edit.text.length != 0 &&
                     statusBaseInput.clearable &&
                     !statusBaseInput.multiline &&
                     edit.activeFocus
-        anchors.right: parent.right
-        anchors.rightMargin: 8
-        anchors.verticalCenter: parent.verticalCenter
             type: StatusFlatRoundButton.Type.Secondary
             width: 24
             height: 24
@@ -224,5 +258,7 @@ Item {
                 edit.clear()
             }
         }
+    }
+
 
 }