diff --git a/libs/core/segmented-button/segmented-button.component.ts b/libs/core/segmented-button/segmented-button.component.ts index afdf70bdb01..579fde8c47f 100644 --- a/libs/core/segmented-button/segmented-button.component.ts +++ b/libs/core/segmented-button/segmented-button.component.ts @@ -22,13 +22,18 @@ import { } from '@angular/core'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; -import { FocusableListDirective, KeyUtil, Nullable, RtlService, destroyObservable } from '@fundamental-ngx/cdk/utils'; +import { + FocusableItemDirective, + FocusableListDirective, + KeyUtil, + Nullable, + RtlService, + destroyObservable +} from '@fundamental-ngx/cdk/utils'; import { ButtonComponent, FD_BUTTON_COMPONENT } from '@fundamental-ngx/core/button'; import { Subject, asyncScheduler, fromEvent, merge } from 'rxjs'; import { filter, observeOn, startWith, takeUntil, tap } from 'rxjs/operators'; -export const isDisabledClass = 'is-disabled'; - export type SegmentedButtonValue = string | (string | null)[] | null; /** @@ -79,6 +84,10 @@ export class SegmentedButtonComponent implements AfterViewInit, ControlValueAcce @ContentChildren(FD_BUTTON_COMPONENT) _buttons: QueryList; + /** @hidden */ + @ContentChildren(FocusableItemDirective) + _focusableItems: QueryList; + /** * Value of segmented button can have 2 types: * - string, when there is no toggle mode and only 1 value can be chosen. @@ -172,7 +181,7 @@ export class SegmentedButtonComponent implements AfterViewInit, ControlValueAcce /** @hidden */ private _listenToButtonChanges(): void { - this._buttons.changes + merge(this._buttons.changes, this._focusableItems.changes) .pipe(startWith(1), observeOn(asyncScheduler), takeUntilDestroyed(this._destroyRef)) .subscribe(() => { this._onRefresh$.next(); @@ -208,14 +217,12 @@ export class SegmentedButtonComponent implements AfterViewInit, ControlValueAcce /** @hidden */ private _handleTriggerOnButton(buttonComponent: ButtonComponent): void { if (!this._isButtonDisabled(buttonComponent)) { - if (!this._isButtonSelected(buttonComponent) && !this.toggle) { + if (!this.toggle) { this._buttons.forEach((button) => this._deselectButton(button)); this._selectButton(buttonComponent); this._propagateChange(); this._changeDetRef.markForCheck(); - } - - if (this.toggle) { + } else { this._toggleButton(buttonComponent); this._propagateChange(); this._changeDetRef.markForCheck(); @@ -225,8 +232,9 @@ export class SegmentedButtonComponent implements AfterViewInit, ControlValueAcce /** @hidden */ private _propagateChange(): void { - this.onChange(this._getValuesBySelected()); - this._currentValue = this._getValuesBySelected(); + const selectedValue = this._getValuesBySelected(); + this.onChange(selectedValue); + this._currentValue = selectedValue; } /** @hidden */ @@ -283,22 +291,22 @@ export class SegmentedButtonComponent implements AfterViewInit, ControlValueAcce /** @hidden */ private _toggleDisableButtons(disable: boolean): void { - if (!this._buttons) { + if (!this._buttons || !this._focusableItems) { return; } - this._buttons.forEach((button) => { - button.disabled = disable; + this._buttons.forEach((button) => (button.disabled = disable)); - const element = button.elementRef.nativeElement; - if (disable) { - element.setAttribute('disabled', 'true'); - element.setAttribute('tabindex', '-1'); - } else { - element.removeAttribute('disabled'); - element.setAttribute('tabindex', '0'); - } + this._focusableItems.forEach((focusableItemDirective) => { + focusableItemDirective.setTabbable(!disable); + focusableItemDirective.fdkFocusableItem = !disable; }); + if (disable) { + this._buttons.forEach((button) => { + button.elementRef.nativeElement.role = 'option'; + this._listenToTriggerEvents(button); + }); + } this._changeDetRef.markForCheck(); } diff --git a/libs/docs/core/segmented-button/examples/segmented-button-complex-example/segmented-button-complex-example.component.ts b/libs/docs/core/segmented-button/examples/segmented-button-complex-example/segmented-button-complex-example.component.ts index edccbc99dab..e505a1fcd9e 100644 --- a/libs/docs/core/segmented-button/examples/segmented-button-complex-example/segmented-button-complex-example.component.ts +++ b/libs/docs/core/segmented-button/examples/segmented-button-complex-example/segmented-button-complex-example.component.ts @@ -14,7 +14,15 @@ export class SegmentedButtonComplexExampleComponent { currentValue = ''; handleValueChange(value: string): void { - this.currentValue = value; - alert(`Current value changed to ${value}`); + const index = this.currentValue.indexOf(value); + if (index === -1) { + this.currentValue = this.currentValue ? `${this.currentValue},${value}` : value; + } else { + this.currentValue = this.currentValue + .split(',') + .filter((v) => v !== value) + .join(','); + } + alert(`Current value changed to ${this.currentValue}`); } }