diff --git a/alfa-client/apps/admin/src/app/app.component.spec.ts b/alfa-client/apps/admin/src/app/app.component.spec.ts
index 6be45ca955e87085d3bb19645d00e8a6a9719932..ef7bf3c2d2af16a8b780611d78ed73734caf580a 100644
--- a/alfa-client/apps/admin/src/app/app.component.spec.ts
+++ b/alfa-client/apps/admin/src/app/app.component.spec.ts
@@ -300,7 +300,7 @@ describe('AppComponent', () => {
it('should navigate to statistik if aggregation mapping link exists', () => {
component._navigateByConfiguration(createConfigurationResource([ConfigurationLinkRel.AGGREGATION_MAPPINGS]));
- expect(router.navigate).toHaveBeenCalledWith(['/auswertungen']);
+ expect(router.navigate).toHaveBeenCalledWith(['/statistik/auswertungen']);
});
it('should navigate to unavailable page if no link exists', () => {
diff --git a/alfa-client/libs/admin/configuration-shared/src/lib/configuration.linkrel.ts b/alfa-client/libs/admin/configuration-shared/src/lib/configuration.linkrel.ts
index f38803351591db0d6ac7fb13c7bef7c0a9ce7a34..e9346ae8ace0795d7964138d32a3a35c0e9beb2d 100644
--- a/alfa-client/libs/admin/configuration-shared/src/lib/configuration.linkrel.ts
+++ b/alfa-client/libs/admin/configuration-shared/src/lib/configuration.linkrel.ts
@@ -23,5 +23,7 @@
*/
export enum ConfigurationLinkRel {
SETTING = 'settings',
- AGGREGATION_MAPPINGS = 'aggregationMappings',
+ AGGREGATION_MAPPINGS = 'auswertungs',
+ DATENFREIGABE = 'datenfreigabes',
+ DATENANFRAGE = 'datenanfrages',
}
diff --git a/alfa-client/libs/admin/configuration/src/lib/menu-container/menu-container.component.html b/alfa-client/libs/admin/configuration/src/lib/menu-container/menu-container.component.html
index fd97589d60cd2ca0c583ca7ae1a143f7bba98121..88920c510ee3af9d88073ba632865bfefa8a5055 100644
--- a/alfa-client/libs/admin/configuration/src/lib/menu-container/menu-container.component.html
+++ b/alfa-client/libs/admin/configuration/src/lib/menu-container/menu-container.component.html
@@ -1 +1 @@
-<admin-menu [configurationStateResource]="configurationStateResource$ | async"></admin-menu>
\ No newline at end of file
+<admin-menu [configurationStateResource]="configurationStateResource$ | async" />
diff --git a/alfa-client/libs/admin/configuration/src/lib/menu-container/menu/menu.component.html b/alfa-client/libs/admin/configuration/src/lib/menu-container/menu/menu.component.html
index 6fa4cdf5e5fc0d882439227f2f56a42c4a9bd426..7f9e639960ff8987f4d5d7cf780910f34c1c6f4e 100644
--- a/alfa-client/libs/admin/configuration/src/lib/menu-container/menu/menu.component.html
+++ b/alfa-client/libs/admin/configuration/src/lib/menu-container/menu/menu.component.html
@@ -3,8 +3,4 @@
<ods-icon icon name="mail" fill="text" />
</ods-nav-item>
}
-@if (configurationStateResource.resource | hasLink: configurationLinkRel.AGGREGATION_MAPPINGS) {
- <ods-nav-item data-test-id="statistik-navigation" caption="Statistik" [path]="'/' + ROUTES.AGGREGATION_MAPPING">
- <ods-icon icon name="statistic" fill="text" />
- </ods-nav-item>
-}
+<admin-statistik-menu [configurationStateResource]="configurationStateResource" />
diff --git a/alfa-client/libs/admin/configuration/src/lib/menu-container/menu/menu.component.spec.ts b/alfa-client/libs/admin/configuration/src/lib/menu-container/menu/menu.component.spec.ts
index bc802c253dfb33ee7ae2b9dff73dca63c84cfce8..731b103bffc54ab15461d59449641a1b2371f804 100644
--- a/alfa-client/libs/admin/configuration/src/lib/menu-container/menu/menu.component.spec.ts
+++ b/alfa-client/libs/admin/configuration/src/lib/menu-container/menu/menu.component.spec.ts
@@ -1,12 +1,13 @@
import { ConfigurationLinkRel } from '@admin-client/configuration-shared';
import { createEmptyStateResource, createStateResource, HasLinkPipe } from '@alfa-client/tech-shared';
-import { existsAsHtmlElement, notExistsAsHtmlElement } from '@alfa-client/test-utils';
+import { existsAsHtmlElement, getMockComponent, notExistsAsHtmlElement } from '@alfa-client/test-utils';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { IconComponent, NavItemComponent } from '@ods/system';
import { createConfigurationResource } from 'libs/admin/configuration-shared/test/configuration';
import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
import { MockComponent } from 'ng-mocks';
import { MenuComponent } from './menu.component';
+import { StatistikMenuComponent } from './statistik-menu/statistik-menu.component';
describe('MenuComponent', () => {
let component: MenuComponent;
@@ -17,8 +18,7 @@ describe('MenuComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
- imports: [MenuComponent, HasLinkPipe],
- declarations: [MockComponent(NavItemComponent), MockComponent(IconComponent)],
+ imports: [MenuComponent, HasLinkPipe, MockComponent(NavItemComponent), MockComponent(IconComponent)],
}).compileComponents();
fixture = TestBed.createComponent(MenuComponent);
@@ -49,23 +49,11 @@ describe('MenuComponent', () => {
});
});
- describe('statistic navigation', () => {
- it('should show if settings link is present', () => {
- component.configurationStateResource = createStateResource(
- createConfigurationResource([ConfigurationLinkRel.AGGREGATION_MAPPINGS]),
- );
-
- fixture.detectChanges();
-
- existsAsHtmlElement(fixture, statistikNavigationSelector);
- });
-
- it('should hide if settings link is missing', () => {
- component.configurationStateResource = createStateResource(createConfigurationResource());
-
- fixture.detectChanges();
+ describe('statistik menu', () => {
+ it('should call with configurationStateResource', () => {
+ const statisticMenu: StatistikMenuComponent = getMockComponent(fixture, StatistikMenuComponent);
- notExistsAsHtmlElement(fixture, statistikNavigationSelector);
+ expect(statisticMenu.configurationStateResource).toBe(component.configurationStateResource);
});
});
});
diff --git a/alfa-client/libs/admin/configuration/src/lib/menu-container/menu/menu.component.ts b/alfa-client/libs/admin/configuration/src/lib/menu-container/menu/menu.component.ts
index ad10332330c6af03140a8e15f63c4682504d211a..79b5da74eeaebd0a66f3ad81bbbce795e6a49871 100644
--- a/alfa-client/libs/admin/configuration/src/lib/menu-container/menu/menu.component.ts
+++ b/alfa-client/libs/admin/configuration/src/lib/menu-container/menu/menu.component.ts
@@ -4,11 +4,12 @@ import { HasLinkPipe, StateResource } from '@alfa-client/tech-shared';
import { CommonModule } from '@angular/common';
import { Component, Input } from '@angular/core';
import { IconComponent, NavItemComponent } from '@ods/system';
+import { StatistikMenuComponent } from './statistik-menu/statistik-menu.component';
@Component({
selector: 'admin-menu',
standalone: true,
- imports: [CommonModule, NavItemComponent, IconComponent, HasLinkPipe],
+ imports: [CommonModule, NavItemComponent, IconComponent, HasLinkPipe, StatistikMenuComponent],
templateUrl: './menu.component.html',
})
export class MenuComponent {
diff --git a/alfa-client/libs/admin/configuration/src/lib/menu-container/menu/statistik-menu/statistik-menu.component.html b/alfa-client/libs/admin/configuration/src/lib/menu-container/menu/statistik-menu/statistik-menu.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..2fb7553377a341679374591780e2984aa43916bd
--- /dev/null
+++ b/alfa-client/libs/admin/configuration/src/lib/menu-container/menu/statistik-menu/statistik-menu.component.html
@@ -0,0 +1,26 @@
+@if (
+ configurationStateResource.resource
+ | hasAnyLink
+ : configurationLinkRel.AGGREGATION_MAPPINGS
+ : configurationLinkRel.DATENFREIGABE
+ : configurationLinkRel.DATENANFRAGE
+) {
+ <ods-nav-headline label="Statistik" />
+ <div class="flex flex-col gap-2">
+ @if (configurationStateResource.resource | hasLink: configurationLinkRel.AGGREGATION_MAPPINGS) {
+ <ods-nav-item data-test-id="auswertung-navigation" caption="Auswertungen" [path]="'/' + ROUTES.AGGREGATION_MAPPING">
+ <ods-icon icon name="statistic" fill="text" />
+ </ods-nav-item>
+ }
+ @if (configurationStateResource.resource | hasLink: configurationLinkRel.DATENFREIGABE) {
+ <ods-nav-item data-test-id="datenfreigaben-navigation" caption="Datenfreigaben" [path]="'/' + ROUTES.DATENFREIGABEN">
+ <ods-icon icon name="bar-chart-arrow" fill="text" />
+ </ods-nav-item>
+ }
+ @if (configurationStateResource.resource | hasLink: configurationLinkRel.DATENANFRAGE) {
+ <ods-nav-item data-test-id="datenanfragen-navigation" caption="Datenanfragen" [path]="'/' + ROUTES.DATENANFRAGEN">
+ <ods-icon icon name="bubble-question-mark" fill="text" />
+ </ods-nav-item>
+ }
+ </div>
+}
diff --git a/alfa-client/libs/admin/configuration/src/lib/menu-container/menu/statistik-menu/statistik-menu.component.spec.ts b/alfa-client/libs/admin/configuration/src/lib/menu-container/menu/statistik-menu/statistik-menu.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..24008266f38eb1fd33d4bbee06260342f6a87f14
--- /dev/null
+++ b/alfa-client/libs/admin/configuration/src/lib/menu-container/menu/statistik-menu/statistik-menu.component.spec.ts
@@ -0,0 +1,95 @@
+import { ConfigurationLinkRel } from '@admin-client/configuration-shared';
+import { createEmptyStateResource, createStateResource, HasLinkPipe } from '@alfa-client/tech-shared';
+import { existsAsHtmlElement, notExistsAsHtmlElement } from '@alfa-client/test-utils';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { IconComponent, NavItemComponent } from '@ods/system';
+import { createConfigurationResource } from 'libs/admin/configuration-shared/test/configuration';
+import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
+import { MockComponent } from 'ng-mocks';
+import { StatistikMenuComponent } from './statistik-menu.component';
+
+describe('StatistikMenuComponent', () => {
+ let component: StatistikMenuComponent;
+ let fixture: ComponentFixture<StatistikMenuComponent>;
+
+ const auswertungNavigationSelector: string = getDataTestIdOf('auswertung-navigation');
+ const datenfreigabenNavigationSelector: string = getDataTestIdOf('datenfreigaben-navigation');
+ const datenanfragenNavigationSelector: string = getDataTestIdOf('datenanfragen-navigation');
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [StatistikMenuComponent, HasLinkPipe, MockComponent(NavItemComponent), MockComponent(IconComponent)],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(StatistikMenuComponent);
+ component = fixture.componentInstance;
+ component.configurationStateResource = createEmptyStateResource();
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ describe('statistic navigation', () => {
+ describe('auswertung', () => {
+ it('should show if agregation mapping link is present', () => {
+ component.configurationStateResource = createStateResource(
+ createConfigurationResource([ConfigurationLinkRel.AGGREGATION_MAPPINGS]),
+ );
+
+ fixture.detectChanges();
+
+ existsAsHtmlElement(fixture, auswertungNavigationSelector);
+ });
+
+ it('should hide if agregation mapping link is missing', () => {
+ component.configurationStateResource = createStateResource(createConfigurationResource());
+
+ fixture.detectChanges();
+
+ notExistsAsHtmlElement(fixture, auswertungNavigationSelector);
+ });
+ });
+
+ describe('datenfreigaben', () => {
+ it('should show if datenfreigabe link is present', () => {
+ component.configurationStateResource = createStateResource(
+ createConfigurationResource([ConfigurationLinkRel.DATENFREIGABE]),
+ );
+
+ fixture.detectChanges();
+
+ existsAsHtmlElement(fixture, datenfreigabenNavigationSelector);
+ });
+
+ it('should hide if datenfreigabe link is missing', () => {
+ component.configurationStateResource = createStateResource(createConfigurationResource());
+
+ fixture.detectChanges();
+
+ notExistsAsHtmlElement(fixture, datenfreigabenNavigationSelector);
+ });
+ });
+
+ describe('datenanfragen', () => {
+ it('should show if datenanfrage link is present', () => {
+ component.configurationStateResource = createStateResource(
+ createConfigurationResource([ConfigurationLinkRel.DATENANFRAGE]),
+ );
+
+ fixture.detectChanges();
+
+ existsAsHtmlElement(fixture, datenanfragenNavigationSelector);
+ });
+
+ it('should hide if datenanfrage link is missing', () => {
+ component.configurationStateResource = createStateResource(createConfigurationResource());
+
+ fixture.detectChanges();
+
+ notExistsAsHtmlElement(fixture, datenanfragenNavigationSelector);
+ });
+ });
+ });
+});
diff --git a/alfa-client/libs/admin/configuration/src/lib/menu-container/menu/statistik-menu/statistik-menu.component.ts b/alfa-client/libs/admin/configuration/src/lib/menu-container/menu/statistik-menu/statistik-menu.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..40b40d14a7687b669ca99a9374c67c351d5b1cfc
--- /dev/null
+++ b/alfa-client/libs/admin/configuration/src/lib/menu-container/menu/statistik-menu/statistik-menu.component.ts
@@ -0,0 +1,19 @@
+import { ConfigurationLinkRel, ConfigurationResource } from '@admin-client/configuration-shared';
+import { ROUTES } from '@admin-client/shared';
+import { HasAnyLinkPipe, HasLinkPipe, StateResource } from '@alfa-client/tech-shared';
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { IconComponent, NavHeadlineComponent, NavItemComponent } from '@ods/system';
+
+@Component({
+ selector: 'admin-statistik-menu',
+ standalone: true,
+ imports: [CommonModule, NavItemComponent, IconComponent, HasLinkPipe, HasAnyLinkPipe, NavHeadlineComponent],
+ templateUrl: './statistik-menu.component.html',
+})
+export class StatistikMenuComponent {
+ @Input() configurationStateResource: StateResource<ConfigurationResource>;
+
+ public readonly configurationLinkRel = ConfigurationLinkRel;
+ public readonly ROUTES = ROUTES;
+}
diff --git a/alfa-client/libs/admin/shared/src/lib/routes.ts b/alfa-client/libs/admin/shared/src/lib/routes.ts
index 9f1496843e54d2c7ff25e132f0b68b4edee6469d..4fcb7a1f5765c2664d4e17f06b55c6714818e1b7 100644
--- a/alfa-client/libs/admin/shared/src/lib/routes.ts
+++ b/alfa-client/libs/admin/shared/src/lib/routes.ts
@@ -28,7 +28,9 @@ export enum ROUTES {
BENUTZER_ID = 'benutzer/:userid',
ORGANISATIONSEINHEITEN = 'organisationseinheiten',
UNAVAILABLE = 'unavailable',
- AGGREGATION_MAPPING = 'auswertungen',
- AGGREGATION_MAPPING_NEU = 'auswertungen/neu',
- AGGREGATION_MAPPING_ID = 'auswertungen/:aggregationMappingId',
+ AGGREGATION_MAPPING = 'statistik/auswertungen',
+ AGGREGATION_MAPPING_NEU = 'statistik/auswertungen/neu',
+ AGGREGATION_MAPPING_ID = 'statistik/auswertungen/:aggregationMappingId',
+ DATENFREIGABEN = 'statistik/datenfreigaben',
+ DATENANFRAGEN = 'statistik/datenanfragen',
}
diff --git a/alfa-client/libs/design-system/src/assets/bar-chart-arrow.svg b/alfa-client/libs/design-system/src/assets/bar-chart-arrow.svg
new file mode 100644
index 0000000000000000000000000000000000000000..5fa29da37f947b16181d270179918d9f42527e01
--- /dev/null
+++ b/alfa-client/libs/design-system/src/assets/bar-chart-arrow.svg
@@ -0,0 +1,11 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M9 24L7.6 22.6L9.35 20.8C7.21667 20.5167 5.45833 19.9333 4.075 19.05C2.69167 18.1667 2 17.15 2 16C2 14.6167 2.9625 13.4375 4.8875 12.4625C6.8125 11.4875 9.18333 11 12 11C14.8167 11 17.1875 11.4875 19.1125 12.4625C21.0375 13.4375 22 14.6167 22 16C22 17.0333 21.4458 17.9583 20.3375 18.775C19.2292 19.5917 17.7833 20.2 16 20.6V18.55C17.2833 18.2167 18.2708 17.8042 18.9625 17.3125C19.6542 16.8208 20 16.3833 20 16C20 15.4667 19.2875 14.8333 17.8625 14.1C16.4375 13.3667 14.4833 13 12 13C9.51667 13 7.5625 13.3667 6.1375 14.1C4.7125 14.8333 4 15.4667 4 16C4 16.4 4.425 16.8792 5.275 17.4375C6.125 17.9958 7.33333 18.4167 8.9 18.7L7.6 17.4L9 16L13 20L9 24Z"
+ mask="url(#transparent-rect)" />
+ <path
+ d="M4.5 14.75V13.25H19.5V14.75H4.5ZM5.25 12.5V7.25H7.5V12.5H5.25ZM9 12.5V3.5H11.25V12.5H9ZM12.75 12.5V5.75H15V12.5H12.75ZM16.5 12.5V1.25H18.75V12.5H16.5Z" />
+ <mask id="transparent-rect">
+ <rect x="0" y="0" width="100%" height="100%" fill="white" />
+ <path d="M4 0H20V16H4V0Z" fill="black" />
+ </mask>
+</svg>
\ No newline at end of file
diff --git a/alfa-client/libs/design-system/src/assets/bubble-question-mark.svg b/alfa-client/libs/design-system/src/assets/bubble-question-mark.svg
new file mode 100644
index 0000000000000000000000000000000000000000..6c0e60974af73c8c2796d0f0f663d67f1fd802a3
--- /dev/null
+++ b/alfa-client/libs/design-system/src/assets/bubble-question-mark.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M12 22L11.75 19H11.5C9.13333 19 7.125 18.175 5.475 16.525C3.825 14.875 3 12.8667 3 10.5C3 8.13333 3.825 6.125 5.475 4.475C7.125 2.825 9.13333 2 11.5 2C12.6833 2 13.7875 2.22083 14.8125 2.6625C15.8375 3.10417 16.7375 3.7125 17.5125 4.4875C18.2875 5.2625 18.8958 6.1625 19.3375 7.1875C19.7792 8.2125 20 9.31667 20 10.5C20 11.75 19.7958 12.95 19.3875 14.1C18.9792 15.25 18.4208 16.3167 17.7125 17.3C17.0042 18.2833 16.1625 19.175 15.1875 19.975C14.2125 20.775 13.15 21.45 12 22ZM14 18.35C15.1833 17.35 16.1458 16.1792 16.8875 14.8375C17.6292 13.4958 18 12.05 18 10.5C18 8.68333 17.3708 7.14583 16.1125 5.8875C14.8542 4.62917 13.3167 4 11.5 4C9.68333 4 8.14583 4.62917 6.8875 5.8875C5.62917 7.14583 5 8.68333 5 10.5C5 12.3167 5.62917 13.8542 6.8875 15.1125C8.14583 16.3708 9.68333 17 11.5 17H14V18.35ZM11.475 15.975C11.7583 15.975 12 15.875 12.2 15.675C12.4 15.475 12.5 15.2333 12.5 14.95C12.5 14.6667 12.4 14.425 12.2 14.225C12 14.025 11.7583 13.925 11.475 13.925C11.1917 13.925 10.95 14.025 10.75 14.225C10.55 14.425 10.45 14.6667 10.45 14.95C10.45 15.2333 10.55 15.475 10.75 15.675C10.95 15.875 11.1917 15.975 11.475 15.975ZM10.75 12.8H12.25C12.25 12.3 12.3 11.95 12.4 11.75C12.5 11.55 12.8167 11.1833 13.35 10.65C13.65 10.35 13.9 10.025 14.1 9.675C14.3 9.325 14.4 8.95 14.4 8.55C14.4 7.7 14.1125 7.0625 13.5375 6.6375C12.9625 6.2125 12.2833 6 11.5 6C10.7667 6 10.15 6.20417 9.65 6.6125C9.15 7.02083 8.8 7.51667 8.6 8.1L10 8.65C10.0833 8.36667 10.2417 8.0875 10.475 7.8125C10.7083 7.5375 11.05 7.4 11.5 7.4C11.95 7.4 12.2875 7.525 12.5125 7.775C12.7375 8.025 12.85 8.3 12.85 8.6C12.85 8.88333 12.7667 9.1375 12.6 9.3625C12.4333 9.5875 12.2333 9.81667 12 10.05C11.4167 10.55 11.0625 10.9458 10.9375 11.2375C10.8125 11.5292 10.75 12.05 10.75 12.8Z" />
+</svg>
\ No newline at end of file
diff --git a/alfa-client/libs/design-system/src/index.ts b/alfa-client/libs/design-system/src/index.ts
index fb40b55e1d1daca4a38beb748c4ae2e3828589e4..abdb78ae51c1cc3eaf992d4b3f54b5b2554858ae 100644
--- a/alfa-client/libs/design-system/src/index.ts
+++ b/alfa-client/libs/design-system/src/index.ts
@@ -54,6 +54,7 @@ export * from './lib/instant-search/instant-search/instant-search.model';
export * from './lib/link/link.component';
export * from './lib/list/list-item/list-item.component';
export * from './lib/list/list.component';
+export * from './lib/navbar/nav-headline/nav-headline.component';
export * from './lib/navbar/nav-item/nav-item.component';
export * from './lib/navbar/navbar/navbar.component';
export * from './lib/testbtn/testbtn.component';
diff --git a/alfa-client/libs/design-system/src/lib/badge/badge.component.spec.ts b/alfa-client/libs/design-system/src/lib/badge/badge.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4b8185d7985f5982930b48ddeffa952fff4d9f01
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/badge/badge.component.spec.ts
@@ -0,0 +1,44 @@
+/*
+ * Copyright (C) 2025 Das Land Schleswig-Holstein vertreten durch den
+ * Ministerpräsidenten des Landes Schleswig-Holstein
+ * Staatskanzlei
+ * Abteilung Digitalisierung und zentrales IT-Management der Landesregierung
+ *
+ * Lizenziert unter der EUPL, Version 1.2 oder - sobald
+ * diese von der Europäischen Kommission genehmigt wurden -
+ * Folgeversionen der EUPL ("Lizenz");
+ * Sie dürfen dieses Werk ausschließlich gemäß
+ * dieser Lizenz nutzen.
+ * Eine Kopie der Lizenz finden Sie hier:
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Sofern nicht durch anwendbare Rechtsvorschriften
+ * gefordert oder in schriftlicher Form vereinbart, wird
+ * die unter der Lizenz verbreitete Software "so wie sie
+ * ist", OHNE JEGLICHE GEWÄHRLEISTUNG ODER BEDINGUNGEN -
+ * ausdrücklich oder stillschweigend - verbreitet.
+ * Die sprachspezifischen Genehmigungen und Beschränkungen
+ * unter der Lizenz sind dem Lizenztext zu entnehmen.
+ */
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BadgeComponent } from './badge.component';
+
+describe('BadgeComponent', () => {
+ let component: BadgeComponent;
+ let fixture: ComponentFixture<BadgeComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [BadgeComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(BadgeComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/alfa-client/libs/design-system/src/lib/badge/badge.component.ts b/alfa-client/libs/design-system/src/lib/badge/badge.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3ac3c705b500cbdada413868fd62d5d76cd488d4
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/badge/badge.component.ts
@@ -0,0 +1,36 @@
+/*
+ * Copyright (C) 2025 Das Land Schleswig-Holstein vertreten durch den
+ * Ministerpräsidenten des Landes Schleswig-Holstein
+ * Staatskanzlei
+ * Abteilung Digitalisierung und zentrales IT-Management der Landesregierung
+ *
+ * Lizenziert unter der EUPL, Version 1.2 oder - sobald
+ * diese von der Europäischen Kommission genehmigt wurden -
+ * Folgeversionen der EUPL ("Lizenz");
+ * Sie dürfen dieses Werk ausschließlich gemäß
+ * dieser Lizenz nutzen.
+ * Eine Kopie der Lizenz finden Sie hier:
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Sofern nicht durch anwendbare Rechtsvorschriften
+ * gefordert oder in schriftlicher Form vereinbart, wird
+ * die unter der Lizenz verbreitete Software "so wie sie
+ * ist", OHNE JEGLICHE GEWÄHRLEISTUNG ODER BEDINGUNGEN -
+ * ausdrücklich oder stillschweigend - verbreitet.
+ * Die sprachspezifischen Genehmigungen und Beschränkungen
+ * unter der Lizenz sind dem Lizenztext zu entnehmen.
+ */
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+
+@Component({
+ selector: 'ods-badge',
+ standalone: true,
+ imports: [CommonModule],
+ template: `<p class="rounded-full bg-primary px-2 py-0.5 text-sm text-whitetext">{{ name }}</p>`,
+ styles: [':host {@apply block w-fit}'],
+})
+export class BadgeComponent {
+ @Input({ required: true }) name!: string;
+}
diff --git a/alfa-client/libs/design-system/src/lib/badge/badge.stories.ts b/alfa-client/libs/design-system/src/lib/badge/badge.stories.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c7dd442fcc0622f1068ea5961f2e550fc515496f
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/badge/badge.stories.ts
@@ -0,0 +1,46 @@
+/*
+ * Copyright (C) 2025 Das Land Schleswig-Holstein vertreten durch den
+ * Ministerpräsidenten des Landes Schleswig-Holstein
+ * Staatskanzlei
+ * Abteilung Digitalisierung und zentrales IT-Management der Landesregierung
+ *
+ * Lizenziert unter der EUPL, Version 1.2 oder - sobald
+ * diese von der Europäischen Kommission genehmigt wurden -
+ * Folgeversionen der EUPL ("Lizenz");
+ * Sie dürfen dieses Werk ausschließlich gemäß
+ * dieser Lizenz nutzen.
+ * Eine Kopie der Lizenz finden Sie hier:
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Sofern nicht durch anwendbare Rechtsvorschriften
+ * gefordert oder in schriftlicher Form vereinbart, wird
+ * die unter der Lizenz verbreitete Software "so wie sie
+ * ist", OHNE JEGLICHE GEWÄHRLEISTUNG ODER BEDINGUNGEN -
+ * ausdrücklich oder stillschweigend - verbreitet.
+ * Die sprachspezifischen Genehmigungen und Beschränkungen
+ * unter der Lizenz sind dem Lizenztext zu entnehmen.
+ */
+import { type Meta, type StoryObj } from '@storybook/angular';
+import { BadgeComponent } from './badge.component';
+
+const meta: Meta = {
+ title: 'Badge',
+ excludeStories: /.*Data$/,
+ component: BadgeComponent,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: 'The badge with some text',
+ },
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj<BadgeComponent>;
+
+export const Default: Story = {
+ args: { name: 'NEU' },
+};
diff --git a/alfa-client/libs/design-system/src/lib/icon/icon.stories.ts b/alfa-client/libs/design-system/src/lib/icon/icon.stories.ts
index d20e0938dd7ca7bf20c770fb1244cd0410bfffc2..172985ea37a409b00ef5eb53ebdcd8242c0f5f5f 100644
--- a/alfa-client/libs/design-system/src/lib/icon/icon.stories.ts
+++ b/alfa-client/libs/design-system/src/lib/icon/icon.stories.ts
@@ -52,8 +52,10 @@ const ICONS_LIST: string[] = [
'archive',
'arrow-back',
'attachment',
+ 'bar-chart-arrow',
'bescheid-generate',
'bescheid-upload',
+ 'bubble-question-mark',
'check-circle',
'check',
'close',
diff --git a/alfa-client/libs/design-system/src/lib/navbar/nav-headline/nav-headline.component.spec.ts b/alfa-client/libs/design-system/src/lib/navbar/nav-headline/nav-headline.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..87b6c41a79167c09dba108c2b91d5419c4fc764e
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/navbar/nav-headline/nav-headline.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NavHeadlineComponent } from './nav-headline.component';
+
+describe('NavHeadlineComponent', () => {
+ let component: NavHeadlineComponent;
+ let fixture: ComponentFixture<NavHeadlineComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [NavHeadlineComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(NavHeadlineComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/alfa-client/libs/design-system/src/lib/navbar/nav-headline/nav-headline.component.ts b/alfa-client/libs/design-system/src/lib/navbar/nav-headline/nav-headline.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a2f538b5dbcd9b0f645c4de453680d43d2e35452
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/navbar/nav-headline/nav-headline.component.ts
@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+
+@Component({
+ selector: 'ods-nav-headline',
+ standalone: true,
+ imports: [CommonModule],
+ template: `<p class="mx-4 my-2 font-medium">{{ label }}</p>`,
+})
+export class NavHeadlineComponent {
+ @Input({ required: true }) label!: string;
+}
diff --git a/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.spec.ts b/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.spec.ts
index f4fd0fc39d030ec83824c3c8c0a7daefe3764de6..9ca22bdf1bf60e983a3bdd5db1a8cf2193c62fff 100644
--- a/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.spec.ts
+++ b/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.spec.ts
@@ -22,7 +22,7 @@
* unter der Lizenz sind dem Lizenztext zu entnehmen.
*/
import { convertForDataTest, ConvertForDataTestPipe } from '@alfa-client/tech-shared';
-import { getElementFromFixture, Mock, mock } from '@alfa-client/test-utils';
+import { existsAsHtmlElement, getElementFromFixture, Mock, mock, notExistsAsHtmlElement } from '@alfa-client/test-utils';
import { importProvidersFrom } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Router, RouterModule } from '@angular/router';
@@ -33,6 +33,8 @@ describe('NavItemComponent', () => {
let component: NavItemComponent;
let fixture: ComponentFixture<NavItemComponent>;
+ const badgeLocator: string = getDataTestIdOf('nav-item-badge');
+
const router: Mock<Router> = mock(Router);
beforeEach(async () => {
@@ -88,5 +90,23 @@ describe('NavItemComponent', () => {
expect(fixture.nativeElement.getAttribute('role')).toBe('menuitem');
});
});
+
+ describe('badge', () => {
+ it('should show', () => {
+ component.badge = true;
+
+ fixture.detectChanges();
+
+ existsAsHtmlElement(fixture, badgeLocator);
+ });
+
+ it('should hide', () => {
+ component.badge = false;
+
+ fixture.detectChanges();
+
+ notExistsAsHtmlElement(fixture, badgeLocator);
+ });
+ });
});
});
diff --git a/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.ts b/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.ts
index a3bd688e8120d42fba03efcde48d23510fdc66e7..603edf5d5aa1dc7a99c13857b9a17b36e1fb71cc 100644
--- a/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.ts
+++ b/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.ts
@@ -23,26 +23,33 @@
*/
import { ConvertForDataTestPipe } from '@alfa-client/tech-shared';
import { CommonModule } from '@angular/common';
-import { Component, HostBinding, Input } from '@angular/core';
+import { booleanAttribute, Component, HostBinding, Input } from '@angular/core';
import { RouterLink, RouterLinkActive } from '@angular/router';
+import { BadgeComponent } from '../../badge/badge.component';
@Component({
selector: 'ods-nav-item',
standalone: true,
- imports: [CommonModule, RouterLink, RouterLinkActive, ConvertForDataTestPipe],
+ imports: [CommonModule, RouterLink, RouterLinkActive, ConvertForDataTestPipe, BadgeComponent],
template: `<a
[routerLink]="path"
routerLinkActive="bg-selected-light border-selected"
- class="flex min-h-8 items-center gap-2 rounded-2xl border border-transparent px-4 py-2 outline-2 outline-offset-2 outline-focus hover:border-primary focus-visible:border-background-200 focus-visible:outline"
+ class="flex min-h-8 items-center justify-between rounded-2xl border border-transparent px-4 py-2 outline-2 outline-offset-2 outline-focus hover:border-primary focus-visible:border-background-200 focus-visible:outline"
[attr.data-test-id]="'link-path-' + path | convertForDataTest"
>
- <ng-content select="[icon]" />
- <p class="text-left text-sm text-text" [attr.data-test-id]="'caption-' + caption | convertForDataTest">{{ caption }}</p>
+ <div class="flex items-center gap-2">
+ <ng-content select="[icon]" />
+ <p class="text-left text-sm text-text" [attr.data-test-id]="'caption-' + caption | convertForDataTest">{{ caption }}</p>
+ </div>
+ @if (badge) {
+ <ods-badge data-test-id="nav-item-badge" name="NEU" />
+ }
</a>`,
})
export class NavItemComponent {
@Input({ required: true }) caption!: string;
@Input() path: string;
+ @Input({ transform: booleanAttribute }) badge: boolean = false;
@HostBinding('attr.role') role: string = 'menuitem';
}
diff --git a/alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.stories.ts b/alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.stories.ts
index 20911e3aa601b25c0b8014d5b92e6d4d54f00b76..f5715c3108177e5748d78482b576a7553a6656f6 100644
--- a/alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.stories.ts
+++ b/alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.stories.ts
@@ -26,6 +26,7 @@ import { importProvidersFrom } from '@angular/core';
import { RouterModule } from '@angular/router';
import { applicationConfig, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
import { IconComponent } from '../../icon/icon.component';
+import { NavHeadlineComponent } from '../nav-headline/nav-headline.component';
import { NavItemComponent } from '../nav-item/nav-item.component';
import { NavbarComponent } from './navbar.component';
@@ -39,7 +40,7 @@ const meta: Meta<NavbarComponent> = {
providers: [importProvidersFrom(RouterModule.forRoot([]))],
}),
moduleMetadata({
- imports: [NavItemComponent, IconComponent],
+ imports: [NavItemComponent, NavHeadlineComponent, IconComponent],
providers: [
{
provide: APP_BASE_HREF,
@@ -57,6 +58,7 @@ export const Default: Story = {
args: {},
render: () => ({
template: `<ods-navbar>
+ <ods-nav-headline label="Statstik" />
<ods-nav-item caption="First link" path="/"><ods-icon icon name="office" /></ods-nav-item>
<ods-nav-item caption="Second link" path="/second"><ods-icon icon name="office" /></ods-nav-item>
<hr />
diff --git a/alfa-client/libs/tech-shared/src/index.ts b/alfa-client/libs/tech-shared/src/index.ts
index 9220218eb9d7b86d8887d417285f0dac63a9d9eb..31672f5bbb396227eb2a4aadecc82c5f552de3a3 100644
--- a/alfa-client/libs/tech-shared/src/index.ts
+++ b/alfa-client/libs/tech-shared/src/index.ts
@@ -43,6 +43,7 @@ export * from './lib/pipe/format-date-with-time.pipe';
export * from './lib/pipe/format-date-without-year-with-time.pipe';
export * from './lib/pipe/format-to-pretty-date.pipe';
export * from './lib/pipe/get-url.pipe';
+export * from './lib/pipe/has-any-link.pipe';
export * from './lib/pipe/has-link.pipe';
export * from './lib/pipe/not-has-link.pipe';
export * from './lib/pipe/to-embedded-resource.pipe';
diff --git a/alfa-client/tsconfig.base.json b/alfa-client/tsconfig.base.json
index 69d2b403c92b19e42c5ed9daab7c4db1216652c0..83e9e7928b74b04912d038d2fb6e347424f754a9 100644
--- a/alfa-client/tsconfig.base.json
+++ b/alfa-client/tsconfig.base.json
@@ -16,6 +16,7 @@
"skipDefaultLibCheck": true,
"baseUrl": ".",
"paths": {
+ "@admin-client/aggregation-mapping": ["libs/admin/aggregation-mapping/src/index.ts"],
"@admin-client/configuration": ["libs/admin/configuration/src/index.ts"],
"@admin-client/configuration-shared": ["libs/admin/configuration-shared/src/index.ts"],
"@admin-client/organisations-einheit": ["libs/admin/organisations-einheit/src/index.ts"],
@@ -25,7 +26,6 @@
"@admin-client/reporting-shared": ["libs/admin/reporting-shared/src/index.ts"],
"@admin-client/settings-shared": ["libs/admin/settings-shared/src/index.ts"],
"@admin-client/shared": ["libs/admin/shared/src/index.ts"],
- "@admin-client/aggregation-mapping": ["libs/admin/aggregation-mapping/src/index.ts"],
"@admin-client/user": ["libs/admin/user/src/index.ts"],
"@admin-client/user-shared": ["libs/admin/user-shared/src/index.ts"],
"@admin/keycloak-shared": ["libs/admin/keycloak-shared/src/index.ts"],