Combobox base

src/cdk-experimental/combobox/BUILD.bazel

@@ -1,4 +1,4 @@
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
 
 package(default_visibility = ["//visibility:public"])
 
@@ -9,4 +9,28 @@ ng_module(
         exclude = ["**/*.spec.ts"],
     ),
     module_name = "@angular/cdk-experimental/combobox",
+    deps = [
+        "//src/cdk/a11y",
+        "//src/cdk/bidi",
+        "//src/cdk/collections",
+        "//src/cdk/overlay",
+    ],
+)
+
+ng_test_library(
+    name = "unit_test_sources",
+    srcs = glob(
+        ["**/*.spec.ts"],
+        exclude = ["**/*.e2e.spec.ts"],
+    ),
+    deps = [
+        ":combobox",
+        "//src/cdk/testing/private",
+        "@npm//@angular/platform-browser",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    deps = [":unit_test_sources"],
 )

src/cdk-experimental/combobox/combobox-module.ts

@@ -7,11 +7,13 @@
  */
 
 import {NgModule} from '@angular/core';
+import {OverlayModule} from '@angular/cdk/overlay';
 import {CdkCombobox} from './combobox';
 import {CdkComboboxPanel} from './combobox-panel';
 
 const EXPORTED_DECLARATIONS = [CdkCombobox, CdkComboboxPanel];
 @NgModule({
+  imports: [OverlayModule],
   exports: EXPORTED_DECLARATIONS,
   declarations: EXPORTED_DECLARATIONS,
 })

src/cdk-experimental/combobox/combobox-panel.ts

@@ -6,12 +6,40 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive} from '@angular/core';
+export type AriaHasPopupValue = 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+
+import {Directive, TemplateRef} from '@angular/core';
+import {Subject} from 'rxjs';
 
 @Directive({
   selector: 'ng-template[cdkComboboxPanel]',
   exportAs: 'cdkComboboxPanel',
 })
 export class CdkComboboxPanel<T = unknown> {
 
+  valueUpdated: Subject<T> = new Subject<T>();
+  contentIdUpdated: Subject<string> = new Subject<string>();
+  contentTypeUpdated: Subject<AriaHasPopupValue> = new Subject<AriaHasPopupValue>();
+
+  contentId: string = '';
+  contentType: AriaHasPopupValue;
+
+  constructor(readonly _templateRef: TemplateRef<unknown>) {}
+
+  /** Tells the parent combobox to closet he panel and sends back the content value. */
+  closePanel(data?: T) {
+    this.valueUpdated.next(data);
+  }
+
+  /** Registers the content's id and the content type with the panel. */
+  _registerContent(contentId: string, contentType: AriaHasPopupValue) {
+    this.contentId = contentId;
+    if (contentType !== 'listbox' && contentType !== 'dialog') {
+      throw Error('CdkComboboxPanel currently only supports listbox or dialog content.');
+    }
+    this.contentType = contentType;
+
+    this.contentIdUpdated.next(this.contentId);
+    this.contentTypeUpdated.next(this.contentType);
+  }
 }

src/cdk-experimental/combobox/combobox.spec.ts

