ngx-slides - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/components/ngx-slides/ngx-slides.component.js

@@ -31,4 +31,4 @@ import { Component, Input } from '@angular/core';
                     selector: 'ngx-slides',
-                    template: "\n    <div class=\"slides-wrapper\" [style.width]=\"config.width\" [style.height]=\"config.height\">\n      <div class=\"slide\" *ngFor=\"let slide of slideImages;let ind = index;\" [ngClass]=\"{'active':currentSlide == ind}\">\n        <figure>\n          <img class=\"slide-img\" [src]=\"slide.image\" [style.width]=\"config.width\" [style.maxHeight]=\"config.height\">\n          <figcaption class=\"slide-caption\">\n            <span>{{slide.title}}</span>\n          </figcaption>\n        </figure>\n      </div>\n      <nav class=\"slides-buttons\">\n        <span class=\"button\" [ngClass]=\"{'active': currentSlide == i}\" (click)=\"moveToSlide(i)\" *ngFor=\"let s of slideImages; let i = index\"></span>\n      </nav>\n    </div>\n  ",
-                    styles: ["\n    .slides-wrapper{position:relative;margin-left:auto;margin-right:auto;background-color:whitesmoke}.slides-wrapper .slide{width:100%;height:100%;opacity:0;height:100%;position:absolute;left:0;top:0;z-index:10}.slides-wrapper .slide figure{height:100%;position:relative;margin:0}.slides-wrapper .slide figure .slide-img{max-width:100%;object-fit:fill;display:block;margin:0 auto}.slides-wrapper .slide figure .slide-caption{position:absolute;text-align:center;bottom:30px;width:100%;color:white;text-align:center;font-size:20px}.slides-wrapper .slides-buttons{width:100%;position:absolute;bottom:5px;text-align:center;z-index:100}.slides-wrapper .slides-buttons .button{background-color:aliceblue;display:inline-block;margin:2px;width:15px;height:15px;border-radius:50%;opacity:0.5}.slides-wrapper .slides-buttons .button.active{color:aqua;transition:color 2s}.slides-wrapper .active{opacity:1 !important;transition:opacity 2s}@media only screen and (min-width: 768px){.slide-img{width:100% !important}}\n  "]
+                    template: "\n    <div class=\"slides-wrapper\" [style.width]=\"config.width\" [style.height]=\"config.height\">\n      <div class=\"slide\" *ngFor=\"let slide of slideImages;let ind = index;\" [ngClass]=\"{'active':currentSlide == ind}\">\n        <figure>\n          <img class=\"slide-img\" [src]=\"slide.image\" [style.width]=\"config.width\" [style.maxHeight]=\"config.height\">\n          <figcaption class=\"slide-caption\">\n            <span>{{slide.title}}</span>\n          </figcaption>\n        </figure>\n      </div>\n      <div class=\"slides-buttons\">\n        <span class=\"button\" [ngClass]=\"{'active': currentSlide == i}\" (click)=\"moveToSlide(i)\" *ngFor=\"let s of slideImages; let i = index\"></span>\n      </div>\n    </div>\n  ",
+                    styles: ["\n    .slides-wrapper{position:relative;margin-left:auto;margin-right:auto;background-color:whitesmoke}.slides-wrapper .slide{width:100%;height:100%;opacity:0;height:100%;position:absolute;left:0;top:0;z-index:10}.slides-wrapper .slide figure{height:100%;position:relative;margin:0}.slides-wrapper .slide figure .slide-img{max-width:100%;object-fit:fill;display:block;margin:0 auto}.slides-wrapper .slide figure .slide-caption{position:absolute;text-align:center;bottom:30px;width:100%;color:white;text-align:center;font-size:20px}.slides-wrapper .slides-buttons{background:transparent !important;width:100%;position:absolute;bottom:5px;text-align:center;z-index:100}.slides-wrapper .slides-buttons .button{background-color:aliceblue;display:inline-block;margin:2px;width:15px;height:15px;border-radius:50%;opacity:0.5}.slides-wrapper .slides-buttons .button.active{color:aqua;transition:color 2s}.slides-wrapper .active{opacity:1 !important;transition:opacity 2s}@media only screen and (min-width: 768px){.slide-img{width:100% !important}}\n  "]
                 },] },
@@ -35,0 +35,0 @@ ];

