[ACS-7768] unify inputs and selects across the app (#9687)

* Changed ng version before material migration

* migration for material'

* Fixed most of unit tests failing

* [affected:*][ci:force] Fixing rebase

* [affected:*][ci:force] attempt to fix mat-selectors importing

* [affected:*][ci:force] Fixing the styles - check

* AAE-21392 Fix dropdown form widget style (#9605)

* ACS-7768 Applied new styles for inputs

* ACS-7768 Align icon

* ACS-7768 Input colors based on input state

* ACS-7768 Corrected spaces

* ACS-7768 Styles for selectboxes

* ACS-7768 Fixed label jumping on hovering

* ACS-7768 Style inputs for add permission panel, user role column and comments, styles for inputs without label

* ACS-7768 Style inputs in search filters

* ACS-7768 Set appearance for inputs globally to outline

* ACS-7768 Style inputs for share dialog and login page

* ACS-7768 Style inputs in properties panel

* ACS-7768 Fixed white background when disabled field

* ACS-7768 Moved setting outline appearance for inputs to ACA, fix issue for inputs in permission container

* Revert "[affected:*][ci:force] Fixing the styles - check"

This reverts commit 80d971f7ab.

* Revert "[affected:*][ci:force] attempt to fix mat-selectors importing"

This reverts commit 821d9e1864.

* Revert "[affected:*][ci:force] Fixing rebase"

This reverts commit 378c6c2000.

* Revert "Fixed most of unit tests failing"

This reverts commit 44948e0a28.

* ACS-7768 Reverted unwanted changes

---------

Co-authored-by: Vito Albano <vito.albano@hyland.com>
Co-authored-by: Diogo Bastos <50139916+DiogoABastos@users.noreply.github.com>

lib/content-services/src/lib/category/categories-management/categories-management.component.html

@@ -1,15 +1,15 @@
 <div class="adf-categories-management">
-    <div *ngIf="categoryNameControlVisible" class="adf-category-name-field">
+    <mat-form-field *ngIf="categoryNameControlVisible" class="adf-category-name-field">
+        <mat-label>{{ 'CATEGORIES_MANAGEMENT.CATEGORIES_SEARCH_PLACEHOLDER' | translate }}</mat-label>
         <input #categoryNameInput
             matInput
             autocomplete="off"
             [formControl]="categoryNameControl"
             (keyup.enter)="addCategory()"
-            placeholder="{{'CATEGORIES_MANAGEMENT.CATEGORIES_SEARCH_PLACEHOLDER' | translate }}"
             adf-auto-focus
             />
         <mat-error *ngIf="categoryNameControl.invalid">{{ categoryNameErrorMessageKey | translate }}</mat-error>
-    </div>
+    </mat-form-field>
     <div class="adf-categories-list" [class.adf-categories-list-fixed]="!categoryNameControlVisible">
         <span
             *ngFor="let category of categories"

lib/content-services/src/lib/category/categories-management/categories-management.component.scss

@@ -1,18 +1,6 @@
 .adf-categories-management {
     .adf-category-name-field {
-        justify-content: space-between;
         width: 100%;
-        color: var(--adf-metadata-property-panel-text-color);
-        background: var(--adf-metadata-buttons-background-color);
-        height: 32px;
-        border-radius: 12px;
-        align-items: center;
-
-        input {
-            background-color: transparent;
-            padding: 7px 8px 8px;
-            width: 100%;
-        }
     }
 
     .adf-assigned-categories {

lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss

@@ -9,22 +9,6 @@ $panel-properties-height: 56px !default;
             border: 1px solid var(--adf-metadata-property-panel-border-color);
             border-radius: 12px;
             margin: 12px;
-
-            .adf-property-list .adf-property .adf-property-field {
-                .adf-property-value:not(.adf-card-view-selectitem .adf-property-value) {
-                    margin-top: 10px;
-                    height: 32px;
-
-                    &:is(textarea) {
-                        padding-top: 6px;
-                    }
-                }
-
-                label {
-                    font-size: 19px;
-                    line-height: 20px;
-                }
-            }
         }
 
         .adf-metadata-properties-header {
@@ -39,15 +23,6 @@ $panel-properties-height: 56px !default;
 
         #{$mat-expansion-panel-body} {
             padding-top: 16px;
-
-            input {
-                border-color: transparent;
-                width: 100%;
-
-                &:focus-visible {
-                    outline: none;
-                }
-            }
         }
 
         .adf-edit-icon-buttons {

lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.html

@@ -1,6 +1,5 @@
 <div class="adf-content-node-selector-content">
     <mat-form-field floatPlaceholder="never"
-                    appearance="outline"
                     class="adf-content-node-selector-content-input"
                     subscriptSizing="dynamic"
                     *ngIf="showSearch">

lib/content-services/src/lib/content-node-share/content-node-share.dialog.html

@@ -31,13 +31,13 @@
                     [style.display]="isExpiryDateToggleChecked ? 'block' : 'none'"
                     data-automation-id="adf-slide-toggle-checked"
                     class="adf-share-link__date-time-container">
-                    <mat-form-field class="adf-full-width" subscriptSizing="dynamic" data-automation-id="adf-content-share-expiration-field">
+                    <mat-form-field class="adf-full-width" data-automation-id="adf-content-share-expiration-field">
                         <mat-label>{{ 'SHARE.EXPIRATION-PLACEHOLDER' | translate }}</mat-label>
                         <mat-datepicker-toggle
                             [disabled]="time.disabled"
                             [for]="datePicker"
                             matSuffix
-                            class="adf-share-link__icon adf-share-link__calender-icon">
+                            class="adf-share-link__icon">
                         </mat-datepicker-toggle>
                         <mat-datepicker
                             #datePicker
@@ -75,16 +75,16 @@
                 <mat-form-field
                     subscriptSizing="dynamic"
                     floatLabel="always"
-                    class="adf-full-width adf-share-link__form--field"
+                    class="adf-full-width"
                     data-automation-id="adf-content-share-public-link-field"
                     [ngClass]="isLinkWithExpiryDate? 'adf-share-link__border-color' : ''">
+                    <mat-label>{{ 'SHARE.PUBLIC-LINK' | translate }}</mat-label>
                     <input
                         #sharedLinkInput
                         data-automation-id="adf-share-link"
                         class="adf-share-link__input"
                         matInput
                         cdkFocusInitial
-                        placeholder="{{ 'SHARE.PUBLIC-LINK' | translate }}"
                         [attr.aria-label]="'SHARE.PUBLIC-LINK' | translate"
                         formControlName="sharedUrl"
                         readonly="readonly">

lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss

@@ -34,15 +34,6 @@
 
         &__form {
             padding-top: 8px;
-
-            #{$mat-form-field-infix}:has(.adf-share-link__input) {
-                border-top: 0.9375em solid transparent;
-                height: 16px;
-            }
-
-            &--field {
-                padding-bottom: 16px;
-            }
         }
 
         &__public-content {
@@ -64,12 +55,12 @@
             margin: 8px 0;
 
             &-sharable {
-                margin-bottom: 0;
+                margin-bottom: 14px;
             }
         }
 
         &--sharable-container {
-            margin-bottom: 0;
+            margin-bottom: 14px;
         }
 
         &--header {
@@ -116,23 +107,30 @@
             font-size: 22px;
         }
 
-        &__calender-icon {
-            top: 12px;
-            position: relative;
-            right: -6px;
-
-            svg {
-                height: 18px;
-                width: 18px;
-            }
-        }
-
         &__date-time-container {
-            padding-bottom: 20px;
+            padding-bottom: 2px;
         }
 
         &__border-color {
-            border: 1px solid var(--theme-warn-color-a700);
+            &.adf-full-width {
+                &#{$mat-form-field} {
+                    &#{$mat-form-field-label-always-float} {
+                        &#{$mat-form-field-appearance-outline} {
+                            #{$mat-text-field-outlined}, #{$mat-text-field-outlined}:hover {
+                                #{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing}, #{$mat-notched-outline-notch} {
+                                    border-color: var(--theme-warn-color-a700);
+                                    border-width: 2px;
+                                }
+
+                                #{$mat-notched-outline-notch} {
+                                    border-left: none;
+                                    border-left-width: 0;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
         }
     }
 

lib/content-services/src/lib/dialogs/folder.dialog.html

@@ -4,7 +4,7 @@
 
 <mat-dialog-content class="adf-folder-dialog-content">
     <form [formGroup]="form" (submit)="submit()">
-        <mat-form-field class="adf-full-width" appearance="outline">
+        <mat-form-field class="adf-full-width">
             <mat-label>{{ 'CORE.FOLDER_DIALOG.FOLDER_NAME.LABEL' | translate }}</mat-label>
             <input
                 id="adf-folder-name-input"
@@ -15,7 +15,7 @@
                 adf-auto-focus
             />
 
-            <mat-hint *ngIf="form.controls['name'].dirty">
+            <mat-error *ngIf="form.controls['name'].dirty">
                 <span *ngIf="form.controls['name'].errors?.required">
                     {{ 'CORE.FOLDER_DIALOG.FOLDER_NAME.ERRORS.REQUIRED' | translate }}
                 </span>
@@ -23,10 +23,10 @@
                 <span *ngIf="!form.controls['name'].errors?.required && form.controls['name'].errors?.message">
                     {{ form.controls['name'].errors?.message | translate }}
                 </span>
-            </mat-hint>
+            </mat-error>
         </mat-form-field>
 
-        <mat-form-field class="adf-full-width" appearance="outline">
+        <mat-form-field class="adf-full-width">
             <mat-label>{{ 'CORE.FOLDER_DIALOG.FOLDER_TITLE.LABEL' | translate }}</mat-label>
             <input
                 id="adf-folder-title-input"
@@ -36,7 +36,7 @@
             />
         </mat-form-field>
 
-        <mat-form-field class="adf-full-width" appearance="outline">
+        <mat-form-field class="adf-full-width">
             <mat-label>{{ 'CORE.FOLDER_DIALOG.FOLDER_DESCRIPTION.LABEL' | translate }}</mat-label>
             <textarea
                 id="adf-folder-description-input"

lib/content-services/src/lib/dialogs/library/library.dialog.html

@@ -2,7 +2,7 @@
 
 <mat-dialog-content class="adf-library-dialog-content">
   <form novalidate [formGroup]="form" (submit)="submit()">
-    <mat-form-field class="adf-library-dialog-form-field" appearance="outline">
+    <mat-form-field class="adf-library-dialog-form-field">
       <mat-label>{{ 'LIBRARY.DIALOG.FORM.NAME' | translate }}</mat-label>
       <input
         required
@@ -28,7 +28,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field class="adf-library-dialog-form-field" appearance="outline">
+    <mat-form-field class="adf-library-dialog-form-field">
       <mat-label>{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}</mat-label>
       <input
         required
@@ -46,7 +46,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field class="adf-library-dialog-form-field" appearance="outline">
+    <mat-form-field class="adf-library-dialog-form-field">
       <mat-label>{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}</mat-label>
       <textarea
         matInput

lib/content-services/src/lib/i18n/en.json

@@ -433,10 +433,7 @@
         "WEEKS": "In the last {{value}} weeks",
         "MONTHS": "In the last {{value}} months"
       },
-      "BETWEEN_PLACEHOLDERS": {
+      "BETWEEN_PLACEHOLDER": "Start Date - End Date",
-        "START_DATE": "Start Date",
-        "END_DATE": "End Date"
-      },
       "ERROR": {
         "IN_LAST": "Value required",
         "START_DATE": {

lib/content-services/src/lib/material.module.ts

@@ -88,5 +88,4 @@ import { MatBadgeModule } from '@angular/material/badge';
         MatBadgeModule
     ]
 })