@@ -0,0 +1,89 @@
+import {Component, DebugElement} from '@angular/core';
+import {ComponentFixture, TestBed, async} from '@angular/core/testing';
+import {By} from '@angular/platform-browser';
+import {CdkComboboxModule} from './combobox-module';
+import {CdkCombobox} from './combobox';
+import {dispatchMouseEvent} from '@angular/cdk/testing/private';
+
+describe('Combobox', () => {
+  describe('with a basic toggle trigger', () => {
+    let fixture: ComponentFixture<ComboboxToggle>;
+
+    let combobox: DebugElement;
+    let comboboxInstance: CdkCombobox<unknown>;
+    let comboboxElement: HTMLElement;
+
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        imports: [CdkComboboxModule],
+        declarations: [ComboboxToggle],
+      }).compileComponents();
+    }));
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(ComboboxToggle);
+      fixture.detectChanges();
+
+      combobox = fixture.debugElement.query(By.directive(CdkCombobox));
+      comboboxInstance = combobox.injector.get<CdkCombobox<unknown>>(CdkCombobox);
+      comboboxElement = combobox.nativeElement;
+    });
+
+    it('should have the combobox role', () => {
+      expect(comboboxElement.getAttribute('role')).toBe('combobox');
+    });
+
+    it('should update the aria disabled attribute', () => {
+      comboboxInstance.disabled = true;
+      fixture.detectChanges();
+
+      expect(comboboxElement.getAttribute('aria-disabled')).toBe('true');
+
+      comboboxInstance.disabled = false;
+      fixture.detectChanges();
+
+      expect(comboboxElement.getAttribute('aria-disabled')).toBe('false');
+    });
+
+    it('should have a panel that is closed by default', () => {
+      expect(comboboxInstance.hasPanel()).toBeTrue();
+      expect(comboboxInstance.isOpen()).toBeFalse();
+    });
+
+    it('should have an open action of click by default', () => {
+      expect(comboboxInstance.isOpen()).toBeFalse();
+
+      dispatchMouseEvent(comboboxElement, 'click');
+      fixture.detectChanges();
+
+      expect(comboboxInstance.isOpen()).toBeTrue();
+    });
+
+    it('should not open panel when disabled', () => {
+      expect(comboboxInstance.isOpen()).toBeFalse();
+      comboboxInstance.disabled = true;
+      fixture.detectChanges();
+
+      dispatchMouseEvent(comboboxElement, 'click');
+      fixture.detectChanges();
+
+      expect(comboboxInstance.isOpen()).toBeFalse();
+    });
+  });
+
+});
+
+@Component({
+  template: `
+  <button cdkCombobox #toggleCombobox class="example-combobox"
+          [cdkComboboxTriggerFor]="panel"
+          [openAction]="'focus'">
+    No Value
+  </button>
+
+  <ng-template cdkComboboxPanel #panel="cdkComboboxPanel">
+    Panel Content
+  </ng-template>`,
+})
+class ComboboxToggle {
+}

src/cdk-experimental/combobox/combobox.ts

@@ -6,15 +6,189 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive} from '@angular/core';
+export type OpenAction = 'focus' | 'click' | 'downKey' | 'toggle';
+export type OpenActionInput = OpenAction | OpenAction[] | string | null | undefined;
+
+import {
+  AfterContentInit,
+  Directive,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  Optional,
+  Output, ViewContainerRef
+} from '@angular/core';
+import {CdkComboboxPanel, AriaHasPopupValue} from './combobox-panel';
+import {TemplatePortal} from '@angular/cdk/portal';
+import {
+  ConnectedPosition,
+  FlexibleConnectedPositionStrategy,
+  Overlay,
+  OverlayConfig,
+  OverlayRef
+} from '@angular/cdk/overlay';
+import {Directionality} from '@angular/cdk/bidi';
+import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
+
 
 @Directive({
   selector: '[cdkCombobox]',
   exportAs: 'cdkCombobox',
   host: {
-    'role': 'combobox'
+    'role': 'combobox',
+    '(click)': 'toggle()',
+    '[attr.aria-disabled]': 'disabled',
+    '[attr.aria-controls]': 'contentId',
+    '[attr.aria-haspopup]': 'contentType'
   }
 })
