fix: ui-tree-select styles

Author: Andrei Caleniuc

projects/angular/components/ui-tree-select/src/ui-tree-item/ui-tree-item.component.spec.ts

@@ -1,12 +1,16 @@
+import { range } from 'lodash-es';
+
 import {
-  Component, NO_ERRORS_SCHEMA, ViewChild,
+    Component,
+    NO_ERRORS_SCHEMA,
+    ViewChild,
 } from '@angular/core';
 import {
-  ComponentFixture, TestBed,
+    ComponentFixture,
+    TestBed,
 } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { UiTreeItemComponent } from '@uipath/angular/components/ui-tree-select';
-import { range } from 'lodash-es';
 
 @Component({
   template: `<ui-tree-item
@@ -95,16 +99,16 @@ describe('UiTreeItemComponent', () => {
     expect(component.expanded).toHaveBeenCalled();
   });
 
-  it('should focus the inner mat-list-item component', () => {
-    const matListItem = fixture.nativeElement.querySelector('.mat-list-item');
+  it('should focus the inner list item component', () => {
+    const matListItem = fixture.nativeElement.querySelector('.mat-mdc-list-item');
     expect(document.activeElement).not.toBe(matListItem);
     component.treeItemComponent?.focus();
     fixture.detectChanges();
     expect(document.activeElement).toBe(matListItem);
   });
 
   it('should forward values for getBoundingClientRect', () => {
-    const matListItem = fixture.nativeElement.querySelector('.mat-list-item');
+    const matListItem = fixture.nativeElement.querySelector('.mat-mdc-list-item');
     expect(component.treeItemComponent?.getBoundingClientRect()).toEqual(matListItem.getBoundingClientRect());
   });
 });

projects/angular/components/ui-tree-select/src/ui-tree-item/ui-tree-item.component.ts

@@ -1,19 +1,22 @@
 import { FocusableOption } from '@angular/cdk/a11y';
 import { CommonModule } from '@angular/common';
 import {
-  Component,
-  ChangeDetectionStrategy,
-  Input,
-  ViewEncapsulation,
-  ElementRef,
-  forwardRef,
-  Inject,
-  Output,
-  EventEmitter,
+    ChangeDetectionStrategy,
+    Component,
+    ElementRef,
+    EventEmitter,
+    forwardRef,
+    Inject,
+    Input,
+    Output,
+    ViewEncapsulation,
 } from '@angular/core';
 import { MatListModule } from '@angular/material/list';
+
 import { IFlatNodeObject } from '../models/tree.models';
 
+const LIST_ITEM_SELECTOR = '.mat-mdc-list-item';
+
 @Component({
   standalone: true,
   imports: [
@@ -53,10 +56,10 @@ export class UiTreeItemComponent implements FocusableOption {
   }
 
   focus() {
-    this._el.nativeElement.querySelector('.mat-list-item').focus();
+    this._el.nativeElement.querySelector(LIST_ITEM_SELECTOR).focus();
   }
 
   getBoundingClientRect() {
-    return this._el.nativeElement.querySelector('.mat-list-item').getBoundingClientRect();
+    return this._el.nativeElement.querySelector(LIST_ITEM_SELECTOR).getBoundingClientRect();
   }
 }

projects/angular/components/ui-tree-select/src/ui-tree-select.component.scss

@@ -1,8 +1,11 @@
 .tree-item-container {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
   height: 100%;
+
+  .mdc-list-item__primary-text {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
 }
 
 @mixin perLevelPadding($level, $padding) {