import { DOCUMENT } from '@angular/common';
import { ChangeDetectionStrategy, Component, ElementRef, HostListener, Inject, Input } from '@angular/core';
import { I18nService } from 'ng-devui/i18n';
import { TransformableElement } from './transformable-element';
import * as i0 from "@angular/core";
import * as i1 from "ng-devui/i18n";
import * as i2 from "@angular/common";
import * as i3 from "ng-devui/tooltip";
import * as i4 from "@angular/forms";
import * as i5 from "ng-devui/input-number";
import * as i6 from "ng-devui/utils";
export class DImagePreviewComponent {
    constructor(elementRef, i18n, doc) {
        this.elementRef = elementRef;
        this.i18n = i18n;
        this.doc = doc;
        this.isOptimal = true;
        this.showInput = false;
        this.document = this.doc;
    }
    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;
    }
    get data() {
        return this._data;
    }
    get targetImageSrc() {
        // 防止targetImageIndex出现-1的情况
        const idx = this.targetImageIndex >= 0 && this.targetImageIndex || 0;
        return this.images[idx].getAttribute('src');
    }
    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.transformableImageElementRef.zoomIn();
    }
    zoomOut() {
        this.transformableImageElementRef.zoomOut();
    }
    rotate() {
        this.transformableImageElementRef.rotate();
    }
    setScaleBest() {
        this.transformableImageElementRef.setBestScale();
        this.isOptimal = true;
    }
    setScaleOriginal() {
        this.transformableImageElementRef.setOriginalScale();
        this.isOptimal = false;
    }
    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');
    }
}
DImagePreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: DImagePreviewComponent, deps: [{ token: i0.ElementRef }, { token: i1.I18nService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
DImagePreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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\">\n  <button class=\"devui-image-preview-close-btn\" (click)=\"onClose()\">\n    <svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\" version=\"1.1\">\n      <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <polygon\n          fill=\"#293040\"\n          fill-rule=\"nonzero\"\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\"\n        ></polygon>\n      </g>\n    </svg>\n  </button>\n  <img class=\"devui-image-preview-main-image\" [class.devui-optimal-proportion]=\"isOptimal\" [attr.src]=\"targetImageSrc | safe: 'url'\" />\n\n  <!-- TODO: button\u53C2\u6570\u5316\u91CD\u6784 -->\n  <button class=\"devui-fixed-arrow-left\" (click)=\"pre()\" dTooltip [position]=\"'right'\" [content]=\"i18nText.pre\">\n    <svg width=\"18px\" height=\"18px\" viewBox=\"0 0 16 16\" version=\"1.1\">\n      <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <polygon\n          fill=\"#293040\"\n          fill-rule=\"nonzero\"\n          points=\"10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8\"\n        ></polygon>\n      </g>\n    </svg>\n  </button>\n  <button class=\"devui-fixed-arrow-right\" (click)=\"next()\" dTooltip [position]=\"'left'\" [content]=\"i18nText.next\">\n    <svg width=\"18px\" height=\"18px\" viewBox=\"0 0 16 16\" version=\"1.1\">\n      <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <polygon\n          fill=\"#293040\"\n          fill-rule=\"nonzero\"\n          transform=\"translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) \"\n          points=\"11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8\"\n        ></polygon>\n      </g>\n    </svg>\n  </button>\n\n  <div class=\"devui-image-preview-toolbar\">\n    <button (click)=\"zoomIn()\" dTooltip [position]=\"'top'\" [content]=\"i18nText?.zoomIn\">\n      <svg width=\"18px\" height=\"18px\" viewBox=\"0 0 16 16\">\n        <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <g fill=\"#293040\" fill-rule=\"nonzero\">\n            <path\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\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n    </button>\n    <button (click)=\"zoomOut()\" dTooltip [position]=\"'top'\" [content]=\"i18nText.zoomOut\">\n      <svg width=\"18px\" height=\"18px\" viewBox=\"0 0 16 16\">\n        <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <g fill=\"#293040\" fill-rule=\"nonzero\">\n            <path\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\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n    </button>\n    <button (click)=\"rotate()\" dTooltip [position]=\"'top'\" [content]=\"i18nText.rotate\">\n      <svg width=\"18px\" height=\"18px\" viewBox=\"0 0 16 16\" version=\"1.1\">\n        <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <path\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\"\n            fill=\"#293040\"\n          ></path>\n        </g>\n      </svg>\n    </button>\n    <button (click)=\"pre()\" dTooltip [position]=\"'top'\" [content]=\"i18nText.pre\">\n      <svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\" version=\"1.1\">\n        <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <polygon\n            fill=\"#293040\"\n            fill-rule=\"nonzero\"\n            points=\"10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8\"\n          ></polygon>\n        </g>\n      </svg>\n    </button>\n    <span (click)=\"showInput = true\" class=\"devui-image-preview-index\">\n      <d-input-number\n        *ngIf=\"showInput\"\n        size=\"sm\"\n        [min]=\"1\"\n        [max]=\"totalImageNum\"\n        [autoFocus]=\"true\"\n        [ngModel]=\"targetImageIndex + 1\"\n        (keyup.enter)=\"showInput = false\"\n        (blur)=\"showInput = false\"\n        (whileValueChanging)=\"inputChange($event)\"\n        (ngModelChange)=\"inputChange($event)\"\n      >\n      </d-input-number>\n      <span *ngIf=\"!showInput\">{{ targetImageIndex + 1 + ' ' }}</span>\n      <span>{{ '/ ' + totalImageNum }}</span>\n    </span>\n    <button class=\"devui-next\" (click)=\"next()\" dTooltip [position]=\"'top'\" [content]=\"i18nText.next\">\n      <svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\" version=\"1.1\">\n        <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <polygon\n            fill=\"#293040\"\n            fill-rule=\"nonzero\"\n            transform=\"translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) \"\n            points=\"11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8\"\n          ></polygon>\n        </g>\n      </svg>\n    </button>\n    <button (click)=\"setScaleBest()\" dTooltip [position]=\"'top'\" [content]=\"i18nText.bestScale\">\n      <svg width=\"18px\" height=\"18px\" viewBox=\"0 0 16 16\">\n        <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <path\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\"\n            fill=\"#293040\"\n            fill-rule=\"nonzero\"\n          ></path>\n        </g>\n      </svg>\n    </button>\n    <button (click)=\"setScaleOriginal()\" dTooltip [position]=\"'top'\" [content]=\"i18nText.originScale\">\n      <span>1:1</span>\n    </button>\n  </div>\n</div>\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:-webkit-grab;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:1050;z-index:var(--devui-z-index-modal, 1050);cursor:pointer;width:36px;height:36px;border-radius:18px;background:rgba(255,255,255,.8);background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:0 1px 4px #252b3a1a;box-shadow:var(--devui-shadow-length-base, 0 1px 4px 0) var(--devui-light-shadow, rgba(37, 43, 58, .1));display:inline-flex;align-items:center;justify-content:center;top:calc(50% - 18px);left:20px}.devui-fixed-arrow-left:hover{background:#f5f5f5;background:var(--devui-area, #f5f5f5)}.devui-fixed-arrow-left svg polygon{fill:#71757f;fill:var(--devui-icon-text, #71757f)}.devui-fixed-arrow-left svg{width:38px;height:18px}.devui-fixed-arrow-right{position:fixed;z-index:1050;z-index:var(--devui-z-index-modal, 1050);cursor:pointer;width:36px;height:36px;border-radius:18px;background:rgba(255,255,255,.8);background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:0 1px 4px #252b3a1a;box-shadow:var(--devui-shadow-length-base, 0 1px 4px 0) var(--devui-light-shadow, rgba(37, 43, 58, .1));display:inline-flex;align-items:center;justify-content:center;top:calc(50% - 18px);right:20px}.devui-fixed-arrow-right:hover{background:#f5f5f5;background:var(--devui-area, #f5f5f5)}.devui-fixed-arrow-right svg polygon{fill:#71757f;fill:var(--devui-icon-text, #71757f)}.devui-fixed-arrow-right svg{width:38px;height:18px}svg,polygon,g,path{fill:#71757f;fill:var(--devui-icon-text, #71757f)}.devui-image-preview-close-btn{position:fixed;z-index:1050;z-index:var(--devui-z-index-modal, 1050);cursor:pointer;width:36px;height:36px;border-radius:18px;background:rgba(255,255,255,.8);background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:0 1px 4px #252b3a1a;box-shadow:var(--devui-shadow-length-base, 0 1px 4px 0) var(--devui-light-shadow, rgba(37, 43, 58, .1));display:inline-flex;align-items:center;justify-content:center;top:15px;right:20px}.devui-image-preview-close-btn:hover{background:#f5f5f5;background:var(--devui-area, #f5f5f5)}.devui-image-preview-close-btn svg polygon{fill:#71757f;fill:var(--devui-icon-text, #71757f)}.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:rgba(255,255,255,.8);background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:0 12px 24px #252b3a1a;box-shadow:var(--devui-shadow-length-fullscreen-overlay, 0 12px 24px 0) var(--devui-light-shadow, rgba(37, 43, 58, .1));position:fixed;bottom:0;left:0}.devui-image-preview-toolbar button{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;color:#252b3a;color:var(--devui-text, #252b3a)}.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", "min", "max"], outputs: ["afterValueChanged", "whileValueChanging"] }, { kind: "pipe", type: i6.SafePipe, name: "safe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: DImagePreviewComponent, decorators: [{
            type: Component,
            args: [{ selector: 'd-image-preview', changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, template: "<div class=\"devui-image-preview-wrapper\">\n  <button class=\"devui-image-preview-close-btn\" (click)=\"onClose()\">\n    <svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\" version=\"1.1\">\n      <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <polygon\n          fill=\"#293040\"\n          fill-rule=\"nonzero\"\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\"\n        ></polygon>\n      </g>\n    </svg>\n  </button>\n  <img class=\"devui-image-preview-main-image\" [class.devui-optimal-proportion]=\"isOptimal\" [attr.src]=\"targetImageSrc | safe: 'url'\" />\n\n  <!-- TODO: button\u53C2\u6570\u5316\u91CD\u6784 -->\n  <button class=\"devui-fixed-arrow-left\" (click)=\"pre()\" dTooltip [position]=\"'right'\" [content]=\"i18nText.pre\">\n    <svg width=\"18px\" height=\"18px\" viewBox=\"0 0 16 16\" version=\"1.1\">\n      <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <polygon\n          fill=\"#293040\"\n          fill-rule=\"nonzero\"\n          points=\"10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8\"\n        ></polygon>\n      </g>\n    </svg>\n  </button>\n  <button class=\"devui-fixed-arrow-right\" (click)=\"next()\" dTooltip [position]=\"'left'\" [content]=\"i18nText.next\">\n    <svg width=\"18px\" height=\"18px\" viewBox=\"0 0 16 16\" version=\"1.1\">\n      <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <polygon\n          fill=\"#293040\"\n          fill-rule=\"nonzero\"\n          transform=\"translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) \"\n          points=\"11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8\"\n        ></polygon>\n      </g>\n    </svg>\n  </button>\n\n  <div class=\"devui-image-preview-toolbar\">\n    <button (click)=\"zoomIn()\" dTooltip [position]=\"'top'\" [content]=\"i18nText?.zoomIn\">\n      <svg width=\"18px\" height=\"18px\" viewBox=\"0 0 16 16\">\n        <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <g fill=\"#293040\" fill-rule=\"nonzero\">\n            <path\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\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n    </button>\n    <button (click)=\"zoomOut()\" dTooltip [position]=\"'top'\" [content]=\"i18nText.zoomOut\">\n      <svg width=\"18px\" height=\"18px\" viewBox=\"0 0 16 16\">\n        <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <g fill=\"#293040\" fill-rule=\"nonzero\">\n            <path\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\"\n            ></path>\n          </g>\n        </g>\n      </svg>\n    </button>\n    <button (click)=\"rotate()\" dTooltip [position]=\"'top'\" [content]=\"i18nText.rotate\">\n      <svg width=\"18px\" height=\"18px\" viewBox=\"0 0 16 16\" version=\"1.1\">\n        <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <path\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\"\n            fill=\"#293040\"\n          ></path>\n        </g>\n      </svg>\n    </button>\n    <button (click)=\"pre()\" dTooltip [position]=\"'top'\" [content]=\"i18nText.pre\">\n      <svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\" version=\"1.1\">\n        <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <polygon\n            fill=\"#293040\"\n            fill-rule=\"nonzero\"\n            points=\"10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8\"\n          ></polygon>\n        </g>\n      </svg>\n    </button>\n    <span (click)=\"showInput = true\" class=\"devui-image-preview-index\">\n      <d-input-number\n        *ngIf=\"showInput\"\n        size=\"sm\"\n        [min]=\"1\"\n        [max]=\"totalImageNum\"\n        [autoFocus]=\"true\"\n        [ngModel]=\"targetImageIndex + 1\"\n        (keyup.enter)=\"showInput = false\"\n        (blur)=\"showInput = false\"\n        (whileValueChanging)=\"inputChange($event)\"\n        (ngModelChange)=\"inputChange($event)\"\n      >\n      </d-input-number>\n      <span *ngIf=\"!showInput\">{{ targetImageIndex + 1 + ' ' }}</span>\n      <span>{{ '/ ' + totalImageNum }}</span>\n    </span>\n    <button class=\"devui-next\" (click)=\"next()\" dTooltip [position]=\"'top'\" [content]=\"i18nText.next\">\n      <svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\" version=\"1.1\">\n        <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <polygon\n            fill=\"#293040\"\n            fill-rule=\"nonzero\"\n            transform=\"translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) \"\n            points=\"11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8\"\n          ></polygon>\n        </g>\n      </svg>\n    </button>\n    <button (click)=\"setScaleBest()\" dTooltip [position]=\"'top'\" [content]=\"i18nText.bestScale\">\n      <svg width=\"18px\" height=\"18px\" viewBox=\"0 0 16 16\">\n        <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <path\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\"\n            fill=\"#293040\"\n            fill-rule=\"nonzero\"\n          ></path>\n        </g>\n      </svg>\n    </button>\n    <button (click)=\"setScaleOriginal()\" dTooltip [position]=\"'top'\" [content]=\"i18nText.originScale\">\n      <span>1:1</span>\n    </button>\n  </div>\n</div>\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:-webkit-grab;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:1050;z-index:var(--devui-z-index-modal, 1050);cursor:pointer;width:36px;height:36px;border-radius:18px;background:rgba(255,255,255,.8);background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:0 1px 4px #252b3a1a;box-shadow:var(--devui-shadow-length-base, 0 1px 4px 0) var(--devui-light-shadow, rgba(37, 43, 58, .1));display:inline-flex;align-items:center;justify-content:center;top:calc(50% - 18px);left:20px}.devui-fixed-arrow-left:hover{background:#f5f5f5;background:var(--devui-area, #f5f5f5)}.devui-fixed-arrow-left svg polygon{fill:#71757f;fill:var(--devui-icon-text, #71757f)}.devui-fixed-arrow-left svg{width:38px;height:18px}.devui-fixed-arrow-right{position:fixed;z-index:1050;z-index:var(--devui-z-index-modal, 1050);cursor:pointer;width:36px;height:36px;border-radius:18px;background:rgba(255,255,255,.8);background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:0 1px 4px #252b3a1a;box-shadow:var(--devui-shadow-length-base, 0 1px 4px 0) var(--devui-light-shadow, rgba(37, 43, 58, .1));display:inline-flex;align-items:center;justify-content:center;top:calc(50% - 18px);right:20px}.devui-fixed-arrow-right:hover{background:#f5f5f5;background:var(--devui-area, #f5f5f5)}.devui-fixed-arrow-right svg polygon{fill:#71757f;fill:var(--devui-icon-text, #71757f)}.devui-fixed-arrow-right svg{width:38px;height:18px}svg,polygon,g,path{fill:#71757f;fill:var(--devui-icon-text, #71757f)}.devui-image-preview-close-btn{position:fixed;z-index:1050;z-index:var(--devui-z-index-modal, 1050);cursor:pointer;width:36px;height:36px;border-radius:18px;background:rgba(255,255,255,.8);background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:0 1px 4px #252b3a1a;box-shadow:var(--devui-shadow-length-base, 0 1px 4px 0) var(--devui-light-shadow, rgba(37, 43, 58, .1));display:inline-flex;align-items:center;justify-content:center;top:15px;right:20px}.devui-image-preview-close-btn:hover{background:#f5f5f5;background:var(--devui-area, #f5f5f5)}.devui-image-preview-close-btn svg polygon{fill:#71757f;fill:var(--devui-icon-text, #71757f)}.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:rgba(255,255,255,.8);background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:0 12px 24px #252b3a1a;box-shadow:var(--devui-shadow-length-fullscreen-overlay, 0 12px 24px 0) var(--devui-light-shadow, rgba(37, 43, 58, .1));position:fixed;bottom:0;left:0}.devui-image-preview-toolbar button{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;color:#252b3a;color:var(--devui-text, #252b3a)}.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: function () { return [{ 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', []]
            }] } });
//# sourceMappingURL=data:application/json;base64, 