mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 04:25:08 +00:00
Fixes #44 : Removed angular material elements assets
This commit is contained in:
Sercan Yemen
parent
f4c47daadc
commit
8e6024c3ee
|
|
@ -1,21 +0,0 @@
|
||||||
div {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
border: none;
|
|
||||||
background: none;
|
|
||||||
padding: 0;
|
|
||||||
outline: none;
|
|
||||||
font: inherit;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 200ms;
|
|
||||||
}
|
|
||||||
|
|
||||||
:host.floating span {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
<div [formGroup]="parts">
|
|
||||||
<input class="area" formControlName="area" size="3" [disabled]="disabled">
|
|
||||||
<span>–</span>
|
|
||||||
<input class="exchange" formControlName="exchange" size="3" [disabled]="disabled">
|
|
||||||
<span>–</span>
|
|
||||||
<input class="subscriber" formControlName="subscriber" size="4" [disabled]="disabled">
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,177 +0,0 @@
|
||||||
import { FocusMonitor } from '@angular/cdk/a11y';
|
|
||||||
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
||||||
import { Component, ElementRef, Input, OnDestroy, Renderer2 } from '@angular/core';
|
|
||||||
import { FormBuilder, FormGroup } from '@angular/forms';
|
|
||||||
import { MatFormFieldControl } from '@angular/material/form-field';
|
|
||||||
import { Subject } from 'rxjs/Subject';
|
|
||||||
|
|
||||||
/** Data structure for holding telephone number. */
|
|
||||||
export class MyTel
|
|
||||||
{
|
|
||||||
constructor(public area: string, public exchange: string, public subscriber: string)
|
|
||||||
{
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Custom `MatFormFieldControl` for telephone number input. */
|
|
||||||
@Component({
|
|
||||||
selector : 'my-tel-input',
|
|
||||||
templateUrl: 'form-field-custom-control-example.html',
|
|
||||||
styleUrls : ['form-field-custom-control-example.css'],
|
|
||||||
providers : [
|
|
||||||
{
|
|
||||||
provide : MatFormFieldControl,
|
|
||||||
useExisting: MyTelInput
|
|
||||||
}
|
|
||||||
],
|
|
||||||
host : {
|
|
||||||
'[class.floating]' : 'shouldPlaceholderFloat',
|
|
||||||
'[id]' : 'id',
|
|
||||||
'[attr.aria-describedby]': 'describedBy'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
export class MyTelInput implements MatFormFieldControl<MyTel>, OnDestroy
|
|
||||||
{
|
|
||||||
static nextId = 0;
|
|
||||||
|
|
||||||
parts: FormGroup;
|
|
||||||
|
|
||||||
stateChanges = new Subject<void>();
|
|
||||||
|
|
||||||
focused = false;
|
|
||||||
|
|
||||||
ngControl = null;
|
|
||||||
|
|
||||||
errorState = false;
|
|
||||||
|
|
||||||
controlType = 'my-tel-input';
|
|
||||||
|
|
||||||
get empty()
|
|
||||||
{
|
|
||||||
let n = this.parts.value;
|
|
||||||
return !n.area && !n.exchange && !n.subscriber;
|
|
||||||
}
|
|
||||||
|
|
||||||
get shouldPlaceholderFloat()
|
|
||||||
{
|
|
||||||
return this.focused || !this.empty;
|
|
||||||
}
|
|
||||||
|
|
||||||
id = `my-tel-input-${MyTelInput.nextId++}`;
|
|
||||||
|
|
||||||
describedBy = '';
|
|
||||||
|
|
||||||
@Input()
|
|
||||||
get placeholder()
|
|
||||||
{
|
|
||||||
return this._placeholder;
|
|
||||||
}
|
|
||||||
|
|
||||||
set placeholder(plh)
|
|
||||||
{
|
|
||||||
this._placeholder = plh;
|
|
||||||
this.stateChanges.next();
|
|
||||||
}
|
|
||||||
|
|
||||||
private _placeholder: string;
|
|
||||||
|
|
||||||
@Input()
|
|
||||||
get required()
|
|
||||||
{
|
|
||||||
return this._required;
|
|
||||||
}
|
|
||||||
|
|
||||||
set required(req)
|
|
||||||
{
|
|
||||||
this._required = coerceBooleanProperty(req);
|
|
||||||
this.stateChanges.next();
|
|
||||||
}
|
|
||||||
|
|
||||||
private _required = false;
|
|
||||||
|
|
||||||
@Input()
|
|
||||||
get disabled()
|
|
||||||
{
|
|
||||||
return this._disabled;
|
|
||||||
}
|
|
||||||
|
|
||||||
set disabled(dis)
|
|
||||||
{
|
|
||||||
this._disabled = coerceBooleanProperty(dis);
|
|
||||||
this.stateChanges.next();
|
|
||||||
}
|
|
||||||
|
|
||||||
private _disabled = false;
|
|
||||||
|
|
||||||
@Input()
|
|
||||||
get value(): MyTel | null
|
|
||||||
{
|
|
||||||
let n = this.parts.value;
|
|
||||||
if ( n.area.length == 3 && n.exchange.length == 3 && n.subscriber.length == 4 )
|
|
||||||
{
|
|
||||||
return new MyTel(n.area, n.exchange, n.subscriber);
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
set value(tel: MyTel | null)
|
|
||||||
{
|
|
||||||
tel = tel || new MyTel('', '', '');
|
|
||||||
this.parts.setValue({
|
|
||||||
area : tel.area,
|
|
||||||
exchange : tel.exchange,
|
|
||||||
subscriber: tel.subscriber
|
|
||||||
});
|
|
||||||
this.stateChanges.next();
|
|
||||||
}
|
|
||||||
|
|
||||||
constructor(fb: FormBuilder, private fm: FocusMonitor, private elRef: ElementRef,
|
|
||||||
renderer: Renderer2
|
|
||||||
)
|
|
||||||
{
|
|
||||||
this.parts = fb.group({
|
|
||||||
'area' : '',
|
|
||||||
'exchange' : '',
|
|
||||||
'subscriber': ''
|
|
||||||
});
|
|
||||||
|
|
||||||
fm.monitor(elRef.nativeElement, renderer, true).subscribe((origin) => {
|
|
||||||
this.focused = !!origin;
|
|
||||||
this.stateChanges.next();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
ngOnDestroy()
|
|
||||||
{
|
|
||||||
this.stateChanges.complete();
|
|
||||||
this.fm.stopMonitoring(this.elRef.nativeElement);
|
|
||||||
}
|
|
||||||
|
|
||||||
setDescribedByIds(ids: string[])
|
|
||||||
{
|
|
||||||
this.describedBy = ids.join(' ');
|
|
||||||
}
|
|
||||||
|
|
||||||
onContainerClick(event: MouseEvent)
|
|
||||||
{
|
|
||||||
if ( (event.target as Element).tagName.toLowerCase() != 'input' )
|
|
||||||
{
|
|
||||||
this.elRef.nativeElement.querySelector('input').focus();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** @title Form field with custom telephone number input control. */
|
|
||||||
@Component({
|
|
||||||
selector: 'form-field-custom-control-example',
|
|
||||||
template: `
|
|
||||||
<mat-form-field>
|
|
||||||
<my-tel-input placeholder="Phone number" required></my-tel-input>
|
|
||||||
<mat-icon matSuffix>phone</mat-icon>
|
|
||||||
<mat-hint>Include area code</mat-hint>
|
|
||||||
</mat-form-field>
|
|
||||||
`
|
|
||||||
})
|
|
||||||
export class FormFieldCustomControlExample
|
|
||||||
{
|
|
||||||
}
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
.example-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.example-container > * {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
<div class="example-container">
|
|
||||||
<mat-form-field>
|
|
||||||
<input matInput placeholder="Enter your email" [formControl]="email" required>
|
|
||||||
<mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
|
|
||||||
</mat-form-field>
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
import { Component } from '@angular/core';
|
|
||||||
import { FormControl, Validators } from '@angular/forms';
|
|
||||||
|
|
||||||
/** @title Form field with error messages */
|
|
||||||
@Component({
|
|
||||||
selector : 'form-field-error-example',
|
|
||||||
templateUrl: 'form-field-error-example.html',
|
|
||||||
styleUrls : ['form-field-error-example.css']
|
|
||||||
})
|
|
||||||
export class FormFieldErrorExample
|
|
||||||
{
|
|
||||||
email = new FormControl('', [Validators.required, Validators.email]);
|
|
||||||
|
|
||||||
getErrorMessage()
|
|
||||||
{
|
|
||||||
return this.email.hasError('required') ? 'You must enter a value' :
|
|
||||||
this.email.hasError('email') ? 'Not a valid email' :
|
|
||||||
'';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
.example-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.example-container > * {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
<div class="example-container">
|
|
||||||
<mat-form-field hintLabel="Max 10 characters">
|
|
||||||
<input matInput #input maxlength="10" placeholder="Enter some input">
|
|
||||||
<mat-hint align="end">{{input.value?.length || 0}}/10</mat-hint>
|
|
||||||
</mat-form-field>
|
|
||||||
|
|
||||||
<mat-form-field>
|
|
||||||
<mat-select placeholder="Select me">
|
|
||||||
<mat-option value="option">Option</mat-option>
|
|
||||||
</mat-select>
|
|
||||||
<mat-hint align="end">Here's the dropdown arrow ^</mat-hint>
|
|
||||||
</mat-form-field>
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
import { Component } from '@angular/core';
|
|
||||||
|
|
||||||
/** @title Form field with hints */
|
|
||||||
@Component({
|
|
||||||
selector : 'form-field-hint-example',
|
|
||||||
templateUrl: 'form-field-hint-example.html',
|
|
||||||
styleUrls : ['form-field-hint-example.css']
|
|
||||||
})
|
|
||||||
export class FormFieldHintExample
|
|
||||||
{
|
|
||||||
}
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
.example-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.example-container > * {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
<div class="example-container">
|
|
||||||
<mat-form-field>
|
|
||||||
<input matInput placeholder="Input">
|
|
||||||
</mat-form-field>
|
|
||||||
|
|
||||||
<mat-form-field>
|
|
||||||
<textarea matInput placeholder="Textarea"></textarea>
|
|
||||||
</mat-form-field>
|
|
||||||
|
|
||||||
<mat-form-field>
|
|
||||||
<mat-select placeholder="Select">
|
|
||||||
<mat-option value="option">Option</mat-option>
|
|
||||||
</mat-select>
|
|
||||||
</mat-form-field>
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
import { Component } from '@angular/core';
|
|
||||||
|
|
||||||
/** @title Simple form field */
|
|
||||||
@Component({
|
|
||||||
selector : 'form-field-overview-example',
|
|
||||||
templateUrl: 'form-field-overview-example.html',
|
|
||||||
styleUrls : ['form-field-overview-example.css']
|
|
||||||
})
|
|
||||||
export class FormFieldOverviewExample
|
|
||||||
{
|
|
||||||
}
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
.example-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.example-container > * {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.example-container form {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.example-container form > * {
|
|
||||||
margin: 5px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.example-container .mat-radio-button {
|
|
||||||
margin: 0 5px;
|
|
||||||
}
|
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
<div class="example-container">
|
|
||||||
<form class="example-container" [formGroup]="options">
|
|
||||||
<mat-checkbox formControlName="hideRequired">Hide required marker</mat-checkbox>
|
|
||||||
<div>
|
|
||||||
<label>Float placeholder: </label>
|
|
||||||
<mat-radio-group formControlName="floatPlaceholder">
|
|
||||||
<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"
|
|
||||||
[floatPlaceholder]="options.value.floatPlaceholder">
|
|
||||||
<input matInput placeholder="Simple placeholder" required>
|
|
||||||
</mat-form-field>
|
|
||||||
|
|
||||||
<mat-form-field
|
|
||||||
[hideRequiredMarker]="options.value.hideRequired"
|
|
||||||
[floatPlaceholder]="options.value.floatPlaceholder">
|
|
||||||
<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,21 +0,0 @@
|
||||||
import { Component } from '@angular/core';
|
|
||||||
import { FormBuilder, FormGroup } from '@angular/forms';
|
|
||||||
|
|
||||||
/** @title Form field with placeholder */
|
|
||||||
@Component({
|
|
||||||
selector : 'form-field-placeholder-example',
|
|
||||||
templateUrl: 'form-field-placeholder-example.html',
|
|
||||||
styleUrls : ['form-field-placeholder-example.css']
|
|
||||||
})
|
|
||||||
export class FormFieldPlaceholderExample
|
|
||||||
{
|
|
||||||
options: FormGroup;
|
|
||||||
|
|
||||||
constructor(fb: FormBuilder)
|
|
||||||
{
|
|
||||||
this.options = fb.group({
|
|
||||||
hideRequired : false,
|
|
||||||
floatPlaceholder: 'auto'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
.example-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.example-container > * {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.example-right-align {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
input.example-right-align::-webkit-outer-spin-button,
|
|
||||||
input.example-right-align::-webkit-inner-spin-button {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
<div class="example-container">
|
|
||||||
<mat-form-field>
|
|
||||||
<input matInput placeholder="Enter your password" [type]="hide ? 'password' : 'text'">
|
|
||||||
<mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
|
|
||||||
</mat-form-field>
|
|
||||||
|
|
||||||
<mat-form-field>
|
|
||||||
<input matInput placeholder="Amount" type="number" class="example-right-align">
|
|
||||||
<span matPrefix>$ </span>
|
|
||||||
<span matSuffix>.00</span>
|
|
||||||
</mat-form-field>
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
import { Component } from '@angular/core';
|
|
||||||
|
|
||||||
/** @title Form field with prefix & suffix */
|
|
||||||
@Component({
|
|
||||||
selector : 'form-field-prefix-suffix-example',
|
|
||||||
templateUrl: 'form-field-prefix-suffix-example.html',
|
|
||||||
styleUrls : ['form-field-prefix-suffix-example.css']
|
|
||||||
})
|
|
||||||
export class FormFieldPrefixSuffixExample
|
|
||||||
{
|
|
||||||
hide = true;
|
|
||||||
}
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
.example-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.example-container > * {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
<form class="example-container" [formGroup]="options" [style.fontSize.px]="getFontSize()">
|
|
||||||
<mat-form-field [color]="options.value.color">
|
|
||||||
<mat-select placeholder="Color" formControlName="color">
|
|
||||||
<mat-option value="primary">Primary</mat-option>
|
|
||||||
<mat-option value="accent">Accent</mat-option>
|
|
||||||
<mat-option value="warn">Warn</mat-option>
|
|
||||||
</mat-select>
|
|
||||||
</mat-form-field>
|
|
||||||
|
|
||||||
<mat-form-field [color]="options.value.color">
|
|
||||||
<input matInput type="number" placeholder="Font size (px)" formControlName="fontSize" min="10">
|
|
||||||
<mat-error *ngIf="options.get('fontSize').invalid">Min size: 10px</mat-error>
|
|
||||||
</mat-form-field>
|
|
||||||
</form>
|
|
||||||
|
|
@ -1,26 +0,0 @@
|
||||||
import { Component } from '@angular/core';
|
|
||||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
|
||||||
|
|
||||||
/** @title Form field theming */
|
|
||||||
@Component({
|
|
||||||
selector : 'form-field-theming-example',
|
|
||||||
templateUrl: 'form-field-theming-example.html',
|
|
||||||
styleUrls : ['form-field-theming-example.css']
|
|
||||||
})
|
|
||||||
export class FormFieldThemingExample
|
|
||||||
{
|
|
||||||
options: FormGroup;
|
|
||||||
|
|
||||||
constructor(fb: FormBuilder)
|
|
||||||
{
|
|
||||||
this.options = fb.group({
|
|
||||||
'color' : 'primary',
|
|
||||||
'fontSize': [16, Validators.min(10)]
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
getFontSize()
|
|
||||||
{
|
|
||||||
return Math.max(10, this.options.value.fontSize);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue
Block a user