ngx-skeleton-loader - npm Package Compare versions

Comparing version 1.2.2 to 1.2.3

bundles/ngx-skeleton-loader.umd.js

@@ -5,3 +5,3 @@ (function (global, factory) {
     (global = global || self, factory(global['ngx-skeleton-loader'] = {}, global.ng.core, global.ng.common));
-}(this, function (exports, core, common) { 'use strict';
+}(this, (function (exports, core, common) { 'use strict';
 
@@ -34,3 +34,3 @@ /**
                         template: "<span\n  *ngFor=\"let item of items\"\n  class=\"loader\"\n  [ngClass]=\"{ circle: appearance === 'circle' }\"\n  [ngStyle]=\"styles\"\n>\n</span>\n",
-                        styles: [".loader{box-sizing:border-box;overflow:hidden;position:relative;-webkit-animation:2s ease-in-out infinite progress;animation:2s ease-in-out infinite progress;background:0 0/200px 100% no-repeat #eff1f6;background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0));border-radius:4px;width:100%;height:20px;display:inline-block;margin-bottom:10px}.loader:after,.loader:before{box-sizing:border-box}.loader.circle{width:40px;height:40px;margin:5px;border-radius:50%}@-webkit-keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}"]
+                        styles: [".loader{box-sizing:border-box;overflow:hidden;position:relative;-webkit-animation:2s ease-in-out infinite progress;animation:2s ease-in-out infinite progress;background:0 0/200px 100% no-repeat #eff1f6;background-image:-webkit-gradient(linear,left top,right top,from(rgba(255,255,255,0)),color-stop(rgba(255,255,255,.6)),to(rgba(255,255,255,0)));background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0));border-radius:4px;width:100%;height:20px;display:inline-block;margin-bottom:10px}.loader:after,.loader:before{box-sizing:border-box}.loader.circle{width:40px;height:40px;margin:5px;border-radius:50%}@-webkit-keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}"]
                     }] }
@@ -45,2 +45,14 @@ ];
     }());
+    if (false) {
+        /** @type {?} */
+        NgxSkeletonLoaderComponent.prototype.count;
+        /** @type {?} */
+        NgxSkeletonLoaderComponent.prototype.appearance;
+        /** @type {?} */
+        NgxSkeletonLoaderComponent.prototype.theme;
+        /** @type {?} */
+        NgxSkeletonLoaderComponent.prototype.styles;
+        /** @type {?} */
+        NgxSkeletonLoaderComponent.prototype.items;
+    }
 
@@ -69,3 +81,3 @@ /**
 
-}));
+})));
 //# sourceMappingURL=ngx-skeleton-loader.umd.js.map

bundles/ngx-skeleton-loader.umd.min.js

@@ -1,2 +0,2 @@
-!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("ngx-skeleton-loader",["exports","@angular/core","@angular/common"],o):o((e=e||self)["ngx-skeleton-loader"]={},e.ng.core,e.ng.common)}(this,function(e,o,n){"use strict";var t=function(){function e(){this.count=1,this.appearance="",this.theme={},this.styles={},this.items=[]}return e.prototype.ngOnInit=function(){this.styles=this.theme||{},this.items.length=this.count},e.decorators=[{type:o.Component,args:[{selector:"ngx-skeleton-loader",template:'<span\n  *ngFor="let item of items"\n  class="loader"\n  [ngClass]="{ circle: appearance === \'circle\' }"\n  [ngStyle]="styles"\n>\n</span>\n',styles:[".loader{box-sizing:border-box;overflow:hidden;position:relative;-webkit-animation:2s ease-in-out infinite progress;animation:2s ease-in-out infinite progress;background:0 0/200px 100% no-repeat #eff1f6;background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0));border-radius:4px;width:100%;height:20px;display:inline-block;margin-bottom:10px}.loader:after,.loader:before{box-sizing:border-box}.loader.circle{width:40px;height:40px;margin:5px;border-radius:50%}@-webkit-keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}"]}]}],e.propDecorators={count:[{type:o.Input}],appearance:[{type:o.Input}],theme:[{type:o.Input}]},e}(),r=function(){function e(){}return e.decorators=[{type:o.NgModule,args:[{declarations:[t],imports:[n.CommonModule],exports:[t]}]}],e}();e.NgxSkeletonLoaderComponent=t,e.NgxSkeletonLoaderModule=r,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("ngx-skeleton-loader",["exports","@angular/core","@angular/common"],o):o((e=e||self)["ngx-skeleton-loader"]={},e.ng.core,e.ng.common)}(this,(function(e,o,n){"use strict";var t=function(){function e(){this.count=1,this.appearance="",this.theme={},this.styles={},this.items=[]}return e.prototype.ngOnInit=function(){this.styles=this.theme||{},this.items.length=this.count},e.decorators=[{type:o.Component,args:[{selector:"ngx-skeleton-loader",template:'<span\n  *ngFor="let item of items"\n  class="loader"\n  [ngClass]="{ circle: appearance === \'circle\' }"\n  [ngStyle]="styles"\n>\n</span>\n',styles:[".loader{box-sizing:border-box;overflow:hidden;position:relative;-webkit-animation:2s ease-in-out infinite progress;animation:2s ease-in-out infinite progress;background:0 0/200px 100% no-repeat #eff1f6;background-image:-webkit-gradient(linear,left top,right top,from(rgba(255,255,255,0)),color-stop(rgba(255,255,255,.6)),to(rgba(255,255,255,0)));background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0));border-radius:4px;width:100%;height:20px;display:inline-block;margin-bottom:10px}.loader:after,.loader:before{box-sizing:border-box}.loader.circle{width:40px;height:40px;margin:5px;border-radius:50%}@-webkit-keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}"]}]}],e.propDecorators={count:[{type:o.Input}],appearance:[{type:o.Input}],theme:[{type:o.Input}]},e}();var r=function(){function e(){}return e.decorators=[{type:o.NgModule,args:[{declarations:[t],imports:[n.CommonModule],exports:[t]}]}],e}();e.NgxSkeletonLoaderComponent=t,e.NgxSkeletonLoaderModule=r,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=ngx-skeleton-loader.umd.min.js.map

CHANGELOG.md

@@ -10,2 +10,8 @@ # Change Log
 
+## [1.2.3][] - 2020-02-25
+
+### Fixed
+
+- Solving peerDependency warning when installing library in an Angular 9 project
+
 ## [1.2.2][] - 2019-06-22
@@ -101,3 +107,4 @@
 
-[Unreleased]: https://github.com/willmendesneto/ngx-skeleton-loader/compare/v1.2.2...HEAD
+[Unreleased]: https://github.com/willmendesneto/ngx-skeleton-loader/compare/v1.2.3...HEAD
+[1.2.3]: https://github.com/willmendesneto/ngx-skeleton-loader/compare/v1.2.2...v1.2.3
 [1.2.2]: https://github.com/willmendesneto/ngx-skeleton-loader/compare/v1.2.1...v1.2.2
@@ -104,0 +111,0 @@ [1.2.1]: https://github.com/willmendesneto/ngx-skeleton-loader/compare/v1.2.0...v1.2.1

esm2015/lib/ngx-skeleton-loader.component.js

@@ -26,3 +26,3 @@ /**
                 template: "<span\n  *ngFor=\"let item of items\"\n  class=\"loader\"\n  [ngClass]=\"{ circle: appearance === 'circle' }\"\n  [ngStyle]=\"styles\"\n>\n</span>\n",
-                styles: [".loader{box-sizing:border-box;overflow:hidden;position:relative;-webkit-animation:2s ease-in-out infinite progress;animation:2s ease-in-out infinite progress;background:0 0/200px 100% no-repeat #eff1f6;background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0));border-radius:4px;width:100%;height:20px;display:inline-block;margin-bottom:10px}.loader:after,.loader:before{box-sizing:border-box}.loader.circle{width:40px;height:40px;margin:5px;border-radius:50%}@-webkit-keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}"]
+                styles: [".loader{box-sizing:border-box;overflow:hidden;position:relative;-webkit-animation:2s ease-in-out infinite progress;animation:2s ease-in-out infinite progress;background:0 0/200px 100% no-repeat #eff1f6;background-image:-webkit-gradient(linear,left top,right top,from(rgba(255,255,255,0)),color-stop(rgba(255,255,255,.6)),to(rgba(255,255,255,0)));background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0));border-radius:4px;width:100%;height:20px;display:inline-block;margin-bottom:10px}.loader:after,.loader:before{box-sizing:border-box}.loader.circle{width:40px;height:40px;margin:5px;border-radius:50%}@-webkit-keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}"]
             }] }
@@ -29,0 +29,0 @@ ];

esm5/lib/ngx-skeleton-loader.component.js

@@ -28,3 +28,3 @@ /**
                     template: "<span\n  *ngFor=\"let item of items\"\n  class=\"loader\"\n  [ngClass]=\"{ circle: appearance === 'circle' }\"\n  [ngStyle]=\"styles\"\n>\n</span>\n",
-                    styles: [".loader{box-sizing:border-box;overflow:hidden;position:relative;-webkit-animation:2s ease-in-out infinite progress;animation:2s ease-in-out infinite progress;background:0 0/200px 100% no-repeat #eff1f6;background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0));border-radius:4px;width:100%;height:20px;display:inline-block;margin-bottom:10px}.loader:after,.loader:before{box-sizing:border-box}.loader.circle{width:40px;height:40px;margin:5px;border-radius:50%}@-webkit-keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}"]
+                    styles: [".loader{box-sizing:border-box;overflow:hidden;position:relative;-webkit-animation:2s ease-in-out infinite progress;animation:2s ease-in-out infinite progress;background:0 0/200px 100% no-repeat #eff1f6;background-image:-webkit-gradient(linear,left top,right top,from(rgba(255,255,255,0)),color-stop(rgba(255,255,255,.6)),to(rgba(255,255,255,0)));background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0));border-radius:4px;width:100%;height:20px;display:inline-block;margin-bottom:10px}.loader:after,.loader:before{box-sizing:border-box}.loader.circle{width:40px;height:40px;margin:5px;border-radius:50%}@-webkit-keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}"]
                 }] }
@@ -31,0 +31,0 @@ ];

fesm2015/ngx-skeleton-loader.js

@@ -28,3 +28,3 @@ import { Component, Input, NgModule } from '@angular/core';
                 template: "<span\n  *ngFor=\"let item of items\"\n  class=\"loader\"\n  [ngClass]=\"{ circle: appearance === 'circle' }\"\n  [ngStyle]=\"styles\"\n>\n</span>\n",
-                styles: [".loader{box-sizing:border-box;overflow:hidden;position:relative;-webkit-animation:2s ease-in-out infinite progress;animation:2s ease-in-out infinite progress;background:0 0/200px 100% no-repeat #eff1f6;background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0));border-radius:4px;width:100%;height:20px;display:inline-block;margin-bottom:10px}.loader:after,.loader:before{box-sizing:border-box}.loader.circle{width:40px;height:40px;margin:5px;border-radius:50%}@-webkit-keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}"]
+                styles: [".loader{box-sizing:border-box;overflow:hidden;position:relative;-webkit-animation:2s ease-in-out infinite progress;animation:2s ease-in-out infinite progress;background:0 0/200px 100% no-repeat #eff1f6;background-image:-webkit-gradient(linear,left top,right top,from(rgba(255,255,255,0)),color-stop(rgba(255,255,255,.6)),to(rgba(255,255,255,0)));background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0));border-radius:4px;width:100%;height:20px;display:inline-block;margin-bottom:10px}.loader:after,.loader:before{box-sizing:border-box}.loader.circle{width:40px;height:40px;margin:5px;border-radius:50%}@-webkit-keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}"]
             }] }
@@ -37,2 +37,14 @@ ];
 };
+if (false) {
+    /** @type {?} */
+    NgxSkeletonLoaderComponent.prototype.count;
+    /** @type {?} */
+    NgxSkeletonLoaderComponent.prototype.appearance;
+    /** @type {?} */
+    NgxSkeletonLoaderComponent.prototype.theme;
+    /** @type {?} */
+    NgxSkeletonLoaderComponent.prototype.styles;
+    /** @type {?} */
+    NgxSkeletonLoaderComponent.prototype.items;
+}
 
@@ -53,3 +65,13 @@ /**
 
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+
 export { NgxSkeletonLoaderComponent, NgxSkeletonLoaderModule };
 //# sourceMappingURL=ngx-skeleton-loader.js.map

fesm5/ngx-skeleton-loader.js

@@ -30,3 +30,3 @@ import { Component, Input, NgModule } from '@angular/core';
                     template: "<span\n  *ngFor=\"let item of items\"\n  class=\"loader\"\n  [ngClass]=\"{ circle: appearance === 'circle' }\"\n  [ngStyle]=\"styles\"\n>\n</span>\n",
-                    styles: [".loader{box-sizing:border-box;overflow:hidden;position:relative;-webkit-animation:2s ease-in-out infinite progress;animation:2s ease-in-out infinite progress;background:0 0/200px 100% no-repeat #eff1f6;background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0));border-radius:4px;width:100%;height:20px;display:inline-block;margin-bottom:10px}.loader:after,.loader:before{box-sizing:border-box}.loader.circle{width:40px;height:40px;margin:5px;border-radius:50%}@-webkit-keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}"]
+                    styles: [".loader{box-sizing:border-box;overflow:hidden;position:relative;-webkit-animation:2s ease-in-out infinite progress;animation:2s ease-in-out infinite progress;background:0 0/200px 100% no-repeat #eff1f6;background-image:-webkit-gradient(linear,left top,right top,from(rgba(255,255,255,0)),color-stop(rgba(255,255,255,.6)),to(rgba(255,255,255,0)));background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0));border-radius:4px;width:100%;height:20px;display:inline-block;margin-bottom:10px}.loader:after,.loader:before{box-sizing:border-box}.loader.circle{width:40px;height:40px;margin:5px;border-radius:50%}@-webkit-keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}"]
                 }] }
@@ -41,2 +41,14 @@ ];
 }());
+if (false) {
+    /** @type {?} */
+    NgxSkeletonLoaderComponent.prototype.count;
+    /** @type {?} */
+    NgxSkeletonLoaderComponent.prototype.appearance;
+    /** @type {?} */
+    NgxSkeletonLoaderComponent.prototype.theme;
+    /** @type {?} */
+    NgxSkeletonLoaderComponent.prototype.styles;
+    /** @type {?} */
+    NgxSkeletonLoaderComponent.prototype.items;
+}
 
@@ -60,3 +72,13 @@ /**
 
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+
 export { NgxSkeletonLoaderComponent, NgxSkeletonLoaderModule };
 //# sourceMappingURL=ngx-skeleton-loader.js.map

ngx-skeleton-loader.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":4,"metadata":{"NgxSkeletonLoaderComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"ngx-skeleton-loader","template":"<span\n  *ngFor=\"let item of items\"\n  class=\"loader\"\n  [ngClass]=\"{ circle: appearance === 'circle' }\"\n  [ngStyle]=\"styles\"\n>\n</span>\n","styles":[".loader{box-sizing:border-box;overflow:hidden;position:relative;-webkit-animation:2s ease-in-out infinite progress;animation:2s ease-in-out infinite progress;background:0 0/200px 100% no-repeat #eff1f6;background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0));border-radius:4px;width:100%;height:20px;display:inline-block;margin-bottom:10px}.loader:after,.loader:before{box-sizing:border-box}.loader.circle{width:40px;height:40px;margin:5px;border-radius:50%}@-webkit-keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}"]}]}],"members":{"count":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":3}}]}],"appearance":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"ngOnInit":[{"__symbolic":"method"}]}},"NgxSkeletonLoaderModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"NgxSkeletonLoaderComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":6,"character":12}],"exports":[{"__symbolic":"reference","name":"NgxSkeletonLoaderComponent"}]}]}],"members":{}}},"origins":{"NgxSkeletonLoaderComponent":"./lib/ngx-skeleton-loader.component","NgxSkeletonLoaderModule":"./lib/ngx-skeleton-loader.module"},"importAs":"ngx-skeleton-loader"}
+{"__symbolic":"module","version":4,"metadata":{"NgxSkeletonLoaderComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"ngx-skeleton-loader","template":"<span\n  *ngFor=\"let item of items\"\n  class=\"loader\"\n  [ngClass]=\"{ circle: appearance === 'circle' }\"\n  [ngStyle]=\"styles\"\n>\n</span>\n","styles":[".loader{box-sizing:border-box;overflow:hidden;position:relative;-webkit-animation:2s ease-in-out infinite progress;animation:2s ease-in-out infinite progress;background:0 0/200px 100% no-repeat #eff1f6;background-image:-webkit-gradient(linear,left top,right top,from(rgba(255,255,255,0)),color-stop(rgba(255,255,255,.6)),to(rgba(255,255,255,0)));background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0));border-radius:4px;width:100%;height:20px;display:inline-block;margin-bottom:10px}.loader:after,.loader:before{box-sizing:border-box}.loader.circle{width:40px;height:40px;margin:5px;border-radius:50%}@-webkit-keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}"]}]}],"members":{"count":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":3}}]}],"appearance":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"ngOnInit":[{"__symbolic":"method"}]}},"NgxSkeletonLoaderModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"NgxSkeletonLoaderComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":6,"character":12}],"exports":[{"__symbolic":"reference","name":"NgxSkeletonLoaderComponent"}]}]}],"members":{}}},"origins":{"NgxSkeletonLoaderComponent":"./lib/ngx-skeleton-loader.component","NgxSkeletonLoaderModule":"./lib/ngx-skeleton-loader.module"},"importAs":"ngx-skeleton-loader"}

package.json

 {
   "name": "ngx-skeleton-loader",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "peerDependencies": {
-    "@angular/common": "^8.0.0",
-    "@angular/core": "^8.0.0"
+    "@angular/common": ">=8.0.0",
+    "@angular/core": ">=8.0.0"
   },
@@ -8,0 +8,0 @@ "main": "bundles/ngx-skeleton-loader.umd.js",

README.md

@@ -46,5 +46,9 @@ # NGX Skeleton loader
 
-You'll need to add `NgxSkeletonLoaderModule` to your application module. So that, the `<ngx-skeleton-loeader>` components will be accessible in your application.
+You'll need to add `NgxSkeletonLoaderModule` to your application module. So that, the `<ngx-skeleton-loader>` components will be accessible in your application.
 
 ```typescript
+...
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+...
+
 @NgModule({
@@ -55,2 +59,3 @@ declarations: [
   imports: [
+    ...
     NgxSkeletonLoaderModule,
@@ -67,3 +72,3 @@ ...
 
-After that, you can use the `featureToggle` components in your templates, passing the configuration data into the component itself.
+After that, you can use the `ngx-skeleton-loader` components in your templates, passing the configuration data into the component itself.
 
@@ -76,2 +81,32 @@ - `ngx-skeleton-loader`: Handle the skeleton animation and the skeleton styles of your app;
 
+## Theming
+
+You can also define different styles for the skeleton loader by passing an object with the css styles - in dashed case - into the component via `[theme]` attribute.
+
+```html
+
+<!--
+If you need to change all the background wrapper
+you need to apply the style changes on the 
+`ngx-skeleton-loader`component wrapper
+-->
+
+<div
+  style="background: #FF0001; padding: 10px;"
+>
+  <ngx-skeleton-loader
+    count="5"
+    [theme]="{ 
+      'border-radius': '5px',
+      height: '50px',
+      'background-color': '#992929',
+      border: '1px solid white'
+    }"
+  ></ngx-skeleton-loader>
+</div>
+
+```
+
+> You should change the styles on the skeleton wrapper element in case you need to change the background color. You can check the code details in the [Stackblitz Live Demo Link](https://stackblitz.com/edit/ngx-skeleton-loader-sample?file=app%2Fapp.component.html)
+
 ## Development
@@ -78,0 +113,0 @@

No alert changes

Improved metrics

Total package byte prevSize

51490

increased by8.92%

Lines of code

428

increased by15.68%

Number of lines in readme file

134

increased by35.35%

No dependency changes