feat(combobox): Added experimental combobox component.

.gitignore

@@ -67,7 +67,6 @@ Thumbs.db
 
 .now
 
-
 # bazel
 bazel-*
 .bazelrc.user

angular.json

@@ -1525,6 +1525,46 @@
       },
       "schematics": {}
     },
+    "combobox": {
+      "projectType": "library",
+      "root": "libs/barista-components/experimental/combobox",
+      "sourceRoot": "libs/barista-components/experimental/combobox/src",
+      "prefix": "dt",
+      "architect": {
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "libs/barista-components/experimental/combobox/tsconfig.lib.json",
+              "libs/barista-components/experimental/combobox/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**",
+              "!libs/barista-components/experimental/combobox/**"
+            ]
+          }
+        },
+        "lint-styles": {
+          "builder": "./dist/libs/workspace:stylelint",
+          "options": {
+            "stylelintConfig": ".stylelintrc",
+            "reportFile": "dist/stylelint/report.xml",
+            "exclude": ["**/node_modules/**"],
+            "files": ["libs/barista-components/experimental/combobox/**/*.scss"]
+          }
+        },
+        "test": {
+          "builder": "@nrwl/jest:jest",
+          "options": {
+            "jestConfig": "libs/barista-components/experimental/combobox/jest.config.js",
+            "tsConfig": "libs/barista-components/experimental/combobox/tsconfig.spec.json",
+            "setupFile": "libs/barista-components/experimental/combobox/src/test-setup.ts",
+            "passWithNoTests": true
+          }
+        }
+      },
+      "schematics": {}
+    },
     "confirmation-dialog": {
       "projectType": "library",
       "root": "libs/barista-components/confirmation-dialog",

apps/components-e2e/src/app/app.routing.module.ts

@@ -54,6 +54,13 @@ export const routes: Routes = [
         (module) => module.DtE2ECheckboxModule,
       ),
   },
+  {
+    path: 'combobox',
+    loadChildren: () =>
+      import('../components/combobox/combobox.module').then(
+        (module) => module.DtE2EComboboxModule,
+      ),
+  },
   {
     path: 'consumption',
     loadChildren: () =>

apps/components-e2e/src/components/combobox/combobox.e2e.ts

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright 2020 Dynatrace LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+fixture('Combobox').page('http://localhost:4200/combobox');
+
+// test('should execute click handlers when not disabled', async (testController: TestController) => {
+//   await testController.click(button);
+//
+//   const count = await clickCounter.textContent;
+//   await testController.expect(count).eql('1');
+// });
+//
+// test('should not execute click handlers when disabled', async (testController: TestController) => {
+//   await testController.click(disableButton);
+//
+//   await testController.expect(button.hasAttribute('disabled')).ok();
+//
+//   await testController.click(button);
+//   await testController.expect(await clickCounter.textContent).eql('0');
+// });

apps/components-e2e/src/components/combobox/combobox.html

@@ -0,0 +1,3 @@
+<section>
+  <!-- TODO ChMa: write test -->
+</section>

apps/components-e2e/src/components/combobox/combobox.module.ts

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2020 Dynatrace LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { Route, RouterModule } from '@angular/router';
+import { DtE2ECombobox } from './combobox';
+import { DtComboboxModule } from '@dynatrace/barista-components/experimental/combobox';
+
+const routes: Route[] = [{ path: '', component: DtE2ECombobox }];
+
+@NgModule({
+  declarations: [DtE2ECombobox],
+  imports: [CommonModule, RouterModule.forChild(routes), DtComboboxModule],
+  exports: [],
+  providers: [],
+})
+export class DtE2EComboboxModule {}

apps/components-e2e/src/components/combobox/combobox.po.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2020 Dynatrace LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Selector } from 'testcafe';
+
+export const combobox = Selector('#test-combobox');

apps/components-e2e/src/components/combobox/combobox.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2020 Dynatrace LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'dt-e2e-combobox',
+  templateUrl: 'combobox.html',
+})
+export class DtE2ECombobox {}

apps/dev/src/app.module.ts

