ngx-skeleton
Version:
Angular placeholder preview component before the content is loaded
83 lines (77 loc) • 4.42 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, ChangeDetectionStrategy, Input, NgModule } from '@angular/core';
const ngxSkeletonDefaults = {
animate: true,
backgroundColor: 'rgba(0, 0, 0, 0.08)',
borderRadius: 0,
height: '100%',
margin: 0,
variant: 'rect',
width: '100%',
};
class NgxSkeletonComponent {
constructor() {
this.animate = ngxSkeletonDefaults.animate;
this.backgroundColor = ngxSkeletonDefaults.backgroundColor;
this.borderRadius = ngxSkeletonDefaults.borderRadius;
this.margin = ngxSkeletonDefaults.margin;
this.variant = ngxSkeletonDefaults.variant;
this._height = ngxSkeletonDefaults.height;
this._width = ngxSkeletonDefaults.width;
}
get height() {
return this._height;
}
set height(height) {
this._height = isNaN(+height) ? height : `${height}px`;
}
get width() {
return this._width;
}
set width(width) {
this._width = isNaN(+width) ? width : `${width}px`;
}
getBorderRadius() {
return this.variant === 'circle' &&
this.borderRadius === ngxSkeletonDefaults.borderRadius
? '50%'
: this.borderRadius;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: NgxSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.6", type: NgxSkeletonComponent, isStandalone: true, selector: "ngx-skeleton", inputs: { animate: "animate", backgroundColor: "backgroundColor", borderRadius: "borderRadius", height: "height", margin: "margin", variant: "variant", width: "width" }, ngImport: i0, template: "<div\n [class.ngx-skeleton-animate]=\"animate\"\n [style.background-color]=\"backgroundColor\"\n [style.border-radius]=\"getBorderRadius()\"\n [style.height]=\"height\"\n [style.margin]=\"margin\"\n [style.width]=\"width\"\n></div>\n", styles: ["@keyframes ngx-skeleton-animation{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.ngx-skeleton-animate{animation:ngx-skeleton-animation 1.5s ease-in-out infinite}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: NgxSkeletonComponent, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'ngx-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [class.ngx-skeleton-animate]=\"animate\"\n [style.background-color]=\"backgroundColor\"\n [style.border-radius]=\"getBorderRadius()\"\n [style.height]=\"height\"\n [style.margin]=\"margin\"\n [style.width]=\"width\"\n></div>\n", styles: ["@keyframes ngx-skeleton-animation{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.ngx-skeleton-animate{animation:ngx-skeleton-animation 1.5s ease-in-out infinite}\n"] }]
}], propDecorators: { animate: [{
type: Input
}], backgroundColor: [{
type: Input
}], borderRadius: [{
type: Input
}], height: [{
type: Input
}], margin: [{
type: Input
}], variant: [{
type: Input
}], width: [{
type: Input
}] } });
class NgxSkeletonModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: NgxSkeletonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.6", ngImport: i0, type: NgxSkeletonModule, imports: [NgxSkeletonComponent], exports: [NgxSkeletonComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: NgxSkeletonModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.6", ngImport: i0, type: NgxSkeletonModule, decorators: [{
type: NgModule,
args: [{
imports: [NgxSkeletonComponent],
exports: [NgxSkeletonComponent],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { NgxSkeletonComponent, NgxSkeletonModule };
//# sourceMappingURL=ngx-skeleton.mjs.map