dist/components/ngx-slides/ngx-slides.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"NgxSlidesComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-slides","template":"\n    <div class=\"slides-wrapper\" [style.width]=\"config.width\" [style.height]=\"config.height\">\n      <div class=\"slide\" *ngFor=\"let slide of slideImages;let ind = index;\" [ngClass]=\"{'active':currentSlide == ind}\">\n        <figure>\n          <img class=\"slide-img\" [src]=\"slide.image\" [style.width]=\"config.width\" [style.maxHeight]=\"config.height\">\n          <figcaption class=\"slide-caption\">\n            <span>{{slide.title}}</span>\n          </figcaption>\n        </figure>\n      </div>\n      <nav class=\"slides-buttons\">\n        <span class=\"button\" [ngClass]=\"{'active': currentSlide == i}\" (click)=\"moveToSlide(i)\" *ngFor=\"let s of slideImages; let i = index\"></span>\n      </nav>\n    </div>\n  ","styles":["\n    .slides-wrapper{position:relative;margin-left:auto;margin-right:auto;background-color:whitesmoke}.slides-wrapper .slide{width:100%;height:100%;opacity:0;height:100%;position:absolute;left:0;top:0;z-index:10}.slides-wrapper .slide figure{height:100%;position:relative;margin:0}.slides-wrapper .slide figure .slide-img{max-width:100%;object-fit:fill;display:block;margin:0 auto}.slides-wrapper .slide figure .slide-caption{position:absolute;text-align:center;bottom:30px;width:100%;color:white;text-align:center;font-size:20px}.slides-wrapper .slides-buttons{width:100%;position:absolute;bottom:5px;text-align:center;z-index:100}.slides-wrapper .slides-buttons .button{background-color:aliceblue;display:inline-block;margin:2px;width:15px;height:15px;border-radius:50%;opacity:0.5}.slides-wrapper .slides-buttons .button.active{color:aqua;transition:color 2s}.slides-wrapper .active{opacity:1 !important;transition:opacity 2s}@media only screen and (min-width: 768px){.slide-img{width:100% !important}}\n  "]}]}],"members":{"slideImages":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"setSlideShowAutoPlay":[{"__symbolic":"method"}],"moveToSlide":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"NgxSlidesComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-slides","template":"\n    <div class=\"slides-wrapper\" [style.width]=\"config.width\" [style.height]=\"config.height\">\n      <div class=\"slide\" *ngFor=\"let slide of slideImages;let ind = index;\" [ngClass]=\"{'active':currentSlide == ind}\">\n        <figure>\n          <img class=\"slide-img\" [src]=\"slide.image\" [style.width]=\"config.width\" [style.maxHeight]=\"config.height\">\n          <figcaption class=\"slide-caption\">\n            <span>{{slide.title}}</span>\n          </figcaption>\n        </figure>\n      </div>\n      <nav class=\"slides-buttons\">\n        <span class=\"button\" [ngClass]=\"{'active': currentSlide == i}\" (click)=\"moveToSlide(i)\" *ngFor=\"let s of slideImages; let i = index\"></span>\n      </nav>\n    </div>\n  ","styles":["\n    .slides-wrapper{position:relative;margin-left:auto;margin-right:auto;background-color:whitesmoke}.slides-wrapper .slide{width:100%;height:100%;opacity:0;height:100%;position:absolute;left:0;top:0;z-index:10}.slides-wrapper .slide figure{height:100%;position:relative;margin:0}.slides-wrapper .slide figure .slide-img{max-width:100%;object-fit:fill;display:block;margin:0 auto}.slides-wrapper .slide figure .slide-caption{position:absolute;text-align:center;bottom:30px;width:100%;color:white;text-align:center;font-size:20px}.slides-wrapper .slides-buttons{width:100%;position:absolute;bottom:5px;text-align:center;z-index:100}.slides-wrapper .slides-buttons .button{background-color:aliceblue;display:inline-block;margin:2px;width:15px;height:15px;border-radius:50%;opacity:0.5}.slides-wrapper .slides-buttons .button.active{color:aqua;transition:color 2s}.slides-wrapper .active{opacity:1 !important;transition:opacity 2s}@media only screen and (min-width: 768px){.slide-img{width:100% !important}}\n  "]}]}],"members":{"slideImages":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"setSlideShowAutoPlay":[{"__symbolic":"method"}],"moveToSlide":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"NgxSlidesComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-slides","template":"\n    <div class=\"slides-wrapper\" [style.width]=\"config.width\" [style.height]=\"config.height\">\n      <div class=\"slide\" *ngFor=\"let slide of slideImages;let ind = index;\" [ngClass]=\"{'active':currentSlide == ind}\">\n        <figure>\n          <img class=\"slide-img\" [src]=\"slide.image\" [style.width]=\"config.width\" [style.maxHeight]=\"config.height\">\n          <figcaption class=\"slide-caption\">\n            <span>{{slide.title}}</span>\n          </figcaption>\n        </figure>\n      </div>\n      <div class=\"slides-buttons\">\n        <span class=\"button\" [ngClass]=\"{'active': currentSlide == i}\" (click)=\"moveToSlide(i)\" *ngFor=\"let s of slideImages; let i = index\"></span>\n      </div>\n    </div>\n  ","styles":["\n    .slides-wrapper{position:relative;margin-left:auto;margin-right:auto;background-color:whitesmoke}.slides-wrapper .slide{width:100%;height:100%;opacity:0;height:100%;position:absolute;left:0;top:0;z-index:10}.slides-wrapper .slide figure{height:100%;position:relative;margin:0}.slides-wrapper .slide figure .slide-img{max-width:100%;object-fit:fill;display:block;margin:0 auto}.slides-wrapper .slide figure .slide-caption{position:absolute;text-align:center;bottom:30px;width:100%;color:white;text-align:center;font-size:20px}.slides-wrapper .slides-buttons{background:transparent !important;width:100%;position:absolute;bottom:5px;text-align:center;z-index:100}.slides-wrapper .slides-buttons .button{background-color:aliceblue;display:inline-block;margin:2px;width:15px;height:15px;border-radius:50%;opacity:0.5}.slides-wrapper .slides-buttons .button.active{color:aqua;transition:color 2s}.slides-wrapper .active{opacity:1 !important;transition:opacity 2s}@media only screen and (min-width: 768px){.slide-img{width:100% !important}}\n  "]}]}],"members":{"slideImages":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"setSlideShowAutoPlay":[{"__symbolic":"method"}],"moveToSlide":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"NgxSlidesComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-slides","template":"\n    <div class=\"slides-wrapper\" [style.width]=\"config.width\" [style.height]=\"config.height\">\n      <div class=\"slide\" *ngFor=\"let slide of slideImages;let ind = index;\" [ngClass]=\"{'active':currentSlide == ind}\">\n        <figure>\n          <img class=\"slide-img\" [src]=\"slide.image\" [style.width]=\"config.width\" [style.maxHeight]=\"config.height\">\n          <figcaption class=\"slide-caption\">\n            <span>{{slide.title}}</span>\n          </figcaption>\n        </figure>\n      </div>\n      <div class=\"slides-buttons\">\n        <span class=\"button\" [ngClass]=\"{'active': currentSlide == i}\" (click)=\"moveToSlide(i)\" *ngFor=\"let s of slideImages; let i = index\"></span>\n      </div>\n    </div>\n  ","styles":["\n    .slides-wrapper{position:relative;margin-left:auto;margin-right:auto;background-color:whitesmoke}.slides-wrapper .slide{width:100%;height:100%;opacity:0;height:100%;position:absolute;left:0;top:0;z-index:10}.slides-wrapper .slide figure{height:100%;position:relative;margin:0}.slides-wrapper .slide figure .slide-img{max-width:100%;object-fit:fill;display:block;margin:0 auto}.slides-wrapper .slide figure .slide-caption{position:absolute;text-align:center;bottom:30px;width:100%;color:white;text-align:center;font-size:20px}.slides-wrapper .slides-buttons{background:transparent !important;width:100%;position:absolute;bottom:5px;text-align:center;z-index:100}.slides-wrapper .slides-buttons .button{background-color:aliceblue;display:inline-block;margin:2px;width:15px;height:15px;border-radius:50%;opacity:0.5}.slides-wrapper .slides-buttons .button.active{color:aqua;transition:color 2s}.slides-wrapper .active{opacity:1 !important;transition:opacity 2s}@media only screen and (min-width: 768px){.slide-img{width:100% !important}}\n  "]}]}],"members":{"slideImages":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"setSlideShowAutoPlay":[{"__symbolic":"method"}],"moveToSlide":[{"__symbolic":"method"}]}}}}]

