inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* Revert "[ACS-7768] unify inputs and selects across the app (#9687)"

This reverts commit 7cfb5ea64a.

* ACS-7768 Little correction
This commit is contained in:
AleksanderSklorz
2024-05-20 09:26:41 +02:00
committed by VitoAlbano
parent a410fbec7f
commit f22f55d30e
39 changed files with 487 additions and 400 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

25
lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss
View File

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

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

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

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

8
lib/content-services/src/lib/content-node-share/content-node-share.dialog.html
View File

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

46
lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss
View File

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

10
lib/content-services/src/lib/dialogs/folder.dialog.html
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" appearance="outline">
<mat-label>{{ 'CORE.FOLDER_DIALOG.FOLDER_NAME.LABEL' | translate }}</mat-label>
<input
id="adf-folder-name-input"
@@ -15,7 +15,7 @@
adf-auto-focus
/>
<mat-error *ngIf="form.controls['name'].dirty">
<mat-hint *ngIf="form.controls['name'].dirty">
<span *ngIf="form.controls['name'].errors?.required">
{{ 'CORE.FOLDER_DIALOG.FOLDER_NAME.ERRORS.REQUIRED' | translate }}
</span>
@@ -23,10 +23,10 @@
<span *ngIf="!form.controls['name'].errors?.required && form.controls['name'].errors?.message">
{{ form.controls['name'].errors?.message | translate }}
</span>
</mat-error>
</mat-hint>
</mat-form-field>
<mat-form-field class="adf-full-width">
<mat-form-field class="adf-full-width" appearance="outline">
<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" appearance="outline">
<mat-label>{{ 'CORE.FOLDER_DIALOG.FOLDER_DESCRIPTION.LABEL' | translate }}</mat-label>
<textarea
id="adf-folder-description-input"

6
lib/content-services/src/lib/dialogs/library/library.dialog.html
View File

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

5
lib/content-services/src/lib/i18n/en.json
View File

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,6 +1,5 @@
<div class="adf-tags-creation">
<mat-form-field *ngIf="tagNameControlVisible" class="adf-tag-name-field">
<mat-label>{{ 'TAG.TAGS_CREATOR.TAG_SEARCH_PLACEHOLDER' | translate }}</mat-label>
<div *ngIf="tagNameControlVisible" class="adf-tag-name-field">
<input
#tagNameInput
class="adf-tag-search-field"
@@ -9,9 +8,10 @@
[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>
</mat-form-field>
</div>
<p class="adf-no-tags-message" *ngIf="showEmptyTagMessage">
{{ 'TAG.TAGS_CREATOR.NO_TAGS_CREATED' | translate }}
</p>

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

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