ngx-modalview
Version:
Simple way to implement modal in Angular (16+) projects.
125 lines • 10.9 kB
JavaScript
import { Component, HostListener } from '@angular/core';
import { Observable, BehaviorSubject } from 'rxjs';
import * as i0 from "@angular/core";
/**
* Abstract modal
* @template T - modal data;
* @template T1 - modal result
*/
class NgxModalComponent {
/**
* Observer to return result from modal
*/
observer;
/**
* Drag handle
*/
handle;
/**
* Dialog result
* @type {T1}
*/
result;
/**
* Dialog wrapper (modal placeholder)
*/
wrapper;
/**
* ref of options for this component
*/
options;
/**
* ready$ is when all animations and focusing have comleted
*/
_ready$ = new BehaviorSubject(false);
/**
* Callback to the holders close function
*/
closerCallback = () => Promise.resolve();
/**
* Constructor
*/
constructor() { }
/**
* Maps your object passed in the creation to fields in your own Dialog classes
* @param {T} data
*/
mapDataObject(data) {
data = data || {};
const keys = Object.keys(data);
for (let i = 0, length = keys.length; i < length; i++) {
const key = keys[i];
if (data[key] &&
this[key] &&
typeof data[key] === 'object' &&
typeof this[key] === 'object') {
Object.assign(this[key], data[key]);
}
else {
this[key] = data[key];
}
}
}
/**
* Setup observer
* @return {Observable<T1>}
*/
setupObserver() {
return Observable.create(observer => {
this.observer = observer;
// called if observable is unsubscribed to
return () => {
this.close();
};
});
}
/**
* Defines what happens when close is called - default this
* will just call the default remove modal process. If overridden
* must include
* @param callback
*/
onClosing(callback) {
this.closerCallback = callback;
}
/**
* Closes modal
*/
close() {
return this.closerCallback(this).then(v => {
if (this.observer) {
this.observer.next(this.result);
this.observer.complete();
}
return v;
});
}
/**
* keypress binding ngx way
* @param evt
*/
onKeydownHandler(evt) {
if (this.options && this.options.closeOnEscape) {
this.close();
}
}
get ready$() {
return this._ready$.asObservable();
}
markAsReady() {
this._ready$.next(true);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgxModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: NgxModalComponent, selector: "ng-component", host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, ngImport: i0, template: '', isInline: true });
}
export { NgxModalComponent };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: NgxModalComponent, decorators: [{
type: Component,
args: [{
template: '',
}]
}], ctorParameters: function () { return []; }, propDecorators: { onKeydownHandler: [{
type: HostListener,
args: ['document:keydown.escape', ['$event']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LW1vZGFsLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9uZ3gtbW9kYWwvbmd4LW1vZGFsLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFjLFlBQVksRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNwRSxPQUFPLEVBQUUsVUFBVSxFQUFZLGVBQWUsRUFBRSxNQUFNLE1BQU0sQ0FBQzs7QUFHN0Q7Ozs7R0FJRztBQUNILE1BR3NCLGlCQUFpQjtJQUNyQzs7T0FFRztJQUNLLFFBQVEsQ0FBZTtJQUUvQjs7T0FFRztJQUNILE1BQU0sQ0FBeUI7SUFFL0I7OztPQUdHO0lBQ0gsTUFBTSxDQUFLO0lBRVg7O09BRUc7SUFDSCxPQUFPLENBQWE7SUFFcEI7O09BRUc7SUFDSCxPQUFPLENBQWtCO0lBRXpCOztPQUVHO0lBQ0gsT0FBTyxHQUFHLElBQUksZUFBZSxDQUFVLEtBQUssQ0FBQyxDQUFDO0lBRTlDOztPQUVHO0lBQ0ssY0FBYyxHQUFnQyxHQUFHLEVBQUUsQ0FBQyxPQUFPLENBQUMsT0FBTyxFQUFFLENBQUM7SUFFOUU7O09BRUc7SUFDSCxnQkFBZ0IsQ0FBQztJQUVqQjs7O09BR0c7SUFDSCxhQUFhLENBQUMsSUFBTztRQUNuQixJQUFJLEdBQUcsSUFBSSxJQUFPLEVBQUUsQ0FBQztRQUNyQixNQUFNLElBQUksR0FBRyxNQUFNLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQy9CLEtBQUssSUFBSSxDQUFDLEdBQUcsQ0FBQyxFQUFFLE1BQU0sR0FBRyxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUMsR0FBRyxNQUFNLEVBQUUsQ0FBQyxFQUFFLEVBQUU7WUFDckQsTUFBTSxHQUFHLEdBQUcsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDO1lBQ3BCLElBQ0UsSUFBSSxDQUFDLEdBQUcsQ0FBQztnQkFDVCxJQUFJLENBQUMsR0FBRyxDQUFDO2dCQUNULE9BQU8sSUFBSSxDQUFDLEdBQUcsQ0FBQyxLQUFLLFFBQVE7Z0JBQzdCLE9BQU8sSUFBSSxDQUFDLEdBQUcsQ0FBQyxLQUFLLFFBQVEsRUFDN0I7Z0JBQ0EsTUFBTSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQUUsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUM7YUFDckM7aUJBQU07Z0JBQ0wsSUFBSSxDQUFDLEdBQUcsQ0FBQyxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQzthQUN2QjtTQUNGO0lBQ0gsQ0FBQztJQUVEOzs7T0FHRztJQUNILGFBQWE7UUFDWCxPQUFPLFVBQVUsQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLEVBQUU7WUFDbEMsSUFBSSxDQUFDLFFBQVEsR0FBRyxRQUFRLENBQUM7WUFFekIsMENBQTBDO1lBQzFDLE9BQU8sR0FBRyxFQUFFO2dCQUNWLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztZQUNmLENBQUMsQ0FBQztRQUNKLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVEOzs7OztPQUtHO0lBQ0gsU0FBUyxDQUFDLFFBQWtFO1FBQzFFLElBQUksQ0FBQyxjQUFjLEdBQUcsUUFBUSxDQUFDO0lBQ2pDLENBQUM7SUFFRDs7T0FFRztJQUNILEtBQUs7UUFDSCxPQUFPLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxFQUFFO1lBQ3hDLElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRTtnQkFDakIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO2dCQUNoQyxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsRUFBRSxDQUFDO2FBQzFCO1lBQ0QsT0FBTyxDQUFDLENBQUM7UUFDWCxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFRDs7O09BR0c7SUFFSCxnQkFBZ0IsQ0FBQyxHQUFrQjtRQUNqQyxJQUFJLElBQUksQ0FBQyxPQUFPLElBQUksSUFBSSxDQUFDLE9BQU8sQ0FBQyxhQUFhLEVBQUU7WUFDOUMsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO1NBQ2Q7SUFDSCxDQUFDO0lBRUQsSUFBSSxNQUFNO1FBQ1IsT0FBTyxJQUFJLENBQUMsT0FBTyxDQUFDLFlBQVksRUFBRSxDQUFDO0lBQ3JDLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDMUIsQ0FBQzt1R0F2SG1CLGlCQUFpQjsyRkFBakIsaUJBQWlCLG9JQUYzQixFQUFFOztTQUVRLGlCQUFpQjsyRkFBakIsaUJBQWlCO2tCQUh0QyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxFQUFFO2lCQUNiOzBFQTRHQyxnQkFBZ0I7c0JBRGYsWUFBWTt1QkFBQyx5QkFBeUIsRUFBRSxDQUFDLFFBQVEsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRWxlbWVudFJlZiwgSG9zdExpc3RlbmVyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IE9ic2VydmFibGUsIE9ic2VydmVyLCBCZWhhdmlvclN1YmplY3QgfSBmcm9tICdyeGpzJztcclxuaW1wb3J0IHsgTmd4TW9kYWxPcHRpb25zIH0gZnJvbSAnLi9uZ3gtbW9kYWwtb3B0aW9ucyc7XHJcblxyXG4vKipcclxuICogQWJzdHJhY3QgbW9kYWxcclxuICogQHRlbXBsYXRlIFQgLSBtb2RhbCBkYXRhO1xyXG4gKiBAdGVtcGxhdGUgVDEgLSBtb2RhbCByZXN1bHRcclxuICovXHJcbkBDb21wb25lbnQoe1xyXG4gIHRlbXBsYXRlOiAnJyxcclxufSlcclxuZXhwb3J0IGFic3RyYWN0IGNsYXNzIE5neE1vZGFsQ29tcG9uZW50PFQsIFQxPiB7XHJcbiAgLyoqXHJcbiAgICogT2JzZXJ2ZXIgdG8gcmV0dXJuIHJlc3VsdCBmcm9tIG1vZGFsXHJcbiAgICovXHJcbiAgcHJpdmF0ZSBvYnNlcnZlcjogT2JzZXJ2ZXI8VDE+O1xyXG5cclxuICAvKipcclxuICAgKiBEcmFnIGhhbmRsZVxyXG4gICAqL1xyXG4gIGhhbmRsZTogRWxlbWVudFJlZiB8IHVuZGVmaW5lZDtcclxuXHJcbiAgLyoqXHJcbiAgICogRGlhbG9nIHJlc3VsdFxyXG4gICAqIEB0eXBlIHtUMX1cclxuICAgKi9cclxuICByZXN1bHQ6IFQxO1xyXG5cclxuICAvKipcclxuICAgKiBEaWFsb2cgd3JhcHBlciAobW9kYWwgcGxhY2Vob2xkZXIpXHJcbiAgICovXHJcbiAgd3JhcHBlcjogRWxlbWVudFJlZjtcclxuXHJcbiAgLyoqXHJcbiAgICogcmVmIG9mIG9wdGlvbnMgZm9yIHRoaXMgY29tcG9uZW50XHJcbiAgICovXHJcbiAgb3B0aW9uczogTmd4TW9kYWxPcHRpb25zO1xyXG5cclxuICAvKipcclxuICAgKiByZWFkeSQgaXMgd2hlbiBhbGwgYW5pbWF0aW9ucyBhbmQgZm9jdXNpbmcgaGF2ZSBjb21sZXRlZFxyXG4gICAqL1xyXG4gIF9yZWFkeSQgPSBuZXcgQmVoYXZpb3JTdWJqZWN0PGJvb2xlYW4+KGZhbHNlKTtcclxuXHJcbiAgLyoqXHJcbiAgICogQ2FsbGJhY2sgdG8gdGhlIGhvbGRlcnMgY2xvc2UgZnVuY3Rpb25cclxuICAgKi9cclxuICBwcml2YXRlIGNsb3NlckNhbGxiYWNrOiAoY29tcG9uZW50KSA9PiBQcm9taXNlPGFueT4gPSAoKSA9PiBQcm9taXNlLnJlc29sdmUoKTtcclxuXHJcbiAgLyoqXHJcbiAgICogQ29uc3RydWN0b3JcclxuICAgKi9cclxuICBjb25zdHJ1Y3RvcigpIHsgfVxyXG5cclxuICAvKipcclxuICAgKiBNYXBzIHlvdXIgb2JqZWN0IHBhc3NlZCBpbiB0aGUgY3JlYXRpb24gdG8gZmllbGRzIGluIHlvdXIgb3duIERpYWxvZyBjbGFzc2VzXHJcbiAgICogQHBhcmFtIHtUfSBkYXRhXHJcbiAgICovXHJcbiAgbWFwRGF0YU9iamVjdChkYXRhOiBUKTogdm9pZCB7XHJcbiAgICBkYXRhID0gZGF0YSB8fCA8VD57fTtcclxuICAgIGNvbnN0IGtleXMgPSBPYmplY3Qua2V5cyhkYXRhKTtcclxuICAgIGZvciAobGV0IGkgPSAwLCBsZW5ndGggPSBrZXlzLmxlbmd0aDsgaSA8IGxlbmd0aDsgaSsrKSB7XHJcbiAgICAgIGNvbnN0IGtleSA9IGtleXNbaV07XHJcbiAgICAgIGlmIChcclxuICAgICAgICBkYXRhW2tleV0gJiZcclxuICAgICAgICB0aGlzW2tleV0gJiZcclxuICAgICAgICB0eXBlb2YgZGF0YVtrZXldID09PSAnb2JqZWN0JyAmJlxyXG4gICAgICAgIHR5cGVvZiB0aGlzW2tleV0gPT09ICdvYmplY3QnXHJcbiAgICAgICkge1xyXG4gICAgICAgIE9iamVjdC5hc3NpZ24odGhpc1trZXldLCBkYXRhW2tleV0pO1xyXG4gICAgICB9IGVsc2Uge1xyXG4gICAgICAgIHRoaXNba2V5XSA9IGRhdGFba2V5XTtcclxuICAgICAgfVxyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgLyoqXHJcbiAgICogU2V0dXAgb2JzZXJ2ZXJcclxuICAgKiBAcmV0dXJuIHtPYnNlcnZhYmxlPFQxPn1cclxuICAgKi9cclxuICBzZXR1cE9ic2VydmVyKCk6IE9ic2VydmFibGU8VDE+IHtcclxuICAgIHJldHVybiBPYnNlcnZhYmxlLmNyZWF0ZShvYnNlcnZlciA9PiB7XHJcbiAgICAgIHRoaXMub2JzZXJ2ZXIgPSBvYnNlcnZlcjtcclxuXHJcbiAgICAgIC8vIGNhbGxlZCBpZiBvYnNlcnZhYmxlIGlzIHVuc3Vic2NyaWJlZCB0b1xyXG4gICAgICByZXR1cm4gKCkgPT4ge1xyXG4gICAgICAgIHRoaXMuY2xvc2UoKTtcclxuICAgICAgfTtcclxuICAgIH0pO1xyXG4gIH1cclxuXHJcbiAgLyoqXHJcbiAgICogRGVmaW5lcyB3aGF0IGhhcHBlbnMgd2hlbiBjbG9zZSBpcyBjYWxsZWQgLSBkZWZhdWx0IHRoaXNcclxuICAgKiB3aWxsIGp1c3QgY2FsbCB0aGUgZGVmYXVsdCByZW1vdmUgbW9kYWwgcHJvY2Vzcy4gSWYgb3ZlcnJpZGRlblxyXG4gICAqIG11c3QgaW5jbHVkZVxyXG4gICAqIEBwYXJhbSBjYWxsYmFja1xyXG4gICAqL1xyXG4gIG9uQ2xvc2luZyhjYWxsYmFjazogKGNvbXBvbmVudDogTmd4TW9kYWxDb21wb25lbnQ8YW55LCBhbnk+KSA9PiBQcm9taXNlPGFueT4pOiB2b2lkIHtcclxuICAgIHRoaXMuY2xvc2VyQ2FsbGJhY2sgPSBjYWxsYmFjaztcclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIENsb3NlcyBtb2RhbFxyXG4gICAqL1xyXG4gIGNsb3NlKCk6IFByb21pc2U8YW55PiB7XHJcbiAgICByZXR1cm4gdGhpcy5jbG9zZXJDYWxsYmFjayh0aGlzKS50aGVuKHYgPT4ge1xyXG4gICAgICBpZiAodGhpcy5vYnNlcnZlcikge1xyXG4gICAgICAgIHRoaXMub2JzZXJ2ZXIubmV4dCh0aGlzLnJlc3VsdCk7XHJcbiAgICAgICAgdGhpcy5vYnNlcnZlci5jb21wbGV0ZSgpO1xyXG4gICAgICB9XHJcbiAgICAgIHJldHVybiB2O1xyXG4gICAgfSk7XHJcbiAgfVxyXG5cclxuICAvKipcclxuICAgKiBrZXlwcmVzcyBiaW5kaW5nIG5neCB3YXlcclxuICAgKiBAcGFyYW0gZXZ0XHJcbiAgICovXHJcbiAgQEhvc3RMaXN0ZW5lcignZG9jdW1lbnQ6a2V5ZG93bi5lc2NhcGUnLCBbJyRldmVudCddKVxyXG4gIG9uS2V5ZG93bkhhbmRsZXIoZXZ0OiBLZXlib2FyZEV2ZW50KSB7XHJcbiAgICBpZiAodGhpcy5vcHRpb25zICYmIHRoaXMub3B0aW9ucy5jbG9zZU9uRXNjYXBlKSB7XHJcbiAgICAgIHRoaXMuY2xvc2UoKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIGdldCByZWFkeSQoKSB7XHJcbiAgICByZXR1cm4gdGhpcy5fcmVhZHkkLmFzT2JzZXJ2YWJsZSgpO1xyXG4gIH1cclxuXHJcbiAgbWFya0FzUmVhZHkoKSB7XHJcbiAgICB0aGlzLl9yZWFkeSQubmV4dCh0cnVlKTtcclxuICB9XHJcbn1cclxuIl19