diff --git a/CHANGELOG.md b/CHANGELOG.md
index 62a8ace5..4cae16ca 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Added
+- Extended the tags selector component by a `readonly` attribute
- Added global styles to the _Storybook_ setup
## 2.138.0 - 2025-02-08
diff --git a/apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html b/apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html
index a20c9af7..d820ddf7 100644
--- a/apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html
+++ b/apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html
@@ -366,33 +366,12 @@
-
-
- @if (!data.hasPermissionToUpdateOrder && tagsAvailable?.length > 0) {
-
-
-
Tags
-
- @for (tag of tags; track tag) {
- {{ tag.name }}
- }
-
-
-
- }
+
@if (
dataSource?.data.length > 0 &&
diff --git a/libs/ui/src/lib/tags-selector/tags-selector.component.html b/libs/ui/src/lib/tags-selector/tags-selector.component.html
index 55f8a39f..1b681772 100644
--- a/libs/ui/src/lib/tags-selector/tags-selector.component.html
+++ b/libs/ui/src/lib/tags-selector/tags-selector.component.html
@@ -1,32 +1,49 @@
-
- Tags
-
- @for (tag of tagsSelected(); track tag.id) {
-
- {{ tag.name }}
-
-
+
+
+ @if (readonly) {
+
Tags
+ @if (tags?.length > 0) {
+
+ @for (tag of tags; track tag) {
+ {{ tag.name }}
+ }
+
+ } @else {
+
-
+ }
+ } @else {
+
+ Tags
+
+ @for (tag of tagsSelected(); track tag.id) {
+
+ {{ tag.name }}
+
+
+ }
+
+
+
+ @for (tag of filteredOptions | async; track tag.id) {
+
+ {{ tag.name }}
+
+ }
+
+
}
-
-
-
- @for (tag of filteredOptions | async; track tag.id) {
-
- {{ tag.name }}
-
- }
-
-
+
+
diff --git a/libs/ui/src/lib/tags-selector/tags-selector.component.stories.ts b/libs/ui/src/lib/tags-selector/tags-selector.component.stories.ts
index c1adf128..4fd0f7e7 100644
--- a/libs/ui/src/lib/tags-selector/tags-selector.component.stories.ts
+++ b/libs/ui/src/lib/tags-selector/tags-selector.component.stories.ts
@@ -47,6 +47,25 @@ export const Default: Story = {
}
};
+export const Readonly: Story = {
+ args: {
+ readonly: true,
+ tags: [
+ {
+ id: 'EMERGENCY_FUND',
+ name: 'Emergency Fund',
+ userId: null
+ },
+ {
+ id: 'RETIREMENT_FUND',
+ name: 'Retirement Fund',
+ userId: null
+ }
+ ],
+ tagsAvailable: OPTIONS
+ }
+};
+
export const WithoutValue: Story = {
args: {
tags: [],
diff --git a/libs/ui/src/lib/tags-selector/tags-selector.component.ts b/libs/ui/src/lib/tags-selector/tags-selector.component.ts
index 77c776ec..6b59d53f 100644
--- a/libs/ui/src/lib/tags-selector/tags-selector.component.ts
+++ b/libs/ui/src/lib/tags-selector/tags-selector.component.ts
@@ -42,6 +42,7 @@ import { BehaviorSubject, Subject, takeUntil } from 'rxjs';
templateUrl: 'tags-selector.component.html'
})
export class GfTagsSelectorComponent implements OnInit, OnChanges, OnDestroy {
+ @Input() readonly = false;
@Input() tags: Tag[];
@Input() tagsAvailable: Tag[];