ngx-bootstrap
Version:
Angular Bootstrap
106 lines (100 loc) • 7.36 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, input, output, effect, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { NgClass } from '@angular/common';
class AlertConfig {
constructor() {
/** default alert type */
this.type = 'warning';
/** is alerts are dismissible by default */
this.dismissible = false;
/** default time before alert will dismiss */
this.dismissOnTimeout = undefined;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AlertConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AlertConfig, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AlertConfig, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}] });
class AlertComponent {
constructor(_config, changeDetection) {
this._config = _config;
this.changeDetection = changeDetection;
/** Alert type.
* Provides one of four bootstrap supported contextual classes:
* `success`, `info`, `warning` and `danger`
*/
this.type = input(this._config.type, ...(ngDevMode ? [{ debugName: "type" }] : []));
/** If set, displays an inline "Close" button */
this.dismissible = input(this._config.dismissible, ...(ngDevMode ? [{ debugName: "dismissible" }] : []));
/** Number in milliseconds, after which alert will be closed */
this.dismissOnTimeout = input(this._config.dismissOnTimeout, ...(ngDevMode ? [{ debugName: "dismissOnTimeout" }] : []));
/** Is alert visible */
this.isOpen = input(true, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
/** This event fires immediately after close instance method is called,
* $event is an instance of Alert component.
*/
this.onClose = output();
/** This event fires when alert closed, $event is an instance of Alert component */
this.onClosed = output();
this.classes = '';
this._isOpen = true;
// Use effect to watch for dismissible changes
effect(() => {
const dismissibleValue = this.dismissible();
this.classes = dismissibleValue ? 'alert-dismissible' : '';
this.changeDetection.markForCheck();
});
// Use effect to sync isOpen input with internal state
effect(() => {
this._isOpen = this.isOpen();
});
}
ngOnInit() {
const timeout = this.dismissOnTimeout();
if (timeout) {
// if dismissOnTimeout used as attr without binding, it will be a string
setTimeout(() => this.close(), parseInt(timeout, 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);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AlertComponent, deps: [{ token: AlertConfig }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: AlertComponent, isStandalone: true, selector: "alert,bs-alert", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, dismissOnTimeout: { classPropertyName: "dismissOnTimeout", publicName: "dismissOnTimeout", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose", onClosed: "onClosed" }, ngImport: i0, template: "@if (_isOpen) {\n <div [class]=\"'alert alert-' + type()\" role=\"alert\" [ngClass]=\"classes\">\n @if (dismissible()) {\n <button type=\"button\" class=\"close btn-close\" aria-label=\"Close\" (click)=\"close()\">\n <span aria-hidden=\"true\" class=\"visually-hidden\">×</span>\n <span class=\"sr-only visually-hidden\">Close</span>\n </button>\n }\n <ng-content></ng-content>\n </div>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AlertComponent, decorators: [{
type: Component,
args: [{ selector: 'alert,bs-alert', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgClass], template: "@if (_isOpen) {\n <div [class]=\"'alert alert-' + type()\" role=\"alert\" [ngClass]=\"classes\">\n @if (dismissible()) {\n <button type=\"button\" class=\"close btn-close\" aria-label=\"Close\" (click)=\"close()\">\n <span aria-hidden=\"true\" class=\"visually-hidden\">×</span>\n <span class=\"sr-only visually-hidden\">Close</span>\n </button>\n }\n <ng-content></ng-content>\n </div>\n}\n" }]
}], ctorParameters: () => [{ type: AlertConfig }, { type: i0.ChangeDetectorRef }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], dismissOnTimeout: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissOnTimeout", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], onClose: [{ type: i0.Output, args: ["onClose"] }], onClosed: [{ type: i0.Output, args: ["onClosed"] }] } });
class AlertModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: AlertModule, imports: [AlertComponent], exports: [AlertComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AlertModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AlertModule, decorators: [{
type: NgModule,
args: [{
imports: [AlertComponent],
exports: [AlertComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { AlertComponent, AlertConfig, AlertModule };
//# sourceMappingURL=ngx-bootstrap-alert.mjs.map