@@ -91,9 +91,10 @@ import { TopBarNavigationDemo } from './top-bar-navigation/top-bar-navigation-de
 import { TreeTableDemo } from './tree-table/tree-table-demo.component';
 import { DtIconModule } from '@dynatrace/barista-components/icon';
 import {
-  DT_UI_TEST_CONFIG,
   DT_DEFAULT_UI_TEST_CONFIG,
+  DT_UI_TEST_CONFIG,
 } from '@dynatrace/barista-components/core';
+import { ComboboxDemo } from './combobox/combobox-demo.component';
 
 // tslint:disable-next-line: use-component-selector
 @Component({ template: '' })
@@ -121,6 +122,7 @@ export class NoopRouteComponent {}
     CardDemo,
     ChartDemo,
     CheckboxDemo,
+    ComboboxDemo,
     ConfirmationDialogDemo,
     ContextDialogDemo,
     CopyToClipboardDemo,

apps/dev/src/combobox/combobox-demo.component.html

@@ -0,0 +1,37 @@
+<dt-combobox
+  placeholder="Start typing or open dropdown for top list"
+  aria-label="A simple combobox example"
+  panelClass="my-demo-overlay-class"
+  [value]="_initialValue"
+  [loading]="_loading"
+  [displayWith]="_displayWith"
+  (openedChange)="openedChanged($event)"
+  (valueChange)="valueChanged($event)"
+  (filterChange)="filterChanged($event)"
+>
+  <dt-option *ngFor="let option of _options" [value]="option">
+    {{ option.name }}
+  </dt-option>
+</dt-combobox>
+<dt-select placeholder="Start typing or open dropdown for top list">
+  <dt-option value="1">
+    Value 1
+  </dt-option>
+  <dt-option value="2">
+    Value 2
+  </dt-option>
+</dt-select>
+
+<p>
+  Selected Value:
+  <em>{{ selectedValue || 'No value selected' }}</em>
+</p>
+<dt-combobox
+  placeholder="Choose your coffee"
+  [(ngModel)]="selectedValue"
+  aria-label="Choose your coffee"
+>
+  <dt-option *ngFor="let coffee of coffees" [value]="coffee.value">
+    {{ coffee.viewValue }}
+  </dt-option>
+</dt-combobox>

apps/dev/src/combobox/combobox-demo.component.ts

