UNPKG

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.

1 lines 13.2 kB
{"version":3,"file":"angular-ng-popup-modal.mjs","sources":["../../../projects/ng-popup-modal/src/lib/ng-popup-modal.service.ts","../../../projects/ng-popup-modal/src/lib/ng-popup-modal.component.ts","../../../projects/ng-popup-modal/src/lib/ng-popup-modal.component.html","../../../projects/ng-popup-modal/src/lib/ng-popup-modal.module.ts","../../../projects/ng-popup-modal/src/public-api.ts","../../../projects/ng-popup-modal/src/angular-ng-popup-modal.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class NgPopupModalService {\n\n constructor() { }\n}\n","import { Component, EventEmitter, Input, Output, SimpleChanges } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\nimport { ButtonModule } from 'primeng/button';\n\n@Component({\n selector: 'lib-ng-popup-modal',\n standalone: true,\n imports: [CommonModule, ButtonModule, FormsModule],\n templateUrl: './ng-popup-modal.component.html',\n styleUrls: ['./ng-popup-modal.component.scss']\n})\nexport class NgPopupModalComponent {\n\n @Input() popupHead: any = '';\n @Input() confrmText: any = 'Please confirm to moving forward.';\n @Input() textHTML!: SafeHtml;\n @Input() showHTML: any = 'N';\n @Input() confirmLable: any = 'Yes'\n @Input() cancelLable: any = 'No'\n @Input() confirmIcon: any = 'pi pi-check'\n @Input() cancelIcon: any = 'pi pi-times'\n @Input() contentIcon: any = 'pi pi-info-circle'\n @Input() isVisible: boolean = true;\n @Input() iconColor: any = '#007567ce'\n @Input() showConfirmation: boolean = true;\n @Input() showCancel: boolean = true;\n @Input() addressList: any = [];\n @Input() showRemarks: boolean = false;\n @Input() showRemarksBtn: boolean = false;\n\n @Input() showDropDown: boolean = false;\n @Input() dropdownname: any = '';\n @Input() dropDownValues: any = [];\n @Input() isDropDownDisabled: boolean = true;\n @Input() selectedValue: any = '';\n @Input() popupWidth: 'small' | 'medium' | 'large' = 'small';\n\n @Output() getConfirmStatus = new EventEmitter();\n @Output() getAddress = new EventEmitter();\n\n remarks: any = '';\n\n constructor(private sanitizer: DomSanitizer) { }\n \n ngOnChanges(simpleChange: SimpleChanges) {\n if (simpleChange['textHTML']) {\n this.textHTML = simpleChange['textHTML'].currentValue;\n this.safeHtml(this.textHTML);\n }\n }\n\n safeHtml(html: any) {\n this.textHTML = this.sanitizer.bypassSecurityTrustHtml(html);\n }\n\n getSafeHtml(html: string): SafeHtml {\n return this.sanitizer.bypassSecurityTrustHtml(html);\n }\n\n confirmNameChange(status: any) {\n if (status == 'Y') {\n this.getConfirmStatus.emit('Y');\n } else if (status == 'Rem') {\n this.getConfirmStatus.emit({status : 'Y', remark : this.remarks, KRALifeCycle: this.selectedValue});\n }\n else {\n this.getConfirmStatus.emit('N');\n\n }\n this.isVisible = false;\n } \n\n setAddress(address: any) {\n if (address) {\n this.getAddress.emit(address);\n this.isVisible = false;\n }\n }\n}\n","<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>","import { NgModule } from '@angular/core';\nimport { NgPopupModalComponent } from './ng-popup-modal.component';\n\n\n\n@NgModule({})\nexport class NgPopupModalModule { }\n","/*\n * Public API Surface of ng-popup-modal\n */\n\nexport * from './lib/ng-popup-modal.service';\nexport * from './lib/ng-popup-modal.component';\nexport * from './lib/ng-popup-modal.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}