NumberInput UI

source/qml_v2/AdaptiveCardQmlEngine/AdaptiveCardQmlTypes.h

@@ -23,5 +23,9 @@ namespace AdaptiveCardQmlEngine
         qmlRegisterType(QUrl("qrc:qml/CardConstants.qml"), "AdaptiveCardQmlEngine", 1, 0, "CardConstants");
 
         qmlRegisterType(QUrl("qrc:qml/TextBlockRender.qml"), "AdaptiveCardQmlEngine", 1, 0, "TextBlockRender");
+        qmlRegisterType(QUrl("qrc:qml/NumberInputRender.qml"), "AdaptiveCardQmlEngine", 1, 0, "NumberInputRender");
+        qmlRegisterType(QUrl("qrc:qml/InputFieldClearIcon.qml"), "AdaptiveCardQmlEngine", 1, 0, "InputFieldClearIcon");
+        qmlRegisterType(QUrl("qrc:qml/InputLabel.qml"), "AdaptiveCardQmlEngine", 1, 0, "InputLabel");
+        qmlRegisterType(QUrl("qrc:qml/InputErrorMessage.qml"), "AdaptiveCardQmlEngine", 1, 0, "InputErrorMessage");
     }
 } // namespace RendererQml

source/qml_v2/AdaptiveCardQmlEngine/CMakeLists.txt

@@ -53,6 +53,7 @@ file(GLOB_RECURSE SOURCES
 	"AdaptiveCardController.cpp"
 	"AdaptiveCardModel.cpp"
 	"CollectionItemModel.cpp"
+	"NumberInputModel.cpp"
 
 	"TextBlockModel.cpp"
 	"ImageModel.cpp"
@@ -74,10 +75,10 @@ file(GLOB_RECURSE SOURCES
 	"AdaptiveCardModel.h"
 	"CollectionItemModel.h"
 
-	"TextBlockModel.h"
-	"ImageModel.h"
 	"TextBlockModel.h"
 	"RichTextBlockModel.h"
+	"NumberInputModel.h"	
+	"ImageModel.h"
 )
 
 # Setup Library

source/qml_v2/AdaptiveCardQmlEngine/models/CollectionItemModel.cpp

@@ -2,6 +2,7 @@
 #include "TextBlockModel.h"
 #include "ImageModel.h"
 #include "RichTextBlockModel.h"
+#include "NumberInputModel.h"
 #include "AdaptiveCardEnums.h"
 
 CollectionItemModel::CollectionItemModel(std::vector<std::shared_ptr<AdaptiveCards::BaseCardElement>> elements, QObject* parent)
@@ -43,6 +44,7 @@ QHash<int, QByteArray> CollectionItemModel::roleNames() const
     cardListModel[TextBlockRole] = "textBlockRole";
     cardListModel[ImageRole] = "imageRole";
     cardListModel[RichTextBlockRole] = "richTextBlockRole";
+    cardListModel[NumberInputRole] = "numberInputRole";
     cardListModel[FillHeightRole] = "fillHeightRole";
 
     return cardListModel;
@@ -64,6 +66,10 @@ void CollectionItemModel::populateRowData(std::shared_ptr<AdaptiveCards::BaseCar
 	case AdaptiveCards::CardElementType::RichTextBlock:
         populateRichTextBlockModel(std::dynamic_pointer_cast<AdaptiveCards::RichTextBlock>(element), rowContent);
         break;
+    case AdaptiveCards::CardElementType::NumberInput:
+        populateNumberInputModel(std::dynamic_pointer_cast<AdaptiveCards::NumberInput>(element), rowContent);
+        break;
+
     default:
         break;
     }
@@ -86,3 +92,9 @@ void CollectionItemModel::populateRichTextBlockModel(std::shared_ptr<AdaptiveCar
     rowContent[CollectionModelRole::DelegateType] = QVariant::fromValue(AdaptiveCardEnums::CardElementType::RichTextBlock);
     rowContent[CollectionModelRole::RichTextBlockRole] = QVariant::fromValue(new RichTextBlockModel(richTextBlock, nullptr));
 }
+
+void CollectionItemModel::populateNumberInputModel(std::shared_ptr<AdaptiveCards::NumberInput> numberInput, RowContent& rowContent)
+{
+    rowContent[CollectionModelRole::DelegateType] = QVariant::fromValue(AdaptiveCardEnums::CardElementType::NumberInput);
+    rowContent[CollectionModelRole::NumberInputRole] = QVariant::fromValue(new NumberInputModel(numberInput, nullptr));
+}

source/qml_v2/AdaptiveCardQmlEngine/models/CollectionItemModel.h

@@ -10,11 +10,13 @@
 class TextBlockModel;
 class ImageModel;
 #include "RichTextBlock.h"
+#include "NumberInput.h"
 
 #include "Enums.h"
 
 class TextBlockModel;
 class RichTextBlockModel;
+class NumberInputModel;
 
 class CollectionItemModel : public QAbstractListModel
 {
@@ -26,6 +28,7 @@ class CollectionItemModel : public QAbstractListModel
         TextBlockRole,
         ImageRole,
         RichTextBlockRole,
+        NumberInputRole,
         FillHeightRole
     };
 
@@ -48,4 +51,5 @@ class CollectionItemModel : public QAbstractListModel
     void populateTextBlockModel(std::shared_ptr<AdaptiveCards::TextBlock> textBlock, RowContent& rowContent);
     void populateImageModel(std::shared_ptr<AdaptiveCards::Image> image, RowContent& rowContent);
     void populateRichTextBlockModel(std::shared_ptr<AdaptiveCards::RichTextBlock> rightTextBlock, RowContent& rowContent);
+    void populateNumberInputModel(std::shared_ptr<AdaptiveCards::NumberInput> numberInput, RowContent& rowContent);
 };

