Update mdc form components

client/src/app/infrastructure/utils/dialog-settings.ts

@@ -14,10 +14,10 @@ export const largeDialogSettings = {
 
 /**
  * Settings to display a medium dialog.
- * `width='750px'`
+ * `width='804px'`
  */
 export const mediumDialogSettings = {
-    width: `750px`,
+    width: `804px`,
     ...generalSettings
 };
 

client/src/app/site/modules/user-components/components/user-detail-view/user-detail-view.component.html

@@ -50,50 +50,43 @@ <h2>{{ 'Personal information' | translate }}</h2>
         <div class="personal-info-area">
             <!-- Title -->
             <mat-form-field class="form16 force-min-width">
-                <input type="text" matInput placeholder="{{ 'Title' | translate }}" formControlName="title" />
+                <mat-label>{{ 'Title' | translate }}</mat-label>
+                <input type="text" matInput formControlName="title" />
             </mat-form-field>
             <!-- First name -->
             <mat-form-field class="form37 force-min-width">
-                <input
-                    type="text"
-                    osAutofocus
-                    matInput
-                    placeholder="{{ 'Given name' | translate }}"
-                    formControlName="first_name"
-                />
+                <mat-label>{{ 'Given name' | translate }}</mat-label>
+                <input type="text" osAutofocus matInput formControlName="first_name" />
             </mat-form-field>
 
             <!-- Last name -->
             <mat-form-field class="form37 force-min-width">
-                <input type="text" matInput placeholder="{{ 'Surname' | translate }}" formControlName="last_name" />
+                <mat-label>{{ 'Surname' | translate }}</mat-label>
+                <input type="text" matInput formControlName="last_name" />
             </mat-form-field>
         </div>
 
         <div class="personal-info-area">
             <!-- E-Mail -->
             <mat-form-field class="width-58p force-min-width">
-                <input
-                    type="email"
-                    matInput
-                    autocomplete="off"
-                    placeholder="{{ 'Email' | translate }}"
-                    name="email"
-                    formControlName="email"
-                />
+                <mat-label>{{ 'Email' | translate }}</mat-label>
+                <input type="email" matInput autocomplete="off" name="email" formControlName="email" />
                 <mat-error *ngIf="personalInfoForm.get('email')?.hasError('email')">
                     {{ 'Please enter a valid email address!' | translate }}
                 </mat-error>
             </mat-form-field>
 
             <!-- Pronoun -->
             <mat-form-field class="width-16p force-min-width">
-                <input type="text" matInput placeholder="{{ 'Pronoun' | translate }}" formControlName="pronoun" />
+                <mat-label>{{ 'Pronoun' | translate }}</mat-label>
+                <input type="text" matInput formControlName="pronoun" />
                 <mat-error>{{ 'max. 32 characters allowed' | translate }}</mat-error>
             </mat-form-field>
 
             <!-- Gender -->
             <mat-form-field class="width-16p force-min-width">
-                <mat-select placeholder="{{ 'Gender' | translate }}" formControlName="gender">
+                <mat-label>{{ 'Gender' | translate }}</mat-label>
+                <mat-select formControlName="gender">
                     <mat-option [value]="null">-</mat-option>
                     <mat-option *ngFor="let gender of genders" [value]="gender">
                         {{ gender | translate }}
@@ -105,7 +98,8 @@ <h2>{{ 'Personal information' | translate }}</h2>
         <!-- username -->
         <div *ngIf="isAllowed('seePersonal')">
             <mat-form-field class="full-width">
-                <input type="text" matInput placeholder="{{ 'Username' | translate }}" formControlName="username" />
+                <mat-label>{{ 'Username' | translate }}</mat-label>
+                <input type="text" matInput formControlName="username" />
                 <button
                     *ngIf="isNewUser"
                     matSuffix
@@ -124,12 +118,8 @@ <h2>{{ 'Personal information' | translate }}</h2>
         <div *ngIf="isAllowed('manage') && !user?.saml_id">
             <!-- Initial Password -->
             <mat-form-field class="full-width">
-                <input
-                    matInput
-                    autocomplete="off"
-                    placeholder="{{ 'Initial password' | translate }}"
-                    formControlName="default_password"
-                />
+                <mat-label>{{ 'Initial password' | translate }}</mat-label>
+                <input matInput autocomplete="off" formControlName="default_password" />
                 <button
                     *ngIf="isNewUser && generatePasswordFn"
                     matSuffix

client/src/app/site/modules/user-components/components/user-password-form/user-password-form.component.html

@@ -17,13 +17,8 @@ <h1>
         <br />
         <form [formGroup]="adminPasswordForm" (keydown)="onKeyDown($event)">
             <mat-form-field>
-                <input
-                    [type]="hidePassword ? 'password' : 'text'"
-                    matInput
-                    formControlName="newPassword"
-                    placeholder="{{ 'New password' | translate }}"
-                    required
-                />
+                <mat-label>{{ 'New password' | translate }}</mat-label>
+                <input [type]="hidePassword ? 'password' : 'text'" matInput formControlName="newPassword" required />
                 <mat-icon
                     class="pointer"
                     matSuffix

client/src/app/site/modules/user-components/user-components.module.ts

@@ -3,15 +3,15 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatDividerModule } from '@angular/material/divider';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
 import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatSelectModule } from '@angular/material/select';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { IconContainerModule } from 'src/app/ui/modules/icon-container';
 

