fix(demo): replace ng-non-bindable with ngNonBindable

valor-software · Jan 17, 2016 · 2ef870a · 2ef870a
1 parent b95755e
commit 2ef870a
Show file tree

Hide file tree

Showing 19 changed files with 63 additions and 93 deletions.
diff --git a/components/accordion.ts b/components/accordion.ts
@@ -0,0 +1,3 @@
+/**
+ * Created by valorkin on 17/01/16.
+ */
diff --git a/components/accordion/accordion-group.component.ts b/components/accordion/accordion-group.component.ts
@@ -0,0 +1,3 @@
+/**
+ * Created by valorkin on 17/01/16.
+ */
diff --git a/components/accordion/accordion.ts → components/accordion/accordion.component.ts b/components/accordion/accordion.ts → components/accordion/accordion.component.ts
@@ -13,11 +13,10 @@ import { Collapse } from '../collapse/collapse';
   template: `<ng-content></ng-content>`
 })
 export class Accordion {
-  @Input() private templateUrl:string;
   @Input() private closeOthers:boolean;
 
   @HostBinding('class.panel-group')
-  private addPanelGroupClass = true;
+  private addClass = true;
 
   constructor() {
   }
@@ -48,34 +47,16 @@ export class Accordion {
   }
 }
 
-@Directive({
-  selector: '[accordionTransclude]'
-})
-export class AccordionTransclude implements OnInit {
-  @Input() private accordionTransclude:TemplateRef;
-
-  constructor(@Inject(ViewContainerRef) private viewRef:ViewContainerRef) {
-  }
-
-  ngOnInit() {
-    if (this.accordionTransclude) {
-      this.viewRef.createEmbeddedView(this.accordionTransclude);
-    }
-  }
-}
-
-// todo: support template url
-// todo: support custom `open class`
 @Component({
   selector: 'accordion-group',
-  directives: [Collapse, AccordionTransclude, NgClass],
+  directives: [Collapse, NgClass],
   template: `
     <div class="panel" [ngClass]="panelClass">
       <div class="panel-heading" (click)="toggleOpen($event)">
         <h4 class="panel-title">
           <a href tabindex="0" class="accordion-toggle">
-            <span [ngClass]="{'text-muted': isDisabled}"
-              [accordionTransclude]="headingTemplate">{{heading}}</span>
+            <span *ngIf="heading" [ngClass]="{'text-muted': isDisabled}">{{heading}}</span>
+            <ng-content select="[accordion-heading]"></ng-content>
           </a>
         </h4>
       </div>
@@ -88,9 +69,8 @@ export class AccordionTransclude implements OnInit {
   `
 })
 export class AccordionGroup implements OnInit, OnDestroy {
-  @Input() private templateUrl:string;
-  @Input() private heading:string;
-  @Input() private panelClass:string;
+  @Input() public heading:string;
+  @Input() public panelClass:string;
   @Input() public isDisabled:boolean;
 
   @HostBinding('class.panel-open')
@@ -106,7 +86,6 @@ export class AccordionGroup implements OnInit, OnDestroy {
   }
 
   private _isOpen:boolean;
-  public headingTemplate:TemplateRef;
 
   constructor(private accordion:Accordion) {
   }
@@ -127,14 +106,3 @@ export class AccordionGroup implements OnInit, OnDestroy {
     }
   }
 }
-
-@Directive({selector: '[accordion-heading]'})
-export class AccordionHeading {
-  constructor(private group:AccordionGroup, private templateRef:TemplateRef) {
-    group.headingTemplate = templateRef;
-  }
-}
-
-export const ACCORDION_DIRECTIVES:Array<any> = [Accordion, AccordionGroup, AccordionHeading];
-// will be deprecated
-export const accordion:Array<any> = [Accordion, AccordionGroup, AccordionHeading];
diff --git a/demo/components/accordion-section.ts b/demo/components/accordion-section.ts
@@ -1,15 +1,11 @@
-/// <reference path="../../tsd.d.ts" />
-
-import {
-  Component, View,
-} from 'angular2/core';
+import { Component, View } from 'angular2/core';
 import { CORE_DIRECTIVES } from 'angular2/common';
 
