diff --git a/segmented_button_set/lib/segmented-button-set.ts b/segmented_button_set/lib/segmented-button-set.ts
index 09f46fa100..fd965b0227 100644
--- a/segmented_button_set/lib/segmented-button-set.ts
+++ b/segmented_button_set/lib/segmented-button-set.ts
@@ -31,7 +31,6 @@ export class SegmentedButtonSet extends LitElement {
@queryAssignedElements({flatten: true}) buttons!: SegmentedButton[];
private handleSegmentedButtonInteraction(e: CustomEvent) {
- // TODO(b/229912696): Support interactions.
const index = this.buttons.indexOf(e.target as SegmentedButton);
this.toggleSelection(index);
}
@@ -40,10 +39,12 @@ export class SegmentedButtonSet extends LitElement {
if (this.indexOutOfBounds(index)) return;
if (this.multiselect) {
this.buttons[index].selected = !this.buttons[index].selected;
+ this.emitSelectionEvent(index);
return;
}
// Single-select segmented buttons are not unselectable.
this.buttons[index].selected = true;
+ this.emitSelectionEvent(index);
// Deselect all other buttons for single-select.
for (let i = 0; i < this.buttons.length; i++) {
if (i === index) continue;
@@ -55,23 +56,33 @@ export class SegmentedButtonSet extends LitElement {
return index < 0 || index >= this.buttons.length;
}
+ private emitSelectionEvent(index: number) {
+ this.dispatchEvent(new CustomEvent('segmented-button-set-selection', {
+ detail: {
+ button: this.buttons[index],
+ selected: this.buttons[index].selected,
+ index,
+ },
+ bubbles: true,
+ composed: true
+ }));
+ }
+
/** @soyTemplate */
override render(): TemplateResult {
return html`
-
-
-
- `;
+
+
+
+ `;
}
/** @soyTemplate */
protected getRenderClasses(): ClassInfo {
- return {
- // TODO(b/213634341): Write styles.
- };
+ return {};
}
}