@craftsjs/alert
Version:
Material alert library for angular
297 lines (282 loc) • 21.2 kB
JavaScript
import * as i0 from '@angular/core';
import { ViewEncapsulation, ChangeDetectionStrategy, Component, EventEmitter, Output, InjectionToken, TemplateRef, Injector, ViewChildren, Inject, Injectable, NgModule } from '@angular/core';
import * as i1 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import * as i1$1 from '@angular/material/dialog';
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
import * as i2 from '@ngx-translate/core';
import { TranslateModule } from '@ngx-translate/core';
import * as i2$1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3 from '@craftsjs/core';
import { DynamicDirective, CoreModule } from '@craftsjs/core';
class AlertSuccessComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AlertSuccessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AlertSuccessComponent, selector: "alert-success", host: { classAttribute: "alert-icon alert-icon-success" }, ngImport: i0, template: "<span class=\"alert-icon-success-line alert-icon-success-line-long\"></span>\r\n<span class=\"alert-icon-success-line alert-icon-success-line-tip\"></span>\r\n<div class=\"alert-icon-success-ring\"></div>\r\n<div class=\"alert-icon-success-hide-corners\"></div>", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AlertSuccessComponent, decorators: [{
type: Component,
args: [{ selector: 'alert-success', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
class: 'alert-icon alert-icon-success'
}, template: "<span class=\"alert-icon-success-line alert-icon-success-line-long\"></span>\r\n<span class=\"alert-icon-success-line alert-icon-success-line-tip\"></span>\r\n<div class=\"alert-icon-success-ring\"></div>\r\n<div class=\"alert-icon-success-hide-corners\"></div>" }]
}] });
var AlertEnum;
(function (AlertEnum) {
AlertEnum["success"] = "success";
AlertEnum["error"] = "error";
AlertEnum["info"] = "info";
AlertEnum["warning"] = "warning";
})(AlertEnum || (AlertEnum = {}));
class AlertInfoComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AlertInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AlertInfoComponent, selector: "alert-info", host: { classAttribute: "alert-icon alert-icon-info" }, ngImport: i0, template: "", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AlertInfoComponent, decorators: [{
type: Component,
args: [{ selector: 'alert-info', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
class: 'alert-icon alert-icon-info'
}, template: "" }]
}] });
class WarningComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WarningComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: WarningComponent, selector: "alert-warning", host: { classAttribute: "alert-icon alert-icon-warning " }, ngImport: i0, template: "<span class=\"alert-icon-warning-body\">\r\n <span class=\"alert-icon-warning-dot\"></span>\r\n</span>", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WarningComponent, decorators: [{
type: Component,
args: [{ selector: 'alert-warning', host: {
class: 'alert-icon alert-icon-warning '
}, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<span class=\"alert-icon-warning-body\">\r\n <span class=\"alert-icon-warning-dot\"></span>\r\n</span>" }]
}] });
class ErrorComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ErrorComponent, selector: "alert-error", host: { classAttribute: "alert-icon alert-icon-error" }, ngImport: i0, template: "<div class=\"alert-icon-error-x-mark\">\r\n <span class=\"alert-icon-error-line alert-icon-error-line-left\"></span>\r\n <span class=\"alert-icon-error-line alert-icon-error-line-right\"></span>\r\n</div>", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ErrorComponent, decorators: [{
type: Component,
args: [{ selector: 'alert-error', host: {
class: 'alert-icon alert-icon-error'
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"alert-icon-error-x-mark\">\r\n <span class=\"alert-icon-error-line alert-icon-error-line-left\"></span>\r\n <span class=\"alert-icon-error-line alert-icon-error-line-right\"></span>\r\n</div>" }]
}] });
const alertComponents = [
{
type: AlertEnum.success,
component: AlertSuccessComponent
},
{
type: AlertEnum.info,
component: AlertInfoComponent
},
{
type: AlertEnum.warning,
component: WarningComponent
},
{
type: AlertEnum.error,
component: ErrorComponent
}
];
class AlertOkButtonComponent {
constructor() {
this.click = new EventEmitter();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AlertOkButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AlertOkButtonComponent, selector: "alert-ok-button", outputs: { click: "click" }, ngImport: i0, template: "<button mat-raised-button color=\"primary\" (click)=\"click.emit($event)\">{{'general.ok' | translate}}</button>", styles: [""], dependencies: [{ kind: "component", type: i1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AlertOkButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'alert-ok-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button mat-raised-button color=\"primary\" (click)=\"click.emit($event)\">{{'general.ok' | translate}}</button>" }]
}], propDecorators: { click: [{
type: Output
}] } });
class AlertCancelButtonComponent {
constructor() {
this.click = new EventEmitter();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AlertCancelButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AlertCancelButtonComponent, selector: "alert-cancel-button", outputs: { click: "click" }, ngImport: i0, template: "<button mat-raised-button (click)=\"click.emit($event)\">{{'general.cancel' | translate}}</button>", styles: [""], dependencies: [{ kind: "component", type: i1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AlertCancelButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'alert-cancel-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button mat-raised-button (click)=\"click.emit($event)\">{{'general.cancel' | translate}}</button>" }]
}], propDecorators: { click: [{
type: Output
}] } });
const CRAFTSJS_ALERT_DATA = new InjectionToken('CraftsjsAlertData');
class DialogAlertComponent {
constructor(dialogRef, data) {
this.dialogRef = dialogRef;
this.data = data;
}
ngOnInit() {
}
ngAfterViewInit() {
this.loadComponents();
}
loadComponents() {
const itemComponent = alertComponents.find(x => x.type === this.data.type);
const component = itemComponent && itemComponent.component;
this.resolveComponent(component, this.appDynamic.find(x => x.name === 'alert-icon').viewContainerRef);
this.resolveComponent(this.data.customBody, this.appDynamic.find(x => x.name === 'alert-body').viewContainerRef);
this.resolveComponent(this.data.customButtonComponent, this.appDynamic.find(x => x.name === 'alert-buttons').viewContainerRef);
}
resolveComponent(component, viewContainerRef) {
if (!component) {
return;
}
viewContainerRef.clear();
if (component instanceof TemplateRef) {
viewContainerRef.createEmbeddedView(component, { $implicit: this.data, dialogRef: this.dialogRef });
}
else {
const injector = this.createInjector(viewContainerRef.injector);
viewContainerRef.createComponent(component, {
injector
});
}
}
createInjector(injector) {
return Injector.create({
providers: [{
provide: CRAFTSJS_ALERT_DATA,
useValue: this.data
},
{
provide: MatDialogRef,
useValue: this.dialogRef
}],
parent: injector
});
}
buttonClick(result) {
this.dialogRef.close({ data: this.data, result });
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DialogAlertComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DialogAlertComponent, selector: "dialog-alert", viewQueries: [{ propertyName: "appDynamic", predicate: DynamicDirective, descendants: true }], ngImport: i0, template: "<ng-template craftsjsDynamic name=\"alert-icon\"></ng-template>\r\n<div *ngIf=\"data?.title\" class=\"alert-title\">\r\n <span>\r\n {{data.title | translate}}\r\n </span>\r\n</div>\r\n<div *ngIf=\"data?.text\" class=\"alert-text\">\r\n <span>\r\n {{data.text | translate}}\r\n </span>\r\n</div>\r\n<ng-template craftsjsDynamic name=\"alert-body\"></ng-template>\r\n<div class=\"alert-footer\" *ngIf=\"!data?.hiddenButtons\">\r\n <alert-ok-button *ngIf=\"!data?.customButtonComponent\" (click)=\"buttonClick('ok')\">\r\n </alert-ok-button>\r\n <alert-cancel-button *ngIf=\"!data?.customButtonComponent && data?.showCancelButton\"\r\n (click)=\"buttonClick('cancel')\">\r\n </alert-cancel-button>\r\n</div>\r\n<ng-template craftsjsDynamic name=\"alert-buttons\"></ng-template>", styles: [".alert-icon{width:80px;height:80px;border-width:4px;border-style:solid;border-radius:50%;padding:0;position:relative;box-sizing:content-box;margin:20px auto}.alert-icon-custom{width:auto;height:auto;max-width:100%;border:none;border-radius:0}.alert-icon img{max-width:100%;max-height:100%}.alert-title{color:#000000a6;font-weight:600;text-transform:none;position:relative;display:block;font-size:27px;line-height:normal;text-align:center;margin-bottom:0}.alert-title:first-child{margin-top:26px}.alert-title:not(:first-child){padding-bottom:0}.alert-title:not(:last-child){margin-bottom:13px}.alert-text{font-size:16px;position:relative;float:none;line-height:normal;vertical-align:top;text-align:center;display:inline-block;margin:0;padding:0 10px;font-weight:400;color:#000000a3;overflow-wrap:break-word;box-sizing:border-box;width:100%}.alert-text:first-child{margin-top:45px}.alert-text:last-child{margin-bottom:45px}.alert-footer{text-align:right;margin-top:13px;padding:13px 16px;border-radius:inherit;border-top-left-radius:0;border-top-right-radius:0}.alert-footer-button-container{margin:5px;display:inline-block;position:relative}.alert-footer>*{display:inline-block;margin-right:.5em}.alert-footer>:last-child{margin-right:inherit}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DynamicDirective, selector: "[craftsjsDynamic]", inputs: ["name"] }, { kind: "component", type: AlertOkButtonComponent, selector: "alert-ok-button", outputs: ["click"] }, { kind: "component", type: AlertCancelButtonComponent, selector: "alert-cancel-button", outputs: ["click"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DialogAlertComponent, decorators: [{
type: Component,
args: [{ selector: 'dialog-alert', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-template craftsjsDynamic name=\"alert-icon\"></ng-template>\r\n<div *ngIf=\"data?.title\" class=\"alert-title\">\r\n <span>\r\n {{data.title | translate}}\r\n </span>\r\n</div>\r\n<div *ngIf=\"data?.text\" class=\"alert-text\">\r\n <span>\r\n {{data.text | translate}}\r\n </span>\r\n</div>\r\n<ng-template craftsjsDynamic name=\"alert-body\"></ng-template>\r\n<div class=\"alert-footer\" *ngIf=\"!data?.hiddenButtons\">\r\n <alert-ok-button *ngIf=\"!data?.customButtonComponent\" (click)=\"buttonClick('ok')\">\r\n </alert-ok-button>\r\n <alert-cancel-button *ngIf=\"!data?.customButtonComponent && data?.showCancelButton\"\r\n (click)=\"buttonClick('cancel')\">\r\n </alert-cancel-button>\r\n</div>\r\n<ng-template craftsjsDynamic name=\"alert-buttons\"></ng-template>", styles: [".alert-icon{width:80px;height:80px;border-width:4px;border-style:solid;border-radius:50%;padding:0;position:relative;box-sizing:content-box;margin:20px auto}.alert-icon-custom{width:auto;height:auto;max-width:100%;border:none;border-radius:0}.alert-icon img{max-width:100%;max-height:100%}.alert-title{color:#000000a6;font-weight:600;text-transform:none;position:relative;display:block;font-size:27px;line-height:normal;text-align:center;margin-bottom:0}.alert-title:first-child{margin-top:26px}.alert-title:not(:first-child){padding-bottom:0}.alert-title:not(:last-child){margin-bottom:13px}.alert-text{font-size:16px;position:relative;float:none;line-height:normal;vertical-align:top;text-align:center;display:inline-block;margin:0;padding:0 10px;font-weight:400;color:#000000a3;overflow-wrap:break-word;box-sizing:border-box;width:100%}.alert-text:first-child{margin-top:45px}.alert-text:last-child{margin-bottom:45px}.alert-footer{text-align:right;margin-top:13px;padding:13px 16px;border-radius:inherit;border-top-left-radius:0;border-top-right-radius:0}.alert-footer-button-container{margin:5px;display:inline-block;position:relative}.alert-footer>*{display:inline-block;margin-right:.5em}.alert-footer>:last-child{margin-right:inherit}\n"] }]
}], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
type: Inject,
args: [MAT_DIALOG_DATA]
}] }], propDecorators: { appDynamic: [{
type: ViewChildren,
args: [DynamicDirective]
}] } });
class AlertService {
constructor(_dialog) {
this._dialog = _dialog;
}
showSimple(title, message) {
return this._open({
title,
text: message
});
}
showSuccess(title, message) {
return this._open({
title,
text: message,
type: AlertEnum.success
});
}
showError(title, message) {
return this._open({
title,
text: message,
type: AlertEnum.error
});
}
showInfo(title, message) {
return this._open({
title,
text: message,
type: AlertEnum.info
});
}
showWarning(title, message) {
return this._open({
title,
text: message,
type: AlertEnum.warning
});
}
showConfirmation(title, message) {
return this._open({
title,
text: message,
type: AlertEnum.warning,
showCancelButton: true
});
}
_open(alertModel) {
return this._dialog.open(DialogAlertComponent, {
width: '500px',
data: alertModel
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AlertService, deps: [{ token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AlertService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AlertService, decorators: [{
type: Injectable
}], ctorParameters: () => [{ type: i1$1.MatDialog }] });
class AlertModule {
static forRoot() {
return {
ngModule: AlertModule,
providers: [
AlertService
]
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: AlertModule, declarations: [DialogAlertComponent,
AlertSuccessComponent,
AlertInfoComponent,
WarningComponent,
ErrorComponent,
AlertOkButtonComponent,
AlertCancelButtonComponent], imports: [CommonModule,
TranslateModule,
MatButtonModule,
CoreModule,
MatDialogModule], exports: [DialogAlertComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AlertModule, imports: [CommonModule,
TranslateModule,
MatButtonModule,
CoreModule,
MatDialogModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AlertModule, decorators: [{
type: NgModule,
args: [{
imports: [
CommonModule,
TranslateModule,
MatButtonModule,
CoreModule,
MatDialogModule
],
declarations: [
DialogAlertComponent,
AlertSuccessComponent,
AlertInfoComponent,
WarningComponent,
ErrorComponent,
AlertOkButtonComponent,
AlertCancelButtonComponent
],
exports: [
DialogAlertComponent
]
}]
}] });
/*
* Public API Surface of alert
*/
/**
* Generated bundle index. Do not edit.
*/
export { AlertCancelButtonComponent, AlertEnum, AlertInfoComponent, AlertModule, AlertOkButtonComponent, AlertService, AlertSuccessComponent, CRAFTSJS_ALERT_DATA, DialogAlertComponent, ErrorComponent, WarningComponent, alertComponents };
//# sourceMappingURL=craftsjs-alert.mjs.map