client/src/app/site/pages/login/pages/login-mask/components/login-mask/login-mask.component.html

@@ -62,22 +62,16 @@ <h1 *ngIf="observables.organization && !observables.meeting">
 <ng-template #loginform let-showExtra="showExtra">
     <form [formGroup]="loginForm" [ngClass]="{ 'login-container': showExtra }" (ngSubmit)="formLogin()">
         <mat-form-field>
-            <input
-                matInput
-                osAutofocus
-                required
-                data-cy="loginUsernameInput"
-                placeholder="{{ 'Username' | translate }}"
-                formControlName="username"
-            />
+            <mat-label>{{ 'Username' | translate }}</mat-label>
+            <input matInput osAutofocus required data-cy="loginUsernameInput" formControlName="username" />
         </mat-form-field>
         <br />
         <mat-form-field>
+            <mat-label>{{ 'Password' | translate }}</mat-label>
             <input
                 matInput
                 required
                 data-cy="loginPasswordInput"
-                placeholder="{{ 'Password' | translate }}"
                 formControlName="password"
                 [type]="!hide ? 'password' : 'text'"
             />

client/src/app/site/pages/login/pages/login-mask/login-mask.module.ts

@@ -2,11 +2,11 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatExpansionModule } from '@angular/material/expansion';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
 import { OpenSlidesTranslationModule } from 'src/app/site/modules/translations';
 import { DirectivesModule } from 'src/app/ui/directives';
 import { SpinnerModule } from 'src/app/ui/modules/spinner';

client/src/app/site/pages/login/pages/reset-password-confirm/components/reset-password-confirm/reset-password-confirm.component.html

@@ -2,14 +2,8 @@
     <form [formGroup]="newPasswordForm" (ngSubmit)="submitNewPassword()" autocomplete="off">
         <h3>{{ 'Please enter your new password' | translate }}</h3>
         <mat-form-field>
-            <input
-                matInput
-                autocomplete="off"
-                required
-                placeholder="{{ 'New password' | translate }}"
-                formControlName="password"
-                type="password"
-            />
+            <mat-label>{{ 'New password' | translate }}</mat-label>
+            <input matInput autocomplete="off" required formControlName="password" type="password" />
             <mat-error *ngIf="newPasswordForm.get('password')?.hasError('required')">
                 {{ 'A password is required' | translate }}
             </mat-error>

client/src/app/site/pages/login/pages/reset-password-confirm/reset-password-confirm.module.ts

@@ -1,9 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
 import { OpenSlidesTranslationModule } from 'src/app/site/modules/translations';
 
 import { ResetPasswordConfirmComponent } from './components/reset-password-confirm/reset-password-confirm.component';

client/src/app/site/pages/login/pages/reset-password/components/reset-password/reset-password.component.html

@@ -2,15 +2,8 @@
     <form [formGroup]="resetPasswordForm" (ngSubmit)="resetPassword()" autocomplete="off">
         <h3>{{ 'Enter your email to send the password reset link' | translate }}</h3>
         <mat-form-field>
-            <input
-                matInput
-                osAutofocus
-                required
-                placeholder="{{ 'Email' | translate }}"
-                formControlName="email"
-                type="email"
-                autocomplete="off"
-            />
+            <mat-label>{{ 'Email' | translate }}</mat-label>
+            <input matInput osAutofocus required formControlName="email" type="email" autocomplete="off" />
             <mat-error *ngIf="resetPasswordForm.get('email')?.invalid">
                 {{ 'Please enter a valid email address!' | translate }}
             </mat-error>

client/src/app/site/pages/login/pages/reset-password/reset-password.module.ts

@@ -1,9 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
 import { OpenSlidesTranslationModule } from 'src/app/site/modules/translations';
 import { DirectivesModule } from 'src/app/ui/directives';
 

client/src/app/site/pages/meetings/modules/list-of-speakers-content/list-of-speakers-content.module.ts

@@ -2,10 +2,10 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatExpansionModule } from '@angular/material/expansion';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
 import { MatLegacyListModule as MatListModule } from '@angular/material/legacy-list';
 import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
 import { MatTooltipModule } from '@angular/material/tooltip';

client/src/app/site/pages/meetings/modules/list-of-speakers-content/modules/point-of-order-dialog/components/point-of-order-dialog/point-of-order-dialog.component.scss