dist/index.umd.js

 /**
  * ngx-slides - ngx-slides is a lightweight slideshow component for Anguar 4 applications and fully configurable.
- * @version v1.0.0
+ * @version v1.0.1
  * @author Manish Kumar
@@ -10,10 +10,10 @@ * @link https://github.com/manishjanky/ngx-slides#readme
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("@angular/core"));
+		module.exports = factory(require("@angular/core"), require("@angular/common"));
 	else if(typeof define === 'function' && define.amd)
-		define(["@angular/core"], factory);
+		define(["@angular/core", "@angular/common"], factory);
 	else if(typeof exports === 'object')
-		exports["ticktock"] = factory(require("@angular/core"));
+		exports["ticktock"] = factory(require("@angular/core"), require("@angular/common"));
 	else
-		root["ticktock"] = factory(root["ng"]["core"]);
-})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_0__) {
+		root["ticktock"] = factory(root["ng"]["core"], root["ng"]["common"]);
+})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_10__) {
 return /******/ (function(modules) { // webpackBootstrap
@@ -81,3 +81,3 @@ /******/ 	// The module cache
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 1);
+/******/ 	return __webpack_require__(__webpack_require__.s = 2);
 /******/ })
@@ -87,8 +87,2 @@ /************************************************************************/
 /* 0 */
