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. ``` -## `` attributes and properties +## `` attributes and properties and events Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. ``) and `false` means not setting the attribute