(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/material/dialog'), require('@angular/material/icon'), require('jquery'), require('@sd-angular/core/modal')) :
    typeof define === 'function' && define.amd ? define('@sd-angular/core/image-preview', ['exports', '@angular/core', '@angular/common', '@angular/material/dialog', '@angular/material/icon', 'jquery', '@sd-angular/core/modal'], factory) :
    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['sd-angular'] = global['sd-angular'] || {}, global['sd-angular'].core = global['sd-angular'].core || {}, global['sd-angular'].core['image-preview'] = {}), global.ng.core, global.ng.common, global.ng.material.dialog, global.ng.material.icon, global.$, global['sd-angular'].core.modal));
}(this, (function (exports, core, common, dialog, icon, $, modal) { 'use strict';

    function _interopNamespace(e) {
        if (e && e.__esModule) { return e; } else {
            var n = Object.create(null);
            if (e) {
                Object.keys(e).forEach(function (k) {
                    if (k !== 'default') {
                        var d = Object.getOwnPropertyDescriptor(e, k);
                        Object.defineProperty(n, k, d.get ? d : {
                            enumerable: true,
                            get: function () {
                                return e[k];
                            }
                        });
                    }
                });
            }
            n['default'] = e;
            return Object.freeze(n);
        }
    }

    var $__namespace = /*#__PURE__*/_interopNamespace($);

    var ImagePreviewComponent = /** @class */ (function () {
        function ImagePreviewComponent(dialogRef, data) {
            this.dialogRef = dialogRef;
            this.data = data;
        }
        ImagePreviewComponent.prototype.ngOnInit = function () {
            this.currentImageUrl = typeof this.data.currentImage === 'string' ? this.data.currentImage : this.data.currentImage.previewSrc || this.data.currentImage.src;
        };
        ImagePreviewComponent.prototype.next = function () {
            var _this = this;
            var currentIdx = this.data.images.findIndex(function (image) { return (image.previewSrc || image.src) === _this.currentImageUrl; });
            if (currentIdx === this.data.images.length - 1) {
                this.currentImageUrl = this.data.images[0].previewSrc || this.data.images[0].src;
            }
            else {
                this.currentImageUrl = this.data.images[currentIdx + 1].previewSrc || this.data.images[currentIdx + 1].src;
            }
        };
        ImagePreviewComponent.prototype.prev = function () {
            var _this = this;
            var currentIdx = this.data.images.findIndex(function (image) { return (image.previewSrc || image.src) === _this.currentImageUrl; });
            if (currentIdx === 0) {
                this.currentImageUrl = this.data.images[this.data.images.length - 1].previewSrc || this.data.images[this.data.images.length - 1].src;
            }
            else {
                this.currentImageUrl = this.data.images[currentIdx - 1].previewSrc || this.data.images[currentIdx - 1].src;
            }
        };
        return ImagePreviewComponent;
    }());
    ImagePreviewComponent.decorators = [
        { type: core.Component, args: [{
                    selector: 'app-image-preview',
                    template: "<h1 mat-dialog-title class=\"d-flex\">\r\n  <mat-icon\r\n    mat-dialog-close\r\n    role=\"img\"\r\n    class=\"mat-icon notranslate material-icons mat-icon-no-color ml-auto\"\r\n    >close</mat-icon\r\n  >\r\n</h1>\r\n<div mat-dialog-content class=\"h-100 position-relative m-0\">\r\n <ng-container *ngIf=\"data?.images?.length\">\r\n    <span class=\"material-icons-outlined position-absolute prev\" (click)=\"prev()\">\r\n      arrow_back_ios\r\n    </span>\r\n    <span class=\"material-icons-outlined position-absolute next\" (click)=\"next()\">\r\n      arrow_forward_ios\r\n    </span>\r\n </ng-container>\r\n  <img\r\n    [src]=\"currentImageUrl\"\r\n    class=\"image-preview_image\"\r\n  />\r\n</div>\r\n",
                    styles: [".image-prevew-panel .mat-dialog-container{padding:0}:host{display:flex;flex-direction:column;height:100%}.image-preview_image{-o-object-fit:contain;display:block;height:100%;margin:0 auto;object-fit:contain;width:90%}.material-icons-outlined{cursor:pointer}.material-icons-outlined.prev{left:5px;top:50%;transform:translateY(-50%)}.material-icons-outlined.next{right:5px;top:50%;transform:translateY(-50%)}"]
                },] }
    ];
    ImagePreviewComponent.ctorParameters = function () { return [
        { type: dialog.MatDialogRef },
        { type: undefined, decorators: [{ type: core.Inject, args: [dialog.MAT_DIALOG_DATA,] }] }
    ]; };

    var ImagePreviewDirective = /** @class */ (function () {
        function ImagePreviewDirective(el, dialog) {
            this.el = el;
            this.dialog = dialog;
            this.images = null;
        }
        ImagePreviewDirective.prototype.onClick = function () {
            var currentImage;
            currentImage = this.el.nativeElement.src;
            if (this.images.length && this.sdPreviewCurrentIdx >= 0) {
                currentImage = this.images[this.sdPreviewCurrentIdx];
            }
            this.dialog.open(ImagePreviewComponent, {
                data: { currentImage: currentImage, images: this.images },
                backdropClass: ["image-prevew-backdrop"],
                panelClass: "image-prevew-panel",
                width: "600px",
                maxWidth: "90%",
                height: "600px",
                maxHeight: "90%",
            });
        };
        return ImagePreviewDirective;
    }());
    ImagePreviewDirective.decorators = [
        { type: core.Directive, args: [{
                    selector: "[sdImagePreview]",
                },] }
    ];
    ImagePreviewDirective.ctorParameters = function () { return [
        { type: core.ElementRef },
        { type: dialog.MatDialog }
    ]; };
    ImagePreviewDirective.propDecorators = {
        images: [{ type: core.Input, args: ["sdImagePreview",] }],
        sdPreviewCurrentIdx: [{ type: core.Input }],
        onClick: [{ type: core.HostListener, args: ["click",] }]
    };

    var _initImageSlideShowBox;
    var ImagePreviewSdmodalComponent = /** @class */ (function () {
        function ImagePreviewSdmodalComponent(dialogRef, data) {
            var _this = this;
            this.dialogRef = dialogRef;
            this.data = data;
            this.imageList = [];
            this.imageOrgWidthList = [];
            this.imageListTotal = 0;
            this.imageCurrent = '';
            this.imageCurrentIndex = 0;
            this.imageCurrentPercent = 100;
            this.imageCurrentWidth = 0;
            _initImageSlideShowBox.set(this, function () {
                setTimeout(function () {
                    _this.imageList = [];
                    _this.imageOrgWidthList = [];
                    $__namespace('img[alt=c-image-editor-quill]').each(function (index, obj) {
                        $__namespace(obj).parent('a').addClass('c-image-editor-quill-box');
                        $__namespace(obj).parent('a').click(function (e) {
                            e.preventDefault();
                            e.stopPropagation();
                            var currentImg = $__namespace(e.currentTarget).children('img');
                            _this.imageCurrent = $__namespace(currentImg).attr('src');
                            _this.imageCurrentIndex = _this.imageList.findIndex(function (t) { return t === _this.imageCurrent; });
                            _this.imageCurrentPercent = 100;
                            // @ts-ignore
                            _this.imageCurrentWidth = $__namespace(currentImg)[0].naturalWidth;
                            _this.popup.open();
                        });
                        _this.imageList.push($__namespace(obj).attr('src'));
                        // @ts-ignore
                        _this.imageOrgWidthList.push($__namespace(obj)[0].naturalWidth);
                        _this.imageListTotal = _this.imageList.length;
                    });
                }, 100);
            });
            this.imageGalleryBoxPrev = function () {
                if (_this.imageCurrentIndex > 0) {
                    _this.imageCurrentIndex--;
                    _this.imageCurrent = _this.imageList[_this.imageCurrentIndex];
                    _this.imageGalleryBoxCalculateWidth();
                }
            };
            this.imageGalleryBoxNext = function () {
                if (_this.imageCurrentIndex < _this.imageList.length - 1) {
                    _this.imageCurrentIndex++;
                    _this.imageCurrent = _this.imageList[_this.imageCurrentIndex];
                    _this.imageGalleryBoxCalculateWidth();
                }
            };
            this.imageGalleryBoxZoomIn = function () {
                if (_this.imageCurrentPercent < 200) {
                    _this.imageCurrentPercent += 10;
                    _this.imageGalleryBoxCalculateWidth();
                }
            };
            this.imageGalleryBoxZoomOut = function () {
                if (_this.imageCurrentPercent > 10) {
                    _this.imageCurrentPercent -= 10;
                    _this.imageGalleryBoxCalculateWidth();
                }
            };
            this.imageGalleryBoxCalculateWidth = function () {
                var orgWidth = _this.imageOrgWidthList[_this.imageCurrentIndex];
                _this.imageCurrentWidth = _this.imageCurrentPercent * orgWidth / 100.0;
            };
        }
        ImagePreviewSdmodalComponent.prototype.ngOnInit = function () {
            // tslint:disable-next-line:max-line-length
            // this.currentImageUrl = typeof this.data.currentImage === 'string' ? this.data.currentImage : this.data.currentImage.previewSrc || this.data.currentImage.src;
        };
        return ImagePreviewSdmodalComponent;
    }());
    _initImageSlideShowBox = new WeakMap();
    ImagePreviewSdmodalComponent.decorators = [
        { type: core.Component, args: [{
                    selector: 'sd-image-preview-2',
                    template: "<sd-modal [title]=\"' '\" width=\"90%\" #popup>\r\n  <sd-modal-body>\r\n    <div class=\"c-image-gallery-box\">\r\n      <div class=\"c-content-scroll\">\r\n        <div class=\"c-content\">\r\n          <div class=\"c-content-cell\">\r\n            <img src=\"{{imageCurrent}}\" style=\"width: {{imageCurrentWidth}}px\"/>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"c-toolbar\">\r\n        <mat-icon (click)=\"imageGalleryBoxZoomOut()\">zoom_out</mat-icon>\r\n        <span><b>{{imageCurrentPercent}}%</b></span>\r\n        <mat-icon (click)=\"imageGalleryBoxZoomIn()\">zoom_in</mat-icon>\r\n        <span>&nbsp;</span>\r\n        <mat-icon (click)=\"imageGalleryBoxPrev()\">navigate_before</mat-icon>\r\n        <span><b>{{(imageCurrentIndex + 1)}} / {{imageListTotal}}</b></span>\r\n        <mat-icon (click)=\"imageGalleryBoxNext()\">navigate_next</mat-icon>\r\n      </div>\r\n\r\n    </div>\r\n\r\n  </sd-modal-body>\r\n</sd-modal>\r\n",
                    styles: [".c-image-gallery-box{background:rgba(0,0,0,.54);position:relative}.c-image-gallery-box .c-content-scroll{height:79vh;overflow:auto;width:100%}.c-image-gallery-box .c-content-scroll .c-content{display:table;height:100%;width:100%}.c-image-gallery-box .c-content-scroll .c-content .c-content-cell{display:table-cell;text-align:center;vertical-align:middle}.c-image-gallery-box .c-toolbar{-moz-user-select:none;-webkit-user-select:none;background:rgba(0,0,0,.5);border-radius:4px;bottom:18px;color:#eee;left:0;margin-left:auto;margin-right:auto;padding-top:8px;position:absolute;right:0;text-align:center;user-select:none;width:250px}.c-image-gallery-box .c-toolbar span{margin:0 4px;vertical-align:top}.c-image-gallery-box .c-toolbar mat-icon{cursor:pointer;margin:0 4px}"]
                },] }
    ];
    ImagePreviewSdmodalComponent.ctorParameters = function () { return [
        { type: dialog.MatDialogRef },
        { type: undefined, decorators: [{ type: core.Inject, args: [dialog.MAT_DIALOG_DATA,] }] }
    ]; };
    ImagePreviewSdmodalComponent.propDecorators = {
        popup: [{ type: core.ViewChild, args: [modal.SdModal,] }]
    };

    var SdImagePreviewModule = /** @class */ (function () {
        function SdImagePreviewModule() {
        }
        return SdImagePreviewModule;
    }());
    SdImagePreviewModule.decorators = [
        { type: core.NgModule, args: [{
                    declarations: [ImagePreviewComponent, ImagePreviewSdmodalComponent, ImagePreviewDirective],
                    exports: [ImagePreviewDirective],
                    imports: [
                        common.CommonModule,
                        dialog.MatDialogModule,
                        icon.MatIconModule,
                        modal.SdModalModule
                    ],
                    entryComponents: [ImagePreviewComponent]
                },] }
    ];

    /*
     * Public API Surface of superdev-angular-core
     */

    /**
     * Generated bundle index. Do not edit.
     */

    exports.SdImagePreviewModule = SdImagePreviewModule;
    exports.ɵa = ImagePreviewComponent;
    exports.ɵb = ImagePreviewSdmodalComponent;
    exports.ɵc = ImagePreviewDirective;

    Object.defineProperty(exports, '__esModule', { value: true });

})));
//# sourceMappingURL=sd-angular-core-image-preview.umd.js.map