-/***/ (function(module, exports) {
-
-module.exports = __WEBPACK_EXTERNAL_MODULE_0__;
-
-/***/ }),
-/* 1 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -98,41 +92,2 @@
 
-Object.defineProperty(exports, "__esModule", { value: true });
-var components_1 = __webpack_require__(2);
-exports.NgxSlidesComponent = components_1.NgxSlidesComponent;
-var ngx_slides_module_1 = __webpack_require__(9);
-exports.NgxSlidesModule = ngx_slides_module_1.NgxSlidesModule;
-
-
-/***/ }),
-/* 2 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
-Object.defineProperty(exports, "__esModule", { value: true });
-__export(__webpack_require__(3));
-
-
-/***/ }),
-/* 3 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
-Object.defineProperty(exports, "__esModule", { value: true });
-__export(__webpack_require__(4));
-
-
-/***/ }),
-/* 4 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -148,3 +103,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 Object.defineProperty(exports, "__esModule", { value: true });
-var core_1 = __webpack_require__(0);
+var core_1 = __webpack_require__(1);
 var NgxSlidesComponent = /** @class */ (function () {
@@ -198,6 +153,51 @@ function NgxSlidesComponent() {
 /***/ }),
+/* 1 */
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE_1__;
+
+/***/ }),
+/* 2 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+var components_1 = __webpack_require__(3);
+exports.NgxSlidesComponent = components_1.NgxSlidesComponent;
+var ngx_slides_module_1 = __webpack_require__(9);
+exports.NgxSlidesModule = ngx_slides_module_1.NgxSlidesModule;
+
+
+/***/ }),
+/* 3 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
+Object.defineProperty(exports, "__esModule", { value: true });
+__export(__webpack_require__(4));
+
+
+/***/ }),
+/* 4 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
+Object.defineProperty(exports, "__esModule", { value: true });
+__export(__webpack_require__(0));
+
+
+/***/ }),
 /* 5 */
 /***/ (function(module, exports) {
 
-module.exports = "<div class=\"slides-wrapper\" [style.width]=\"config.width\" [style.height]=\"config.height\">\r\n  <div class=\"slide\" *ngFor=\"let slide of slideImages;let ind = index;\" [ngClass]=\"{'active':currentSlide == ind}\">\r\n    <figure>\r\n      <img class=\"slide-img\" [src]=\"slide.image\" [style.width]=\"config.width\" [style.maxHeight]=\"config.height\">\r\n      <figcaption class=\"slide-caption\">\r\n        <span>{{slide.title}}</span>\r\n      </figcaption>\r\n    </figure>\r\n  </div>\r\n  <nav class=\"slides-buttons\">\r\n    <span class=\"button\" [ngClass]=\"{'active': currentSlide == i}\" (click)=\"moveToSlide(i)\" *ngFor=\"let s of slideImages; let i = index\"></span>\r\n  </nav>\r\n</div>"
+module.exports = "<div class=\"slides-wrapper\" [style.width]=\"config.width\" [style.height]=\"config.height\">\r\n  <div class=\"slide\" *ngFor=\"let slide of slideImages;let ind = index;\" [ngClass]=\"{'active':currentSlide == ind}\">\r\n    <figure>\r\n      <img class=\"slide-img\" [src]=\"slide.image\" [style.width]=\"config.width\" [style.maxHeight]=\"config.height\">\r\n      <figcaption class=\"slide-caption\">\r\n        <span>{{slide.title}}</span>\r\n      </figcaption>\r\n    </figure>\r\n  </div>\r\n  <div class=\"slides-buttons\">\r\n    <span class=\"button\" [ngClass]=\"{'active': currentSlide == i}\" (click)=\"moveToSlide(i)\" *ngFor=\"let s of slideImages; let i = index\"></span>\r\n  </div>\r\n</div>"
 
@@ -227,3 +227,3 @@ /***/ }),
 // module
