@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
1,016 lines (1,001 loc) • 44.8 kB
JavaScript
import { Directive, ViewContainerRef, Component, Renderer2, Input, ViewChild, Injectable, ComponentFactoryResolver, EventEmitter, Output, ElementRef, HostListener, NgModule } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';
import { DocumentRef } from '@duoduo-oba/ng-devui/window-ref';
import { isUndefined, assign } from 'lodash-es';
import { Subscription, fromEvent } from 'rxjs';
import { DomSanitizer } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { OverlayContainerRef, OverlayContainerModule } from '@duoduo-oba/ng-devui/overlay-container';
import { ButtonModule } from '@duoduo-oba/ng-devui/button';
/**
* @fileoverview added by tsickle
* Generated from: modal.directive.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class ModalContentDirective {
/**
* @param {?} viewContainerRef
*/
constructor(viewContainerRef) {
this.viewContainerRef = viewContainerRef;
}
}
ModalContentDirective.decorators = [
{ type: Directive, args: [{
selector: '[dModalContentHost]',
},] }
];
/** @nocollapse */
ModalContentDirective.ctorParameters = () => [
{ type: ViewContainerRef }
];
if (false) {
/** @type {?} */
ModalContentDirective.prototype.viewContainerRef;
}
class ModalContainerDirective {
/**
* @param {?} viewContainerRef
*/
constructor(viewContainerRef) {
this.viewContainerRef = viewContainerRef;
}
}
ModalContainerDirective.decorators = [
{ type: Directive, args: [{
selector: '[dModalContainerHost]',
},] }
];
/** @nocollapse */
ModalContainerDirective.ctorParameters = () => [
{ type: ViewContainerRef }
];
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
*/
class ModalComponent {
/**
* @param {?} documentRef
* @param {?} renderer
*/
constructor(documentRef, renderer) {
this.documentRef = documentRef;
this.renderer = renderer;
this.placement = 'center';
this.animateState = this.showAnimate ? 'void' : '';
this.ignoreBackDropClick = false;
this.pressEscToClose = new Subscription();
this.onModalClick = (/**
* @param {?} $event
* @return {?}
*/
($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 {?}
*/
($event) => {
this.mouseDwonEl = $event.target;
});
this.modalMouseUp = (/**
* @param {?} $event
* @return {?}
*/
($event) => {
if ($event.target !== this.mouseDwonEl) {
this.ignoreBackDropClick = true;
}
});
this.backdropCloseable = isUndefined(this.backdropCloseable)
? true
: this.backdropCloseable;
}
/**
* @return {?}
*/
ngOnInit() {
this.pressEscToClose.add(fromEvent(window, 'keydown').subscribe((/**
* @param {?} event
* @return {?}
*/
(event) => {
if (event['keyCode'] === 27) {
this.hide();
}
})));
/** @type {?} */
const handle = document.getElementById('d-modal-header');
if (handle) {
this.draggableHandleEl = handle;
}
}
/**
* @param {?} event
* @return {?}
*/
onAnimationDone(event) {
if (event.toState === 'void') {
this.onHidden();
}
}
// Will overwrite this method in modal service
/**
* @return {?}
*/
onHidden() {
}
/**
* @return {?}
*/
canHideModel() {
/** @type {?} */
let hiddenResult = Promise.resolve(true);
if (this.beforeHidden) {
/** @type {?} */
const 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 {?}
*/
hide() {
this.canHideModel().then((/**
* @param {?} canHide
* @return {?}
*/
(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 {?}
*/
show() {
if (!this.bodyScrollable) {
this.renderer.addClass(this.documentRef.body, 'modal-open');
}
this.dialogElement.nativeElement.focus();
if (this.showAnimate) {
this.animateState = 'in';
}
}
/**
* @return {?}
*/
resolveTransformTranslate() {
/** @type {?} */
let autoOffsetYByPlacement;
switch (this.placement) {
case 'top':
autoOffsetYByPlacement = '40px';
break;
case 'bottom':
autoOffsetYByPlacement = '-40px';
break;
case 'center':
default:
autoOffsetYByPlacement = '0';
break;
}
/** @type {?} */
const offsetX = !!this.offsetX ? this.offsetX : '0';
/** @type {?} */
const offsetY = !!this.offsetY ? this.offsetY : autoOffsetYByPlacement;
return 'translate(' + offsetX + ',' + offsetY + ')';
}
/**
* @return {?}
*/
ngOnDestroy() {
this.pressEscToClose.unsubscribe();
}
}
ModalComponent.decorators = [
{ type: 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: [
trigger('backdropAnimation', [
state('void', style({ opacity: 0 })),
state('in', style({ opacity: 0.2 })),
transition('void => in', animate('400ms cubic-bezier(0.23, 1, 0.32, 1)')),
transition('in => void', animate('300ms cubic-bezier(0.755, 0.05, 0.855, 0.06)')),
]),
trigger('modalAnimation', [
state('void', style({ opacity: 0, transform: 'scale(0.9)' })),
state('in', style({ opacity: 1, transform: 'scale(1)' })),
transition('void => in', animate('400ms cubic-bezier(0.23, 1, 0.32, 1)')),
transition('in => void', 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 = () => [
{ type: DocumentRef },
{ type: Renderer2 }
];
ModalComponent.propDecorators = {
id: [{ type: Input }],
showAnimate: [{ type: Input }],
width: [{ type: Input }],
backdropCloseable: [{ type: Input }],
beforeHidden: [{ type: Input }],
draggable: [{ type: Input }],
placement: [{ type: Input }],
offsetX: [{ type: Input }],
offsetY: [{ type: Input }],
bodyScrollable: [{ type: Input }],
modalContainerHost: [{ type: ViewChild, args: [ModalContainerDirective, { static: true },] }],
dialogElement: [{ type: ViewChild, args: ['dialog', { static: true },] }]
};
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
*/
class ModalContainerComponent {
/**
* @param {?} sanitizer
*/
constructor(sanitizer) {
this.sanitizer = sanitizer;
this.dialogtype = 'standard';
}
/**
* @return {?}
*/
ngOnInit() {
if (this.html) {
this.content = (/** @type {?} */ (this.sanitizer.bypassSecurityTrustHtml((/** @type {?} */ (this.content)))));
}
}
/**
* @param {?} event
* @return {?}
*/
close(event) {
this.onClose(event);
}
}
ModalContainerComponent.decorators = [
{ type: 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 = () => [
{ type: DomSanitizer }
];
ModalContainerComponent.propDecorators = {
maxHeight: [{ type: Input }],
data: [{ type: Input }],
title: [{ type: Input }],
content: [{ type: Input }],
buttons: [{ type: Input }],
html: [{ type: Input }],
onClose: [{ type: Input }],
modalContentHost: [{ type: ViewChild, args: [ModalContentDirective, { static: true },] }],
dialogtype: [{ type: Input }],
showCloseBtn: [{ type: Input }]
};
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
*/
class ModalService {
/**
* @param {?} componentFactoryResolver
* @param {?} overlayContainerRef
*/
constructor(componentFactoryResolver, overlayContainerRef) {
this.componentFactoryResolver = componentFactoryResolver;
this.overlayContainerRef = overlayContainerRef;
}
/**
* @param {?} __0
* @return {?}
*/
open({ id, component, injector, width, data, handler, showAnimate, backdropCloseable, componentFactoryResolver, onClose, beforeHidden, placement = 'center', offsetX, offsetY, bodyScrollable }) {
/** @type {?} */
const finalComponentFactoryResolver = componentFactoryResolver || this.componentFactoryResolver;
/** @type {?} */
const modalRef = this.overlayContainerRef.createComponent(finalComponentFactoryResolver.resolveComponentFactory(ModalComponent), injector);
assign(modalRef.instance, {
id,
width,
showAnimate,
beforeHidden,
backdropCloseable: isUndefined(backdropCloseable) ? true : backdropCloseable,
placement,
offsetX,
offsetY,
bodyScrollable
});
/** @type {?} */
const modalContentInstance = modalRef.instance.modalContainerHost.viewContainerRef
.createComponent(finalComponentFactoryResolver.resolveComponentFactory(component), 0, injector);
assign(modalContentInstance.instance, { data, handler });
modalRef.instance.onHidden = (/**
* @return {?}
*/
() => {
if (onClose) {
onClose();
}
setTimeout((/**
* @return {?}
*/
() => {
modalRef.hostView.destroy();
}));
});
modalRef.instance.show();
return {
modalInstance: modalRef.instance,
modalContentInstance: modalContentInstance.instance
};
}
}
ModalService.decorators = [
{ type: Injectable }
];
/** @nocollapse */
ModalService.ctorParameters = () => [
{ type: ComponentFactoryResolver },
{ type: OverlayContainerRef }
];
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
*/
class ModalHeaderComponent {
constructor() {
this.closeEvent = new EventEmitter();
this.dialogtype = 'standard';
}
/**
* @param {?} event
* @return {?}
*/
close(event) {
this.closeEvent.emit(event);
}
}
ModalHeaderComponent.decorators = [
{ type: 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: Input }],
closeEvent: [{ type: Output }],
dialogtype: [{ type: Input }],
showCloseBtn: [{ type: Input }]
};
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
*/
class ModalFooterComponent {
}
ModalFooterComponent.decorators = [
{ type: 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: Input }]
};
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
*/
class ModalAlertComponent {
/**
* @param {?} event
* @return {?}
*/
close(event) {
this.data.onClose(event);
}
}
ModalAlertComponent.decorators = [
{ type: 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: Input }]
};
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
*/
class DialogService {
/**
* @param {?} componentFactoryResolver
* @param {?} overlayContainerRef
*/
constructor(componentFactoryResolver, overlayContainerRef) {
this.componentFactoryResolver = componentFactoryResolver;
this.overlayContainerRef = overlayContainerRef;
}
/**
* @param {?} __0
* @return {?}
*/
open({ id, width, backdropCloseable, maxHeight, showAnimate, title, content, html, data, buttons, injector, componentFactoryResolver, beforeHidden, onClose, dialogtype = 'standard', showCloseBtn = true, draggable = true, placement = 'center', offsetX, offsetY, bodyScrollable }) {
/** @type {?} */
const finalComponentFactoryResolver = componentFactoryResolver || this.componentFactoryResolver;
/** @type {?} */
const modalRef = this.overlayContainerRef.createComponent(finalComponentFactoryResolver.resolveComponentFactory(ModalComponent), injector);
assign(modalRef.instance, {
id,
width,
showAnimate,
beforeHidden,
// set backdropCloseable default value "true" when not passing it
backdropCloseable: isUndefined(backdropCloseable) ? true : backdropCloseable,
draggable,
placement,
offsetX,
offsetY,
bodyScrollable
});
/** @type {?} */
const modalContainerRef = modalRef.instance.modalContainerHost.viewContainerRef
.createComponent(finalComponentFactoryResolver.resolveComponentFactory(ModalContainerComponent), 0, injector);
assign(modalContainerRef.instance, { title, buttons, maxHeight, dialogtype, showCloseBtn });
if (typeof content === 'string') {
assign(modalContainerRef.instance, { content, html });
}
else {
this.contentRef = modalContainerRef.instance.modalContentHost.viewContainerRef
.createComponent(finalComponentFactoryResolver.resolveComponentFactory(content));
assign(this.contentRef.instance, { data }, dialogtype);
}
modalContainerRef.instance.onClose = (/**
* @return {?}
*/
() => {
modalRef.instance.hide();
});
modalRef.instance.onHidden = (/**
* @return {?}
*/
() => {
if (onClose) {
onClose();
}
setTimeout((/**
* @return {?}
*/
() => {
modalRef.hostView.destroy();
}));
});
modalRef.instance.show();
return {
modalInstance: modalRef.instance,
modalContentInstance: this.contentRef ? this.contentRef.instance : null,
};
}
}
DialogService.decorators = [
{ type: Injectable }
];
/** @nocollapse */
DialogService.ctorParameters = () => [
{ type: ComponentFactoryResolver },
{ type: OverlayContainerRef }
];
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
*/
class MovableDirective {
/**
* @param {?} el
*/
constructor(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 (const /** @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 {?}
*/
ngOnInit() {
this.element = this.moveEl || this.el.nativeElement;
// css changes
if (this._allowDrag) {
this.element.style.position = 'relative';
}
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (changes['moveEl']) {
this.element = this.moveEl || this.el.nativeElement;
}
}
/**
* @param {?} event
* @return {?}
*/
onMouseDown(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 {?}
*/
onMouseUp(event) {
this.md = false;
}
/**
* @param {?} event
* @return {?}
*/
onMouseMove(event) {
if (this.md && this._allowDrag) {
// 阻止拖动过程中文字被选中
event.stopPropagation();
event.preventDefault();
// 判断边界条件
/** @type {?} */
const modalRect = this.element.getBoundingClientRect();
/** @type {?} */
const parentRect = this.element.parentNode.getBoundingClientRect();
// 当前偏移量
/** @type {?} */
let currentTop = event.clientY - this.topStart;
/** @type {?} */
let currentLeft = event.clientX - this.leftStart;
// 计算上下距离，按照parentNode的位置计算偏移量，后续parentNode存在偏移量，需要考虑偏移量
/** @type {?} */
const maxTop = window.innerHeight - parentRect.top - modalRect.height;
currentTop = ((parentRect.top + currentTop) <= 0 && -parentRect.top) || ((maxTop - currentTop <= 0) && maxTop) || currentTop;
/** @type {?} */
const 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 {?}
*/
onTouchStart(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 {?}
*/
onTouchEnd() {
this.md = false;
}
/**
* @param {?} event
* @return {?}
*/
onTouchMove(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();
}
/**
* @param {?} value
* @return {?}
*/
set allowDrag(value) {
this._allowDrag = value;
if (this._allowDrag) {
this.handle.style.cursor = 'move';
}
}
}
MovableDirective.decorators = [
{ type: Directive, args: [{
selector: '[dMovable]'
},] }
];
/** @nocollapse */
MovableDirective.ctorParameters = () => [
{ type: ElementRef }
];
MovableDirective.propDecorators = {
handle: [{ type: Input }],
moveEl: [{ type: Input }],
onMouseDown: [{ type: HostListener, args: ['mousedown', ['$event'],] }],
onMouseUp: [{ type: HostListener, args: ['document:mouseup', ['$event'],] }],
onMouseMove: [{ type: HostListener, args: ['document:mousemove', ['$event'],] }],
onTouchStart: [{ type: HostListener, args: ['touchstart', ['$event'],] }],
onTouchEnd: [{ type: HostListener, args: ['document:touchend',] }],
onTouchMove: [{ type: HostListener, args: ['document:touchmove', ['$event'],] }],
allowDrag: [{ type: Input, args: ['dMovable',] }]
};
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
*/
class ModalModule {
}
ModalModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
OverlayContainerModule,
ButtonModule
],
declarations: [
ModalComponent,
ModalContainerComponent,
ModalContainerDirective,
ModalContentDirective,
ModalHeaderComponent,
ModalFooterComponent,
ModalAlertComponent,
MovableDirective
],
exports: [
ModalComponent,
ModalContainerComponent,
ModalHeaderComponent,
ModalFooterComponent,
ModalAlertComponent,
MovableDirective
],
providers: [
ModalService,
DialogService,
DocumentRef,
],
entryComponents: [
ModalComponent,
ModalContainerComponent,
ModalAlertComponent,
]
},] }
];
/**
* @fileoverview added by tsickle
* Generated from: modal.types.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @record
*/
function IModalOptions() { }
if (false) {
/** @type {?|undefined} */
IModalOptions.prototype.id;
/** @type {?} */
IModalOptions.prototype.component;
/** @type {?|undefined} */
IModalOptions.prototype.width;
/** @type {?|undefined} */
IModalOptions.prototype.showAnimate;
/** @type {?|undefined} */
IModalOptions.prototype.data;
/** @type {?|undefined} */
IModalOptions.prototype.handler;
/** @type {?|undefined} */
IModalOptions.prototype.backdropCloseable;
/** @type {?|undefined} */
IModalOptions.prototype.componentFactoryResolver;
/** @type {?|undefined} */
IModalOptions.prototype.injector;
/** @type {?|undefined} */
IModalOptions.prototype.onClose;
/** @type {?|undefined} */
IModalOptions.prototype.beforeHidden;
/** @type {?|undefined} */
IModalOptions.prototype.placement;
/** @type {?|undefined} */
IModalOptions.prototype.offsetX;
/** @type {?|undefined} */
IModalOptions.prototype.offsetY;
/** @type {?|undefined} */
IModalOptions.prototype.bodyScrollable;
}
/**
* @record
*/
function IDialogOptions() { }
if (false) {
/** @type {?|undefined} */
IDialogOptions.prototype.id;
/** @type {?} */
IDialogOptions.prototype.title;
/** @type {?} */
IDialogOptions.prototype.content;
/** @type {?|undefined} */
IDialogOptions.prototype.html;
/** @type {?} */
IDialogOptions.prototype.buttons;
/** @type {?|undefined} */
IDialogOptions.prototype.width;
/** @type {?|undefined} */
IDialogOptions.prototype.backdropCloseable;
/** @type {?|undefined} */
IDialogOptions.prototype.maxHeight;
/** @type {?|undefined} */
IDialogOptions.prototype.showAnimate;
/** @type {?|undefined} */
IDialogOptions.prototype.data;
/** @type {?|undefined} */
IDialogOptions.prototype.componentFactoryResolver;
/** @type {?|undefined} */
IDialogOptions.prototype.injector;
/** @type {?|undefined} */
IDialogOptions.prototype.onClose;
/** @type {?|undefined} */
IDialogOptions.prototype.beforeHidden;
/** @type {?|undefined} */
IDialogOptions.prototype.dialogtype;
/** @type {?|undefined} */
IDialogOptions.prototype.draggable;
/** @type {?|undefined} */
IDialogOptions.prototype.showCloseBtn;
/** @type {?|undefined} */
IDialogOptions.prototype.placement;
/** @type {?|undefined} */
IDialogOptions.prototype.offsetX;
/** @type {?|undefined} */
IDialogOptions.prototype.offsetY;
/** @type {?|undefined} */
IDialogOptions.prototype.bodyScrollable;
}
/**
* @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: ng-devui-modal.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { DialogService, ModalAlertComponent, ModalComponent, ModalContainerComponent, ModalContainerDirective, ModalContentDirective, ModalFooterComponent, ModalHeaderComponent, ModalModule, ModalService, MovableDirective };
//# sourceMappingURL=ng-devui-modal.js.map