diff --git a/src/app/animations.helper.ts b/src/app/animations.helper.ts new file mode 100644 index 0000000..d4eab29 --- /dev/null +++ b/src/app/animations.helper.ts @@ -0,0 +1,16 @@ +import { trigger, state, style, transition, animate } from '@angular/animations'; + +export const expandTrigger = (name: string) => { + return trigger(name, [ + state('collapsed', style({ + height: '0', + overflow: 'hidden', + visibility: 'hidden' + })), + state('expanded', style({ + height: '*', + visibility: 'visible' + })), + transition('collapsed <=> expanded', animate('225ms ease-in-out')), + ]); +}; \ No newline at end of file diff --git a/src/app/components/loading/loading.component.html b/src/app/components/loading/loading.component.html new file mode 100644 index 0000000..3b1b697 --- /dev/null +++ b/src/app/components/loading/loading.component.html @@ -0,0 +1,3 @@ +
+ Lade Inhalt... +
\ No newline at end of file diff --git a/src/app/components/loading/loading.component.spec.ts b/src/app/components/loading/loading.component.spec.ts new file mode 100644 index 0000000..550e702 --- /dev/null +++ b/src/app/components/loading/loading.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LoadingComponent } from './loading.component'; + +describe('LoadingComponent', () => { + let component: LoadingComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [LoadingComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(LoadingComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/loading/loading.component.ts b/src/app/components/loading/loading.component.ts new file mode 100644 index 0000000..052f229 --- /dev/null +++ b/src/app/components/loading/loading.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; +import { MatProgressBarModule } from '@angular/material/progress-bar'; + +@Component({ + selector: 'app-loading', + standalone: true, + imports: [MatProgressBarModule], + templateUrl: './loading.component.html' +}) +export class LoadingComponent { + +} diff --git a/src/app/components/stepper/stepper.component.ts b/src/app/components/stepper/stepper.component.ts index 9e1ab1c..e7e6442 100644 --- a/src/app/components/stepper/stepper.component.ts +++ b/src/app/components/stepper/stepper.component.ts @@ -1,9 +1,9 @@ import { Component, EventEmitter, Input, Output, TemplateRef } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { trigger, state, style, transition, animate } from '@angular/animations'; import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; +import { expandTrigger } from '../../animations.helper'; @Component({ selector: 'app-stepper', @@ -16,20 +16,7 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; ], templateUrl: './stepper.component.html', styleUrl: './stepper.component.scss', - animations: [ - trigger('next', [ - state('collapsed', style({ - height: '0', - overflow: 'hidden', - visibility: 'hidden' - })), - state('expanded', style({ - height: '*', - visibility: 'visible' - })), - transition('collapsed <=> expanded', animate('225ms ease-in-out')), - ]) - ] + animations: [ expandTrigger('next') ] }) export class StepperComponent { @Input({ alias: 'controls', required: true }) diff --git a/src/app/pages/page/page.component.html b/src/app/pages/page/page.component.html index 50f6916..7a9290e 100644 --- a/src/app/pages/page/page.component.html +++ b/src/app/pages/page/page.component.html @@ -1,6 +1,4 @@ - - Lade Inhalt... - + @@ -29,7 +27,7 @@ } } -