Fix the rendering of reference lists.

CHANGELOG.md

@@ -3,6 +3,12 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [6.13.0] - 200-08-02
+
+### Fkxed
+
+* **UI**: Fixes the rendering of reference lists.
+
 ## [6.12.0] - 200-08-01
 
 ### Changed

frontend/src/app/framework/angular/stateful.component.ts

@@ -83,7 +83,7 @@ export abstract class StatefulComponent<T = any> extends State<T> implements OnD
         this.changeDetector.detectChanges();
     }
 
-    public own<R>(subscription: Subscription | UnsubscribeFunction | Observable<R>) {
+    public own<R>(subscription: Subscription | UnsubscribeFunction | Observable<R> | null | undefined) {
         this.subscriptions.own(subscription);
     }
 }

frontend/src/app/shared/components/contents/content-value.component.html

@@ -1,6 +1,6 @@
 <ng-container *ngIf="isPlain; else html">
     <div class="value-container" [title]="title" titlePosition="top-left">
-        <div #valueElement [class.truncate]="!wrapping">{{value}}</div>
+        <div #valueElement [class.truncate]="!snapshot.wrapping">{{value}}</div>
     </div>
 
     <button class="btn btn-icon" *ngIf="isString && fields" (click)="toggle()" sqxStopClick>

frontend/src/app/shared/components/contents/content-value.component.ts

@@ -6,8 +6,12 @@
  */
 
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { ResourceOwner } from '@app/framework';
+import { StatefulComponent } from '@app/framework';
-import { FieldWrappings, HtmlValue, TableField, TableSettings, Types } from '@app/shared/internal';
+import { HtmlValue, TableField, TableSettings, Types } from '@app/shared/internal';
+
+interface State {
+    wrapping: boolean;
+}
 
 @Component({
     selector: 'sqx-content-value[value]',
@@ -15,34 +19,30 @@ import { FieldWrappings, HtmlValue, TableField, TableSettings, Types } from '@ap
     templateUrl: './content-value.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ContentValueComponent extends ResourceOwner implements OnChanges {
+export class ContentValueComponent extends StatefulComponent<State> implements OnChanges {
     @Input()
     public value!: any;
 
     @Input()
-    public field!: TableField;
+    public field?: TableField;
 
     @Input()
     public fields?: TableSettings;
 
-    public wrapping = false;
+    public get title() {
+        return this.isString && this.isPlain ? this.value : undefined;
+    }
 
     public get isString() {
-        return this.field.rootField?.properties.fieldType === 'String';
+        return this.field?.rootField?.properties.fieldType === 'String';
     }
 
     public get isPlain() {
         return !Types.is(this.value, HtmlValue);
     }
 
-    public get title() {
+    constructor(changeDetector: ChangeDetectorRef) {
-        return this.isString ? this.value : undefined;
+        super(changeDetector, { wrapping: false });
-    }
-
-    constructor(
-        private readonly changeDetector: ChangeDetectorRef,
-    ) {
-        super();
     }
 
     public ngOnChanges(changes: SimpleChanges) {
@@ -51,24 +51,18 @@ export class ContentValueComponent extends ResourceOwner implements OnChanges {
 
             this.own(this.fields?.fieldWrappings
                 .subscribe(wrappings => {
-                    this.updateWrapping(wrappings);
+                    const wrapping = wrappings[this.field?.name!];
+
+                    this.next({ wrapping });
                 }));
         }
     }
 
     public toggle() {
-        this.fields?.toggleWrapping(this.field?.name);
+        if (!this.field) {
-    }
-
-    private updateWrapping(wrappings: FieldWrappings) {
-        const wrapping = wrappings[this.field?.name];
-
-        if (wrapping === this.wrapping) {
             return;
         }
 
-        this.wrapping = wrapping;
+        this.fields?.toggleWrapping(this.field?.name);
-
-        this.changeDetector.detectChanges();
     }
 }