fix: Use 'ngx' prefix naming for extended Sass (#1598)

Change `ng-` to `ngx-`.

packages/button/button.ts

@@ -19,8 +19,8 @@ import { MdcIcon } from '@angular-mdc/web/icon';
   host: {
     '[tabIndex]': 'disabled ? -1 : 0',
     'class': 'mdc-button',
-    '[class.ng-mdc-button--primary]': 'primary',
-    '[class.ng-mdc-button--secondary]': 'secondary',
+    '[class.ngx-mdc-button--primary]': 'primary',
+    '[class.ngx-mdc-button--secondary]': 'secondary',
     '[class.mdc-button--raised]': 'raised',
     '[class.mdc-button--dense]': 'dense',
     '[class.mdc-button--unelevated]': 'unelevated',

packages/chips/chip.ts

@@ -118,8 +118,8 @@ export class MdcChipText {
     '[id]': 'id',
     '[attr.tabindex]': 'disabled ? null : 0',
     'class': 'mdc-chip',
-    '[class.ng-mdc-chip--primary]': 'primary',
-    '[class.ng-mdc-chip--secondary]': 'secondary'
+    '[class.ngx-mdc-chip--primary]': 'primary',
+    '[class.ngx-mdc-chip--secondary]': 'secondary'
   },
   template: `
   <ng-container [ngSwitch]="filter">

packages/fab/fab.ts

@@ -66,10 +66,10 @@ export class MdcFab implements AfterContentInit, OnDestroy {
   get position(): string | null { return this._position; }
   set position(value: string | null) {
     if (this._position) {
-      this._getHostElement().classList.remove(`ng-mdc-fab--${this._convertPosition(this._position)}`);
+      this._getHostElement().classList.remove(`ngx-mdc-fab--${this._convertPosition(this._position)}`);
     }
     if (value) {
-      this._getHostElement().classList.add(`ng-mdc-fab--${this._convertPosition(value)}`);
+      this._getHostElement().classList.add(`ngx-mdc-fab--${this._convertPosition(value)}`);
     }
     this._position = value;
   }

packages/list/list.ts

@@ -71,7 +71,7 @@ export class MdcListGroupSubheader {
     '[attr.aria-orientation]': 'verticalOrientation ? "vertical" : "horizontal"',
     '[class.mdc-list--dense]': 'dense',
     '[class.mdc-list--avatar-list]': 'avatar',
-    '[class.ng-mdc-list--border]': 'border',
+    '[class.ngx-mdc-list--border]': 'border',
     '[class.mdc-list--non-interactive]': '!interactive',
     '[class.mdc-list--two-line]': 'twoLine'
   },

packages/material-components-web/extend/mdc-button.scss

@@ -1,7 +1,7 @@
-.ng-mdc-button--primary {
+.ngx-mdc-button--primary {
   @include mdc-button-filled-accessible($mdc-theme-primary);
 }
 
-.ng-mdc-button--secondary {
+.ngx-mdc-button--secondary {
   @include mdc-button-filled-accessible($mdc-theme-secondary);
 }

packages/material-components-web/extend/mdc-chips.scss

@@ -1,7 +1,7 @@
-.ng-mdc-chip--primary {
+.ngx-mdc-chip--primary {
   @include mdc-chip-fill-color-accessible($mdc-theme-primary);
 }
 
-.ng-mdc-chip--secondary {
+.ngx-mdc-chip--secondary {
   @include mdc-chip-fill-color-accessible($mdc-theme-secondary);
 }

packages/material-components-web/extend/mdc-fab.scss

@@ -1,24 +1,24 @@
-.ng-mdc-fab--bottom-right {
+.ngx-mdc-fab--bottom-right {
   position: fixed;
   right: 1rem;
   bottom: 1rem;
 }
 
 @media (min-width: 1024px) {
-  .ng-mdc-fab--bottom-right {
+  .ngx-mdc-fab--bottom-right {
     right: 1.5rem;
     bottom: 1.5rem;
   }
 }
 
-.ng-mdc-fab--bottom-left {
+.ngx-mdc-fab--bottom-left {
   position: fixed;
   bottom: 1rem;
   left: 1rem;
 }
 
 @media (min-width: 1024px) {
-  .ng-mdc-fab--bottom-left {
+  .ngx-mdc-fab--bottom-left {
     bottom: 1.5rem;
     left: 1.5rem;
   }

packages/material-components-web/extend/mdc-list.scss

@@ -3,7 +3,7 @@
   display: block;
 }
 
-.ng-mdc-list--border {
+.ngx-mdc-list--border {
   .mdc-list-item {
     /* Add the list side padding padding to the list item. */
     padding: 0 16px;

packages/material-components-web/extend/mdc-snackbar.scss

@@ -1,4 +1,4 @@
-.ng-mdc-snackbar--align-end {
+.ngx-mdc-snackbar--align-end {
   @media (min-width: $mdc-snackbar-tablet-breakpoint) {
     @include mdc-rtl-reflexive-position(right, 24px);
 

packages/material-components-web/extend/mdc-tab.scss

@@ -1,4 +1,4 @@
-.ng-mdc-tab--disabled {
+.ngx-mdc-tab--disabled {
   @include mdc-tab-text-label-color(rgba(black, .3));
   @include mdc-tab-icon-color(rgba(black, .3));
 

packages/snackbar/snackbar.component.ts

@@ -147,7 +147,7 @@ export class MdcSnackbarComponent implements AfterViewInit, OnDestroy {
     if (config.align === 'start') {
       this._getHostElement().classList.add('mdc-snackbar--align-start');
     } else if (config.align === 'end') {
-      this._getHostElement().classList.add('ng-mdc-snackbar--align-end');
+      this._getHostElement().classList.add('ngx-mdc-snackbar--align-end');
     }
 
     if (!config.actionHandler && config.data.actionText) {

packages/tab/tab.ts

@@ -72,7 +72,7 @@ export class MdcTabIcon {
     '[class.mdc-tab--active]': 'active',
     '[class.mdc-tab--stacked]': 'stacked',
     '[class.mdc-tab--min-width]': 'fixed',
-    '[class.ng-mdc-tab--disabled]': 'disabled'
+    '[class.ngx-mdc-tab--disabled]': 'disabled'
   },
   template: `
   <div #content class="mdc-tab__content">

test/button/button.test.ts

@@ -59,11 +59,11 @@ describe('MdcButton', () => {
 
       testComponent.isPrimary = true;
       fixture.detectChanges();
-      expect(buttonDebugElement.nativeElement.classList.contains('ng-mdc-button--primary')).toBe(true);
+      expect(buttonDebugElement.nativeElement.classList.contains('ngx-mdc-button--primary')).toBe(true);
 
       testComponent.isSecondary = true;
       fixture.detectChanges();
-      expect(buttonDebugElement.nativeElement.classList.contains('ng-mdc-button--secondary')).toBe(true);
+      expect(buttonDebugElement.nativeElement.classList.contains('ngx-mdc-button--secondary')).toBe(true);
     });
 
     it('#should handle a click on the button', () => {

test/chips/chips.test.ts

@@ -104,13 +104,13 @@ describe('Chips', () => {
     it('#should apply primary class modifier', () => {
       testComponent.primary = true;
       fixture.detectChanges();
-      expect(testDebugElement.nativeElement.classList.contains('ng-mdc-chip--primary')).toBe(true);
+      expect(testDebugElement.nativeElement.classList.contains('ngx-mdc-chip--primary')).toBe(true);
     });
 
     it('#should apply secondary class modifier', () => {
       testComponent.secondary = true;
       fixture.detectChanges();
-      expect(testDebugElement.nativeElement.classList.contains('ng-mdc-chip--secondary')).toBe(true);
+      expect(testDebugElement.nativeElement.classList.contains('ngx-mdc-chip--secondary')).toBe(true);
     });
   });
 

test/fab/fab.test.ts

@@ -79,15 +79,15 @@ describe('MdcFab', () => {
     it('#should apply class `bottomLeft`', () => {
       testComponent.myPosition = 'bottomLeft';
       fixture.detectChanges();
-      expect(buttonDebugElement.nativeElement.classList.contains('ng-mdc-fab--bottom-left')).toBe(true);
+      expect(buttonDebugElement.nativeElement.classList.contains('ngx-mdc-fab--bottom-left')).toBe(true);
     });
 
     it('#should apply class `bottom-right`', () => {
       testComponent.myPosition = 'bottomRight';
       fixture.detectChanges();
 
       expect(buttonInstance.position).toBe('bottomRight');
-      expect(buttonDebugElement.nativeElement.classList.contains('ng-mdc-fab--bottom-right')).toBe(true);
+      expect(buttonDebugElement.nativeElement.classList.contains('ngx-mdc-fab--bottom-right')).toBe(true);
     });
 
     it('#should store position but not add class', () => {

test/list/list.test.ts

@@ -45,7 +45,7 @@ describe('MdcListModule', () => {
     it('#should apply class border', () => {
       testComponent.isBordered = true;
       fixture.detectChanges();
-      expect(testDebugElement.nativeElement.classList.contains('ng-mdc-list--border')).toBe(true);
+      expect(testDebugElement.nativeElement.classList.contains('ngx-mdc-list--border')).toBe(true);
     });
 
     it('#should apply class dense', () => {

test/tabs/tabs.test.ts

@@ -106,7 +106,7 @@ describe('MDC Tabs', () => {
       fixture.detectChanges();
       flush();
 
-      expect(testInstance.tabs.toArray()[0].elementRef.nativeElement.classList.contains('ng-mdc-tab--disabled')).toBe(true);
+      expect(testInstance.tabs.toArray()[0].elementRef.nativeElement.classList.contains('ngx-mdc-tab--disabled')).toBe(true);
     }));
 
     it('#should turn on stacked for tabs', fakeAsync(() => {