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

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
+    }
 }

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,56 +210,66 @@ 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
 
-                 width: root.circleDiameter
+                height: root.circleDiameter
-                 height: width
+                width: {
-                 color: Theme.palette.primaryColor2
+                    if (index > 0 && index < root.pinLen-1 && (index+1) % root.additionalSpacingOnEveryNItems == 0) {
-                 radius: 0.5 * width
+                        return root.circleDiameter + root.additionalSpacing
+                    }
+                    return root.circleDiameter
+                }
 
-                 Rectangle {
+                Rectangle {
-                     id: inner
+                    width: root.circleDiameter
-                     state: background.innerState
+                    height: width
-                     anchors.centerIn: parent
+                    color: Theme.palette.primaryColor2
-                     height: width
+                    radius: 0.5 * width
-                     color: Theme.palette.primaryColor1
-                     radius: 0.5 * width
-                     states: [
-                         State {
-                             name: "NEXT"
-                             StateChangeScript { script: { if(inputText.focus) blinkingAnimation.start() } }
-                             PropertyChanges {target: inner; width: root.circleDiameter / 2}                             
-                         },
-                         State {
-                             name: "FILLED"                             
-                             StateChangeScript { script: if(blinkingAnimation.running) blinkingAnimation.stop() }
-                             PropertyChanges {target: inner; width: root.circleDiameter}
-                             PropertyChanges {target: inner; opacity: 1}
-                         },
-                         State {
-                             name: "EMPTY"
-                             StateChangeScript { script: if(blinkingAnimation.running) blinkingAnimation.stop() }
-                             PropertyChanges {target: inner; width: 0}
-                             PropertyChanges {target: inner; opacity: 1}
-                         }
-                     ]
 
-                     // Animation on transitions
+                    Rectangle {
-                     Behavior on width { NumberAnimation { duration: 200 } }
+                        id: inner
+                        state: container.innerState
+                        anchors.centerIn: parent
+                        height: width
+                        color: Theme.palette.primaryColor1
+                        radius: 0.5 * width
+                        states: [
+                            State {
+                                name: "NEXT"
+                                StateChangeScript { script: { if(inputText.focus) blinkingAnimation.start() } }
+                                PropertyChanges {target: inner; width: root.circleDiameter / 2}
+                            },
+                            State {
+                                name: "FILLED"
+                                StateChangeScript { script: if(blinkingAnimation.running) blinkingAnimation.stop() }
+                                PropertyChanges {target: inner; width: root.circleDiameter}
+                                PropertyChanges {target: inner; opacity: 1}
+                            },
+                            State {
+                                name: "EMPTY"
+                                StateChangeScript { script: if(blinkingAnimation.running) blinkingAnimation.stop() }
+                                PropertyChanges {target: inner; width: 0}
+                                PropertyChanges {target: inner; opacity: 1}
+                            }
+                        ]
 
-                     // Animation on "cursor" blinking
+                        // Animation on transitions
-                     SequentialAnimation {
+                        Behavior on width { NumberAnimation { duration: 200 } }
-                         id: blinkingAnimation
+
-                         loops: Animation.Infinite
+                        // Animation on "cursor" blinking
-                         running: visible
+                        SequentialAnimation {
-                         NumberAnimation { target: inner; property: "opacity"; to: 0; duration: 800;}
+                            id: blinkingAnimation
-                         NumberAnimation { target: inner; property: "opacity"; to: 1; duration: 800;}
+                            loops: Animation.Infinite
-                     }
+                            running: visible
-                 }
+                            NumberAnimation { target: inner; property: "opacity"; to: 0; duration: 800;}
+                            NumberAnimation { target: inner; property: "opacity"; to: 1; duration: 800;}
+                        }
+                    }
+                }
             }
         }
     }