feat: add function support for optionLabel and optionInfo

projects/composition/src/app/pages/autocomplete-page/autocomplete-page.component.html

@@ -215,6 +215,21 @@
       </cps-autocomplete>
     </app-code-example>
 
+    <app-code-example
+      label="Function-based optionLabel (nested property)"
+      [htmlCode]="examples.functionOptionKey.html"
+      [tsCode]="examples.functionOptionKey.ts">
+      <cps-autocomplete
+        label="Autocomplete with function-based optionLabel (nested property)"
+        [options]="options"
+        [optionLabel]="getCode"
+        optionInfo="name"
+        placeholder="Enter a city code"
+        hint="optionLabel uses a function: (option) => option.data.code"
+        [clearable]="true">
+      </cps-autocomplete>
+    </app-code-example>
+
     <app-code-example
       label="Async validation"
       [htmlCode]="examples.asyncValidation.html"

projects/composition/src/app/pages/autocomplete-page/autocomplete-page.component.ts

@@ -69,7 +69,7 @@
   ];
 
   form!: FormGroup;
   syncVal: any = [];
   componentData = ComponentData;
 
   emptyOptionIndexValue = this.options[0];
@@ -80,14 +80,16 @@
   externalError = '';
 
   private _singleFilterOptionSubject$ = new Subject<string>();
   singleOptionsObservable$?: Observable<any>;
 
   private _multiFilterOptionSubject$ = new Subject<string>();
   multiOptionsObservable$?: Observable<any>;
 
   validating = false;
   selectedOption: any = null;
 
+  getCode = (option: any): string => option.data.code;
+
   get availableOptionInfo() {
     return this.options.map((option) => option.name).join(', ');
   }

projects/composition/src/app/pages/autocomplete-page/autocomplete-page.examples.ts

@@ -236,6 +236,23 @@ syncVal: string[] = [];`
     ts: citiesOptionsTs
   },
 
+  functionOptionKey: {
+    html: `
+<cps-autocomplete
+  label="Autocomplete with function-based optionLabel (nested property)"
+  [options]="options"
+  [optionLabel]="getCode"
+  optionInfo="name"
+  placeholder="Enter a city code"
+  hint="optionLabel uses a function: (option) => option.data.code"
+  [clearable]="true">
+</cps-autocomplete>`,
+    ts: `
+${citiesOptionsTs.trim()}
+
+getCode = (option: any): string => option.data.code;`
+  },
+
   asyncValidation: {
     html: `
 <cps-autocomplete

projects/composition/src/app/pages/select-page/select-page.component.html

@@ -158,9 +158,75 @@
         [clearable]="true"
         [multiple]="true"
         [closableChips]="false"
-        [(ngModel)]="syncVal"
-        [ngModelOptions]="{ standalone: true }"></cps-select>
-      <span class="sync-val">{{ syncVal }}</span>
+        [value]="[options[0].data, options[4].data]"></cps-select>
+      <cps-select
+        label="Multiple select with prefix icon"
+        [options]="options"
+        optionLabel="name"
+        optionInfo="info"
+        placeholder="Select a city"
+        [clearable]="true"
+        [multiple]="true"
+        [chips]="false"
+        prefixIcon="plus"
+        [value]="[options[5]]">
+      </cps-select>
+      <cps-select
+        label="Single select with options icons"
+        [options]="statusOptions"
+        optionLabel="name"
+        optionIconColor="color"
+        placeholder="Select a status">
+      </cps-select>
+      <div class="sync-val-example">
+        <cps-select
+          width="500"
+          label="Multiple select with two-way binding and keeping initial items order"
+          [returnObject]="false"
+          [options]="syncOptions"
+          [keepInitialOrder]="true"
+          optionLabel="title"
+          optionValue="val"
+          optionInfo="ticker"
+          placeholder="Select a company"
+          hint="This select has a fixed width of 500px"
+          [clearable]="true"
+          [multiple]="true"
+          [closableChips]="false"
+          [(ngModel)]="syncVal"
+          [ngModelOptions]="{ standalone: true }"></cps-select>
+        <span class="sync-val">{{ syncVal }}</span>
+      </div>
+      <cps-select
+        label="Select with function-based optionLabel (nested property)"
+        [options]="options"
+        [optionLabel]="getCode"
+        optionInfo="name"
+        placeholder="Select a city code"
+        hint="optionLabel uses a function: (option) => option.data.code">
+      </cps-select>
+      <cps-select
+        label="Underlined select"
+        [options]="options"
+        optionLabel="name"
+        optionInfo="info"
+        placeholder="Select a city"
+        [clearable]="true"
+        [multiple]="true"
+        [chips]="false"
+        appearance="underlined">
+      </cps-select>
+      <cps-select
+        label="Borderless select"
+        [options]="options"
+        optionLabel="name"
+        optionInfo="info"
+        placeholder="Select a city"
+        [clearable]="true"
+        [multiple]="true"
+        [chips]="false"
+        appearance="borderless">
+      </cps-select>
     </div>
   </app-code-example>
 

