@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
973 lines (962 loc) • 54.8 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/animations'), require('ng-devui/window-ref'), require('lodash-es'), require('rxjs'), require('@angular/platform-browser'), require('@angular/common'), require('ng-devui/overlay-container'), require('ng-devui/button')) :
typeof define === 'function' && define.amd ? define('ng-devui/modal', ['exports', '@angular/core', '@angular/animations', 'ng-devui/window-ref', 'lodash-es', 'rxjs', '@angular/platform-browser', '@angular/common', 'ng-devui/overlay-container', 'ng-devui/button'], factory) :
(global = global || self, factory((global['ng-devui'] = global['ng-devui'] || {}, global['ng-devui'].modal = {}), global.ng.core, global.ng.animations, global['ng-devui']['window-ref'], global.lodashEs, global.rxjs, global.ng.platformBrowser, global.ng.common, global['ng-devui']['overlay-container'], global['ng-devui'].button));
}(this, (function (exports, core, animations, windowRef, lodashEs, rxjs, platformBrowser, common, overlayContainer, button) { 'use strict';
/**
* @fileoverview added by tsickle
* Generated from: modal.directive.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ModalContentDirective = /** @class */ (function () {
function ModalContentDirective(viewContainerRef) {
this.viewContainerRef = viewContainerRef;
}
ModalContentDirective.decorators = [
{ type: core.Directive, args: [{
selector: '[dModalContentHost]',
},] }
];
/** @nocollapse */
ModalContentDirective.ctorParameters = function () { return [
{ type: core.ViewContainerRef }
]; };
return ModalContentDirective;
}());
if (false) {
/** @type {?} */
ModalContentDirective.prototype.viewContainerRef;
}
var ModalContainerDirective = /** @class */ (function () {
function ModalContainerDirective(viewContainerRef) {
this.viewContainerRef = viewContainerRef;
}
ModalContainerDirective.decorators = [
{ type: core.Directive, args: [{
selector: '[dModalContainerHost]',
},] }
];
/** @nocollapse */
ModalContainerDirective.ctorParameters = function () { return [
{ type: core.ViewContainerRef }
]; };
return ModalContainerDirective;
}());
if (false) {
/** @type {?} */
ModalContainerDirective.prototype.viewContainerRef;
}
/**
* @fileoverview added by tsickle
* Generated from: modal.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ModalComponent = /** @class */ (function () {
function ModalComponent(documentRef, renderer) {
var _this = this;
this.documentRef = documentRef;
this.renderer = renderer;
this.placement = 'center';
this.animateState = this.showAnimate ? 'void' : '';
this.ignoreBackDropClick = false;
this.pressEscToClose = new rxjs.Subscription();
this.onModalClick = (/**
* @param {?} $event
* @return {?}
*/
function ($event) {
// 一定要document.contains($event.target)，因为$event.target可能已经不在document里了，这个时候就不能进hide了,使用document.body兼容IE
if (_this.backdropCloseable && !_this.ignoreBackDropClick &&
(!_this.dialogElement.nativeElement.contains($event.target) && document.body.contains($event.target))) {
_this.hide();
}
_this.ignoreBackDropClick = false;
});
this.modalMouseDown = (/**
* @param {?} $event
* @return {?}
*/
function ($event) {
_this.mouseDwonEl = $event.target;
});
this.modalMouseUp = (/**
* @param {?} $event
* @return {?}
*/
function ($event) {
if ($event.target !== _this.mouseDwonEl) {
_this.ignoreBackDropClick = true;
}
});
this.backdropCloseable = lodashEs.isUndefined(this.backdropCloseable)
? true
: this.backdropCloseable;
}
/**
* @return {?}
*/
ModalComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
this.pressEscToClose.add(rxjs.fromEvent(window, 'keydown').subscribe((/**
* @param {?} event
* @return {?}
*/
function (event) {
if (event['keyCode'] === 27) {
_this.hide();
}
})));
/** @type {?} */
var handle = document.getElementById('d-modal-header');
if (handle) {
this.draggableHandleEl = handle;
}
};
/**
* @param {?} event
* @return {?}
*/
ModalComponent.prototype.onAnimationDone = /**
* @param {?} event
* @return {?}
*/
function (event) {
if (event.toState === 'void') {
this.onHidden();
}
};
// Will overwrite this method in modal service
// Will overwrite this method in modal service
/**
* @return {?}
*/
ModalComponent.prototype.onHidden =
// Will overwrite this method in modal service
/**
* @return {?}
*/
function () {
};
/**
* @return {?}
*/
ModalComponent.prototype.canHideModel = /**
* @return {?}
*/
function () {
/** @type {?} */
var hiddenResult = Promise.resolve(true);
if (this.beforeHidden) {
/** @type {?} */
var result = this.beforeHidden();
if (typeof result !== 'undefined') {
if (result.then) {
hiddenResult = result;
}
else if (result.subscribe) {
hiddenResult = ((/** @type {?} */ (result))).toPromise();
}
else {
hiddenResult = Promise.resolve(result);
}
}
}
return hiddenResult;
};
/**
* @return {?}
*/
ModalComponent.prototype.hide = /**
* @return {?}
*/
function () {
var _this = this;
this.canHideModel().then((/**
* @param {?} canHide
* @return {?}
*/
function (canHide) {
if (!canHide) {
return;
}
if (!_this.bodyScrollable) {
_this.renderer.removeClass(_this.documentRef.body, 'modal-open');
}
if (!_this.showAnimate) {
_this.onHidden();
return;
}
_this.animateState = 'void';
}));
};
/**
* @return {?}
*/
ModalComponent.prototype.show = /**
* @return {?}
*/
function () {
if (!this.bodyScrollable) {
this.renderer.addClass(this.documentRef.body, 'modal-open');
}
this.dialogElement.nativeElement.focus();
if (this.showAnimate) {
this.animateState = 'in';
}
};
/**
* @return {?}
*/
ModalComponent.prototype.resolveTransformTranslate = /**
* @return {?}
*/
function () {
/** @type {?} */
var autoOffsetYByPlacement;
switch (this.placement) {
case 'top':
autoOffsetYByPlacement = '40px';
break;
case 'bottom':
autoOffsetYByPlacement = '-40px';
break;
case 'center':
default:
autoOffsetYByPlacement = '0';
break;
}
/** @type {?} */
var offsetX = !!this.offsetX ? this.offsetX : '0';
/** @type {?} */
var offsetY = !!this.offsetY ? this.offsetY : autoOffsetYByPlacement;
return 'translate(' + offsetX + ',' + offsetY + ')';
};
/**
* @return {?}
*/
ModalComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.pressEscToClose.unsubscribe();
};
ModalComponent.decorators = [
{ type: core.Component, args: [{
selector: 'd-modal',
template: "<div class=\"modal-backdrop\" [@backdropAnimation]=\"animateState\"></div>\r\n<div class=\"modal in\" [attr.id]=\"id\" (mousedown)=\"modalMouseDown($event)\" (mouseup)=\"modalMouseUp($event)\" (click)=\"onModalClick($event)\">\r\n <div\r\n class=\"modal-dialog\"\r\n [ngClass]=\"{\r\n 'place-at-top': placement === 'top',\r\n 'place-at-bottom': placement === 'bottom',\r\n 'place-at-center': placement === 'center'\r\n }\"\r\n [ngStyle]=\"{ width: width }\"\r\n [@modalAnimation]=\"animateState\"\r\n (@modalAnimation.done)=\"onAnimationDone($event)\"\r\n tabindex=\"1\"\r\n #dialog\r\n >\r\n <div class=\"modal-content\" [dMovable]=\"draggable\" [handle]=\"draggableHandleEl\" [ngStyle]=\"{ transform: resolveTransformTranslate() }\">\r\n <ng-template dModalContainerHost></ng-template>\r\n </div>\r\n </div>\r\n</div>\r\n",
animations: [
animations.trigger('backdropAnimation', [
animations.state('void', animations.style({ opacity: 0 })),
animations.state('in', animations.style({ opacity: 0.2 })),
animations.transition('void => in', animations.animate('400ms cubic-bezier(0.23, 1, 0.32, 1)')),
animations.transition('in => void', animations.animate('300ms cubic-bezier(0.755, 0.05, 0.855, 0.06)')),
]),
animations.trigger('modalAnimation', [
animations.state('void', animations.style({ opacity: 0, transform: 'scale(0.9)' })),
animations.state('in', animations.style({ opacity: 1, transform: 'scale(1)' })),
animations.transition('void => in', animations.animate('400ms cubic-bezier(0.23, 1, 0.32, 1)')),
animations.transition('in => void', animations.animate('300ms cubic-bezier(0.755, 0.05, 0.855, 0.06)')),
])
],
styles: [".modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1050;outline:0;overflow-y:auto;display:block;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.modal-open .modal{overflow-x:hidden;overflow-y:auto}.modal-dialog{position:relative;width:auto;margin:0 auto}.modal-dialog.place-at-center{margin:auto}.modal-dialog.place-at-top{margin-bottom:auto}.modal-dialog.place-at-bottom{margin-top:auto}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;opacity:.2;background-color:#000}:host ::ng-deep .modal-content{position:relative;border-radius:2px;border:none;background-color:#fff;background-clip:padding-box;outline:0;box-shadow:5px 5px 20px 0 rgba(41,48,64,.2)}:host ::ng-deep .modal-content .modal-body{padding:24px 24px 16px}:host ::ng-deep .modal-content .modal-footer{border-top:none;padding:7px;text-align:center}:host ::ng-deep .modal-content .modal-footer button{margin:5px;padding:5px 20px;width:auto}:host ::ng-deep .modal-content .modal-footer button.pull-left{padding-left:5px;padding-right:5px;position:relative;left:-5px}:host ::ng-deep .modal-content .modal-footer button+button{margin-bottom:16px}:host ::ng-deep .d-btn{display:inline-block;margin-bottom:0;font-weight:400;text-align:center;vertical-align:middle;touch-action:manipulation;cursor:pointer;background-image:none;white-space:nowrap;font-size:14px;line-height:1.42857143;border-radius:2px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:focus{outline:0}"]
}] }
];
/** @nocollapse */
ModalComponent.ctorParameters = function () { return [
{ type: windowRef.DocumentRef },
{ type: core.Renderer2 }
]; };
ModalComponent.propDecorators = {
id: [{ type: core.Input }],
showAnimate: [{ type: core.Input }],
width: [{ type: core.Input }],
backdropCloseable: [{ type: core.Input }],
beforeHidden: [{ type: core.Input }],
draggable: [{ type: core.Input }],
placement: [{ type: core.Input }],
offsetX: [{ type: core.Input }],
offsetY: [{ type: core.Input }],
bodyScrollable: [{ type: core.Input }],
modalContainerHost: [{ type: core.ViewChild, args: [ModalContainerDirective, { static: true },] }],
dialogElement: [{ type: core.ViewChild, args: ['dialog', { static: true },] }]
};
return ModalComponent;
}());
if (false) {
/** @type {?} */
ModalComponent.prototype.id;
/** @type {?} */
ModalComponent.prototype.showAnimate;
/** @type {?} */
ModalComponent.prototype.width;
/** @type {?} */
ModalComponent.prototype.backdropCloseable;
/** @type {?} */
ModalComponent.prototype.beforeHidden;
/** @type {?} */
ModalComponent.prototype.draggable;
/** @type {?} */
ModalComponent.prototype.placement;
/** @type {?} */
ModalComponent.prototype.offsetX;
/** @type {?} */
ModalComponent.prototype.offsetY;
/** @type {?} */
ModalComponent.prototype.bodyScrollable;
/** @type {?} */
ModalComponent.prototype.modalContainerHost;
/** @type {?} */
ModalComponent.prototype.dialogElement;
/** @type {?} */
ModalComponent.prototype.animateState;
/** @type {?} */
ModalComponent.prototype.draggableHandleEl;
/** @type {?} */
ModalComponent.prototype.mouseDwonEl;
/** @type {?} */
ModalComponent.prototype.ignoreBackDropClick;
/** @type {?} */
ModalComponent.prototype.pressEscToClose;
/** @type {?} */
ModalComponent.prototype.onModalClick;
/** @type {?} */
ModalComponent.prototype.modalMouseDown;
/** @type {?} */
ModalComponent.prototype.modalMouseUp;
/**
* @type {?}
* @private
*/
ModalComponent.prototype.documentRef;
/**
* @type {?}
* @private
*/
ModalComponent.prototype.renderer;
}
/**
* @fileoverview added by tsickle
* Generated from: modal-container.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ModalContainerComponent = /** @class */ (function () {
function ModalContainerComponent(sanitizer) {
this.sanitizer = sanitizer;
this.dialogtype = 'standard';
}
/**
* @return {?}
*/
ModalContainerComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
if (this.html) {
this.content = (/** @type {?} */ (this.sanitizer.bypassSecurityTrustHtml((/** @type {?} */ (this.content)))));
}
};
/**
* @param {?} event
* @return {?}
*/
ModalContainerComponent.prototype.close = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.onClose(event);
};
ModalContainerComponent.decorators = [
{ type: core.Component, args: [{
selector: 'd-modal-container',
template: "<div>\r\n <d-modal-header\r\n id=\"d-modal-header\"\r\n [title]=\"title\"\r\n (closeEvent)=\"close($event)\"\r\n [dialogtype]=\"dialogtype\"\r\n [showCloseBtn]=\"showCloseBtn\"\r\n ></d-modal-header>\r\n <div\r\n class=\"modal-body devui-scrollbar\"\r\n [ngClass]=\"{\r\n 'flex-content': dialogtype === 'warning' || dialogtype === 'failed' || dialogtype === 'success' || dialogtype === 'info'\r\n }\"\r\n [ngStyle]=\"{ maxHeight: maxHeight, 'overflow-y': 'auto' }\"\r\n >\r\n <div\r\n [ngClass]=\"{\r\n 'display-flex': dialogtype !== '' && dialogtype !== 'standard'\r\n }\"\r\n >\r\n <div class=\"content\" [style.max-height]=\"maxHeight\" *ngIf=\"!!content && !html\">\r\n {{ content }}\r\n </div>\r\n <div class=\"content\" [style.max-height]=\"maxHeight\" *ngIf=\"!!content && html\" [innerHTML]=\"content\"></div>\r\n <ng-template dModalContentHost></ng-template>\r\n </div>\r\n </div>\r\n\r\n <d-modal-footer [buttons]=\"buttons\"></d-modal-footer>\r\n</div>\r\n",
styles: [".modal-body{padding:10px 30px}.display-flex{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;display:-ms-flexbox;-ms-flex-align:center;max-width:100%}.alert-icon{margin-right:10px}div.content{word-break:normal;word-wrap:break-word;width:100%}.alert-icon+div.content{width:'calc(100% - 60px)'}.flex-content ::ng-deep div.content{font-size:14px;word-break:normal;word-wrap:break-word;white-space:pre-wrap}.flex-content{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center}"]
}] }
];
/** @nocollapse */
ModalContainerComponent.ctorParameters = function () { return [
{ type: platformBrowser.DomSanitizer }
]; };
ModalContainerComponent.propDecorators = {
maxHeight: [{ type: core.Input }],
data: [{ type: core.Input }],
title: [{ type: core.Input }],
content: [{ type: core.Input }],
buttons: [{ type: core.Input }],
html: [{ type: core.Input }],
onClose: [{ type: core.Input }],
modalContentHost: [{ type: core.ViewChild, args: [ModalContentDirective, { static: true },] }],
dialogtype: [{ type: core.Input }],
showCloseBtn: [{ type: core.Input }]
};
return ModalContainerComponent;
}());
if (false) {
/** @type {?} */
ModalContainerComponent.prototype.maxHeight;
/** @type {?} */
ModalContainerComponent.prototype.data;
/** @type {?} */
ModalContainerComponent.prototype.title;
/** @type {?} */
ModalContainerComponent.prototype.content;
/** @type {?} */
ModalContainerComponent.prototype.buttons;
/** @type {?} */
ModalContainerComponent.prototype.html;
/** @type {?} */
ModalContainerComponent.prototype.onClose;
/** @type {?} */
ModalContainerComponent.prototype.modalContentHost;
/** @type {?} */
ModalContainerComponent.prototype.dialogtype;
/** @type {?} */
ModalContainerComponent.prototype.showCloseBtn;
/**
* @type {?}
* @private
*/
ModalContainerComponent.prototype.sanitizer;
}
/**
* @fileoverview added by tsickle
* Generated from: modal.service.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ModalService = /** @class */ (function () {
function ModalService(componentFactoryResolver, overlayContainerRef) {
this.componentFactoryResolver = componentFactoryResolver;
this.overlayContainerRef = overlayContainerRef;
}
/**
* @param {?} __0
* @return {?}
*/
ModalService.prototype.open = /**
* @param {?} __0
* @return {?}
*/
function (_a) {
var id = _a.id, component = _a.component, injector = _a.injector, width = _a.width, data = _a.data, handler = _a.handler, showAnimate = _a.showAnimate, backdropCloseable = _a.backdropCloseable, componentFactoryResolver = _a.componentFactoryResolver, onClose = _a.onClose, beforeHidden = _a.beforeHidden, _b = _a.placement, placement = _b === void 0 ? 'center' : _b, offsetX = _a.offsetX, offsetY = _a.offsetY, bodyScrollable = _a.bodyScrollable;
/** @type {?} */
var finalComponentFactoryResolver = componentFactoryResolver || this.componentFactoryResolver;
/** @type {?} */
var modalRef = this.overlayContainerRef.createComponent(finalComponentFactoryResolver.resolveComponentFactory(ModalComponent), injector);
lodashEs.assign(modalRef.instance, {
id: id,
width: width,
showAnimate: showAnimate,
beforeHidden: beforeHidden,
backdropCloseable: lodashEs.isUndefined(backdropCloseable) ? true : backdropCloseable,
placement: placement,
offsetX: offsetX,
offsetY: offsetY,
bodyScrollable: bodyScrollable
});
/** @type {?} */
var modalContentInstance = modalRef.instance.modalContainerHost.viewContainerRef
.createComponent(finalComponentFactoryResolver.resolveComponentFactory(component), 0, injector);
lodashEs.assign(modalContentInstance.instance, { data: data, handler: handler });
modalRef.instance.onHidden = (/**
* @return {?}
*/
function () {
if (onClose) {
onClose();
}
setTimeout((/**
* @return {?}
*/
function () {
modalRef.hostView.destroy();
}));
});
modalRef.instance.show();
return {
modalInstance: modalRef.instance,
modalContentInstance: modalContentInstance.instance
};
};
ModalService.decorators = [
{ type: core.Injectable }
];
/** @nocollapse */
ModalService.ctorParameters = function () { return [
{ type: core.ComponentFactoryResolver },
{ type: overlayContainer.OverlayContainerRef }
]; };
return ModalService;
}());
if (false) {
/**
* @type {?}
* @private
*/
ModalService.prototype.componentFactoryResolver;
/**
* @type {?}
* @private
*/
ModalService.prototype.overlayContainerRef;
}
/**
* @fileoverview added by tsickle
* Generated from: modal-header.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ModalHeaderComponent = /** @class */ (function () {
function ModalHeaderComponent() {
this.closeEvent = new core.EventEmitter();
this.dialogtype = 'standard';
}
/**
* @param {?} event
* @return {?}
*/
ModalHeaderComponent.prototype.close = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.closeEvent.emit(event);
};
ModalHeaderComponent.decorators = [
{ type: core.Component, args: [{
selector: 'd-modal-header',
template: "<div class=\"modal-header\">\r\n <button *ngIf=\"showCloseBtn\" type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"close($event)\">\r\n <svg class=\"svg-icon-close\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12px\" height=\"12px\" viewBox=\"0 0 12 12\" version=\"1.1\">\r\n <g id=\"Symbols\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <g id=\"\u56FE\u6807\" transform=\"translate(-1236.000000, -1286.000000)\" fill-rule=\"nonzero\">\r\n <g id=\"close\" transform=\"translate(1234.000000, 1284.000000)\">\r\n <polygon\r\n id=\"Mask\"\r\n points=\"8 6.58578644 12.2426407 2.34314575 13.6568542 3.75735931 9.41421356 8 13.6568542 12.2426407 12.2426407 13.6568542 8 9.41421356 3.75735931 13.6568542 2.34314575 12.2426407 6.58578644 8 2.34314575 3.75735931 3.75735931 2.34314575\"\r\n />\r\n </g>\r\n </g>\r\n </g>\r\n </svg>\r\n </button>\r\n\r\n <div class=\"standard-title\">\r\n <div *ngIf=\"(dialogtype | lowercase) == 'warning'\" class=\"header-alert-icon\">\r\n <svg\r\n t=\"1523848353321\"\r\n class=\"icon\"\r\n style=\"\"\r\n viewBox=\"0 0 1024 1024\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n p-id=\"2903\"\r\n width=\"16\"\r\n height=\"16\"\r\n >\r\n <defs>\r\n <style type=\"text/css\"></style>\r\n </defs>\r\n <path\r\n d=\"M512 0C229.205333 0 0 229.205333 0 512s229.205333 512 512 512 512-229.205333 512-512S794.794667 0 512 0z m-40.021333 230.997333a39.978667 39.978667 0 1 1 80.042666 0v369.024a39.978667 39.978667 0 1 1-80.042666 0V230.997333zM512 794.026667a44.928 44.928 0 0 1-45.013333-44.970667c0-24.917333 20.096-45.013333 45.013333-45.013333s45.013333 20.096 45.013333 45.013333c0 24.746667-20.096 44.970667-45.013333 44.970667z\"\r\n fill=\"#fecc55\"\r\n p-id=\"2904\"\r\n ></path>\r\n </svg>\r\n </div>\r\n <div *ngIf=\"(dialogtype | lowercase) == 'failed'\" class=\"header-alert-icon\">\r\n <svg\r\n t=\"1523848193850\"\r\n class=\"icon\"\r\n style=\"\"\r\n viewBox=\"0 0 1024 1024\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n p-id=\"2647\"\r\n width=\"16\"\r\n height=\"16\"\r\n >\r\n <defs>\r\n <style type=\"text/css\"></style>\r\n </defs>\r\n <path\r\n d=\"M512 0C229.205333 0 0 229.205333 0 512s229.205333 512 512 512 512-229.205333 512-512S794.794667 0 512 0z m205.312 666.88a36.010667 36.010667 0 0 1-51.029333 50.816L512 562.986667l-154.282667 154.709333a35.84 35.84 0 0 1-50.901333 0.085333 36.010667 36.010667 0 0 1-0.128-50.901333L461.226667 512 306.773333 357.12a36.010667 36.010667 0 0 1 50.986667-50.816L512 461.013333l154.282667-154.794666a36.010667 36.010667 0 0 1 51.029333 50.773333L562.773333 512l154.453334 154.88z\"\r\n fill=\"#F9504B\"\r\n p-id=\"2648\"\r\n ></path>\r\n </svg>\r\n </div>\r\n <div *ngIf=\"(dialogtype | lowercase) == 'sucess' || (dialogtype | lowercase) == 'success'\" class=\"header-alert-icon\">\r\n <svg\r\n t=\"1523848446605\"\r\n class=\"icon\"\r\n style=\"\"\r\n viewBox=\"0 0 1024 1024\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n p-id=\"3058\"\r\n width=\"16\"\r\n height=\"16\"\r\n >\r\n <defs>\r\n <style type=\"text/css\"></style>\r\n </defs>\r\n <path\r\n d=\"M512 0C229.205333 0 0 229.205333 0 512s229.205333 512 512 512 512-229.205333 512-512S794.794667 0 512 0z m260.266667 356.394667l-359.466667 360.704-0.426667 0.426666a35.925333 35.925333 0 0 1-57.6-6.826666l-108.885333-190.378667a35.882667 35.882667 0 0 1 13.397333-49.109333 35.882667 35.882667 0 0 1 49.109334 13.397333l85.418666 149.504 327.466667-328.533333a36.010667 36.010667 0 0 1 51.029333 50.816z\"\r\n fill=\"#41C99F\"\r\n p-id=\"3059\"\r\n ></path>\r\n </svg>\r\n </div>\r\n <div *ngIf=\"(dialogtype | lowercase) == 'info'\" class=\"header-alert-icon\">\r\n <svg\r\n t=\"1523848507870\"\r\n class=\"icon\"\r\n style=\"\"\r\n viewBox=\"0 0 1024 1024\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n p-id=\"3217\"\r\n width=\"16\"\r\n height=\"16\"\r\n >\r\n <defs>\r\n <style type=\"text/css\"></style>\r\n </defs>\r\n <path\r\n d=\"M512 0C229.205333 0 0 229.205333 0 512s229.205333 512 512 512 512-229.205333 512-512S794.794667 0 512 0z m-2.986667 184.490667a35.968 35.968 0 1 1 0 71.978666 35.968 35.968 0 0 1 0-71.978666z m157.184 557.098666a35.968 35.968 0 0 1-36.010666 36.010667H387.84a35.968 35.968 0 1 1 0-72.021333h85.205333V391.552H413.013333a35.968 35.968 0 1 1 0-72.021333h96c19.882667 0 35.968 16.128 35.968 36.010666v350.122667h85.205334c19.925333 0 36.010667 16.085333 36.010666 35.968z\"\r\n fill=\"#797979\"\r\n p-id=\"3218\"\r\n ></path>\r\n </svg>\r\n </div>\r\n <span *ngIf=\"!!title\" [title]=\"title\" class=\"title-text\">{{ title }}</span>\r\n <span *ngIf=\"!!!title && (dialogtype | lowercase) === 'warning'\" class=\"title-text\">\u63D0\u9192</span>\r\n <span *ngIf=\"!!!title && (dialogtype | lowercase) === 'failed'\" class=\"title-text\">\u9519\u8BEF</span>\r\n <span *ngIf=\"!!!title && ((dialogtype | lowercase) === 'sucess' || (dialogtype | lowercase) == 'success')\" class=\"title-text\"\r\n >\u6210\u529F</span\r\n >\r\n <span *ngIf=\"!!!title && (dialogtype | lowercase) === 'info'\" class=\"title-text\">\u63D0\u793A</span>\r\n </div>\r\n</div>\r\n",
styles: [".modal-header{padding:10px 20px 0;height:43px}.modal-header .standard-title{color:#252b3a;letter-spacing:0;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}button.close{float:right;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2;cursor:pointer;background:0 0;border:0;-webkit-appearance:none}svg.svg-icon-close>g>g{fill:#252b3a}.header-alert-icon{width:16px;height:16px;display:inline-block;vertical-align:middle;margin-right:5px}.title-text{font-size:16px;font-weight:600;vertical-align:middle}button{outline:0;height:30px;width:30px}.close:hover{background:#f2f5fc}.close:hover svg g{fill:#344899}"]
}] }
];
ModalHeaderComponent.propDecorators = {
title: [{ type: core.Input }],
closeEvent: [{ type: core.Output }],
dialogtype: [{ type: core.Input }],
showCloseBtn: [{ type: core.Input }]
};
return ModalHeaderComponent;
}());
if (false) {
/** @type {?} */
ModalHeaderComponent.prototype.title;
/** @type {?} */
ModalHeaderComponent.prototype.closeEvent;
/** @type {?} */
ModalHeaderComponent.prototype.dialogtype;
/** @type {?} */
ModalHeaderComponent.prototype.showCloseBtn;
}
/**
* @fileoverview added by tsickle
* Generated from: modal-footer.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ModalFooterComponent = /** @class */ (function () {
function ModalFooterComponent() {
}
ModalFooterComponent.decorators = [
{ type: core.Component, args: [{
selector: 'd-modal-footer',
template: "<div class=\"modal-footer\">\r\n <div>\r\n <d-button\r\n *ngFor=\"let button of buttons\"\r\n [attr.id]=\"button.id\"\r\n (btnClick)=\"button.handler($event)\"\r\n bsStyle=\"{{ button.cssClass }}\"\r\n circled=\"true\"\r\n [width]=\"button.btnwidth\"\r\n [autofocus]=\"button.autofocus\"\r\n >{{ button.text }}\r\n </d-button>\r\n </div>\r\n</div>\r\n",
styles: [".modal-footer{height:64px;padding:14px 7px 7px}"]
}] }
];
ModalFooterComponent.propDecorators = {
buttons: [{ type: core.Input }]
};
return ModalFooterComponent;
}());
if (false) {
/** @type {?} */
ModalFooterComponent.prototype.buttons;
}
/**
* @fileoverview added by tsickle
* Generated from: modal-alert.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ModalAlertComponent = /** @class */ (function () {
function ModalAlertComponent() {
}
/**
* @param {?} event
* @return {?}
*/
ModalAlertComponent.prototype.close = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.data.onClose(event);
};
ModalAlertComponent.decorators = [
{ type: core.Component, args: [{
selector: 'd-modal-alert',
template: "<div>\r\n <div class=\"modal-body\">\r\n <div *ngIf=\"!!data.content\">{{ data.content }}</div>\r\n </div>\r\n <div class=\"modal-footer\">\r\n <d-button (btnClick)=\"close($event)\" bsStyle=\"stress\">{{ data.cancelBtnText }} </d-button>\r\n </div>\r\n</div>\r\n"
}] }
];
ModalAlertComponent.propDecorators = {
data: [{ type: core.Input }]
};
return ModalAlertComponent;
}());
if (false) {
/** @type {?} */
ModalAlertComponent.prototype.data;
}
/**
* @fileoverview added by tsickle
* Generated from: dialog.service.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var DialogService = /** @class */ (function () {
function DialogService(componentFactoryResolver, overlayContainerRef) {
this.componentFactoryResolver = componentFactoryResolver;
this.overlayContainerRef = overlayContainerRef;
}
/**
* @param {?} __0
* @return {?}
*/
DialogService.prototype.open = /**
* @param {?} __0
* @return {?}
*/
function (_a) {
var id = _a.id, width = _a.width, backdropCloseable = _a.backdropCloseable, maxHeight = _a.maxHeight, showAnimate = _a.showAnimate, title = _a.title, content = _a.content, html = _a.html, data = _a.data, buttons = _a.buttons, injector = _a.injector, componentFactoryResolver = _a.componentFactoryResolver, beforeHidden = _a.beforeHidden, onClose = _a.onClose, _b = _a.dialogtype, dialogtype = _b === void 0 ? 'standard' : _b, _c = _a.showCloseBtn, showCloseBtn = _c === void 0 ? true : _c, _d = _a.draggable, draggable = _d === void 0 ? true : _d, _e = _a.placement, placement = _e === void 0 ? 'center' : _e, offsetX = _a.offsetX, offsetY = _a.offsetY, bodyScrollable = _a.bodyScrollable;
/** @type {?} */
var finalComponentFactoryResolver = componentFactoryResolver || this.componentFactoryResolver;
/** @type {?} */
var modalRef = this.overlayContainerRef.createComponent(finalComponentFactoryResolver.resolveComponentFactory(ModalComponent), injector);
lodashEs.assign(modalRef.instance, {
id: id,
width: width,
showAnimate: showAnimate,
beforeHidden: beforeHidden,
// set backdropCloseable default value "true" when not passing it
backdropCloseable: lodashEs.isUndefined(backdropCloseable) ? true : backdropCloseable,
draggable: draggable,
placement: placement,
offsetX: offsetX,
offsetY: offsetY,
bodyScrollable: bodyScrollable
});
/** @type {?} */
var modalContainerRef = modalRef.instance.modalContainerHost.viewContainerRef
.createComponent(finalComponentFactoryResolver.resolveComponentFactory(ModalContainerComponent), 0, injector);
lodashEs.assign(modalContainerRef.instance, { title: title, buttons: buttons, maxHeight: maxHeight, dialogtype: dialogtype, showCloseBtn: showCloseBtn });
if (typeof content === 'string') {
lodashEs.assign(modalContainerRef.instance, { content: content, html: html });
}
else {
this.contentRef = modalContainerRef.instance.modalContentHost.viewContainerRef
.createComponent(finalComponentFactoryResolver.resolveComponentFactory(content));
lodashEs.assign(this.contentRef.instance, { data: data }, dialogtype);
}
modalContainerRef.instance.onClose = (/**
* @return {?}
*/
function () {
modalRef.instance.hide();
});
modalRef.instance.onHidden = (/**
* @return {?}
*/
function () {
if (onClose) {
onClose();
}
setTimeout((/**
* @return {?}
*/
function () {
modalRef.hostView.destroy();
}));
});
modalRef.instance.show();
return {
modalInstance: modalRef.instance,
modalContentInstance: this.contentRef ? this.contentRef.instance : null,
};
};
DialogService.decorators = [
{ type: core.Injectable }
];
/** @nocollapse */
DialogService.ctorParameters = function () { return [
{ type: core.ComponentFactoryResolver },
{ type: overlayContainer.OverlayContainerRef }
]; };
return DialogService;
}());
if (false) {
/** @type {?} */
DialogService.prototype.contentRef;
/**
* @type {?}
* @private
*/
DialogService.prototype.componentFactoryResolver;
/**
* @type {?}
* @private
*/
DialogService.prototype.overlayContainerRef;
}
/**
* @fileoverview added by tsickle
* Generated from: movable.directive.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var MovableDirective = /** @class */ (function () {
function MovableDirective(el) {
this.el = el;
this.topStart = 0;
this.leftStart = 0;
this._allowDrag = false;
this.checkHandleTarget = (/**
* @param {?} target
* @param {?} element
* @return {?}
*/
function (target, element) {
if (!element) {
return false;
}
// Checks if the target is the element clicked, then checks each child element of element as well
// Ignores button clicks
// Ignore elements of type button
if (element.tagName === 'BUTTON') {
return false;
}
// If the target was found, return true (handle was found)
if (element === target) {
return true;
}
// Recursively iterate this elements children
for (var /** @type {?} */ child in element.children) {
if (element.children.hasOwnProperty(child)) {
if (this.checkHandleTarget(target, element.children[child])) {
return true;
}
}
}
// Handle was not found in this lineage
// Note: return false is ignore unless it is the parent element
return false;
});
}
/**
* @return {?}
*/
MovableDirective.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.element = this.moveEl || this.el.nativeElement;
// css changes
if (this._allowDrag) {
this.element.style.position = 'relative';
}
};
/**
* @param {?} changes
* @return {?}
*/
MovableDirective.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
if (changes['moveEl']) {
this.element = this.moveEl || this.el.nativeElement;
}
};
/**
* @param {?} event
* @return {?}
*/
MovableDirective.prototype.onMouseDown = /**
* @param {?} event
* @return {?}
*/
function (event) {
if (event.button === 2 || !this.checkHandleTarget(event.target, this.handle)) {
return; // prevents right click drag, remove his if you don't want it
}
this.md = true;
this.topStart = event.clientY - this.element.style.top.replace('px', '');
this.leftStart = event.clientX - this.element.style.left.replace('px', '');
};
/**
* @param {?} event
* @return {?}
*/
MovableDirective.prototype.onMouseUp = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.md = false;
};
/**
* @param {?} event
* @return {?}
*/
MovableDirective.prototype.onMouseMove = /**
* @param {?} event
* @return {?}
*/
function (event) {
if (this.md && this._allowDrag) {
// 阻止拖动过程中文字被选中
event.stopPropagation();
event.preventDefault();
// 判断边界条件
/** @type {?} */
var modalRect = this.element.getBoundingClientRect();
/** @type {?} */
var parentRect = this.element.parentNode.getBoundingClientRect();
// 当前偏移量
/** @type {?} */
var currentTop = event.clientY - this.topStart;
/** @type {?} */
var currentLeft = event.clientX - this.leftStart;
// 计算上下距离，按照parentNode的位置计算偏移量，后续parentNode存在偏移量，需要考虑偏移量
/** @type {?} */
var maxTop = window.innerHeight - parentRect.top - modalRect.height;
currentTop = ((parentRect.top + currentTop) <= 0 && -parentRect.top) || ((maxTop - currentTop <= 0) && maxTop) || currentTop;
/** @type {?} */
var halfWidth = (window.innerWidth - modalRect.width) / 2;
// 计算左右距离，默认居中，后续parentNode存在偏移量，需要考虑偏移量
currentLeft = ((currentLeft + halfWidth) <= 0 && -halfWidth) || ((halfWidth - currentLeft) <= 0 && halfWidth) || currentLeft;
this.element.style.top = currentTop + 'px';
this.element.style.left = currentLeft + 'px';
}
};
/**
* @param {?} event
* @return {?}
*/
MovableDirective.prototype.onTouchStart = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.md = true;
this.topStart = event.changedTouches[0].clientY - this.element.style.top.replace('px', '');
this.leftStart = event.changedTouches[0].clientX - this.element.style.left.replace('px', '');
event.stopPropagation();
};
/**
* @return {?}
*/
MovableDirective.prototype.onTouchEnd = /**
* @return {?}
*/
function () {
this.md = false;
};
/**
* @param {?} event
* @return {?}
*/
MovableDirective.prototype.onTouchMove = /**
* @param {?} event
* @return {?}
*/
function (event) {
if (this.md && this._allowDrag) {
this.element.style.top = (event.changedTouches[0].clientY - this.topStart) + 'px';
this.element.style.left = (event.changedTouches[0].clientX - this.leftStart) + 'px';
}
event.stopPropagation();
};
Object.defineProperty(MovableDirective.prototype, "allowDrag", {
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._allowDrag = value;
if (this._allowDrag) {
this.handle.style.cursor = 'move';
}
},
enumerable: true,
configurable: true
});
MovableDirective.decorators = [
{ type: core.Directive, args: [{
selector: '[dMovable]'
},] }
];
/** @nocollapse */
MovableDirective.ctorParameters = function () { return [
{ type: core.ElementRef }
]; };
MovableDirective.propDecorators = {
handle: [{ type: core.Input }],
moveEl: [{ type: core.Input }],
onMouseDown: [{ type: core.HostListener, args: ['mousedown', ['$event'],] }],
onMouseUp: [{ type: core.HostListener, args: ['document:mouseup', ['$event'],] }],
onMouseMove: [{ type: core.HostListener, args: ['document:mousemove', ['$event'],] }],
onTouchStart: [{ type: core.HostListener, args: ['touchstart', ['$event'],] }],
onTouchEnd: [{ type: core.HostListener, args: ['document:touchend',] }],
onTouchMove: [{ type: core.HostListener, args: ['document:touchmove', ['$event'],] }],
allowDrag: [{ type: core.Input, args: ['dMovable',] }]
};
return MovableDirective;
}());
if (false) {
/** @type {?} */
MovableDirective.prototype.topStart;
/** @type {?} */
MovableDirective.prototype.leftStart;
/** @type {?} */
MovableDirective.prototype._allowDrag;
/** @type {?} */
MovableDirective.prototype.md;
/** @type {?} */
MovableDirective.prototype.handle;
/** @type {?} */
MovableDirective.prototype.moveEl;
/** @type {?} */
MovableDirective.prototype.element;
/** @type {?} */
MovableDirective.prototype.checkHandleTarget;
/** @type {?} */
MovableDirective.prototype.el;
}
/**
* @fileoverview added by tsickle
* Generated from: modal.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ModalModule = /** @class */ (function () {
function ModalModule() {
}
ModalModule.decorators = [
{ type: core.NgModule, args: [{
imports: [
common.CommonModule,
overlayContainer.OverlayContainerModule,
button.ButtonModule
],
declarations: [
ModalComponent,
ModalContainerComponent,
ModalContainerDirective,
ModalContentDirective,
ModalHeaderComponent,
ModalFooterComponent,
ModalAlertComponent,
MovableDirective
],
exports: [
ModalComponent,
ModalContainerComponent,
ModalHeaderComponent,
ModalFooterComponent,