fix(console): datepicker, formfield cleanup, member role help, domain layout (#3765)

* key datepicker, formfield cleanup, member role help, domain layout

* accounts card template overlay

* fix account card trigger

* chore(deps-dev): bump @typescript-eslint/parser from 5.26.0 to 5.27.0 in /console (#3752)

chore(deps-dev): bump @typescript-eslint/parser in /console

Bumps [@typescript-eslint/parser](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/parser) from 5.26.0 to 5.27.0.
- [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases)
- [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/parser/CHANGELOG.md)
- [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v5.27.0/packages/parser)

---
updated-dependencies:
- dependency-name: "@typescript-eslint/parser"
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <[email protected]>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* deps, i18n, feature info section

* lint

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

console/src/app/modules/header/header.component.html

@@ -196,30 +196,46 @@
       </a>
     </div>
 
-    <div
-      cnslOutsideClick
-      (clickOutside)="closeAccountCard()"
-      class="icon-container"
-      [ngClass]="{ 'iam-user': (['iam.write$'] | hasRole | async) }"
-    >
-      <cnsl-avatar
-        id="avatartoggle"
-        *ngIf="
-          user && (user.human?.profile?.displayName || (user.human?.profile?.firstName && user.human?.profile?.lastName))
-        "
-        class="avatar-toggle dontcloseonclick"
+    <div class="account-card-wrapper">
+      <button
+        cdkOverlayOrigin
+        #accounttrigger="cdkOverlayOrigin"
+        class="icon-container"
         (click)="showAccount = !showAccount"
-        [active]="showAccount"
-        [avatarUrl]="user.human?.profile?.avatarUrl || ''"
-        [forColor]="user?.preferredLoginName || ''"
-        [name]="
-          user.human?.profile?.displayName
-            ? user.human?.profile?.displayName ?? ''
-            : user.human?.profile?.firstName + ' ' + user.human?.profile?.lastName
-        "
-        [size]="38"
+        [ngClass]="{ 'iam-user': (['iam.write$'] | hasRole | async) }"
       >
-      </cnsl-avatar>
+        <cnsl-avatar
+          id="avatartoggle"
+          *ngIf="
+            user && (user.human?.profile?.displayName || (user.human?.profile?.firstName && user.human?.profile?.lastName))
+          "
+          class="avatar-toggle dontcloseonclick"
+          [active]="showAccount"
+          [avatarUrl]="user.human?.profile?.avatarUrl || ''"
+          [forColor]="user?.preferredLoginName || ''"
+          [name]="
+            user.human?.profile?.displayName
+              ? user.human?.profile?.displayName ?? ''
+              : user.human?.profile?.firstName + ' ' + user.human?.profile?.lastName
+          "
+          [size]="38"
+        >
+        </cnsl-avatar>
+      </button>
+    </div>
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="accounttrigger"
+      [flexibleDimensions]="true"
+      [lockPosition]="true"
+      [cdkConnectedOverlayOffsetY]="10"
+      [cdkConnectedOverlayHasBackdrop]="true"
+      [cdkConnectedOverlayPositions]="accountCardPositions"
+      cdkConnectedOverlayBackdropClass="transparent-backdrop"
+      [cdkConnectedOverlayOpen]="showAccount"
+      (backdropClick)="showAccount = false"
+      (detach)="showAccount = false"
+    >
       <cnsl-accounts-card
         @accounts
         class="a_card"
@@ -229,6 +245,6 @@
         [iamuser]="['iam.write$'] | hasRole | async"
       >
       </cnsl-accounts-card>
-    </div>
+    </ng-template>
   </div>
 </mat-toolbar>