ngx-skeleton-loader - npm Package Compare versions

Comparing version 2.5.0 to 2.6.0

bundles/ngx-skeleton-loader.umd.js

@@ -94,2 +94,13 @@ (function (global, factory) {
         }
+        /**
+         * @return {?}
+         */
+        NgxSkeletonLoaderModule.forRoot = /**
+         * @return {?}
+         */
+        function () {
+            return {
+                ngModule: NgxSkeletonLoaderModule,
+            };
+        };
         NgxSkeletonLoaderModule.decorators = [
@@ -96,0 +107,0 @@ { type: core.NgModule, args: [{

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

@@ -1,2 +0,2 @@
-!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("@angular/core"),require("perf-marks/marks"),require("@angular/common")):"function"==typeof define&&define.amd?define("ngx-skeleton-loader",["exports","@angular/core","perf-marks/marks","@angular/common"],r):r((e=e||self)["ngx-skeleton-loader"]={},e.ng.core,e.marks,e.ng.common)}(this,(function(e,r,o,n){"use strict";var a=function(){function e(){this.count=1,this.appearance="",this.animation="progress",this.theme={},this.items=[]}return e.prototype.ngOnInit=function(){o.start("NgxSkeletonLoader:Rendered"),o.start("NgxSkeletonLoader:Loaded"),this.items.length=this.count;var e=["progress","progress-dark","pulse","false"];-1===e.indexOf(this.animation)&&(r.isDevMode()&&console.error("`NgxSkeletonLoaderComponent` need to receive 'animation' as: "+e.join(", ")+'. Forcing default to "progress".'),this.animation="progress")},e.prototype.ngAfterViewInit=function(){o.end("NgxSkeletonLoader:Rendered")},e.prototype.ngOnDestroy=function(){o.end("NgxSkeletonLoader:Loaded")},e.decorators=[{type:r.Component,args:[{selector:"ngx-skeleton-loader",template:'<span\n  *ngFor="let item of items"\n  class="loader"\n  aria-busy="true"\n  aria-valuemin="0"\n  aria-valuemax="100"\n  aria-valuetext="Loading..."\n  role="progressbar"\n  tabindex="0"\n  [ngClass]="{\n    circle: appearance === \'circle\',\n    progress: animation === \'progress\',\n    \'progress-dark\': animation === \'progress-dark\',\n    pulse: animation === \'pulse\'\n  }"\n  [ngStyle]="theme"\n>\n</span>\n',styles:[".loader{box-sizing:border-box;overflow:hidden;position:relative;background:no-repeat #eff1f6;border-radius:4px;width:100%;height:20px;display:inline-block;margin-bottom:10px;will-change:transform}.loader:after,.loader:before{box-sizing:border-box}.loader.circle{width:40px;height:40px;margin:5px;border-radius:50%}.loader.progress,.loader.progress-dark{-webkit-animation:2s cubic-bezier(.4,0,.2,1) infinite progress;animation:2s cubic-bezier(.4,0,.2,1) infinite progress;background-size:200px 100%}.loader.progress{background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0))}.loader.progress-dark{background-image:linear-gradient(90deg,transparent,rgba(0,0,0,.2),transparent)}.loader.pulse{-webkit-animation:1.5s cubic-bezier(.4,0,.2,1) infinite pulse;animation:1.5s cubic-bezier(.4,0,.2,1) infinite pulse;-webkit-animation-delay:.5s;animation-delay:.5s}@media (prefers-reduced-motion:reduce){.loader.progress,.loader.progress-dark,.loader.pulse{-webkit-animation:none;animation:none}.loader.progress,.loader.progress-dark{background-image:none}}@-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}}@-webkit-keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}"]}]}],e.propDecorators={count:[{type:r.Input}],appearance:[{type:r.Input}],animation:[{type:r.Input}],theme:[{type:r.Input}]},e}();var i=function(){function e(){}return e.decorators=[{type:r.NgModule,args:[{declarations:[a],imports:[n.CommonModule],exports:[a]}]}],e}();e.NgxSkeletonLoaderComponent=a,e.NgxSkeletonLoaderModule=i,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("@angular/core"),require("perf-marks/marks"),require("@angular/common")):"function"==typeof define&&define.amd?define("ngx-skeleton-loader",["exports","@angular/core","perf-marks/marks","@angular/common"],r):r((e=e||self)["ngx-skeleton-loader"]={},e.ng.core,e.marks,e.ng.common)}(this,(function(e,r,o,n){"use strict";var a=function(){function e(){this.count=1,this.appearance="",this.animation="progress",this.theme={},this.items=[]}return e.prototype.ngOnInit=function(){o.start("NgxSkeletonLoader:Rendered"),o.start("NgxSkeletonLoader:Loaded"),this.items.length=this.count;var e=["progress","progress-dark","pulse","false"];-1===e.indexOf(this.animation)&&(r.isDevMode()&&console.error("`NgxSkeletonLoaderComponent` need to receive 'animation' as: "+e.join(", ")+'. Forcing default to "progress".'),this.animation="progress")},e.prototype.ngAfterViewInit=function(){o.end("NgxSkeletonLoader:Rendered")},e.prototype.ngOnDestroy=function(){o.end("NgxSkeletonLoader:Loaded")},e.decorators=[{type:r.Component,args:[{selector:"ngx-skeleton-loader",template:'<span\n  *ngFor="let item of items"\n  class="loader"\n  aria-busy="true"\n  aria-valuemin="0"\n  aria-valuemax="100"\n  aria-valuetext="Loading..."\n  role="progressbar"\n  tabindex="0"\n  [ngClass]="{\n    circle: appearance === \'circle\',\n    progress: animation === \'progress\',\n    \'progress-dark\': animation === \'progress-dark\',\n    pulse: animation === \'pulse\'\n  }"\n  [ngStyle]="theme"\n>\n</span>\n',styles:[".loader{box-sizing:border-box;overflow:hidden;position:relative;background:no-repeat #eff1f6;border-radius:4px;width:100%;height:20px;display:inline-block;margin-bottom:10px;will-change:transform}.loader:after,.loader:before{box-sizing:border-box}.loader.circle{width:40px;height:40px;margin:5px;border-radius:50%}.loader.progress,.loader.progress-dark{-webkit-animation:2s cubic-bezier(.4,0,.2,1) infinite progress;animation:2s cubic-bezier(.4,0,.2,1) infinite progress;background-size:200px 100%}.loader.progress{background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0))}.loader.progress-dark{background-image:linear-gradient(90deg,transparent,rgba(0,0,0,.2),transparent)}.loader.pulse{-webkit-animation:1.5s cubic-bezier(.4,0,.2,1) infinite pulse;animation:1.5s cubic-bezier(.4,0,.2,1) infinite pulse;-webkit-animation-delay:.5s;animation-delay:.5s}@media (prefers-reduced-motion:reduce){.loader.progress,.loader.progress-dark,.loader.pulse{-webkit-animation:none;animation:none}.loader.progress,.loader.progress-dark{background-image:none}}@-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}}@-webkit-keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}"]}]}],e.propDecorators={count:[{type:r.Input}],appearance:[{type:r.Input}],animation:[{type:r.Input}],theme:[{type:r.Input}]},e}();var t=function(){function e(){}return e.forRoot=function(){return{ngModule:e}},e.decorators=[{type:r.NgModule,args:[{declarations:[a],imports:[n.CommonModule],exports:[a]}]}],e}();e.NgxSkeletonLoaderComponent=a,e.NgxSkeletonLoaderModule=t,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=ngx-skeleton-loader.umd.min.js.map

CHANGELOG.md

@@ -10,2 +10,25 @@ # Change Log
 
+## [2.6.0][] - 2020-11-15
+
+### Added
+
+- Adding `NgxSkeletonLoaderModule.forRoot()` method. Usage:
+
+```js
+import { NgModule } from '@angular/core';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+// ... list of other app dependencies
+
+import { AppComponent } from './app.component';
+// ... list of other app components/modules
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [NgxSkeletonLoaderModule.forRoot()],
+  providers: [],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
+
 ## [2.5.0][] - 2020-10-10
@@ -293,5 +316,7 @@
 [2.4.4]: https://github.com/willmendesneto/ngx-skeleton-loader/tree/v2.4.4
+[unreleased]: https://github.com/willmendesneto/ngx-skeleton-loader/compare/v2.5.0...HEAD
+[2.5.0]: https://github.com/willmendesneto/ngx-skeleton-loader/tree/v2.5.0
 
 
-[Unreleased]: https://github.com/willmendesneto/ngx-skeleton-loader/compare/v2.5.0...HEAD
-[2.5.0]: https://github.com/willmendesneto/ngx-skeleton-loader/tree/v2.5.0
+[Unreleased]: https://github.com/willmendesneto/ngx-skeleton-loader/compare/v2.6.0...HEAD
+[2.6.0]: https://github.com/willmendesneto/ngx-skeleton-loader/tree/v2.6.0

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

@@ -10,2 +10,10 @@ /**
 export class NgxSkeletonLoaderModule {
+    /**
+     * @return {?}
+     */
+    static forRoot() {
+        return {
+            ngModule: NgxSkeletonLoaderModule,
+        };
+    }
 }
@@ -19,2 +27,2 @@ NgxSkeletonLoaderModule.decorators = [
 ];
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXNrZWxldG9uLWxvYWRlci5tb2R1bGUuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZ3gtc2tlbGV0b24tbG9hZGVyLyIsInNvdXJjZXMiOlsibGliL25neC1za2VsZXRvbi1sb2FkZXIubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7O0FBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsMEJBQTBCLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUM3RSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFPL0MsTUFBTSxPQUFPLHVCQUF1Qjs7O1lBTG5DLFFBQVEsU0FBQztnQkFDUixZQUFZLEVBQUUsQ0FBQywwQkFBMEIsQ0FBQztnQkFDMUMsT0FBTyxFQUFFLENBQUMsWUFBWSxDQUFDO2dCQUN2QixPQUFPLEVBQUUsQ0FBQywwQkFBMEIsQ0FBQzthQUN0QyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBOZ3hTa2VsZXRvbkxvYWRlckNvbXBvbmVudCB9IGZyb20gJy4vbmd4LXNrZWxldG9uLWxvYWRlci5jb21wb25lbnQnO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcblxuQE5nTW9kdWxlKHtcbiAgZGVjbGFyYXRpb25zOiBbTmd4U2tlbGV0b25Mb2FkZXJDb21wb25lbnRdLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlXSxcbiAgZXhwb3J0czogW05neFNrZWxldG9uTG9hZGVyQ29tcG9uZW50XSxcbn0pXG5leHBvcnQgY2xhc3MgTmd4U2tlbGV0b25Mb2FkZXJNb2R1bGUge31cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXNrZWxldG9uLWxvYWRlci5tb2R1bGUuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZ3gtc2tlbGV0b24tbG9hZGVyLyIsInNvdXJjZXMiOlsibGliL25neC1za2VsZXRvbi1sb2FkZXIubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7O0FBQUEsT0FBTyxFQUF1QixRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDOUQsT0FBTyxFQUFFLDBCQUEwQixFQUFFLE1BQU0saUNBQWlDLENBQUM7QUFDN0UsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBUS9DLE1BQU0sT0FBTyx1QkFBdUI7Ozs7SUFDbEMsTUFBTSxDQUFDLE9BQU87UUFDWixPQUFPO1lBQ0wsUUFBUSxFQUFFLHVCQUF1QjtTQUNsQyxDQUFDO0lBQ0osQ0FBQzs7O1lBWEYsUUFBUSxTQUFDO2dCQUNSLFlBQVksRUFBRSxDQUFDLDBCQUEwQixDQUFDO2dCQUMxQyxPQUFPLEVBQUUsQ0FBQyxZQUFZLENBQUM7Z0JBQ3ZCLE9BQU8sRUFBRSxDQUFDLDBCQUEwQixDQUFDO2FBQ3RDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTW9kdWxlV2l0aFByb3ZpZGVycywgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE5neFNrZWxldG9uTG9hZGVyQ29tcG9uZW50IH0gZnJvbSAnLi9uZ3gtc2tlbGV0b24tbG9hZGVyLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtOZ3hTa2VsZXRvbkxvYWRlckNvbXBvbmVudF0sXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGVdLFxuICBleHBvcnRzOiBbTmd4U2tlbGV0b25Mb2FkZXJDb21wb25lbnRdLFxufSlcblxuZXhwb3J0IGNsYXNzIE5neFNrZWxldG9uTG9hZGVyTW9kdWxlIHtcbiAgc3RhdGljIGZvclJvb3QoKTogTW9kdWxlV2l0aFByb3ZpZGVycyB7XG4gICAgcmV0dXJuIHtcbiAgICAgIG5nTW9kdWxlOiBOZ3hTa2VsZXRvbkxvYWRlck1vZHVsZSxcbiAgICB9O1xuICB9XG59XG4iXX0=

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

@@ -12,2 +12,13 @@ /**
     }
+    /**
+     * @return {?}
+     */
+    NgxSkeletonLoaderModule.forRoot = /**
+     * @return {?}
+     */
+    function () {
+        return {
+            ngModule: NgxSkeletonLoaderModule,
+        };
+    };
     NgxSkeletonLoaderModule.decorators = [
@@ -23,2 +34,2 @@ { type: NgModule, args: [{
 export { NgxSkeletonLoaderModule };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXNrZWxldG9uLWxvYWRlci5tb2R1bGUuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZ3gtc2tlbGV0b24tbG9hZGVyLyIsInNvdXJjZXMiOlsibGliL25neC1za2VsZXRvbi1sb2FkZXIubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7O0FBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsMEJBQTBCLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUM3RSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFFL0M7SUFBQTtJQUtzQyxDQUFDOztnQkFMdEMsUUFBUSxTQUFDO29CQUNSLFlBQVksRUFBRSxDQUFDLDBCQUEwQixDQUFDO29CQUMxQyxPQUFPLEVBQUUsQ0FBQyxZQUFZLENBQUM7b0JBQ3ZCLE9BQU8sRUFBRSxDQUFDLDBCQUEwQixDQUFDO2lCQUN0Qzs7SUFDcUMsOEJBQUM7Q0FBQSxBQUx2QyxJQUt1QztTQUExQix1QkFBdUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTmd4U2tlbGV0b25Mb2FkZXJDb21wb25lbnQgfSBmcm9tICcuL25neC1za2VsZXRvbi1sb2FkZXIuY29tcG9uZW50JztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5cbkBOZ01vZHVsZSh7XG4gIGRlY2xhcmF0aW9uczogW05neFNrZWxldG9uTG9hZGVyQ29tcG9uZW50XSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZV0sXG4gIGV4cG9ydHM6IFtOZ3hTa2VsZXRvbkxvYWRlckNvbXBvbmVudF0sXG59KVxuZXhwb3J0IGNsYXNzIE5neFNrZWxldG9uTG9hZGVyTW9kdWxlIHt9XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXNrZWxldG9uLWxvYWRlci5tb2R1bGUuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZ3gtc2tlbGV0b24tbG9hZGVyLyIsInNvdXJjZXMiOlsibGliL25neC1za2VsZXRvbi1sb2FkZXIubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7O0FBQUEsT0FBTyxFQUF1QixRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDOUQsT0FBTyxFQUFFLDBCQUEwQixFQUFFLE1BQU0saUNBQWlDLENBQUM7QUFDN0UsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBRS9DO0lBQUE7SUFZQSxDQUFDOzs7O0lBTFEsK0JBQU87OztJQUFkO1FBQ0UsT0FBTztZQUNMLFFBQVEsRUFBRSx1QkFBdUI7U0FDbEMsQ0FBQztJQUNKLENBQUM7O2dCQVhGLFFBQVEsU0FBQztvQkFDUixZQUFZLEVBQUUsQ0FBQywwQkFBMEIsQ0FBQztvQkFDMUMsT0FBTyxFQUFFLENBQUMsWUFBWSxDQUFDO29CQUN2QixPQUFPLEVBQUUsQ0FBQywwQkFBMEIsQ0FBQztpQkFDdEM7O0lBUUQsOEJBQUM7Q0FBQSxBQVpELElBWUM7U0FOWSx1QkFBdUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBNb2R1bGVXaXRoUHJvdmlkZXJzLCBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTmd4U2tlbGV0b25Mb2FkZXJDb21wb25lbnQgfSBmcm9tICcuL25neC1za2VsZXRvbi1sb2FkZXIuY29tcG9uZW50JztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5cbkBOZ01vZHVsZSh7XG4gIGRlY2xhcmF0aW9uczogW05neFNrZWxldG9uTG9hZGVyQ29tcG9uZW50XSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZV0sXG4gIGV4cG9ydHM6IFtOZ3hTa2VsZXRvbkxvYWRlckNvbXBvbmVudF0sXG59KVxuXG5leHBvcnQgY2xhc3MgTmd4U2tlbGV0b25Mb2FkZXJNb2R1bGUge1xuICBzdGF0aWMgZm9yUm9vdCgpOiBNb2R1bGVXaXRoUHJvdmlkZXJzIHtcbiAgICByZXR1cm4ge1xuICAgICAgbmdNb2R1bGU6IE5neFNrZWxldG9uTG9hZGVyTW9kdWxlLFxuICAgIH07XG4gIH1cbn1cbiJdfQ==

fesm2015/ngx-skeleton-loader.js

@@ -80,2 +80,10 @@ import { isDevMode, Component, Input, NgModule } from '@angular/core';
 class NgxSkeletonLoaderModule {
+    /**
+     * @return {?}
+     */
+    static forRoot() {
+        return {
+            ngModule: NgxSkeletonLoaderModule,
+        };
+    }
 }
@@ -82,0 +90,0 @@ NgxSkeletonLoaderModule.decorators = [

fesm5/ngx-skeleton-loader.js

@@ -92,2 +92,13 @@ import { isDevMode, Component, Input, NgModule } from '@angular/core';
     }
+    /**
+     * @return {?}
+     */
+    NgxSkeletonLoaderModule.forRoot = /**
+     * @return {?}
+     */
+    function () {
+        return {
+            ngModule: NgxSkeletonLoaderModule,
+        };
+    };
     NgxSkeletonLoaderModule.decorators = [
@@ -94,0 +105,0 @@ { type: NgModule, args: [{

lib/ngx-skeleton-loader.module.d.ts

@@ -0,2 +1,4 @@
+import { ModuleWithProviders } from '@angular/core';
 export declare class NgxSkeletonLoaderModule {
+    static forRoot(): ModuleWithProviders;
 }

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":3,"character":1},"arguments":[{"selector":"ngx-skeleton-loader","template":"<span\n  *ngFor=\"let item of items\"\n  class=\"loader\"\n  aria-busy=\"true\"\n  aria-valuemin=\"0\"\n  aria-valuemax=\"100\"\n  aria-valuetext=\"Loading...\"\n  role=\"progressbar\"\n  tabindex=\"0\"\n  [ngClass]=\"{\n    circle: appearance === 'circle',\n    progress: animation === 'progress',\n    'progress-dark': animation === 'progress-dark',\n    pulse: animation === 'pulse'\n  }\"\n  [ngStyle]=\"theme\"\n>\n</span>\n","styles":[".loader{box-sizing:border-box;overflow:hidden;position:relative;background:no-repeat #eff1f6;border-radius:4px;width:100%;height:20px;display:inline-block;margin-bottom:10px;will-change:transform}.loader:after,.loader:before{box-sizing:border-box}.loader.circle{width:40px;height:40px;margin:5px;border-radius:50%}.loader.progress,.loader.progress-dark{-webkit-animation:2s cubic-bezier(.4,0,.2,1) infinite progress;animation:2s cubic-bezier(.4,0,.2,1) infinite progress;background-size:200px 100%}.loader.progress{background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0))}.loader.progress-dark{background-image:linear-gradient(90deg,transparent,rgba(0,0,0,.2),transparent)}.loader.pulse{-webkit-animation:1.5s cubic-bezier(.4,0,.2,1) infinite pulse;animation:1.5s cubic-bezier(.4,0,.2,1) infinite pulse;-webkit-animation-delay:.5s;animation-delay:.5s}@media (prefers-reduced-motion:reduce){.loader.progress,.loader.progress-dark,.loader.pulse{-webkit-animation:none;animation:none}.loader.progress,.loader.progress-dark{background-image:none}}@-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}}@-webkit-keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}"]}]}],"members":{"count":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"appearance":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"animation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__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":3,"character":1},"arguments":[{"selector":"ngx-skeleton-loader","template":"<span\n  *ngFor=\"let item of items\"\n  class=\"loader\"\n  aria-busy=\"true\"\n  aria-valuemin=\"0\"\n  aria-valuemax=\"100\"\n  aria-valuetext=\"Loading...\"\n  role=\"progressbar\"\n  tabindex=\"0\"\n  [ngClass]=\"{\n    circle: appearance === 'circle',\n    progress: animation === 'progress',\n    'progress-dark': animation === 'progress-dark',\n    pulse: animation === 'pulse'\n  }\"\n  [ngStyle]=\"theme\"\n>\n</span>\n","styles":[".loader{box-sizing:border-box;overflow:hidden;position:relative;background:no-repeat #eff1f6;border-radius:4px;width:100%;height:20px;display:inline-block;margin-bottom:10px;will-change:transform}.loader:after,.loader:before{box-sizing:border-box}.loader.circle{width:40px;height:40px;margin:5px;border-radius:50%}.loader.progress,.loader.progress-dark{-webkit-animation:2s cubic-bezier(.4,0,.2,1) infinite progress;animation:2s cubic-bezier(.4,0,.2,1) infinite progress;background-size:200px 100%}.loader.progress{background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0))}.loader.progress-dark{background-image:linear-gradient(90deg,transparent,rgba(0,0,0,.2),transparent)}.loader.pulse{-webkit-animation:1.5s cubic-bezier(.4,0,.2,1) infinite pulse;animation:1.5s cubic-bezier(.4,0,.2,1) infinite pulse;-webkit-animation-delay:.5s;animation-delay:.5s}@media (prefers-reduced-motion:reduce){.loader.progress,.loader.progress-dark,.loader.pulse{-webkit-animation:none;animation:none}.loader.progress,.loader.progress-dark{background-image:none}}@-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}}@-webkit-keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}"]}]}],"members":{"count":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"appearance":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"animation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__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":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"NgxSkeletonLoaderModule"}}}}}},"origins":{"NgxSkeletonLoaderComponent":"./lib/ngx-skeleton-loader.component","NgxSkeletonLoaderModule":"./lib/ngx-skeleton-loader.module"},"importAs":"ngx-skeleton-loader"}

package.json

 {
   "name": "ngx-skeleton-loader",
   "description": "Make beautiful, animated loading skeletons that automatically adapt to your Angular apps",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "peerDependencies": {
@@ -6,0 +6,0 @@ "@angular/common": ">=8.0.0",

README.md

@@ -86,2 +86,34 @@ # NGX Skeleton loader
 
+### Using `NgxSkeletonLoaderModule.forRoot()`
+
+Also, you can import the module in your app by calling `NgxSkeletonLoaderModule.forRoot()` when adding it. So it will be available across your Angular application.
+
+```typescript
+...
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+...
+
+@NgModule({
+  declarations: [
+    YourAppComponent
+  ],
+  imports: [
+    ...
+    NgxSkeletonLoaderModule.forRoot(),
+    ...
+  ],
+  providers: [],
+  bootstrap: [YourAppComponent]
+})
+
+export class YourAppComponent {}
+
+```
+
+```html
+<div class="item">
+  <ngx-skeleton-loader count="5" appearance="circle"></ngx-skeleton-loader>
+</div>
+```
+
 ## Animations
@@ -153,8 +185,8 @@
 ```typescript
-import { Component } from "@angular/core";
+import { Component } from '@angular/core';
 
 @Component({
-  selector: "my-ngx-skeleton-loader-with-theming",
-  templateUrl: "./my-ngx-skeleton-loader-with-theming.component.html",
-  styleUrls: ["./my-ngx-skeleton-loader-with-theming.component.css"],
+  selector: 'my-ngx-skeleton-loader-with-theming',
+  templateUrl: './my-ngx-skeleton-loader-with-theming.component.html',
+  styleUrls: ['./my-ngx-skeleton-loader-with-theming.component.css'],
 })
@@ -166,3 +198,3 @@ export class MyNGXSkeletonLoaderWithThemingComponent {
 
-And your componennt HTML code is
+And your component HTML code is
 
@@ -176,6 +208,3 @@ ```html
 
-<ngx-skeleton-loader
-    count="5"
-    animation="pulse"
-  ></ngx-skeleton-loader>
+<ngx-skeleton-loader count="5" animation="pulse"></ngx-skeleton-loader>
 ```
@@ -182,0 +211,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

87654

increased by4.63%

Lines of code

654

increased by8.46%

Number of lines in readme file

252

increased by13%

No dependency changes