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