Removed unnecessary Angular Material example files, fixes AoT builds

This commit is contained in:
Sercan Yemen 2018-03-09 06:30:59 +03:00
commit 7c50487164
29 changed files with 0 additions and 440 deletions

View File

@ -1,9 +0,0 @@
.example-form {
min-width: 150px;
max-width: 500px;
width: 100%;
}
.example-full-width {
width: 100%;
}

View File

@ -1,10 +0,0 @@
<form class="example-form">
<mat-form-field class="example-full-width">
<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
{{ option }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>

View File

@ -1,31 +0,0 @@
import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
import {Observable} from 'rxjs/Observable';
import {startWith} from 'rxjs/operators/startWith';
import {map} from 'rxjs/operators/map';
/**
* @title Highlight the first autocomplete option
*/
@Component({
selector: 'autocomplete-auto-active-first-option-example',
templateUrl: 'autocomplete-auto-active-first-option-example.html',
styleUrls: ['autocomplete-auto-active-first-option-example.css']
})
export class AutocompleteAutoActiveFirstOptionExample {
myControl: FormControl = new FormControl();
options = ['One', 'Two', 'Three'];
filteredOptions: Observable<string[]>;
ngOnInit() {
this.filteredOptions = this.myControl.valueChanges.pipe(
startWith(''),
map(val => this.filter(val))
);
}
filter(val: string): string[] {
return this.options.filter(option => option.toLowerCase().indexOf(val.toLowerCase()) === 0);
}
}

View File

@ -1,7 +0,0 @@
<mat-form-field class="example-full-width">
<input matInput [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker">
<mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon>
</mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>

View File

@ -1,9 +0,0 @@
import {Component} from '@angular/core';
/** @title Datepicker with custom icon */
@Component({
selector: 'datepicker-custom-icon-example',
templateUrl: 'datepicker-custom-icon-example.html',
styleUrls: ['datepicker-custom-icon-example.css'],
})
export class DatepickerCustomIconExample {}

View File

@ -1 +0,0 @@
/** No CSS for this example */

View File

@ -1,7 +0,0 @@
<mat-list>
<mat-list-item>Item 1</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>Item 2</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item>Item 3</mat-list-item>
</mat-list>

View File

@ -1,11 +0,0 @@
import {Component} from '@angular/core';
/**
* @title Basic divider
*/
@Component({
selector: 'divider-overview-example',
templateUrl: 'divider-overview-example.html',
styleUrls: ['divider-overview-example.css'],
})
export class DividerOverviewExample {}

View File

@ -1,34 +0,0 @@
<div class="example-container">
<form class="example-container" [formGroup]="options">
<mat-checkbox formControlName="hideRequired">Hide required marker</mat-checkbox>
<div>
<label>Float label: </label>
<mat-radio-group formControlName="floatLabel">
<mat-radio-button value="auto">Auto</mat-radio-button>
<mat-radio-button value="always">Always</mat-radio-button>
<mat-radio-button value="never">Never</mat-radio-button>
</mat-radio-group>
</div>
</form>
<mat-form-field
[hideRequiredMarker]="options.value.hideRequired"
[floatLabel]="options.value.floatLabel">
<input matInput placeholder="Simple placeholder" required>
</mat-form-field>
<mat-form-field [floatLabel]="options.value.floatLabel">
<mat-label>Both a label and a placeholder</mat-label>
<input matInput placeholder="Simple placeholder">
</mat-form-field>
<mat-form-field
[hideRequiredMarker]="options.value.hideRequired"
[floatLabel]="options.value.floatLabel">
<mat-select required>
<mat-option>-- None --</mat-option>
<mat-option value="option">Option</mat-option>
</mat-select>
<mat-placeholder><mat-icon>favorite</mat-icon> <b> Fancy</b> <i> placeholder</i></mat-placeholder>
</mat-form-field>
</div>

View File

@ -1,19 +0,0 @@
import {Component} from '@angular/core';
import {FormBuilder, FormGroup} from '@angular/forms';
/** @title Form field with label */
@Component({
selector: 'form-field-label-example',
templateUrl: 'form-field-label-example.html',
styleUrls: ['form-field-label-example.css']
})
export class FormFieldLabelExample {
options: FormGroup;
constructor(fb: FormBuilder) {
this.options = fb.group({
hideRequired: false,
floatLabel: 'auto',
});
}
}

View File

@ -1 +0,0 @@
/** No CSS for this example */

View File

@ -1,19 +0,0 @@
import {Component} from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';
import {MatIconRegistry} from '@angular/material';
/**
* @title SVG icons
*/
@Component({
selector: 'icon-svg-example',
templateUrl: 'icon-svg-example.html',
styleUrls: ['icon-svg-example.css'],
})
export class IconSvgExample {
constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
iconRegistry.addSvgIcon(
'thumbs-up',
sanitizer.bypassSecurityTrustResourceUrl('assets/images/examples/thumbup-icon.svg'));
}
}

View File

@ -1,16 +0,0 @@
.example-container {
width: 500px;
height: 300px;
border: 1px solid rgba(0, 0, 0, 0.5);
}
.example-sidenav-content {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
}
.example-sidenav {
padding: 20px;
}

View File

@ -1,16 +0,0 @@
<mat-drawer-container class="example-container" autosize>
<mat-drawer #drawer class="example-sidenav" mode="side">
<p>Auto-resizing sidenav</p>
<p *ngIf="showFiller">Lorem, ipsum dolor sit amet consectetur.</p>
<button (click)="showFiller = !showFiller" mat-raised-button>
Toggle extra text
</button>
</mat-drawer>
<div class="example-sidenav-content">
<button type="button" mat-button (click)="drawer.toggle()">
Toggle sidenav
</button>
</div>
</mat-drawer-container>

View File

@ -1,13 +0,0 @@
import {Component} from '@angular/core';
/**
* @title Autosize sidenav
*/
@Component({
selector: 'sidenav-autosize-example',
templateUrl: 'sidenav-autosize-example.html',
styleUrls: ['sidenav-autosize-example.css'],
})
export class SidenavAutosizeExample {
showFiller = false;
}

View File

@ -1,19 +0,0 @@
<mat-form-field>
<mat-select placeholder="Horizontal position" [(value)]="horizontalPosition">
<mat-option value="start">Start</mat-option>
<mat-option value="center">Center</mat-option>
<mat-option value="end">End</mat-option>
<mat-option value="left">Left</mat-option>
<mat-option value="right">Right</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Vertical position" [(value)]="verticalPosition">
<mat-option value="top">Top</mat-option>
<mat-option value="bottom">Bottom</mat-option>
</mat-select>
</mat-form-field>
<button mat-button (click)="openSnackBar()" aria-label="Show an example snack-bar">
Pool party!
</button>

View File

@ -1,29 +0,0 @@
import {Component} from '@angular/core';
import {
MatSnackBar,
MatSnackBarHorizontalPosition,
MatSnackBarVerticalPosition,
} from '@angular/material';
/**
* @title Snack-bar with configurable position
*/
@Component({
selector: 'snack-bar-position-example',
templateUrl: 'snack-bar-position-example.html',
})
export class SnackBarPositionExample {
horizontalPosition: MatSnackBarHorizontalPosition = 'start';
verticalPosition: MatSnackBarVerticalPosition = 'bottom';
constructor(public snackBar: MatSnackBar) {}
openSnackBar() {
this.snackBar.open('Canonball!!', 'End now', {
duration: 500,
horizontalPosition: this.horizontalPosition,
verticalPosition: this.verticalPosition,
});
}
}

View File

@ -1,15 +0,0 @@
.example-container {
display: flex;
flex-direction: column;
max-height: 500px;
min-width: 300px;
}
.mat-table {
overflow: auto;
max-height: 500px;
}
.mat-column-select {
overflow: visible;
}

View File

@ -1,49 +0,0 @@
<div class="example-container mat-elevation-z8">
<mat-table #table [dataSource]="dataSource">
<!-- Checkbox Column -->
<ng-container matColumnDef="select">
<mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</mat-header-cell>
<mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)">
</mat-checkbox>
</mat-cell>
</ng-container>
<!-- Position Column -->
<ng-container matColumnDef="position">
<mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"
(click)="selection.toggle(row)">
</mat-row>
</mat-table>
</div>

