[ACS-7351] ng15 Manage rules fixes (#3751)

* [ACS-7351] ng15 manage rules fixes

* [ACS-7351] cr fix

* [ACS-7351] cr fix

projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.scss

@@ -49,7 +49,7 @@
         z-index: 1;
         display: flex;
         flex-direction: row;
-        align-items: center;
+        align-items: flex-start;
         overflow-x: auto;
         justify-content: space-between;
         padding: 12px 20px;
@@ -75,7 +75,7 @@
           }
         }
 
-        &__buttons {
+        .aca-manage-rules__container__rule-details__header__buttons {
           display: flex;
           flex-direction: row;
           align-items: stretch;
@@ -86,7 +86,16 @@
 
             &#delete-rule-btn {
               padding: 0 8px;
+              margin: 0;
               min-width: unset;
+
+              mat-icon {
+                margin: 0;
+                padding: 0;
+                width: 24px;
+                height: 24px;
+                font-size: 24px;
+              }
             }
           }
         }

projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.ts

@@ -176,8 +176,13 @@ export class RuleActionUiComponent implements ControlValueAccessor, OnInit, OnCh
   ngOnChanges(changes: SimpleChanges): void {
     const readOnly = changes['readOnly']?.currentValue;
     if (readOnly !== undefined && readOnly !== null) {
-      this.readOnly = readOnly;
+      if (readOnly) {
-      this.setDisabledState(readOnly);
+        this.readOnly = true;
+        this.form.disable();
+      } else {
+        this.readOnly = false;
+        this.form.enable();
+      }
     }
   }
 
@@ -337,16 +342,6 @@ export class RuleActionUiComponent implements ControlValueAccessor, OnInit, OnCh
     });
   }
 
-  setDisabledState(isDisabled: boolean) {
-    if (isDisabled) {
-      this.readOnly = true;
-      this.form.disable();
-    } else {
-      this.readOnly = false;
-      this.form.enable();
-    }
-  }
-
   private parseConstraintsToSelectOptions(constraints: ConstraintValue[]): CardViewSelectItemOption<unknown>[] {
     return constraints
       .sort((a, b) => {

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

@@ -8,7 +8,7 @@
     flex-direction: column;
   }
 
-  &.aca-read-only &__checkbox label > span:first-child {
+  &.aca-read-only &__checkbox > div > div:first-child {
     display: none;
   }
 

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

@@ -81,6 +81,10 @@
       .mat-mdc-select-disabled .mat-mdc-select-value {
         color: inherit;
       }
+
+      .mat-mdc-select-arrow-wrapper {
+        display: none;
+      }
     }
   }
 }

projects/aca-content/src/lib/ui/overrides/ay11.scss

@@ -101,50 +101,30 @@
     }
   }
 
-  // TODO investigate after app is run
+  .mat-mdc-slide-toggle .mdc-form-field {
-  .mat-mdc-slide-toggle {
+    .mdc-switch .mdc-switch__handle {
-    /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
-    .mat-slide-toggle-thumb {
       width: 15px;
       height: 15px;
       transform: translate(20%, 50%);
       background-color: #484a4d;
     }
 
-    /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
+    .mdc-switch .mdc-switch__track {
-    .mat-slide-toggle-bar {
       border-radius: 15px;
       height: 20px;
     }
 
-    /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
+    .mdc-switch__handle-track {
-    .mat-slide-toggle-thumb-container {
+      top: -15px;
-      top: -5px;
     }
 
-    /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
+    .mdc-switch__ripple {
-    .mat-slide-toggle-ripple {
       display: none;
     }
+  }
 
-    &.cdk-keyboard-focused {
+  .mat-mdc-slide-toggle.cdk-keyboard-focused .mdc-form-field .mdc-switch .mdc-switch__track {
-      /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
+    outline: 2px solid var(--theme-blue-button-color);
-      .mat-slide-toggle-bar {
-        outline: 2px solid var(--theme-blue-button-color);
-      }
-    }
-
-    &.mat-primary.mat-checked:not(.mat-disabled) {
-      /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
-      .mat-slide-toggle-bar {
-        background-color: var(--theme-blue-button-color);
-      }
-
-      /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
-      .mat-slide-toggle-thumb {
-        background-color: white;
-      }
-    }
   }
 
   .mat-mdc-outlined-button,

projects/aca-content/src/lib/ui/theme.scss

@@ -18,6 +18,19 @@ mat-icon {
   color: var(--theme-secondary-text);
 }
 
+mat-slide-toggle {
+  .mdc-switch__icons {
+    display: none;
+  }
+
+  .mdc-switch--unselected.mdc-switch:enabled .mdc-switch__track::before,
+  .mdc-switch--unselected.mdc-switch:enabled:active .mdc-switch__track::before,
+  .mdc-switch--unselected.mdc-switch:enabled:focus:not(:active) .mdc-switch__track::before,
+  .mdc-switch--unselected.mdc-switch:enabled:hover:not(:focus:active) .mdc-switch__track::before {
+    background: var(--adf-theme-foreground-disabled-text-color);
+  }
+}
+
 .mat-mdc-tab-list {
   .mat-mdc-tab-labels {
     .mdc-tab--active {