-exports.push([module.i, ".slides-wrapper {\n  position: relative;\n  margin-left: auto;\n  margin-right: auto;\n  background-color: whitesmoke; }\n  .slides-wrapper .slide {\n    width: 100%;\n    height: 100%;\n    opacity: 0;\n    height: 100%;\n    position: absolute;\n    left: 0;\n    top: 0;\n    z-index: 10; }\n    .slides-wrapper .slide figure {\n      height: 100%;\n      position: relative;\n      margin: 0; }\n      .slides-wrapper .slide figure .slide-img {\n        max-width: 100%;\n        object-fit: fill;\n        display: block;\n        margin: 0 auto; }\n      .slides-wrapper .slide figure .slide-caption {\n        position: absolute;\n        text-align: center;\n        bottom: 30px;\n        width: 100%;\n        color: white;\n        text-align: center;\n        font-size: 20px; }\n  .slides-wrapper .slides-buttons {\n    width: 100%;\n    position: absolute;\n    bottom: 5px;\n    text-align: center;\n    z-index: 100; }\n    .slides-wrapper .slides-buttons .button {\n      background-color: aliceblue;\n      display: inline-block;\n      margin: 2px;\n      width: 15px;\n      height: 15px;\n      border-radius: 50%;\n      opacity: 0.5; }\n      .slides-wrapper .slides-buttons .button.active {\n        color: aqua;\n        transition: color 2s; }\n  .slides-wrapper .active {\n    opacity: 1 !important;\n    transition: opacity 2s; }\n\n@media only screen and (min-width: 768px) {\n  .slide-img {\n    width: 100% !important; } }\n", ""]);
+exports.push([module.i, ".slides-wrapper {\n  position: relative;\n  margin-left: auto;\n  margin-right: auto;\n  background-color: whitesmoke; }\n  .slides-wrapper .slide {\n    width: 100%;\n    height: 100%;\n    opacity: 0;\n    height: 100%;\n    position: absolute;\n    left: 0;\n    top: 0;\n    z-index: 10; }\n    .slides-wrapper .slide figure {\n      height: 100%;\n      position: relative;\n      margin: 0; }\n      .slides-wrapper .slide figure .slide-img {\n        max-width: 100%;\n        object-fit: fill;\n        display: block;\n        margin: 0 auto; }\n      .slides-wrapper .slide figure .slide-caption {\n        position: absolute;\n        text-align: center;\n        bottom: 30px;\n        width: 100%;\n        color: white;\n        text-align: center;\n        font-size: 20px; }\n  .slides-wrapper .slides-buttons {\n    background: transparent !important;\n    width: 100%;\n    position: absolute;\n    bottom: 5px;\n    text-align: center;\n    z-index: 100; }\n    .slides-wrapper .slides-buttons .button {\n      background-color: aliceblue;\n      display: inline-block;\n      margin: 2px;\n      width: 15px;\n      height: 15px;\n      border-radius: 50%;\n      opacity: 0.5; }\n      .slides-wrapper .slides-buttons .button.active {\n        color: aqua;\n        transition: color 2s; }\n  .slides-wrapper .active {\n    opacity: 1 !important;\n    transition: opacity 2s; }\n\n@media only screen and (min-width: 768px) {\n  .slide-img {\n    width: 100% !important; } }\n", ""]);
 
@@ -328,3 +328,5 @@ // exports
 Object.defineProperty(exports, "__esModule", { value: true });
-var core_1 = __webpack_require__(0);
+var core_1 = __webpack_require__(1);
+var ngx_slides_component_1 = __webpack_require__(0);
+var common_1 = __webpack_require__(10);
 var NgxSlidesModule = /** @class */ (function () {
@@ -335,5 +337,10 @@ function NgxSlidesModule() {
         core_1.NgModule({
+            imports: [common_1.CommonModule],
             providers: [],
-            declarations: [],
-            exports: []
+            declarations: [
+                ngx_slides_component_1.NgxSlidesComponent
+            ],
+            exports: [
+                ngx_slides_component_1.NgxSlidesComponent
+            ]
         })
@@ -346,2 +353,8 @@ ], NgxSlidesModule);
 
+/***/ }),
+/* 10 */
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE_10__;
+
 /***/ })
@@ -348,0 +361,0 @@ /******/ ]);

