@rangertechnologies/ngnxt
Version:
This library was used for creating dymanic UI based on the input JSON/data
48 lines • 8.63 kB
JavaScript
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, 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: "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', 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3VzdG9tLW1vZGVsLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL254dC1hcHAvc3JjL2xpYi9jb21wb25lbnRzL2N1c3RvbS1tb2RlbC9jdXN0b20tbW9kZWwuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbnh0LWFwcC9zcmMvbGliL2NvbXBvbmVudHMvY3VzdG9tLW1vZGVsL2N1c3RvbS1tb2RlbC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFjLFlBQVksRUFBRSxLQUFLLEVBQVUsTUFBTSxFQUFhLE1BQU0sZUFBZSxDQUFDOzs7QUFPdEcsTUFBTSxPQUFPLG9CQUFvQjtJQUUvQixnQkFBZ0IsQ0FBQztJQUNSLFVBQVUsQ0FBTTtJQUNoQixXQUFXLEdBQUcsS0FBSyxDQUFDO0lBQ3BCLFNBQVMsR0FBRyxFQUFFLENBQUM7SUFDZixlQUFlLEdBQUcsTUFBTSxDQUFDO0lBQ3pCLFdBQVcsR0FBRyxJQUFJLENBQUM7SUFDbEIsY0FBYyxHQUFHLElBQUksWUFBWSxFQUFPLENBQUM7SUFDekMsZ0JBQWdCLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQztJQUVyRCxNQUFNO1FBQ0osSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUM3QixDQUFDO0lBRUQsUUFBUTtRQUNOLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUMvQixDQUFDO0lBR0QsUUFBUTtJQUNSLENBQUM7SUFFRCxVQUFVO1FBQ1IsSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNwQyxDQUFDO0lBRUQsU0FBUztRQUNQLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDN0IsQ0FBQzt3R0E3QlUsb0JBQW9COzRGQUFwQixvQkFBb0IsdVNDUGpDLGttQkFnQkU7OzRGRFRXLG9CQUFvQjtrQkFMaEMsU0FBUzsrQkFDRSxrQkFBa0I7d0RBT25CLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLGVBQWU7c0JBQXZCLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDSSxjQUFjO3NCQUF2QixNQUFNO2dCQUNHLGdCQUFnQjtzQkFBekIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRWxlbWVudFJlZiwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25Jbml0LCBPdXRwdXQsIFZpZXdDaGlsZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhcHAtY3VzdG9tLW1vZGVsJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2N1c3RvbS1tb2RlbC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2N1c3RvbS1tb2RlbC5jb21wb25lbnQuY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgQ3VzdG9tTW9kZWxDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuXG4gIGNvbnN0cnVjdG9yKCkgeyB9XG4gIEBJbnB1dCgpIG1vZGFsVGl0bGU6IGFueTtcbiAgQElucHV0KCkgaXNNb2RhbE9wZW4gPSBmYWxzZTtcbiAgQElucHV0KCkgbW9kYWxTaXplID0gJyc7XG4gIEBJbnB1dCgpIHNhdmVCdXR0b25WYWx1ZSA9ICdTYXZlJztcbiAgQElucHV0KCkgbW9kYWxGb290ZXIgPSB0cnVlO1xuICBAT3V0cHV0KCkgc2F2ZUJ1dHRvbkVtaXQgPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcbiAgQE91dHB1dCgpIGNhbmNlbEJ1dHRvbkVtaXQgPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcblxuICBvblNhdmUoKSB7XG4gICAgdGhpcy5zYXZlQnV0dG9uRW1pdC5lbWl0KCk7XG4gIH1cblxuICBvbkNhbmNlbCgpIHtcbiAgICB0aGlzLmNhbmNlbEJ1dHRvbkVtaXQuZW1pdCgpO1xuICB9XG5cblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgfVxuXG4gIGNsb3NlTW9kYWwoKSB7XG4gICAgdGhpcy5jYW5jZWxCdXR0b25FbWl0LmVtaXQoZmFsc2UpO1xuICB9XG5cbiAgc2F2ZU1vZGFsKCkge1xuICAgIHRoaXMuc2F2ZUJ1dHRvbkVtaXQuZW1pdCgpO1xuICB9XG5cbn1cbiIsIjxkaXYgKm5nSWY9XCJpc01vZGFsT3BlblwiIGNsYXNzPVwibW9kYWxcIiBbbmdDbGFzc109XCJtb2RhbFNpemVcIj5cbiAgICA8ZGl2IGNsYXNzPVwibW9kYWwtY29udGVudFwiPlxuICAgICAgPGRpdiBjbGFzcz1cIm1vZGFsLWhlYWRlclwiPlxuICAgICAgICA8c3BhbiBjbGFzcz1cImNsb3NlXCIgKGNsaWNrKT1cIm9uQ2FuY2VsKClcIj4mdGltZXM7PC9zcGFuPlxuICAgICAgICA8aDI+e3sgbW9kYWxUaXRsZSB9fTwvaDI+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxkaXYgY2xhc3M9XCJtb2RhbC1ib2R5XCI+XG4gICAgICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgICAgIDwvZGl2PlxuICAgICAgPCEtLSAvKiBWRCAwNlNlcDI0IHN0eWxpbmcgY2hhbmdlcyAqLy0tPlxuICAgICAgPGRpdiBjbGFzcz1cIm1vZGFsLWZvb3RlclwiICpuZ0lmPVwibW9kYWxGb290ZXJcIj5cbiAgICAgICAgPGJ1dHRvbiAoY2xpY2spPVwib25DYW5jZWwoKVwiPkNhbmNlbDwvYnV0dG9uPlxuICAgICAgICA8YnV0dG9uIChjbGljayk9XCJvblNhdmUoKVwiPnt7IHNhdmVCdXR0b25WYWx1ZSB9fTwvYnV0dG9uPlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG48L2Rpdj5cbiAgIl19