feat(extension-login-approvals): [Auth/PM-14939] devices list view for browser (#14620)

Creates a new `DeviceManagementComponent` that fetches devices and formats them before handing them off to a view component for display.

View components:

- `DeviceManagementTableComponent` - displays on medium to large screens
- `DeviceManagementItemGroupComponent` - displays on small screens

Feature flag: `PM14938_BrowserExtensionLoginApproval`

libs/angular/src/auth/device-management/device-management.component.html

@@ -0,0 +1,40 @@
+<div *ngIf="showHeaderInfo" class="tw-mt-6 tw-mb-2 tw-pb-2.5">
+  <div class="tw-flex tw-items-center tw-gap-2 tw-mb-5">
+    <h1 class="tw-m-0">{{ "devices" | i18n }}</h1>
+
+    <button
+      type="button"
+      class="tw-border-none tw-bg-transparent tw-text-primary-600 tw-flex tw-items-center tw-size-4"
+      [bitPopoverTriggerFor]="infoPopover"
+      position="right-start"
+    >
+      <i class="bwi bwi-question-circle" aria-hidden="true"></i>
+    </button>
+
+    <bit-popover [title]="'whatIsADevice' | i18n" #infoPopover>
+      <p>{{ "aDeviceIs" | i18n }}</p>
+    </bit-popover>
+  </div>
+
+  <p>
+    {{ "deviceListDescriptionTemp" | i18n }}
+  </p>
+</div>
+
+@if (initializing) {
+  <div class="tw-flex tw-justify-center tw-items-center tw-p-4">
+    <i class="bwi bwi-spinner bwi-spin tw-text-2xl" aria-hidden="true"></i>
+  </div>
+} @else {
+  <!-- Table View: displays on medium to large screens -->
+  <auth-device-management-table
+    ngClass="tw-hidden md:tw-block"
+    [devices]="devices"
+  ></auth-device-management-table>
+
+  <!-- List View: displays on small screens -->
+  <auth-device-management-item-group
+    ngClass="md:tw-hidden"
+    [devices]="devices"
+  ></auth-device-management-item-group>
+}