Skip to content

Commit b3f7fbb

Browse files
committed
refactor(alert): @input() transform instead of @angular/cdk coerce functions, use control flow
1 parent 0171071 commit b3f7fbb

File tree

2 files changed

+14
-36
lines changed

2 files changed

+14
-36
lines changed

projects/coreui-angular/src/lib/alert/alert.component.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,8 @@
22
@if (dismissible) {
33
<ng-container *ngTemplateOutlet="templates?.alertButtonCloseTemplate || defaultAlertButtonCloseTemplate" />
44
}
5-
<ng-content />
5+
<ng-content></ng-content>
66
}
7-
87
<ng-template #defaultAlertButtonCloseTemplate>
98
<button (click)="visible=false" aria-label="Close" cButtonClose></button>
109
</ng-template>

projects/coreui-angular/src/lib/alert/alert.component.ts

Lines changed: 13 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {
22
AfterContentInit,
3+
booleanAttribute,
34
Component,
45
ContentChildren,
56
EventEmitter,
@@ -11,7 +12,6 @@ import {
1112
} from '@angular/core';
1213
import { NgTemplateOutlet } from '@angular/common';
1314
import { animate, AnimationEvent, state, style, transition, trigger } from '@angular/animations';
14-
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
1515

1616
import { Colors } from '../coreui.types';
1717
import { TemplateIdDirective } from '../shared';
@@ -48,10 +48,6 @@ type AnimateType = ('hide' | 'show');
4848
})
4949
export class AlertComponent implements AfterContentInit {
5050

51-
static ngAcceptInputType_dismissible: BooleanInput;
52-
static ngAcceptInputType_fade: BooleanInput;
53-
static ngAcceptInputType_visible: BooleanInput;
54-
5551
hide!: boolean;
5652
/**
5753
* Sets the color context of the component to one of CoreUI’s themed colors.
@@ -79,54 +75,37 @@ export class AlertComponent implements AfterContentInit {
7975
templates: any = {};
8076
@ContentChildren(TemplateIdDirective, { descendants: true }) contentTemplates!: QueryList<TemplateIdDirective>;
8177

82-
private _dismissible = false;
83-
8478
/**
8579
* Optionally adds a close button to alert and allow it to self dismiss.
8680
* @type boolean
81+
* @default false
8782
*/
88-
@Input()
89-
get dismissible(): boolean {
90-
return this._dismissible;
91-
}
92-
93-
set dismissible(value: boolean) {
94-
this._dismissible = coerceBooleanProperty(value);
95-
}
96-
97-
private _fade = false;
83+
@Input({ transform: booleanAttribute }) dismissible: boolean = false;
9884

9985
/**
10086
* Adds animation for dismissible alert.
10187
* @type boolean
10288
*/
103-
@Input()
104-
get fade(): boolean {
105-
return this._fade;
106-
}
107-
108-
set fade(value: boolean) {
109-
this._fade = coerceBooleanProperty(value);
110-
}
111-
112-
private _visible = true;
113-
114-
get visible() {
115-
return this._visible;
116-
}
89+
@Input({ transform: booleanAttribute }) fade: boolean = false;
11790

11891
/**
11992
* Toggle the visibility of alert component.
12093
* @type boolean
12194
*/
122-
@Input()
95+
@Input({ transform: booleanAttribute })
12396
set visible(value: boolean) {
124-
if (this._visible !== value) {
125-
this._visible = coerceBooleanProperty(value);
97+
if (this.#visible !== value) {
98+
this.#visible = value;
12699
this.visibleChange.emit(value);
127100
}
128101
};
129102

103+
get visible() {
104+
return this.#visible;
105+
}
106+
107+
#visible: boolean = true;
108+
130109
@HostBinding('@.disabled')
131110
get animationDisabled(): boolean {
132111
return !this.fade;

0 commit comments

Comments
 (0)