fix: update combobox with latest fundamental-styles (#2188)

* update combobox to 0.6.0

* add two column example source

* two column combobox

* groupBy progress - selecting item in 2nd group does not work

* fix selecting item in other group

* update list messages

* template cleanup

* demonstrate groupFunction

* fix tests

* fix tests again and rename menu keydown to list keydown

* fix build

* force build

* address pr comments

* pr comments

* accidentally committed hunk

* separate lifecycle logic in to own methods

* more pr comments. open/close behavior will be addressed in a new branch

* more combobox improvements

apps/docs/src/app/core/component-docs/combobox/combobox-docs.component.html

@@ -14,7 +14,9 @@
 </fd-docs-section-title>
 <description>
     The input supports custom filters through the <code>filterFn</code> input function. Simply pass a function which
-    accepts an array and a search term, and then returns the desired filtered array.
+    accepts an array and a search term, handle filtering logic within this function, and then return the desired filtered array.
+    In this example, we are only populating the list with results where the search term matches the beginning of the result,
+    as opposed to the usual behavior where the list will be populated if the search term appears anywhere in the string.
 </description>
 <component-example>
     <fd-combobox-dynamic-example></fd-combobox-dynamic-example>
@@ -27,8 +29,8 @@
     Custom Search Function
 </fd-docs-section-title>
 <description>
-    Custom search function can be provided by <code>[searchFunction]</code> to combobox. It will be called on mouse
-    click on combobox's primary button, or on enter key press, while focused on combobox input.
+    A custom search function can be provided with the <code>[searchFn]</code> input. This function will be called when the primary
+    combobox button is clicked, or when the user presses the 'enter' key while focused in the combobox input.
 </description>
 <component-example>
     <fd-combobox-search-function-example></fd-combobox-search-function-example>
@@ -41,8 +43,8 @@
     Display Object Property
 </fd-docs-section-title>
 <description>
-    Passing object arrays to the Combobox is supported through the <code>displayFn</code> input function. To access the
-    <code>this</code> keyword inside the passed function, use an arrow function.
+    The <code>displayFn</code> input can be used to modify how the results are presented within the combobox. In this
+    example we are making the results all upper-cased.
 </description>
 <component-example>
     <fd-combobox-displaywith-example></fd-combobox-displaywith-example>
@@ -59,8 +61,8 @@
 </description>
 <description>
     By passing <code>[closeOnOutsideClick]="false"</code>, <code>[openOnKeyboardEvent]="false"</code> and
-    <code>[triggers]="[]"</code>, it is possible to fully control the <code>open</code> state of combobox. To change it
-    pass variable to <code>[open]</code>.
+    <code>[triggers]="[]"</code>, it is possible to fully control how the user will open and close the results list. The
+    open state can be controlled directly with the <code>[open]</code> input.
 </description>
 <component-example>
     <fd-combobox-open-control-example></fd-combobox-open-control-example>
@@ -73,7 +75,7 @@
     Observable Async Example
 </fd-docs-section-title>
 <description>
-    The <code>dropdownValues</code> input can accept an Observable with the async pipe, which could be useful for
+    The <code>dropdownValues</code> input can accept an Observable with an async pipe, which could be useful for
     autocomplete.
 </description>
 <description>
@@ -90,8 +92,9 @@
     Custom Item Template
 </fd-docs-section-title>
 <description>
-    The way the items are rendered in the popover list can be customized through providing an <code>itemTemplate</code>
-    to the component.
+    The way the items are rendered in the popover list can be customized by providing an <code>itemTemplate</code>
+    to the component. The <code>itemTemplate</code> should align with the contents of an <a [routerLink]="'/core/list'">fd-list-item</a>
+    directive.
 </description>
 <component-example>
     <fd-combobox-template-example></fd-combobox-template-example>
@@ -100,26 +103,39 @@
 
 <separator></separator>
 
-<fd-docs-section-title [id]="'combobox-inReactiveForm'" [componentName]="'combobox'">
-    Combobox In A Reactive Form
+<fd-docs-section-title [id]="'combobox-columns'" [componentName]="'combobox'">
+    Combobox with Two Columns
 </fd-docs-section-title>
 <description>
-    This examples shows how to put <code>combobox</code> in a Reactive Form. Also how to sets it's state to
-    <code>disabled</code>
+    The <code>[itemTemplate]</code> input can be used to create a combobox with two columns of information. Note that a
+    <code>displayFn</code> is required for this example so the combobox knows how to display the selected item.
 </description>
 <component-example>
-    <fd-combobox-disabled-example></fd-combobox-disabled-example>
+    <fd-combobox-columns-example></fd-combobox-columns-example>
 </component-example>
-<code-example [exampleFiles]="comboboxDisabledExample"></code-example>
+<code-example [exampleFiles]="comboboxColumnsExample"></code-example>
+
+<fd-docs-section-title [id]="'combobox-group'" [componentName]="'combobox'">
+    Combobox with Groups
+</fd-docs-section-title>
+<description>
+    Grouping data within a set of values can be achieved by passing a function to the <code>[groupFn]</code> input. This
+    function should accept an object of key/value pairs as the parameter. Each key will be a group name and the corresponding
+    value for that key will be an array of any type. A <code>[displayFn]</code> can be used to specify what to display
+    from that array.
+</description>
+<component-example>
+    <fd-combobox-group-example></fd-combobox-group-example>
+</component-example>
+<code-example [exampleFiles]="comboboxGroupExample"></code-example>
 
 <separator></separator>
 
 <fd-docs-section-title [id]="'combobox-customHeight'" [componentName]="'combobox'">
     Custom Height Example
 </fd-docs-section-title>
 <description>
-    There is also the possibility to define a fixed height for the dropdown list by specifying the desired height using
-    the <code>[maxHeight]</code> attribute.
+    Use the <code>[maxHeight]</code> input to set a maximum height for the results list.
 </description>
 <component-example>
     <fd-combobox-height-example></fd-combobox-height-example>
@@ -135,12 +151,23 @@
     The Combobox component may also be used within Angular Reactive Forms.
 </description>
 <description>
-    Also in combobox can be used <code>[communicateByObject]</code>. Enabling this option changes the way the component
-    communicates with the outside. When combobox communicates by objects, writing in text input doesn't change binded
-    value, until it matches one of displayed dropdown options. Also on this mode, combobox on communication uses model
-    with same type as it's passed to <code>[dropdownValues]</code>
+    Use the <code>[communicateByObject]</code> boolean input if you are using custom objects for the <code>dropdownValues</code>
+    or if you want the combobox to only trigger onChange when a value is selected, rather than every time the input changes.
 </description>
 <component-example>
     <fd-combobox-forms-example></fd-combobox-forms-example>
 </component-example>
 <code-example [exampleFiles]="comboboxFormExample"></code-example>
+
+<separator></separator>
+
+<fd-docs-section-title [id]="'combobox-disabled'" [componentName]="'combobox'">
+    Disabled Combobox
+</fd-docs-section-title>
+<description>
+    This example shows how to use a a disabled combobox in a reactive form.
+</description>
+<component-example>
+    <fd-combobox-disabled-example></fd-combobox-disabled-example>
+</component-example>
+<code-example [exampleFiles]="comboboxDisabledExample"></code-example>

apps/docs/src/app/core/component-docs/combobox/combobox-docs.component.ts

@@ -12,6 +12,10 @@ import * as comboboxTemplateH from '!raw-loader!./examples/combobox-template-exa
 import * as comboboxTemplateT from '!raw-loader!./examples/combobox-template-example.component.ts';
 import * as comboboxDisabledTemplateH from '!raw-loader!./examples/combobox-disabled-example.component.html';
 import * as comboboxDisabledTemplateT from '!raw-loader!./examples/combobox-disabled-example.component.ts';
+import * as comboboxColumnsTemplateH from '!raw-loader!./examples/combobox-columns-example.component.html';
+import * as comboboxColumnsTemplateT from '!raw-loader!./examples/combobox-columns-example.component.ts';
+import * as comboboxGroupTemplateH from '!raw-loader!./examples/combobox-group-example.component.html';
+import * as comboboxGroupTemplateT from '!raw-loader!./examples/combobox-group-example.component.ts';
 import * as comboboxDisabledTemplateScss from '!raw-loader!./examples/combobox-disabled-example.component.scss';
 import * as comboboxFormT from '!raw-loader!./examples/combobox-forms-example.component.ts';
 import * as comboboxFormH from '!raw-loader!./examples/combobox-forms-example.component.html';
@@ -127,6 +131,34 @@ export class ComboboxDocsComponent {
         }
     ];
 
