flexible-preview-box - npm Package Compare versions

Comparing version 1.1.2 to 1.2.0

bundles/flexible-preview-box.umd.js

 (function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('into-pipes')) :
-	typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', 'into-pipes'], factory) :
-	(factory((global['flexible-preview-box'] = {}),global.ng.core,global.ng.common,global.intoPipes));
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('into-pipes')) :
+    typeof define === 'function' && define.amd ? define('flexible-preview-box', ['exports', '@angular/core', '@angular/common', 'into-pipes'], factory) :
+    (factory((global['flexible-preview-box'] = {}),global.ng.core,global.ng.common,global.intoPipes));
 }(this, (function (exports,core,common,intoPipes) { 'use strict';
 
-var FlexiblePreviewBoxComponent = /** @class */ (function () {
-    function FlexiblePreviewBoxComponent() {
-        this.aboveData = [];
-        this.belowData = [];
-        this.onselect = new core.EventEmitter();
-    }
-    FlexiblePreviewBoxComponent.prototype.ngOnInit = function () {
-        var _this = this;
-        if (this.metadata) {
-            this.metadata.map(function (data) {
-                if (data.position === 'above') {
-                    _this.aboveData.push(data);
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+     */
+    var FlexiblePreviewBoxComponent = (function () {
+        function FlexiblePreviewBoxComponent() {
+            this.aboveData = [];
+            this.belowData = [];
+            this.onselect = new core.EventEmitter();
+        }
+        /**
+         * @return {?}
+         */
+        FlexiblePreviewBoxComponent.prototype.ngOnInit = /**
+         * @return {?}
+         */
+            function () {
+                var _this = this;
+                if (this.metadata) {
+                    this.metadata.map(function (data) {
+                        if (data.position === 'above') {
+                            _this.aboveData.push(data);
+                        }
+                        else if (data.position === 'below') {
+                            _this.belowData.push(data);
+                        }
+                    });
                 }
-                else if (data.position === 'below') {
-                    _this.belowData.push(data);
+            };
+        /**
+         * @param {?} changes
+         * @return {?}
+         */
+        FlexiblePreviewBoxComponent.prototype.ngOnChanges = /**
+         * @param {?} changes
+         * @return {?}
+         */
+            function (changes) {
+            };
+        /**
+         * @param {?} item
+         * @param {?} hpath
+         * @return {?}
+         */
+        FlexiblePreviewBoxComponent.prototype.itemValue = /**
+         * @param {?} item
+         * @param {?} hpath
+         * @return {?}
+         */
+            function (item, hpath) {
+                /** @type {?} */
+                var subitem = item;
+                hpath.map(function (subkey) {
+                    if (subitem) {
+                        subitem = subitem[subkey];
+                    }
+                });
+                return subitem === undefined || subitem === null || subitem === "null" ? "" : String(subitem);
+            };
+        /**
+         * @param {?} row
+         * @return {?}
+         */
+        FlexiblePreviewBoxComponent.prototype.rowContent = /**
+         * @param {?} row
+         * @return {?}
+         */
+            function (row) {
+                /** @type {?} */
+                var content = this.itemValue(this.item, row.key.split("."));
+                return (content !== undefined && content != null) ? content : '';
+            };
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        FlexiblePreviewBoxComponent.prototype.hoverOver = /**
+         * @param {?} event
+         * @return {?}
+         */
+            function (event) {
+                if (this.largeImage && this.effects.zoomOnHover && event.target.nodeName === 'IMG') ;
+            };
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        FlexiblePreviewBoxComponent.prototype.hoverOut = /**
+         * @param {?} event
+         * @return {?}
+         */
+            function (event) {
+                if (this.largeImage) {
+                    this.largeImage.nativeElement.style.opacity = 0;
+                    this.largeImage.nativeElement.style.top = "-10000px";
+                    this.largeImage.nativeElement.style.left = "-10000px";
                 }
-            });
+            };
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        FlexiblePreviewBoxComponent.prototype.hoverViewPort = /**
+         * @param {?} event
+         * @return {?}
+         */
+            function (event) {
+                if (this.largeImage && this.effects.zoomOnHover) {
+                    this.largeImage.nativeElement.style.opacity = 1;
+                    this.largeImage.nativeElement.style.top = -event.layerY + "px";
+                    this.largeImage.nativeElement.style.left = -event.layerX + "px";
+                }
+            };
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        FlexiblePreviewBoxComponent.prototype.keyup = /**
+         * @param {?} event
+         * @return {?}
+         */
+            function (event) {
+                /** @type {?} */
+                var code = event.which;
+                if (code === 13) {
+                    event.target.click();
+                }
+            };
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        FlexiblePreviewBoxComponent.prototype.selectItem = /**
+         * @param {?} event
+         * @return {?}
+         */
+            function (event) {
+                this.onselect.emit({
+                    item: this.item,
+                    selected: true,
+                    action: "redirect"
+                });
+            };
+        /**
+         * @param {?} trackingTime
+         * @return {?}
+         */
+        FlexiblePreviewBoxComponent.prototype.videoPlayed = /**
+         * @param {?} trackingTime
+         * @return {?}
+         */
+            function (trackingTime) {
+            };
+        /**
+         * @param {?} trackingTime
+         * @return {?}
+         */
+        FlexiblePreviewBoxComponent.prototype.videoPaused = /**
+         * @param {?} trackingTime
+         * @return {?}
+         */
+            function (trackingTime) {
+            };
+        /**
+         * @param {?} trackingTime
+         * @return {?}
+         */
+        FlexiblePreviewBoxComponent.prototype.videoEnded = /**
+         * @param {?} trackingTime
+         * @return {?}
+         */
+            function (trackingTime) {
+            };
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        FlexiblePreviewBoxComponent.prototype.onComponentChange = /**
+         * @param {?} event
+         * @return {?}
+         */
+            function (event) {
+                this.onselect.emit(event);
+            };
+        FlexiblePreviewBoxComponent.decorators = [
+            { type: core.Component, args: [{
+                        selector: 'flexible-preview-box',
+                        template: "<div class=\"above-viewport\" [style.max-width]=\"effects.width ? (effects.width + 'px') : 'auto'\">\r\n    <div *ngFor=\"let row of aboveData; let i = index\" \r\n        class=\"box-row\"\r\n        [style.margin-top]=\"row.spacing ? (row.spacing + 'px') : '0'\"\r\n        [class.left]=\"row.side === 'left'\"\r\n        [class.right]=\"row.side === 'right'\"\r\n        [class.center]=\"row.side === 'center'\"\r\n        [class.emphasize]=\"row.emphasize\"\r\n        [class.side-by-side]=\"row.sidebyside\">\r\n        <span class=\"label\" [class.off-screen]=\"row.hidelabel\" [textContent]=\"row.value\"></span>\r\n        <span class=\"value\" [intoName]=\"row.value\"\r\n            [intoId]=\"row.key + '-' + i\"\r\n            [into]=\"row.format\"\r\n            [intoData]=\"item\"\r\n            [rawContent]=\"rowContent(row)\"\r\n            [onComponentChange]=\"onComponentChange.bind(this)\"></span>\r\n    </div>\r\n    <div class=\"clearblock\"></div>\r\n</div>\r\n<div \r\n    class=\"viewport\" \r\n    tabindex=\"0\"\r\n    [title]=\"item.name\"\r\n    [style.width]=\"effects.width + 'px'\" \r\n    [style.height]=\"effects.height + 'px'\"\r\n    (keyup)=\"keyup($event)\"\r\n    (click)=\"selectItem($event)\"\r\n    (mouseout)=\"hoverOut($event)\"\r\n    (mouseover)=\"hoverOver($event)\"\r\n    (mousemove)=\"hoverViewPort($event)\">\r\n    <img  class=\"content\" \r\n            [src]=\"viewport.src.small\" \r\n            *ngIf=\"viewport.type === 'image'\" />\r\n    <img  class=\"hover\" #largeImage\r\n            [style.width]=\"(effects.width*2) + 'px'\"\r\n            [style.height]=\"(effects.height*2) + 'px'\"\r\n            [src]=\"viewport.src.large\" \r\n            *ngIf=\"effects.zoomOnHover\" />\r\n    <video  \r\n        class=\"content\" #video\r\n        [style.width]=\"effects.width + 'px'\" \r\n        [style.height]=\"effects.height + 'px'\"\r\n        (play)=\"videoPlayed(video.currentTime)\"\r\n        (pause)=\"videoPaused(video.currentTime)\"\r\n        (ended)=\"videoEnded(video.currentTime)\"\r\n        *ngIf=\"viewport.type === 'video'\" controls>\r\n        <source [src]=\"viewport.src.mp4\" type=\"video/mp4\">\r\n        <source [src]=\"viewport.src.webm\" type=\"video/webm\">\r\n        <source [src]=\"viewport.src.egg\" type=\"video/ogg\">\r\n    </video>\r\n</div>\r\n<div class=\"below-viewport\" [style.max-width]=\"effects.width ? (effects.width + 'px') : 'auto'\">\r\n    <div *ngFor=\"let row of belowData; let i = index\" \r\n        class=\"box-row\"\r\n        [style.margin-top]=\"row.spacing ? (row.spacing + 'px') : '0'\"\r\n        [class.left]=\"row.side === 'left'\"\r\n        [class.right]=\"row.side === 'right'\"\r\n        [class.center]=\"row.side === 'center'\"\r\n        [class.emphasize]=\"row.emphasize\"\r\n        [class.side-by-side]=\"row.sidebyside\">\r\n        <span class=\"label\" [class.off-screen]=\"row.hidelabel\" [textContent]=\"row.value\"></span>\r\n        <span class=\"value\" [intoName]=\"row.value\"\r\n            [intoId]=\"row.key + '-' + i\"\r\n            [into]=\"row.format\"\r\n            [intoData]=\"item\"\r\n            [rawContent]=\"rowContent(row)\"\r\n            [onComponentChange]=\"onComponentChange.bind(this)\"></span>\r\n    </div>\r\n    <div class=\"clearblock\"></div>\r\n</div>",
+                        styles: [":host{background-color:#fff;border:1px solid #ced4da;box-sizing:border-box;display:table;min-height:50px;padding:0;border-radius:5px;margin:5px}:host ::ng-deep .rating{color:red}:host .off-screen{display:block;float:left;height:0;overflow:hidden;text-indent:-99999px;width:0}:host .box-row{display:flex;width:100%}:host .box-row .label{float:left;font-weight:700;margin-right:5px}:host .box-row .value{float:left}:host .box-row.left{text-align:left}:host .box-row.right .label{font-weight:700;flex:1;text-align:right}:host .box-row.center{width:inherit;display:table;margin:auto}:host .box-row.emphasize{font-weight:700;font-size:1.8rem}:host .box-row.side-by-side{max-width:250px;width:inherit;display:table;float:right;margin:0 5px}:host .above-viewport{padding:5px;box-sizing:border-box}:host .viewport{border-color:purple;box-sizing:border-box;border-top:1px solid #bcd;border-bottom:1px solid #bcd;min-height:150px;overflow:hidden;position:relative;margin:0 auto;box-sizing:border-box;cursor:pointer}:host .viewport img.content{margin:auto;display:table}:host .viewport video.content{margin:auto;display:table}:host .viewport .hover{position:absolute;background-color:#fff;top:-10000px;left:-10000px;opacity:0;pointer-events:none}:host .viewport:hover{border-color:purple}:host .below-viewport{padding:5px;box-sizing:border-box}.clearblock{clear:both;display:block;width:100%;height:0;padding:0;margin:0}:host:focus{border-color:#0ba}:host:hover{border-color:purple;box-shadow:1px 1px 11px purple}"]
+                    }] }
+        ];
+        /** @nocollapse */
+        FlexiblePreviewBoxComponent.ctorParameters = function () { return []; };
+        FlexiblePreviewBoxComponent.propDecorators = {
+            largeImage: [{ type: core.ViewChild, args: ["largeImage",] }],
+            onselect: [{ type: core.Output, args: ["onselect",] }],
+            item: [{ type: core.Input, args: ["item",] }],
+            viewport: [{ type: core.Input, args: ["viewport",] }],
+            metadata: [{ type: core.Input, args: ["metadata",] }],
+            effects: [{ type: core.Input, args: ["effects",] }]
+        };
+        return FlexiblePreviewBoxComponent;
+    }());
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+     */
+    var FlexiblePreviewBoxModule = (function () {
+        function FlexiblePreviewBoxModule() {
         }
-    };
-    FlexiblePreviewBoxComponent.prototype.ngOnChanges = function (changes) {
-    };
-    FlexiblePreviewBoxComponent.prototype.itemValue = function (item, hpath) {
-        var subitem = item;
-        hpath.map(function (subkey) {
-            if (subitem) {
-                subitem = subitem[subkey];
-            }
-        });
-        return subitem === undefined || subitem === null || subitem === "null" ? "" : String(subitem);
-    };
-    FlexiblePreviewBoxComponent.prototype.rowContent = function (row) {
-        var content = this.itemValue(this.item, row.key.split("."));
-        return (content !== undefined && content != null) ? content : '';
-    };
-    FlexiblePreviewBoxComponent.prototype.hoverOver = function (event) {
-        if (this.largeImage && this.effects.zoomOnHover && event.target.nodeName === 'IMG') {
-        }
-    };
-    FlexiblePreviewBoxComponent.prototype.hoverOut = function (event) {
-        if (this.largeImage) {
-            this.largeImage.nativeElement.style.opacity = 0;
-            this.largeImage.nativeElement.style.top = "-10000px";
-            this.largeImage.nativeElement.style.left = "-10000px";
-        }
-    };
-    FlexiblePreviewBoxComponent.prototype.hoverViewPort = function (event) {
-        if (this.largeImage && this.effects.zoomOnHover) {
-            this.largeImage.nativeElement.style.opacity = 1;
-            this.largeImage.nativeElement.style.top = -event.layerY + "px";
-            this.largeImage.nativeElement.style.left = -event.layerX + "px";
-        }
-    };
-    FlexiblePreviewBoxComponent.prototype.keyup = function (event) {
-        var code = event.which;
-        if (code === 13) {
-            event.target.click();
-        }
-    };
-    FlexiblePreviewBoxComponent.prototype.selectItem = function (event) {
-        this.onselect.emit({
-            item: this.item,
-            selected: true,
-            action: "redirect"
-        });
-    };
-    FlexiblePreviewBoxComponent.prototype.videoPlayed = function (trackingTime) {
-    };
-    FlexiblePreviewBoxComponent.prototype.videoPaused = function (trackingTime) {
-    };
-    FlexiblePreviewBoxComponent.prototype.videoEnded = function (trackingTime) {
-    };
-    FlexiblePreviewBoxComponent.prototype.onComponentChange = function (event) {
-        this.onselect.emit(event);
-    };
-    return FlexiblePreviewBoxComponent;
-}());
-FlexiblePreviewBoxComponent.decorators = [
-    { type: core.Component, args: [{
-                selector: 'flexible-preview-box',
-                template: "<div class=\"above-viewport\" [style.max-width]=\"effects.width ? (effects.width + 'px') : 'auto'\">\n    <div *ngFor=\"let row of aboveData\"\n        class=\"box-row\"\n        [style.margin-top]=\"row.spacing ? (row.spacing + 'px') : '0'\"\n        [class.left]=\"row.side === 'left'\"\n        [class.right]=\"row.side === 'right'\"\n        [class.center]=\"row.side === 'center'\"\n        [class.emphasize]=\"row.emphasize\"\n        [class.side-by-side]=\"row.sidebyside\">\n        <span class=\"label\" [class.off-screen]=\"row.hidelabel\" [textContent]=\"row.value\"></span>\n        <span class=\"value\" [intoName]=\"row.value\"\n            [intoId]=\"row.key + '-' + i\"\n            [into]=\"row.format\"\n            [intoData]=\"item\"\n            [rawContent]=\"rowContent(row)\"\n            [onComponentChange]=\"onComponentChange.bind(this)\"></span>\n    </div>\n    <div class=\"clearblock\"></div>\n</div>\n<div\n    class=\"viewport\"\n    tabindex=\"0\"\n    [title]=\"item.name\"\n    [style.width]=\"effects.width + 'px'\"\n    [style.height]=\"effects.height + 'px'\"\n    (keyup)=\"keyup($event)\"\n    (click)=\"selectItem($event)\"\n    (mouseout)=\"hoverOut($event)\"\n    (mouseover)=\"hoverOver($event)\"\n    (mousemove)=\"hoverViewPort($event)\">\n    <img  class=\"content\"\n            [src]=\"viewport.src.small\"\n            *ngIf=\"viewport.type === 'image'\" />\n    <img  class=\"hover\" #largeImage\n            [style.width]=\"(effects.width*2) + 'px'\"\n            [style.height]=\"(effects.height*2) + 'px'\"\n            [src]=\"viewport.src.large\"\n            *ngIf=\"effects.zoomOnHover\" />\n    <video\n        class=\"content\" #video\n        [style.width]=\"effects.width + 'px'\"\n        [style.height]=\"effects.height + 'px'\"\n        (play)=\"videoPlayed(video.currentTime)\"\n        (pause)=\"videoPaused(video.currentTime)\"\n        (ended)=\"videoEnded(video.currentTime)\"\n        *ngIf=\"viewport.type === 'video'\" controls>\n        <source [src]=\"viewport.src.mp4\" type=\"video/mp4\">\n        <source [src]=\"viewport.src.webm\" type=\"video/webm\">\n        <source [src]=\"viewport.src.egg\" type=\"video/ogg\">\n    </video>\n</div>\n<div class=\"below-viewport\" [style.max-width]=\"effects.width ? (effects.width + 'px') : 'auto'\">\n    <div *ngFor=\"let row of belowData\"\n        class=\"box-row\"\n        [style.margin-top]=\"row.spacing ? (row.spacing + 'px') : '0'\"\n        [class.left]=\"row.side === 'left'\"\n        [class.right]=\"row.side === 'right'\"\n        [class.center]=\"row.side === 'center'\"\n        [class.emphasize]=\"row.emphasize\"\n        [class.side-by-side]=\"row.sidebyside\">\n        <span class=\"label\" [class.off-screen]=\"row.hidelabel\" [textContent]=\"row.value\"></span>\n        <span class=\"value\" [intoName]=\"row.value\"\n            [intoId]=\"row.key + '-' + i\"\n            [into]=\"row.format\"\n            [intoData]=\"item\"\n            [rawContent]=\"rowContent(row)\"\n            [onComponentChange]=\"onComponentChange.bind(this)\"></span>\n    </div>\n    <div class=\"clearblock\"></div>\n</div>",
-                styles: [":host{background-color:#fff;border:1px solid #ced4da;-webkit-box-sizing:border-box;box-sizing:border-box;display:table;min-height:50px;padding:0;border-radius:5px;margin:5px}:host ::ng-deep .rating{color:red}:host .off-screen{display:block;float:left;height:0;overflow:hidden;text-indent:-99999px;width:0}:host .box-row{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}:host .box-row .label{float:left;font-weight:700;margin-right:5px}:host .box-row .value{float:left}:host .box-row.left{text-align:left}:host .box-row.right .label{font-weight:700;-webkit-box-flex:1;-ms-flex:1;flex:1;text-align:right}:host .box-row.center{width:inherit;display:table;margin:auto}:host .box-row.emphasize{font-weight:700;font-size:1.8rem}:host .box-row.side-by-side{max-width:250px;width:inherit;display:table;float:right;margin:0 5px}:host .above-viewport{padding:5px;-webkit-box-sizing:border-box;box-sizing:border-box}:host .viewport{border-color:purple;-webkit-box-sizing:border-box;box-sizing:border-box;border-top:1px solid #bcd;border-bottom:1px solid #bcd;min-height:150px;overflow:hidden;position:relative;margin:0 auto;box-sizing:border-box;cursor:pointer}:host .viewport img.content{margin:auto;display:table}:host .viewport video.content{margin:auto;display:table}:host .viewport .hover{position:absolute;background-color:#fff;top:-10000px;left:-10000px;opacity:0;pointer-events:none}:host .viewport:hover{border-color:purple}:host .below-viewport{padding:5px;-webkit-box-sizing:border-box;box-sizing:border-box}.clearblock{clear:both;display:block;width:100%;height:0;padding:0;margin:0}:host:focus{border-color:#0ba}:host:hover{border-color:purple;-webkit-box-shadow:1px 1px 11px purple;box-shadow:1px 1px 11px purple}"],
-            },] },
-];
-FlexiblePreviewBoxComponent.ctorParameters = function () { return []; };
-FlexiblePreviewBoxComponent.propDecorators = {
-    "largeImage": [{ type: core.ViewChild, args: ["largeImage",] },],
-    "onselect": [{ type: core.Output, args: ["onselect",] },],
-    "item": [{ type: core.Input, args: ["item",] },],
-    "viewport": [{ type: core.Input, args: ["viewport",] },],
-    "metadata": [{ type: core.Input, args: ["metadata",] },],
-    "effects": [{ type: core.Input, args: ["effects",] },],
-};
-var FlexiblePreviewBoxModule = /** @class */ (function () {
-    function FlexiblePreviewBoxModule() {
-    }
-    return FlexiblePreviewBoxModule;
-}());
-FlexiblePreviewBoxModule.decorators = [
-    { type: core.NgModule, args: [{
-                imports: [
-                    common.CommonModule,
-                    intoPipes.IntoPipeModule
-                ],
-                declarations: [
-                    FlexiblePreviewBoxComponent
-                ],
-                exports: [
-                    FlexiblePreviewBoxComponent
-                ],
-                entryComponents: [],
-                schemas: [core.CUSTOM_ELEMENTS_SCHEMA]
-            },] },
-];
-FlexiblePreviewBoxModule.ctorParameters = function () { return []; };
+        FlexiblePreviewBoxModule.decorators = [
+            { type: core.NgModule, args: [{
+                        imports: [
+                            common.CommonModule,
+                            intoPipes.IntoPipeModule
+                        ],
+                        declarations: [
+                            FlexiblePreviewBoxComponent
+                        ],
+                        exports: [
+                            FlexiblePreviewBoxComponent
+                        ],
+                        entryComponents: [],
+                        schemas: [core.CUSTOM_ELEMENTS_SCHEMA]
+                    },] }
+        ];
+        return FlexiblePreviewBoxModule;
+    }());
 
-exports.FlexiblePreviewBoxComponent = FlexiblePreviewBoxComponent;
-exports.FlexiblePreviewBoxModule = FlexiblePreviewBoxModule;
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+     */
 
-Object.defineProperty(exports, '__esModule', { value: true });
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+     */
 
+    exports.FlexiblePreviewBoxComponent = FlexiblePreviewBoxComponent;
+    exports.FlexiblePreviewBoxModule = FlexiblePreviewBoxModule;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
 })));
-//# sourceMappingURL=flexible-preview-box.umd.js.map
+
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmxleGlibGUtcHJldmlldy1ib3gudW1kLmpzLm1hcCIsInNvdXJjZXMiOlsibmc6Ly9mbGV4aWJsZS1wcmV2aWV3LWJveC9zcmMvYXBwL2ZsZXhpYmxlLXByZXZpZXctYm94L2NvbXBvbmVudHMvZmxleGlibGUtcHJldmlldy1ib3guY29tcG9uZW50LnRzIiwibmc6Ly9mbGV4aWJsZS1wcmV2aWV3LWJveC9zcmMvYXBwL2ZsZXhpYmxlLXByZXZpZXctYm94L2ZsZXhpYmxlLXByZXZpZXctYm94Lm1vZHVsZS50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJcclxuaW1wb3J0IHtcclxuICBDb21wb25lbnQsXHJcbiAgT25Jbml0LFxyXG4gIE9uQ2hhbmdlcyxcclxuICBJbnB1dCxcclxuICBPdXRwdXQsXHJcbiAgVmlld0NoaWxkLFxyXG4gIEVsZW1lbnRSZWYsXHJcbiAgRXZlbnRFbWl0dGVyXHJcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2ZsZXhpYmxlLXByZXZpZXctYm94JyxcclxuICB0ZW1wbGF0ZVVybDogJy4vZmxleGlibGUtcHJldmlldy1ib3guY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL2ZsZXhpYmxlLXByZXZpZXctYm94LmNvbXBvbmVudC5zY3NzJ10sXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBGbGV4aWJsZVByZXZpZXdCb3hDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uQ2hhbmdlcyB7XHJcbiAgXHJcbiAgYWJvdmVEYXRhID0gW107XHJcbiAgYmVsb3dEYXRhID0gW107XHJcbiAgXHJcbiAgQFZpZXdDaGlsZChcImxhcmdlSW1hZ2VcIilcclxuXHRwcml2YXRlIGxhcmdlSW1hZ2U6IEVsZW1lbnRSZWY7XHJcblxyXG4gIEBPdXRwdXQoXCJvbnNlbGVjdFwiKVxyXG4gIG9uc2VsZWN0PSBuZXcgRXZlbnRFbWl0dGVyKClcclxuXHJcbiAgQElucHV0KFwiaXRlbVwiKVxyXG4gIGl0ZW06IGFueTtcclxuXHJcbiAgQElucHV0KFwidmlld3BvcnRcIilcclxuICB2aWV3cG9ydDogYW55O1xyXG4gIFxyXG4gIEBJbnB1dChcIm1ldGFkYXRhXCIpXHJcbiAgbWV0YWRhdGE6IGFueVtdO1xyXG5cclxuICBASW5wdXQoXCJlZmZlY3RzXCIpXHJcbiAgZWZmZWN0czogYW55O1xyXG5cclxuICBjb25zdHJ1Y3RvcigpIHtcdCAgXHJcbiAgfVxyXG5cclxuICBuZ09uSW5pdCgpIHtcclxuICAgIGlmICh0aGlzLm1ldGFkYXRhKSB7XHJcbiAgICAgIHRoaXMubWV0YWRhdGEubWFwICggKGRhdGEpID0+IHtcclxuICAgICAgICBpZiAoZGF0YS5wb3NpdGlvbiA9PT0gJ2Fib3ZlJykge1xyXG4gICAgICAgICAgdGhpcy5hYm92ZURhdGEucHVzaChkYXRhKTtcclxuICAgICAgICB9ZWxzZSBpZiAoZGF0YS5wb3NpdGlvbiA9PT0gJ2JlbG93Jykge1xyXG4gICAgICAgICAgdGhpcy5iZWxvd0RhdGEucHVzaChkYXRhKTtcclxuICAgICAgICB9XHJcbiAgICAgIH0pXHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzKSB7XHJcblxyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSBpdGVtVmFsdWUoaXRlbSwgaHBhdGgpIHtcclxuXHRcdGxldCBzdWJpdGVtID0gaXRlbTtcclxuXHRcdGhwYXRoLm1hcCggKHN1YmtleSkgPT4ge1xyXG5cdFx0XHRpZiAoc3ViaXRlbSkge1xyXG5cdFx0XHRcdHN1Yml0ZW0gPSBzdWJpdGVtW3N1YmtleV07XHJcblx0XHRcdH1cclxuXHRcdH0pXHJcblx0XHRyZXR1cm4gc3ViaXRlbSA9PT0gdW5kZWZpbmVkIHx8IHN1Yml0ZW0gPT09IG51bGwgfHwgc3ViaXRlbSA9PT0gXCJudWxsXCIgPyBcIlwiIDogU3RyaW5nKHN1Yml0ZW0pO1xyXG5cdH1cclxuXHJcbiAgcm93Q29udGVudChyb3cpIHtcclxuICAgIGxldCBjb250ZW50ID0gdGhpcy5pdGVtVmFsdWUodGhpcy5pdGVtLCByb3cua2V5LnNwbGl0KFwiLlwiKSk7XHJcbiAgICByZXR1cm4gKGNvbnRlbnQgIT09IHVuZGVmaW5lZCAmJiBjb250ZW50ICE9IG51bGwpID8gY29udGVudCA6ICcnO1xyXG4gIH1cclxuXHJcbiAgaG92ZXJPdmVyKGV2ZW50KSB7XHJcblx0XHRpZiAodGhpcy5sYXJnZUltYWdlICYmIHRoaXMuZWZmZWN0cy56b29tT25Ib3ZlciAmJiBldmVudC50YXJnZXQubm9kZU5hbWUgPT09ICdJTUcnKSB7XHJcblxyXG4gICAgfVxyXG5cdH1cclxuXHRob3Zlck91dChldmVudCkge1xyXG5cdFx0aWYgKHRoaXMubGFyZ2VJbWFnZSkge1xyXG5cdFx0XHR0aGlzLmxhcmdlSW1hZ2UubmF0aXZlRWxlbWVudC5zdHlsZS5vcGFjaXR5ID0gMDtcclxuXHRcdFx0dGhpcy5sYXJnZUltYWdlLm5hdGl2ZUVsZW1lbnQuc3R5bGUudG9wID0gXCItMTAwMDBweFwiO1xyXG5cdFx0XHR0aGlzLmxhcmdlSW1hZ2UubmF0aXZlRWxlbWVudC5zdHlsZS5sZWZ0ID0gXCItMTAwMDBweFwiO1xyXG5cdFx0fVxyXG5cdH1cclxuXHRob3ZlclZpZXdQb3J0KGV2ZW50KSB7XHJcblx0XHRpZiAodGhpcy5sYXJnZUltYWdlICYmIHRoaXMuZWZmZWN0cy56b29tT25Ib3Zlcikge1xyXG5cdFx0XHR0aGlzLmxhcmdlSW1hZ2UubmF0aXZlRWxlbWVudC5zdHlsZS5vcGFjaXR5ID0gMTtcclxuXHRcdFx0dGhpcy5sYXJnZUltYWdlLm5hdGl2ZUVsZW1lbnQuc3R5bGUudG9wID0gLWV2ZW50LmxheWVyWSArIFwicHhcIjtcclxuXHRcdFx0dGhpcy5sYXJnZUltYWdlLm5hdGl2ZUVsZW1lbnQuc3R5bGUubGVmdCA9IC1ldmVudC5sYXllclggKyBcInB4XCI7XHJcblx0XHR9XHJcblx0fVxyXG5cclxuICBrZXl1cChldmVudCkge1xyXG4gICAgY29uc3QgY29kZSA9IGV2ZW50LndoaWNoO1xyXG5cclxuICAgIGlmIChjb2RlID09PSAxMykge1xyXG4gICAgICBldmVudC50YXJnZXQuY2xpY2soKTtcclxuICAgIH1cclxuICB9XHJcbiAgc2VsZWN0SXRlbShldmVudCkge1xyXG4gICAgdGhpcy5vbnNlbGVjdC5lbWl0KHtcclxuICAgICAgaXRlbTogdGhpcy5pdGVtLFxyXG4gICAgICBzZWxlY3RlZDogdHJ1ZSxcclxuICAgICAgYWN0aW9uOiBcInJlZGlyZWN0XCJcclxuICAgIH0pO1xyXG4gIH1cclxuICB2aWRlb1BsYXllZCh0cmFja2luZ1RpbWUpIHsgXHJcbiAgfVxyXG4gIHZpZGVvUGF1c2VkKHRyYWNraW5nVGltZSkge1xyXG5cclxuICB9XHJcbiAgdmlkZW9FbmRlZCh0cmFja2luZ1RpbWUpIHtcclxuXHJcbiAgfVxyXG4gIG9uQ29tcG9uZW50Q2hhbmdlKGV2ZW50KSB7XHJcbiAgICB0aGlzLm9uc2VsZWN0LmVtaXQoZXZlbnQpO1xyXG4gIH1cclxufVxyXG4iLCJpbXBvcnQgeyBOZ01vZHVsZSwgQ1VTVE9NX0VMRU1FTlRTX1NDSEVNQSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xyXG5pbXBvcnQgeyBJbnRvUGlwZU1vZHVsZSB9IGZyb20gJ2ludG8tcGlwZXMnO1xyXG5cclxuaW1wb3J0IHsgRmxleGlibGVQcmV2aWV3Qm94Q29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL2ZsZXhpYmxlLXByZXZpZXctYm94LmNvbXBvbmVudCc7XHJcblxyXG5ATmdNb2R1bGUoe1xyXG4gIGltcG9ydHM6IFtcclxuICAgIENvbW1vbk1vZHVsZSxcclxuICAgIEludG9QaXBlTW9kdWxlXHJcbiAgXSxcclxuICBkZWNsYXJhdGlvbnM6IFtcclxuICAgIEZsZXhpYmxlUHJldmlld0JveENvbXBvbmVudFxyXG4gIF0sXHJcbiAgZXhwb3J0czogW1xyXG4gICAgRmxleGlibGVQcmV2aWV3Qm94Q29tcG9uZW50XHJcbiAgXSxcclxuICBlbnRyeUNvbXBvbmVudHM6IFtcclxuICBdLFxyXG4gIHNjaGVtYXM6IFtDVVNUT01fRUxFTUVOVFNfU0NIRU1BXVxyXG59KVxyXG5cclxuZXhwb3J0IGNsYXNzIEZsZXhpYmxlUHJldmlld0JveE1vZHVsZSB7fVxyXG4iXSwibmFtZXMiOlsiRXZlbnRFbWl0dGVyIiwiQ29tcG9uZW50IiwiVmlld0NoaWxkIiwiT3V0cHV0IiwiSW5wdXQiLCJOZ01vZHVsZSIsIkNvbW1vbk1vZHVsZSIsIkludG9QaXBlTW9kdWxlIiwiQ1VTVE9NX0VMRU1FTlRTX1NDSEVNQSJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7OztBQUNBO1FBdUNFOzZCQXJCWSxFQUFFOzZCQUNGLEVBQUU7NEJBTUosSUFBSUEsaUJBQVksRUFBRTtTQWUzQjs7OztRQUVELDhDQUFROzs7WUFBUjtnQkFBQSxpQkFVQztnQkFUQyxJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUU7b0JBQ2pCLElBQUksQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFHLFVBQUMsSUFBSTt3QkFDdkIsSUFBSSxJQUFJLENBQUMsUUFBUSxLQUFLLE9BQU8sRUFBRTs0QkFDN0IsS0FBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7eUJBQzNCOzZCQUFLLElBQUksSUFBSSxDQUFDLFFBQVEsS0FBSyxPQUFPLEVBQUU7NEJBQ25DLEtBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO3lCQUMzQjtxQkFDRixDQUFDLENBQUE7aUJBQ0g7YUFDRjs7Ozs7UUFFRCxpREFBVzs7OztZQUFYLFVBQVksT0FBTzthQUVsQjs7Ozs7O1FBRU8sK0NBQVM7Ozs7O3NCQUFDLElBQUksRUFBRSxLQUFLOztnQkFDN0IsSUFBSSxPQUFPLEdBQUcsSUFBSSxDQUFDO2dCQUNuQixLQUFLLENBQUMsR0FBRyxDQUFFLFVBQUMsTUFBTTtvQkFDakIsSUFBSSxPQUFPLEVBQUU7d0JBQ1osT0FBTyxHQUFHLE9BQU8sQ0FBQyxNQUFNLENBQUMsQ0FBQztxQkFDMUI7aUJBQ0QsQ0FBQyxDQUFBO2dCQUNGLE9BQU8sT0FBTyxLQUFLLFNBQVMsSUFBSSxPQUFPLEtBQUssSUFBSSxJQUFJLE9BQU8sS0FBSyxNQUFNLEdBQUcsRUFBRSxHQUFHLE1BQU0sQ0FBQyxPQUFPLENBQUMsQ0FBQzs7Ozs7O1FBRzlGLGdEQUFVOzs7O1lBQVYsVUFBVyxHQUFHOztnQkFDWixJQUFJLE9BQU8sR0FBRyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsR0FBRyxDQUFDLEdBQUcsQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQztnQkFDNUQsT0FBTyxDQUFDLE9BQU8sS0FBSyxTQUFTLElBQUksT0FBTyxJQUFJLElBQUksSUFBSSxPQUFPLEdBQUcsRUFBRSxDQUFDO2FBQ2xFOzs7OztRQUVELCtDQUFTOzs7O1lBQVQsVUFBVSxLQUFLO2dCQUNmLElBQUksSUFBSSxDQUFDLFVBQVUsSUFBSSxJQUFJLENBQUMsT0FBTyxDQUFDLFdBQVcsSUFBSSxLQUFLLENBQUMsTUFBTSxDQUFDLFFBQVEsS0FBSyxLQUFLLEVBQUUsQ0FFakY7YUFDSDs7Ozs7UUFDRCw4Q0FBUTs7OztZQUFSLFVBQVMsS0FBSztnQkFDYixJQUFJLElBQUksQ0FBQyxVQUFVLEVBQUU7b0JBQ3BCLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxPQUFPLEdBQUcsQ0FBQyxDQUFDO29CQUNoRCxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsR0FBRyxHQUFHLFVBQVUsQ0FBQztvQkFDckQsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLElBQUksR0FBRyxVQUFVLENBQUM7aUJBQ3REO2FBQ0Q7Ozs7O1FBQ0QsbURBQWE7Ozs7WUFBYixVQUFjLEtBQUs7Z0JBQ2xCLElBQUksSUFBSSxDQUFDLFVBQVUsSUFBSSxJQUFJLENBQUMsT0FBTyxDQUFDLFdBQVcsRUFBRTtvQkFDaEQsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLE9BQU8sR0FBRyxDQUFDLENBQUM7b0JBQ2hELElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxHQUFHLEdBQUcsQ0FBQyxLQUFLLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQztvQkFDL0QsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLElBQUksR0FBRyxDQUFDLEtBQUssQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDO2lCQUNoRTthQUNEOzs7OztRQUVBLDJDQUFLOzs7O1lBQUwsVUFBTSxLQUFLOztnQkFDVCxJQUFNLElBQUksR0FBRyxLQUFLLENBQUMsS0FBSyxDQUFDO2dCQUV6QixJQUFJLElBQUksS0FBSyxFQUFFLEVBQUU7b0JBQ2YsS0FBSyxDQUFDLE1BQU0sQ0FBQyxLQUFLLEVBQUUsQ0FBQztpQkFDdEI7YUFDRjs7Ozs7UUFDRCxnREFBVTs7OztZQUFWLFVBQVcsS0FBSztnQkFDZCxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQztvQkFDakIsSUFBSSxFQUFFLElBQUksQ0FBQyxJQUFJO29CQUNmLFFBQVEsRUFBRSxJQUFJO29CQUNkLE1BQU0sRUFBRSxVQUFVO2lCQUNuQixDQUFDLENBQUM7YUFDSjs7Ozs7UUFDRCxpREFBVzs7OztZQUFYLFVBQVksWUFBWTthQUN2Qjs7Ozs7UUFDRCxpREFBVzs7OztZQUFYLFVBQVksWUFBWTthQUV2Qjs7Ozs7UUFDRCxnREFBVTs7OztZQUFWLFVBQVcsWUFBWTthQUV0Qjs7Ozs7UUFDRCx1REFBaUI7Ozs7WUFBakIsVUFBa0IsS0FBSztnQkFDckIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7YUFDM0I7O29CQTFHRkMsY0FBUyxTQUFDO3dCQUNULFFBQVEsRUFBRSxzQkFBc0I7d0JBQ2hDLDh3R0FBb0Q7O3FCQUVyRDs7Ozs7aUNBTUVDLGNBQVMsU0FBQyxZQUFZOytCQUd0QkMsV0FBTSxTQUFDLFVBQVU7MkJBR2pCQyxVQUFLLFNBQUMsTUFBTTsrQkFHWkEsVUFBSyxTQUFDLFVBQVU7K0JBR2hCQSxVQUFLLFNBQUMsVUFBVTs4QkFHaEJBLFVBQUssU0FBQyxTQUFTOzswQ0FyQ2xCOzs7Ozs7O0FDQUE7Ozs7b0JBTUNDLGFBQVEsU0FBQzt3QkFDUixPQUFPLEVBQUU7NEJBQ1BDLG1CQUFZOzRCQUNaQyx3QkFBYzt5QkFDZjt3QkFDRCxZQUFZLEVBQUU7NEJBQ1osMkJBQTJCO3lCQUM1Qjt3QkFDRCxPQUFPLEVBQUU7NEJBQ1AsMkJBQTJCO3lCQUM1Qjt3QkFDRCxlQUFlLEVBQUUsRUFDaEI7d0JBQ0QsT0FBTyxFQUFFLENBQUNDLDJCQUFzQixDQUFDO3FCQUNsQzs7dUNBcEJEOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7In0=

bundles/flexible-preview-box.umd.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("into-pipes")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/common","into-pipes"],t):t(e["flexible-preview-box"]={},e.ng.core,e.ng.common,e.intoPipes)}(this,function(e,t,o,n){"use strict";var i=function(){function e(){this.aboveData=[],this.belowData=[],this.onselect=new t.EventEmitter}return e.prototype.ngOnInit=function(){var t=this;this.metadata&&this.metadata.map(function(e){"above"===e.position?t.aboveData.push(e):"below"===e.position&&t.belowData.push(e)})},e.prototype.ngOnChanges=function(e){},e.prototype.itemValue=function(e,t){var o=e;return t.map(function(e){o&&(o=o[e])}),o===undefined||null===o||"null"===o?"":String(o)},e.prototype.rowContent=function(e){var t=this.itemValue(this.item,e.key.split("."));return t!==undefined&&null!=t?t:""},e.prototype.hoverOver=function(e){this.largeImage&&this.effects.zoomOnHover&&e.target.nodeName},e.prototype.hoverOut=function(e){this.largeImage&&(this.largeImage.nativeElement.style.opacity=0,this.largeImage.nativeElement.style.top="-10000px",this.largeImage.nativeElement.style.left="-10000px")},e.prototype.hoverViewPort=function(e){this.largeImage&&this.effects.zoomOnHover&&(this.largeImage.nativeElement.style.opacity=1,this.largeImage.nativeElement.style.top=-e.layerY+"px",this.largeImage.nativeElement.style.left=-e.layerX+"px")},e.prototype.keyup=function(e){13===e.which&&e.target.click()},e.prototype.selectItem=function(e){this.onselect.emit({item:this.item,selected:!0,action:"redirect"})},e.prototype.videoPlayed=function(e){},e.prototype.videoPaused=function(e){},e.prototype.videoEnded=function(e){},e.prototype.onComponentChange=function(e){this.onselect.emit(e)},e}();i.decorators=[{type:t.Component,args:[{selector:"flexible-preview-box",template:'<div class="above-viewport" [style.max-width]="effects.width ? (effects.width + \'px\') : \'auto\'">\n    <div *ngFor="let row of aboveData"\n        class="box-row"\n        [style.margin-top]="row.spacing ? (row.spacing + \'px\') : \'0\'"\n        [class.left]="row.side === \'left\'"\n        [class.right]="row.side === \'right\'"\n        [class.center]="row.side === \'center\'"\n        [class.emphasize]="row.emphasize"\n        [class.side-by-side]="row.sidebyside">\n        <span class="label" [class.off-screen]="row.hidelabel" [textContent]="row.value"></span>\n        <span class="value" [intoName]="row.value"\n            [intoId]="row.key + \'-\' + i"\n            [into]="row.format"\n            [intoData]="item"\n            [rawContent]="rowContent(row)"\n            [onComponentChange]="onComponentChange.bind(this)"></span>\n    </div>\n    <div class="clearblock"></div>\n</div>\n<div\n    class="viewport"\n    tabindex="0"\n    [title]="item.name"\n    [style.width]="effects.width + \'px\'"\n    [style.height]="effects.height + \'px\'"\n    (keyup)="keyup($event)"\n    (click)="selectItem($event)"\n    (mouseout)="hoverOut($event)"\n    (mouseover)="hoverOver($event)"\n    (mousemove)="hoverViewPort($event)">\n    <img  class="content"\n            [src]="viewport.src.small"\n            *ngIf="viewport.type === \'image\'" />\n    <img  class="hover" #largeImage\n            [style.width]="(effects.width*2) + \'px\'"\n            [style.height]="(effects.height*2) + \'px\'"\n            [src]="viewport.src.large"\n            *ngIf="effects.zoomOnHover" />\n    <video\n        class="content" #video\n        [style.width]="effects.width + \'px\'"\n        [style.height]="effects.height + \'px\'"\n        (play)="videoPlayed(video.currentTime)"\n        (pause)="videoPaused(video.currentTime)"\n        (ended)="videoEnded(video.currentTime)"\n        *ngIf="viewport.type === \'video\'" controls>\n        <source [src]="viewport.src.mp4" type="video/mp4">\n        <source [src]="viewport.src.webm" type="video/webm">\n        <source [src]="viewport.src.egg" type="video/ogg">\n    </video>\n</div>\n<div class="below-viewport" [style.max-width]="effects.width ? (effects.width + \'px\') : \'auto\'">\n    <div *ngFor="let row of belowData"\n        class="box-row"\n        [style.margin-top]="row.spacing ? (row.spacing + \'px\') : \'0\'"\n        [class.left]="row.side === \'left\'"\n        [class.right]="row.side === \'right\'"\n        [class.center]="row.side === \'center\'"\n        [class.emphasize]="row.emphasize"\n        [class.side-by-side]="row.sidebyside">\n        <span class="label" [class.off-screen]="row.hidelabel" [textContent]="row.value"></span>\n        <span class="value" [intoName]="row.value"\n            [intoId]="row.key + \'-\' + i"\n            [into]="row.format"\n            [intoData]="item"\n            [rawContent]="rowContent(row)"\n            [onComponentChange]="onComponentChange.bind(this)"></span>\n    </div>\n    <div class="clearblock"></div>\n</div>',styles:[":host{background-color:#fff;border:1px solid #ced4da;-webkit-box-sizing:border-box;box-sizing:border-box;display:table;min-height:50px;padding:0;border-radius:5px;margin:5px}:host ::ng-deep .rating{color:red}:host .off-screen{display:block;float:left;height:0;overflow:hidden;text-indent:-99999px;width:0}:host .box-row{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}:host .box-row .label{float:left;font-weight:700;margin-right:5px}:host .box-row .value{float:left}:host .box-row.left{text-align:left}:host .box-row.right .label{font-weight:700;-webkit-box-flex:1;-ms-flex:1;flex:1;text-align:right}:host .box-row.center{width:inherit;display:table;margin:auto}:host .box-row.emphasize{font-weight:700;font-size:1.8rem}:host .box-row.side-by-side{max-width:250px;width:inherit;display:table;float:right;margin:0 5px}:host .above-viewport{padding:5px;-webkit-box-sizing:border-box;box-sizing:border-box}:host .viewport{border-color:purple;-webkit-box-sizing:border-box;box-sizing:border-box;border-top:1px solid #bcd;border-bottom:1px solid #bcd;min-height:150px;overflow:hidden;position:relative;margin:0 auto;box-sizing:border-box;cursor:pointer}:host .viewport img.content{margin:auto;display:table}:host .viewport video.content{margin:auto;display:table}:host .viewport .hover{position:absolute;background-color:#fff;top:-10000px;left:-10000px;opacity:0;pointer-events:none}:host .viewport:hover{border-color:purple}:host .below-viewport{padding:5px;-webkit-box-sizing:border-box;box-sizing:border-box}.clearblock{clear:both;display:block;width:100%;height:0;padding:0;margin:0}:host:focus{border-color:#0ba}:host:hover{border-color:purple;-webkit-box-shadow:1px 1px 11px purple;box-shadow:1px 1px 11px purple}"]}]}],i.ctorParameters=function(){return[]},i.propDecorators={largeImage:[{type:t.ViewChild,args:["largeImage"]}],onselect:[{type:t.Output,args:["onselect"]}],item:[{type:t.Input,args:["item"]}],viewport:[{type:t.Input,args:["viewport"]}],metadata:[{type:t.Input,args:["metadata"]}],effects:[{type:t.Input,args:["effects"]}]};var r=function(){};r.decorators=[{type:t.NgModule,args:[{imports:[o.CommonModule,n.IntoPipeModule],declarations:[i],exports:[i],entryComponents:[],schemas:[t.CUSTOM_ELEMENTS_SCHEMA]}]}],r.ctorParameters=function(){return[]},e.FlexiblePreviewBoxComponent=i,e.FlexiblePreviewBoxModule=r,Object.defineProperty(e,"__esModule",{value:!0})});
-//# sourceMappingURL=flexible-preview-box.umd.min.js.map
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("into-pipes")):"function"==typeof define&&define.amd?define("flexible-preview-box",["exports","@angular/core","@angular/common","into-pipes"],t):t(e["flexible-preview-box"]={},e.ng.core,e.ng.common,e.intoPipes)}(this,function(e,t,o,r){"use strict";var n=function(){function e(){this.aboveData=[],this.belowData=[],this.onselect=new t.EventEmitter}return e.prototype.ngOnInit=function(){var t=this;this.metadata&&this.metadata.map(function(e){"above"===e.position?t.aboveData.push(e):"below"===e.position&&t.belowData.push(e)})},e.prototype.ngOnChanges=function(e){},e.prototype.itemValue=function(e,t){var o=e;return t.map(function(e){o&&(o=o[e])}),o===undefined||null===o||"null"===o?"":String(o)},e.prototype.rowContent=function(e){var t=this.itemValue(this.item,e.key.split("."));return t!==undefined&&null!=t?t:""},e.prototype.hoverOver=function(e){this.largeImage&&this.effects.zoomOnHover&&e.target.nodeName},e.prototype.hoverOut=function(e){this.largeImage&&(this.largeImage.nativeElement.style.opacity=0,this.largeImage.nativeElement.style.top="-10000px",this.largeImage.nativeElement.style.left="-10000px")},e.prototype.hoverViewPort=function(e){this.largeImage&&this.effects.zoomOnHover&&(this.largeImage.nativeElement.style.opacity=1,this.largeImage.nativeElement.style.top=-e.layerY+"px",this.largeImage.nativeElement.style.left=-e.layerX+"px")},e.prototype.keyup=function(e){13===e.which&&e.target.click()},e.prototype.selectItem=function(e){this.onselect.emit({item:this.item,selected:!0,action:"redirect"})},e.prototype.videoPlayed=function(e){},e.prototype.videoPaused=function(e){},e.prototype.videoEnded=function(e){},e.prototype.onComponentChange=function(e){this.onselect.emit(e)},e.decorators=[{type:t.Component,args:[{selector:"flexible-preview-box",template:'<div class="above-viewport" [style.max-width]="effects.width ? (effects.width + \'px\') : \'auto\'">\r\n    <div *ngFor="let row of aboveData; let i = index" \r\n        class="box-row"\r\n        [style.margin-top]="row.spacing ? (row.spacing + \'px\') : \'0\'"\r\n        [class.left]="row.side === \'left\'"\r\n        [class.right]="row.side === \'right\'"\r\n        [class.center]="row.side === \'center\'"\r\n        [class.emphasize]="row.emphasize"\r\n        [class.side-by-side]="row.sidebyside">\r\n        <span class="label" [class.off-screen]="row.hidelabel" [textContent]="row.value"></span>\r\n        <span class="value" [intoName]="row.value"\r\n            [intoId]="row.key + \'-\' + i"\r\n            [into]="row.format"\r\n            [intoData]="item"\r\n            [rawContent]="rowContent(row)"\r\n            [onComponentChange]="onComponentChange.bind(this)"></span>\r\n    </div>\r\n    <div class="clearblock"></div>\r\n</div>\r\n<div \r\n    class="viewport" \r\n    tabindex="0"\r\n    [title]="item.name"\r\n    [style.width]="effects.width + \'px\'" \r\n    [style.height]="effects.height + \'px\'"\r\n    (keyup)="keyup($event)"\r\n    (click)="selectItem($event)"\r\n    (mouseout)="hoverOut($event)"\r\n    (mouseover)="hoverOver($event)"\r\n    (mousemove)="hoverViewPort($event)">\r\n    <img  class="content" \r\n            [src]="viewport.src.small" \r\n            *ngIf="viewport.type === \'image\'" />\r\n    <img  class="hover" #largeImage\r\n            [style.width]="(effects.width*2) + \'px\'"\r\n            [style.height]="(effects.height*2) + \'px\'"\r\n            [src]="viewport.src.large" \r\n            *ngIf="effects.zoomOnHover" />\r\n    <video  \r\n        class="content" #video\r\n        [style.width]="effects.width + \'px\'" \r\n        [style.height]="effects.height + \'px\'"\r\n        (play)="videoPlayed(video.currentTime)"\r\n        (pause)="videoPaused(video.currentTime)"\r\n        (ended)="videoEnded(video.currentTime)"\r\n        *ngIf="viewport.type === \'video\'" controls>\r\n        <source [src]="viewport.src.mp4" type="video/mp4">\r\n        <source [src]="viewport.src.webm" type="video/webm">\r\n        <source [src]="viewport.src.egg" type="video/ogg">\r\n    </video>\r\n</div>\r\n<div class="below-viewport" [style.max-width]="effects.width ? (effects.width + \'px\') : \'auto\'">\r\n    <div *ngFor="let row of belowData; let i = index" \r\n        class="box-row"\r\n        [style.margin-top]="row.spacing ? (row.spacing + \'px\') : \'0\'"\r\n        [class.left]="row.side === \'left\'"\r\n        [class.right]="row.side === \'right\'"\r\n        [class.center]="row.side === \'center\'"\r\n        [class.emphasize]="row.emphasize"\r\n        [class.side-by-side]="row.sidebyside">\r\n        <span class="label" [class.off-screen]="row.hidelabel" [textContent]="row.value"></span>\r\n        <span class="value" [intoName]="row.value"\r\n            [intoId]="row.key + \'-\' + i"\r\n            [into]="row.format"\r\n            [intoData]="item"\r\n            [rawContent]="rowContent(row)"\r\n            [onComponentChange]="onComponentChange.bind(this)"></span>\r\n    </div>\r\n    <div class="clearblock"></div>\r\n</div>',styles:[":host{background-color:#fff;border:1px solid #ced4da;box-sizing:border-box;display:table;min-height:50px;padding:0;border-radius:5px;margin:5px}:host ::ng-deep .rating{color:red}:host .off-screen{display:block;float:left;height:0;overflow:hidden;text-indent:-99999px;width:0}:host .box-row{display:flex;width:100%}:host .box-row .label{float:left;font-weight:700;margin-right:5px}:host .box-row .value{float:left}:host .box-row.left{text-align:left}:host .box-row.right .label{font-weight:700;flex:1;text-align:right}:host .box-row.center{width:inherit;display:table;margin:auto}:host .box-row.emphasize{font-weight:700;font-size:1.8rem}:host .box-row.side-by-side{max-width:250px;width:inherit;display:table;float:right;margin:0 5px}:host .above-viewport{padding:5px;box-sizing:border-box}:host .viewport{border-color:purple;box-sizing:border-box;border-top:1px solid #bcd;border-bottom:1px solid #bcd;min-height:150px;overflow:hidden;position:relative;margin:0 auto;box-sizing:border-box;cursor:pointer}:host .viewport img.content{margin:auto;display:table}:host .viewport video.content{margin:auto;display:table}:host .viewport .hover{position:absolute;background-color:#fff;top:-10000px;left:-10000px;opacity:0;pointer-events:none}:host .viewport:hover{border-color:purple}:host .below-viewport{padding:5px;box-sizing:border-box}.clearblock{clear:both;display:block;width:100%;height:0;padding:0;margin:0}:host:focus{border-color:#0ba}:host:hover{border-color:purple;box-shadow:1px 1px 11px purple}"]}]}],e.ctorParameters=function(){return[]},e.propDecorators={largeImage:[{type:t.ViewChild,args:["largeImage"]}],onselect:[{type:t.Output,args:["onselect"]}],item:[{type:t.Input,args:["item"]}],viewport:[{type:t.Input,args:["viewport"]}],metadata:[{type:t.Input,args:["metadata"]}],effects:[{type:t.Input,args:["effects"]}]},e}(),i=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[o.CommonModule,r.IntoPipeModule],declarations:[n],exports:[n],entryComponents:[],schemas:[t.CUSTOM_ELEMENTS_SCHEMA]}]}],e}();e.FlexiblePreviewBoxComponent=n,e.FlexiblePreviewBoxModule=i,Object.defineProperty(e,"__esModule",{value:!0})});
+//# sourceMappingURL=flexible-preview-box.umd.min.js.map