-export class CdkCombobox<T = unknown> {
+export class CdkCombobox<T = unknown> implements OnDestroy, AfterContentInit {
+  @Input('cdkComboboxTriggerFor')
+  get panel(): CdkComboboxPanel<T> | undefined { return this._panel; }
+  set panel(panel: CdkComboboxPanel<T> | undefined) { this._panel = panel; }
+  private _panel: CdkComboboxPanel<T> | undefined;
+
+  @Input()
+  value: T;
+
+  @Input()
+  get disabled(): boolean { return this._disabled; }
+  set disabled(value: boolean) { this._disabled = coerceBooleanProperty(value); }
+  private _disabled: boolean = false;
+
+  @Input()
+  get openAction(): OpenAction[] {
+    return this._openActions;
+  }
+  set openAction(action: OpenAction[]) {
+    this._openActions = this._coerceOpenActionProperty(action);
+  }
+  private _openActions: OpenAction[] = ['click'];
+
+  @Output('comboboxPanelOpened') readonly opened: EventEmitter<void> = new EventEmitter<void>();
+  @Output('comboboxPanelClosed') readonly closed: EventEmitter<void> = new EventEmitter<void>();
+  @Output('panelValueChanged') readonly panelValueChanged: EventEmitter<T> = new EventEmitter<T>();
+
+  private _overlayRef: OverlayRef;
+  private _panelContent: TemplatePortal;
+  contentId: string = '';
+  contentType: AriaHasPopupValue;
+
+  constructor(
+    private readonly _elementRef: ElementRef<HTMLElement>,
+    private readonly _overlay: Overlay,
+    protected readonly _viewContainerRef: ViewContainerRef,
+    @Optional() private readonly _directionality?: Directionality
+  ) {}
+
+  ngAfterContentInit() {
+    this._panel?.valueUpdated.subscribe(data => {
+      this._setComboboxValue(data);
+      this.close();
+    });
+
+    this._panel?.contentIdUpdated.subscribe(id => {
+      this.contentId = id;
+    });
+
+    this._panel?.contentTypeUpdated.subscribe(type => {
+      this.contentType = type;
+    });
+  }
+
+  ngOnDestroy() {
+    this.opened.complete();
+    this.closed.complete();
+    this.panelValueChanged.complete();
+  }
+
+  /** Toggles the open state of the panel. */
+  toggle() {
+    if (this.hasPanel()) {
+      this.isOpen() ? this.close() : this.open();
+    }
+  }
+
+  /** If the combobox is closed and not disabled, opens the panel. */
+  open() {
+    if (!this.isOpen() && !this.disabled) {
+      this.opened.next();
+      this._overlayRef = this._overlayRef || this._overlay.create(this._getOverlayConfig());
+      this._overlayRef.attach(this._getPanelContent());
+    }
+  }
+
+  /** If the combobox is open and not disabled, closes the panel. */
+  close() {
+    if (this.isOpen() && !this.disabled) {
+      this.closed.next();
+      this._overlayRef.detach();
+    }
+  }
+
+  /** Returns true if panel is currently opened. */
+  isOpen(): boolean {
+    return this._overlayRef ? this._overlayRef.hasAttached() : false;
+  }
+
+  /** Returns true if combobox has a child panel. */
+  hasPanel(): boolean {
+    return !!this.panel;
+  }
+
+  private _setComboboxValue(value: T) {
+    const valueChanged = (this.value !== value);
+    this.value = value;
+
+    if (valueChanged) {
+      this.panelValueChanged.emit(value);
+    }
+  }
+
+  private _getOverlayConfig() {
+    return new OverlayConfig({
+      positionStrategy: this._getOverlayPositionStrategy(),
+      scrollStrategy: this._overlay.scrollStrategies.block(),
+      direction: this._directionality,
+    });
+  }
+
+  private _getOverlayPositionStrategy(): FlexibleConnectedPositionStrategy {
+    return this._overlay
+        .position()
+        .flexibleConnectedTo(this._elementRef)
+        .withPositions(this._getOverlayPositions());
+  }
+
+  private _getOverlayPositions(): ConnectedPosition[] {
+    return [
+      {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top'},
+      {originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom'},
+      {originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top'},
+      {originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom'},
+    ];
+  }
+
+  private _getPanelContent() {
+    const hasPanelChanged = this._panel?._templateRef !== this._panelContent?.templateRef;
+    if (this._panel && (!this._panel || hasPanelChanged)) {
+      this._panelContent = new TemplatePortal(this._panel._templateRef, this._viewContainerRef);
+    }
+
+    return this._panelContent;
+  }
+
+  private _coerceOpenActionProperty(input: string | OpenAction[]): OpenAction[] {
+    let actions: OpenAction[] = [];
+    if (typeof input === 'string') {
+      actions.push(input as OpenAction);
+    } else {
+      actions = input;
+    }
+    return actions;
+  }
 
+  static ngAcceptInputType_disabled: BooleanInput;
+  static ngAcceptInputType_openActions: OpenActionInput;
 }

src/cdk-experimental/combobox/public-api.ts

@@ -6,6 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+export * from './combobox-module';
 export * from './combobox';
 export * from './combobox-panel';
-export * from './combobox-module';