@@ -1,6 +1,6 @@
 .edit-form {
     width: 100%;
-    .mat-form-field {
+    .mat-mdc-form-field {
         width: 100%;
     }
 }

client/src/app/site/pages/meetings/modules/list-of-speakers-content/modules/point-of-order-dialog/point-of-order-dialog.module.ts

@@ -1,11 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatSelectModule } from '@angular/material/select';
 import { OpenSlidesTranslationModule } from 'src/app/site/modules/translations';
 
 import { PointOfOrderDialogComponent } from './components/point-of-order-dialog/point-of-order-dialog.component';

client/src/app/site/pages/meetings/modules/meetings-component-collector/agenda-content-object-form/agenda-content-object-form.module.ts

@@ -1,9 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatSelectModule } from '@angular/material/select';
 import { OpenSlidesTranslationModule } from 'src/app/site/modules/translations';
 import { DirectivesModule } from 'src/app/ui/directives';
 import { SearchSelectorModule } from 'src/app/ui/modules/search-selector';

client/src/app/site/pages/meetings/modules/meetings-component-collector/agenda-content-object-form/components/agenda-content-object-form/agenda-content-object-form.component.html

@@ -12,7 +12,8 @@
             <!-- Visibility -->
             <div>
                 <mat-form-field [formGroup]="form">
-                    <mat-select formControlName="agenda_type" placeholder="{{ 'Agenda visibility' | translate }}">
+                    <mat-label>{{ 'Agenda visibility' | translate }}</mat-label>
+                    <mat-select formControlName="agenda_type">
                         <mat-option *ngFor="let type of itemVisibilityChoices" [value]="type.key">
                             <span>{{ type.name | translate }}</span>
                         </mat-option>
@@ -23,11 +24,11 @@
             <!-- Parent item -->
             <div *ngIf="hasItemsObservable | async" [formGroup]="form">
                 <mat-form-field>
+                    <mat-label>{{ 'Parent agenda item' | translate }}</mat-label>
                     <os-list-search-selector
                         formControlName="agenda_parent_id"
                         [multiple]="false"
                         [includeNone]="true"
-                        placeholder="{{ 'Parent agenda item' | translate }}"
                         [inputListValues]="itemObserver"
                     ></os-list-search-selector>
                 </mat-form-field>

client/src/app/site/pages/meetings/modules/meetings-component-collector/attachment-control/attachment-control.module.ts

@@ -1,9 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
 import { OpenSlidesTranslationModule } from 'src/app/site/modules/translations';
 import { DirectivesModule } from 'src/app/ui/directives';
 import { MediaUploadContentModule } from 'src/app/ui/modules/media-upload-content/media-upload-content.module';

client/src/app/site/pages/meetings/modules/meetings-component-collector/attachment-control/components/attachment-control/attachment-control.component.html

@@ -1,10 +1,10 @@
 <div class="attachment-container" *ngIf="contentForm">
     <form [formGroup]="formGroup">
         <mat-form-field>
+            <mat-label>{{ 'Attachments' | translate }}</mat-label>
             <os-repo-search-selector
                 class="selector"
                 [multiple]="true"
-                placeholder="{{ 'Attachments' | translate }}"
                 formControlName="mediafile_ids"
                 [repo]="repo"
                 [pipeFn]="getMediafilesPipeFn()"
@@ -34,11 +34,11 @@ <h1 mat-dialog-title>
     >
         <div *osScrollingTableCell="'access_groups'; row as file" class="cell-slot">
             <form [formGroup]="file.form">
-                <mat-form-field>
+                <mat-form-field subscriptSizing="dynamic">
+                    <mat-label>{{ 'Access groups' | translate }}</mat-label>
                     <os-list-search-selector
                         formControlName="access_group_ids"
                         [multiple]="true"
-                        placeholder="{{ 'Access groups' | translate }}"
                         [inputListValues]="availableGroups"
                     ></os-list-search-selector>
                 </mat-form-field>

client/src/app/site/pages/meetings/modules/participant-search-selector/components/participant-search-selector/participant-search-selector.component.html

@@ -1,11 +1,11 @@
 <form [formGroup]="usersForm">
     <mat-form-field class="search-users-field full-width">
+        <mat-label>{{ placeholder }}</mat-label>
         <os-list-search-selector
             class="search-users"
             formControlName="userId"
             [excludeIds]="true"
             [multiple]="false"
-            placeholder="{{ placeholder | translate }}"
             [inputListValues]="filteredUsersSubject"
             [sortFn]="false"
             (clickNotFound)="createNewSelectedUser($event)"

client/src/app/site/pages/meetings/modules/participant-search-selector/components/participant-search-selector/participant-search-selector.component.scss

@@ -4,7 +4,7 @@
     .search-users {
         display: grid;
 
-        .mat-form-field {
+        .mat-mdc-form-field {
             width: 100%;
         }
     }

client/src/app/site/pages/meetings/modules/participant-search-selector/participant-search-selector.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
 import { OpenSlidesTranslationModule } from 'src/app/site/modules/translations';
 import { DirectivesModule } from 'src/app/ui/directives';
 import { SearchSelectorModule } from 'src/app/ui/modules/search-selector';