MD3 migration fixes (#11919)

* [ACS-10449] Viewer MD3 fixes

* [ACS-10449] Autocomplete chip MD3 fix

* [ACS-10449] Tabs MD3 fixes

* [ACS-10449] Fix badge sizing

* [ACS-10449] Login page error fix

* [ACS-10449] Fix overlapping options on text next to selectbox

* [ACS-10449] ADF style fixes refactoring I

* [ACS-10449] Breadcrumb and search filter container fixes

* [ACS-10449] User column form field fixes

* [ACS-10449] adapt scroll into view to changes in MD3

* [ACS-10449] Properties panel opened by default

* [ACS-10449] Tag creator fixes

* [ACS-10449] fix metadata property label color

* [ACS-10449] Categories panel fixes

* [ACS-10449] Current aspect on changes fix

* [ACS-10449] Make notification history badge size configurable

* [ACS-10449] Make notification history badge size configurable via config file

---------

Co-authored-by: Aleksander Sklorz <Aleksander.Sklorz@hyland.com>
Co-authored-by: g-jaskowski <grzegorz.jaskowski@hyland.com>

lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss

@@ -37,10 +37,6 @@
     }
 
     .adf-textitem-chip-list-container {
-        #{ms.$mat-form-field-label} {
-            margin-top: 6px;
-        }
-
         .adf-property-value {
             margin-left: 0;
         }

lib/core/src/lib/card-view/components/card-view/card-view.component.scss

@@ -9,7 +9,6 @@
         display: flex;
         line-height: 20px;
         margin-bottom: 4px;
-        color: var(--mat-sys-on-surface);
     }
 
     .adf-property-container {

lib/core/src/lib/info-drawer/info-drawer-layout.component.scss

@@ -23,12 +23,6 @@ $adf-info-drawer-icon-size-half: 24px !default;
             opacity: 1;
         }
 
-        #{ms.$mat-tab-label}#{ms.$mat-tab-label-active} {
-            & #{ms.$mat-tab-label-text} {
-                color: inherit;
-            }
-        }
-
         &-header {
             padding: 8px 0 0 24px;
             display: flex;

lib/core/src/lib/login/components/login/login.component.scss

@@ -194,7 +194,6 @@
         color: var(--mat-sys-error);
         position: absolute;
         font-size: var(--mat-sys-body-small-size);
-        margin-top: -12px;
         display: block;
     }
 

lib/core/src/lib/notifications/components/notification-history.component.html

@@ -8,7 +8,7 @@
     id="adf-notification-history-open-button"
     (menuOpened)="onMenuOpened()"
 >
-    <mat-icon aria-hidden="false" matBadge="&#8288;" [matBadgeHidden]="!notifications.length" class="adf-notification-history-menu_button-icon" matBadgeSize="small" adf-icon="notifications" />
+    <mat-icon aria-hidden="false" matBadge="&#8288;" [matBadgeHidden]="!notifications.length" class="adf-notification-history-menu_button-icon" [matBadgeSize]="badgeSize" adf-icon="notifications" />
 </button>
 
 <mat-menu #menu="matMenu"

lib/core/src/lib/notifications/components/notification-history.component.spec.ts

@@ -25,6 +25,8 @@ import { UnitTestingUtils } from '../../testing/unit-testing-utils';
 import { provideCoreAuthTesting } from '../../testing/noop-auth.module';
 import { MatIconTestingModule } from '@angular/material/icon/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { MatBadgeHarness } from '@angular/material/badge/testing';
+import { AppConfigService } from '../../app-config/app-config.service';
 
 describe('Notification History Component', () => {
     let fixture: ComponentFixture<NotificationHistoryComponent>;
@@ -184,6 +186,36 @@ describe('Notification History Component', () => {
             });
         }, 45000);
 
