projects/tl-elements/src/lib/tl-alert/tl-alert.component.ts
| changeDetection | ChangeDetectionStrategy.Default |
| selector | tl-alert-component |
| styleUrls | ./tl-alert.component.scss |
| templateUrl | ./tl-alert.component.html |
Properties |
Inputs |
HostBindings |
constructor(injector: Injector)
|
||||||
|
Parameters :
|
| alertType | |
Type : "basic" | "self-closing" | "custom"
|
|
|
Used to override the type of alert. |
|
| closeable | |
Type : "true" | "false"
|
|
Default value : 'true'
|
|
|
Used to override if close button has to be present for an alert. |
|
| closeTimer | |
Type : any
|
|
| themeVariant | |
Type : any
|
|
|
Used to override the theme variant. |
|
| inheritFontStyle | |
Type : "true" | "false"
|
|
|
Inherited from
TamuAbstractBaseComponent
|
|
|
Defined in
TamuAbstractBaseComponent:14
|
|
| style.--tl-font-family-sans-serif |
Type : string
|
Default value : 'var(--tl-default-font-family-sans-serif)'
|
|
Inherited from
TamuAbstractBaseComponent
|
|
Defined in
TamuAbstractBaseComponent:12
|
|
Allows for the override of the --tl-font-family-sans-serif css variable. |
| style.--tl-font-size |
Type : string
|
Default value : 'var(--tl-default-font-size)'
|
|
Inherited from
TamuAbstractBaseComponent
|
|
Defined in
TamuAbstractBaseComponent:9
|
|
Allows for the override of the --tl-default-font-size css variable. |
| _fontFamily |
Type : string
|
Default value : 'var(--tl-default-font-family-sans-serif)'
|
Decorators :
@HostBinding('style.--tl-font-family-sans-serif')
|
|
Inherited from
TamuAbstractBaseComponent
|
|
Defined in
TamuAbstractBaseComponent:12
|
|
Allows for the override of the --tl-font-family-sans-serif css variable. |
| _fontSize |
Type : string
|
Default value : 'var(--tl-default-font-size)'
|
Decorators :
@HostBinding('style.--tl-font-size')
|
|
Inherited from
TamuAbstractBaseComponent
|
|
Defined in
TamuAbstractBaseComponent:9
|
|
Allows for the override of the --tl-default-font-size css variable. |
import { ChangeDetectionStrategy, Component, Injector, Input } from '@angular/core';
import { TamuAbstractBaseComponent } from '../shared/tl-abstract-base.component';
@Component({
selector: 'tl-alert-component',
templateUrl: './tl-alert.component.html',
styleUrls: ['./tl-alert.component.scss'],
changeDetection: ChangeDetectionStrategy.Default
})
export class TlAlertComponent extends TamuAbstractBaseComponent {
/** Used to override the theme variant. */
@Input() themeVariant;
/** Used to override the type of alert. */
@Input() alertType: 'basic' | 'self-closing' | 'custom';
/** Used to override if close button has to be present for an alert. */
@Input() closeable: 'true' | 'false' = 'true';
@Input() closeTimer;
// tslint:disable-next-line:unnecessary-constructor
constructor(injector: Injector) {
super(injector);
}
}
<wvr-alert-component
[alertType]="alertType"
[themeVariant]="themeVariant"
[closeable]="closeable"
[closeTimer]="closeTimer">
<ng-content select="template" ngProjectAs="template"></ng-content>
</wvr-alert-component>
./tl-alert.component.scss
@import "../shared/styles/tl-variables.scss";
:host {
wvr-alert-component {
::ng-deep {
.alert {
border-radius: 0;
}
.btn.btn-danger.close:hover,
.btn.btn-dark.close:hover,
.btn.btn-info.close:hover,
.btn.btn-light.close:hover,
.btn.btn-primary.close:hover,
.btn.btn-secondary.close:hover,
.btn.btn-success.close:hover,
.btn.btn-warning.close:hover {
color: var(--tl-black);
text-decoration: none;
background: transparent;
opacity: .75;
}
.btn.btn-danger.close:focus,
.btn.btn-dark.close:focus,
.btn.btn-info.close:focus,
.btn.btn-light.close:focus,
.btn.btn-primary.close:focus,
.btn.btn-secondary.close:focus,
.btn.btn-success.close:focus,
.btn.btn-warning.close:focus {
opacity: .75;
color: var(--tl-black);
background: transparent;
// border: 0.12rem solid var(--tl-black);
top: -2px;
}
.btn.btn-danger.close:focus,
.btn.btn-dark.close:focus,
.btn.btn-info.close:focus,
.btn.btn-light.close:focus,
.btn.btn-primary.close:focus,
.btn.btn-secondary.close:focus,
.btn.btn-success.close:focus,
.btn.btn-warning.close:focus {
box-shadow: none;
}
.btn.btn-danger.close:active,
.btn.btn-danger.close.active,
.btn.btn-dark.close:active,
.btn.btn-dark.close.active,
.btn.btn-info.close:active,
.btn.btn-info.close.active,
.btn.btn-light.close:active,
.btn.btn-light.close.active,
.btn.btn-primary.close:active,
.btn.btn-primary.close.active,
.btn.btn-secondary.close:active,
.btn.btn-secondary.close.active,
.btn.btn-success.close:active,
.btn.btn-success.close.active,
.btn.btn-warning.close:active,
.btn.btn-warning.close.active {
color: var(--tl-black);
background: transparent;
}
}
}
}