-export class MaterialModule {
+export class MaterialModule {}
-}

lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.html

@@ -1,11 +1,11 @@
-<mat-form-field appearance="outline" floatPlaceholder="never" class="adf-permission-search-input">
+<mat-form-field class="adf-permission-search-input">
+    <mat-label>{{ 'PERMISSION_MANAGER.ADD-PERMISSION.SEARCH' | translate }}</mat-label>
     <input
         matInput
         id="searchInput"
         [formControl]="searchInput"
         type="text"
         title="{{ 'PERMISSION_MANAGER.ADD-PERMISSION.SEARCH' | translate }}"
-        placeholder="{{ 'PERMISSION_MANAGER.ADD-PERMISSION.SEARCH' | translate }}"
         [value]="searchedWord"
     />
 

lib/content-services/src/lib/permission-manager/components/permission-container/permission-container.component.scss

@@ -10,6 +10,10 @@
             position: relative;
         }
 
+        .adf-datatable-row {
+            min-height: 85px;
+        }
+
         .adf-delete-permission-column {
             min-width: 80px;
 

lib/content-services/src/lib/permission-manager/components/user-role-column/user-role-column.component.ts

@@ -45,13 +45,8 @@ import { RoleModel } from '../../models/role.model';
         `
             .adf-role-selector-field.mat-mdc-form-field {
                 width: 100%;
-                height: 40px;
                 max-width: 200px;
 
-                .mat-mdc-form-field-infix {
-                    padding-top: 8px;
-                }
-
                 .mat-mdc-form-field-subscript-wrapper {
                     display: none;
                 }

lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html

@@ -1,4 +1,5 @@
-<mat-form-field class="adf-chip-list" appearance="outline">
+<mat-form-field class="adf-chip-list">
+    <mat-label>{{ placeholder | translate }}</mat-label>
     <mat-chip-grid #chipList [attr.aria-label]="'SEARCH.FILTER.ARIA-LABEL.OPTIONS-SELECTION' | translate">
         <mat-chip-row
             class="adf-option-chips adf-autocomplete-added-option-chips"
@@ -16,7 +17,6 @@
             </button>
         </mat-chip-row>
         <input
-            placeholder="{{ placeholder | translate }}"
             aria-controls="adf-search-chip-autocomplete"
             #optionInput
             [formControl]="formCtrl"

lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss

@@ -4,28 +4,24 @@
 adf-search-chip-autocomplete-input {
     .adf-chip-list {
         width: 100%;
+
+        mat-chip-grid {
+            padding-left: 9px;
+        }
+
+        .adf-search-properties-file-input {
+            margin-left: 0;
+        }
     }
 
     .adf-chip-list:has(#{$mat-notched-outline}) {
-        margin-top: 4px;
+        margin-top: 2px;
     }
 
     #{$mat-form--text-field-infix} {
         border: none;
     }
 
-    .adf-chip-list#{$mat-form-field} {
-        #{$mat-form-field-infix} {
-            padding-top: 14px;
-            padding-bottom: 14px;
-            min-height: unset;
-        }
-    }
-
-    .adf-search-properties-file-input {
-        margin-left: 3px;
-    }
-
     .adf-autocomplete-added-option-chips.adf-option-chips {
         border: 1px solid var(--theme-text-color);
         border-radius: 10px;

lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.html

@@ -28,12 +28,19 @@
       <mat-radio-button [value]="DateRangeType.BETWEEN" data-automation-id="date-range-between">
         {{ 'SEARCH.DATE_RANGE_ADVANCED.OPTIONS.BETWEEN' | translate }}
       </mat-radio-button>
-      <mat-form-field class="adf-search-date-range-form-field" subscriptSizing="dynamic">
+      <mat-form-field class="adf-search-date-range-form-field">
+        <mat-label>{{ 'SEARCH.DATE_RANGE_ADVANCED.BETWEEN_PLACEHOLDER' | translate }}</mat-label>
         <mat-date-range-input [rangePicker]="$any(picker)" [max]="convertedMaxDate">
-          <input matStartDate placeholder="{{ 'SEARCH.DATE_RANGE_ADVANCED.BETWEEN_PLACEHOLDERS.START_DATE' | translate }}"
+          <input
-                 data-automation-id="date-range-between-start-input" [formControl]="betweenStartDateFormControl" (change)="dateChanged($event, betweenStartDateFormControl)">
+              matStartDate
-          <input matEndDate placeholder="{{ 'SEARCH.DATE_RANGE_ADVANCED.BETWEEN_PLACEHOLDERS.END_DATE' | translate }}"
+              data-automation-id="date-range-between-start-input"
-                 data-automation-id="date-range-between-end-input" [formControl]="betweenEndDateFormControl" (change)="dateChanged($event, betweenEndDateFormControl)">
+              [formControl]="betweenStartDateFormControl"
+              (change)="dateChanged($event, betweenStartDateFormControl)">
+          <input
+              matEndDate
+              data-automation-id="date-range-between-end-input"
+              [formControl]="betweenEndDateFormControl"
+              (change)="dateChanged($event, betweenEndDateFormControl)">
         </mat-date-range-input>
         <mat-datepicker-toggle matSuffix [for]="picker" data-automation-id="date-range-between-datepicker-toggle"></mat-datepicker-toggle>
         <mat-date-range-picker #picker></mat-date-range-picker>

lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.scss

@@ -1,14 +1,9 @@
 @import 'styles/mat-selectors';
 
 adf-search-date-range {
-    #{$mat-icon-button}:is(button),
-    #{$mat-icon-button}#{$mat-button-base} {
-        height: 24px;
-    }
-
     .adf-search-date-range-container {
         margin-top: 20px;
-        padding: 10px;
+        padding: 10px 10px 0;
 
         .adf-search-date-range-form-field-select {
             width: 180px;
@@ -23,10 +18,11 @@ adf-search-date-range {
 
             &-date {
                 margin-top: 8px;
-            }
+                align-items: flex-start;
 
-            #{$mat-select-arrow-wrapper} {
+                mat-radio-button {
-                height: unset;
+                    margin-top: 19px;
+                }
             }
 
             .adf-search-date-range-input-field {
@@ -36,12 +32,9 @@ adf-search-date-range {
             .adf-search-date-range-form-field {
                 padding-left: 10px;
                 flex: 1;
-                margin-bottom: 12px;
 
-                #{$mat-form-field-flex} {
+                #{$mat-date-range-input-container} {
-                    #{$mat-form-field-infix} {
+                    justify-content: space-between;
-                        padding: 0.375em 0 4px;
-                    }
                 }
             }
         }

lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.ts

@@ -34,7 +34,6 @@ import { SearchWidgetContainerComponent } from '../../search-widget-container/se
     encapsulation: ViewEncapsulation.None
 })
 export class SearchWidgetChipComponent {
-
     @Input()
     category: SearchCategory;
 

lib/content-services/src/lib/search/components/search-input/search-input.component.html

@@ -1,5 +1,5 @@
 <div class="adf-search-input-container">
-    <mat-form-field appearance="outline">
+    <mat-form-field>
         <mat-label *ngIf="label">{{ label | translate }}</mat-label>
         <input matInput [placeholder]="placeholder | translate" [value]="value" (change)="onSearchInputChanged($event)" />
     </mat-form-field>

lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.html

@@ -1,10 +1,12 @@
 <div class="adf-search-logical-filter-container">
-    <div *ngFor="let field of fields" class="adf-search-input">
+    <mat-form-field *ngFor="let field of fields" class="adf-search-input">
         <mat-label data-automation-id="adf-search-input-label">{{('SEARCH.LOGICAL_SEARCH.' + field + '_LABEL') | translate}}</mat-label>
-        <input type="text"
+        <input
+            type="text"
+            matInput
             [(ngModel)]="searchCondition[LogicalSearchFields[field]]"
-            placeholder="{{ ('SEARCH.LOGICAL_SEARCH.' + field + '_HINT') | translate }}"
             [attr.aria-label]="('SEARCH.LOGICAL_SEARCH.' + field + '_HINT') | translate"
             (change)="onInputChange()"/>
-    </div>
+        <mat-hint>{{ ('SEARCH.LOGICAL_SEARCH.' + field + '_HINT') | translate }}</mat-hint>
+    </mat-form-field>
 </div>

lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.scss

@@ -7,15 +7,5 @@
         &:last-child {
             padding: 0;
         }
-
-        input {
-            height: 25px;
-            border: 1px solid var(--adf-theme-mat-grey-color-a400);
-            border-radius: 5px;
-            margin-top: 5px;
-            padding: 5px;
-            font-size: 14px;
-            color: var(--adf-theme-foreground-text-color);
-        }
     }
 }

lib/content-services/src/lib/search/components/search-properties/search-properties.component.html

@@ -20,7 +20,10 @@
                 </mat-option>
             </mat-select>
         </mat-form-field>
+        <mat-form-field subscriptSizing="dynamic" class="adf-search-properties-file-size">
+            <mat-label>{{ 'SEARCH.SEARCH_PROPERTIES.FILE_SIZE_PLACEHOLDER' | translate }}</mat-label>
             <input
+                matInput
                 [formControl]="form.controls.fileSize"
                 type="number"
                 min="0"
@@ -28,9 +31,9 @@
                 (input)="narrowDownAllowedCharacters($event)"
                 (keydown)="preventIncorrectNumberCharacters($event)"
                 id="adf-search-properties-file-size"
-            [placeholder]="'SEARCH.SEARCH_PROPERTIES.FILE_SIZE_PLACEHOLDER' | translate"
                 (blur)="clearNumberFieldWhenInvalid($event)"
                 data-automation-id="adf-search-properties-file-size-input" />
+        </mat-form-field>
         <mat-form-field class="adf-search-properties-file-size-unit" subscriptSizing="dynamic">
             <mat-select
                 [formControl]="form.controls.fileSizeUnit"

lib/content-services/src/lib/search/components/search-properties/search-properties.component.scss

@@ -7,115 +7,16 @@ adf-search-properties {
             .adf-search-properties-file-size-label {
                 margin-top: 4px;
                 display: block;
+                margin-bottom: 3px;
             }
 
-            #{$mat-text-field--no-label} {
+            .adf-search-properties-file-size {
-                #{$mat-form-field-infix} {
-                    padding-top: 9px;
-                    padding-bottom: 9px;
-                    display: inline-block;
-                }
-            }
-
-            #{$mat-form-field-infix} {
-                height: 37.5px;
-                min-height: 37.5px;
-                display: inline-block;
-            }
-
-            #{$mat-select-trigger} {
-                height: 17.5px;
-            }
-
-            #{$mat-select-arrow-wrapper} {
-                width: 16px;
-            }
-
-            #{$mat-form-field-underline} {
-                &::before {
-                    display: none;
-                }
-            }
-
-            #{$mat-select-arrow} {
-                margin-left: 5px;
-            }
-
-            #{$mat-form-field} {
-                margin-bottom: 18px;
-            }
-        }
-
-        adf-search-chip-autocomplete-input {
-            display: block;
-
-            #{$mat-text-field-outlined} {
-                &-start,
-                &-end {
-                    border-top: 1px solid var(--adf-theme-mat-grey-color-a400);
-                    border-bottom: 1px solid var(--adf-theme-mat-grey-color-a400);
-                }
-
-                &-start {
-                    border-left: 1px solid var(--adf-theme-mat-grey-color-a400);
-                }
-
-                &-end {
-                    border-right: 1px solid var(--adf-theme-mat-grey-color-a400);
-                }
-            }
-
-            #{$mat-focused} {
-                #{$mat-text-field-outlined} {
-                    outline: 2px auto -webkit-focus-ring-color;
-                }
-            }
-
-            #{$mat-form-field-appearance-outline} {
-                #{$mat-text-field-outlined-thick} {
-                    #{$mat-text-field-outlined} {
-                        &-start,
-                        &-end {
-                            border-width: 1px;
-                        }
-                    }
-                }
-            }
-
-            #{$mat-notched-outline-leading} {
-                border-color: var(--adf-theme-foreground-text-color-027);
-            }
-
-            #{$mat-notched-outline-trailing} {
-                border-color: var(--adf-theme-foreground-text-color-027);
-            }
-        }
-    }
-
-    input,
-    .mat-form-field-infix.mat-form-field-infix {
-        height: 25px;
-        border: 1px solid var(--adf-theme-mat-grey-color-a400);
-        border-radius: 5px;
-        margin-top: 5px;
-        padding: 5px;
-        font-size: 14px;
-        color: var(--adf-theme-foreground-text-color);
                 margin-left: 8px;
                 margin-right: 8px;
             }
 
-    .adf-search-properties-file-size-operator,
+            .adf-search-properties-file-size-operator {
-    .adf-search-properties-file-size-unit {
+                min-width: 100px;
-        #{$mat-form-field-infix} {
-            border: 1px solid var(--adf-theme-mat-grey-color-a400);
-            border-radius: 5px;
-            padding: 9px;
-        }
-
-        &#{$mat-focused} {
-            #{$mat-form-field-infix} {
-                outline: 2px auto -webkit-focus-ring-color;
             }
         }
     }

lib/content-services/src/lib/search/components/search-text/search-text.component.html

@@ -1,6 +1,6 @@
 <mat-form-field
     class="adf-search-text-form-field"
-    appearance="outline">
+    subscriptSizing="dynamic">
     <mat-label>{{ settings?.placeholder | translate }}</mat-label>
     <input
         matInput

lib/content-services/src/lib/search/components/search-text/search-text.component.scss

@@ -1,34 +1,8 @@
 @import 'styles/mat-selectors';
 
 .adf-search-text {
-    padding: 0;
+    display: block;
-
+    padding-bottom: 10px;
-    #{$mat-form-field-wrapper} {
-        margin-top: -5px;
-        padding: 0;
-
-        #{$mat-form-field-infix} {
-            padding-bottom: 6px;
-        }
-    }
-
-    #{$mat-notched-outline} {
-        #{$mat-notched-outline-trailing},
-        #{$mat-notched-outline-notch} {
-            border-top: 0 solid;
-            border-left: 0 solid;
-            border-right: 0 solid;
-            border-bottom: 1px solid var(--adf-theme-foreground-secondary-text-color);
-
-            #{$mat-floating-label} {
-                left: 0;
-            }
-        }
-    }
-
-    #{$mat-notched-outline-leading}  {
-        display: none;
-    }
 
     .adf-search-text-form-field {
         width: 100%;

lib/content-services/src/lib/site-dropdown/sites-dropdown.component.html

@@ -1,5 +1,5 @@
 <div id="site-dropdown-container" class="adf-site-dropdown-container">
-    <mat-form-field class="adf-sites-dropdown-form-field" appearance="outline" subscriptSizing="dynamic">
+    <mat-form-field class="adf-sites-dropdown-form-field" subscriptSizing="dynamic">
         <mat-label>{{ 'NODE_SELECTOR.LOCATION' | translate }}</mat-label>
         <mat-select
             adf-infinite-select-scroll

lib/content-services/src/lib/tag/tags-creator/tags-creator.component.html

@@ -1,5 +1,6 @@
 <div class="adf-tags-creation">
-    <div *ngIf="tagNameControlVisible" class="adf-tag-name-field">
+    <mat-form-field *ngIf="tagNameControlVisible" class="adf-tag-name-field">
+        <mat-label>{{ 'TAG.TAGS_CREATOR.TAG_SEARCH_PLACEHOLDER' | translate }}</mat-label>
         <input
             #tagNameInput
             class="adf-tag-search-field"
@@ -8,10 +9,9 @@
             [formControl]="tagNameControl"
             (keyup.enter)="addTag()"
             adf-auto-focus
-            placeholder="{{ 'TAG.TAGS_CREATOR.TAG_SEARCH_PLACEHOLDER' | translate }}"
         />
         <mat-error *ngIf="tagNameControl.invalid && tagNameControl.touched">{{ tagNameErrorMessageKey | translate }} </mat-error>
-    </div>
+    </mat-form-field>
     <p class="adf-no-tags-message" *ngIf="showEmptyTagMessage">
         {{ 'TAG.TAGS_CREATOR.NO_TAGS_CREATED' | translate }}
     </p>

lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss

@@ -29,13 +29,7 @@ adf-tags-creator {
     .adf-tag-name-field[hidden] {
         padding-top: 10px;
         margin-right: 12px;
-    }
+        width: 100%;
-
-    .adf-tag-search-field {
-        background: var(--adf-metadata-buttons-background-color);
-        height: 32px;
-        border-radius: 12px;
-        padding: 0 6px;
     }
 
     .adf-create-tag-label {

lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.html

@@ -1,4 +1,6 @@
-<label
+<div class="adf-property-value" [ngClass]="{ 'adf-property-value-editable': editable, 'adf-property-readonly-value': isReadonlyProperty }">
+    <mat-form-field *ngIf="!property.multivalued" class="adf-dateitem-editable">
+        <mat-label
             class="adf-property-label"
             [attr.data-automation-id]="'card-dateitem-label-' + property.key"
             *ngIf="showProperty || isEditable"
@@ -6,19 +8,7 @@
             [ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty, 'adf-property-value-editable': editable }"
         >
             {{ property.label | translate }}
-</label>
+        </mat-label>
-<div class="adf-property-value" [ngClass]="{ 'adf-property-value-editable': editable, 'adf-property-readonly-value': isReadonlyProperty }">
-    <span *ngIf="!isEditable && !property.multivalued" [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
-        <span
-            *ngIf="showProperty"
-            [attr.data-automation-id]="'card-dateitem-' + property.key"
-            (dblclick)="copyToClipboard(property.displayValue)"
-            matTooltipShowDelay="1000"
-            [matTooltip]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
-            >{{ property.displayValue }}</span
-        >
-    </span>
-    <div *ngIf="isEditable && !property.multivalued" class="adf-dateitem-editable">
         <div class="adf-dateitem-editable-controls">
             <span
                 class="adf-datepicker-toggle"
@@ -28,13 +18,18 @@
                 role="button"
                 (keyup.enter)="showDatePicker()"
             >
-                <span *ngIf="showProperty; else elseEmptyValueBlock" [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
+                <span
+                    (dblclick)="copyToClipboard(property.displayValue)"
+                    matTooltipShowDelay="1000"
+                    [matTooltip]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
+                    *ngIf="showProperty; else elseEmptyValueBlock"
+                    [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
                     {{ property.displayValue }}</span
                 >
             </span>
 
             <mat-icon
-                *ngIf="showClearAction"
+                *ngIf="showClearAction && isEditable"
                 class="adf-date-reset-icon"
                 (click)="onDateClear()"
                 [attr.title]="'CORE.METADATA.ACTIONS.CLEAR' | translate"
@@ -44,6 +39,7 @@
             </mat-icon>
 
             <mat-datetimepicker-toggle
+                *ngIf="isEditable"
                 [attr.tabindex]="-1"
                 [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
                 [attr.data-automation-id]="'datepickertoggle-' + property.key"
@@ -53,9 +49,11 @@
         </div>
 
         <input
+            matInput
             class="adf-invisible-date-input"
             [attr.tabIndex]="-1"
             [matDatetimepicker]="datetimePicker"
+            [disabled]="!isEditable"
             [value]="valueDate"
             (dateChange)="onDateChanged($event)"
             [attr.id]="'card-view-dateitem-' + property.key"
@@ -69,12 +67,12 @@
             [startAt]="valueDate"
         >
         </mat-datetimepicker>
-    </div>
+    </mat-form-field>
     <ng-template #elseEmptyValueBlock>
         {{ property.default | translate }}
     </ng-template>
 
-    <div *ngIf="property.multivalued"
+    <mat-form-field *ngIf="property.multivalued"
          class="adf-property-field adf-dateitem-chip-list-container adf-dateitem-editable">
         <mat-chip-listbox #chipList class="adf-textitem-chip-list">
             <mat-chip-option
@@ -85,7 +83,15 @@
                 <mat-icon *ngIf="isEditable" matChipRemove>cancel</mat-icon>
             </mat-chip-option>
         </mat-chip-listbox>
-
+        <mat-label
+            class="adf-property-label"
+            [attr.data-automation-id]="'card-dateitem-label-' + property.key"
+            *ngIf="showProperty || isEditable"
+            [attr.for]="'card-view-dateitem-' + property.key"
+            [ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty, 'adf-property-value-editable': editable }"
+        >
+            {{ property.label | translate }}
+        </mat-label>
         <div
             *ngIf="isEditable"
             class="adf-property-field adf-dateitem-editable-controls"
@@ -95,6 +101,7 @@
             (keyup.enter)="showDatePicker()"
         >
             <input
+                matInput
                 class="adf-invisible-date-input"
                 [attr.tabIndex]="-1"
                 [matDatetimepicker]="datetimePicker"
@@ -118,5 +125,5 @@
             >
             </mat-datetimepicker>
         </div>
-    </div>
+    </mat-form-field>
 </div>

lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss

@@ -9,21 +9,24 @@
         border-bottom: 1px solid var(--adf-metadata-property-panel-border-color);
         margin-top: 10px;
 
-        &.adf-property-value-editable {
+        &:not(.adf-property-readonly-value) {
-            display: flex;
+            #{$mat-text-field-disabled} {
-            align-items: center;
+                #{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing}, #{$mat-notched-outline-notch} {
-            border-radius: 6px;
+                    border: none;
-            border-bottom: inherit;
+                    background-color: inherit;
-            margin-bottom: 18px;
                 }
 
-        &.adf-property-readonly-value {
+                #{$mat-select-arrow-wrapper} {
-            padding: 0 0 0 12px;
+                    display: none;
+                }
+            }
         }
     }
 
-    .adf-invisible-date-input {
+    #{$mat-form-field-wrapper} {
-        height: 2px;
+        #{$mat-form-field-input-control} {
+            &.adf-invisible-date-input {
+                height: 0;
                 width: 0;
                 overflow: hidden;
                 opacity: 0;
@@ -32,6 +35,8 @@
                 padding: 0;
                 float: right;
             }
+        }
+    }
 
     .adf-dateitem-chip-list-container.adf-property-field {
         margin-bottom: -7px;
@@ -40,8 +45,7 @@
     }
 
     .adf-dateitem-editable {
-        cursor: pointer;
+        width: 100%;
-        padding: 0 12px;
 
         /* stylelint-disable-next-line no-descending-specificity */
         &-controls {
@@ -57,8 +61,6 @@
             }
 
             #{$mat-icon} {
-                width: 16px;
-                height: 16px;
                 opacity: 0.5;
 
                 &:hover {
@@ -71,9 +73,6 @@
             }
 
             .adf-date-reset-icon {
-                line-height: 10px;
-                position: relative;
-                top: 4px;
                 padding: 0 8px;
             }
         }

lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html

@@ -1,28 +1,26 @@
 <ng-container *ngIf="!property.isEmpty() || isEditable">
-    <div
-        [attr.data-automation-id]="'card-select-label-' + property.key"
-        class="adf-property-label"
-        [ngClass]="{
-            'adf-property-value-editable': isEditable,
-            'adf-property-readonly-value': isReadonlyProperty
-        }"
-    >{{ property.label | translate }}</div>
     <div class="adf-property-field">
-        <div
+        <mat-form-field class="adf-property-value" [ngClass]="{
-            *ngIf="!isEditable"
+            'adf-property-value-editable': isEditable,
-            class="adf-property-value adf-property-read-only"
+            'adf-property-read-only': !isEditable
-            [attr.data-automation-id]="'select-readonly-value-' + property.key"
+        }">
-            data-automation-class="read-only-value">{{ (property.displayValue | async) | translate }}
+            <mat-label
-        </div>
+                [attr.data-automation-id]="'card-select-label-' + property.key"
-        <div *ngIf="isEditable">
+                class="adf-property-label adf-property-value-editable"
-            <mat-form-field class="adf-property-value" [ngClass]="{'adf-property-value-editable': isEditable}">
+                [ngClass]="{
+                    'adf-property-readonly-value': isReadonlyProperty
+                }">
+                {{ property.label | translate }}
+            </mat-label>
             <mat-select
+                [attr.data-automation-id]="'select-readonly-value-' + property.key"
                 [(value)]="value"
                 [ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty }"
                 panelClass="adf-select-filter"
                 (selectionChange)="onChange($event)"
                 data-automation-class="select-box"
-                    [aria-label]="property.label | translate">
+                [aria-label]="property.label | translate"
+                [disabled]="!isEditable">
                 <adf-select-filter-input *ngIf="showInputFilter" (change)="onFilterInputChange($event)"></adf-select-filter-input>
                 <mat-option *ngIf="displayNoneOption">{{ 'CORE.CARDVIEW.NONE' | translate }}</mat-option>
                 <mat-option
@@ -33,5 +31,4 @@
             </mat-select>
         </mat-form-field>
     </div>
-    </div>
 </ng-container>

lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss

@@ -24,17 +24,6 @@
         #{$mat-form-field-wrapper} {
             background-color: initial;
         }
-
-        /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
-        mat-select {
-            padding: 6px 0 8px 12px;
-            margin-top: 0;
-            border-radius: 6px;
-
-            #{$mat-select-value} {
-                color: var(--adf-metadata-action-button-clear-color);
-            }
-        }
     }
 
     #{$mat-form-field-subscript-wrapper} {
@@ -42,9 +31,19 @@
     }
 
     .adf-property-read-only {
-        padding: 6px 0;
         border-bottom: 1px solid var(--adf-metadata-property-panel-border-color);
         color: var(--adf-metadata-property-panel-title-color);
+
+        #{$mat-text-field-disabled}:not(:has(.adf-property-readonly-value)) {
+            #{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing}, #{$mat-notched-outline-notch} {
+                border: none;
+                background-color: inherit;
+            }
+
+            #{$mat-select-arrow-wrapper} {
+                display: none;
+            }
+        }
     }
 
     .mdc-line-ripple {

lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html

@@ -5,7 +5,6 @@
             [ngClass]="{
                 'adf-property-read-only': !isEditable
             }"
-            [floatLabel]="'always'"
         >
             <mat-label
                 *ngIf="showProperty || isEditable"

lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss

@@ -55,10 +55,19 @@
         color: var(--adf-theme-foreground-text-color-054);
     }
 
-    .adf-property-read-only:not(:has(.adf-property-readonly-value)) {
+    .adf-property-read-only {
+        &:not(:has(.adf-property-readonly-value)) {
             border-bottom: 1px solid var(--adf-metadata-property-panel-border-color);
         }
 
+        #{$mat-text-field-disabled}:not(:has(.adf-property-readonly-value)) {
+            #{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing}, #{$mat-notched-outline-notch} {
+                border: none;
+                background-color: inherit;
+            }
+        }
+    }
+
     .adf-property-readonly-value {
         color: var(--adf-metadata-property-panel-label-color);
     }

lib/core/src/lib/card-view/components/card-view/card-view.component.scss

@@ -6,32 +6,11 @@
     border-color: var(--adf-card-view-border-color);
     border-radius: var(--adf-card-view-border-radius);
 
-    .adf-property-label {
-        color: var(--adf-metadata-property-panel-text-color);
-        display: flex;
-        padding: 3px 0;
-        line-height: 20px;
-
-        &.adf-property-value-editable {
-            color: var(--adf-metadata-property-panel-title-color);
-        }
-
-        &.adf-property-readonly-value {
-            color: var(--adf-metadata-property-panel-label-color);
-        }
-    }
-
     .adf-property-container {
         margin-bottom: 12px;
     }
 
     .adf-property {
-        .adf-card-view-textitem {
-            .adf-property-field {
-                padding-top: 0;
-            }
-        }
-
         .adf-property-field {
             width: 100%;
 
@@ -41,7 +20,6 @@
 
             #{mat-input-element} {
                 text-overflow: ellipsis;
-                color: var(--adf-metadata-property-panel-title-color);
                 padding: 6px 0;
                 line-height: 20px;
             }
@@ -60,59 +38,11 @@
             #{$mat-form-field-flex} {
                 padding-top: 0;
             }
-
-            #{$mat-form-field-wrapper} {
-                background-color: inherit;
-                padding-bottom: 0;
-                padding-left: 0;
-                padding-right: 0;
-            }
-
-            #{$mat-form-field-label} {
-                padding: 0;
-                justify-content: center;
-                display: flex;
-                flex-direction: column;
-                height: 20px;
-
-                &.adf-property-field-label--empty {
-                    transform: translateY(-1.3437em) scale(1);
-             }
-            }
         }
     }
 
     .adf-property-value {
-        color: var(--adf-metadata-property-panel-title-color);
-
-        &.adf-property-value-editable {
-            color: var(--adf-metadata-property-panel-title-color);
-            background-color: var(--adf-metadata-buttons-background-color);
-            border-radius: 6px;
-            height: 32px;
-            padding-left: 10px;
-
-            #{$mat-input-element} {
-                color: var(--adf-metadata-action-button-clear-color);
-                padding: 5px 0 6px 12px;
-                margin: 5px 0 0;
-            }
-        }
-
-        &.adf-property-readonly-value {
-            color: var(--adf-metadata-property-panel-label-color);
-
-            #{$mat-input-element} {
-                color: var(--adf-metadata-property-panel-label-color);
-            }
-        }
-
-        &-has-error {
-            border: 1px solid var(--theme-warn-color);
-        }
-
         &-input {
-            background-color: var(--adf-metadata-buttons-background-color);
             border-radius: 6px;
             padding: 6px 0;
             margin: 0;

lib/core/src/lib/comments/comments.component.scss

@@ -9,6 +9,7 @@ adf-comments {
         .adf-comments-input-container {
             width: 100%;
             padding-bottom: 8px;
+            padding-top: 8px;
 
             textarea {
                 resize: vertical;

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

@@ -183,10 +183,6 @@
 
     .adf-login-form-field .adf-login-password-icon.adf-login-form-password-icon {
         color: var(--adf-theme-foreground-text-color);
-        font-size: var(--theme-subheading-2-font-size);
-        top: 9px;
-        position: relative;
-        left: 7px;
     }
 
     .adf-login-controls:has(div) {
@@ -204,26 +200,6 @@
             padding-bottom: 16px;
             font-size: var(--theme-subheading-2-font-size);
 
-            #{$mat-form-field-infix} {
-                min-height: 0;
-                padding-bottom: 3px;
-                padding-top: 20px;
-
-                .adf-login-form-input-label {
-                    font-size: var(--theme-subheading-2-font-size);
-                }
-
-                #{$mat-floating-label-float-above} {
-                    padding-bottom: 6px;
-                }
-
-                #{$mat-floating-label--required} {
-                    &::after {
-                        font-size: var(--theme-subheading-2-font-size);
-                    }
-                }
-            }
-
             & input:-webkit-autofill {
                 /* stylelint-disable */
                 -webkit-box-shadow: 0 0 0 1000px var(--adf-theme-background-dialog-color) inset;
@@ -235,16 +211,17 @@
 
     .adf-login-validation {
         background-color: transparent;
-        color: var(--theme-warn-color);
+        color: var(--adf-error-input-color);
         font-size: var(--theme-caption-font-size);
     }
 
     .adf-login-error {
-        color: var(--theme-warn-color);
+        color: var(--adf-error-input-color);
         position: absolute;
         font-size: var(--theme-caption-font-size);
         margin-top: -12px;
         display: block;
+        padding-left: 12px;
     }
 
     .adf-full-width {

lib/core/src/lib/styles/_components-variables.scss

@@ -89,6 +89,13 @@
         --adf-danger-button-background: $adf-danger-button-background,
         --adf-secondary-button-background: $adf-secondary-button-background,
 
+        --adf-input-text-color: $adf-input-text-color,
+        --adf-input-border-color: $adf-input-border-color,
+        --adf-focused-input-color: $adf-focused-input-color,
+        --adf-error-input-color: $adf-error-input-color,
+        --adf-hint-input-color: $adf-hint-input-color,
+        --adf-disabled-input-color: $adf-disabled-input-color,
+
         --adf-display-external-property-widget-preview-selection-color: mat.get-color-from-palette($foreground, secondary-text)
     );
 

lib/core/src/lib/styles/_mat-selectors.scss

@@ -51,7 +51,12 @@ $mat-form--text-field-infix: '.mat-mdc-form-text-infix';
 $mat-form-field-label: '.mat-mdc-floating-label';
 $mat-form-field-invalid: '.mat-form-field-invalid';
 $mat-form-field-appearance-outline: '.mat-form-field-appearance-outline';
+$mat-form-field-label-always-float: '.mat-mdc-form-field-label-always-float';
+$mat-form-field-input-control: '.mat-mdc-form-field-input-control';
 $mat-text-field-outlined: '.mdc-text-field--outlined';
+$mat-text-field-disabled: '.mdc-text-field--disabled';
+$mat-text-field-focused: '.mdc-text-field--focused';
+$mat-text-field-invalid: '.mdc-text-field--invalid';
 $mat-text-field-outlined-thick: '.mdc-text-field--outlined-thick';
 $mat-dialog-actions: '.mat-mdc-dialog-actions';
 $mat-dialog-container: '.mdc-dialog__container';
@@ -74,6 +79,7 @@ $mat-header-row: '.mat-mdc-header-row';
 $mat-row: '.mat-mdc-row';
 $mat-select: '.mat-mdc-select';
 $mat-select-value: '.mat-select-value';
+$mat-select-invalid: '.mat-mdc-select-invalid';
 $mat-select-value-text: '.mat-mdc-select-value-text';
 $mat-select-panel: '.mat-mdc-select-panel';
 $mat-grid-tile: '.mat-grid-tile';
@@ -113,6 +119,10 @@ $mat-standard-chip: '.mat-mdc-standard-chip';
 $mat-evolution-chip-action: '.mdc-evolution-chip__action';
 $mat-evolution-chip-text-label: '.mdc-evolution-chip__text-label';
 $mat-notched-outline: '.mdc-notched-outline';
+$mat-notched-outline-notched: '.mdc-notched-outline--notched';
+$mat-form-field-hint-wrapper: '.mat-mdc-form-field-hint-wrapper';
+$mat-form-field-error-wrapper: '.mat-mdc-form-field-error-wrapper';
+$mat-form-field-icon-suffix: '.mat-mdc-form-field-icon-suffix';
 $mat-evolution-chip-graphic: '.mdc-evolution-chip__graphic';
 $mat-select-trigger: '.mat-mdc-select-trigger';
 $mat-select-arrow: '.mat-mdc-select-arrow';
@@ -126,3 +136,4 @@ $cdk-overlay-pane: '.cdk-overlay-pane';
 $mat-snackbar: '.mdc-snackbar';
 $mat-snack-bar-container: '.mat-mdc-snack-bar-container';
 $mat-snackbar-label: '.mdc-snackbar__label';
+$mat-date-range-input-container: '.mat-date-range-input-container';

lib/core/src/lib/styles/_reference-variables.scss

@@ -27,3 +27,9 @@ $adf-ref-header-icon-color: inherit;
 $adf-ref-header-icon-border-radius: 50%;
 $adf-danger-button-background: #ba1b1b;
 $adf-secondary-button-background: #2121210d;
+$adf-input-text-color: rgb(33, 33, 33);
+$adf-input-border-color: rgba(33, 33, 33, 0.24);
+$adf-focused-input-color: rgb(0, 133, 53);
+$adf-error-input-color: rgb(186, 27, 27);
+$adf-hint-input-color: rgba(33, 33, 33, 0.7);
+$adf-disabled-input-color: rgba(33, 33, 33, 0.12);

lib/core/src/lib/styles/material.theme.scss

@@ -68,4 +68,159 @@
             }
         }
     }
+
+    #{$mat-form-field-appearance-outline} {
+        #{$mat-text-field-outlined} {
+            padding-top: 14px;
+            padding-left: 12px;
+
+            &#{$mat-text-field--no-label} {
+                #{$mat-form-field-infix} {
+                    top: -9px;
+                }
+
+                #{$mat-form-field-icon-suffix} {
+                    #{$mat-icon} {
+                        padding-top: 12px;
+                    }
+                }
+            }
+
+            #{$mat-notched-outline} {
+                padding-bottom: 2px;
+
+                &#{$mat-notched-outline-notched} {
+                    #{$mat-notched-outline-notch} {
+                        top: 15px;
+                        position: absolute;
+                        border: none;
+                        left: 9px
+                    }
+                }
+
+                &:not(#{$mat-notched-outline-notched}) {
+                    #{$mat-notched-outline-notch} {
+
+                        #{$mat-form-field-label} {
+                            top: 30px;
+                            left: -5px;
+                            padding-left: 5px;
+                        }
+                    }
+                }
+
+
+                #{$mat-form-field-label} {
+                    color: var(--adf-input-text-color);
+                }
+            }
+
+            #{$mat-form-field-icon-suffix} {
+                #{$mat-icon} {
+                    padding-top: 0;
+                }
+            }
+
+            #{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing}, #{$mat-notched-outline-notch} {
+                border-color: var(--adf-input-border-color);
+            }
+
+            &:not(#{$mat-text-field-disabled}) {
+                &:hover, &#{$mat-text-field-focused}, &#{$mat-text-field-invalid} {
+                    #{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing}, #{$mat-notched-outline-notch} {
+                        border-width: 2px;
+                    }
+                }
+
+                &#{$mat-text-field-focused} {
+                    #{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing} {
+                        border-color: var(--adf-focused-input-color);
+                    }
+                }
+
+                &:hover {
+                    #{$mat-notched-outline} {
+                        &:not(#{$mat-notched-outline-notched}) {
+                            #{$mat-notched-outline-notch} {
+                                #{$mat-form-field-label} {
+                                    top: 29px;
+                                }
+                            }
+                        }
+                    }
+                }
+
+                &#{$mat-text-field-invalid} {
+                    #{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing}, #{$mat-notched-outline-notch} {
+                        border-color: var(--adf-error-input-color);
+                    }
+                }
+            }
+
+            &#{$mat-text-field-disabled} {
+                #{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing} {
+                    background-color: var(--adf-disabled-input-color);
+                }
+
+                #{$mat-notched-outline}:not(#{$mat-notched-outline-notched}) {
+                    #{$mat-notched-outline-notch} {
+                        background-color: var(--adf-disabled-input-color);
+                    }
+                }
+
+                #{$mat-text-filed-input} {
+                    color: var(--adf-input-text-color);
+                }
+
+                #{$mat-select-value-text} {
+                    color: var(--adf-input-text-color);
+                }
+            }
+
+            #{$mat-select} {
+
+                #{$mat-select-arrow-wrapper} {
+                    height: 0;
+                }
+            }
+
+            &:not(#{$mat-text-field--no-label}) {
+                #{$mat-select} {
+                    #{$mat-select-arrow-wrapper} {
+                        margin-top: -6px;
+                        align-items: end;
+                    }
+                }
+            }
+        }
+
+        #{$mat-form-field-hint-wrapper}, #{$mat-form-field-error-wrapper} {
+            padding-left: 9px;
+            margin-top: -5px;
+        }
+
+        #{$mat-form-field-hint-wrapper} {
+            color: var(--adf-hint-input-color);
+        }
+
+        #{$mat-form-field-error-wrapper} {
+            color: var(--adf-error-input-color);
+        }
+
+        &#{$mat-focused} {
+            #{$mat-select} {
+                #{$mat-select-arrow} {
+                    color: var(--adf-focused-input-color);
+                }
+            }
+        }
+
+        &#{$mat-focused}#{$mat-select}, #{$mat-select} {
+            &#{$mat-select-invalid} {
+                #{$mat-select-arrow} {
+                    color: var(--adf-error-input-color);
+                }
+            }
+        }
+    }
 }