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

.stylelintrc.json

@@ -5,7 +5,7 @@
     "alpha-value-notation": "number",
     "function-name-case": "lower",
     "selector-class-pattern": [
-      "^_?(adf|adf-|aca-|app|app-|cdk-||mat-|material-)",
+      "^_?(adf|adf-|aca-|app|app-)",
       {
         "resolveNestedSelectors": true
       }

package.json

@@ -34,11 +34,11 @@
   },
   "private": true,
   "dependencies": {
-    "@alfresco/adf-content-services": "6.7.0-7828326288",
-    "@alfresco/adf-core": "6.7.0-7828326288",
-    "@alfresco/adf-extensions": "6.7.0-7828326288",
-    "@alfresco/eslint-plugin-eslint-angular": "6.7.0-7828326288",
-    "@alfresco/js-api": "7.6.0-7828326288",
+    "@alfresco/adf-content-services": "6.7.0-7885225129",
+    "@alfresco/adf-core": "6.7.0-7885225129",
+    "@alfresco/adf-extensions": "6.7.0-7885225129",
+    "@alfresco/eslint-plugin-eslint-angular": "6.7.0-7885225129",
+    "@alfresco/js-api": "7.6.0-7885225129",
     "@angular/animations": "14.1.3",
     "@angular/cdk": "14.1.3",
     "@angular/common": "14.1.3",
@@ -66,7 +66,7 @@
     "zone.js": "0.11.8"
   },
   "devDependencies": {
-    "@alfresco/adf-cli": "6.7.0-7828326288",
+    "@alfresco/adf-cli": "6.7.0-7885225129",
     "@angular-devkit/build-angular": "14.2.11",
     "@angular-devkit/core": "14.1.2",
     "@angular-devkit/schematics": "14.1.2",

projects/aca-content/folder-rules/src/rule-details/conditions/rule-simple-condition.ui-component.html

@@ -11,7 +11,7 @@
     </mat-select>
   </mat-form-field>
 
-  <mat-form-field class="aca-rule-simple-condition__form__comparator-input" [class]="{ 'aca-hidden': isComparatorHidden }" data-automation-id="comparator-form-field">
+  <mat-form-field class="aca-rule-simple-condition__form__field-input aca-rule-simple-condition__form__comparator-input" [class]="{ 'aca-hidden': isComparatorHidden }" data-automation-id="comparator-form-field">
     <mat-select formControlName="comparator" data-automation-id="comparator-select">
       <mat-option
         *ngFor="let comparator of selectedFieldComparators"
@@ -21,7 +21,7 @@
     </mat-select>
   </mat-form-field>
 
-  <mat-form-field class="aca-rule-simple-condition__form__parameter-input" [ngSwitch]="selectedField.type">
+  <mat-form-field class="aca-rule-simple-condition__form__field-input aca-rule-simple-condition__form__parameter-input" [ngSwitch]="selectedField.type">
     <mat-select formControlName="parameter" data-automation-id="simple-condition-value-select" *ngSwitchCase="'mimeType'">
       <mat-option *ngFor="let mimeType of mimeTypes"
         [value]="mimeType.value">

projects/aca-content/folder-rules/src/rule-details/conditions/rule-simple-condition.ui-component.scss

@@ -4,7 +4,7 @@
     flex-direction: row;
     gap: 8px;
 
-    mat-form-field {
+    .aca-rule-simple-condition__form__field-input {
       flex: 2;
       font-size: inherit;
     }

projects/aca-content/folder-rules/src/rule-details/edit-rule-dialog.ui-component.html

@@ -3,7 +3,7 @@
     {{ title | translate }}
   </div>
   <button mat-icon-button mat-dialog-close class="aca-edit-rule-dialog__header__close" tabindex="-1">
-    <mat-icon>close</mat-icon>
+    <mat-icon class="aca-edit-rule-dialog__header__icon">close</mat-icon>
   </button>
 </div>
 

projects/aca-content/folder-rules/src/rule-details/edit-rule-dialog.ui-component.scss

@@ -20,7 +20,7 @@
     }
 
     &__close {
-      & mat-icon {
+      & .aca-edit-rule-dialog__header__icon {
         font-size: 18px;
       }
     }

projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.scss

@@ -73,6 +73,7 @@
       }
     }
 
