From 9fbac0fde7eb04a99b9210658cab7e8a5e65b81c Mon Sep 17 00:00:00 2001
From: Fernando Quilez Esquitino <fernando.esquitino@telefonica.com>
Date: Wed, 8 Nov 2023 18:07:34 +0100
Subject: [PATCH 01/13] implement callout image xml version

---
 .../components/CalloutsCatalogFragment.kt     |  7 ++++
 .../res/layout/screen_callouts_catalog.xml    |  8 ++++
 .../telefonica/mistica/callout/CalloutView.kt | 18 +++++++++
 library/src/main/res/layout/callout_view.xml  | 40 +++++++++++++------
 4 files changed, 61 insertions(+), 12 deletions(-)

diff --git a/catalog/src/main/java/com/telefonica/mistica/catalog/ui/classic/components/CalloutsCatalogFragment.kt b/catalog/src/main/java/com/telefonica/mistica/catalog/ui/classic/components/CalloutsCatalogFragment.kt
index a02ee88e9..810a35167 100644
--- a/catalog/src/main/java/com/telefonica/mistica/catalog/ui/classic/components/CalloutsCatalogFragment.kt
+++ b/catalog/src/main/java/com/telefonica/mistica/catalog/ui/classic/components/CalloutsCatalogFragment.kt
@@ -57,6 +57,13 @@ class CalloutsCatalogFragment : Fragment() {
             } else {
                 setIcon(null)
             }
+
+            if (view.findViewById<CheckBoxInput>(R.id.show_image_input).isChecked()) {
+                setImage(R.drawable.ic_callout)
+            } else {
+                setImage(null)
+            }
+
             setDismissable(view.findViewById<CheckBoxInput>(R.id.dismiss_input).isChecked())
             val inverse = view.findViewById<CheckBoxInput>(R.id.inverse_input).isChecked()
             setInverse(inverse)
diff --git a/catalog/src/main/res/layout/screen_callouts_catalog.xml b/catalog/src/main/res/layout/screen_callouts_catalog.xml
index 91568b9a3..6988b60fc 100644
--- a/catalog/src/main/res/layout/screen_callouts_catalog.xml
+++ b/catalog/src/main/res/layout/screen_callouts_catalog.xml
@@ -37,6 +37,14 @@
 				app:inputCheckText="Show icon"
 				/>
 
+		<com.telefonica.mistica.input.CheckBoxInput
+				android:id="@+id/show_image_input"
+				android:layout_width="match_parent"
+				android:layout_height="wrap_content"
+				android:layout_margin="8dp"
+				app:inputCheckText="Show image"
+				/>
+
 		<com.telefonica.mistica.input.CheckBoxInput
 				android:id="@+id/dismiss_input"
 				android:layout_width="match_parent"
diff --git a/library/src/main/java/com/telefonica/mistica/callout/CalloutView.kt b/library/src/main/java/com/telefonica/mistica/callout/CalloutView.kt
index b19517466..8e213ca7a 100644
--- a/library/src/main/java/com/telefonica/mistica/callout/CalloutView.kt
+++ b/library/src/main/java/com/telefonica/mistica/callout/CalloutView.kt
@@ -39,6 +39,11 @@ import com.telefonica.mistica.util.getThemeColor
         attribute = "calloutIcon",
         method = "setIcon",
     ),
