inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-09-09 18:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* [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>
This commit is contained in:
Michal Kinas
2026-01-27 08:10:15 +01:00
committed by GitHub
co-authored by Ehsan Rezaei
parent b2c105dd67
commit 1028df91da
78 changed files with 620 additions and 1167 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/content-services/src/lib/category/categories-management/categories-management.component.html
+15 -8
View File
@@ -1,13 +1,20 @@
<div class="adf-categories-management">
<div *ngIf="categoryNameControlVisible" class="adf-category-name-field">
<input #categoryNameInput
[formControl]="categoryNameControl"
(keyup.enter)="addCategory()"
placeholder="{{'CATEGORIES_MANAGEMENT.CATEGORIES_SEARCH_PLACEHOLDER' | translate }}"
adf-auto-focus
@if (categoryNameControlVisible) {
<mat-form-field class="adf-category-name-field">
<mat-label>{{ 'CATEGORIES_MANAGEMENT.CATEGORIES_SEARCH_PLACEHOLDER' | translate }}</mat-label>
<input
matInput
#categoryNameInput
autocomplete="off"
[formControl]="categoryNameControl"
(keyup.enter)="addCategory()"
adf-auto-focus
/>
<mat-error *ngIf="categoryNameControl.invalid && categoryNameControl.touched">{{ categoryNameErrorMessageKey | translate }}</mat-error>
</div>
<mat-error *ngIf="categoryNameControl.invalid && categoryNameControl.touched">
{{ 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
+2 -19
View File
@@ -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
+1 -1
View File
@@ -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
+3 -1
View File
@@ -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
+3 -3
View File
@@ -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"
[displayLabelForChips]="true" />
[multiValueSeparator]="multiValueSeparator" />
</mat-expansion-panel>
</div>
</ng-container>
lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss
+9 -24
View File
@@ -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} {
padding-top: 16px;
.adf-metadata-properties-expansion-panel,
.adf-metadata-categories-header {
display: block;
margin-top: 16px;
}
input {
border-color: transparent;
width: 100%;
&:focus-visible {
outline: none;
}
}
.adf-metadata-properties-tags,
.adf-metadata-no-item-added {
margin-top: 16px;
}
.adf-edit-icon-buttons {
lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.html
+67 -60
View File
@@ -1,73 +1,80 @@
<div class="adf-content-node-selector-content">
<mat-form-field floatPlaceholder="never"
appearance="fill"
class="adf-content-node-selector-content-input"
subscriptSizing="dynamic"
*ngIf="showSearch">
<mat-label>{{ 'NODE_SELECTOR.SEARCH' | translate }}</mat-label>
<input matInput
id="searchInput"
[formControl]="searchInput"
type="text"
[value]="searchTerm"
adf-auto-focus
data-automation-id="content-node-selector-search-input">
@if (showSearch) {
<mat-form-field floatPlaceholder="never" class="adf-content-node-selector-content-input">
<mat-label>{{ 'NODE_SELECTOR.SEARCH' | translate }}</mat-label>
<input matInput
id="searchInput"
[formControl]="searchInput"
type="text"
[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"
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" />
(click)="toggleSearchPanel()">
<mat-icon adf-icon="filter_list" />
{{ 'SEARCH.SEARCH_HEADER.TITLE' | translate }}
</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>
<adf-dropdown-breadcrumb *ngIf="showBreadcrumbs()"
class="adf-content-node-selector-content-breadcrumb"
(navigate)="clearSearch()"
[target]="documentList"
[rootId]="breadcrumbRootId"
[transform]="breadcrumbTransform"
[folderNode]="breadcrumbFolderNode"
[root]="breadcrumbFolderTitle"
data-automation-id="content-node-selector-content-breadcrumb" />
<ng-container *ngIf="showNodeCounter" [adf-node-counter]="getSelectedCount()" />
} @else {
<adf-dropdown-breadcrumb
class="adf-content-node-selector-content-breadcrumb"
(navigate)="clearSearch()"
[target]="documentList"
[rootId]="breadcrumbRootId"
[transform]="breadcrumbTransform"
[folderNode]="breadcrumbFolderNode"
[root]="breadcrumbFolderTitle"
data-automation-id="content-node-selector-content-breadcrumb" />
}
@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
+5 -51
View File
@@ -36,74 +36,27 @@ h2.adf-search-results-label {
}
&-document-list-container {
margin-top: 16px;
width: 100%;
}
&-content {
#{ms.$mat-input-element} {
&: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;
padding-top: 10px;
&-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;
width: 20px;
height: 28px;
&:focus {
outline-offset: -1.5px;
}
.adf-content-node-selector-content-input-icon:is(mat-icon) {
cursor: pointer;
.adf-content-node-selector-content-input-icon {
&: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
-2
View File
@@ -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 -1
View File
@@ -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
+3 -7
View File
@@ -28,15 +28,13 @@
</div>
<div
[style.display]="isExpiryDateToggleChecked ? 'block' : 'none'"
data-automation-id="adf-slide-toggle-checked"
class="adf-share-link__date-time-container">
<mat-form-field class="adf-full-width" subscriptSizing="dynamic" data-automation-id="adf-content-share-expiration-field">
data-automation-id="adf-slide-toggle-checked">
<mat-form-field class="adf-full-width" data-automation-id="adf-content-share-expiration-field">
<mat-label>{{ 'SHARE.EXPIRATION-PLACEHOLDER' | translate }}</mat-label>
<mat-datepicker-toggle
[disabled]="time.disabled"
[for]="datePicker"
matSuffix
class="adf-share-link__icon adf-share-link__calender-icon" />
matSuffix />
<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
+10 -52
View File
@@ -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
-12
View File
@@ -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
+3 -3
View File
@@ -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
+2 -15
View File
@@ -5,21 +5,8 @@
padding: 0;
overflow: unset;
#{ms.$mat-form-field-infix} {
padding-bottom: 3.5px;
}
#{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;
.adf-folder-dialog-form-field {
margin-bottom: 15px;
}
}
lib/content-services/src/lib/dialogs/library/library.dialog.scss
+1 -44
View File
@@ -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;
&: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;
}
}
margin-bottom: 15px;
}
.adf-action-buttons {
lib/content-services/src/lib/mat-selectors.scss
-19
View File
@@ -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
+2 -1
View File
@@ -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
+2 -45
View File
@@ -51,51 +51,8 @@ $search-result-height: calc(100% - 60px);
&-permission-search {
&-input {
width: 100%;
padding-bottom: 0;
padding-top: 12px;
#{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);
}
}
}
padding-top: 5px;
margin-bottom: 15px;
}
}
lib/content-services/src/lib/permission-manager/components/user-role-column/user-role-column.component.ts
+24 -21
View File
@@ -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">
<mat-select
class="adf-role-selector"
(click)="$event.stopPropagation()"
[placeholder]="placeholder | translate"
[value]="value"
(selectionChange)="onRoleChanged($event.value)"
(keyup.arrowdown)="$event.stopPropagation()"
(keyup.arrowup)="$event.stopPropagation()"
>
<mat-option *ngFor="let option of options" [value]="option.role">
{{ option.label | translate }}
</mat-option>
</mat-select>
</mat-form-field>
<span class="adf-datatable-cell-value adf-readonly-role" [title]="i18nValue | translate" *ngIf="readonly">
{{ i18nValue | translate }}
</span>
@if (!readonly) {
<mat-form-field class="adf-role-selector-field">
<mat-select
class="adf-role-selector"
(click)="$event.stopPropagation()"
[placeholder]="placeholder | translate"
[value]="value"
(selectionChange)="onRoleChanged($event.value)"
(keyup.arrowdown)="$event.stopPropagation()"
(keyup.arrowup)="$event.stopPropagation()"
>
@for (option of options; track $index) {
<mat-option [value]="option.role">
{{ option.label | translate }}
</mat-option>
}
</mat-select>
</mat-form-field>
} @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 -1
View File
@@ -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
+3 -3
View File
@@ -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
+19 -23
View File
@@ -1,28 +1,24 @@
<div class="adf-search-filter-facet">
<div class="adf-facet-result-filter">
<div class="adf-facet-search-container">
<button mat-icon-button class="adf-facet-search-icon" tabindex="-1">
<mat-icon class="adf-search-field-icon" adf-icon="search" />
<mat-form-field>
<input
matInput
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">
<input
matInput
placeholder="{{ 'SEARCH.FILTER.ACTIONS.SEARCH' | translate }}"
[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>
} @else {
<mat-icon matSuffix aria-hidden adf-icon="search" />
}
</mat-form-field>
<div class="adf-checklist">
<mat-checkbox
lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.scss
-25
View File
@@ -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 -1
View File
@@ -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
+3 -7
View File
@@ -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"
appearance="outline">
data-automation-id="adf-search-properties-file-size-operator">
<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"
subscriptSizing="dynamic"
appearance="outline">
data-automation-id="adf-search-properties-file-size-unit">
<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 -3
View File
@@ -1,6 +1,4 @@
<mat-form-field
class="adf-search-text-form-field"
appearance="fill">
<mat-form-field class="adf-search-text-form-field">
<mat-label>{{ settings?.placeholder | translate }}</mat-label>
<input
matInput
lib/content-services/src/lib/search/components/search-text/search-text.component.scss
+1
View File
@@ -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
+16 -15
View File
@@ -1,19 +1,20 @@
<div class="adf-tags-creation">
<div *ngIf="tagNameControlVisible" class="adf-tag-name-field">
<input
#tagNameInput
class="adf-tag-search-field"
matInput
autocomplete="off"
[formControl]="tagNameControl"
(keyup.enter)="addTag()"
adf-auto-focus
placeholder="{{ 'TAG.TAGS_CREATOR.TAG_SEARCH_PLACEHOLDER' | translate }}"
/>
<mat-error *ngIf="tagNameControl.invalid && tagNameControl.touched">
{{ tagNameErrorMessageKey | translate }}
</mat-error>
</div>
@if (tagNameControlVisible) {
<mat-form-field class="adf-tag-name-field">
<mat-label>{{ 'TAG.TAGS_CREATOR.TAG_SEARCH_PLACEHOLDER' | translate }}</mat-label>
<input
matInput
#tagNameInput
autocomplete="off"
[formControl]="tagNameControl"
(keyup.enter)="addTag()"
adf-auto-focus
/>
<mat-error *ngIf="tagNameControl.invalid && tagNameControl.touched">
{{ tagNameErrorMessageKey | translate }}
</mat-error>
</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
+2 -13
View File
@@ -13,21 +13,10 @@ adf-tags-creator {
.adf-tag-name-field[hidden] {
display: flex;
flex-direction: column;
margin-right: 12px;
}
.adf-tag-search-field {
background: var(--adf-metadata-buttons-background-color);
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-tag-name-field {
margin-top: 10px;
}
.adf-create-tag-label {
lib/content-services/src/lib/version-manager/version-upload.component.html
+1 -1
View File
@@ -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
+1
View File
@@ -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
+1 -2
View File
@@ -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
+111 -104
View File
@@ -1,109 +1,113 @@
<mat-label
class="adf-property-label"
[attr.data-automation-id]="'card-dateitem-label-' + property.key"
*ngIf="showProperty && !isEditable"
[attr.for]="'card-view-dateitem-' + property.key"
[ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty, 'adf-property-value-editable': editable }"
[title]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
>
{{ property.label | 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()"
<div class="adf-property-value" [ngClass]="{ 'adf-property-value-editable': editable, 'adf-property-readonly-value': isReadonlyProperty || !editable }">
@if (!property.multivalued) {
<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"
>
<span *ngIf="showProperty; else elseEmptyValueBlock" [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
{{ property.displayValue }}</span
{{ 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()"
(dblclick)="copyToClipboard(property.displayValue)"
tabindex="0"
role="button"
(keyup.enter)="showDatePicker()"
>
</span>
</div>
<input
matInput
class="adf-invisible-date-input"
[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"
/>
<span [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
@if (showProperty) {
{{ property.displayValue }}
} @else {
{{ property.default | translate }}
}
<mat-datetimepicker
#datetimePicker
[type]="$any(property).type"
[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()"
>
</span>
</span>
</div>
<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>
</div>
</mat-form-field>
}
</div>
lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss
+4 -10
View File
@@ -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
+11 -9
View File
@@ -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 getDateTime = (): string => testingUtils.getInnerTextByCSS('.adf-datepicker-span-button');
const getPropertyValue = (): string => testingUtils.getInputByCSS('.adf-invisible-date-input').value;
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(datePickerToggle).toBeNull('Datepicker toggle should NOT be shown');
expect(datePicker.classes['cdk-visually-hidden']).toBeTrue();
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(datePickerToggle).toBeNull('Datepicker toggle should NOT be shown');
expect(datePicker.classes['cdk-visually-hidden']).toBeTrue();
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
+1 -4
View File
@@ -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),
displayLabelForChips: new SimpleChange(false, expectedDisplayLabel, false)
displayClearAction: new SimpleChange(true, expectedDisplayClearAction, 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
-4
View File
@@ -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
+34 -49
View File
@@ -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
*ngIf="!isEditable"
class="adf-property-value adf-property-read-only"
[attr.data-automation-id]="'select-readonly-value-' + property.key"
data-automation-class="read-only-value"
[title]="property.displayValue | async | translate"
>
{{ property.displayValue | async | translate }}
</div>
<div *ngIf="isEditable">
<mat-form-field class="adf-property-value">
<mat-label
[attr.data-automation-id]="'card-select-label-' + property.key"
class="adf-property-label adf-property-value-editable"
[ngClass]="{
'adf-property-readonly-value': isReadonlyProperty
}"
>{{ property.label | translate }}
</mat-label>
<mat-select
[(ngModel)]="value"
[ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty }"
panelClass="adf-select-filter"
(selectionChange)="onChange($event)"
data-automation-class="select-box"
[aria-label]="property.label | translate"
adf-card-view-property-validator
[property]="property"
(validated)="onValidation($event)"
>
<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>
<mat-form-field class="adf-property-value">
<mat-label
[attr.data-automation-id]="'card-select-label-' + property.key"
class="adf-property-label"
[ngClass]="{
'adf-property-value-editable': isEditable,
'adf-property-readonly-value': isReadonlyProperty
}"
>{{ property.label | translate }}
</mat-label>
<mat-select
[(ngModel)]="value"
[disabled]="isReadonlyProperty || !editable"
[ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty || !editable }"
panelClass="adf-select-filter"
(selectionChange)="onChange($event)"
data-automation-id="select-box"
[aria-label]="property.label | translate"
adf-card-view-property-validator
[property]="property"
(validated)="onValidation($event)"
>
<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 *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
-11
View File
@@ -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
+4 -16
View File
@@ -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(getSelectElement()).toBeNull();
});
it('should read only value have title', () => {
component.property = new CardViewSelectItemModel({
...mockDefaultProps,
editable: false
});
fixture.detectChanges();
expect(getReadOnlyElement().nativeElement.title).toBe('Two');
expect(await selectBox.isDisabled()).toBe(true);
});
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 -1
View File
@@ -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
+153 -161
View File
@@ -1,167 +1,158 @@
<div class="adf-card-textitem-field-container" [ngSwitch]="templateType">
<div *ngSwitchDefault>
<mat-form-field
subscriptSizing="dynamic"
[floatLabel]="'always'"
class="adf-property-field adf-card-textitem-field"
[ngClass]="{
'adf-property-read-only': !isEditable
}"
@if (showProperty || isEditable) {
<div class="adf-card-textitem-field-container" [ngSwitch]="templateType">
<div *ngSwitchDefault>
<mat-form-field
class="adf-property-field adf-card-textitem-field"
[ngClass]="{
'adf-property-read-only': isReadonlyProperty
}"
>
<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
*ngIf="showProperty || isEditable"
[attr.data-automation-id]="'card-textitem-label-' + property.key"
class="adf-property-label"
[ngClass]="{
'adf-property-value-editable': editable,
'adf-property-readonly-value': isReadonlyProperty
}"
<mat-form-field
class="adf-property-field adf-textitem-chip-list-input"
[ngClass]="{ 'adf-property-read-only': isReadonlyProperty }"
>
{{ 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,
'adf-property-value-has-error': isEditable && hasErrors,
'adf-property-value-not-editable': !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
}"
[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': !isEditable }"
>
<mat-label
*ngIf="showLabelForChips"
[attr.data-automation-id]="'card-textitem-label-' + property.key"
class="adf-property-label"
[ngClass]="{ 'adf-property-value-editable': editable }"
<mat-label
[attr.data-automation-id]="'card-textitem-label-' + property.key"
class="adf-property-label"
[ngClass]="{ 'adf-property-value-editable': editable }"
>
{{ property.label | translate }}
</mat-label>
<mat-chip-grid #chipElement class="adf-textitem-chip-list" [disabled]="isReadonlyProperty || !editable">
<mat-chip-row *ngFor="let propertyValue of editedValue; let idx = index" [removable]="isEditable" (removed)="removeValueFromList(idx)">
{{ propertyValue }}
<mat-icon *ngIf="isEditable" matChipRemove adf-icon="cancel" />
</mat-chip-row>
</mat-chip-grid>
<input
matInput
class="adf-property-value"
[ngClass]="{
'adf-property-value-editable': editable,
'adf-property-readonly-value': isReadonlyProperty || !editable
}"
title="{{ property.label | translate }}"
[placeholder]="editedValue ? '' : (property.default | translate)"
[attr.aria-label]="property.label | translate"
[matChipInputFor]="chipElement"
[matChipInputAddOnBlur]="true"
(matChipInputTokenEnd)="addValueToList($event)"
[disabled]="isReadonlyProperty || !editable"
[attr.data-automation-id]="'card-textitem-editchipinput-' + property.key"
/>
</mat-form-field>
</div>
<div
*ngSwitchCase="'clickableTemplate'"
role="button"
class="adf-textitem-clickable"
[ngClass]="{ 'adf-property-read-only': isReadonlyProperty }"
[attr.data-automation-id]="'card-textitem-toggle-' + property.key"
tabindex="0"
(keyup.enter)="clicked()"
(click)="clicked()"
>
{{ property.label | translate }}
</mat-label>
<mat-chip-grid #chipElement class="adf-textitem-chip-list">
<mat-chip-row *ngFor="let propertyValue of editedValue; let idx = index" [removable]="isEditable" (removed)="removeValueFromList(idx)">
{{ propertyValue }}
<mat-icon *ngIf="isEditable" matChipRemove adf-icon="cancel" />
</mat-chip-row>
</mat-chip-grid>
<mat-form-field
*ngIf="isEditable"
[floatLabel]="'always'"
class="adf-property-field adf-textitem-chip-list-input"
[ngClass]="{ 'adf-property-read-only': !isEditable }"
>
<input
matInput
class="adf-property-value"
[ngClass]="{
'adf-property-value-editable': editable,
'adf-property-readonly-value': isReadonlyProperty
}"
title="{{ property.label | translate }}"
[placeholder]="editedValue ? '' : (property.default | translate)"
[attr.aria-label]="property.label | translate"
[matChipInputFor]="chipElement"
[matChipInputAddOnBlur]="true"
(matChipInputTokenEnd)="addValueToList($event)"
[attr.data-automation-id]="'card-textitem-editchipinput-' + property.key"
/>
</mat-form-field>
</div>
<div
*ngSwitchCase="'clickableTemplate'"
role="button"
class="adf-textitem-clickable"
[ngClass]="{ 'adf-property-read-only': !isEditable }"
[attr.data-automation-id]="'card-textitem-toggle-' + property.key"
tabindex="0"
(keyup.enter)="clicked()"
(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-form-field class="adf-property-field adf-card-textitem-field">
<mat-label
[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 || !editable,
'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()"
[disabled]="isReadonlyProperty || !editable"
[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>
<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 -13
View File
@@ -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} {
padding-top: 0;
.adf-property-value {
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
+6 -30
View File
@@ -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 () => {
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;
it('should return true when property.editable is false', () => {
component.property.editable = false;
fixture.detectChanges();
expect(component.isReadonlyProperty).toBe(true);
});
it('should return false when editable is false, and property.editable is false', () => {
component.editable = false;
component.property.editable = false;
it('should return false when and property.editable is true', () => {
component.property.editable = true;
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
+1 -21
View File
@@ -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
+1 -9
View File
@@ -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
+1 -2
View File
@@ -9,8 +9,7 @@
[displayClearAction]="displayClearAction"
[copyToClipboardAction]="copyToClipboardAction"
[useChipsForMultiValueProperty]="useChipsForMultiValueProperty"
[multiValueSeparator]="multiValueSeparator"
[displayLabelForChips]="displayLabelForChips" />
[multiValueSeparator]="multiValueSeparator" />
</div>
</div>
</div>
lib/core/src/lib/card-view/components/card-view/card-view.component.scss
-15
View File
@@ -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
+1 -33
View File
@@ -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
-4
View File
@@ -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
+1 -10
View File
@@ -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: ', ',
displayLabelForChips: false
multiValueSeparator: ', '
};
/**
lib/core/src/lib/comments/comments.component.html
+3 -3
View File
@@ -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
+3 -32
View File
@@ -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%;
&#{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;
}
}
margin-bottom: 10px;
}
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
+10 -8
View File
@@ -22,16 +22,18 @@
<mat-divider class="adf-columns-selector-divider" aria-hidden="true" />
<div class="adf-columns-selector-search-input-container">
<mat-icon class="adf-columns-selector-search-input-icon" adf-icon="search" />
<mat-form-field class="adf-columns-selector-search-input-form">
<mat-label>{{ 'ADF-DATATABLE.COLUMNS_SELECTOR.SEARCH' | translate }}</mat-label>
<input
[formControl]="searchInputControl"
class="adf-columns-selector-search-input"
data-automation-id="adf-columns-selector-search-input"
matInput
type="text"
[placeholder]='"ADF-DATATABLE.COLUMNS_SELECTOR.SEARCH" | translate'>
</div>
data-automation-id="adf-columns-selector-search-input"
[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
+2 -26
View File
@@ -83,33 +83,9 @@ adf-datatable-column-selector {
margin: 16px 0;
}
&-search-input-container {
@include adf-columns-selector-side-padding;
position: relative;
&-search-input-form {
display: flex;
align-items: center;
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);
padding: 10px 12px 0;
}
}
}
lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.spec.ts
+8 -7
View File
@@ -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;
testingUtils.fillInputByCSS('.adf-columns-selector-search-input', 'TEST');
await fillSelectorInput('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
+5 -1
View File
@@ -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 -1
View File
@@ -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
+6 -8
View File
@@ -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
+1 -1
View File
@@ -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
-6
View File
@@ -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
+8 -29
View File
@@ -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';
clickSearchButton();
component.subscriptAnimationState.value = 'inactive';
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
+2 -2
View File
@@ -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
-19
View File
@@ -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
+18
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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 -1
View File
@@ -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 -1
View File
@@ -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 -1
View File
@@ -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
+4 -4
View File
@@ -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 lastModifiedElement = fixture.debugElement.query(By.css('[data-automation-id="header-lastModified"] .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="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
+1 -1
View File
@@ -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
+3 -3
View File
@@ -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
+3 -3
View File
@@ -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
-13
View File
@@ -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
+1 -5
View File
@@ -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: [
provideTranslations('adf-process-services', 'assets/adf-process-services'),
{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { floatLabel: 'never' } }
],
providers: [provideTranslations('adf-process-services', 'assets/adf-process-services')],
exports: [
...PROCESS_COMMENTS_DIRECTIVES,
...PROCESS_LIST_DIRECTIVES,
lib/process-services/src/lib/task-list/components/task-header/task-header.component.spec.ts
+1 -1
View File
@@ -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 () => {