@angay/delete-modal
Version:
A reusable Angular delete confirmation modal component library.
41 lines • 8.38 kB
JavaScript
import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import * as i0 from "@angular/core";
import * as i1 from "../public-api";
import * as i2 from "@angular/common";
export 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: i1.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: i1.DeleteModalService }], propDecorators: { heading: [{
type: Input
}], message: [{
type: Input
}], confirmButtonText: [{
type: Input
}], cancelButtonText: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVsZXRlLW1vZGFsLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ2F5L2RlbGV0ZS1tb2RhbC9zcmMvbGliL2RlbGV0ZS1tb2RhbC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmdheS9kZWxldGUtbW9kYWwvc3JjL2xpYi9kZWxldGUtbW9kYWwuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFakQsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDOzs7O0FBUy9DLE1BQU0sT0FBTyxvQkFBb0I7SUFPL0IsWUFBbUIsWUFBZ0M7UUFBaEMsaUJBQVksR0FBWixZQUFZLENBQW9CO1FBTjFDLFlBQU8sR0FBRyxTQUFTLENBQUM7UUFDcEIsWUFBTyxHQUFHLDRDQUE0QyxDQUFDO1FBQ3ZELHNCQUFpQixHQUFHLGFBQWEsQ0FBQztRQUNsQyxxQkFBZ0IsR0FBRyxRQUFRLENBQUM7UUFDckMsY0FBUyxHQUFHLEtBQUssQ0FBQztJQUVxQyxDQUFDO0lBRXhELFFBQVE7UUFDTixJQUFJLENBQUMsWUFBWSxDQUFDLFFBQVEsQ0FBQyxTQUFTLENBQUMsQ0FBQyxPQUFPLEVBQUUsRUFBRTtZQUMvQyxJQUFJLENBQUMsU0FBUyxHQUFHLE9BQU8sQ0FBQztRQUMzQixDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFRCxLQUFLO1FBQ0gsSUFBSSxDQUFDLFlBQVksQ0FBQyxLQUFLLEVBQUUsQ0FBQztJQUM1QixDQUFDO0lBRUQsT0FBTztRQUNMLElBQUksQ0FBQyxZQUFZLENBQUMsT0FBTyxFQUFFLENBQUM7SUFDOUIsQ0FBQzsrR0FyQlUsb0JBQW9CO21HQUFwQixvQkFBb0IsZ05DWGpDLHVlQVNNLDI4QkRGTSxZQUFZOzs0RkFJWCxvQkFBb0I7a0JBUGhDLFNBQVM7K0JBQ0Usb0JBQW9CLGNBQ2xCLElBQUksV0FDUCxDQUFDLFlBQVksQ0FBQzt1RkFLZCxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNHLGlCQUFpQjtzQkFBekIsS0FBSztnQkFDRyxnQkFBZ0I7c0JBQXhCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IERlbGV0ZU1vZGFsU2VydmljZSB9IGZyb20gJy4uL3B1YmxpYy1hcGknO1xyXG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdhbmdheS1kZWxldGUtbW9kYWwnLFxyXG4gIHN0YW5kYWxvbmU6IHRydWUsXHJcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZV0sXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2RlbGV0ZS1tb2RhbC5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vZGVsZXRlLW1vZGFsLmNvbXBvbmVudC5zY3NzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIERlbGV0ZU1vZGFsQ29tcG9uZW50IHtcclxuICBASW5wdXQoKSBoZWFkaW5nID0gJ0RlbGV0ZT8nO1xyXG4gIEBJbnB1dCgpIG1lc3NhZ2UgPSAnQXJlIHlvdSBzdXJlIHlvdSB3YW50IHRvIGRlbGV0ZSB0aGlzIGl0ZW0/JztcclxuICBASW5wdXQoKSBjb25maXJtQnV0dG9uVGV4dCA9ICdZZXMsIERlbGV0ZSc7XHJcbiAgQElucHV0KCkgY2FuY2VsQnV0dG9uVGV4dCA9ICdDYW5jZWwnO1xyXG4gIGlzVmlzaWJsZSA9IGZhbHNlO1xyXG5cclxuICBjb25zdHJ1Y3RvcihwdWJsaWMgbW9kYWxTZXJ2aWNlOiBEZWxldGVNb2RhbFNlcnZpY2UpIHsgfVxyXG5cclxuICBuZ09uSW5pdCgpOiB2b2lkIHtcclxuICAgIHRoaXMubW9kYWxTZXJ2aWNlLnZpc2libGUkLnN1YnNjcmliZSgodmlzaWJsZSkgPT4ge1xyXG4gICAgICB0aGlzLmlzVmlzaWJsZSA9IHZpc2libGU7XHJcbiAgICB9KTtcclxuICB9XHJcblxyXG4gIGNsb3NlKCkge1xyXG4gICAgdGhpcy5tb2RhbFNlcnZpY2UuY2xvc2UoKTtcclxuICB9XHJcblxyXG4gIGNvbmZpcm0oKSB7XHJcbiAgICB0aGlzLm1vZGFsU2VydmljZS5jb25maXJtKCk7XHJcbiAgfVxyXG59XHJcbiIsIjxkaXYgY2xhc3M9XCJtb2RhbC1iYWNrZHJvcFwiICpuZ0lmPVwiaXNWaXNpYmxlXCI+XHJcbiAgICA8ZGl2IGNsYXNzPVwibW9kYWwtYm94XCI+XHJcbiAgICAgICAgPGg1IGNsYXNzPVwibW9kYWwtdGl0bGVcIj57eyBoZWFkaW5nIH19PC9oNT5cclxuICAgICAgICA8cCBjbGFzcz1cIm1vZGFsLXRleHRcIj57eyBtZXNzYWdlIH19PC9wPlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJtb2RhbC1hY3Rpb25zXCI+XHJcbiAgICAgICAgICAgIDxidXR0b24gY2xhc3M9XCJidG4gYnRuLWRhbmdlclwiIChjbGljayk9XCJjb25maXJtKClcIj57eyBjb25maXJtQnV0dG9uVGV4dCB9fTwvYnV0dG9uPlxyXG4gICAgICAgICAgICA8YnV0dG9uIGNsYXNzPVwiYnRuIGJ0bi1vdXRsaW5lLWxpZ2h0XCIgKGNsaWNrKT1cImNsb3NlKClcIj57eyBjYW5jZWxCdXR0b25UZXh0IH19PC9idXR0b24+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICA8L2Rpdj5cclxuPC9kaXY+Il19