fix(segmented button): added event handler to change selected index o…

…f segment item (#2166)
telekom · Feb 5, 2025 · 70f030a · 70f030a
1 parent 525e1c4
commit 70f030a
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
diff --git a/packages/components/src/components/segment/segment.tsx b/packages/components/src/components/segment/segment.tsx
@@ -18,6 +18,7 @@ import {
   Event,
   EventEmitter,
   Method,
+  Watch,
 } from '@stencil/core';
 import classNames from 'classnames';
 import { emitEvent } from '../../utils/utils';
@@ -72,6 +73,8 @@ export class Segment {
     id: string;
     selected: boolean;
   }>;
+  /** Emitted when selection has been changed. */
+  @Event({ eventName: 'scaleSelectionChanged' }) scaleSelectionChanged!: EventEmitter;
   /** @deprecated in v3 in favor of kebab-case event names */
   @Event({ eventName: 'scaleClick' }) scaleClickLegacy!: EventEmitter<{
     id: string;
@@ -80,6 +83,11 @@ export class Segment {
 
   private focusableElement: HTMLElement;
 
+  @Watch('selected')
+  selectionChanged() {
+    emitEvent(this, 'scaleSelectionChanged');
+  }
+
   @Method()
   async setFocus() {
     this.focusableElement.focus();

diff --git a/packages/components/src/components/segmented-button/segmented-button.tsx b/packages/components/src/components/segmented-button/segmented-button.tsx
@@ -99,6 +99,15 @@ export class SegmentedButton {
     this.setState(tempState);
   }
 
+  @Listen('scaleSelectionChanged')
+  selectionChangedHandler() {
+    this.selectedIndex = this.getSelectedIndex();
+    if (typeof(this.selectedIndex) !== 'number') { return }
+    this.getAllSegments().forEach((segment) => {
+      segment.setAttribute('selected-index', this.selectedIndex.toString());
+    })
+  }
+
   @Watch('disabled')
   @Watch('size')
   @Watch('selectedIndex')