+    comboboxColumnsExample: ExampleFile[] = [
+        {
+            language: 'html',
+            code: comboboxColumnsTemplateH,
+            fileName: 'combobox-columns-example'
+        },
+        {
+            language: 'typescript',
+            component: 'ComboboxColumnsExampleComponent',
+            code: comboboxColumnsTemplateT,
+            fileName: 'combobox-columns-example'
+        }
+    ];
+
+    comboboxGroupExample: ExampleFile[] = [
+        {
+            language: 'html',
+            code: comboboxGroupTemplateH,
+            fileName: 'combobox-group-example'
+        },
+        {
+            language: 'typescript',
+            component: 'ComboboxGroupExampleComponent',
+            code: comboboxGroupTemplateT,
+            fileName: 'combobox-group-example'
+        }
+    ];
+
     comboboxTemplateExample: ExampleFile[] = [
         {
             language: 'html',

apps/docs/src/app/core/component-docs/combobox/combobox-docs.module.ts

@@ -15,7 +15,9 @@ import {ComboboxFormsExampleComponent} from './examples/combobox-forms-example.c
 import {ComboboxDisabledExampleComponent} from './examples/combobox-disabled-example.component';
 import {ComboboxHeightExampleComponent} from './examples/combobox-height-example.component';
 import {ComboboxOpenControlExampleComponent} from './examples/combobox-open-control-example.component';
-import { ComboboxModule, FormModule } from '@fundamental-ngx/core';
+import { ComboboxColumnsExampleComponent } from './examples/combobox-columns-example.component';
+import { ComboboxGroupExampleComponent } from './examples/combobox-group-example.component';
+import { ComboboxModule, FormModule, ListModule } from '@fundamental-ngx/core';
 
 const routes: Routes = [
     {
@@ -32,7 +34,8 @@ const routes: Routes = [
     imports: [
         RouterModule.forChild(routes),
         SharedDocumentationModule,
-        ComboboxModule
+        ComboboxModule,
+        ListModule
     ],
     exports: [RouterModule],
     declarations: [
@@ -47,7 +50,9 @@ const routes: Routes = [
         ComboboxDisabledExampleComponent,
         ComboboxDisplaywithExampleComponent,
         ComboboxOpenControlExampleComponent,
-        ComboboxSearchFunctionExampleComponent
+        ComboboxSearchFunctionExampleComponent,
+        ComboboxColumnsExampleComponent,
+        ComboboxGroupExampleComponent
     ]
 })
 export class ComboboxDocsModule {

apps/docs/src/app/core/component-docs/combobox/examples/combobox-columns-example.component.html

@@ -0,0 +1,12 @@
+<fd-combobox [(ngModel)]="searchTerm"
+             [dropdownValues]="dropdownValues"
+             [itemTemplate]="columnTemplate"
+             [placeholder]="'Type some text...'"
+             [maxHeight]="'250px'"
+             [displayFn]="displayFunc">
+</fd-combobox>
+
+<ng-template #columnTemplate let-item>
+    <span fd-list-title>{{item.name}}</span>
+    <span fd-list-secondary>{{item.price}}</span>
+</ng-template>

apps/docs/src/app/core/component-docs/combobox/examples/combobox-columns-example.component.ts

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'fd-combobox-columns-example',
+    templateUrl: './combobox-columns-example.component.html'
+})
+export class ComboboxColumnsExampleComponent {
+
+    searchTerm = '';
+
+    dropdownValues = [
+        {name: 'Apple', price: '1.00 USD'},
+        {name: 'Banana', price: '0.50 USD'},
+        {name: 'Kiwi', price: '1.00 USD'},
+        {name: 'Pineapple', price: '3.00 USD'},
+        {name: 'Strawberries', price: '4.00 USD'}
+    ];
+
+    displayFunc(obj: {name: string, price: string}): string {
+        if (obj) {
+            return obj.name + ' - ' + obj.price;
+        }
+    }
+
+}

apps/docs/src/app/core/component-docs/combobox/examples/combobox-disabled-example.component.html

@@ -1,15 +1,5 @@
 <form [formGroup]="customForm">
     <fieldset fd-fieldset class="flex-form">
-        <div fd-form-item>
-            <label fd-form-label for="form-combo-1">Select Fruit:</label>
-            <fd-combobox
-                formControlName="comboControl"
-                [dropdownValues]="dropdownValues"
-                fd-form-control
-                id="form-combo-1"></fd-combobox>
-            Disabled: {{ customForm.controls.comboControl.disabled }}<br/>
-            Selected Value: {{ customForm.controls.comboControl.value }}
-        </div>
         <div fd-form-item>
             <label fd-form-label for="form-combo-2">Select Fruit:</label>
             <fd-combobox

apps/docs/src/app/core/component-docs/combobox/examples/combobox-disabled-example.component.ts

@@ -17,7 +17,6 @@ export class ComboboxDisabledExampleComponent {
     ];
 
     customForm = new FormGroup({
-        comboControl: new FormControl('Banana', Validators.required),
         disabledComboControl: new FormControl({ value: 'Kiwi', disabled: true }, Validators.required)
     });
 

apps/docs/src/app/core/component-docs/combobox/examples/combobox-forms-example.component.html

@@ -7,6 +7,7 @@
                      [displayFn]="myDisplayFunction"
                      [communicateByObject]="true"
                      formControlName="itemOnDropdownMode">
+            <li fd-list-message [type]="'information'">More information</li>
         </fd-combobox>
         <fd-form-message [type]="'information'">More information</fd-form-message>
     </div>
@@ -25,6 +26,7 @@
                      [placeholder]="'Type some text...'"
                      [displayFn]="myDisplayFunction"
                      formControlName="item">
+            <li fd-list-message [type]="'information'">More information</li>
         </fd-combobox>
         <fd-form-message [type]="'information'">More information</fd-form-message>
     </div>

apps/docs/src/app/core/component-docs/combobox/examples/combobox-group-example.component.html

@@ -0,0 +1,7 @@
+<fd-combobox [(ngModel)]="searchTerm"
+             [dropdownValues]="dropdownValues"
+             [groupFn]="groupFunc"
+             [displayFn]="displayFunc"
+             [placeholder]="'Type some text...'"
+             [maxHeight]="'250px'">
+</fd-combobox>

apps/docs/src/app/core/component-docs/combobox/examples/combobox-group-example.component.ts

@@ -0,0 +1,35 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'fd-combobox-group-example',
+    templateUrl: './combobox-group-example.component.html'
+})
+export class ComboboxGroupExampleComponent {
+
+    searchTerm = '';
+
+    dropdownValues = [
+        {name: 'Apple', type: 'Fruits'},
+        {name: 'Banana', type: 'Fruits'},
+        {name: 'Pineapple', type: 'Fruits'},
+        {name: 'Strawberry', type: 'Fruits'},
+        {name: 'Broccoli', type: 'Vegetables'},
+        {name: 'Carrot', type: 'Vegetables'},
+        {name: 'Jalapeño', type: 'Vegetables'},
+        {name: 'Spinach', type: 'Vegetables'}
+    ];
+
+    displayFunc(obj: {name: string, price: string}): string | void {
+        if (obj) {
+            return obj.name;
+        }
+    }
+
+    groupFunc(items: {name: string, type: string}[]): {} {
+        return {
+            Fruits: items.filter(item => item.type === 'Fruits'),
+            Vegetables: items.filter(item => item.type === 'Vegetables')
+        }
+    }
+
+}

apps/docs/src/app/core/component-docs/combobox/examples/combobox-search-function-example.component.html

@@ -1,6 +1,6 @@
 <fd-combobox [(ngModel)]="searchTerm"
              [dropdownValues]="dropdownValues"
-             [searchFunction]="customSearchFunction"
+             [searchFn]="customSearchFunction"
              [placeholder]="'Type to filter the list...'">
 </fd-combobox>
 <br/>