feat : add navigation to the select popup

todo: when leaving a popup get the focus on the previous selected element.

src/app/components/presentationals/main-toolbar/main-toolbar-desktop-vertical/main-toolbar-desktop-vertical.presentational.scss

@@ -95,6 +95,10 @@ dlcm-theme-selector ::ng-deep {
       background-color: $dark-grey;
     }
 
+    &.is-keybord-selected {
+      background-color: $grey;
+    }
+
 
     &.logout {
       cursor: initial;

src/app/features/admin/funding-agencies/components/routables/admin-funding-agencies-create/admin-funding-agencies-create.routable.html

-<dlcm-button-toolbar-detail [mode]="'create'"
-                            (backToListChange)="backToList()"
+<lib-empty-container solidifyShortCuts
+                     (onEscape)="backToList()"
 >
-</dlcm-button-toolbar-detail>
+  <dlcm-button-toolbar-detail [mode]="'create'"
+                              (backToListChange)="backToList()"
+  >
+  </dlcm-button-toolbar-detail>
 
-<div class="wrapper"
-     [dlcmSpinner]="isLoadingWithDependencyObs | async"
->
-  <dlcm-admin-funding-agencies-form #formPresentational
-                                    *ngIf="isReadyToBeDisplayedInCreateModeObs | async"
-                                    [listOrgUnits]="listOrgUnitsObs | async"
-                                    (submitChange)="create($event)"
-                                    (checkAvailableChange)="checkAvailable($event)"
-                                    (dirtyChange)="updateCanDeactivate($event)"
-                                    (navigate)="navigate($event)"
+  <div class="wrapper"
+       [dlcmSpinner]="isLoadingWithDependencyObs | async"
   >
-  </dlcm-admin-funding-agencies-form>
-</div>
+    <dlcm-admin-funding-agencies-form #formPresentational
+                                      *ngIf="isReadyToBeDisplayedInCreateModeObs | async"
+                                      [listOrgUnits]="listOrgUnitsObs | async"
+                                      [solidifyFocusFirstElement]="true"
+                                      (submitChange)="create($event)"
+                                      (checkAvailableChange)="checkAvailable($event)"
+                                      (dirtyChange)="updateCanDeactivate($event)"
+                                      (navigate)="navigate($event)"
+    >
+    </dlcm-admin-funding-agencies-form>
+  </div>
+</lib-empty-container>

src/app/features/admin/funding-agencies/components/routables/admin-funding-agencies-detail-edit/admin-funding-agencies-detail-edit.routable.html

-<lib-empty-container (keydown.escape)="isEdit ? backToDetail() : backToList()">
-<dlcm-shared-banner-edit-mode [isEdit]="isEdit"></dlcm-shared-banner-edit-mode>
+<lib-empty-container (keydown.escape)="isEdit ? backToDetail() : backToList()"
+                     [solidifyFocusFirstElement]="true"
+>
+  <dlcm-shared-banner-edit-mode [isEdit]="isEdit"></dlcm-shared-banner-edit-mode>
 
 
-<dlcm-button-toolbar-detail [mode]="isEdit ? 'edit' : 'detail'"
-                            [currentModel]="currentObs | async"
-                            (editChange)="edit()"
-                            (deleteChange)="delete()"
-                            (backToDetailChange)="backToDetail()"
-                            (backToListChange)="backToList()"
->
-</dlcm-button-toolbar-detail>
+  <dlcm-button-toolbar-detail [mode]="isEdit ? 'edit' : 'detail'"
+                              [currentModel]="currentObs | async"
+                              (editChange)="edit()"
+                              (deleteChange)="delete()"
+                              (backToDetailChange)="backToDetail()"
+                              (backToListChange)="backToList()"
+  >
+  </dlcm-button-toolbar-detail>
 
-<div class="wrapper"
-     [dlcmSpinner]="isLoadingWithDependencyObs | async"
->
-  <dlcm-admin-funding-agencies-form #formPresentational
-                                    *ngIf="isReadyToBeDisplayedObs | async"
-                                    [model]="currentObs| async"
-                                    [selectedOrgUnits]="selectedOrgUnitsObs | async"
-                                    [listOrgUnits]="listOrgUnitsObs | async"
-                                    [readonly]="!isEdit"
-                                    (submitChange)="update($event)"
-                                    (checkAvailableChange)="checkAvailable($event)"
-                                    (dirtyChange)="updateCanDeactivate($event)"
-                                    (navigate)="navigate($event)"
+  <div class="wrapper"
+       [dlcmSpinner]="isLoadingWithDependencyObs | async"
   >
-  </dlcm-admin-funding-agencies-form>
+    <dlcm-admin-funding-agencies-form #formPresentational
+                                      *ngIf="isReadyToBeDisplayedObs | async"
+                                      [model]="currentObs| async"
+                                      [selectedOrgUnits]="selectedOrgUnitsObs | async"
+                                      [listOrgUnits]="listOrgUnitsObs | async"
+                                      [readonly]="!isEdit"
+                                      (submitChange)="update($event)"
+                                      (checkAvailableChange)="checkAvailable($event)"
+                                      (dirtyChange)="updateCanDeactivate($event)"
+                                      (navigate)="navigate($event)"
+    >
+    </dlcm-admin-funding-agencies-form>
 
-</div>
+  </div>
 </lib-empty-container>

src/app/features/admin/language/components/dialogs/admin-language-create-edit/admin-language-create-edit.dialog.html

@@ -13,7 +13,7 @@
 <div mat-dialog-actions>
   <button mat-button
           [mat-dialog-close]=""
-          cdkFocusInitial
+          [dlcmAutoFocus]="true"
   >
     {{KEY_CANCEL_BUTTON | translate}}
   </button>

src/app/features/admin/metadata-type/components/presentationals/admin-metadata-type-form/admin-metadata-type-form.presentational.html

@@ -8,6 +8,7 @@
         <mat-label>{{'admin.metadataType.form.name' | translate}}</mat-label>
         <input matInput
                [solidifyValidation]="errors"
+               autofocus
                [solidifyFocusFirstElement]="true"
                (blur)="checkAvailable(formDefinition.name, fd)"
                [formControl]="fd"

src/app/features/admin/metadata-type/components/routables/admin-metadata-type-create/admin-metadata-type-create.routable.html

 <div solidifyShortCuts
      (onEscape)="backToList()"
-     [solidifyFocusFirstElement]="true">
-
-<dlcm-button-toolbar-detail [mode]="'create'"
-                            (backToListChange)="backToList()"
 >
-</dlcm-button-toolbar-detail>
 
-<div class="wrapper"
-     [dlcmSpinner]="isLoadingWithDependencyObs | async"
->
-  <dlcm-admin-metadata-type-form #formPresentational
-                                 *ngIf="isReadyToBeDisplayedInCreateModeObs | async"
-                                 (submitChange)="create($event)"
-                                 (checkAvailableChange)="checkAvailable($event)"
-                                 (dirtyChange)="updateCanDeactivate($event)"
-  ></dlcm-admin-metadata-type-form>
-</div>
+  <dlcm-button-toolbar-detail [mode]="'create'"
+                              (backToListChange)="backToList()"
+  >
+  </dlcm-button-toolbar-detail>
+
+  <div class="wrapper"
+       [dlcmSpinner]="isLoadingWithDependencyObs | async"
+  >
+    <dlcm-admin-metadata-type-form #formPresentational
+                                   *ngIf="isReadyToBeDisplayedInCreateModeObs | async"
+                                   (submitChange)="create($event)"
+                                   [solidifyFocusFirstElement]="true"
+                                   (checkAvailableChange)="checkAvailable($event)"
+                                   (dirtyChange)="updateCanDeactivate($event)"
+    ></dlcm-admin-metadata-type-form>
+  </div>
 
 </div>

src/app/features/admin/oai-set/components/routables/admin-oai-set-bulk-create/admin-oai-set-bulk-create.routable.html

+<lib-empty-container solidifyShortCuts
+                     (onEscape)="backToList()"
+                     [solidifyFocusFirstElement]="true"
+>
 <dlcm-button-toolbar-detail [mode]="'create'"
                             (backToListChange)="backToList()"
 >
@@ -14,3 +18,4 @@
                                 (navigate)="navigate($event)"
   ></dlcm-admin-oai-set-bulk-form>
 </div>
+</lib-empty-container>

src/app/features/admin/oai-set/components/routables/admin-oai-set-create/admin-oai-set-create.routable.html

+<lib-empty-container solidifyShortCuts
+                     (onEscape)="backToList()"
+                     [solidifyFocusFirstElement]="true"
+>
 <dlcm-button-toolbar-detail [mode]="'create'"
                             (backToListChange)="backToList()"
 >
@@ -13,3 +17,4 @@
                            (dirtyChange)="updateCanDeactivate($event)"
   ></dlcm-admin-oai-set-form>
 </div>
+</lib-empty-container>

src/app/features/admin/oai-set/components/routables/admin-oai-set-detail-edit/admin-oai-set-detail-edit.routable.html

+<lib-empty-container solidifyShortCuts
+                     (onEscape)=" isEdit ? backToDetail() : backToList()"
+                     [solidifyFocusFirstElement]="true"
+>
 <dlcm-shared-banner-edit-mode [isEdit]="isEdit"></dlcm-shared-banner-edit-mode>
 
 
@@ -22,3 +26,4 @@
                            (dirtyChange)="updateCanDeactivate($event)"
   ></dlcm-admin-oai-set-form>
 </div>
+</lib-empty-container>

src/app/features/admin/oauth2-client/components/presentationals/admin-oauth2-client-form/admin-oauth2-client-form.presentational.html

@@ -8,6 +8,7 @@
         <mat-label>{{'admin.oauth2.form.name' | translate }}</mat-label>
         <input matInput
                [formControl]="fd"
+               autofocus
                [solidifyValidation]="errors"
                [required]="formValidationHelper.hasRequiredField(fd)"
                (blur)="checkAvailable(formDefinition.name, fd)"

src/app/features/admin/oauth2-client/components/routables/admin-oauth2-client-create/admin-oauth2-client-create.routable.html

+<lib-empty-container solidifyShortCuts
+                     (onEscape)="backToList()"
+>
 <dlcm-button-toolbar-detail [mode]="'create'"
                             (backToListChange)="backToList()"
 >
@@ -7,6 +10,7 @@
      [dlcmSpinner]="isLoadingWithDependencyObs | async"
 >
   <dlcm-admin-oauth-form #formPresentational
+                         [solidifyFocusFirstElement]="true"
                          *ngIf="isReadyToBeDisplayedInCreateModeObs | async"
                          (submitChange)="create($event)"
                          (checkAvailableChange)="checkAvailable($event)"
@@ -14,3 +18,4 @@
   >
   </dlcm-admin-oauth-form>
 </div>
+</lib-empty-container>

src/app/features/admin/oauth2-client/components/routables/admin-oauth2-client-detail-edit/admin-oauth2-client-detail-edit.routable.html

+<lib-empty-container solidifyShortCuts
+                     (onEscape)="isEdit ? backToDetail() : backToList()"
+                     [solidifyFocusFirstElement]="true"
+>
 <dlcm-shared-banner-edit-mode [isEdit]="isEdit"></dlcm-shared-banner-edit-mode>
 
 
@@ -23,3 +27,4 @@
   >
   </dlcm-admin-oauth-form>
 </div>
+</lib-empty-container>

src/app/features/admin/person/components/presentationals/admin-person-form/admin-person-form.presentational.html

@@ -8,6 +8,7 @@
         <mat-label>{{'admin.person.form.firstName' | translate }}</mat-label>
         <input matInput
                solidifyValidation
+               [solidifyFocusFirstElement]="true"
                [formControl]="fd"
                [required]="formValidationHelper.hasRequiredField(fd)"
         >

src/app/features/admin/person/components/routables/admin-person-create/admin-person-create.routable.html

-<dlcm-button-toolbar-detail [mode]="'create'"
-                            (backToListChange)="backToList()"
+<lib-empty-container solidifyShortCuts
+                     (onEscape)="backToList()"
 >
-</dlcm-button-toolbar-detail>
+  <dlcm-button-toolbar-detail [mode]="'create'"
+                              (backToListChange)="backToList()"
+  >
+  </dlcm-button-toolbar-detail>
 
-<div class="wrapper"
-     [dlcmSpinner]="isLoadingWithDependencyObs | async"
->
-  <dlcm-admin-person-form #formPresentational
-                          *ngIf="isReadyToBeDisplayedInCreateModeObs | async"
-                          [listInstitutions]="listInstitutionsObs | async"
-                          [listOrganizationalUnit]="listOrgUnitObs | async"
-                          [listRole]="listRoleObs | async"
-                          [selectedInstitutions]="selectedInstitutionsObs | async"
-                          (submitChange)="create($event)"
-                          (checkAvailableChange)="checkAvailable($event)"
-                          (dirtyChange)="updateCanDeactivate($event)"
-                          (navigate)="navigate($event)"
+  <div class="wrapper"
+       [dlcmSpinner]="isLoadingWithDependencyObs | async"
   >
-  </dlcm-admin-person-form>
-</div>
+    <dlcm-admin-person-form #formPresentational
+                            [solidifyFocusFirstElement]="true"
+                            *ngIf="isReadyToBeDisplayedInCreateModeObs | async"
+                            [listInstitutions]="listInstitutionsObs | async"
+                            [listOrganizationalUnit]="listOrgUnitObs | async"
+                            [listRole]="listRoleObs | async"
+                            [selectedInstitutions]="selectedInstitutionsObs | async"
+                            (submitChange)="create($event)"
+                            (checkAvailableChange)="checkAvailable($event)"
+                            (dirtyChange)="updateCanDeactivate($event)"
+                            (navigate)="navigate($event)"
+    >
+    </dlcm-admin-person-form>
+  </div>
+</lib-empty-container>

src/app/features/admin/person/components/routables/admin-person-detail-edit/admin-person-detail-edit.routable.html

+<lib-empty-container solidifyShortCuts
+                     (onEscape)="isEdit ? backToDetail() : backToList()"
+                     [solidifyFocusFirstElement]="true"
+>
 <dlcm-shared-banner-edit-mode [isEdit]="isEdit"></dlcm-shared-banner-edit-mode>
 
 
@@ -29,6 +33,6 @@
   >
   </dlcm-admin-person-form>
 </div>
-
+</lib-empty-container>
 
 

src/app/features/admin/research-domain/components/dialogs/admin-research-domain-create-edit/admin-research-domain-create-edit.dialog.html

@@ -14,7 +14,7 @@
 <div mat-dialog-actions>
   <button mat-button
           [mat-dialog-close]=""
-          cdkFocusInitial
+          [dlcmAutoFocus]="true"
   >
     {{KEY_CANCEL_BUTTON | translate}}
   </button>

src/app/features/admin/role/components/routables/admin-role-detail-edit/admin-role-detail-edit.routable.html

-<dlcm-button-toolbar-detail [mode]="isEdit ? 'edit' : 'detail'"
-                            [currentModel]="currentObs | async"
-                            [deleteAvailable]="false"
-                            (editChange)="edit()"
-                            (backToDetailChange)="backToDetail()"
-                            (backToListChange)="backToList()"
+<lib-empty-container solidifyShortCuts
+                     (onEscape)=" isEdit ? backToDetail() : backToList()"
+                     [solidifyFocusFirstElement]="true"
 >
-</dlcm-button-toolbar-detail>
+  <dlcm-button-toolbar-detail [mode]="isEdit ? 'edit' : 'detail'"
+                              [currentModel]="currentObs | async"
+                              [deleteAvailable]="false"
+                              (editChange)="edit()"
+                              (backToDetailChange)="backToDetail()"
+                              (backToListChange)="backToList()"
+  >
+  </dlcm-button-toolbar-detail>
 
-<div class="wrapper"
-     [dlcmSpinner]="isLoadingWithDependencyObs | async"
->
-  <dlcm-admin-role-form #formPresentational
-                        *ngIf="isReadyToBeDisplayedObs | async"
-                        [model]="currentObs| async"
-                        [readonly]="!isEdit"
-                        (submitChange)="update($event)"
-                        (checkAvailableChange)="checkAvailable($event)"
-                        (dirtyChange)="updateCanDeactivate($event)"
+  <div class="wrapper"
+       [dlcmSpinner]="isLoadingWithDependencyObs | async"
   >
-  </dlcm-admin-role-form>
-</div>
+    <dlcm-admin-role-form #formPresentational
+                          *ngIf="isReadyToBeDisplayedObs | async"
+                          [model]="currentObs| async"
+                          [readonly]="!isEdit"
+                          (submitChange)="update($event)"
+                          (checkAvailableChange)="checkAvailable($event)"
+                          (dirtyChange)="updateCanDeactivate($event)"
+    >
+    </dlcm-admin-role-form>
+  </div>
+</lib-empty-container>

src/app/features/admin/user/components/dialogs/admin-user-edit-role-current-user/admin-user-edit-role-current-user.dialog.html

@@ -31,7 +31,7 @@
 <div mat-dialog-actions>
   <button mat-button
           [mat-dialog-close]=""
-          cdkFocusInitial
+          [solidifyFocusFirstElement]="true"
   >{{"admin.user.dialog.editOwnRoles.cancel" | translate}}</button>
   <button mat-flat-button
           color="warn"

src/app/features/admin/user/components/routables/admin-user-create/admin-user-create.routable.html

@@ -7,6 +7,7 @@
 
 <div class="wrapper"
      [dlcmSpinner]="isLoadingWithDependencyObs | async"
+     [solidifyFocusFirstElement]="true"
 >
   <dlcm-admin-user-form #formPresentational
                         *ngIf="isReadyToBeDisplayedInCreateModeObs | async"

src/app/features/admin/user/components/routables/admin-user-detail-edit/admin-user-detail-edit.routable.html

-<dlcm-shared-banner-edit-mode [isEdit]="isEdit"></dlcm-shared-banner-edit-mode>
-
-<dlcm-button-toolbar-detail [mode]="isEdit ? 'edit' : 'detail'"
-                            [currentModel]="currentObs | async"
-                            (editChange)="edit()"
-                            (deleteChange)="delete()"
-                            (backToDetailChange)="backToDetail()"
-                            (backToListChange)="backToList()"
+<lib-empty-container [solidifyFocusFirstElement]="true"
+                     solidifyShortCuts
+                     (onEscape)="isEdit ? backToDetail() : backToList()"
 >
-</dlcm-button-toolbar-detail>
+  <dlcm-shared-banner-edit-mode [isEdit]="isEdit"></dlcm-shared-banner-edit-mode>
 
-<div class="wrapper"
-     [dlcmSpinner]="isLoadingWithDependencyObs | async"
->
-  <label *ngIf="isCurrentUser(currentUser | async)"
-         class="current-user-admin"
-  >{{"admin.user.editCurrentUser" | translate}}</label>
-  <dlcm-admin-user-form #formPresentational
-                        *ngIf="isReadyToBeDisplayedObs | async"
-                        [currentUser]="currentUser | async"
-                        [model]="currentObs | async"
-                        [listPersons]="listPersonObs | async"
-                        [listOrganizationalUnit]="listOrgUnitObs | async"
-                        [readonly]="!isEdit"
-                        (submitChange)="update($event)"
-                        (checkAvailableChange)="checkAvailable($event)"
-                        (dirtyChange)="updateCanDeactivate($event)"
-                        (navigate)="navigate($event)"
-  ></dlcm-admin-user-form>
-</div>
+  <dlcm-button-toolbar-detail [mode]="isEdit ? 'edit' : 'detail'"
+                              [currentModel]="currentObs | async"
+                              (editChange)="edit()"
+                              (deleteChange)="delete()"
+                              (backToDetailChange)="backToDetail()"
+                              (backToListChange)="backToList()"
+  >
+  </dlcm-button-toolbar-detail>
+
+  <div class="wrapper"
+       [dlcmSpinner]="isLoadingWithDependencyObs | async"
+  >
+    <label *ngIf="isCurrentUser(currentUser | async)"
+           class="current-user-admin"
+    >{{"admin.user.editCurrentUser" | translate}}</label>
+    <dlcm-admin-user-form #formPresentational
+                          *ngIf="isReadyToBeDisplayedObs | async"
+                          [currentUser]="currentUser | async"
+                          [model]="currentObs | async"
+                          [listPersons]="listPersonObs | async"
+                          [listOrganizationalUnit]="listOrgUnitObs | async"
+                          [readonly]="!isEdit"
+                          (submitChange)="update($event)"
+                          (checkAvailableChange)="checkAvailable($event)"
+                          (dirtyChange)="updateCanDeactivate($event)"
+                          (navigate)="navigate($event)"
+    ></dlcm-admin-user-form>
+  </div>
+</lib-empty-container>