+        it('should apply badge size from app config on init', async () => {
+            const appConfig = TestBed.inject(AppConfigService);
+            spyOn(appConfig, 'get').and.callFake(
+                <T>(key: string, defaultValue?: T): T => (key === 'notification.badgeSize' ? 'large' : defaultValue) as T
+            );
+
+            const configFixture = TestBed.createComponent(NotificationHistoryComponent);
+            const configComponent = configFixture.componentInstance;
+            configComponent.notifications = [];
+            configFixture.detectChanges();
+
+            expect(configComponent.badgeSize).toBe('large');
+
+            notificationService.showInfo('Example Message');
+            configFixture.detectChanges();
+
+            const badgeHarness = await TestbedHarnessEnvironment.loader(configFixture).getHarness(MatBadgeHarness);
+            expect(await badgeHarness.getSize()).toBe('large');
+        });
+
+        it('should use default badge size when app config is not set', () => {
+            const appConfig = TestBed.inject(AppConfigService);
+            spyOn(appConfig, 'get').and.returnValue(null);
+
+            const configFixture = TestBed.createComponent(NotificationHistoryComponent);
+            configFixture.detectChanges();
+
+            expect(configFixture.componentInstance.badgeSize).toBe('small');
+        });
+
         describe('focus change', () => {
             let markAllAsReadButton: HTMLButtonElement;
             let loadMoreButton: HTMLButtonElement;

lib/core/src/lib/notifications/components/notification-history.component.ts

@@ -35,7 +35,7 @@ import { StorageService } from '../../common/services/storage.service';
 import { PaginationModel } from '../../models/pagination.model';
 import { MatButton, MatButtonModule, MatIconButton } from '@angular/material/button';
 import { TranslatePipe } from '@ngx-translate/core';
-import { MatBadgeModule } from '@angular/material/badge';
+import { MatBadgeModule, MatBadgeSize } from '@angular/material/badge';
 import { MatListModule } from '@angular/material/list';
 import { NgForOf, NgIf } from '@angular/common';
 import { InitialUsernamePipe, TimeAgoPipe } from '../../pipes';
@@ -43,6 +43,7 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FocusKeyManager } from '@angular/cdk/a11y';
 import { IconModule } from '../../icon/icon.module';
+import { AppConfigService } from '../../app-config/app-config.service';
 
 @Component({
     selector: 'adf-notification-history',
@@ -67,6 +68,7 @@ export class NotificationHistoryComponent implements OnInit, AfterViewInit {
     private readonly notificationService = inject(NotificationService);
     private readonly storageService = inject(StorageService);
     private readonly cd = inject(ChangeDetectorRef);
+    private readonly appConfig = inject(AppConfigService);
 
     public static MAX_NOTIFICATION_STACK_LENGTH = 100;
     public static NOTIFICATION_STORAGE = 'notification-history';
@@ -86,6 +88,10 @@ export class NotificationHistoryComponent implements OnInit, AfterViewInit {
     @Input()
     maxNotifications: number = 5;
 
+    /** Size of the badge. Can be `small`, `medium` or `large` */
+    @Input()
+    badgeSize: MatBadgeSize = 'small';
+
     notifications: NotificationModel[] = [];
     paginatedNotifications: NotificationModel[] = [];
     pagination: PaginationModel;
@@ -105,6 +111,8 @@ export class NotificationHistoryComponent implements OnInit, AfterViewInit {
 
     ngOnInit() {
         this.notifications = JSON.parse(this.storageService.getItem(NotificationHistoryComponent.NOTIFICATION_STORAGE)) || [];
+        const configBadgeSize = this.appConfig.get<MatBadgeSize>('notification.badgeSize', null);
+        this.badgeSize = configBadgeSize ?? this.badgeSize;
     }
 
     ngAfterViewInit(): void {

lib/core/src/lib/toolbar/toolbar.component.scss

@@ -14,9 +14,7 @@
     }
 
     .adf-toolbar-container.adf-toolbar-container-row {
-        height: 64px;
         white-space: normal;
-        padding: 0 16px;
     }
 
     &.adf-toolbar--inline {