+    BindingMethod(
+        type = CalloutView::class,
+        attribute = "calloutImage",
+        method = "setImage",
+    ),
     BindingMethod(
         type = CalloutView::class,
         attribute = "calloutButtonsConfig",
@@ -104,6 +109,7 @@ class CalloutView @JvmOverloads constructor(
     annotation class ButtonsConfig
 
     private var icon: ImageView
+    private var image: ImageView
     private var title: TextView
     private var description: TextView
     private var buttonsContainer: View
@@ -119,6 +125,7 @@ class CalloutView @JvmOverloads constructor(
 
         icon = findViewById(R.id.callout_icon)
         icon.setColorFilter(context.getThemeColor(R.attr.colorNeutralHigh))
+        image = findViewById(R.id.callout_image)
         title = findViewById(R.id.callout_title)
         description = findViewById(R.id.callout_description)
         buttonsContainer = findViewById(R.id.callout_buttons_container)
@@ -207,11 +214,22 @@ class CalloutView @JvmOverloads constructor(
         if (iconRes != null) {
             icon.setImageResource(iconRes)
             icon.visibility = VISIBLE
+            image.visibility = GONE
         } else {
             icon.visibility = GONE
         }
     }
 
+    fun setImage(@DrawableRes iconRes: Int?) {
+        if (iconRes != null) {
+            image.setImageResource(iconRes)
+            image.visibility = VISIBLE
+            icon.visibility = GONE
+        } else {
+            image.visibility = GONE
+        }
+    }
+
     fun setIconDrawable(drawable: Drawable) {
         icon.setImageDrawable(drawable)
         icon.visibility = VISIBLE
diff --git a/library/src/main/res/layout/callout_view.xml b/library/src/main/res/layout/callout_view.xml
index eb572ffc0..d9065b06a 100644
--- a/library/src/main/res/layout/callout_view.xml
+++ b/library/src/main/res/layout/callout_view.xml
@@ -22,22 +22,38 @@
 			android:contentDescription="@string/close_button_content_description"
 			/>
 
-	<ImageView
-			android:id="@+id/callout_icon"
+	<FrameLayout
+		android:id="@+id/callout_image_layout"
+			android:layout_width="wrap_content"
+			android:layout_height="wrap_content"
 			app:layout_constraintTop_toTopOf="parent"
 			app:layout_constraintStart_toStartOf="parent"
-			android:layout_width="24dp"
-			android:layout_height="24dp"
-			android:layout_marginStart="16dp"
-			android:importantForAccessibility="no"
-			tools:src="@tools:sample/avatars"
-			/>
+		android:layout_marginStart="16dp">
+
+		<ImageView
+				android:id="@+id/callout_icon"
+				android:layout_width="24dp"
+				android:layout_height="24dp"
+				android:importantForAccessibility="no"
+				tools:src="@tools:sample/avatars"
+				/>
+
+		<ImageView
+				android:id="@+id/callout_image"
+				android:layout_width="40dp"
+				android:layout_height="40dp"
+				android:importantForAccessibility="no"
+				tools:src="@tools:sample/avatars"
+				tools:visibility="gone"
+				/>
+
+	</FrameLayout>
 
 	<TextView
 			android:id="@+id/callout_title"
 			app:layout_constraintTop_toTopOf="parent"
 			app:layout_constraintEnd_toStartOf="@id/callout_close_button"
-			app:layout_constraintStart_toEndOf="@id/callout_icon"
+			app:layout_constraintStart_toEndOf="@id/callout_image_layout"
 			android:layout_marginStart="16dp"
 			android:layout_marginEnd="16dp"
 			android:layout_width="0dp"
@@ -52,7 +68,7 @@
 			android:id="@+id/callout_description"
 			app:layout_constraintTop_toBottomOf="@id/callout_title"
 			app:layout_constraintEnd_toStartOf="@id/callout_close_button"
-			app:layout_constraintStart_toEndOf="@id/callout_icon"
+			app:layout_constraintStart_toEndOf="@id/callout_image_layout"
 			android:layout_width="0dp"
 			android:layout_height="wrap_content"
 			android:layout_marginStart="16dp"
@@ -71,7 +87,7 @@
 			android:layout_marginStart="16dp"
 			android:layout_marginEnd="16dp"
 			app:layout_constraintTop_toBottomOf="@id/callout_description"
-			app:layout_constraintStart_toEndOf="@id/callout_icon"
+			app:layout_constraintStart_toEndOf="@id/callout_image_layout"
 			app:layout_constraintEnd_toEndOf="parent"
 			>
 
@@ -109,7 +125,7 @@
 			android:layout_width="wrap_content"
 			android:layout_height="wrap_content"
 			app:layout_constraintStart_toStartOf="parent"
-			app:constraint_referenced_ids="callout_icon"
+			app:constraint_referenced_ids="callout_image_layout"
 			app:barrierDirection="end"
 			/>
 

From 7c800a56777c47a6ce60f65055a26989d38ee942 Mon Sep 17 00:00:00 2001
From: Fernando Quilez Esquitino <fernando.esquitino@telefonica.com>
Date: Wed, 8 Nov 2023 18:33:13 +0100
Subject: [PATCH 02/13] implement callout image compose version

---
 .../catalog/ui/compose/components/Callouts.kt | 10 ++++++
 .../mistica/compose/callout/Callout.kt        | 33 ++++++++++++++++---
 2 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/Callouts.kt b/catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/Callouts.kt
index eb7865cac..9b91a3543 100644
--- a/catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/Callouts.kt
+++ b/catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/Callouts.kt
@@ -56,6 +56,15 @@ fun Callouts() {
             Text("Show icon")
         }
 
+        var showImage by remember { mutableStateOf(false) }
+        Row(
+            modifier = Modifier.padding(horizontal = 16.dp),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Checkbox(checked = showImage, onCheckedChange = { showImage = !showImage })
+            Text("Show image")
+        }
+
         var dismissable by remember { mutableStateOf(false) }
         Row(
             modifier = Modifier.padding(horizontal = 16.dp),
@@ -133,6 +142,7 @@ fun Callouts() {
                     description = description.takeIf { it.isNotBlank() },
                     buttonConfig = buttonConfig,
                     iconRes = if (showIcon) R.drawable.ic_callout else null,
+                    imageRes = if (showImage) R.drawable.ic_callout else null,
                     dismissable = dismissable,
                     inverse = inverse,
                     onDismiss = { isShown = false },
diff --git a/library/src/main/java/com/telefonica/mistica/compose/callout/Callout.kt b/library/src/main/java/com/telefonica/mistica/compose/callout/Callout.kt
index 161369a61..1066388d3 100644
--- a/library/src/main/java/com/telefonica/mistica/compose/callout/Callout.kt
+++ b/library/src/main/java/com/telefonica/mistica/compose/callout/Callout.kt
@@ -8,7 +8,9 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
@@ -31,6 +33,7 @@ fun Callout(
     description: String?,
     buttonConfig: CalloutButtonConfig,
     @DrawableRes iconRes: Int? = null,
+    @DrawableRes imageRes: Int? = null,
     dismissable: Boolean,
     onDismiss: (() -> Unit)? = null,
     inverse: Boolean,
@@ -57,11 +60,27 @@ fun Callout(
             verticalAlignment = Alignment.Top,
         ) {
             iconRes?.let {
+                if (imageRes == null) {
+                    Image(
+                        modifier = Modifier
+                            .padding(end = 16.dp)
+                            .width(24.dp)
+                            .height(24.dp),
+                        painter = painterResource(id = iconRes),
+                        contentDescription = null,
+                        colorFilter = ColorFilter.tint(MisticaTheme.colors.neutralHigh)
+                    )
+                }
+            }
+
+            imageRes?.let {
                 Image(
-                    modifier = Modifier.padding(end = 16.dp),
-                    painter = painterResource(id = iconRes),
-                    contentDescription = null,
-                    colorFilter = ColorFilter.tint(MisticaTheme.colors.neutralHigh)
+                    modifier = Modifier
+                        .padding(end = 16.dp)
+                        .width(40.dp)
+                        .height(40.dp),
+                    painter = painterResource(id = imageRes),
+                    contentDescription = null
                 )
             }
 
@@ -91,9 +110,11 @@ fun Callout(
                     when (buttonConfig) {
                         CalloutButtonConfig.NONE -> { /* No buttons are shown */
                         }
+
                         CalloutButtonConfig.PRIMARY -> {
                             PrimaryButton(text = primaryButtonText, onClick = onPrimaryButtonClick)
                         }
+
                         CalloutButtonConfig.PRIMARY_AND_LINK -> {
                             PrimaryButton(
                                 text = primaryButtonText,
@@ -102,9 +123,11 @@ fun Callout(
                             )
                             LinkButton(text = linkText, onClick = onLinkClicked)
                         }
+
                         CalloutButtonConfig.SECONDARY -> {
                             SecondaryButton(text = secondaryButtonText, onClick = onSecondaryButtonClick)
                         }
+
                         CalloutButtonConfig.PRIMARY_AND_SECONDARY -> {
                             PrimaryButton(
                                 text = primaryButtonText,
@@ -113,6 +136,7 @@ fun Callout(
                             )
                             SecondaryButton(text = secondaryButtonText, onClick = onSecondaryButtonClick)
                         }
+
                         CalloutButtonConfig.SECONDARY_AND_LINK -> {
                             SecondaryButton(
                                 text = secondaryButtonText,
@@ -121,6 +145,7 @@ fun Callout(
                             )
                             LinkButton(text = linkText, onClick = onLinkClicked)
                         }
+
                         CalloutButtonConfig.LINK -> {
                             LinkButton(text = linkText, onClick = onLinkClicked)
                         }

From 5cf99edff419e53d0afd4e53b0387b7ca6a7fc0e Mon Sep 17 00:00:00 2001
From: Fernando Quilez Esquitino <fernando.esquitino@telefonica.com>
Date: Fri, 10 Nov 2023 13:36:39 +0100
Subject: [PATCH 03/13] implement callout circular image xml version

---
 .../components/CalloutsCatalogFragment.kt     | 42 +++++++++---
 .../res/layout/screen_callouts_catalog.xml    | 18 ++---
 .../telefonica/mistica/callout/CalloutView.kt | 68 +++++++++++++++++--
 library/src/main/res/layout/callout_view.xml  | 14 ++++
 4 files changed, 112 insertions(+), 30 deletions(-)

diff --git a/catalog/src/main/java/com/telefonica/mistica/catalog/ui/classic/components/CalloutsCatalogFragment.kt b/catalog/src/main/java/com/telefonica/mistica/catalog/ui/classic/components/CalloutsCatalogFragment.kt
index 810a35167..02f11729b 100644
--- a/catalog/src/main/java/com/telefonica/mistica/catalog/ui/classic/components/CalloutsCatalogFragment.kt
+++ b/catalog/src/main/java/com/telefonica/mistica/catalog/ui/classic/components/CalloutsCatalogFragment.kt
@@ -40,6 +40,16 @@ class CalloutsCatalogFragment : Fragment() {
             )
             setText(CalloutButtonsConfig.PRIMARY.name)
         }
+        with(view.findViewById<DropDownInput>(R.id.image_config_dropdown).dropDown) {
+            setAdapter(
+                DropDownInput.Adapter(
+                    view.context,
+                    R.layout.dropdown_menu_popup_item,
+                    CalloutImageConfig.values().map { it.name },
+                )
+            )
+            setText(CalloutImageConfig.ICON.name)
+        }
         view.findViewById<Button>(R.id.update_button).setOnClickListener {
             updateCalloutView(view)
         }
@@ -52,16 +62,21 @@ class CalloutsCatalogFragment : Fragment() {
                 visibility = VISIBLE
             }
 
-            if (view.findViewById<CheckBoxInput>(R.id.show_icon_input).isChecked()) {
-                setIcon(R.drawable.ic_callout)
-            } else {
-                setIcon(null)
-            }
-
-            if (view.findViewById<CheckBoxInput>(R.id.show_image_input).isChecked()) {
-                setImage(R.drawable.ic_callout)
-            } else {
-                setImage(null)
+            when (CalloutImageConfig.valueOf(view.findViewById<DropDownInput>(R.id.image_config_dropdown).dropDown.text.toString()).imageConfig) {
+                CalloutView.IMAGE_CONFIG_NONE -> {
+                    setIcon(null)
+                    setImage(null)
+                    setCircularImage(null)
+                }
+                CalloutView.IMAGE_CONFIG_ICON -> {
+                    setIcon(R.drawable.ic_callout)
+                }
+                CalloutView.IMAGE_CONFIG_REGULAR -> {
+                    setImage(R.drawable.media_card_sample_image)
+                }
+                CalloutView.IMAGE_CONFIG_CIRCULAR -> {
+                    setCircularImage(R.drawable.media_card_sample_image)
+                }
             }
 
             setDismissable(view.findViewById<CheckBoxInput>(R.id.dismiss_input).isChecked())
@@ -102,4 +117,11 @@ class CalloutsCatalogFragment : Fragment() {
         SECONDARY_AND_LINK(CalloutView.BUTTONS_CONFIG_SECONDARY_LINK),
         LINK(CalloutView.BUTTONS_CONFIG_LINK),
     }
+
+    private enum class CalloutImageConfig(@CalloutView.ImageConfig val imageConfig: Int) {
+        NONE(CalloutView.IMAGE_CONFIG_NONE),
+        ICON(CalloutView.IMAGE_CONFIG_ICON),
+        IMAGE(CalloutView.IMAGE_CONFIG_REGULAR),
+        CIRCULAR(CalloutView.IMAGE_CONFIG_CIRCULAR)
+    }
 }
\ No newline at end of file
diff --git a/catalog/src/main/res/layout/screen_callouts_catalog.xml b/catalog/src/main/res/layout/screen_callouts_catalog.xml
index 6988b60fc..94cdf7a33 100644
--- a/catalog/src/main/res/layout/screen_callouts_catalog.xml
+++ b/catalog/src/main/res/layout/screen_callouts_catalog.xml
@@ -30,27 +30,19 @@
 				/>
 
 		<com.telefonica.mistica.input.CheckBoxInput
-				android:id="@+id/show_icon_input"
-				android:layout_width="match_parent"
-				android:layout_height="wrap_content"
-				android:layout_margin="8dp"
-				app:inputCheckText="Show icon"
-				/>
-
-		<com.telefonica.mistica.input.CheckBoxInput
-				android:id="@+id/show_image_input"
+				android:id="@+id/dismiss_input"
 				android:layout_width="match_parent"
 				android:layout_height="wrap_content"
 				android:layout_margin="8dp"
-				app:inputCheckText="Show image"
+				app:inputCheckText="Is Dismissable"
 				/>
 
-		<com.telefonica.mistica.input.CheckBoxInput
-				android:id="@+id/dismiss_input"
+		<com.telefonica.mistica.input.DropDownInput
+				android:id="@+id/image_config_dropdown"
 				android:layout_width="match_parent"
 				android:layout_height="wrap_content"
 				android:layout_margin="8dp"
-				app:inputCheckText="Is Dismissable"
+				app:inputHint="Select icon/image config"
 				/>
 
 		<com.telefonica.mistica.input.TextInput
diff --git a/library/src/main/java/com/telefonica/mistica/callout/CalloutView.kt b/library/src/main/java/com/telefonica/mistica/callout/CalloutView.kt
index 8e213ca7a..31522a09d 100644
--- a/library/src/main/java/com/telefonica/mistica/callout/CalloutView.kt
+++ b/library/src/main/java/com/telefonica/mistica/callout/CalloutView.kt
@@ -19,6 +19,7 @@ import androidx.annotation.IntDef
 import androidx.appcompat.content.res.AppCompatResources
 import androidx.databinding.BindingMethod
 import androidx.databinding.BindingMethods
+import com.google.android.material.imageview.ShapeableImageView
 import com.telefonica.mistica.R
 import com.telefonica.mistica.button.Button
 import com.telefonica.mistica.util.getThemeColor
@@ -44,6 +45,11 @@ import com.telefonica.mistica.util.getThemeColor
         attribute = "calloutImage",
         method = "setImage",
     ),
+    BindingMethod(
+        type = CalloutView::class,
+        attribute = "calloutCircularImage",
+        method = "setCircularImage",
+    ),
     BindingMethod(
         type = CalloutView::class,
         attribute = "calloutButtonsConfig",
@@ -108,8 +114,18 @@ class CalloutView @JvmOverloads constructor(
     )
     annotation class ButtonsConfig
 
+    @Retention(AnnotationRetention.SOURCE)
+    @IntDef(
+        IMAGE_CONFIG_NONE,
+        IMAGE_CONFIG_ICON,
+        IMAGE_CONFIG_REGULAR,
+        IMAGE_CONFIG_CIRCULAR
+    )
+    annotation class ImageConfig
+
     private var icon: ImageView
     private var image: ImageView
+    private var circularImage: ShapeableImageView
     private var title: TextView
     private var description: TextView
     private var buttonsContainer: View
@@ -126,6 +142,7 @@ class CalloutView @JvmOverloads constructor(
         icon = findViewById(R.id.callout_icon)
         icon.setColorFilter(context.getThemeColor(R.attr.colorNeutralHigh))
         image = findViewById(R.id.callout_image)
+        circularImage = findViewById(R.id.data_card_circular_icon)
         title = findViewById(R.id.callout_title)
         description = findViewById(R.id.callout_description)
         buttonsContainer = findViewById(R.id.callout_buttons_container)
@@ -212,24 +229,31 @@ class CalloutView @JvmOverloads constructor(
 
     fun setIcon(@DrawableRes iconRes: Int?) {
         if (iconRes != null) {
+            setImageConfig(IMAGE_CONFIG_ICON)
             icon.setImageResource(iconRes)
-            icon.visibility = VISIBLE
-            image.visibility = GONE
         } else {
             icon.visibility = GONE
         }
     }
 
-    fun setImage(@DrawableRes iconRes: Int?) {
-        if (iconRes != null) {
-            image.setImageResource(iconRes)
-            image.visibility = VISIBLE
-            icon.visibility = GONE
+    fun setImage(@DrawableRes imageRes: Int?) {
+        if (imageRes != null) {
+            setImageConfig(IMAGE_CONFIG_REGULAR)
+            image.setImageResource(imageRes)
         } else {
             image.visibility = GONE
         }
     }
 
+    fun setCircularImage(@DrawableRes imageRes: Int?) {
+        if (imageRes != null) {
+            setImageConfig(IMAGE_CONFIG_CIRCULAR)
+            circularImage.setImageResource(imageRes)
+        } else {
+            circularImage.visibility = GONE
+        }
+    }
+
     fun setIconDrawable(drawable: Drawable) {
         icon.setImageDrawable(drawable)
         icon.visibility = VISIBLE
@@ -322,6 +346,31 @@ class CalloutView @JvmOverloads constructor(
         }
     }
 
+    private fun setImageConfig(@ImageConfig imageConfig: Int) {
+        when (imageConfig) {
+            IMAGE_CONFIG_NONE -> {
+                icon.visibility = GONE
+                image.visibility = GONE
+                circularImage.visibility = GONE
+            }
+            IMAGE_CONFIG_ICON -> {
+                icon.visibility = VISIBLE
+                image.visibility = GONE
+                circularImage.visibility = GONE
+            }
+            IMAGE_CONFIG_REGULAR -> {
+                icon.visibility = GONE
+                image.visibility = VISIBLE
+                circularImage.visibility = GONE
+            }
+            IMAGE_CONFIG_CIRCULAR -> {
+                icon.visibility = GONE
+                image.visibility = GONE
+                circularImage.visibility = VISIBLE
+            }
+        }
+    }
+
     private fun marginStart(value: Float): LinearLayout.LayoutParams {
         val layoutParams = LinearLayout.LayoutParams(
             LinearLayout.LayoutParams.WRAP_CONTENT,
@@ -340,6 +389,11 @@ class CalloutView @JvmOverloads constructor(
         const val BUTTONS_CONFIG_SECONDARY_LINK = 4
         const val BUTTONS_CONFIG_LINK = 5
 
+        const val IMAGE_CONFIG_NONE = -1
+        const val IMAGE_CONFIG_ICON = 0
+        const val IMAGE_CONFIG_REGULAR = 1
+        const val IMAGE_CONFIG_CIRCULAR = 2
+
         val NO_OP_CALLOUT_LISTENER = {}
         val ANIMATION_INTERPOLATOR = PathInterpolator(0.77f, 0f, 0.175f, 1f)
         const val ANIMATION_DURATION = 400L
diff --git a/library/src/main/res/layout/callout_view.xml b/library/src/main/res/layout/callout_view.xml
index d9065b06a..ed8c65faa 100644
--- a/library/src/main/res/layout/callout_view.xml
+++ b/library/src/main/res/layout/callout_view.xml
@@ -43,6 +43,20 @@
 				android:layout_width="40dp"
 				android:layout_height="40dp"
 				android:importantForAccessibility="no"
+				android:scaleType="centerCrop"
+				tools:src="@tools:sample/avatars"
+				tools:visibility="gone"
+				/>
+
+		<com.google.android.material.imageview.ShapeableImageView
+				android:id="@+id/data_card_circular_icon"
+				android:layout_width="40dp"
+				android:layout_height="40dp"
+				android:layout_gravity="center"
+				android:importantForAccessibility="no"
+				android:scaleType="centerCrop"
+				android:visibility="gone"
+				app:shapeAppearance="@style/CircleImageView"
 				tools:src="@tools:sample/avatars"
 				tools:visibility="gone"
 				/>

From 7c759822e66b8adfb60babf7eb812e2893790c29 Mon Sep 17 00:00:00 2001
From: Fernando Quilez Esquitino <fernando.esquitino@telefonica.com>
Date: Fri, 10 Nov 2023 15:38:44 +0100
Subject: [PATCH 04/13] refactor

---
 .../ui/classic/components/CalloutsCatalogFragment.kt      | 4 ++--
 .../java/com/telefonica/mistica/callout/CalloutView.kt    | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/catalog/src/main/java/com/telefonica/mistica/catalog/ui/classic/components/CalloutsCatalogFragment.kt b/catalog/src/main/java/com/telefonica/mistica/catalog/ui/classic/components/CalloutsCatalogFragment.kt
index 02f11729b..984e88832 100644
--- a/catalog/src/main/java/com/telefonica/mistica/catalog/ui/classic/components/CalloutsCatalogFragment.kt
+++ b/catalog/src/main/java/com/telefonica/mistica/catalog/ui/classic/components/CalloutsCatalogFragment.kt
@@ -71,7 +71,7 @@ class CalloutsCatalogFragment : Fragment() {
                 CalloutView.IMAGE_CONFIG_ICON -> {
                     setIcon(R.drawable.ic_callout)
                 }
-                CalloutView.IMAGE_CONFIG_REGULAR -> {
+                CalloutView.IMAGE_CONFIG_SQUARE -> {
                     setImage(R.drawable.media_card_sample_image)
                 }
                 CalloutView.IMAGE_CONFIG_CIRCULAR -> {
@@ -121,7 +121,7 @@ class CalloutsCatalogFragment : Fragment() {
     private enum class CalloutImageConfig(@CalloutView.ImageConfig val imageConfig: Int) {
         NONE(CalloutView.IMAGE_CONFIG_NONE),
         ICON(CalloutView.IMAGE_CONFIG_ICON),
-        IMAGE(CalloutView.IMAGE_CONFIG_REGULAR),
+        IMAGE(CalloutView.IMAGE_CONFIG_SQUARE),
         CIRCULAR(CalloutView.IMAGE_CONFIG_CIRCULAR)
     }
 }
\ No newline at end of file
diff --git a/library/src/main/java/com/telefonica/mistica/callout/CalloutView.kt b/library/src/main/java/com/telefonica/mistica/callout/CalloutView.kt
index 31522a09d..7951c2d1f 100644
--- a/library/src/main/java/com/telefonica/mistica/callout/CalloutView.kt
+++ b/library/src/main/java/com/telefonica/mistica/callout/CalloutView.kt
@@ -118,7 +118,7 @@ class CalloutView @JvmOverloads constructor(
     @IntDef(
         IMAGE_CONFIG_NONE,
         IMAGE_CONFIG_ICON,
-        IMAGE_CONFIG_REGULAR,
+        IMAGE_CONFIG_SQUARE,
         IMAGE_CONFIG_CIRCULAR
     )
     annotation class ImageConfig
@@ -238,7 +238,7 @@ class CalloutView @JvmOverloads constructor(
 
     fun setImage(@DrawableRes imageRes: Int?) {
         if (imageRes != null) {
-            setImageConfig(IMAGE_CONFIG_REGULAR)
+            setImageConfig(IMAGE_CONFIG_SQUARE)
             image.setImageResource(imageRes)
         } else {
             image.visibility = GONE
@@ -358,7 +358,7 @@ class CalloutView @JvmOverloads constructor(
                 image.visibility = GONE
                 circularImage.visibility = GONE
             }
-            IMAGE_CONFIG_REGULAR -> {
+            IMAGE_CONFIG_SQUARE -> {
                 icon.visibility = GONE
                 image.visibility = VISIBLE
                 circularImage.visibility = GONE
@@ -391,7 +391,7 @@ class CalloutView @JvmOverloads constructor(
 
         const val IMAGE_CONFIG_NONE = -1
         const val IMAGE_CONFIG_ICON = 0
-        const val IMAGE_CONFIG_REGULAR = 1
+        const val IMAGE_CONFIG_SQUARE = 1
         const val IMAGE_CONFIG_CIRCULAR = 2
 
         val NO_OP_CALLOUT_LISTENER = {}

From 389e62514cab284cd55d63d81987384b874e5c54 Mon Sep 17 00:00:00 2001
From: Fernando Quilez Esquitino <fernando.esquitino@telefonica.com>
Date: Fri, 10 Nov 2023 16:02:08 +0100
Subject: [PATCH 05/13] refactor callouts image implementation and make it
 retrocompatible

---
 .../catalog/ui/compose/components/Callouts.kt | 85 +++++++++++++------
 .../mistica/compose/callout/Callout.kt        | 56 ++++++++----
 .../compose/card/datacard/IconPainter.kt      |  7 +-
 3 files changed, 101 insertions(+), 47 deletions(-)

diff --git a/catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/Callouts.kt b/catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/Callouts.kt
index 9b91a3543..a583b1537 100644
--- a/catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/Callouts.kt
+++ b/catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/Callouts.kt
@@ -1,5 +1,6 @@
 package com.telefonica.mistica.catalog.ui.compose.components
 
+import androidx.annotation.AttrRes
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -21,11 +22,16 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
+import com.telefonica.mistica.callout.CalloutView
 import com.telefonica.mistica.catalog.R
 import com.telefonica.mistica.catalog.ui.compose.common.DropDown
 import com.telefonica.mistica.compose.button.Button
 import com.telefonica.mistica.compose.callout.Callout
 import com.telefonica.mistica.compose.callout.CalloutButtonConfig
+import com.telefonica.mistica.compose.card.datacard.IconType
+import com.telefonica.mistica.compose.card.datacard.noIcon
+import com.telefonica.mistica.compose.card.datacard.resourceIconPainter
+import com.telefonica.mistica.compose.input.DropDownInput
 import com.telefonica.mistica.compose.theme.MisticaTheme
 
 @Composable
@@ -47,23 +53,16 @@ fun Callouts() {
             Text("Inverse variant")
         }
 
-        var showIcon by remember { mutableStateOf(false) }
-        Row(
-            modifier = Modifier.padding(horizontal = 16.dp),
-            verticalAlignment = Alignment.CenterVertically
-        ) {
-            Checkbox(checked = showIcon, onCheckedChange = { showIcon = !showIcon })
-            Text("Show icon")
-        }
-
-        var showImage by remember { mutableStateOf(false) }
-        Row(
-            modifier = Modifier.padding(horizontal = 16.dp),
-            verticalAlignment = Alignment.CenterVertically
-        ) {
-            Checkbox(checked = showImage, onCheckedChange = { showImage = !showImage })
-            Text("Show image")
-        }
+        var iconType: ImageTypes by remember { mutableStateOf(ImageTypes.ICON) }
+        DropDownInput(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(40.dp, 8.dp),
+            items = ImageTypes.values().map { it.name },
+            currentItemIndex = ImageTypes.values().indexOf(iconType),
+            onItemSelected = { index -> iconType = ImageTypes.values()[index] },
+            hint = "Icon type",
+        )
 
         var dismissable by remember { mutableStateOf(false) }
         Row(
@@ -76,7 +75,9 @@ fun Callouts() {
 
         var title by remember { mutableStateOf("Callout sample title") }
         OutlinedTextField(
-            modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 16.dp),
             value = title,
             onValueChange = { title = it },
             label = { Text("Title") }
@@ -84,7 +85,9 @@ fun Callouts() {
 
         var description by remember { mutableStateOf("Callout sample description") }
         OutlinedTextField(
-            modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 16.dp),
             value = description,
             onValueChange = { description = it },
             label = { Text("Description") }
@@ -92,14 +95,18 @@ fun Callouts() {
 
         var buttonConfig by remember { mutableStateOf(CalloutButtonConfig.PRIMARY) }
         DropDown(
-            modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 16.dp),
             selectedValue = buttonConfig,
             onValueChanged = { buttonConfig = it }
         )
 
         var primaryButtonText by remember { mutableStateOf("Primary Action") }
         OutlinedTextField(
-            modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 16.dp),
             value = primaryButtonText,
             onValueChange = { primaryButtonText = it },
             label = { Text("Primary Button text") }
@@ -107,7 +114,9 @@ fun Callouts() {
 
         var secondaryButtonText by remember { mutableStateOf("Secondary Action") }
         OutlinedTextField(
-            modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 16.dp),
             value = secondaryButtonText,
             onValueChange = { secondaryButtonText = it },
             label = { Text("Secondary Button text") }
@@ -115,7 +124,9 @@ fun Callouts() {
 
         var linkText by remember { mutableStateOf("Link Action") }
         OutlinedTextField(
-            modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 16.dp),
             value = linkText,
             onValueChange = { linkText = it },
             label = { Text("Link Button text") }
@@ -137,12 +148,24 @@ fun Callouts() {
                     ),
             ) {
                 Callout(
-                    modifier = Modifier.fillMaxWidth().padding(16.dp),
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(16.dp),
                     title = title.takeIf { it.isNotBlank() },
                     description = description.takeIf { it.isNotBlank() },
                     buttonConfig = buttonConfig,
-                    iconRes = if (showIcon) R.drawable.ic_callout else null,
-                    imageRes = if (showImage) R.drawable.ic_callout else null,
+                    imageConfig = when (iconType) {
+                        ImageTypes.NONE -> CalloutView.IMAGE_CONFIG_NONE
+                        ImageTypes.ICON -> CalloutView.IMAGE_CONFIG_ICON
+                        ImageTypes.SQUARE_IMAGE -> CalloutView.IMAGE_CONFIG_SQUARE
+                        ImageTypes.CIRCULAR_IMAGE -> CalloutView.IMAGE_CONFIG_CIRCULAR
+                    },
+                    imageRes = when (iconType) {
+                        ImageTypes.NONE -> null
+                        ImageTypes.ICON -> R.drawable.ic_callout
+                        ImageTypes.CIRCULAR_IMAGE -> R.drawable.media_card_sample_image
+                        ImageTypes.SQUARE_IMAGE -> R.drawable.card_image_sample
+                    },
                     dismissable = dismissable,
                     inverse = inverse,
                     onDismiss = { isShown = false },
@@ -153,7 +176,9 @@ fun Callouts() {
             }
         } else {
             Button(
-                modifier = Modifier.fillMaxWidth().padding(start = 16.dp, end = 16.dp, top = 8.dp),
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(start = 16.dp, end = 16.dp, top = 8.dp),
                 text = "Show callout again",
                 onClickListener = {
                     isShown = true
@@ -163,3 +188,9 @@ fun Callouts() {
     }
 }
 
+private enum class ImageTypes(@AttrRes val iconType: Int) {
+    NONE(CalloutView.IMAGE_CONFIG_NONE),
+    ICON(CalloutView.IMAGE_CONFIG_ICON),
+    SQUARE_IMAGE(CalloutView.IMAGE_CONFIG_SQUARE),
+    CIRCULAR_IMAGE(CalloutView.IMAGE_CONFIG_CIRCULAR),
+}
diff --git a/library/src/main/java/com/telefonica/mistica/compose/callout/Callout.kt b/library/src/main/java/com/telefonica/mistica/compose/callout/Callout.kt
index 1066388d3..a07913bc5 100644
--- a/library/src/main/java/com/telefonica/mistica/compose/callout/Callout.kt
+++ b/library/src/main/java/com/telefonica/mistica/compose/callout/Callout.kt
@@ -22,8 +22,13 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import com.telefonica.mistica.R
+import com.telefonica.mistica.callout.CalloutView
 import com.telefonica.mistica.compose.button.Button
 import com.telefonica.mistica.compose.button.ButtonStyle
+import com.telefonica.mistica.compose.card.datacard.IconPainter
+import com.telefonica.mistica.compose.card.datacard.IconType
+import com.telefonica.mistica.compose.card.datacard.noIcon
+import com.telefonica.mistica.compose.card.datacard.resourceIconPainter
 import com.telefonica.mistica.compose.theme.MisticaTheme
 
 @Composable
@@ -33,6 +38,7 @@ fun Callout(
     description: String?,
     buttonConfig: CalloutButtonConfig,
     @DrawableRes iconRes: Int? = null,
+    @CalloutView.ImageConfig imageConfig: Int = CalloutView.IMAGE_CONFIG_NONE,
     @DrawableRes imageRes: Int? = null,
     dismissable: Boolean,
     onDismiss: (() -> Unit)? = null,
@@ -59,29 +65,43 @@ fun Callout(
             modifier = Modifier.padding(16.dp),
             verticalAlignment = Alignment.Top,
         ) {
-            iconRes?.let {
-                if (imageRes == null) {
-                    Image(
-                        modifier = Modifier
-                            .padding(end = 16.dp)
-                            .width(24.dp)
-                            .height(24.dp),
-                        painter = painterResource(id = iconRes),
-                        contentDescription = null,
-                        colorFilter = ColorFilter.tint(MisticaTheme.colors.neutralHigh)
-                    )
-                }
-            }
 
-            imageRes?.let {
+            if (iconRes != null) {
                 Image(
                     modifier = Modifier
                         .padding(end = 16.dp)
-                        .width(40.dp)
-                        .height(40.dp),
-                    painter = painterResource(id = imageRes),
-                    contentDescription = null
+                        .width(24.dp)
+                        .height(24.dp),
+                    painter = painterResource(id = iconRes),
+                    contentDescription = null,
+                    colorFilter = ColorFilter.tint(MisticaTheme.colors.neutralHigh)
                 )
+            } else if (imageRes != null) {
+                val iconPainter = when (imageConfig) {
+                    CalloutView.IMAGE_CONFIG_ICON -> {
+                        resourceIconPainter(
+                            iconRes = imageRes,
+                            iconType = IconType.ICON,
+                            modifier = Modifier.padding(end = 16.dp)
+                        )
+                    }
+                    CalloutView.IMAGE_CONFIG_SQUARE -> {
+                        resourceIconPainter(
+                            iconRes = imageRes, iconType = IconType.SQUARE_IMAGE,
+                            modifier = Modifier.padding(end = 16.dp)
+                        )
+                    }
+                    CalloutView.IMAGE_CONFIG_CIRCULAR -> {
+                        resourceIconPainter(
+                            iconRes = imageRes,
+                            iconType = IconType.CIRCULAR_ASSET,
+                            modifier = Modifier.padding(end = 16.dp)
+                        )
+                    }
+                    else -> noIcon()
+                }
+
+                iconPainter.Paint()
             }
 
             Column(
diff --git a/library/src/main/java/com/telefonica/mistica/compose/card/datacard/IconPainter.kt b/library/src/main/java/com/telefonica/mistica/compose/card/datacard/IconPainter.kt
index 23608216f..8ffad2776 100644
--- a/library/src/main/java/com/telefonica/mistica/compose/card/datacard/IconPainter.kt
+++ b/library/src/main/java/com/telefonica/mistica/compose/card/datacard/IconPainter.kt
@@ -37,11 +37,12 @@ sealed class IconPainter {
         val iconTint: Color?,
         val backgroundColor: Color,
         val iconType: IconType = IconType.CIRCULAR_ASSET,
+        val modifier: Modifier = Modifier.padding(top = 8.dp, bottom = 8.dp),
     ) : IconPainter() {
         @Composable
         override fun Paint() {
             Box(
-                modifier = Modifier.padding(top = 8.dp, bottom = 8.dp),
+                modifier = modifier
             ) {
                 when (iconType) {
                     IconType.ICON -> {
@@ -137,11 +138,13 @@ fun resourceIconPainter(
     iconTint: Color? = null,
     backgroundColor: Color = MisticaTheme.colors.neutralLow,
     iconType: IconType = IconType.CIRCULAR_ASSET,
+    modifier: Modifier = Modifier.padding(top = 8.dp, bottom = 8.dp),
 ) = IconPainter.ResourceIconPainter(
     iconRes = iconRes,
     iconTint = iconTint,
     backgroundColor = backgroundColor,
-    iconType = iconType
+    iconType = iconType,
+    modifier = modifier
 )
 
 fun textIconPainter(

From 32d6a210c8beb5f05bd1ad38f4884ab53576b247 Mon Sep 17 00:00:00 2001
From: Fernando Quilez Esquitino <fernando.esquitino@telefonica.com>
Date: Wed, 15 Nov 2023 11:40:29 +0100
Subject: [PATCH 06/13] PR changes

---
 .../components/CalloutsCatalogFragment.kt     | 19 +++++-----
 .../catalog/ui/compose/components/Callouts.kt | 26 ++++++-------
 .../telefonica/mistica/callout/CalloutView.kt | 37 ++++++++-----------
 .../mistica/compose/callout/Callout.kt        | 31 ++++------------
 library/src/main/res/layout/callout_view.xml  |  1 -
 5 files changed, 44 insertions(+), 70 deletions(-)

diff --git a/catalog/src/main/java/com/telefonica/mistica/catalog/ui/classic/components/CalloutsCatalogFragment.kt b/catalog/src/main/java/com/telefonica/mistica/catalog/ui/classic/components/CalloutsCatalogFragment.kt
index 984e88832..087f8a81c 100644
--- a/catalog/src/main/java/com/telefonica/mistica/catalog/ui/classic/components/CalloutsCatalogFragment.kt
+++ b/catalog/src/main/java/com/telefonica/mistica/catalog/ui/classic/components/CalloutsCatalogFragment.kt
@@ -11,6 +11,7 @@ import android.widget.Button
 import android.widget.Toast
 import androidx.fragment.app.Fragment
 import com.telefonica.mistica.callout.CalloutView
+import com.telefonica.mistica.callout.CalloutViewImageConfig
 import com.telefonica.mistica.catalog.R
 import com.telefonica.mistica.input.CheckBoxInput
 import com.telefonica.mistica.input.DropDownInput
@@ -63,18 +64,18 @@ class CalloutsCatalogFragment : Fragment() {
             }
 
             when (CalloutImageConfig.valueOf(view.findViewById<DropDownInput>(R.id.image_config_dropdown).dropDown.text.toString()).imageConfig) {
-                CalloutView.IMAGE_CONFIG_NONE -> {
+                CalloutViewImageConfig.IMAGE_CONFIG_NONE -> {
                     setIcon(null)
                     setImage(null)
                     setCircularImage(null)
                 }
-                CalloutView.IMAGE_CONFIG_ICON -> {
+                CalloutViewImageConfig.IMAGE_CONFIG_ICON -> {
                     setIcon(R.drawable.ic_callout)
                 }
-                CalloutView.IMAGE_CONFIG_SQUARE -> {
+                CalloutViewImageConfig.IMAGE_CONFIG_SQUARE -> {
                     setImage(R.drawable.media_card_sample_image)
                 }
-                CalloutView.IMAGE_CONFIG_CIRCULAR -> {
+                CalloutViewImageConfig.IMAGE_CONFIG_CIRCULAR -> {
                     setCircularImage(R.drawable.media_card_sample_image)
                 }
             }
@@ -118,10 +119,10 @@ class CalloutsCatalogFragment : Fragment() {
         LINK(CalloutView.BUTTONS_CONFIG_LINK),
     }
 
-    private enum class CalloutImageConfig(@CalloutView.ImageConfig val imageConfig: Int) {
-        NONE(CalloutView.IMAGE_CONFIG_NONE),
-        ICON(CalloutView.IMAGE_CONFIG_ICON),
-        IMAGE(CalloutView.IMAGE_CONFIG_SQUARE),
-        CIRCULAR(CalloutView.IMAGE_CONFIG_CIRCULAR)
+    private enum class CalloutImageConfig(val imageConfig: CalloutViewImageConfig) {
+        NONE(CalloutViewImageConfig.IMAGE_CONFIG_NONE),
+        ICON(CalloutViewImageConfig.IMAGE_CONFIG_ICON),
+        IMAGE(CalloutViewImageConfig.IMAGE_CONFIG_SQUARE),
+        CIRCULAR(CalloutViewImageConfig.IMAGE_CONFIG_CIRCULAR)
     }
 }
\ No newline at end of file
diff --git a/catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/Callouts.kt b/catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/Callouts.kt
index a583b1537..e6b276bc8 100644
--- a/catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/Callouts.kt
+++ b/catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/Callouts.kt
@@ -1,6 +1,5 @@
 package com.telefonica.mistica.catalog.ui.compose.components
 
-import androidx.annotation.AttrRes
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -22,15 +21,12 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
-import com.telefonica.mistica.callout.CalloutView
+import com.telefonica.mistica.callout.CalloutViewImageConfig
 import com.telefonica.mistica.catalog.R
 import com.telefonica.mistica.catalog.ui.compose.common.DropDown
 import com.telefonica.mistica.compose.button.Button
 import com.telefonica.mistica.compose.callout.Callout
 import com.telefonica.mistica.compose.callout.CalloutButtonConfig
-import com.telefonica.mistica.compose.card.datacard.IconType
-import com.telefonica.mistica.compose.card.datacard.noIcon
-import com.telefonica.mistica.compose.card.datacard.resourceIconPainter
 import com.telefonica.mistica.compose.input.DropDownInput
 import com.telefonica.mistica.compose.theme.MisticaTheme
 
@@ -155,12 +151,12 @@ fun Callouts() {
                     description = description.takeIf { it.isNotBlank() },
                     buttonConfig = buttonConfig,
                     imageConfig = when (iconType) {
-                        ImageTypes.NONE -> CalloutView.IMAGE_CONFIG_NONE
-                        ImageTypes.ICON -> CalloutView.IMAGE_CONFIG_ICON
-                        ImageTypes.SQUARE_IMAGE -> CalloutView.IMAGE_CONFIG_SQUARE
-                        ImageTypes.CIRCULAR_IMAGE -> CalloutView.IMAGE_CONFIG_CIRCULAR
+                        ImageTypes.NONE -> CalloutViewImageConfig.IMAGE_CONFIG_NONE
+                        ImageTypes.ICON -> CalloutViewImageConfig.IMAGE_CONFIG_ICON
+                        ImageTypes.SQUARE_IMAGE -> CalloutViewImageConfig.IMAGE_CONFIG_SQUARE
+                        ImageTypes.CIRCULAR_IMAGE -> CalloutViewImageConfig.IMAGE_CONFIG_CIRCULAR
                     },
-                    imageRes = when (iconType) {
+                    iconRes = when (iconType) {
                         ImageTypes.NONE -> null
                         ImageTypes.ICON -> R.drawable.ic_callout
                         ImageTypes.CIRCULAR_IMAGE -> R.drawable.media_card_sample_image
@@ -188,9 +184,9 @@ fun Callouts() {
     }
 }
 
-private enum class ImageTypes(@AttrRes val iconType: Int) {
-    NONE(CalloutView.IMAGE_CONFIG_NONE),
-    ICON(CalloutView.IMAGE_CONFIG_ICON),
-    SQUARE_IMAGE(CalloutView.IMAGE_CONFIG_SQUARE),
-    CIRCULAR_IMAGE(CalloutView.IMAGE_CONFIG_CIRCULAR),
+private enum class ImageTypes(val iconType: CalloutViewImageConfig) {
+    NONE(CalloutViewImageConfig.IMAGE_CONFIG_NONE),
+    ICON(CalloutViewImageConfig.IMAGE_CONFIG_ICON),
+    SQUARE_IMAGE(CalloutViewImageConfig.IMAGE_CONFIG_SQUARE),
+    CIRCULAR_IMAGE(CalloutViewImageConfig.IMAGE_CONFIG_CIRCULAR),
 }
diff --git a/library/src/main/java/com/telefonica/mistica/callout/CalloutView.kt b/library/src/main/java/com/telefonica/mistica/callout/CalloutView.kt
index 7951c2d1f..e96677722 100644
--- a/library/src/main/java/com/telefonica/mistica/callout/CalloutView.kt
+++ b/library/src/main/java/com/telefonica/mistica/callout/CalloutView.kt
@@ -114,15 +114,6 @@ class CalloutView @JvmOverloads constructor(
     )
     annotation class ButtonsConfig
 
-    @Retention(AnnotationRetention.SOURCE)
-    @IntDef(
-        IMAGE_CONFIG_NONE,
-        IMAGE_CONFIG_ICON,
-        IMAGE_CONFIG_SQUARE,
-        IMAGE_CONFIG_CIRCULAR
-    )
-    annotation class ImageConfig
-
     private var icon: ImageView
     private var image: ImageView
     private var circularImage: ShapeableImageView
@@ -229,7 +220,7 @@ class CalloutView @JvmOverloads constructor(
 
     fun setIcon(@DrawableRes iconRes: Int?) {
         if (iconRes != null) {
-            setImageConfig(IMAGE_CONFIG_ICON)
+            setImageConfig(CalloutViewImageConfig.IMAGE_CONFIG_ICON)
             icon.setImageResource(iconRes)
         } else {
             icon.visibility = GONE
@@ -238,7 +229,7 @@ class CalloutView @JvmOverloads constructor(
 
     fun setImage(@DrawableRes imageRes: Int?) {
         if (imageRes != null) {
-            setImageConfig(IMAGE_CONFIG_SQUARE)
+            setImageConfig(CalloutViewImageConfig.IMAGE_CONFIG_SQUARE)
             image.setImageResource(imageRes)
         } else {
             image.visibility = GONE
@@ -247,7 +238,7 @@ class CalloutView @JvmOverloads constructor(
 
     fun setCircularImage(@DrawableRes imageRes: Int?) {
         if (imageRes != null) {
-            setImageConfig(IMAGE_CONFIG_CIRCULAR)
+            setImageConfig(CalloutViewImageConfig.IMAGE_CONFIG_CIRCULAR)
             circularImage.setImageResource(imageRes)
         } else {
             circularImage.visibility = GONE
@@ -346,24 +337,24 @@ class CalloutView @JvmOverloads constructor(
         }
     }
 
-    private fun setImageConfig(@ImageConfig imageConfig: Int) {
+    private fun setImageConfig(imageConfig: CalloutViewImageConfig) {
         when (imageConfig) {
-            IMAGE_CONFIG_NONE -> {
+            CalloutViewImageConfig.IMAGE_CONFIG_NONE -> {
                 icon.visibility = GONE
                 image.visibility = GONE
                 circularImage.visibility = GONE
             }
-            IMAGE_CONFIG_ICON -> {
+            CalloutViewImageConfig.IMAGE_CONFIG_ICON -> {
                 icon.visibility = VISIBLE
                 image.visibility = GONE
                 circularImage.visibility = GONE
             }
-            IMAGE_CONFIG_SQUARE -> {
+            CalloutViewImageConfig.IMAGE_CONFIG_SQUARE -> {
                 icon.visibility = GONE
                 image.visibility = VISIBLE
                 circularImage.visibility = GONE
             }
-            IMAGE_CONFIG_CIRCULAR -> {
+            CalloutViewImageConfig.IMAGE_CONFIG_CIRCULAR -> {
                 icon.visibility = GONE
                 image.visibility = GONE
                 circularImage.visibility = VISIBLE
@@ -389,13 +380,15 @@ class CalloutView @JvmOverloads constructor(
         const val BUTTONS_CONFIG_SECONDARY_LINK = 4
         const val BUTTONS_CONFIG_LINK = 5
 
-        const val IMAGE_CONFIG_NONE = -1
-        const val IMAGE_CONFIG_ICON = 0
-        const val IMAGE_CONFIG_SQUARE = 1
-        const val IMAGE_CONFIG_CIRCULAR = 2
-
         val NO_OP_CALLOUT_LISTENER = {}
         val ANIMATION_INTERPOLATOR = PathInterpolator(0.77f, 0f, 0.175f, 1f)
         const val ANIMATION_DURATION = 400L
     }
 }
+
+enum class CalloutViewImageConfig {
+    IMAGE_CONFIG_NONE,
+    IMAGE_CONFIG_ICON,
+    IMAGE_CONFIG_SQUARE,
+    IMAGE_CONFIG_CIRCULAR
+}
diff --git a/library/src/main/java/com/telefonica/mistica/compose/callout/Callout.kt b/library/src/main/java/com/telefonica/mistica/compose/callout/Callout.kt
index a07913bc5..f12775538 100644
--- a/library/src/main/java/com/telefonica/mistica/compose/callout/Callout.kt
+++ b/library/src/main/java/com/telefonica/mistica/compose/callout/Callout.kt
@@ -8,24 +8,20 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import com.telefonica.mistica.R
-import com.telefonica.mistica.callout.CalloutView
+import com.telefonica.mistica.callout.CalloutViewImageConfig
 import com.telefonica.mistica.compose.button.Button
 import com.telefonica.mistica.compose.button.ButtonStyle
-import com.telefonica.mistica.compose.card.datacard.IconPainter
 import com.telefonica.mistica.compose.card.datacard.IconType
 import com.telefonica.mistica.compose.card.datacard.noIcon
 import com.telefonica.mistica.compose.card.datacard.resourceIconPainter
@@ -38,8 +34,7 @@ fun Callout(
     description: String?,
     buttonConfig: CalloutButtonConfig,
     @DrawableRes iconRes: Int? = null,
-    @CalloutView.ImageConfig imageConfig: Int = CalloutView.IMAGE_CONFIG_NONE,
-    @DrawableRes imageRes: Int? = null,
+    imageConfig: CalloutViewImageConfig = CalloutViewImageConfig.IMAGE_CONFIG_NONE,
     dismissable: Boolean,
     onDismiss: (() -> Unit)? = null,
     inverse: Boolean,
@@ -67,33 +62,23 @@ fun Callout(
         ) {
 
             if (iconRes != null) {
-                Image(
-                    modifier = Modifier
-                        .padding(end = 16.dp)
-                        .width(24.dp)
-                        .height(24.dp),
-                    painter = painterResource(id = iconRes),
-                    contentDescription = null,
-                    colorFilter = ColorFilter.tint(MisticaTheme.colors.neutralHigh)
-                )
-            } else if (imageRes != null) {
                 val iconPainter = when (imageConfig) {
-                    CalloutView.IMAGE_CONFIG_ICON -> {
+                    CalloutViewImageConfig.IMAGE_CONFIG_ICON -> {
                         resourceIconPainter(
-                            iconRes = imageRes,
+                            iconRes = iconRes,
                             iconType = IconType.ICON,
                             modifier = Modifier.padding(end = 16.dp)
                         )
                     }
-                    CalloutView.IMAGE_CONFIG_SQUARE -> {
+                    CalloutViewImageConfig.IMAGE_CONFIG_SQUARE -> {
                         resourceIconPainter(
-                            iconRes = imageRes, iconType = IconType.SQUARE_IMAGE,
+                            iconRes = iconRes, iconType = IconType.SQUARE_IMAGE,
                             modifier = Modifier.padding(end = 16.dp)
                         )
                     }
-                    CalloutView.IMAGE_CONFIG_CIRCULAR -> {
+                    CalloutViewImageConfig.IMAGE_CONFIG_CIRCULAR -> {
                         resourceIconPainter(
-                            iconRes = imageRes,
+                            iconRes = iconRes,
                             iconType = IconType.CIRCULAR_ASSET,
                             modifier = Modifier.padding(end = 16.dp)
                         )
diff --git a/library/src/main/res/layout/callout_view.xml b/library/src/main/res/layout/callout_view.xml
index ed8c65faa..03eaa7b58 100644
--- a/library/src/main/res/layout/callout_view.xml
+++ b/library/src/main/res/layout/callout_view.xml
@@ -58,7 +58,6 @@
 				android:visibility="gone"
 				app:shapeAppearance="@style/CircleImageView"
 				tools:src="@tools:sample/avatars"
-				tools:visibility="gone"
 				/>
 
 	</FrameLayout>

From ecb7422bca9bda285ce88eba56997cdcc7e65b61 Mon Sep 17 00:00:00 2001
From: Fernando Quilez Esquitino <fernando.esquitino@telefonica.com>
Date: Mon, 20 Nov 2023 19:33:23 +0100
Subject: [PATCH 07/13] PR changes - refactor to only 2 methods

---
 .../components/CalloutsCatalogFragment.kt     |  19 +--
 .../res/layout/screen_callouts_catalog.xml    |   2 +
 .../telefonica/mistica/callout/CalloutView.kt | 117 ++++++++++++------
 .../src/main/res/values/attrs_components.xml  |   8 +-
 4 files changed, 97 insertions(+), 49 deletions(-)

diff --git a/catalog/src/main/java/com/telefonica/mistica/catalog/ui/classic/components/CalloutsCatalogFragment.kt b/catalog/src/main/java/com/telefonica/mistica/catalog/ui/classic/components/CalloutsCatalogFragment.kt
index 087f8a81c..66fa114d5 100644
--- a/catalog/src/main/java/com/telefonica/mistica/catalog/ui/classic/components/CalloutsCatalogFragment.kt
+++ b/catalog/src/main/java/com/telefonica/mistica/catalog/ui/classic/components/CalloutsCatalogFragment.kt
@@ -63,22 +63,23 @@ class CalloutsCatalogFragment : Fragment() {
                 visibility = VISIBLE
             }
 
-            when (CalloutImageConfig.valueOf(view.findViewById<DropDownInput>(R.id.image_config_dropdown).dropDown.text.toString()).imageConfig) {
+            val imageConfig = CalloutImageConfig.valueOf(
+                view.findViewById<DropDownInput>(R.id.image_config_dropdown).dropDown.text.toString()
+            ).imageConfig
+
+            when (imageConfig) {
                 CalloutViewImageConfig.IMAGE_CONFIG_NONE -> {
-                    setIcon(null)
-                    setImage(null)
-                    setCircularImage(null)
+                    setAssetType(imageConfig)
                 }
                 CalloutViewImageConfig.IMAGE_CONFIG_ICON -> {
-                    setIcon(R.drawable.ic_callout)
-                }
-                CalloutViewImageConfig.IMAGE_CONFIG_SQUARE -> {
-                    setImage(R.drawable.media_card_sample_image)
+                    setAsset(R.drawable.ic_callout)
                 }
+                CalloutViewImageConfig.IMAGE_CONFIG_SQUARE,
                 CalloutViewImageConfig.IMAGE_CONFIG_CIRCULAR -> {
-                    setCircularImage(R.drawable.media_card_sample_image)
+                    setAsset(R.drawable.media_card_sample_image)
                 }
             }
+            setAssetType(imageConfig)
 
             setDismissable(view.findViewById<CheckBoxInput>(R.id.dismiss_input).isChecked())
             val inverse = view.findViewById<CheckBoxInput>(R.id.inverse_input).isChecked()
diff --git a/catalog/src/main/res/layout/screen_callouts_catalog.xml b/catalog/src/main/res/layout/screen_callouts_catalog.xml
index 94cdf7a33..b15a63a91 100644
--- a/catalog/src/main/res/layout/screen_callouts_catalog.xml
+++ b/catalog/src/main/res/layout/screen_callouts_catalog.xml
@@ -120,6 +120,8 @@
 					android:id="@+id/callout_view"
 					android:layout_width="match_parent"
 					android:layout_height="wrap_content"
+					tools:calloutAsset="@drawable/ic_callout"
+					tools:calloutAssetType="icon"
 					/>
 		</LinearLayout>
 
diff --git a/library/src/main/java/com/telefonica/mistica/callout/CalloutView.kt b/library/src/main/java/com/telefonica/mistica/callout/CalloutView.kt
index e96677722..2ac7ea55f 100644
--- a/library/src/main/java/com/telefonica/mistica/callout/CalloutView.kt
+++ b/library/src/main/java/com/telefonica/mistica/callout/CalloutView.kt
@@ -38,17 +38,12 @@ import com.telefonica.mistica.util.getThemeColor
     BindingMethod(
         type = CalloutView::class,
         attribute = "calloutIcon",
-        method = "setIcon",
+        method = "setAsset",
     ),
     BindingMethod(
         type = CalloutView::class,
         attribute = "calloutImage",
-        method = "setImage",
-    ),
-    BindingMethod(
-        type = CalloutView::class,
-        attribute = "calloutCircularImage",
-        method = "setCircularImage",
+        method = "setAssetType",
     ),
     BindingMethod(
         type = CalloutView::class,
@@ -124,6 +119,8 @@ class CalloutView @JvmOverloads constructor(
     private var secondaryButton: Button
     private var linkButton: Button
     private var closeButton: ImageView
+    private var asset: Int? = null
+    private var assetType: CalloutViewImageConfig
 
     private var onDismissed: () -> Unit = NO_OP_CALLOUT_LISTENER
 
@@ -146,15 +143,11 @@ class CalloutView @JvmOverloads constructor(
         var buttonsConfig: Int = BUTTONS_CONFIG_PRIMARY
         var dismissable = false
         var inverse = false
+        assetType = CalloutViewImageConfig.IMAGE_CONFIG_NONE
 
         if (attrs != null) {
             val styledAttrs = context.theme.obtainStyledAttributes(attrs, R.styleable.CalloutView, defStyleAttr, 0)
 
-            styledAttrs.getResourceId(R.styleable.CalloutView_calloutIcon, TypedValue.TYPE_NULL)
-                .takeIf { it != TypedValue.TYPE_NULL }
-                ?.let { AppCompatResources.getDrawable(context, it) }
-                ?.let { setIconDrawable(it) }
-
             styledAttrs.getString(R.styleable.CalloutView_calloutTitle)?.let { setTitle(it) }
             styledAttrs.getString(R.styleable.CalloutView_calloutDescription)?.let { setDescription(it) }
 
@@ -162,6 +155,11 @@ class CalloutView @JvmOverloads constructor(
             styledAttrs.getString(R.styleable.CalloutView_calloutPrimaryButtonText)?.let { setPrimaryButtonText(it) }
             styledAttrs.getString(R.styleable.CalloutView_calloutSecondaryButtonText)?.let { setSecondaryButtonText(it) }
             styledAttrs.getString(R.styleable.CalloutView_calloutLinkButtonText)?.let { setLinkButtonText(it) }
+            assetType = CalloutViewImageConfig.getConfigByValue(
+                styledAttrs.getInteger(R.styleable.CalloutView_calloutAssetType, CalloutViewImageConfig.IMAGE_CONFIG_NONE.value)
+            )
+            styledAttrs.getResourceId(R.styleable.CalloutView_calloutAsset, TypedValue.TYPE_NULL).takeIf { it != TypedValue.TYPE_NULL }
+                ?.let { setAsset(it) }
 
             dismissable = styledAttrs.getBoolean(R.styleable.CalloutView_calloutDismissable, false)
             inverse = styledAttrs.getBoolean(R.styleable.CalloutView_calloutInverse, false)
@@ -218,36 +216,62 @@ class CalloutView @JvmOverloads constructor(
         onDismissed = listener
     }
 
-    fun setIcon(@DrawableRes iconRes: Int?) {
-        if (iconRes != null) {
-            setImageConfig(CalloutViewImageConfig.IMAGE_CONFIG_ICON)
-            icon.setImageResource(iconRes)
+    fun setAsset(@DrawableRes assetRes: Int?) {
+        asset = assetRes
+        if (assetRes != null) {
+            when (assetType) {
+                CalloutViewImageConfig.IMAGE_CONFIG_NONE -> noAsset()
+                CalloutViewImageConfig.IMAGE_CONFIG_ICON -> setIcon(assetRes)
+                CalloutViewImageConfig.IMAGE_CONFIG_SQUARE -> setImage(assetRes)
+                CalloutViewImageConfig.IMAGE_CONFIG_CIRCULAR -> setCircularImage(assetRes)
+            }
         } else {
-            icon.visibility = GONE
+            noAsset()
         }
     }
 
-    fun setImage(@DrawableRes imageRes: Int?) {
-        if (imageRes != null) {
-            setImageConfig(CalloutViewImageConfig.IMAGE_CONFIG_SQUARE)
-            image.setImageResource(imageRes)
-        } else {
-            image.visibility = GONE
-        }
+    fun setAssetType(type: CalloutViewImageConfig) {
+        asset?.also {
+            when (type) {
+                CalloutViewImageConfig.IMAGE_CONFIG_NONE -> noAsset()
+                CalloutViewImageConfig.IMAGE_CONFIG_ICON -> {
+                    setIcon(it)
+                    image.visibility = GONE
+                    circularImage.visibility = GONE
+                }
+                CalloutViewImageConfig.IMAGE_CONFIG_SQUARE -> {
+                    setImage(it)
+                    icon.visibility = GONE
+                    circularImage.visibility = GONE
+                }
+                CalloutViewImageConfig.IMAGE_CONFIG_CIRCULAR -> {
+                    setCircularImage(it)
+                    icon.visibility = GONE
+                    image.visibility = GONE
+                }
+            }
+        } ?: noAsset()
     }
 
-    fun setCircularImage(@DrawableRes imageRes: Int?) {
-        if (imageRes != null) {
-            setImageConfig(CalloutViewImageConfig.IMAGE_CONFIG_CIRCULAR)
-            circularImage.setImageResource(imageRes)
-        } else {
-            circularImage.visibility = GONE
-        }
+    private fun noAsset() {
+        icon.visibility = GONE
+        image.visibility = GONE
+        circularImage.visibility = GONE
+    }
+
+    private fun setIcon(@DrawableRes iconRes: Int) {
+        setImageConfig(CalloutViewImageConfig.IMAGE_CONFIG_ICON)
+        icon.setImageResource(iconRes)
     }
 
-    fun setIconDrawable(drawable: Drawable) {
-        icon.setImageDrawable(drawable)
-        icon.visibility = VISIBLE
+    private fun setImage(@DrawableRes imageRes: Int) {
+        setImageConfig(CalloutViewImageConfig.IMAGE_CONFIG_SQUARE)
+        image.setImageResource(imageRes)
+    }
+
+    private fun setCircularImage(@DrawableRes imageRes: Int) {
+        setImageConfig(CalloutViewImageConfig.IMAGE_CONFIG_CIRCULAR)
+        circularImage.setImageResource(imageRes)
     }
 
     fun setTitle(text: String) {
@@ -305,34 +329,40 @@ class CalloutView @JvmOverloads constructor(
                 secondaryButton.visibility = GONE
                 linkButton.visibility = GONE
             }
+
             BUTTONS_CONFIG_PRIMARY_LINK -> {
                 primaryButton.visibility = VISIBLE
                 secondaryButton.visibility = GONE
                 linkButton.visibility = VISIBLE
                 linkButton.layoutParams = marginStart(0f)
             }
+
             BUTTONS_CONFIG_PRIMARY_SECONDARY -> {
                 primaryButton.visibility = VISIBLE
                 secondaryButton.visibility = VISIBLE
                 linkButton.visibility = GONE
             }
+
             BUTTONS_CONFIG_SECONDARY -> {
                 primaryButton.visibility = GONE
                 secondaryButton.visibility = VISIBLE
                 linkButton.visibility = GONE
             }
+
             BUTTONS_CONFIG_SECONDARY_LINK -> {
                 primaryButton.visibility = GONE
                 secondaryButton.visibility = VISIBLE
                 linkButton.visibility = VISIBLE
                 linkButton.layoutParams = marginStart(0f)
             }
+
             BUTTONS_CONFIG_LINK -> {
                 primaryButton.visibility = GONE
                 secondaryButton.visibility = GONE
                 linkButton.visibility = VISIBLE
                 linkButton.layoutParams = marginStart(-8f)
             }
+
             BUTTONS_CONFIG_NONE -> {}
         }
     }
@@ -344,16 +374,19 @@ class CalloutView @JvmOverloads constructor(
                 image.visibility = GONE
                 circularImage.visibility = GONE
             }
+
             CalloutViewImageConfig.IMAGE_CONFIG_ICON -> {
                 icon.visibility = VISIBLE
                 image.visibility = GONE
                 circularImage.visibility = GONE
             }
+
             CalloutViewImageConfig.IMAGE_CONFIG_SQUARE -> {
                 icon.visibility = GONE
                 image.visibility = VISIBLE
                 circularImage.visibility = GONE
             }
+
             CalloutViewImageConfig.IMAGE_CONFIG_CIRCULAR -> {
                 icon.visibility = GONE
                 image.visibility = GONE
@@ -386,9 +419,15 @@ class CalloutView @JvmOverloads constructor(
     }
 }
 
-enum class CalloutViewImageConfig {
-    IMAGE_CONFIG_NONE,
-    IMAGE_CONFIG_ICON,
-    IMAGE_CONFIG_SQUARE,
-    IMAGE_CONFIG_CIRCULAR
+enum class CalloutViewImageConfig(val value: Int) {
+    IMAGE_CONFIG_NONE(-1),
+    IMAGE_CONFIG_ICON(0),
+    IMAGE_CONFIG_SQUARE(1),
+    IMAGE_CONFIG_CIRCULAR(2);
+
+    companion object {
+        fun getConfigByValue(item: Int): CalloutViewImageConfig {
+            return values().firstOrNull { it.value == item } ?: IMAGE_CONFIG_NONE
+        }
+    }
 }
diff --git a/library/src/main/res/values/attrs_components.xml b/library/src/main/res/values/attrs_components.xml
index 55e0758a2..1265e735d 100755
--- a/library/src/main/res/values/attrs_components.xml
+++ b/library/src/main/res/values/attrs_components.xml
@@ -272,7 +272,6 @@
     <declare-styleable name="CalloutView">
         <attr name="calloutTitle" format="string"/>
         <attr name="calloutDescription" format="string"/>
-        <attr name="calloutIcon" format="reference"/>
         <attr name="calloutButtonsConfig" format="enum">
             <enum name="none" value="-1"/>
             <enum name="primary" value="0" />
@@ -282,6 +281,13 @@
             <enum name="secondary_link" value="4" />
             <enum name="link" value="5" />
         </attr>
+        <attr name="calloutAsset" format="reference"/>
+        <attr name="calloutAssetType" format="enum">
+            <enum name="none" value="-1"/>
+            <enum name="icon" value="0"/>
+            <enum name="squareImage" value="1"/>
+            <enum name="circularImage" value="2"/>
+        </attr>
         <attr name="calloutPrimaryButtonText" format="string" />
         <attr name="calloutPrimaryButtonOnClick" format="string" />
         <attr name="calloutSecondaryButtonText" format="string" />

From 9dc79eac589adbf7bf64528c7c372d1e3cc4e8b9 Mon Sep 17 00:00:00 2001
From: Fernando Quilez Esquitino <fernando.esquitino@telefonica.com>
Date: Mon, 20 Nov 2023 19:37:57 +0100
Subject: [PATCH 08/13] PR changes

---
 .../mistica/compose/callout/Callout.kt        | 65 ++++++++++++-------
 1 file changed, 40 insertions(+), 25 deletions(-)

diff --git a/library/src/main/java/com/telefonica/mistica/compose/callout/Callout.kt b/library/src/main/java/com/telefonica/mistica/compose/callout/Callout.kt
index f12775538..2d518c7b1 100644
--- a/library/src/main/java/com/telefonica/mistica/compose/callout/Callout.kt
+++ b/library/src/main/java/com/telefonica/mistica/compose/callout/Callout.kt
@@ -62,31 +62,10 @@ fun Callout(
         ) {
 
             if (iconRes != null) {
-                val iconPainter = when (imageConfig) {
-                    CalloutViewImageConfig.IMAGE_CONFIG_ICON -> {
-                        resourceIconPainter(
-                            iconRes = iconRes,
-                            iconType = IconType.ICON,
-                            modifier = Modifier.padding(end = 16.dp)
-                        )
-                    }
-                    CalloutViewImageConfig.IMAGE_CONFIG_SQUARE -> {
-                        resourceIconPainter(
-                            iconRes = iconRes, iconType = IconType.SQUARE_IMAGE,
-                            modifier = Modifier.padding(end = 16.dp)
-                        )
-                    }
-                    CalloutViewImageConfig.IMAGE_CONFIG_CIRCULAR -> {
-                        resourceIconPainter(
-                            iconRes = iconRes,
-                            iconType = IconType.CIRCULAR_ASSET,
-                            modifier = Modifier.padding(end = 16.dp)
-                        )
-                    }
-                    else -> noIcon()
-                }
-
-                iconPainter.Paint()
+                Icon(
+                    iconRes = iconRes,
+                    imageConfig = imageConfig
+                )
             }
 
             Column(
@@ -216,6 +195,42 @@ private fun CalloutButton(
     }
 }
 
+@Composable
+private fun Icon(
+    @DrawableRes iconRes: Int,
+    imageConfig: CalloutViewImageConfig,
+) {
+    val iconPainter = when (imageConfig) {
+        CalloutViewImageConfig.IMAGE_CONFIG_ICON -> {
+            resourceIconPainter(
+                iconRes = iconRes,
+                iconType = IconType.ICON,
+                modifier = Modifier.padding(end = 16.dp)
+            )
+        }
+
+        CalloutViewImageConfig.IMAGE_CONFIG_SQUARE -> {
+            resourceIconPainter(
+                iconRes = iconRes,
+                iconType = IconType.SQUARE_IMAGE,
+                modifier = Modifier.padding(end = 16.dp)
+            )
+        }
+
+        CalloutViewImageConfig.IMAGE_CONFIG_CIRCULAR -> {
+            resourceIconPainter(
+                iconRes = iconRes,
+                iconType = IconType.CIRCULAR_ASSET,
+                modifier = Modifier.padding(end = 16.dp)
+            )
+        }
+
+        CalloutViewImageConfig.IMAGE_CONFIG_NONE -> noIcon()
+    }
+
+    iconPainter.Paint()
+}
+
 enum class CalloutButtonConfig {
     NONE,
     PRIMARY,

From ad03053e7c5f498e8e29737c97183e3540a985e7 Mon Sep 17 00:00:00 2001
From: Fernando Quilez Esquitino <fernando.esquitino@telefonica.com>
Date: Fri, 24 Nov 2023 15:59:51 +0100
Subject: [PATCH 09/13] PR changes

---
 .../components/CalloutsCatalogFragment.kt     | 26 +++---
 .../catalog/ui/compose/components/Callouts.kt | 31 +++----
 .../telefonica/mistica/callout/CalloutView.kt | 85 +++++++------------
 .../mistica/compose/callout/Callout.kt        | 10 +--
 library/src/main/res/layout/callout_view.xml  |  9 +-
 5 files changed, 66 insertions(+), 95 deletions(-)

diff --git a/catalog/src/main/java/com/telefonica/mistica/catalog/ui/classic/components/CalloutsCatalogFragment.kt b/catalog/src/main/java/com/telefonica/mistica/catalog/ui/classic/components/CalloutsCatalogFragment.kt
index 66fa114d5..8c3100eb9 100644
--- a/catalog/src/main/java/com/telefonica/mistica/catalog/ui/classic/components/CalloutsCatalogFragment.kt
+++ b/catalog/src/main/java/com/telefonica/mistica/catalog/ui/classic/components/CalloutsCatalogFragment.kt
@@ -46,10 +46,10 @@ class CalloutsCatalogFragment : Fragment() {
                 DropDownInput.Adapter(
                     view.context,
                     R.layout.dropdown_menu_popup_item,
-                    CalloutImageConfig.values().map { it.name },
+                    CalloutViewImageConfig.values().map { it.name },
                 )
             )
-            setText(CalloutImageConfig.ICON.name)
+            setText(CalloutViewImageConfig.ICON.name)
         }
         view.findViewById<Button>(R.id.update_button).setOnClickListener {
             updateCalloutView(view)
@@ -63,23 +63,24 @@ class CalloutsCatalogFragment : Fragment() {
                 visibility = VISIBLE
             }
 
-            val imageConfig = CalloutImageConfig.valueOf(
+            val imageConfig = CalloutViewImageConfig.valueOf(
                 view.findViewById<DropDownInput>(R.id.image_config_dropdown).dropDown.text.toString()
-            ).imageConfig
+            )
 
             when (imageConfig) {
-                CalloutViewImageConfig.IMAGE_CONFIG_NONE -> {
+                CalloutViewImageConfig.NONE -> {
                     setAssetType(imageConfig)
                 }
-                CalloutViewImageConfig.IMAGE_CONFIG_ICON -> {
+                CalloutViewImageConfig.ICON -> {
                     setAsset(R.drawable.ic_callout)
+                    setAssetType(imageConfig)
                 }
-                CalloutViewImageConfig.IMAGE_CONFIG_SQUARE,
-                CalloutViewImageConfig.IMAGE_CONFIG_CIRCULAR -> {
+                CalloutViewImageConfig.SQUARE_IMAGE,
+                CalloutViewImageConfig.CIRCULAR_IMAGE -> {
                     setAsset(R.drawable.media_card_sample_image)
+                    setAssetType(imageConfig)
                 }
             }
-            setAssetType(imageConfig)
 
             setDismissable(view.findViewById<CheckBoxInput>(R.id.dismiss_input).isChecked())
             val inverse = view.findViewById<CheckBoxInput>(R.id.inverse_input).isChecked()
@@ -119,11 +120,4 @@ class CalloutsCatalogFragment : Fragment() {
         SECONDARY_AND_LINK(CalloutView.BUTTONS_CONFIG_SECONDARY_LINK),
         LINK(CalloutView.BUTTONS_CONFIG_LINK),
     }
-
-    private enum class CalloutImageConfig(val imageConfig: CalloutViewImageConfig) {
-        NONE(CalloutViewImageConfig.IMAGE_CONFIG_NONE),
-        ICON(CalloutViewImageConfig.IMAGE_CONFIG_ICON),
-        IMAGE(CalloutViewImageConfig.IMAGE_CONFIG_SQUARE),
-        CIRCULAR(CalloutViewImageConfig.IMAGE_CONFIG_CIRCULAR)
-    }
 }
\ No newline at end of file
diff --git a/catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/Callouts.kt b/catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/Callouts.kt
index e6b276bc8..1d4d7ed8a 100644
--- a/catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/Callouts.kt
+++ b/catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/Callouts.kt
@@ -49,14 +49,14 @@ fun Callouts() {
             Text("Inverse variant")
         }
 
-        var iconType: ImageTypes by remember { mutableStateOf(ImageTypes.ICON) }
+        var iconType: CalloutViewImageConfig by remember { mutableStateOf(CalloutViewImageConfig.ICON) }
         DropDownInput(
             modifier = Modifier
                 .fillMaxWidth()
                 .padding(40.dp, 8.dp),
-            items = ImageTypes.values().map { it.name },
-            currentItemIndex = ImageTypes.values().indexOf(iconType),
-            onItemSelected = { index -> iconType = ImageTypes.values()[index] },
+            items = CalloutViewImageConfig.values().map { it.name },
+            currentItemIndex = CalloutViewImageConfig.values().indexOf(iconType),
+            onItemSelected = { index -> iconType = CalloutViewImageConfig.values()[index] },
             hint = "Icon type",
         )
 
@@ -151,16 +151,16 @@ fun Callouts() {
                     description = description.takeIf { it.isNotBlank() },
                     buttonConfig = buttonConfig,
                     imageConfig = when (iconType) {
-                        ImageTypes.NONE -> CalloutViewImageConfig.IMAGE_CONFIG_NONE
-                        ImageTypes.ICON -> CalloutViewImageConfig.IMAGE_CONFIG_ICON
-                        ImageTypes.SQUARE_IMAGE -> CalloutViewImageConfig.IMAGE_CONFIG_SQUARE
-                        ImageTypes.CIRCULAR_IMAGE -> CalloutViewImageConfig.IMAGE_CONFIG_CIRCULAR
+                        CalloutViewImageConfig.NONE -> CalloutViewImageConfig.NONE
+                        CalloutViewImageConfig.ICON -> CalloutViewImageConfig.ICON
+                        CalloutViewImageConfig.SQUARE_IMAGE -> CalloutViewImageConfig.SQUARE_IMAGE
+                        CalloutViewImageConfig.CIRCULAR_IMAGE -> CalloutViewImageConfig.CIRCULAR_IMAGE
                     },
                     iconRes = when (iconType) {
-                        ImageTypes.NONE -> null
-                        ImageTypes.ICON -> R.drawable.ic_callout
-                        ImageTypes.CIRCULAR_IMAGE -> R.drawable.media_card_sample_image
-                        ImageTypes.SQUARE_IMAGE -> R.drawable.card_image_sample
+                        CalloutViewImageConfig.NONE -> null
+                        CalloutViewImageConfig.ICON -> R.drawable.ic_callout
+                        CalloutViewImageConfig.CIRCULAR_IMAGE -> R.drawable.media_card_sample_image
+                        CalloutViewImageConfig.SQUARE_IMAGE -> R.drawable.card_image_sample
                     },
                     dismissable = dismissable,
                     inverse = inverse,
@@ -183,10 +183,3 @@ fun Callouts() {
         }
     }
 }
-
-private enum class ImageTypes(val iconType: CalloutViewImageConfig) {
-    NONE(CalloutViewImageConfig.IMAGE_CONFIG_NONE),
-    ICON(CalloutViewImageConfig.IMAGE_CONFIG_ICON),
-    SQUARE_IMAGE(CalloutViewImageConfig.IMAGE_CONFIG_SQUARE),
-    CIRCULAR_IMAGE(CalloutViewImageConfig.IMAGE_CONFIG_CIRCULAR),
-}
diff --git a/library/src/main/java/com/telefonica/mistica/callout/CalloutView.kt b/library/src/main/java/com/telefonica/mistica/callout/CalloutView.kt
index 2ac7ea55f..e343740df 100644
--- a/library/src/main/java/com/telefonica/mistica/callout/CalloutView.kt
+++ b/library/src/main/java/com/telefonica/mistica/callout/CalloutView.kt
@@ -1,7 +1,6 @@
 package com.telefonica.mistica.callout
 
 import android.content.Context
-import android.graphics.drawable.Drawable
 import android.util.AttributeSet
 import android.util.TypedValue
 import android.view.LayoutInflater
@@ -37,12 +36,12 @@ import com.telefonica.mistica.util.getThemeColor
     ),
     BindingMethod(
         type = CalloutView::class,
-        attribute = "calloutIcon",
+        attribute = "calloutAsset",
         method = "setAsset",
     ),
     BindingMethod(
         type = CalloutView::class,
-        attribute = "calloutImage",
+        attribute = "calloutAssetType",
         method = "setAssetType",
     ),
     BindingMethod(
@@ -120,7 +119,7 @@ class CalloutView @JvmOverloads constructor(
     private var linkButton: Button
     private var closeButton: ImageView
     private var asset: Int? = null
-    private var assetType: CalloutViewImageConfig
+    private var assetType: CalloutViewImageConfig = CalloutViewImageConfig.ICON
 
     private var onDismissed: () -> Unit = NO_OP_CALLOUT_LISTENER
 
@@ -130,7 +129,7 @@ class CalloutView @JvmOverloads constructor(
         icon = findViewById(R.id.callout_icon)
         icon.setColorFilter(context.getThemeColor(R.attr.colorNeutralHigh))
         image = findViewById(R.id.callout_image)
-        circularImage = findViewById(R.id.data_card_circular_icon)
+        circularImage = findViewById(R.id.callout_circular_image)
         title = findViewById(R.id.callout_title)
         description = findViewById(R.id.callout_description)
         buttonsContainer = findViewById(R.id.callout_buttons_container)
@@ -143,7 +142,7 @@ class CalloutView @JvmOverloads constructor(
         var buttonsConfig: Int = BUTTONS_CONFIG_PRIMARY
         var dismissable = false
         var inverse = false
-        assetType = CalloutViewImageConfig.IMAGE_CONFIG_NONE
+        assetType = CalloutViewImageConfig.NONE
 
         if (attrs != null) {
             val styledAttrs = context.theme.obtainStyledAttributes(attrs, R.styleable.CalloutView, defStyleAttr, 0)
@@ -156,7 +155,7 @@ class CalloutView @JvmOverloads constructor(
             styledAttrs.getString(R.styleable.CalloutView_calloutSecondaryButtonText)?.let { setSecondaryButtonText(it) }
             styledAttrs.getString(R.styleable.CalloutView_calloutLinkButtonText)?.let { setLinkButtonText(it) }
             assetType = CalloutViewImageConfig.getConfigByValue(
-                styledAttrs.getInteger(R.styleable.CalloutView_calloutAssetType, CalloutViewImageConfig.IMAGE_CONFIG_NONE.value)
+                styledAttrs.getInteger(R.styleable.CalloutView_calloutAssetType, CalloutViewImageConfig.NONE.value)
             )
             styledAttrs.getResourceId(R.styleable.CalloutView_calloutAsset, TypedValue.TYPE_NULL).takeIf { it != TypedValue.TYPE_NULL }
                 ?.let { setAsset(it) }
@@ -220,37 +219,34 @@ class CalloutView @JvmOverloads constructor(
         asset = assetRes
         if (assetRes != null) {
             when (assetType) {
-                CalloutViewImageConfig.IMAGE_CONFIG_NONE -> noAsset()
-                CalloutViewImageConfig.IMAGE_CONFIG_ICON -> setIcon(assetRes)
-                CalloutViewImageConfig.IMAGE_CONFIG_SQUARE -> setImage(assetRes)
-                CalloutViewImageConfig.IMAGE_CONFIG_CIRCULAR -> setCircularImage(assetRes)
-            }
-        } else {
-            noAsset()
-        }
-    }
-
-    fun setAssetType(type: CalloutViewImageConfig) {
-        asset?.also {
-            when (type) {
-                CalloutViewImageConfig.IMAGE_CONFIG_NONE -> noAsset()
-                CalloutViewImageConfig.IMAGE_CONFIG_ICON -> {
-                    setIcon(it)
+                CalloutViewImageConfig.NONE -> noAsset()
+                CalloutViewImageConfig.ICON -> {
+                    icon.setImageResource(assetRes)
+                    icon.visibility = VISIBLE
                     image.visibility = GONE
                     circularImage.visibility = GONE
                 }
-                CalloutViewImageConfig.IMAGE_CONFIG_SQUARE -> {
-                    setImage(it)
+                CalloutViewImageConfig.SQUARE_IMAGE -> {
+                    image.setImageResource(assetRes)
+                    image.visibility = VISIBLE
                     icon.visibility = GONE
                     circularImage.visibility = GONE
                 }
-                CalloutViewImageConfig.IMAGE_CONFIG_CIRCULAR -> {
-                    setCircularImage(it)
+                CalloutViewImageConfig.CIRCULAR_IMAGE -> {
+                    circularImage.setImageResource(assetRes)
+                    circularImage.visibility = VISIBLE
                     icon.visibility = GONE
                     image.visibility = GONE
                 }
             }
-        } ?: noAsset()
+        } else {
+            noAsset()
+        }
+    }
+
+    fun setAssetType(value: CalloutViewImageConfig) {
+        assetType = value
+        setAsset(asset)
     }
 
     private fun noAsset() {
@@ -259,21 +255,6 @@ class CalloutView @JvmOverloads constructor(
         circularImage.visibility = GONE
     }
 
-    private fun setIcon(@DrawableRes iconRes: Int) {
-        setImageConfig(CalloutViewImageConfig.IMAGE_CONFIG_ICON)
-        icon.setImageResource(iconRes)
-    }
-
-    private fun setImage(@DrawableRes imageRes: Int) {
-        setImageConfig(CalloutViewImageConfig.IMAGE_CONFIG_SQUARE)
-        image.setImageResource(imageRes)
-    }
-
-    private fun setCircularImage(@DrawableRes imageRes: Int) {
-        setImageConfig(CalloutViewImageConfig.IMAGE_CONFIG_CIRCULAR)
-        circularImage.setImageResource(imageRes)
-    }
-
     fun setTitle(text: String) {
         if (text.isNotBlank()) {
             title.text = text
@@ -369,25 +350,25 @@ class CalloutView @JvmOverloads constructor(
 
     private fun setImageConfig(imageConfig: CalloutViewImageConfig) {
         when (imageConfig) {
-            CalloutViewImageConfig.IMAGE_CONFIG_NONE -> {
+            CalloutViewImageConfig.NONE -> {
                 icon.visibility = GONE
                 image.visibility = GONE
                 circularImage.visibility = GONE
             }
 
-            CalloutViewImageConfig.IMAGE_CONFIG_ICON -> {
+            CalloutViewImageConfig.ICON -> {
                 icon.visibility = VISIBLE
                 image.visibility = GONE
                 circularImage.visibility = GONE
             }
 
-            CalloutViewImageConfig.IMAGE_CONFIG_SQUARE -> {
+            CalloutViewImageConfig.SQUARE_IMAGE -> {
                 icon.visibility = GONE
                 image.visibility = VISIBLE
                 circularImage.visibility = GONE
             }
 
-            CalloutViewImageConfig.IMAGE_CONFIG_CIRCULAR -> {
+            CalloutViewImageConfig.CIRCULAR_IMAGE -> {
                 icon.visibility = GONE
                 image.visibility = GONE
                 circularImage.visibility = VISIBLE
@@ -420,14 +401,14 @@ class CalloutView @JvmOverloads constructor(
 }
 
 enum class CalloutViewImageConfig(val value: Int) {
-    IMAGE_CONFIG_NONE(-1),
-    IMAGE_CONFIG_ICON(0),
-    IMAGE_CONFIG_SQUARE(1),
-    IMAGE_CONFIG_CIRCULAR(2);
+    NONE(-1),
+    ICON(0),
+    SQUARE_IMAGE(1),
+    CIRCULAR_IMAGE(2);
 
     companion object {
         fun getConfigByValue(item: Int): CalloutViewImageConfig {
-            return values().firstOrNull { it.value == item } ?: IMAGE_CONFIG_NONE
+            return values().firstOrNull { it.value == item } ?: NONE
         }
     }
 }
diff --git a/library/src/main/java/com/telefonica/mistica/compose/callout/Callout.kt b/library/src/main/java/com/telefonica/mistica/compose/callout/Callout.kt
index 2d518c7b1..e16c59b04 100644
--- a/library/src/main/java/com/telefonica/mistica/compose/callout/Callout.kt
+++ b/library/src/main/java/com/telefonica/mistica/compose/callout/Callout.kt
@@ -34,7 +34,7 @@ fun Callout(
     description: String?,
     buttonConfig: CalloutButtonConfig,
     @DrawableRes iconRes: Int? = null,
-    imageConfig: CalloutViewImageConfig = CalloutViewImageConfig.IMAGE_CONFIG_NONE,
+    imageConfig: CalloutViewImageConfig = CalloutViewImageConfig.NONE,
     dismissable: Boolean,
     onDismiss: (() -> Unit)? = null,
     inverse: Boolean,
@@ -201,7 +201,7 @@ private fun Icon(
     imageConfig: CalloutViewImageConfig,
 ) {
     val iconPainter = when (imageConfig) {
-        CalloutViewImageConfig.IMAGE_CONFIG_ICON -> {
+        CalloutViewImageConfig.ICON -> {
             resourceIconPainter(
                 iconRes = iconRes,
                 iconType = IconType.ICON,
@@ -209,7 +209,7 @@ private fun Icon(
             )
         }
 
-        CalloutViewImageConfig.IMAGE_CONFIG_SQUARE -> {
+        CalloutViewImageConfig.SQUARE_IMAGE -> {
             resourceIconPainter(
                 iconRes = iconRes,
                 iconType = IconType.SQUARE_IMAGE,
@@ -217,7 +217,7 @@ private fun Icon(
             )
         }
 
-        CalloutViewImageConfig.IMAGE_CONFIG_CIRCULAR -> {
+        CalloutViewImageConfig.CIRCULAR_IMAGE -> {
             resourceIconPainter(
                 iconRes = iconRes,
                 iconType = IconType.CIRCULAR_ASSET,
@@ -225,7 +225,7 @@ private fun Icon(
             )
         }
 
-        CalloutViewImageConfig.IMAGE_CONFIG_NONE -> noIcon()
+        CalloutViewImageConfig.NONE -> noIcon()
     }
 
     iconPainter.Paint()
diff --git a/library/src/main/res/layout/callout_view.xml b/library/src/main/res/layout/callout_view.xml
index 03eaa7b58..cb58b05a8 100644
--- a/library/src/main/res/layout/callout_view.xml
+++ b/library/src/main/res/layout/callout_view.xml
@@ -23,17 +23,18 @@
 			/>
 
 	<FrameLayout
-		android:id="@+id/callout_image_layout"
+			android:id="@+id/callout_image_layout"
 			android:layout_width="wrap_content"
 			android:layout_height="wrap_content"
 			app:layout_constraintTop_toTopOf="parent"
 			app:layout_constraintStart_toStartOf="parent"
-		android:layout_marginStart="16dp">
+			>
 
 		<ImageView
 				android:id="@+id/callout_icon"
 				android:layout_width="24dp"
 				android:layout_height="24dp"
+				android:layout_marginStart="16dp"
 				android:importantForAccessibility="no"
 				tools:src="@tools:sample/avatars"
 				/>
@@ -42,6 +43,7 @@
 				android:id="@+id/callout_image"
 				android:layout_width="40dp"
 				android:layout_height="40dp"
+				android:layout_marginStart="16dp"
 				android:importantForAccessibility="no"
 				android:scaleType="centerCrop"
 				tools:src="@tools:sample/avatars"
@@ -49,10 +51,11 @@
 				/>
 
 		<com.google.android.material.imageview.ShapeableImageView
-				android:id="@+id/data_card_circular_icon"
+				android:id="@+id/callout_circular_image"
 				android:layout_width="40dp"
 				android:layout_height="40dp"
 				android:layout_gravity="center"
+				android:layout_marginStart="16dp"
 				android:importantForAccessibility="no"
 				android:scaleType="centerCrop"
 				android:visibility="gone"

From 094efd7263312f165567368fc66a2632013b7004 Mon Sep 17 00:00:00 2001
From: Fernando Quilez Esquitino <fernando.esquitino@telefonica.com>
Date: Mon, 27 Nov 2023 12:53:45 +0100
Subject: [PATCH 10/13] update documentation

---
 UPGRADING.md                                                   | 3 +++
 library/src/main/java/com/telefonica/mistica/callout/README.md | 3 ++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/UPGRADING.md b/UPGRADING.md
index dcde023e0..dc5354f66 100644
--- a/UPGRADING.md
+++ b/UPGRADING.md
@@ -71,3 +71,6 @@ Watch out that the new app:style attribute is needed to set the button style (wi
 Later on we'll deprecate the button.Button in favour of button2.Button and start migrating the rest.
 
 When this new compose wrapper is used on dialogs the ViewTreeLifecycle should be provided (see initViewTreeOwners() in Sheet.kt).
+
+## Upgrade to version 10.0.0
+`calloutIcon` has been replaced with `calloutAsset` and `calloutAssetType` to allow the use of images and circular images in the `Callout` component
\ No newline at end of file
diff --git a/library/src/main/java/com/telefonica/mistica/callout/README.md b/library/src/main/java/com/telefonica/mistica/callout/README.md
index 6ef48aad8..67dda7b51 100644
--- a/library/src/main/java/com/telefonica/mistica/callout/README.md
+++ b/library/src/main/java/com/telefonica/mistica/callout/README.md
@@ -13,7 +13,8 @@ configuration and databinding for all properties**.
 <declare-styleable name="CalloutView">
 	<attr name="calloutTitle" format="string"/>
 	<attr name="calloutDescription" format="string"/>
-	<attr name="calloutIcon" format="reference"/>
+	<attr name="calloutAsset" format="reference"/>
+    <attr name="calloutAssetType" format="enum"/>   
 	<attr name="calloutButtonsConfig" format="enum">
 		<enum name="none" value="-1"/>
 		<enum name="primary" value="0" />

From 5de22c96fdc305c92a3960265988af76448a4a5c Mon Sep 17 00:00:00 2001
From: Flow <lifecycle-github@telefonica.com>
Date: Tue, 28 Nov 2023 10:38:21 +0100
Subject: [PATCH 11/13] Update design tokens (#319)

Co-authored-by: fjquileze <fjquileze@users.noreply.github.com>
---
 .../compose/theme/brand/BlauBrandRadiusAutogenerated.kt     | 3 ++-
 .../compose/theme/brand/MovistarBrandRadiusAutogenerated.kt | 3 ++-
 .../compose/theme/brand/O2BrandRadiusAutogenerated.kt       | 3 ++-
 .../theme/brand/TelefonicaBrandRadiusAutogenerated.kt       | 3 ++-
 .../compose/theme/brand/VivoBrandRadiusAutogenerated.kt     | 3 ++-
 .../compose/theme/brand/VivoNewBrandRadiusAutogenerated.kt  | 3 ++-
 .../compose/theme/values/MisticaRadiusAutogenerated.kt      | 6 ++++++
 library/src/main/res/values/attrs_autogenerated.xml         | 1 +
 library/src/main/res/values/themes_blau_autogenerated.xml   | 1 +
 .../src/main/res/values/themes_movistar_autogenerated.xml   | 1 +
 library/src/main/res/values/themes_o2_autogenerated.xml     | 1 +
 .../src/main/res/values/themes_telefonica_autogenerated.xml | 1 +
 .../src/main/res/values/themes_vivoNew_autogenerated.xml    | 2 ++
 library/src/main/res/values/themes_vivo_autogenerated.xml   | 1 +
 14 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/library/src/main/java/com/telefonica/mistica/compose/theme/brand/BlauBrandRadiusAutogenerated.kt b/library/src/main/java/com/telefonica/mistica/compose/theme/brand/BlauBrandRadiusAutogenerated.kt
index a63a3c87d..80b735094 100644
--- a/library/src/main/java/com/telefonica/mistica/compose/theme/brand/BlauBrandRadiusAutogenerated.kt
+++ b/library/src/main/java/com/telefonica/mistica/compose/theme/brand/BlauBrandRadiusAutogenerated.kt
@@ -15,5 +15,6 @@ public object BlauBrandRadius {
       inputBorderRadius = 8.dp,
       legacyDisplayBorderRadius = 16.dp,
       popupBorderRadius = 8.dp,
-      sheetBorderRadius = 8.dp,)
+      sheetBorderRadius = 8.dp,
+      mediaSmallBorderRadius = 8.dp,)
 }
diff --git a/library/src/main/java/com/telefonica/mistica/compose/theme/brand/MovistarBrandRadiusAutogenerated.kt b/library/src/main/java/com/telefonica/mistica/compose/theme/brand/MovistarBrandRadiusAutogenerated.kt
index 99f0f87ac..49879ed9f 100644
--- a/library/src/main/java/com/telefonica/mistica/compose/theme/brand/MovistarBrandRadiusAutogenerated.kt
+++ b/library/src/main/java/com/telefonica/mistica/compose/theme/brand/MovistarBrandRadiusAutogenerated.kt
@@ -15,5 +15,6 @@ public object MovistarBrandRadius {
       inputBorderRadius = 8.dp,
       legacyDisplayBorderRadius = 16.dp,
       popupBorderRadius = 8.dp,
-      sheetBorderRadius = 8.dp,)
+      sheetBorderRadius = 8.dp,
+      mediaSmallBorderRadius = 8.dp,)
 }
diff --git a/library/src/main/java/com/telefonica/mistica/compose/theme/brand/O2BrandRadiusAutogenerated.kt b/library/src/main/java/com/telefonica/mistica/compose/theme/brand/O2BrandRadiusAutogenerated.kt
index 4c12c2267..dd988c4c1 100644
--- a/library/src/main/java/com/telefonica/mistica/compose/theme/brand/O2BrandRadiusAutogenerated.kt
+++ b/library/src/main/java/com/telefonica/mistica/compose/theme/brand/O2BrandRadiusAutogenerated.kt
@@ -15,5 +15,6 @@ public object O2BrandRadius {
       inputBorderRadius = 8.dp,
       legacyDisplayBorderRadius = 16.dp,
       popupBorderRadius = 8.dp,
-      sheetBorderRadius = 8.dp,)
+      sheetBorderRadius = 8.dp,
+      mediaSmallBorderRadius = 8.dp,)
 }
diff --git a/library/src/main/java/com/telefonica/mistica/compose/theme/brand/TelefonicaBrandRadiusAutogenerated.kt b/library/src/main/java/com/telefonica/mistica/compose/theme/brand/TelefonicaBrandRadiusAutogenerated.kt
index 4ba559612..c510da563 100644
--- a/library/src/main/java/com/telefonica/mistica/compose/theme/brand/TelefonicaBrandRadiusAutogenerated.kt
+++ b/library/src/main/java/com/telefonica/mistica/compose/theme/brand/TelefonicaBrandRadiusAutogenerated.kt
@@ -15,5 +15,6 @@ public object TelefonicaBrandRadius {
       inputBorderRadius = 0.dp,
       legacyDisplayBorderRadius = 0.dp,
       popupBorderRadius = 0.dp,
-      sheetBorderRadius = 0.dp,)
+      sheetBorderRadius = 0.dp,
+      mediaSmallBorderRadius = 0.dp,)
 }
diff --git a/library/src/main/java/com/telefonica/mistica/compose/theme/brand/VivoBrandRadiusAutogenerated.kt b/library/src/main/java/com/telefonica/mistica/compose/theme/brand/VivoBrandRadiusAutogenerated.kt
index de534cf8c..86fbeb08b 100644
--- a/library/src/main/java/com/telefonica/mistica/compose/theme/brand/VivoBrandRadiusAutogenerated.kt
+++ b/library/src/main/java/com/telefonica/mistica/compose/theme/brand/VivoBrandRadiusAutogenerated.kt
@@ -15,5 +15,6 @@ public object VivoBrandRadius {
       inputBorderRadius = 8.dp,
       legacyDisplayBorderRadius = 16.dp,
       popupBorderRadius = 8.dp,
-      sheetBorderRadius = 8.dp,)
+      sheetBorderRadius = 8.dp,
+      mediaSmallBorderRadius = 8.dp,)
 }
diff --git a/library/src/main/java/com/telefonica/mistica/compose/theme/brand/VivoNewBrandRadiusAutogenerated.kt b/library/src/main/java/com/telefonica/mistica/compose/theme/brand/VivoNewBrandRadiusAutogenerated.kt
index 229741d60..b22e53327 100644
--- a/library/src/main/java/com/telefonica/mistica/compose/theme/brand/VivoNewBrandRadiusAutogenerated.kt
+++ b/library/src/main/java/com/telefonica/mistica/compose/theme/brand/VivoNewBrandRadiusAutogenerated.kt
@@ -15,5 +15,6 @@ public object VivoNewBrandRadius {
       inputBorderRadius = 12.dp,
       legacyDisplayBorderRadius = 16.dp,
       popupBorderRadius = 8.dp,
-      sheetBorderRadius = 16.dp,)
+      sheetBorderRadius = 16.dp,
+      mediaSmallBorderRadius = 8.dp,)
 }
diff --git a/library/src/main/java/com/telefonica/mistica/compose/theme/values/MisticaRadiusAutogenerated.kt b/library/src/main/java/com/telefonica/mistica/compose/theme/values/MisticaRadiusAutogenerated.kt
index 6e11de569..5b0ecf623 100644
--- a/library/src/main/java/com/telefonica/mistica/compose/theme/values/MisticaRadiusAutogenerated.kt
+++ b/library/src/main/java/com/telefonica/mistica/compose/theme/values/MisticaRadiusAutogenerated.kt
@@ -21,6 +21,7 @@ public class MisticaRadius(
   legacyDisplayBorderRadius: Dp = Dp.Unspecified,
   popupBorderRadius: Dp = Dp.Unspecified,
   sheetBorderRadius: Dp = Dp.Unspecified,
+  mediaSmallBorderRadius: Dp = Dp.Unspecified,
 ) {
   public var avatarBorderRadius: Int by mutableStateOf(avatarBorderRadius,
       structuralEqualityPolicy())
@@ -58,6 +59,10 @@ public class MisticaRadius(
   public var sheetBorderRadius: Dp by mutableStateOf(sheetBorderRadius, structuralEqualityPolicy())
     internal set
 
+  public var mediaSmallBorderRadius: Dp by mutableStateOf(mediaSmallBorderRadius,
+      structuralEqualityPolicy())
+    internal set
+
   public fun updateWith(other: MisticaRadius) {
     avatarBorderRadius = other.avatarBorderRadius
     barBorderRadius = other.barBorderRadius
@@ -69,6 +74,7 @@ public class MisticaRadius(
     legacyDisplayBorderRadius = other.legacyDisplayBorderRadius
     popupBorderRadius = other.popupBorderRadius
     sheetBorderRadius = other.sheetBorderRadius
+    mediaSmallBorderRadius = other.mediaSmallBorderRadius
   }
 }
 
diff --git a/library/src/main/res/values/attrs_autogenerated.xml b/library/src/main/res/values/attrs_autogenerated.xml
index 075bcafb5..2e1a823cf 100644
--- a/library/src/main/res/values/attrs_autogenerated.xml
+++ b/library/src/main/res/values/attrs_autogenerated.xml
@@ -130,6 +130,7 @@
 		<attr name="legacyDisplayBorderRadius" format="dimension|fraction"/>
 		<attr name="popupBorderRadius" format="dimension|fraction"/>
 		<attr name="sheetBorderRadius" format="dimension|fraction"/>
+		<attr name="mediaSmallBorderRadius" format="dimension|fraction"/>
 	</declare-styleable>
 	<declare-styleable name="PresetFonts">
 		<attr name="cardTitleFont" format="string"/>
diff --git a/library/src/main/res/values/themes_blau_autogenerated.xml b/library/src/main/res/values/themes_blau_autogenerated.xml
index aa0b05fab..134d2ca8f 100644
--- a/library/src/main/res/values/themes_blau_autogenerated.xml
+++ b/library/src/main/res/values/themes_blau_autogenerated.xml
@@ -121,6 +121,7 @@
 		<item name="legacyDisplayBorderRadius">16dp</item>
 		<item name="popupBorderRadius">8dp</item>
 		<item name="sheetBorderRadius">8dp</item>
+		<item name="mediaSmallBorderRadius">8dp</item>
 		<!-- Preset fonts -->
 		<item name="cardTitleFont">?font_family_regular</item>
 		<item name="buttonFont">?font_family_medium</item>
diff --git a/library/src/main/res/values/themes_movistar_autogenerated.xml b/library/src/main/res/values/themes_movistar_autogenerated.xml
index b1038c760..2f86b3df7 100644
--- a/library/src/main/res/values/themes_movistar_autogenerated.xml
+++ b/library/src/main/res/values/themes_movistar_autogenerated.xml
@@ -121,6 +121,7 @@
 		<item name="legacyDisplayBorderRadius">16dp</item>
 		<item name="popupBorderRadius">8dp</item>
 		<item name="sheetBorderRadius">8dp</item>
+		<item name="mediaSmallBorderRadius">8dp</item>
 		<!-- Preset fonts -->
 		<item name="cardTitleFont">?font_family_regular</item>
 		<item name="buttonFont">?font_family_medium</item>
diff --git a/library/src/main/res/values/themes_o2_autogenerated.xml b/library/src/main/res/values/themes_o2_autogenerated.xml
index 8f0eeb00b..344ea19e1 100644
--- a/library/src/main/res/values/themes_o2_autogenerated.xml
+++ b/library/src/main/res/values/themes_o2_autogenerated.xml
@@ -121,6 +121,7 @@
 		<item name="legacyDisplayBorderRadius">16dp</item>
 		<item name="popupBorderRadius">8dp</item>
 		<item name="sheetBorderRadius">8dp</item>
+		<item name="mediaSmallBorderRadius">8dp</item>
 		<!-- Preset fonts -->
 		<item name="cardTitleFont">?font_family_regular</item>
 		<item name="buttonFont">?font_family_medium</item>
diff --git a/library/src/main/res/values/themes_telefonica_autogenerated.xml b/library/src/main/res/values/themes_telefonica_autogenerated.xml
index b0168cfce..a8f441213 100644
--- a/library/src/main/res/values/themes_telefonica_autogenerated.xml
+++ b/library/src/main/res/values/themes_telefonica_autogenerated.xml
@@ -121,6 +121,7 @@
 		<item name="legacyDisplayBorderRadius">0dp</item>
 		<item name="popupBorderRadius">0dp</item>
 		<item name="sheetBorderRadius">0dp</item>
+		<item name="mediaSmallBorderRadius">0dp</item>
 		<!-- Preset fonts -->
 		<item name="cardTitleFont">?font_family_regular</item>
 		<item name="buttonFont">?font_family_medium</item>
diff --git a/library/src/main/res/values/themes_vivoNew_autogenerated.xml b/library/src/main/res/values/themes_vivoNew_autogenerated.xml
index 44f2c21f3..a90c846f6 100644
--- a/library/src/main/res/values/themes_vivoNew_autogenerated.xml
+++ b/library/src/main/res/values/themes_vivoNew_autogenerated.xml
@@ -121,6 +121,7 @@
 		<item name="legacyDisplayBorderRadius">16dp</item>
 		<item name="popupBorderRadius">8dp</item>
 		<item name="sheetBorderRadius">16dp</item>
+		<item name="mediaSmallBorderRadius">8dp</item>
 		<!-- Preset fonts -->
 		<item name="cardTitleFont">?font_family_regular</item>
 		<item name="buttonFont">?font_family_regular</item>
@@ -275,6 +276,7 @@
 		<item name="legacyDisplayBorderRadius">16dp</item>
 		<item name="popupBorderRadius">8dp</item>
 		<item name="sheetBorderRadius">16dp</item>
+		<item name="mediaSmallBorderRadius">8dp</item>
 		<!-- Preset fonts -->
 		<item name="cardTitleFont">?font_family_regular</item>
 		<item name="buttonFont">?font_family_regular</item>
diff --git a/library/src/main/res/values/themes_vivo_autogenerated.xml b/library/src/main/res/values/themes_vivo_autogenerated.xml
index 61c4f2f49..2a95520a9 100644
--- a/library/src/main/res/values/themes_vivo_autogenerated.xml
+++ b/library/src/main/res/values/themes_vivo_autogenerated.xml
@@ -121,6 +121,7 @@
 		<item name="legacyDisplayBorderRadius">16dp</item>
 		<item name="popupBorderRadius">8dp</item>
 		<item name="sheetBorderRadius">8dp</item>
+		<item name="mediaSmallBorderRadius">8dp</item>
 		<!-- Preset fonts -->
 		<item name="cardTitleFont">?font_family_regular</item>
 		<item name="buttonFont">?font_family_medium</item>

From feb14ab4120df076f77bfe6e2a94b216fd66ba81 Mon Sep 17 00:00:00 2001
From: Fernando Quilez Esquitino <fernando.esquitino@telefonica.com>
Date: Tue, 28 Nov 2023 12:06:22 +0100
Subject: [PATCH 12/13] use mediaSmallBorderRadius token for callout square
 images

---
 .../main/java/com/telefonica/mistica/callout/CalloutView.kt | 2 +-
 .../java/com/telefonica/mistica/compose/callout/Callout.kt  | 4 +++-
 library/src/main/res/layout/callout_view.xml                | 6 +++---
 library/src/main/res/values/styles_images.xml               | 5 +++++
 4 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/library/src/main/java/com/telefonica/mistica/callout/CalloutView.kt b/library/src/main/java/com/telefonica/mistica/callout/CalloutView.kt
index e343740df..dc027ac21 100644
--- a/library/src/main/java/com/telefonica/mistica/callout/CalloutView.kt
+++ b/library/src/main/java/com/telefonica/mistica/callout/CalloutView.kt
@@ -109,7 +109,7 @@ class CalloutView @JvmOverloads constructor(
     annotation class ButtonsConfig
 
     private var icon: ImageView
-    private var image: ImageView
+    private var image: ShapeableImageView
     private var circularImage: ShapeableImageView
     private var title: TextView
     private var description: TextView
diff --git a/library/src/main/java/com/telefonica/mistica/compose/callout/Callout.kt b/library/src/main/java/com/telefonica/mistica/compose/callout/Callout.kt
index e16c59b04..4856e7a8d 100644
--- a/library/src/main/java/com/telefonica/mistica/compose/callout/Callout.kt
+++ b/library/src/main/java/com/telefonica/mistica/compose/callout/Callout.kt
@@ -213,7 +213,9 @@ private fun Icon(
             resourceIconPainter(
                 iconRes = iconRes,
                 iconType = IconType.SQUARE_IMAGE,
-                modifier = Modifier.padding(end = 16.dp)
+                modifier = Modifier
+                    .padding(end = 16.dp)
+                    .clip(RoundedCornerShape(MisticaTheme.radius.mediaSmallBorderRadius))
             )
         }
 
diff --git a/library/src/main/res/layout/callout_view.xml b/library/src/main/res/layout/callout_view.xml
index cb58b05a8..59d49d27e 100644
--- a/library/src/main/res/layout/callout_view.xml
+++ b/library/src/main/res/layout/callout_view.xml
@@ -39,22 +39,22 @@
 				tools:src="@tools:sample/avatars"
 				/>
 
-		<ImageView
+		<com.google.android.material.imageview.ShapeableImageView
 				android:id="@+id/callout_image"
 				android:layout_width="40dp"
 				android:layout_height="40dp"
 				android:layout_marginStart="16dp"
 				android:importantForAccessibility="no"
 				android:scaleType="centerCrop"
+				android:visibility="visible"
+				app:shapeAppearance="@style/CalloutRoundedImageView"
 				tools:src="@tools:sample/avatars"
-				tools:visibility="gone"
 				/>
 
 		<com.google.android.material.imageview.ShapeableImageView
 				android:id="@+id/callout_circular_image"
 				android:layout_width="40dp"
 				android:layout_height="40dp"
-				android:layout_gravity="center"
 				android:layout_marginStart="16dp"
 				android:importantForAccessibility="no"
 				android:scaleType="centerCrop"
diff --git a/library/src/main/res/values/styles_images.xml b/library/src/main/res/values/styles_images.xml
index 4f2433e64..779973d65 100644
--- a/library/src/main/res/values/styles_images.xml
+++ b/library/src/main/res/values/styles_images.xml
@@ -10,4 +10,9 @@
         <item name="cornerFamily">rounded</item>
         <item name="cornerSize">4dp</item>
     </style>
+
+    <style name="CalloutRoundedImageView" parent="">
+        <item name="cornerFamily">rounded</item>
+        <item name="cornerSize">?mediaSmallBorderRadius</item>
+    </style>
 </resources>
\ No newline at end of file

From 9cf2cf3e70a11bd0f50a4d6f2d8485b04253f123 Mon Sep 17 00:00:00 2001
From: Fernando Quilez Esquitino <fernando.esquitino@telefonica.com>
Date: Tue, 28 Nov 2023 17:07:43 +0100
Subject: [PATCH 13/13] PR changes

---
 .../catalog/ui/compose/components/Callouts.kt |  7 +----
 .../telefonica/mistica/callout/CalloutView.kt | 28 -------------------
 2 files changed, 1 insertion(+), 34 deletions(-)

diff --git a/catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/Callouts.kt b/catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/Callouts.kt
index 1d4d7ed8a..fd9c6bc50 100644
--- a/catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/Callouts.kt
+++ b/catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/Callouts.kt
@@ -150,12 +150,7 @@ fun Callouts() {
                     title = title.takeIf { it.isNotBlank() },
                     description = description.takeIf { it.isNotBlank() },
                     buttonConfig = buttonConfig,
-                    imageConfig = when (iconType) {
-                        CalloutViewImageConfig.NONE -> CalloutViewImageConfig.NONE
-                        CalloutViewImageConfig.ICON -> CalloutViewImageConfig.ICON
-                        CalloutViewImageConfig.SQUARE_IMAGE -> CalloutViewImageConfig.SQUARE_IMAGE
-                        CalloutViewImageConfig.CIRCULAR_IMAGE -> CalloutViewImageConfig.CIRCULAR_IMAGE
-                    },
+                    imageConfig = iconType,
                     iconRes = when (iconType) {
                         CalloutViewImageConfig.NONE -> null
                         CalloutViewImageConfig.ICON -> R.drawable.ic_callout
diff --git a/library/src/main/java/com/telefonica/mistica/callout/CalloutView.kt b/library/src/main/java/com/telefonica/mistica/callout/CalloutView.kt
index dc027ac21..c9fcb410b 100644
--- a/library/src/main/java/com/telefonica/mistica/callout/CalloutView.kt
+++ b/library/src/main/java/com/telefonica/mistica/callout/CalloutView.kt
@@ -348,34 +348,6 @@ class CalloutView @JvmOverloads constructor(
         }
     }
 
-    private fun setImageConfig(imageConfig: CalloutViewImageConfig) {
-        when (imageConfig) {
-            CalloutViewImageConfig.NONE -> {
-                icon.visibility = GONE
-                image.visibility = GONE
-                circularImage.visibility = GONE
-            }
-
-            CalloutViewImageConfig.ICON -> {
-                icon.visibility = VISIBLE
-                image.visibility = GONE
-                circularImage.visibility = GONE
-            }
-
-            CalloutViewImageConfig.SQUARE_IMAGE -> {
-                icon.visibility = GONE
-                image.visibility = VISIBLE
-                circularImage.visibility = GONE
-            }
-
-            CalloutViewImageConfig.CIRCULAR_IMAGE -> {
-                icon.visibility = GONE
-                image.visibility = GONE
-                circularImage.visibility = VISIBLE
-            }
-        }
-    }
-
     private fun marginStart(value: Float): LinearLayout.LayoutParams {
         val layoutParams = LinearLayout.LayoutParams(
             LinearLayout.LayoutParams.WRAP_CONTENT,