Merge pull request 'OZG-4527 fix layout and form validation' (#386) from...

Merge pull request 'OZG-4527 fix layout and form validation' (#386) from OZG-4527-aktenzeichen-manuell-eingeben-form-errors into master

Reviewed-on: https://git.ozg-sh.de/ozgcloud-app/alfa/pulls/386


Reviewed-by: OZGCloud <ozgcloud@mgm-tp.com>

alfa-client/libs/ui/src/lib/ui/editor/text-editor/text-editor.component.html

@@ -23,7 +23,7 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<mat-form-field class="compact-input" appearance="{{appearance}}" [floatLabel]="readOnly || autoFocus ? 'always' : 'auto'">
+<mat-form-field [subscriptSizing]="subscriptSizing" class="compact-input" appearance="{{appearance}}" [floatLabel]="readOnly || autoFocus ? 'always' : 'auto'">
 	<mat-label>{{ label }}</mat-label>
 	<div class="wrapper">
 		<input #inputElement
@@ -34,7 +34,8 @@
 			   [readonly]="readOnly"
 			   (blur)="touch()"
 			   [attr.data-test-id]="(label | convertForDataTest) + '-text-input'"
-			   [class.with-clear-button]="showClearButton$ | async"/>
+			   [class.with-clear-button]="showClearButton$ | async"
+		/>
 		<button *ngIf="showClearButton$ | async"
 				data-test-id="clear-button"
 				class="clear-button"

alfa-client/libs/ui/src/lib/ui/editor/text-editor/text-editor.component.spec.ts

@@ -75,4 +75,8 @@ describe('TextEditorComponent', () => {
 
 		expect(element).toBeInstanceOf(HTMLElement);
 	})
+
+	it('should use fixed subscription sizing by default', () => {
+		expect(component.subscriptSizing).toBe('fixed');
+	})
 });

alfa-client/libs/ui/src/lib/ui/editor/text-editor/text-editor.component.ts

@@ -24,7 +24,8 @@
 import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
 import { FormControlEditorAbstractComponent } from '../formcontrol-editor.abstract.component';
 import { map, Observable, startWith } from 'rxjs';
-import { hasContent, isNotEmpty } from '@alfa-client/tech-shared';
+import { hasContent } from '@alfa-client/tech-shared';
+import { SubscriptSizing } from '@angular/material/form-field';
 
 @Component({
 	selector: 'ozgcloud-text-editor',
@@ -43,6 +44,7 @@ export class TextEditorComponent extends FormControlEditorAbstractComponent impl
 	@Input() readOnly: boolean;
 	@Input() autoFocus: boolean;
 	@Input() clearable = false;
+	@Input() subscriptSizing: SubscriptSizing = 'fixed';
 
 	showClearButton$: Observable<boolean>;
 

alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-edit-dialog/aktenzeichen-edit-dialog.component.html

@@ -11,6 +11,7 @@
 				[autoFocus]="true"
 				[clearable]="true"
 				appearance="outline"
+				subscriptSizing="dynamic"
 				[formControlName]="AktenzeichenEditDialogFormservice.AKTENZEICHEN_FIELD">
 			</ozgcloud-text-editor>
 			<ozgcloud-paste-text-button

alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-edit-dialog/aktenzeichen-edit-dialog.component.scss

@@ -6,10 +6,6 @@
 	::ng-deep mat-form-field {
 		width: 100%;
 	}
-
-	::ng-deep .mat-mdc-form-field-subscript-wrapper {
-		display: none;
-	}
 }
 
 .content {
@@ -17,7 +13,7 @@
 	grid-template-columns: min-content auto min-content;
 	grid-column-gap: 0.5rem;
 	grid-row-gap: 0.25rem;
-	align-items: center;
+	align-items: flex-start;
 	grid-template-areas:
 		'az_icon az_text paste_icon'
 		'. hinweis .';
@@ -26,6 +22,7 @@
 .az_icon {
 	grid-area: az_icon;
 	color: #c2c2c2;
+	margin-top: 12px;
 
 	&--active {
 		color: black;

alfa-client/libs/vorgang-detail/src/lib/aktenzeichen-edit-dialog/aktenzeichen-edit-dialog.component.ts

@@ -4,11 +4,10 @@ import { AktenzeichenEditDialogData } from './aktenzeichen-edit-dialog.data';
 import { AktenzeichenEditDialogFormservice } from './aktenzeichen-edit-dialog.formservice';
 import { VorgangService, VorgangWithEingangResource } from '@alfa-client/vorgang-shared';
 import { COMMAND_ERROR_MESSAGES, CommandResource, hasError, isSuccessfulDone } from '@alfa-client/command-shared';
-import { createEmptyStateResource, hasContent, isClipboardReadSupported, isNotNull, StateResource } from '@alfa-client/tech-shared';
-import { filter, map, Observable, of, startWith, tap } from 'rxjs';
+import { createEmptyStateResource, hasContent, isClipboardReadSupported, StateResource } from '@alfa-client/tech-shared';
+import { map, Observable, of, startWith, tap } from 'rxjs';
 import { SnackBarService } from '@alfa-client/ui';
 import { AktenzeichenEditDialogMessages } from './aktenzeichen-edit-dialog.message';
-import { trim } from 'lodash-es';
 
 @Component({
 	selector: 'alfa-aktenzeichen-edit-dialog',