source/qml_v2/AdaptiveCardQmlEngine/models/NumberInputModel.cpp

@@ -0,0 +1,13 @@
+#include "NumberInputModel.h"
+#include "SharedAdaptiveCard.h"
+#include <QDebug.h>
+#include "Utils.h"
+#include "MarkDownParser.h"
+
+NumberInputModel::NumberInputModel(std::shared_ptr<AdaptiveCards::NumberInput> numberInput, QObject* parent) :
+    QObject(parent)
+{
+}
+NumberInputModel::~NumberInputModel()
+{
+}

source/qml_v2/AdaptiveCardQmlEngine/models/NumberInputModel.h

@@ -0,0 +1,21 @@
+#pragma once
+#include "AdaptiveCardContext.h"
+#include "NumberInput.h"
+#include "OpenUrlAction.h"
+#include "ToggleVisibilityAction.h"
+#include "SubmitAction.h"
+
+#include <QObject>
+#include <QString>
+#include <QColor>
+#include <QFont>
+
+class NumberInputModel : public QObject
+{
+    Q_OBJECT
+
+public:
+    explicit NumberInputModel(std::shared_ptr<AdaptiveCards::NumberInput> numberInput, QObject* parent = nullptr);
+    ~NumberInputModel();
+
+};

source/qml_v2/AdaptiveCardQmlEngine/qml/CardConstants.qml

@@ -1,6 +1,6 @@
-import "AdaptiveCardUtils.js" as AdaptiveCardUtils
+import "JSUtils/AdaptiveCardUtils.js" as AdaptiveCardUtils
 import QtQuick 2.15
-pragma Singleton
+//pragma Singleton
 
 QtObject {
     property bool isDarkTheme: false

source/qml_v2/AdaptiveCardQmlEngine/qml/CollectionItemDelegate.qml

@@ -10,9 +10,11 @@ Loader {
     Component.onCompleted :{
         if (model.delegateType == AdaptiveCardEnums.CardElementType.TextBlock)
             source = "TextBlockRender.qml"
-        else if (model.delegateType == AdaptiveCardEnums.CardElementType.Image)
-            source = "ImageRender.qml"
         else if (model.delegateType == AdaptiveCardEnums.CardElementType.RichTextBlock)
             source = "RichTextBlockRender.qml";
-    }
+        else if (model.delegateType == AdaptiveCardEnums.CardElementType.Image)
+            source = "ImageRender.qml"
+        else if (model.delegateType == AdaptiveCardEnums.CardElementType.NumberInput)
+            source = "NumberInputRender.qml";
+    }  
 }