dist/index.umd.min.js

 /**
  * ngx-slides - ngx-slides is a lightweight slideshow component for Anguar 4 applications and fully configurable.
- * @version v1.0.0
+ * @version v1.0.1
  * @author Manish Kumar
@@ -8,3 +8,3 @@ * @link https://github.com/manishjanky/ngx-slides#readme
  */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("@angular/core")):"function"==typeof define&&define.amd?define(["@angular/core"],t):"object"==typeof exports?exports.ticktock=t(require("@angular/core")):e.ticktock=t(e.ng.core)}("undefined"!=typeof self?self:this,function(e){return function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,i){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:i})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=1)}([function(t,n){t.exports=e},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(2);t.NgxSlidesComponent=i.NgxSlidesComponent;var o=n(9);t.NgxSlidesModule=o.NgxSlidesModule},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e){for(var n in e)t.hasOwnProperty(n)||(t[n]=e[n])}(n(3))},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e){for(var n in e)t.hasOwnProperty(n)||(t[n]=e[n])}(n(4))},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,r=arguments.length,s=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,n,i);else for(var a=e.length-1;a>=0;a--)(o=e[a])&&(s=(r<3?o(s):r>3?o(t,n,s):o(t,n))||s);return r>3&&s&&Object.defineProperty(t,n,s),s},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};Object.defineProperty(t,"__esModule",{value:!0});var r=n(0),s=function(){function e(){this.config={width:"800px",height:"300px",autoPlay:!1,delay:3e3},this.currentSlide=0}return e.prototype.ngOnInit=function(){this.setSlideShowAutoPlay()},e.prototype.setSlideShowAutoPlay=function(){var e=this;this.config.autoPlay&&setInterval(function(){e.currentSlide===e.slideImages.length-1?e.currentSlide=0:++e.currentSlide},this.config.delay)},e.prototype.moveToSlide=function(e){this.currentSlide=e},i([r.Input(),o("design:type",Array)],e.prototype,"slideImages",void 0),i([r.Input(),o("design:type",Object)],e.prototype,"config",void 0),e=i([r.Component({selector:"ngx-slides",template:n(5),styles:[n(6)]}),o("design:paramtypes",[])],e)}();t.NgxSlidesComponent=s},function(e,t){e.exports='<div class="slides-wrapper" [style.width]="config.width" [style.height]="config.height">\r\n  <div class="slide" *ngFor="let slide of slideImages;let ind = index;" [ngClass]="{\'active\':currentSlide == ind}">\r\n    <figure>\r\n      <img class="slide-img" [src]="slide.image" [style.width]="config.width" [style.maxHeight]="config.height">\r\n      <figcaption class="slide-caption">\r\n        <span>{{slide.title}}</span>\r\n      </figcaption>\r\n    </figure>\r\n  </div>\r\n  <nav class="slides-buttons">\r\n    <span class="button" [ngClass]="{\'active\': currentSlide == i}" (click)="moveToSlide(i)" *ngFor="let s of slideImages; let i = index"></span>\r\n  </nav>\r\n</div>'},function(e,t,n){var i=n(7);e.exports="string"==typeof i?i:i.toString()},function(e,t,n){t=e.exports=n(8)(!1),t.push([e.i,".slides-wrapper {\n  position: relative;\n  margin-left: auto;\n  margin-right: auto;\n  background-color: whitesmoke; }\n  .slides-wrapper .slide {\n    width: 100%;\n    height: 100%;\n    opacity: 0;\n    height: 100%;\n    position: absolute;\n    left: 0;\n    top: 0;\n    z-index: 10; }\n    .slides-wrapper .slide figure {\n      height: 100%;\n      position: relative;\n      margin: 0; }\n      .slides-wrapper .slide figure .slide-img {\n        max-width: 100%;\n        object-fit: fill;\n        display: block;\n        margin: 0 auto; }\n      .slides-wrapper .slide figure .slide-caption {\n        position: absolute;\n        text-align: center;\n        bottom: 30px;\n        width: 100%;\n        color: white;\n        text-align: center;\n        font-size: 20px; }\n  .slides-wrapper .slides-buttons {\n    width: 100%;\n    position: absolute;\n    bottom: 5px;\n    text-align: center;\n    z-index: 100; }\n    .slides-wrapper .slides-buttons .button {\n      background-color: aliceblue;\n      display: inline-block;\n      margin: 2px;\n      width: 15px;\n      height: 15px;\n      border-radius: 50%;\n      opacity: 0.5; }\n      .slides-wrapper .slides-buttons .button.active {\n        color: aqua;\n        transition: color 2s; }\n  .slides-wrapper .active {\n    opacity: 1 !important;\n    transition: opacity 2s; }\n\n@media only screen and (min-width: 768px) {\n  .slide-img {\n    width: 100% !important; } }\n",""])},function(e,t){function n(e,t){var n=e[1]||"",o=e[3];if(!o)return n;if(t&&"function"==typeof btoa){var r=i(o);return[n].concat(o.sources.map(function(e){return"/*# sourceURL="+o.sourceRoot+e+" */"})).concat([r]).join("\n")}return[n].join("\n")}function i(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var i=n(t,e);return t[2]?"@media "+t[2]+"{"+i+"}":i}).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var i={},o=0;o<this.length;o++){var r=this[o][0];"number"==typeof r&&(i[r]=!0)}for(o=0;o<e.length;o++){var s=e[o];"number"==typeof s[0]&&i[s[0]]||(n&&!s[2]?s[2]=n:n&&(s[2]="("+s[2]+") and ("+n+")"),t.push(s))}},t}},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,r=arguments.length,s=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,n,i);else for(var a=e.length-1;a>=0;a--)(o=e[a])&&(s=(r<3?o(s):r>3?o(t,n,s):o(t,n))||s);return r>3&&s&&Object.defineProperty(t,n,s),s};Object.defineProperty(t,"__esModule",{value:!0});var o=n(0),r=function(){function e(){}return e=i([o.NgModule({providers:[],declarations:[],exports:[]})],e)}();t.NgxSlidesModule=r}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define(["@angular/core","@angular/common"],t):"object"==typeof exports?exports.ticktock=t(require("@angular/core"),require("@angular/common")):e.ticktock=t(e.ng.core,e.ng.common)}("undefined"!=typeof self?self:this,function(e,t){return function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,i){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:i})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=2)}([function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,r=arguments.length,s=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,n,i);else for(var a=e.length-1;a>=0;a--)(o=e[a])&&(s=(r<3?o(s):r>3?o(t,n,s):o(t,n))||s);return r>3&&s&&Object.defineProperty(t,n,s),s},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};Object.defineProperty(t,"__esModule",{value:!0});var r=n(1),s=function(){function e(){this.config={width:"800px",height:"300px",autoPlay:!1,delay:3e3},this.currentSlide=0}return e.prototype.ngOnInit=function(){this.setSlideShowAutoPlay()},e.prototype.setSlideShowAutoPlay=function(){var e=this;this.config.autoPlay&&setInterval(function(){e.currentSlide===e.slideImages.length-1?e.currentSlide=0:++e.currentSlide},this.config.delay)},e.prototype.moveToSlide=function(e){this.currentSlide=e},i([r.Input(),o("design:type",Array)],e.prototype,"slideImages",void 0),i([r.Input(),o("design:type",Object)],e.prototype,"config",void 0),e=i([r.Component({selector:"ngx-slides",template:n(5),styles:[n(6)]}),o("design:paramtypes",[])],e)}();t.NgxSlidesComponent=s},function(t,n){t.exports=e},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(3);t.NgxSlidesComponent=i.NgxSlidesComponent;var o=n(9);t.NgxSlidesModule=o.NgxSlidesModule},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e){for(var n in e)t.hasOwnProperty(n)||(t[n]=e[n])}(n(4))},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e){for(var n in e)t.hasOwnProperty(n)||(t[n]=e[n])}(n(0))},function(e,t){e.exports='<div class="slides-wrapper" [style.width]="config.width" [style.height]="config.height">\r\n  <div class="slide" *ngFor="let slide of slideImages;let ind = index;" [ngClass]="{\'active\':currentSlide == ind}">\r\n    <figure>\r\n      <img class="slide-img" [src]="slide.image" [style.width]="config.width" [style.maxHeight]="config.height">\r\n      <figcaption class="slide-caption">\r\n        <span>{{slide.title}}</span>\r\n      </figcaption>\r\n    </figure>\r\n  </div>\r\n  <div class="slides-buttons">\r\n    <span class="button" [ngClass]="{\'active\': currentSlide == i}" (click)="moveToSlide(i)" *ngFor="let s of slideImages; let i = index"></span>\r\n  </div>\r\n</div>'},function(e,t,n){var i=n(7);e.exports="string"==typeof i?i:i.toString()},function(e,t,n){t=e.exports=n(8)(!1),t.push([e.i,".slides-wrapper {\n  position: relative;\n  margin-left: auto;\n  margin-right: auto;\n  background-color: whitesmoke; }\n  .slides-wrapper .slide {\n    width: 100%;\n    height: 100%;\n    opacity: 0;\n    height: 100%;\n    position: absolute;\n    left: 0;\n    top: 0;\n    z-index: 10; }\n    .slides-wrapper .slide figure {\n      height: 100%;\n      position: relative;\n      margin: 0; }\n      .slides-wrapper .slide figure .slide-img {\n        max-width: 100%;\n        object-fit: fill;\n        display: block;\n        margin: 0 auto; }\n      .slides-wrapper .slide figure .slide-caption {\n        position: absolute;\n        text-align: center;\n        bottom: 30px;\n        width: 100%;\n        color: white;\n        text-align: center;\n        font-size: 20px; }\n  .slides-wrapper .slides-buttons {\n    background: transparent !important;\n    width: 100%;\n    position: absolute;\n    bottom: 5px;\n    text-align: center;\n    z-index: 100; }\n    .slides-wrapper .slides-buttons .button {\n      background-color: aliceblue;\n      display: inline-block;\n      margin: 2px;\n      width: 15px;\n      height: 15px;\n      border-radius: 50%;\n      opacity: 0.5; }\n      .slides-wrapper .slides-buttons .button.active {\n        color: aqua;\n        transition: color 2s; }\n  .slides-wrapper .active {\n    opacity: 1 !important;\n    transition: opacity 2s; }\n\n@media only screen and (min-width: 768px) {\n  .slide-img {\n    width: 100% !important; } }\n",""])},function(e,t){function n(e,t){var n=e[1]||"",o=e[3];if(!o)return n;if(t&&"function"==typeof btoa){var r=i(o);return[n].concat(o.sources.map(function(e){return"/*# sourceURL="+o.sourceRoot+e+" */"})).concat([r]).join("\n")}return[n].join("\n")}function i(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var i=n(t,e);return t[2]?"@media "+t[2]+"{"+i+"}":i}).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var i={},o=0;o<this.length;o++){var r=this[o][0];"number"==typeof r&&(i[r]=!0)}for(o=0;o<e.length;o++){var s=e[o];"number"==typeof s[0]&&i[s[0]]||(n&&!s[2]?s[2]=n:n&&(s[2]="("+s[2]+") and ("+n+")"),t.push(s))}},t}},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,r=arguments.length,s=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,n,i);else for(var a=e.length-1;a>=0;a--)(o=e[a])&&(s=(r<3?o(s):r>3?o(t,n,s):o(t,n))||s);return r>3&&s&&Object.defineProperty(t,n,s),s};Object.defineProperty(t,"__esModule",{value:!0});var o=n(1),r=n(0),s=n(10),a=function(){function e(){}return e=i([o.NgModule({imports:[s.CommonModule],providers:[],declarations:[r.NgxSlidesComponent],exports:[r.NgxSlidesComponent]})],e)}();t.NgxSlidesModule=a},function(e,n){e.exports=t}])});
 //# sourceMappingURL=index.umd.min.js.map

