mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-12-24 21:17:06 +00:00
Compare commits
9 Commits
v1.2.0-ske
...
v1.2.1-ske
| Author | SHA1 | Date | |
|---|---|---|---|
|
4659da7390 | ||
|
|
2a5d15694c | ||
|
|
a1bec98d44 | ||
|
|
e8449e340d | ||
|
|
4cb8009c69 | ||
|
|
7f357306eb | ||
|
|
8e6024c3ee | ||
|
|
f4c47daadc | ||
|
|
06679343a4 |
@@ -1,10 +1,10 @@
|
||||
import { AppPage } from './app.po';
|
||||
import { Fuse2Page } from './app.po';
|
||||
|
||||
describe('angular5 App', () => {
|
||||
let page: AppPage;
|
||||
describe('Fuse2 App', () => {
|
||||
let page: Fuse2Page;
|
||||
|
||||
beforeEach(() => {
|
||||
page = new AppPage();
|
||||
page = new Fuse2Page();
|
||||
});
|
||||
|
||||
it('should display welcome message', () => {
|
||||
|
||||
@@ -1,14 +1,11 @@
|
||||
import { AppPage } from './app.po';
|
||||
import { browser, by, element } from 'protractor';
|
||||
|
||||
describe('Fuse App', () => {
|
||||
let page: AppPage;
|
||||
export class Fuse2Page {
|
||||
navigateTo() {
|
||||
return browser.get('/');
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
page = new AppPage();
|
||||
});
|
||||
|
||||
it('should display welcome message', () => {
|
||||
page.navigateTo();
|
||||
expect(page.getParagraphText()).toEqual('Welcome to app!');
|
||||
});
|
||||
});
|
||||
getParagraphText() {
|
||||
return element(by.css('app-root h1')).getText();
|
||||
}
|
||||
}
|
||||
|
||||
92
package-lock.json
generated
92
package-lock.json
generated
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "fuse2",
|
||||
"version": "1.2.0",
|
||||
"version": "1.2.1",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
@@ -43,17 +43,17 @@
|
||||
}
|
||||
},
|
||||
"@angular/animations": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@angular/animations/-/animations-5.0.0.tgz",
|
||||
"integrity": "sha1-ta0ZnGf5P3WVREd+/+ZnnhVJkfs=",
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@angular/animations/-/animations-5.0.1.tgz",
|
||||
"integrity": "sha1-qSsrGGpuWjGp8VhJEd1qp+FsXeE=",
|
||||
"requires": {
|
||||
"tslib": "1.8.0"
|
||||
}
|
||||
},
|
||||
"@angular/cdk": {
|
||||
"version": "2.0.0-beta.12",
|
||||
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-2.0.0-beta.12.tgz",
|
||||
"integrity": "sha1-OiQ8tiuT9OA5EgunD5ANyeI1Yi4=",
|
||||
"version": "5.0.0-rc0",
|
||||
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-5.0.0-rc0.tgz",
|
||||
"integrity": "sha512-wZg/mzHisiTieVt7Q/YNPB+r07PHvjoAT3+0mwyIP7wuC00W8BJLPhTZd/tIM5q7Nd69kuA1HSx1qLkcmlCZkw==",
|
||||
"requires": {
|
||||
"tslib": "1.8.0"
|
||||
}
|
||||
@@ -124,25 +124,25 @@
|
||||
}
|
||||
},
|
||||
"@angular/common": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@angular/common/-/common-5.0.0.tgz",
|
||||
"integrity": "sha1-+W1mpRe5ldG6mygwnxXC41lnWCU=",
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@angular/common/-/common-5.0.1.tgz",
|
||||
"integrity": "sha1-QwBas8i4/68Xaq+zuGupMcPkvfk=",
|
||||
"requires": {
|
||||
"tslib": "1.8.0"
|
||||
}
|
||||
},
|
||||
"@angular/compiler": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-5.0.0.tgz",
|
||||
"integrity": "sha1-uf+/GMijnYt9rOxHMZOpDiTMK8k=",
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-5.0.1.tgz",
|
||||
"integrity": "sha1-f9TH+ku770wUaWL6lGuCczCmyO0=",
|
||||
"requires": {
|
||||
"tslib": "1.8.0"
|
||||
}
|
||||
},
|
||||
"@angular/compiler-cli": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-5.0.0.tgz",
|
||||
"integrity": "sha1-Dsu5N9hKT43ZTwwqR7B9LkaUyFM=",
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-5.0.1.tgz",
|
||||
"integrity": "sha1-Um3BuzlPsWrZFmAe6pqgDrRLT/8=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chokidar": "1.7.0",
|
||||
@@ -152,9 +152,9 @@
|
||||
}
|
||||
},
|
||||
"@angular/core": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@angular/core/-/core-5.0.0.tgz",
|
||||
"integrity": "sha1-T5dqIl993fNJkvLK2CTJVDpG9Mg=",
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@angular/core/-/core-5.0.1.tgz",
|
||||
"integrity": "sha1-pKdK/H4gWNMLgmPrbWbarOn0J7o=",
|
||||
"requires": {
|
||||
"tslib": "1.8.0"
|
||||
}
|
||||
@@ -168,55 +168,55 @@
|
||||
}
|
||||
},
|
||||
"@angular/forms": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-5.0.0.tgz",
|
||||
"integrity": "sha1-x/3fo1OWdZrphSkgowzdqMQe0d4=",
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-5.0.1.tgz",
|
||||
"integrity": "sha1-afMDxME9o8qg3mNDdYg4i2rWKyE=",
|
||||
"requires": {
|
||||
"tslib": "1.8.0"
|
||||
}
|
||||
},
|
||||
"@angular/http": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@angular/http/-/http-5.0.0.tgz",
|
||||
"integrity": "sha1-Byiivgz7sHhyfF64fUyF1T/smlE=",
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@angular/http/-/http-5.0.1.tgz",
|
||||
"integrity": "sha1-NQy99jz6yJOWE9dT/wce1YpgVhs=",
|
||||
"requires": {
|
||||
"tslib": "1.8.0"
|
||||
}
|
||||
},
|
||||
"@angular/language-service": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-5.0.0.tgz",
|
||||
"integrity": "sha1-bMu2n0dXJw3QTsWFfTdjSy8CxAw=",
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-5.0.1.tgz",
|
||||
"integrity": "sha1-hp4J29bj2VwRfAYtId0f2SCtRNY=",
|
||||
"dev": true
|
||||
},
|
||||
"@angular/material": {
|
||||
"version": "2.0.0-beta.12",
|
||||
"resolved": "https://registry.npmjs.org/@angular/material/-/material-2.0.0-beta.12.tgz",
|
||||
"integrity": "sha1-cbbQt7AhiR5dDjaIwdS9eMdFf1g=",
|
||||
"version": "5.0.0-rc0",
|
||||
"resolved": "https://registry.npmjs.org/@angular/material/-/material-5.0.0-rc0.tgz",
|
||||
"integrity": "sha512-ZW9gy3c8l2NbFfX9DRYSW+i67pPoL9DZoMCb16STQlhdDfwwAWNpjGF0etXkXw30hDnRCMGVVJVU+45cNXJspA==",
|
||||
"requires": {
|
||||
"tslib": "1.8.0"
|
||||
}
|
||||
},
|
||||
"@angular/platform-browser": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-5.0.0.tgz",
|
||||
"integrity": "sha1-xwOPfN6AcFtiAUiXIx4YLuyXb+0=",
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-5.0.1.tgz",
|
||||
"integrity": "sha1-FIld0w7Sow7nuZx2t2R0j0bBqGI=",
|
||||
"requires": {
|
||||
"tslib": "1.8.0"
|
||||
}
|
||||
},
|
||||
"@angular/platform-browser-dynamic": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-5.0.0.tgz",
|
||||
"integrity": "sha1-iH4QbIsQOwQVz2FWpCXabYP0yJ0=",
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-5.0.1.tgz",
|
||||
"integrity": "sha1-Fttn1S1FMVY6sVQpxr3+GLwb7cg=",
|
||||
"requires": {
|
||||
"tslib": "1.8.0"
|
||||
}
|
||||
},
|
||||
"@angular/router": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@angular/router/-/router-5.0.0.tgz",
|
||||
"integrity": "sha1-/ktSGmc4QIvOMPk6U0mRQMk6T3Y=",
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@angular/router/-/router-5.0.1.tgz",
|
||||
"integrity": "sha1-msCPKTAu9gzf08eBDZbCZd7EY9Y=",
|
||||
"requires": {
|
||||
"tslib": "1.8.0"
|
||||
}
|
||||
@@ -268,9 +268,9 @@
|
||||
"integrity": "sha512-918ksaRl8RvGWGOjpUCywTS1MnLTqHki53XXibyhZkmHGSP5yLkcArBAFhFLvtQTTbuX8KSz2WFKxwaJ3JuJFw=="
|
||||
},
|
||||
"@swimlane/ngx-datatable": {
|
||||
"version": "10.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@swimlane/ngx-datatable/-/ngx-datatable-10.4.0.tgz",
|
||||
"integrity": "sha512-wTV/64vEGPFlcpE+ezTN18baOsNXyfLLvdmhEoaDQt2OJtTKtNxJkze24w71utoJxutQRrfHJUVSkAF4CLNckA=="
|
||||
"version": "11.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@swimlane/ngx-datatable/-/ngx-datatable-11.0.3.tgz",
|
||||
"integrity": "sha512-feJ9Ep0xddgC1IuNEqxWcTnoSPc3drzY+Bn27RFq+ztXYf3mHsLMxerMqFyVaLPnMrZKttZ7MX48gXzOkSVavw=="
|
||||
},
|
||||
"@types/jasmine": {
|
||||
"version": "2.5.54",
|
||||
@@ -6380,9 +6380,9 @@
|
||||
}
|
||||
},
|
||||
"moment": {
|
||||
"version": "2.19.1",
|
||||
"resolved": "https://registry.npmjs.org/moment/-/moment-2.19.1.tgz",
|
||||
"integrity": "sha1-VtoaLRy/AdOLfhr8McELz6GSkWc="
|
||||
"version": "2.19.2",
|
||||
"resolved": "https://registry.npmjs.org/moment/-/moment-2.19.2.tgz",
|
||||
"integrity": "sha512-Rf6jiHPEfxp9+dlzxPTmRHbvoFXsh2L/U8hOupUMpnuecHQmI6cF6lUbJl3QqKPko1u6ujO+FxtcajLVfLpAtA=="
|
||||
},
|
||||
"move-concurrently": {
|
||||
"version": "1.0.1",
|
||||
|
||||
32
package.json
32
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "fuse2",
|
||||
"version": "1.2.0",
|
||||
"version": "1.2.1",
|
||||
"license": "",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
@@ -16,21 +16,21 @@
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@agm/core": "1.0.0-beta.2",
|
||||
"@angular/animations": "5.0.0",
|
||||
"@angular/cdk": "2.0.0-beta.12",
|
||||
"@angular/common": "5.0.0",
|
||||
"@angular/compiler": "5.0.0",
|
||||
"@angular/core": "5.0.0",
|
||||
"@angular/animations": "5.0.1",
|
||||
"@angular/cdk": "5.0.0-rc0",
|
||||
"@angular/common": "5.0.1",
|
||||
"@angular/compiler": "5.0.1",
|
||||
"@angular/core": "5.0.1",
|
||||
"@angular/flex-layout": "2.0.0-beta.10",
|
||||
"@angular/forms": "5.0.0",
|
||||
"@angular/http": "5.0.0",
|
||||
"@angular/material": "2.0.0-beta.12",
|
||||
"@angular/platform-browser": "5.0.0",
|
||||
"@angular/platform-browser-dynamic": "5.0.0",
|
||||
"@angular/router": "5.0.0",
|
||||
"@angular/forms": "5.0.1",
|
||||
"@angular/http": "5.0.1",
|
||||
"@angular/material": "5.0.0-rc0",
|
||||
"@angular/platform-browser": "5.0.1",
|
||||
"@angular/platform-browser-dynamic": "5.0.1",
|
||||
"@angular/router": "5.0.1",
|
||||
"@ngx-translate/core": "8.0.0",
|
||||
"@swimlane/ngx-charts": "6.1.0",
|
||||
"@swimlane/ngx-datatable": "10.4.0",
|
||||
"@swimlane/ngx-datatable": "11.0.3",
|
||||
"@withinpixels/ngx-dnd": "3.1.0",
|
||||
"angular-calendar": "0.21.3",
|
||||
"classlist.js": "1.1.20150312",
|
||||
@@ -39,7 +39,7 @@
|
||||
"hammerjs": "2.0.8",
|
||||
"highlight.js": "9.12.0",
|
||||
"intl": "1.2.5",
|
||||
"moment": "2.19.1",
|
||||
"moment": "2.19.2",
|
||||
"ngx-color-picker": "4.4.0",
|
||||
"ngx-cookie-service": "1.0.9",
|
||||
"perfect-scrollbar": "1.0.3",
|
||||
@@ -49,8 +49,8 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/cli": "1.5.0",
|
||||
"@angular/compiler-cli": "5.0.0",
|
||||
"@angular/language-service": "5.0.0",
|
||||
"@angular/compiler-cli": "5.0.1",
|
||||
"@angular/language-service": "5.0.1",
|
||||
"@angularclass/hmr": "2.1.3",
|
||||
"@types/jasmine": "2.5.54",
|
||||
"@types/jasminewd2": "2.0.3",
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
type="button"
|
||||
class="mat-elevation-z1"
|
||||
[matMenuTriggerFor]="colorMenu"
|
||||
(onMenuOpen)="onMenuOpen()"
|
||||
(menuOpened)="onMenuOpen()"
|
||||
[ngClass]="'mat-'+selectedPalette+'-'+selectedHue+'-bg'">
|
||||
<mat-icon>palette</mat-icon>
|
||||
</button>
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
</div>
|
||||
|
||||
<button mat-icon-button [matMenuTriggerFor]="addMenu" matTooltip="Click to add/remove shortcut"
|
||||
(onMenuOpen)="onMenuOpen()">
|
||||
(menuOpened)="onMenuOpen()">
|
||||
<mat-icon class="amber-600-fg">star</mat-icon>
|
||||
</button>
|
||||
|
||||
|
||||
@@ -149,7 +149,9 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
|
||||
|
||||
onMenuOpen()
|
||||
{
|
||||
this.searchInputField.nativeElement.focus();
|
||||
setTimeout(() => {
|
||||
this.searchInputField.nativeElement.focus();
|
||||
});
|
||||
}
|
||||
|
||||
showMobileShortcutsPanel()
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding } from '@angular/core';
|
||||
import { MatSidenav } from '@angular/material';
|
||||
import { FuseMatSidenavHelperService } from 'app/core/directives/mat-sidenav-helper/mat-sidenav-helper.service';
|
||||
import { FuseMatchMedia } from '../../services/match-media.service';
|
||||
import { ObservableMedia } from '@angular/flex-layout';
|
||||
import { Subscription } from 'rxjs/Subscription';
|
||||
import { FuseMatchMedia } from '../../services/match-media.service';
|
||||
import { FuseMatSidenavHelperService } from './fuse-mat-sidenav-helper.service';
|
||||
|
||||
@Directive({
|
||||
selector: '[fuseMatSidenavHelper]'
|
||||
@@ -8,13 +8,13 @@ import { ColorPickerModule } from 'ngx-color-picker';
|
||||
import { NgxDnDModule } from '@withinpixels/ngx-dnd';
|
||||
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
|
||||
|
||||
import { FuseMatSidenavHelperDirective, FuseMatSidenavTogglerDirective } from '../directives/mat-sidenav-helper/mat-sidenav-helper.directive';
|
||||
import { FuseMatSidenavHelperDirective, FuseMatSidenavTogglerDirective } from '../directives/fuse-mat-sidenav-helper/fuse-mat-sidenav-helper.directive';
|
||||
import { FuseMatSidenavHelperService } from '../directives/fuse-mat-sidenav-helper/fuse-mat-sidenav-helper.service';
|
||||
import { FusePipesModule } from '../pipes/pipes.module';
|
||||
import { FuseConfirmDialogComponent } from '../components/confirm-dialog/confirm-dialog.component';
|
||||
import { FuseCountdownComponent } from '../components/countdown/countdown.component';
|
||||
import { FuseMatchMedia } from '../services/match-media.service';
|
||||
import { FuseNavbarVerticalService } from '../../main/navbar/vertical/navbar-vertical.service';
|
||||
import { FuseMatSidenavHelperService } from '../directives/mat-sidenav-helper/mat-sidenav-helper.service';
|
||||
import { FuseHljsComponent } from '../components/hljs/hljs.component';
|
||||
import { FusePerfectScrollbarDirective } from '../directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
|
||||
import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-dom.directive';
|
||||
|
||||
@@ -59,3 +59,8 @@ mat-sidenav-container {
|
||||
width: 14px;
|
||||
height: 7px;
|
||||
}
|
||||
|
||||
// Fix: "Input underlines has wrong color opacity value"
|
||||
.mat-form-field-underline {
|
||||
background-color: rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
@@ -10,6 +10,8 @@ export class FuseQuickPanelComponent implements OnInit
|
||||
{
|
||||
date: Date;
|
||||
settings: any;
|
||||
notes = [];
|
||||
events = [];
|
||||
|
||||
constructor()
|
||||
{
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user