ng-devui
Version:
DevUI components based on Angular
438 lines (433 loc) • 50.6 kB
JavaScript
import * as i2 from '@angular/common';
import { DOCUMENT, CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Component, ChangeDetectionStrategy, Inject, Input, HostListener, Directive, HostBinding, NgModule } from '@angular/core';
import * as i4 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import * as i5 from 'ng-devui/input-number';
import { InputNumberModule } from 'ng-devui/input-number';
import * as i1$1 from 'ng-devui/modal';
import { ModalModule } from 'ng-devui/modal';
import * as i3 from 'ng-devui/tooltip';
import { TooltipModule } from 'ng-devui/tooltip';
import * as i6 from 'ng-devui/utils';
import { SafePipeModule } from 'ng-devui/utils';
import * as i1 from 'ng-devui/i18n';
import { merge } from 'lodash-es';
import { Subscription, fromEvent, of } from 'rxjs';
import { throttleTime, tap, delay } from 'rxjs/operators';
class TransformableElement {
get element() {
return this._element;
}
set element(ele) {
this._element = ele;
this.setElementListener();
}
constructor(element, { zoom = 1, turn = 0, translateX = 0, translateY = 0 }) {
this._mouseDown = false;
this._originTranslateX = 0;
this._originTranslateY = 0;
this.MIN_SCALE = 0.2;
this.MAX_SCALE = 2.5;
this.element = element;
this.zoom = zoom;
this.turn = turn;
this.translateX = translateX;
this.translateY = translateY;
this.setElementTransform();
}
setElementListener() {
if (typeof window === 'undefined') {
return;
}
if (this.eventSub) {
this.eventSub.unsubscribe();
}
this.eventSub = new Subscription();
this.eventSub.add(fromEvent(this._element, 'mousewheel').subscribe(($event) => this.mouseZoom($event)));
this.eventSub.add(fromEvent(window, 'mousedown').subscribe(($event) => this.mouseDown($event)));
this.eventSub.add(fromEvent(window, 'mousemove').subscribe(($event) => this.mouseMove($event)));
this.eventSub.add(fromEvent(window, 'mouseup').subscribe(($event) => this.mouseUp($event)));
}
removeElementListener() {
if (this.eventSub) {
this.eventSub.unsubscribe();
}
if (this.zoomSub) {
this.zoomSub.unsubscribe();
}
}
mouseZoom($event) {
if (typeof document === 'undefined') {
return;
}
this.zoomSub = of($event)
.pipe(throttleTime(300), tap((event) => {
const value = -event.wheelDelta || event.deltaY || event.detail;
if (value < 0) {
if (this.zoom === this.MAX_SCALE) {
this.element.style.cursor = 'not-allowed';
return;
}
this.element.style.cursor = 'zoom-in';
document.body.style.cursor = 'zoom-in';
this.zoomIn(0.2);
}
else {
if (this.zoom === this.MIN_SCALE) {
this.element.style.cursor = 'not-allowed';
return;
}
this.element.style.cursor = 'zoom-out';
document.body.style.cursor = 'zoom-out';
this.zoomOut(0.2);
}
}), delay(400))
.subscribe(() => {
this.element.style.cursor = 'grab';
document.body.style.cursor = 'default';
});
}
mouseDown($event) {
if ($event.target !== this.element) {
return;
}
this._mouseDown = true;
this._originMouseX = $event.clientX;
this._originMouseY = $event.clientY;
this._originTranslateX = this.translateX;
this._originTranslateY = this.translateY;
}
mouseMove($event) {
if (this._mouseDown && typeof document !== 'undefined') {
$event.stopPropagation();
$event.preventDefault();
this.translateX = this._originTranslateX + ($event.clientX - this._originMouseX);
this.translateY = this._originTranslateY + ($event.clientY - this._originMouseY);
this.setElementTransform();
document.body.style.cursor = 'grabbing';
this.element.style.cursor = 'grabbing';
}
}
mouseUp($event) {
if (typeof document !== 'undefined') {
this._mouseDown = false;
document.body.style.cursor = 'default';
this.element.style.cursor = 'grab';
}
}
zoomOut(step = 0.25) {
this.zoom = Math.max(this.MIN_SCALE, this.zoom - step);
this.setElementTransform();
return this.zoom === this.MIN_SCALE;
}
zoomIn(step = 0.25) {
this.zoom = Math.min(this.MAX_SCALE, this.zoom + step);
this.setElementTransform();
return this.zoom === this.MAX_SCALE;
}
rotate() {
this.turn -= 0.25;
this.setElementTransform();
}
setOriginalScale() {
this.resetTransformProperties();
this.setElementTransform();
}
setBestScale() {
this.resetTransformProperties();
this.setElementTransform();
}
resetTransformProperties() {
this.zoom = 1;
this.translateX = 0;
this.translateY = 1;
}
setElementTransform(targetParam, zoom = this.zoom, translateX = this.translateX, translateY = this.translateY, turn = this.turn) {
let target = targetParam;
if (!target) {
target = this.element;
}
target.style.transform = `translate(${translateX}px, ${translateY}px) scale(${zoom}) rotate(${turn}turn)`;
}
}
class DImagePreviewComponent {
set data(data) {
this._data = data;
this.images = data.images;
this.onClose = data.onClose;
this.targetImageIndex = this.images.indexOf(data.targetImage);
this.totalImageNum = this.images.length;
merge(this.toolbar, data.toolbar || {});
}
get data() {
return this._data;
}
get targetImageSrc() {
// 防止targetImageIndex出现-1的情况
const idx = (this.targetImageIndex >= 0 && this.targetImageIndex) || 0;
return this.images[idx].getAttribute('src');
}
constructor(elementRef, i18n, doc) {
this.elementRef = elementRef;
this.i18n = i18n;
this.doc = doc;
this.toolbar = {
zoomIn: true,
zoomOut: true,
rotate: true,
prev: true,
next: true,
index: true,
scaleBest: true,
scaleOriginal: true,
originnalImage: true,
download: true,
};
this.isOptimal = true;
this.disabledZoomIn = false;
this.disabledZoomOut = false;
this.showInput = false;
this.document = this.doc;
}
click($event) {
if ($event.target.classList.contains('devui-image-preview-wrapper')) {
this.onClose();
}
}
touchstart($event) {
$event.clientX = $event.changedTouches[0].clientX;
$event.clientY = $event.changedTouches[0].clientY;
this.transformableImageElementRef.mouseDown($event);
}
touchmove($event) {
$event.clientX = $event.changedTouches[0].clientX;
$event.clientY = $event.changedTouches[0].clientY;
this.transformableImageElementRef.mouseMove($event);
}
touchend($event) {
this.transformableImageElementRef.mouseDown($event);
}
arrowLeft() {
this.pre();
}
arrowRight() {
this.next();
}
ngOnInit() {
this.addFullScreenStyle();
this.transformableImageElementRef = new TransformableElement(this.getImgElement(), {});
this.setI18nText();
}
setI18nText() {
this.i18nText = this.i18n.getI18nText().imagePreview;
this.i18nSubscription = this.i18n.langChange().subscribe((data) => {
this.i18nText = data.imagePreview;
});
}
ngOnDestroy() {
this.removeFullScreenStyle();
this.transformableImageElementRef.removeElementListener();
if (this.i18nSubscription) {
this.i18nSubscription.unsubscribe();
}
}
pre() {
this.targetImageIndex = (this.targetImageIndex - 1 + this.totalImageNum) % this.totalImageNum;
}
next() {
this.targetImageIndex = (this.targetImageIndex + 1) % this.totalImageNum;
}
zoomIn() {
this.disabledZoomOut = false;
this.disabledZoomIn = this.transformableImageElementRef.zoomIn();
}
zoomOut() {
this.disabledZoomIn = false;
this.disabledZoomOut = this.transformableImageElementRef.zoomOut();
}
rotate() {
this.transformableImageElementRef.rotate();
}
setScaleBest() {
this.transformableImageElementRef.setBestScale();
this.isOptimal = true;
}
setScaleOriginal() {
this.transformableImageElementRef.setOriginalScale();
this.isOptimal = false;
}
getOriginalImage(isDownload = false) {
if (!this.targetImageSrc) {
return;
}
if (!isDownload && this.targetImageSrc.startsWith('data:image')) {
const img = this.images[this.targetImageIndex];
const win = window.open();
const content = `
<html style="height: 100%;">
<head>
<meta name="viewport" content="width=device-width, minimum-scale=0.1">
<title>base64 Image (${img.naturalWidth}×${img.naturalHeight})</title>
</head>
<body style="margin: 0px; background: #0e0e0e; height: 100%; display:flex; align-items:"center">
<img style="display: block;-webkit-user-select: none;margin: auto;" src="${this.targetImageSrc}">
</body>
</html>`;
win.document.body.outerHTML = content;
win.opener = null;
}
else {
const a = document.createElement('a');
const event = new MouseEvent('click');
a.href = this.targetImageSrc;
a.rel = 'noopener';
if (isDownload) {
a.download = '';
}
else {
a.target = '_blank';
}
a.dispatchEvent(event);
a.remove();
}
}
inputChange($event) {
if (!isNaN($event) && $event && $event >= 1 && $event <= this.totalImageNum) {
this.targetImageIndex = $event - 1;
}
}
addFullScreenStyle() {
this.document.querySelector('body').classList.add('devui-fullscreen');
}
removeFullScreenStyle() {
this.document.querySelector('body').classList.remove('devui-fullscreen');
}
getImgElement() {
return this.elementRef.nativeElement.querySelector('.devui-image-preview-main-image');
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DImagePreviewComponent, deps: [{ token: i0.ElementRef }, { token: i1.I18nService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DImagePreviewComponent, selector: "d-image-preview", inputs: { data: "data" }, host: { listeners: { "click": "click($event)", "touchstart": "touchstart($event)", "touchmove": "touchmove($event)", "touchend": "touchend($event)", "window:keydown.ArrowLeft": "arrowLeft()", "window:keydown.ArrowRight": "arrowRight()" } }, ngImport: i0, template: "<div class=\"devui-image-preview-wrapper\">\r\n <button class=\"devui-image-preview-close-btn\" (click)=\"onClose()\">\r\n <svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\" version=\"1.1\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <polygon\r\n fill=\"#293040\"\r\n fill-rule=\"nonzero\"\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 ></polygon>\r\n </g>\r\n </svg>\r\n </button>\r\n <img class=\"devui-image-preview-main-image\" [class.devui-optimal-proportion]=\"isOptimal\" [attr.src]=\"targetImageSrc | safe : 'url'\" />\r\n\r\n <!-- TODO: button\u53C2\u6570\u5316\u91CD\u6784 -->\r\n <button class=\"devui-fixed-arrow-left\" (click)=\"pre()\" dTooltip [position]=\"'right'\" [content]=\"i18nText.pre\">\r\n <svg width=\"18px\" height=\"18px\" viewBox=\"0 0 16 16\" version=\"1.1\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <polygon\r\n fill=\"#293040\"\r\n fill-rule=\"nonzero\"\r\n points=\"10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8\"\r\n ></polygon>\r\n </g>\r\n </svg>\r\n </button>\r\n <button class=\"devui-fixed-arrow-right\" (click)=\"next()\" dTooltip [position]=\"'left'\" [content]=\"i18nText.next\">\r\n <svg width=\"18px\" height=\"18px\" viewBox=\"0 0 16 16\" version=\"1.1\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <polygon\r\n fill=\"#293040\"\r\n fill-rule=\"nonzero\"\r\n transform=\"translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) \"\r\n points=\"11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8\"\r\n ></polygon>\r\n </g>\r\n </svg>\r\n </button>\r\n\r\n <div class=\"devui-image-preview-toolbar\">\r\n <button\r\n *ngIf=\"toolbar.zoomIn\"\r\n [class.disabled]=\"disabledZoomIn\"\r\n (click)=\"zoomIn()\"\r\n dTooltip\r\n [position]=\"'top'\"\r\n [content]=\"i18nText?.zoomIn\"\r\n >\r\n <svg width=\"18px\" height=\"18px\" viewBox=\"0 0 16 16\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <g fill=\"#293040\" fill-rule=\"nonzero\">\r\n <path\r\n d=\"M6,6 L6,4 L8,4 L8,6 L10,6 L10,8 L8,8 L8,10 L6,10 L6,8 L4,8 L4,6 L6,6 Z M12.6063847,11.1921711 L15.6568542,14.2426407 L14.2426407,15.6568542 L11.1921711,12.6063847 C10.0235906,13.4815965 8.5723351,14 7,14 C3.13400675,14 0,10.8659932 0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,8.5723351 13.4815965,10.0235906 12.6063847,11.1921711 L12.6063847,11.1921711 Z M7,12 C9.76142375,12 12,9.76142375 12,7 C12,4.23857625 9.76142375,2 7,2 C4.23857625,2 2,4.23857625 2,7 C2,9.76142375 4.23857625,12 7,12 Z\"\r\n ></path>\r\n </g>\r\n </g>\r\n </svg>\r\n </button>\r\n <button\r\n *ngIf=\"toolbar.zoomOut\"\r\n [class.disabled]=\"disabledZoomOut\"\r\n (click)=\"zoomOut()\"\r\n dTooltip\r\n [position]=\"'top'\"\r\n [content]=\"i18nText.zoomOut\"\r\n >\r\n <svg width=\"18px\" height=\"18px\" viewBox=\"0 0 16 16\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <g fill=\"#293040\" fill-rule=\"nonzero\">\r\n <path\r\n d=\"M12.6063847,11.1921711 L15.6568542,14.2426407 L14.2426407,15.6568542 L11.1921711,12.6063847 C10.0235906,13.4815965 8.5723351,14 7,14 C3.13400675,14 0,10.8659932 0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,8.5723351 13.4815965,10.0235906 12.6063847,11.1921711 L12.6063847,11.1921711 Z M7,12 C9.76142375,12 12,9.76142375 12,7 C12,4.23857625 9.76142375,2 7,2 C4.23857625,2 2,4.23857625 2,7 C2,9.76142375 4.23857625,12 7,12 Z M4,6 L10,6 L10,8 L4,8 L4,6 Z\"\r\n ></path>\r\n </g>\r\n </g>\r\n </svg>\r\n </button>\r\n <button *ngIf=\"toolbar.rotate\" (click)=\"rotate()\" dTooltip [position]=\"'top'\" [content]=\"i18nText.rotate\">\r\n <svg width=\"18px\" height=\"18px\" viewBox=\"0 0 16 16\" version=\"1.1\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <path\r\n d=\"M7.5,3.02242151 L7.5,4 L4.5,2 L7.5,0 L7.5,1.01640228 C7.66526181,1.00552468 7.83198572,1 8,1 C12.1421356,1 15.5,4.35786438 15.5,8.5 C15.5,12.6421356 12.1421356,16 8,16 C3.85786438,16 0.5,12.6421356 0.5,8.5 C0.5,6.9828355 0.950484514,5.5708873 1.72499011,4.39061882 L3.42173231,5.4510827 C2.83944149,6.32371289 2.5,7.37221604 2.5,8.5 C2.5,11.5375661 4.96243388,14 8,14 C11.0375661,14 13.5,11.5375661 13.5,8.5 C13.5,5.46243388 11.0375661,3 8,3 C7.83145515,3 7.66468102,3.00758131 7.5,3.02242151 Z M8,11 C6.61928813,11 5.5,9.88071187 5.5,8.5 C5.5,7.11928813 6.61928813,6 8,6 C9.38071187,6 10.5,7.11928813 10.5,8.5 C10.5,9.88071187 9.38071187,11 8,11 Z M8,10 C8.82842712,10 9.5,9.32842712 9.5,8.5 C9.5,7.67157288 8.82842712,7 8,7 C7.17157288,7 6.5,7.67157288 6.5,8.5 C6.5,9.32842712 7.17157288,10 8,10 Z\"\r\n fill=\"#293040\"\r\n ></path>\r\n </g>\r\n </svg>\r\n </button>\r\n <button *ngIf=\"toolbar.prev && toolbar.next\" (click)=\"pre()\" dTooltip [position]=\"'top'\" [content]=\"i18nText.pre\">\r\n <svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\" version=\"1.1\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <polygon\r\n fill=\"#293040\"\r\n fill-rule=\"nonzero\"\r\n points=\"10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8\"\r\n ></polygon>\r\n </g>\r\n </svg>\r\n </button>\r\n <span *ngIf=\"toolbar.index\" (click)=\"showInput = true\" class=\"devui-image-preview-index\">\r\n <d-input-number\r\n *ngIf=\"showInput\"\r\n size=\"sm\"\r\n [min]=\"1\"\r\n [max]=\"totalImageNum\"\r\n [autoFocus]=\"true\"\r\n [ngModel]=\"targetImageIndex + 1\"\r\n (keyup.enter)=\"showInput = false\"\r\n (blur)=\"showInput = false\"\r\n (whileValueChanging)=\"inputChange($event)\"\r\n (ngModelChange)=\"inputChange($event)\"\r\n >\r\n </d-input-number>\r\n <span *ngIf=\"!showInput\">{{ targetImageIndex + 1 + ' ' }}</span>\r\n <span>{{ '/ ' + totalImageNum }}</span>\r\n </span>\r\n <button *ngIf=\"toolbar.prev && toolbar.next\" class=\"devui-next\" (click)=\"next()\" dTooltip [position]=\"'top'\" [content]=\"i18nText.next\">\r\n <svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\" version=\"1.1\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <polygon\r\n fill=\"#293040\"\r\n fill-rule=\"nonzero\"\r\n transform=\"translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) \"\r\n points=\"11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8\"\r\n ></polygon>\r\n </g>\r\n </svg>\r\n </button>\r\n <button *ngIf=\"toolbar.scaleBest\" (click)=\"setScaleBest()\" dTooltip [position]=\"'top'\" [content]=\"i18nText.bestScale\">\r\n <svg width=\"18px\" height=\"18px\" viewBox=\"0 0 16 16\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <path\r\n d=\"M16,16 L11.429,16 L11.429,15 L14.456,15 L11.006,11.226 L11.652,10.519 L15.086,14.275 L15.086,11 L16,11 L16,16 Z M15.164,1.544 L12.009,4.994 L11.418,4.348 L14.558,0.914 L11.82,0.914 L11.82,0 L16,0 L16,4.571 L15.164,4.571 L15.164,1.544 Z M5,15 L5,16 L0,16 L0,11 L1,11 L1,14.275 L4.756,10.519 L5.463,11.226 L1.689,15 L5,15 Z M4.365,4.994 L0.914,1.544 L0.914,4.571 L3.41060513e-13,4.571 L3.41060513e-13,0 L4.571,0 L4.571,0.914 L1.578,0.914 L5.011,4.348 L4.365,4.994 Z\"\r\n fill=\"#293040\"\r\n fill-rule=\"nonzero\"\r\n ></path>\r\n </g>\r\n </svg>\r\n </button>\r\n <button *ngIf=\"toolbar.scaleOriginal\" (click)=\"setScaleOriginal()\" dTooltip [position]=\"'top'\" [content]=\"i18nText.originScale\">\r\n <span>1:1</span>\r\n </button>\r\n <button *ngIf=\"toolbar.originnalImage\" (click)=\"getOriginalImage()\" dTooltip [position]=\"'top'\" [content]=\"i18nText.origin\">\r\n <svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <g transform=\"translate(-1196.000000, -96.000000)\" fill=\"#293040\" fill-rule=\"nonzero\">\r\n <g transform=\"translate(407.000000, 93.000000)\">\r\n <path\r\n d=\"M804,4 L790,4 L790,11.940983 L794.058237,9.91186456 L798.536534,13.3949845 L801.014076,11.908459\r\n L804,13.8990748 L804,4 Z M803.72265,14.9160251 L800.985924,13.091541 L798.463466,14.6050155 L793.941763,11.0881354\r\n L790.223607,12.9472136 C790.151699,12.9831673 790.07527,13.000168 790,13.0001094 L790,18 L804,18 L804,15.0000529\r\n C803.90455,15.0001406 803.80803,14.9729453 803.72265,14.9160251 Z M789,19 L789,3 L805,3 L805,19 L789,19 Z M801,9\r\n C800.447715,9 800,8.55228475 800,8 C800,7.44771525 800.447715,7 801,7 C801.552285,7 802,7.44771525 802,8 C802,8.55228475\r\n 801.552285,9 801,9 Z\"\r\n ></path>\r\n </g>\r\n </g>\r\n </g>\r\n </svg>\r\n </button>\r\n <button *ngIf=\"toolbar.download\" (click)=\"getOriginalImage(true)\" dTooltip [position]=\"'top'\" [content]=\"i18nText.download\">\r\n <svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <g>\r\n <path\r\n d=\"M14.5,14 C14.7761424,14 15,14.2238576 15,14.5 C15,14.7761424 14.7761424,15 14.5,15 L1.5,15 C1.22385763,15 1,14.7761424 1,14.5 C1,14.2238576 1.22385763,14 1.5,14 L14.5,14 Z M8,1 C8.24545989,1 8.44960837,1.17687516 8.49194433,1.41012437 L8.5,1.5 L8.5,10.793 L11.6464466,7.64644661 C11.820013,7.47288026 12.0894374,7.45359511 12.2843055,7.58859116 L12.3535534,7.64644661 C12.5271197,7.82001296 12.5464049,8.08943736 12.4114088,8.2843055 L12.3535534,8.35355339 L8.35355339,12.3535534 L8.34128643,12.3654113 C8.32881868,12.3770608 8.31575424,12.3880797 8.30214392,12.3984173 L8.35355339,12.3535534 C8.32671912,12.3803877 8.29759357,12.4035342 8.26680652,12.422993 C8.25568247,12.4299807 8.24404667,12.4367067 8.23212724,12.4429657 C8.21827569,12.4502504 8.20453886,12.4566485 8.1905951,12.4623894 C8.17802507,12.4675915 8.16473685,12.4724419 8.15119917,12.4767316 C8.13583471,12.481552 8.12047425,12.4856039 8.10498705,12.4889143 C8.09430622,12.4912471 8.08325248,12.4932298 8.07207924,12.494843 C8.05487076,12.4972949 8.03773477,12.498877 8.02056948,12.4995793 C8.01375728,12.4998604 8.00689494,12.5 8,12.5 L7.98043349,12.4996194 C7.96293275,12.4989382 7.94546098,12.4973429 7.92809589,12.4948333 L8,12.5 C7.96390296,12.5 7.92869933,12.4961748 7.89477235,12.4889078 C7.87952575,12.4856039 7.86416529,12.481552 7.84898836,12.4767587 C7.83526315,12.4724419 7.82197493,12.4675915 7.80896344,12.4622078 C7.79546114,12.4566485 7.78172431,12.4502504 7.76824181,12.443195 C7.75595333,12.4367067 7.74431753,12.4299807 7.73298968,12.422812 C7.72729809,12.4192668 7.72146362,12.4154054 7.7156945,12.4114088 L7.69785608,12.3984173 C7.68424576,12.3880797 7.67118132,12.3770608 7.65871357,12.3654113 L7.64644661,12.3535534 L3.64644661,8.35355339 C3.45118446,8.15829124 3.45118446,7.84170876 3.64644661,7.64644661 C3.82001296,7.47288026 4.08943736,7.45359511 4.2843055,7.58859116 L4.35355339,7.64644661 L7.5,10.793 L7.5,1.5 C7.5,1.22385763 7.72385763,1 8,1 Z\"\r\n ></path>\r\n </g>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n</div>\r\n", styles: ["::ng-deep .devui-fullscreen{overflow:hidden!important}::ng-deep #devui-image-preview-modal .modal-content{overflow:hidden!important;transform:none!important;background-color:transparent}.devui-image-preview-wrapper{display:flex;width:100vw;height:100vh;align-items:center;justify-content:center;overflow:hidden}.devui-image-preview-wrapper .devui-image-preview-main-image{width:auto;height:auto;cursor:grab;margin-top:-20px}.devui-image-preview-wrapper .devui-optimal-proportion{max-width:90%;max-height:90%}.devui-fixed-arrow-left{position:fixed;z-index:var(--devui-z-index-modal, 1050);cursor:pointer;width:36px;height:36px;border-radius:18px;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-base, 0 1px 6px 0) var(--devui-light-shadow, rgba(0, 0, 0, .08));display:inline-flex;align-items:center;justify-content:center;top:calc(50% - 18px);left:20px}.devui-fixed-arrow-left:hover{background:var(--devui-area, #f3f3f3)}.devui-fixed-arrow-left svg polygon{fill:var(--devui-icon-text, #808080)}.devui-fixed-arrow-left svg{width:38px;height:18px}.devui-fixed-arrow-right{position:fixed;z-index:var(--devui-z-index-modal, 1050);cursor:pointer;width:36px;height:36px;border-radius:18px;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-base, 0 1px 6px 0) var(--devui-light-shadow, rgba(0, 0, 0, .08));display:inline-flex;align-items:center;justify-content:center;top:calc(50% - 18px);right:20px}.devui-fixed-arrow-right:hover{background:var(--devui-area, #f3f3f3)}.devui-fixed-arrow-right svg polygon{fill:var(--devui-icon-text, #808080)}.devui-fixed-arrow-right svg{width:38px;height:18px}svg,polygon,g,path{fill:var(--devui-icon-text, #808080)}.devui-image-preview-close-btn{position:fixed;z-index:var(--devui-z-index-modal, 1050);cursor:pointer;width:36px;height:36px;border-radius:18px;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-base, 0 1px 6px 0) var(--devui-light-shadow, rgba(0, 0, 0, .08));display:inline-flex;align-items:center;justify-content:center;top:15px;right:20px}.devui-image-preview-close-btn:hover{background:var(--devui-area, #f3f3f3)}.devui-image-preview-close-btn svg polygon{fill:var(--devui-icon-text, #808080)}.devui-image-preview-close-btn svg{width:38px;height:18px}.devui-image-preview-toolbar{width:100%;height:50px;display:flex;align-items:center;justify-content:center;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-fullscreen-overlay, 0 16px 48px 0) var(--devui-light-shadow, rgba(0, 0, 0, .08));position:fixed;bottom:0;left:0}.devui-image-preview-toolbar:empty{display:none}.devui-image-preview-toolbar button{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;color:var(--devui-text, #191919)}.devui-image-preview-toolbar button.disabled svg path{fill:var(--devui-disabled-text, #c2c2c2)}.devui-image-preview-toolbar .devui-image-preview-index{display:inline-flex;width:100px;justify-content:center;align-items:center;cursor:pointer}.devui-image-preview-toolbar .devui-image-preview-index d-input-number{width:65px;margin-right:4px}.devui-image-preview-toolbar>:not(:first-child){margin-left:20px}.devui-image-preview-toolbar .devui-image-preview-index,.devui-image-preview-toolbar .devui-next{margin-left:4px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.TooltipDirective, selector: "[dTooltip]", inputs: ["content", "position", "showAnimation", "showAnimate", "mouseEnterDelay", "mouseLeaveDelay"], exportAs: ["dTooltip"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.InputNumberComponent, selector: "d-input-number", inputs: ["step", "disabled", "size", "decimalLimit", "autoFocus", "allowEmpty", "placeholder", "maxLength", "reg", "styleType", "showGlowStyle", "min", "max"], outputs: ["afterValueChanged", "whileValueChanging"] }, { kind: "pipe", type: i6.SafePipe, name: "safe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DImagePreviewComponent, decorators: [{
type: Component,
args: [{ selector: 'd-image-preview', changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, template: "<div class=\"devui-image-preview-wrapper\">\r\n <button class=\"devui-image-preview-close-btn\" (click)=\"onClose()\">\r\n <svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\" version=\"1.1\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <polygon\r\n fill=\"#293040\"\r\n fill-rule=\"nonzero\"\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 ></polygon>\r\n </g>\r\n </svg>\r\n </button>\r\n <img class=\"devui-image-preview-main-image\" [class.devui-optimal-proportion]=\"isOptimal\" [attr.src]=\"targetImageSrc | safe : 'url'\" />\r\n\r\n <!-- TODO: button\u53C2\u6570\u5316\u91CD\u6784 -->\r\n <button class=\"devui-fixed-arrow-left\" (click)=\"pre()\" dTooltip [position]=\"'right'\" [content]=\"i18nText.pre\">\r\n <svg width=\"18px\" height=\"18px\" viewBox=\"0 0 16 16\" version=\"1.1\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <polygon\r\n fill=\"#293040\"\r\n fill-rule=\"nonzero\"\r\n points=\"10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8\"\r\n ></polygon>\r\n </g>\r\n </svg>\r\n </button>\r\n <button class=\"devui-fixed-arrow-right\" (click)=\"next()\" dTooltip [position]=\"'left'\" [content]=\"i18nText.next\">\r\n <svg width=\"18px\" height=\"18px\" viewBox=\"0 0 16 16\" version=\"1.1\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <polygon\r\n fill=\"#293040\"\r\n fill-rule=\"nonzero\"\r\n transform=\"translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) \"\r\n points=\"11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8\"\r\n ></polygon>\r\n </g>\r\n </svg>\r\n </button>\r\n\r\n <div class=\"devui-image-preview-toolbar\">\r\n <button\r\n *ngIf=\"toolbar.zoomIn\"\r\n [class.disabled]=\"disabledZoomIn\"\r\n (click)=\"zoomIn()\"\r\n dTooltip\r\n [position]=\"'top'\"\r\n [content]=\"i18nText?.zoomIn\"\r\n >\r\n <svg width=\"18px\" height=\"18px\" viewBox=\"0 0 16 16\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <g fill=\"#293040\" fill-rule=\"nonzero\">\r\n <path\r\n d=\"M6,6 L6,4 L8,4 L8,6 L10,6 L10,8 L8,8 L8,10 L6,10 L6,8 L4,8 L4,6 L6,6 Z M12.6063847,11.1921711 L15.6568542,14.2426407 L14.2426407,15.6568542 L11.1921711,12.6063847 C10.0235906,13.4815965 8.5723351,14 7,14 C3.13400675,14 0,10.8659932 0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,8.5723351 13.4815965,10.0235906 12.6063847,11.1921711 L12.6063847,11.1921711 Z M7,12 C9.76142375,12 12,9.76142375 12,7 C12,4.23857625 9.76142375,2 7,2 C4.23857625,2 2,4.23857625 2,7 C2,9.76142375 4.23857625,12 7,12 Z\"\r\n ></path>\r\n </g>\r\n </g>\r\n </svg>\r\n </button>\r\n <button\r\n *ngIf=\"toolbar.zoomOut\"\r\n [class.disabled]=\"disabledZoomOut\"\r\n (click)=\"zoomOut()\"\r\n dTooltip\r\n [position]=\"'top'\"\r\n [content]=\"i18nText.zoomOut\"\r\n >\r\n <svg width=\"18px\" height=\"18px\" viewBox=\"0 0 16 16\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <g fill=\"#293040\" fill-rule=\"nonzero\">\r\n <path\r\n d=\"M12.6063847,11.1921711 L15.6568542,14.2426407 L14.2426407,15.6568542 L11.1921711,12.6063847 C10.0235906,13.4815965 8.5723351,14 7,14 C3.13400675,14 0,10.8659932 0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,8.5723351 13.4815965,10.0235906 12.6063847,11.1921711 L12.6063847,11.1921711 Z M7,12 C9.76142375,12 12,9.76142375 12,7 C12,4.23857625 9.76142375,2 7,2 C4.23857625,2 2,4.23857625 2,7 C2,9.76142375 4.23857625,12 7,12 Z M4,6 L10,6 L10,8 L4,8 L4,6 Z\"\r\n ></path>\r\n </g>\r\n </g>\r\n </svg>\r\n </button>\r\n <button *ngIf=\"toolbar.rotate\" (click)=\"rotate()\" dTooltip [position]=\"'top'\" [content]=\"i18nText.rotate\">\r\n <svg width=\"18px\" height=\"18px\" viewBox=\"0 0 16 16\" version=\"1.1\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <path\r\n d=\"M7.5,3.02242151 L7.5,4 L4.5,2 L7.5,0 L7.5,1.01640228 C7.66526181,1.00552468 7.83198572,1 8,1 C12.1421356,1 15.5,4.35786438 15.5,8.5 C15.5,12.6421356 12.1421356,16 8,16 C3.85786438,16 0.5,12.6421356 0.5,8.5 C0.5,6.9828355 0.950484514,5.5708873 1.72499011,4.39061882 L3.42173231,5.4510827 C2.83944149,6.32371289 2.5,7.37221604 2.5,8.5 C2.5,11.5375661 4.96243388,14 8,14 C11.0375661,14 13.5,11.5375661 13.5,8.5 C13.5,5.46243388 11.0375661,3 8,3 C7.83145515,3 7.66468102,3.00758131 7.5,3.02242151 Z M8,11 C6.61928813,11 5.5,9.88071187 5.5,8.5 C5.5,7.11928813 6.61928813,6 8,6 C9.38071187,6 10.5,7.11928813 10.5,8.5 C10.5,9.88071187 9.38071187,11 8,11 Z M8,10 C8.82842712,10 9.5,9.32842712 9.5,8.5 C9.5,7.67157288 8.82842712,7 8,7 C7.17157288,7 6.5,7.67157288 6.5,8.5 C6.5,9.32842712 7.17157288,10 8,10 Z\"\r\n fill=\"#293040\"\r\n ></path>\r\n </g>\r\n </svg>\r\n </button>\r\n <button *ngIf=\"toolbar.prev && toolbar.next\" (click)=\"pre()\" dTooltip [position]=\"'top'\" [content]=\"i18nText.pre\">\r\n <svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\" version=\"1.1\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <polygon\r\n fill=\"#293040\"\r\n fill-rule=\"nonzero\"\r\n points=\"10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8\"\r\n ></polygon>\r\n </g>\r\n </svg>\r\n </button>\r\n <span *ngIf=\"toolbar.index\" (click)=\"showInput = true\" class=\"devui-image-preview-index\">\r\n <d-input-number\r\n *ngIf=\"showInput\"\r\n size=\"sm\"\r\n [min]=\"1\"\r\n [max]=\"totalImageNum\"\r\n [autoFocus]=\"true\"\r\n [ngModel]=\"targetImageIndex + 1\"\r\n (keyup.enter)=\"showInput = false\"\r\n (blur)=\"showInput = false\"\r\n (whileValueChanging)=\"inputChange($event)\"\r\n (ngModelChange)=\"inputChange($event)\"\r\n >\r\n </d-input-number>\r\n <span *ngIf=\"!showInput\">{{ targetImageIndex + 1 + ' ' }}</span>\r\n <span>{{ '/ ' + totalImageNum }}</span>\r\n </span>\r\n <button *ngIf=\"toolbar.prev && toolbar.next\" class=\"devui-next\" (click)=\"next()\" dTooltip [position]=\"'top'\" [content]=\"i18nText.next\">\r\n <svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\" version=\"1.1\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <polygon\r\n fill=\"#293040\"\r\n fill-rule=\"nonzero\"\r\n transform=\"translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) \"\r\n points=\"11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8\"\r\n ></polygon>\r\n </g>\r\n </svg>\r\n </button>\r\n <button *ngIf=\"toolbar.scaleBest\" (click)=\"setScaleBest()\" dTooltip [position]=\"'top'\" [content]=\"i18nText.bestScale\">\r\n <svg width=\"18px\" height=\"18px\" viewBox=\"0 0 16 16\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <path\r\n d=\"M16,16 L11.429,16 L11.429,15 L14.456,15 L11.006,11.226 L11.652,10.519 L15.086,14.275 L15.086,11 L16,11 L16,16 Z M15.164,1.544 L12.009,4.994 L11.418,4.348 L14.558,0.914 L11.82,0.914 L11.82,0 L16,0 L16,4.571 L15.164,4.571 L15.164,1.544 Z M5,15 L5,16 L0,16 L0,11 L1,11 L1,14.275 L4.756,10.519 L5.463,11.226 L1.689,15 L5,15 Z M4.365,4.994 L0.914,1.544 L0.914,4.571 L3.41060513e-13,4.571 L3.41060513e-13,0 L4.571,0 L4.571,0.914 L1.578,0.914 L5.011,4.348 L4.365,4.994 Z\"\r\n fill=\"#293040\"\r\n fill-rule=\"nonzero\"\r\n ></path>\r\n </g>\r\n </svg>\r\n </button>\r\n <button *ngIf=\"toolbar.scaleOriginal\" (click)=\"setScaleOriginal()\" dTooltip [position]=\"'top'\" [content]=\"i18nText.originScale\">\r\n <span>1:1</span>\r\n </button>\r\n <button *ngIf=\"toolbar.originnalImage\" (click)=\"getOriginalImage()\" dTooltip [position]=\"'top'\" [content]=\"i18nText.origin\">\r\n <svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <g transform=\"translate(-1196.000000, -96.000000)\" fill=\"#293040\" fill-rule=\"nonzero\">\r\n <g transform=\"translate(407.000000, 93.000000)\">\r\n <path\r\n d=\"M804,4 L790,4 L790,11.940983 L794.058237,9.91186456 L798.536534,13.3949845 L801.014076,11.908459\r\n L804,13.8990748 L804,4 Z M803.72265,14.9160251 L800.985924,13.091541 L798.463466,14.6050155 L793.941763,11.0881354\r\n L790.223607,12.9472136 C790.151699,12.9831673 790.07527,13.000168 790,13.0001094 L790,18 L804,18 L804,15.0000529\r\n C803.90455,15.0001406 803.80803,14.9729453 803.72265,14.9160251 Z M789,19 L789,3 L805,3 L805,19 L789,19 Z M801,9\r\n C800.447715,9 800,8.55228475 800,8 C800,7.44771525 800.447715,7 801,7 C801.552285,7 802,7.44771525 802,8 C802,8.55228475\r\n 801.552285,9 801,9 Z\"\r\n ></path>\r\n </g>\r\n </g>\r\n </g>\r\n </svg>\r\n </button>\r\n <button *ngIf=\"toolbar.download\" (click)=\"getOriginalImage(true)\" dTooltip [position]=\"'top'\" [content]=\"i18nText.download\">\r\n <svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <g>\r\n <path\r\n d=\"M14.5,14 C14.7761424,14 15,14.2238576 15,14.5 C15,14.7761424 14.7761424,15 14.5,15 L1.5,15 C1.22385763,15 1,14.7761424 1,14.5 C1,14.2238576 1.22385763,14 1.5,14 L14.5,14 Z M8,1 C8.24545989,1 8.44960837,1.17687516 8.49194433,1.41012437 L8.5,1.5 L8.5,10.793 L11.6464466,7.64644661 C11.820013,7.47288026 12.0894374,7.45359511 12.2843055,7.58859116 L12.3535534,7.64644661 C12.5271197,7.82001296 12.5464049,8.08943736 12.4114088,8.2843055 L12.3535534,8.35355339 L8.35355339,12.3535534 L8.34128643,12.3654113 C8.32881868,12.3770608 8.31575424,12.3880797 8.30214392,12.3984173 L8.35355339,12.3535534 C8.32671912,12.3803877 8.29759357,12.4035342 8.26680652,12.422993 C8.25568247,12.4299807 8.24404667,12.4367067 8.23212724,12.4429657 C8.21827569,12.4502504 8.20453886,12.4566485 8.1905951,12.4623894 C8.17802507,12.4675915 8.16473685,12.4724419 8.15119917,12.4767316 C8.13583471,12.481552 8.12047425,12.4856039 8.10498705,12.4889143 C8.09430622,12.4912471 8.08325248,12.4932298 8.07207924,12.494843 C8.05487076,12.4972949 8.03773477,12.498877 8.02056948,12.4995793 C8.01375728,12.4998604 8.00689494,12.5 8,12.5 L7.98043349,12.4996194 C7.96293275,12.4989382 7.94546098,12.4973429 7.92809589,12.4948333 L8,12.5 C7.96390296,12.5 7.92869933,12.4961748 7.89477235,12.4889078 C7.87952575,12.4856039 7.86416529,12.481552 7.84898836,12.4767587 C7.83526315,12.4724419 7.82197493,12.4675915 7.80896344,12.4622078 C7.79546114,12.4566485 7.78172431,12.4502504 7.76824181,12.443195 C7.75595333,12.4367067 7.74431753,12.4299807 7.73298968,12.422812 C7.72729809,12.4192668 7.72146362,12.4154054 7.7156945,12.4114088 L7.69785608,12.3984173 C7.68424576,12.3880797 7.67118132,12.3770608 7.65871357,12.3654113 L7.64644661,12.3535534 L3.64644661,8.35355339 C3.45118446,8.15829124 3.45118446,7.84170876 3.64644661,7.64644661 C3.82001296,7.47288026 4.08943736,7.45359511 4.2843055,7.58859116 L4.35355339,7.64644661 L7.5,10.793 L7.5,1.5 C7.5,1.22385763 7.72385763,1 8,1 Z\"\r\n ></path>\r\n </g>\r\n </g>\r\n </svg>\r\n </button>\r\n </div>\r\n</div>\r\n", styles: ["::ng-deep .devui-fullscreen{overflow:hidden!important}::ng-deep #devui-image-preview-modal .modal-content{overflow:hidden!important;transform:none!important;background-color:transparent}.devui-image-preview-wrapper{display:flex;width:100vw;height:100vh;align-items:center;justify-content:center;overflow:hidden}.devui-image-preview-wrapper .devui-image-preview-main-image{width:auto;height:auto;cursor:grab;margin-top:-20px}.devui-image-preview-wrapper .devui-optimal-proportion{max-width:90%;max-height:90%}.devui-fixed-arrow-left{position:fixed;z-index:var(--devui-z-index-modal, 1050);cursor:pointer;width:36px;height:36px;border-radius:18px;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-base, 0 1px 6px 0) var(--devui-light-shadow, rgba(0, 0, 0, .08));display:inline-flex;align-items:center;justify-content:center;top:calc(50% - 18px);left:20px}.devui-fixed-arrow-left:hover{background:var(--devui-area, #f3f3f3)}.devui-fixed-arrow-left svg polygon{fill:var(--devui-icon-text, #808080)}.devui-fixed-arrow-left svg{width:38px;height:18px}.devui-fixed-arrow-right{position:fixed;z-index:var(--devui-z-index-modal, 1050);cursor:pointer;width:36px;height:36px;border-radius:18px;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-base, 0 1px 6px 0) var(--devui-light-shadow, rgba(0, 0, 0, .08));display:inline-flex;align-items:center;justify-content:center;top:calc(50% - 18px);right:20px}.devui-fixed-arrow-right:hover{background:var(--devui-area, #f3f3f3)}.devui-fixed-arrow-right svg polygon{fill:var(--devui-icon-text, #808080)}.devui-fixed-arrow-right svg{width:38px;height:18px}svg,polygon,g,path{fill:var(--devui-icon-text, #808080)}.devui-image-preview-close-btn{position:fixed;z-index:var(--devui-z-index-modal, 1050);cursor:pointer;width:36px;height:36px;border-radius:18px;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-base, 0 1px 6px 0) var(--devui-light-shadow, rgba(0, 0, 0, .08));display:inline-flex;align-items:center;justify-content:center;top:15px;right:20px}.devui-image-preview-close-btn:hover{background:var(--devui-area, #f3f3f3)}.devui-image-preview-close-btn svg polygon{fill:var(--devui-icon-text, #808080)}.devui-image-preview-close-btn svg{width:38px;height:18px}.devui-image-preview-toolbar{width:100%;height:50px;display:flex;align-items:center;justify-content:center;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-fullscreen-overlay, 0 16px 48px 0) var(--devui-light-shadow, rgba(0, 0, 0, .08));position:fixed;bottom:0;left:0}.devui-image-preview-toolbar:empty{display:none}.devui-image-preview-toolbar button{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;color:var(--devui-text, #191919)}.devui-image-preview-toolbar button.disabled svg path{fill:var(--devui-disabled-text, #c2c2c2)}.devui-image-preview-toolbar .devui-image-preview-index{display:inline-flex;width:100px;justify-content:center;align-items:center;cursor:pointer}.devui-image-preview-toolbar .devui-image-preview-index d-input-number{width:65px;margin-right:4px}.devui-image-preview-toolbar>:not(:first-child){margin-left:20px}.devui-image-preview-toolbar .devui-image-preview-index,.devui-image-preview-toolbar .devui-next{margin-left:4px}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.I18nService }, { type: undefined, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }], propDecorators: { data: [{
type: Input
}], click: [{
type: HostListener,
args: ['click', ['$event']]
}], touchstart: [{
type: HostListener,
args: ['touchstart', ['$event']]
}], touchmove: [{
type: HostListener,
args: ['touchmove', ['$event']]
}], touchend: [{
type: HostListener,
args: ['touchend', ['$event']]
}], arrowLeft: [{
type: HostListener,
args: ['window:keydown.ArrowLeft', []]
}], arrowRight: [{
type: HostListener,
args: ['window:keydown.ArrowRight', []]
}] } });
class ImagePreviewDirective {
get defaultClasses() {
return !this.disableDefault;
}
onClick($event) {
if (this.disableDefault) {
return;
}
const target = $event.target;
if (target && target.nodeName.toLowerCase() === 'img') {
this.imagePreView(target);
}
}
constructor(elementRef, modalService) {
this.elementRef = elementRef;
this.modalService = modalService;
this.disableDefault = false;
}
ngOnInit() {
if (this.customSub) {
this.customSub.subscribe((target) => {
this.imagePreView(target);
});
}
}
ngOnDestroy() {
if (this.customSub) {
this.customSub.unsubscribe();
}
}
imagePreView(imageHTMLElement) {
const modalRef = this.modalService.open({
id: 'devui-image-preview-modal',
component: DImagePreviewComponent,
zIndex: this.zIndex,
backDropZIndex: this.backDropZIndex,
showAnimation: false,
data: {
targetImage: imageHTMLElement,
toolbar: this.toolbar,
images: Array.from(this.elementRef.nativeElement.querySelectorAll('img')),
onClose: () => {
modalRef.modalInstance.hide();
},
},
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImagePreviewDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.ModalService }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ImagePreviewDirective, selector: "[dImagePreview]", inputs: { customSub: "customSub", disableDefault: "disableDefault", toolbar: "toolbar", zIndex: "zIndex", backDropZIndex: "backDropZIndex" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.devui-image-preview-container": "this.defaultClasses" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImagePreviewDirective, decorators: [{
type: Directive,
args: [{
selector: '[dImagePreview]',
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.ModalService }], propDecorators: { customSub: [{
type: Input
}], disableDefault: [{
type: Input
}], toolbar: [{
type: Input
}], zIndex: [{
type: Input
}], backDropZIndex: [{
type: Input
}], defaultClasses: [{
type: HostBinding,
args: ['class.devui-image-preview-container']
}], onClick: [{
type: HostListener,
args: ['click', ['$event']]
}] } });
class ImagePreviewModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImagePreviewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ImagePreviewModule, declarations: [DImagePreviewComponent, ImagePreviewDirective], imports: [CommonModule,
ModalModule,
SafePipeModule,
TooltipModule,
FormsModule,
InputNumberModule], exports: [ImagePreviewDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImagePreviewModule, imports: [CommonModule,
ModalModule,
SafePipeModule,
TooltipModule,
FormsModule,
InputNumberModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImagePreviewModule, decorators: [{
type: NgModule,
args: [{
declarations: [DImagePreviewComponent, ImagePreviewDirective],
imports: [
CommonModule,
ModalModule,