feat(StatusPinInput): additional spacing for every N-th digit

Two new props exposed so we can sed an extra spacing for every N-th item.
- `additionalSpacingOnEveryNItems` - determines for which item to add an extra space
- `additionalSpacing` - determines the value of extra space which will be added

ui/StatusQ/sandbox/pages/StatusPinInputPage.qml

@@ -72,4 +72,73 @@ Column {
         text: "Introduced PIN: " + regexPinInput.pinInput
         font.pixelSize: 12
     }
+
+    // PUK input that accepts only numbers
+    StatusBaseText {
+        topPadding: 100
+        anchors.horizontalCenter: parent.horizontalCenter
+        color: Theme.palette.directColor1
+        text: "Enter Keycard PUK"
+        font.pixelSize: 30
+        font.bold: true
+    }
+
+    StatusPinInput {
+        id: numbersPukInput
+        anchors.horizontalCenter: parent.horizontalCenter
+        validator: StatusRegularExpressionValidator { regularExpression: /[0-9]+/ }
+        pinLen: 12
+    }
+
+    StatusBaseText {
+        anchors.horizontalCenter: parent.horizontalCenter
+        color: Theme.palette.dangerColor1
+        text: "Only numbers allowed"
+        font.pixelSize: 16
+    }
+
+    StatusBaseText {
+        anchors.horizontalCenter: parent.horizontalCenter
+        color: Theme.palette.directColor1
+        text: "Introduced PUK: " + numbersPukInput.pinInput
+        font.pixelSize: 12
+    }
+
+    // PUK input that accepts only numbers
+    StatusBaseText {
+        topPadding: 100
+        anchors.horizontalCenter: parent.horizontalCenter
+        color: Theme.palette.directColor1
+        text: "Enter Keycard PUK"
+        font.pixelSize: 30
+        font.bold: true
+    }
+
+    StatusPinInput {
+        id: numbersPukInputWithSpacing
+        anchors.horizontalCenter: parent.horizontalCenter
+        validator: StatusRegularExpressionValidator { regularExpression: /[0-9]+/ }
+        pinLen: 12
+        additionalSpacing: 32
+        additionalSpacingOnEveryNItems: 4
+
+        Component.onCompleted: {
+            numbersPukInputWithSpacing.statesInitialization()
+            numbersPukInputWithSpacing.forceFocus()
+        }
+    }
+
+    StatusBaseText {
+        anchors.horizontalCenter: parent.horizontalCenter
+        color: Theme.palette.dangerColor1
+        text: "Only numbers allowed"
+        font.pixelSize: 16
+    }
+
+    StatusBaseText {
+        anchors.horizontalCenter: parent.horizontalCenter
+        color: Theme.palette.directColor1
+        text: "Introduced PUK: " + numbersPukInputWithSpacing.pinInput
+        font.pixelSize: 12
+    }
 }

ui/StatusQ/src/StatusQ/Controls/StatusPinInput.qml

@@ -77,6 +77,20 @@ Item {
     */
     property int circleDiameter: 16
 
+    /*!
+       \qmlproperty int StatusPinInput::additionalSpacingOnEveryNItems
+       This property allows you to customize spacing among every N-th pin. By default the value is 0, which
+       means only regular `circleSpacing` will be applied, meaning that spacing among all pins will be the same.
+    */
+    property int additionalSpacingOnEveryNItems: 0
+
+    /*!
+       \qmlproperty int StatusPinInput::additionalSpacing
+       This property allows you to customize spacing between pin circles on every `additionalSpacingOnEveryNItems` items.
+       This additionalSpacing won't be applied if `additionalSpacingOnEveryNItems` is set to `0`.
+    */
+    property int additionalSpacing: 0
+
     QtObject {
         id: d
         property int currentPinIndex: 0
@@ -151,8 +165,8 @@ Item {
         }
     }
 
-    width: (root.circleDiameter + root.circleSpacing) * root.pinLen - root.circleSpacing
+    implicitWidth: childrenRect.width
-    height: root.circleDiameter
+    implicitHeight: childrenRect.height
 
     // Pin input data management object:
     TextInput {
@@ -196,12 +210,21 @@ Item {
             id: repeater
             model: root.pinLen
 
-            Rectangle {
+            Item {
-                id: background
+                id: container
                 property string innerState: "EMPTY"
                 property alias blinkingAnimation: blinkingAnimation
                 property alias innerOpacity: inner.opacity
 
+                height: root.circleDiameter
+                width: {
+                    if (index > 0 && index < root.pinLen-1 && (index+1) % root.additionalSpacingOnEveryNItems == 0) {
+                        return root.circleDiameter + root.additionalSpacing
+                    }
+                    return root.circleDiameter
+                }
+
+                Rectangle {
                     width: root.circleDiameter
                     height: width
                     color: Theme.palette.primaryColor2
@@ -209,7 +232,7 @@ Item {
 
                     Rectangle {
                         id: inner
-                     state: background.innerState
+                        state: container.innerState
                         anchors.centerIn: parent
                         height: width
                         color: Theme.palette.primaryColor1
@@ -249,6 +272,7 @@ Item {
                 }
             }
         }
+    }
 
     MouseArea {
         id: mouseArea