ngx-skeleton
Version:
Angular placeholder preview component before the content is loaded
53 lines • 7.63 kB
JavaScript
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { ngxSkeletonDefaults } from './ngx-skeleton-defaults';
import * as i0 from "@angular/core";
export 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
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXNrZWxldG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL25neC1za2VsZXRvbi9zcmMvbGliL25neC1za2VsZXRvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9uZ3gtc2tlbGV0b24vc3JjL2xpYi9uZ3gtc2tlbGV0b24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFMUUsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0seUJBQXlCLENBQUM7O0FBVTlELE1BQU0sT0FBTyxvQkFBb0I7SUFQakM7UUFRVyxZQUFPLEdBQUcsbUJBQW1CLENBQUMsT0FBTyxDQUFDO1FBQ3RDLG9CQUFlLEdBQUcsbUJBQW1CLENBQUMsZUFBZSxDQUFDO1FBQ3RELGlCQUFZLEdBQW9CLG1CQUFtQixDQUFDLFlBQVksQ0FBQztRQVFqRSxXQUFNLEdBQW9CLG1CQUFtQixDQUFDLE1BQU0sQ0FBQztRQUNyRCxZQUFPLEdBQXVCLG1CQUFtQixDQUFDLE9BQU8sQ0FBQztRQVMzRCxZQUFPLEdBQW9CLG1CQUFtQixDQUFDLE1BQU0sQ0FBQztRQUN0RCxXQUFNLEdBQW9CLG1CQUFtQixDQUFDLEtBQUssQ0FBQztLQVE3RDtJQTFCQyxJQUNJLE1BQU07UUFDUixPQUFPLElBQUksQ0FBQyxPQUFPLENBQUM7SUFDdEIsQ0FBQztJQUNELElBQUksTUFBTSxDQUFDLE1BQXVCO1FBQ2hDLElBQUksQ0FBQyxPQUFPLEdBQUcsS0FBSyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsR0FBRyxNQUFNLElBQUksQ0FBQztJQUN6RCxDQUFDO0lBR0QsSUFDSSxLQUFLO1FBQ1AsT0FBTyxJQUFJLENBQUMsTUFBTSxDQUFDO0lBQ3JCLENBQUM7SUFDRCxJQUFJLEtBQUssQ0FBQyxLQUFzQjtRQUM5QixJQUFJLENBQUMsTUFBTSxHQUFHLEtBQUssQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLEdBQUcsS0FBSyxJQUFJLENBQUM7SUFDckQsQ0FBQztJQUtELGVBQWU7UUFDYixPQUFPLElBQUksQ0FBQyxPQUFPLEtBQUssUUFBUTtZQUM5QixJQUFJLENBQUMsWUFBWSxLQUFLLG1CQUFtQixDQUFDLFlBQVk7WUFDdEQsQ0FBQyxDQUFDLEtBQUs7WUFDUCxDQUFDLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQztJQUN4QixDQUFDOzhHQTdCVSxvQkFBb0I7a0dBQXBCLG9CQUFvQixrUENaakMsaVBBUUE7OzJGRElhLG9CQUFvQjtrQkFQaEMsU0FBUztpQ0FDSSxJQUFJLFlBQ04sY0FBYyxtQkFHUCx1QkFBdUIsQ0FBQyxNQUFNOzhCQUd0QyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csZUFBZTtzQkFBdkIsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUVGLE1BQU07c0JBRFQsS0FBSztnQkFPRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUVGLEtBQUs7c0JBRFIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IG5neFNrZWxldG9uRGVmYXVsdHMgfSBmcm9tICcuL25neC1za2VsZXRvbi1kZWZhdWx0cyc7XG5pbXBvcnQgeyBOZ3hTa2VsZXRvblZhcmlhbnQgfSBmcm9tICcuL25neC1za2VsZXRvbi12YXJpYW50JztcblxuQENvbXBvbmVudCh7XG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIHNlbGVjdG9yOiAnbmd4LXNrZWxldG9uJyxcbiAgdGVtcGxhdGVVcmw6ICcuL25neC1za2VsZXRvbi5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL25neC1za2VsZXRvbi5jb21wb25lbnQuc2NzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgTmd4U2tlbGV0b25Db21wb25lbnQge1xuICBASW5wdXQoKSBhbmltYXRlID0gbmd4U2tlbGV0b25EZWZhdWx0cy5hbmltYXRlO1xuICBASW5wdXQoKSBiYWNrZ3JvdW5kQ29sb3IgPSBuZ3hTa2VsZXRvbkRlZmF1bHRzLmJhY2tncm91bmRDb2xvcjtcbiAgQElucHV0KCkgYm9yZGVyUmFkaXVzOiBudW1iZXIgfCBzdHJpbmcgPSBuZ3hTa2VsZXRvbkRlZmF1bHRzLmJvcmRlclJhZGl1cztcbiAgQElucHV0KClcbiAgZ2V0IGhlaWdodCgpOiBudW1iZXIgfCBzdHJpbmcge1xuICAgIHJldHVybiB0aGlzLl9oZWlnaHQ7XG4gIH1cbiAgc2V0IGhlaWdodChoZWlnaHQ6IG51bWJlciB8IHN0cmluZykge1xuICAgIHRoaXMuX2hlaWdodCA9IGlzTmFOKCtoZWlnaHQpID8gaGVpZ2h0IDogYCR7aGVpZ2h0fXB4YDtcbiAgfVxuICBASW5wdXQoKSBtYXJnaW46IG51bWJlciB8IHN0cmluZyA9IG5neFNrZWxldG9uRGVmYXVsdHMubWFyZ2luO1xuICBASW5wdXQoKSB2YXJpYW50OiBOZ3hTa2VsZXRvblZhcmlhbnQgPSBuZ3hTa2VsZXRvbkRlZmF1bHRzLnZhcmlhbnQ7XG4gIEBJbnB1dCgpXG4gIGdldCB3aWR0aCgpOiBudW1iZXIgfCBzdHJpbmcge1xuICAgIHJldHVybiB0aGlzLl93aWR0aDtcbiAgfVxuICBzZXQgd2lkdGgod2lkdGg6IG51bWJlciB8IHN0cmluZykge1xuICAgIHRoaXMuX3dpZHRoID0gaXNOYU4oK3dpZHRoKSA/IHdpZHRoIDogYCR7d2lkdGh9cHhgO1xuICB9XG5cbiAgcHJpdmF0ZSBfaGVpZ2h0OiBudW1iZXIgfCBzdHJpbmcgPSBuZ3hTa2VsZXRvbkRlZmF1bHRzLmhlaWdodDtcbiAgcHJpdmF0ZSBfd2lkdGg6IG51bWJlciB8IHN0cmluZyA9IG5neFNrZWxldG9uRGVmYXVsdHMud2lkdGg7XG5cbiAgZ2V0Qm9yZGVyUmFkaXVzKCk6IG51bWJlciB8IHN0cmluZyB7XG4gICAgcmV0dXJuIHRoaXMudmFyaWFudCA9PT0gJ2NpcmNsZScgJiZcbiAgICAgIHRoaXMuYm9yZGVyUmFkaXVzID09PSBuZ3hTa2VsZXRvbkRlZmF1bHRzLmJvcmRlclJhZGl1c1xuICAgICAgPyAnNTAlJ1xuICAgICAgOiB0aGlzLmJvcmRlclJhZGl1cztcbiAgfVxufVxuIiwiPGRpdlxuICBbY2xhc3Mubmd4LXNrZWxldG9uLWFuaW1hdGVdPVwiYW5pbWF0ZVwiXG4gIFtzdHlsZS5iYWNrZ3JvdW5kLWNvbG9yXT1cImJhY2tncm91bmRDb2xvclwiXG4gIFtzdHlsZS5ib3JkZXItcmFkaXVzXT1cImdldEJvcmRlclJhZGl1cygpXCJcbiAgW3N0eWxlLmhlaWdodF09XCJoZWlnaHRcIlxuICBbc3R5bGUubWFyZ2luXT1cIm1hcmdpblwiXG4gIFtzdHlsZS53aWR0aF09XCJ3aWR0aFwiXG4+PC9kaXY+XG4iXX0=