- Fix full-bleed header/footer (align-items:stretch + block hosts; centered content column via shared --app-content-max). - New templates/page-shell (back-link + heading + intro + content, narrow mode); all pages refactored to compose it. - Async state management with native httpResource + <app-async> wrapper that renders exactly one of loading/empty/error/loaded (impossible states unrepresentable); delayed spinner + skeleton atoms for slow/fast connections. - Scenario interceptor (?scenario=slow|loading|empty|error) to demo every state. - Storybook: spinner/skeleton/page-shell/async-states stories. - README rewritten as a guide (atomic design, reuse benefits, state handling). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
18 lines
724 B
TypeScript
18 lines
724 B
TypeScript
import { Component } from '@angular/core';
|
|
|
|
/** Organism: site footer. */
|
|
@Component({
|
|
selector: 'app-site-footer',
|
|
styles: [':host{display:block}'],
|
|
template: `
|
|
<footer class="utrecht-page-footer" style="background:var(--rhc-color-lintblauw-900,#01689b);color:#fff;margin-top:3rem;width:100%">
|
|
<div style="max-width:var(--app-content-max);margin:0 auto;padding:1.5rem;display:flex;gap:2rem;flex-wrap:wrap;box-sizing:border-box">
|
|
<span>BIG-register</span>
|
|
<span>CIBG — Ministerie van Volksgezondheid, Welzijn en Sport</span>
|
|
<span style="margin-left:auto;opacity:0.85">Demo / POC — geen echte gegevens</span>
|
|
</div>
|
|
</footer>
|
|
`,
|
|
})
|
|
export class SiteFooterComponent {}
|