From 7151f6df668d960b5cb84ea8926d5b24d98a043c Mon Sep 17 00:00:00 2001
From: Mel O'Hagan <mel@budibase.com>
Date: Wed, 11 May 2022 14:03:08 +0100
Subject: [PATCH] Containers support onClick

---
 packages/client/manifest.json                       |  5 +++++
 packages/client/src/components/app/Container.svelte | 13 ++++++++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 4190d7f076..bca61af09f 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -219,6 +219,11 @@
         "showInBar": true,
         "barIcon": "ModernGridView",
         "barTitle": "Wrap"
+      },
+      {
+        "type": "event",
+        "label": "On Click",
+        "key": "onClick"
       }
     ]
   },
diff --git a/packages/client/src/components/app/Container.svelte b/packages/client/src/components/app/Container.svelte
index 148179c98f..9b2e170106 100644
--- a/packages/client/src/components/app/Container.svelte
+++ b/packages/client/src/components/app/Container.svelte
@@ -10,22 +10,30 @@
   export let size
   export let gap
   export let wrap
+  export let onClick
 
   $: directionClass = direction ? `valid-container direction-${direction}` : ""
   $: hAlignClass = hAlign ? `hAlign-${hAlign}` : ""
   $: vAlignClass = vAlign ? `vAlign-${vAlign}` : ""
   $: sizeClass = size ? `size-${size}` : ""
   $: gapClass = gap ? `gap-${gap}` : ""
+  $: clickableClass = onClick ? "clickable" : ""
   $: classNames = [
     directionClass,
     hAlignClass,
     vAlignClass,
     sizeClass,
     gapClass,
+    clickableClass,
   ].join(" ")
 </script>
 
-<div class={classNames} use:styleable={$component.styles} class:wrap>
+<div
+  class={classNames}
+  use:styleable={$component.styles}
+  class:wrap
+  on:click={onClick}
+>
   <slot />
 </div>
 
@@ -104,4 +112,7 @@
   .wrap {
     flex-wrap: wrap;
   }
+  .clickable {
+    cursor: pointer;
+  }
 </style>