ACS-9789 Fixing Issues on metadata sidebar (#4662)

* ACS-9789 fixing Issues on metadata sidebar

* ACS-9789 resolving PR review comments

* ACS-9789 Applying the default Style on the specific aca-side-bar or infor-drawer component

* ACS-9789 resolving review comments to replace styles from global to specific component

* Update application.scss

Removing unwanted statement

* Update info-drawer.component.scss

Moved inside the selector aca-info-drawer.

* AAE-9789 fixing the input coloe issue

* ACS-9789 fixing the color issues for labels and form-fields inputs

projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.html

@@ -2,7 +2,7 @@
   <mat-progress-bar mode="indeterminate" [attr.aria-label]="'APP.INFO_DRAWER.DATA_LOADING' | translate" />
 </div>
 <ng-container *ngIf="!isLoading && !!displayNode">
-  <adf-info-drawer [icon]="icon" [title]="node?.entry?.name || 'APP.INFO_DRAWER.TITLE'" cdkTrapFocusAutoCapture>
+  <adf-info-drawer class="aca-info-drawer" [icon]="icon" [title]="node?.entry?.name || 'APP.INFO_DRAWER.TITLE'" cdkTrapFocusAutoCapture>
     <aca-toolbar [items]="actions" info-drawer-buttons />
 
     <adf-info-drawer-tab *ngFor="let tab of tabs" [icon]="tab.icon" [label]="tab.title">

projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.scss

@@ -0,0 +1,28 @@
+@use '../../styles/mat-selectors' as ms;
+
+aca-info-drawer {
+  .aca-info-drawer {
+    .adf-card-view-textitem {
+      .adf-property-value-not-editable {
+        color: var(--adf-metadata-property-panel-title-color);
+      }
+    }
+
+    .adf-card-view-selectitem #{ms.$mat-form-field-infix} {
+      padding-left: 0;
+      padding-right: 0;
+    }
+
+    .adf-property-list .adf-property-value {
+      #{ms.$mat-select-trigger} {
+        background-color: var(--adf-metadata-buttons-background-color);
+        border-radius: 3px;
+        padding: 2%;
+
+        #{ms.$mat-select-arrow-wrapper} {
+          margin-top: 16px;
+        }
+      }
+    }
+  }
+}

projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.ts

@@ -37,6 +37,7 @@ import { A11yModule } from '@angular/cdk/a11y';
 import { ToolbarComponent } from '../toolbar/toolbar.component';
 import { ContentService, NodesApiService } from '@alfresco/adf-content-services';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 
 @Component({
   imports: [
@@ -51,7 +52,14 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
   ],
   selector: 'aca-info-drawer',
   templateUrl: './info-drawer.component.html',
-  encapsulation: ViewEncapsulation.None
+  styleUrl: './info-drawer.component.scss',
+  encapsulation: ViewEncapsulation.None,
+  providers: [
+    {
+      provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
+      useValue: { appearance: 'fill', floatLabel: 'always' }
+    }
+  ]
 })
 export class InfoDrawerComponent implements OnChanges, OnInit, OnDestroy {
   @Input()

projects/aca-shared/src/lib/styles/mat-selectors.scss

@@ -4,3 +4,9 @@ $mat-outlined-button: '.mat-mdc-outlined-button';
 $mat-button-base: '.mat-mdc-button-base';
 $mat-unthemed: '.mat-unthemed';
 $mat-divider-horizontal: '.mat-divider-horizontal';
+$mat-form-field-infix: '.mat-mdc-form-field-infix';
+$mat-select-arrow-wrapper: '.mat-mdc-select-arrow-wrapper';
+$mat-select-trigger: '.mat-mdc-select-trigger';
+$mat-text-field-filled: '.mdc-text-field--filled';
+$mat-text-field-disabled: '.mdc-text-field--disabled';
+$mat-text-field-input: '.mdc-text-field__input';