+    /* stylelint-disable selector-class-pattern */
     &.aca-read-only,
     .mat-form-field-disabled {
       .mat-form-field-underline,

projects/aca-content/folder-rules/src/rule-list/rule-list/rule-list.ui-component.html

@@ -13,7 +13,7 @@
 
     <span class="aca-rule-list__item__header__title">
       {{ 'ACA_FOLDER_RULES.RULE_LIST.INHERITED_RULES' | translate }}
-      <mat-icon class="aca-rule-list__item__header__title__mat-icon" [matTooltip]="'ACA_FOLDER_RULES.RULE_LIST.INHERITED_RULES_WILL_BE_RUN_FIRST' | translate">
+      <mat-icon class="aca-rule-list__item__header__title__icon" [matTooltip]="'ACA_FOLDER_RULES.RULE_LIST.INHERITED_RULES_WILL_BE_RUN_FIRST' | translate">
         info
       </mat-icon>
     </span>

projects/aca-content/folder-rules/src/rule-list/rule-list/rule-list.ui-component.scss

@@ -35,7 +35,7 @@
         justify-content: flex-start;
         flex: 1;
 
-        &__mat-icon {
+        &__icon {
           transform: scale(0.8);
         }
       }

projects/aca-content/src/lib/components/details/details.component.html

@@ -12,7 +12,7 @@
             <img class="aca-details-breadcrumb-icon" alt="{{ 'APP.INFO_DRAWER.ICON' | translate }}" src="{{ nodeIcon }}">
             {{ node.name }} </span>
         </div>
-        <div class="acs-details-buttons">
+        <div class="aca-details-buttons">
           <aca-toolbar [items]="aspectActions" info-drawer-buttons></aca-toolbar>
           <button
                 class="aca-close-details-button"

projects/aca-content/src/lib/components/details/details.component.scss

@@ -1,5 +1,5 @@
 app-details-manager {
-  .acs-details-buttons {
+  .aca-details-buttons {
     display: flex;
 
     .aca-close-details-button {
@@ -26,21 +26,19 @@ app-details-manager {
   margin-top: 40px;
   height: calc(100% - 136px);
 
-  .mat-tab-body-wrapper {
+  > div {
     height: 100%;
   }
 
-  .mat-tab-list {
-    margin-left: 50px;
-
-    .mat-tab-labels {
-      .mat-tab-label {
-        padding: 0 12px;
-        min-width: 95px;
-        letter-spacing: 0.25px;
-        height: 32px;
-      }
+  div[role='tab'] {
+    &:first-of-type {
+      margin-left: 50px;
     }
+
+    padding: 0 12px;
+    min-width: 95px;
+    letter-spacing: 0.25px;
+    height: 32px;
   }
 }
 

projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.html

@@ -6,7 +6,7 @@
     (click)="searchSubmit(searchTerm)"
     [title]="'SEARCH.BUTTON.TOOLTIP' | translate"
   >
-    <mat-icon class="app-search-button-icon" [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
+    <mat-icon class="app-search-input-control-icon app-search-button-icon" [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
   </button>
   <mat-form-field class="app-input-form-field" [floatLabel]="'never'">
     <input
@@ -23,7 +23,7 @@
       autocomplete="off"
     />
     <div matSuffix class="app-suffix-search-icon-wrapper">
-      <mat-icon *ngIf="searchTerm.length" (click)="clear()" class="app-clear-icon">clear</mat-icon>
+      <mat-icon *ngIf="searchTerm.length" (click)="clear()" class="app-search-input-control-icon app-clear-icon">clear</mat-icon>
     </div>
   </mat-form-field>
 </div>

projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.scss

@@ -5,7 +5,7 @@ $top-margin: 12px;
   margin: 14px 1px;
   float: left;
 
-  mat-icon {
+  .app-search-input-control-icon {
     font-size: 24px;
     cursor: pointer;
   }
@@ -24,16 +24,13 @@ $top-margin: 12px;
   box-sizing: border-box;
   margin-bottom: 12px;
 
+  /* stylelint-disable-next-line selector-class-pattern */
   .mat-form-field-underline {
     display: none;
   }
 
-  .mat-form-field-label-wrapper {
+  label {
     cursor: text;
-  }
-
-  // fixes pointer event on FF
-  &.app-search-menu-trigger .mat-form-field-label-wrapper {
     pointer-events: auto;
   }
 

projects/aca-content/src/lib/components/search/search-input/search-input.component.scss

@@ -78,24 +78,26 @@ $top-margin: 12px;
   letter-spacing: -0.7px;
   margin-bottom: -8px;
 
+  .app-search-options-checkbox label {
+    max-width: 155px;
+  }
+
   &-checkbox {
     padding: 3px 24px 3px 19px;
 
+    /* stylelint-disable-next-line selector-class-pattern */
     .mat-checkbox-inner-container {
       height: 18px;
       width: 18px;
     }
 
-    .mat-checkbox-label {
+    /* stylelint-disable-next-line no-descending-specificity */
+    label {
       padding: 0 0 0 11px;
       overflow: hidden;
       text-overflow: ellipsis;
     }
   }
-
-  .app-search-options-checkbox label {
-    max-width: 155px;
-  }
 }
 
 .app-search-hint {
@@ -122,17 +124,17 @@ $top-margin: 12px;
   #search-options {
     padding-left: 20px;
 
-    mat-checkbox {
+    label {
+      max-width: 105px;
+    }
+
+    .app-search-options-checkbox {
       padding: 3px 20px 3px 0;
 
-      .mat-checkbox-label {
+      label {
         padding: 0;
       }
     }
-
-    label {
-      max-width: 105px;
-    }
   }
 }
 

projects/aca-content/src/lib/components/search/search-results/search-results.component.scss

@@ -45,10 +45,10 @@ aca-search-results {
             color: var(--theme-search-chip-icon-color);
           }
 
-          mat-icon {
-            color: var(--theme-search-chip-icon-color);
-          }
+        .adf-search-filter-chip-icon {
+          color: var(--theme-search-chip-icon-color);
         }
+      }
 
         .adf-search-filter-placeholder {
           color: var(--theme-selected-text-color);