Fixed #9643 - Skeleton Component

src/app/components/skeleton/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "ng-packagr/ng-package.schema.json",
+    "lib": {
+      "entryFile": "public_api.ts"
+    }
+  }

src/app/components/skeleton/public_api.ts

@@ -0,0 +1 @@
+export * from './skeleton';

src/app/components/skeleton/skeleton.css

@@ -0,0 +1,33 @@
+.p-skeleton {
+    position: relative;
+    overflow: hidden;
+}
+
+.p-skeleton::after {
+    content: "";
+    animation: p-skeleton-animation 1.2s infinite;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transform: translateX(-100%);
+    z-index: 1;
+}
+
+.p-skeleton-circle {
+    border-radius: 50%;
+}
+
+.p-skeleton-none::after {
+   animation: none;
+}
+
+@keyframes p-skeleton-animation {
+    from {
+        transform: translateX(-100%);
+    }
+    to {
+        transform: translateX(100%);
+    }
+}

src/app/components/skeleton/skeleton.spec.ts

@@ -0,0 +1,23 @@
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { Skeleton, SkeletonModule } from './skeleton';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('Skeleton', () => {
+
+	let tag: Skeleton;
+	let fixture: ComponentFixture<Skeleton>;
+
+	beforeEach(() => {
+		TestBed.configureTestingModule({
+			imports: [
+				NoopAnimationsModule
+			],
+			declarations: [
+				SkeletonModule
+			]
+		});
+
+		fixture = TestBed.createComponent(Skeleton);
+		tag = fixture.componentInstance;
+	});
+});

src/app/components/skeleton/skeleton.ts

@@ -0,0 +1,53 @@
+import { NgModule, Component, ChangeDetectionStrategy, ViewEncapsulation, Input} from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+    selector: 'p-skeleton',
+    template: `
+        <div [ngClass]="containerClass()" [class]="styleClass" [ngStyle]="containerStyle()">
+        </div>
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    styleUrls: ['./skeleton.css']
+})
+export class Skeleton {
+
+    @Input() styleClass: string;
+
+    @Input() style: any;
+
+    @Input() shape: string = "rectangle";
+
+    @Input() animation: string = "wave";
+
+    @Input() borderRadius: string = null;
+
+    @Input() size: string = null;
+
+    @Input() width: string = "100%";
+
+    @Input() height: string = "1rem";
+
+    containerClass() {
+        return {
+            'p-skeleton p-component': true,
+            'p-skeleton-circle': this.shape === 'circle',
+            'p-skeleton-animation-none': this.animation === 'none'
+        };
+    }
+
+    containerStyle() {
+        if (this.size)
+                return {...this.style, width: this.size, height: this.size, borderRadius: this.borderRadius};
+            else
+                return {...this.style, width: this.width, height: this.height, borderRadius: this.borderRadius};
+    }
+}
+
+@NgModule({
+    imports: [CommonModule],
+    exports: [Skeleton],
+    declarations: [Skeleton]
+})
+export class SkeletonModule { }

src/app/showcase/app-routing.module.ts

@@ -78,6 +78,7 @@ import { HomeComponent } from './components/home/home.component';
             {path: 'scrollpanel', loadChildren: () => import('./components/scrollpanel/scrollpaneldemo.module').then(m => m.ScrollPanelDemoModule) },
             {path: 'selectbutton', loadChildren: () => import('./components/selectbutton/selectbuttondemo.module').then(m => m.SelectButtonDemoModule)},
             {path: 'sidebar', loadChildren: () => import('./components/sidebar/sidebardemo.module').then(m => m.SidebarDemoModule)},
+            {path: 'skeleton', loadChildren: () => import('./components/skeleton/skeletondemo.module').then(m => m.SkeletonDemoModule)},
             {path: 'slidemenu', loadChildren: () => import('./components/slidemenu/slidemenudemo.module').then(m => m.SlideMenuDemoModule)},
             {path: 'slider', loadChildren: () => import('./components/slider/sliderdemo.module').then(m => m.SliderDemoModule)},
             {path: 'splitbutton', loadChildren: () => import('./components/splitbutton/splitbuttondemo.module').then(m => m.SplitButtonDemoModule)},

src/app/showcase/app.menu.component.ts

@@ -273,6 +273,7 @@ declare let gtag: Function;
                     <a [routerLink]=" ['/inplace']" routerLinkActive="router-link-exact-active">Inplace</a>
                     <a [routerLink]=" ['/progressbar']" routerLinkActive="router-link-exact-active">ProgressBar</a>
                     <a [routerLink]=" ['/progressspinner']" routerLinkActive="router-link-exact-active">ProgressSpinner</a>
+                    <a [routerLink]=" ['/skeleton']" routerLinkActive="router-link-exact-active">Skeleton <span class="p-tag">New</span></a>
                     <a [routerLink]=" ['/tag']" routerLinkActive="router-link-exact-active">Tag <span class="p-tag">Tag</span></a>
                     <a [routerLink]=" ['/terminal']" routerLinkActive="router-link-exact-active">Terminal</a>
                 </div>

src/app/showcase/components/skeleton/skeletondemo-routing.module.ts

@@ -0,0 +1,15 @@
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router'
+import {SkeletonDemo} from './skeletondemo';
+
+@NgModule({
+	imports: [
+		RouterModule.forChild([
+			{path:'',component: SkeletonDemo}
+		])
+	],
+	exports: [
+		RouterModule
+	]
+})
+export class SkeletonDemoRoutingModule {}