feat(compatibility): remove conflicts with material1 css styling (#2790)

* feat(compatibility): remove conflicts with material1 css styling

* fix tests

* fix input changes

* autocomplete changes

* merge changes

* change class assignment to evaluation

* add back in the line truncate for select

* fix button on simple snackbar

* fix tests

e2e/components/menu/menu-page.ts

@@ -3,7 +3,7 @@ import {browser, by, element, ElementFinder} from 'protractor';
 export class MenuPage {
   constructor() { browser.get('/menu'); }
 
-  menu(): ElementFinder { return element(by.css('.md-menu-panel')); }
+  menu(): ElementFinder { return element(by.css('.mat-menu-panel')); }
 
   start(): ElementFinder { return element(by.id('start')); }
 
@@ -23,11 +23,11 @@ export class MenuPage {
 
   combinedTrigger(): ElementFinder { return element(by.id('combined-t')); }
 
-  beforeMenu(): ElementFinder { return element(by.css('.md-menu-panel.before')); }
+  beforeMenu(): ElementFinder { return element(by.css('.mat-menu-panel.before')); }
 
-  aboveMenu(): ElementFinder { return element(by.css('.md-menu-panel.above')); }
+  aboveMenu(): ElementFinder { return element(by.css('.mat-menu-panel.above')); }
 
-  combinedMenu(): ElementFinder { return element(by.css('.md-menu-panel.combined')); }
+  combinedMenu(): ElementFinder { return element(by.css('.mat-menu-panel.combined')); }
 
   getResultText() { return this.textArea().getText(); }
 }

e2e/components/menu/menu.e2e.ts

@@ -4,7 +4,7 @@ import {expectToExist, expectAlignedWith, expectFocusOn, expectLocation} from '.
 import {pressKeys} from '../../util/actions';
 
 describe('menu', () => {
-  const menuSelector = '.md-menu-panel';
+  const menuSelector = '.mat-menu-panel';
   let page: MenuPage;
 
   beforeEach(() => page = new MenuPage());
@@ -60,7 +60,7 @@ describe('menu', () => {
   it('should mirror classes on host to menu template in overlay', () => {
     page.trigger().click();
     page.menu().getAttribute('class').then((classes: string) => {
-      expect(classes).toContain('md-menu-panel custom');
+      expect(classes).toContain('mat-menu-panel custom');
     });
   });
 

e2e/components/radio/radio.e2e.ts

@@ -7,7 +7,7 @@ describe('radio', () => {
     it('should be checked when clicked', () => {
       element(by.id('water')).click();
       element(by.id('water')).getAttribute('class').then((value: string) => {
-        expect(value).toContain('md-radio-checked');
+        expect(value).toContain('mat-radio-checked');
       });
       element(by.css('input[id=water-input]')).getAttribute('checked').then((value: string) => {
         expect(value).toBeTruthy();
@@ -18,7 +18,7 @@ describe('radio', () => {
 
       element(by.id('leaf')).click();
       element(by.id('leaf')).getAttribute('class').then((value: string) => {
-        expect(value).toContain('md-radio-checked');
+        expect(value).toContain('mat-radio-checked');
       });
       element(by.css('input[id=leaf-input]')).getAttribute('checked').then((value: string) => {
         expect(value).toBeTruthy();
@@ -32,7 +32,7 @@ describe('radio', () => {
       element(by.id('toggle-disable')).click();
       element(by.id('water')).click();
       element(by.id('water')).getAttribute('class').then((value: string) => {
-        expect(value).toContain('md-radio-disabled');
+        expect(value).toContain('mat-radio-disabled');
       });
         element(by.css('input[id=water-input]')).getAttribute('disabled').then((value: string) => {
         expect(value).toBeTruthy();
@@ -40,7 +40,7 @@ describe('radio', () => {
 
       element(by.id('leaf')).click();
       element(by.id('leaf')).getAttribute('class').then((value: string) => {
-        expect(value).toContain('md-radio-disabled');
+        expect(value).toContain('mat-radio-disabled');
       });
       element(by.css('input[id=leaf-input]')).getAttribute('disabled').then((value: string) => {
         expect(value).toBeTruthy();

e2e/components/slide-toggle/slide-toggle.e2e.ts

@@ -43,7 +43,7 @@ describe('slide-toggle', () => {
 
   it('should move the thumb on state change', () => {
     let slideToggleEl = getNormalToggle();
-    let thumbEl = element(by.css('#normal-slide-toggle .md-slide-toggle-thumb-container'));
+    let thumbEl = element(by.css('#normal-slide-toggle .mat-slide-toggle-thumb-container'));
 
     let previousX = thumbEl.getLocation().then(pos => pos.x);
 

e2e/components/tabs/tabs.e2e.ts

@@ -10,7 +10,7 @@ describe('tabs', () => {
     beforeEach(() => {
       browser.get('/tabs');
       tabGroup = element(by.css('md-tab-group'));
-      tabLabels = element.all(by.css('.md-tab-label'));
+      tabLabels = element.all(by.css('.mat-tab-label'));
       tabBodies = element.all(by.css('md-tab-body'));
     });
 
@@ -67,12 +67,12 @@ function getFocusStates(elements: ElementArrayFinder) {
 
 /** Returns an array of true/false that represents the active states for the provided elements. */
 function getLabelActiveStates(elements: ElementArrayFinder) {
-  return getClassStates(elements, 'md-tab-label-active');
+  return getClassStates(elements, 'mat-tab-label-active');
 }
 
 /** Returns an array of true/false that represents the active states for the provided elements */
 function getBodyActiveStates(elements: ElementArrayFinder) {
-  return getClassStates(elements, 'md-tab-body-active');
+  return getClassStates(elements, 'mat-tab-body-active');
 }
 
 /**