feat(design): adopt CIBG component patterns (header, forms, wizards, dashboard)
Re-skins the app's layout on top of the CIBG Huisstijl theme (previous commit) so it
matches designsystem.cibg.nl, not just its colour tokens — magenta ("robijn") header,
horizontal nav, and the CIBG component markup for forms/wizards/dashboard.
- Header: logo block + robijn titlebar (breadcrumb + user menu) + grey horizontal nav
(4 links) replacing the dashboard side-nav; breadcrumb restyled for the titlebar
(no background of its own — CIBG's global `header nav` rule otherwise bleeds a grey
fill into it, fixed by scoping an override inside BreadcrumbComponent).
- Forms: form-field/radio-group/checkbox rebuilt on CIBG's horizontal `form-group row`
/ `form-check.styled` markup (label col-md-4, control col-md-8); same input() APIs.
- Wizards: stepper rebuilt as the CIBG "stappenindicator" (numbered circles, visited
steps clickable for back-nav, title merged in); wizard-shell adopts the CIBG
procesnavigatie button row. Back-navigation wired into all three wizard machines
(registratie-wizard already had it; added `GaNaarStap` to intake/herregistratie
machines, pure + spec'd).
- New shared/ui molecules: confirmation (animated bevestiging checkmark, replaces
plain alerts on submit), review-section (controlestap sections with "Wijzigen"),
application-list/application-link (CIBG "aanvragen" rows, replace the dashboard's
card grid and aanvraag-block).
- Cleanup: delete side-nav and now-unused styles.scss utilities (.app-overview,
.app-form-panel, .app-card-grid); correct design-tokens.mdx (it referenced tokens
that no longer exist) and document the CIBG-value token bridge.
Verified: build/lint/check:tokens green, 178 tests pass (4 new GaNaarStap cases), and
manually driven end-to-end (dashboard, a full herregistratie submission through to the
confirmation screen, mobile width, keyboard focus).
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -19135,7 +19135,7 @@
|
||||
},
|
||||
{
|
||||
"name": "SiteFooterComponent",
|
||||
"id": "component-SiteFooterComponent-f2ac4822d1c0c5075e0552c4aad07325fc213f385c9022177b0d98f69d53ccee5c3d3047ecc3310cee0fc731007c614de1bdc4e995df993bc15ebecb86653323",
|
||||
"id": "component-SiteFooterComponent-b55e94270c51daed95df229eeda44deeb81363b642b02f091f839880142571cee393d522730381bfc3fee17187c7283c8c85a22fd3a8af42c8dffc1ff32904a7",
|
||||
"file": "src/app/shared/layout/site-footer/site-footer.component.ts",
|
||||
"encapsulation": [],
|
||||
"entryComponents": [],
|
||||
@@ -19145,7 +19145,7 @@
|
||||
"selector": "app-site-footer",
|
||||
"styleUrls": [],
|
||||
"styles": [
|
||||
"\n :host{display:block}\n .bar{background:var(--rhc-color-donkerblauw-700);color:var(--rhc-color-foreground-on-primary);margin-block-start:var(--rhc-space-max-5xl);inline-size:100%}\n .inner{max-inline-size:var(--app-content-max);margin-inline:auto;padding:var(--rhc-space-max-3xl) var(--rhc-space-max-2xl);box-sizing:border-box;display:flex;gap:var(--rhc-space-max-3xl);flex-wrap:wrap;justify-content:space-between}\n .tagline{font-style:italic;font-weight:var(--rhc-text-font-weight-semi-bold);font-size:var(--rhc-text-font-size-lg);max-inline-size:18rem}\n .ministry{margin-block-start:var(--rhc-space-max-md);font-size:var(--rhc-text-font-size-sm);color:var(--rhc-color-foreground-on-primary)}\n .col h2{margin:0 0 var(--rhc-space-max-md);font-size:var(--rhc-text-font-size-sm);font-weight:var(--rhc-text-font-weight-bold);text-transform:uppercase;letter-spacing:.04em}\n .links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--rhc-space-max-sm);font-size:var(--rhc-text-font-size-sm)}\n .links a{color:var(--rhc-color-foreground-on-primary);text-decoration:none}\n .links a:hover{text-decoration:underline}\n .meta{inline-size:100%;border-block-start:var(--rhc-border-width-sm) solid var(--rhc-color-lintblauw-600);margin-block-start:var(--rhc-space-max-xl);padding-block-start:var(--rhc-space-max-lg);font-size:var(--rhc-text-font-size-sm);opacity:.85}\n "
|
||||
"\n :host{display:block}\n .bar{background:var(--rhc-color-layout);color:var(--rhc-color-foreground-on-primary);margin-block-start:var(--rhc-space-max-5xl);inline-size:100%}\n .inner{max-inline-size:var(--app-content-max);margin-inline:auto;padding:var(--rhc-space-max-3xl) var(--rhc-space-max-2xl);box-sizing:border-box;display:flex;gap:var(--rhc-space-max-3xl);flex-wrap:wrap;justify-content:space-between}\n .tagline{font-style:italic;font-weight:var(--rhc-text-font-weight-semi-bold);font-size:var(--rhc-text-font-size-lg);max-inline-size:18rem}\n .ministry{margin-block-start:var(--rhc-space-max-md);font-size:var(--rhc-text-font-size-sm);color:var(--rhc-color-foreground-on-primary)}\n .col h2{margin:0 0 var(--rhc-space-max-md);font-size:var(--rhc-text-font-size-sm);font-weight:var(--rhc-text-font-weight-bold);text-transform:uppercase;letter-spacing:.04em}\n .links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--rhc-space-max-sm);font-size:var(--rhc-text-font-size-sm)}\n .links a{color:var(--rhc-color-foreground-on-primary);text-decoration:none}\n .links a:hover{text-decoration:underline}\n .meta{inline-size:100%;border-block-start:var(--rhc-border-width-sm) solid rgb(255 255 255 / 0.25);margin-block-start:var(--rhc-space-max-xl);padding-block-start:var(--rhc-space-max-lg);font-size:var(--rhc-text-font-size-sm);opacity:.85}\n "
|
||||
],
|
||||
"template": "<footer class=\"bar\">\n <div class=\"inner\">\n <div>\n <div class=\"tagline\" i18n=\"@@footer.tagline\">De Rijksoverheid. Voor Nederland.</div>\n <div class=\"ministry\" i18n=\"@@footer.ministry\">CIBG — Ministerie van Volksgezondheid, Welzijn en Sport</div>\n </div>\n <nav class=\"col\" i18n-aria-label=\"@@footer.overSiteAria\" aria-label=\"Over deze site\">\n <h2 i18n=\"@@footer.overSite\">Over deze site</h2>\n <ul class=\"links\">\n <li><a href=\"https://www.rijksoverheid.nl/privacy\" rel=\"noopener\" target=\"_blank\" i18n=\"@@footer.privacy\">Privacy</a></li>\n <li><a href=\"https://www.rijksoverheid.nl/cookies\" rel=\"noopener\" target=\"_blank\" i18n=\"@@footer.cookies\">Cookies</a></li>\n <li><a href=\"https://www.rijksoverheid.nl/toegankelijkheid\" rel=\"noopener\" target=\"_blank\" i18n=\"@@footer.toegankelijkheid\">Toegankelijkheid</a></li>\n </ul>\n </nav>\n <div class=\"meta\" i18n=\"@@footer.demo\">Demo / POC — geen echte gegevens.</div>\n </div>\n</footer>\n",
|
||||
"templateUrl": [],
|
||||
@@ -19164,15 +19164,15 @@
|
||||
"description": "<p>Organism: Rijksoverheid-style site footer — dark-blue, with the\n"De Rijksoverheid. Voor Nederland." tagline, responsible-ministry attribution,\nand a small "Over deze site" link column. ponytail: links point at the real\nrijksoverheid.nl pages, not a fabricated dead-link forest.</p>\n",
|
||||
"rawdescription": "\nOrganism: Rijksoverheid-style site footer — dark-blue, with the\n\"De Rijksoverheid. Voor Nederland.\" tagline, responsible-ministry attribution,\nand a small \"Over deze site\" link column. ponytail: links point at the real\nrijksoverheid.nl pages, not a fabricated dead-link forest.",
|
||||
"type": "component",
|
||||
"sourceCode": "import { Component } from '@angular/core';\n\n/** Organism: Rijksoverheid-style site footer — dark-blue, with the\n \"De Rijksoverheid. Voor Nederland.\" tagline, responsible-ministry attribution,\n and a small \"Over deze site\" link column. ponytail: links point at the real\n rijksoverheid.nl pages, not a fabricated dead-link forest. */\n@Component({\n selector: 'app-site-footer',\n styles: [`\n :host{display:block}\n .bar{background:var(--rhc-color-donkerblauw-700);color:var(--rhc-color-foreground-on-primary);margin-block-start:var(--rhc-space-max-5xl);inline-size:100%}\n .inner{max-inline-size:var(--app-content-max);margin-inline:auto;padding:var(--rhc-space-max-3xl) var(--rhc-space-max-2xl);box-sizing:border-box;display:flex;gap:var(--rhc-space-max-3xl);flex-wrap:wrap;justify-content:space-between}\n .tagline{font-style:italic;font-weight:var(--rhc-text-font-weight-semi-bold);font-size:var(--rhc-text-font-size-lg);max-inline-size:18rem}\n .ministry{margin-block-start:var(--rhc-space-max-md);font-size:var(--rhc-text-font-size-sm);color:var(--rhc-color-foreground-on-primary)}\n .col h2{margin:0 0 var(--rhc-space-max-md);font-size:var(--rhc-text-font-size-sm);font-weight:var(--rhc-text-font-weight-bold);text-transform:uppercase;letter-spacing:.04em}\n .links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--rhc-space-max-sm);font-size:var(--rhc-text-font-size-sm)}\n .links a{color:var(--rhc-color-foreground-on-primary);text-decoration:none}\n .links a:hover{text-decoration:underline}\n .meta{inline-size:100%;border-block-start:var(--rhc-border-width-sm) solid var(--rhc-color-lintblauw-600);margin-block-start:var(--rhc-space-max-xl);padding-block-start:var(--rhc-space-max-lg);font-size:var(--rhc-text-font-size-sm);opacity:.85}\n `],\n template: `\n <footer class=\"bar\">\n <div class=\"inner\">\n <div>\n <div class=\"tagline\" i18n=\"@@footer.tagline\">De Rijksoverheid. Voor Nederland.</div>\n <div class=\"ministry\" i18n=\"@@footer.ministry\">CIBG — Ministerie van Volksgezondheid, Welzijn en Sport</div>\n </div>\n <nav class=\"col\" i18n-aria-label=\"@@footer.overSiteAria\" aria-label=\"Over deze site\">\n <h2 i18n=\"@@footer.overSite\">Over deze site</h2>\n <ul class=\"links\">\n <li><a href=\"https://www.rijksoverheid.nl/privacy\" rel=\"noopener\" target=\"_blank\" i18n=\"@@footer.privacy\">Privacy</a></li>\n <li><a href=\"https://www.rijksoverheid.nl/cookies\" rel=\"noopener\" target=\"_blank\" i18n=\"@@footer.cookies\">Cookies</a></li>\n <li><a href=\"https://www.rijksoverheid.nl/toegankelijkheid\" rel=\"noopener\" target=\"_blank\" i18n=\"@@footer.toegankelijkheid\">Toegankelijkheid</a></li>\n </ul>\n </nav>\n <div class=\"meta\" i18n=\"@@footer.demo\">Demo / POC — geen echte gegevens.</div>\n </div>\n </footer>\n `,\n})\nexport class SiteFooterComponent {}\n",
|
||||
"sourceCode": "import { Component } from '@angular/core';\n\n/** Organism: Rijksoverheid-style site footer — dark-blue, with the\n \"De Rijksoverheid. Voor Nederland.\" tagline, responsible-ministry attribution,\n and a small \"Over deze site\" link column. ponytail: links point at the real\n rijksoverheid.nl pages, not a fabricated dead-link forest. */\n@Component({\n selector: 'app-site-footer',\n styles: [`\n :host{display:block}\n .bar{background:var(--rhc-color-layout);color:var(--rhc-color-foreground-on-primary);margin-block-start:var(--rhc-space-max-5xl);inline-size:100%}\n .inner{max-inline-size:var(--app-content-max);margin-inline:auto;padding:var(--rhc-space-max-3xl) var(--rhc-space-max-2xl);box-sizing:border-box;display:flex;gap:var(--rhc-space-max-3xl);flex-wrap:wrap;justify-content:space-between}\n .tagline{font-style:italic;font-weight:var(--rhc-text-font-weight-semi-bold);font-size:var(--rhc-text-font-size-lg);max-inline-size:18rem}\n .ministry{margin-block-start:var(--rhc-space-max-md);font-size:var(--rhc-text-font-size-sm);color:var(--rhc-color-foreground-on-primary)}\n .col h2{margin:0 0 var(--rhc-space-max-md);font-size:var(--rhc-text-font-size-sm);font-weight:var(--rhc-text-font-weight-bold);text-transform:uppercase;letter-spacing:.04em}\n .links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--rhc-space-max-sm);font-size:var(--rhc-text-font-size-sm)}\n .links a{color:var(--rhc-color-foreground-on-primary);text-decoration:none}\n .links a:hover{text-decoration:underline}\n .meta{inline-size:100%;border-block-start:var(--rhc-border-width-sm) solid rgb(255 255 255 / 0.25);margin-block-start:var(--rhc-space-max-xl);padding-block-start:var(--rhc-space-max-lg);font-size:var(--rhc-text-font-size-sm);opacity:.85}\n `],\n template: `\n <footer class=\"bar\">\n <div class=\"inner\">\n <div>\n <div class=\"tagline\" i18n=\"@@footer.tagline\">De Rijksoverheid. Voor Nederland.</div>\n <div class=\"ministry\" i18n=\"@@footer.ministry\">CIBG — Ministerie van Volksgezondheid, Welzijn en Sport</div>\n </div>\n <nav class=\"col\" i18n-aria-label=\"@@footer.overSiteAria\" aria-label=\"Over deze site\">\n <h2 i18n=\"@@footer.overSite\">Over deze site</h2>\n <ul class=\"links\">\n <li><a href=\"https://www.rijksoverheid.nl/privacy\" rel=\"noopener\" target=\"_blank\" i18n=\"@@footer.privacy\">Privacy</a></li>\n <li><a href=\"https://www.rijksoverheid.nl/cookies\" rel=\"noopener\" target=\"_blank\" i18n=\"@@footer.cookies\">Cookies</a></li>\n <li><a href=\"https://www.rijksoverheid.nl/toegankelijkheid\" rel=\"noopener\" target=\"_blank\" i18n=\"@@footer.toegankelijkheid\">Toegankelijkheid</a></li>\n </ul>\n </nav>\n <div class=\"meta\" i18n=\"@@footer.demo\">Demo / POC — geen echte gegevens.</div>\n </div>\n </footer>\n `,\n})\nexport class SiteFooterComponent {}\n",
|
||||
"assetsDirs": [],
|
||||
"styleUrlsData": "",
|
||||
"stylesData": "\n :host{display:block}\n .bar{background:var(--rhc-color-donkerblauw-700);color:var(--rhc-color-foreground-on-primary);margin-block-start:var(--rhc-space-max-5xl);inline-size:100%}\n .inner{max-inline-size:var(--app-content-max);margin-inline:auto;padding:var(--rhc-space-max-3xl) var(--rhc-space-max-2xl);box-sizing:border-box;display:flex;gap:var(--rhc-space-max-3xl);flex-wrap:wrap;justify-content:space-between}\n .tagline{font-style:italic;font-weight:var(--rhc-text-font-weight-semi-bold);font-size:var(--rhc-text-font-size-lg);max-inline-size:18rem}\n .ministry{margin-block-start:var(--rhc-space-max-md);font-size:var(--rhc-text-font-size-sm);color:var(--rhc-color-foreground-on-primary)}\n .col h2{margin:0 0 var(--rhc-space-max-md);font-size:var(--rhc-text-font-size-sm);font-weight:var(--rhc-text-font-weight-bold);text-transform:uppercase;letter-spacing:.04em}\n .links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--rhc-space-max-sm);font-size:var(--rhc-text-font-size-sm)}\n .links a{color:var(--rhc-color-foreground-on-primary);text-decoration:none}\n .links a:hover{text-decoration:underline}\n .meta{inline-size:100%;border-block-start:var(--rhc-border-width-sm) solid var(--rhc-color-lintblauw-600);margin-block-start:var(--rhc-space-max-xl);padding-block-start:var(--rhc-space-max-lg);font-size:var(--rhc-text-font-size-sm);opacity:.85}\n \n",
|
||||
"stylesData": "\n :host{display:block}\n .bar{background:var(--rhc-color-layout);color:var(--rhc-color-foreground-on-primary);margin-block-start:var(--rhc-space-max-5xl);inline-size:100%}\n .inner{max-inline-size:var(--app-content-max);margin-inline:auto;padding:var(--rhc-space-max-3xl) var(--rhc-space-max-2xl);box-sizing:border-box;display:flex;gap:var(--rhc-space-max-3xl);flex-wrap:wrap;justify-content:space-between}\n .tagline{font-style:italic;font-weight:var(--rhc-text-font-weight-semi-bold);font-size:var(--rhc-text-font-size-lg);max-inline-size:18rem}\n .ministry{margin-block-start:var(--rhc-space-max-md);font-size:var(--rhc-text-font-size-sm);color:var(--rhc-color-foreground-on-primary)}\n .col h2{margin:0 0 var(--rhc-space-max-md);font-size:var(--rhc-text-font-size-sm);font-weight:var(--rhc-text-font-weight-bold);text-transform:uppercase;letter-spacing:.04em}\n .links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--rhc-space-max-sm);font-size:var(--rhc-text-font-size-sm)}\n .links a{color:var(--rhc-color-foreground-on-primary);text-decoration:none}\n .links a:hover{text-decoration:underline}\n .meta{inline-size:100%;border-block-start:var(--rhc-border-width-sm) solid rgb(255 255 255 / 0.25);margin-block-start:var(--rhc-space-max-xl);padding-block-start:var(--rhc-space-max-lg);font-size:var(--rhc-text-font-size-sm);opacity:.85}\n \n",
|
||||
"extends": []
|
||||
},
|
||||
{
|
||||
"name": "SiteHeaderComponent",
|
||||
"id": "component-SiteHeaderComponent-35a3fcd73778e62ff04f299edaa3cde5490b2800314762ac4b7fe01a68af79246c6fda70c45e0113ac7cb2ec0a81f2405c14a6c2a92a7a1f21f1b2f57ea1042f",
|
||||
"id": "component-SiteHeaderComponent-4e99a966eef3f002465a6bb6a91c48f02cc0f39ed84dcd2ffcc04d6eb80ca2c878136183c30e68bd18ffd47d17cf0767639c39b8eba14d500220bb96ab81c592",
|
||||
"file": "src/app/shared/layout/site-header/site-header.component.ts",
|
||||
"encapsulation": [],
|
||||
"entryComponents": [],
|
||||
@@ -19182,7 +19182,7 @@
|
||||
"selector": "app-site-header",
|
||||
"styleUrls": [],
|
||||
"styles": [
|
||||
"\n :host{display:block}\n /* Tier 1 — white brand bar */\n .brandbar{background:var(--rhc-color-wit);border-block-end:var(--rhc-border-width-sm) solid var(--rhc-color-border-subtle);inline-size:100%}\n .brandbar .inner{display:flex;align-items:center;gap:var(--rhc-space-max-xl);max-inline-size:var(--app-content-max);margin-inline:auto;padding:var(--rhc-space-max-lg) var(--rhc-space-max-2xl);box-sizing:border-box}\n .brand{display:flex;align-items:center;gap:var(--rhc-space-max-lg);color:var(--rhc-color-foreground-default);text-decoration:none}\n .mark{display:inline-block;inline-size:var(--rhc-space-max-md);block-size:var(--rhc-space-max-4xl);background:var(--rhc-color-lintblauw-700)}\n .name{font-weight:var(--rhc-text-font-weight-bold);line-height:var(--rhc-text-line-height-sm)}\n .sub{font-weight:var(--rhc-text-font-weight-regular);font-size:var(--rhc-text-font-size-sm);color:var(--rhc-color-foreground-subtle)}\n .session{margin-inline-start:auto;display:flex;align-items:center;gap:var(--rhc-space-max-lg);font-size:var(--rhc-text-font-size-sm)}\n .user{color:var(--rhc-color-foreground-subtle)}\n .logout{background:none;border:0;padding:0;cursor:pointer;color:var(--rhc-color-foreground-link);text-decoration:underline;font:inherit}\n .logout:hover{color:var(--rhc-color-foreground-link-hover)}\n /* Tier 2 — blue breadcrumb bar */\n .navbar{background:var(--rhc-color-lintblauw-700);color:var(--rhc-color-foreground-on-primary);inline-size:100%}\n .navbar .inner{max-inline-size:var(--app-content-max);margin-inline:auto;padding:var(--rhc-space-max-md) var(--rhc-space-max-2xl);box-sizing:border-box}\n "
|
||||
"\n :host{display:block}\n /* Tier 1 — white brand bar */\n .brandbar{background:var(--rhc-color-wit);border-block-end:var(--rhc-border-width-sm) solid var(--rhc-color-border-subtle);inline-size:100%}\n .brandbar .inner{display:flex;align-items:center;gap:var(--rhc-space-max-xl);max-inline-size:var(--app-content-max);margin-inline:auto;padding:var(--rhc-space-max-lg) var(--rhc-space-max-2xl);box-sizing:border-box}\n .brand{display:flex;align-items:center;gap:var(--rhc-space-max-lg);color:var(--rhc-color-foreground-default);text-decoration:none}\n .mark{display:inline-block;inline-size:var(--rhc-space-max-md);block-size:var(--rhc-space-max-4xl);background:var(--rhc-color-layout)}\n .name{font-weight:var(--rhc-text-font-weight-bold);line-height:var(--rhc-text-line-height-sm)}\n .sub{font-weight:var(--rhc-text-font-weight-regular);font-size:var(--rhc-text-font-size-sm);color:var(--rhc-color-foreground-subtle)}\n .session{margin-inline-start:auto;display:flex;align-items:center;gap:var(--rhc-space-max-lg);font-size:var(--rhc-text-font-size-sm)}\n .user{color:var(--rhc-color-foreground-subtle)}\n .logout{background:none;border:0;padding:0;cursor:pointer;color:var(--rhc-color-foreground-link);text-decoration:underline;font:inherit}\n .logout:hover{color:var(--rhc-color-foreground-link-hover)}\n /* Tier 2 — blue breadcrumb bar */\n .navbar{background:var(--rhc-color-layout);color:var(--rhc-color-foreground-on-primary);inline-size:100%}\n .navbar .inner{max-inline-size:var(--app-content-max);margin-inline:auto;padding:var(--rhc-space-max-md) var(--rhc-space-max-2xl);box-sizing:border-box}\n "
|
||||
],
|
||||
"template": "<div class=\"brandbar\">\n <div class=\"inner\">\n <a routerLink=\"/dashboard\" class=\"brand\">\n <span aria-hidden=\"true\" class=\"mark\"></span>\n <span class=\"name\" i18n=\"@@header.brand\">Rijksoverheid<br><span class=\"sub\">BIG-register</span></span>\n </a>\n <span class=\"portal sub\">{{ subtitle() }}</span>\n @if (session(); as s) {\n <span class=\"session\">\n <span class=\"user\"><ng-container i18n=\"@@header.ingelogdAls\">Ingelogd als</ng-container> {{ s.naam }}</span>\n <button type=\"button\" class=\"logout\" (click)=\"logout()\" i18n=\"@@header.uitloggen\">Uitloggen</button>\n </span>\n }\n </div>\n</div>\n@if (trail().length) {\n <div class=\"navbar\">\n <div class=\"inner\">\n <app-breadcrumb class=\"inverse\" [items]=\"trail()\" />\n </div>\n </div>\n}\n",
|
||||
"templateUrl": [],
|
||||
@@ -19303,10 +19303,10 @@
|
||||
"description": "<p>Organism: Rijksoverheid-style site header. Two tiers, like rijksoverheid.nl:\na white brand bar (wordmark + session/logout) over a lint-blue bar carrying\nthe breadcrumb. ponytail: text wordmark, not the licensed Rijksoverheid logo;\nno search box (no search feature yet).</p>\n",
|
||||
"rawdescription": "\nOrganism: Rijksoverheid-style site header. Two tiers, like rijksoverheid.nl:\na white brand bar (wordmark + session/logout) over a lint-blue bar carrying\nthe breadcrumb. ponytail: text wordmark, not the licensed Rijksoverheid logo;\nno search box (no search feature yet).",
|
||||
"type": "component",
|
||||
"sourceCode": "import { Component, computed, inject, input } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { NavigationEnd, Router, RouterLink } from '@angular/router';\nimport { filter, map } from 'rxjs/operators';\nimport { SESSION_PORT } from '@shared/application/session.port';\nimport { BreadcrumbComponent } from '@shared/layout/breadcrumb/breadcrumb.component';\nimport { trailFor } from '@shared/layout/breadcrumb/breadcrumb-trail';\n\n/** Organism: Rijksoverheid-style site header. Two tiers, like rijksoverheid.nl:\n a white brand bar (wordmark + session/logout) over a lint-blue bar carrying\n the breadcrumb. ponytail: text wordmark, not the licensed Rijksoverheid logo;\n no search box (no search feature yet). */\n@Component({\n selector: 'app-site-header',\n imports: [RouterLink, BreadcrumbComponent],\n styles: [`\n :host{display:block}\n /* Tier 1 — white brand bar */\n .brandbar{background:var(--rhc-color-wit);border-block-end:var(--rhc-border-width-sm) solid var(--rhc-color-border-subtle);inline-size:100%}\n .brandbar .inner{display:flex;align-items:center;gap:var(--rhc-space-max-xl);max-inline-size:var(--app-content-max);margin-inline:auto;padding:var(--rhc-space-max-lg) var(--rhc-space-max-2xl);box-sizing:border-box}\n .brand{display:flex;align-items:center;gap:var(--rhc-space-max-lg);color:var(--rhc-color-foreground-default);text-decoration:none}\n .mark{display:inline-block;inline-size:var(--rhc-space-max-md);block-size:var(--rhc-space-max-4xl);background:var(--rhc-color-lintblauw-700)}\n .name{font-weight:var(--rhc-text-font-weight-bold);line-height:var(--rhc-text-line-height-sm)}\n .sub{font-weight:var(--rhc-text-font-weight-regular);font-size:var(--rhc-text-font-size-sm);color:var(--rhc-color-foreground-subtle)}\n .session{margin-inline-start:auto;display:flex;align-items:center;gap:var(--rhc-space-max-lg);font-size:var(--rhc-text-font-size-sm)}\n .user{color:var(--rhc-color-foreground-subtle)}\n .logout{background:none;border:0;padding:0;cursor:pointer;color:var(--rhc-color-foreground-link);text-decoration:underline;font:inherit}\n .logout:hover{color:var(--rhc-color-foreground-link-hover)}\n /* Tier 2 — blue breadcrumb bar */\n .navbar{background:var(--rhc-color-lintblauw-700);color:var(--rhc-color-foreground-on-primary);inline-size:100%}\n .navbar .inner{max-inline-size:var(--app-content-max);margin-inline:auto;padding:var(--rhc-space-max-md) var(--rhc-space-max-2xl);box-sizing:border-box}\n `],\n template: `\n <div class=\"brandbar\">\n <div class=\"inner\">\n <a routerLink=\"/dashboard\" class=\"brand\">\n <span aria-hidden=\"true\" class=\"mark\"></span>\n <span class=\"name\" i18n=\"@@header.brand\">Rijksoverheid<br><span class=\"sub\">BIG-register</span></span>\n </a>\n <span class=\"portal sub\">{{ subtitle() }}</span>\n @if (session(); as s) {\n <span class=\"session\">\n <span class=\"user\"><ng-container i18n=\"@@header.ingelogdAls\">Ingelogd als</ng-container> {{ s.naam }}</span>\n <button type=\"button\" class=\"logout\" (click)=\"logout()\" i18n=\"@@header.uitloggen\">Uitloggen</button>\n </span>\n }\n </div>\n </div>\n @if (trail().length) {\n <div class=\"navbar\">\n <div class=\"inner\">\n <app-breadcrumb class=\"inverse\" [items]=\"trail()\" />\n </div>\n </div>\n }\n `,\n})\nexport class SiteHeaderComponent {\n subtitle = input($localize`:@@header.subtitle:Mijn omgeving`);\n\n private router = inject(Router);\n private sessionPort = inject(SESSION_PORT, { optional: true });\n\n readonly session = computed(() => this.sessionPort?.session() ?? null);\n private url = toSignal(\n this.router.events.pipe(filter((e) => e instanceof NavigationEnd), map(() => this.router.url)),\n { initialValue: this.router.url },\n );\n protected trail = computed(() => trailFor(this.url()));\n\n logout() {\n this.sessionPort?.logout();\n this.router.navigate(['/login']);\n }\n}\n",
|
||||
"sourceCode": "import { Component, computed, inject, input } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { NavigationEnd, Router, RouterLink } from '@angular/router';\nimport { filter, map } from 'rxjs/operators';\nimport { SESSION_PORT } from '@shared/application/session.port';\nimport { BreadcrumbComponent } from '@shared/layout/breadcrumb/breadcrumb.component';\nimport { trailFor } from '@shared/layout/breadcrumb/breadcrumb-trail';\n\n/** Organism: Rijksoverheid-style site header. Two tiers, like rijksoverheid.nl:\n a white brand bar (wordmark + session/logout) over a lint-blue bar carrying\n the breadcrumb. ponytail: text wordmark, not the licensed Rijksoverheid logo;\n no search box (no search feature yet). */\n@Component({\n selector: 'app-site-header',\n imports: [RouterLink, BreadcrumbComponent],\n styles: [`\n :host{display:block}\n /* Tier 1 — white brand bar */\n .brandbar{background:var(--rhc-color-wit);border-block-end:var(--rhc-border-width-sm) solid var(--rhc-color-border-subtle);inline-size:100%}\n .brandbar .inner{display:flex;align-items:center;gap:var(--rhc-space-max-xl);max-inline-size:var(--app-content-max);margin-inline:auto;padding:var(--rhc-space-max-lg) var(--rhc-space-max-2xl);box-sizing:border-box}\n .brand{display:flex;align-items:center;gap:var(--rhc-space-max-lg);color:var(--rhc-color-foreground-default);text-decoration:none}\n .mark{display:inline-block;inline-size:var(--rhc-space-max-md);block-size:var(--rhc-space-max-4xl);background:var(--rhc-color-layout)}\n .name{font-weight:var(--rhc-text-font-weight-bold);line-height:var(--rhc-text-line-height-sm)}\n .sub{font-weight:var(--rhc-text-font-weight-regular);font-size:var(--rhc-text-font-size-sm);color:var(--rhc-color-foreground-subtle)}\n .session{margin-inline-start:auto;display:flex;align-items:center;gap:var(--rhc-space-max-lg);font-size:var(--rhc-text-font-size-sm)}\n .user{color:var(--rhc-color-foreground-subtle)}\n .logout{background:none;border:0;padding:0;cursor:pointer;color:var(--rhc-color-foreground-link);text-decoration:underline;font:inherit}\n .logout:hover{color:var(--rhc-color-foreground-link-hover)}\n /* Tier 2 — blue breadcrumb bar */\n .navbar{background:var(--rhc-color-layout);color:var(--rhc-color-foreground-on-primary);inline-size:100%}\n .navbar .inner{max-inline-size:var(--app-content-max);margin-inline:auto;padding:var(--rhc-space-max-md) var(--rhc-space-max-2xl);box-sizing:border-box}\n `],\n template: `\n <div class=\"brandbar\">\n <div class=\"inner\">\n <a routerLink=\"/dashboard\" class=\"brand\">\n <span aria-hidden=\"true\" class=\"mark\"></span>\n <span class=\"name\" i18n=\"@@header.brand\">Rijksoverheid<br><span class=\"sub\">BIG-register</span></span>\n </a>\n <span class=\"portal sub\">{{ subtitle() }}</span>\n @if (session(); as s) {\n <span class=\"session\">\n <span class=\"user\"><ng-container i18n=\"@@header.ingelogdAls\">Ingelogd als</ng-container> {{ s.naam }}</span>\n <button type=\"button\" class=\"logout\" (click)=\"logout()\" i18n=\"@@header.uitloggen\">Uitloggen</button>\n </span>\n }\n </div>\n </div>\n @if (trail().length) {\n <div class=\"navbar\">\n <div class=\"inner\">\n <app-breadcrumb class=\"inverse\" [items]=\"trail()\" />\n </div>\n </div>\n }\n `,\n})\nexport class SiteHeaderComponent {\n subtitle = input($localize`:@@header.subtitle:Mijn omgeving`);\n\n private router = inject(Router);\n private sessionPort = inject(SESSION_PORT, { optional: true });\n\n readonly session = computed(() => this.sessionPort?.session() ?? null);\n private url = toSignal(\n this.router.events.pipe(filter((e) => e instanceof NavigationEnd), map(() => this.router.url)),\n { initialValue: this.router.url },\n );\n protected trail = computed(() => trailFor(this.url()));\n\n logout() {\n this.sessionPort?.logout();\n this.router.navigate(['/login']);\n }\n}\n",
|
||||
"assetsDirs": [],
|
||||
"styleUrlsData": "",
|
||||
"stylesData": "\n :host{display:block}\n /* Tier 1 — white brand bar */\n .brandbar{background:var(--rhc-color-wit);border-block-end:var(--rhc-border-width-sm) solid var(--rhc-color-border-subtle);inline-size:100%}\n .brandbar .inner{display:flex;align-items:center;gap:var(--rhc-space-max-xl);max-inline-size:var(--app-content-max);margin-inline:auto;padding:var(--rhc-space-max-lg) var(--rhc-space-max-2xl);box-sizing:border-box}\n .brand{display:flex;align-items:center;gap:var(--rhc-space-max-lg);color:var(--rhc-color-foreground-default);text-decoration:none}\n .mark{display:inline-block;inline-size:var(--rhc-space-max-md);block-size:var(--rhc-space-max-4xl);background:var(--rhc-color-lintblauw-700)}\n .name{font-weight:var(--rhc-text-font-weight-bold);line-height:var(--rhc-text-line-height-sm)}\n .sub{font-weight:var(--rhc-text-font-weight-regular);font-size:var(--rhc-text-font-size-sm);color:var(--rhc-color-foreground-subtle)}\n .session{margin-inline-start:auto;display:flex;align-items:center;gap:var(--rhc-space-max-lg);font-size:var(--rhc-text-font-size-sm)}\n .user{color:var(--rhc-color-foreground-subtle)}\n .logout{background:none;border:0;padding:0;cursor:pointer;color:var(--rhc-color-foreground-link);text-decoration:underline;font:inherit}\n .logout:hover{color:var(--rhc-color-foreground-link-hover)}\n /* Tier 2 — blue breadcrumb bar */\n .navbar{background:var(--rhc-color-lintblauw-700);color:var(--rhc-color-foreground-on-primary);inline-size:100%}\n .navbar .inner{max-inline-size:var(--app-content-max);margin-inline:auto;padding:var(--rhc-space-max-md) var(--rhc-space-max-2xl);box-sizing:border-box}\n \n",
|
||||
"stylesData": "\n :host{display:block}\n /* Tier 1 — white brand bar */\n .brandbar{background:var(--rhc-color-wit);border-block-end:var(--rhc-border-width-sm) solid var(--rhc-color-border-subtle);inline-size:100%}\n .brandbar .inner{display:flex;align-items:center;gap:var(--rhc-space-max-xl);max-inline-size:var(--app-content-max);margin-inline:auto;padding:var(--rhc-space-max-lg) var(--rhc-space-max-2xl);box-sizing:border-box}\n .brand{display:flex;align-items:center;gap:var(--rhc-space-max-lg);color:var(--rhc-color-foreground-default);text-decoration:none}\n .mark{display:inline-block;inline-size:var(--rhc-space-max-md);block-size:var(--rhc-space-max-4xl);background:var(--rhc-color-layout)}\n .name{font-weight:var(--rhc-text-font-weight-bold);line-height:var(--rhc-text-line-height-sm)}\n .sub{font-weight:var(--rhc-text-font-weight-regular);font-size:var(--rhc-text-font-size-sm);color:var(--rhc-color-foreground-subtle)}\n .session{margin-inline-start:auto;display:flex;align-items:center;gap:var(--rhc-space-max-lg);font-size:var(--rhc-text-font-size-sm)}\n .user{color:var(--rhc-color-foreground-subtle)}\n .logout{background:none;border:0;padding:0;cursor:pointer;color:var(--rhc-color-foreground-link);text-decoration:underline;font:inherit}\n .logout:hover{color:var(--rhc-color-foreground-link-hover)}\n /* Tier 2 — blue breadcrumb bar */\n .navbar{background:var(--rhc-color-layout);color:var(--rhc-color-foreground-on-primary);inline-size:100%}\n .navbar .inner{max-inline-size:var(--app-content-max);margin-inline:auto;padding:var(--rhc-space-max-md) var(--rhc-space-max-2xl);box-sizing:border-box}\n \n",
|
||||
"extends": []
|
||||
},
|
||||
{
|
||||
@@ -20744,16 +20744,6 @@
|
||||
"rawdescription": "Used by the shell to find what to poll on return: still-in-flight uploads.",
|
||||
"description": "<p>Used by the shell to find what to poll on return: still-in-flight uploads.</p>\n"
|
||||
},
|
||||
{
|
||||
"name": "initial",
|
||||
"ctype": "miscellaneous",
|
||||
"subtype": "variable",
|
||||
"file": "src/app/brief/domain/brief.machine.ts",
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"type": "BriefState",
|
||||
"defaultValue": "{ tag: 'loading' }"
|
||||
},
|
||||
{
|
||||
"name": "initial",
|
||||
"ctype": "miscellaneous",
|
||||
@@ -20774,6 +20764,16 @@
|
||||
"type": "IntakeState",
|
||||
"defaultValue": "{ tag: 'Answering', answers: {}, cursor: 0, errors: {}, scholingThreshold: SCHOLING_THRESHOLD_DEFAULT }"
|
||||
},
|
||||
{
|
||||
"name": "initial",
|
||||
"ctype": "miscellaneous",
|
||||
"subtype": "variable",
|
||||
"file": "src/app/brief/domain/brief.machine.ts",
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"type": "BriefState",
|
||||
"defaultValue": "{ tag: 'loading' }"
|
||||
},
|
||||
{
|
||||
"name": "initial",
|
||||
"ctype": "miscellaneous",
|
||||
@@ -24759,50 +24759,6 @@
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "reduce",
|
||||
"file": "src/app/brief/domain/brief.machine.ts",
|
||||
"ctype": "miscellaneous",
|
||||
"subtype": "function",
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"description": "",
|
||||
"args": [
|
||||
{
|
||||
"name": "s",
|
||||
"type": "BriefState",
|
||||
"deprecated": false,
|
||||
"deprecationMessage": ""
|
||||
},
|
||||
{
|
||||
"name": "m",
|
||||
"type": "BriefMsg",
|
||||
"deprecated": false,
|
||||
"deprecationMessage": ""
|
||||
}
|
||||
],
|
||||
"returnType": "BriefState",
|
||||
"jsdoctags": [
|
||||
{
|
||||
"name": "s",
|
||||
"type": "BriefState",
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"tagName": {
|
||||
"text": "param"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "m",
|
||||
"type": "BriefMsg",
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"tagName": {
|
||||
"text": "param"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "reduce",
|
||||
"file": "src/app/herregistratie/domain/herregistratie.machine.ts",
|
||||
@@ -24891,6 +24847,50 @@
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "reduce",
|
||||
"file": "src/app/brief/domain/brief.machine.ts",
|
||||
"ctype": "miscellaneous",
|
||||
"subtype": "function",
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"description": "",
|
||||
"args": [
|
||||
{
|
||||
"name": "s",
|
||||
"type": "BriefState",
|
||||
"deprecated": false,
|
||||
"deprecationMessage": ""
|
||||
},
|
||||
{
|
||||
"name": "m",
|
||||
"type": "BriefMsg",
|
||||
"deprecated": false,
|
||||
"deprecationMessage": ""
|
||||
}
|
||||
],
|
||||
"returnType": "BriefState",
|
||||
"jsdoctags": [
|
||||
{
|
||||
"name": "s",
|
||||
"type": "BriefState",
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"tagName": {
|
||||
"text": "param"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "m",
|
||||
"type": "BriefMsg",
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"tagName": {
|
||||
"text": "param"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "reduce",
|
||||
"file": "src/app/registratie/domain/change-request.machine.ts",
|
||||
@@ -27807,18 +27807,6 @@
|
||||
"description": "<p>The server-owned geldigheidsvraag whose"ja" answer requires a Dutch-taalvaardigheid\nupload (proof of the confirmed B2 level). Stable id shared with the backend.</p>\n"
|
||||
}
|
||||
],
|
||||
"src/app/brief/domain/brief.machine.ts": [
|
||||
{
|
||||
"name": "initial",
|
||||
"ctype": "miscellaneous",
|
||||
"subtype": "variable",
|
||||
"file": "src/app/brief/domain/brief.machine.ts",
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"type": "BriefState",
|
||||
"defaultValue": "{ tag: 'loading' }"
|
||||
}
|
||||
],
|
||||
"src/app/herregistratie/domain/herregistratie.machine.ts": [
|
||||
{
|
||||
"name": "initial",
|
||||
@@ -27867,6 +27855,18 @@
|
||||
"description": "<p>The fixed step list. Number of steps never changes; questions reveal inline.</p>\n"
|
||||
}
|
||||
],
|
||||
"src/app/brief/domain/brief.machine.ts": [
|
||||
{
|
||||
"name": "initial",
|
||||
"ctype": "miscellaneous",
|
||||
"subtype": "variable",
|
||||
"file": "src/app/brief/domain/brief.machine.ts",
|
||||
"deprecated": false,
|
||||
"deprecationMessage": "",
|
||||
"type": "BriefState",
|
||||
"defaultValue": "{ tag: 'loading' }"
|
||||
}
|
||||
],
|
||||
"src/app/registratie/domain/change-request.machine.ts": [
|
||||
{
|
||||
"name": "initial",
|
||||
|
||||
Reference in New Issue
Block a user