feat(SQ/StatusEmojiAndColorComboBox): Created new component

Created new `StatusEmojiAndColorComboBox` component that behaves like a combobox but with specific content item and delegate look (emoji + color + text).

ui/StatusQ/doc/src/statusqcomponents.qdoc

@@ -38,6 +38,10 @@
        \li \l{StatusNavigationPanelHeadline}
        \li \l{StatusRoundIcon}
        \li \l{StatusRoundedImage}
+       \li \l{StatusMacWindowButtons}
+       \li \l{StatusListItemBadge}
+       \li \l{StatusExpandableItem}
+       \li \l{StatusEmojiAndColorComboBox}
        \li \l{StatusSmartIdenticon}
        \li \l{StatusTagSelector}
        \li \l{StatusToastMessage}

ui/StatusQ/src/StatusQ/Components/StatusEmojiAndColorComboBox.qml

@@ -0,0 +1,114 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Core.Utils 0.1
+import StatusQ.Core.Theme 0.1
+
+// model expected roles: emoji, color, name
+/*!
+   \qmltype StatusEmojiAndColorComboBox
+   \inherits StatusComboBox
+   \inqmlmodule StatusQ.Components
+   \since StatusQ.Components 0.1
+   \brief It is a combobox where the delegate and the content item are an emoji + color and the text.
+
+   The \c StatusEmojiAndColorComboBox behaves like a combobox but with specific content item and delegate look (emoji + color + text)
+
+   Example of how the control looks like:
+   \image status_emoji_and_color_combobox.png
+
+   Example of how to use it:
+
+   \qml
+            StatusEmojiAndColorComboBox {
+                Layout.preferredWidth: 300
+                model: WalletAccountsModel {}
+                type: StatusComboBox.Type.Secondary
+                size: StatusComboBox.Size.Small
+                implicitHeight: 44
+                defaultAssetName: "filled-account"
+            }
+   \endqml
+
+   For a list of components available see StatusQ.
+*/
+StatusComboBox {
+    id: root
+
+    /*!
+       \qmlproperty string StatusEmojiAndColorComboBox::v
+       This property holds the default asset shown if no emoji provided.
+    */
+    property string defaultAssetName: "info"
+
+    /*!
+       \qmlproperty string StatusEmojiAndColorComboBox::v
+       This property holds the delegate height value.
+    */
+    property int delegateHeight: 44
+
+    QtObject {
+        id: d
+
+        readonly property string emoji: ModelUtils.get(root.model, currentIndex, "emoji")
+        readonly property string color: ModelUtils.get(root.model, currentIndex, "color")
+    }
+
+    control.textRole: "name"
+
+    contentItem: CustomComboItem {
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.verticalCenter: parent.verticalCenter
+        text: root.control.displayText
+        emoji: d.emoji
+        color: d.color
+    }
+
+    delegate: CustomComboItem {
+        width: root.width
+        text: model.name
+        emoji: model.emoji
+        color: model.color
+        highlighted: root.control.highlightedIndex === index
+    }
+
+    component CustomComboItem: StatusItemDelegate {
+        id: comboItem
+
+        property string emoji
+        property color color
+
+        height: root.delegateHeight
+
+        contentItem: RowLayout {
+            anchors.fill: parent
+            anchors.margins: 8
+            spacing: 8
+
+            StatusSmartIdenticon {
+                asset.emoji: comboItem.emoji ?? ""
+                asset.color: comboItem.color
+                asset.name: !!comboItem.emoji ? "" : root.defaultAssetName
+                asset.width: 22
+                asset.height: asset.width
+                asset.isLetterIdenticon: !!comboItem.emoji
+                asset.bgColor: Theme.palette.primaryColor3
+            }
+
+            StatusBaseText {
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                text: comboItem.text
+                horizontalAlignment: Text.AlignLeft
+                verticalAlignment: Text.AlignVCenter
+                elide: Text.ElideRight
+                font.pixelSize: 13
+                wrapMode: Text.WordWrap
+                color: Theme.palette.directColor1
+            }
+        }
+    }
+}

ui/StatusQ/src/StatusQ/Components/qmldir

@@ -31,6 +31,7 @@ StatusListItemBadge 0.1 StatusListItemBadge.qml
 StatusListItemTag 0.1 StatusListItemTag.qml
 StatusListPicker 0.1 StatusListPicker.qml
 StatusExpandableItem 0.1 StatusExpandableItem.qml
+StatusEmojiAndColorComboBox 0.1 StatusEmojiAndColorComboBox.qml
 StatusSmartIdenticon 0.1 StatusSmartIdenticon.qml
 StatusMessage 0.1 StatusMessage.qml
 StatusMessageHeader 0.1 StatusMessageHeader.qml