@rangertechnologies/ngnxt
Version:
This library was used for creating dymanic UI based on the input JSON/data
51 lines • 9.09 kB
JavaScript
import { CommonModule } from '@angular/common';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class CustomModelComponent {
constructor() { }
modalTitle;
isModalOpen = false;
modalSize = '';
saveButtonValue = 'Save';
modalFooter = true;
saveButtonEmit = new EventEmitter();
cancelButtonEmit = new EventEmitter();
onSave() {
this.saveButtonEmit.emit();
}
onCancel() {
this.cancelButtonEmit.emit();
}
ngOnInit() {
}
closeModal() {
this.cancelButtonEmit.emit(false);
}
saveModal() {
this.saveButtonEmit.emit();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomModelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomModelComponent, isStandalone: true, selector: "app-custom-model", inputs: { modalTitle: "modalTitle", isModalOpen: "isModalOpen", modalSize: "modalSize", saveButtonValue: "saveButtonValue", modalFooter: "modalFooter" }, outputs: { saveButtonEmit: "saveButtonEmit", cancelButtonEmit: "cancelButtonEmit" }, ngImport: i0, template: "<div *ngIf=\"isModalOpen\" class=\"modal\" [ngClass]=\"modalSize\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <span class=\"close\" (click)=\"onCancel()\">×</span>\n <h2>{{ modalTitle }}</h2>\n </div>\n <div class=\"modal-body\">\n <ng-content></ng-content>\n </div>\n <!-- /* VD 06Sep24 styling changes */-->\n <div class=\"modal-footer\" *ngIf=\"modalFooter\">\n <button (click)=\"onCancel()\">Cancel</button>\n <button (click)=\"onSave()\">{{ saveButtonValue }}</button>\n </div>\n </div>\n</div>\n ", styles: [".modal{display:block;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#0006}.modal-content{background-color:#fefefe;margin:5% auto;padding:20px;border:1px solid #888;width:70%;max-width:90%;max-height:80vh;overflow-y:auto}.modal-header,.modal-footer{padding:10px;text-align:center;display:block}.modal-body{max-height:60vh;overflow-y:auto}.close{color:#aaa;float:right;font-size:28px;font-weight:700}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}.modal-footer button{padding:10px 20px;margin:5px;font-size:16px;border:1px solid #ccc;border-radius:4px;cursor:pointer;background-color:#f5f5f5;color:#333}.modal-footer button:hover{background-color:#e0e0e0;border-color:#bbb}@media (max-width: 768px){.modal-content{width:90%;margin:10% auto}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomModelComponent, decorators: [{
type: Component,
args: [{ selector: 'app-custom-model', standalone: true, imports: [
CommonModule,
], template: "<div *ngIf=\"isModalOpen\" class=\"modal\" [ngClass]=\"modalSize\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <span class=\"close\" (click)=\"onCancel()\">×</span>\n <h2>{{ modalTitle }}</h2>\n </div>\n <div class=\"modal-body\">\n <ng-content></ng-content>\n </div>\n <!-- /* VD 06Sep24 styling changes */-->\n <div class=\"modal-footer\" *ngIf=\"modalFooter\">\n <button (click)=\"onCancel()\">Cancel</button>\n <button (click)=\"onSave()\">{{ saveButtonValue }}</button>\n </div>\n </div>\n</div>\n ", styles: [".modal{display:block;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#0006}.modal-content{background-color:#fefefe;margin:5% auto;padding:20px;border:1px solid #888;width:70%;max-width:90%;max-height:80vh;overflow-y:auto}.modal-header,.modal-footer{padding:10px;text-align:center;display:block}.modal-body{max-height:60vh;overflow-y:auto}.close{color:#aaa;float:right;font-size:28px;font-weight:700}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}.modal-footer button{padding:10px 20px;margin:5px;font-size:16px;border:1px solid #ccc;border-radius:4px;cursor:pointer;background-color:#f5f5f5;color:#333}.modal-footer button:hover{background-color:#e0e0e0;border-color:#bbb}@media (max-width: 768px){.modal-content{width:90%;margin:10% auto}}\n"] }]
}], ctorParameters: () => [], propDecorators: { modalTitle: [{
type: Input
}], isModalOpen: [{
type: Input
}], modalSize: [{
type: Input
}], saveButtonValue: [{
type: Input
}], modalFooter: [{
type: Input
}], saveButtonEmit: [{
type: Output
}], cancelButtonEmit: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3VzdG9tLW1vZGVsLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL254dC1hcHAvc3JjL2xpYi9jb21wb25lbnRzL2N1c3RvbS1tb2RlbC9jdXN0b20tbW9kZWwuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbnh0LWFwcC9zcmMvbGliL2NvbXBvbmVudHMvY3VzdG9tLW1vZGVsL2N1c3RvbS1tb2RlbC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFNBQVMsRUFBYyxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBYSxNQUFNLGVBQWUsQ0FBQzs7O0FBV3RHLE1BQU0sT0FBTyxvQkFBb0I7SUFFL0IsZ0JBQWdCLENBQUM7SUFDUixVQUFVLENBQU07SUFDaEIsV0FBVyxHQUFHLEtBQUssQ0FBQztJQUNwQixTQUFTLEdBQUcsRUFBRSxDQUFDO0lBQ2YsZUFBZSxHQUFHLE1BQU0sQ0FBQztJQUN6QixXQUFXLEdBQUcsSUFBSSxDQUFDO0lBQ2xCLGNBQWMsR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO0lBQ3pDLGdCQUFnQixHQUFHLElBQUksWUFBWSxFQUFPLENBQUM7SUFFckQsTUFBTTtRQUNKLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDN0IsQ0FBQztJQUVELFFBQVE7UUFDTixJQUFJLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDL0IsQ0FBQztJQUdELFFBQVE7SUFDUixDQUFDO0lBRUQsVUFBVTtRQUNSLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDcEMsQ0FBQztJQUVELFNBQVM7UUFDUCxJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksRUFBRSxDQUFDO0lBQzdCLENBQUM7d0dBN0JVLG9CQUFvQjs0RkFBcEIsb0JBQW9CLDJUQ1pqQyxrbUJBZ0JFLHEyQkRURSxZQUFZOzs0RkFLSCxvQkFBb0I7a0JBVGhDLFNBQVM7K0JBQ0Usa0JBQWtCLGNBQ2hCLElBQUksV0FDUDt3QkFDUCxZQUFZO3FCQUNiO3dEQU9RLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLGVBQWU7c0JBQXZCLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDSSxjQUFjO3NCQUF2QixNQUFNO2dCQUNHLGdCQUFnQjtzQkFBekIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDb21wb25lbnQsIEVsZW1lbnRSZWYsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uSW5pdCwgT3V0cHV0LCBWaWV3Q2hpbGQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYXBwLWN1c3RvbS1tb2RlbCcsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtcbiAgICBDb21tb25Nb2R1bGUsXG4gIF0sXG4gIHRlbXBsYXRlVXJsOiAnLi9jdXN0b20tbW9kZWwuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9jdXN0b20tbW9kZWwuY29tcG9uZW50LmNzcyddXG59KVxuZXhwb3J0IGNsYXNzIEN1c3RvbU1vZGVsQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcblxuICBjb25zdHJ1Y3RvcigpIHsgfVxuICBASW5wdXQoKSBtb2RhbFRpdGxlOiBhbnk7XG4gIEBJbnB1dCgpIGlzTW9kYWxPcGVuID0gZmFsc2U7XG4gIEBJbnB1dCgpIG1vZGFsU2l6ZSA9ICcnO1xuICBASW5wdXQoKSBzYXZlQnV0dG9uVmFsdWUgPSAnU2F2ZSc7XG4gIEBJbnB1dCgpIG1vZGFsRm9vdGVyID0gdHJ1ZTtcbiAgQE91dHB1dCgpIHNhdmVCdXR0b25FbWl0ID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XG4gIEBPdXRwdXQoKSBjYW5jZWxCdXR0b25FbWl0ID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XG5cbiAgb25TYXZlKCkge1xuICAgIHRoaXMuc2F2ZUJ1dHRvbkVtaXQuZW1pdCgpO1xuICB9XG5cbiAgb25DYW5jZWwoKSB7XG4gICAgdGhpcy5jYW5jZWxCdXR0b25FbWl0LmVtaXQoKTtcbiAgfVxuXG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gIH1cblxuICBjbG9zZU1vZGFsKCkge1xuICAgIHRoaXMuY2FuY2VsQnV0dG9uRW1pdC5lbWl0KGZhbHNlKTtcbiAgfVxuXG4gIHNhdmVNb2RhbCgpIHtcbiAgICB0aGlzLnNhdmVCdXR0b25FbWl0LmVtaXQoKTtcbiAgfVxuXG59XG4iLCI8ZGl2ICpuZ0lmPVwiaXNNb2RhbE9wZW5cIiBjbGFzcz1cIm1vZGFsXCIgW25nQ2xhc3NdPVwibW9kYWxTaXplXCI+XG4gICAgPGRpdiBjbGFzcz1cIm1vZGFsLWNvbnRlbnRcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJtb2RhbC1oZWFkZXJcIj5cbiAgICAgICAgPHNwYW4gY2xhc3M9XCJjbG9zZVwiIChjbGljayk9XCJvbkNhbmNlbCgpXCI+JnRpbWVzOzwvc3Bhbj5cbiAgICAgICAgPGgyPnt7IG1vZGFsVGl0bGUgfX08L2gyPlxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2IGNsYXNzPVwibW9kYWwtYm9keVwiPlxuICAgICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgICA8L2Rpdj5cbiAgICAgIDwhLS0gLyogVkQgMDZTZXAyNCBzdHlsaW5nIGNoYW5nZXMgKi8tLT5cbiAgICAgIDxkaXYgY2xhc3M9XCJtb2RhbC1mb290ZXJcIiAqbmdJZj1cIm1vZGFsRm9vdGVyXCI+XG4gICAgICAgIDxidXR0b24gKGNsaWNrKT1cIm9uQ2FuY2VsKClcIj5DYW5jZWw8L2J1dHRvbj5cbiAgICAgICAgPGJ1dHRvbiAoY2xpY2spPVwib25TYXZlKClcIj57eyBzYXZlQnV0dG9uVmFsdWUgfX08L2J1dHRvbj5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuPC9kaXY+XG4gICJdfQ==