@alfresco/adf-core 8.4.0-19535715289 → 8.4.0-19568221987

package/fesm2022/adf-core.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Input, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, Injectable, TemplateRef, ContentChild, Directive, ContentChildren, RendererFactory2, effect, Optional, Inject, NgModule, HostBinding, Pipe, InjectionToken, provideAppInitializer, EventEmitter, HostListener, ViewChild, Output, ViewChildren, DestroyRef, QueryList, Self, signal, computed, DEFAULT_CURRENCY_CODE, SecurityContext, ElementRef, ChangeDetectorRef, ViewContainerRef, forwardRef, Compiler, Injector } from '@angular/core';
+import { Input, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, Injectable, TemplateRef, ContentChild, Directive, ContentChildren, RendererFactory2, effect, Optional, Inject, NgModule, HostBinding, Pipe, InjectionToken, provideAppInitializer, EventEmitter, HostListener, ViewChild, Output, ViewChildren, DestroyRef, QueryList, Self, signal, computed, DEFAULT_CURRENCY_CODE, SecurityContext, ElementRef, ViewContainerRef, forwardRef, Compiler, ChangeDetectorRef, Injector } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT, NgIf, NgClass, NgForOf, AsyncPipe, NgTemplateOutlet, NgStyle, DecimalPipe, DatePipe, CurrencyPipe, NgFor } from '@angular/common';
 import * as i2 from '@angular/material/table';