projects/composition/src/app/pages/select-page/select-page.component.ts

@@ -63,6 +63,8 @@ export class SelectPageComponent implements OnInit {
   openOnClearValue = this.options[3];
   componentData = ComponentData;
 
+  getCode = (option: any): string => option.data.code;
+
   // eslint-disable-next-line no-useless-constructor
   constructor(private _formBuilder: UntypedFormBuilder) {}
 

projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.component.html

@@ -122,8 +122,78 @@
         optionInfo="attrType"
         optionLabel="label"
         [clearable]="true"
-        [(ngModel)]="syncVal"
-        [ngModelOptions]="{ standalone: true }">
+        [persistentClear]="true"
+        [virtualScroll]="true"
+        [multiple]="true">
+      </cps-tree-autocomplete>
+
+      <cps-tree-autocomplete
+        label="Multiple tree autocomplete with non-closable chips"
+        [options]="options"
+        optionInfo="attrType"
+        hint="This tree autocomplete doesn't have a chevron icon"
+        [showChevron]="false"
+        [clearable]="true"
+        [multiple]="true"
+        [value]="[options[1].children[0], options[2].children[0]]"
+        [closableChips]="false"></cps-tree-autocomplete>
+
+      <cps-tree-autocomplete
+        label="Multiple tree autocomplete with prefix icon"
+        [options]="options"
+        optionInfo="attrType"
+        [clearable]="true"
+        [multiple]="true"
+        [chips]="false"
+        prefixIcon="search"
+        [value]="[options[2].children[0]]">
+      </cps-tree-autocomplete>
+
+      <div class="sync-val-example">
+        <cps-tree-autocomplete
+          [initialExpandDirectories]="true"
+          width="500"
+          label="Single tree autocomplete with two-way binding, enter something"
+          hint="This tree autocomplete has a fixed width of 500px"
+          [options]="options"
+          optionInfo="attrType"
+          optionLabel="label"
+          [clearable]="true"
+          [(ngModel)]="syncVal"
+          [ngModelOptions]="{ standalone: true }">
+        </cps-tree-autocomplete>
+        <span class="sync-val">{{ syncVal?.label }}</span>
+      </div>
+
+      <cps-tree-autocomplete
+        label="Tree autocomplete with function-based optionLabel (computed value)"
+        [options]="options"
+        [optionLabel]="getLabel"
+        optionInfo="attrType"
+        placeholder="Select element"
+        [clearable]="true"
+        hint="optionLabel uses a function: (option) => option.label + ' (' + option.attrType + ')'">
+      </cps-tree-autocomplete>
+      <cps-tree-autocomplete
+        label="Underlined tree autocomplete"
+        [options]="options"
+        optionInfo="attrType"
+        [clearable]="true"
+        [multiple]="true"
+        [chips]="false"
+        appearance="underlined"
+        prefixIcon="search">
+      </cps-tree-autocomplete>
+
+      <cps-tree-autocomplete
+        label="Borderless tree autocomplete"
+        [options]="options"
+        optionInfo="attrType"
+        [clearable]="true"
+        [multiple]="true"
+        [chips]="false"
+        appearance="borderless"
+        prefixIcon="search">
       </cps-tree-autocomplete>
       <span class="sync-val">{{ syncVal?.label }}</span>
     </div>

projects/composition/src/app/pages/tree-autocomplete-page/tree-autocomplete-page.component.ts

@@ -127,6 +127,9 @@ export class TreeAutocompletePageComponent implements OnInit {
 
   componentData = ComponentData;
 
+  getLabel = (option: any): string =>
+    option.label + (option.attrType ? ` (${option.attrType})` : '');
+
   // eslint-disable-next-line no-useless-constructor
   constructor(private _formBuilder: UntypedFormBuilder) {}
 

projects/composition/src/app/pages/tree-select-page/tree-select-page.component.html

@@ -122,8 +122,76 @@
         optionInfo="attrType"
         optionLabel="label"
         [clearable]="true"
-        [(ngModel)]="syncVal"
-        [ngModelOptions]="{ standalone: true }">
+        [persistentClear]="true"
+        [virtualScroll]="true"
+        [multiple]="true">
+      </cps-tree-select>
+
+      <cps-tree-select
+        label="Multiple tree select with non-closable chips"
+        [options]="options"
+        optionInfo="attrType"
+        hint="This tree select doesn't have a chevron icon"
+        [showChevron]="false"
+        [clearable]="true"
+        [multiple]="true"
+        [value]="[options[1].children[0], options[2].children[0]]"
+        [closableChips]="false"></cps-tree-select>
+
+      <cps-tree-select
+        label="Multiple tree select with prefix icon"
+        [options]="options"
+        optionInfo="attrType"
+        [clearable]="true"
+        [multiple]="true"
+        [chips]="false"
+        prefixIcon="plus"
+        [value]="[options[2].children[0]]">
+      </cps-tree-select>
+
+      <div class="sync-val-example">
+        <cps-tree-select
+          [initialExpandDirectories]="true"
+          width="500"
+          label="Single tree select with two-way binding, select something"
+          hint="This tree select has a fixed width of 500px"
+          [options]="options"
+          optionInfo="attrType"
+          optionLabel="label"
+          [clearable]="true"
+          [(ngModel)]="syncVal"
+          [ngModelOptions]="{ standalone: true }">
+        </cps-tree-select>
+        <span class="sync-val">{{ syncVal?.label }}</span>
+      </div>
+
+      <cps-tree-select
+        label="Tree select with function-based optionLabel (computed value)"
+        [options]="options"
+        [optionLabel]="getLabel"
+        optionInfo="attrType"
+        placeholder="Select element"
+        [clearable]="true"
+        hint="optionLabel uses a function: (option) => option.label + ' (' + option.attrType + ')'">
+      </cps-tree-select>
+      <cps-tree-select
+        label="Underlined tree select"
+        appearance="underlined"
+        [options]="options"
+        optionInfo="attrType"
+        [clearable]="true"
+        [multiple]="true"
+        [chips]="false">
+      </cps-tree-select>
+
+      <cps-tree-select
+        label="Borderless tree select"
+        appearance="borderless"
+        [options]="options"
+        optionInfo="attrType"
+        [clearable]="true"
+        [multiple]="true"
+        [chips]="false">
       </cps-tree-select>
       <span class="sync-val">{{ syncVal?.label }}</span>
     </div>

projects/composition/src/app/pages/tree-select-page/tree-select-page.component.ts

@@ -127,6 +127,9 @@ export class TreeSelectPageComponent implements OnInit {
 
   componentData = ComponentData;
 
+  getLabel = (option: any): string =>
+    option.label + (option.attrType ? ` (${option.attrType})` : '');
+
   // eslint-disable-next-line no-useless-constructor
   constructor(private _formBuilder: UntypedFormBuilder) {}
 

projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.html

@@ -58,7 +58,7 @@
                   data-testid="cps-autocomplete-selected-value">
                   <span [style.opacity]="activeSingle ? 0 : 1">{{
                     returnObject
-                      ? value[optionLabel]
+                      ? getProp(value, optionLabel)
                       : (value
                         | labelByValue: options : optionValue : optionLabel)
                   }}</span>
@@ -95,7 +95,7 @@
                       }">
                       {{
                         returnObject
-                          ? val[optionLabel]
+                          ? getProp(val, optionLabel)
                           : (val
                             | labelByValue
                               : options
@@ -137,7 +137,7 @@
                       }"
                       [label]="
                         returnObject
-                          ? val[optionLabel]
+                          ? getProp(val, optionLabel)
                           : (val
                             | labelByValue: options : optionValue : optionLabel)
                       ">
@@ -402,14 +402,14 @@
         data-testid="cps-autocomplete-options"
         class="cps-autocomplete-options-option-label"
         [class.virtual-row]="virtualScroll"
-        >{{ item[optionLabel] }}</span
+        >{{ getProp(item, optionLabel) }}</span
       >
     </span>
 
     <span
       class="cps-autocomplete-options-option-right"
       [class.virtual-row]="virtualScroll"
-      >{{ item[optionInfo] }}</span
+      >{{ getProp(item, optionInfo) }}</span
     >
   </div>
 </ng-template>