Skip to content

Commit

Permalink
Merge branch 'develop' into feature/chipRemove
Browse files Browse the repository at this point in the history
  • Loading branch information
@JoshSchoen
JoshSchoen authored May 31, 2017
2 parents 67cf2ee + 363bf24 commit 519be0a
Show file tree
Hide file tree
Showing 22 changed files with 657 additions and 407 deletions.
58 changes: 44 additions & 14 deletions src/app/components/components/chips/chips.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,23 +105,26 @@
</md-card>
<md-card>
<md-card-title>Chips &amp; Autocomplete with objects</md-card-title>
<md-card-subtitle>Autocomplete with chips and templates</md-card-subtitle>
<md-card-subtitle>Autocomplete with chips and templates and accent color</md-card-subtitle>
<md-divider></md-divider>
<md-tab-group md-stretch-tabs dynamicHeight>
<md-tab>
<ng-template md-tab-label>Demo</ng-template>
<div class="push">
<div class="md-body-1">Type and select a preset option or press enter:</div>
<td-chips [items]="filteredObjects"
<td-chips color="accent"
[items]="filteredObjects"
[(ngModel)]="objectsModel"
placeholder="Enter autocomplete strings"
(inputChange)="filterObjects($event)"
requireMatch>
<ng-template td-basic-chip let-chip="chip">
{{chip.city}}, (Pop: {{chip.population}})
<md-icon>location_city</md-icon> {{chip.city}}, (Pop: {{chip.population}})
</ng-template>
<ng-template td-autocomplete-option let-option="option">
<md-icon>location_city</md-icon> {{option.city}}
<div layout="row" layout-align="start center">
<md-icon>location_city</md-icon> {{option.city}}
</div>
</ng-template>
</td-chips>
</div>
Expand All @@ -132,16 +135,19 @@
<p>HTML:</p>
<td-highlight lang="html">
<![CDATA[
<td-chips [items]="filteredObjects"
<td-chips color="accent"
[items]="filteredObjects"
[(ngModel)]="objectsModel"
placeholder="Enter autocomplete strings"
(inputChange)="filterObjects($event)"
requireMatch>
<ng-template td-basic-chip let-chip="chip">
{ {chip.city} }, (Pop: { {chip.population} })
<md-icon>location_city</md-icon> { {chip.city} }, (Pop: { {chip.population} })
</ng-template>
<ng-template td-autocomplete-option let-option="option">
<md-icon>location_city</md-icon> { {option.city} }
<div layout="row" layout-align="start center">
<md-icon>location_city</md-icon> { {option.city} }
</div>
</ng-template>
</td-chips>
]]>
Expand Down Expand Up @@ -265,15 +271,20 @@
</md-tab-group>
</md-card>
<md-card>
<md-card-title>Autocomplete with custom inputs</md-card-title>
<md-card-subtitle>Autocomplete demo allowing custom inputs</md-card-subtitle>
<md-card-title>Stacked chips and Autocomplete with custom inputs</md-card-title>
<md-card-subtitle>Autocomplete demo allowing custom inputs and stacked chips</md-card-subtitle>
<md-divider></md-divider>
<md-tab-group md-stretch-tabs dynamicHeight>
<md-tab>
<ng-template md-tab-label>Demo</ng-template>
<div class="push">
<div class="md-body-1">Type and select option or enter custom text and press enter:</div>
<td-chips [items]="strings" placeholder="Enter any string"></td-chips>
<td-chips [items]="filteredStackedStrings"
[(ngModel)]="stackedStringsModel"
placeholder="Enter any string"
(inputChange)="filterStackedStrings($event)"
stacked>
</td-chips>
</div>
</md-tab>
<md-tab>
Expand All @@ -282,7 +293,12 @@
<p>HTML:</p>
<td-highlight lang="html">
<![CDATA[
<td-chips [items]="strings" placeholder="Enter any string"></td-chips>
<td-chips [items]="filteredStackedStrings"
[(ngModel)]="stackedStringsModel"
placeholder="Enter any string"
(inputChange)="filterStackedStrings($event)"
stacked>
</td-chips>
]]>
</td-highlight>
<p>Typescript:</p>
Expand All @@ -304,6 +320,20 @@
'need more?',
];

filteredStackedStrings: string[];

stackedStringsModel: string[] = this.strings.slice(0, 2);

