feat(ui): introduce readonly attribute

libs/ui/src/lib/tags-selector/tags-selector.component.html

@@ -1,4 +1,14 @@
-<mat-form-field appearance="outline" class="w-100 without-hint">
+<div class="row">
+  <div class="col">
+    @if (readonly) {
+      <div class="h5" i18n>Tags</div>
+      <mat-chip-listbox>
+        @for (tag of tags; track tag) {
+          <mat-chip-option disabled>{{ tag.name }}</mat-chip-option>
+        }
+      </mat-chip-listbox>
+    } @else {
+      <mat-form-field appearance="outline" class="w-100 without-hint">
         <mat-label i18n>Tags</mat-label>
         <mat-chip-grid #tagsChipList>
           @for (tag of tagsSelected(); track tag.id) {
@@ -29,4 +39,7 @@
             </mat-option>
           }
         </mat-autocomplete>
-</mat-form-field>
+      </mat-form-field>
+    }
+  </div>
+</div>

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: [],

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[];