esm2015/flexible-preview-box.js

@@ -1,261 +0,10 @@
-import { Component, Input, Output, ViewChild, EventEmitter, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { IntoPipeModule } from 'into-pipes';
-
 /**
  * @fileoverview added by tsickle
- * @suppress {checkTypes} checked by tsc
+ * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
  */
-class FlexiblePreviewBoxComponent {
-    constructor() {
-        this.aboveData = [];
-        this.belowData = [];
-        this.onselect = new EventEmitter();
-    }
-    /**
-     * @return {?}
-     */
-    ngOnInit() {
-        if (this.metadata) {
-            this.metadata.map((data) => {
-                if (data.position === 'above') {
-                    this.aboveData.push(data);
-                }
-                else if (data.position === 'below') {
-                    this.belowData.push(data);
-                }
-            });
-        }
-    }
-    /**
-     * @param {?} changes
-     * @return {?}
-     */
-    ngOnChanges(changes) {
-    }
-    /**
-     * @param {?} item
-     * @param {?} hpath
-     * @return {?}
-     */
-    itemValue(item, hpath) {
-        let /** @type {?} */ subitem = item;
-        hpath.map((subkey) => {
-            if (subitem) {
-                subitem = subitem[subkey];
-            }
-        });
-        return subitem === undefined || subitem === null || subitem === "null" ? "" : String(subitem);
-    }
-    /**
-     * @param {?} row
-     * @return {?}
-     */
-    rowContent(row) {
-        let /** @type {?} */ content = this.itemValue(this.item, row.key.split("."));
-        return (content !== undefined && content != null) ? content : '';
-    }
-    /**
-     * @param {?} event
-     * @return {?}
-     */
-    hoverOver(event) {
-        if (this.largeImage && this.effects.zoomOnHover && event.target.nodeName === 'IMG') {
-        }
-    }
-    /**
-     * @param {?} event
-     * @return {?}
-     */
-    hoverOut(event) {
-        if (this.largeImage) {
-            this.largeImage.nativeElement.style.opacity = 0;
-            this.largeImage.nativeElement.style.top = "-10000px";
-            this.largeImage.nativeElement.style.left = "-10000px";
-        }
-    }
-    /**
-     * @param {?} event
-     * @return {?}
-     */
-    hoverViewPort(event) {
-        if (this.largeImage && this.effects.zoomOnHover) {
-            this.largeImage.nativeElement.style.opacity = 1;
-            this.largeImage.nativeElement.style.top = -event.layerY + "px";
-            this.largeImage.nativeElement.style.left = -event.layerX + "px";
-        }
-    }
-    /**
-     * @param {?} event
-     * @return {?}
-     */
-    keyup(event) {
-        const /** @type {?} */ code = event.which;
-        if (code === 13) {
-            event.target.click();
-        }
-    }
-    /**
-     * @param {?} event
-     * @return {?}
-     */
-    selectItem(event) {
-        this.onselect.emit({
-            item: this.item,
-            selected: true,
-            action: "redirect"
-        });
-    }
-    /**
-     * @param {?} trackingTime
-     * @return {?}
-     */
-    videoPlayed(trackingTime) {
-    }
-    /**
-     * @param {?} trackingTime
-     * @return {?}
-     */
-    videoPaused(trackingTime) {
-    }
-    /**
-     * @param {?} trackingTime
-     * @return {?}
-     */
-    videoEnded(trackingTime) {
-    }
-    /**
-     * @param {?} event
-     * @return {?}
-     */
-    onComponentChange(event) {
-        this.onselect.emit(event);
-    }
-}
-FlexiblePreviewBoxComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'flexible-preview-box',
-                template: `<div class="above-viewport" [style.max-width]="effects.width ? (effects.width + 'px') : 'auto'">
-    <div *ngFor="let row of aboveData"
-        class="box-row"
-        [style.margin-top]="row.spacing ? (row.spacing + 'px') : '0'"
-        [class.left]="row.side === 'left'"
-        [class.right]="row.side === 'right'"
-        [class.center]="row.side === 'center'"
-        [class.emphasize]="row.emphasize"
-        [class.side-by-side]="row.sidebyside">
-        <span class="label" [class.off-screen]="row.hidelabel" [textContent]="row.value"></span>
-        <span class="value" [intoName]="row.value"
-            [intoId]="row.key + '-' + i"
-            [into]="row.format"
-            [intoData]="item"
-            [rawContent]="rowContent(row)"
-            [onComponentChange]="onComponentChange.bind(this)"></span>
-    </div>
-    <div class="clearblock"></div>
-</div>
-<div
-    class="viewport"
-    tabindex="0"
-    [title]="item.name"
-    [style.width]="effects.width + 'px'"
-    [style.height]="effects.height + 'px'"
-    (keyup)="keyup($event)"
-    (click)="selectItem($event)"
-    (mouseout)="hoverOut($event)"
-    (mouseover)="hoverOver($event)"
-    (mousemove)="hoverViewPort($event)">
-    <img  class="content"
-            [src]="viewport.src.small"
-            *ngIf="viewport.type === 'image'" />
-    <img  class="hover" #largeImage
-            [style.width]="(effects.width*2) + 'px'"
-            [style.height]="(effects.height*2) + 'px'"
-            [src]="viewport.src.large"
-            *ngIf="effects.zoomOnHover" />
-    <video
-        class="content" #video
-        [style.width]="effects.width + 'px'"
-        [style.height]="effects.height + 'px'"
-        (play)="videoPlayed(video.currentTime)"
-        (pause)="videoPaused(video.currentTime)"
-        (ended)="videoEnded(video.currentTime)"
-        *ngIf="viewport.type === 'video'" controls>
-        <source [src]="viewport.src.mp4" type="video/mp4">
-        <source [src]="viewport.src.webm" type="video/webm">
-        <source [src]="viewport.src.egg" type="video/ogg">
-    </video>
-</div>
-<div class="below-viewport" [style.max-width]="effects.width ? (effects.width + 'px') : 'auto'">
-    <div *ngFor="let row of belowData"
-        class="box-row"
-        [style.margin-top]="row.spacing ? (row.spacing + 'px') : '0'"
-        [class.left]="row.side === 'left'"
-        [class.right]="row.side === 'right'"
-        [class.center]="row.side === 'center'"
-        [class.emphasize]="row.emphasize"
-        [class.side-by-side]="row.sidebyside">
-        <span class="label" [class.off-screen]="row.hidelabel" [textContent]="row.value"></span>
-        <span class="value" [intoName]="row.value"
-            [intoId]="row.key + '-' + i"
-            [into]="row.format"
-            [intoData]="item"
-            [rawContent]="rowContent(row)"
-            [onComponentChange]="onComponentChange.bind(this)"></span>
-    </div>
-    <div class="clearblock"></div>
-</div>`,
-                styles: [`:host{background-color:#fff;border:1px solid #ced4da;-webkit-box-sizing:border-box;box-sizing:border-box;display:table;min-height:50px;padding:0;border-radius:5px;margin:5px}:host ::ng-deep .rating{color:red}:host .off-screen{display:block;float:left;height:0;overflow:hidden;text-indent:-99999px;width:0}:host .box-row{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}:host .box-row .label{float:left;font-weight:700;margin-right:5px}:host .box-row .value{float:left}:host .box-row.left{text-align:left}:host .box-row.right .label{font-weight:700;-webkit-box-flex:1;-ms-flex:1;flex:1;text-align:right}:host .box-row.center{width:inherit;display:table;margin:auto}:host .box-row.emphasize{font-weight:700;font-size:1.8rem}:host .box-row.side-by-side{max-width:250px;width:inherit;display:table;float:right;margin:0 5px}:host .above-viewport{padding:5px;-webkit-box-sizing:border-box;box-sizing:border-box}:host .viewport{border-color:purple;-webkit-box-sizing:border-box;box-sizing:border-box;border-top:1px solid #bcd;border-bottom:1px solid #bcd;min-height:150px;overflow:hidden;position:relative;margin:0 auto;box-sizing:border-box;cursor:pointer}:host .viewport img.content{margin:auto;display:table}:host .viewport video.content{margin:auto;display:table}:host .viewport .hover{position:absolute;background-color:#fff;top:-10000px;left:-10000px;opacity:0;pointer-events:none}:host .viewport:hover{border-color:purple}:host .below-viewport{padding:5px;-webkit-box-sizing:border-box;box-sizing:border-box}.clearblock{clear:both;display:block;width:100%;height:0;padding:0;margin:0}:host:focus{border-color:#0ba}:host:hover{border-color:purple;-webkit-box-shadow:1px 1px 11px purple;box-shadow:1px 1px 11px purple}`],
-            },] },
-];
-/** @nocollapse */
-FlexiblePreviewBoxComponent.ctorParameters = () => [];
-FlexiblePreviewBoxComponent.propDecorators = {
-    "largeImage": [{ type: ViewChild, args: ["largeImage",] },],
-    "onselect": [{ type: Output, args: ["onselect",] },],
-    "item": [{ type: Input, args: ["item",] },],
-    "viewport": [{ type: Input, args: ["viewport",] },],
-    "metadata": [{ type: Input, args: ["metadata",] },],
-    "effects": [{ type: Input, args: ["effects",] },],
-};
-
 /**
- * @fileoverview added by tsickle
- * @suppress {checkTypes} checked by tsc
- */
-class FlexiblePreviewBoxModule {
-}
-FlexiblePreviewBoxModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    IntoPipeModule
-                ],
-                declarations: [
-                    FlexiblePreviewBoxComponent
-                ],
-                exports: [
-                    FlexiblePreviewBoxComponent
-                ],
-                entryComponents: [],
-                schemas: [CUSTOM_ELEMENTS_SCHEMA]
-            },] },
-];
-/** @nocollapse */
-FlexiblePreviewBoxModule.ctorParameters = () => [];
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes} checked by tsc
- */
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes} checked by tsc
- */
-/**
  * Generated bundle index. Do not edit.
  */