dist/ngx-slides.module.js

 import { NgModule } from '@angular/core';
+import { NgxSlidesComponent } from './components/ngx-slides/ngx-slides.component';
+import { CommonModule } from '@angular/common';
 var NgxSlidesModule = /** @class */ (function () {
@@ -7,5 +9,10 @@ function NgxSlidesModule() {
         { type: NgModule, args: [{
+                    imports: [CommonModule],
                     providers: [],
-                    declarations: [],
-                    exports: []
+                    declarations: [
+                        NgxSlidesComponent
+                    ],
+                    exports: [
+                        NgxSlidesComponent
+                    ]
                 },] },
@@ -12,0 +19,0 @@ ];

dist/ngx-slides.module.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"NgxSlidesModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"providers":[],"declarations":[],"exports":[]}]}]}}},{"__symbolic":"module","version":1,"metadata":{"NgxSlidesModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"providers":[],"declarations":[],"exports":[]}]}]}}}]
+[{"__symbolic":"module","version":3,"metadata":{"NgxSlidesModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"providers":[],"declarations":[{"__symbolic":"reference","module":"./components/ngx-slides/ngx-slides.component","name":"NgxSlidesComponent"}],"exports":[{"__symbolic":"reference","module":"./components/ngx-slides/ngx-slides.component","name":"NgxSlidesComponent"}]}]}]}}},{"__symbolic":"module","version":1,"metadata":{"NgxSlidesModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"providers":[],"declarations":[{"__symbolic":"reference","module":"./components/ngx-slides/ngx-slides.component","name":"NgxSlidesComponent"}],"exports":[{"__symbolic":"reference","module":"./components/ngx-slides/ngx-slides.component","name":"NgxSlidesComponent"}]}]}]}}}]

