@@ -6,9 +6,10 @@ import {
66inject ,
77input ,
88InputSignal ,
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 ( {
1415selector :'[cListGroupItem], c-list-group-item' ,
@@ -22,13 +23,16 @@ import { Colors } from '../coreui.types';
2223}
2324} )
2425export class ListGroupItemDirective {
26+ static ngAcceptInputType_active :BooleanInput ;
27+ static ngAcceptInputType_disabled :BooleanInput ;
28+
2529readonly 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 */
4347readonly 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+
4554readonly hostClasses = computed ( ( ) => {
4655const host :HTMLElement = this . hostElement . nativeElement ;
4756return {
4857'list-group-item' :true ,
4958'list-group-item-action' :host . nodeName === 'A' || host . nodeName === 'BUTTON' ,
50- active :! ! this . active ( ) ,
59+ active :this . active ( ) ,
5160disabled :this . _disabled ( ) ,
5261[ `list-group-item-${ this . color ( ) } ] :! ! this . color ( )
5362} as Record < string , boolean > ;
@@ -64,10 +73,10 @@ export class ListGroupItemDirective {
6473} ) ;
6574
6675readonly tabIndex = computed ( ( ) => {
67- return this . _disabled ( ) ?'-1' :null ;
76+ return this . _disabled ( ) ?'-1' :( this . tabindex ( ) ?? null ) ;
6877} ) ;
6978
7079readonly ariaCurrent = computed ( ( ) => {
71- return < boolean > this . active ( ) || null ;
80+ return this . active ( ) || null ;
7281} ) ;
7382}