diff --git a/alfa-client/libs/admin/statistik/src/lib/statistik-container/statistik-container.component.html b/alfa-client/libs/admin/statistik/src/lib/statistik-container/statistik-container.component.html
index 6672f64a191f3f553427fcd51ad8c8708e624371..f198e8cf18baae5f2bb29c63da65b261993a5f90 100644
--- a/alfa-client/libs/admin/statistik/src/lib/statistik-container/statistik-container.component.html
+++ b/alfa-client/libs/admin/statistik/src/lib/statistik-container/statistik-container.component.html
@@ -30,9 +30,11 @@
data-test-id="statistik-fields-form"
></admin-statistik-fields-form>
} @else {
- <ods-button
- text="Weitere Felder auswerten"
- (clickEmitter)="showEvaluateFieldsForm()"
- data-test-id="weitere-felder-auswerten-button"
- ></ods-button>
+ <div class="mt-4">
+ <ods-button
+ text="Weitere Felder auswerten"
+ (clickEmitter)="showEvaluateFieldsForm()"
+ data-test-id="weitere-felder-auswerten-button"
+ ></ods-button>
+ </div>
}
diff --git a/alfa-client/libs/admin/statistik/src/lib/statistik-container/statistik-fields-form/admin-statistik-fields-form.component.html b/alfa-client/libs/admin/statistik/src/lib/statistik-container/statistik-fields-form/admin-statistik-fields-form.component.html
index d74c8c031ff2fe29979e3f84c1dc2c33ff655e29..1968e4a1ec14f1b4bb59d578b73c917e270a8544 100644
--- a/alfa-client/libs/admin/statistik/src/lib/statistik-container/statistik-fields-form/admin-statistik-fields-form.component.html
+++ b/alfa-client/libs/admin/statistik/src/lib/statistik-container/statistik-fields-form/admin-statistik-fields-form.component.html
@@ -1,31 +1,37 @@
<h2 class="heading-2" data-test-id="statistik-fields-form-header-text">Felder zur Auswertung hinzufügen</h2>
-<ods-text-input
- [fieldControl]="formEngineFormControl"
- label="Formengine"
- placeholder="Tragen Sie hier die Formengine des Formulars ein"
- data-test-id="form-engine-input"
-></ods-text-input>
-
-<ods-text-input
- [fieldControl]="formIdFormControl"
- label="FormID"
- placeholder="Tragen Sie hier die FormID des Formulars ein"
- data-test-id="form-id-input"
-></ods-text-input>
+<div class="flex max-w-4xl flex-col gap-4">
+ <ods-text-input
+ [fieldControl]="formEngineFormControl"
+ label="Formengine"
+ placeholder="Tragen Sie hier die Formengine des Formulars ein"
+ data-test-id="form-engine-input"
+ ></ods-text-input>
-@for (dataFieldControl of dataFieldsFormControls; track $index) {
<ods-text-input
- [fieldControl]="dataFieldControl"
- label="Pfad des Datenfeldes"
- placeholder="Tragen Sie hier den gesamten Pfad des Datenfeldes ein, das Sie auswerten möchten."
- [attr.data-test-id]="'data-statistik-field-' + $index"
+ [fieldControl]="formIdFormControl"
+ label="FormID"
+ placeholder="Tragen Sie hier die FormID des Formulars ein"
+ data-test-id="form-id-input"
></ods-text-input>
-}
-<ods-button text="Datenfeld hinzufügen" (clickEmitter)="addDataField()" data-test-id="add-data-field-button"> </ods-button>
+ @for (dataFieldControl of dataFieldsFormControls; track $index) {
+ <ods-text-input
+ [fieldControl]="dataFieldControl"
+ label="Pfad des Datenfeldes"
+ placeholder="Tragen Sie hier den gesamten Pfad des Datenfeldes ein, das Sie auswerten möchten."
+ [attr.data-test-id]="'data-statistik-field-' + $index"
+ ></ods-text-input>
+ }
+
+ <ods-button text="Datenfeld hinzufügen" (clickEmitter)="addDataField()" data-test-id="add-data-field-button">
+ <ods-plus-icon icon class="fill-whitetext" />
+ </ods-button>
-<ods-button text="Speichern" data-test-id="save-statistik-fields-button"></ods-button>
-<ods-button text="Abbrechen" (clickEmitter)="cancel.emit()" data-test-id="cancel-statistik-fields-button">
- <ods-close-icon icon></ods-close-icon>
-</ods-button>
+ <div class="mt-4 flex gap-4">
+ <ods-button text="Speichern" data-test-id="save-statistik-fields-button"></ods-button>
+ <ods-button text="Abbrechen" variant="outline" (clickEmitter)="cancel.emit()" data-test-id="cancel-statistik-fields-button">
+ <ods-close-icon icon class="fill-primary" />
+ </ods-button>
+ </div>
+</div>
diff --git a/alfa-client/libs/admin/statistik/src/lib/statistik-container/statistik-fields-form/admin-statistik-fields-form.component.ts b/alfa-client/libs/admin/statistik/src/lib/statistik-container/statistik-fields-form/admin-statistik-fields-form.component.ts
index c8a3fd46c6fd7f19c5541b2ca36c14e5b574af03..47cf8e08c60707591d57a10bd5d4c898a4798848 100644
--- a/alfa-client/libs/admin/statistik/src/lib/statistik-container/statistik-fields-form/admin-statistik-fields-form.component.ts
+++ b/alfa-client/libs/admin/statistik/src/lib/statistik-container/statistik-fields-form/admin-statistik-fields-form.component.ts
@@ -1,13 +1,13 @@
import { CommonModule } from '@angular/common';
import { Component, EventEmitter, inject, Output } from '@angular/core';
import { FormArray, FormControl, ReactiveFormsModule } from '@angular/forms';
-import { ButtonComponent, CloseIconComponent, TextInputComponent } from '@ods/system';
+import { ButtonComponent, CloseIconComponent, PlusIconComponent, TextInputComponent } from '@ods/system';
import { StatistikFieldsFormService } from './statistik-fields.formservice';
@Component({
selector: 'admin-statistik-fields-form',
standalone: true,
- imports: [CommonModule, TextInputComponent, ButtonComponent, CloseIconComponent, ReactiveFormsModule],
+ imports: [CommonModule, TextInputComponent, ButtonComponent, CloseIconComponent, ReactiveFormsModule, PlusIconComponent],
providers: [StatistikFieldsFormService],
templateUrl: './admin-statistik-fields-form.component.html',
})
diff --git a/alfa-client/libs/design-system/src/index.ts b/alfa-client/libs/design-system/src/index.ts
index 4c577c9087024d16b200f280a1ab6b90d3a8a32d..1f46fdee2bf9ba94f5af17a5ee742be0afe2aa85 100644
--- a/alfa-client/libs/design-system/src/index.ts
+++ b/alfa-client/libs/design-system/src/index.ts
@@ -62,6 +62,7 @@ export * from './lib/icons/office-icon/office-icon.component';
export * from './lib/icons/orga-unit-icon/orga-unit-icon.component';
export * from './lib/icons/ozg-logo-icon/ozg-logo-icon.component';
export * from './lib/icons/person-icon/person-icon.component';
+export * from './lib/icons/plus-icon/plus-icon.component';
export * from './lib/icons/public-administration-icon/public-administration-icon.component';
export * from './lib/icons/save-icon/save-icon.component';
export * from './lib/icons/search-icon/search-icon.component';
diff --git a/alfa-client/libs/design-system/src/lib/icons/plus-icon/plus-icon.component.spec.ts b/alfa-client/libs/design-system/src/lib/icons/plus-icon/plus-icon.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1f91573b1d3ec90ca862afc9c4d6f502dab9b6f5
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/plus-icon/plus-icon.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { PlusIconComponent } from './plus-icon.component';
+
+describe('PlusIconComponent', () => {
+ let component: PlusIconComponent;
+ let fixture: ComponentFixture<PlusIconComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [PlusIconComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(PlusIconComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/alfa-client/libs/design-system/src/lib/icons/plus-icon/plus-icon.component.ts b/alfa-client/libs/design-system/src/lib/icons/plus-icon/plus-icon.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f5816ec7f3952297c69bf3905b67d9a1cb557748
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/plus-icon/plus-icon.component.ts
@@ -0,0 +1,26 @@
+import { NgClass } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { twMerge } from 'tailwind-merge';
+import { iconVariants, IconVariants } from '../iconVariants';
+
+@Component({
+ selector: 'ods-plus-icon',
+ standalone: true,
+ imports: [NgClass],
+ template: `<svg
+ [ngClass]="[twMerge(iconVariants({ size }), 'fill-primary', class)]"
+ aria-hidden="true"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path d="M11 13H5V11H11V5H13V11H19V13H13V19H11V13Z" />
+ </svg>`,
+})
+export class PlusIconComponent {
+ @Input() size: IconVariants['size'] = 'medium';
+ @Input() class: string = undefined;
+
+ readonly iconVariants = iconVariants;
+ readonly twMerge = twMerge;
+}
diff --git a/alfa-client/libs/design-system/src/lib/icons/plus-icon/plus-icon.stories.ts b/alfa-client/libs/design-system/src/lib/icons/plus-icon/plus-icon.stories.ts
new file mode 100644
index 0000000000000000000000000000000000000000..dbf9d8acaa8669520c43d5541d7d2a9f21b44f97
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/plus-icon/plus-icon.stories.ts
@@ -0,0 +1,50 @@
+/*
+ * Copyright (C) 2024 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, StoryObj } from '@storybook/angular';
+
+import { PlusIconComponent } from './plus-icon.component';
+
+const meta: Meta<PlusIconComponent> = {
+ title: 'Icons/Plus icon',
+ component: PlusIconComponent,
+ excludeStories: /.*Data$/,
+ tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<PlusIconComponent>;
+
+export const Default: Story = {
+ args: { size: 'large' },
+ argTypes: {
+ size: {
+ control: 'select',
+ options: ['small', 'medium', 'large', 'extra-large', 'full'],
+ description: 'Size of icon. Property "full" means 100%',
+ table: {
+ defaultValue: { summary: 'medium' },
+ },
+ },
+ },
+};
diff --git a/alfa-client/tsconfig.base.json b/alfa-client/tsconfig.base.json
index deeabaafe3641c159f6a14ebdf3db81c51e267a0..2014ad63b1ebdbf8c2b31b7259bcc0d77011dd4b 100644
--- a/alfa-client/tsconfig.base.json
+++ b/alfa-client/tsconfig.base.json
@@ -16,8 +16,8 @@
"skipDefaultLibCheck": true,
"baseUrl": ".",
"paths": {
- "@admin-client/configuration-shared": ["libs/admin/configuration-shared/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"],
"@admin-client/organisations-einheit-shared": ["libs/admin/organisations-einheit-shared/src/index.ts"],
"@admin-client/postfach": ["libs/admin/postfach/src/index.ts"],