Select Git revision
app.component.html
-
Alexander Reifschneider authoredAlexander Reifschneider authored
app.component.html 31.07 KiB
<!--
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.
-->
<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())">
<span *ngIf="!darkMode()" class="material-icons">dark_mode</span>
<span *ngIf="darkMode()" class="material-icons">light_mode</span>
</button>
</header>
<div class="relative flex w-full flex-auto justify-center">
<div class="w-96 bg-background-100 p-6">
<nav>NAV</nav>
</div>
<main class="flex-auto bg-background-50 p-6">
<div class="my-12">
<h1 class="mb-6 text-2xl font-semibold text-text">Buttons</h1>
<ods-button text="Organisationseinheit hinzufügen" />
<br />
<ods-button disabled="true" text="Organisationseinheit hinzufügen" />
<br />
<ods-button destructive="true" text="Organisationseinheit hinzufügen" />
<br />
<ods-button variant="outline" text="Organisationseinheit hinzufügen" />
<br />
<ods-button destructive="true" variant="outline" text="Organisationseinheit hinzufügen" /><br />
<ods-button destructive="true" disabled="true" variant="outline" text="Organisationseinheit hinzufügen" />
<br />
<ods-button variant="ghost" text="Organisationseinheit hinzufügen" />
<br />
<ods-button destructive="true" variant="ghost" text="Organisationseinheit hinzufügen" />
</div>
<div class="my-12">
<h2 class="heading-2">Icons</h2>
<div class="mb-6 flex">
<ods-icon name="account-circle" size="xxl" />
<ods-icon name="accessibility" size="extra-large" color="text" />
<ods-icon name="accessibility" size="large" color="error" />
<ods-icon name="accessibility" class="fill-red-500" />
<ods-icon name="accessibility" size="small" />
<ods-icon name="admin-logo" size="unset" />
</div>
<h1 class="mb-6 text-2xl font-semibold text-text">Auswertungen</h1>
<ods-button text="Auswertung 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-2 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 lg:gap-6"
>
<div class="flex-1">
<div class="flex flex-wrap items-center gap-x-3">
<h3 class="text-md font-semibold">Titel der Auswertung</h3>
</div>
</div>
<dl class="flex-1">
<dt class="sr-only">Formengine:</dt>
<dd>Formsolutions</dd>
<dt class="sr-only">FormID:</dt>
<dd>waffen/kleinerWaffenscheinKOPutopia</dd>
</dl>
</a>
</li>
<li>
<a
href="#"
class="flex flex-col items-start justify-between gap-2 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 lg:gap-6"
>
<div class="flex-1">
<div class="flex flex-wrap items-center gap-x-3">
<h3 class="text-md font-semibold">Auswertungstitel 2</h3>
</div>
</div>
<dl class="flex-1">
<dt class="sr-only">Formengine:</dt>
<dd>AFM / cit/Intelliform</dd>
<dt class="sr-only">FormID:</dt>
<dd>eGewerbe/eGewerbeAnmeldung</dd>
</dl>
</a>
</li>
<li>
<a
href="#"
class="flex flex-col items-start justify-between gap-2 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 lg:gap-6"
>
<div class="flex-1">
<div class="flex flex-wrap items-center gap-x-3">
<h3 class="text-md font-semibold">Titel 3</h3>
</div>
</div>
<dl class="flex-1">
<dt class="sr-only">Formengine:</dt>
<dd>dFördermittelantrag</dd>
<dt class="sr-only">FormID:</dt>
<dd>waffen/kleinerWaffenschein</dd>
</dl>
</a>
</li>
</ul>
</div>
<div class="my-12">
<h1 class="mb-6 text-2xl font-semibold text-text">Organisationseinheiten</h1>
<ods-button text="Organisationseinheit 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-2 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 lg:gap-6"
tooltip="This is tooltip attached to link element" tooltipPosition="above"
>
<div class="flex-1 basis-5/6">
<div class="flex flex-wrap items-center gap-x-3">
<h3 class="text-md font-semibold">
Amt für Digitalisierung, Breitband und Vermessung Nürnberg Außenstelle Hersbruck
</h3>
</div>
</div>
<dl class="flex-1 basis-1/6">
<dt class="sr-only">Organisations-ID:</dt>
<dd>2348328-0</dd>
</dl>
</a>
</li>
<li>
<a
href="#"
class="flex flex-col items-start justify-between gap-2 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 lg:gap-6"
>
<div class="flex-1 basis-5/6">
<div class="flex flex-wrap items-center gap-x-3">
<h3 class="text-md font-semibold">Amt für Planwirtschaft</h3>
</div>
</div>
<dl class="flex-1 basis-1/6">
<dt class="sr-only">Organisations-ID:</dt>
<dd>2348328-0</dd>
</dl>
</a>
</li>
<li>
<a
href="#"
class="flex flex-col items-start justify-between gap-2 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 lg:gap-6"
>
<div class="flex-1 basis-5/6">
<div class="flex flex-wrap items-center gap-x-3">
<h3 class="text-md font-semibold">
Landeshauptstadt Kiel - Umweltschutzamt, Untere Naturschutzbehörde (uNB), Arten- und Biotopschutz
</h3>
</div>
</div>
<dl class="flex-1 basis-1/6">
<dt class="sr-only">Organisations-ID:</dt>
<dd>1238328-0</dd>
</dl>
</a>
</li>
</ul>
</div>
<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-12">
<h1 class="mb-6 text-2xl font-semibold text-text">Tooltips</h1>
<div class="my-4 flex flex-wrap gap-4">
<ods-button text="Button with tooltip"
tooltip="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut laboreetdolorelaboreetdolorelaboreetdolorelaboreetdolorelaboreetdolorelaboreetdolorelaboreetdolorelaboreetdolorelaboreetdolorelaboreetdolorelaboreetdolorelaboreetdolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy "
/>
<ods-button
text="Button 2"
tooltip="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut"
/><ods-button
text="Button 2"
tooltip="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut"
/>
</div>
</div>
<div class="my-5">
<ods-instant-search
headerText="In der OZG-Cloud"
placeholder="zuständige Stelle suchen"
[control]="instantSearchFormControl"
[searchResults]="getInstantSearchResults()"
(searchResultSelected)="selectSearchResult($event)"
(searchQueryChanged)="onSearchQueryChanged($event)"
></ods-instant-search>
</div>
<div class="w-96">
<ods-attachment-wrapper>
<ods-attachment
caption="Mein_2Bescheid.pdf"
description="234 kB"
fileType="pdf"
isLoading="true"
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>
</ods-attachment-wrapper>
</div>
<form id="antrag_bescheiden_form" [formGroup]="exampleForm">
<div class="my-4">
<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" [hasError]="true" />
</ods-fieldset>
</div>
<div class="my-4">
<ods-text-input id="test-input-id1" label="Betreff" placeholder="Betreff hier eingeben" />
</div>
<div class="my-4">
<ods-textarea
id="messageText1"
name="messageText1"
label="Ihre Nachricht"
rows="10"
placeholder="Nachrichtentext hier eingeben"
>
</ods-textarea>
</div>
<div class="my-4">
<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>
<div class="my-4">
<ods-textarea id="messageText"
name="messageText"
label="Ihre Nachricht"
rows="10"
placeholder="Nachrichtentext hier eingeben"
variant="error"
>
<ods-error-message text="Nachrichtentext fehlt"></ods-error-message>
</ods-textarea>
</div>
<div class="my-10 flex gap-8">
<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-close-icon class="fill-abgelehnt" size="large" />
</ods-radio-button-card>
</div>
</form>
<form id="antrag_bescheiden_form" [formGroup]="saveForm" class="w-96 bg-gray-200 p-10">
<div class="flex flex-col gap-3">
<ods-radio-button-card
label="Als neue Nachricht an den Antragsteller senden"
name="saveForm"
value="send"
variant="bescheid_save"
[fullWidthText]="true"
>
<ods-send-icon />
</ods-radio-button-card>
<ods-radio-button-card
label="Nur speichern"
name="saveForm"
value="save"
variant="bescheid_save"
[fullWidthText]="true"
>
<ods-save-icon />
</ods-radio-button-card>
</div>
</form>
<app-bescheid-dialog-button></app-bescheid-dialog-button>
<div class="my-4 flex gap-4">
<ods-button text="Button 1" tooltip="Sample tooltip" />
<ods-button size="medium" [isLoading]="true" text="Button 2" />
<ods-button type="outline" text="Button 3" />
</div>
<div class="text-warning">Achtung</div>
<div class="text-primary">Achtung</div>
<hr class="mt-24" />
<div>CDK Stepper</div>
<app-custom-stepper>
<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.
</p>
</cdk-step>
<cdk-step>
<div>Dokumente hinzufügen</div>
<p>sjdkflsd sdjsdsjdlfj</p>
</cdk-step>
</app-custom-stepper>
<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-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-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-bescheid-generate-icon icon />
</ods-button-card>
</div>
<div class="mt-4">
<ods-button-card
class="w-96"
[isLoading]="true"
text="Bescheiddokument und noch mehr"
subText="Subtext in der 2ten Reihe"
>
<ods-bescheid-generate-icon icon />
</ods-button-card>
</div>
<div class="mt-4">
<ods-button-card class="w-72" [isLoading]="true" text="Bescheiddokument">
<ods-bescheid-generate-icon icon />
</ods-button-card>
</div>
<div class="mt-4">
<ods-file-upload-button class="w-72" [isLoading]="false" id="upload117" dataTestId="demo-upload-1">
<ods-bescheid-upload-icon icon />
<ods-spinner-icon spinner size="extra-large" />
<p text class="text-center">Bescheiddokument<br />hochladen</p></ods-file-upload-button
>
</div>
<div class="mt-4">
<ods-file-upload-button class="w-72" [isLoading]="true" id="upload117" dataTestId="demo-upload-2">
<ods-bescheid-upload-icon icon />
<ods-spinner-icon spinner size="extra-large" />
<p text class="text-center">Bescheiddokument<br />hochladen</p></ods-file-upload-button
>
</div>
<div class="mt-4">
<ods-file-upload-button class="w-72" [isLoading]="true" id="upload130" dataTestId="demo-upload-3">
<ods-attachment-icon icon />
<ods-spinner-icon spinner size="medium" />
<div text class="text-center">Anhang hochladen</div></ods-file-upload-button
>
</div>
</div>
<router-outlet></router-outlet>
</main>
</div>
</ng-container>