ng-devui
Version:
DevUI components based on Angular
429 lines (425 loc) • 77.5 kB
JavaScript
import * as i4 from '@angular/cdk/scrolling';
import { ScrollingModule } from '@angular/cdk/scrolling';
import * as i1 from '@angular/common';
import { DOCUMENT, CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Directive, Input, HostListener, Component, Inject, ViewChild, EventEmitter, Output, Injectable, NgModule } from '@angular/core';
import * as i2 from 'ng-devui/button';
import { ButtonModule } from 'ng-devui/button';
import * as i3 from 'ng-devui/icon';
import { IconModule } from 'ng-devui/icon';
import * as i1$3 from 'ng-devui/overlay-container';
import { OverlayContainerModule } from 'ng-devui/overlay-container';
import { DocumentRef } from 'ng-devui/window-ref';
import * as i2$1 from 'ng-devui/utils';
import { backdropFadeInOut, wipeInOutAnimation } from 'ng-devui/utils';
import { isUndefined, assign } from 'lodash-es';
import * as i1$2 from '@angular/platform-browser';
import { Subscription, fromEvent } from 'rxjs';
import * as i1$1 from 'ng-devui/i18n';
class ModalContentDirective {
constructor(viewContainerRef) {
this.viewContainerRef = viewContainerRef;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalContentDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ModalContentDirective, selector: "[dModalContentHost]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalContentDirective, decorators: [{
type: Directive,
args: [{
selector: '[dModalContentHost]',
}]
}], ctorParameters: () => [{ type: i0.ViewContainerRef }] });
class ModalContainerDirective {
constructor(viewContainerRef) {
this.viewContainerRef = viewContainerRef;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalContainerDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ModalContainerDirective, selector: "[dModalContainerHost]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalContainerDirective, decorators: [{
type: Directive,
args: [{
selector: '[dModalContainerHost]',
}]
}], ctorParameters: () => [{ type: i0.ViewContainerRef }] });
class MovableDirective {
constructor(el) {
this.el = el;
this.topStart = 0;
this.leftStart = 0;
this._allowDrag = false;
this.checkHandleTarget = 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 (Object.prototype.hasOwnProperty.call(element.children, 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;
};
}
ngOnInit() {
this.element = this.moveEl || this.el.nativeElement;
// css changes
if (this._allowDrag) {
this.element.style.position = 'relative';
}
}
ngOnChanges(changes) {
const { moveEl, handle } = changes;
if (moveEl) {
this.element = this.moveEl || this.el.nativeElement;
}
if (handle) {
this.allowDrag = this._allowDrag;
}
}
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', '');
}
onMouseUp(event) {
this.md = false;
}
onMouseMove(event) {
if (typeof window !== 'undefined' && this.md && this._allowDrag) {
// 阻止拖动过程中文字被选中
event.stopPropagation();
event.preventDefault();
// 判断边界条件
const modalRect = this.element.getBoundingClientRect();
const parentRect = this.element.parentNode.getBoundingClientRect();
const [translateX, translateY] = this.element.style.transform.match(/\d+/g)?.map((item) => Number(item)) || [0, 0];
// 当前偏移量
let currentTop = event.clientY - this.topStart;
let currentLeft = event.clientX - this.leftStart;
// 计算上下距离，按照parentNode的位置计算偏移量，后续parentNode存在偏移量，需要考虑偏移量
const maxTop = window.innerHeight - parentRect.top - modalRect.height;
currentTop =
(parentRect.top + currentTop + translateY <= 0 && -parentRect.top - translateY) ||
(maxTop - currentTop - translateY <= 0 && maxTop - translateY) ||
currentTop;
const halfWidth = (window.innerWidth - modalRect.width) / 2;
// 计算左右距离，默认居中，后续parentNode存在偏移量，需要考虑偏移量
currentLeft =
(currentLeft + halfWidth + translateX <= 0 && -halfWidth - translateX) ||
(halfWidth - currentLeft - translateX <= 0 && halfWidth - translateX) ||
currentLeft;
this.element.style.top = currentTop + 'px';
this.element.style.left = currentLeft + 'px';
}
}
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();
}
onTouchEnd() {
this.md = false;
}
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();
}
set allowDrag(value) {
this._allowDrag = value;
if (this._allowDrag && this.handle) {
this.handle.style.cursor = 'move';
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MovableDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MovableDirective, selector: "[dMovable]", inputs: { handle: "handle", moveEl: "moveEl", allowDrag: ["dMovable", "allowDrag"] }, host: { listeners: { "mousedown": "onMouseDown($event)", "document:mouseup": "onMouseUp($event)", "document:mousemove": "onMouseMove($event)", "touchstart": "onTouchStart($event)", "document:touchend": "onTouchEnd()", "document:touchmove": "onTouchMove($event)" } }, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MovableDirective, decorators: [{
type: Directive,
args: [{
selector: '[dMovable]',
}]
}], ctorParameters: () => [{ type: i0.ElementRef }], 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']
}] } });
class ModalComponent {
constructor(elementRef, renderer, doc) {
this.elementRef = elementRef;
this.renderer = renderer;
this.doc = doc;
this.showAnimation = true;
this.placement = 'center';
this.bodyScrollable = true; // 打开弹窗body是否可滚动
this.animateState = '';
this.ignoreBackDropClick = false;
this.pressEscToClose = new Subscription();
this.maximized = false;
this.onModalClick = ($event) => {
// 一定要document.contains($event.target)，因为$event.target可能已经不在document里了，这个时候就不能进hide了,使用document.body兼容IE
if (this.backdropCloseable &&
!this.ignoreBackDropClick &&
!this.dialogElement.nativeElement.contains($event.target) &&
this.document.body.contains($event.target)) {
this.hide();
}
this.ignoreBackDropClick = false;
};
this.modalMouseDown = ($event) => {
this.mouseDwonEl = $event.target;
};
this.modalMouseUp = ($event) => {
if ($event.target !== this.mouseDwonEl) {
this.ignoreBackDropClick = true;
}
};
this.backdropCloseable = isUndefined(this.backdropCloseable) ? true : this.backdropCloseable;
this.document = this.doc;
}
ngOnInit() {
if (this.escapable) {
this.pressEscToClose.add(fromEvent(window, 'keydown').subscribe((event) => {
if (event.keyCode === 27) {
this.hide();
}
}));
}
const handle = this.elementRef.nativeElement.querySelector('#d-modal-header');
if (handle) {
this.draggableHandleEl = handle;
}
this._oldWidth = this.width;
}
ngOnDestroy() {
if (this.pressEscToClose) {
this.pressEscToClose.unsubscribe();
this.pressEscToClose = null;
}
}
// Will overwrite this method in modal service
onHidden() { }
updateButtonOptions(buttonOptions) { }
canHideModel() {
let hiddenResult = Promise.resolve(true);
if (this.beforeHidden) {
const result = this.beforeHidden();
if (typeof result !== 'undefined') {
if (result.then) {
hiddenResult = result;
}
else if (result.subscribe) {
hiddenResult = result.toPromise();
}
else {
hiddenResult = Promise.resolve(result);
}
}
}
return hiddenResult;
}
maximize() {
this.maximized = !this.maximized;
if (this.maximized) {
this.width = '100vw';
this.renderer.setStyle(this.document.body, 'overflow', 'hidden');
}
else {
this.width = this._oldWidth;
this.renderer.setStyle(this.document.body, 'overflow', 'auto');
}
}
onAnimationEnd($event) {
if ($event.fromState !== 'void' && this.animateState === 'void') {
this.onHidden();
}
}
show() {
this.documentOverFlow = this.document.documentElement.scrollHeight > this.document.documentElement.clientHeight;
if (this.documentOverFlow) {
this.scrollTop = this.document.documentElement.scrollTop || this.document.body.scrollTop;
this.scrollLeft = this.document.documentElement.scrollLeft || this.document.body.scrollLeft;
this.renderer.addClass(this.document.body, 'devui-body-scrollblock');
this.renderer.setStyle(this.document.body, 'top', `-${this.scrollTop}px`);
this.renderer.setStyle(this.document.body, 'left', `-${this.scrollLeft}px`);
}
this.bodyScrollBlock(true);
this.dialogElement.nativeElement.focus();
if (this.showAnimation) {
this.animateState = 'in';
}
}
hide() {
this.canHideModel().then((canHide) => {
if (!canHide) {
return;
}
this.bodyScrollBlock(false);
this.animateState = 'void';
});
}
bodyScrollBlock(toggle) {
if (this.bodyScrollable || !this.documentOverFlow) {
return;
}
if (toggle) {
this.renderer.addClass(this.document.documentElement, 'devui-body-scrollblock-modal');
this.renderer.setStyle(this.document.documentElement, 'top', `-${this.scrollTop}px`);
this.renderer.setStyle(this.document.documentElement, 'left', `-${this.scrollLeft}px`);
}
else {
this.renderer.removeClass(this.document.documentElement, 'devui-body-scrollblock-modal');
this.renderer.removeStyle(this.document.documentElement, 'top');
this.renderer.removeStyle(this.document.documentElement, 'left');
this.document.documentElement.scrollLeft = this.scrollLeft;
this.document.documentElement.scrollTop = this.scrollTop;
}
}
resolveTransformTranslate() {
let autoOffsetYByPlacement;
switch (this.placement) {
case 'top':
autoOffsetYByPlacement = '40px';
break;
case 'bottom':
autoOffsetYByPlacement = '-40px';
break;
case 'center':
default:
autoOffsetYByPlacement = 0;
break;
}
if (this.placement !== 'unset') {
const offsetX = this.offsetX ? this.offsetX : '0';
const offsetY = this.offsetY ? this.offsetY : autoOffsetYByPlacement;
return 'translate(' + offsetX + ',' + offsetY + ')';
}
else {
return 'unset';
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ModalComponent, selector: "d-modal", inputs: { id: "id", showAnimation: "showAnimation", width: "width", zIndex: "zIndex", backDropZIndex: "backDropZIndex", backdropCloseable: "backdropCloseable", beforeHidden: "beforeHidden", draggable: "draggable", placement: "placement", offsetX: "offsetX", offsetY: "offsetY", bodyScrollable: "bodyScrollable", escapable: "escapable", cssClass: "cssClass" }, viewQueries: [{ propertyName: "modalContainerHost", first: true, predicate: ModalContainerDirective, descendants: true, static: true }, { propertyName: "dialogElement", first: true, predicate: ["dialog"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"modal-backdrop\" [ngStyle]=\"{ 'z-index': backDropZIndex }\" [@backdropAnimation]=\"animateState\"></div>\n<div\n class=\"modal in\"\n [ngClass]=\"cssClass\"\n [ngStyle]=\"{ 'z-index': zIndex }\"\n [attr.id]=\"id\"\n (mousedown)=\"modalMouseDown($event)\"\n (mouseup)=\"modalMouseUp($event)\"\n (click)=\"onModalClick($event)\"\n>\n <div\n class=\"modal-dialog\"\n [ngClass]=\"{\n 'place-at-top': placement === 'top',\n 'place-at-bottom': placement === 'bottom',\n 'place-at-center': placement === 'center' || placement === 'unset'\n }\"\n [ngStyle]=\"{ width: width }\"\n [@wipeInOutAnimation]=\"animateState\"\n (@wipeInOutAnimation.done)=\"onAnimationEnd($event)\"\n [@.disabled]=\"!showAnimation\"\n tabindex=\"1\"\n #dialog\n >\n <div\n class=\"modal-content\"\n [class.maximize]=\"maximized\"\n [dMovable]=\"draggable\"\n [handle]=\"draggableHandleEl\"\n [ngStyle]=\"{ transform: resolveTransformTranslate() }\"\n >\n <ng-template dModalContainerHost></ng-template>\n <ng-container *ngIf=\"contentTemplate\">\n <ng-template [ngTemplateOutlet]=\"contentTemplate\" [ngTemplateOutletContext]=\"{ modalInstance: this }\"></ng-template>\n </ng-container>\n </div>\n </div>\n</div>\n", styles: [".devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.modal{position:fixed;top:0;right:0;bottom:0!important;left:0;z-index:var(--devui-z-index-modal, 1050);outline:0;overflow-y:auto;display:block;display:-ms-flexbox;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.devui-body-scrollblock .modal{overflow-x:hidden;overflow-y:auto}.modal-dialog{position:relative;width:auto;margin:0 auto}.modal-dialog .maximize{-webkit-transition:none;transition:none;transform:none;width:100vw;top:0;left:0;max-height:100vh;height:100vh}.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!important;left:0;z-index:calc(var(--devui-z-index-modal, 1050) - 1);background-color:var(--devui-feedback-overlay-backdrop, rgba(0, 0, 0, .3))}.modal-maximized{-webkit-transition:none;transition:none;transform:none;width:100vw!important;top:0!important;left:0!important;max-height:100vh;height:100vh}:host ::ng-deep .modal-content{position:relative;border-radius:var(--devui-border-radius-card, 6px);border:none;background-color:var(--devui-fullscreen-overlay-bg, #ffffff);background-clip:padding-box;outline:0;box-shadow:var(--devui-shadow-length-fullscreen-overlay, 0 16px 48px 0) var(--devui-shadow, rgba(0, 0, 0, .16))}:host ::ng-deep .modal-content .modal-body{padding:20px;color:var(--devui-text-weak, #333333)}:host ::ng-deep .modal-content .modal-footer{border-top:none;text-align:center;padding:0 20px 20px}:host ::ng-deep .modal-content .modal-footer button{margin:0 4px;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:var(--devui-font-size-card-title, 14px);line-height:1.42857143;border-radius:var(--devui-border-radius, 2px);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:focus{outline:none}::ng-deep .devui-body-scrollblock-modal{width:100%;position:fixed;overflow-y:scroll}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ModalContainerDirective, selector: "[dModalContainerHost]" }, { kind: "directive", type: MovableDirective, selector: "[dMovable]", inputs: ["handle", "moveEl", "dMovable"] }], animations: [backdropFadeInOut, wipeInOutAnimation] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalComponent, decorators: [{
type: Component,
args: [{ selector: 'd-modal', animations: [backdropFadeInOut, wipeInOutAnimation], preserveWhitespaces: false, template: "<div class=\"modal-backdrop\" [ngStyle]=\"{ 'z-index': backDropZIndex }\" [@backdropAnimation]=\"animateState\"></div>\n<div\n class=\"modal in\"\n [ngClass]=\"cssClass\"\n [ngStyle]=\"{ 'z-index': zIndex }\"\n [attr.id]=\"id\"\n (mousedown)=\"modalMouseDown($event)\"\n (mouseup)=\"modalMouseUp($event)\"\n (click)=\"onModalClick($event)\"\n>\n <div\n class=\"modal-dialog\"\n [ngClass]=\"{\n 'place-at-top': placement === 'top',\n 'place-at-bottom': placement === 'bottom',\n 'place-at-center': placement === 'center' || placement === 'unset'\n }\"\n [ngStyle]=\"{ width: width }\"\n [@wipeInOutAnimation]=\"animateState\"\n (@wipeInOutAnimation.done)=\"onAnimationEnd($event)\"\n [@.disabled]=\"!showAnimation\"\n tabindex=\"1\"\n #dialog\n >\n <div\n class=\"modal-content\"\n [class.maximize]=\"maximized\"\n [dMovable]=\"draggable\"\n [handle]=\"draggableHandleEl\"\n [ngStyle]=\"{ transform: resolveTransformTranslate() }\"\n >\n <ng-template dModalContainerHost></ng-template>\n <ng-container *ngIf=\"contentTemplate\">\n <ng-template [ngTemplateOutlet]=\"contentTemplate\" [ngTemplateOutletContext]=\"{ modalInstance: this }\"></ng-template>\n </ng-container>\n </div>\n </div>\n</div>\n", styles: [".devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.modal{position:fixed;top:0;right:0;bottom:0!important;left:0;z-index:var(--devui-z-index-modal, 1050);outline:0;overflow-y:auto;display:block;display:-ms-flexbox;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.devui-body-scrollblock .modal{overflow-x:hidden;overflow-y:auto}.modal-dialog{position:relative;width:auto;margin:0 auto}.modal-dialog .maximize{-webkit-transition:none;transition:none;transform:none;width:100vw;top:0;left:0;max-height:100vh;height:100vh}.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!important;left:0;z-index:calc(var(--devui-z-index-modal, 1050) - 1);background-color:var(--devui-feedback-overlay-backdrop, rgba(0, 0, 0, .3))}.modal-maximized{-webkit-transition:none;transition:none;transform:none;width:100vw!important;top:0!important;left:0!important;max-height:100vh;height:100vh}:host ::ng-deep .modal-content{position:relative;border-radius:var(--devui-border-radius-card, 6px);border:none;background-color:var(--devui-fullscreen-overlay-bg, #ffffff);background-clip:padding-box;outline:0;box-shadow:var(--devui-shadow-length-fullscreen-overlay, 0 16px 48px 0) var(--devui-shadow, rgba(0, 0, 0, .16))}:host ::ng-deep .modal-content .modal-body{padding:20px;color:var(--devui-text-weak, #333333)}:host ::ng-deep .modal-content .modal-footer{border-top:none;text-align:center;padding:0 20px 20px}:host ::ng-deep .modal-content .modal-footer button{margin:0 4px;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:var(--devui-font-size-card-title, 14px);line-height:1.42857143;border-radius:var(--devui-border-radius, 2px);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:focus{outline:none}::ng-deep .devui-body-scrollblock-modal{width:100%;position:fixed;overflow-y:scroll}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }], propDecorators: { id: [{
type: Input
}], showAnimation: [{
type: Input
}], width: [{
type: Input
}], zIndex: [{
type: Input
}], backDropZIndex: [{
type: Input
}], backdropCloseable: [{
type: Input
}], beforeHidden: [{
type: Input
}], draggable: [{
type: Input
}], placement: [{
type: Input
}], offsetX: [{
type: Input
}], offsetY: [{
type: Input
}], bodyScrollable: [{
type: Input
}], escapable: [{
type: Input
}], cssClass: [{
type: Input
}], modalContainerHost: [{
type: ViewChild,
args: [ModalContainerDirective, { static: true }]
}], dialogElement: [{
type: ViewChild,
args: ['dialog', { static: true }]
}] } });
class ModalHeaderComponent {
get checkDialogType() {
return this.dialogtype?.toLowerCase() || 'standard';
}
constructor(ref, i18n) {
this.ref = ref;
this.i18n = i18n;
this.dialogtype = 'standard';
this.closeEvent = new EventEmitter();
this.showMaximizeBtn = false;
this.maximizeEvent = new EventEmitter();
this.maximized = false;
}
ngOnInit() {
this.i18nText = this.i18n.getI18nText().modal;
this.i18nSubscription = this.i18n.langChange().subscribe((data) => {
this.i18nText = data.modal;
this.ref.markForCheck();
});
}
close(event) {
this.closeEvent.emit(event);
}
ngOnDestroy() {
if (this.i18nSubscription) {
this.i18nSubscription.unsubscribe();
}
}
maximize() {
this.maximized = !this.maximized;
this.maximizeEvent.emit(this.maximized);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalHeaderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.I18nService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ModalHeaderComponent, selector: "d-modal-header", inputs: { title: "title", dialogtype: "dialogtype", showCloseBtn: "showCloseBtn", showMaximizeBtn: "showMaximizeBtn" }, outputs: { closeEvent: "closeEvent", maximizeEvent: "maximizeEvent" }, ngImport: i0, template: "<div class=\"modal-header\" [ngClass]=\"{ 'no-title': !title && title !== '' && checkDialogType === 'standard' }\">\n <div class=\"standard-title\">\n <div *ngIf=\"checkDialogType === 'warning'\" class=\"header-alert-icon\">\n <svg\n class=\"devui-icon devui-icon-warning\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <polygon\n points=\"7.5 1.74501946 1.39184847 13.5954649 7.08947368 14.2207621 13.9973698 13.5954649 10.9383683 5.61273879 8.40084114 1.27624313\"\n ></polygon>\n <path\n d=\"M8.51325441,0.127397589 C8.70423071,0.228333932 8.8605922,0.383286648 8.96244623,0.57254229 L15.8714442,13.4101975 C16.1549662,13.9370117 15.9538562,14.5918482 15.4222523,14.8728158 C15.2642579,14.9563203 15.0879506,15 14.9088903,15 L1.09089441,15 C0.488410063,15 0,14.5159904 0,13.9189343 C0,13.7414873 0.0440768395,13.5667684 0.128340519,13.4101975 L7.03733844,0.57254229 C7.32086049,0.0457280838 7.98165058,-0.153569987 8.51325441,0.127397589 Z M8.87894737,11.2105263 L7.08947368,11.2105263 L7.08947368,13 L8.87894737,13 L8.87894737,11.2105263 Z M8.96842105,4.5 L7,4.5 L7.08947368,9.86842105 L8.87894737,9.86842105 L8.96842105,4.5 Z\"\n ></path>\n </g>\n </svg>\n </div>\n <div *ngIf=\"checkDialogType === 'failed'\" class=\"header-alert-icon\">\n <svg\n class=\"devui-icon devui-icon-error\"\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <circle cx=\"8\" cy=\"8\" r=\"7\"></circle>\n <path\n d=\"M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z M9,12.6 L7,12.6 L7,10.6 L9,10.6 L9,12.6 Z M9,9.1 L7,9.1 L6.9,3.1 L9.1,3.1 L9,9.1 Z\"\n fill-rule=\"nonzero\"\n ></path>\n </g>\n </svg>\n </div>\n <div *ngIf=\"checkDialogType === 'sucess' || checkDialogType === 'success'\" class=\"header-alert-icon\">\n <svg\n class=\"devui-icon devui-icon-success\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <circle cx=\"8\" cy=\"8\" r=\"7\"></circle>\n <path d=\"M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z\" fill-rule=\"nonzero\"></path>\n <polygon\n stroke-width=\"0.4\"\n fill-rule=\"nonzero\"\n points=\"8.16 10.48 7.32 11.32 6.48 10.48 6.48 10.48 3.6 7.68 4.44 6.84 7.28 9.68 11.52 5.44 12.36 6.28\"\n ></polygon>\n </g>\n </svg>\n </div>\n <div *ngIf=\"checkDialogType === 'info'\" class=\"header-alert-icon\">\n <svg\n class=\"devui-icon devui-icon-info\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <circle cx=\"8\" cy=\"8\" r=\"7\"></circle>\n <g stroke-width=\"1\">\n <path\n d=\"M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z M9,5 L7,5 L7,3 L9,3 L9,5 Z M9,12.6 L7,12.6 L7,6.6 L9,6.6 L9,12.6 Z\"\n ></path>\n </g>\n </g>\n </svg>\n </div>\n <span *ngIf=\"title\" [title]=\"title\" class=\"title-text\">{{ title }}</span>\n <ng-container *ngIf=\"!title\">\n <span *ngIf=\"checkDialogType === 'warning'\" class=\"title-text\"> {{ i18nText?.warning }}</span>\n <span *ngIf=\"checkDialogType === 'failed'\" class=\"title-text\">{{ i18nText?.error }}</span>\n <span *ngIf=\"checkDialogType === 'sucess' || checkDialogType === 'success'\" class=\"title-text\">{{ i18nText?.success }}</span>\n <span *ngIf=\"checkDialogType === 'info'\" class=\"title-text\">{{ i18nText?.info }}</span>\n </ng-container>\n </div>\n <d-icon\n class=\"modal-header-maximized\"\n *ngIf=\"showMaximizeBtn\"\n [icon]=\"maximized ? minTemplate : maxTemplate\"\n [operable]=\"true\"\n (click)=\"maximize()\"\n ></d-icon>\n <ng-template #maxTemplate>\n <svg width=\"16px\" height=\"16px\" t=\"1624600373175\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"1179\">\n <path\n d=\"M810.666667 938.666667h-128c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666667h128c25.6 0 42.666667-17.066667 42.666666-42.666666v-128c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667v128c0 72.533333-55.466667 128-128 128zM341.333333 938.666667H213.333333c-72.533333 0-128-55.466667-128-128v-128c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667v128c0 25.6 17.066667 42.666667 42.666666 42.666666h128c25.6 0 42.666667 17.066667 42.666667 42.666667s-17.066667 42.666667-42.666667 42.666667zM896 384c-25.6 0-42.666667-17.066667-42.666667-42.666667V213.333333c0-25.6-17.066667-42.666667-42.666666-42.666666h-128c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666667h128c72.533333 0 128 55.466667 128 128v128c0 25.6-17.066667 42.666667-42.666667 42.666667zM128 384c-25.6 0-42.666667-17.066667-42.666667-42.666667V213.333333c0-72.533333 55.466667-128 128-128h128c25.6 0 42.666667 17.066667 42.666667 42.666667s-17.066667 42.666667-42.666667 42.666667H213.333333c-25.6 0-42.666667 17.066667-42.666666 42.666666v128c0 25.6-17.066667 42.666667-42.666667 42.666667z\"\n p-id=\"1180\"\n ></path>\n </svg>\n </ng-template>\n <ng-template #minTemplate>\n <svg width=\"16px\" height=\"16px\" t=\"1624607246708\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"5121\">\n <path\n d=\"M682.666667 938.666667c-25.6 0-42.666667-17.066667-42.666667-42.666667v-128c0-72.533333 55.466667-128 128-128h128c25.6 0 42.666667 17.066667 42.666667 42.666667s-17.066667 42.666667-42.666667 42.666666h-128c-25.6 0-42.666667 17.066667-42.666667 42.666667v128c0 25.6-17.066667 42.666667-42.666666 42.666667z m-341.333334 0c-25.6 0-42.666667-17.066667-42.666666-42.666667v-128c0-25.6-17.066667-42.666667-42.666667-42.666667H128c-25.6 0-42.666667-17.066667-42.666667-42.666666s17.066667-42.666667 42.666667-42.666667h128c72.533333 0 128 55.466667 128 128v128c0 25.6-17.066667 42.666667-42.666667 42.666667zM896 384h-128c-72.533333 0-128-55.466667-128-128V128c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666666 42.666667v128c0 25.6 17.066667 42.666667 42.666667 42.666667h128c25.6 0 42.666667 17.066667 42.666667 42.666666s-17.066667 42.666667-42.666667 42.666667zM256 384H128c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666666h128c25.6 0 42.666667-17.066667 42.666667-42.666667V128c0-25.6 17.066667-42.666667 42.666666-42.666667s42.666667 17.066667 42.666667 42.666667v128c0 72.533333-55.466667 128-128 128z\"\n p-id=\"5122\"\n ></path>\n </svg>\n </ng-template>\n <d-icon\n class=\"modal-header-close\"\n *ngIf=\"showCloseBtn\"\n [icon]=\"closeTemplate\"\n [operable]=\"true\"\n (mousedown)=\"$event.stopPropagation()\"\n (click)=\"close($event)\"\n >\n </d-icon>\n <ng-template #closeTemplate>\n <svg\n width=\"18px\"\n height=\"18px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g id=\"ipd_close1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g transform=\"translate(3.000000, 3.000000)\" fill=\"#71757F\" fill-rule=\"nonzero\" id=\"\u8DEF\u5F84\">\n <path\n d=\"M-0.353553391,-0.353553391 C-0.179987039,-0.527119742 0.0894373624,-0.546404893 0.284305503,-0.411408841 L0.353553391,-0.353553391 L10.3535534,9.64644661 C10.5488155,9.84170876 10.5488155,10.1582912 10.3535534,10.3535534 C10.179987,10.5271197 9.91056264,10.5464049 9.7156945,10.4114088 L9.64644661,10.3535534 L-0.353553391,0.353553391 C-0.548815536,0.158291245 -0.548815536,-0.158291245 -0.353553391,-0.353553391 Z\"\n ></path>\n <path\n d=\"M9.64644661,-0.353553391 C9.84170876,-0.548815536 10.1582912,-0.548815536 10.3535534,-0.353553391 C10.5271197,-0.179987039 10.5464049,0.0894373624 10.4114088,0.284305503 L10.3535534,0.353553391 L0.353553391,10.3535534 C0.158291245,10.5488155 -0.158291245,10.5488155 -0.353553391,10.3535534 C-0.527119742,10.179987 -0.546404893,9.91056264 -0.411408841,9.7156945 L-0.353553391,9.64644661 L9.64644661,-0.353553391 Z\"\n ></path>\n </g>\n </g>\n </svg>\n </ng-template>\n</div>\n", styles: [".devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.modal-header{padding:20px 20px 0;position:relative;border:none}.modal-header .standard-title{height:26px;line-height:26px;color:var(--devui-text, #191919);letter-spacing:0;font-size:var(--devui-font-size-modal-title, 18px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:calc(100% - 24px)}.modal-header.no-title{height:0;padding:0}.modal-header.no-title .standard-title{display:none}.header-alert-icon{display:inline-block;vertical-align:middle;margin-right:8px;width:24px;height:24px;line-height:16px;text-align:center}.header-alert-icon .devui-icon{width:24px;height:24px}.header-alert-icon .devui-icon circle,.header-alert-icon .devui-icon polygon{fill:var(--devui-light-text, #ffffff)}.header-alert-icon .devui-icon.devui-icon-success path{fill:var(--devui-success, #058358)}.header-alert-icon .devui-icon.devui-icon-warning path{fill:var(--devui-warning-line, #f4840c)}.header-alert-icon .devui-icon.devui-icon-info path{fill:var(--devui-info, #0a59f7)}.header-alert-icon .devui-icon.devui-icon-error path{fill:var(--devui-danger, #e02128)}.title-text{font-size:var(--devui-font-size-modal-title, 18px);font-weight:700;vertical-align:middle}.modal-header-close{position:absolute;right:20px;top:18px}.modal-header-maximized{position:absolute;right:56px;top:18px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.IconComponent, selector: "d-icon", inputs: ["icon", "operable", "disabled", "rotate", "color"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalHeaderComponent, decorators: [{
type: Component,
args: [{ selector: 'd-modal-header', preserveWhitespaces: false, template: "<div class=\"modal-header\" [ngClass]=\"{ 'no-title': !title && title !== '' && checkDialogType === 'standard' }\">\n <div class=\"standard-title\">\n <div *ngIf=\"checkDialogType === 'warning'\" class=\"header-alert-icon\">\n <svg\n class=\"devui-icon devui-icon-warning\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <polygon\n points=\"7.5 1.74501946 1.39184847 13.5954649 7.08947368 14.2207621 13.9973698 13.5954649 10.9383683 5.61273879 8.40084114 1.27624313\"\n ></polygon>\n <path\n d=\"M8.51325441,0.127397589 C8.70423071,0.228333932 8.8605922,0.383286648 8.96244623,0.57254229 L15.8714442,13.4101975 C16.1549662,13.9370117 15.9538562,14.5918482 15.4222523,14.8728158 C15.2642579,14.9563203 15.0879506,15 14.9088903,15 L1.09089441,15 C0.488410063,15 0,14.5159904 0,13.9189343 C0,13.7414873 0.0440768395,13.5667684 0.128340519,13.4101975 L7.03733844,0.57254229 C7.32086049,0.0457280838 7.98165058,-0.153569987 8.51325441,0.127397589 Z M8.87894737,11.2105263 L7.08947368,11.2105263 L7.08947368,13 L8.87894737,13 L8.87894737,11.2105263 Z M8.96842105,4.5 L7,4.5 L7.08947368,9.86842105 L8.87894737,9.86842105 L8.96842105,4.5 Z\"\n ></path>\n </g>\n </svg>\n </div>\n <div *ngIf=\"checkDialogType === 'failed'\" class=\"header-alert-icon\">\n <svg\n class=\"devui-icon devui-icon-error\"\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <circle cx=\"8\" cy=\"8\" r=\"7\"></circle>\n <path\n d=\"M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z M9,12.6 L7,12.6 L7,10.6 L9,10.6 L9,12.6 Z M9,9.1 L7,9.1 L6.9,3.1 L9.1,3.1 L9,9.1 Z\"\n fill-rule=\"nonzero\"\n ></path>\n </g>\n </svg>\n </div>\n <div *ngIf=\"checkDialogType === 'sucess' || checkDialogType === 'success'\" class=\"header-alert-icon\">\n <svg\n class=\"devui-icon devui-icon-success\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <circle cx=\"8\" cy=\"8\" r=\"7\"></circle>\n <path d=\"M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z\" fill-rule=\"nonzero\"></path>\n <polygon\n stroke-width=\"0.4\"\n fill-rule=\"nonzero\"\n points=\"8.16 10.48 7.32 11.32 6.48 10.48 6.48 10.48 3.6 7.68 4.44 6.84 7.28 9.68 11.52 5.44 12.36 6.28\"\n ></polygon>\n </g>\n </svg>\n </div>\n <div *ngIf=\"checkDialogType === 'info'\" class=\"header-alert-icon\">\n <svg\n class=\"devui-icon devui-icon-info\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <circle cx=\"8\" cy=\"8\" r=\"7\"></circle>\n <g stroke-width=\"1\">\n <path\n d=\"M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z M9,5 L7,5 L7,3 L9,3 L9,5 Z M9,12.6 L7,12.6 L7,6.6 L9,6.6 L9,12.6 Z\"\n ></path>\n </g>\n </g>\n </svg>\n </div>\n <span *ngIf=\"title\" [title]=\"title\" class=\"title-text\">{{ title }}</span>\n <ng-container *ngIf=\"!title\">\n <span *ngIf=\"checkDialogType === 'warning'\" class=\"title-text\"> {{ i18nText?.warning }}</span>\n <span *ngIf=\"checkDialogType === 'failed'\" class=\"title-text\">{{ i18nText?.error }}</span>\n <span *ngIf=\"checkDialogType === 'sucess' || checkDialogType === 'success'\" class=\"title-text\">{{ i18nText?.success }}</span>\n <span *ngIf=\"checkDialogType === 'info'\" class=\"title-text\">{{ i18nText?.info }}</span>\n </ng-container>\n </div>\n <d-icon\n class=\"modal-header-maximized\"\n *ngIf=\"showMaximizeBtn\"\n [icon]=\"maximized ? minTemplate : maxTemplate\"\n [operable]=\"true\"\n (click)=\"maximize()\"\n ></d-icon>\n <ng-template #maxTemplate>\n <svg width=\"16px\" height=\"16px\" t=\"1624600373175\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"1179\">\n <path\n d=\"M810.666667 938.666667h-128c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666667h128c25.6 0 42.666667-17.066667 42.666666-42.666666v-128c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667v128c0 72.533333-55.466667 128-128 128zM341.333333 938.666667H213.333333c-72.533333 0-128-55.466667-128-128v-128c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667v128c0 25.6 17.066667 42.666667 42.666666 42.666666h128c25.6 0 42.666667 17.066667 42.666667 42.666667s-17.066667 42.666667-42.666667 42.666667zM896 384c-25.6 0-42.666667-17.066667-42.666667-42.666667V213.333333c0-25.6-17.066667-42.666667-42.666666-42.666666h-128c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666667h128c72.533333 0 128 55.466667 128 128v128c0 25.6-17.066667 42.666667-42.666667 42.666667zM128 384c-25.6 0-42.666667-17.066667-42.666667-42.666667V213.333333c0-72.533333 55.466667-128 128-128h128c25.6 0 42.666667 17.066667 42.666667 42.666667s-17.066667 42.666667-42.666667 42.666667H213.333333c-25.6 0-42.666667 17.066667-42.666666 42.666666v128c0 25.6-17.066667 42.666667-42.666667 42.666667z\"\n p-id=\"1180\"\n ></path>\n </svg>\n </ng-template>\n <ng-template #minTemplate>\n <svg width=\"16px\" height=\"16px\" t=\"1624607246708\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"5121\">\n <path\n d=\"M682.666667 938.666667c-25.6 0-42.666667-17.066667-42.666667-42.666667v-128c0-72.533333 55.466667-128 128-128h128c25.6 0 42.666667 17.066667 42.666667 42.666667s-17.066667 42.666667-42.666667 42.666666h-128c-25.6 0-42.666667 17.066667-42.666667 42.666667v128c0 25.6-17.066667 42.666667-42.666666 42.666667z m-341.333334 0c-25.6 0-42.666667-17.066667-42.666666-42.666667v-128c0-25.6-17.066667-42.666667-42.666667-42.666667H128c-25.6 0-42.666667-17.066667-42.666667-42.666666s17.066667-42.666667 42.666667-42.666667h128c72.533333 0 128 55.466667 128 128v128c0 25.6-17.066667 42.666667-42.666667 42.666667zM896 384h-128c-72.533333 0-128-55.466667-128-128V128c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666666 42.666667v128c0 25.6 17.066667 42.666667 42.666667 42.666667h128c25.6 0 42.666667 17.066667 42.666667 42.666666s-17.066667 42.666667-42.666667 42.666667zM256 384H128c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666666h128c25.6 0 42.666667-17.066667 42.666667-42.666667V128c0-25.6 17.066667-42.666667 42.666666-42.666667s42.666667 17.066667 42.666667 42.666667v128c0 72.533333-55.466667 128-128 128z\"\n p-id=\"5122\"\n ></path>\n </svg>\n </ng-template>\n <d-icon\n class=\"modal-header-close\"\n *ngIf=\"showCloseBtn\"\n [icon]=\"closeTemplate\"\n [operable]=\"true\"\n (mousedown)=\"$event.stopPropagation()\"\n (click)=\"close($event)\"\n >\n </d-icon>\n <ng-template #closeTemplate>\n <svg\n width=\"18px\"\n height=\"18px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <g id=\"ipd_close1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g transform=\"translate(3.000000, 3.000000)\" fill=\"#71757F\" fill-rule=\"nonzero\" id=\"\u8DEF\u5F84\">\n <path\n d=\"M-0.353553391,-0.353553391 C-0.179987039,-0.527119742 0.0894373624,-0.546404893 0.284305503,-0.411408841 L0.353553391,-0.353553391 L10.3535534,9.64644661 C10.5488155,9.84170876 10.5488155,10.1582912 10.3535534,10.3535534 C10.179987,10.5271197 9.91056264,10.546404