Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitf1592f3

Browse files
committed
fix(list-group-item): cListGroupItem directive loosing tabindex attribute, refactor;
1 parent3cfcaf3 commitf1592f3

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
exportclassListGroupItemDirective{
26+
staticngAcceptInputType_active:BooleanInput;
27+
staticngAcceptInputType_disabled:BooleanInput;
28+
2529
readonlyhostElement=inject(ElementRef);
2630

2731
/**
2832
* Toggle the active state for the component.
29-
*@typeInputSignal<boolean | undefined>
33+
*@typeInputSignalWithTransform<boolean, unknown>
3034
*/
31-
readonlyactive:InputSignal<boolean|undefined>=input();
35+
readonlyactive: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
readonlydisabled: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+
readonlytabindex=input(undefined,{transform:numberAttribute});
53+
4554
readonlyhostClasses=computed(()=>{
4655
consthost: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
}asRecord<string,boolean>;
@@ -64,10 +73,10 @@ export class ListGroupItemDirective {
6473
});
6574

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

7079
readonlyariaCurrent=computed(()=>{
71-
return<boolean>this.active()||null;
80+
returnthis.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
exportclassListGroupDirective{
12+
staticngAcceptInputType_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)
[8]ページ先頭
©2009-2025 Movatter.jp