chore(autocomplete): add autocomplete scaffold (#2092)

Author: kara

src/demo-app/autocomplete/autocomplete-demo.html

@@ -0,0 +1,3 @@
+<div class="demo-autocomplete">
+  <md-autocomplete></md-autocomplete>
+</div>

src/demo-app/autocomplete/autocomplete-demo.scss

@@ -0,0 +1 @@
+.demo-autocomplete {}

src/demo-app/autocomplete/autocomplete-demo.ts

@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'autocomplete-demo',
+  templateUrl: 'autocomplete-demo.html',
+  styleUrls: ['autocomplete-demo.css'],
+})
+export class AutocompleteDemo {}

src/demo-app/demo-app-module.ts

@@ -36,6 +36,7 @@ import {MenuDemo} from './menu/menu-demo';
 import {TabsDemo, SunnyTabContent, RainyTabContent, FoggyTabContent} from './tabs/tabs-demo';
 import {ProjectionDemo, ProjectionTestComponent} from './projection/projection-demo';
 import {PlatformDemo} from './platform/platform-demo';
+import {AutocompleteDemo} from './autocomplete/autocomplete-demo';
 
 @NgModule({
   imports: [
@@ -47,6 +48,7 @@ import {PlatformDemo} from './platform/platform-demo';
     MaterialModule.forRoot(),
   ],
   declarations: [
+    AutocompleteDemo,
     BaselineDemo,
     ButtonDemo,
     ButtonToggleDemo,

src/demo-app/demo-app/demo-app.ts

@@ -20,6 +20,7 @@ export class Home {}
 })
 export class DemoApp {
   navItems = [
+    {name: 'Autocomplete', route: 'autocomplete'},
     {name: 'Button', route: 'button'},
     {name: 'Button Toggle', route: 'button-toggle'},
     {name: 'Card', route: 'card'},

src/demo-app/demo-app/routes.ts

@@ -31,9 +31,11 @@ import {SnackBarDemo} from '../snack-bar/snack-bar-demo';
 import {ProjectionDemo} from '../projection/projection-demo';
 import {TABS_DEMO_ROUTES} from '../tabs/routes';
 import {PlatformDemo} from '../platform/platform-demo';
+import {AutocompleteDemo} from '../autocomplete/autocomplete-demo';
 
 export const DEMO_APP_ROUTES: Routes = [
   {path: '', component: Home},
+  {path: 'autocomplete', component: AutocompleteDemo},
   {path: 'button', component: ButtonDemo},
   {path: 'card', component: CardDemo},
   {path: 'chips', component: ChipsDemo},

src/lib/autocomplete/README.md

@@ -0,0 +1,5 @@
+
+## Not yet implemented!
+
+The autocomplete is not yet implemented. This is only a scaffold to make
+subsequent PRs easier to read. Please do not try to use yet :)

src/lib/autocomplete/_autocomplete-theme.scss

@@ -0,0 +1,5 @@
+@import '../core/theming/theming';
+
+@mixin md-autocomplete-theme($theme) {
+
+}

src/lib/autocomplete/autocomplete.html

@@ -0,0 +1 @@
+I'm an autocomplete!

src/lib/autocomplete/autocomplete.scss

@@ -0,0 +1,29 @@
+import {TestBed, async} from '@angular/core/testing';
+import {Component} from '@angular/core';
+import {MdAutocompleteModule} from './index';
+
+describe('MdAutocomplete', () => {
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [MdAutocompleteModule.forRoot()],
+      declarations: [SimpleAutocomplete],
+      providers: []
+    });
+
+    TestBed.compileComponents();
+  }));
+
+  it('should have a test', () => {
+    expect(true).toBe(true);
+  });
+
+});
+
+@Component({
+  template: `
+    <md-autocomplete></md-autocomplete>
+  `
+})
+class SimpleAutocomplete {}
+

src/lib/autocomplete/autocomplete.spec.ts

@@ -0,0 +1,11 @@
+import {Component, ViewEncapsulation} from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'md-autocomplete, mat-autocomplete',
+  templateUrl: 'autocomplete.html',
+  styleUrls: ['autocomplete.css'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class MdAutocomplete {}
+

src/lib/autocomplete/autocomplete.ts

@@ -0,0 +1,18 @@
+import {ModuleWithProviders, NgModule} from '@angular/core';
+import {DefaultStyleCompatibilityModeModule} from '../core';
+import {MdAutocomplete} from './autocomplete';
+export * from './autocomplete';
+
+@NgModule({
+  imports: [DefaultStyleCompatibilityModeModule],
+  exports: [MdAutocomplete, DefaultStyleCompatibilityModeModule],
+  declarations: [MdAutocomplete],
+})
+export class MdAutocompleteModule {
+  static forRoot(): ModuleWithProviders {
+    return {
+      ngModule: MdAutocompleteModule,
+      providers: []
+    };
+  }
+}

src/lib/autocomplete/index.ts

@@ -5,6 +5,7 @@ export const MATERIAL_COMPATIBILITY_MODE = new OpaqueToken('md-compatibiility-mo
 
 /** Selector that matches all elements that may have style collisions with material1. */
 export const MAT_ELEMENTS_SELECTOR = `
+  mat-autocomplete,
   mat-card,
   mat-card-actions,
   mat-card-content,

src/lib/core/compatibility/default-mode.ts

@@ -4,6 +4,7 @@ import {MATERIAL_COMPATIBILITY_MODE} from './default-mode';
 
 /** Selector that matches all elements that may have style collisions with material1. */
 export const MD_ELEMENTS_SELECTOR = `
+  md-autocomplete,
   md-card,
   md-card-actions,
   md-card-content,

src/lib/core/compatibility/no-conflict-mode.ts

@@ -1,5 +1,6 @@
 // Import all the theming functionality.
 @import '../core';
+@import '../../autocomplete/autocomplete-theme';
 @import '../../button/button-theme';
 @import '../../button-toggle/button-toggle-theme';
 @import '../../card/card-theme';
@@ -26,6 +27,7 @@
 // Create a theme.
 @mixin angular-material-theme($theme) {
   @include md-core-theme($theme);
+  @include md-autocomplete-theme($theme);
   @include md-button-theme($theme);
   @include md-button-toggle-theme($theme);
   @include md-card-theme($theme);

src/lib/core/theming/_all-theme.scss

@@ -33,9 +33,10 @@ import {MdTooltipModule} from './tooltip/index';
 import {MdMenuModule} from './menu/index';
 import {MdDialogModule} from './dialog/index';
 import {PlatformModule} from './core/platform/platform';
-
+import {MdAutocompleteModule} from './autocomplete/index';
 
 const MATERIAL_MODULES = [
+  MdAutocompleteModule,
   MdButtonModule,
   MdButtonToggleModule,
   MdCardModule,
@@ -70,6 +71,7 @@ const MATERIAL_MODULES = [
 
 @NgModule({
   imports: [
+    MdAutocompleteModule.forRoot(),
     MdButtonModule.forRoot(),
     MdCardModule.forRoot(),
     MdChipsModule.forRoot(),