ngx-bootstrap
Version:
Angular Bootstrap
75 lines • 3.2 kB
JavaScript
import { __decorate, __metadata } from "tslib";
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
import { AlertConfig } from './alert.config';
import { OnChange } from 'ngx-bootstrap/utils';
export class AlertComponent {
constructor(_config, changeDetection) {
this.changeDetection = changeDetection;
/** Alert type.
* Provides one of four bootstrap supported contextual classes:
* `success`, `info`, `warning` and `danger`
*/
this.type = 'warning';
/** If set, displays an inline "Close" button */
this.dismissible = false;
/** Is alert visible */
this.isOpen = true;
/** This event fires immediately after close instance method is called,
* $event is an instance of Alert component.
*/
this.onClose = new EventEmitter();
/** This event fires when alert closed, $event is an instance of Alert component */
this.onClosed = new EventEmitter();
this.classes = '';
this.dismissibleChange = new EventEmitter();
Object.assign(this, _config);
this.dismissibleChange.subscribe(( /*dismissible: boolean*/) => {
this.classes = this.dismissible ? 'alert-dismissible' : '';
this.changeDetection.markForCheck();
});
}
ngOnInit() {
if (this.dismissOnTimeout) {
// if dismissOnTimeout used as attr without binding, it will be a string
setTimeout(() => this.close(), parseInt(this.dismissOnTimeout, 10));
}
}
// todo: animation ` If the .fade and .in classes are present on the element,
// the alert will fade out before it is removed`
/**
* Closes an alert by removing it from the DOM.
*/
close() {
if (!this.isOpen) {
return;
}
this.onClose.emit(this);
this.isOpen = false;
this.changeDetection.markForCheck();
this.onClosed.emit(this);
}
}
AlertComponent.decorators = [
{ type: Component, args: [{
selector: 'alert,bs-alert',
template: "<ng-template [ngIf]=\"isOpen\">\n <div [class]=\"'alert alert-' + type\" role=\"alert\" [ngClass]=\"classes\">\n <ng-template [ngIf]=\"dismissible\">\n <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"close()\">\n <span aria-hidden=\"true\">×</span>\n <span class=\"sr-only\">Close</span>\n </button>\n </ng-template>\n <ng-content></ng-content>\n </div>\n</ng-template>\n",
changeDetection: ChangeDetectionStrategy.OnPush
},] }
];
AlertComponent.ctorParameters = () => [
{ type: AlertConfig },
{ type: ChangeDetectorRef }
];
AlertComponent.propDecorators = {
type: [{ type: Input }],
dismissible: [{ type: Input }],
dismissOnTimeout: [{ type: Input }],
isOpen: [{ type: Input }],
onClose: [{ type: Output }],
onClosed: [{ type: Output }]
};
__decorate([
OnChange(),
__metadata("design:type", Object)
], AlertComponent.prototype, "dismissible", void 0);
//# sourceMappingURL=alert.component.js.map