feat(ui): introduce readonly attribute

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

@@ -1,32 +1,45 @@
-<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) {
-      <mat-chip-row
-        matChipRemove
-        [removable]="true"
-        (removed)="onRemoveTag(tag)"
-      >
-        {{ tag.name }}
-        <ion-icon matChipTrailingIcon name="close-outline" />
-      </mat-chip-row>
+<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) {
+            <mat-chip-row
+              matChipRemove
+              [removable]="true"
+              (removed)="onRemoveTag(tag)"
+            >
+              {{ tag.name }}
+              <ion-icon matChipTrailingIcon name="close-outline" />
+            </mat-chip-row>
+          }
+          <input
+            #tagInput
+            [formControl]="tagInputControl"
+            [matAutocomplete]="autocompleteTags"
+            [matChipInputFor]="tagsChipList"
+            [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+          />
+        </mat-chip-grid>
+        <mat-autocomplete
+          #autocompleteTags="matAutocomplete"
+          (optionSelected)="onAddTag($event)"
+        >
+          @for (tag of filteredOptions | async; track tag.id) {
+            <mat-option [value]="tag.id">
+              {{ tag.name }}
+            </mat-option>
+          }
+        </mat-autocomplete>
+      </mat-form-field>
     }
-    <input
-      #tagInput
-      [formControl]="tagInputControl"
-      [matAutocomplete]="autocompleteTags"
-      [matChipInputFor]="tagsChipList"
-      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-    />
-  </mat-chip-grid>
-  <mat-autocomplete
-    #autocompleteTags="matAutocomplete"
-    (optionSelected)="onAddTag($event)"
-  >
-    @for (tag of filteredOptions | async; track tag.id) {
-      <mat-option [value]="tag.id">
-        {{ tag.name }}
-      </mat-option>
-    }
-  </mat-autocomplete>
-</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[];