@@ -0,0 +1,88 @@
+/**
+ * @license
+ * Copyright 2020 Dynatrace LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ViewChild,
+  AfterViewInit,
+} from '@angular/core';
+import { take } from 'rxjs/operators';
+import { timer } from 'rxjs';
+import { DtCombobox } from '@dynatrace/barista-components/experimental/combobox';
+
+const allOptions: { name: string; value: string }[] = [
+  { name: 'Value 1', value: '[value: Value 1]' },
+  { name: 'Value 2', value: '[value: Value 2]' },
+  { name: 'Value 3', value: '[value: Value 3]' },
+  { name: 'Value 4', value: '[value: Value 4]' },
+];
+
+@Component({
+  selector: 'combobox-dev-app-demo',
+  templateUrl: 'combobox-demo.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ComboboxDemo implements AfterViewInit {
+  @ViewChild(DtCombobox) combobox: DtCombobox<any>;
+
+  _initialValue = allOptions[0];
+  _options = [...allOptions];
+  _loading = false;
+  _displayWith = (option: { name: string; value: string }) => option.name;
+
+  constructor(private _changeDetectorRef: ChangeDetectorRef) {}
+
+  ngAfterViewInit(): void {
+    this.combobox.selectionChange.subscribe((val) => {
+      console.log(val);
+    });
+  }
+
+  openedChanged(event: boolean): void {
+    console.log(`openedChanged: '${event}'`);
+  }
+
+  valueChanged(event: string): void {
+    console.log(`valueChanged: '${event}'`);
+  }
+
+  filterChanged(event: string): void {
+    console.log(`filterChanged: '${event}'`);
+
+    this._loading = true;
+    this._changeDetectorRef.markForCheck();
+
+    timer(1500)
+      .pipe(take(1))
+      .subscribe(() => {
+        this._options = allOptions.filter(
+          (option) =>
+            option.value.toLowerCase().indexOf(event.toLowerCase()) >= 0,
+        );
+        this._loading = false;
+        this._changeDetectorRef.markForCheck();
+      });
+  }
+
+  selectedValue: string;
+  coffees = [
+    { value: 'ThePerfectPour', viewValue: 'ThePerfectPour' },
+    { value: 'Affogato', viewValue: 'Affogato' },
+    { value: 'Americano', viewValue: 'Americano' },
+  ];
+}

apps/dev/src/devapp-routing.module.ts

@@ -77,6 +77,7 @@ import { ToastDemo } from './toast/toast-demo.component';
 import { ToggleButtonGroupDemo } from './toggle-button-group/toggle-button-group-demo.component';
 import { TopBarNavigationDemo } from './top-bar-navigation/top-bar-navigation-demo.component';
 import { TreeTableDemo } from './tree-table/tree-table-demo.component';
+import { ComboboxDemo } from './combobox/combobox-demo.component';
 
 const routes: Routes = [
   { path: 'alert', component: AlertDemo },
@@ -88,6 +89,7 @@ const routes: Routes = [
   { path: 'card', component: CardDemo },
   { path: 'chart', component: ChartDemo },
   { path: 'checkbox', component: CheckboxDemo },
+  { path: 'combobox', component: ComboboxDemo },
   { path: 'consumption', component: ConsumptionDemo },
   { path: 'context-dialog', component: ContextDialogDemo },
   { path: 'confirmation-dialog', component: ConfirmationDialogDemo },

apps/dev/src/devapp.component.ts

@@ -49,6 +49,7 @@ export class DevApp implements AfterContentInit, OnDestroy {
     { name: 'Card', route: '/card' },
     { name: 'Chart', route: '/chart' },
     { name: 'Checkbox', route: '/checkbox' },
+    { name: 'Combobox', route: '/combobox' },
     { name: 'Confirmation-dialog', route: '/confirmation-dialog' },
     { name: 'Consumption', route: '/consumption' },
     {

apps/dev/src/dt-components.module.ts

@@ -74,6 +74,7 @@ import { DtToastModule } from '@dynatrace/barista-components/toast';
 import { DtToggleButtonGroupModule } from '@dynatrace/barista-components/toggle-button-group';
 import { DtTopBarNavigationModule } from '@dynatrace/barista-components/top-bar-navigation';
 import { DtTreeTableModule } from '@dynatrace/barista-components/tree-table';
+import { DtComboboxModule } from '@dynatrace/barista-components/experimental/combobox';
 
 /**
  * NgModule that includes all Dynatrace angular components modules that are required to serve the examples.
@@ -89,6 +90,7 @@ import { DtTreeTableModule } from '@dynatrace/barista-components/tree-table';
     DtCardModule,
     DtChartModule,
     DtCheckboxModule,
+    DtComboboxModule,
     DtConfirmationDialogModule,
     DtContextDialogModule,
     DtCopyToClipboardModule,

apps/universal/src/app/barista.module.ts

@@ -58,6 +58,7 @@ import { DtTimelineChartModule } from '@dynatrace/barista-components/timeline-ch
 import { DtToggleButtonGroupModule } from '@dynatrace/barista-components/toggle-button-group';
 import { DtTopBarNavigationModule } from '@dynatrace/barista-components/top-bar-navigation';
 import { DtTreeTableModule } from '@dynatrace/barista-components/tree-table';
+import { DtComboboxModule } from '@dynatrace/barista-components/experimental/combobox';
 
 @NgModule({
   imports: [
@@ -71,6 +72,7 @@ import { DtTreeTableModule } from '@dynatrace/barista-components/tree-table';
     DtButtonModule,
     DtCardModule,
     DtCheckboxModule,
+    DtComboboxModule,
     DtConsumptionModule,
     DtContainerBreakpointObserverModule,
     DtContainerBreakpointObserverModule,