Add disabled tabs feature.

.codeclimate.yml

@@ -27,7 +27,7 @@ exclude_paths:
 - dev-scripts
 - scripts
 - src/app
-- src/scss-mdl
+- src/scss
 - typings
 - angular-cli.json
 - angular-cli-build.js

README.md

@@ -31,7 +31,7 @@ Do not take a red flag to serious. Most of the time this is a sauce lab issue an
 ### Status of the npm package version 1.7 (mdl version 1.2.1; angular 2.0 final)
 
 - Badges
-- Buttons 
+- Buttons
 - Cards
 - Chips
 - Icons
@@ -74,7 +74,7 @@ export class Angular2MdlAppModule {
 }
 ```
 
-There are still a lot of bugs in angular2 rc5. For example: https://github.com/angular/angular/issues/10618. 
+There are still a lot of bugs in angular2 rc5. For example: https://github.com/angular/angular/issues/10618.
 This means that prod builds are broken. You need to disable some minification options. See the comments in the mentioned ticket.
 
 ### Installation
@@ -95,7 +95,7 @@ Just use it. Add the MdlModule to your NgModule imports and you are done!
 
 ### How to use the mdl components with the angular cli system js version
 
-You need to extend the `angular-cli-build.js` file to include `angular2-mdl` as a vendor package: 
+You need to extend the `angular-cli-build.js` file to include `angular2-mdl` as a vendor package:
 
 ```JavaScript
 return new Angular2App(defaults, {
@@ -142,7 +142,7 @@ You may include the material-deisgn-lite css in your html and you're done!
 Under https://getmdl.io/customize/index.html you'll find a customizing tool to change the theme colors.
 
 ### How to use the scss files from material-design-lite
-But there is also another way. This package includes the scss files from material-design-lite. 
+But there is also another way. This package includes the scss files from material-design-lite.
 With these files you are able to change the colors and other variables in your own scss files:
 
 First of all you need to install node-sass for your project:
@@ -151,15 +151,15 @@ First of all you need to install node-sass for your project:
 npm install node-sass --save-dev
 ```
 
-After that you need to configure the sass compiler to use the sass files from the angular2-mdl package. 
+After that you need to configure the sass compiler to use the sass files from the angular2-mdl package.
 For that the file `angular-cli-build.js` needs to be extended:
 
 ```JavaScript
 return new Angular2App(defaults, {
 
     sassCompiler: {
       includePaths: [
-        `${__dirname}/node_modules/angular2-mdl/src/scss-mdl`
+        `${__dirname}/node_modules/angular2-mdl/src/scss`
       ]
     },
     vendorNpmFiles: [
@@ -184,3 +184,17 @@ $color-accent-contrast: $color-dark-contrast;
 
 
 [comment]: <> (in angular-cli/lib/broccoli/angular-broccoli-bundle.js set { minify: true, mangle: false })
+
+
+# Contributing
+
+*The contributing section is a work in progress, please be aware that changes are still being suggested and your PR may need to go through a couple revisions prior to acceptance*
+
+* This package should only provide what is provided by material design lite so far (to keep it clean, maintainable and predictable what is included)
+* Any extensions need to be things that the packaging of mdl into @angular makes it very hard to extend (to be reviewed and accepted/rejected based on merit by the owners of this repository).
+
+## SCSS
+
+* This package must work with the CSS from [the CDN](https://code.getmdl.io/1.2.1/material.indigo-pink.min.css)
+  * We pull the source directly with a script into app/scss/mdl
+  * All extensions must exist outside of the mdl directory or they will be overwritten the next time we pull from mdl

angular-cli-build.js

@@ -39,7 +39,7 @@ module.exports = function(defaults) {
     tsCompiler: {},
     sassCompiler: {
       includePaths: [
-        'src/scss-mdl'
+        'src/scss'
       ]
     },
     vendorNpmFiles: [

dev-scripts/generate-scss-from-mdl-scss.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 'use strict';
 
-// extract scss files and put them into scss-mdl folder. Run: npm run generate-scss-from-mdl-scss
+// extract scss files and put them into scss/mdl folder. Run: npm run generate-scss-from-mdl-scss
 
 const fs = require('fs');
 const path = require('path');
@@ -10,10 +10,10 @@ const ncp = require('ncp').ncp;
 
 var basePath = process.cwd();
 var source = path.resolve(basePath, 'node_modules/material-design-lite/src');
-var dest = path.resolve(basePath, 'src/scss-mdl');
+var dest = path.resolve(basePath, 'src/scss/mdl');
 
 
-fs.mkdirSync('src/scss-mdl');
+fs.mkdirSync('src/scss/mdl');
 
 ncp(source, dest, {filter: function(fileName){
   if(fileName.endsWith('snippets')){
@@ -29,4 +29,3 @@ ncp(source, dest, {filter: function(fileName){
   }
   console.log('done!');
 });
-

src/app/tabs/tabs.component.html

@@ -3,78 +3,108 @@ <h4>The Tabs </h4>
 
 <h5>Tabs</h5>
 <div>
-	active index:
-	<input type="number" [(ngModel)]="activeIndex" min="0" max="2">
+  active index:
+  <input type="number" [(ngModel)]="activeIndex" min="0" max="2">
 </div>
 <div class="demo-tab-container">
-	<mdl-tabs mdl-ripple [mdl-tab-active-index]="activeIndex" (mdl-tab-active-changed)="tabChanged($event)">
-		<mdl-tab-panel>
-			<mdl-tab-panel-title>
-				<mdl-icon class="mdl-color-text--primary">person</mdl-icon><span>Starks</span>
-			</mdl-tab-panel-title>
-			<mdl-tab-panel-content>
-			<ul>
-				<li>Eddard</li>
-				<li>Catelyn</li>
-				<li>Robb</li>
-				<li>Sansa</li>
-				<li>Brandon</li>
-				<li>Arya</li>
-				<li>Rickon</li>
-			</ul>
-			</mdl-tab-panel-content>
-		</mdl-tab-panel>
-		<mdl-tab-panel mdl-tab-panel-title="Lannisters">
-			<ul>
-				<li>Tywin</li>
-				<li>Cersei</li>
-				<li>Jamie</li>
-				<li>Tyrion</li>
-			</ul>
-		</mdl-tab-panel>
-		<mdl-tab-panel mdl-tab-panel-title="Targaryens">
-			<ul>
-				<li>Viserys</li>
-				<li>Daenerys</li>
-			</ul>
-		</mdl-tab-panel>
-	</mdl-tabs>
+  <mdl-switch [(ngModel)]="disableTargaryens" mdl-ripple>Disable Targaryens</mdl-switch>
+  <mdl-switch [(ngModel)]="disableBaratheon" mdl-ripple>Disable Baratheon</mdl-switch>
+  <mdl-tabs mdl-ripple [mdl-tab-active-index]="activeIndex" (mdl-tab-active-changed)="tabChanged($event)">
+    <mdl-tab-panel>
+      <mdl-tab-panel-title>
+        <mdl-icon class="mdl-color-text--primary">person</mdl-icon><span>Starks</span>
+      </mdl-tab-panel-title>
+      <mdl-tab-panel-content>
+      <ul>
+        <li>Eddard</li>
+        <li>Catelyn</li>
+        <li>Robb</li>
+        <li>Sansa</li>
+        <li>Brandon</li>
+        <li>Arya</li>
+        <li>Rickon</li>
+      </ul>
+      </mdl-tab-panel-content>
+    </mdl-tab-panel>
+    <mdl-tab-panel mdl-tab-panel-title="Lannisters">
+      <ul>
+        <li>Tywin</li>
+        <li>Cersei</li>
+        <li>Jamie</li>
+        <li>Tyrion</li>
+      </ul>
+    </mdl-tab-panel>
+    <mdl-tab-panel mdl-tab-panel-title="Targaryens" [disabled]="disableTargaryens">
+      <ul>
+        <li>Viserys</li>
+        <li>Daenerys</li>
+      </ul>
+    </mdl-tab-panel>
+    <mdl-tab-panel mdl-tab-panel-title="Baratheon" [disabled]="disableBaratheon">
+      <mdl-tab-panel-title>
+        <mdl-icon class="mdl-color-text--primary">person</mdl-icon><span>Baratheon</span>
+      </mdl-tab-panel-title>
+      <ul>
+        <li>Robert</li>
+        <li>Renly</li>
+        <li>Stanis</li>
+        <li>Joffrey</li>
+        <li>Myrcella</li>
+        <li>Tommen</li>
+      </ul>
+    </mdl-tab-panel>
+  </mdl-tabs>
 </div>
 
 
 <pre prism>
   <![CDATA[
+<mdl-switch [(ngModel)]="disableTargaryens" mdl-ripple>Disable Targaryens</mdl-switch>
+<mdl-switch [(ngModel)]="disableBaratheon" mdl-ripple>Disable Baratheon</mdl-switch>
 <mdl-tabs mdl-ripple mdl-tab-active-index="0" (mdl-tab-active-changed)="tabChanged($event)">
-      <mdl-tab-panel>
-				<mdl-tab-panel-title>
-					<mdl-icon class="mdl-color-text--primary">person</mdl-icon><span>Starks</span>
-				</mdl-tab-panel-title>
-				<mdl-tab-panel-content>
-				<ul>
-					<li>Eddard</li>
-					<li>Catelyn</li>
-					<li>Robb</li>
-					<li>Sansa</li>
-					<li>Brandon</li>
-					<li>Arya</li>
-					<li>Rickon</li>
-				</ul>
-				</mdl-tab-panel-content>
-      </mdl-tab-panel>
-      <mdl-tab-panel mdl-tab-panel-title="Lannisters">
-         <ul>
-            <li>Tywin</li>
-            <li>Cersei</li>
-            <li>Jamie</li>
-            <li>Tyrion</li>
-         </ul>
-      </mdl-tab-panel>
-      <mdl-tab-panel mdl-tab-panel-title="Targaryens">
-         <ul>
-            <li>Viserys</li>
-            <li>Daenerys</li>
-         </ul>
-      </mdl-tab-panel>
-   </mdl-tabs>
+    <mdl-tab-panel>
+      <mdl-tab-panel-title>
+        <mdl-icon class="mdl-color-text--primary">person</mdl-icon><span>Starks</span>
+      </mdl-tab-panel-title>
+      <mdl-tab-panel-content>
+      <ul>
+        <li>Eddard</li>
+        <li>Catelyn</li>
+        <li>Robb</li>
+        <li>Sansa</li>
+        <li>Brandon</li>
+        <li>Arya</li>
+        <li>Rickon</li>
+      </ul>
+      </mdl-tab-panel-content>
+    </mdl-tab-panel>
+    <mdl-tab-panel mdl-tab-panel-title="Lannisters">
+       <ul>
+          <li>Tywin</li>
+          <li>Cersei</li>
+          <li>Jamie</li>
+          <li>Tyrion</li>
+       </ul>
+    </mdl-tab-panel>
+    <mdl-tab-panel mdl-tab-panel-title="Targaryens" [disabled]="disableTargaryens">
+       <ul>
+          <li>Viserys</li>
+          <li>Daenerys</li>
+       </ul>
+    </mdl-tab-panel>
+    <mdl-tab-panel mdl-tab-panel-title="Baratheon" [disabled]="disableBaratheon">
+      <mdl-tab-panel-title>
+        <mdl-icon class="mdl-color-text--primary">person</mdl-icon><span>Baratheon</span>
+      </mdl-tab-panel-title>
+      <ul>
+        <li>Robert</li>
+        <li>Renly</li>
+        <li>Stanis</li>
+        <li>Joffrey</li>
+        <li>Myrcella</li>
+        <li>Tommen</li>
+      </ul>
+    </mdl-tab-panel>
+ </mdl-tabs>
   ]]>
-</pre>
+</pre>

src/app/tabs/tabs.component.ts

@@ -37,6 +37,7 @@ import { AbstractDemoComponent } from './../abstract-demo.component';
 export class TabsDemo extends AbstractDemoComponent {
 
   public activeIndex = 0;
+  public disableTargaryens = true;
 
   constructor(router: Router, route: ActivatedRoute, titleService: Title) {
     super(router, route, titleService);

src/components/tabs/mdl-tab-panel.component.ts

@@ -29,6 +29,7 @@ export class MdlTabPanelComponent {
 
   @ContentChild(MdlTabPanelTitleComponent) public titleComponent;
   @Input('mdl-tab-panel-title') public title;
+  @Input('disabled') public disabled;
   public isActive = false;
 
 }

src/components/tabs/mdl-tabs.component.spec.ts

@@ -35,7 +35,7 @@ describe('Component: MdlTabs', () => {
     });
     let fixture = TestBed.createComponent(MdlTestComponent);
     fixture.detectChanges();
-        
+
     let mdlTabsComponent: MdlTabsComponent =
       fixture.debugElement.query(By.directive(MdlTabsComponent)).componentInstance;
 
@@ -104,6 +104,67 @@ describe('Component: MdlTabs', () => {
 
     expect(testElement.nativeElement.nodeName).toBe('DIV');
   });
+
+  it('should recognize enabled/disabled tabs', () => {
+    TestBed.overrideComponent(MdlTestComponent, { set: {
+      template: `
+          <mdl-tabs [mdl-tab-active-index]="1" (mdl-tab-active-changed)="tabChanged($event)">
+            <mdl-tab-panel></mdl-tab-panel>
+            <mdl-tab-panel [disabled]="true"></mdl-tab-panel>
+          </mdl-tabs>
+        ` }
+    });
+
+
+    let fixture = TestBed.createComponent(MdlTestComponent);
+    fixture.detectChanges();
+    let testElement = fixture.nativeElement.querySelector('.mdl-tabs__tab.disabled');
+
+    expect(testElement.nodeName).toBe('A');
+  });
+
+
+  it('should not bepossible to to select a disabled tab', () => {
+
+    TestBed.overrideComponent(MdlTestComponent, { set: {
+      template: `
+          <mdl-tabs [mdl-tab-active-index]="0" (mdl-tab-active-changed)="tabChanged($event)">
+            <mdl-tab-panel></mdl-tab-panel>
+            <mdl-tab-panel></mdl-tab-panel>
+            <mdl-tab-panel [disabled]="true"></mdl-tab-panel>
+            <mdl-tab-panel [disabled]="true">
+              <mdl-tab-panel-title>
+                <span class="test">Test</span>
+              </mdl-tab-panel-title>
+            </mdl-tab-panel>
+          </mdl-tabs>
+        ` }
+    });
+    let fixture = TestBed.createComponent(MdlTestComponent);
+    fixture.detectChanges();
+
+    let testComponent = fixture.componentInstance;
+
+    let mdlTabsComponent: MdlTabsComponent =
+      fixture.debugElement.query(By.directive(MdlTabsComponent)).componentInstance;
+
+    let aDebugElements = fixture.debugElement.queryAll(By.css('a.disabled'));
+
+    aDebugElements[0].nativeElement.click();
+
+    fixture.detectChanges();
+
+    expect(mdlTabsComponent.selectedIndex).toBe(0);
+
+
+    let titleDebugElements = fixture.debugElement.queryAll(By.css('div.disabled'));
+
+    titleDebugElements[0].nativeElement.click();
+
+    fixture.detectChanges();
+
+    expect(mdlTabsComponent.selectedIndex).toBe(0);
+  });
 });