From 16adc4524d7fcf4fe96c2d1d15c9f512ededc97c Mon Sep 17 00:00:00 2001
From: kennylam <kennylam@proton.me>
Date: Tue, 17 Jan 2023 12:32:56 -0500
Subject: [PATCH] feat(tile): add custom event to `selected-tile` (#9898)

### Related Ticket(s)

#9740

### Description

Adds custom event after `selectable-tile` is selected

### Changelog

**New**

- `bx-selectable-tile-changed` custom event added to `selectable-tile`

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
---
 .../src/components/tile/selectable-tile.ts    | 22 ++++++++++++++++++-
 .../src/components/tile/tile-story.mdx        |  2 +-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/carbon-web-components/src/components/tile/selectable-tile.ts b/packages/carbon-web-components/src/components/tile/selectable-tile.ts
index db6528b5a5e..a7b3fc872dc 100644
--- a/packages/carbon-web-components/src/components/tile/selectable-tile.ts
+++ b/packages/carbon-web-components/src/components/tile/selectable-tile.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -29,6 +29,7 @@ const { prefix } = settings;
  * Multi-selectable tile.
  *
  * @element bx-selectable-tile
+ * @fires bx-selectable-tile-changed - The custom event fired after this selectable tile changes its selected state.
  */
 @customElement(`${prefix}-selectable-tile`)
 class BXSelectableTile extends FocusMixin(LitElement) {
@@ -45,6 +46,18 @@ class BXSelectableTile extends FocusMixin(LitElement) {
    */
   protected _handleChange() {
     this.selected = this._inputNode.checked;
+
+    const selected = this.selected;
+    const { eventChange } = this.constructor as typeof BXSelectableTile;
+    this.dispatchEvent(
+      new CustomEvent(eventChange, {
+        bubbles: true,
+        composed: true,
+        detail: {
+          selected,
+        },
+      })
+    );
   }
 
   /**
@@ -124,6 +137,13 @@ class BXSelectableTile extends FocusMixin(LitElement) {
     `;
   }
 
+  /**
+   * The name of the custom event fired after this selectable tile changes its selected state.
+   */
+  static get eventChange() {
+    return `${prefix}-selectable-tile-changed`;
+  }
+
   static styles = styles;
 }
 
diff --git a/packages/carbon-web-components/src/components/tile/tile-story.mdx b/packages/carbon-web-components/src/components/tile/tile-story.mdx
index cd05d00bb6a..238d8ca8ce2 100644
--- a/packages/carbon-web-components/src/components/tile/tile-story.mdx
+++ b/packages/carbon-web-components/src/components/tile/tile-story.mdx
@@ -93,7 +93,7 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
 </bx-selectable-tile>
 ```
 
-## `<bx-selectable-tile>` attributes and properties
+## `<bx-selectable-tile>` attributes and properties and events
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
 `<bx-selectable-tile selected>`) and `false` means not setting the attribute