filterStackedStrings(value: string): void {
this.filteredStackedStrings = this.strings.filter((item: any) => {
if (value) {
return item.toLowerCase().indexOf(value.toLowerCase()) > -1;
} else {
return false;
}
});
}

}
]]>
</td-highlight>
Expand All @@ -313,14 +343,14 @@
</md-card>
<md-card>
<md-card-title>Custom chips</md-card-title>
<md-card-subtitle>Demo allowing custom inputs for tags</md-card-subtitle>
<md-card-subtitle>Demo allowing custom inputs for tags and warn color</md-card-subtitle>
<md-divider></md-divider>
<md-tab-group md-stretch-tabs dynamicHeight>
<md-tab>
<ng-template md-tab-label>Demo</ng-template>
<div class="push">
<div class="md-body-1">Type any test and press enter:</div>
<td-chips placeholder="Enter any string"></td-chips>
<td-chips color="warn" placeholder="Enter any string"></td-chips>
</div>
</md-tab>
<md-tab>
Expand All @@ -329,7 +359,7 @@
<p>HTML:</p>
<td-highlight lang="html">
<![CDATA[
<td-chips placeholder="Enter any string"></td-chips>
<td-chips color="warn" placeholder="Enter any string"></td-chips>
]]>
</td-highlight>
<p>Typescript:</p>
Expand Down
14 changes: 14 additions & 0 deletions src/app/components/components/chips/chips.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,10 @@ export class ChipsDemoComponent implements OnInit {

asyncModel: string[] = this.strings.slice(0, 2);

filteredStackedStrings: string[];

stackedStringsModel: string[] = this.strings.slice(0, 2);

ngOnInit(): void {
this.filterStrings('');
this.filterObjects('');
Expand Down Expand Up @@ -96,4 +100,14 @@ export class ChipsDemoComponent implements OnInit {
}, 2000);
}
}

filterStackedStrings(value: string): void {
this.filteredStackedStrings = this.strings.filter((item: any) => {
if (value) {
return item.toLowerCase().indexOf(value.toLowerCase()) > -1;
} else {
return false;
}
});
}
}
1 change: 1 addition & 0 deletions src/app/components/components/components.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,7 @@ import { DocumentationToolsModule } from '../../documentation-tools';
MdTabsModule,
MdTooltipModule,
MdProgressBarModule,
MdAutocompleteModule,
/** Covalent Modules */
CovalentCommonModule,
CovalentLayoutModule,
Expand Down
2 changes: 2 additions & 0 deletions src/app/components/components/data-table/data-table.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -267,6 +267,7 @@ <h3>No results to display.</h3>
[multiple]="multiple"
[sortable]="true"
[sortBy]="sortBy"
[(ngModel)]="selectedRows"
[sortOrder]="sortOrder"
(sortChange)="sort($event)">
</td-data-table>
Expand Down Expand Up @@ -305,6 +306,7 @@ <h3>No results to display.</h3>
currentPage: number = 1;
pageSize: number = 5;
sortBy: string = 'sku';
selectedRows: any[] = [];
sortOrder: TdDataTableSortingOrder = TdDataTableSortingOrder.Descending;

constructor(private _dataTableService: TdDataTableService) {}
Expand Down
45 changes: 16 additions & 29 deletions src/app/components/components/directives/directives.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,22 @@
<p>A directive is essentially like a component functionally without a template. There are structural and attribute directives.</p>
<p>Structural directives can change the DOM layout by adding and removing DOM elements. NgFor and NgIf are two familiar examples.</p>
<p>An Attribute directive can change the appearance or behavior of an element. The built-in NgStyle directive, for example, can change several element styles at the same time.</p>

<h3>Setup:</h3>
<p>Import the [CovalentCommonModule] in your NgModule:</p>
<td-highlight lang="typescript">
<![CDATA[
import { CovalentCommonModule } from '@covalent/core';
@NgModule({
imports: [
CovalentCommonModule,
...
],
...
})
export class MyModule {}
]]>
</td-highlight>
</md-card-content>
<md-divider></md-divider>
<md-card-actions>
Expand Down Expand Up @@ -102,32 +118,3 @@
</td-highlight>
</md-card-content>
</md-card>

<md-card>
<md-card-title>Min/Max Validators</md-card-title>
<md-divider></md-divider>
<md-card-content>
<p class="md-body-1">We've added min/max validations since @angular doesnt support them at the moment.</p>
<p>Supported:</p>
<ul>
<li><code>TdMinValidator</code> for selector: <code>[min][formControlName]</code>,<code>[min][formControl]</code>,<code>[min][ngModel]</code></li>
<li><code>TdMaxValidator</code> for selector: <code>[max][formControlName]</code>,<code>[max][formControl]</code>,<code>[max][ngModel]</code></li>
</ul>
<p>Example enter lower than 5 or higher than 10:</p>
<div layout="row">
<md-input-container flex="20">
<input mdInput placeholder="CPUs" #el="ngModel" type="number" [(ngModel)]="val" min="5" max="10" required/>
</md-input-container>
</div>
<p>Errors:</p>
<code>{{el?.errors | json}}</code>
<p>HTML:</p>
<td-highlight lang="html">
<![CDATA[
<md-input-container>
<input mdInput placeholder="CPUs" #el="ngModel" type="number" [(ngModel)]="val" min="5" max="10" required/>
</md-input-container>
]]>
</td-highlight>
</md-card-content>
</md-card>
Loading

0 comments on commit 519be0a

Please sign in to comment.