skeleton-elements
Version:
Skeleton elements (aka UI Skeletons, Skeleton Screens, Ghost Elements) - UI for improved perceived performance
285 lines (275 loc) • 15.6 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, Input, Directive, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
class SkeletonBlockComponent {
}
SkeletonBlockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.1", ngImport: i0, type: SkeletonBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
SkeletonBlockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.1", type: SkeletonBlockComponent, selector: "skeleton-block", inputs: { width: "width", height: "height", effect: "effect", borderRadius: "borderRadius" }, host: { properties: { "class.skeleton-effect-fade": "effect === \"fade\"", "class.skeleton-effect-pulse": "effect === \"pulse\"", "class.skeleton-effect-wave": "effect === \"blink\" || effect === \"wave\"", "style.width": "width", "style.height": "height", "style.border-radius": "borderRadius" }, classAttribute: "skeleton-block" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.1", ngImport: i0, type: SkeletonBlockComponent, decorators: [{
type: Component,
args: [{
selector: 'skeleton-block',
template: `<ng-content></ng-content>`,
host: {
class: 'skeleton-block',
'[class.skeleton-effect-fade]': 'effect === "fade"',
'[class.skeleton-effect-pulse]': 'effect === "pulse"',
'[class.skeleton-effect-wave]': 'effect === "blink" || effect === "wave"',
'[style.width]': 'width',
'[style.height]': 'height',
'[style.border-radius]': 'borderRadius',
},
}]
}], propDecorators: { width: [{
type: Input
}], height: [{
type: Input
}], effect: [{
type: Input
}], borderRadius: [{
type: Input
}] } });
function multiplySvgPointsService(points, iconSize, width, height) {
const iconMaxSize = Math.min(width, height) * 0.5;
const scale = iconMaxSize / iconSize;
return points.replace(/([0-9,\.]{1,})/g, (coords) => {
const [_x, _y] = coords.split(',').map((p) => parseFloat(p));
const x = _x * scale + width / 2 - (iconSize * scale) / 2;
const y = _y * scale + height / 2 - (iconSize * scale) / 2;
if (iconMaxSize >= 100) {
return `${Math.round(x)},${Math.round(y)}`;
}
return `${x},${y}`;
});
}
class SkeletonAvatarComponent {
constructor() {
this.size = 48;
this.showIcon = true;
this.borderRadius = '50%';
}
multiplyPoints(pointsString) {
return multiplySvgPointsService(pointsString, 56, this.size, this.size);
}
}
SkeletonAvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.1", ngImport: i0, type: SkeletonAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
SkeletonAvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.1", type: SkeletonAvatarComponent, selector: "skeleton-avatar", inputs: { size: "size", color: "color", showIcon: "showIcon", iconColor: "iconColor", borderRadius: "borderRadius", effect: "effect" }, host: { properties: { "class.skeleton-effect-fade": "effect === \"fade\"", "class.skeleton-effect-pulse": "effect === \"pulse\"", "class.skeleton-effect-wave": "effect === \"blink\" || effect === \"wave\"" }, classAttribute: "skeleton-avatar" }, ngImport: i0, template: `<svg
xmlns="http://www.w3.org/2000/svg"
[attr.width]="size"
[attr.height]="size"
[attr.viewBox]="'0 0 ' + size + ' ' + size"
preserveAspectRatio="none"
>
<rect
[attr.width]="size"
[attr.height]="size"
fillRule="evenodd"
[style.fill]="color"
[attr.rx]="borderRadius"
/>
<path
*ngIf="showIcon"
[style.fill]="iconColor"
[attr.d]="
multiplyPoints(
'M28.22461,27.1590817 C34.9209931,27.1590817 40.6829044,21.1791004 40.6829044,13.3926332 C40.6829044,5.69958662 34.8898972,0 28.22461,0 C21.5594557,0 15.7663156,5.82423601 15.7663156,13.4549579 C15.7663156,21.1791004 21.5594557,27.1590817 28.22461,27.1590817 Z M8.66515427,56 L47.7841986,56 C52.6739629,56 54.4181241,54.5984253 54.4181241,51.8576005 C54.4181241,43.8219674 44.358068,32.7341519 28.22461,32.7341519 C12.0600561,32.7341519 2,43.8219674 2,51.8576005 C2,54.5984253 3.74402832,56 8.66515427,56 Z'
)
"
/>
</svg>
<ng-content></ng-content>`, isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.1", ngImport: i0, type: SkeletonAvatarComponent, decorators: [{
type: Component,
args: [{
selector: 'skeleton-avatar',
host: {
class: 'skeleton-avatar',
'[class.skeleton-effect-fade]': 'effect === "fade"',
'[class.skeleton-effect-pulse]': 'effect === "pulse"',
'[class.skeleton-effect-wave]': 'effect === "blink" || effect === "wave"',
},
template: `<svg
xmlns="http://www.w3.org/2000/svg"
[attr.width]="size"
[attr.height]="size"
[attr.viewBox]="'0 0 ' + size + ' ' + size"
preserveAspectRatio="none"
>
<rect
[attr.width]="size"
[attr.height]="size"
fillRule="evenodd"
[style.fill]="color"
[attr.rx]="borderRadius"
/>
<path
*ngIf="showIcon"
[style.fill]="iconColor"
[attr.d]="
multiplyPoints(
'M28.22461,27.1590817 C34.9209931,27.1590817 40.6829044,21.1791004 40.6829044,13.3926332 C40.6829044,5.69958662 34.8898972,0 28.22461,0 C21.5594557,0 15.7663156,5.82423601 15.7663156,13.4549579 C15.7663156,21.1791004 21.5594557,27.1590817 28.22461,27.1590817 Z M8.66515427,56 L47.7841986,56 C52.6739629,56 54.4181241,54.5984253 54.4181241,51.8576005 C54.4181241,43.8219674 44.358068,32.7341519 28.22461,32.7341519 C12.0600561,32.7341519 2,43.8219674 2,51.8576005 C2,54.5984253 3.74402832,56 8.66515427,56 Z'
)
"
/>
</svg>
<ng-content></ng-content>`,
}]
}], propDecorators: { size: [{
type: Input
}], color: [{
type: Input
}], showIcon: [{
type: Input
}], iconColor: [{
type: Input
}], borderRadius: [{
type: Input
}], effect: [{
type: Input
}] } });
class SkeletonTextDirective {
constructor() { }
}
SkeletonTextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.1", ngImport: i0, type: SkeletonTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
SkeletonTextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.1", type: SkeletonTextDirective, selector: "[skeleton-text]", inputs: { effect: "effect" }, host: { properties: { "class.skeleton-effect-fade": "effect === \"fade\"", "class.skeleton-effect-pulse": "effect === \"pulse\"", "class.skeleton-effect-wave": "effect === \"blink\" || effect === \"wave\"" }, classAttribute: "skeleton-text" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.1", ngImport: i0, type: SkeletonTextDirective, decorators: [{
type: Directive,
args: [{
selector: '[skeleton-text]',
host: {
class: 'skeleton-text',
'[class.skeleton-effect-fade]': 'effect === "fade"',
'[class.skeleton-effect-pulse]': 'effect === "pulse"',
'[class.skeleton-effect-wave]': 'effect === "blink" || effect === "wave"',
},
}]
}], ctorParameters: function () { return []; }, propDecorators: { effect: [{
type: Input
}] } });
class SkeletonImageComponent {
constructor() {
this.width = 1200;
this.height = 600;
this.showIcon = true;
}
multiplyPoints(pointsString) {
return multiplySvgPointsService(pointsString, 56, this.width, this.height);
}
}
SkeletonImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.1", ngImport: i0, type: SkeletonImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
SkeletonImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.1", type: SkeletonImageComponent, selector: "skeleton-image", inputs: { width: "width", height: "height", color: "color", showIcon: "showIcon", iconColor: "iconColor", effect: "effect", borderRadius: "borderRadius" }, host: { properties: { "class.skeleton-effect-fade": "effect === \"fade\"", "class.skeleton-effect-pulse": "effect === \"pulse\"", "class.skeleton-effect-wave": "effect === \"blink\" || effect === \"wave\"" }, classAttribute: "skeleton-image" }, ngImport: i0, template: `<svg
xmlns="http://www.w3.org/2000/svg"
[attr.width]="width"
[attr.height]="height"
[attr.viewBox]="'0 0 ' + width + ' ' + height"
[style.border-radius]="borderRadius"
preserveAspectRatio="none"
>
<polygon
[style.fill]="color"
fillRule="evenodd"
[attr.points]="
'0 0 ' + width + ' 0 ' + width + ' ' + height + ' 0 ' + height
"
/>
<path
*ngIf="showIcon"
[style.fill]="iconColor"
[attr.d]="
multiplyPoints(
'M7.7148,49.5742 L48.2852,49.5742 C53.1836,49.5742 55.6446,47.1367 55.6446,42.3086 L55.6446,13.6914 C55.6446,8.8633 53.1836,6.4258 48.2852,6.4258 L7.7148,6.4258 C2.8398,6.4258 0.3554,8.8398 0.3554,13.6914 L0.3554,42.3086 C0.3554,47.1602 2.8398,49.5742 7.7148,49.5742 Z M39.2851,27.9414 C38.2304,27.0039 37.0351,26.5118 35.7695,26.5118 C34.457,26.5118 33.3085,26.9571 32.2304,27.918 L21.6366,37.3867 L17.3007,33.4492 C16.3163,32.582 15.2617,32.1133 14.1366,32.1133 C13.1054,32.1133 12.0976,32.5586 11.1366,33.4258 L4.1288,39.7305 L4.1288,13.8789 C4.1288,11.4414 5.4413,10.1992 7.7851,10.1992 L48.2147,10.1992 C50.535,10.1992 51.8708,11.4414 51.8708,13.8789 L51.8708,39.7539 L39.2851,27.9414 Z M17.8163,28.1992 C20.8398,28.1992 23.3241,25.7149 23.3241,22.668 C23.3241,19.6445 20.8398,17.1367 17.8163,17.1367 C14.7695,17.1367 12.2851,19.6445 12.2851,22.668 C12.2851,25.7149 14.7695,28.1992 17.8163,28.1992 Z'
)
"
/>
</svg>
<ng-content></ng-content>`, isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.1", ngImport: i0, type: SkeletonImageComponent, decorators: [{
type: Component,
args: [{
selector: 'skeleton-image',
host: {
class: 'skeleton-image',
'[class.skeleton-effect-fade]': 'effect === "fade"',
'[class.skeleton-effect-pulse]': 'effect === "pulse"',
'[class.skeleton-effect-wave]': 'effect === "blink" || effect === "wave"',
},
template: `<svg
xmlns="http://www.w3.org/2000/svg"
[attr.width]="width"
[attr.height]="height"
[attr.viewBox]="'0 0 ' + width + ' ' + height"
[style.border-radius]="borderRadius"
preserveAspectRatio="none"
>
<polygon
[style.fill]="color"
fillRule="evenodd"
[attr.points]="
'0 0 ' + width + ' 0 ' + width + ' ' + height + ' 0 ' + height
"
/>
<path
*ngIf="showIcon"
[style.fill]="iconColor"
[attr.d]="
multiplyPoints(
'M7.7148,49.5742 L48.2852,49.5742 C53.1836,49.5742 55.6446,47.1367 55.6446,42.3086 L55.6446,13.6914 C55.6446,8.8633 53.1836,6.4258 48.2852,6.4258 L7.7148,6.4258 C2.8398,6.4258 0.3554,8.8398 0.3554,13.6914 L0.3554,42.3086 C0.3554,47.1602 2.8398,49.5742 7.7148,49.5742 Z M39.2851,27.9414 C38.2304,27.0039 37.0351,26.5118 35.7695,26.5118 C34.457,26.5118 33.3085,26.9571 32.2304,27.918 L21.6366,37.3867 L17.3007,33.4492 C16.3163,32.582 15.2617,32.1133 14.1366,32.1133 C13.1054,32.1133 12.0976,32.5586 11.1366,33.4258 L4.1288,39.7305 L4.1288,13.8789 C4.1288,11.4414 5.4413,10.1992 7.7851,10.1992 L48.2147,10.1992 C50.535,10.1992 51.8708,11.4414 51.8708,13.8789 L51.8708,39.7539 L39.2851,27.9414 Z M17.8163,28.1992 C20.8398,28.1992 23.3241,25.7149 23.3241,22.668 C23.3241,19.6445 20.8398,17.1367 17.8163,17.1367 C14.7695,17.1367 12.2851,19.6445 12.2851,22.668 C12.2851,25.7149 14.7695,28.1992 17.8163,28.1992 Z'
)
"
/>
</svg>
<ng-content></ng-content>`,
}]
}], propDecorators: { width: [{
type: Input
}], height: [{
type: Input
}], color: [{
type: Input
}], showIcon: [{
type: Input
}], iconColor: [{
type: Input
}], effect: [{
type: Input
}], borderRadius: [{
type: Input
}] } });
class SkeletonElementsModule {
}
SkeletonElementsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.1", ngImport: i0, type: SkeletonElementsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
SkeletonElementsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.1", ngImport: i0, type: SkeletonElementsModule, declarations: [SkeletonBlockComponent,
SkeletonAvatarComponent,
SkeletonTextDirective,
SkeletonImageComponent], imports: [CommonModule], exports: [SkeletonBlockComponent,
SkeletonAvatarComponent,
SkeletonTextDirective,
SkeletonImageComponent] });
SkeletonElementsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.1", ngImport: i0, type: SkeletonElementsModule, imports: [[CommonModule]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.1", ngImport: i0, type: SkeletonElementsModule, decorators: [{
type: NgModule,
args: [{
declarations: [
SkeletonBlockComponent,
SkeletonAvatarComponent,
SkeletonTextDirective,
SkeletonImageComponent,
],
exports: [
SkeletonBlockComponent,
SkeletonAvatarComponent,
SkeletonTextDirective,
SkeletonImageComponent,
],
imports: [CommonModule],
}]
}] });
/*
* Public API Surface of angular
*/
/**
* Generated bundle index. Do not edit.
*/
export { SkeletonAvatarComponent, SkeletonBlockComponent, SkeletonElementsModule, SkeletonImageComponent, SkeletonTextDirective };
//# sourceMappingURL=skeleton-elements-angular.js.map