add property handling for single select combobox readonly (#2457)

Co-authored-by: Daniel Smid (vr0u9s1) <[email protected]>
porscheinformatik · Feb 5, 2025 · 8a4aca5 · 8a4aca5
1 parent 1841fa4
commit 8a4aca5
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 6 deletions.
diff --git a/src/clr-addons/readonly/readonly.directive.ts b/src/clr-addons/readonly/readonly.directive.ts
@@ -7,7 +7,6 @@ import { formatNumber } from '../util';
   standalone: false,
 })
 export class ClrReadonlyDirective implements OnChanges, OnInit, AfterViewInit {
-  @Input('clrMulti') isMultiSelect: boolean = false;
   @Input('clrUnitPosition') unitPosition = 'right';
   @Input('clrReadOnlyProperty') property: string | null = null;
   @Input('clrReadonly') clrReadOnly: boolean = true;
@@ -97,8 +96,8 @@ export class ClrReadonlyDirective implements OnChanges, OnInit, AfterViewInit {
 
     if (controlType === 'numeric') {
       return this.formatNumericValue(controlValue);
-    } else if (this.isMultiSelect) {
-      return this.formatMultiSelectValue(controlValue);
+    } else if (this.property) {
+      return this.formatValueForObjectValue(controlValue);
     } else if (controlType === 'select') {
       return this.formatListValue(controlValue);
     }
@@ -118,8 +117,12 @@ export class ClrReadonlyDirective implements OnChanges, OnInit, AfterViewInit {
     return this.unitPosition === 'left' ? `${this.unit} ${result}` : `${result} ${this.unit}`;
   }
 
-  private formatMultiSelectValue(controlValue: any): string {
-    return controlValue.map((item: Record<string, any>) => item[this.property!]).join(', ');
+  private formatValueForObjectValue(controlValue: any): string {
+    if (Array.isArray(controlValue)) {
+      return controlValue.map((item: Record<string, any>) => item[this.property!]).join(', ');
+    } else {
+      return controlValue[this.property!];
+    }
   }
 
   private formatListValue(controlValue: any) {

diff --git a/src/dev/src/app/readonly/readonly.demo.html b/src/dev/src/app/readonly/readonly.demo.html
@@ -1,5 +1,5 @@
 <!--
-  ~ Copyright (c) 2018-2024 Porsche Informatik. All Rights Reserved.
+  ~ Copyright (c) 2018-2025 Porsche Informatik. All Rights Reserved.
   ~ This software is released under MIT license.
   ~ The full license information can be found in LICENSE in the root directory of this project.
   -->
@@ -243,6 +243,34 @@ <h4>Combobox Single</h4>
     </div>
   </div>
 
+  <h4>Combobox Single Object Value</h4>
+  <div class="clr-row">
+    <div class="clr-col-6">
+      <clr-combobox-container>
+        <label>Combobox label</label>
+        <clr-combobox [(ngModel)]="comboBoxValueObject">
+          <clr-options>
+            <clr-option *clrOptionItems="let item of comboBoxValueObjectList; field: 'name'" [clrValue]="item.value">
+              {{ item.name }}
+            </clr-option>
+          </clr-options>
+        </clr-combobox>
+      </clr-combobox-container>
+    </div>
+    <div class="clr-col-6">
+      <clr-combobox-container>
+        <label>Combobox label (readOnly)</label>
+        <clr-combobox [clrReadonly]="true" [(ngModel)]="comboBoxValueObject" [clrReadOnlyProperty]="'name'">
+          <clr-options>
+            <clr-option *clrOptionItems="let item of comboBoxValueObjectList; field: 'name'" [clrValue]="item.value">
+              {{ item.name }}
+            </clr-option>
+          </clr-options>
+        </clr-combobox>
+      </clr-combobox-container>
+    </div>
+  </div>
+
   <h4>Combobox Multiselect</h4>
   <div class="clr-row">
     <div class="clr-col-6">

diff --git a/src/dev/src/app/readonly/readonly.demo.ts b/src/dev/src/app/readonly/readonly.demo.ts
@@ -21,6 +21,12 @@ export class ReadonlyDemo {
   textareaText =
     'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volu';
   comboBoxValue = 'Option 1';
+  comboBoxValueObject = { value: 'Option 1', name: 'Option 1' };
+  comboBoxValueObjectList = [
+    { value: 'Option 1', name: 'Option 1' },
+    { value: 'Option 2', name: 'Option 2' },
+    { value: 'Option 3', name: 'Option 3' },
+  ];
   numericValue = 1234456456;
 
   states = states;