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

---------

Co-authored-by: Daniel Smid (vr0u9s1) <[email protected]>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "clr-addons",
-  "version": "18.2.5",
+  "version": "18.2.6",
   "private": true,
   "scripts": {
     "build:ui:css": "sass --source-map --precision=8 ./src/clr-addons/themes/phs/phs-theme.scss ./dist/clr-addons/styles/clr-addons-phs.css",

src/clr-addons/readonly/readonly.directive.ts

@@ -4,9 +4,9 @@ import { formatNumber } from '../util';
 
 @Directive({
   selector: '[clrReadonly]',
+  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;
@@ -96,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);
     }
@@ -117,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) {

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">

src/dev/src/app/readonly/readonly.demo.ts

@@ -8,6 +8,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'clr-readonly-demo',
   templateUrl: './readonly.demo.html',
+  standalone: false,
 })
 export class ReadonlyDemo {
   radioValue = 1;
@@ -20,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;