Merge branch 'master' into cdk-selection-merge

Author: yifange

.circleci/config.yml

@@ -440,7 +440,7 @@ jobs:
       # The components examples package is not a release package, but we publish it
       # as part of this job to the docs-content repository. It's not contained in the
       # attached release output, so we need to build it here.
-      - run: bazel build src/components-examples:npm_package --config=snapshot-build
+      - run: yarn build-docs-content
 
       # Ensures that we do not push the snapshot artifacts upstream until all previous
       # snapshot build jobs have completed. This helps avoiding conflicts when multiple

CODE_REVIEWS.md

@@ -12,8 +12,8 @@
   * Links to any relevant issues.
   * Screenshots (for visual changes or new additions)
 2. Reviews provide comments and the author responds / makes changes. Repeat until LGTM.
-3. One or more of the reviewers applies the "LGTM" label.
-4. Once the LGTM label is applied, either the author or the reviewer can add the "merge-ready"
+3. One or more of the reviewers approve the pull request.
+4. Once the PR is approved, either the author or the reviewer can add the "merge-ready"
    label to indicate that the PR is ready to be merged.
 5. The party responsible for merging PRs will do so.
 

package.json

@@ -15,6 +15,7 @@
   "scripts": {
     "postinstall": "node tools/postinstall/apply-patches.js && ngcc --properties module main --create-ivy-entry-points && node tools/postinstall/update-ngcc-main-fields.js",
     "build": "node ./scripts/build-packages-dist.js",
+    "build-docs-content": "node ./scripts/build-docs-content.js",
     "dev-app": "ibazel run //src/dev-app:devserver",
     "test": "node ./scripts/run-component-tests.js",
     "test-local": "yarn -s test --local",

scripts/build-docs-content.js

@@ -0,0 +1,52 @@
+#!/usr/bin/env node
+
+/**
+ * Script that builds the docs content NPM package and moves it into an conveniently
+ * accessible distribution directory (the project `dist/` directory).
+ */
+
+const {join} = require('path');
+const {chmod, cd, cp, mkdir, rm, set, exec} = require('shelljs');
+
+/** Path to the project directory. */
+const projectDir = join(__dirname, '../');
+
+/** Path to the distribution directory. */
+const distDir = join(projectDir, 'dist/');
+
+/**
+ * Path to the directory where the docs-content package is copied to. Note: When
+ * changing the path, also change the path in the docs-content deploy script.
+ */
+const outputDir = join(distDir, 'docs-content-pkg');
+
+/** Command that runs Bazel. */
+const bazelCmd = process.env.BAZEL_COMMAND || `yarn -s bazel`;
+
+// ShellJS should exit if a command fails.
+set('-e');
+
+// Go to project directory.
+cd(projectDir);
+
+/** Path to the bazel bin output directory. */
+const bazelBinPath = exec(`${bazelCmd} info bazel-bin`).stdout.trim();
+
+/** Path where the NPM package is built into by Bazel. */
+const bazelBinOutDir = join(bazelBinPath, 'src/components-examples/npm_package');
+
+// Build the docs-content package with the snapshot-build mode. That will help
+// determining which commit is associated with the built docs-content.
+exec(`${bazelCmd} build src/components-examples:npm_package --config=snapshot-build`);
+
+// Clean the output directory to ensure that the docs-content package
+// will not contain outdated files from previous builds.
+rm('-rf', outputDir);
+mkdir('-p', distDir);
+
+// Copy the package output into the dist path. Also update the permissions
+// as Bazel by default marks files in the bazel-out as readonly.
+cp('-R', bazelBinOutDir, outputDir);
+chmod('-R', 'u+w', outputDir);
+
+console.info(`Built docs-content into: ${outputDir}`);

scripts/deploy/publish-docs-content.sh

@@ -23,8 +23,9 @@ docsDistPath="${projectPath}/dist/docs"
 # Path to the cloned docs-content repository.
 docsContentPath="${projectPath}/tmp/material2-docs-content"
 
-# Path to the release output of the Bazel "@angular/components-examples" NPM package.
-examplesPackagePath="$(bazel info bazel-bin)/src/components-examples/npm_package"
+# Path to the build output of the Bazel "@angular/components-examples" NPM package.
+# Note: When changing this, also change the path in `scripts/build-docs-content.js`.
+examplesPackagePath="${projectPath}/dist/docs-content-pkg/"
 
 # Git clone URL for the material2-docs-content repository.
 docsContentRepoUrl="https://github.com/angular/material2-docs-content"

src/cdk-experimental/column-resize/resizable.ts

@@ -94,13 +94,15 @@ export abstract class Resizable<HandleComponent extends ResizeOverlayHandle>
   }
 
   ngAfterViewInit() {
-    this._viewInitialized = true;
-
     this._listenForRowHoverEvents();
     this._listenForResizeEvents();
     this._appendInlineHandle();
-    this._applyMinWidthPx();
-    this._applyMaxWidthPx();
+
+    this.styleScheduler.scheduleEnd(() => {
+      this._viewInitialized = true;
+      this._applyMinWidthPx();
+      this._applyMaxWidthPx();
+    });
   }
 
   ngOnDestroy(): void {

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 {
+}