-import {tabs} from '../../ng2-bootstrap';
+import {TAB_DIRECTIVES} from '../../ng2-bootstrap';
 import {AccordionDemo} from './accordion/accordion-demo';
 
 let name = 'Accordion';
-let src = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/accordion/accordion.ts';
+let src = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/accordion/';
 // webpack html imports
 let doc = require('../../components/accordion/readme.md');
 let titleDoc = require('../../components/accordion/title.md');
@@ -42,12 +38,12 @@ let html = require('!!prismjs?lang=markup!./accordion/accordion-demo.html');
       <tabset>
         <tab heading="Markup">
           <div class="card card-block panel panel-default panel-body">
-            <pre class="language-html"><code class="language-html" ng-non-bindable>${html}</code></pre>
+            <pre class="language-html"><code class="language-html" ngNonBindable>${html}</code></pre>
           </div>
         </tab>
         <tab heading="TypeScript">
           <div class="card card-block panel panel-default panel-body">
-            <pre class="language-typescript"><code class="language-typescript" ng-non-bindable>${ts}</code></pre>
+            <pre class="language-typescript"><code class="language-typescript" ngNonBindable>${ts}</code></pre>
           </div>
         </tab>
       </tabset>
@@ -61,7 +57,7 @@ let html = require('!!prismjs?lang=markup!./accordion/accordion-demo.html');
     </div>
   </section>
   `,
-  directives: [AccordionDemo, tabs, CORE_DIRECTIVES]
+  directives: [AccordionDemo, CORE_DIRECTIVES]
 })
 export class AccordionSection {
 }
diff --git a/demo/components/accordion/accordion-demo.html b/demo/components/accordion/accordion-demo.html
@@ -13,6 +13,7 @@
     Open only one at a time
   </label>
 </div>
+
 <accordion [closeOthers]="oneAtATime">
   <accordion-group heading="Static Header, initially expanded"
                    [isOpen]="status.isFirstOpen"
@@ -27,12 +28,12 @@
     <button type="button" class="btn btn-primary btn-sm" (click)="addItem()">Add Item</button>
     <div *ngFor="#item of items">{{item}}</div>
   </accordion-group>
-  <accordion-group [isOpen]="status.open">
-    <template accordion-heading>
+  <accordion-group #group [isOpen]="status.open">
+    <div accordion-heading>
       I can have markup, too!
       <i class="pull-right glyphicon"
-         [ngClass]="{'glyphicon-chevron-down': isOpen, 'glyphicon-chevron-right': !isOpen}"></i>
-    </template>
+         [ngClass]="{'glyphicon-chevron-down': group?.isOpen, 'glyphicon-chevron-right': !group?.isOpen}"></i>
+    </div>
     This is just some content to illustrate fancy headings.
   </accordion-group>
 </accordion>
diff --git a/demo/components/accordion/accordion-demo.ts b/demo/components/accordion/accordion-demo.ts
@@ -1,9 +1,8 @@
 /// <reference path="../../../tsd.d.ts" />
 
-import {
-  Component, View,
-} from 'angular2/core';
-import { CORE_DIRECTIVES, FORM_DIRECTIVES, NgFor } from 'angular2/common';
+import { Component, View } from 'angular2/core';
+import { CORE_DIRECTIVES, FORM_DIRECTIVES } from 'angular2/common';
+
 import { ACCORDION_DIRECTIVES } from '../../../ng2-bootstrap';
 
 // webpack html imports

diff --git a/demo/components/alert-section.ts b/demo/components/alert-section.ts
@@ -44,12 +44,12 @@ let html = require('!!prismjs?lang=markup!./alert/alert-demo.html');
       <tabset>
         <tab heading="Markup">
           <div class="card card-block panel panel-default panel-body">
-            <pre class="language-html"><code class="language-html" ng-non-bindable>${html}</code></pre>
+            <pre class="language-html"><code class="language-html" ngNonBindable>${html}</code></pre>
           </div>
         </tab>
         <tab heading="TypeScript">
           <div class="card card-block panel panel-default panel-body">
-            <pre class="language-typescript"><code class="language-typescript" ng-non-bindable>${ts}</code></pre>
+            <pre class="language-typescript"><code class="language-typescript" ngNonBindable>${ts}</code></pre>
           </div>
         </tab>
       </tabset>

diff --git a/demo/components/collapse-section.ts b/demo/components/collapse-section.ts
@@ -44,12 +44,12 @@ let html = require('!!prismjs?lang=markup!./collapse/collapse-demo.html');
       <tabset>
         <tab heading="Markup">
           <div class="card card-block panel panel-default panel-body">
-            <pre class="language-html"><code class="language-html" ng-non-bindable>${html}</code></pre>
+            <pre class="language-html"><code class="language-html" ngNonBindable>${html}</code></pre>
           </div>
         </tab>
         <tab heading="TypeScript">
           <div class="card card-block panel panel-default panel-body">
-            <pre class="language-typescript"><code class="language-typescript" ng-non-bindable>${ts}</code></pre>
+            <pre class="language-typescript"><code class="language-typescript" ngNonBindable>${ts}</code></pre>
           </div>
         </tab>
       </tabset>

diff --git a/demo/components/datepicker-section.ts b/demo/components/datepicker-section.ts
@@ -44,12 +44,12 @@ let html = require('!!prismjs?lang=markup!./datepicker/datepicker-demo.html');
       <tabset>
         <tab heading="Markup">
           <div class="card card-block panel panel-default panel-body">
-            <pre class="language-html"><code class="language-html" ng-non-bindable>${html}</code></pre>
+            <pre class="language-html"><code class="language-html" ngNonBindable>${html}</code></pre>
           </div>
         </tab>
         <tab heading="TypeScript">
           <div class="card card-block panel panel-default panel-body">
-            <pre class="language-typescript"><code class="language-typescript" ng-non-bindable>${ts}</code></pre>
+            <pre class="language-typescript"><code class="language-typescript" ngNonBindable>${ts}</code></pre>
           </div>
         </tab>
       </tabset>

diff --git a/demo/components/demo-section.ts b/demo/components/demo-section.ts
@@ -53,12 +53,12 @@ export class DemoSectionConfig {
       <tabset>
         <tab heading="Markup">
           <div class="card card-block panel panel-default panel-body">
-            <pre class="language-html"><code class="language-html" ng-non-bindable>${html}</code></pre>
+            <pre class="language-html"><code class="language-html" ngNonBindable>${html}</code></pre>
           </div>
         </tab>
         <tab heading="TypeScript">
           <div class="card card-block panel panel-default panel-body">
-            <pre class="language-typescript"><code class="language-typescript" ng-non-bindable>${ts}</code></pre>
+            <pre class="language-typescript"><code class="language-typescript" ngNonBindable>${ts}</code></pre>
           </div>
         </tab>
       </tabset>
@@ -70,7 +70,7 @@ export class DemoSectionConfig {
       <h2>API</h2>
       <div class="card card-block panel panel-default panel-body">
       <h2>Annotations</h2>
-      <pre class="language-typescript"><code class="language-typescript" ng-non-bindable>${annotations}</code></pre>
+      <pre class="language-typescript"><code class="language-typescript" ngNonBindable>${annotations}</code></pre>
       ${doc}
       </div>
     </div>

diff --git a/demo/components/dropdown-section.ts b/demo/components/dropdown-section.ts
@@ -44,12 +44,12 @@ let html = require('!!prismjs?lang=markup!./dropdown/dropdown-demo.html');
       <tabset>
         <tab heading="Markup">
           <div class="card card-block panel panel-default panel-body">
-            <pre class="language-html"><code class="language-html" ng-non-bindable>${html}</code></pre>
+            <pre class="language-html"><code class="language-html" ngNonBindable>${html}</code></pre>
           </div>
         </tab>
         <tab heading="TypeScript">
           <div class="card card-block panel panel-default panel-body">
-            <pre class="language-typescript"><code class="language-typescript" ng-non-bindable>${ts}</code></pre>
+            <pre class="language-typescript"><code class="language-typescript" ngNonBindable>${ts}</code></pre>
           </div>
         </tab>
       </tabset>

diff --git a/demo/components/pagination-section.ts b/demo/components/pagination-section.ts
@@ -43,12 +43,12 @@ let html = require('!!prismjs?lang=markup!./pagination/pagination-demo.html');
       <tabset>
         <tab heading="Markup">
           <div class="card card-block panel panel-default panel-body">
-            <pre class="language-html"><code class="language-html" ng-non-bindable>${html}</code></pre>
+            <pre class="language-html"><code class="language-html" ngNonBindable>${html}</code></pre>
           </div>
         </tab>
         <tab heading="TypeScript">
           <div class="card card-block panel panel-default panel-body">
-            <pre class="language-typescript"><code class="language-typescript" ng-non-bindable>${ts}</code></pre>
+            <pre class="language-typescript"><code class="language-typescript" ngNonBindable>${ts}</code></pre>
           </div>
         </tab>
       </tabset>

diff --git a/demo/components/progressbar-section.ts b/demo/components/progressbar-section.ts
@@ -49,12 +49,12 @@ let html = templates[Ng2BootstrapConfig.theme];
       <tabset>
         <tab heading="Markup">
           <div class="card card-block panel panel-default panel-body">
-            <pre class="language-html"><code class="language-html" ng-non-bindable>${html}</code></pre>
+            <pre class="language-html"><code class="language-html" ngNonBindable>${html}</code></pre>
           </div>
         </tab>
         <tab heading="TypeScript">
           <div class="card card-block panel panel-default panel-body">
-            <pre class="language-typescript"><code class="language-typescript" ng-non-bindable>${ts}</code></pre>
+            <pre class="language-typescript"><code class="language-typescript" ngNonBindable>${ts}</code></pre>
           </div>
         </tab>
       </tabset>

diff --git a/demo/components/rating-section.ts b/demo/components/rating-section.ts
@@ -43,12 +43,12 @@ let html = require('!!prismjs?lang=markup!./rating/rating-demo.html');
       <tabset>
         <tab heading="Markup">
           <div class="card card-block panel panel-default panel-body">
-            <pre class="language-html"><code class="language-html" ng-non-bindable>${html}</code></pre>
+            <pre class="language-html"><code class="language-html" ngNonBindable>${html}</code></pre>
           </div>
         </tab>
         <tab heading="TypeScript">
           <div class="card card-block panel panel-default panel-body">
-            <pre class="language-typescript"><code class="language-typescript" ng-non-bindable>${ts}</code></pre>
+            <pre class="language-typescript"><code class="language-typescript" ngNonBindable>${ts}</code></pre>
           </div>
         </tab>
       </tabset>

diff --git a/demo/components/tabs-section.ts b/demo/components/tabs-section.ts
@@ -44,12 +44,12 @@ let html = require('!!prismjs?lang=markup!./tabs/tabs-demo.html');
       <tabset>
         <tab heading="Markup">
           <div class="card card-block panel panel-default panel-body">
-            <pre class="language-html"><code class="language-html" ng-non-bindable>${html}</code></pre>
+            <pre class="language-html"><code class="language-html" ngNonBindable>${html}</code></pre>
           </div>
         </tab>
         <tab heading="TypeScript">
           <div class="card card-block panel panel-default panel-body">
-            <pre class="language-typescript"><code class="language-typescript" ng-non-bindable>${ts}</code></pre>
+            <pre class="language-typescript"><code class="language-typescript" ngNonBindable>${ts}</code></pre>
           </div>
         </tab>
       </tabset>

diff --git a/demo/components/timepicker-section.ts b/demo/components/timepicker-section.ts
@@ -43,12 +43,12 @@ let html = require('!!prismjs?lang=markup!./timepicker/timepicker-demo.html');
       <tabset>
         <tab heading="Markup">
           <div class="card card-block panel panel-default panel-body">
-            <pre class="language-html"><code class="language-html" ng-non-bindable>${html}</code></pre>
+            <pre class="language-html"><code class="language-html" ngNonBindable>${html}</code></pre>
           </div>
         </tab>
         <tab heading="TypeScript">
           <div class="card card-block panel panel-default panel-body">
-            <pre class="language-typescript"><code class="language-typescript" ng-non-bindable>${ts}</code></pre>
+            <pre class="language-typescript"><code class="language-typescript" ngNonBindable>${ts}</code></pre>
           </div>
         </tab>
       </tabset>

diff --git a/demo/components/tooltip-section.ts b/demo/components/tooltip-section.ts
@@ -44,12 +44,12 @@ let html = require('!!prismjs?lang=markup!./tooltip/tooltip-demo.html');
       <tabset>
         <tab heading="Markup">
           <div class="card card-block panel panel-default panel-body">
-            <pre class="language-html"><code class="language-html" ng-non-bindable>${html}</code></pre>
+            <pre class="language-html"><code class="language-html" ngNonBindable>${html}</code></pre>
           </div>
         </tab>
         <tab heading="TypeScript">
           <div class="card card-block panel panel-default panel-body">
-            <pre class="language-typescript"><code class="language-typescript" ng-non-bindable>${ts}</code></pre>
+            <pre class="language-typescript"><code class="language-typescript" ngNonBindable>${ts}</code></pre>
           </div>
         </tab>
       </tabset>

diff --git a/demo/components/typeahead-section.ts b/demo/components/typeahead-section.ts
@@ -43,12 +43,12 @@ let html = require('!!prismjs?lang=markup!./typeahead/typeahead-demo.html');
       <tabset>
         <tab heading="Markup">
           <div class="card card-block panel panel-default panel-body">
-            <pre class="language-html"><code class="language-html" ng-non-bindable>${html}</code></pre>
+            <pre class="language-html"><code class="language-html" ngNonBindable>${html}</code></pre>
           </div>
         </tab>
         <tab heading="TypeScript">
           <div class="card card-block panel panel-default panel-body">
-            <pre class="language-typescript"><code class="language-typescript" ng-non-bindable>${ts}</code></pre>
+            <pre class="language-typescript"><code class="language-typescript" ngNonBindable>${ts}</code></pre>
           </div>
         </tab>
       </tabset>

diff --git a/demo/index.ts b/demo/index.ts
@@ -64,19 +64,19 @@ let gettingStarted = require('./getting-started.md');
     <section id="getting-started">${gettingStarted}</section>
 
     <accordion-section class="col-md-12"></accordion-section>
-    <alert-section class="col-md-12"></alert-section>
-    <buttons-section class="col-md-12"></buttons-section>
-    <carousel-section class="col-md-12"></carousel-section>
-    <collapse-section class="col-md-12"></collapse-section>
+    <!--<alert-section class="col-md-12"></alert-section>
+    <!--<buttons-section class="col-md-12"></buttons-section>
+    <!--<carousel-section class="col-md-12"></carousel-section>
+    <!--<collapse-section class="col-md-12"></collapse-section>
     <!--<datepicker-section class="col-md-12"></datepicker-section>-->
-    <dropdown-section class="col-md-12"></dropdown-section>
-    <pagination-section class="col-md-12"></pagination-section>
-    <progressbar-section class="col-md-12"></progressbar-section>
-    <rating-section class="col-md-12"></rating-section>
-    <tabs-section class="col-md-12"></tabs-section>
-    <timepicker-section class="col-md-12"></timepicker-section>
-    <tooltip-section class="col-md-12"></tooltip-section>
-    <typeahead-section class="col-md-12"></typeahead-section>
+    <!--<dropdown-section class="col-md-12"></dropdown-section>
+    <!--<pagination-section class="col-md-12"></pagination-section>
+    <!--<progressbar-section class="col-md-12"></progressbar-section>
+    <!--<rating-section class="col-md-12"></rating-section>
+    <!--<tabs-section class="col-md-12"></tabs-section>
+    <!--<timepicker-section class="col-md-12"></timepicker-section>
+    <!--<tooltip-section class="col-md-12"></tooltip-section>
+    <!--<typeahead-section class="col-md-12"></typeahead-section>-->
   </div>
 
   <footer class="footer">