@@ -13704,11 +13704,20 @@ class DataTableCellComponent {
         this.resolverFn = null;
         this.destroyRef = inject(DestroyRef);
         this.dataTableService = inject(DataTableService, { optional: true });
+        this.userPreferencesService = inject(UserPreferencesService);
         this.value$ = new BehaviorSubject('');
         // Signal to track the raw computed title (without tooltip override)
         this.rawComputedTitle = signal('');
         // Computed signal that automatically combines tooltip input with computed title
         this.title = computed(() => this.tooltip || this.rawComputedTitle());
+        // Store the latest value for locale change re-computation
+        this.latestValue = null;
+        // Listen to locale changes and re-compute the title with the latest value
+        effect(() => {
+            this.userPreferencesService.localeSignal();
+            // When locale changes, re-compute title using the stored latest value
+            this.recomputeTitle();
+        });
     }
     ngOnInit() {
         this.updateValue();
@@ -13718,9 +13727,18 @@ class DataTableCellComponent {
         if (this.column?.key && this.row && this.data) {
             const value = this.data.getValue(this.row, this.column, this.resolverFn);
             this.value$.next(value);
-            this.rawComputedTitle.set(this.computeTitle(value));
+            // Store the value for locale change re-computation and update the title
+            this.latestValue = value;
+            this.recomputeTitle();
         }
     }
+    /**
+     * Re-computes the title based on the current latestValue.
+     * This is called both when the value changes (via updateValue) and when the locale changes (via effect).
+     */
+    recomputeTitle() {
+        this.rawComputedTitle.set(this.computeTitle(this.latestValue));
+    }
     subscribeToRowUpdates() {
         if (!this.dataTableService || !this.row.obj) {
             return;
@@ -13797,7 +13815,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     host: { class: 'adf-datatable-content-cell' }
                 }]
-        }], propDecorators: { data: [{
+        }], ctorParameters: () => [], propDecorators: { data: [{
                 type: Input,
                 args: [{ required: true }]
             }], column: [{
@@ -13840,16 +13858,14 @@ class AmountCellComponent extends DataTableCellComponent {
             digitsInfo: undefined,
             locale: undefined
         };
-    }
-    ngOnInit() {
-        super.ngOnInit();
+        this.amountValue = toSignal(this.value$);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AmountCellComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: AmountCellComponent, isStandalone: true, selector: "adf-amount-cell", inputs: { currencyConfig: "currencyConfig" }, host: { classAttribute: "adf-datatable-content-cell" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"value$ | async as amount\">\n    <span [title]=\"amount\">\n        {{ amount | currency:\n            (currencyConfig?.code || defaultCurrencyConfig.code):\n            (currencyConfig?.display || defaultCurrencyConfig.display):\n            (currencyConfig?.digitsInfo || defaultCurrencyConfig.digitsInfo):\n            (currencyConfig?.locale || defaultCurrencyConfig.locale)\n        }}\n    </span>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: AmountCellComponent, isStandalone: true, selector: "adf-amount-cell", inputs: { currencyConfig: "currencyConfig" }, host: { classAttribute: "adf-datatable-content-cell" }, usesInheritance: true, ngImport: i0, template: "@let amount = amountValue();\n@if (amount) {\n    <span [title]=\"amount\">\n        {{ amount | currency:\n            (currencyConfig?.code || defaultCurrencyConfig.code):\n            (currencyConfig?.display || defaultCurrencyConfig.display):\n            (currencyConfig?.digitsInfo || defaultCurrencyConfig.digitsInfo):\n            (currencyConfig?.locale || defaultCurrencyConfig.locale)\n        }}\n    </span>\n}\n", dependencies: [{ kind: "pipe", type: CurrencyPipe, name: "currency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AmountCellComponent, decorators: [{
             type: Component,
-            args: [{ imports: [CommonModule], selector: 'adf-amount-cell', host: { class: 'adf-datatable-content-cell' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"value$ | async as amount\">\n    <span [title]=\"amount\">\n        {{ amount | currency:\n            (currencyConfig?.code || defaultCurrencyConfig.code):\n            (currencyConfig?.display || defaultCurrencyConfig.display):\n            (currencyConfig?.digitsInfo || defaultCurrencyConfig.digitsInfo):\n            (currencyConfig?.locale || defaultCurrencyConfig.locale)\n        }}\n    </span>\n</ng-container>\n" }]
+            args: [{ imports: [CurrencyPipe], selector: 'adf-amount-cell', host: { class: 'adf-datatable-content-cell' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@let amount = amountValue();\n@if (amount) {\n    <span [title]=\"amount\">\n        {{ amount | currency:\n            (currencyConfig?.code || defaultCurrencyConfig.code):\n            (currencyConfig?.display || defaultCurrencyConfig.display):\n            (currencyConfig?.digitsInfo || defaultCurrencyConfig.digitsInfo):\n            (currencyConfig?.locale || defaultCurrencyConfig.locale)\n        }}\n    </span>\n}\n" }]
         }], propDecorators: { currencyConfig: [{
                 type: Input
             }] } });
@@ -13873,12 +13889,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
 class BooleanCellComponent extends DataTableCellComponent {
     constructor() {
         super(...arguments);
-        this.boolValue = '';
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        this.value$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value) => {
-            this.boolValue = this.transformBoolean(value);
+        this.booleanValue = toSignal(this.value$);
+        this.boolValue = computed(() => {
+            const value = this.booleanValue();
+            return this.transformBoolean(value);
         });
     }
     transformBoolean(value) {
@@ -13891,23 +13905,14 @@ class BooleanCellComponent extends DataTableCellComponent {
         return '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: BooleanCellComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: BooleanCellComponent, isStandalone: true, selector: "adf-boolean-cell", host: { classAttribute: "adf-datatable-content-cell" }, usesInheritance: true, ngImport: i0, template: `
-        <span [title]="tooltip">
-            {{ boolValue }}
-        </span>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: BooleanCellComponent, isStandalone: true, selector: "adf-boolean-cell", host: { classAttribute: "adf-datatable-content-cell" }, usesInheritance: true, ngImport: i0, template: ` <span [title]="title()">{{ boolValue() }}</span> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: BooleanCellComponent, decorators: [{
             type: Component,
             args: [{
-                    imports: [CommonModule],
                     selector: 'adf-boolean-cell',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-        <span [title]="tooltip">
-            {{ boolValue }}
-        </span>
-    `,
+                    template: ` <span [title]="title()">{{ boolValue() }}</span> `,
                     encapsulation: ViewEncapsulation.None,
                     host: { class: 'adf-datatable-content-cell' }
                 }]
@@ -15934,46 +15939,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
  * limitations under the License.
  */
 class IconCellComponent extends DataTableCellComponent {
-    constructor(changeDetectorRef) {
-        super();
-        this.changeDetectorRef = changeDetectorRef;
-        this.icon = '';
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        this.value$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value) => {
-            const newIcon = this.validateIconValue(value) ? value : '';
-            if (this.icon !== newIcon) {
-                this.icon = newIcon;
-                this.changeDetectorRef.detectChanges();
-            }
+    constructor() {
+        super(...arguments);
+        this.iconValue = toSignal(this.value$);
+        this.icon = computed(() => {
+            const value = this.iconValue();
+            return this.validateIconValue(value) ? value : '';
         });
     }
     validateIconValue(value) {
         return typeof value === 'string';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: IconCellComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: IconCellComponent, isStandalone: true, selector: "adf-icon-cell", host: { classAttribute: "adf-datatable-content-cell" }, usesInheritance: true, ngImport: i0, template: `
-        <ng-container *ngIf="icon">
-            <mat-icon [title]="tooltip" aria-hidden="true">{{ icon }}</mat-icon>
-        </ng-container>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: IconCellComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: IconCellComponent, isStandalone: true, selector: "adf-icon-cell", host: { classAttribute: "adf-datatable-content-cell" }, usesInheritance: true, ngImport: i0, template: `
+        @if (icon()) {
+            <mat-icon [title]="title()" aria-hidden="true">{{ icon() }}</mat-icon>
+        }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: IconCellComponent, decorators: [{
             type: Component,
             args: [{
-                    imports: [CommonModule, MatIconModule],
+                    imports: [MatIconModule],
                     selector: 'adf-icon-cell',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-        <ng-container *ngIf="icon">
-            <mat-icon [title]="tooltip" aria-hidden="true">{{ icon }}</mat-icon>
-        </ng-container>
+        @if (icon()) {
+            <mat-icon [title]="title()" aria-hidden="true">{{ icon() }}</mat-icon>
+        }
     `,
                     encapsulation: ViewEncapsulation.None,
                     host: { class: 'adf-datatable-content-cell' }
                 }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
+        }] });
 
 /*!
  * @license
@@ -15994,23 +15992,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
 class DateCellComponent extends DataTableCellComponent {
     constructor() {
         super();
-        this.config = {};
+        this.config = signal({});
         this.appConfig = inject(AppConfigService);
         this.localizedDatePipe = inject(LocalizedDatePipe);
-        this.userPreferencesService = inject(UserPreferencesService);
-        this.cdr = inject(ChangeDetectorRef);
+        this.timeAgoPipe = inject(TimeAgoPipe);
         this.userLocale = 'en';
         this.defaultDateConfig = {
             format: 'medium',
             tooltipFormat: 'medium',
             locale: undefined
         };
+        // Convert value$ observable to signal for reactive computation
+        this.dateValue = toSignal(this.value$);
+        // Computed signal that automatically formats the date based on value and config
+        this.formattedDate = computed(() => {
+            const date = this.dateValue();
+            const currentConfig = this.config();
+            if (!date) {
+                return '';
+            }
+            if (currentConfig.format === 'timeAgo') {
+                return this.timeAgoPipe.transform(date, currentConfig.locale) || '';
+            }
+            return this.localizedDatePipe.transform(date, currentConfig.format, currentConfig.locale) || '';
+        });
         // Use effect to react to locale signal changes (must be in injection context)
         effect(() => {
             this.userLocale = this.userPreferencesService.localeSignal() || 'en';
             this.setConfig();
-            this.updateValue(); // Recalculate computedTitle with new locale
-            this.cdr.markForCheck();
         });
     }
     ngOnInit() {
@@ -16018,7 +16027,8 @@ class DateCellComponent extends DataTableCellComponent {
     }
     computeTitle(value) {
         if (value) {
-            return this.localizedDatePipe.transform(value, this.config.tooltipFormat, this.config.locale) || '';
+            const currentConfig = this.config();
+            return this.localizedDatePipe.transform(value, currentConfig.tooltipFormat, currentConfig.locale) || '';
         }
         return '';
     }
@@ -16031,14 +16041,18 @@ class DateCellComponent extends DataTableCellComponent {
         }
     }
     setCustomConfig() {
-        this.config.format = this.dateConfig?.format || this.getDefaultFormat();
-        this.config.tooltipFormat = this.dateConfig?.tooltipFormat || this.getDefaultTooltipFormat();
-        this.config.locale = this.normalizeLocale(this.dateConfig?.locale || this.getDefaultLocale());
+        this.config.set({
+            format: this.dateConfig?.format || this.getDefaultFormat(),
+            tooltipFormat: this.dateConfig?.tooltipFormat || this.getDefaultTooltipFormat(),
+            locale: this.normalizeLocale(this.dateConfig?.locale || this.userLocale)
+        });
     }
     setDefaultConfig() {
-        this.config.format = this.getDefaultFormat();
-        this.config.tooltipFormat = this.getDefaultTooltipFormat();
-        this.config.locale = this.normalizeLocale(this.getDefaultLocale());
+        this.config.set({
+            format: this.getDefaultFormat(),
+            tooltipFormat: this.getDefaultTooltipFormat(),
+            locale: this.normalizeLocale(this.userLocale)
+        });
     }
     normalizeLocale(locale) {
         if (!locale) {
@@ -16054,11 +16068,6 @@ class DateCellComponent extends DataTableCellComponent {
     getDefaultFormat() {
         return this.column?.format || this.getAppConfigPropertyValue('dateValues.defaultDateFormat', this.defaultDateConfig.format);
     }
-    getDefaultLocale() {
-        // Always use the user locale from UserPreferencesService
-        // This is kept in sync via subscription and reflects the user's current locale choice
-        return this.userLocale;
-    }
     getDefaultTooltipFormat() {
         return this.getAppConfigPropertyValue('dateValues.defaultTooltipDateFormat', this.defaultDateConfig.tooltipFormat);
     }
@@ -16066,11 +16075,26 @@ class DateCellComponent extends DataTableCellComponent {
         return this.appConfig.get(key, defaultValue);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DateCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: DateCellComponent, isStandalone: true, selector: "adf-date-cell", inputs: { dateConfig: "dateConfig" }, host: { classAttribute: "adf-datatable-content-cell" }, providers: [LocalizedDatePipe], usesInheritance: true, ngImport: i0, template: "@let date = value$ | async;\n\n@if (date) {\n    <span [title]=\"title()\" class=\"adf-datatable-cell-value\">\n        @if (config.format === 'timeAgo') {\n            @if (config.locale) {\n                {{ date | adfTimeAgo: config.locale }}\n            } @else {\n                {{ date | adfTimeAgo }}\n            }\n        } @else {\n            @if (config.locale) {\n                {{ date | adfLocalizedDate: config.format: config.locale }}\n            } @else {\n                {{ date | adfLocalizedDate: config.format }}\n            }\n        }\n    </span>\n}\n", dependencies: [{ kind: "pipe", type: LocalizedDatePipe, name: "adfLocalizedDate" }, { kind: "pipe", type: TimeAgoPipe, name: "adfTimeAgo" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: DateCellComponent, isStandalone: true, selector: "adf-date-cell", inputs: { dateConfig: "dateConfig" }, host: { classAttribute: "adf-datatable-content-cell" }, providers: [LocalizedDatePipe, TimeAgoPipe], usesInheritance: true, ngImport: i0, template: `
+        @if (formattedDate()) {
+            <span [title]="title()" class="adf-datatable-cell-value">{{ formattedDate() }}</span>
+        }
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DateCellComponent, decorators: [{
             type: Component,
-            args: [{ imports: [LocalizedDatePipe, TimeAgoPipe, AsyncPipe], selector: 'adf-date-cell', encapsulation: ViewEncapsulation.None, host: { class: 'adf-datatable-content-cell' }, changeDetection: ChangeDetectionStrategy.OnPush, providers: [LocalizedDatePipe], template: "@let date = value$ | async;\n\n@if (date) {\n    <span [title]=\"title()\" class=\"adf-datatable-cell-value\">\n        @if (config.format === 'timeAgo') {\n            @if (config.locale) {\n                {{ date | adfTimeAgo: config.locale }}\n            } @else {\n                {{ date | adfTimeAgo }}\n            }\n        } @else {\n            @if (config.locale) {\n                {{ date | adfLocalizedDate: config.format: config.locale }}\n            } @else {\n                {{ date | adfLocalizedDate: config.format }}\n            }\n        }\n    </span>\n}\n" }]
+            args: [{
+                    selector: 'adf-date-cell',
+                    template: `
+        @if (formattedDate()) {
+            <span [title]="title()" class="adf-datatable-cell-value">{{ formattedDate() }}</span>
+        }
+    `,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { class: 'adf-datatable-content-cell' },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [LocalizedDatePipe, TimeAgoPipe]
+                }]
         }], ctorParameters: () => [], propDecorators: { dateConfig: [{
                 type: Input
             }] } });
@@ -16092,8 +16116,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
  * limitations under the License.
  */
 class LocationCellComponent extends DataTableCellComponent {
-    ngOnInit() {
-        super.ngOnInit();
+    constructor() {
+        super(...arguments);
+        this.locationValue = toSignal(this.value$);
     }
     updateValue() {
         if (this.column?.key && this.column?.format && this.row && this.data) {
@@ -16110,25 +16135,21 @@ class LocationCellComponent extends DataTableCellComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: LocationCellComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: LocationCellComponent, isStandalone: true, selector: "adf-location-cell", inputs: { link: "link" }, host: { classAttribute: "adf-location-cell adf-datatable-content-cell" }, usesInheritance: true, ngImport: i0, template: `
-        <ng-container>
-            <a [title]="tooltip" [routerLink]="link">
-                {{ value$ | async }}
-            </a>
-        </ng-container>
-    `, isInline: true, dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$9.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        <a [title]="tooltip" [routerLink]="link">
+            {{ locationValue() }}
+        </a>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$9.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: LocationCellComponent, decorators: [{
             type: Component,
             args: [{
-                    imports: [AsyncPipe, RouterModule],
+                    imports: [RouterModule],
                     selector: 'adf-location-cell',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-        <ng-container>
-            <a [title]="tooltip" [routerLink]="link">
-                {{ value$ | async }}
-            </a>
-        </ng-container>
+        <a [title]="tooltip" [routerLink]="link">
+            {{ locationValue() }}
+        </a>
     `,
                     encapsulation: ViewEncapsulation.None,
                     host: { class: 'adf-location-cell adf-datatable-content-cell' }
@@ -16154,23 +16175,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
  * limitations under the License.
  */
 class FileSizeCellComponent extends DataTableCellComponent {
-    constructor() {
-        super(...arguments);
-        this.fileSizePipe = inject(FileSizePipe);
-    }
-    ngOnInit() {
-        super.ngOnInit();
-    }
-    computeTitle(value) {
-        if (value != null) {
-            return this.fileSizePipe.transform(value);
-        }
-        return '';
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FileSizeCellComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: FileSizeCellComponent, isStandalone: true, selector: "adf-filesize-cell", host: { classAttribute: "adf-filesize-cell" }, providers: [FileSizePipe], usesInheritance: true, ngImport: i0, template: `
         @let value = value$ | async;
-        <span [title]="title()" class="adf-datatable-cell-value">{{ value | adfFileSize }}</span>
+        <span [title]="value | adfFileSize" class="adf-datatable-cell-value">{{ value | adfFileSize }}</span>
     `, isInline: true, dependencies: [{ kind: "pipe", type: FileSizePipe, name: "adfFileSize" }, { kind: "pipe", type: AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FileSizeCellComponent, decorators: [{
@@ -16180,7 +16188,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                     imports: [FileSizePipe, AsyncPipe],
                     template: `
         @let value = value$ | async;
-        <span [title]="title()" class="adf-datatable-cell-value">{{ value | adfFileSize }}</span>
+        <span [title]="value | adfFileSize" class="adf-datatable-cell-value">{{ value | adfFileSize }}</span>
     `,
                     encapsulation: ViewEncapsulation.None,
                     host: { class: 'adf-filesize-cell' },
@@ -16253,13 +16261,15 @@ class JsonCellComponent extends DataTableCellComponent {
         this.dialog = dialog;
         /** Editable JSON. */
         this.editable = false;
-    }
-    ngOnInit() {
-        super.ngOnInit();
+        this.jsonValue = toSignal(this.value$);
+        this.shouldShowButton = computed(() => {
+            const value = this.jsonValue();
+            return !!value || this.editable;
+        });
     }
     view() {
         const rawValue = this.data.getValue(this.row, this.column, this.resolverFn);
-        const value = typeof rawValue === 'object' ? JSON.stringify(rawValue || {}, null, 2) : rawValue;
+        const value = typeof rawValue === 'object' ? JSON.stringify(rawValue || {}, null, 2) : String(rawValue ?? '');
         const settings = {
             title: this.column.title,
             editable: this.editable,
@@ -16272,36 +16282,21 @@ class JsonCellComponent extends DataTableCellComponent {
             minHeight: '50%'
         })
             .afterClosed()
-            .subscribe(( /*result: string*/) => {
-            if (typeof rawValue === 'object') {
-                // todo: update cell value as object
-            }
-            else {
-                // todo: update cell value as string
-            }
-        });
+            .subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: JsonCellComponent, deps: [{ token: i1$7.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: JsonCellComponent, isStandalone: true, selector: "adf-json-cell", inputs: { editable: "editable" }, host: { classAttribute: "adf-datatable-content-cell" }, usesInheritance: true, ngImport: i0, template: `
-        <ng-container *ngIf="value$ | async as value; else editEmpty">
-            <button mat-button color="primary" (click)="view()">json</button>
-        </ng-container>
-
-        <ng-template #editEmpty>
-            <button *ngIf="editable" mat-button color="primary" (click)="view()">json</button>
-        </ng-template>
-    `, isInline: true, styles: [".adf-datatable-json-cell{white-space:pre-wrap;word-wrap:break-word}.adf-datatable-cell-value{position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatDialogModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: JsonCellComponent, isStandalone: true, selector: "adf-json-cell", inputs: { editable: "editable" }, host: { classAttribute: "adf-datatable-content-cell" }, usesInheritance: true, ngImport: i0, template: `
+        @if (shouldShowButton()) {
+            <button mat-button (click)="view()">json</button>
+        }
+    `, isInline: true, styles: [".adf-datatable-json-cell{white-space:pre-wrap;word-wrap:break-word}.adf-datatable-cell-value{position:relative}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatDialogModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: JsonCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'adf-json-cell', imports: [CommonModule, MatButtonModule, MatDialogModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-        <ng-container *ngIf="value$ | async as value; else editEmpty">
-            <button mat-button color="primary" (click)="view()">json</button>
-        </ng-container>
-
-        <ng-template #editEmpty>
-            <button *ngIf="editable" mat-button color="primary" (click)="view()">json</button>
-        </ng-template>
+            args: [{ selector: 'adf-json-cell', imports: [MatButtonModule, MatDialogModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+        @if (shouldShowButton()) {
+            <button mat-button (click)="view()">json</button>
+        }
     `, encapsulation: ViewEncapsulation.None, host: { class: 'adf-datatable-content-cell' }, styles: [".adf-datatable-json-cell{white-space:pre-wrap;word-wrap:break-word}.adf-datatable-cell-value{position:relative}\n"] }]
         }], ctorParameters: () => [{ type: i1$7.MatDialog }], propDecorators: { editable: [{
                 type: Input
@@ -16330,16 +16325,14 @@ class NumberCellComponent extends DataTableCellComponent {
             digitsInfo: undefined,
             locale: undefined
         };
-    }
-    ngOnInit() {
-        super.ngOnInit();
+        this.numberValue = toSignal(this.value$);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NumberCellComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: NumberCellComponent, isStandalone: true, selector: "adf-number-cell", inputs: { decimalConfig: "decimalConfig" }, host: { classAttribute: "adf-datatable-content-cell" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"value$ | async as number\">\n    <span [title]=\"number\">\n        {{ number | number:\n            (decimalConfig?.digitsInfo || defaultDecimalConfig.digitsInfo):\n            (decimalConfig?.locale || defaultDecimalConfig.locale)\n        }}\n    </span>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: NumberCellComponent, isStandalone: true, selector: "adf-number-cell", inputs: { decimalConfig: "decimalConfig" }, host: { classAttribute: "adf-datatable-content-cell" }, usesInheritance: true, ngImport: i0, template: "@let number = numberValue();\n@if (number) {\n    <span [title]=\"number\">\n        {{ number | number:\n            (decimalConfig?.digitsInfo || defaultDecimalConfig.digitsInfo):\n            (decimalConfig?.locale || defaultDecimalConfig.locale)\n        }}\n    </span>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NumberCellComponent, decorators: [{
             type: Component,
-            args: [{ imports: [CommonModule], selector: 'adf-number-cell', host: { class: 'adf-datatable-content-cell' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"value$ | async as number\">\n    <span [title]=\"number\">\n        {{ number | number:\n            (decimalConfig?.digitsInfo || defaultDecimalConfig.digitsInfo):\n            (decimalConfig?.locale || defaultDecimalConfig.locale)\n        }}\n    </span>\n</ng-container>\n" }]
+            args: [{ imports: [CommonModule], selector: 'adf-number-cell', host: { class: 'adf-datatable-content-cell' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@let number = numberValue();\n@if (number) {\n    <span [title]=\"number\">\n        {{ number | number:\n            (decimalConfig?.digitsInfo || defaultDecimalConfig.digitsInfo):\n            (decimalConfig?.locale || defaultDecimalConfig.locale)\n        }}\n    </span>\n}\n" }]
         }], propDecorators: { decimalConfig: [{
                 type: Input
             }] } });
@@ -17846,9 +17839,7 @@ class DataTableModule {
             DataTableRowComponent,
             DataTableCellComponent,
             DataTableComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DataTableModule, imports: [BooleanCellComponent,
-            AmountCellComponent,
-            NumberCellComponent,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DataTableModule, imports: [NumberCellComponent,
             LocationCellComponent,
             IconCellComponent,
             ColumnsSelectorComponent,
@@ -31717,7 +31708,7 @@ class CoreModule {
             MaterialModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CoreModule, providers: [...CORE_PIPES], imports: [AboutExtensionListComponent, AboutLicenseListComponent, ModuleListComponent, AboutRepositoryInfoComponent, PackageListComponent, AboutStatusListComponent, AboutServerSettingsComponent, AboutComponent, PdfPasswordDialogComponent, ViewerRenderComponent, ImgViewerComponent, PdfViewerComponent, UnknownFormatComponent, ViewerComponent, DownloadPromptDialogComponent, HeaderLayoutComponent, SidebarActionMenuComponent, LayoutContainerComponent, SidenavLayoutComponent, IdentityUserInfoComponent, TooltipCardComponent, PAGINATION_DIRECTIVES, ToolbarComponent, ContextMenuListComponent, CardViewComponent, CardViewBoolItemComponent, CardViewDateItemComponent, CardViewMapItemComponent, CardViewTextItemComponent, CardViewKeyValuePairsItemComponent, CardViewSelectItemComponent, CardViewArrayItemComponent, SelectFilterInputComponent, FormBaseModule,
             CommentsComponent,
-            CommentListComponent, LoginComponent, LoginDialogPanelComponent, LANGUAGE_MENU_DIRECTIVES, InfoDrawerLayoutComponent, InfoDrawerComponent, BooleanCellComponent, AmountCellComponent, NumberCellComponent, LocationCellComponent, IconCellComponent, ColumnsSelectorComponent, JsonCellComponent, DataTableCellComponent, DataTableComponent, TEMPLATE_DIRECTIVES, IconComponent,
+            CommentListComponent, LoginComponent, LoginDialogPanelComponent, LANGUAGE_MENU_DIRECTIVES, InfoDrawerLayoutComponent, InfoDrawerComponent, NumberCellComponent, LocationCellComponent, IconCellComponent, ColumnsSelectorComponent, JsonCellComponent, DataTableCellComponent, DataTableComponent, TEMPLATE_DIRECTIVES, IconComponent,
             SortingPickerComponent, NOTIFICATION_HISTORY_DIRECTIVES, SearchTextInputComponent, UnsavedChangesDialogComponent,
             DynamicChipListComponent,
             MaterialModule, FormBaseModule,