Skip to content

Commit f1592f3

Browse files
committed
fix(list-group-item): cListGroupItem directive loosing tabindex attribute, refactor;
1 parent 3cfcaf3 commit f1592f3

File tree

2 files changed

+19
-8
lines changed

2 files changed

+19
-8
lines changed

projects/coreui-angular/src/lib/list-group/list-group-item.directive.ts

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,10 @@ import {
66
inject,
77
input,
88
InputSignal,
9-
InputSignalWithTransform
9+
InputSignalWithTransform,
10+
numberAttribute
1011
} from '@angular/core';
11-
import { Colors } from '../coreui.types';
12+
import { BooleanInput, Colors } from '../coreui.types';
1213

1314
@Directive({
1415
selector: '[cListGroupItem], c-list-group-item',
@@ -22,13 +23,16 @@ import { Colors } from '../coreui.types';
2223
}
2324
})
2425
export class ListGroupItemDirective {
26+
static ngAcceptInputType_active: BooleanInput;
27+
static ngAcceptInputType_disabled: BooleanInput;
28+
2529
readonly hostElement = inject(ElementRef);
2630

2731
/**
2832
* Toggle the active state for the component.
29-
* @type InputSignal<boolean | undefined>
33+
* @type InputSignalWithTransform<boolean, unknown>
3034
*/
31-
readonly active: InputSignal<boolean | undefined> = input();
35+
readonly active: InputSignalWithTransform<boolean, unknown> = input(false, { transform: booleanAttribute });
3236

3337
/**
3438
* Sets the color context of the component to one of CoreUI’s themed colors.
@@ -42,12 +46,17 @@ export class ListGroupItemDirective {
4246
*/
4347
readonly disabled: InputSignalWithTransform<boolean, unknown> = input(false, { transform: booleanAttribute });
4448

49+
/**
50+
* The tabindex attribute specifies the tab order of an element (when the "tab" button is used for navigating).
51+
*/
52+
readonly tabindex = input(undefined, { transform: numberAttribute });
53+
4554
readonly hostClasses = computed(() => {
4655
const host: HTMLElement = this.hostElement.nativeElement;
4756
return {
4857
'list-group-item': true,
4958
'list-group-item-action': host.nodeName === 'A' || host.nodeName === 'BUTTON',
50-
active: !!this.active(),
59+
active: this.active(),
5160
disabled: this._disabled(),
5261
[`list-group-item-${this.color()}`]: !!this.color()
5362
} as Record<string, boolean>;
@@ -64,10 +73,10 @@ export class ListGroupItemDirective {
6473
});
6574

6675
readonly tabIndex = computed(() => {
67-
return this._disabled() ? '-1' : null;
76+
return this._disabled() ? '-1' : (this.tabindex() ?? null);
6877
});
6978

7079
readonly ariaCurrent = computed(() => {
71-
return <boolean>this.active() || null;
80+
return this.active() || null;
7281
});
7382
}

projects/coreui-angular/src/lib/list-group/list-group.directive.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { booleanAttribute, computed, Directive, input, InputSignalWithTransform } from '@angular/core';
2-
import { Sizes } from '../coreui.types';
2+
import { BooleanInput, Sizes } from '../coreui.types';
33

44
@Directive({
55
selector: '[cListGroup]',
@@ -9,6 +9,8 @@ import { Sizes } from '../coreui.types';
99
}
1010
})
1111
export class ListGroupDirective {
12+
static ngAcceptInputType_flush: BooleanInput;
13+
1214
/**
1315
* Remove some borders and rounded corners to render list group items edge-to-edge in a parent component (e.g., `<CCard>`).
1416
* @type boolean

0 commit comments

Comments
 (0)