source/qml_v2/AdaptiveCardQmlEngine/qml/InputErrorMessage.qml

@@ -0,0 +1,52 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.3
+import QtGraphicalEffects 1.15
+import QtQuick.Controls 2.15
+import AdaptiveCardQmlEngine 1.0
+import "JSUtils/AdaptiveCardUtils.js" as AdaptiveCardUtils
+
+Rectangle {
+    id: errorMessage
+
+    property string isErrorMessage
+
+    width: parent.width
+    height: errorMessageLabel.implicitHeight
+    color: 'transparent'
+
+    Button {
+        id: errorIcon
+
+        width: cardConst.inputFieldConstants.errorIconWidth
+        anchors.left: parent.left
+        anchors.leftMargin: cardConst.inputFieldConstants.errorIconLeftMargin
+        anchors.topMargin: cardConst.inputFieldConstants.errorIconTopMargin
+        horizontalPadding: 0
+        verticalPadding: 0
+        icon.width: cardConst.inputFieldConstants.errorIconWidth
+        icon.height: cardConst.inputFieldConstants.errorIconHeight
+        icon.color: cardConst.toggleButtonConstants.errorMessageColor
+        anchors.top: parent.top
+        icon.source: cardConst.errorIcon
+        enabled: false
+
+        background: Rectangle {
+            color: 'transparent'
+        }
+
+    }
+
+    Label {
+        id: errorMessageLabel
+
+        wrapMode: Text.Wrap
+        font.pixelSize: cardConst.inputFieldConstants.labelPixelSize
+        Accessible.ignored: true
+        color: cardConst.toggleButtonConstants.errorMessageColor
+        anchors.left: errorIcon.right
+        anchors.leftMargin: cardConst.inputFieldConstants.errorIconLeftMargin
+        anchors.right: parent.right
+        text: isErrorMessage
+    }
+
+}

source/qml_v2/AdaptiveCardQmlEngine/qml/InputFieldClearIcon.qml

@@ -0,0 +1,31 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.3
+import QtGraphicalEffects 1.15
+import QtQuick.Controls 2.15
+import AdaptiveCardQmlEngine 1.0
+import "JSUtils/AdaptiveCardUtils.js" as AdaptiveCardUtils
+
+Button {
+    id: inputFieldClearIcon
+
+    width: cardConst.inputFieldConstants.clearIconSize
+    horizontalPadding: 0
+    verticalPadding: 0
+    icon.width: cardConst.inputFieldConstants.clearIconSize
+    icon.height: cardConst.inputFieldConstants.clearIconSize
+    icon.color: cardConst.inputFieldConstants.clearIconColorNormal
+    icon.source: cardConst.clearIconImage
+    Accessible.name: qsTr("Clear Input")
+    Accessible.role: Accessible.Button
+
+    background: Rectangle {
+        color: 'transparent'
+        radius: cardConst.inputFieldConstants.borderRadius
+
+        WCustomFocusItem {
+            isRectangle: true
+            visible: inputFieldClearIcon.activeFocus
+            designatedParent: parent
+        }
+    }
+}

source/qml_v2/AdaptiveCardQmlEngine/qml/InputLabel.qml

@@ -0,0 +1,19 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.3
+import QtGraphicalEffects 1.15
+import QtQuick.Controls 2.15
+import AdaptiveCardQmlEngine 1.0
+import "JSUtils/AdaptiveCardUtils.js" as AdaptiveCardUtils
+Label {
+    id: inputLabel
+
+    property bool required
+    property string label
+
+    wrapMode: Text.Wrap
+    width: parent.width
+    color: cardConst.toggleButtonConstants.textColor
+    font.pixelSize: cardConst.inputFieldConstants.labelPixelSize
+    Accessible.ignored: true
+    text: required ? AdaptiveCardUtils.escapeHtml(label) + " " + "<font color='" + cardConst.inputFieldConstants.errorMessageColor + "'>*</font>" : AdaptiveCardUtils.escapeHtml(label)
+}