package.json

 {
   "name": "ngx-slides",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "ngx-slides is a lightweight slideshow component for Anguar 4 applications and fully configurable.",
@@ -5,0 +5,0 @@ "main": "./dist/index.umd.js",

README.md

@@ -16,3 +16,3 @@ # ngx-slides
 
-##Features
+## Features
 * Autoplay
@@ -80,2 +80,11 @@ * Navigation buttons
 
-Found a bug or an issue with this? [Open a new issue](https://github.com/manishjanky/ngx-slides/issues) here on GitHub.
+Found a bug or an issue with this? [Open a new issue](https://github.com/manishjanky/ngx-slides/issues) here on GitHub.
+
+## Contributing to this project
+
+Anyone and everyone is welcome to contribute. Please take a moment to
+review the [guidelines for contributing](CONTRIBUTING.md).
+
+* [Bug reports](CONTRIBUTING.md#bugs)
+* [Feature requests](CONTRIBUTING.md#features)
+* [Pull requests](CONTRIBUTING.md#pull-requests)

New 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

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

95696

increased by12.63%

Number of package files

28

increased by3.7%

Lines of code

432

increased by4.6%

Number of lines in readme file

89

increased by12.66%

Worsened metrics

Number of low supply chain risk alerts

3

increased by50%

No dependency changes