From 4c49f5fd6e23df86b5192db88ac432bd6164cc2f Mon Sep 17 00:00:00 2001 From: Kara Date: Thu, 8 Dec 2016 05:24:19 +0800 Subject: [PATCH] chore(autocomplete): add autocomplete scaffold (#2092) --- .../autocomplete/autocomplete-demo.html | 3 ++ .../autocomplete/autocomplete-demo.scss | 1 + .../autocomplete/autocomplete-demo.ts | 9 ++++++ src/demo-app/demo-app-module.ts | 2 ++ src/demo-app/demo-app/demo-app.ts | 1 + src/demo-app/demo-app/routes.ts | 2 ++ src/lib/autocomplete/README.md | 5 ++++ src/lib/autocomplete/_autocomplete-theme.scss | 5 ++++ src/lib/autocomplete/autocomplete.html | 1 + src/lib/autocomplete/autocomplete.scss | 0 src/lib/autocomplete/autocomplete.spec.ts | 29 +++++++++++++++++++ src/lib/autocomplete/autocomplete.ts | 11 +++++++ src/lib/autocomplete/index.ts | 18 ++++++++++++ src/lib/core/compatibility/default-mode.ts | 1 + .../core/compatibility/no-conflict-mode.ts | 1 + src/lib/core/theming/_all-theme.scss | 2 ++ src/lib/module.ts | 4 ++- 17 files changed, 94 insertions(+), 1 deletion(-) create mode 100644 src/demo-app/autocomplete/autocomplete-demo.html create mode 100644 src/demo-app/autocomplete/autocomplete-demo.scss create mode 100644 src/demo-app/autocomplete/autocomplete-demo.ts create mode 100644 src/lib/autocomplete/README.md create mode 100644 src/lib/autocomplete/_autocomplete-theme.scss create mode 100644 src/lib/autocomplete/autocomplete.html create mode 100644 src/lib/autocomplete/autocomplete.scss create mode 100644 src/lib/autocomplete/autocomplete.spec.ts create mode 100644 src/lib/autocomplete/autocomplete.ts create mode 100644 src/lib/autocomplete/index.ts diff --git a/src/demo-app/autocomplete/autocomplete-demo.html b/src/demo-app/autocomplete/autocomplete-demo.html new file mode 100644 index 000000000000..0745c4ac4ea0 --- /dev/null +++ b/src/demo-app/autocomplete/autocomplete-demo.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/src/demo-app/autocomplete/autocomplete-demo.scss b/src/demo-app/autocomplete/autocomplete-demo.scss new file mode 100644 index 000000000000..94c86ec8589d --- /dev/null +++ b/src/demo-app/autocomplete/autocomplete-demo.scss @@ -0,0 +1 @@ +.demo-autocomplete {} diff --git a/src/demo-app/autocomplete/autocomplete-demo.ts b/src/demo-app/autocomplete/autocomplete-demo.ts new file mode 100644 index 000000000000..b89197833174 --- /dev/null +++ b/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 {} diff --git a/src/demo-app/demo-app-module.ts b/src/demo-app/demo-app-module.ts index afcc8e6d7382..2f692b92d089 100644 --- a/src/demo-app/demo-app-module.ts +++ b/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, diff --git a/src/demo-app/demo-app/demo-app.ts b/src/demo-app/demo-app/demo-app.ts index 005564a13c06..0f5424ee1fa7 100644 --- a/src/demo-app/demo-app/demo-app.ts +++ b/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'}, diff --git a/src/demo-app/demo-app/routes.ts b/src/demo-app/demo-app/routes.ts index 7cc7685eb226..19a7dc1bd42e 100644 --- a/src/demo-app/demo-app/routes.ts +++ b/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}, diff --git a/src/lib/autocomplete/README.md b/src/lib/autocomplete/README.md new file mode 100644 index 000000000000..1bc0814e9eec --- /dev/null +++ b/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 :) \ No newline at end of file diff --git a/src/lib/autocomplete/_autocomplete-theme.scss b/src/lib/autocomplete/_autocomplete-theme.scss new file mode 100644 index 000000000000..b77fff253e0c --- /dev/null +++ b/src/lib/autocomplete/_autocomplete-theme.scss @@ -0,0 +1,5 @@ +@import '../core/theming/theming'; + +@mixin md-autocomplete-theme($theme) { + +} \ No newline at end of file diff --git a/src/lib/autocomplete/autocomplete.html b/src/lib/autocomplete/autocomplete.html new file mode 100644 index 000000000000..f0d1cbc032a0 --- /dev/null +++ b/src/lib/autocomplete/autocomplete.html @@ -0,0 +1 @@ +I'm an autocomplete! \ No newline at end of file diff --git a/src/lib/autocomplete/autocomplete.scss b/src/lib/autocomplete/autocomplete.scss new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/src/lib/autocomplete/autocomplete.spec.ts b/src/lib/autocomplete/autocomplete.spec.ts new file mode 100644 index 000000000000..158a6cf263d6 --- /dev/null +++ b/src/lib/autocomplete/autocomplete.spec.ts @@ -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: ` + + ` +}) +class SimpleAutocomplete {} + diff --git a/src/lib/autocomplete/autocomplete.ts b/src/lib/autocomplete/autocomplete.ts new file mode 100644 index 000000000000..18545cb2c6e2 --- /dev/null +++ b/src/lib/autocomplete/autocomplete.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 {} + diff --git a/src/lib/autocomplete/index.ts b/src/lib/autocomplete/index.ts new file mode 100644 index 000000000000..92bb41a39a65 --- /dev/null +++ b/src/lib/autocomplete/index.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: [] + }; + } +} diff --git a/src/lib/core/compatibility/default-mode.ts b/src/lib/core/compatibility/default-mode.ts index 4eb75b4ca4ef..16596318c21b 100644 --- a/src/lib/core/compatibility/default-mode.ts +++ b/src/lib/core/compatibility/default-mode.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, diff --git a/src/lib/core/compatibility/no-conflict-mode.ts b/src/lib/core/compatibility/no-conflict-mode.ts index 9fd90d233c40..2aa116f71fbb 100644 --- a/src/lib/core/compatibility/no-conflict-mode.ts +++ b/src/lib/core/compatibility/no-conflict-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, diff --git a/src/lib/core/theming/_all-theme.scss b/src/lib/core/theming/_all-theme.scss index 4c7a252ea4c4..e059cd5fcf8b 100644 --- a/src/lib/core/theming/_all-theme.scss +++ b/src/lib/core/theming/_all-theme.scss @@ -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); diff --git a/src/lib/module.ts b/src/lib/module.ts index d6fe058809fc..8819356f0aa3 100644 --- a/src/lib/module.ts +++ b/src/lib/module.ts @@ -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(),