+export { FlexiblePreviewBoxComponent, FlexiblePreviewBoxModule } from './public_api';
 
-export { FlexiblePreviewBoxComponent, FlexiblePreviewBoxModule };
-//# sourceMappingURL=flexible-preview-box.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmxleGlibGUtcHJldmlldy1ib3guanMiLCJzb3VyY2VSb290Ijoibmc6Ly9mbGV4aWJsZS1wcmV2aWV3LWJveC8iLCJzb3VyY2VzIjpbImZsZXhpYmxlLXByZXZpZXctYm94LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFJQSxzRUFBYyxjQUFjLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdlbmVyYXRlZCBidW5kbGUgaW5kZXguIERvIG5vdCBlZGl0LlxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vcHVibGljX2FwaSc7XG4iXX0=

esm5/flexible-preview-box.js

@@ -1,121 +0,10 @@
-import { Component, Input, Output, ViewChild, EventEmitter, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { IntoPipeModule } from 'into-pipes';
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ */
+/**
+ * Generated bundle index. Do not edit.
+ */
+export { FlexiblePreviewBoxComponent, FlexiblePreviewBoxModule } from './public_api';
 
-var FlexiblePreviewBoxComponent = /** @class */ (function () {
-    function FlexiblePreviewBoxComponent() {
-        this.aboveData = [];
-        this.belowData = [];
-        this.onselect = new EventEmitter();
-    }
-    FlexiblePreviewBoxComponent.prototype.ngOnInit = function () {
-        var _this = this;
-        if (this.metadata) {
-            this.metadata.map(function (data) {
-                if (data.position === 'above') {
-                    _this.aboveData.push(data);
-                }
-                else if (data.position === 'below') {
-                    _this.belowData.push(data);
-                }
-            });
-        }
-    };
-    FlexiblePreviewBoxComponent.prototype.ngOnChanges = function (changes) {
-    };
-    FlexiblePreviewBoxComponent.prototype.itemValue = function (item, hpath) {
-        var subitem = item;
-        hpath.map(function (subkey) {
-            if (subitem) {
-                subitem = subitem[subkey];
-            }
-        });
-        return subitem === undefined || subitem === null || subitem === "null" ? "" : String(subitem);
-    };
-    FlexiblePreviewBoxComponent.prototype.rowContent = function (row) {
-        var content = this.itemValue(this.item, row.key.split("."));
-        return (content !== undefined && content != null) ? content : '';
-    };
-    FlexiblePreviewBoxComponent.prototype.hoverOver = function (event) {
-        if (this.largeImage && this.effects.zoomOnHover && event.target.nodeName === 'IMG') {
-        }
-    };
-    FlexiblePreviewBoxComponent.prototype.hoverOut = function (event) {
-        if (this.largeImage) {
-            this.largeImage.nativeElement.style.opacity = 0;
-            this.largeImage.nativeElement.style.top = "-10000px";
-            this.largeImage.nativeElement.style.left = "-10000px";
-        }
-    };
-    FlexiblePreviewBoxComponent.prototype.hoverViewPort = function (event) {
-        if (this.largeImage && this.effects.zoomOnHover) {
-            this.largeImage.nativeElement.style.opacity = 1;
-            this.largeImage.nativeElement.style.top = -event.layerY + "px";
-            this.largeImage.nativeElement.style.left = -event.layerX + "px";
-        }
-    };
-    FlexiblePreviewBoxComponent.prototype.keyup = function (event) {
-        var code = event.which;
-        if (code === 13) {
-            event.target.click();
-        }
-    };
-    FlexiblePreviewBoxComponent.prototype.selectItem = function (event) {
-        this.onselect.emit({
-            item: this.item,
-            selected: true,
-            action: "redirect"
-        });
-    };
-    FlexiblePreviewBoxComponent.prototype.videoPlayed = function (trackingTime) {
-    };
-    FlexiblePreviewBoxComponent.prototype.videoPaused = function (trackingTime) {
-    };
-    FlexiblePreviewBoxComponent.prototype.videoEnded = function (trackingTime) {
-    };
-    FlexiblePreviewBoxComponent.prototype.onComponentChange = function (event) {
-        this.onselect.emit(event);
-    };
-    return FlexiblePreviewBoxComponent;
-}());
-FlexiblePreviewBoxComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'flexible-preview-box',
-                template: "<div class=\"above-viewport\" [style.max-width]=\"effects.width ? (effects.width + 'px') : 'auto'\">\n    <div *ngFor=\"let row of aboveData\"\n        class=\"box-row\"\n        [style.margin-top]=\"row.spacing ? (row.spacing + 'px') : '0'\"\n        [class.left]=\"row.side === 'left'\"\n        [class.right]=\"row.side === 'right'\"\n        [class.center]=\"row.side === 'center'\"\n        [class.emphasize]=\"row.emphasize\"\n        [class.side-by-side]=\"row.sidebyside\">\n        <span class=\"label\" [class.off-screen]=\"row.hidelabel\" [textContent]=\"row.value\"></span>\n        <span class=\"value\" [intoName]=\"row.value\"\n            [intoId]=\"row.key + '-' + i\"\n            [into]=\"row.format\"\n            [intoData]=\"item\"\n            [rawContent]=\"rowContent(row)\"\n            [onComponentChange]=\"onComponentChange.bind(this)\"></span>\n    </div>\n    <div class=\"clearblock\"></div>\n</div>\n<div\n    class=\"viewport\"\n    tabindex=\"0\"\n    [title]=\"item.name\"\n    [style.width]=\"effects.width + 'px'\"\n    [style.height]=\"effects.height + 'px'\"\n    (keyup)=\"keyup($event)\"\n    (click)=\"selectItem($event)\"\n    (mouseout)=\"hoverOut($event)\"\n    (mouseover)=\"hoverOver($event)\"\n    (mousemove)=\"hoverViewPort($event)\">\n    <img  class=\"content\"\n            [src]=\"viewport.src.small\"\n            *ngIf=\"viewport.type === 'image'\" />\n    <img  class=\"hover\" #largeImage\n            [style.width]=\"(effects.width*2) + 'px'\"\n            [style.height]=\"(effects.height*2) + 'px'\"\n            [src]=\"viewport.src.large\"\n            *ngIf=\"effects.zoomOnHover\" />\n    <video\n        class=\"content\" #video\n        [style.width]=\"effects.width + 'px'\"\n        [style.height]=\"effects.height + 'px'\"\n        (play)=\"videoPlayed(video.currentTime)\"\n        (pause)=\"videoPaused(video.currentTime)\"\n        (ended)=\"videoEnded(video.currentTime)\"\n        *ngIf=\"viewport.type === 'video'\" controls>\n        <source [src]=\"viewport.src.mp4\" type=\"video/mp4\">\n        <source [src]=\"viewport.src.webm\" type=\"video/webm\">\n        <source [src]=\"viewport.src.egg\" type=\"video/ogg\">\n    </video>\n</div>\n<div class=\"below-viewport\" [style.max-width]=\"effects.width ? (effects.width + 'px') : 'auto'\">\n    <div *ngFor=\"let row of belowData\"\n        class=\"box-row\"\n        [style.margin-top]=\"row.spacing ? (row.spacing + 'px') : '0'\"\n        [class.left]=\"row.side === 'left'\"\n        [class.right]=\"row.side === 'right'\"\n        [class.center]=\"row.side === 'center'\"\n        [class.emphasize]=\"row.emphasize\"\n        [class.side-by-side]=\"row.sidebyside\">\n        <span class=\"label\" [class.off-screen]=\"row.hidelabel\" [textContent]=\"row.value\"></span>\n        <span class=\"value\" [intoName]=\"row.value\"\n            [intoId]=\"row.key + '-' + i\"\n            [into]=\"row.format\"\n            [intoData]=\"item\"\n            [rawContent]=\"rowContent(row)\"\n            [onComponentChange]=\"onComponentChange.bind(this)\"></span>\n    </div>\n    <div class=\"clearblock\"></div>\n</div>",
-                styles: [":host{background-color:#fff;border:1px solid #ced4da;-webkit-box-sizing:border-box;box-sizing:border-box;display:table;min-height:50px;padding:0;border-radius:5px;margin:5px}:host ::ng-deep .rating{color:red}:host .off-screen{display:block;float:left;height:0;overflow:hidden;text-indent:-99999px;width:0}:host .box-row{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}:host .box-row .label{float:left;font-weight:700;margin-right:5px}:host .box-row .value{float:left}:host .box-row.left{text-align:left}:host .box-row.right .label{font-weight:700;-webkit-box-flex:1;-ms-flex:1;flex:1;text-align:right}:host .box-row.center{width:inherit;display:table;margin:auto}:host .box-row.emphasize{font-weight:700;font-size:1.8rem}:host .box-row.side-by-side{max-width:250px;width:inherit;display:table;float:right;margin:0 5px}:host .above-viewport{padding:5px;-webkit-box-sizing:border-box;box-sizing:border-box}:host .viewport{border-color:purple;-webkit-box-sizing:border-box;box-sizing:border-box;border-top:1px solid #bcd;border-bottom:1px solid #bcd;min-height:150px;overflow:hidden;position:relative;margin:0 auto;box-sizing:border-box;cursor:pointer}:host .viewport img.content{margin:auto;display:table}:host .viewport video.content{margin:auto;display:table}:host .viewport .hover{position:absolute;background-color:#fff;top:-10000px;left:-10000px;opacity:0;pointer-events:none}:host .viewport:hover{border-color:purple}:host .below-viewport{padding:5px;-webkit-box-sizing:border-box;box-sizing:border-box}.clearblock{clear:both;display:block;width:100%;height:0;padding:0;margin:0}:host:focus{border-color:#0ba}:host:hover{border-color:purple;-webkit-box-shadow:1px 1px 11px purple;box-shadow:1px 1px 11px purple}"],
-            },] },
-];
-FlexiblePreviewBoxComponent.ctorParameters = function () { return []; };
-FlexiblePreviewBoxComponent.propDecorators = {
-    "largeImage": [{ type: ViewChild, args: ["largeImage",] },],
-    "onselect": [{ type: Output, args: ["onselect",] },],
-    "item": [{ type: Input, args: ["item",] },],
-    "viewport": [{ type: Input, args: ["viewport",] },],
-    "metadata": [{ type: Input, args: ["metadata",] },],
-    "effects": [{ type: Input, args: ["effects",] },],
-};
-var FlexiblePreviewBoxModule = /** @class */ (function () {
-    function FlexiblePreviewBoxModule() {
-    }
-    return FlexiblePreviewBoxModule;
-}());
-FlexiblePreviewBoxModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    IntoPipeModule
-                ],
-                declarations: [
-                    FlexiblePreviewBoxComponent
-                ],
-                exports: [
-                    FlexiblePreviewBoxComponent
-                ],
-                entryComponents: [],
-                schemas: [CUSTOM_ELEMENTS_SCHEMA]
-            },] },
-];
-FlexiblePreviewBoxModule.ctorParameters = function () { return []; };
-
-export { FlexiblePreviewBoxComponent, FlexiblePreviewBoxModule };
-//# sourceMappingURL=flexible-preview-box.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmxleGlibGUtcHJldmlldy1ib3guanMiLCJzb3VyY2VSb290Ijoibmc6Ly9mbGV4aWJsZS1wcmV2aWV3LWJveC8iLCJzb3VyY2VzIjpbImZsZXhpYmxlLXByZXZpZXctYm94LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFJQSxzRUFBYyxjQUFjLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdlbmVyYXRlZCBidW5kbGUgaW5kZXguIERvIG5vdCBlZGl0LlxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vcHVibGljX2FwaSc7XG4iXX0=

