32 lines
723 B
TypeScript
32 lines
723 B
TypeScript
import { Component, Input } from '@angular/core';
|
|
|
|
@Component({
|
|
selector: 'ui-loading-state',
|
|
standalone: true,
|
|
template: `
|
|
<section class="ui-loading-state" [class.inline]="inline" aria-live="polite">
|
|
<span class="ui-spinner" aria-hidden="true"></span>
|
|
<span>{{ label }}</span>
|
|
</section>
|
|
`,
|
|
styles: [
|
|
`
|
|
.ui-loading-state {
|
|
min-height: 8rem;
|
|
display: grid;
|
|
place-items: center;
|
|
gap: var(--space-3);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
.inline {
|
|
min-height: auto;
|
|
display: inline-flex;
|
|
}
|
|
`,
|
|
],
|
|
})
|
|
export class UiLoadingStateComponent {
|
|
@Input() label = 'Wird geladen.';
|
|
@Input() inline = false;
|
|
}
|