ngx-skeleton-loader/fesm2015/ngx-skeleton-loader.js

Make beautiful, animated loading skeletons that automatically adapt to your Angular apps

import { isDevMode, Component, Input, NgModule } from '@angular/core';
import { start, end } from 'perf-marks/marks';
import { CommonModule } from '@angular/common';

/**
 * @fileoverview added by tsickle
 * Generated from: lib/ngx-skeleton-loader.component.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class NgxSkeletonLoaderComponent {
    constructor() {
        this.count = 1;
        this.appearance = '';
        this.animation = 'progress';
        this.theme = {};
        this.items = [];
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        start('NgxSkeletonLoader:Rendered');
        start('NgxSkeletonLoader:Loaded');
        this.items.length = this.count;
        /** @type {?} */
        const allowedAnimations = ['progress', 'progress-dark', 'pulse', 'false'];
        if (allowedAnimations.indexOf(this.animation) === -1) {
            // Shows error message only in Development
            if (isDevMode()) {
                console.error(`\`NgxSkeletonLoaderComponent\` need to receive 'animation' as: ${allowedAnimations.join(', ')}. Forcing default to "progress".`);
            }
            this.animation = 'progress';
        }
    }
    /**
     * @return {?}
     */
    ngAfterViewInit() {
        end('NgxSkeletonLoader:Rendered');
    }
    /**
     * @return {?}
     */
    ngOnDestroy() {
        end('NgxSkeletonLoader:Loaded');
    }
}
NgxSkeletonLoaderComponent.decorators = [
    { type: 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}}"]
            }] }
];
NgxSkeletonLoaderComponent.propDecorators = {
    count: [{ type: Input }],
    appearance: [{ type: Input }],
    animation: [{ type: Input }],
    theme: [{ type: Input }]
};
if (false) {
    /** @type {?} */
    NgxSkeletonLoaderComponent.prototype.count;
    /** @type {?} */
    NgxSkeletonLoaderComponent.prototype.appearance;
    /** @type {?} */
    NgxSkeletonLoaderComponent.prototype.animation;
    /** @type {?} */
    NgxSkeletonLoaderComponent.prototype.theme;
    /** @type {?} */
    NgxSkeletonLoaderComponent.prototype.items;
}

/**
 * @fileoverview added by tsickle
 * Generated from: lib/ngx-skeleton-loader.module.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class NgxSkeletonLoaderModule {
}
NgxSkeletonLoaderModule.decorators = [
    { type: NgModule, args: [{
                declarations: [NgxSkeletonLoaderComponent],
                imports: [CommonModule],
                exports: [NgxSkeletonLoaderComponent],
            },] }
];

/**
 * @fileoverview added by tsickle
 * Generated from: public-api.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */

/**
 * @fileoverview added by tsickle
 * Generated from: ngx-skeleton-loader.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */

export { NgxSkeletonLoaderComponent, NgxSkeletonLoaderModule };
//# sourceMappingURL=ngx-skeleton-loader.js.map