flexible-preview-box.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":4,"metadata":{"FlexiblePreviewBoxComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"flexible-preview-box","template":"<div class=\"above-viewport\" [style.max-width]=\"effects.width ? (effects.width + 'px') : 'auto'\">\n    <div *ngFor=\"let row of aboveData\" \n        class=\"box-row\"\n        [style.margin-top]=\"row.spacing ? (row.spacing + 'px') : '0'\"\n        [class.left]=\"row.side === 'left'\"\n        [class.right]=\"row.side === 'right'\"\n        [class.center]=\"row.side === 'center'\"\n        [class.emphasize]=\"row.emphasize\"\n        [class.side-by-side]=\"row.sidebyside\">\n        <span class=\"label\" [class.off-screen]=\"row.hidelabel\" [textContent]=\"row.value\"></span>\n        <span class=\"value\" [intoName]=\"row.value\"\n            [intoId]=\"row.key + '-' + i\"\n            [into]=\"row.format\"\n            [intoData]=\"item\"\n            [rawContent]=\"rowContent(row)\"\n            [onComponentChange]=\"onComponentChange.bind(this)\"></span>\n    </div>\n    <div class=\"clearblock\"></div>\n</div>\n<div \n    class=\"viewport\" \n    tabindex=\"0\"\n    [title]=\"item.name\"\n    [style.width]=\"effects.width + 'px'\" \n    [style.height]=\"effects.height + 'px'\"\n    (keyup)=\"keyup($event)\"\n    (click)=\"selectItem($event)\"\n    (mouseout)=\"hoverOut($event)\"\n    (mouseover)=\"hoverOver($event)\"\n    (mousemove)=\"hoverViewPort($event)\">\n    <img  class=\"content\" \n            [src]=\"viewport.src.small\" \n            *ngIf=\"viewport.type === 'image'\" />\n    <img  class=\"hover\" #largeImage\n            [style.width]=\"(effects.width*2) + 'px'\"\n            [style.height]=\"(effects.height*2) + 'px'\"\n            [src]=\"viewport.src.large\" \n            *ngIf=\"effects.zoomOnHover\" />\n    <video  \n        class=\"content\" #video\n        [style.width]=\"effects.width + 'px'\" \n        [style.height]=\"effects.height + 'px'\"\n        (play)=\"videoPlayed(video.currentTime)\"\n        (pause)=\"videoPaused(video.currentTime)\"\n        (ended)=\"videoEnded(video.currentTime)\"\n        *ngIf=\"viewport.type === 'video'\" controls>\n        <source [src]=\"viewport.src.mp4\" type=\"video/mp4\">\n        <source [src]=\"viewport.src.webm\" type=\"video/webm\">\n        <source [src]=\"viewport.src.egg\" type=\"video/ogg\">\n    </video>\n</div>\n<div class=\"below-viewport\" [style.max-width]=\"effects.width ? (effects.width + 'px') : 'auto'\">\n    <div *ngFor=\"let row of belowData\" \n        class=\"box-row\"\n        [style.margin-top]=\"row.spacing ? (row.spacing + 'px') : '0'\"\n        [class.left]=\"row.side === 'left'\"\n        [class.right]=\"row.side === 'right'\"\n        [class.center]=\"row.side === 'center'\"\n        [class.emphasize]=\"row.emphasize\"\n        [class.side-by-side]=\"row.sidebyside\">\n        <span class=\"label\" [class.off-screen]=\"row.hidelabel\" [textContent]=\"row.value\"></span>\n        <span class=\"value\" [intoName]=\"row.value\"\n            [intoId]=\"row.key + '-' + i\"\n            [into]=\"row.format\"\n            [intoData]=\"item\"\n            [rawContent]=\"rowContent(row)\"\n            [onComponentChange]=\"onComponentChange.bind(this)\"></span>\n    </div>\n    <div class=\"clearblock\"></div>\n</div>","styles":[":host{background-color:#fff;border:1px solid #ced4da;-webkit-box-sizing:border-box;box-sizing:border-box;display:table;min-height:50px;padding:0;border-radius:5px;margin:5px}:host ::ng-deep .rating{color:red}:host .off-screen{display:block;float:left;height:0;overflow:hidden;text-indent:-99999px;width:0}:host .box-row{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}:host .box-row .label{float:left;font-weight:700;margin-right:5px}:host .box-row .value{float:left}:host .box-row.left{text-align:left}:host .box-row.right .label{font-weight:700;-webkit-box-flex:1;-ms-flex:1;flex:1;text-align:right}:host .box-row.center{width:inherit;display:table;margin:auto}:host .box-row.emphasize{font-weight:700;font-size:1.8rem}:host .box-row.side-by-side{max-width:250px;width:inherit;display:table;float:right;margin:0 5px}:host .above-viewport{padding:5px;-webkit-box-sizing:border-box;box-sizing:border-box}:host .viewport{border-color:purple;-webkit-box-sizing:border-box;box-sizing:border-box;border-top:1px solid #bcd;border-bottom:1px solid #bcd;min-height:150px;overflow:hidden;position:relative;margin:0 auto;box-sizing:border-box;cursor:pointer}:host .viewport img.content{margin:auto;display:table}:host .viewport video.content{margin:auto;display:table}:host .viewport .hover{position:absolute;background-color:#fff;top:-10000px;left:-10000px;opacity:0;pointer-events:none}:host .viewport:hover{border-color:purple}:host .below-viewport{padding:5px;-webkit-box-sizing:border-box;box-sizing:border-box}.clearblock{clear:both;display:block;width:100%;height:0;padding:0;margin:0}:host:focus{border-color:#0ba}:host:hover{border-color:purple;-webkit-box-shadow:1px 1px 11px purple;box-shadow:1px 1px 11px purple}"]}]}],"members":{"largeImage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":91,"character":3},"arguments":["largeImage"]}]}],"onselect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":94,"character":3},"arguments":["onselect"]}]}],"item":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":97,"character":3},"arguments":["item"]}]}],"viewport":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":100,"character":3},"arguments":["viewport"]}]}],"metadata":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":103,"character":3},"arguments":["metadata"]}]}],"effects":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":106,"character":3},"arguments":["effects"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"itemValue":[{"__symbolic":"method"}],"rowContent":[{"__symbolic":"method"}],"hoverOver":[{"__symbolic":"method"}],"hoverOut":[{"__symbolic":"method"}],"hoverViewPort":[{"__symbolic":"method"}],"keyup":[{"__symbolic":"method"}],"selectItem":[{"__symbolic":"method"}],"videoPlayed":[{"__symbolic":"method"}],"videoPaused":[{"__symbolic":"method"}],"videoEnded":[{"__symbolic":"method"}],"onComponentChange":[{"__symbolic":"method"}]}},"FlexiblePreviewBoxModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":4},{"__symbolic":"reference","module":"into-pipes","name":"IntoPipeModule","line":9,"character":4}],"declarations":[{"__symbolic":"reference","name":"FlexiblePreviewBoxComponent"}],"exports":[{"__symbolic":"reference","name":"FlexiblePreviewBoxComponent"}],"entryComponents":[],"schemas":[{"__symbolic":"reference","module":"@angular/core","name":"CUSTOM_ELEMENTS_SCHEMA","line":19,"character":12}]}]}],"members":{}}},"origins":{"FlexiblePreviewBoxComponent":"./src/app/flexible-preview-box/components/flexible-preview-box.component","FlexiblePreviewBoxModule":"./src/app/flexible-preview-box/flexible-preview-box.module"},"importAs":"flexible-preview-box"}
+{"__symbolic":"module","version":4,"metadata":{"FlexiblePreviewBoxComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"flexible-preview-box","template":"<div class=\"above-viewport\" [style.max-width]=\"effects.width ? (effects.width + 'px') : 'auto'\">\r\n    <div *ngFor=\"let row of aboveData; let i = index\" \r\n        class=\"box-row\"\r\n        [style.margin-top]=\"row.spacing ? (row.spacing + 'px') : '0'\"\r\n        [class.left]=\"row.side === 'left'\"\r\n        [class.right]=\"row.side === 'right'\"\r\n        [class.center]=\"row.side === 'center'\"\r\n        [class.emphasize]=\"row.emphasize\"\r\n        [class.side-by-side]=\"row.sidebyside\">\r\n        <span class=\"label\" [class.off-screen]=\"row.hidelabel\" [textContent]=\"row.value\"></span>\r\n        <span class=\"value\" [intoName]=\"row.value\"\r\n            [intoId]=\"row.key + '-' + i\"\r\n            [into]=\"row.format\"\r\n            [intoData]=\"item\"\r\n            [rawContent]=\"rowContent(row)\"\r\n            [onComponentChange]=\"onComponentChange.bind(this)\"></span>\r\n    </div>\r\n    <div class=\"clearblock\"></div>\r\n</div>\r\n<div \r\n    class=\"viewport\" \r\n    tabindex=\"0\"\r\n    [title]=\"item.name\"\r\n    [style.width]=\"effects.width + 'px'\" \r\n    [style.height]=\"effects.height + 'px'\"\r\n    (keyup)=\"keyup($event)\"\r\n    (click)=\"selectItem($event)\"\r\n    (mouseout)=\"hoverOut($event)\"\r\n    (mouseover)=\"hoverOver($event)\"\r\n    (mousemove)=\"hoverViewPort($event)\">\r\n    <img  class=\"content\" \r\n            [src]=\"viewport.src.small\" \r\n            *ngIf=\"viewport.type === 'image'\" />\r\n    <img  class=\"hover\" #largeImage\r\n            [style.width]=\"(effects.width*2) + 'px'\"\r\n            [style.height]=\"(effects.height*2) + 'px'\"\r\n            [src]=\"viewport.src.large\" \r\n            *ngIf=\"effects.zoomOnHover\" />\r\n    <video  \r\n        class=\"content\" #video\r\n        [style.width]=\"effects.width + 'px'\" \r\n        [style.height]=\"effects.height + 'px'\"\r\n        (play)=\"videoPlayed(video.currentTime)\"\r\n        (pause)=\"videoPaused(video.currentTime)\"\r\n        (ended)=\"videoEnded(video.currentTime)\"\r\n        *ngIf=\"viewport.type === 'video'\" controls>\r\n        <source [src]=\"viewport.src.mp4\" type=\"video/mp4\">\r\n        <source [src]=\"viewport.src.webm\" type=\"video/webm\">\r\n        <source [src]=\"viewport.src.egg\" type=\"video/ogg\">\r\n    </video>\r\n</div>\r\n<div class=\"below-viewport\" [style.max-width]=\"effects.width ? (effects.width + 'px') : 'auto'\">\r\n    <div *ngFor=\"let row of belowData; let i = index\" \r\n        class=\"box-row\"\r\n        [style.margin-top]=\"row.spacing ? (row.spacing + 'px') : '0'\"\r\n        [class.left]=\"row.side === 'left'\"\r\n        [class.right]=\"row.side === 'right'\"\r\n        [class.center]=\"row.side === 'center'\"\r\n        [class.emphasize]=\"row.emphasize\"\r\n        [class.side-by-side]=\"row.sidebyside\">\r\n        <span class=\"label\" [class.off-screen]=\"row.hidelabel\" [textContent]=\"row.value\"></span>\r\n        <span class=\"value\" [intoName]=\"row.value\"\r\n            [intoId]=\"row.key + '-' + i\"\r\n            [into]=\"row.format\"\r\n            [intoData]=\"item\"\r\n            [rawContent]=\"rowContent(row)\"\r\n            [onComponentChange]=\"onComponentChange.bind(this)\"></span>\r\n    </div>\r\n    <div class=\"clearblock\"></div>\r\n</div>","styles":[":host{background-color:#fff;border:1px solid #ced4da;box-sizing:border-box;display:table;min-height:50px;padding:0;border-radius:5px;margin:5px}:host ::ng-deep .rating{color:red}:host .off-screen{display:block;float:left;height:0;overflow:hidden;text-indent:-99999px;width:0}:host .box-row{display:flex;width:100%}:host .box-row .label{float:left;font-weight:700;margin-right:5px}:host .box-row .value{float:left}:host .box-row.left{text-align:left}:host .box-row.right .label{font-weight:700;flex:1;text-align:right}:host .box-row.center{width:inherit;display:table;margin:auto}:host .box-row.emphasize{font-weight:700;font-size:1.8rem}:host .box-row.side-by-side{max-width:250px;width:inherit;display:table;float:right;margin:0 5px}:host .above-viewport{padding:5px;box-sizing:border-box}:host .viewport{border-color:purple;box-sizing:border-box;border-top:1px solid #bcd;border-bottom:1px solid #bcd;min-height:150px;overflow:hidden;position:relative;margin:0 auto;box-sizing:border-box;cursor:pointer}:host .viewport img.content{margin:auto;display:table}:host .viewport video.content{margin:auto;display:table}:host .viewport .hover{position:absolute;background-color:#fff;top:-10000px;left:-10000px;opacity:0;pointer-events:none}:host .viewport:hover{border-color:purple}:host .below-viewport{padding:5px;box-sizing:border-box}.clearblock{clear:both;display:block;width:100%;height:0;padding:0;margin:0}:host:focus{border-color:#0ba}:host:hover{border-color:purple;box-shadow:1px 1px 11px purple}"]}]}],"members":{"largeImage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":22,"character":3},"arguments":["largeImage"]}]}],"onselect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":25,"character":3},"arguments":["onselect"]}]}],"item":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3},"arguments":["item"]}]}],"viewport":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3},"arguments":["viewport"]}]}],"metadata":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3},"arguments":["metadata"]}]}],"effects":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3},"arguments":["effects"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"itemValue":[{"__symbolic":"method"}],"rowContent":[{"__symbolic":"method"}],"hoverOver":[{"__symbolic":"method"}],"hoverOut":[{"__symbolic":"method"}],"hoverViewPort":[{"__symbolic":"method"}],"keyup":[{"__symbolic":"method"}],"selectItem":[{"__symbolic":"method"}],"videoPlayed":[{"__symbolic":"method"}],"videoPaused":[{"__symbolic":"method"}],"videoEnded":[{"__symbolic":"method"}],"onComponentChange":[{"__symbolic":"method"}]}},"FlexiblePreviewBoxModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":4},{"__symbolic":"reference","module":"into-pipes","name":"IntoPipeModule","line":9,"character":4}],"declarations":[{"__symbolic":"reference","name":"FlexiblePreviewBoxComponent"}],"exports":[{"__symbolic":"reference","name":"FlexiblePreviewBoxComponent"}],"entryComponents":[],"schemas":[{"__symbolic":"reference","module":"@angular/core","name":"CUSTOM_ELEMENTS_SCHEMA","line":19,"character":12}]}]}],"members":{}}},"origins":{"FlexiblePreviewBoxComponent":"./src/app/flexible-preview-box/components/flexible-preview-box.component","FlexiblePreviewBoxModule":"./src/app/flexible-preview-box/flexible-preview-box.module"},"importAs":"flexible-preview-box"}

