diff --git a/alfa-client/apps/demo/src/app/app.component.html b/alfa-client/apps/demo/src/app/app.component.html
index 4c187c3b809d118c8bc9bb2a3fed9b29534338ff..5fe2b6517a677f5159936f618f113bb029340e0e 100644
--- a/alfa-client/apps/demo/src/app/app.component.html
+++ b/alfa-client/apps/demo/src/app/app.component.html
@@ -1,10 +1,7 @@
<ng-container>
<header class="flex items-center justify-between bg-white p-6">
<div class="font-extrabold text-primary">OZG-Cloud Demoapp</div>
- <button
- class="flex align-middle text-orange-500 transition-transform hover:scale-125"
- (click)="darkMode.set(!darkMode())"
- >
+ <button class="flex align-middle text-orange-500 transition-transform hover:scale-125" (click)="darkMode.set(!darkMode())">
<span *ngIf="!darkMode()" class="material-icons">dark_mode</span>
<span *ngIf="darkMode()" class="material-icons">light_mode</span>
</button>
@@ -14,6 +11,228 @@
<nav>NAV</nav>
</div>
<main class="flex-auto bg-background-50 p-6">
+ <div class="my-4">
+ <h1 class="mb-6 text-2xl font-semibold text-text">Benutzer & Rollen</h1>
+ <ods-button text="Benutzer hinzufügen" />
+ <ul class="mt-6 divide-y divide-gray-300 rounded-md bg-background-50 text-text shadow-sm ring-1 ring-gray-300">
+ <li>
+ <a
+ href="#"
+ class="flex flex-col items-start justify-between gap-6 rounded-t-md border-primary-600/50 px-6 py-4 hover:bg-background-150 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus lg:flex-row"
+ >
+ <div class="flex-1 basis-1/2">
+ <div class="mb-2 flex flex-wrap items-center gap-x-3">
+ <h3 class="text-md font-semibold">Fridolin Kaspers-Maajowski</h3>
+
+ <dl class="flex flex-wrap gap-2">
+ <dt class="sr-only">Rollen:</dt>
+ <dd
+ class="inline-flex flex-shrink-0 items-center rounded-full bg-green-50 px-1.5 py-0.5 text-sm font-medium text-green-700 ring-1 ring-inset ring-green-600/20"
+ >
+ Admin
+ </dd>
+ <dd
+ class="inline-flex flex-shrink-0 items-center rounded-full bg-green-50 px-1.5 py-0.5 text-sm font-medium text-green-700 ring-1 ring-inset ring-green-600/20"
+ >
+ Alfa: User
+ </dd>
+ <dd
+ class="inline-flex flex-shrink-0 items-center rounded-full bg-green-50 px-1.5 py-0.5 text-sm font-medium text-green-700 ring-1 ring-inset ring-green-600/20"
+ >
+ Alfa: Löschen
+ </dd>
+ </dl>
+ </div>
+
+ <dl>
+ <div class="flex items-center gap-2">
+ <dt>
+ <span class="sr-only">E-Mail: </span
+ ><svg
+ class="size-4 flex-none fill-gray-600"
+ viewBox="0 0 20 16"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ aria-hidden="true"
+ >
+ <path
+ d="M2 16C1.45 16 0.979167 15.8042 0.5875 15.4125C0.195833 15.0208 0 14.55 0 14V2C0 1.45 0.195833 0.979167 0.5875 0.5875C0.979167 0.195833 1.45 0 2 0H18C18.55 0 19.0208 0.195833 19.4125 0.5875C19.8042 0.979167 20 1.45 20 2V14C20 14.55 19.8042 15.0208 19.4125 15.4125C19.0208 15.8042 18.55 16 18 16H2ZM10 9L2 4V14H18V4L10 9ZM10 7L18 2H2L10 7ZM2 4V2V14V4Z"
+ />
+ </svg>
+ </dt>
+ <dd>fidolin.kaspers-maajowski@landratsamt-kiel.de</dd>
+ </div>
+ <div class="flex items-center gap-2">
+ <dt>
+ <span class="sr-only">E-Benutzername: </span
+ ><svg
+ class="size-4 flex-none fill-gray-600"
+ viewBox="0 0 16 16"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ aria-hidden="true"
+ >
+ <path
+ d="M8 8C6.9 8 5.95833 7.60833 5.175 6.825C4.39167 6.04167 4 5.1 4 4C4 2.9 4.39167 1.95833 5.175 1.175C5.95833 0.391667 6.9 0 8 0C9.1 0 10.0417 0.391667 10.825 1.175C11.6083 1.95833 12 2.9 12 4C12 5.1 11.6083 6.04167 10.825 6.825C10.0417 7.60833 9.1 8 8 8ZM0 16V13.2C0 12.6333 0.145833 12.1125 0.4375 11.6375C0.729167 11.1625 1.11667 10.8 1.6 10.55C2.63333 10.0333 3.68333 9.64583 4.75 9.3875C5.81667 9.12917 6.9 9 8 9C9.1 9 10.1833 9.12917 11.25 9.3875C12.3167 9.64583 13.3667 10.0333 14.4 10.55C14.8833 10.8 15.2708 11.1625 15.5625 11.6375C15.8542 12.1125 16 12.6333 16 13.2V16H0ZM2 14H14V13.2C14 13.0167 13.9542 12.85 13.8625 12.7C13.7708 12.55 13.65 12.4333 13.5 12.35C12.6 11.9 11.6917 11.5625 10.775 11.3375C9.85833 11.1125 8.93333 11 8 11C7.06667 11 6.14167 11.1125 5.225 11.3375C4.30833 11.5625 3.4 11.9 2.5 12.35C2.35 12.4333 2.22917 12.55 2.1375 12.7C2.04583 12.85 2 13.0167 2 13.2V14ZM8 6C8.55 6 9.02083 5.80417 9.4125 5.4125C9.80417 5.02083 10 4.55 10 4C10 3.45 9.80417 2.97917 9.4125 2.5875C9.02083 2.19583 8.55 2 8 2C7.45 2 6.97917 2.19583 6.5875 2.5875C6.19583 2.97917 6 3.45 6 4C6 4.55 6.19583 5.02083 6.5875 5.4125C6.97917 5.80417 7.45 6 8 6Z"
+ />
+ </svg>
+ </dt>
+ <dd>FKaspersMaajowski98</dd>
+ </div>
+ </dl>
+ </div>
+
+ <div class="flex-1 basis-1/2">
+ <h4 class="sr-only">Zuständige Stellen</h4>
+ <ul class="list-outside list-disc pl-4 text-base">
+ <li>Landeshauptstadt Kiel - Umweltschutzamt, Untere Naturschutzbehörde (uNB), Arten- und Biotopschutz</li>
+ <li>Amt für Finanzwirtschaft</li>
+ <li>Amt für Planwirtschaft</li>
+ </ul>
+ <div class="pl-4 text-gray-500">und 2 weitere</div>
+ </div>
+ </a>
+ </li>
+ <li>
+ <a
+ href="#"
+ class="flex flex-col items-start justify-between gap-6 border-primary-600/50 px-6 py-4 hover:bg-background-150 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus lg:flex-row"
+ >
+ <div class="flex-1 basis-1/2">
+ <div class="mb-2 flex flex-wrap items-center gap-x-3">
+ <h3 class="text-md font-semibold">Hans Postler</h3>
+ <dl class="flex flex-wrap gap-2">
+ <dt class="sr-only">Rollen:</dt>
+ <dd
+ class="inline-flex flex-shrink-0 items-center rounded-full bg-green-50 px-1.5 py-0.5 text-sm font-medium text-green-700 ring-1 ring-inset ring-green-600/20"
+ >
+ Alfa: Poststelle
+ </dd>
+ </dl>
+ </div>
+
+ <dl>
+ <div class="flex items-center gap-2">
+ <dt>
+ <span class="sr-only">E-Mail: </span
+ ><svg
+ class="size-4 flex-none fill-gray-600"
+ viewBox="0 0 20 16"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ aria-hidden="true"
+ >
+ <path
+ d="M2 16C1.45 16 0.979167 15.8042 0.5875 15.4125C0.195833 15.0208 0 14.55 0 14V2C0 1.45 0.195833 0.979167 0.5875 0.5875C0.979167 0.195833 1.45 0 2 0H18C18.55 0 19.0208 0.195833 19.4125 0.5875C19.8042 0.979167 20 1.45 20 2V14C20 14.55 19.8042 15.0208 19.4125 15.4125C19.0208 15.8042 18.55 16 18 16H2ZM10 9L2 4V14H18V4L10 9ZM10 7L18 2H2L10 7ZM2 4V2V14V4Z"
+ />
+ </svg>
+ </dt>
+ <dd>hansi@landratsamt-kiel-mit-extralanger-mailadresse-zum-test.de</dd>
+ </div>
+ <div class="flex items-center gap-2">
+ <dt>
+ <span class="sr-only">E-Benutzername: </span
+ ><svg
+ class="size-4 flex-none fill-gray-600"
+ viewBox="0 0 16 16"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ aria-hidden="true"
+ >
+ <path
+ d="M8 8C6.9 8 5.95833 7.60833 5.175 6.825C4.39167 6.04167 4 5.1 4 4C4 2.9 4.39167 1.95833 5.175 1.175C5.95833 0.391667 6.9 0 8 0C9.1 0 10.0417 0.391667 10.825 1.175C11.6083 1.95833 12 2.9 12 4C12 5.1 11.6083 6.04167 10.825 6.825C10.0417 7.60833 9.1 8 8 8ZM0 16V13.2C0 12.6333 0.145833 12.1125 0.4375 11.6375C0.729167 11.1625 1.11667 10.8 1.6 10.55C2.63333 10.0333 3.68333 9.64583 4.75 9.3875C5.81667 9.12917 6.9 9 8 9C9.1 9 10.1833 9.12917 11.25 9.3875C12.3167 9.64583 13.3667 10.0333 14.4 10.55C14.8833 10.8 15.2708 11.1625 15.5625 11.6375C15.8542 12.1125 16 12.6333 16 13.2V16H0ZM2 14H14V13.2C14 13.0167 13.9542 12.85 13.8625 12.7C13.7708 12.55 13.65 12.4333 13.5 12.35C12.6 11.9 11.6917 11.5625 10.775 11.3375C9.85833 11.1125 8.93333 11 8 11C7.06667 11 6.14167 11.1125 5.225 11.3375C4.30833 11.5625 3.4 11.9 2.5 12.35C2.35 12.4333 2.22917 12.55 2.1375 12.7C2.04583 12.85 2 13.0167 2 13.2V14ZM8 6C8.55 6 9.02083 5.80417 9.4125 5.4125C9.80417 5.02083 10 4.55 10 4C10 3.45 9.80417 2.97917 9.4125 2.5875C9.02083 2.19583 8.55 2 8 2C7.45 2 6.97917 2.19583 6.5875 2.5875C6.19583 2.97917 6 3.45 6 4C6 4.55 6.19583 5.02083 6.5875 5.4125C6.97917 5.80417 7.45 6 8 6Z"
+ />
+ </svg>
+ </dt>
+ <dd>posthansi</dd>
+ </div>
+ </dl>
+ </div>
+
+ <div class="flex-1 basis-1/2">
+ <h4 class="sr-only">Zuständige Stellen</h4>
+ <div class="pl-4 text-gray-500">keine zuständigen Stellen zugewiesen</div>
+ </div>
+ </a>
+ </li>
+ <li>
+ <a
+ href="#"
+ class="flex flex-col items-start justify-between gap-6 rounded-b-md border-primary-600/50 px-6 py-4 hover:bg-background-150 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus lg:flex-row"
+ >
+ <div class="flex-1 basis-1/2">
+ <div class="mb-2 flex flex-wrap items-center gap-x-3">
+ <h3 class="text-md font-semibold">Hans Postler</h3>
+ <dl class="flex flex-wrap gap-2">
+ <dt class="sr-only">Rollen:</dt>
+ <dd
+ class="inline-flex flex-shrink-0 items-center rounded-full bg-green-50 px-1.5 py-0.5 text-sm font-medium text-green-700 ring-1 ring-inset ring-green-600/20"
+ >
+ ADMIN_ADMIN
+ </dd>
+ <dd
+ class="inline-flex flex-shrink-0 items-center rounded-full bg-green-50 px-1.5 py-0.5 text-sm font-medium text-green-700 ring-1 ring-inset ring-green-600/20"
+ >
+ Alfa: VERWALTUNG_USER
+ </dd>
+ <dd
+ class="inline-flex flex-shrink-0 items-center rounded-full bg-green-50 px-1.5 py-0.5 text-sm font-medium text-green-700 ring-1 ring-inset ring-green-600/20"
+ >
+ Alfa: VERWALTUNG_LOESCHEN
+ </dd>
+ </dl>
+ </div>
+
+ <dl>
+ <div class="flex items-center gap-2">
+ <dt>
+ <span class="sr-only">E-Mail: </span
+ ><svg
+ class="size-4 flex-none fill-gray-600"
+ viewBox="0 0 20 16"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ aria-hidden="true"
+ >
+ <path
+ d="M2 16C1.45 16 0.979167 15.8042 0.5875 15.4125C0.195833 15.0208 0 14.55 0 14V2C0 1.45 0.195833 0.979167 0.5875 0.5875C0.979167 0.195833 1.45 0 2 0H18C18.55 0 19.0208 0.195833 19.4125 0.5875C19.8042 0.979167 20 1.45 20 2V14C20 14.55 19.8042 15.0208 19.4125 15.4125C19.0208 15.8042 18.55 16 18 16H2ZM10 9L2 4V14H18V4L10 9ZM10 7L18 2H2L10 7ZM2 4V2V14V4Z"
+ />
+ </svg>
+ </dt>
+ <dd>hansi@landratsamt-kiel1.de</dd>
+ </div>
+ <div class="flex items-center gap-2">
+ <dt>
+ <span class="sr-only">E-Benutzername: </span
+ ><svg
+ class="size-4 flex-none fill-gray-600"
+ viewBox="0 0 16 16"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ aria-hidden="true"
+ >
+ <path
+ d="M8 8C6.9 8 5.95833 7.60833 5.175 6.825C4.39167 6.04167 4 5.1 4 4C4 2.9 4.39167 1.95833 5.175 1.175C5.95833 0.391667 6.9 0 8 0C9.1 0 10.0417 0.391667 10.825 1.175C11.6083 1.95833 12 2.9 12 4C12 5.1 11.6083 6.04167 10.825 6.825C10.0417 7.60833 9.1 8 8 8ZM0 16V13.2C0 12.6333 0.145833 12.1125 0.4375 11.6375C0.729167 11.1625 1.11667 10.8 1.6 10.55C2.63333 10.0333 3.68333 9.64583 4.75 9.3875C5.81667 9.12917 6.9 9 8 9C9.1 9 10.1833 9.12917 11.25 9.3875C12.3167 9.64583 13.3667 10.0333 14.4 10.55C14.8833 10.8 15.2708 11.1625 15.5625 11.6375C15.8542 12.1125 16 12.6333 16 13.2V16H0ZM2 14H14V13.2C14 13.0167 13.9542 12.85 13.8625 12.7C13.7708 12.55 13.65 12.4333 13.5 12.35C12.6 11.9 11.6917 11.5625 10.775 11.3375C9.85833 11.1125 8.93333 11 8 11C7.06667 11 6.14167 11.1125 5.225 11.3375C4.30833 11.5625 3.4 11.9 2.5 12.35C2.35 12.4333 2.22917 12.55 2.1375 12.7C2.04583 12.85 2 13.0167 2 13.2V14ZM8 6C8.55 6 9.02083 5.80417 9.4125 5.4125C9.80417 5.02083 10 4.55 10 4C10 3.45 9.80417 2.97917 9.4125 2.5875C9.02083 2.19583 8.55 2 8 2C7.45 2 6.97917 2.19583 6.5875 2.5875C6.19583 2.97917 6 3.45 6 4C6 4.55 6.19583 5.02083 6.5875 5.4125C6.97917 5.80417 7.45 6 8 6Z"
+ />
+ </svg>
+ </dt>
+ <dd>posthansi77</dd>
+ </div>
+ </dl>
+ </div>
+
+ <div class="flex-1 basis-1/2">
+ <h4 class="sr-only">Zuständige Stellen</h4>
+ <ul class="list-outside list-disc pl-4 text-base">
+ <li>Amt für Finanzwirtschaft</li>
+ <li>Amt für Planwirtschaft</li>
+ </ul>
+ </div>
+ </a>
+ </li>
+ </ul>
+ </div>
+
<div class="my-5">
<ods-instant-search
headerText="In der OZG-Cloud"
@@ -34,21 +253,12 @@
loadingCaption="Mein_Bescheid.pdf wird heruntergeladen..."
>
</ods-attachment>
- <ods-attachment caption="Mein_Bescheid.xml" description="234 kB" fileType="xml">
- </ods-attachment>
- <ods-attachment caption="Mein_Bescheid.xml" description="234 kB" fileType="image">
- </ods-attachment>
- <ods-attachment caption="Mein_Bescheid.doc" description="234 kB" fileType="doc">
- </ods-attachment>
- <ods-attachment caption="Mein_Bescheid.doc" description="234 kB" fileType="doc">
- </ods-attachment>
- <ods-attachment caption="Mein_Bescheid.doc" description="234 kB" fileType="exclamation">
- </ods-attachment>
- <ods-attachment
- caption="Katzenanmeldung_1231231_eingsdfsdsdfdsfdsfsdfang.pdf"
- description="234 kB"
- fileType="pdf"
- >
+ <ods-attachment caption="Mein_Bescheid.xml" description="234 kB" fileType="xml"> </ods-attachment>
+ <ods-attachment caption="Mein_Bescheid.xml" description="234 kB" fileType="image"> </ods-attachment>
+ <ods-attachment caption="Mein_Bescheid.doc" description="234 kB" fileType="doc"> </ods-attachment>
+ <ods-attachment caption="Mein_Bescheid.doc" description="234 kB" fileType="doc"> </ods-attachment>
+ <ods-attachment caption="Mein_Bescheid.doc" description="234 kB" fileType="exclamation"> </ods-attachment>
+ <ods-attachment caption="Katzenanmeldung_1231231_eingsdfsdsdfdsfdsfsdfang.pdf" description="234 kB" fileType="pdf">
</ods-attachment>
</ods-attachment-wrapper>
</div>
@@ -58,11 +268,7 @@
<ods-fieldset legend="Checkboxes!" name="Checkboxes group">
<ods-checkbox label="Brand new checkbox" inputId="chckbx1" />
<ods-checkbox label="Disabled checkbox" inputId="chckbx2" [disabled]="true" />
- <ods-checkbox
- label="Checkbox with error"
- inputId="chckbx3"
- [fieldControl]="checkboxControl"
- />
+ <ods-checkbox label="Checkbox with error" inputId="chckbx3" [hasError]="true" />
</ods-fieldset>
</div>
<div class="my-4">
@@ -79,12 +285,7 @@
</ods-textarea>
</div>
<div class="my-4">
- <ods-text-input
- id="test-input-id"
- label="Betreff"
- placeholder="Betreff hier eingeben"
- variant="error"
- >
+ <ods-text-input id="test-input-id" label="Betreff" placeholder="Betreff hier eingeben" variant="error">
<ods-error-message text="Betreff fehlt"></ods-error-message
></ods-text-input>
</div>
@@ -102,20 +303,10 @@
</div>
<div class="my-10 flex gap-8">
- <ods-radio-button-card
- label="bewilligt"
- name="exampleName"
- value="bewilligt"
- variant="bescheid_bewilligt"
- >
+ <ods-radio-button-card label="bewilligt" name="exampleName" value="bewilligt" variant="bescheid_bewilligt">
<ods-stamp-icon />
</ods-radio-button-card>
- <ods-radio-button-card
- label="abgelehnt"
- name="exampleName"
- value="abgelehnt"
- variant="bescheid_abgelehnt"
- >
+ <ods-radio-button-card label="abgelehnt" name="exampleName" value="abgelehnt" variant="bescheid_abgelehnt">
<ods-close-icon class="fill-abgelehnt" size="large" />
</ods-radio-button-card>
</div>
@@ -156,8 +347,8 @@
<cdk-step>
<div class="mb-4">Antrag bescheiden</div>
<p>
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
- invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
+ magna aliquyam erat, sed diam voluptua.
</p>
</cdk-step>
<cdk-step>
@@ -168,34 +359,19 @@
<hr />
<div class="flex flex-col gap-4 bg-background-200 p-6">
<div class="mt-4">
- <ods-button-card
- class="w-72"
- [isLoading]="false"
- text="Bescheiddokument"
- subText="automatisch erstellen"
- >
+ <ods-button-card class="w-72" [isLoading]="false" text="Bescheiddokument" subText="automatisch erstellen">
<ods-bescheid-generate-icon icon />
<ods-spinner-icon spinner size="extra-large" />
</ods-button-card>
</div>
<div class="mt-4">
- <ods-button-card
- class="w-72"
- [isLoading]="true"
- text="Bescheiddokument"
- subText="automatisch erstellen"
- >
+ <ods-button-card class="w-72" [isLoading]="true" text="Bescheiddokument" subText="automatisch erstellen">
<ods-bescheid-generate-icon icon />
<ods-spinner-icon spinner size="extra-large" />
</ods-button-card>
</div>
<div class="mt-4">
- <ods-button-card
- class="w-72"
- [isLoading]="true"
- text="Bescheiddokument"
- subText="automatisch erstellen"
- >
+ <ods-button-card class="w-72" [isLoading]="true" text="Bescheiddokument" subText="automatisch erstellen">
<ods-bescheid-generate-icon icon />
</ods-button-card>
</div>
diff --git a/alfa-client/apps/demo/src/app/app.component.ts b/alfa-client/apps/demo/src/app/app.component.ts
index fe9bea7b9e284ee8c47c36bb051a6e682f991b84..d2ac3257386258a3bd111f893c0afc1616c666cc 100644
--- a/alfa-client/apps/demo/src/app/app.component.ts
+++ b/alfa-client/apps/demo/src/app/app.component.ts
@@ -105,7 +105,6 @@ export class AppComponent {
},
];
instantSearchFormControl = new FormControl(EMPTY_STRING);
- checkboxControl = new FormControl(false);
getInstantSearchResults() {
if (this.instantSearchFormControl.value.length < 2) return [];
@@ -132,7 +131,6 @@ export class AppComponent {
effect(() => {
window.localStorage.setItem('darkMode', JSON.stringify(this.darkMode()));
});
- this.checkboxControl.setErrors({ 1: 'error' });
}
public onSearchQueryChanged(searchQuery: InstantSearchQuery) {
diff --git a/alfa-client/libs/design-component/src/index.ts b/alfa-client/libs/design-component/src/index.ts
index 0ed0ab64368e0b3716f3ed6b1ab8d7da0a6fc2d7..bca590ff4ddaf77cdc1803ca1d79c9ca43a94017 100644
--- a/alfa-client/libs/design-component/src/index.ts
+++ b/alfa-client/libs/design-component/src/index.ts
@@ -1,5 +1,6 @@
export * from './lib/button-with-spinner/button-with-spinner.component';
export * from './lib/download-button/download-button.component';
+export * from './lib/form/checkbox-editor/checkbox-editor.component';
export * from './lib/form/file-upload-editor/file-upload-editor.component';
export * from './lib/form/formcontrol-editor.abstract.component';
export * from './lib/form/single-file-upload-editor/single-file-upload-editor.component';
diff --git a/alfa-client/libs/design-component/src/lib/form/checkbox-editor/checkbox-editor.component.html b/alfa-client/libs/design-component/src/lib/form/checkbox-editor/checkbox-editor.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..aecfd7e8dcaf39151ce1772d111f06068feb5c45
--- /dev/null
+++ b/alfa-client/libs/design-component/src/lib/form/checkbox-editor/checkbox-editor.component.html
@@ -0,0 +1,15 @@
+<ods-checkbox
+ [fieldControl]="fieldControl"
+ [value]="value"
+ [inputId]="inputId"
+ [label]="label"
+ [disabled]="disabled"
+ [hasError]="hasError"
+>
+ <ods-validation-error
+ error
+ [invalidParams]="invalidParams"
+ [label]="label"
+ [attr.data-test-id]="(label | convertForDataTest) + '-checkbox-editor-error'"
+ />
+</ods-checkbox>
diff --git a/alfa-client/libs/design-component/src/lib/form/checkbox-editor/checkbox-editor.component.spec.ts b/alfa-client/libs/design-component/src/lib/form/checkbox-editor/checkbox-editor.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2cff2f63826817810bd0a55ff6c8dc3f84b5eb31
--- /dev/null
+++ b/alfa-client/libs/design-component/src/lib/form/checkbox-editor/checkbox-editor.component.spec.ts
@@ -0,0 +1,68 @@
+import { getElementFromFixture } from '@alfa-client/test-utils';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import faker from '@faker-js/faker';
+import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
+import { createInvalidParam } from 'libs/tech-shared/test/error';
+import { CheckboxEditorComponent } from './checkbox-editor.component';
+
+describe('CheckboxEditorComponent', () => {
+ let component: CheckboxEditorComponent;
+ let fixture: ComponentFixture<CheckboxEditorComponent>;
+
+ const labelText: string = faker.word.noun();
+ const errorMessageId: string = getDataTestIdOf(labelText + '-checkbox-editor-error');
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [CheckboxEditorComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(CheckboxEditorComponent);
+ component = fixture.componentInstance;
+ component.label = labelText;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ describe('component', () => {
+ describe('hasError', () => {
+ it('should return true', () => {
+ component.fieldControl.setErrors({ 1: createInvalidParam() });
+
+ const result: boolean = component.hasError;
+
+ expect(result).toBe(true);
+ });
+
+ it('should return false', () => {
+ component.fieldControl.setErrors(null);
+
+ const result: boolean = component.hasError;
+
+ expect(result).toBe(false);
+ });
+ });
+ });
+
+ describe('template', () => {
+ describe('error message', () => {
+ it('should show', () => {
+ component.fieldControl.setErrors({ 1: createInvalidParam() });
+ fixture.detectChanges();
+
+ const element: HTMLElement = getElementFromFixture(fixture, errorMessageId);
+
+ expect(element).not.toBeEmptyDOMElement();
+ });
+
+ it('should hide', () => {
+ const element: HTMLElement = getElementFromFixture(fixture, errorMessageId);
+
+ expect(element).toBeEmptyDOMElement();
+ });
+ });
+ });
+});
diff --git a/alfa-client/libs/design-component/src/lib/form/checkbox-editor/checkbox-editor.component.ts b/alfa-client/libs/design-component/src/lib/form/checkbox-editor/checkbox-editor.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4ed5d7b07e60146f9a3dc471563c855466d888d7
--- /dev/null
+++ b/alfa-client/libs/design-component/src/lib/form/checkbox-editor/checkbox-editor.component.ts
@@ -0,0 +1,22 @@
+import { TechSharedModule } from '@alfa-client/tech-shared';
+import { Component, Input } from '@angular/core';
+import { CheckboxComponent } from '@ods/system';
+import { FormControlEditorAbstractComponent } from '../formcontrol-editor.abstract.component';
+import { ValidationErrorComponent } from '../validation-error/validation-error.component';
+
+@Component({
+ selector: 'ods-checkbox-editor',
+ standalone: true,
+ imports: [CheckboxComponent, ValidationErrorComponent, TechSharedModule],
+ templateUrl: './checkbox-editor.component.html',
+})
+export class CheckboxEditorComponent extends FormControlEditorAbstractComponent {
+ @Input() value: string;
+ @Input() inputId: string;
+ @Input() label: string;
+ @Input() disabled: boolean = false;
+
+ get hasError(): boolean {
+ return this.invalidParams.length > 0;
+ }
+}
diff --git a/alfa-client/libs/design-system/src/index.ts b/alfa-client/libs/design-system/src/index.ts
index 117e400441f35a9a21750521457c1c7537a808d0..e3b231848785cf80bd379be9748b58e9dbd4fdd1 100644
--- a/alfa-client/libs/design-system/src/index.ts
+++ b/alfa-client/libs/design-system/src/index.ts
@@ -5,9 +5,9 @@ export * from './lib/bescheid-status-text/bescheid-status-text.component';
export * from './lib/bescheid-wrapper/bescheid-wrapper.component';
export * from './lib/button-card/button-card.component';
export * from './lib/button/button.component';
-export * from './lib/checkbox/checkbox.component';
-export * from './lib/fieldset/fieldset.component';
+export * from './lib/form/checkbox/checkbox.component';
export * from './lib/form/error-message/error-message.component';
+export * from './lib/form/fieldset/fieldset.component';
export * from './lib/form/file-upload-button/file-upload-button.component';
export * from './lib/form/radio-button-card/radio-button-card.component';
export * from './lib/form/text-input/text-input.component';
diff --git a/alfa-client/libs/design-system/src/lib/checkbox/checkbox.component.spec.ts b/alfa-client/libs/design-system/src/lib/checkbox/checkbox.component.spec.ts
deleted file mode 100644
index c25c5efdcce199e3c83dfd6adfceed567f2ea5d3..0000000000000000000000000000000000000000
--- a/alfa-client/libs/design-system/src/lib/checkbox/checkbox.component.spec.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormControl } from '@angular/forms';
-import { CheckboxComponent } from './checkbox.component';
-
-describe('CheckboxComponent', () => {
- let component: CheckboxComponent;
- let fixture: ComponentFixture<CheckboxComponent>;
-
- beforeEach(async () => {
- await TestBed.configureTestingModule({
- imports: [CheckboxComponent],
- }).compileComponents();
-
- fixture = TestBed.createComponent(CheckboxComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-
- describe('component', () => {
- describe('hasError', () => {
- it('should return true', () => {
- const formControlWithError = new FormControl(false);
- formControlWithError.setErrors({ 1: 'error' });
- component.fieldControl = formControlWithError;
-
- const result: boolean = component.hasError();
-
- expect(result).toBe(true);
- });
-
- it('should return false', () => {
- const formControl = new FormControl(false);
- component.fieldControl = formControl;
-
- const result: boolean = component.hasError();
-
- expect(result).toBe(false);
- });
- });
- });
-});
diff --git a/alfa-client/libs/design-system/src/lib/checkbox/checkbox.component.ts b/alfa-client/libs/design-system/src/lib/checkbox/checkbox.component.ts
deleted file mode 100644
index 8a6ebfc41ac9fa2903387a0474510f080a3ec306..0000000000000000000000000000000000000000
--- a/alfa-client/libs/design-system/src/lib/checkbox/checkbox.component.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { isNotEmpty } from '@alfa-client/tech-shared';
-import { CommonModule } from '@angular/common';
-import { Component, Input } from '@angular/core';
-import { FormControl, ReactiveFormsModule } from '@angular/forms';
-
-@Component({
- selector: 'ods-checkbox',
- standalone: true,
- imports: [CommonModule, ReactiveFormsModule],
- template: `
- <div class="flex items-start gap-3 text-start">
- <input
- type="checkbox"
- class="peer relative box-border size-5 shrink-0 appearance-none rounded-sm border bg-whitetext
- outline outline-2 outline-offset-2 outline-transparent hover:border-2 focus-visible:border-background-200
- disabled:border-disabled-dark disabled:bg-disabled disabled:hover:border"
- [ngClass]="
- hasError() ?
- 'border-error hover:border-error focus-visible:outline-error'
- : 'border-primary hover:border-primary-hover focus-visible:outline-focus'
- "
- [value]="value"
- [checked]="fieldControl.value"
- [attr.id]="inputId"
- [disabled]="disabled"
- />
- <label class="leading-5 text-text" [attr.for]="inputId">{{ label }}</label>
- <svg
- viewBox="0 0 12 9"
- xmlns="http://www.w3.org/2000/svg"
- class="pointer-events-none absolute hidden size-5 p-1 outline-none peer-checked:block"
- [ngClass]="hasError() ? 'fill-error' : 'fill-primary focus-visible:fill-focus'"
- >
- <path
- d="M3.81353 7.10067L0.968732 4.30201L0 5.24832L3.81353
- 9L12 0.946309L11.0381 0L3.81353 7.10067Z"
- />
- </svg>
- </div>
- `,
-})
-export class CheckboxComponent {
- @Input() fieldControl: FormControl = new FormControl(false);
- @Input() value: string;
- @Input() inputId: string;
- @Input() label: string;
- @Input() disabled: boolean = false;
-
- hasError(): boolean {
- return isNotEmpty(this.fieldControl.errors);
- }
-}
diff --git a/alfa-client/libs/design-system/src/lib/form/checkbox/checkbox.component.spec.ts b/alfa-client/libs/design-system/src/lib/form/checkbox/checkbox.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..dc95166356c3d5f8f1f27b184b6ac32ff68602ee
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/form/checkbox/checkbox.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CheckboxComponent } from './checkbox.component';
+
+describe('CheckboxComponent', () => {
+ let component: CheckboxComponent;
+ let fixture: ComponentFixture<CheckboxComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [CheckboxComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(CheckboxComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/alfa-client/libs/design-system/src/lib/form/checkbox/checkbox.component.ts b/alfa-client/libs/design-system/src/lib/form/checkbox/checkbox.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9cab0abad5aa6845f9a6f622fa7bfde8ca3d35ec
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/form/checkbox/checkbox.component.ts
@@ -0,0 +1,51 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+
+@Component({
+ selector: 'ods-checkbox',
+ standalone: true,
+ imports: [CommonModule, ReactiveFormsModule],
+ template: `
+ <div>
+ <div class="flex items-start gap-3 text-start">
+ <input
+ type="checkbox"
+ class="disabled:border-disabled-dark disabled:bg-disabled peer relative box-border size-5 shrink-0 appearance-none rounded-sm
+ border bg-whitetext outline outline-2 outline-offset-2 outline-transparent
+ hover:border-2 focus-visible:border-background-200 disabled:hover:border"
+ [ngClass]="
+ hasError ?
+ 'border-error hover:border-error focus-visible:outline-error'
+ : 'border-primary hover:border-primary-hover focus-visible:outline-focus'
+ "
+ [value]="value"
+ [checked]="fieldControl.value"
+ [attr.id]="inputId"
+ [disabled]="disabled"
+ />
+ <label class="leading-5 text-text" [attr.for]="inputId">{{ label }}</label>
+ <svg
+ viewBox="0 0 12 9"
+ xmlns="http://www.w3.org/2000/svg"
+ class="pointer-events-none absolute hidden size-5 p-1 outline-none peer-checked:block"
+ [ngClass]="hasError ? 'fill-error' : 'fill-primary focus-visible:fill-focus'"
+ >
+ <path
+ d="M3.81353 7.10067L0.968732 4.30201L0 5.24832L3.81353
+ 9L12 0.946309L11.0381 0L3.81353 7.10067Z"
+ />
+ </svg>
+ </div>
+ <ng-content select="[error]" />
+ </div>
+ `,
+})
+export class CheckboxComponent {
+ @Input() fieldControl: FormControl = new FormControl(false);
+ @Input() value: string;
+ @Input() inputId: string;
+ @Input() label: string;
+ @Input() disabled: boolean = false;
+ @Input() hasError: boolean = false;
+}
diff --git a/alfa-client/libs/design-system/src/lib/checkbox/checbox.stories.ts b/alfa-client/libs/design-system/src/lib/form/checkbox/checkbox.stories.ts
similarity index 93%
rename from alfa-client/libs/design-system/src/lib/checkbox/checbox.stories.ts
rename to alfa-client/libs/design-system/src/lib/form/checkbox/checkbox.stories.ts
index 2b3954527bc86c75615e36839194754fce3466ef..ce8dd243e62d68c65d58f4298744e5ded9ebedf6 100644
--- a/alfa-client/libs/design-system/src/lib/checkbox/checbox.stories.ts
+++ b/alfa-client/libs/design-system/src/lib/form/checkbox/checkbox.stories.ts
@@ -26,12 +26,14 @@ export const Default: Story = {
label: 'Basic checkbox',
inputId: '1',
disabled: false,
+ hasError: false,
},
argTypes: {
label: { description: 'Checkbox label' },
disabled: { description: 'Disabled state of checkbox' },
inputId: { description: 'Id of checkbox input' },
value: { description: 'Value of checkbox' },
+ hasError: { description: 'Has checkbox the error state' },
fieldControl: {
description: 'Form control object',
table: { type: { summary: 'FormControl' } },
@@ -43,7 +45,7 @@ export const Error: Story = {
args: {
label: 'Checkbox with error state',
inputId: '2',
- fieldControl: formControlWithError,
+ hasError: true,
},
};
diff --git a/alfa-client/libs/design-system/src/lib/fieldset/fieldset.component.spec.ts b/alfa-client/libs/design-system/src/lib/form/fieldset/fieldset.component.spec.ts
similarity index 100%
rename from alfa-client/libs/design-system/src/lib/fieldset/fieldset.component.spec.ts
rename to alfa-client/libs/design-system/src/lib/form/fieldset/fieldset.component.spec.ts
diff --git a/alfa-client/libs/design-system/src/lib/fieldset/fieldset.component.ts b/alfa-client/libs/design-system/src/lib/form/fieldset/fieldset.component.ts
similarity index 100%
rename from alfa-client/libs/design-system/src/lib/fieldset/fieldset.component.ts
rename to alfa-client/libs/design-system/src/lib/form/fieldset/fieldset.component.ts
diff --git a/alfa-client/libs/design-system/src/lib/fieldset/fieldset.stories.ts b/alfa-client/libs/design-system/src/lib/form/fieldset/fieldset.stories.ts
similarity index 100%
rename from alfa-client/libs/design-system/src/lib/fieldset/fieldset.stories.ts
rename to alfa-client/libs/design-system/src/lib/form/fieldset/fieldset.stories.ts