[ACS-5551] minor changes

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

@@ -25,7 +25,7 @@
 
         .mat-expansion-panel:not([class*='mat-elevation-z']) {
             box-shadow: none;
-            border: 1px solid var(--adf-metadata-property-panel-border-color);
+            border: 1px solid var(--theme-metadata-property-panel-border-color);
             border-radius: 12px;
             margin: 24px;
         }
@@ -45,6 +45,10 @@
             color: var(--adf-theme-foreground-text-color-054);
         }
 
+        .mat-content.mat-content-hide-toggle {
+            margin-right: 0;
+        }
+        
         .adf-metadata-properties-panel-content {
             display: flex;
             align-items: center;

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

@@ -1,5 +1,4 @@
 .adf {
-
     &-property-field .mat-form-field-underline {
         display: none;
     }

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

@@ -10,23 +10,39 @@
         .adf-property-value-padding-top {
             display: flex;
             flex-direction: column;
-            padding-bottom: 6px;
+            padding: 6px 0;
             line-height: 20px;
         }
 
         .adf-property-label-not-editable {
-            color: var(--theme-metadata-property-panel-label-color) !important;
+            color: var(--theme-metadata-property-panel-label-color);
+
+            .mat-tooltip-trigger {
+                padding-left: 12px;
+            }
         }
 
         .adf-property-field {
             width: 100%;
 
+            .mat-input-element {
+                text-overflow: ellipsis;
+            }
+
             .mat-form-field-infix {
                 display: flex;
                 border-top-width: 0;
                 padding: 0;
             }
 
+            .mat-form-field-flex {
+                padding-top: 0;
+            }
+
+            .mat-form-field-wrapper {
+                padding-bottom: 0 ;
+            }
+
             .mat-form-field-label {
                 padding: 6px 0;
                 justify-content: center;
@@ -57,6 +73,10 @@
                 border-radius: 6px;
             }
 
+            .mat-input-element.adf-property-label-not-editable {
+                color: var(--theme-metadata-property-panel-label-color);
+            }
+            
             .mat-select.adf-property-select-edit-mode {
                 padding: 6px 0 6px 12px;
                 margin-top: 0;
@@ -71,15 +91,3 @@
         }
     }
 }
-
-.mat-form-field-wrapper {
-    padding-bottom: 0;
-}
-
-.mat-form-field-appearance-standard .mat-form-field-flex {
-    padding-top: 0 !important;
-}
-
-.mat-form-field-appearance-legacy .mat-form-field-wrapper {
-    padding-bottom: 0 !important;
-}

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

@@ -1,8 +1,6 @@
 <div *ngIf="showHeader" class="adf-info-drawer-layout-header">
-    <div class="adf-info-drawer-layout-header-icon">
-        <ng-content select="[info-drawer-node-icon]"></ng-content>
-    </div>
     <div class="adf-info-drawer-layout-header-title">
+        <ng-content select="[info-drawer-node-icon]"></ng-content>
         <ng-content select="[info-drawer-title]"></ng-content>
     </div>
     <div class="adf-info-drawer-layout-header-buttons">

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

@@ -18,10 +18,10 @@ $adf-info-drawer-icon-size-half: 24px !default;
         box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27);
 
         & .mat-tab-label {
+            height: 32px;
             font-weight: bold;
             text-align: left;
             color: var(--theme-accent-color);
-            text-transform: uppercase;
             opacity: 1;
 
             &-active {
@@ -30,13 +30,12 @@ $adf-info-drawer-icon-size-half: 24px !default;
         }
 
         &-header {
-            padding: 13px 0 0 23px;
+            padding: 8px 0 0 24px;
             display: flex;
             align-items: center;
+            height: 56px;
             margin-bottom: 40px;
-
             &-buttons {
-                padding-right: 18px;
 
                 mat-icon {
                     cursor: pointer;
@@ -44,16 +43,16 @@ $adf-info-drawer-icon-size-half: 24px !default;
             }
 
             &-title {
-                width: 197px;
+                display: flex;
-                height: 32px;
                 font-size: $adf-info-drawer-layout-title-font-size;
-                line-height: 1.6;
+                line-height: 28px;
-                letter-spacing: -0.5px;
+                letter-spacing: 0.15px;
                 text-align: left;
+                align-items: start;
                 color: var(--adf-theme-foreground-text-color-054);
 
                 & > div {
-                    overflow: hidden;
+                    width: 220px;
                     text-overflow: ellipsis;
                     color: var(--theme-metadata-property-panel-title-color);
                 }

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

@@ -33,7 +33,6 @@ export class InfoDrawerLayoutComponent {
 /**
  * Directive selectors without adf- prefix will be deprecated on 3.0.0
  */
-@Directive({ selector: '[info-drawer-node-icon], [info-drawer-node-icon]' }) export class InfoDrawerNodeIconDirective {}
 @Directive({ selector: '[adf-info-drawer-title], [info-drawer-title]' }) export class InfoDrawerTitleDirective {}
 @Directive({ selector: '[adf-info-drawer-buttons], [info-drawer-buttons]' }) export class InfoDrawerButtonsDirective {}
 @Directive({ selector: '[adf-info-drawer-content], [info-drawer-content]' }) export class InfoDrawerContentDirective {}

lib/core/src/lib/info-drawer/info-drawer.component.spec.ts

@@ -87,7 +87,7 @@ describe('InfoDrawerComponent', () => {
 
 @Component({
     template: `
-        <adf-info-drawer [selectedIndex]="tabIndex" nodeIcon="nodeIcon" title="Fake Title Custom">
+        <adf-info-drawer [selectedIndex]="tabIndex" [nodeIcon]="nodeIcon" title="Fake Title Custom">
             <adf-info-drawer-tab label="Tab1">
             </adf-info-drawer-tab>
             <adf-info-drawer-tab label="Tab2">
@@ -140,7 +140,7 @@ describe('Custom InfoDrawer', () => {
         fixture.detectChanges();
         const tab: any = fixture.debugElement.queryAll(By.css('.mat-tab-label-active'));
         expect(tab.length).toBe(1);
-        expect(tab[0].nativeElement.innerText).toContain('TAB1');
+        expect(tab[0].nativeElement.innerText).toContain('Tab1');
     });
 
     it('should select the tab 2 (index 1)', () => {
@@ -148,14 +148,14 @@ describe('Custom InfoDrawer', () => {
         fixture.detectChanges();
         const tab: any = fixture.debugElement.queryAll(By.css('.mat-tab-label-active'));
         expect(tab.length).toBe(1);
-        expect(tab[0].nativeElement.innerText).toContain('TAB2');
+        expect(tab[0].nativeElement.innerText).toContain('Tab2');
     });
 
     it('should render a tab with icon', () => {
         component.tabIndex = 2;
         fixture.detectChanges();
         const tab: any = fixture.debugElement.queryAll(By.css('.mat-tab-label-active'));
-        expect(tab[0].nativeElement.innerText).not.toBe('TAB3');
+        expect(tab[0].nativeElement.innerText).not.toBe('Tab3');
         expect(tab[0].nativeElement.innerText).toContain('tab-icon');
     });
 
@@ -171,7 +171,7 @@ describe('Custom InfoDrawer', () => {
 
 @Component({
     template: `
-    <adf-info-drawer [showHeader]="showHeader" nodeIcon="nodeIcon" title="Fake Visibility Info Drawer Title">
+    <adf-info-drawer [showHeader]="showHeader" [nodeIcon]="nodeIcon" title="Fake Visibility Info Drawer Title">
     </adf-info-drawer>
         `
 })

lib/core/src/lib/info-drawer/info-drawer.component.ts

@@ -17,7 +17,6 @@
 
 import { Component, ContentChildren, EventEmitter, HostListener, Input, Output, QueryList, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
 import { MatTabChangeEvent } from '@angular/material/tabs';
-
 @Component({
     selector: 'adf-info-drawer-tab',
     template: '<ng-template><ng-content></ng-content></ng-template>',
@@ -44,7 +43,6 @@ export class InfoDrawerTabComponent {
     host: { class: 'adf-info-drawer' }
 })
 export class InfoDrawerComponent {
-
     /** The title of the info drawer (string or translation key). */
     @Input()
     title: string|null = null;