View File

@ -1,61 +0,0 @@
import {Component} from '@angular/core';
import {MatTableDataSource} from '@angular/material';
import {SelectionModel} from '@angular/cdk/collections';
/**
* @title Table with selection
*/
@Component({
selector: 'table-selection-example',
styleUrls: ['table-selection-example.css'],
templateUrl: 'table-selection-example.html',
})
export class TableSelectionExample {
displayedColumns = ['select', 'position', 'name', 'weight', 'symbol'];
dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
selection = new SelectionModel<Element>(true, []);
/** Whether the number of selected elements matches the total number of rows. */
isAllSelected() {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.data.length;
return numSelected === numRows;
}
/** Selects all rows if they are not all selected; otherwise clear selection. */
masterToggle() {
this.isAllSelected() ?
this.selection.clear() :
this.dataSource.data.forEach(row => this.selection.select(row));
}
}
export interface Element {
name: string;
position: number;
weight: number;
symbol: string;
}
const ELEMENT_DATA: Element[] = [
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
{position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
{position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
{position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
{position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
{position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
{position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na'},
{position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg'},
{position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al'},
{position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si'},
{position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P'},
{position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S'},
{position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl'},
{position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar'},
{position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K'},
{position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca'},
];

View File

@ -1,3 +0,0 @@
button {
margin: 8px;
}

View File

@ -1,7 +0,0 @@
<button mat-raised-button matTooltip="Tooltip!" matTooltipShowDelay="1000">
My tooltip waits one second to show
</button>
<button mat-raised-button matTooltip="Tooltip!" matTooltipHideDelay="2000">
My tooltip waits two seconds to hide
</button>

View File

@ -1,11 +0,0 @@
import {Component} from '@angular/core';
/**
* @title Tooltip with a show and hide delay
*/
@Component({
selector: 'tooltip-delay-example',
templateUrl: 'tooltip-delay-example.html',
styleUrls: ['tooltip-delay-example.css'],
})
export class TooltipDelayExample {}

View File

@ -1 +0,0 @@
/** No CSS for this example */

View File

@ -1,5 +0,0 @@
<button mat-raised-button (click)="tooltip.show()"> Show tooltip </button>
<span matTooltip="This is the tooltip message" #tooltip="matTooltip">
I have a tooltip
</span>

View File

@ -1,11 +0,0 @@
import {Component} from '@angular/core';
/**
* @title Tooltip that can be manually shown/hidden.
*/
@Component({
selector: 'tooltip-manual-example',
templateUrl: 'tooltip-manual-example.html',
styleUrls: ['tooltip-manual-example.css'],
})
export class TooltipManualExample {}

View File

@ -1,3 +0,0 @@
<button mat-raised-button matTooltip="By default, I delay">
Button with delay-default tooltip
</button>

View File

@ -1,22 +0,0 @@
import {Component} from '@angular/core';
import {MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltipDefaultOptions} from '@angular/material';
/** Custom options the configure the tooltip's default show/hide delays. */
export const myCustomTooltipDefaults: MatTooltipDefaultOptions = {
showDelay: 1000,
hideDelay: 1000,
touchendHideDelay: 1000,
};
/**
* @title Tooltip with a show and hide delay
*/
@Component({
selector: 'tooltip-modified-defaults-example',
templateUrl: 'tooltip-modified-defaults-example.html',
styleUrls: ['tooltip-modified-defaults-example.css'],
providers: [
{provide: MAT_TOOLTIP_DEFAULT_OPTIONS, useValue: myCustomTooltipDefaults}
],
})
export class TooltipModifiedDefaultsExample {}