angular-ng-popup-modal
Version:
A lightweight, configurable, and developer-friendly popup modal for Angular applications. Built using **Angular CLI v15.1.0**, this modal component helps you plug clean confirmation dialogs into your app without any hassle.
157 lines (150 loc) • 19.7 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i4 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import * as i3 from 'primeng/button';
import { ButtonModule } from 'primeng/button';
import * as i1 from '@angular/platform-browser';
class NgPopupModalService {
constructor() { }
}
NgPopupModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgPopupModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
NgPopupModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgPopupModalService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgPopupModalService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return []; } });
class NgPopupModalComponent {
constructor(sanitizer) {
this.sanitizer = sanitizer;
this.popupHead = '';
this.confrmText = 'Please confirm to moving forward.';
this.showHTML = 'N';
this.confirmLable = 'Yes';
this.cancelLable = 'No';
this.confirmIcon = 'pi pi-check';
this.cancelIcon = 'pi pi-times';
this.contentIcon = 'pi pi-info-circle';
this.isVisible = true;
this.iconColor = '#007567ce';
this.showConfirmation = true;
this.showCancel = true;
this.addressList = [];
this.showRemarks = false;
this.showRemarksBtn = false;
this.showDropDown = false;
this.dropdownname = '';
this.dropDownValues = [];
this.isDropDownDisabled = true;
this.selectedValue = '';
this.popupWidth = 'small';
this.getConfirmStatus = new EventEmitter();
this.getAddress = new EventEmitter();
this.remarks = '';
}
ngOnChanges(simpleChange) {
if (simpleChange['textHTML']) {
this.textHTML = simpleChange['textHTML'].currentValue;
this.safeHtml(this.textHTML);
}
}
safeHtml(html) {
this.textHTML = this.sanitizer.bypassSecurityTrustHtml(html);
}
getSafeHtml(html) {
return this.sanitizer.bypassSecurityTrustHtml(html);
}
confirmNameChange(status) {
if (status == 'Y') {
this.getConfirmStatus.emit('Y');
}
else if (status == 'Rem') {
this.getConfirmStatus.emit({ status: 'Y', remark: this.remarks, KRALifeCycle: this.selectedValue });
}
else {
this.getConfirmStatus.emit('N');
}
this.isVisible = false;
}
setAddress(address) {
if (address) {
this.getAddress.emit(address);
this.isVisible = false;
}
}
}
NgPopupModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgPopupModalComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
NgPopupModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: NgPopupModalComponent, isStandalone: true, selector: "lib-ng-popup-modal", inputs: { popupHead: "popupHead", confrmText: "confrmText", textHTML: "textHTML", showHTML: "showHTML", confirmLable: "confirmLable", cancelLable: "cancelLable", confirmIcon: "confirmIcon", cancelIcon: "cancelIcon", contentIcon: "contentIcon", isVisible: "isVisible", iconColor: "iconColor", showConfirmation: "showConfirmation", showCancel: "showCancel", addressList: "addressList", showRemarks: "showRemarks", showRemarksBtn: "showRemarksBtn", showDropDown: "showDropDown", dropdownname: "dropdownname", dropDownValues: "dropDownValues", isDropDownDisabled: "isDropDownDisabled", selectedValue: "selectedValue", popupWidth: "popupWidth" }, outputs: { getConfirmStatus: "getConfirmStatus", getAddress: "getAddress" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"popup-overlay\" *ngIf=\"isVisible\">\r\n <div class=\"pop-content\">\r\n <div [class]=\"popupWidth\">\r\n <div class=\"popup-head\">\r\n <span class=\"pop-head-text\">{{popupHead}}</span>\r\n </div>\r\n <div class=\"confirm-text\" *ngIf=\"addressList?.length\">\r\n <span style=\"font-size: 12px;\">{{confrmText}}</span>\r\n </div>\r\n\r\n <div class=\"popup-text\" *ngIf=\"!addressList.length\">\r\n <div>\r\n <span><i [class]=\"contentIcon\" [ngStyle]=\"{ 'color': iconColor }\"></i></span>\r\n </div>\r\n <div class=\"mt-2 confirm-text\" *ngIf=\"showHTML == 'N'; else htmlContent\">\r\n <span style=\"font-size: 12px;\">{{confrmText}}</span>\r\n </div>\r\n <ng-template #htmlContent>\r\n <div [innerHTML]=\"textHTML\"></div>\r\n </ng-template>\r\n </div>\r\n\r\n <div *ngIf=\"showDropDown\" class=\"mt-2\">\r\n <div class=\"col-6\" style=\"margin-left: 14px;\">\r\n <div class=\"row dropDownHead\">\r\n {{dropdownname}}\r\n </div>\r\n <div class=\"row\" style=\"padding-top: 3px;\">\r\n <select id=\"drop1\" name=\"Drop1\" class=\"dropDownCls\" [(ngModel)]=\"selectedValue\"\r\n [disabled]=\"isDropDownDisabled\" style=\"width: 100%;cursor:pointer;padding-left: 0px;\">\r\n <option *ngFor=\"let item of dropDownValues\" [ngValue]=\"item.Code\">\r\n {{item.Description}}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"showRemarks\" class=\"remarks-section mt-1\">\r\n <textarea id=\"remarks\" [(ngModel)]=\"remarks\" rows=\"3\" class=\"form-control\"\r\n placeholder=\"Enter remarks here...\"></textarea>\r\n </div>\r\n\r\n <div *ngIf=\"addressList?.length\" class=\"addList\">\r\n <div *ngFor=\"let add of addressList\">\r\n <div class=\"p-8 add-card\" (click)=\"setAddress(add)\">\r\n <div id=\"addressList\" class=\"p-0 overflow-y-auto flex-grow\">\r\n <div\r\n class=\"address-option p-3 border-b border-gray-100 cursor-pointer rounded-lg mb-2 last:mb-0 last:border-b-0\">\r\n <h4 class=\"font-sm text-gray-600 mb-0\">{{add.City ? add.City :\r\n add.District}}</h4>\r\n <p class=\"text-sm text-gray-400 mb-0\">{{add.City ? add.District +\r\n ',' :\r\n ''}} {{add.StateName}}</p>\r\n <p class=\"text-xs text-gray-300 mb-0\">{{add.CountryName ||\r\n ''}}</p>\r\n <p class=\"text-xs text-gray-300 mb-0\">{{add.PinCode}}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"popup-footer\">\r\n <p-button *ngIf=\"showConfirmation\" class=\"primaryButton\" [icon]=\"confirmIcon\" [label]=\"confirmLable\"\r\n (onClick)=\"confirmNameChange('Y')\"></p-button>\r\n <p-button *ngIf=\"showRemarks && showRemarksBtn\" class=\"active-btn\" [icon]=\"confirmIcon\"\r\n [label]=\"confirmLable\" (onClick)=\"confirmNameChange('Rem')\" [disabled]=\"!remarks\"></p-button>\r\n <p-button *ngIf=\"showCancel\" class=\"secondaryButtons ms-2\" [icon]=\"cancelIcon\" [label]=\"cancelLable\"\r\n (onClick)=\"confirmNameChange('N')\"></p-button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".popup-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:9998}.pop-content{border-radius:20px;background-color:#fff;min-height:200px;z-index:9999;position:relative;overflow-wrap:break-word;white-space:normal;padding:10px}.small{width:345px}.medium{width:500px}.large{width:800px}.popup-text{display:flex;align-items:center;gap:.5rem;flex-direction:column}.popup-text .pi{font-size:3.5rem!important}.popup-head{display:flex!important;align-items:center!important;justify-content:space-between!important;flex-shrink:0!important;padding:.5rem!important}.pop-head-text{font-weight:600;font-size:15px}.popup-footer{display:flex;justify-self:flex-end;margin-right:8px;margin-top:25px}.confirm-text{padding:0 10px;text-align:justify;word-wrap:break-word;overflow-wrap:break-word;white-space:normal}.header{font-weight:700;margin-bottom:.5rem}.address-option:hover{background-color:#c9cbd2cc}.addList{max-height:350px;overflow-y:auto}.add-card{cursor:pointer}:host ::ng-deep .remarks-section textarea::placeholder{color:#ddd!important;font-size:11px!important}:host ::ng-deep .remarks-section textarea{color:#495057!important;font-size:12px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgPopupModalComponent, decorators: [{
type: Component,
args: [{ selector: 'lib-ng-popup-modal', standalone: true, imports: [CommonModule, ButtonModule, FormsModule], template: "<div class=\"popup-overlay\" *ngIf=\"isVisible\">\r\n <div class=\"pop-content\">\r\n <div [class]=\"popupWidth\">\r\n <div class=\"popup-head\">\r\n <span class=\"pop-head-text\">{{popupHead}}</span>\r\n </div>\r\n <div class=\"confirm-text\" *ngIf=\"addressList?.length\">\r\n <span style=\"font-size: 12px;\">{{confrmText}}</span>\r\n </div>\r\n\r\n <div class=\"popup-text\" *ngIf=\"!addressList.length\">\r\n <div>\r\n <span><i [class]=\"contentIcon\" [ngStyle]=\"{ 'color': iconColor }\"></i></span>\r\n </div>\r\n <div class=\"mt-2 confirm-text\" *ngIf=\"showHTML == 'N'; else htmlContent\">\r\n <span style=\"font-size: 12px;\">{{confrmText}}</span>\r\n </div>\r\n <ng-template #htmlContent>\r\n <div [innerHTML]=\"textHTML\"></div>\r\n </ng-template>\r\n </div>\r\n\r\n <div *ngIf=\"showDropDown\" class=\"mt-2\">\r\n <div class=\"col-6\" style=\"margin-left: 14px;\">\r\n <div class=\"row dropDownHead\">\r\n {{dropdownname}}\r\n </div>\r\n <div class=\"row\" style=\"padding-top: 3px;\">\r\n <select id=\"drop1\" name=\"Drop1\" class=\"dropDownCls\" [(ngModel)]=\"selectedValue\"\r\n [disabled]=\"isDropDownDisabled\" style=\"width: 100%;cursor:pointer;padding-left: 0px;\">\r\n <option *ngFor=\"let item of dropDownValues\" [ngValue]=\"item.Code\">\r\n {{item.Description}}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"showRemarks\" class=\"remarks-section mt-1\">\r\n <textarea id=\"remarks\" [(ngModel)]=\"remarks\" rows=\"3\" class=\"form-control\"\r\n placeholder=\"Enter remarks here...\"></textarea>\r\n </div>\r\n\r\n <div *ngIf=\"addressList?.length\" class=\"addList\">\r\n <div *ngFor=\"let add of addressList\">\r\n <div class=\"p-8 add-card\" (click)=\"setAddress(add)\">\r\n <div id=\"addressList\" class=\"p-0 overflow-y-auto flex-grow\">\r\n <div\r\n class=\"address-option p-3 border-b border-gray-100 cursor-pointer rounded-lg mb-2 last:mb-0 last:border-b-0\">\r\n <h4 class=\"font-sm text-gray-600 mb-0\">{{add.City ? add.City :\r\n add.District}}</h4>\r\n <p class=\"text-sm text-gray-400 mb-0\">{{add.City ? add.District +\r\n ',' :\r\n ''}} {{add.StateName}}</p>\r\n <p class=\"text-xs text-gray-300 mb-0\">{{add.CountryName ||\r\n ''}}</p>\r\n <p class=\"text-xs text-gray-300 mb-0\">{{add.PinCode}}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"popup-footer\">\r\n <p-button *ngIf=\"showConfirmation\" class=\"primaryButton\" [icon]=\"confirmIcon\" [label]=\"confirmLable\"\r\n (onClick)=\"confirmNameChange('Y')\"></p-button>\r\n <p-button *ngIf=\"showRemarks && showRemarksBtn\" class=\"active-btn\" [icon]=\"confirmIcon\"\r\n [label]=\"confirmLable\" (onClick)=\"confirmNameChange('Rem')\" [disabled]=\"!remarks\"></p-button>\r\n <p-button *ngIf=\"showCancel\" class=\"secondaryButtons ms-2\" [icon]=\"cancelIcon\" [label]=\"cancelLable\"\r\n (onClick)=\"confirmNameChange('N')\"></p-button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".popup-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:9998}.pop-content{border-radius:20px;background-color:#fff;min-height:200px;z-index:9999;position:relative;overflow-wrap:break-word;white-space:normal;padding:10px}.small{width:345px}.medium{width:500px}.large{width:800px}.popup-text{display:flex;align-items:center;gap:.5rem;flex-direction:column}.popup-text .pi{font-size:3.5rem!important}.popup-head{display:flex!important;align-items:center!important;justify-content:space-between!important;flex-shrink:0!important;padding:.5rem!important}.pop-head-text{font-weight:600;font-size:15px}.popup-footer{display:flex;justify-self:flex-end;margin-right:8px;margin-top:25px}.confirm-text{padding:0 10px;text-align:justify;word-wrap:break-word;overflow-wrap:break-word;white-space:normal}.header{font-weight:700;margin-bottom:.5rem}.address-option:hover{background-color:#c9cbd2cc}.addList{max-height:350px;overflow-y:auto}.add-card{cursor:pointer}:host ::ng-deep .remarks-section textarea::placeholder{color:#ddd!important;font-size:11px!important}:host ::ng-deep .remarks-section textarea{color:#495057!important;font-size:12px!important}\n"] }]
}], ctorParameters: function () { return [{ type: i1.DomSanitizer }]; }, propDecorators: { popupHead: [{
type: Input
}], confrmText: [{
type: Input
}], textHTML: [{
type: Input
}], showHTML: [{
type: Input
}], confirmLable: [{
type: Input
}], cancelLable: [{
type: Input
}], confirmIcon: [{
type: Input
}], cancelIcon: [{
type: Input
}], contentIcon: [{
type: Input
}], isVisible: [{
type: Input
}], iconColor: [{
type: Input
}], showConfirmation: [{
type: Input
}], showCancel: [{
type: Input
}], addressList: [{
type: Input
}], showRemarks: [{
type: Input
}], showRemarksBtn: [{
type: Input
}], showDropDown: [{
type: Input
}], dropdownname: [{
type: Input
}], dropDownValues: [{
type: Input
}], isDropDownDisabled: [{
type: Input
}], selectedValue: [{
type: Input
}], popupWidth: [{
type: Input
}], getConfirmStatus: [{
type: Output
}], getAddress: [{
type: Output
}] } });
class NgPopupModalModule {
}
NgPopupModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgPopupModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NgPopupModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: NgPopupModalModule });
NgPopupModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgPopupModalModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NgPopupModalModule, decorators: [{
type: NgModule,
args: [{}]
}] });
/*
* Public API Surface of ng-popup-modal
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgPopupModalComponent, NgPopupModalModule, NgPopupModalService };
//# sourceMappingURL=angular-ng-popup-modal.mjs.map