@angay/delete-modal
Version:
A reusable Angular delete confirmation modal component library.
81 lines (75 loc) • 6.26 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Input, Component } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
class DeleteModalService {
constructor() {
this.visibleSubject = new BehaviorSubject(false);
this.visible$ = this.visibleSubject.asObservable();
this.confirmCallback = null;
}
open(onConfirm) {
this.confirmCallback = onConfirm || null;
this.visibleSubject.next(true);
}
close() {
this.visibleSubject.next(false);
}
confirm() {
if (this.confirmCallback)
this.confirmCallback();
this.close();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DeleteModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DeleteModalService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DeleteModalService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}] });
class DeleteModalComponent {
constructor(modalService) {
this.modalService = modalService;
this.heading = 'Delete?';
this.message = 'Are you sure you want to delete this item?';
this.confirmButtonText = 'Yes, Delete';
this.cancelButtonText = 'Cancel';
this.isVisible = false;
}
ngOnInit() {
this.modalService.visible$.subscribe((visible) => {
this.isVisible = visible;
});
}
close() {
this.modalService.close();
}
confirm() {
this.modalService.confirm();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DeleteModalComponent, deps: [{ token: DeleteModalService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DeleteModalComponent, isStandalone: true, selector: "angay-delete-modal", inputs: { heading: "heading", message: "message", confirmButtonText: "confirmButtonText", cancelButtonText: "cancelButtonText" }, ngImport: i0, template: "<div class=\"modal-backdrop\" *ngIf=\"isVisible\">\r\n <div class=\"modal-box\">\r\n <h5 class=\"modal-title\">{{ heading }}</h5>\r\n <p class=\"modal-text\">{{ message }}</p>\r\n <div class=\"modal-actions\">\r\n <button class=\"btn btn-danger\" (click)=\"confirm()\">{{ confirmButtonText }}</button>\r\n <button class=\"btn btn-outline-light\" (click)=\"close()\">{{ cancelButtonText }}</button>\r\n </div>\r\n </div>\r\n</div>", styles: [".modal-backdrop{position:fixed;top:0;left:0;z-index:1050;width:100%;height:100%;background:#6a6a6abf;display:flex;align-items:center;justify-content:center}.modal-box{background:#fff;border-radius:16px;padding:2rem;width:90%;max-width:420px;text-align:center;box-shadow:0 10px 30px #00000080;animation:fadeInUp .4s ease-out}.icon-container{font-size:2.5rem;color:#ef5350;margin-bottom:1rem}.modal-title{color:#000;font-weight:700;margin-bottom:.5rem}.modal-text{color:#605c5c;margin-bottom:1.5rem}.modal-actions{display:flex;justify-content:center;gap:1rem}.btn-danger{background-color:#ef5350;border:none;font-weight:600;border-radius:10px;padding:.5rem 1.25rem}.btn-outline-light{border:2px solid #ffffff;color:#000;border-radius:10px;background-color:#e9e9e9}.btn-outline-light:hover{background-color:#ffffff20}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DeleteModalComponent, decorators: [{
type: Component,
args: [{ selector: 'angay-delete-modal', standalone: true, imports: [CommonModule], template: "<div class=\"modal-backdrop\" *ngIf=\"isVisible\">\r\n <div class=\"modal-box\">\r\n <h5 class=\"modal-title\">{{ heading }}</h5>\r\n <p class=\"modal-text\">{{ message }}</p>\r\n <div class=\"modal-actions\">\r\n <button class=\"btn btn-danger\" (click)=\"confirm()\">{{ confirmButtonText }}</button>\r\n <button class=\"btn btn-outline-light\" (click)=\"close()\">{{ cancelButtonText }}</button>\r\n </div>\r\n </div>\r\n</div>", styles: [".modal-backdrop{position:fixed;top:0;left:0;z-index:1050;width:100%;height:100%;background:#6a6a6abf;display:flex;align-items:center;justify-content:center}.modal-box{background:#fff;border-radius:16px;padding:2rem;width:90%;max-width:420px;text-align:center;box-shadow:0 10px 30px #00000080;animation:fadeInUp .4s ease-out}.icon-container{font-size:2.5rem;color:#ef5350;margin-bottom:1rem}.modal-title{color:#000;font-weight:700;margin-bottom:.5rem}.modal-text{color:#605c5c;margin-bottom:1.5rem}.modal-actions{display:flex;justify-content:center;gap:1rem}.btn-danger{background-color:#ef5350;border:none;font-weight:600;border-radius:10px;padding:.5rem 1.25rem}.btn-outline-light{border:2px solid #ffffff;color:#000;border-radius:10px;background-color:#e9e9e9}.btn-outline-light:hover{background-color:#ffffff20}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}\n"] }]
}], ctorParameters: () => [{ type: DeleteModalService }], propDecorators: { heading: [{
type: Input
}], message: [{
type: Input
}], confirmButtonText: [{
type: Input
}], cancelButtonText: [{
type: Input
}] } });
/*
* Public API Surface of delete-modal
*/
/**
* Generated bundle index. Do not edit.
*/
export { DeleteModalComponent, DeleteModalService };
//# sourceMappingURL=angay-delete-modal.mjs.map