UNPKG

ngx-modialog-7

Version:
871 lines (860 loc) 28.1 kB
import { __extends } from 'tslib'; import { combineLatest } from 'rxjs'; import { EventEmitter, Component, ViewEncapsulation, Input, Output, ViewChild, ElementRef, Injectable, NgModule } from '@angular/core'; import { DialogRef, ModalOpenContext, extend, arrayUnion, privateKey, ModalOpenContextBuilder, DROP_IN_TYPE, CSSDialogContainer, CSSBackdrop, PromiseCompleter, Overlay, Modal as Modal$1, 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 */ var VEXDialogButtons = /** @class */ (function () { function VEXDialogButtons() { /** * Emitted when a button was clicked */ this.onButtonClick = new EventEmitter(); } /** * @param {?} btn * @param {?} $event * @return {?} */ VEXDialogButtons.prototype.onClick = /** * @param {?} btn * @param {?} $event * @return {?} */ function (btn, $event) { $event.stopPropagation(); this.onButtonClick.emit({ btn: btn, $event: $event }); }; VEXDialogButtons.decorators = [ { type: Component, args: [{ selector: 'vex-dialog-buttons', encapsulation: ViewEncapsulation.None, template: "<div class=\"vex-dialog-buttons\">\n <button type=\"button\"\n *ngFor=\"let btn of buttons;\"\n [class]=\"btn.cssClass\"\n (click)=\"onClick(btn, $event)\">{{btn.caption}}</button>\n</div>" }] } ]; VEXDialogButtons.propDecorators = { buttons: [{ type: Input }], onButtonClick: [{ type: Output }] }; return VEXDialogButtons; }()); 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. * */ var DialogFormModal = /** @class */ (function () { function DialogFormModal(dialog) { this.dialog = dialog; this.context = dialog.context; } /** * @param {?} $event * @return {?} */ DialogFormModal.prototype.onButtonClick = /** * @param {?} $event * @return {?} */ function ($event) { $event.btn.onClick(this, $event.$event); }; DialogFormModal.decorators = [ { type: Component, args: [{ selector: 'modal-dialog', encapsulation: ViewEncapsulation.None, template: "<form class=\"vex-dialog-form\">\n <ng-container *ngComponentOutlet=\"context.content\"></ng-container>\n <vex-dialog-buttons [buttons]=\"context.buttons\"\n (onButtonClick)=\"onButtonClick($event)\"></vex-dialog-buttons>\n</form>" }] } ]; /** @nocollapse */ DialogFormModal.ctorParameters = function () { return [ { type: DialogRef } ]; }; return DialogFormModal; }()); if (false) { /** @type {?} */ DialogFormModal.prototype.context; /** @type {?} */ DialogFormModal.prototype.dialog; } var FormDropIn = /** @class */ (function () { function FormDropIn(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>\n <div *ngIf=\"context.showInput\" class=\"vex-dialog-input\">\n <input #input\n autofocus\n name=\"vex\"\n type=\"text\"\n class=\"vex-dialog-prompt-input\"\n (change)=\"context.defaultResult = input.value\"\n placeholder=\"{{context.placeholder}}\">\n </div>\n <div *ngIf=\"context.showCloseButton\"\n [class]=\"context.closeClassName\"\n (click)=\"dialog.dismiss()\"></div>" }] } ]; /** @nocollapse */ FormDropIn.ctorParameters = function () { return [ { type: DialogRef } ]; }; return FormDropIn; }()); 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 {?} */ var DEFAULT_VALUES = { className: (/** @type {?} */ ('default')), overlayClassName: 'vex-overlay', contentClassName: 'vex-content', closeClassName: 'vex-close' }; /** @type {?} */ var DEFAULT_SETTERS = [ 'className', 'overlayClassName', 'contentClassName', 'closeClassName', 'showCloseButton' ]; var VEXModalContext = /** @class */ (function (_super) { __extends(VEXModalContext, _super); function VEXModalContext() { return _super !== null && _super.apply(this, arguments) || this; } /** * @return {?} */ VEXModalContext.prototype.normalize = /** * @return {?} */ function () { 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.prototype.normalize.call(this); }; return VEXModalContext; }(ModalOpenContext)); 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 */ var /** * @template T */ VEXModalContextBuilder = /** @class */ (function (_super) { __extends(VEXModalContextBuilder, _super); function VEXModalContextBuilder(defaultValues, initialSetters, baseType) { if (defaultValues === void 0) { defaultValues = undefined; } if (initialSetters === void 0) { initialSetters = undefined; } if (baseType === void 0) { baseType = undefined; } return _super.call(this, extend(DEFAULT_VALUES, defaultValues || {}), arrayUnion(DEFAULT_SETTERS, initialSetters || []), baseType || (/** @type {?} */ (VEXModalContext)) // https://github.com/Microsoft/TypeScript/issues/7234 ) || this; } /** * * @aliasFor isBlocking */ /** * * \@aliasFor isBlocking * @template THIS * @this {THIS} * @param {?} value * @return {THIS} */ VEXModalContextBuilder.prototype.overlayClosesOnClick = /** * * \@aliasFor isBlocking * @template THIS * @this {THIS} * @param {?} value * @return {THIS} */ function (value) { (/** @type {?} */ (this))[privateKey('isBlocking')] = !value; return (/** @type {?} */ (this)); }; return VEXModalContextBuilder; }(ModalOpenContextBuilder)); 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 {?} */ var DEFAULT_SETTERS$1 = [ 'content' ]; /** * Data definition */ var /** * Data definition */ DialogPreset = /** @class */ (function (_super) { __extends(DialogPreset, _super); function DialogPreset() { return _super !== null && _super.apply(this, arguments) || this; } return DialogPreset; }(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 */ var /** * A Preset representing the configuration needed to open MessageModal. * This is an abstract implementation with no concrete behaviour. * Use derived implementation. * @template T */ DialogPresetBuilder = /** @class */ (function (_super) { __extends(DialogPresetBuilder, _super); function DialogPresetBuilder(modal, defaultValues, initialSetters, baseType) { if (defaultValues === void 0) { defaultValues = undefined; } if (initialSetters === void 0) { initialSetters = undefined; } if (baseType === void 0) { baseType = undefined; } return _super.call(this, extend({ modal: modal, component: DialogFormModal, buttons: [], defaultResult: true }, defaultValues || {}), arrayUnion(DEFAULT_SETTERS$1, initialSetters || []), baseType || (/** @type {?} */ (DialogPreset)) // https://github.com/Microsoft/TypeScript/issues/7234 ) || this; } /** * @template THIS * @this {THIS} * @param {?} css * @param {?} caption * @param {?} onClick * @return {THIS} */ DialogPresetBuilder.prototype.addButton = /** * @template THIS * @this {THIS} * @param {?} css * @param {?} caption * @param {?} onClick * @return {THIS} */ function (css, caption, onClick) { /** @type {?} */ var btn = { cssClass: css, caption: caption, onClick: onClick }; /** @type {?} */ var key = privateKey('buttons'); ((/** @type {?} */ ((/** @type {?} */ (this))[key]))).push(btn); return (/** @type {?} */ (this)); }; /** * @template THIS * @this {THIS} * @param {?=} text * @return {THIS} */ DialogPresetBuilder.prototype.addOkButton = /** * @template THIS * @this {THIS} * @param {?=} text * @return {THIS} */ function (text) { if (text === void 0) { text = 'OK'; } (/** @type {?} */ (this)).addButton('vex-dialog-button-primary vex-dialog-button vex-first', text, (/** * @param {?} cmp * @param {?} $event * @return {?} */ function (cmp, $event) { return cmp.dialog.close(cmp.dialog.context.defaultResult); })); return (/** @type {?} */ (this)); }; /** * @template THIS * @this {THIS} * @param {?=} text * @return {THIS} */ DialogPresetBuilder.prototype.addCancelButton = /** * @template THIS * @this {THIS} * @param {?=} text * @return {THIS} */ function (text) { if (text === void 0) { text = 'CANCEL'; } (/** @type {?} */ (this)).addButton('vex-dialog-button-secondary vex-dialog-button vex-last', text, (/** * @param {?} cmp * @param {?} $event * @return {?} */ function (cmp, $event) { return cmp.dialog.dismiss(); })); return (/** @type {?} */ (this)); }; return DialogPresetBuilder; }(VEXModalContextBuilder)); 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 {?} */ var DEFAULT_VALUES$1 = { component: DialogFormModal, content: FormDropIn, okBtn: 'OK', cancelBtn: 'Cancel' }; /** @type {?} */ var DEFAULT_SETTERS$2 = [ 'okBtn', 'cancelBtn', 'placeholder' ]; /** * Data definition */ var /** * Data definition */ DropInPreset = /** @class */ (function (_super) { __extends(DropInPreset, _super); function DropInPreset() { return _super !== null && _super.apply(this, arguments) || this; } Object.defineProperty(DropInPreset.prototype, "showInput", { get: /** * @return {?} */ function () { return this.dropInType === DROP_IN_TYPE.prompt; }, enumerable: true, configurable: true }); return DropInPreset; }(DialogPreset)); 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) */ var /** * A Preset representing all 3 drop ins (alert, prompt, confirm) */ DropInPresetBuilder = /** @class */ (function (_super) { __extends(DropInPresetBuilder, _super); function DropInPresetBuilder(modal, dropInType, defaultValues) { if (defaultValues === void 0) { defaultValues = undefined; } return _super.call(this, modal, extend(extend({ modal: modal, dropInType: dropInType }, DEFAULT_VALUES$1), defaultValues || {}), DEFAULT_SETTERS$2, DropInPreset) || this; } /** * @param {?} config * @return {?} */ DropInPresetBuilder.prototype.$$beforeOpen = /** * @param {?} config * @return {?} */ function (config) { _super.prototype.$$beforeOpen.call(this, 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; } }; return DropInPresetBuilder; }(DialogPresetBuilder)); 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. */ var VexCSSDialogContainer = /** @class */ (function (_super) { __extends(VexCSSDialogContainer, _super); function VexCSSDialogContainer() { return _super !== null && _super.apply(this, arguments) || this; } /** * @param {?} overlay * @return {?} */ VexCSSDialogContainer.prototype.apply = /** * @param {?} overlay * @return {?} */ function (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 },] }] }; return VexCSSDialogContainer; }(CSSDialogContainer)); 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 {?} */ var isDoc = !(typeof document === 'undefined' || !document); /** @type {?} */ var vexV3 = false; /** * Execute this method to flag that you are working with VEX version 3. * @return {?} */ function vexV3Mode() { vexV3 = true; } var Modal = /** @class */ (function (_super) { __extends(Modal, _super); function Modal(overlay) { return _super.call(this, overlay) || this; } /** * @return {?} */ Modal.prototype.alert = /** * @return {?} */ function () { return new DropInPresetBuilder(this, DROP_IN_TYPE.alert, (/** @type {?} */ ({ isBlocking: false }))); }; /** * @return {?} */ Modal.prototype.prompt = /** * @return {?} */ function () { return new DropInPresetBuilder(this, DROP_IN_TYPE.prompt, (/** @type {?} */ ({ isBlocking: true, keyboard: null }))); }; /** * @return {?} */ Modal.prototype.confirm = /** * @return {?} */ function () { return new DropInPresetBuilder(this, DROP_IN_TYPE.confirm, (/** @type {?} */ ({ isBlocking: true, keyboard: null }))); }; /** * @protected * @param {?} dialogRef * @param {?} content * @return {?} */ Modal.prototype.create = /** * @protected * @param {?} dialogRef * @param {?} content * @return {?} */ function (dialogRef, content) { var _this = this; if (vexV3 === true) { return this.createV3(dialogRef, content); } /** @type {?} */ var backdropRef = this.createBackdrop(dialogRef, CSSBackdrop); /** @type {?} */ var containerRef = this.createContainer(dialogRef, VexCSSDialogContainer, content); /** @type {?} */ var overlay = dialogRef.overlayRef.instance; /** @type {?} */ var backdrop = backdropRef.instance; /** @type {?} */ var 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 {?} */ function () { backdrop.addClass('vex-closing'); container.addClass('vex-closing'); /** @type {?} */ var completer = new PromiseCompleter(); /** @type {?} */ var 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 {?} */ function (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 {?} */ Modal.prototype.createV3 = /** * @private * @param {?} dialogRef * @param {?} content * @return {?} */ function (dialogRef, content) { var _this = this; /** @type {?} */ var backdropRef = this.createBackdrop(dialogRef, CSSBackdrop); /** @type {?} */ var containerRef = this.createContainer(dialogRef, CSSDialogContainer, content); /** @type {?} */ var overlay = dialogRef.overlayRef.instance; /** @type {?} */ var backdrop = backdropRef.instance; /** @type {?} */ var 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 {?} */ function () { overlay.addClass('vex-closing'); /** @type {?} */ var completer = new PromiseCompleter(); /** @type {?} */ var animationEnd$ = container.myAnimationEnd$(); if (dialogRef.context.className !== 'bottom-right-corner') { animationEnd$ = combineLatest.call(animationEnd$, backdrop.myAnimationEnd$(), (/** * @param {?} s1 * @param {?} s2 * @return {?} */ function (s1, s2) { return [s1, s2]; })); } animationEnd$.subscribe((/** * @param {?} sources * @return {?} */ function (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 = function () { return [ { type: Overlay } ]; }; return Modal; }(Modal$1)); /** * @fileoverview added by tsickle * Generated from: lib/vex.module.ts * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** @type {?} */ var providers = [ { provide: Modal$1, useClass: Modal }, { provide: Modal, useClass: Modal } ]; var VexModalModule = /** @class */ (function () { function VexModalModule() { } /** * @return {?} */ VexModalModule.getProviders = /** * @return {?} */ function () { return providers; }; VexModalModule.decorators = [ { type: NgModule, args: [{ imports: [ModalModule, CommonModule], declarations: [ VexCSSDialogContainer, VEXDialogButtons, FormDropIn, DialogFormModal ], providers: providers, entryComponents: [ VexCSSDialogContainer, DialogFormModal, FormDropIn ] },] } ]; return VexModalModule; }()); /** * @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