- {{ category.name }}
+ (click)='addCategoryToAssign(category, isCRUDMode || !multiSelect && categories.length > 0)'>
+ {{ category.name }}
diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.scss b/lib/content-services/src/lib/category/categories-management/categories-management.component.scss
index eaf93e97a2c..a4d8060641a 100644
--- a/lib/content-services/src/lib/category/categories-management/categories-management.component.scss
+++ b/lib/content-services/src/lib/category/categories-management/categories-management.component.scss
@@ -1,8 +1,9 @@
+@import 'styles/mat-selectors';
+
.adf-categories-management {
.adf-category-name-field {
justify-content: space-between;
- width: 100%;
- color: var(--adf-metadata-property-panel-text-color);
+ padding: 0 10px;
background: var(--adf-metadata-buttons-background-color);
height: 32px;
border-radius: 12px;
@@ -10,8 +11,15 @@
input {
background-color: transparent;
- padding: 7px 8px 8px;
+ color: var(--adf-metadata-property-panel-text-color);
+ padding: 7px 0;
width: 100%;
+ border: none;
+ outline: none;
+ }
+
+ #{$mat-form-field-error} {
+ padding-top: 5px;
}
}
@@ -46,7 +54,7 @@
background-color: inherit;
color: inherit;
- &:hover {
+ &:not(#{$mat-list-item-disabled}):hover {
cursor: pointer;
background: var(--adf-theme-mat-grey-color-a200);
}
@@ -73,4 +81,8 @@
cursor: pointer;
overflow-wrap: anywhere;
}
+
+ #{$mat-list-item-disabled} #{$mat-list-item-primary-text} {
+ opacity: 1;
+ }
}
diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.ts b/lib/content-services/src/lib/category/categories-management/categories-management.component.ts
index 4b5cd191e8e..70348de3ad0 100644
--- a/lib/content-services/src/lib/category/categories-management/categories-management.component.ts
+++ b/lib/content-services/src/lib/category/categories-management/categories-management.component.ts
@@ -31,10 +31,10 @@ interface CategoryNameControlErrors {
}
@Component({
- selector: 'adf-categories-management',
- templateUrl: './categories-management.component.html',
- styleUrls: ['./categories-management.component.scss'],
- encapsulation: ViewEncapsulation.None
+ selector: 'adf-categories-management',
+ templateUrl: './categories-management.component.html',
+ styleUrls: ['./categories-management.component.scss'],
+ encapsulation: ViewEncapsulation.None
})
export class CategoriesManagementComponent implements OnInit, OnDestroy {
readonly nameErrorMessagesByErrors = new Map([
@@ -49,11 +49,7 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
private onDestroy$ = new Subject();
private _categoryNameControl = new FormControl(
'',
- [
- this.validateIfNotAlreadyAdded.bind(this),
- this.validateEmptyCategory,
- Validators.required
- ],
+ [this.validateIfNotAlreadyAdded.bind(this), this.validateEmptyCategory, Validators.required],
this.validateIfNotAlreadyCreated.bind(this)
);
private _existingCategories: Category[];
@@ -78,23 +74,23 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
*
* @param categoryNameControlVisible control visibility.
*/
- @Input()
- set categoryNameControlVisible(categoryNameControlVisible: boolean) {
- this._categoryNameControlVisible = categoryNameControlVisible;
- if (categoryNameControlVisible) {
- setTimeout(() => {
- this.categoryNameInputElement.nativeElement.scrollIntoView();
- });
- this._existingCategoriesPanelVisible = true;
- } else {
+ @Input()
+ set categoryNameControlVisible(categoryNameControlVisible: boolean) {
+ this._categoryNameControlVisible = categoryNameControlVisible;
+ if (categoryNameControlVisible) {
+ setTimeout(() => {
+ this.categoryNameInputElement.nativeElement.scrollIntoView();
+ });
+ this._existingCategoriesPanelVisible = true;
+ } else {
this._existingCategoriesPanelVisible = false;
this.clearCategoryNameInput();
- }
- }
+ }
+ }
- get categoryNameControlVisible(): boolean {
- return this._categoryNameControlVisible;
- }
+ get categoryNameControlVisible(): boolean {
+ return this._categoryNameControlVisible;
+ }
/** Emits when classifiable aspect changes */
@Input()
@@ -150,9 +146,7 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
)
.subscribe((name: string) => this.onNameControlValueChange(name));
- this.categoryNameControl.statusChanges
- .pipe(takeUntil(this.onDestroy$))
- .subscribe(() => this.setCategoryNameControlErrorMessageKey());
+ this.categoryNameControl.statusChanges.pipe(takeUntil(this.onDestroy$)).subscribe(() => this.setCategoryNameControlErrorMessageKey());
this.setCategoryNameControlErrorMessageKey();
@@ -164,13 +158,11 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
this._categoryNameControl.removeValidators(Validators.required);
this.categories.forEach((category) => this.initialCategories.push(category));
if (this.classifiableChanged) {
- this.classifiableChanged
- .pipe(takeUntil(this.onDestroy$))
- .subscribe(() => {
- this.categories = [];
- this.categoryNameControlVisible = false;
- this.categoryNameControlVisibleChange.emit(false);
- });
+ this.classifiableChanged.pipe(takeUntil(this.onDestroy$)).subscribe(() => {
+ this.categories = [];
+ this.categoryNameControlVisible = false;
+ this.categoryNameControlVisibleChange.emit(false);
+ });
}
}
}
@@ -188,7 +180,7 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
/*
* Returns `true` if categories empty and category panel non editable state, otherwise `false`
- */
+ */
get showEmptyCategoryMessage(): boolean {
return this.categories.length === 0 && !this.categoryNameControlVisible;
}
@@ -235,13 +227,16 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
* Adds existing category to categories list and removes it from existing categories list.
*
* @param category - selection list change containing selected category
+ * @param disableAddCategory - allow or disallow the ability to add a new category for assigning
*/
- addCategoryToAssign(category: Category) {
- const selectedCategory: Category = category;
- this.categories.push(selectedCategory);
- this._existingCategories.splice(this._existingCategories.indexOf(selectedCategory), 1);
- this.categoryNameControl.updateValueAndValidity();
- this.categoriesChange.emit(this.categories);
+ addCategoryToAssign(category: Category, disableAddCategory: boolean) {
+ if (!disableAddCategory) {
+ const selectedCategory: Category = category;
+ this.categories.push(selectedCategory);
+ this._existingCategories.splice(this._existingCategories.indexOf(selectedCategory), 1);
+ this.categoryNameControl.updateValueAndValidity();
+ this.categoriesChange.emit(this.categories);
+ }
}
/**
@@ -275,7 +270,7 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
}
private searchForExistingCategories(searchTerm: string) {
- this.categoryService.searchCategories(searchTerm, 0 , this.existingCategoriesListLimit).subscribe((existingCategoriesResult) => {
+ this.categoryService.searchCategories(searchTerm, 0, this.existingCategoriesListLimit).subscribe((existingCategoriesResult) => {
this._existingCategories = existingCategoriesResult.list.entries.map((rowEntry) => {
const existingCat = new Category();
existingCat.id = rowEntry.entry.id;
@@ -283,7 +278,9 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
existingCat.name = path ? `${path}/${rowEntry.entry.name}` : rowEntry.entry.name;
return existingCat;
});
- this._existingCategories = this._existingCategories.filter((existingCat) => this.categories.find((category) => existingCat.id === category.id) === undefined);
+ this._existingCategories = this._existingCategories.filter(
+ (existingCat) => this.categories.find((category) => existingCat.id === category.id) === undefined
+ );
this.sortCategoriesList(this._existingCategories);
this._existingCategoriesLoading = false;
this._typing = false;
@@ -294,7 +291,9 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
private getChildrenCategories(searchTerm: string) {
this.categoryService.getSubcategories(this.parentId).subscribe((childrenCategories) => {
this._existingCategories = childrenCategories.list.entries.map((categoryEntry) => categoryEntry.entry);
- this._existingCategories = this._existingCategories.filter((existingCat) => existingCat.name.toLowerCase().includes(searchTerm.toLowerCase()));
+ this._existingCategories = this._existingCategories.filter((existingCat) =>
+ existingCat.name.toLowerCase().includes(searchTerm.toLowerCase())
+ );
this.sortCategoriesList(this._existingCategories);
this._existingCategoriesLoading = false;
this._typing = false;
@@ -308,11 +307,13 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
: null;
}
- private validateIfNotAlreadyCreated(nameControl: FormControl): Observable {
+ private validateIfNotAlreadyCreated(nameControl: FormControl): Observable {
return this.existingCategoryLoaded$.pipe(
- map(() => this.existingCategories.some((category) => this.compareCategories(category, nameControl.value)) && this.isCRUDMode
+ map(() =>
+ this.existingCategories.some((category) => this.compareCategories(category, nameControl.value)) && this.isCRUDMode
? { duplicatedExistingCategory: true }
- : null),
+ : null
+ ),
first()
);
}
@@ -322,9 +323,7 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
}
private validateEmptyCategory(categoryNameControl: FormControl): CategoryNameControlErrors | null {
- return categoryNameControl.value.length && !categoryNameControl.value.trim()
- ? { emptyCategory: true }
- : null;
+ return categoryNameControl.value.length && !categoryNameControl.value.trim() ? { emptyCategory: true } : null;
}
private setCategoryNameControlErrorMessageKey() {
diff --git a/lib/content-services/src/lib/dialogs/confirm.dialog.scss b/lib/content-services/src/lib/dialogs/confirm.dialog.scss
index 0f6b7d97889..cda5494e08b 100644
--- a/lib/content-services/src/lib/dialogs/confirm.dialog.scss
+++ b/lib/content-services/src/lib/dialogs/confirm.dialog.scss
@@ -9,9 +9,5 @@
& .adf-confirm-dialog-content {
margin: 0 -24px;
-
- p {
- margin-bottom: 0;
- }
}
}
diff --git a/lib/core/src/lib/styles/_mat-selectors.scss b/lib/core/src/lib/styles/_mat-selectors.scss
index 8b9c3e7c567..04b877923a2 100644
--- a/lib/core/src/lib/styles/_mat-selectors.scss
+++ b/lib/core/src/lib/styles/_mat-selectors.scss
@@ -140,3 +140,4 @@ $mat-text-field-disabled: '.mdc-text-field--disabled';
$mat-form-field-focus-overlay: '.mat-mdc-form-field-focus-overlay';
$mat-form-field-error-wrapper: '.mat-mdc-form-field-error-wrapper';
$mat-text-field-textarea: '.mdc-text-field--textarea';
+$mat-list-item-disabled: '.mdc-list-item--disabled';