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 {