[ACS-8498] [ACA] Testing Angular 15 - Toolbar buttons layout is broken (#10026)

* fix icon styles

* auto-fix styles

* fix a bug with icon value resolving

* fix tests

.lintstagedrc.json

@@ -1,4 +1,4 @@
 {
   "*.{ts,js}": ["prettier --write", "eslint"],
-  "*.{css,scss}": ["prettier --write", "stylelint"]
+  "*.{css,scss}": ["prettier --write", "stylelint --fix"]
 }

lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts

@@ -945,6 +945,7 @@ describe('DataTable', () => {
     });
 
     it('should use special material url scheme', () => {
+        dataTable.data = new ObjectDataTableAdapter([{}, {}, {}], []);
         const column = {} as DataColumn;
 
         const row: any = {
@@ -955,7 +956,8 @@ describe('DataTable', () => {
     });
 
     it('should not use special material url scheme', () => {
-        const column = {} as DataColumn;
+        dataTable.data = new ObjectDataTableAdapter([{}, {}, {}], []);
+        const column = { type: 'image' } as DataColumn;
 
         const row: any = {
             getValue: () => 'http://www.google.com'
@@ -965,7 +967,8 @@ describe('DataTable', () => {
     });
 
     it('should parse icon value', () => {
-        const column = {} as DataColumn;
+        dataTable.data = new ObjectDataTableAdapter([{}, {}, {}], []);
+        const column = { type: 'image' } as DataColumn;
 
         const row: any = {
             getValue: () => 'material-icons://android'
@@ -975,7 +978,8 @@ describe('DataTable', () => {
     });
 
     it('should not parse icon value', () => {
-        const column = {} as DataColumn;
+        dataTable.data = new ObjectDataTableAdapter([{}, {}, {}], []);
+        const column = { type: 'image' } as DataColumn;
 
         const row: any = {
             getValue: () => 'http://www.google.com'

lib/core/src/lib/datatable/components/datatable/datatable.component.ts

@@ -326,12 +326,7 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
         this.keyManager.onKeydown(event);
     }
 
-    constructor(
+    constructor(private elementRef: ElementRef, differs: IterableDiffers, private matIconRegistry: MatIconRegistry, private sanitizer: DomSanitizer) {
-        private elementRef: ElementRef,
-        differs: IterableDiffers,
-        private matIconRegistry: MatIconRegistry,
-        private sanitizer: DomSanitizer
-    ) {
         if (differs) {
             this.differ = differs.find([]).create(null);
         }
@@ -763,7 +758,7 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
 
     isIconValue(row: DataRow, col: DataColumn): boolean {
         if (row && col) {
-            const value = row.getValue(col.key);
+            const value = this.data.getValue(row, col);
             return value?.startsWith('material-icons://');
         }
         return false;
@@ -771,7 +766,7 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
 
     asIconValue(row: DataRow, col: DataColumn): string {
         if (this.isIconValue(row, col)) {
-            const value = row.getValue(col.key) || '';
+            const value = this.data.getValue(row, col) || '';
             return value.replace('material-icons://', '');
         }
         return null;

lib/core/src/lib/icon/icon.component.scss

@@ -1,4 +0,0 @@
-.adf-icon {
-    display: inline-flex;
-    vertical-align: middle;
-}

lib/core/src/lib/icon/icon.component.ts

@@ -25,7 +25,6 @@ import { NgIf } from '@angular/common';
     standalone: true,
     imports: [MatIconModule, NgIf],
     templateUrl: './icon.component.html',
-    styleUrls: ['./icon.component.scss'],
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
     host: { class: 'adf-icon' }

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

@@ -50,7 +50,7 @@ $adf-info-drawer-icon-size-half: 24px !default;
                 line-height: 28px;
                 letter-spacing: 0.15px;
                 text-align: left;
-                align-items: start;
+                align-items: center;
                 color: var(--adf-theme-foreground-text-color-054);
                 overflow: hidden;
 

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

@@ -40,11 +40,13 @@
         text-align: center;
         flex: 1 1 auto;
         position: absolute;
-        top: 0;
         left: 50%;
         transform: translateX(-50%);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
 
-        @media screen and (max-width: 1450px) {
+        @media screen and (width <= 1450px) {
             left: 30%;
         }
     }
@@ -70,8 +72,7 @@
             @extend .adf-full-screen;
 
             position: relative;
-            overflow-y: hidden;
+            overflow: hidden;
-            overflow-x: hidden;
             z-index: 1;
             background-color: var(--theme-background-color);
             display: flex;
@@ -94,8 +95,7 @@
 
             display: flex;
             flex-direction: row;
-            overflow-y: auto;
+            overflow: hidden auto;
-            overflow-x: hidden;
             position: relative;
         }