[ACS-6140] - Remove references to internal Angular Material CSS class…

…es (#9271)
Alfresco · Feb 9, 2024 · 6d93d01 · 6d93d01
1 parent 9343fe6
commit 6d93d01
Show file tree

Hide file tree

Showing 137 changed files with 631 additions and 989 deletions.
diff --git a/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.html b/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.html
@@ -13,7 +13,7 @@ <h1 class="adf-aspect-list-dialog-title">{{title | translate}}</h1>
     </adf-aspect-list>
 </mat-dialog-content>
 
-<mat-dialog-actions>
+<mat-dialog-actions class="adf-aspect-list-dialog">
     <div>
         <button mat-button (click)="aspectList.reset()" id="aspect-list-dialog-actions-reset"
             data-automation-id="aspect-list-dialog-actions-reset">{{

diff --git a/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.scss b/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.scss
@@ -19,21 +19,25 @@
     }
 
     &-aspect-list-dialog {
-        .mat-dialog-actions {
-            justify-content: space-between;
-        }
+        justify-content: space-between;
     }
 
     &-aspect-dialog-content {
         padding-top: 3px;
 
         .adf-aspect-property-table {
-            .mat-cell {
+            .adf-aspect-property-table-cell {
                 font-size: smaller;
             }
 
-            .mat-column-name {
-                width: 30%;
+            .adf-aspect-property-table-column {
+                &-name {
+                    width: 30%;
+                }
+
+                &-title {
+                    width: 50%;
+                }
             }
         }
     }

diff --git a/lib/content-services/src/lib/aspect-list/aspect-list.component.html b/lib/content-services/src/lib/aspect-list/aspect-list.component.html
@@ -1,34 +1,39 @@
 <div id="aspect-list-container" class="adf-aspect-list-container" *ngIf="aspects$ | async as aspects; else loading">
     <mat-accordion class="adf-accordion-aspect-list">
-        <mat-expansion-panel *ngFor="let aspect of aspects; let colIndex = index" [id]="'aspect-list-'+getId(aspect)">
-            <mat-expansion-panel-header [id]="'aspect-list-'+(getId(aspect))+'header'">
-                <mat-panel-title>
+        <mat-expansion-panel *ngFor="let aspect of aspects; let colIndex = index"
+                             [id]="'aspect-list-'+getId(aspect)"
+                             class="adf-accordion-aspect-list-expansion-panel">
+            <mat-expansion-panel-header class='adf-accordion-aspect-list-expansion-panel-header'
+                                        [id]="'aspect-list-'+(getId(aspect))+'header'">
+                <mat-panel-title class="adf-accordion-aspect-list-expansion-panel-header-title">
                     <mat-checkbox class="adf-aspect-list-check-button" [id]="'aspect-list-'+colIndex+'-check'"
                                   [checked]="nodeAspects?.includes(aspect?.entry?.id)"
                                   (click)="onCheckBoxClick($event)"
                                   (change)="onChange($event, aspect?.entry?.id)">
                                   <p class="adf-aspect-list-element-title">{{getTitle(aspect)}}</p>
                     </mat-checkbox>
                 </mat-panel-title>
-                <mat-panel-description [id]="'aspect-list-'+colIndex+'-title'"
-                                        [matTooltip]="getTitle(aspect)">
+                <mat-panel-description
+                    class="adf-accordion-aspect-list-expansion-panel-header-description"
+                    [id]="'aspect-list-'+colIndex+'-title'"
+                    [matTooltip]="getTitle(aspect)">
                     {{getTitle(aspect)}}
                 </mat-panel-description>
             </mat-expansion-panel-header>
             <p class="adf-property-paragraph" [id]="'aspect-list-'+colIndex+'-description'"> {{aspect?.entry?.description}}</p>
 
             <table mat-table [dataSource]="aspect?.entry?.properties" *ngIf="aspect?.entry?.properties?.length > 0" class="adf-aspect-property-table" [id]="'aspect-list-'+colIndex+'-properties-table'">
                 <ng-container matColumnDef="name">
-                  <th mat-header-cell *matHeaderCellDef> {{'ADF-ASPECT-LIST.PROPERTY_NAME' | translate}} </th>
-                  <td mat-cell *matCellDef="let property"> {{property.id}} </td>
+                  <th class="adf-aspect-property-table-column-name" mat-header-cell *matHeaderCellDef> {{'ADF-ASPECT-LIST.PROPERTY_NAME' | translate}} </th>
+                  <td class="adf-aspect-property-table-column-name adf-aspect-property-table-cell" mat-cell *matCellDef="let property"> {{property.id}} </td>
                 </ng-container>
                 <ng-container matColumnDef="title">
-                  <th mat-header-cell *matHeaderCellDef> {{'ADF-ASPECT-LIST.DESCRIPTION' | translate}} </th>
-                  <td mat-cell *matCellDef="let property"> {{property.title}} </td>
+                  <th class="adf-aspect-property-table-column-title" mat-header-cell *matHeaderCellDef> {{'ADF-ASPECT-LIST.DESCRIPTION' | translate}} </th>
+                  <td class="adf-aspect-property-table-column-title adf-aspect-property-table-cell" mat-cell *matCellDef="let property"> {{property.title}} </td>
                 </ng-container>
                 <ng-container matColumnDef="dataType">
-                  <th mat-header-cell *matHeaderCellDef> {{'ADF-ASPECT-LIST.DATA_TYPE' | translate}} </th>
-                  <td mat-cell *matCellDef="let property"> {{property.dataType}} </td>
+                  <th class="adf-aspect-property-table-column-data-type" mat-header-cell *matHeaderCellDef> {{'ADF-ASPECT-LIST.DATA_TYPE' | translate}} </th>
+                  <td class="adf-aspect-property-table-column-data-type adf-aspect-property-table-cell" mat-cell *matCellDef="let property"> {{property.dataType}} </td>
                 </ng-container>
                 <tr mat-header-row *matHeaderRowDef="propertyColumns"></tr>
                 <tr mat-row *matRowDef="let row; columns: propertyColumns;"></tr>

diff --git a/lib/content-services/src/lib/aspect-list/aspect-list.component.scss b/lib/content-services/src/lib/aspect-list/aspect-list.component.scss
@@ -23,20 +23,18 @@
             align-items: center;
         }
 
-        .adf-accordion-aspect-list {
-            .mat-expansion-panel-spacing {
-                margin: 0;
-            }
+        .adf-accordion-aspect-list-expansion-panel {
+            margin: 0;
 
-            .mat-expansion-panel-header {
+            &-header {
                 font-size: smaller;
             }
 
-            .mat-expansion-panel-header-title {
+            &-header-title {
                 flex: 1 1 0;
             }
 
-            .mat-expansion-panel-header-description {
+            &-header-description {
                 justify-content: flex-start;
                 align-items: center;
                 flex: 1 1 0;
@@ -50,17 +48,19 @@
     &-aspect-property-table {
         width: 100%;
 
-        .mat-column-name {
-            width: 15%;
-        }
+        .adf-aspect-property-table-column {
+            &-name {
+                width: 15%;
+            }
 
-        .mat-column-description {
-            width: 65%;
-        }
+            &-title {
+                width: 65%;
+            }
 
-        .mat-column-type {
-            width: 20%;
-            padding-left: 10px;
+            &-data-type {
+                width: 20%;
+                padding-left: 10px;
+            }
         }
     }
 }
diff --git a/lib/content-services/src/lib/breadcrumb/breadcrumb.component.scss b/lib/content-services/src/lib/breadcrumb/breadcrumb.component.scss
@@ -23,10 +23,6 @@
             height: 0;
             overflow: hidden;
             margin-top: 35px;
-
-            &.mat-select {
-                width: 0;
-            }
         }
 
         &-trigger {
@@ -100,18 +96,6 @@
             font-size: var(--theme-adf-icon-1-font-size);
         }
 
-        &.mat-primary {
-            color: var(--theme-primary-color);
-        }
-
-        &.mat-accent {
-            color: var(--theme-accent-color);
-        }
-
-        &.mat-warn {
-            color: var(--theme-warn-color);
-        }
-
         &-anchor {
             box-sizing: border-box;
             color: inherit;

diff --git a/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.html b/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.html
@@ -9,15 +9,16 @@
         (click)="open()"
         [attr.aria-label]="'BREADCRUMB.ARIA-LABEL.DROPDOWN' | translate"
         data-automation-id="dropdown-breadcrumb-trigger">
-        <mat-icon [class.adf-isRoot]="!hasPreviousNodes()">folder</mat-icon>
+        <mat-icon class="adf-dropdown-breadcrumb-icon" [class.adf-isRoot]="!hasPreviousNodes()">folder</mat-icon>
     </button>
 
-    <mat-icon class="adf-dropdown-breadcrumb-item-chevron">chevron_right</mat-icon>
+    <mat-icon class="adf-dropdown-breadcrumb-icon adf-dropdown-breadcrumb-item-chevron">chevron_right</mat-icon>
 
     <div class="adf-dropdown-breadcrumb-path">
         <mat-select
             #dropdown
             *ngIf="hasPreviousNodes()"
+            class="adf-dropdown-breadcrumb-path-select"
             tabindex="-1"
             data-automation-id="dropdown-breadcrumb-path"
             aria-labelledby="dropdown-breadcrumb-button">
@@ -26,7 +27,7 @@
                 *ngFor="let node of previousNodes;"
                 (click)="onRoutePathClick(node, $event)"
                 (onSelectionChange)="onRouteClick(node)"
-                class="adf-dropdown-breadcrumb-path-option"
+                class="adf-dropdown-breadcrumb-path-option adf-dropdown-breadcrumb-path-option-node"
                 data-automation-class="dropdown-breadcrumb-path-option"
                 [disabled]="readOnly">
                 {{ node.name | translate }}

diff --git a/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.scss b/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.scss
@@ -12,7 +12,7 @@ $dropdown-horizontal-offset: 30px;
         overflow: hidden;
         margin-top: 10px;
 
-        .mat-icon {
+        &-icon {
             height: 35px;
         }
 
@@ -49,7 +49,7 @@ $dropdown-horizontal-offset: 30px;
         overflow: hidden;
         margin-top: 35px;
 
-        &.mat-select {
+        &-select {
             width: 0;
         }
     }
@@ -63,18 +63,18 @@ $dropdown-horizontal-offset: 30px;
         color: var(--adf-theme-foreground-text-color);
     }
 
-    &-dropdown-breadcrumb-path-option.mat-option {
+    &-dropdown-breadcrumb-path-option.adf-dropdown-breadcrumb-path-option-node {
         height: 28px;
         line-height: 28px;
         padding: 0 12px;
         font-size: var(--theme-caption-font-size);
     }
 
-    &-dropdown-breadcrumb-path-option.mat-option:first-child {
+    &-dropdown-breadcrumb-path-option.adf-dropdown-breadcrumb-path-option-node:first-child {
         padding-top: 4px;
     }
 
-    &-dropdown-breadcrumb-path-option.mat-option:last-child {
+    &-dropdown-breadcrumb-path-option.adf-dropdown-breadcrumb-path-option-node:last-child {
         padding-bottom: 4px;
     }
 }

diff --git a/...tent-services/src/lib/category/categories-management/categories-management.component.html b/...tent-services/src/lib/category/categories-management/categories-management.component.html
@@ -43,24 +43,25 @@
             <p class="adf-existing-categories-label">
                 {{ existingCategoriesMsg | translate }}
             </p>
-            <mat-selection-list
+            <mat-list
                 [disabled]="isCRUDMode"
-                (selectionChange)="addCategoryToAssign($event)">
-                <mat-list-option
+                class="adf-categories-management-list">
+                <mat-list-item
                     *ngFor="let category of existingCategories"
                     class="adf-category"
-                    [value]="category">
+                    (click)='addCategoryToAssign(category)'>
                     {{ category.name }}
-                </mat-list-option>
+                </mat-list-item>
                 <p *ngIf="!existingCategories?.length && !existingCategoriesLoading"
                    data-automation-id="no-categories-message">
                     {{ 'CATEGORIES_MANAGEMENT.NO_EXISTING_CATEGORIES' | translate }}
                 </p>
-            </mat-selection-list>
+            </mat-list>
         </ng-container>
         <mat-spinner
             *ngIf="existingCategoriesLoading"
             [diameter]="50"
+            class="adf-categories-management-spinner"
             [attr.aria-label]="'CATEGORIES_MANAGEMENT.LOADING' | translate">
         </mat-spinner>
     </div>

diff --git a/...tent-services/src/lib/category/categories-management/categories-management.component.scss b/...tent-services/src/lib/category/categories-management/categories-management.component.scss
@@ -37,26 +37,20 @@
 }
 
 .adf-categories-list {
-    .mat-list-base .mat-list-item,
-    .mat-list-base .mat-list-option {
+    .adf-categories-management-list .adf-category {
         display: flex;
         height: 100%;
         overflow-wrap: anywhere;
         padding: 5px 0;
         font-size: 14px;
 
-        &.mat-list-item-disabled {
-            background-color: inherit;
-            color: inherit;
+        &:hover {
+            cursor: pointer;
+            background: var(--adf-theme-mat-grey-color-a200);
         }
 
-        .mat-list-item-content,
-        .mat-list-item-content-reverse {
+        & span {
             padding: 0;
-
-            .mat-pseudo-checkbox {
-                display: none;
-            }
         }
     }
 
@@ -66,7 +60,7 @@
         margin-bottom: 2px;
     }
 
-    mat-spinner {
+    .adf-categories-management-spinner {
         margin: auto;
     }
 }

diff --git a/...t-services/src/lib/category/categories-management/categories-management.component.spec.ts b/...t-services/src/lib/category/categories-management/categories-management.component.spec.ts
@@ -19,7 +19,7 @@ import { Category, CategoryPaging, ResultNode, ResultSetPaging } from '@alfresco
 import { ComponentFixture, discardPeriodicTasks, fakeAsync, flush, TestBed, tick } from '@angular/core/testing';
 import { Validators } from '@angular/forms';
 import { MatError } from '@angular/material/form-field';
-import { MatListOption, MatSelectionList } from '@angular/material/list';
+import { MatList } from '@angular/material/list';
 import { By } from '@angular/platform-browser';
 import { TranslateModule } from '@ngx-translate/core';
 import { of, Subject } from 'rxjs';
@@ -91,8 +91,8 @@ describe('CategoriesManagementComponent', () => {
      *
      * @returns list of material option element
      */
-    function getExistingCategoriesList(): MatListOption[] {
-        return fixture.debugElement.queryAll(By.directive(MatListOption))?.map((debugElem) => debugElem.componentInstance);
+    function getExistingCategoriesList(): HTMLElement[] {
+        return fixture.debugElement.queryAll(By.css('.adf-category'))?.map((debugElem) => debugElem.nativeElement);
     }
 
     /**
@@ -129,8 +129,8 @@ describe('CategoriesManagementComponent', () => {
      *
      * @returns material selection list
      */
-    function getSelectionList(): MatSelectionList {
-        return fixture.debugElement.query(By.directive(MatSelectionList)).componentInstance;
+    function getSelectionList(): MatList {
+        return fixture.debugElement.query(By.directive(MatList)).componentInstance;
     }
 
     /**
@@ -159,7 +159,7 @@ describe('CategoriesManagementComponent', () => {
      * @returns native element
      */
     function getCreateCategoryLabel(): HTMLSpanElement {
-        return fixture.debugElement.query(By.css('.adf-existing-categories-panel span'))?.nativeElement;
+        return fixture.debugElement.query(By.css('.adf-create-category-label'))?.nativeElement;
     }
 
     /**
@@ -323,7 +323,7 @@ describe('CategoriesManagementComponent', () => {
 
         it('should not display create category label', fakeAsync(() => {
             typeCategory('test');
-
+            fixture.detectChanges();
             expect(getCreateCategoryLabel()).toBeUndefined();
         }));
 
@@ -338,7 +338,7 @@ describe('CategoriesManagementComponent', () => {
             typeCategory('test');
             const options = getExistingCategoriesList();
             // eslint-disable-next-line no-underscore-dangle
-            options[0]._handleClick();
+            options[0].click();
 
             expect(component.categories.length).toBe(3);
             expect(component.categories[2].name).toBe('testCat');
@@ -352,7 +352,7 @@ describe('CategoriesManagementComponent', () => {
             typeCategory('test');
             const options = getExistingCategoriesList();
             // eslint-disable-next-line no-underscore-dangle
-            options[0]._handleClick();
+            options[0].click();
             fixture.detectChanges();
 
             const categoriesChangeSpy = spyOn(component.categoriesChange, 'emit').and.callThrough();