[ACS-7768] ADF Form fields cleanup (#11484)

* [ACS-7768] ADF Form fields cleanup

* [ACS-7768] CR fixes

* [ACS-7768] Bring back label condition

* ACS-7768 Fixing storybook build

* [ACS-7768] Fix rebase issues

---------

Co-authored-by: Ehsan Rezaei <ehsan.rezaei@hyland.com>

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

@@ -1,13 +1,20 @@
 <div class="adf-categories-management">
-    <div *ngIf="categoryNameControlVisible" class="adf-category-name-field">
+    @if (categoryNameControlVisible) {
-        <input #categoryNameInput
+        <mat-form-field class="adf-category-name-field">
-            [formControl]="categoryNameControl"
+            <mat-label>{{ 'CATEGORIES_MANAGEMENT.CATEGORIES_SEARCH_PLACEHOLDER' | translate }}</mat-label>
-            (keyup.enter)="addCategory()"
+            <input
-            placeholder="{{'CATEGORIES_MANAGEMENT.CATEGORIES_SEARCH_PLACEHOLDER' | translate }}"
+                matInput
-            adf-auto-focus
+                #categoryNameInput
+                autocomplete="off"
+                [formControl]="categoryNameControl"
+                (keyup.enter)="addCategory()"
+                adf-auto-focus
             />
-        <mat-error *ngIf="categoryNameControl.invalid && categoryNameControl.touched">{{ categoryNameErrorMessageKey | translate }}</mat-error>
+            <mat-error *ngIf="categoryNameControl.invalid && categoryNameControl.touched">
-    </div>
+                {{ categoryNameErrorMessageKey | translate }}
+            </mat-error>
+        </mat-form-field>
+    }
     <div class="adf-categories-list" *ngIf="categories?.length > 0" [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,28 +1,11 @@
 @use '../../mat-selectors.scss' as ms;
 
 .adf-categories-management {
+    margin: 5px 0;
+
     .adf-category-name-field {
         display: flex;
         flex-direction: column;
-        margin-right: 12px;
-
-        input {
-            background: var(--adf-metadata-buttons-background-color);
-            border-radius: 12px;
-            padding: 7px 8px;
-            border: none;
-            outline: none;
-            font: inherit;
-            color: currentcolor;
-            margin: 0;
-            vertical-align: bottom;
-            text-align: inherit;
-            box-sizing: content-box;
-        }
-
-        #{ms.$mat-form-field-error} {
-            padding-top: 5px;
-        }
     }
 
     .adf-assigned-categories {

lib/content-services/src/lib/category/categories-management/categories-management.component.spec.ts

@@ -118,7 +118,7 @@ describe('CategoriesManagementComponent', () => {
      * @returns error text
      */
     function getFirstError(): string {
-        return fixture.debugElement.query(By.directive(MatError)).nativeElement.textContent;
+        return fixture.debugElement.query(By.directive(MatError)).nativeElement.textContent.trim();
     }
 
     /**

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

@@ -42,6 +42,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatListModule } from '@angular/material/list';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MatInputModule } from '@angular/material/input';
 import { IconModule } from '@alfresco/adf-core';
 
 interface CategoryNameControlErrors {
@@ -64,7 +65,8 @@ interface CategoryNameControlErrors {
         MatButtonModule,
         IconModule,
         MatListModule,
-        MatProgressSpinnerModule
+        MatProgressSpinnerModule,
+        MatInputModule
     ],
     templateUrl: './categories-management.component.html',
     styleUrls: ['./categories-management.component.scss'],

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

@@ -246,18 +246,18 @@
                         </div>
                     </adf-content-metadata-header>
                 </mat-expansion-panel-header>
-                <div *ngIf="!showGroup(group) && group.editable && editedPanelTitle !== group.title" class="adf-metadata-no-item-added">
+                <div *ngIf="!showGroup(group) && !displayEmpty && group.editable && editedPanelTitle !== group.title" class="adf-metadata-no-item-added">
                     {{ 'METADATA.BASIC.NO_ITEMS_MESSAGE' | translate : { groupTitle: group.title | translate } }}
                 </div>
                 <adf-card-view
+                    class="adf-metadata-properties-expansion-panel"
                     (keydown)="keyDown($event)"
                     [properties]="group.properties"
                     [editable]="!readOnly && group.editable && isPanelEditing(group.title)"
                     [displayEmpty]="displayEmpty"
                     [copyToClipboardAction]="copyToClipboardAction"
                     [useChipsForMultiValueProperty]="useChipsForMultiValueProperty"
-                    [multiValueSeparator]="multiValueSeparator"
+                    [multiValueSeparator]="multiValueSeparator" />
-                    [displayLabelForChips]="true" />
             </mat-expansion-panel>
         </div>
     </ng-container>

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

@@ -10,21 +10,8 @@ $panel-properties-height: 56px !default;
             border-radius: 12px;
             margin: 12px;
 
-            adf-card-view-textitem {
-                #{ms.$mat-form-field-subscript-wrapper} {
-                    display: none;
-                }
-
-                #{ms.$mat-form-field-infix} {
-                    padding-bottom: 0;
-                }
-            }
-
             .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;
                     }
@@ -32,7 +19,7 @@ $panel-properties-height: 56px !default;
 
                 label {
                     font-size: 19px;
-                    line-height: 20px;
+                    line-height: 24px;
                 }
             }
         }
@@ -47,17 +34,15 @@ $panel-properties-height: 56px !default;
             }
         }
 
-        #{ms.$mat-expansion-panel-body} {
+        .adf-metadata-properties-expansion-panel,
-            padding-top: 16px;
+        .adf-metadata-categories-header {
+            display: block;
+            margin-top: 16px;
+        }
 
-            input {
+        .adf-metadata-properties-tags,
-                border-color: transparent;
+        .adf-metadata-no-item-added {
-                width: 100%;
+            margin-top: 16px;
-
-                &:focus-visible {
-                    outline: none;
-                }
-            }
         }
 
         .adf-edit-icon-buttons {

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

@@ -1,73 +1,80 @@
 <div class="adf-content-node-selector-content">
-    <mat-form-field floatPlaceholder="never"
+    @if (showSearch) {
-                    appearance="fill"
+        <mat-form-field floatPlaceholder="never" class="adf-content-node-selector-content-input">
-                    class="adf-content-node-selector-content-input"
+            <mat-label>{{ 'NODE_SELECTOR.SEARCH' | translate }}</mat-label>
-                    subscriptSizing="dynamic"
+            <input matInput
-                    *ngIf="showSearch">
+                id="searchInput"
-        <mat-label>{{ 'NODE_SELECTOR.SEARCH' | translate }}</mat-label>
+                [formControl]="searchInput"
-        <input matInput
+                type="text"
-            id="searchInput"
+                [value]="searchTerm"
-            [formControl]="searchInput"
+                adf-auto-focus
-            type="text"
+                data-automation-id="content-node-selector-search-input">
-            [value]="searchTerm"
-            adf-auto-focus
-            data-automation-id="content-node-selector-search-input">
 
+            @if (searchTerm.length > 0) {
+                <button
+                    matSuffix
+                    mat-icon-button
+                    data-automation-id="content-node-selector-search-clear"
+                    class="adf-content-node-selector-search-clear-button"
+                    (click)="clear()"
+                    [attr.aria-label]="'COMMON.CLEAR' | translate"
+                    [attr.title]="'COMMON.CLEAR' | translate"
+                >
+                    <mat-icon class="adf-content-node-selector-content-input-icon" adf-icon="clear" />
+                </button>
+            }
+            @if (searchTerm.length === 0) {
+                <mat-icon
+                    matSuffix
+                    class="adf-content-node-selector-content-input-icon"
+                    data-automation-id="content-node-selector-search-icon"
+                    adf-icon="search"
+                />
+            }
+        </mat-form-field>
+    }
+    @if (showDropdownSiteList) {
+        <adf-sites-dropdown
+            class="full-width"
+            (change)="siteChanged($event)"
+            [placeholder]="'NODE_SELECTOR.SELECT_LIBRARY'"
+            [hideMyFiles]="dropdownHideMyFiles"
+            [siteList]="dropdownSiteList"
+            [value]="startSiteGuid"
+            data-automation-id="content-node-selector-sites-combo" />
+    }
+    @if (hasCustomModels()) {
         <button
-            matSuffix
+            data-automation-id="adf-toggle-search-panel-button"
             mat-icon-button
-            *ngIf="searchTerm.length > 0"
+            (click)="toggleSearchPanel()">
-            data-automation-id="content-node-selector-search-clear"
+            <mat-icon adf-icon="filter_list" />
-            class="adf-content-node-selector-search-clear-button"
+            {{ 'SEARCH.SEARCH_HEADER.TITLE' | translate }}
-            (click)="clear()"
-            [attr.aria-label]="'COMMON.CLEAR' | translate"
-            [attr.title]="'COMMON.CLEAR' | translate"
-        >
-            <mat-icon class="adf-content-node-selector-content-input-icon" adf-icon="clear" />
         </button>
-
+    }
-        <mat-icon
-            *ngIf="searchTerm.length === 0"
-            matSuffix
-            class="adf-content-node-selector-content-input-icon"
-            data-automation-id="content-node-selector-search-icon"
-            adf-icon="search"
-        />
-    </mat-form-field>
-    <adf-sites-dropdown
-        *ngIf="showDropdownSiteList"
-        class="full-width"
-        (change)="siteChanged($event)"
-        [placeholder]="'NODE_SELECTOR.SELECT_LIBRARY'"
-        [hideMyFiles]="dropdownHideMyFiles"
-        [siteList]="dropdownSiteList"
-        [value]="startSiteGuid"
-        data-automation-id="content-node-selector-sites-combo" />
-    <button *ngIf="hasCustomModels()"
-        data-automation-id="adf-toggle-search-panel-button"
-        mat-icon-button
-        (click)="toggleSearchPanel()">
-        <mat-icon adf-icon="filter_list" />
-        {{ 'SEARCH.SEARCH_HEADER.TITLE' | translate }}
-    </button>
     <div class="adf-content-node-selector-search-panel-container">
-        <adf-search-panel *ngIf="searchPanelExpanded" />
+        @if (searchPanelExpanded) {
+            <adf-search-panel />
+        }
         <div class="adf-content-node-selector-document-list-container">
     <adf-toolbar>
         <adf-toolbar-title>
-            <ng-container *ngIf="!showBreadcrumbs()">
+            @if (!showBreadcrumbs()) {
                 <h2 class="adf-search-results-label">{{ 'NODE_SELECTOR.SEARCH_RESULTS' | translate }}</h2>
-            </ng-container>
+            } @else {
-            <adf-dropdown-breadcrumb *ngIf="showBreadcrumbs()"
+                <adf-dropdown-breadcrumb
-                class="adf-content-node-selector-content-breadcrumb"
+                    class="adf-content-node-selector-content-breadcrumb"
-                (navigate)="clearSearch()"
+                    (navigate)="clearSearch()"
-                [target]="documentList"
+                    [target]="documentList"
-                [rootId]="breadcrumbRootId"
+                    [rootId]="breadcrumbRootId"
-                [transform]="breadcrumbTransform"
+                    [transform]="breadcrumbTransform"
-                [folderNode]="breadcrumbFolderNode"
+                    [folderNode]="breadcrumbFolderNode"
-                [root]="breadcrumbFolderTitle"
+                    [root]="breadcrumbFolderTitle"
-                data-automation-id="content-node-selector-content-breadcrumb" />
+                    data-automation-id="content-node-selector-content-breadcrumb" />
-            <ng-container *ngIf="showNodeCounter" [adf-node-counter]="getSelectedCount()" />
+            }
+            @if (showNodeCounter) {
+                <ng-container [adf-node-counter]="getSelectedCount()" />
+            }
         </adf-toolbar-title>
     </adf-toolbar>
 

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

@@ -36,74 +36,27 @@ h2.adf-search-results-label {
     }
 
     &-document-list-container {
-        margin-top: 16px;
         width: 100%;
     }
 
     &-content {
-        #{ms.$mat-input-element} {
+        padding-top: 10px;
-            &:focus::placeholder {
-                color: var(--theme-primary-color);
-            }
-        }
-
-        #{ms.$mat-form-field-wrapper} {
-            #{ms.$mat-form-field-flex} {
-                align-items: center;
-
-                #{ms.$mat-form-field-infix} {
-                    padding-bottom: 0;
-                }
-            }
-        }
-
-        .adf-sites-dropdown-form-field {
-            label {
-                &#{ms.$mat-form-field-label} {
-                    top: 32px;
-                }
-            }
-        }
-
-        #{ms.$mat-form-field-subscript-wrapper} {
-            height: 16px;
-        }
-
-        padding-top: 0;
 
         &-input {
             width: 100%;
-            margin-bottom: 8px;
+            margin-bottom: 15px;
 
-            .adf-content-node-selector-content-input-icon:is(mat-icon) {
+            .adf-content-node-selector-content-input-icon {
                 color: var(--adf-theme-foreground-icon-color-054);
-                padding: 0 0 8px;
-                width: 1em;
-                height: 1em;
-                font-size: 20px;
             }
 
             .adf-content-node-selector-search-clear-button {
-                padding: 0;
+                .adf-content-node-selector-content-input-icon {
-                width: 20px;
-                height: 28px;
-
-                &:focus {
-                    outline-offset: -1.5px;
-                }
-
-                .adf-content-node-selector-content-input-icon:is(mat-icon) {
-                    cursor: pointer;
-
                     &:hover {
                         color: var(--adf-theme-foreground-base-color);
                     }
                 }
             }
-
-            #{ms.$mat-form-field-subscript-wrapper} {
-                display: none;
-            }
         }
 
         .adf-site-dropdown-container {
@@ -111,6 +64,7 @@ h2.adf-search-results-label {
 
             .adf-sites-dropdown-form-field {
                 width: 100%;
+                margin-bottom: 15px;
             }
         }
     }

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

@@ -42,7 +42,6 @@ import { ShareDataRow } from '../../document-list/data/share-data-row.model';
 import { NodeEntryEvent } from '../../document-list/components/node.event';
 import { debounceTime } from 'rxjs/operators';
 import { ContentNodeSelectorPanelService } from './content-node-selector-panel.service';
-import { CommonModule } from '@angular/common';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { TranslatePipe } from '@ngx-translate/core';
 import { MatInputModule } from '@angular/material/input';
@@ -63,7 +62,6 @@ export const defaultValidation = () => true;
 @Component({
     selector: 'adf-content-node-selector-panel',
     imports: [
-        CommonModule,
         MatFormFieldModule,
         TranslatePipe,
         MatInputModule,

lib/content-services/src/lib/content-node-selector/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="fill" subscriptSizing="dynamic">
+    <mat-form-field class="adf-sites-dropdown-form-field">
         <mat-label>{{ 'NODE_SELECTOR.LOCATION' | translate }}</mat-label>
         <mat-select
             adf-infinite-select-scroll

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

@@ -28,15 +28,13 @@
                 </div>
                 <div
                     [style.display]="isExpiryDateToggleChecked ? 'block' : 'none'"
-                    data-automation-id="adf-slide-toggle-checked"
+                    data-automation-id="adf-slide-toggle-checked">
-                    class="adf-share-link__date-time-container">
+                    <mat-form-field class="adf-full-width" data-automation-id="adf-content-share-expiration-field">
-                    <mat-form-field class="adf-full-width" subscriptSizing="dynamic" 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
+                            matSuffix />
-                            class="adf-share-link__icon adf-share-link__calender-icon" />
                         <mat-datepicker
                             #datePicker
                             (closed)="onDatePickerClosed()" />
@@ -69,8 +67,6 @@
                     </div>
                 </div>
                 <mat-form-field
-                    subscriptSizing="dynamic"
-                    floatLabel="always"
                     class="adf-full-width adf-share-link__form--field"
                     data-automation-id="adf-content-share-public-link-field"
                     [ngClass]="isLinkWithExpiryDate? 'adf-share-link__border-color' : ''">

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

@@ -1,11 +1,7 @@
-@use '../mat-selectors.scss' as ms;
+@use '@angular/material' as mat;
 
 .adf-share-link-dialog {
     .adf-share-link {
-        #{ms.$mat-form-field-flex} {
-            height: 48px;
-        }
-
         &__dialog-content {
             display: flex;
             flex-direction: column;
@@ -34,16 +30,6 @@
 
         &__form {
             padding-top: 8px;
-
-            #{ms.$mat-form-field-infix}:has(.adf-share-link__input) {
-                border-top: 0.9375em solid transparent;
-                border-bottom: 0.9375em solid transparent;
-                height: 16px;
-            }
-
-            &--field {
-                padding-bottom: 16px;
-            }
         }
 
         &__public-content {
@@ -56,6 +42,14 @@
             font-size: var(--theme-caption-font-size);
         }
 
+        &__border-color {
+            @include mat.form-field-overrides(
+                (
+                    outlined-outline-color: var(--theme-warn-color-a700)
+                )
+            );
+        }
+
         &--row {
             display: flex;
             flex-direction: row;
@@ -65,7 +59,7 @@
             margin: 8px 0;
 
             &-sharable {
-                margin-bottom: 0;
+                margin-bottom: 10px;
             }
         }
 
@@ -82,10 +76,6 @@
             padding-bottom: 0;
         }
 
-        &__input {
-            color: var(--adf-theme-foreground-text-color-087);
-        }
-
         &__separation-line {
             border: 1px solid var(--theme-grey-background-color);
             margin: 8px -24px;
@@ -96,12 +86,6 @@
             margin-left: 12px;
         }
 
-        &__icon {
-            color: var(--adf-theme-foreground-icon-color-054);
-            padding-bottom: 0;
-            padding-right: 0;
-        }
-
         &__para {
             margin-top: 8px;
             margin-bottom: 8px;
@@ -111,30 +95,6 @@
             font-weight: 700;
             font-size: var(--theme-subheading-2-font-size);
         }
-
-        &__copy-icon {
-            padding-top: 18px;
-            font-size: 22px;
-        }
-
-        &__calender-icon {
-            top: 12px;
-            position: relative;
-            right: -6px;
-
-            svg {
-                height: 18px;
-                width: 18px;
-            }
-        }
-
-        &__date-time-container {
-            padding-bottom: 20px;
-        }
-
-        &__border-color {
-            border: 1px solid var(--theme-warn-color-a700);
-        }
     }
 
     .adf-input-action {
@@ -143,8 +103,6 @@
 
     .adf-full-width {
         width: 100%;
-        border-radius: 6px;
-        margin-top: -6px;
     }
 
     .adf-sharable-link {

lib/content-services/src/lib/content-node-share/content-node-share.dialog.spec.ts

@@ -305,18 +305,6 @@ describe('ShareDialogComponent', () => {
         );
     });
 
-    it('should not display floating label for public link field', () => {
-        component.data = {
-            node,
-            baseShareUrl: 'some-url/'
-        };
-
-        fixture.detectChanges();
-        expect(fixture.debugElement.query(By.css('[data-automation-id="adf-content-share-public-link-field"]')).componentInstance.floatLabel).toBe(
-            'always'
-        );
-    });
-
     describe('datetimepicker type', () => {
         beforeEach(() => {
             spyOn(sharedLinksApiService, 'createSharedLinks').and.returnValue(of());

lib/content-services/src/lib/dialogs/folder/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">
+        <mat-form-field class="adf-full-width adf-folder-dialog-form-field">
             <mat-label>{{ 'CORE.FOLDER_DIALOG.FOLDER_NAME.LABEL' | translate }}</mat-label>
             <input
                 id="adf-folder-name-input"
@@ -26,7 +26,7 @@
             </mat-hint>
         </mat-form-field>
 
-        <mat-form-field class="adf-full-width">
+        <mat-form-field class="adf-full-width adf-folder-dialog-form-field">
             <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">
+        <mat-form-field class="adf-full-width adf-folder-dialog-form-field">
             <mat-label>{{ 'CORE.FOLDER_DIALOG.FOLDER_DESCRIPTION.LABEL' | translate }}</mat-label>
             <textarea
                 id="adf-folder-description-input"

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

@@ -5,21 +5,8 @@
         padding: 0;
         overflow: unset;
 
-        #{ms.$mat-form-field-infix} {
+        .adf-folder-dialog-form-field {
-            padding-bottom: 3.5px;
+            margin-bottom: 15px;
-        }
-
-        #{ms.$mat-form-field-hide-placeholder} {
-            #{ms.$mat-floating-label} {
-                padding-top: 20px;
-            }
-        }
-
-        #{ms.$mat-form-field-hint-wrapper} {
-            padding-left: 0;
-            margin-left: -2px;
-            color: var(--adf-theme-foreground-secondary-text-color);
-            font-size: 10.5px;
         }
     }
 

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

@@ -1,5 +1,3 @@
-@use '../../mat-selectors.scss' as ms;
-
 .adf-library-dialog {
     .adf-library-dialog-content {
         padding: 0;
@@ -9,7 +7,6 @@
     .adf-library-dialog-radio-group {
         display: flex;
         flex-direction: column;
-        margin: 0;
     }
 
     .adf-library-dialog-radio-group .adf-library-dialog-radio-group-button {
@@ -18,47 +15,7 @@
 
     .adf-library-dialog-form-field {
         width: 100%;
-        padding-top: 9.5px;
+        margin-bottom: 15px;
-
-        &:first-of-type {
-            padding-top: 13.5px;
-        }
-
-        &:last-of-type {
-            padding-top: 4.5px;
-        }
-
-        #{ms.$mat-floating-label} {
-            -webkit-font-smoothing: subpixel-antialiased;
-        }
-
-        &#{ms.$mat-form-field-hide-placeholder} {
-            #{ms.$mat-floating-label} {
-                padding-top: 20px;
-            }
-        }
-
-        &-description {
-            &#{ms.$mat-form-field-hide-placeholder} {
-                #{ms.$mat-floating-label} {
-                    padding-top: 20px;
-                }
-            }
-        }
-
-        #{ms.$mat-form-field-infix} {
-            padding-bottom: 3.5px;
-        }
-
-        #{ms.$mat-form-field-error-wrapper} {
-            margin-left: -2px;
-            font-size: 10.5px;
-            -webkit-font-smoothing: subpixel-antialiased;
-
-            #{ms.$mat-form-field-error} {
-                height: 13.125px;
-            }
-        }
     }
 
     .adf-action-buttons {

lib/content-services/src/lib/mat-selectors.scss

@@ -13,16 +13,10 @@ $mat-checkbox-box: '.mdc-checkbox';
 $mat-button: '.mat-mdc-button';
 $mat-button-label: '.mdc-button__label';
 $mat-form-field: '.mat-mdc-form-field';
-$mat-form-field-flex: '.mat-mdc-form-field-flex';
 $mat-form-field-wrapper: '.mat-mdc-text-field-wrapper';
-$mat-line-ripple: '.mdc-line-ripple';
-$mat-form-field-subscript-wrapper: '.mat-mdc-form-field-subscript-wrapper';
 $mat-form-text-field-infix: '.mat-mdc-form-text-infix';
-$mat-form-field-label: '.mat-mdc-floating-label';
 $mat-form-field-appearance-outline: '.mat-form-field-appearance-outline';
 $mat-text-field-outlined: '.mdc-text-field--outlined';
-$mat-text-field-outlined-thick: '.mdc-text-field--outlined-thick';
-$mat-input-element: '.mat-mdc-input-element';
 $mat-card: '.mat-mdc-card';
 $mat-card-content: '.mat-mdc-card-content';
 $mat-list-item-primary-text: '.mdc-list-item__primary-text';
@@ -30,15 +24,8 @@ $mat-list-item-end: '.mdc-list-item__end';
 $mat-select: '.mat-mdc-select';
 $mat-menu-panel: '.mat-mdc-menu-panel';
 $mat-expansion-panel: '.mat-expansion-panel';
-$mat-calendar: '.mat-calendar';
-$mat-calendar-header: '.mat-calendar-header';
-$mat-toolbar: '.mat-toolbar';
-$mat-text-field-no-label: '.mdc-text-field--no-label';
 $mat-form-field-infix: '.mat-mdc-form-field-infix';
 $mat-form-field-hide-placeholder: '.mat-form-field-hide-placeholder';
-$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-error: '.mat-mdc-form-field-error';
 $mat-checkbox-background: '.mdc-checkbox__background';
 $mat-floating-label: '.mdc-floating-label';
 $mat-select-arrow-wrapper: '.mat-mdc-select-arrow-wrapper';
@@ -50,14 +37,8 @@ $mat-evolution-chip: '.mdc-evolution-chip';
 $mat-standard-chip: '.mat-mdc-standard-chip';
 $mat-notched-outline: '.mdc-notched-outline';
 $mat-evolution-chip-graphic: '.mdc-evolution-chip__graphic';
-$mat-select-trigger: '.mat-mdc-select-trigger';
 $mat-select-arrow: '.mat-mdc-select-arrow';
-$mat-notched-outline-leading: '.mdc-notched-outline__leading';
-$mat-notched-outline-trailing: '.mdc-notched-outline__trailing';
 $mat-evolution-chip-set: '.mdc-evolution-chip-set';
 $cdk-overlay-pane: '.cdk-overlay-pane';
-$mat-form-field-error-wrapper: '.mat-mdc-form-field-error-wrapper';
 $mat-list-item-disabled: '.mdc-list-item--disabled';
 $mat-switch: '.mdc-switch';
-$mat-list-item: '.mdc-list-item';
-$mat-text-field: '.mdc-text-field';

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

@@ -1,4 +1,5 @@
-<mat-form-field appearance="fill" class="adf-permission-search-input">
+<mat-form-field class="adf-permission-search-input">
+    <mat-label>{{ 'SEARCH.INPUT.LABEL' | translate }}</mat-label>
     <input
         matInput
         id="searchInput"

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

@@ -51,51 +51,8 @@ $search-result-height: calc(100% - 60px);
     &-permission-search {
         &-input {
             width: 100%;
-            padding-bottom: 0;
+            padding-top: 5px;
-            padding-top: 12px;
+            margin-bottom: 15px;
-
-            #{ms.$mat-form-field-wrapper} {
-                #{ms.$mat-form-field-flex} {
-                    align-items: center;
-
-                    #{ms.$mat-form-field-infix} {
-                        padding-top: 0;
-                        padding-bottom: 0;
-                    }
-                }
-            }
-
-            #{ms.$mat-form-field-subscript-wrapper} {
-                height: 16px;
-            }
-
-            .adf-permission-search-input-control {
-                &:focus::placeholder {
-                    color: var(--theme-primary-color);
-                }
-            }
-
-            .adf-permission-search-icon:is(mat-icon) {
-                padding: 0 0 12px;
-                width: 1em;
-                height: 1em;
-                font-size: 20px;
-            }
-
-            .adf-permission-search-input-clear-button {
-                padding: 0;
-                width: 20px;
-                height: 32px;
-                margin-right: 1.5px;
-
-                .adf-permission-search-icon:is(mat-icon) {
-                    cursor: pointer;
-
-                    &:hover {
-                        color: var(--adf-theme-foreground-base-color);
-                    }
-                }
-            }
         }
     }
 

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

@@ -17,7 +17,6 @@
 
 import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
 import { RoleModel } from '../../models/role.model';
-import { CommonModule } from '@angular/common';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';
 import { TranslatePipe } from '@ngx-translate/core';
@@ -29,27 +28,31 @@ export interface RoleModelOption {
 
 @Component({
     selector: 'adf-user-role-column',
-    imports: [CommonModule, MatFormFieldModule, MatSelectModule, TranslatePipe],
+    imports: [MatFormFieldModule, MatSelectModule, TranslatePipe],
     template: `
-        <mat-form-field class="adf-role-selector-field" *ngIf="!readonly" subscriptSizing="dynamic">
+        @if (!readonly) {
-            <mat-select
+            <mat-form-field class="adf-role-selector-field">
-                class="adf-role-selector"
+                <mat-select
-                (click)="$event.stopPropagation()"
+                    class="adf-role-selector"
-                [placeholder]="placeholder | translate"
+                    (click)="$event.stopPropagation()"
-                [value]="value"
+                    [placeholder]="placeholder | translate"
-                (selectionChange)="onRoleChanged($event.value)"
+                    [value]="value"
-                (keyup.arrowdown)="$event.stopPropagation()"
+                    (selectionChange)="onRoleChanged($event.value)"
-                (keyup.arrowup)="$event.stopPropagation()"
+                    (keyup.arrowdown)="$event.stopPropagation()"
-            >
+                    (keyup.arrowup)="$event.stopPropagation()"
-                <mat-option *ngFor="let option of options" [value]="option.role">
+                >
-                    {{ option.label | translate }}
+                    @for (option of options; track $index) {
-                </mat-option>
+                        <mat-option [value]="option.role">
-            </mat-select>
+                            {{ option.label | translate }}
-        </mat-form-field>
+                        </mat-option>
-
+                    }
-        <span class="adf-datatable-cell-value adf-readonly-role" [title]="i18nValue | translate" *ngIf="readonly">
+                </mat-select>
-            {{ i18nValue | translate }}
+            </mat-form-field>
-        </span>
+        } @else {
+            <span class="adf-datatable-cell-value adf-readonly-role" [title]="i18nValue | translate">
+                {{ i18nValue | translate }}
+            </span>
+        }
     `,
     encapsulation: ViewEncapsulation.None,
     host: { class: 'adf-user-role-column adf-datatable-content-cell adf-expand-cell-4' },

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

@@ -1,4 +1,4 @@
-<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

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

@@ -13,7 +13,7 @@
               {{ 'SEARCH.DATE_RANGE_ADVANCED.OPTIONS.IN_LAST' | translate }}
           </span>
       </mat-radio-button>
-      <mat-form-field class="adf-search-date-range-form-field adf-search-date-range-input-field" subscriptSizing="dynamic" floatLabel="always">
+      <mat-form-field class="adf-search-date-range-form-field adf-search-date-range-input-field">
         <mat-label id="adf-search-date-range-quantity-label">{{ 'SEARCH.DATE_RANGE_ADVANCED.IN_LAST_LABELS.QUANTITY' | translate }}</mat-label>
         <input matInput [attr.aria-label]="'SEARCH.DATE_RANGE_ADVANCED.ARIA_LABEL.NUMBER_INPUT' | translate"
                aria-labelledby="adf-search-date-range-quantity-label"
@@ -22,7 +22,7 @@
                (keydown)="preventIncorrectNumberCharacters($event)">
         <mat-error *ngIf="form.controls.inLastValue.errors?.required">{{ 'SEARCH.DATE_RANGE_ADVANCED.ERROR.IN_LAST' | translate }}</mat-error>
       </mat-form-field>
-      <mat-form-field class="adf-search-date-range-form-field adf-search-date-range-form-field-select" subscriptSizing="dynamic">
+      <mat-form-field class="adf-search-date-range-form-field adf-search-date-range-form-field-select">
         <mat-label>{{ 'SEARCH.SEARCH_PROPERTIES.ACCESSIBILITY.UNIT' | translate }}</mat-label>
         <mat-select formControlName="inLastValueType" data-automation-id="date-range-in-last-dropdown">
           <mat-option data-automation-id="date-range-in-last-option-days" [value]="InLastDateType.DAYS">{{ 'SEARCH.DATE_RANGE_ADVANCED.IN_LAST_LABELS.DAYS' | translate }}</mat-option>
@@ -39,7 +39,7 @@
             {{ 'SEARCH.DATE_RANGE_ADVANCED.OPTIONS.BETWEEN' | translate }}
         </span>
       </mat-radio-button>
-      <mat-form-field class="adf-search-date-range-form-field" subscriptSizing="dynamic" floatLabel="always">
+      <mat-form-field class="adf-search-date-range-form-field">
         <mat-label
             aria-hidden="true"
             id="adf-search-date-range-between-range-label">

lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.html

@@ -1,28 +1,24 @@
 <div class="adf-search-filter-facet">
-    <div class="adf-facet-result-filter">
+    <mat-form-field>
-        <div class="adf-facet-search-container">
+        <input
-            <button mat-icon-button class="adf-facet-search-icon" tabindex="-1">
+            matInput
-                <mat-icon class="adf-search-field-icon" adf-icon="search" />
+            placeholder="{{ 'SEARCH.FILTER.ACTIONS.SEARCH' | translate }}"
+            [attr.data-automation-id]="'facet-result-filter-' + field.label"
+            [(ngModel)]="field.buckets.filterText"
+        />
+        @if (field.buckets.filterText) {
+            <button
+                matSuffix
+                mat-icon-button
+                [attr.title]="'SEARCH.FILTER.BUTTONS.CLEAR' | translate"
+                (click)="field.buckets.filterText = ''"
+            >
+                <mat-icon [attr.aria-label]="'SEARCH.FILTER.BUTTONS.CLEAR' | translate" adf-icon="clear" />
             </button>
-            <mat-form-field class="adf-facet-search-field" subscriptSizing="dynamic">
+        } @else {
-                <input
+            <mat-icon matSuffix aria-hidden adf-icon="search" />
-                    matInput
+        }
-                    placeholder="{{ 'SEARCH.FILTER.ACTIONS.SEARCH' | translate }}"
+    </mat-form-field>
-                    [attr.data-automation-id]="'facet-result-filter-' + field.label"
-                    [(ngModel)]="field.buckets.filterText"
-                />
-                <button
-                    *ngIf="field.buckets.filterText"
-                    matSuffix
-                    mat-icon-button
-                    [attr.title]="'SEARCH.FILTER.BUTTONS.CLEAR' | translate"
-                    (click)="field.buckets.filterText = ''"
-                >
-                    <mat-icon role="button" [attr.aria-label]="'SEARCH.FILTER.BUTTONS.CLEAR' | translate" adf-icon="clear" />
-                </button>
-            </mat-form-field>
-        </div>
-    </div>
 
     <div class="adf-checklist">
         <mat-checkbox

lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.scss

@@ -18,31 +18,6 @@
 
     .adf-facet-result-filter {
         padding-bottom: 16px;
-
-        .adf-facet-search-container {
-            border-radius: 6px;
-            background: var(--theme-background-color);
-            display: flex;
-            height: 32px;
-
-            .adf-facet-search-icon {
-                width: 27px;
-                margin-top: -3px;
-
-                .adf-search-field-icon {
-                    font-size: var(--theme-subheading-1-font-size);
-                }
-            }
-
-            .adf-facet-search-field {
-                padding: 2px;
-                flex: 1;
-                margin-top: -16px;
-                font-size: var(--theme-body-1-font-size);
-                line-height: 24px;
-                letter-spacing: 0.25px;
-            }
-        }
     }
 
     .adf-facet-buttons {

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-properties/search-properties.component.html

@@ -7,9 +7,7 @@
             <mat-form-field
                 class="adf-search-properties-form-field"
                 [style.flex]="'0 0 ' + fileSizeOperatorsMaxWidth + 'px'"
-                subscriptSizing="dynamic"
+                data-automation-id="adf-search-properties-file-size-operator">
-                data-automation-id="adf-search-properties-file-size-operator"
-                appearance="outline">
                 <mat-label>{{ 'SEARCH.SEARCH_PROPERTIES.ACCESSIBILITY.CONDITION' | translate }}</mat-label>
                 <mat-select
                     data-automation-id="adf-search-properties-file-size-operator-select"
@@ -22,7 +20,7 @@
                     </mat-option>
                 </mat-select>
             </mat-form-field>
-            <mat-form-field class="adf-search-properties-form-field" appearance="outline" floatLabel="always">
+            <mat-form-field class="adf-search-properties-form-field">
                 <mat-label>{{ 'SEARCH.SEARCH_PROPERTIES.ACCESSIBILITY.SIZE_VALUE' | translate }}</mat-label>
                 <input
                     matInput
@@ -39,9 +37,7 @@
             </mat-form-field>
             <mat-form-field
                 class="adf-search-properties-form-field"
-                data-automation-id="adf-search-properties-file-size-unit"
+                data-automation-id="adf-search-properties-file-size-unit">
-                subscriptSizing="dynamic"
-                appearance="outline">
                 <mat-label>{{ 'SEARCH.SEARCH_PROPERTIES.ACCESSIBILITY.UNIT' | translate }}</mat-label>
                 <mat-select
                     [attr.aria-label]="'SEARCH.SEARCH_PROPERTIES.ACCESSIBILITY.UNIT' | translate"

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

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

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

@@ -3,6 +3,7 @@
 
     .adf-search-text-form-field {
         width: 100%;
+        margin-top: 10px;
 
         &-clear-button {
             min-width: unset;

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

@@ -1,19 +1,20 @@
 <div class="adf-tags-creation">
-    <div *ngIf="tagNameControlVisible" class="adf-tag-name-field">
+    @if (tagNameControlVisible) {
-        <input
+        <mat-form-field class="adf-tag-name-field">
-            #tagNameInput
+            <mat-label>{{ 'TAG.TAGS_CREATOR.TAG_SEARCH_PLACEHOLDER' | translate }}</mat-label>
-            class="adf-tag-search-field"
+            <input
-            matInput
+                matInput
-            autocomplete="off"
+                #tagNameInput
-            [formControl]="tagNameControl"
+                autocomplete="off"
-            (keyup.enter)="addTag()"
+                [formControl]="tagNameControl"
-            adf-auto-focus
+                (keyup.enter)="addTag()"
-            placeholder="{{ 'TAG.TAGS_CREATOR.TAG_SEARCH_PLACEHOLDER' | translate }}"
+                adf-auto-focus
-        />
+            />
-        <mat-error *ngIf="tagNameControl.invalid && tagNameControl.touched">
+            <mat-error *ngIf="tagNameControl.invalid && tagNameControl.touched">
-            {{ tagNameErrorMessageKey | translate }}
+                {{ tagNameErrorMessageKey | translate }}
-        </mat-error>
+            </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

@@ -13,21 +13,10 @@ adf-tags-creator {
     .adf-tag-name-field[hidden] {
         display: flex;
         flex-direction: column;
-        margin-right: 12px;
     }
 
-    .adf-tag-search-field {
+    .adf-tag-name-field {
-        background: var(--adf-metadata-buttons-background-color);
+        margin-top: 10px;
-        border-radius: 12px;
-        padding: 5px 6px;
-        border: none;
-        outline: none;
-        font: inherit;
-        color: currentcolor;
-        margin: 0;
-        vertical-align: bottom;
-        text-align: inherit;
-        box-sizing: content-box;
     }
 
     .adf-create-tag-label {

lib/content-services/src/lib/version-manager/version-upload.component.html

@@ -14,7 +14,7 @@
             {{ 'ADF_VERSION_LIST.ACTIONS.UPLOAD.MAJOR' | translate: { version: majorVersion } }}
         </mat-radio-button>
     </mat-radio-group>
-    <mat-form-field class="adf-new-version-max-width" subscriptSizing="dynamic">
+    <mat-form-field class="adf-new-version-max-width">
         <mat-label>{{'ADF_VERSION_LIST.ACTIONS.UPLOAD.COMMENT' | translate}}</mat-label>
         <textarea matInput
                   [(ngModel)]="comment"

lib/content-services/src/lib/version-manager/version-upload.component.scss

@@ -27,6 +27,7 @@
     .adf-new-version-radio-group {
         display: inline-flex;
         flex-direction: column;
+        margin-bottom: 10px;
     }
 
     .adf-new-version-radio-button {

lib/core/src/lib/card-view/components/base-card-view.ts

@@ -44,11 +44,10 @@ export abstract class BaseCardView<T extends CardViewItem> {
     }
 
     get isReadonlyProperty(): boolean {
-        return this.editable && !this.property.editable;
+        return !this.property.editable;
     }
 
     get hasIcon(): boolean {
         return !!this.property.icon;
     }
-
 }

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

@@ -1,109 +1,113 @@
-<mat-label
+<div class="adf-property-value" [ngClass]="{ 'adf-property-value-editable': editable, 'adf-property-readonly-value': isReadonlyProperty || !editable }">
-    class="adf-property-label"
+    @if (!property.multivalued) {
-    [attr.data-automation-id]="'card-dateitem-label-' + property.key"
+        <mat-form-field class="adf-property-field adf-dateitem-editable" [floatLabel]="property.default ? 'always' : null">
-    *ngIf="showProperty && !isEditable"
+            <mat-label
-    [attr.for]="'card-view-dateitem-' + property.key"
+                class="adf-property-label"
-    [ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty, 'adf-property-value-editable': editable }"
+                [attr.data-automation-id]="'card-dateitem-label-' + property.key"
-    [title]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
+                [attr.for]="'card-view-dateitem-' + property.key"
->
+                [ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty || !editable, 'adf-property-value-editable': editable }"
-    {{ property.label | translate }}
+                [title]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
-</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)"
-            [title]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
-            >{{ property.displayValue }}</span
-        >
-    </span>
-    <mat-form-field *ngIf="isEditable && !property.multivalued" class="adf-property-field adf-dateitem-editable hxp-input" [floatLabel]="property.default ? 'always' : null">
-        <mat-label
-            class="adf-property-label"
-            [attr.data-automation-id]="'card-dateitem-label-' + property.key"
-            *ngIf="isEditable"
-            [attr.for]="'card-view-dateitem-' + property.key"
-            [ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty, 'adf-property-value-editable': editable }"
-            [title]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
-        >
-            {{ property.label | translate }}
-        </mat-label>
-        <div class="adf-dateitem-editable-controls">
-            <span
-                class="adf-datepicker-span-button"
-                [attr.data-automation-id]="'datepicker-label-toggle-' + property.key"
-                (click)="showDatePicker()"
-                tabindex="0"
-                role="button"
-                (keyup.enter)="showDatePicker()"
             >
-                <span *ngIf="showProperty; else elseEmptyValueBlock" [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
+                {{ property.label | translate }}
-                    {{ property.displayValue }}</span
+            </mat-label>
+            <div class="adf-dateitem-editable-controls">
+                <span
+                    class="adf-datepicker-span-button"
+                    [attr.data-automation-id]="'datepicker-label-toggle-' + property.key"
+                    (click)="showDatePicker()"
+                    (dblclick)="copyToClipboard(property.displayValue)"
+                    tabindex="0"
+                    role="button"
+                    (keyup.enter)="showDatePicker()"
                 >
-            </span>
+                    <span [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
-        </div>
+                        @if (showProperty) {
-        <input
+                            {{ property.displayValue }}
-            matInput
+                        } @else {
-            class="adf-invisible-date-input"
+                            {{ property.default | translate }}
-            [attr.tabIndex]="-1"
+                        }
-            [matDatetimepicker]="datetimePicker"
-            [value]="valueDate"
-            (dateChange)="onDateChanged($event)"
-            [attr.id]="'card-view-dateitem-' + property.key"
-        />
-            <mat-icon
-                matIconSuffix
-                *ngIf="showClearAction"
-                class="adf-date-reset-icon"
-                (click)="onDateClear()"
-                [attr.title]="'CORE.METADATA.ACTIONS.CLEAR' | translate"
-                [attr.data-automation-id]="'datepicker-date-clear-' + property.key"
-                adf-icon="clear"
-            />
-            <mat-datetimepicker-toggle
-                matIconSuffix
-                [attr.tabindex]="-1"
-                [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
-                [attr.data-automation-id]="'datepickertoggle-' + property.key"
-                [for]="datetimePicker"
-                class="adf-dateitem-picker-toggle"
-            />
 
-            <mat-datetimepicker
+                    </span>
-                #datetimePicker
+                </span>
-                [type]="$any(property).type"
+            </div>
-                [timeInterval]="5"
-                [attr.data-automation-id]="'datepicker-' + property.key"
-                [startAt]="valueDate"
-            />
-    </mat-form-field>
-    <ng-template #elseEmptyValueBlock>
-        {{ property.default | translate }}
-    </ng-template>
-
-    <div *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
-                *ngFor="let propertyValue of property.displayValue; let idx = index"
-                [removable]="isEditable"
-                (removed)="removeValueFromList(idx)"
-            >
-                {{ propertyValue }}
-                <mat-icon *ngIf="isEditable" matChipRemove adf-icon="cancel" />
-            </mat-chip-option>
-        </mat-chip-listbox>
-
-        <div
-            *ngIf="isEditable"
-            class="adf-property-field adf-dateitem-editable-controls"
-            (click)="showDatePicker()"
-            tabindex="0"
-            role="button"
-            (keyup.enter)="showDatePicker()"
-        >
             <input
+                matInput
+                [disabled]="isReadonlyProperty || !editable"
+                class="adf-invisible-date-input"
+                [attr.tabIndex]="-1"
+                [matDatetimepicker]="datetimePicker"
+                [value]="valueDate"
+                (dateChange)="onDateChanged($event)"
+                [attr.id]="'card-view-dateitem-' + property.key"
+            />
+                @if (showClearAction) {
+                    <mat-icon
+                        matIconSuffix
+                        class="adf-date-reset-icon"
+                        [ngClass]="{ 'cdk-visually-hidden': !editable || isReadonlyProperty}"
+                        (click)="onDateClear()"
+                        [attr.title]="'CORE.METADATA.ACTIONS.CLEAR' | translate"
+                        [attr.data-automation-id]="'datepicker-date-clear-' + property.key"
+                        adf-icon="clear"
+                    />
+                }
+                <mat-datetimepicker-toggle
+                    matIconSuffix
+                    [attr.tabindex]="-1"
+                    [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
+                    [attr.data-automation-id]="'datepickertoggle-' + property.key"
+                    [for]="datetimePicker"
+                    class="adf-dateitem-picker-toggle"
+                    [ngClass]="{ 'cdk-visually-hidden': !editable || isReadonlyProperty}"
+                />
+
+                <mat-datetimepicker
+                    #datetimePicker
+                    [type]="$any(property).type"
+                    [timeInterval]="5"
+                    [disabled]="isReadonlyProperty || !editable"
+                    [attr.data-automation-id]="'datepicker-' + property.key"
+                    [startAt]="valueDate"
+                    [ngClass]="{ 'cdk-visually-hidden': !editable || isReadonlyProperty}"
+                />
+        </mat-form-field>
+    } @else {
+        <mat-form-field class="adf-property-field adf-dateitem-editable" [floatLabel]="property.default ? 'always' : null">
+            <mat-label
+                class="adf-property-label"
+                [attr.data-automation-id]="'card-dateitem-label-' + property.key"
+                [attr.for]="'card-view-dateitem-' + property.key"
+                [ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty || !editable, 'adf-property-value-editable': editable }"
+                [title]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
+            >
+                {{ property.label | translate }}
+            </mat-label>
+            <mat-chip-listbox #chipList class="adf-textitem-chip-list" [disabled]="isReadonlyProperty || !editable">
+                <mat-chip-option
+                    *ngFor="let propertyValue of property.displayValue; let idx = index"
+                    [removable]="isEditable"
+                    (removed)="removeValueFromList(idx)"
+                >
+                    {{ propertyValue }}
+                    @if (isEditable) {
+                        <mat-icon matChipRemove adf-icon="cancel" />
+                    }
+                </mat-chip-option>
+            </mat-chip-listbox>
+            <div class="adf-dateitem-editable-controls">
+                <span
+                    class="adf-datepicker-span-button"
+                    [attr.data-automation-id]="'datepicker-label-toggle-' + property.key"
+                    (click)="showDatePicker()"
+                    (dblclick)="copyToClipboard(property.displayValue)"
+                    tabindex="0"
+                    role="button"
+                    (keyup.enter)="showDatePicker()"
+                ></span>
+            </div>
+            <input
+                matInput
+                [disabled]="isReadonlyProperty || !editable"
                 class="adf-invisible-date-input"
                 [attr.tabIndex]="-1"
                 [matDatetimepicker]="datetimePicker"
@@ -116,6 +120,7 @@
                 [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
                 [attr.data-automation-id]="'datepickertoggle-' + property.key"
                 [for]="datetimePicker"
+                [ngClass]="{ 'cdk-visually-hidden': !editable || isReadonlyProperty}"
             />
             <mat-datetimepicker
                 #datetimePicker
@@ -123,7 +128,9 @@
                 [timeInterval]="5"
                 [attr.data-automation-id]="'datepicker-' + property.key"
                 [startAt]="valueDate"
+                [disabled]="isReadonlyProperty || !editable"
+                [ngClass]="{ 'cdk-visually-hidden': !editable || isReadonlyProperty}"
             />
-        </div>
+        </mat-form-field>
-    </div>
+    }
 </div>

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

@@ -4,9 +4,12 @@
     display: flow-root;
 
     .adf-dateitem-editable {
-        cursor: pointer;
         width: 100%;
 
+        .adf-date-reset-icon {
+            padding: 0;
+        }
+
         &-controls {
             display: flex;
             align-items: center;
@@ -31,11 +34,6 @@
                 position: relative;
             }
         }
-
-        #{ms.$mat-line-ripple},
-        #{ms.$mat-form-field-subscript-wrapper} {
-            display: none;
-        }
     }
 
     .adf-property-value {
@@ -49,10 +47,6 @@
             border-bottom: inherit;
             padding-left: 0;
         }
-
-        &.adf-property-readonly-value {
-            padding: 0 0 0 12px;
-        }
     }
 
     .adf-invisible-date-input {

lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts

@@ -64,14 +64,16 @@ describe('CardViewDateItemComponent', () => {
     afterEach(() => fixture.destroy());
 
     const getPropertyLabel = (): string => testingUtils.getInnerTextByCSS('.adf-property-label');
-    const getPropertyValue = (): string => testingUtils.getInnerTextByCSS('.adf-property-value');
+    const getPropertyValue = (): string => testingUtils.getInputByCSS('.adf-invisible-date-input').value;
-    const getDateTime = (): string => testingUtils.getInnerTextByCSS('.adf-datepicker-span-button');
+    const getDefaultValue = (): string =>
+        testingUtils.getInnerTextByDataAutomationId('card-' + component.property.type + '-value-' + component.property.key);
+    const getDateTime = (): string => testingUtils.getInnerTextByDataAutomationId('datepicker-label-toggle-' + component.property.key);
 
     it('should render the label and value', () => {
         fixture.detectChanges();
 
         expect(getPropertyLabel()).toBe('Date label');
-        expect(getPropertyValue().trim()).toBe('Jul 10, 2017');
+        expect(getPropertyValue().trim()).toBe('07/10/2017');
     });
 
     it('should NOT render the default as value if the value is empty, editable:false and displayEmpty is false', () => {
@@ -103,7 +105,7 @@ describe('CardViewDateItemComponent', () => {
         component.displayEmpty = true;
         fixture.detectChanges();
 
-        expect(getPropertyValue().trim()).toBe('FAKE-DEFAULT-KEY');
+        expect(getDefaultValue()).toBe('FAKE-DEFAULT-KEY');
     });
 
     it('should render the default as value if the value is empty and editable:true', () => {
@@ -148,8 +150,8 @@ describe('CardViewDateItemComponent', () => {
 
         const datePicker = testingUtils.getByDataAutomationId(`datepicker-${component.property.key}`);
         const datePickerToggle = testingUtils.getByDataAutomationId(`datepickertoggle-${component.property.key}`);
-        expect(datePicker).toBeNull('Datepicker should NOT be in DOM');
+        expect(datePicker.classes['cdk-visually-hidden']).toBeTrue();
-        expect(datePickerToggle).toBeNull('Datepicker toggle should NOT be shown');
+        expect(datePickerToggle.classes['cdk-visually-hidden']).toBeTrue();
     });
 
     it('should NOT render the picker and toggle in case of editable:true but (general) editable:false', () => {
@@ -160,8 +162,8 @@ describe('CardViewDateItemComponent', () => {
         expect(component.isEditable).toBe(false);
         const datePicker = testingUtils.getByDataAutomationId(`datepicker-${component.property.key}`);
         const datePickerToggle = testingUtils.getByDataAutomationId(`datepickertoggle-${component.property.key}`);
-        expect(datePicker).toBeNull('Datepicker should NOT be in DOM');
+        expect(datePicker.classes['cdk-visually-hidden']).toBeTrue();
-        expect(datePickerToggle).toBeNull('Datepicker toggle should NOT be shown');
+        expect(datePickerToggle.classes['cdk-visually-hidden']).toBeTrue();
     });
 
     it('should open the datepicker when clicking on the label', () => {
@@ -213,7 +215,7 @@ describe('CardViewDateItemComponent', () => {
         component.editable = false;
         fixture.detectChanges();
 
-        testingUtils.doubleClickByDataAutomationId(`card-dateitem-${component.property.key}`);
+        testingUtils.doubleClickByDataAutomationId('datepicker-label-toggle-' + component.property.key);
 
         fixture.detectChanges();
         expect(clipboardService.copyContentToClipboard).toHaveBeenCalledWith('Jul 10, 2017', 'CORE.METADATA.ACCESSIBILITY.COPY_TO_CLIPBOARD_MESSAGE');

lib/core/src/lib/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.spec.ts

@@ -110,7 +110,6 @@ describe('CardViewItemDispatcherComponent', () => {
             const expectedCustomInput = 1;
             const expectedDisplayNoneOption = false;
             const expectedDisplayClearAction = false;
-            const expectedDisplayLabel = true;
 
             component.ngOnChanges({
                 editable: new SimpleChange(true, expectedEditable, false),
@@ -118,8 +117,7 @@ describe('CardViewItemDispatcherComponent', () => {
                 property: new SimpleChange(null, expectedProperty, false),
                 customInput: new SimpleChange(0, expectedCustomInput, false),
                 displayNoneOption: new SimpleChange(true, expectedDisplayNoneOption, false),
-                displayClearAction: new SimpleChange(true, expectedDisplayClearAction, false),
+                displayClearAction: new SimpleChange(true, expectedDisplayClearAction, false)
-                displayLabelForChips: new SimpleChange(false, expectedDisplayLabel, false)
             });
 
             const shinyCustomElementItemComponent = testingUtils.getByCSS('whatever-you-want-to-have').componentInstance;
@@ -129,7 +127,6 @@ describe('CardViewItemDispatcherComponent', () => {
             expect(shinyCustomElementItemComponent.customInput).toBe(expectedCustomInput);
             expect(shinyCustomElementItemComponent.displayNoneOption).toBe(expectedDisplayNoneOption);
             expect(shinyCustomElementItemComponent.displayClearAction).toBe(expectedDisplayClearAction);
-            expect(shinyCustomElementItemComponent.displayLabelForChips).toBe(expectedDisplayLabel);
         });
     });
 

lib/core/src/lib/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.ts

@@ -49,9 +49,6 @@ export class CardViewItemDispatcherComponent implements OnChanges {
     @Input()
     multiValueSeparator: string = DEFAULT_SEPARATOR;
 
-    @Input()
-    displayLabelForChips: boolean = false;
-
     private loaded: boolean = false;
     private componentReference: any = null;
 
@@ -103,7 +100,6 @@ export class CardViewItemDispatcherComponent implements OnChanges {
         this.componentReference.instance.copyToClipboardAction = this.copyToClipboardAction;
         this.componentReference.instance.useChipsForMultiValueProperty = this.useChipsForMultiValueProperty;
         this.componentReference.instance.multiValueSeparator = this.multiValueSeparator;
-        this.componentReference.instance.displayLabelForChips = this.displayLabelForChips;
     }
 
     private proxy(methodName, ...args) {

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

@@ -1,66 +1,51 @@
-<ng-container *ngIf="!property.isEmpty() || isEditable">
+<ng-container *ngIf="showProperty || isEditable">
     <div [ngSwitch]="templateType">
         <div *ngSwitchDefault>
-        <div *ngIf="!isEditable"
-            [attr.data-automation-id]="'card-select-label-' + property.key"
-            class="adf-property-label adf-property-label-non-editable"
-            >{{ property.label | translate }}
-        </div>
             <div class="adf-property-field">
-                <div
+                <mat-form-field class="adf-property-value">
-                    *ngIf="!isEditable"
+                    <mat-label
-                    class="adf-property-value adf-property-read-only"
+                        [attr.data-automation-id]="'card-select-label-' + property.key"
-                    [attr.data-automation-id]="'select-readonly-value-' + property.key"
+                        class="adf-property-label"
-                    data-automation-class="read-only-value"
+                        [ngClass]="{
-                    [title]="property.displayValue | async | translate"
+                            'adf-property-value-editable': isEditable,
-                >
+                            'adf-property-readonly-value': isReadonlyProperty
-                    {{ property.displayValue | async | translate }}
+                        }"
-                </div>
+                        >{{ property.label | translate }}
-                <div *ngIf="isEditable">
+                    </mat-label>
-                    <mat-form-field class="adf-property-value">
+                    <mat-select
-                        <mat-label
+                        [(ngModel)]="value"
-                            [attr.data-automation-id]="'card-select-label-' + property.key"
+                        [disabled]="isReadonlyProperty || !editable"
-                            class="adf-property-label adf-property-value-editable"
+                        [ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty || !editable }"
-                            [ngClass]="{
+                        panelClass="adf-select-filter"
-                                'adf-property-readonly-value': isReadonlyProperty
+                        (selectionChange)="onChange($event)"
-                            }"
+                        data-automation-id="select-box"
-                            >{{ property.label | translate }}
+                        [aria-label]="property.label | translate"
-                        </mat-label>
+                        adf-card-view-property-validator
-                        <mat-select
+                        [property]="property"
-                            [(ngModel)]="value"
+                        (validated)="onValidation($event)"
-                            [ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty }"
+                    >
-                            panelClass="adf-select-filter"
+                        <adf-select-filter-input *ngIf="showInputFilter" (change)="onFilterInputChange($event)" />
-                            (selectionChange)="onChange($event)"
+                        <mat-option *ngIf="displayNoneOption">{{ 'CORE.CARDVIEW.NONE' | translate }}</mat-option>
-                            data-automation-class="select-box"
+                        <mat-option *ngFor="let option of list$ | async" [value]="option.key">
-                            [aria-label]="property.label | translate"
+                            {{ option.label | translate }}
-                            adf-card-view-property-validator
+                        </mat-option>
-                            [property]="property"
+                    </mat-select>
-                            (validated)="onValidation($event)"
+                    <mat-error [innerHTML]="error" />
-                        >
+                </mat-form-field>
-                            <adf-select-filter-input *ngIf="showInputFilter" (change)="onFilterInputChange($event)" />
-                            <mat-option *ngIf="displayNoneOption">{{ 'CORE.CARDVIEW.NONE' | translate }}</mat-option>
-                            <mat-option *ngFor="let option of list$ | async" [value]="option.key">
-                                {{ option.label | translate }}
-                            </mat-option>
-                        </mat-select>
-                        <mat-error [innerHTML]="error" />
-                    </mat-form-field>
-                </div>
             </div>
         </div>
         <div *ngSwitchCase="'autocompleteBased'">
             <mat-form-field
                 class="adf-property-field adf-card-selectitem-autocomplete  "
-                [ngClass]="{ 'adf-property-read-only': !isEditable }"
+                [ngClass]="{ 'adf-property-read-only': isReadonlyProperty || !editable }"
                 [floatLabel]="property.default ? 'always' : null"
             >
                 <mat-label
-                    *ngIf="showProperty || isEditable"
                     [attr.data-automation-id]="'card-autocomplete-based-selectitem-label-' + property.key"
                     class="adf-property-label"
                     [ngClass]="{
                         'adf-property-value-editable': isEditable,
-                        'adf-property-readonly-value': isReadonlyProperty
+                        'adf-property-readonly-value': isReadonlyProperty || !editable
                     }"
                 >
                     {{ property.label | translate }}
@@ -71,7 +56,7 @@
                     class="adf-property-value"
                     [ngClass]="{
                         'adf-property-value-editable': isEditable,
-                        'adf-property-readonly-value': isReadonlyProperty
+                        'adf-property-readonly-value': isReadonlyProperty || !editable
                     }"
                     title="{{ property.label | translate }}"
                     [placeholder]="property.default"

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

@@ -44,10 +44,6 @@
         padding-left: 10px;
     }
 
-    #{ms.$mat-form-field-subscript-wrapper} {
-        display: block;
-    }
-
     .adf-property-read-only {
         text-overflow: ellipsis;
         overflow: hidden;
@@ -63,11 +59,4 @@
     .adf-property-readonly-value {
         color: var(--adf-metadata-property-panel-label-color);
     }
-
-    .adf-property-label {
-        &-non-editable {
-            cursor: default;
-            font-size: 10px;
-        }
-    }
 }

lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.spec.ts

@@ -62,7 +62,7 @@ describe('CardViewSelectItemComponent', () => {
         editable: true
     };
 
-    const getSelectElement = (): DebugElement => testingUtils.getByDataAutomationClass('select-box');
+    const getSelectElement = (): DebugElement => testingUtils.getByDataAutomationId('select-box');
 
     beforeEach(() => {
         TestBed.configureTestingModule({
@@ -82,8 +82,6 @@ describe('CardViewSelectItemComponent', () => {
     });
 
     describe('Rendering', () => {
-        const getReadOnlyElement = (): DebugElement => testingUtils.getByDataAutomationClass('read-only-value');
-
         it('should render custom label when editable is set to false', () => {
             component.property = new CardViewSelectItemModel({
                 ...mockDefaultProps,
@@ -93,7 +91,7 @@ describe('CardViewSelectItemComponent', () => {
             expect(testingUtils.getInnerTextByCSS('.adf-property-label')).toBe('Select box label');
         });
 
-        it('should render readOnly value is editable property is FALSE', () => {
+        it('should render disable select when editable property is FALSE', async () => {
             component.property = new CardViewSelectItemModel({
                 ...mockDefaultProps,
                 editable: false
@@ -101,19 +99,9 @@ describe('CardViewSelectItemComponent', () => {
 
             component.ngOnChanges({});
             fixture.detectChanges();
+            const selectBox = await testingUtils.getMatSelectByDataAutomationId('select-box');
 
-            expect(getReadOnlyElement()).not.toBeNull();
+            expect(await selectBox.isDisabled()).toBe(true);
-            expect(getSelectElement()).toBeNull();
-        });
-
-        it('should read only value have title', () => {
-            component.property = new CardViewSelectItemModel({
-                ...mockDefaultProps,
-                editable: false
-            });
-
-            fixture.detectChanges();
-            expect(getReadOnlyElement().nativeElement.title).toBe('Two');
         });
 
         it('should be possible edit selectBox item', async () => {

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

@@ -1,6 +1,6 @@
 
 <div class="adf-select-filter-input-container">
-    <mat-form-field subscriptSizing="dynamic">
+    <mat-form-field>
         <input matInput
             autocomplete="off"
             (keydown)="handleKeydown($event)"

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

@@ -1,167 +1,158 @@
-<div class="adf-card-textitem-field-container" [ngSwitch]="templateType">
+@if (showProperty || isEditable) {
-    <div *ngSwitchDefault>
+    <div class="adf-card-textitem-field-container" [ngSwitch]="templateType">
-        <mat-form-field
+        <div *ngSwitchDefault>
-            subscriptSizing="dynamic"
+            <mat-form-field
-            [floatLabel]="'always'"
+                class="adf-property-field adf-card-textitem-field"
-            class="adf-property-field adf-card-textitem-field"
+                [ngClass]="{
-            [ngClass]="{
+                    'adf-property-read-only': isReadonlyProperty
-                'adf-property-read-only': !isEditable
+                }"
-            }"
+            >
+                <mat-label
+                    [attr.data-automation-id]="'card-textitem-label-' + property.key"
+                    class="adf-property-label"
+                    [ngClass]="{
+                        'adf-property-value-editable': editable,
+                        'adf-property-readonly-value': isReadonlyProperty || !editable
+                    }"
+                >
+                    {{ property.label | translate }}
+                </mat-label>
+
+                <input
+                    matInput
+                    *ngIf="!property.multiline"
+                    class="adf-property-value"
+                    [ngClass]="{
+                        'adf-property-value-editable': editable,
+                        'adf-property-readonly-value': isReadonlyProperty || !editable,
+                        'adf-property-value-has-error': isEditable && hasErrors,
+                        'adf-property-value-not-editable': !editable
+                    }"
+                    [disabled]="isReadonlyProperty || !editable"
+                    title="{{ property.label | translate }}"
+                    [placeholder]="property.default"
+                    [attr.aria-label]="property.label | translate"
+                    [formControl]="textInput"
+                    (dblclick)="copyToClipboard(property.displayValue)"
+                    [title]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
+                    [attr.data-automation-id]="'card-textitem-value-' + property.key"
+                    (keydown)="undoText($event)"
+                    (blur)="update()"
+                    [aria-describedby]="'adf-card-textitem-error-' + property.key"
+                />
+                <textarea
+                    matInput
+                    *ngIf="property.multiline"
+                    title="{{ property.label | translate }}"
+                    [cdkTextareaAutosize]="true"
+                    [cdkAutosizeMinRows]="1"
+                    [cdkAutosizeMaxRows]="5"
+                    class="adf-property-value"
+                    [ngClass]="{
+                        'adf-property-value-editable': editable,
+                        'adf-property-readonly-value': isReadonlyProperty || !editable,
+                    }"
+                    [disabled]="isReadonlyProperty || !editable"
+                    [placeholder]="property.default"
+                    [attr.aria-label]="property.label | translate"
+                    [formControl]="textInput"
+                    [attr.data-automation-id]="'card-textitem-value-' + property.key"
+                >
+                </textarea>
+            </mat-form-field>
+        </div>
+
+        <div
+            *ngSwitchCase="'chipsTemplate'"
+            class="adf-property-field adf-textitem-chip-list-container"
+            [ngClass]="{ 'adf-property-read-only': isReadonlyProperty }"
         >
-            <mat-label
+            <mat-form-field
-                *ngIf="showProperty || isEditable"
+                class="adf-property-field adf-textitem-chip-list-input"
-                [attr.data-automation-id]="'card-textitem-label-' + property.key"
+                [ngClass]="{ 'adf-property-read-only': isReadonlyProperty }"
-                class="adf-property-label"
-                [ngClass]="{
-                    'adf-property-value-editable': editable,
-                    'adf-property-readonly-value': isReadonlyProperty
-                }"
             >
-                {{ property.label | translate }}
+                <mat-label
-            </mat-label>
+                    [attr.data-automation-id]="'card-textitem-label-' + property.key"
-
+                    class="adf-property-label"
-            <input
+                    [ngClass]="{ 'adf-property-value-editable': editable }"
-                matInput
+                >
-                *ngIf="!property.multiline"
+                    {{ property.label | translate }}
-                class="adf-property-value"
+                </mat-label>
-                [ngClass]="{
+                <mat-chip-grid #chipElement class="adf-textitem-chip-list" [disabled]="isReadonlyProperty || !editable">
-                    'adf-property-value-editable': editable,
+                    <mat-chip-row *ngFor="let propertyValue of editedValue; let idx = index" [removable]="isEditable" (removed)="removeValueFromList(idx)">
-                    'adf-property-readonly-value': isReadonlyProperty,
+                        {{ propertyValue }}
-                    'adf-property-value-has-error': isEditable && hasErrors,
+                        <mat-icon *ngIf="isEditable" matChipRemove adf-icon="cancel" />
-                    'adf-property-value-not-editable': !editable
+                    </mat-chip-row>
-                }"
+                </mat-chip-grid>
-                title="{{ property.label | translate }}"
+                <input
-                [placeholder]="property.default"
+                    matInput
-                [attr.aria-label]="property.label | translate"
+                    class="adf-property-value"
-                [formControl]="textInput"
+                    [ngClass]="{
-                (dblclick)="copyToClipboard(property.displayValue)"
+                        'adf-property-value-editable': editable,
-                [title]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
+                        'adf-property-readonly-value': isReadonlyProperty || !editable
-                [attr.data-automation-id]="'card-textitem-value-' + property.key"
+                    }"
-                (keydown)="undoText($event)"
+                    title="{{ property.label | translate }}"
-                (blur)="update()"
+                    [placeholder]="editedValue ? '' : (property.default | translate)"
-                [aria-describedby]="'adf-card-textitem-error-' + property.key"
+                    [attr.aria-label]="property.label | translate"
-            />
+                    [matChipInputFor]="chipElement"
-            <textarea
+                    [matChipInputAddOnBlur]="true"
-                matInput
+                    (matChipInputTokenEnd)="addValueToList($event)"
-                *ngIf="property.multiline"
+                    [disabled]="isReadonlyProperty || !editable"
-                title="{{ property.label | translate }}"
+                    [attr.data-automation-id]="'card-textitem-editchipinput-' + property.key"
-                [cdkTextareaAutosize]="true"
+                />
-                [cdkAutosizeMinRows]="1"
+            </mat-form-field>
-                [cdkAutosizeMaxRows]="5"
+        </div>
-                class="adf-property-value"
+        <div
-                [ngClass]="{
+            *ngSwitchCase="'clickableTemplate'"
-                    'adf-property-value-editable': editable,
+            role="button"
-                    'adf-property-readonly-value': isReadonlyProperty
+            class="adf-textitem-clickable"
-                }"
+            [ngClass]="{ 'adf-property-read-only': isReadonlyProperty }"
-                [placeholder]="property.default"
+            [attr.data-automation-id]="'card-textitem-toggle-' + property.key"
-                [attr.aria-label]="property.label | translate"
+            tabindex="0"
-                [formControl]="textInput"
+            (keyup.enter)="clicked()"
-                [attr.data-automation-id]="'card-textitem-value-' + property.key"
+            (click)="clicked()"
-            >
-            </textarea>
-        </mat-form-field>
-    </div>
-
-    <div
-        *ngSwitchCase="'chipsTemplate'"
-        class="adf-property-field adf-textitem-chip-list-container"
-        [ngClass]="{ 'adf-property-read-only': !isEditable }"
-    >
-        <mat-label
-            *ngIf="showLabelForChips"
-            [attr.data-automation-id]="'card-textitem-label-' + property.key"
-            class="adf-property-label"
-            [ngClass]="{ 'adf-property-value-editable': editable }"
         >
-            {{ property.label | translate }}
+            <mat-form-field class="adf-property-field adf-card-textitem-field">
-        </mat-label>
+                <mat-label
-        <mat-chip-grid #chipElement class="adf-textitem-chip-list">
+                    [attr.data-automation-id]="'card-textitem-label-' + property.key"
-            <mat-chip-row *ngFor="let propertyValue of editedValue; let idx = index" [removable]="isEditable" (removed)="removeValueFromList(idx)">
+                    class="adf-property-label"
-                {{ propertyValue }}
+                    [ngClass]="{ 'adf-property-value-editable': editable }"
-                <mat-icon *ngIf="isEditable" matChipRemove adf-icon="cancel" />
+                >
-            </mat-chip-row>
+                    {{ property.label | translate }}
-        </mat-chip-grid>
+                </mat-label>
-
+                <input
-        <mat-form-field
+                    matInput
-            *ngIf="isEditable"
+                    [type]="property.inputType"
-            [floatLabel]="'always'"
+                    class="adf-property-value"
-            class="adf-property-field adf-textitem-chip-list-input"
+                    title="{{ property.label | translate }}"
-            [ngClass]="{ 'adf-property-read-only': !isEditable }"
+                    [ngClass]="{
-        >
+                        'adf-property-value-editable': editable,
-            <input
+                        'adf-textitem-clickable-value': isClickable,
-                matInput
+                        'adf-property-readonly-value': isReadonlyProperty || !editable,
-                class="adf-property-value"
+                        'adf-property-value-has-error': isEditable && hasErrors,
-                [ngClass]="{
+                        'adf-property-value-has-icon-suffix': showClickableIcon
-                    'adf-property-value-editable': editable,
+                    }"
-                    'adf-property-readonly-value': isReadonlyProperty
+                    [placeholder]="property.default"
-                }"
+                    [attr.aria-label]="property.label | translate"
-                title="{{ property.label | translate }}"
+                    [(ngModel)]="editedValue"
-                [placeholder]="editedValue ? '' : (property.default | translate)"
+                    (blur)="update()"
-                [attr.aria-label]="property.label | translate"
+                    (keydown.enter)="update()"
-                [matChipInputFor]="chipElement"
+                    [disabled]="isReadonlyProperty || !editable"
-                [matChipInputAddOnBlur]="true"
+                    [attr.data-automation-id]="'card-textitem-value-' + property.key"
-                (matChipInputTokenEnd)="addValueToList($event)"
+                    [aria-describedby]="'adf-card-textitem-error-' + property.key"
-                [attr.data-automation-id]="'card-textitem-editchipinput-' + property.key"
+                />
-            />
+                <button
-        </mat-form-field>
+                    mat-icon-button
-    </div>
+                    matSuffix
-
+                    *ngIf="showClickableIcon"
-    <div
+                    class="adf-textitem-action"
-        *ngSwitchCase="'clickableTemplate'"
+                    [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
-        role="button"
+                    [attr.data-automation-id]="'card-textitem-clickable-icon-' + property.key"
-        class="adf-textitem-clickable"
+                >
-        [ngClass]="{ 'adf-property-read-only': !isEditable }"
+                    <mat-icon class="adf-textitem-icon" [adf-icon]="property?.icon" />
-        [attr.data-automation-id]="'card-textitem-toggle-' + property.key"
+                </button>
-        tabindex="0"
+            </mat-form-field>
-        (keyup.enter)="clicked()"
+        </div>
-        (click)="clicked()"
-    >
-        <mat-form-field class="adf-property-field adf-card-textitem-field" [floatLabel]="'always'">
-            <mat-label
-                *ngIf="showProperty || isEditable"
-                [attr.data-automation-id]="'card-textitem-label-' + property.key"
-                class="adf-property-label"
-                [ngClass]="{ 'adf-property-value-editable': editable }"
-            >
-                {{ property.label | translate }}
-            </mat-label>
-            <input
-                matInput
-                [type]="property.inputType"
-                class="adf-property-value"
-                title="{{ property.label | translate }}"
-                [ngClass]="{
-                    'adf-property-value-editable': editable,
-                    'adf-textitem-clickable-value': isClickable,
-                    'adf-property-readonly-value': isReadonlyProperty,
-                    'adf-property-value-has-error': isEditable && hasErrors,
-                    'adf-property-value-has-icon-suffix': showClickableIcon
-                }"
-                [placeholder]="property.default"
-                [attr.aria-label]="property.label | translate"
-                [(ngModel)]="editedValue"
-                (blur)="update()"
-                (keydown.enter)="update()"
-                [readonly]="!isEditable"
-                [attr.data-automation-id]="'card-textitem-value-' + property.key"
-                [aria-describedby]="'adf-card-textitem-error-' + property.key"
-            />
-            <button
-                mat-icon-button
-                matSuffix
-                *ngIf="showClickableIcon"
-                class="adf-textitem-action"
-                [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
-                [attr.data-automation-id]="'card-textitem-clickable-icon-' + property.key"
-            >
-                <mat-icon class="adf-textitem-icon" [adf-icon]="property?.icon" />
-            </button>
-        </mat-form-field>
-    </div>
-
-    <div *ngSwitchCase="'emptyTemplate'">
-        <span class="adf-textitem-default-value">{{ property.default | translate }}</span>
-    </div>
 
     <mat-error
         *ngIf="isEditable && hasErrors"
@@ -175,3 +166,4 @@
         </ul>
     </mat-error>
 </div>
+}

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

@@ -2,9 +2,6 @@
 
 .adf-card-view-textitem {
     .adf-textitem-error {
-        font-size: var(--theme-caption-font-size);
-        padding-top: 6px;
-
         &::before {
             display: none;
         }
@@ -50,12 +47,8 @@
             margin-top: 6px;
         }
 
-        #{ms.$mat-form-field-infix} {
+        .adf-property-value {
-            padding-top: 0;
+            margin-left: 0;
-
-            .adf-property-value {
-                margin-left: 0;
-            }
         }
     }
 
@@ -75,10 +68,6 @@
         }
     }
 
-    .adf-textitem-default-value {
-        color: var(--adf-theme-foreground-text-color-064);
-    }
-
     .adf-property-value-not-editable {
         color: var(--adf-metadata-property-panel-title-color);
     }

lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts

@@ -355,7 +355,7 @@ describe('CardViewTextItemComponent', () => {
             expect(await testingUtils.checkIfMatChipGridExists()).toBe(false);
         });
 
-        it('should display the label for multi-valued chips if displayLabelForChips is true', async () => {
+        it('should display the label for multi-valued chips', async () => {
             const cardViewTextItemObject = {
                 label: 'Text label',
                 value: ['item1', 'item2', 'item3'],
@@ -367,7 +367,6 @@ describe('CardViewTextItemComponent', () => {
 
             component.editable = true;
             component.property = new CardViewTextItemModel(cardViewTextItemObject);
-            component.displayLabelForChips = true;
             component.ngOnChanges({ property: new SimpleChange(null, null, true) });
 
             fixture.detectChanges();
@@ -376,37 +375,14 @@ describe('CardViewTextItemComponent', () => {
             expect(testingUtils.getInnerTextByCSS('.adf-property-label')).toBe('Text label');
         });
 
-        it('should NOT display the label for multi-valued chips if displayLabelForChips is false', async () => {
+        it('should return true when property.editable is false', () => {
-            const cardViewTextItemObject = {
-                label: 'Text label',
-                value: ['item1', 'item2', 'item3'],
-                key: 'textkey',
-                default: ['FAKE-DEFAULT-KEY'],
-                editable: true,
-                multivalued: true
-            };
-
-            component.editable = true;
-            component.property = new CardViewTextItemModel(cardViewTextItemObject);
-            component.displayLabelForChips = false;
-            component.ngOnChanges({ property: new SimpleChange(null, null, true) });
-
-            fixture.detectChanges();
-            await fixture.whenStable();
-
-            expect(testingUtils.getByCSS('.adf-property-label')).toBeNull();
-        });
-
-        it('should return true when editable is true, and property.editable is false', () => {
-            component.editable = true;
             component.property.editable = false;
             fixture.detectChanges();
             expect(component.isReadonlyProperty).toBe(true);
         });
 
-        it('should return false when editable is false, and property.editable is false', () => {
+        it('should return false when and property.editable is true', () => {
-            component.editable = false;
+            component.property.editable = true;
-            component.property.editable = false;
             fixture.detectChanges();
             expect(component.isReadonlyProperty).toBe(false);
         });
@@ -595,7 +571,7 @@ describe('CardViewTextItemComponent', () => {
             );
         });
 
-        it('should input be readonly if item it NOT editable', async () => {
+        it('should input be disabled if item it NOT editable', async () => {
             component.editable = false;
             component.property.clickable = true;
             component.ngOnChanges({});
@@ -605,7 +581,7 @@ describe('CardViewTextItemComponent', () => {
             const inputHarness = await testingUtils.getMatInputByDataAutomationId(`card-textitem-value-${component.property.key}`);
 
             expect(component.isEditable).toBe(false);
-            expect(await inputHarness.isReadonly()).toBe(true);
+            expect(await inputHarness.isDisabled()).toBe(true);
         });
     });
 

lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.stories.ts

@@ -67,8 +67,7 @@ export const ChipsCardViewTextItem: Story = {
             multivalued: true,
             icon: 'icon',
             editable: true
-        }),
+        })
-        displayLabelForChips: false
     }
 };
 
@@ -107,22 +106,3 @@ export const DefaultCardViewTextItem: Story = {
         })
     }
 };
-
-export const DisplayLabelForChipsCardTextItem: Story = {
-    render: (args) => ({
-        props: args
-    }),
-    args: {
-        property: new CardViewTextItemModel({
-            label: 'CardView Text Item - Multi-Valued Chips template',
-            value: ['Chip 1', 'Chip 2', 'Chip 3'],
-            key: 'multivalued',
-            default: 'default value',
-            multiline: true,
-            multivalued: true,
-            icon: 'icon',
-            editable: true
-        }),
-        displayLabelForChips: false
-    }
-};

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

@@ -38,7 +38,6 @@ const templateTypes = {
     clickableTemplate: 'clickableTemplate',
     multilineTemplate: 'multilineTemplate',
     chipsTemplate: 'chipsTemplate',
-    emptyTemplate: 'emptyTemplate',
     defaultTemplate: 'defaultTemplate'
 };
 
@@ -74,9 +73,6 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
     @Input()
     multiValueSeparator: string = DEFAULT_SEPARATOR;
 
-    @Input()
-    displayLabelForChips = false;
-
     editedValue: string | string[];
     errors: CardViewItemValidator[];
     templateType: string;
@@ -128,7 +124,7 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
                 this.templateType = templateTypes.defaultTemplate;
             }
         } else {
-            this.templateType = templateTypes.emptyTemplate;
+            this.templateType = templateTypes.defaultTemplate;
         }
     }
 
@@ -253,10 +249,6 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
         return this.property.multivalued && this.useChipsForMultiValueProperty;
     }
 
-    get showLabelForChips(): boolean {
-        return this.displayLabelForChips;
-    }
-
     private prepareIntLongValue(value: string): string {
         return String(Math.trunc(Number(value)));
     }

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

@@ -9,8 +9,7 @@
                 [displayClearAction]="displayClearAction"
                 [copyToClipboardAction]="copyToClipboardAction"
                 [useChipsForMultiValueProperty]="useChipsForMultiValueProperty"
-                [multiValueSeparator]="multiValueSeparator"
+                [multiValueSeparator]="multiValueSeparator" />
-                [displayLabelForChips]="displayLabelForChips" />
         </div>
     </div>
 </div>

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

@@ -5,21 +5,6 @@
     border-color: var(--adf-theme-foreground-divider-color);
     border-radius: 0;
 
-    .adf-property-label {
-        color: var(--adf-metadata-property-panel-text-color);
-        display: flex;
-        line-height: 20px;
-        margin-bottom: 4px;
-
-        &.adf-property-readonly-value {
-            color: var(--adf-metadata-property-panel-label-color);
-        }
-
-        &.adf-property-value-editable {
-            color: var(--adf-metadata-property-panel-title-color);
-        }
-    }
-
     .adf-property-container {
         margin-bottom: 12px;
     }

lib/core/src/lib/card-view/components/card-view/card-view.component.spec.ts

@@ -22,8 +22,6 @@ import { CardViewComponent } from './card-view.component';
 import { CardViewSelectItemModel } from '../../models/card-view-selectitem.model';
 import { of } from 'rxjs';
 import { CardViewSelectItemOption } from '../../interfaces/card-view-selectitem-properties.interface';
-import { CardViewItem } from '../../interfaces/card-view-item.interface';
-import { CardViewItemDispatcherComponent } from '../card-view-item-dispatcher/card-view-item-dispatcher.component';
 import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { MatDialogModule } from '@angular/material/dialog';
@@ -53,7 +51,7 @@ describe('CardViewComponent', () => {
 
     const getPropertyLabel = (): string => testingUtils.getInnerTextByCSS('.adf-property-label');
     const getPropertyValue = (): string => testingUtils.getByCSS('.adf-property-value').nativeElement.value;
-    const getPropertyValueText = (): string => testingUtils.getInnerTextByCSS('.adf-property-value');
+    const getPropertyValueText = (): string => testingUtils.getInnerTextByCSS('.adf-datepicker-span-button');
     const getPropertyValueByDataAutomationId = (dataAutomationId: string): string =>
         testingUtils.getByDataAutomationId(dataAutomationId).nativeElement.value;
 
@@ -223,34 +221,4 @@ describe('CardViewComponent', () => {
         expect(await currentOptions[0].getText()).toContain(options[0].label);
         expect(await currentOptions[1].getText()).toContain(options[1].label);
     });
-
-    it('should show/hide the label for multivalued chip property based on displayLabelForChips input', () => {
-        const multiValueProperty: CardViewItem = new CardViewTextItemModel({
-            label: 'My Multivalue Label',
-            value: ['Value 1', 'Value 2', 'Value 3'],
-            key: 'multi-key'
-        });
-
-        component.properties = [multiValueProperty];
-        fixture.detectChanges();
-
-        const cardViewItemDispatcherComponent = getCardViewItemDispatcherComponent();
-
-        expect(cardViewItemDispatcherComponent.displayLabelForChips).toBe(false);
-
-        component.displayLabelForChips = true;
-        fixture.detectChanges();
-
-        expect(cardViewItemDispatcherComponent.displayLabelForChips).toBe(true);
-    });
-
-    /**
-     * Return the card view item dispatcher component
-     *
-     * @returns the dispatcher component instance
-     */
-    function getCardViewItemDispatcherComponent(): CardViewItemDispatcherComponent {
-        const cardViewItemDispatcherDebugElement = testingUtils.getByDirective(CardViewItemDispatcherComponent);
-        return cardViewItemDispatcherDebugElement.componentInstance as CardViewItemDispatcherComponent;
-    }
 });

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

@@ -60,8 +60,4 @@ export class CardViewComponent {
     /** String separator between multi-value property items. */
     @Input()
     multiValueSeparator: string = DEFAULT_SEPARATOR;
-
-    /** Toggles whether or not to show label for multivalued chip property. */
-    @Input()
-    displayLabelForChips: boolean = false;
 }

lib/core/src/lib/card-view/stories/card-view-shared-meta.ts

@@ -92,14 +92,6 @@ export const cardViewArgTypes: ArgTypes = {
             type: { summary: 'string' },
             defaultValue: { summary: ', ' }
         }
-    },
-    displayLabelForChips: {
-        control: 'boolean',
-        description: 'Display label for chips property',
-        table: {
-            type: { summary: 'boolean' },
-            defaultValue: { summary: 'false' }
-        }
     }
 };
 
@@ -113,8 +105,7 @@ export const cardViewDefaultArgs: Record<string, unknown> = {
     displayClearAction: true,
     copyToClipboardAction: true,
     useChipsForMultiValueProperty: true,
-    multiValueSeparator: ', ',
+    multiValueSeparator: ', '
-    displayLabelForChips: false
 };
 
 /**

lib/core/src/lib/comments/comments.component.html

@@ -3,14 +3,14 @@
         {{'COMMENTS.HEADER' | translate: { count: comments?.length } }}
     </div>
     <div *ngIf="!readOnly" class="adf-comments-input-container adf-comments-divider">
-            <mat-form-field>
+            <mat-form-field class="adf-comments-input-form-field">
+                <mat-label>{{ 'COMMENTS.ADD' | translate }}</mat-label>
                 <textarea
                     #commentInput
                     matInput
                     id="comment-input"
                     class="adf-text-text-area"
-                    [placeholder]='("COMMENTS.ADD" | translate) + "*"'
+                    [attr.aria-label]='("COMMENTS.ADD" | translate) + "*"'
-                    [attr.aria-label]="'COMMENTS.ADD' | translate"
                     [formControl]="commentControl"
                     (keydown.escape)="clearMessage($event)"
                 >

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

@@ -8,35 +8,11 @@ adf-comments {
 
         .adf-comments-input-container {
             width: 100%;
-            padding-bottom: 8px;
+            padding: 10px 0;
 
-            #{ms.$mat-form-field} {
+            .adf-comments-input-form-field {
                 width: 100%;
-
+                margin-bottom: 10px;
-                &#{ms.$mat-form-field-invalid} {
-                    #{ms.$mat-input-element} {
-                        &::placeholder,
-                        &:focus::placeholder {
-                            color: var(--theme-warn-color);
-                        }
-                    }
-                }
-            }
-
-            #{ms.$mat-form-field-wrapper} {
-                #{ms.$mat-form-field-flex} {
-                    #{ms.$mat-form-field-infix} {
-                        padding-bottom: 2px;
-                        padding-top: 25px;
-                    }
-                }
-
-                #{ms.$mat-input-element} {
-                    &:focus::placeholder {
-                        color: var(--theme-primary-color);
-                        -webkit-font-smoothing: subpixel-antialiased;
-                    }
-                }
             }
 
             textarea {
@@ -46,10 +22,6 @@ adf-comments {
         }
     }
 
-    .adf-comments-divider {
-        border-bottom: 1px solid var(--adf-theme-foreground-divider-color);
-    }
-
     .adf-comments-header {
         padding: 10px 0;
         font-size: var(--theme-body-1-font-size);
@@ -57,7 +29,6 @@ adf-comments {
     }
 
     .adf-comments-input-actions {
-        padding-top: 16px;
         display: flex;
         justify-content: flex-end;
     }

lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.html

@@ -22,16 +22,18 @@
 
     <mat-divider class="adf-columns-selector-divider" aria-hidden="true" />
 
-    <div class="adf-columns-selector-search-input-container">
+    <mat-form-field class="adf-columns-selector-search-input-form">
-        <mat-icon class="adf-columns-selector-search-input-icon" adf-icon="search" />
+        <mat-label>{{ 'ADF-DATATABLE.COLUMNS_SELECTOR.SEARCH' | translate }}</mat-label>
-
         <input
-            [formControl]="searchInputControl"
+            matInput
-            class="adf-columns-selector-search-input"
-            data-automation-id="adf-columns-selector-search-input"
             type="text"
-            [placeholder]='"ADF-DATATABLE.COLUMNS_SELECTOR.SEARCH" | translate'>
+            data-automation-id="adf-columns-selector-search-input"
-    </div>
+            [placeholder]="'ADF-DATATABLE.COLUMNS_SELECTOR.SEARCH' | translate"
+            [formControl]="searchInputControl"/>
+        <mat-icon matSuffix>
+            search
+        </mat-icon>
+    </mat-form-field>
 
     <mat-selection-list
         class="adf-columns-selector-list-container"

lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.scss

@@ -83,33 +83,9 @@ adf-datatable-column-selector {
             margin: 16px 0;
         }
 
-        &-search-input-container {
+        &-search-input-form {
-            @include adf-columns-selector-side-padding;
-
-            position: relative;
             display: flex;
-            align-items: center;
+            padding: 10px 12px 0;
-            margin-bottom: 9px;
-        }
-
-        &-search-input {
-            padding: 10px 10px 10px 29px;
-            width: 100%;
-            outline: 0;
-            border-radius: 6px;
-            border: 1px solid var(--theme-background-color);
-            background: var(--theme-background-color);
-
-            &:focus {
-                outline: none;
-            }
-        }
-
-        &-search-input-icon {
-            position: absolute;
-            left: 17px;
-            top: 10px;
-            font-size: var(--theme-adf-icon-1-font-size);
         }
     }
 }

lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.spec.ts

@@ -34,6 +34,9 @@ describe('ColumnsSelectorComponent', () => {
 
     const menuOpenedTrigger = new Subject<void>();
     const menuClosedTrigger = new Subject<void>();
+    const getSelectorInputValue = (): Promise<string> => testingUtils.getMatInputValueByDataAutomationId('adf-columns-selector-search-input');
+    const fillSelectorInput = (value: string): Promise<void> =>
+        testingUtils.fillMatInputByDataAutomationId('adf-columns-selector-search-input', value);
 
     let mainMenuTrigger: { menuOpened: Observable<void>; menuClosed: Observable<void> };
 
@@ -93,21 +96,19 @@ describe('ColumnsSelectorComponent', () => {
 
     afterEach(() => fixture.destroy());
 
-    it('should clear search after closing menu', fakeAsync(() => {
+    it('should clear search after closing menu', fakeAsync(async () => {
         menuOpenedTrigger.next();
         fixture.detectChanges();
 
-        let searchInput = testingUtils.getByCSS('.adf-columns-selector-search-input').nativeElement;
+        await fillSelectorInput('TEST');
-        testingUtils.fillInputByCSS('.adf-columns-selector-search-input', 'TEST');
 
         tick(300);
-        expect(searchInput.value).toBe('TEST');
+        expect(await getSelectorInputValue()).toBe('TEST');
 
         menuClosedTrigger.next();
         tick(300);
-        searchInput = testingUtils.getByCSS('.adf-columns-selector-search-input').nativeElement;
 
-        expect(searchInput.value).toBe('');
+        expect(await getSelectorInputValue()).toBe('');
     }));
 
     it('should list only columns with title', async () => {
@@ -130,7 +131,7 @@ describe('ColumnsSelectorComponent', () => {
         fixture.detectChanges();
         menuOpenedTrigger.next();
 
-        testingUtils.fillInputByCSS('.adf-columns-selector-search-input', inputColumns[0].title);
+        await fillSelectorInput(inputColumns[0].title);
 
         tick(400);
         fixture.detectChanges();

lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.ts

@@ -28,6 +28,8 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ColumnsSearchFilterPipe } from './columns-search-filter.pipe';
 import { MatListOption, MatSelectionList, MatSelectionListChange } from '@angular/material/list';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 import { IconModule } from '../../../icon/icon.module';
 
 @Component({
@@ -42,7 +44,9 @@ import { IconModule } from '../../../icon/icon.module';
         MatCheckboxModule,
         ColumnsSearchFilterPipe,
         MatSelectionList,
-        MatListOption
+        MatListOption,
+        MatFormFieldModule,
+        MatInputModule
     ],
     templateUrl: './columns-selector.component.html',
     styleUrls: ['./columns-selector.component.scss'],

lib/core/src/lib/form/components/widgets/date/date.widget.html

@@ -1,5 +1,5 @@
 <div class="{{ field.className }} date-widget-container" id="data-widget" [class.adf-invalid]="dateInputControl.invalid && dateInputControl.touched">
-    <mat-form-field [floatLabel]="'always'" class="adf-date-widget adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : null">
+    <mat-form-field class="adf-date-widget adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : null">
         <mat-label class="adf-label"
                    [id]="field.id + '-label'"
                    [attr.for]="field.id">

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

@@ -57,7 +57,9 @@
     .adf-login-card-wide {
         border-radius: 8px;
         background-color: var(--adf-theme-background-dialog-color);
-        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
+        box-shadow:
+            0 2px 2px 0 rgba(0, 0, 0, 0.24),
+            0 0 2px 0 rgba(0, 0, 0, 0.12);
         width: 450px;
         min-width: 320px;
         padding: 21px 64px 34px;
@@ -182,11 +184,11 @@
     }
 
     .adf-login-form-field .adf-login-password-icon.adf-login-form-password-icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
         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) {
@@ -205,10 +207,6 @@
             font-size: var(--theme-subheading-2-font-size);
 
             #{ms.$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);
                 }

lib/core/src/lib/search-text/search-text-input.component.html

@@ -3,7 +3,7 @@
         [@transitionMessages]="subscriptAnimationState"
         (@transitionMessages.done)="applySearchFocus($event)">
         <button mat-icon-button
-                *ngIf="expandable"
+                *ngIf="expandable && !isSearchBarActive()"
                 id="adf-search-button"
                 class="adf-search-button"
                 [ngClass]="{'adf-search-button-inactive': subscriptAnimationState.value === 'inactive'}"

lib/core/src/lib/search-text/search-text-input.component.scss

@@ -1,14 +1,8 @@
-@use '../styles/mat-selectors' as ms;
-
 .adf-search-container {
     &:has(.adf-input-form-field-divider) {
         overflow: hidden;
     }
 
-    #{ms.$mat-form-field-subscript-wrapper} {
-        display: none;
-    }
-
     .adf-search-container-transition {
         display: flex;
         align-items: center;

lib/core/src/lib/search-text/search-text-input.component.spec.ts

@@ -80,6 +80,7 @@ describe('SearchTextInputComponent', () => {
 
     describe('search button', () => {
         let searchButton: DebugElement;
+
         beforeEach(fakeAsync(() => {
             fixture.detectChanges();
             tick(100);
@@ -89,13 +90,14 @@ describe('SearchTextInputComponent', () => {
 
         it('should NOT display a autocomplete list control when configured not to', fakeAsync(() => {
             component.subscriptAnimationState.value = 'active';
+            component.showClearButton = true;
             fixture.detectChanges();
 
             tick(100);
 
             expect(component.subscriptAnimationState.value).toBe('active');
 
-            searchButton.triggerEventHandler('click', null);
+            testingUtils.clickByDataAutomationId('adf-clear-search-button');
             fixture.detectChanges();
             tick(100);
             fixture.detectChanges();
@@ -118,30 +120,6 @@ describe('SearchTextInputComponent', () => {
             discardPeriodicTasks();
         }));
 
-        it('Search button should not change the input state too often', fakeAsync(() => {
-            component.subscriptAnimationState.value = 'active';
-            fixture.detectChanges();
-
-            tick(100);
-
-            expect(component.subscriptAnimationState.value).toBe('active');
-            searchButton.triggerEventHandler('click', null);
-            fixture.detectChanges();
-
-            tick(100);
-
-            searchButton.triggerEventHandler('click', null);
-            fixture.detectChanges();
-
-            tick(100);
-            fixture.detectChanges();
-
-            tick(100);
-
-            expect(component.subscriptAnimationState.value).toBe('inactive');
-            discardPeriodicTasks();
-        }));
-
         it('Search bar should close when user press ESC button', fakeAsync(() => {
             component.subscriptAnimationState.value = 'active';
             fixture.detectChanges();
@@ -186,7 +164,7 @@ describe('SearchTextInputComponent', () => {
         function testMarginValue(isLtr: boolean): void {
             userPreferencesService.setWithoutStore('textOrientation', isLtr ? 'ltr' : 'rtl');
             clickSearchButton();
-            const expectedResult = isLtr ? { 'margin-left': 13 } : { 'margin-right': 13 };
+            const expectedResult = isLtr ? { 'margin-left': 0 } : { 'margin-right': 0 };
             expect(component.subscriptAnimationState.params).toEqual(expectedResult);
             discardPeriodicTasks();
         }
@@ -206,8 +184,7 @@ describe('SearchTextInputComponent', () => {
          */
         function testTransformValue(isLtr: boolean): void {
             userPreferencesService.setWithoutStore('textOrientation', isLtr ? 'ltr' : 'rtl');
-            component.subscriptAnimationState.value = 'active';
+            component.subscriptAnimationState.value = 'inactive';
-            clickSearchButton();
             const expectedValue = isLtr ? 'translateX(100%)' : 'translateX(-100%)';
             expect(component.subscriptAnimationState.params).toEqual({ transform: expectedValue });
             discardPeriodicTasks();
@@ -364,7 +341,7 @@ describe('SearchTextInputComponent', () => {
             component.expandable = true;
             component.showClearButton = true;
             fixture.detectChanges();
-            component.subscriptAnimationState.value = 'active';
+            component.subscriptAnimationState.value = 'inactive';
             fixture.detectChanges();
             tick(200);
         }));
@@ -387,6 +364,8 @@ describe('SearchTextInputComponent', () => {
         });
 
         it('should contain correct translation key for clear button title', () => {
+            component.subscriptAnimationState.value = 'active';
+            fixture.detectChanges();
             const clearButton = testingUtils.getByDataAutomationId('adf-clear-search-button');
             expect(clearButton.nativeElement.getAttribute('title')).toBe('CORE.SEARCH.FILTER.BUTTONS.CLOSE');
         });

lib/core/src/lib/search-text/search-text-input.component.ts

@@ -216,11 +216,11 @@ export class SearchTextInputComponent implements OnInit, OnDestroy {
     private toggleAnimation() {
         if (this.dir === 'ltr') {
             return this.subscriptAnimationState.value === 'inactive'
-                ? { value: 'active', params: { 'margin-left': 13 } }
+                ? { value: 'active', params: { 'margin-left': 0 } }
                 : { value: 'inactive', params: { transform: 'translateX(100%)' } };
         } else {
             return this.subscriptAnimationState.value === 'inactive'
-                ? { value: 'active', params: { 'margin-right': 13 } }
+                ? { value: 'active', params: { 'margin-right': 0 } }
                 : { value: 'inactive', params: { transform: 'translateX(-100%)' } };
         }
     }

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

@@ -9,20 +9,15 @@ $mat-tab-body: '.mat-mdc-tab-body';
 $mat-tab-header: '.mat-mdc-tab-header';
 $mat-tab-body-content: '.mat-mdc-tab-body-content';
 $mat-tab-ink-bar: '.mdc-tab-indicator';
-$mat-tab-body-wrapper: '.mat-mdc-tab-body-wrapper';
-$mat-tab-body-content: '.mat-mdc-card-content';
 $mat-chip: '.mat-mdc-chip';
 $mat-chip-list: '.mat-mdc-chip-list';
 $mat-checkbox: '.mat-mdc-checkbox';
 $mat-checkbox-label: '.mdc-label';
 $mat-button: '.mat-mdc-button';
 $mat-button-label: '.mdc-button__label';
-$mat-form-field-input-control: '.mat-mdc-form-field-input-control';
 $mat-form-field: '.mat-mdc-form-field';
-$mat-form-field-flex: '.mat-mdc-form-field-flex';
 $mat-form-field-wrapper: '.mat-mdc-text-field-wrapper';
 $mat-line-ripple: '.mdc-line-ripple';
-$mat-form-field-subscript-wrapper: '.mat-mdc-form-field-subscript-wrapper';
 $mat-form-field-prefix: '.mat-mdc-form-field-text-prefix';
 $mat-form-field-suffix: '.mat-mdc-form-field-text-suffix';
 $mat-form-text-field-infix: '.mat-mdc-form-text-infix';
@@ -38,7 +33,6 @@ $mat-table: '.mat-mdc-table';
 $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-panel: '.mat-mdc-select-panel';
 $mat-grid-tile: '.mat-grid-tile';
 $mat-sidenav-content: '.mat-sidenav-content';
@@ -56,36 +50,24 @@ $mat-calendar-table-header: '.mat-calendar-table-header';
 $mat-calendar-body-disabled: '.mat-calendar-body-disabled';
 $mat-toolbar: '.mat-toolbar';
 $mat-list-item-unscoped-content: '.mat-mdc-list-item-unscoped-content';
-$mat-list-item: '.mat-mdc-list-item';
 $mat-list-item-end: '.mdc-list-item__end';
 $mat-text-field-no-label: '.mdc-text-field--no-label';
 $mat-form-field-infix: '.mat-mdc-form-field-infix';
-$mat-form-field-error-wrapper: '.mat-mdc-form-field-error-wrapper';
-$mat-form-field-error: '.mat-mdc-form-field-error';
-$mat-checkbox-background: '.mdc-checkbox__background';
-$mat-floating-label: '.mdc-floating-label';
-$mat-floating-label-above: '.mdc-floating-label--float-above';
 $mat-dialog-surface: '.mat-mdc-dialog-surface';
 $mat-floating-label-required: '.mdc-floating-label--required';
-$mat-evolution-chip: '.mdc-evolution-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-evolution-chip-graphic: '.mdc-evolution-chip__graphic';
 $mat-select-trigger: '.mat-mdc-select-trigger';
 $mat-button-base: '.mat-mdc-button-base';
-$mat-button-touch-target: '.mat-mdc-button-touch-target';
 $cdk-drag-preview: '.cdk-drag-preview';
 $mat-snackbar: '.mdc-snackbar';
 $mat-snack-bar-container: '.mat-mdc-snack-bar-container';
 $mat-snackbar-label: '.mdc-snackbar__label';
 $mat-datetimepicker-dialog: '.mat-datetimepicker-dialog';
 $mat-tab-indicator-underline: '.mdc-tab-indicator__content--underline';
-$mat-list-item: '.mdc-list-item';
 $mat-form-field-icon-suffix: '.mat-mdc-form-field-icon-suffix';
-$mat-text-field: '.mdc-text-field';
 $mat-select-value: '.mat-mdc-select-value';
-$mat-card-header: '.mat-mdc-card-header';
 $mat-datetimepicker-calendar: '.mat-datetimepicker-calendar';
 $mat-datetimepicker-calendar-header: '.mat-datetimepicker-calendar-header';
 $mat-datetimepicker-calendar-table-header: '.mat-datetimepicker-calendar-table-header';
@@ -95,4 +77,3 @@ $mat-datetimepicker-calendar-header-time: '.mat-datetimepicker-calendar-header-t
 $mat-datetimepicker-calendar-content: '.mat-datetimepicker-calendar-content';
 $mat-datetimepicker-calendar-body-disabled: '.mat-datetimepicker-calendar-body-disabled';
 $mat-datetimepicker-toggle: '.mat-datetimepicker-toggle';
-$mat-form-field-underline: '.mat-form-field-underline';

lib/core/src/lib/testing/unit-testing-utils.ts

@@ -95,6 +95,11 @@ export class UnitTestingUtils {
         element.triggerEventHandler('dblclick', new MouseEvent('dblclick'));
     }
 
+    doubleClickByCSS(selector: string): void {
+        const element = this.getByCSS(selector);
+        element.triggerEventHandler('dblclick', new MouseEvent('dblclick'));
+    }
+
     blurByCSS(selector: string): void {
         const element = this.getByCSS(selector);
         element.triggerEventHandler('blur', new FocusEvent('blur'));
@@ -267,6 +272,14 @@ export class UnitTestingUtils {
         return select.getOptions();
     }
 
+    async getMatSelect(): Promise<MatSelectHarness> {
+        return this.loader.getHarness(MatSelectHarness);
+    }
+
+    async getMatSelectByDataAutomationId(dataAutomationId: string): Promise<MatSelectHarness> {
+        return this.loader.getHarness(MatSelectHarness.with({ selector: `[data-automation-id="${dataAutomationId}"]` }));
+    }
+
     async getMatSelectHost(): Promise<TestElement> {
         const select = await this.loader.getHarness(MatSelectHarness);
         return select.host();
@@ -388,6 +401,11 @@ export class UnitTestingUtils {
         return input.getValue();
     }
 
+    async getMatInputValueByDataAutomationId(dataAutomationId: string): Promise<string> {
+        const input = await this.getMatInputByDataAutomationId(dataAutomationId);
+        return input.getValue();
+    }
+
     async sendKeysToMatInput(keys: (string | TestKey)[]): Promise<void> {
         const input = await this.getMatInput();
         const host = await input.host();

lib/insights/src/lib/analytics-process/components/analytics-report-parameters.component.html

@@ -116,7 +116,7 @@
                                 {{ 'DIALOG.SAVE_MESSAGE' | translate }}
                             </div>
                             <div class="adf-save-export-input">
-                                <mat-form-field class="adf-example-full-width" [floatLabel]="'always'">
+                                <mat-form-field class="adf-full-width">
                                     <input
                                         matInput
                                         type="text"

lib/insights/src/lib/analytics-process/components/analytics-report-parameters.component.scss

@@ -92,7 +92,7 @@
 }
 
 .adf-report-dialog {
-    .adf-example-full-width {
+    .adf-full-width {
         width: 100%;
     }
 

lib/insights/src/lib/analytics-process/components/widgets/duration/duration.widget.html

@@ -1,7 +1,7 @@
 <div class="adf-duration-widget-grid">
     <div class="adf-duration-widget-cell">
         <div class="adf-number-widget">
-            <mat-form-field class="adf-example-full-width" [floatLabel]="'always'">
+            <mat-form-field class="adf-example-full-width">
                 <input
                     matInput
                     placeholder="{{field.nameKey | translate}}"

lib/insights/src/lib/analytics-process/components/widgets/number/number.widget.html

@@ -1,5 +1,5 @@
 <div class="adf-number-widget" [formGroup]="formGroup">
-    <mat-form-field class="example-full-width" [floatLabel]="'always'">
+    <mat-form-field class="adf-full-width">
         <input matInput
             placeholder="{{field.nameKey | translate}}"
             formControlName="{{controllerName}}"

lib/insights/src/lib/analytics-process/components/widgets/number/number.widget.scss

@@ -1,7 +1,7 @@
 .adf-number-widget {
     width: 100%;
 
-    .example-full-width {
+    .adf-full-width {
         width: 100%;
     }
 }

lib/process-services-cloud/src/lib/process/process-header/components/process-header-cloud.component.spec.ts

@@ -110,7 +110,7 @@ describe('ProcessHeaderCloudComponent', () => {
         fixture.detectChanges();
         await fixture.whenStable();
 
-        const valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-startDate"] .adf-property-value'));
+        const valueEl = fixture.debugElement.query(By.css('[data-automation-id="card-date-value-startDate"]'));
         expect(valueEl.nativeElement.innerText.trim()).toBe('Mar 9, 2019');
     });
 
@@ -120,7 +120,7 @@ describe('ProcessHeaderCloudComponent', () => {
         fixture.detectChanges();
         await fixture.whenStable();
 
-        const valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-lastModified"] .adf-property-value'));
+        const valueEl = fixture.debugElement.query(By.css('[data-automation-id="card-date-value-lastModified"]'));
         expect(valueEl.nativeElement.innerText.trim()).toBe('Mar 9, 2019');
     });
 
@@ -212,8 +212,8 @@ describe('ProcessHeaderCloudComponent', () => {
         it('should format the dates based on app config format configuration', async () => {
             fixture.detectChanges();
             await fixture.whenStable();
-            const startedDateElement = fixture.debugElement.query(By.css('[data-automation-id="header-startDate"] .adf-property-value'));
+            const startedDateElement = fixture.debugElement.query(By.css('[data-automation-id="card-date-value-startDate"]'));
-            const lastModifiedElement = fixture.debugElement.query(By.css('[data-automation-id="header-lastModified"] .adf-property-value'));
+            const lastModifiedElement = fixture.debugElement.query(By.css('[data-automation-id="card-date-value-lastModified"]'));
 
             expect(component.dateFormat).toEqual('full');
             expect(startedDateElement.nativeElement.innerText.trim()).toBe('Saturday, March 9, 2019 at 12:00:00 AM GMT+00:00');

lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.spec.ts

@@ -503,7 +503,7 @@ describe('TaskHeaderCloudComponent', () => {
 
             fixture.detectChanges();
             await fixture.whenStable();
-            const createdDateElement = fixture.debugElement.query(By.css('[data-automation-id="header-created"] .adf-property-value'));
+            const createdDateElement = fixture.debugElement.query(By.css('[data-automation-id="card-date-value-created"]'));
 
             expect(component.dateFormat).toEqual('full');
             expect(createdDateElement.nativeElement.innerText.trim()).toBe('Monday, December 17, 2018 at 12:00:00 AM GMT+00:00');

lib/process-services/src/lib/process-list/components/process-instance-header/process-instance-header.component.spec.ts

@@ -63,7 +63,7 @@ describe('ProcessInstanceHeaderComponent', () => {
         component.processInstance.ended = new Date('2016-11-03');
         component.ngOnChanges();
         fixture.detectChanges();
-        const valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-dateitem-ended"]');
+        const valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-date-value-ended"]');
         expect(valueEl.innerText).toBe('Nov 3, 2016');
     });
 
@@ -71,7 +71,7 @@ describe('ProcessInstanceHeaderComponent', () => {
         component.processInstance.ended = null;
         component.ngOnChanges();
         fixture.detectChanges();
-        const valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-dateitem-ended"]');
+        const valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-date-value-ended"]');
         expect(valueEl.innerText).toBe('ADF_PROCESS_LIST.PROPERTIES.END_DATE_DEFAULT');
     });
 
@@ -97,7 +97,7 @@ describe('ProcessInstanceHeaderComponent', () => {
         component.processInstance.started = new Date('2016-11-03');
         component.ngOnChanges();
         fixture.detectChanges();
-        const valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-dateitem-created"]');
+        const valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-date-value-created"]');
         expect(valueEl.innerText).toBe('Nov 3, 2016');
     });
 

lib/process-services/src/lib/process-list/components/start-process/start-process.component.html

@@ -9,7 +9,7 @@
             <div class="adf-title" *ngIf="title">{{ title | translate}}</div>
             <div class="content">
                 <div class="adf-start-process-definition-container">
-                    <mat-form-field *ngIf="showSelectApplicationDropdown" [floatLabel]="'always'" class="adf-start-process-app-list" [subscriptSizing]="'dynamic'">
+                    <mat-form-field *ngIf="showSelectApplicationDropdown" class="adf-start-process-app-list">
                         <mat-label>{{ 'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.SELECT_APPLICATION' | translate }}</mat-label>
                         <mat-select
                             placeholder="{{ 'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.SELECT_APPLICATION' | translate }}"
@@ -26,7 +26,7 @@
                             </mat-option>
                         </mat-select>
                     </mat-form-field>
-                    <mat-form-field class="adf-process-input-container" [floatLabel]="'always'" [subscriptSizing]="'dynamic'">
+                    <mat-form-field class="adf-process-input-container">
                         <mat-label>{{'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.TYPE' | translate}}</mat-label>
                         <input
                             type="text"
@@ -62,7 +62,7 @@
                         </div>
                     </mat-form-field>
                 </div>
-                <mat-form-field class="adf-process-input-container adf-process-input-container-process-name" [floatLabel]="'always'">
+                <mat-form-field class="adf-process-input-container adf-process-input-container-process-name">
                     <mat-label>{{'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.NAME' | translate}}</mat-label>
                     <input
                         matInput

lib/process-services/src/lib/process-list/components/start-process/start-process.component.spec.ts

@@ -191,19 +191,6 @@ describe('StartProcessComponent', () => {
                 expect(inputLabels.length).toBe(2);
             });
 
-            it('should have floating labels for process name and type', async () => {
-                component.processDefinitionInput.setValue('My Default Name');
-                component.processNameInput.setValue('claim');
-
-                fixture.detectChanges();
-                await fixture.whenStable();
-
-                const inputLabelsNodes = document.querySelectorAll('.adf-start-process .adf-process-input-container');
-                inputLabelsNodes.forEach((labelNode) => {
-                    expect(labelNode.getAttribute('ng-reflect-float-label')).toBe('always');
-                });
-            });
-
             it('should load start form from service', async () => {
                 fixture.detectChanges();
                 await fixture.whenStable();

lib/process-services/src/lib/process.module.ts

@@ -26,7 +26,6 @@ import { PROCESS_LIST_DIRECTIVES } from './process-list';
 import { TASK_LIST_DIRECTIVES } from './task-list';
 import { FORM_DIRECTIVES } from './form';
 import { TASK_COMMENTS_DIRECTIVES } from './task-comments';
-import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 
 /**
  * @deprecated use provider api instead, for example:
@@ -50,10 +49,7 @@ import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
         ...PEOPLE_DIRECTIVES,
         ...FORM_DIRECTIVES
     ],
-    providers: [
+    providers: [provideTranslations('adf-process-services', 'assets/adf-process-services')],
-        provideTranslations('adf-process-services', 'assets/adf-process-services'),
-        { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { floatLabel: 'never' } }
-    ],
     exports: [
         ...PROCESS_COMMENTS_DIRECTIVES,
         ...PROCESS_LIST_DIRECTIVES,

lib/process-services/src/lib/task-list/components/task-header/task-header.component.spec.ts

@@ -184,7 +184,7 @@ describe('TaskHeaderComponent', () => {
         await fixture.whenStable();
 
         const datePicker = fixture.debugElement.query(By.css(`[data-automation-id="datepicker-dueDate"]`));
-        expect(datePicker).toBeNull();
+        expect(datePicker.classes['cdk-visually-hidden']).toBeTrue();
     });
 
     it('should set editable to true if the task has not completed yet', async () => {