ngx-modialog-7
Version:
Modal / Dialog for Angular
773 lines (762 loc) • 23.5 kB
JavaScript
import { combineLatest } from 'rxjs';
import { EventEmitter, Component, ViewEncapsulation, Input, Output, ViewChild, ElementRef, Injectable, NgModule } from '@angular/core';
import { DialogRef, ModalOpenContext, ModalOpenContextBuilder, extend, arrayUnion, privateKey, DROP_IN_TYPE, CSSDialogContainer, Modal as Modal$1, CSSBackdrop, PromiseCompleter, Overlay, ModalModule } from 'ngx-modialog-7';
import { CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* Generated from: lib/dialog-form-modal.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @record
*/
function VEXButtonHandler() { }
/**
* Interface for button definition
* @record
*/
function VEXButtonConfig() { }
if (false) {
/** @type {?} */
VEXButtonConfig.prototype.cssClass;
/** @type {?} */
VEXButtonConfig.prototype.caption;
/** @type {?} */
VEXButtonConfig.prototype.onClick;
}
/**
* @record
*/
function VEXButtonClickEvent() { }
if (false) {
/** @type {?} */
VEXButtonClickEvent.prototype.btn;
/** @type {?} */
VEXButtonClickEvent.prototype.$event;
}
/**
* A Dialog is a
*/
class VEXDialogButtons {
constructor() {
/**
* Emitted when a button was clicked
*/
this.onButtonClick = new EventEmitter();
}
/**
* @param {?} btn
* @param {?} $event
* @return {?}
*/
onClick(btn, $event) {
$event.stopPropagation();
this.onButtonClick.emit({ btn, $event });
}
}
VEXDialogButtons.decorators = [
{ type: Component, args: [{
selector: 'vex-dialog-buttons',
encapsulation: ViewEncapsulation.None,
template: `<div class="vex-dialog-buttons">
<button type="button"
*ngFor="let btn of buttons;"
[class]="btn.cssClass"
(click)="onClick(btn, $event)">{{btn.caption}}</button>
</div>`
}] }
];
VEXDialogButtons.propDecorators = {
buttons: [{ type: Input }],
onButtonClick: [{ type: Output }]
};
if (false) {
/**
* A collection of button configurations, each configuration is a button to display.
* @type {?}
*/
VEXDialogButtons.prototype.buttons;
/**
* Emitted when a button was clicked
* @type {?}
*/
VEXDialogButtons.prototype.onButtonClick;
}
/**
* A Dialog with customized buttons wrapped in a form.
*
*/
class DialogFormModal {
/**
* @param {?} dialog
*/
constructor(dialog) {
this.dialog = dialog;
this.context = dialog.context;
}
/**
* @param {?} $event
* @return {?}
*/
onButtonClick($event) {
$event.btn.onClick(this, $event.$event);
}
}
DialogFormModal.decorators = [
{ type: Component, args: [{
selector: 'modal-dialog',
encapsulation: ViewEncapsulation.None,
template: `<form class="vex-dialog-form">
<ng-container *ngComponentOutlet="context.content"></ng-container>
<vex-dialog-buttons [buttons]="context.buttons"
(onButtonClick)="onButtonClick($event)"></vex-dialog-buttons>
</form>`
}] }
];
/** @nocollapse */
DialogFormModal.ctorParameters = () => [
{ type: DialogRef }
];
if (false) {
/** @type {?} */
DialogFormModal.prototype.context;
/** @type {?} */
DialogFormModal.prototype.dialog;
}
class FormDropIn {
/**
* @param {?} dialog
*/
constructor(dialog) {
this.dialog = dialog;
this.context = dialog.context;
}
}
FormDropIn.decorators = [
{ type: Component, args: [{
selector: 'drop-in-dialog',
encapsulation: ViewEncapsulation.None,
template: `<div class="vex-dialog-message">{{context.message}}</div>
<div *ngIf="context.showInput" class="vex-dialog-input">
<input #input
autofocus
name="vex"
type="text"
class="vex-dialog-prompt-input"
(change)="context.defaultResult = input.value"
placeholder="{{context.placeholder}}">
</div>
<div *ngIf="context.showCloseButton"
[class]="context.closeClassName"
(click)="dialog.dismiss()"></div>`
}] }
];
/** @nocollapse */
FormDropIn.ctorParameters = () => [
{ type: DialogRef }
];
if (false) {
/** @type {?} */
FormDropIn.prototype.context;
/** @type {?} */
FormDropIn.prototype.dialog;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/modal-context.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const DEFAULT_VALUES = {
className: (/** @type {?} */ ('default')),
overlayClassName: 'vex-overlay',
contentClassName: 'vex-content',
closeClassName: 'vex-close'
};
/** @type {?} */
const DEFAULT_SETTERS = [
'className',
'overlayClassName',
'contentClassName',
'closeClassName',
'showCloseButton'
];
class VEXModalContext extends ModalOpenContext {
/**
* @return {?}
*/
normalize() {
if (!this.className) {
this.className = DEFAULT_VALUES.className;
}
if (!this.overlayClassName) {
this.overlayClassName = DEFAULT_VALUES.overlayClassName;
}
if (!this.contentClassName) {
this.contentClassName = DEFAULT_VALUES.contentClassName;
}
if (!this.closeClassName) {
this.closeClassName = DEFAULT_VALUES.closeClassName;
}
super.normalize();
}
}
if (false) {
/**
* Set the built in schema to use.
* @type {?}
*/
VEXModalContext.prototype.className;
/** @type {?} */
VEXModalContext.prototype.overlayClassName;
/** @type {?} */
VEXModalContext.prototype.contentClassName;
/** @type {?} */
VEXModalContext.prototype.closeClassName;
/** @type {?} */
VEXModalContext.prototype.showCloseButton;
}
/**
* @template T
*/
class VEXModalContextBuilder extends ModalOpenContextBuilder {
/**
* @param {?=} defaultValues
* @param {?=} initialSetters
* @param {?=} baseType
*/
constructor(defaultValues = undefined, initialSetters = undefined, baseType = undefined) {
super(extend(DEFAULT_VALUES, defaultValues || {}), arrayUnion(DEFAULT_SETTERS, initialSetters || []), baseType || (/** @type {?} */ (VEXModalContext)) // https://github.com/Microsoft/TypeScript/issues/7234
);
}
/**
*
* \@aliasFor isBlocking
* @template THIS
* @this {THIS}
* @param {?} value
* @return {THIS}
*/
overlayClosesOnClick(value) {
(/** @type {?} */ (this))[privateKey('isBlocking')] = !value;
return (/** @type {?} */ (this));
}
}
if (false) {
/**
* Set the built in schema to use.
* @type {?}
*/
VEXModalContextBuilder.prototype.className;
/** @type {?} */
VEXModalContextBuilder.prototype.overlayClassName;
/** @type {?} */
VEXModalContextBuilder.prototype.contentClassName;
/** @type {?} */
VEXModalContextBuilder.prototype.closeClassName;
/** @type {?} */
VEXModalContextBuilder.prototype.showCloseButton;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/presets/dialog-preset.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const DEFAULT_SETTERS$1 = [
'content'
];
/**
* Data definition
*/
class DialogPreset extends VEXModalContext {
}
if (false) {
/** @type {?} */
DialogPreset.prototype.defaultResult;
/** @type {?} */
DialogPreset.prototype.content;
/** @type {?} */
DialogPreset.prototype.buttons;
/** @type {?} */
DialogPreset.prototype.showInput;
}
/**
* A Preset representing the configuration needed to open MessageModal.
* This is an abstract implementation with no concrete behaviour.
* Use derived implementation.
* @template T
*/
class DialogPresetBuilder extends VEXModalContextBuilder {
/**
* @param {?} modal
* @param {?=} defaultValues
* @param {?=} initialSetters
* @param {?=} baseType
*/
constructor(modal, defaultValues = undefined, initialSetters = undefined, baseType = undefined) {
super(extend({ modal, component: DialogFormModal, buttons: [], defaultResult: true }, defaultValues || {}), arrayUnion(DEFAULT_SETTERS$1, initialSetters || []), baseType || (/** @type {?} */ (DialogPreset)) // https://github.com/Microsoft/TypeScript/issues/7234
);
}
/**
* @template THIS
* @this {THIS}
* @param {?} css
* @param {?} caption
* @param {?} onClick
* @return {THIS}
*/
addButton(css, caption, onClick) {
/** @type {?} */
let btn = {
cssClass: css,
caption: caption,
onClick: onClick
};
/** @type {?} */
let key = privateKey('buttons');
((/** @type {?} */ ((/** @type {?} */ (this))[key]))).push(btn);
return (/** @type {?} */ (this));
}
/**
* @template THIS
* @this {THIS}
* @param {?=} text
* @return {THIS}
*/
addOkButton(text = 'OK') {
(/** @type {?} */ (this)).addButton('vex-dialog-button-primary vex-dialog-button vex-first', text, (/**
* @param {?} cmp
* @param {?} $event
* @return {?}
*/
(cmp, $event) => cmp.dialog.close(cmp.dialog.context.defaultResult)));
return (/** @type {?} */ (this));
}
/**
* @template THIS
* @this {THIS}
* @param {?=} text
* @return {THIS}
*/
addCancelButton(text = 'CANCEL') {
(/** @type {?} */ (this)).addButton('vex-dialog-button-secondary vex-dialog-button vex-last', text, (/**
* @param {?} cmp
* @param {?} $event
* @return {?}
*/
(cmp, $event) => cmp.dialog.dismiss()));
return (/** @type {?} */ (this));
}
}
if (false) {
/**
* the message to display on the modal.
* @type {?}
*/
DialogPresetBuilder.prototype.content;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/presets/dropin-preset.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const DEFAULT_VALUES$1 = {
component: DialogFormModal,
content: FormDropIn,
okBtn: 'OK',
cancelBtn: 'Cancel'
};
/** @type {?} */
const DEFAULT_SETTERS$2 = [
'okBtn',
'cancelBtn',
'placeholder'
];
/**
* Data definition
*/
class DropInPreset extends DialogPreset {
/**
* @return {?}
*/
get showInput() {
return this.dropInType === DROP_IN_TYPE.prompt;
}
}
if (false) {
/**
* the message to display on the modal.
* @type {?}
*/
DropInPreset.prototype.message;
/**
* OK button caption.
* Default: OK
* Set to false ('', undefined, null, false) to remove button.
* @type {?}
*/
DropInPreset.prototype.okBtn;
/**
* Cancel button caption.
* Default: Cancel
* Set to false ('', undefined, null, false) to remove button.
* @type {?}
*/
DropInPreset.prototype.cancelBtn;
/**
* A placeholder for the input element.
* Valid only for prompt modal.
* @type {?}
*/
DropInPreset.prototype.placeholder;
/** @type {?} */
DropInPreset.prototype.dropInType;
}
/**
* A Preset representing all 3 drop ins (alert, prompt, confirm)
*/
class DropInPresetBuilder extends DialogPresetBuilder {
/**
* @param {?} modal
* @param {?} dropInType
* @param {?=} defaultValues
*/
constructor(modal, dropInType, defaultValues = undefined) {
super(modal, extend(extend({ modal, dropInType }, DEFAULT_VALUES$1), defaultValues || {}), DEFAULT_SETTERS$2, DropInPreset);
}
/**
* @param {?} config
* @return {?}
*/
$$beforeOpen(config) {
super.$$beforeOpen(config);
if (config.okBtn) {
this.addOkButton(config.okBtn);
}
switch (config.dropInType) {
case DROP_IN_TYPE.prompt:
config.defaultResult = undefined;
break;
case DROP_IN_TYPE.confirm:
if (config.cancelBtn) {
this.addCancelButton(config.cancelBtn);
}
break;
}
}
}
if (false) {
/**
* the message to display on the modal.
* @type {?}
*/
DropInPresetBuilder.prototype.message;
/**
* The default Ok button caption.
* @type {?}
*/
DropInPresetBuilder.prototype.okBtn;
/**
* The default Cancel button caption.
* @type {?}
*/
DropInPresetBuilder.prototype.cancelBtn;
/**
* A placeholder for the input element.
* Valid only for prompt modal.
* @type {?}
*/
DropInPresetBuilder.prototype.placeholder;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/vex-css-dialog-container.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* A component that acts as a top level container for an open modal window.
*/
class VexCSSDialogContainer extends CSSDialogContainer {
/**
* @param {?} overlay
* @return {?}
*/
apply(overlay) {
overlay.setClickBoundary(this.vexContentContainer.nativeElement);
if (this.dialog.inElement) {
this.setStyle('padding', '20px 0 0 0');
if (this.dialog.context.className === 'bottom-right-corner') {
this.setStyle('overflow-y', 'hidden');
this.renderer.setStyle(this.vexContentContainer.nativeElement, 'position', 'absolute');
}
}
}
}
VexCSSDialogContainer.decorators = [
{ type: Component, args: [{
selector: 'css-dialog-container',
host: {
'tabindex': '-1',
'role': 'dialog'
},
encapsulation: ViewEncapsulation.None,
template: `<div #clickBoundary class="{{dialog.context.contentClassName}}"><ng-content></ng-content></div>`
}] }
];
VexCSSDialogContainer.propDecorators = {
vexContentContainer: [{ type: ViewChild, args: ['clickBoundary', { read: ElementRef, static: true },] }]
};
if (false) {
/**
* The div that wraps the content of the modal, by default use the class `vex-content`
* @type {?}
*/
VexCSSDialogContainer.prototype.vexContentContainer;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/modal.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
// TODO: use DI factory for this.
// TODO: consolidate dup code
/** @type {?} */
const isDoc = !(typeof document === 'undefined' || !document);
/** @type {?} */
let vexV3 = false;
/**
* Execute this method to flag that you are working with VEX version 3.
* @return {?}
*/
function vexV3Mode() {
vexV3 = true;
}
class Modal extends Modal$1 {
/**
* @param {?} overlay
*/
constructor(overlay) {
super(overlay);
}
/**
* @return {?}
*/
alert() {
return new DropInPresetBuilder(this, DROP_IN_TYPE.alert, (/** @type {?} */ ({ isBlocking: false })));
}
/**
* @return {?}
*/
prompt() {
return new DropInPresetBuilder(this, DROP_IN_TYPE.prompt, (/** @type {?} */ ({
isBlocking: true,
keyboard: null
})));
}
/**
* @return {?}
*/
confirm() {
return new DropInPresetBuilder(this, DROP_IN_TYPE.confirm, (/** @type {?} */ ({
isBlocking: true,
keyboard: null
})));
}
/**
* @protected
* @param {?} dialogRef
* @param {?} content
* @return {?}
*/
create(dialogRef, content) {
if (vexV3 === true) {
return this.createV3(dialogRef, content);
}
/** @type {?} */
const backdropRef = this.createBackdrop(dialogRef, CSSBackdrop);
/** @type {?} */
const containerRef = this.createContainer(dialogRef, VexCSSDialogContainer, content);
/** @type {?} */
let overlay = dialogRef.overlayRef.instance;
/** @type {?} */
let backdrop = backdropRef.instance;
/** @type {?} */
let container = containerRef.instance;
if (dialogRef.inElement) {
overlay.insideElement();
overlay.setContainerStyle('position', 'relative')
.setContainerStyle('height', '100%')
.setContainerStyle('width', '100%');
backdrop.setStyle('position', 'absolute')
.setStyle('display', 'block')
.setStyle('height', '100%')
.setStyle('width', '100%');
container.setStyle('position', 'relative')
.setStyle('display', 'block')
.setStyle('height', '100%')
.setStyle('width', '100%');
}
else {
overlay.fullscreen();
}
// add body class if this is the only dialog in the stack
if (isDoc && !document.body.classList.contains('vex-open')) {
document.body.classList.add('vex-open');
}
backdrop.addClass('vex-overlay');
container.addClass(`vex vex-theme-${dialogRef.context.className}`);
container.setStyle('display', 'block');
if (containerRef.location.nativeElement) {
containerRef.location.nativeElement.focus();
}
overlay.beforeDestroy((/**
* @return {?}
*/
() => {
backdrop.addClass('vex-closing');
container.addClass('vex-closing');
/** @type {?} */
const completer = new PromiseCompleter();
/** @type {?} */
let animationEnd$ = backdrop.myAnimationEnd$();
// TODO: the child element inside the container (vex-content) is the one with animation
// need to also wait for it to end, but this requires a reference to to it.
// the container itself is its parent, won't do.
// animationEnd$ = combineLatest.call(animationEnd$, container.myAnimationEnd$(), (s1, s2) => [s1,s2] );
animationEnd$.subscribe((/**
* @param {?} sources
* @return {?}
*/
sources => {
isDoc && this.overlay.groupStackLength(dialogRef) === 1 && document.body.classList.remove('vex-open');
completer.resolve();
}));
return completer.promise;
}));
container.apply(overlay);
return dialogRef;
}
/**
* @private
* @param {?} dialogRef
* @param {?} content
* @return {?}
*/
createV3(dialogRef, content) {
/** @type {?} */
const backdropRef = this.createBackdrop(dialogRef, CSSBackdrop);
/** @type {?} */
const containerRef = this.createContainer(dialogRef, CSSDialogContainer, content);
/** @type {?} */
let overlay = dialogRef.overlayRef.instance;
/** @type {?} */
let backdrop = backdropRef.instance;
/** @type {?} */
let container = containerRef.instance;
dialogRef.inElement ? overlay.insideElement() : overlay.fullscreen();
// add body class if this is the only dialog in the stack
if (isDoc && !document.body.classList.contains('vex-open')) {
document.body.classList.add('vex-open');
}
overlay.addClass(`vex vex-theme-${dialogRef.context.className}`);
backdrop.addClass('vex-overlay');
container.addClass(dialogRef.context.contentClassName);
container.setStyle('display', 'block');
if (dialogRef.inElement) {
overlay.setStyle('padding', '0');
container.setStyle('margin-top', '20px');
}
if (containerRef.location.nativeElement) {
containerRef.location.nativeElement.focus();
}
if (dialogRef.context.className === 'bottom-right-corner') {
overlay.setStyle('overflow-y', 'hidden');
container.setStyle('position', 'absolute');
}
overlay.beforeDestroy((/**
* @return {?}
*/
() => {
overlay.addClass('vex-closing');
/** @type {?} */
const completer = new PromiseCompleter();
/** @type {?} */
let animationEnd$ = container.myAnimationEnd$();
if (dialogRef.context.className !== 'bottom-right-corner') {
animationEnd$ = combineLatest.call(animationEnd$, backdrop.myAnimationEnd$(), (/**
* @param {?} s1
* @param {?} s2
* @return {?}
*/
(s1, s2) => [s1, s2]));
}
animationEnd$.subscribe((/**
* @param {?} sources
* @return {?}
*/
sources => {
isDoc && this.overlay.groupStackLength(dialogRef) === 1 && document.body.classList.remove('vex-open');
completer.resolve();
}));
return completer.promise;
}));
overlay.setClickBoundary(containerRef.location.nativeElement);
return dialogRef;
}
}
Modal.decorators = [
{ type: Injectable }
];
/** @nocollapse */
Modal.ctorParameters = () => [
{ type: Overlay }
];
/**
* @fileoverview added by tsickle
* Generated from: lib/vex.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const providers = [
{ provide: Modal$1, useClass: Modal },
{ provide: Modal, useClass: Modal }
];
class VexModalModule {
/**
* @return {?}
*/
static getProviders() {
return providers;
}
}
VexModalModule.decorators = [
{ type: NgModule, args: [{
imports: [ModalModule, CommonModule],
declarations: [
VexCSSDialogContainer,
VEXDialogButtons,
FormDropIn,
DialogFormModal
],
providers,
entryComponents: [
VexCSSDialogContainer,
DialogFormModal,
FormDropIn
]
},] }
];
/**
* @fileoverview added by tsickle
* Generated from: public_api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: ngx-modialog-7-plugins-vex.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { DialogFormModal, DialogPreset, DialogPresetBuilder, DropInPreset, DropInPresetBuilder, FormDropIn, Modal, VEXDialogButtons, VEXModalContext, VEXModalContextBuilder, VexModalModule, providers, vexV3Mode, VexCSSDialogContainer as ɵa };
//# sourceMappingURL=ngx-modialog-7-plugins-vex.js.map