package.json

 {
   "name": "flexible-preview-box",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "license": "MIT",
-  "scripts": {
-    "ng": "ng",
-    "start": "ng serve",
-    "build": "ng build",
-    "lint": "ng lint",
-    "packagr": "ng-packagr -p ng-package.json"
-  },
   "private": false,
@@ -32,30 +25,36 @@ "keywords": [
   "dependencies": {
-    "@angular/common": "^6.0.0 || ^5.0.0 || ^4.0.0 || ^2.0.0",
-    "@angular/compiler": "^6.0.0 || ^5.0.0 || ^4.0.0 || ^2.0.0",
-    "@angular/core": "^6.0.0 || ^5.0.0 || ^4.0.0 || ^2.0.0",
-    "@angular/platform-browser": "^6.0.0 || ^5.0.0 || ^4.0.0 || ^2.0.0",
+    "@angular/common": "^6.0.0",
+    "@angular/compiler": "^6.0.0",
     "@angular/forms": "^6.0.6",
-    "core-js": "^2.4.1",
+    "@angular/core": "^6.0.0",
+    "core-js": "^2.5.4",
     "font-awesome": "^4.7.0",
-    "into-pipes": "^2.0.1",
-    "zone.js": "^0.8.14",
-    "tslib": "^1.7.1"
+    "into-pipes": "^2.1.0",
+    "zone.js": "^0.8.26",
+    "tslib": "^1.9.0"
   },
   "devDependencies": {
-    "@angular/cli": "^1.6.7",
-    "@angular/compiler-cli": "^6.0.0 || ^5.0.0 || ^4.0.0 || ^2.0.0",
+    "@angular/platform-browser": "^6.0.0",
+    "@angular-devkit/build-angular": "~0.8.0",
+    "@angular/cli": "^6.2.6",
+    "@angular/compiler-cli": "^6.0.0",
     "@types/node": "^6.0.60",
     "rxjs": "^6.2.2",
-    "codelyzer": "^3.2.0",
-    "ng-packagr": "^2.0.0",
-    "protractor": "^5.1.2",
-    "ts-node": "^3.2.0",
-    "tslint": "^5.7.0",
-    "typescript": "^2.4.2"
+    "codelyzer": "~4.5.0",
+    "ng-packagr": "^4.4.0",
+    "protractor": "~5.3.0",
+    "ts-node": "~5.0.1",
+    "tslint": "~5.7.0",
+    "typescript": "~2.7.2"
   },
   "main": "bundles/flexible-preview-box.umd.js",
-  "module": "esm5/flexible-preview-box.js",
-  "es2015": "esm2015/flexible-preview-box.js",
+  "module": "fesm5/flexible-preview-box.js",
+  "es2015": "fesm2015/flexible-preview-box.js",
+  "esm5": "esm5/flexible-preview-box.js",
+  "esm2015": "esm2015/flexible-preview-box.js",
+  "fesm5": "fesm5/flexible-preview-box.js",
+  "fesm2015": "fesm2015/flexible-preview-box.js",
   "typings": "flexible-preview-box.d.ts",
-  "metadata": "flexible-preview-box.metadata.json"
+  "metadata": "flexible-preview-box.metadata.json",
+  "sideEffects": false
 }

README.md

@@ -11,2 +11,5 @@ # Welcome to flexible preview box!
 
+# Version 1.2.0
+It was brought to my attention that some users have trouble using my components in their angular 6 environment. Since I had only updated few dependencies when moved to Angular 6, I am thinking dependencies are causing issues. So, for this release, I am updating all dependencies to what Angular 6 applications are expecting to have. Please let me know if this is fixing or not fixing any issues you are facing.
+
 # Version 1.1.2
@@ -13,0 +16,0 @@ rolling to angular 6+ after fixing the dependency issue.

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

185613

increased by57.91%

Dependency count

9

decreased by-10%

Number of package files

24

increased by50%

Lines of code

1279

increased by113.88%

Number of lines in readme file

202

increased by1.51%

Worsened metrics

Dev dependency count

12

increased by20%

Number of low supply chain risk alerts

13

increased by85.71%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removed@angular/platform-browser@^6.0.0 || ^5.0.0 || ^4.0.0 || ^2.0.0

• Updated@angular/common@^6.0.0

• Updated@angular/compiler@^6.0.0

• Updated@angular/core@^6.0.0

• Updatedcore-js@^2.5.4

• Updatedinto-pipes@^2.1.0

• Updatedtslib@^1.9.0

• Updatedzone.js@^0.8.26