@koalarx/ui
Version:
Koala UI is a modern and accessible component library designed to speed up interface development in Angular projects. With simple integration and clear documentation, you can easily build robust and visually appealing applications.
91 lines (86 loc) • 5.34 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, Component, Injectable } from '@angular/core';
import { DialogRef, DIALOG_DATA, DialogContent, Dialog } from '@koalarx/ui/shared/components/dialog';
import { Button } from '@koalarx/ui/shared/directives';
class AlertContent {
dialogRef = inject(DialogRef);
data = inject(DIALOG_DATA);
close() {
this.dialogRef.dismiss('close');
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AlertContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AlertContent, isStandalone: true, selector: "kl-alert-content", ngImport: i0, template: "<kl-dialog-content>\n @if (data.title) {\n <h2>{{ data.title }}</h2>\n }\n\n <div class=\"flex flex-col items-center justify-center gap-4\" content>\n @switch (data.type) {\n @case ('info') {\n <i class=\"fa-solid fa-circle-info text-6xl text-indigo-500\"></i>\n }\n @case ('success') {\n <i class=\"fa-solid fa-circle-check text-6xl text-green-500\"></i>\n }\n @case ('warning') {\n <i class=\"fa-solid fa-triangle-exclamation text-6xl text-yellow-500\"></i>\n\n }\n @case ('error') {\n <i class=\"fa-solid fa-circle-xmark text-6xl text-red-500\"></i>\n }\n }\n\n <p [innerHTML]=\"data.message\"></p>\n </div>\n\n <div class=\"flex items-center justify-center w-full\" actions>\n <button klButton outline [color]=\"data.type\" (click)=\"close()\">\n {{ data.okButtonText ?? 'OK' }}\n </button>\n </div>\n</kl-dialog-content>\n", dependencies: [{ kind: "component", type: DialogContent, selector: "kl-dialog-content" }, { kind: "directive", type: Button, selector: "button[klButton], a[klButton]", inputs: ["color", "type", "circle", "outline", "soft", "showLoader", "disabled", "size"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AlertContent, decorators: [{
type: Component,
args: [{ selector: 'kl-alert-content', imports: [DialogContent, Button], template: "<kl-dialog-content>\n @if (data.title) {\n <h2>{{ data.title }}</h2>\n }\n\n <div class=\"flex flex-col items-center justify-center gap-4\" content>\n @switch (data.type) {\n @case ('info') {\n <i class=\"fa-solid fa-circle-info text-6xl text-indigo-500\"></i>\n }\n @case ('success') {\n <i class=\"fa-solid fa-circle-check text-6xl text-green-500\"></i>\n }\n @case ('warning') {\n <i class=\"fa-solid fa-triangle-exclamation text-6xl text-yellow-500\"></i>\n\n }\n @case ('error') {\n <i class=\"fa-solid fa-circle-xmark text-6xl text-red-500\"></i>\n }\n }\n\n <p [innerHTML]=\"data.message\"></p>\n </div>\n\n <div class=\"flex items-center justify-center w-full\" actions>\n <button klButton outline [color]=\"data.type\" (click)=\"close()\">\n {{ data.okButtonText ?? 'OK' }}\n </button>\n </div>\n</kl-dialog-content>\n" }]
}] });
class Alert {
dialog = inject(Dialog);
open(config) {
this.dialog.open(AlertContent, {
data: config.data,
afterClosed: config.onClose
? {
trigger: 'close',
callback: config.onClose,
}
: undefined,
});
}
success(options) {
this.open({
data: {
type: 'success',
message: options.message,
title: options.title,
okButtonText: options.okButtonText,
},
onClose: options.onClose,
});
}
error(options) {
this.open({
data: {
type: 'error',
message: options.message,
title: options.title,
okButtonText: options.okButtonText,
},
onClose: options.onClose,
});
}
info(options) {
this.open({
data: {
type: 'info',
message: options.message,
title: options.title,
okButtonText: options.okButtonText,
},
onClose: options.onClose,
});
}
warning(options) {
this.open({
data: {
type: 'warning',
message: options.message,
title: options.title,
okButtonText: options.okButtonText,
},
onClose: options.onClose,
});
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Alert, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Alert, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Alert, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { Alert, AlertContent };
//# sourceMappingURL=koalarx-ui-shared-components-alert.mjs.map