mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-11-04 00:53:34 +00:00
Removed unnecessary Angular Material example files, fixes AoT builds
This commit is contained in:
Sercan Yemen
commit
7c50487164
@ -1,9 +0,0 @@
|
||||
.example-form {
|
||||
min-width: 150px;
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.example-full-width {
|
||||
width: 100%;
|
||||
}
|
||||
@ -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>
|
||||
@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
@ -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>
|
||||
@ -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 {}
|
||||
@ -1 +0,0 @@
|
||||
/** No CSS for this example */
|
||||
@ -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>
|
||||
@ -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 {}
|
||||
@ -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>
|
||||
@ -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',
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
/** No CSS for this example */
|
||||
@ -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'));
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
@ -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>
|
||||
@ -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;
|
||||
}
|
||||
@ -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>
|
||||
@ -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,
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
@ -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>
|
||||
@ -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'},
|
||||
];
|
||||
@ -1,3 +0,0 @@
|
||||
button {
|
||||
margin: 8px;
|
||||
}
|
||||
@ -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>
|
||||
@ -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 {}
|
||||
@ -1 +0,0 @@
|
||||
/** No CSS for this example */
|
||||
@ -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>
|
||||
@ -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 {}
|
||||
@ -1 +0,0 @@
|
||||
/** No CSS for this example */
|
||||
@ -1,3 +0,0 @@
|
||||
<button mat-raised-button matTooltip="By default, I delay">
|
||||
Button with delay-default tooltip
|
||||
</button>
|
||||
@ -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 {}
|
||||
Loading…
x
Reference in New Issue
Block a user