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

Commit0bb9b72

Browse files
committed
refactor:@input() transform option of @angular/core@16.1 instead of @angular/cdk coerce functions (partial)
1 parentd47639b commit0bb9b72

File tree

31 files changed

+181
-539
lines changed

31 files changed

+181
-539
lines changed

‎projects/coreui-angular-chartjs/src/lib/chartjs.component.ts‎

Lines changed: 5 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import{
22
AfterViewInit,
3+
booleanAttribute,
34
ChangeDetectionStrategy,
45
ChangeDetectorRef,
56
Component,
@@ -8,14 +9,14 @@ import {
89
HostBinding,
910
Input,
1011
NgZone,
12+
numberAttribute,
1113
OnChanges,
1214
OnDestroy,
1315
Output,
1416
Renderer2,
1517
SimpleChanges,
1618
ViewChild
1719
}from'@angular/core';
18-
import{BooleanInput,coerceBooleanProperty,coerceNumberProperty,NumberInput}from'@angular/cdk/coercion';
1920

2021
importmergefrom'lodash-es/merge';
2122

@@ -36,53 +37,22 @@ let nextId = 0;
3637
})
3738
exportclassChartjsComponent<TTypeextendsChartType=ChartType,TData=DefaultDataPoint<TType>,TLabel=unknown>implementsAfterViewInit,OnDestroy,OnChanges{
3839

39-
staticngAcceptInputType_height:NumberInput;
40-
staticngAcceptInputType_width:NumberInput;
41-
staticngAcceptInputType_redraw:BooleanInput;
42-
4340
@Input()customTooltips=true;
4441
@Input()data?:ChartConfiguration<TType,TData,TLabel>['data'];
4542

4643
@HostBinding('style.height.px')
47-
@Input()
48-
setheight(value:number|undefined){
49-
this._height=coerceNumberProperty(value);
50-
}
51-
52-
getheight(){
53-
returnthis._height;
54-
}
55-
56-
private_height:number|undefined;
44+
@Input({transform:(value:string|number)=>numberAttribute(value,undefined)})height?:string|number;
5745

5846
@Input()id=`c-chartjs-${nextId++}`;
5947
@Input()options?:ChartConfiguration<TType,TData,TLabel>['options'];
6048
@Input()plugins:ChartConfiguration<TType,TData,TLabel>['plugins']=[];
6149

62-
@Input()
63-
setredraw(value:boolean){
64-
this._redraw=coerceBooleanProperty(value);
65-
}
66-
67-
getredraw():boolean{
68-
returnthis._redraw;
69-
}
70-
71-
private_redraw=false;
50+
@Input({transform:booleanAttribute})redraw:string|boolean=false;
7251

7352
@Input()type:ChartConfiguration<TType,TData,TLabel>['type']='bar'asTType;
7453

7554
@HostBinding('style.width.px')
76-
@Input()
77-
setwidth(value:number|undefined){
78-
this._width=coerceNumberProperty(value);
79-
}
80-
81-
getwidth(){
82-
returnthis._width;
83-
}
84-
85-
private_width:number|undefined;
55+
@Input({transform:(value:string|number)=>numberAttribute(value,undefined)})width?:string|number;
8656

8757
@Input()wrapper=true;
8858

‎projects/coreui-angular/src/lib/accordion/accordion-item/accordion-item.component.ts‎

Lines changed: 11 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import{
22
AfterContentInit,
3+
booleanAttribute,
34
Component,
45
ContentChildren,
56
HostBinding,
@@ -9,7 +10,6 @@ import {
910
QueryList
1011
}from'@angular/core';
1112
import{NgTemplateOutlet}from'@angular/common';
12-
import{BooleanInput,coerceBooleanProperty}from'@angular/cdk/coercion';
1313

1414
import{CollapseDirective}from'../../collapse';
1515
import{TemplateIdDirective}from'../../shared';
@@ -32,45 +32,35 @@ export class AccordionItemComponent implements OnInit, OnDestroy, AfterContentIn
3232
privateaccordionService:AccordionService
3333
){}
3434

35-
staticngAcceptInputType_visible:BooleanInput;
36-
contentId=`accordion-item-${nextId++}`;
37-
itemContext={$implicit:this.visible};
38-
templates:any={};
39-
@ContentChildren(TemplateIdDirective,{descendants:true})contentTemplates!:QueryList<TemplateIdDirective>;
40-
41-
private_visible:boolean=false;
42-
43-
getvisible(){
44-
returnthis._visible;
45-
}
46-
4735
/**
4836
* Toggle an accordion item programmatically
4937
*@type boolean
5038
*@default false
5139
*/
52-
@Input()
53-
setvisible(value:boolean){
54-
this._visible=coerceBooleanProperty(value);
55-
}
56-
57-
getopen(){
58-
returnthis.visible;
59-
}
40+
@Input({transform:booleanAttribute})visible:string|boolean=false;
6041

6142
@Input()
6243
setopen(value:boolean){
6344
console.warn('c-accordion-item "open" prop is deprecated, use "visible" prop instead.');
6445
this.visible=value||this.visible;
6546
}
6647

48+
getopen(){
49+
return<boolean>this.visible;
50+
}
51+
6752
@HostBinding('class')
6853
gethostClasses():any{
6954
return{
7055
'accordion-item':true
7156
};
7257
}
7358

59+
contentId=`accordion-item-${nextId++}`;
60+
itemContext={$implicit:<boolean>this.visible};
61+
templates:any={};
62+
@ContentChildren(TemplateIdDirective,{descendants:true})contentTemplates!:QueryList<TemplateIdDirective>;
63+
7464
ngOnInit():void{
7565
this.accordionService.addItem(this);
7666
}
Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import{Directive,HostBinding,Input}from'@angular/core';
2-
import{BooleanInput,coerceBooleanProperty}from'@angular/cdk/coercion';
1+
import{booleanAttribute,Directive,HostBinding,Input}from'@angular/core';
32
import{ButtonDirective}from'./button.directive';
43

54
@Directive({
@@ -8,19 +7,11 @@ import { ButtonDirective } from './button.directive';
87
})
98
exportclassButtonCloseDirectiveextendsButtonDirective{
109

11-
staticngAcceptInputType_white:BooleanInput;
12-
private_white=false;
1310
/**
1411
* Change the default color to white.
1512
*@type boolean
1613
*/
17-
@Input()
18-
getwhite():boolean{
19-
returnthis._white;
20-
}
21-
setwhite(value:boolean){
22-
this._white=coerceBooleanProperty(value);
23-
}
14+
@Input({transform:booleanAttribute})white:string|boolean=false;
2415

2516
@HostBinding('class')
2617
overridegethostClasses():any{
@@ -30,7 +21,7 @@ export class ButtonCloseDirective extends ButtonDirective {
3021
'btn-close-white':this.white,
3122
[`btn-${this.size}`]:!!this.size,
3223
disabled:this.disabled,
33-
active:this.active,
24+
active:this.active
3425
};
3526
}
3627
}

‎projects/coreui-angular/src/lib/button/button.directive.ts‎

Lines changed: 10 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import{Directive,HostBinding,Input}from'@angular/core';
2-
import{coerceBooleanProperty,BooleanInput}from'@angular/cdk/coercion';
1+
import{booleanAttribute,Directive,HostBinding,Input}from'@angular/core';
32

43
import{ButtonType,Colors,Shapes}from'../coreui.types';
54

@@ -10,24 +9,11 @@ import { ButtonType, Colors, Shapes } from '../coreui.types';
109
})
1110
exportclassButtonDirective{
1211

13-
constructor(){}
14-
15-
staticngAcceptInputType_active:BooleanInput;
16-
private_active=false;
17-
staticngAcceptInputType_disabled:BooleanInput;
18-
private_disabled=false;
19-
2012
/**
2113
* Toggle the active state for the component. [docs]
2214
*@type boolean
2315
*/
24-
@Input()
25-
getactive():boolean{
26-
returnthis._active;
27-
}
28-
setactive(value:boolean){
29-
this._active=coerceBooleanProperty(value);
30-
}
16+
@Input({transform:booleanAttribute})active:string|boolean=false;
3117

3218
/**
3319
* Sets the color context of the component to one of CoreUI’s themed colors. [docs]
@@ -38,29 +24,27 @@ export class ButtonDirective {
3824
* Toggle the disabled state for the component.
3925
*@type boolean
4026
*/
41-
@Input()
42-
getdisabled():boolean{
43-
returnthis._disabled;
44-
}
45-
setdisabled(value:boolean){
46-
this._disabled=coerceBooleanProperty(value);
47-
}
27+
@Input({transform:booleanAttribute})disabled:string|boolean=false;
28+
4829
/**
4930
* Select the shape of the component.
5031
*@type { 'rounded' | 'rounded-top' | 'rounded-end' | 'rounded-bottom' | 'rounded-start' | 'rounded-circle' | 'rounded-pill' | 'rounded-0' | 'rounded-1' | 'rounded-2' | 'rounded-3' | string}
5132
*/
5233
@Input()shape?:Shapes;
34+
5335
/**
5436
* Size the component small or large.
5537
*@type {'sm' | 'lg'}
5638
*/
5739
@Input()size?:'sm'|'lg'|''='';
40+
5841
/**
5942
* Specifies the type of button. Always specify the type attribute for the `<button>` element.
6043
* Different browsers may use different default types for the `<button>` element.
6144
*/
6245
@HostBinding('attr.type')
6346
@Input()type:ButtonType='button';
47+
6448
/**
6549
* Set the button variant to an outlined button or a ghost button.
6650
*@type {'ghost' | 'outline'}
@@ -82,17 +66,17 @@ export class ButtonDirective {
8266
}
8367

8468
@HostBinding('attr.aria-disabled')
85-
getariaDisabled(){
69+
getariaDisabled(){
8670
returnthis.disabled||null;
8771
};
8872

8973
@HostBinding('attr.aria-pressed')
9074
getisActive():boolean|null{
91-
returnthis.active||null;
75+
return<boolean>this.active||null;
9276
}
9377

9478
@HostBinding('attr.disabled')
95-
getattrDisabled(){
79+
getattrDisabled(){
9680
returnthis.disabled ?'' :null;
9781
};
9882

‎projects/coreui-angular/src/lib/dropdown/dropdown-menu/dropdown-menu.directive.ts‎

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import{Directive,ElementRef,HostBinding,Input,OnDestroy,OnInit,}from'@angular/core';
1+
import{booleanAttribute,Directive,ElementRef,HostBinding,Input,OnDestroy,OnInit}from'@angular/core';
22
import{Subscription}from'rxjs';
3-
import{BooleanInput,coerceBooleanProperty}from'@angular/cdk/coercion';
43
import{DropdownService}from'../dropdown.service';
54

65
@Directive({
@@ -9,7 +8,6 @@ import { DropdownService } from '../dropdown.service';
98
standalone:true
109
})
1110
exportclassDropdownMenuDirectiveimplementsOnInit,OnDestroy{
12-
staticngAcceptInputType_dark:BooleanInput;
1311

1412
constructor(
1513
publicelementRef:ElementRef,
@@ -29,15 +27,9 @@ export class DropdownMenuDirective implements OnInit, OnDestroy {
2927

3028
/**
3129
* Sets a darker color scheme to match a dark navbar.
30+
*@type boolean
3231
*/
33-
@Input()
34-
getdark():boolean{
35-
returnthis._dark;
36-
}
37-
setdark(value:boolean){
38-
this._dark=coerceBooleanProperty(value);
39-
}
40-
private_dark=false;
32+
@Input({transform:booleanAttribute})dark:string|boolean=false;
4133

4234
privatedropdownStateSubscription!:Subscription;
4335

@@ -47,7 +39,7 @@ export class DropdownMenuDirective implements OnInit, OnDestroy {
4739
'dropdown-menu':true,
4840
'dropdown-menu-dark':this.dark,
4941
[`dropdown-menu-${this.alignment}`]:!!this.alignment,
50-
show:this.visible,
42+
show:this.visible
5143
};
5244
}
5345

@@ -56,7 +48,7 @@ export class DropdownMenuDirective implements OnInit, OnDestroy {
5648
// workaround for popper position calculate (see also: dropdown.component)
5749
return{
5850
visibility:this.visible ?null :'',
59-
display:this.visible ?null :'',
51+
display:this.visible ?null :''
6052
};
6153
}
6254

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp