ngx-skeleton-loader - npm Package Compare versions

Comparing version 2.6.2 to 2.7.0

bundles/ngx-skeleton-loader.umd.js

@@ -15,2 +15,3 @@ (function (global, factory) {
             this.count = 1;
+            this.loadingText = 'Loading...';
             this.appearance = '';
@@ -33,3 +34,3 @@ this.animation = 'progress';
             var allowedAnimations = ['progress', 'progress-dark', 'pulse', 'false'];
-            if (allowedAnimations.indexOf(this.animation) === -1) {
+            if (allowedAnimations.indexOf(String(this.animation)) === -1) {
                 // Shows error message only in Development
@@ -63,3 +64,4 @@ if (core.isDevMode()) {
                         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",
+                        template: "<span\n  *ngFor=\"let item of items\"\n  class=\"loader\"\n  aria-busy=\"true\"\n  aria-valuemin=\"0\"\n  aria-valuemax=\"100\"\n  [attr.aria-valuetext]=\"loadingText\"\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",
+                        changeDetection: core.ChangeDetectionStrategy.OnPush,
                         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{transform:translate3d(0,0,0)}.loader.progress-dark:after,.loader.progress-dark:before,.loader.progress:after,.loader.progress:before{box-sizing:border-box}.loader.progress-dark:before,.loader.progress:before{-webkit-animation:2s ease-in-out infinite progress;animation:2s ease-in-out infinite progress;background-size:200px 100%;position:absolute;z-index:1;top:0;left:0;width:200px;height:100%;content:\"\"}.loader.progress:before{background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0))}.loader.progress-dark:before{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%{transform:translate3d(-200px,0,0)}100%{transform:translate3d(calc(200px + 100vw),0,0)}}@keyframes progress{0%{transform:translate3d(-200px,0,0)}100%{transform:translate3d(calc(200px + 100vw),0,0)}}@-webkit-keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}"]
@@ -70,2 +72,3 @@ }] }
             count: [{ type: core.Input }],
+            loadingText: [{ type: core.Input }],
             appearance: [{ type: core.Input }],
@@ -81,2 +84,4 @@ animation: [{ type: core.Input }],
         /** @type {?} */
+        NgxSkeletonLoaderComponent.prototype.loadingText;
+        /** @type {?} */
         NgxSkeletonLoaderComponent.prototype.appearance;
@@ -83,0 +88,0 @@ /** @type {?} */

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{transform:translate3d(0,0,0)}.loader.progress-dark:after,.loader.progress-dark:before,.loader.progress:after,.loader.progress:before{box-sizing:border-box}.loader.progress-dark:before,.loader.progress:before{-webkit-animation:2s ease-in-out infinite progress;animation:2s ease-in-out infinite progress;background-size:200px 100%;position:absolute;z-index:1;top:0;left:0;width:200px;height:100%;content:""}.loader.progress:before{background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0))}.loader.progress-dark:before{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%{transform:translate3d(-200px,0,0)}100%{transform:translate3d(calc(200px + 100vw),0,0)}}@keyframes progress{0%{transform:translate3d(-200px,0,0)}100%{transform:translate3d(calc(200px + 100vw),0,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})}));
+!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.loadingText="Loading...",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(String(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  [attr.aria-valuetext]="loadingText"\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',changeDetection:r.ChangeDetectionStrategy.OnPush,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{transform:translate3d(0,0,0)}.loader.progress-dark:after,.loader.progress-dark:before,.loader.progress:after,.loader.progress:before{box-sizing:border-box}.loader.progress-dark:before,.loader.progress:before{-webkit-animation:2s ease-in-out infinite progress;animation:2s ease-in-out infinite progress;background-size:200px 100%;position:absolute;z-index:1;top:0;left:0;width:200px;height:100%;content:""}.loader.progress:before{background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0))}.loader.progress-dark:before{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%{transform:translate3d(-200px,0,0)}100%{transform:translate3d(calc(200px + 100vw),0,0)}}@keyframes progress{0%{transform:translate3d(-200px,0,0)}100%{transform:translate3d(calc(200px + 100vw),0,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}],loadingText:[{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,37 @@ # Change Log
 
+## [2.7.0][] - 2021-02-06
+
+### Added
+
+- Adding new `loadingText` attribute to be used as WAI-ARIA `aria-valuetext`. In this case, it will render the component using "Please wait ...". Otherwise, it defaults to "Loading..."
+
+```html
+<!-- Passing loading text to be used as WAI-ARIA `aria-valuetext` -->
+<!-- In this case, it will render the component using "Please wait ..." -->
+<!-- Otherwise, it defaults to "Loading..." -->
+<div class="skeleton-with-specific-loading-text">
+  <ngx-skeleton-loader loadingText="Please wait ..."></ngx-skeleton-loader>
+</div>
+```
+
+### Updated
+
+- Using OnPush as changeDetection mechanism into ngx-skeleton-loader component
+- Adding ability to pass `false` as string or boolean (coming from variable value via binding) on `animation` attribute in `ngx-skeleton-loader` component configuration. animation will receive `false` as string when attribute field it's not using binding. Component now can receive `false` (boolean), "false" (string), or any other animation type via binding.
+
+```html
+<div class="item">
+  <!-- Disables the animation -->
+  <ngx-skeleton-loader animation="false"></ngx-skeleton-loader>
+  <!-- Disables the animation, but receiving boolean value from binding -->
+  <!-- Via binding it can receive `false` (boolean), "false" (string), or any other animation type -->
+  <ngx-skeleton-loader [animation]="classAttributeWithBooleanFalseValue"></ngx-skeleton-loader>
+  <!-- Uses `progress` as animation -->
+  <ngx-skeleton-loader animation="progress"></ngx-skeleton-loader>
+  <ngx-skeleton-loader></ngx-skeleton-loader>
+  <!-- Uses `pulse` as animation -->
+  <ngx-skeleton-loader animation="pulse"></ngx-skeleton-loader>
+</div>
+```
+
 ## [2.6.2][] - 2020-12-08
@@ -339,5 +374,7 @@
 [2.6.1]: https://github.com/willmendesneto/ngx-skeleton-loader/tree/v2.6.1
+[unreleased]: https://github.com/willmendesneto/ngx-skeleton-loader/compare/v2.6.2...HEAD
+[2.6.2]: https://github.com/willmendesneto/ngx-skeleton-loader/tree/v2.6.2
 
 
-[Unreleased]: https://github.com/willmendesneto/ngx-skeleton-loader/compare/v2.6.2...HEAD
-[2.6.2]: https://github.com/willmendesneto/ngx-skeleton-loader/tree/v2.6.2
+[Unreleased]: https://github.com/willmendesneto/ngx-skeleton-loader/compare/v2.7.0...HEAD
+[2.7.0]: https://github.com/willmendesneto/ngx-skeleton-loader/tree/v2.7.0

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

@@ -6,3 +6,3 @@ /**
  */
-import { Component, Input, isDevMode } from '@angular/core';
+import { Component, Input, isDevMode, ChangeDetectionStrategy } from '@angular/core';
 import { start, end } from 'perf-marks/marks';
@@ -12,2 +12,3 @@ export class NgxSkeletonLoaderComponent {
         this.count = 1;
+        this.loadingText = 'Loading...';
         this.appearance = '';
@@ -27,3 +28,3 @@ this.animation = 'progress';
         const allowedAnimations = ['progress', 'progress-dark', 'pulse', 'false'];
-        if (allowedAnimations.indexOf(this.animation) === -1) {
+        if (allowedAnimations.indexOf(String(this.animation)) === -1) {
             // Shows error message only in Development
@@ -52,3 +53,4 @@ if (isDevMode()) {
                 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",
+                template: "<span\n  *ngFor=\"let item of items\"\n  class=\"loader\"\n  aria-busy=\"true\"\n  aria-valuemin=\"0\"\n  aria-valuemax=\"100\"\n  [attr.aria-valuetext]=\"loadingText\"\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",
+                changeDetection: ChangeDetectionStrategy.OnPush,
                 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{transform:translate3d(0,0,0)}.loader.progress-dark:after,.loader.progress-dark:before,.loader.progress:after,.loader.progress:before{box-sizing:border-box}.loader.progress-dark:before,.loader.progress:before{-webkit-animation:2s ease-in-out infinite progress;animation:2s ease-in-out infinite progress;background-size:200px 100%;position:absolute;z-index:1;top:0;left:0;width:200px;height:100%;content:\"\"}.loader.progress:before{background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0))}.loader.progress-dark:before{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%{transform:translate3d(-200px,0,0)}100%{transform:translate3d(calc(200px + 100vw),0,0)}}@keyframes progress{0%{transform:translate3d(-200px,0,0)}100%{transform:translate3d(calc(200px + 100vw),0,0)}}@-webkit-keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}"]
@@ -59,2 +61,3 @@ }] }
     count: [{ type: Input }],
+    loadingText: [{ type: Input }],
     appearance: [{ type: Input }],
@@ -68,2 +71,4 @@ animation: [{ type: Input }],
     /** @type {?} */
+    NgxSkeletonLoaderComponent.prototype.loadingText;
+    /** @type {?} */
     NgxSkeletonLoaderComponent.prototype.appearance;
@@ -77,2 +82,2 @@ /** @type {?} */
 }
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXNrZWxldG9uLWxvYWRlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZ3gtc2tlbGV0b24tbG9hZGVyLyIsInNvdXJjZXMiOlsibGliL25neC1za2VsZXRvbi1sb2FkZXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxLQUFLLEVBQUUsU0FBUyxFQUE0QixNQUFNLGVBQWUsQ0FBQztBQUM5RixPQUFPLEVBQUUsS0FBSyxFQUFFLEdBQUcsRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBTzlDLE1BQU0sT0FBTywwQkFBMEI7SUFMdkM7UUFPRSxVQUFLLEdBQUcsQ0FBQyxDQUFDO1FBR1YsZUFBVSxHQUFrQixFQUFFLENBQUM7UUFHL0IsY0FBUyxHQUFxRCxVQUFVLENBQUM7UUFFaEUsVUFBSyxHQUE0QixFQUFFLENBQUM7UUFFN0MsVUFBSyxHQUFlLEVBQUUsQ0FBQztJQTRCekIsQ0FBQzs7OztJQTFCQyxRQUFRO1FBQ04sS0FBSyxDQUFDLDRCQUE0QixDQUFDLENBQUM7UUFDcEMsS0FBSyxDQUFDLDBCQUEwQixDQUFDLENBQUM7UUFFbEMsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQzs7Y0FDekIsaUJBQWlCLEdBQUcsQ0FBQyxVQUFVLEVBQUUsZUFBZSxFQUFFLE9BQU8sRUFBRSxPQUFPLENBQUM7UUFDekUsSUFBSSxpQkFBaUIsQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxFQUFFO1lBQ3BELDBDQUEwQztZQUMxQyxJQUFJLFNBQVMsRUFBRSxFQUFFO2dCQUNmLE9BQU8sQ0FBQyxLQUFLLENBQ1gsa0VBQWtFLGlCQUFpQixDQUFDLElBQUksQ0FDdEYsSUFBSSxDQUNMLGtDQUFrQyxDQUNwQyxDQUFDO2FBQ0g7WUFDRCxJQUFJLENBQUMsU0FBUyxHQUFHLFVBQVUsQ0FBQztTQUM3QjtJQUNILENBQUM7Ozs7SUFFRCxlQUFlO1FBQ2IsR0FBRyxDQUFDLDRCQUE0QixDQUFDLENBQUM7SUFDcEMsQ0FBQzs7OztJQUVELFdBQVc7UUFDVCxHQUFHLENBQUMsMEJBQTBCLENBQUMsQ0FBQztJQUNsQyxDQUFDOzs7WUE1Q0YsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxxQkFBcUI7Z0JBQy9CLHliQUF5Qzs7YUFFMUM7OztvQkFFRSxLQUFLO3lCQUdMLEtBQUs7d0JBR0wsS0FBSztvQkFHTCxLQUFLOzs7O0lBVE4sMkNBQ1U7O0lBRVYsZ0RBQytCOztJQUUvQiwrQ0FDeUU7O0lBRXpFLDJDQUE2Qzs7SUFFN0MsMkNBQXVCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIElucHV0LCBpc0Rldk1vZGUsIE9uRGVzdHJveSwgQWZ0ZXJWaWV3SW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgc3RhcnQsIGVuZCB9IGZyb20gJ3BlcmYtbWFya3MvbWFya3MnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICduZ3gtc2tlbGV0b24tbG9hZGVyJyxcbiAgdGVtcGxhdGVVcmw6ICcuL25neC1za2VsZXRvbi1sb2FkZXIuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL25neC1za2VsZXRvbi1sb2FkZXIuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBOZ3hTa2VsZXRvbkxvYWRlckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgQWZ0ZXJWaWV3SW5pdCwgT25EZXN0cm95IHtcbiAgQElucHV0KClcbiAgY291bnQgPSAxO1xuXG4gIEBJbnB1dCgpXG4gIGFwcGVhcmFuY2U6ICdjaXJjbGUnIHwgJycgPSAnJztcblxuICBASW5wdXQoKVxuICBhbmltYXRpb246ICdwcm9ncmVzcycgfCAncHJvZ3Jlc3MtZGFyaycgfCAncHVsc2UnIHwgJ2ZhbHNlJyA9ICdwcm9ncmVzcyc7XG5cbiAgQElucHV0KCkgdGhlbWU6IHsgW2s6IHN0cmluZ106IHN0cmluZyB9ID0ge307XG5cbiAgaXRlbXM6IEFycmF5PGFueT4gPSBbXTtcblxuICBuZ09uSW5pdCgpIHtcbiAgICBzdGFydCgnTmd4U2tlbGV0b25Mb2FkZXI6UmVuZGVyZWQnKTtcbiAgICBzdGFydCgnTmd4U2tlbGV0b25Mb2FkZXI6TG9hZGVkJyk7XG5cbiAgICB0aGlzLml0ZW1zLmxlbmd0aCA9IHRoaXMuY291bnQ7XG4gICAgY29uc3QgYWxsb3dlZEFuaW1hdGlvbnMgPSBbJ3Byb2dyZXNzJywgJ3Byb2dyZXNzLWRhcmsnLCAncHVsc2UnLCAnZmFsc2UnXTtcbiAgICBpZiAoYWxsb3dlZEFuaW1hdGlvbnMuaW5kZXhPZih0aGlzLmFuaW1hdGlvbikgPT09IC0xKSB7XG4gICAgICAvLyBTaG93cyBlcnJvciBtZXNzYWdlIG9ubHkgaW4gRGV2ZWxvcG1lbnRcbiAgICAgIGlmIChpc0Rldk1vZGUoKSkge1xuICAgICAgICBjb25zb2xlLmVycm9yKFxuICAgICAgICAgIGBcXGBOZ3hTa2VsZXRvbkxvYWRlckNvbXBvbmVudFxcYCBuZWVkIHRvIHJlY2VpdmUgJ2FuaW1hdGlvbicgYXM6ICR7YWxsb3dlZEFuaW1hdGlvbnMuam9pbihcbiAgICAgICAgICAgICcsICcsXG4gICAgICAgICAgKX0uIEZvcmNpbmcgZGVmYXVsdCB0byBcInByb2dyZXNzXCIuYCxcbiAgICAgICAgKTtcbiAgICAgIH1cbiAgICAgIHRoaXMuYW5pbWF0aW9uID0gJ3Byb2dyZXNzJztcbiAgICB9XG4gIH1cblxuICBuZ0FmdGVyVmlld0luaXQoKSB7XG4gICAgZW5kKCdOZ3hTa2VsZXRvbkxvYWRlcjpSZW5kZXJlZCcpO1xuICB9XG5cbiAgbmdPbkRlc3Ryb3koKSB7XG4gICAgZW5kKCdOZ3hTa2VsZXRvbkxvYWRlcjpMb2FkZWQnKTtcbiAgfVxufVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXNrZWxldG9uLWxvYWRlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZ3gtc2tlbGV0b24tbG9hZGVyLyIsInNvdXJjZXMiOlsibGliL25neC1za2VsZXRvbi1sb2FkZXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxLQUFLLEVBQUUsU0FBUyxFQUE0Qix1QkFBdUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN2SCxPQUFPLEVBQUUsS0FBSyxFQUFFLEdBQUcsRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBUTlDLE1BQU0sT0FBTywwQkFBMEI7SUFOdkM7UUFRRSxVQUFLLEdBQUcsQ0FBQyxDQUFDO1FBR1YsZ0JBQVcsR0FBRyxZQUFZLENBQUM7UUFHM0IsZUFBVSxHQUFrQixFQUFFLENBQUM7UUFHL0IsY0FBUyxHQUE2RCxVQUFVLENBQUM7UUFFeEUsVUFBSyxHQUE0QixFQUFFLENBQUM7UUFFN0MsVUFBSyxHQUFlLEVBQUUsQ0FBQztJQTRCekIsQ0FBQzs7OztJQTFCQyxRQUFRO1FBQ04sS0FBSyxDQUFDLDRCQUE0QixDQUFDLENBQUM7UUFDcEMsS0FBSyxDQUFDLDBCQUEwQixDQUFDLENBQUM7UUFFbEMsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQzs7Y0FDekIsaUJBQWlCLEdBQUcsQ0FBQyxVQUFVLEVBQUUsZUFBZSxFQUFFLE9BQU8sRUFBRSxPQUFPLENBQUM7UUFDekUsSUFBSSxpQkFBaUIsQ0FBQyxPQUFPLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxFQUFFO1lBQzVELDBDQUEwQztZQUMxQyxJQUFJLFNBQVMsRUFBRSxFQUFFO2dCQUNmLE9BQU8sQ0FBQyxLQUFLLENBQ1gsa0VBQWtFLGlCQUFpQixDQUFDLElBQUksQ0FDdEYsSUFBSSxDQUNMLGtDQUFrQyxDQUNwQyxDQUFDO2FBQ0g7WUFDRCxJQUFJLENBQUMsU0FBUyxHQUFHLFVBQVUsQ0FBQztTQUM3QjtJQUNILENBQUM7Ozs7SUFFRCxlQUFlO1FBQ2IsR0FBRyxDQUFDLDRCQUE0QixDQUFDLENBQUM7SUFDcEMsQ0FBQzs7OztJQUVELFdBQVc7UUFDVCxHQUFHLENBQUMsMEJBQTBCLENBQUMsQ0FBQztJQUNsQyxDQUFDOzs7WUFoREYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxxQkFBcUI7Z0JBQy9CLGljQUF5QztnQkFFekMsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07O2FBQ2hEOzs7b0JBRUUsS0FBSzswQkFHTCxLQUFLO3lCQUdMLEtBQUs7d0JBR0wsS0FBSztvQkFHTCxLQUFLOzs7O0lBWk4sMkNBQ1U7O0lBRVYsaURBQzJCOztJQUUzQixnREFDK0I7O0lBRS9CLCtDQUNpRjs7SUFFakYsMkNBQTZDOztJQUU3QywyQ0FBdUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCwgSW5wdXQsIGlzRGV2TW9kZSwgT25EZXN0cm95LCBBZnRlclZpZXdJbml0LCBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgc3RhcnQsIGVuZCB9IGZyb20gJ3BlcmYtbWFya3MvbWFya3MnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICduZ3gtc2tlbGV0b24tbG9hZGVyJyxcbiAgdGVtcGxhdGVVcmw6ICcuL25neC1za2VsZXRvbi1sb2FkZXIuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL25neC1za2VsZXRvbi1sb2FkZXIuc2NzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgTmd4U2tlbGV0b25Mb2FkZXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIEFmdGVyVmlld0luaXQsIE9uRGVzdHJveSB7XG4gIEBJbnB1dCgpXG4gIGNvdW50ID0gMTtcblxuICBASW5wdXQoKVxuICBsb2FkaW5nVGV4dCA9ICdMb2FkaW5nLi4uJztcblxuICBASW5wdXQoKVxuICBhcHBlYXJhbmNlOiAnY2lyY2xlJyB8ICcnID0gJyc7XG5cbiAgQElucHV0KClcbiAgYW5pbWF0aW9uOiAncHJvZ3Jlc3MnIHwgJ3Byb2dyZXNzLWRhcmsnIHwgJ3B1bHNlJyB8ICdmYWxzZScgfCBmYWxzZSA9ICdwcm9ncmVzcyc7XG5cbiAgQElucHV0KCkgdGhlbWU6IHsgW2s6IHN0cmluZ106IHN0cmluZyB9ID0ge307XG5cbiAgaXRlbXM6IEFycmF5PGFueT4gPSBbXTtcblxuICBuZ09uSW5pdCgpIHtcbiAgICBzdGFydCgnTmd4U2tlbGV0b25Mb2FkZXI6UmVuZGVyZWQnKTtcbiAgICBzdGFydCgnTmd4U2tlbGV0b25Mb2FkZXI6TG9hZGVkJyk7XG5cbiAgICB0aGlzLml0ZW1zLmxlbmd0aCA9IHRoaXMuY291bnQ7XG4gICAgY29uc3QgYWxsb3dlZEFuaW1hdGlvbnMgPSBbJ3Byb2dyZXNzJywgJ3Byb2dyZXNzLWRhcmsnLCAncHVsc2UnLCAnZmFsc2UnXTtcbiAgICBpZiAoYWxsb3dlZEFuaW1hdGlvbnMuaW5kZXhPZihTdHJpbmcodGhpcy5hbmltYXRpb24pKSA9PT0gLTEpIHtcbiAgICAgIC8vIFNob3dzIGVycm9yIG1lc3NhZ2Ugb25seSBpbiBEZXZlbG9wbWVudFxuICAgICAgaWYgKGlzRGV2TW9kZSgpKSB7XG4gICAgICAgIGNvbnNvbGUuZXJyb3IoXG4gICAgICAgICAgYFxcYE5neFNrZWxldG9uTG9hZGVyQ29tcG9uZW50XFxgIG5lZWQgdG8gcmVjZWl2ZSAnYW5pbWF0aW9uJyBhczogJHthbGxvd2VkQW5pbWF0aW9ucy5qb2luKFxuICAgICAgICAgICAgJywgJyxcbiAgICAgICAgICApfS4gRm9yY2luZyBkZWZhdWx0IHRvIFwicHJvZ3Jlc3NcIi5gLFxuICAgICAgICApO1xuICAgICAgfVxuICAgICAgdGhpcy5hbmltYXRpb24gPSAncHJvZ3Jlc3MnO1xuICAgIH1cbiAgfVxuXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpIHtcbiAgICBlbmQoJ05neFNrZWxldG9uTG9hZGVyOlJlbmRlcmVkJyk7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpIHtcbiAgICBlbmQoJ05neFNrZWxldG9uTG9hZGVyOkxvYWRlZCcpO1xuICB9XG59XG4iXX0=

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

@@ -6,3 +6,3 @@ /**
  */
-import { Component, Input, isDevMode } from '@angular/core';
+import { Component, Input, isDevMode, ChangeDetectionStrategy } from '@angular/core';
 import { start, end } from 'perf-marks/marks';
@@ -12,2 +12,3 @@ var NgxSkeletonLoaderComponent = /** @class */ (function () {
         this.count = 1;
+        this.loadingText = 'Loading...';
         this.appearance = '';
@@ -30,3 +31,3 @@ this.animation = 'progress';
         var allowedAnimations = ['progress', 'progress-dark', 'pulse', 'false'];
-        if (allowedAnimations.indexOf(this.animation) === -1) {
+        if (allowedAnimations.indexOf(String(this.animation)) === -1) {
             // Shows error message only in Development
@@ -60,3 +61,4 @@ if (isDevMode()) {
                     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",
+                    template: "<span\n  *ngFor=\"let item of items\"\n  class=\"loader\"\n  aria-busy=\"true\"\n  aria-valuemin=\"0\"\n  aria-valuemax=\"100\"\n  [attr.aria-valuetext]=\"loadingText\"\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",
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     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{transform:translate3d(0,0,0)}.loader.progress-dark:after,.loader.progress-dark:before,.loader.progress:after,.loader.progress:before{box-sizing:border-box}.loader.progress-dark:before,.loader.progress:before{-webkit-animation:2s ease-in-out infinite progress;animation:2s ease-in-out infinite progress;background-size:200px 100%;position:absolute;z-index:1;top:0;left:0;width:200px;height:100%;content:\"\"}.loader.progress:before{background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0))}.loader.progress-dark:before{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%{transform:translate3d(-200px,0,0)}100%{transform:translate3d(calc(200px + 100vw),0,0)}}@keyframes progress{0%{transform:translate3d(-200px,0,0)}100%{transform:translate3d(calc(200px + 100vw),0,0)}}@-webkit-keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}"]
@@ -67,2 +69,3 @@ }] }
         count: [{ type: Input }],
+        loadingText: [{ type: Input }],
         appearance: [{ type: Input }],
@@ -79,2 +82,4 @@ animation: [{ type: Input }],
     /** @type {?} */
+    NgxSkeletonLoaderComponent.prototype.loadingText;
+    /** @type {?} */
     NgxSkeletonLoaderComponent.prototype.appearance;
@@ -88,2 +93,2 @@ /** @type {?} */
 }
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXNrZWxldG9uLWxvYWRlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZ3gtc2tlbGV0b24tbG9hZGVyLyIsInNvdXJjZXMiOlsibGliL25neC1za2VsZXRvbi1sb2FkZXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxLQUFLLEVBQUUsU0FBUyxFQUE0QixNQUFNLGVBQWUsQ0FBQztBQUM5RixPQUFPLEVBQUUsS0FBSyxFQUFFLEdBQUcsRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBRTlDO0lBQUE7UUFPRSxVQUFLLEdBQUcsQ0FBQyxDQUFDO1FBR1YsZUFBVSxHQUFrQixFQUFFLENBQUM7UUFHL0IsY0FBUyxHQUFxRCxVQUFVLENBQUM7UUFFaEUsVUFBSyxHQUE0QixFQUFFLENBQUM7UUFFN0MsVUFBSyxHQUFlLEVBQUUsQ0FBQztJQTRCekIsQ0FBQzs7OztJQTFCQyw2Q0FBUTs7O0lBQVI7UUFDRSxLQUFLLENBQUMsNEJBQTRCLENBQUMsQ0FBQztRQUNwQyxLQUFLLENBQUMsMEJBQTBCLENBQUMsQ0FBQztRQUVsQyxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDOztZQUN6QixpQkFBaUIsR0FBRyxDQUFDLFVBQVUsRUFBRSxlQUFlLEVBQUUsT0FBTyxFQUFFLE9BQU8sQ0FBQztRQUN6RSxJQUFJLGlCQUFpQixDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLEtBQUssQ0FBQyxDQUFDLEVBQUU7WUFDcEQsMENBQTBDO1lBQzFDLElBQUksU0FBUyxFQUFFLEVBQUU7Z0JBQ2YsT0FBTyxDQUFDLEtBQUssQ0FDWCxrRUFBa0UsaUJBQWlCLENBQUMsSUFBSSxDQUN0RixJQUFJLENBQ0wsdUNBQWtDLENBQ3BDLENBQUM7YUFDSDtZQUNELElBQUksQ0FBQyxTQUFTLEdBQUcsVUFBVSxDQUFDO1NBQzdCO0lBQ0gsQ0FBQzs7OztJQUVELG9EQUFlOzs7SUFBZjtRQUNFLEdBQUcsQ0FBQyw0QkFBNEIsQ0FBQyxDQUFDO0lBQ3BDLENBQUM7Ozs7SUFFRCxnREFBVzs7O0lBQVg7UUFDRSxHQUFHLENBQUMsMEJBQTBCLENBQUMsQ0FBQztJQUNsQyxDQUFDOztnQkE1Q0YsU0FBUyxTQUFDO29CQUNULFFBQVEsRUFBRSxxQkFBcUI7b0JBQy9CLHliQUF5Qzs7aUJBRTFDOzs7d0JBRUUsS0FBSzs2QkFHTCxLQUFLOzRCQUdMLEtBQUs7d0JBR0wsS0FBSzs7SUE4QlIsaUNBQUM7Q0FBQSxBQTdDRCxJQTZDQztTQXhDWSwwQkFBMEI7OztJQUNyQywyQ0FDVTs7SUFFVixnREFDK0I7O0lBRS9CLCtDQUN5RTs7SUFFekUsMkNBQTZDOztJQUU3QywyQ0FBdUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCwgSW5wdXQsIGlzRGV2TW9kZSwgT25EZXN0cm95LCBBZnRlclZpZXdJbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBzdGFydCwgZW5kIH0gZnJvbSAncGVyZi1tYXJrcy9tYXJrcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ25neC1za2VsZXRvbi1sb2FkZXInLFxuICB0ZW1wbGF0ZVVybDogJy4vbmd4LXNrZWxldG9uLWxvYWRlci5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vbmd4LXNrZWxldG9uLWxvYWRlci5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIE5neFNrZWxldG9uTG9hZGVyQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBBZnRlclZpZXdJbml0LCBPbkRlc3Ryb3kge1xuICBASW5wdXQoKVxuICBjb3VudCA9IDE7XG5cbiAgQElucHV0KClcbiAgYXBwZWFyYW5jZTogJ2NpcmNsZScgfCAnJyA9ICcnO1xuXG4gIEBJbnB1dCgpXG4gIGFuaW1hdGlvbjogJ3Byb2dyZXNzJyB8ICdwcm9ncmVzcy1kYXJrJyB8ICdwdWxzZScgfCAnZmFsc2UnID0gJ3Byb2dyZXNzJztcblxuICBASW5wdXQoKSB0aGVtZTogeyBbazogc3RyaW5nXTogc3RyaW5nIH0gPSB7fTtcblxuICBpdGVtczogQXJyYXk8YW55PiA9IFtdO1xuXG4gIG5nT25Jbml0KCkge1xuICAgIHN0YXJ0KCdOZ3hTa2VsZXRvbkxvYWRlcjpSZW5kZXJlZCcpO1xuICAgIHN0YXJ0KCdOZ3hTa2VsZXRvbkxvYWRlcjpMb2FkZWQnKTtcblxuICAgIHRoaXMuaXRlbXMubGVuZ3RoID0gdGhpcy5jb3VudDtcbiAgICBjb25zdCBhbGxvd2VkQW5pbWF0aW9ucyA9IFsncHJvZ3Jlc3MnLCAncHJvZ3Jlc3MtZGFyaycsICdwdWxzZScsICdmYWxzZSddO1xuICAgIGlmIChhbGxvd2VkQW5pbWF0aW9ucy5pbmRleE9mKHRoaXMuYW5pbWF0aW9uKSA9PT0gLTEpIHtcbiAgICAgIC8vIFNob3dzIGVycm9yIG1lc3NhZ2Ugb25seSBpbiBEZXZlbG9wbWVudFxuICAgICAgaWYgKGlzRGV2TW9kZSgpKSB7XG4gICAgICAgIGNvbnNvbGUuZXJyb3IoXG4gICAgICAgICAgYFxcYE5neFNrZWxldG9uTG9hZGVyQ29tcG9uZW50XFxgIG5lZWQgdG8gcmVjZWl2ZSAnYW5pbWF0aW9uJyBhczogJHthbGxvd2VkQW5pbWF0aW9ucy5qb2luKFxuICAgICAgICAgICAgJywgJyxcbiAgICAgICAgICApfS4gRm9yY2luZyBkZWZhdWx0IHRvIFwicHJvZ3Jlc3NcIi5gLFxuICAgICAgICApO1xuICAgICAgfVxuICAgICAgdGhpcy5hbmltYXRpb24gPSAncHJvZ3Jlc3MnO1xuICAgIH1cbiAgfVxuXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpIHtcbiAgICBlbmQoJ05neFNrZWxldG9uTG9hZGVyOlJlbmRlcmVkJyk7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpIHtcbiAgICBlbmQoJ05neFNrZWxldG9uTG9hZGVyOkxvYWRlZCcpO1xuICB9XG59XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXNrZWxldG9uLWxvYWRlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZ3gtc2tlbGV0b24tbG9hZGVyLyIsInNvdXJjZXMiOlsibGliL25neC1za2VsZXRvbi1sb2FkZXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxLQUFLLEVBQUUsU0FBUyxFQUE0Qix1QkFBdUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN2SCxPQUFPLEVBQUUsS0FBSyxFQUFFLEdBQUcsRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBRTlDO0lBQUE7UUFRRSxVQUFLLEdBQUcsQ0FBQyxDQUFDO1FBR1YsZ0JBQVcsR0FBRyxZQUFZLENBQUM7UUFHM0IsZUFBVSxHQUFrQixFQUFFLENBQUM7UUFHL0IsY0FBUyxHQUE2RCxVQUFVLENBQUM7UUFFeEUsVUFBSyxHQUE0QixFQUFFLENBQUM7UUFFN0MsVUFBSyxHQUFlLEVBQUUsQ0FBQztJQTRCekIsQ0FBQzs7OztJQTFCQyw2Q0FBUTs7O0lBQVI7UUFDRSxLQUFLLENBQUMsNEJBQTRCLENBQUMsQ0FBQztRQUNwQyxLQUFLLENBQUMsMEJBQTBCLENBQUMsQ0FBQztRQUVsQyxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDOztZQUN6QixpQkFBaUIsR0FBRyxDQUFDLFVBQVUsRUFBRSxlQUFlLEVBQUUsT0FBTyxFQUFFLE9BQU8sQ0FBQztRQUN6RSxJQUFJLGlCQUFpQixDQUFDLE9BQU8sQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDLEVBQUU7WUFDNUQsMENBQTBDO1lBQzFDLElBQUksU0FBUyxFQUFFLEVBQUU7Z0JBQ2YsT0FBTyxDQUFDLEtBQUssQ0FDWCxrRUFBa0UsaUJBQWlCLENBQUMsSUFBSSxDQUN0RixJQUFJLENBQ0wsdUNBQWtDLENBQ3BDLENBQUM7YUFDSDtZQUNELElBQUksQ0FBQyxTQUFTLEdBQUcsVUFBVSxDQUFDO1NBQzdCO0lBQ0gsQ0FBQzs7OztJQUVELG9EQUFlOzs7SUFBZjtRQUNFLEdBQUcsQ0FBQyw0QkFBNEIsQ0FBQyxDQUFDO0lBQ3BDLENBQUM7Ozs7SUFFRCxnREFBVzs7O0lBQVg7UUFDRSxHQUFHLENBQUMsMEJBQTBCLENBQUMsQ0FBQztJQUNsQyxDQUFDOztnQkFoREYsU0FBUyxTQUFDO29CQUNULFFBQVEsRUFBRSxxQkFBcUI7b0JBQy9CLGljQUF5QztvQkFFekMsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07O2lCQUNoRDs7O3dCQUVFLEtBQUs7OEJBR0wsS0FBSzs2QkFHTCxLQUFLOzRCQUdMLEtBQUs7d0JBR0wsS0FBSzs7SUE4QlIsaUNBQUM7Q0FBQSxBQWpERCxJQWlEQztTQTNDWSwwQkFBMEI7OztJQUNyQywyQ0FDVTs7SUFFVixpREFDMkI7O0lBRTNCLGdEQUMrQjs7SUFFL0IsK0NBQ2lGOztJQUVqRiwyQ0FBNkM7O0lBRTdDLDJDQUF1QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBJbnB1dCwgaXNEZXZNb2RlLCBPbkRlc3Ryb3ksIEFmdGVyVmlld0luaXQsIENoYW5nZURldGVjdGlvblN0cmF0ZWd5IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBzdGFydCwgZW5kIH0gZnJvbSAncGVyZi1tYXJrcy9tYXJrcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ25neC1za2VsZXRvbi1sb2FkZXInLFxuICB0ZW1wbGF0ZVVybDogJy4vbmd4LXNrZWxldG9uLWxvYWRlci5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vbmd4LXNrZWxldG9uLWxvYWRlci5zY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBOZ3hTa2VsZXRvbkxvYWRlckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgQWZ0ZXJWaWV3SW5pdCwgT25EZXN0cm95IHtcbiAgQElucHV0KClcbiAgY291bnQgPSAxO1xuXG4gIEBJbnB1dCgpXG4gIGxvYWRpbmdUZXh0ID0gJ0xvYWRpbmcuLi4nO1xuXG4gIEBJbnB1dCgpXG4gIGFwcGVhcmFuY2U6ICdjaXJjbGUnIHwgJycgPSAnJztcblxuICBASW5wdXQoKVxuICBhbmltYXRpb246ICdwcm9ncmVzcycgfCAncHJvZ3Jlc3MtZGFyaycgfCAncHVsc2UnIHwgJ2ZhbHNlJyB8IGZhbHNlID0gJ3Byb2dyZXNzJztcblxuICBASW5wdXQoKSB0aGVtZTogeyBbazogc3RyaW5nXTogc3RyaW5nIH0gPSB7fTtcblxuICBpdGVtczogQXJyYXk8YW55PiA9IFtdO1xuXG4gIG5nT25Jbml0KCkge1xuICAgIHN0YXJ0KCdOZ3hTa2VsZXRvbkxvYWRlcjpSZW5kZXJlZCcpO1xuICAgIHN0YXJ0KCdOZ3hTa2VsZXRvbkxvYWRlcjpMb2FkZWQnKTtcblxuICAgIHRoaXMuaXRlbXMubGVuZ3RoID0gdGhpcy5jb3VudDtcbiAgICBjb25zdCBhbGxvd2VkQW5pbWF0aW9ucyA9IFsncHJvZ3Jlc3MnLCAncHJvZ3Jlc3MtZGFyaycsICdwdWxzZScsICdmYWxzZSddO1xuICAgIGlmIChhbGxvd2VkQW5pbWF0aW9ucy5pbmRleE9mKFN0cmluZyh0aGlzLmFuaW1hdGlvbikpID09PSAtMSkge1xuICAgICAgLy8gU2hvd3MgZXJyb3IgbWVzc2FnZSBvbmx5IGluIERldmVsb3BtZW50XG4gICAgICBpZiAoaXNEZXZNb2RlKCkpIHtcbiAgICAgICAgY29uc29sZS5lcnJvcihcbiAgICAgICAgICBgXFxgTmd4U2tlbGV0b25Mb2FkZXJDb21wb25lbnRcXGAgbmVlZCB0byByZWNlaXZlICdhbmltYXRpb24nIGFzOiAke2FsbG93ZWRBbmltYXRpb25zLmpvaW4oXG4gICAgICAgICAgICAnLCAnLFxuICAgICAgICAgICl9LiBGb3JjaW5nIGRlZmF1bHQgdG8gXCJwcm9ncmVzc1wiLmAsXG4gICAgICAgICk7XG4gICAgICB9XG4gICAgICB0aGlzLmFuaW1hdGlvbiA9ICdwcm9ncmVzcyc7XG4gICAgfVxuICB9XG5cbiAgbmdBZnRlclZpZXdJbml0KCkge1xuICAgIGVuZCgnTmd4U2tlbGV0b25Mb2FkZXI6UmVuZGVyZWQnKTtcbiAgfVxuXG4gIG5nT25EZXN0cm95KCkge1xuICAgIGVuZCgnTmd4U2tlbGV0b25Mb2FkZXI6TG9hZGVkJyk7XG4gIH1cbn1cbiJdfQ==

fesm2015/ngx-skeleton-loader.js

@@ -1,2 +0,2 @@
-import { isDevMode, Component, Input, NgModule } from '@angular/core';
+import { isDevMode, Component, ChangeDetectionStrategy, Input, NgModule } from '@angular/core';
 import { start, end } from 'perf-marks/marks';
@@ -13,2 +13,3 @@ import { CommonModule } from '@angular/common';
         this.count = 1;
+        this.loadingText = 'Loading...';
         this.appearance = '';
@@ -28,3 +29,3 @@ this.animation = 'progress';
         const allowedAnimations = ['progress', 'progress-dark', 'pulse', 'false'];
-        if (allowedAnimations.indexOf(this.animation) === -1) {
+        if (allowedAnimations.indexOf(String(this.animation)) === -1) {
             // Shows error message only in Development
@@ -53,3 +54,4 @@ if (isDevMode()) {
                 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",
+                template: "<span\n  *ngFor=\"let item of items\"\n  class=\"loader\"\n  aria-busy=\"true\"\n  aria-valuemin=\"0\"\n  aria-valuemax=\"100\"\n  [attr.aria-valuetext]=\"loadingText\"\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",
+                changeDetection: ChangeDetectionStrategy.OnPush,
                 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{transform:translate3d(0,0,0)}.loader.progress-dark:after,.loader.progress-dark:before,.loader.progress:after,.loader.progress:before{box-sizing:border-box}.loader.progress-dark:before,.loader.progress:before{-webkit-animation:2s ease-in-out infinite progress;animation:2s ease-in-out infinite progress;background-size:200px 100%;position:absolute;z-index:1;top:0;left:0;width:200px;height:100%;content:\"\"}.loader.progress:before{background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0))}.loader.progress-dark:before{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%{transform:translate3d(-200px,0,0)}100%{transform:translate3d(calc(200px + 100vw),0,0)}}@keyframes progress{0%{transform:translate3d(-200px,0,0)}100%{transform:translate3d(calc(200px + 100vw),0,0)}}@-webkit-keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}"]
@@ -60,2 +62,3 @@ }] }
     count: [{ type: Input }],
+    loadingText: [{ type: Input }],
     appearance: [{ type: Input }],
@@ -69,2 +72,4 @@ animation: [{ type: Input }],
     /** @type {?} */
+    NgxSkeletonLoaderComponent.prototype.loadingText;
+    /** @type {?} */
     NgxSkeletonLoaderComponent.prototype.appearance;
@@ -71,0 +76,0 @@ /** @type {?} */

fesm5/ngx-skeleton-loader.js

@@ -1,2 +0,2 @@
-import { isDevMode, Component, Input, NgModule } from '@angular/core';
+import { isDevMode, Component, ChangeDetectionStrategy, Input, NgModule } from '@angular/core';
 import { start, end } from 'perf-marks/marks';
@@ -13,2 +13,3 @@ import { CommonModule } from '@angular/common';
         this.count = 1;
+        this.loadingText = 'Loading...';
         this.appearance = '';
@@ -31,3 +32,3 @@ this.animation = 'progress';
         var allowedAnimations = ['progress', 'progress-dark', 'pulse', 'false'];
-        if (allowedAnimations.indexOf(this.animation) === -1) {
+        if (allowedAnimations.indexOf(String(this.animation)) === -1) {
             // Shows error message only in Development
@@ -61,3 +62,4 @@ if (isDevMode()) {
                     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",
+                    template: "<span\n  *ngFor=\"let item of items\"\n  class=\"loader\"\n  aria-busy=\"true\"\n  aria-valuemin=\"0\"\n  aria-valuemax=\"100\"\n  [attr.aria-valuetext]=\"loadingText\"\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",
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     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{transform:translate3d(0,0,0)}.loader.progress-dark:after,.loader.progress-dark:before,.loader.progress:after,.loader.progress:before{box-sizing:border-box}.loader.progress-dark:before,.loader.progress:before{-webkit-animation:2s ease-in-out infinite progress;animation:2s ease-in-out infinite progress;background-size:200px 100%;position:absolute;z-index:1;top:0;left:0;width:200px;height:100%;content:\"\"}.loader.progress:before{background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0))}.loader.progress-dark:before{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%{transform:translate3d(-200px,0,0)}100%{transform:translate3d(calc(200px + 100vw),0,0)}}@keyframes progress{0%{transform:translate3d(-200px,0,0)}100%{transform:translate3d(calc(200px + 100vw),0,0)}}@-webkit-keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}"]
@@ -68,2 +70,3 @@ }] }
         count: [{ type: Input }],
+        loadingText: [{ type: Input }],
         appearance: [{ type: Input }],
@@ -79,2 +82,4 @@ animation: [{ type: Input }],
     /** @type {?} */
+    NgxSkeletonLoaderComponent.prototype.loadingText;
+    /** @type {?} */
     NgxSkeletonLoaderComponent.prototype.appearance;
@@ -81,0 +86,0 @@ /** @type {?} */

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

 import { OnInit, OnDestroy, AfterViewInit } from '@angular/core';
 export declare class NgxSkeletonLoaderComponent implements OnInit, AfterViewInit, OnDestroy {
     count: number;
+    loadingText: string;
     appearance: 'circle' | '';
-    animation: 'progress' | 'progress-dark' | 'pulse' | 'false';
+    animation: 'progress' | 'progress-dark' | 'pulse' | 'false' | false;
     theme: {
@@ -7,0 +8,0 @@ [k: string]: string;

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{transform:translate3d(0,0,0)}.loader.progress-dark:after,.loader.progress-dark:before,.loader.progress:after,.loader.progress:before{box-sizing:border-box}.loader.progress-dark:before,.loader.progress:before{-webkit-animation:2s ease-in-out infinite progress;animation:2s ease-in-out infinite progress;background-size:200px 100%;position:absolute;z-index:1;top:0;left:0;width:200px;height:100%;content:\"\"}.loader.progress:before{background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0))}.loader.progress-dark:before{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%{transform:translate3d(-200px,0,0)}100%{transform:translate3d(calc(200px + 100vw),0,0)}}@keyframes progress{0%{transform:translate3d(-200px,0,0)}100%{transform:translate3d(calc(200px + 100vw),0,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"}
+{"__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","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":7,"character":19},"member":"OnPush"},"template":"<span\n  *ngFor=\"let item of items\"\n  class=\"loader\"\n  aria-busy=\"true\"\n  aria-valuemin=\"0\"\n  aria-valuemax=\"100\"\n  [attr.aria-valuetext]=\"loadingText\"\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{transform:translate3d(0,0,0)}.loader.progress-dark:after,.loader.progress-dark:before,.loader.progress:after,.loader.progress:before{box-sizing:border-box}.loader.progress-dark:before,.loader.progress:before{-webkit-animation:2s ease-in-out infinite progress;animation:2s ease-in-out infinite progress;background-size:200px 100%;position:absolute;z-index:1;top:0;left:0;width:200px;height:100%;content:\"\"}.loader.progress:before{background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0))}.loader.progress-dark:before{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%{transform:translate3d(-200px,0,0)}100%{transform:translate3d(calc(200px + 100vw),0,0)}}@keyframes progress{0%{transform:translate3d(-200px,0,0)}100%{transform:translate3d(calc(200px + 100vw),0,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":10,"character":3}}]}],"loadingText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"appearance":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"animation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"theme":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"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.6.2",
+  "version": "2.7.0",
   "peerDependencies": {
@@ -6,0 +6,0 @@ "@angular/common": ">=8.0.0",

README.md

@@ -117,2 +117,6 @@ # NGX Skeleton loader
 
+## WAI-ARIA values
+
+- loadingText - _default_ `Loading...`: attribute that defines the text value for `aria-valuetext` attribute. Defaults to "Loading..."
+
 ## Animations
@@ -124,3 +128,4 @@
 
-- `false`: it will disable the animation;
+- `"false"` (as string): it will disable the animation;
+- `false` (as boolean): it will disable the animation. Animation will receive `false` as string when attribute field it's not using binding. Component now can receive `false` (boolean), "false" (string), or any other animation type via binding;
 - `progress` - _default_: it will use it `progress` as animation;
@@ -141,2 +146,5 @@ - `progress-dark`: it will use it `progress-dark` as animation. Recommended if your color schema is darken;
   <ngx-skeleton-loader animation="false"></ngx-skeleton-loader>
+  <!-- Disables the animation, but receiving boolean value from binding -->
+  <!-- Via binding it can receive `false` (boolean), "false" (string), or any other animation type -->
+  <ngx-skeleton-loader [animation]="classAttributeWithBooleanFalseValue"></ngx-skeleton-loader>
   <!-- Uses `progress` as animation -->
@@ -143,0 +151,0 @@ <ngx-skeleton-loader animation="progress"></ngx-skeleton-loader>

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

96909

increased by6.7%

Lines of code

687

increased by3.93%

Number of lines in readme file

259

increased by3.19%

No dependency changes