@3kles/kles-material-dynamicforms 21.4.1 → 21.4.2

package/fesm2022/3kles-kles-material-dynamicforms.mjs

@@ -5880,6 +5880,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
         }] });
 
 class KlesFormTileComponent extends KlesFieldAbstract {
+    constructor() {
+        super(...arguments);
+        this.control = this.group.controls[this.field.name];
+        this.controlValue = toSignal(this.control.valueChanges, {
+            initialValue: this.control.value,
+        });
+        this.formattedValue = computed(() => {
+            const value = this.controlValue();
+            if (value == null) {
+                return '';
+            }
+            if (this.field.displayWith) {
+                return this.field.displayWith(value) ?? '';
+            }
+            if (this.field.property && typeof value === 'object') {
+                return String(value[this.field.property] ?? '');
+            }
+            return String(value);
+        }, ...(ngDevMode ? [{ debugName: "formattedValue" }] : /* istanbul ignore next */ []));
+        this.displayValue = computed(() => this.formattedValue() || this.label() || '', ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: KlesFormTileComponent, isStandalone: true, selector: "app-kles-form-tile", usesInheritance: true, ngImport: i0, template: `
         <div class="kles-tile" [ngClass]="ngClass()" [ngStyle]="ngStyle()" [matTooltip]="tooltip()">
@@ -5888,9 +5909,9 @@ class KlesFormTileComponent extends KlesFieldAbstract {
             }
 
             <div class="kles-tile__content">
-                @if (label()) {
+                @if (displayValue(); as value) {
                     <div class="kles-tile__label">
-                        {{ label() }}
+                        {{ value }}
                     </div>
                 }
 
@@ -5912,9 +5933,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             }
 
             <div class="kles-tile__content">
-                @if (label()) {
+                @if (displayValue(); as value) {
                     <div class="kles-tile__label">
-                        {{ label() }}
+                        {{ value }}
                     </div>
                 }