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>

docs/core/components/notification-history.component.md

@@ -27,6 +27,21 @@ The main purpose of the [Notification history component](../../core/components/n
 | maxNotifications | `number` | 5 | Maximum number of notifications to display. The rest will remain hidden until load more is clicked |
 | menuPositionX | [`MenuPositionX`](https://github.com/angular/components/blob/master/src/material/menu/menu-positions.ts) | "after" | Custom choice for opening the menu at the bottom. Can be `before` or `after`. |
 | menuPositionY | [`MenuPositionY`](https://github.com/angular/components/blob/master/src/material/menu/menu-positions.ts) | "below" | Custom choice for opening the menu at the bottom. Can be `above` or `below`. |
+| badgeSize | [`MatBadgeSize`](https://v19.material.angular.dev/components/badge/api#MatBadgeSize) | `small` | Badge size. Can be `small`, `medium` or `large`. |
+
+### App config
+
+You can set a default badge size in `app.config.json`:
+
+```json
+{
+    "notification": {
+        "badgeSize": "medium"
+    }
+}
+```
+
+The `notification.badgeSize` value is applied on init when the `badgeSize` input is not set explicitly on the component.
 
 ## See also
 

lib/content-services/src/lib/aspect-list/aspect-list.component.scss

@@ -81,7 +81,6 @@ $dialog-list-height: calc(65vh - ($dialog-title-height + $dialog-information-hei
         .adf-aspect-property-table-column-title,
         .adf-aspect-property-table-column-data-type {
             font: var(--mat-sys-body-small);
-            color: var(--mat-sys-on-secondary-container);
         }
 
         .adf-aspect-property-table-column {

lib/content-services/src/lib/breadcrumb/breadcrumb.component.scss

@@ -67,12 +67,12 @@
         padding-right: 2px;
         overflow: hidden;
         display: flex;
+        align-items: center;
         font: var(--mat-sys-body-medium);
         text-align: left;
         color: var(--mat-sys-on-secondary-container);
         flex: 0 1 auto;
         min-width: 35px;
-        margin-top: auto;
         text-overflow: ellipsis;
 
         &.adf-active {

lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.scss

@@ -96,5 +96,6 @@ $dropdown-horizontal-offset: 30px;
 }
 
 #{ms.$cdk-overlay-pane}:has(> .adf-breadcrumb-dropdown-panel) {
+    margin-top: 12px;
     min-width: fit-content;
 }

lib/content-services/src/lib/category/categories-management/categories-management.component.scss

@@ -11,6 +11,7 @@
         justify-content: space-between;
         align-items: center;
         word-break: break-word;
+        font: var(--mat-sys-body-medium);
     }
 
     .adf-categories-padded {

lib/content-services/src/lib/category/categories-management/categories-management.component.ts

@@ -124,7 +124,7 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
         this._categoryNameControlVisible = categoryNameControlVisible;
         if (categoryNameControlVisible) {
             setTimeout(() => {
-                this.categoryNameInputElement.nativeElement.scrollIntoView();
+                this.categoryNameInputElement.nativeElement.scrollIntoView({ block: 'nearest' });
             });
             this._existingCategoriesPanelVisible = true;
         } else {

lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html

@@ -98,7 +98,7 @@
                     </div>
                 </adf-content-metadata-header>
             </mat-expansion-panel-header>
-            <div *ngIf="currentPanel.panelTitle === DefaultPanels.TAGS && editedPanelTitle !== DefaultPanels.TAGS"
+            <div *ngIf="currentPanel.panelTitle === DefaultPanels.TAGS && editedPanelTitle !== DefaultPanels.TAGS && !showEmptyTagMessage"
                  class="adf-metadata-properties-tags">
                 <adf-dynamic-chip-list [chips]="tagsToDisplay" [showDelete]="false" />
             </div>

lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss

@@ -18,6 +18,11 @@ $panel-properties-height: 56px !default;
             height: $panel-properties-height;
         }
 
+        .adf-metadata-categories-header {
+            display: block;
+            margin-top: 16px;
+        }
+
         .adf-edit-icon-buttons {
             color: var(--mat-sys-on-secondary-container);
         }

lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts

@@ -208,7 +208,7 @@ export class ContentMetadataComponent implements OnChanges, OnInit {
         this.loadProperties(this.node);
         this.verifyAllowableOperations();
 
-        this.currentPanel.panelTitle = this.displayAspect ?? this.DefaultPanels.PROPERTIES;
+        this.currentPanel.panelTitle = this.displayAspect && this.displayAspect !== '' ? this.displayAspect : this.DefaultPanels.PROPERTIES;
         this.currentPanel.expanded = true;
     }
 
@@ -277,7 +277,7 @@ export class ContentMetadataComponent implements OnChanges, OnInit {
             this.loadProperties(this.node);
         }
 
-        if (changes.displayAspect?.currentValue) {
+        if (changes.displayAspect?.currentValue && changes.displayAspect.currentValue !== '') {
             this.currentPanel.panelTitle = changes.displayAspect.currentValue;
             this.currentPanel.expanded = true;
         }

lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.scss

@@ -18,10 +18,6 @@
                 width: 100%;
                 justify-content: unset;
             }
-
-            &-add-member-action {
-                padding: 0 15px;
-            }
         }
 
         .adf-new-permission-table {

lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.scss

@@ -1,4 +1,4 @@
-$search-result-height: calc(100% - 60px);
+$search-result-height: calc(100% - 80px);
 
 .adf {
     &-permission-result-list {

lib/content-services/src/lib/permission-manager/components/user-role-column/user-role-column.component.scss

@@ -3,9 +3,5 @@
 .adf-role-selector-field#{ms.$mat-form-field} {
     width: 100%;
     max-width: 200px;
-    height: 40px;
+    padding: 5px 0;
-
-    #{ms.$mat-form-field-infix}:not(:disabled) {
-        padding-top: 8px;
-    }
 }

lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss

@@ -31,12 +31,12 @@ adf-search-chip-autocomplete-input {
     }
 
     .adf-option-chips-delete-button.adf-autocomplete-added-option-chips-delete-button {
-        font: var(--mat-sys-body-small);
+        font-size: var(--mat-sys-body-small-size);
         height: var(--mat-sys-body-small-size);
         width: var(--mat-sys-body-small-size);
 
         .adf-option-chips-delete-icon.adf-autocomplete-added-option-chips-delete-icon {
-            font: var(--mat-sys-body-small);
+            font-size: var(--mat-sys-body-small-size);
             height: var(--mat-sys-body-small-size);
             width: var(--mat-sys-body-small-size);
         }

lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.scss

@@ -55,6 +55,7 @@
 
     .adf-search-checklist {
         margin: 4px 0 0 16px;
+        padding: 0;
     }
 
     .adf-filter-actions {

lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss

@@ -14,7 +14,7 @@ adf-tags-creator {
     }
 
     .adf-tag-name-field {
-        margin-top: 10px;
+        margin-top: 16px;
     }
 
     .adf-create-tag-label {
@@ -26,6 +26,7 @@ adf-tags-creator {
         display: inline-block;
         padding-right: 12px;
         overflow: auto;
+        font: var(--mat-sys-body-medium);
     }
 
     .adf-tags-list {
@@ -42,7 +43,7 @@ adf-tags-creator {
         width: 100%;
 
         .adf-existing-tags-label {
-            font-size: 10px;
+            font: var(--mat-sys-body-small);
             color: var(--mat-sys-on-surface-variant);
             padding-left: 12px;
             margin-bottom: 2px;

lib/content-services/src/lib/tag/tags-creator/tags-creator.component.ts

@@ -129,7 +129,7 @@ export class TagsCreatorComponent implements OnInit, OnDestroy {
         if (tagNameControlVisible) {
             this._existingTagsPanelVisible = true;
             setTimeout(() => {
-                this.tagNameInputElement?.nativeElement?.scrollIntoView();
+                this.tagNameInputElement?.nativeElement?.scrollIntoView({ block: 'nearest' });
             });
         } else {
             this._existingTagsPanelVisible = false;

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 {