Merge 3732826 into 9220dea

merlosy · Jul 30, 2019 · e85e7c8 · e85e7c8
2 parents 9220dea + 3732826
commit e85e7c8
Show file tree

Hide file tree

Showing 19 changed files with 535 additions and 256 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
diff --git a/apps/demo/src/app/app.component.css b/apps/demo/src/app/app.component.css
@@ -1,5 +1,10 @@
-mat-form-field {
-  width: 100%;
+.toolbar-title {
+  margin-left: 16px;
+}
+
+.sidenav-content {
+  height: calc(100vh - 64px);
+  overflow: auto;
 }
 
 .main {

diff --git a/apps/demo/src/app/app.component.html b/apps/demo/src/app/app.component.html
@@ -1,101 +1,21 @@
-<mat-toolbar color="primary"> Angular Material - File Input </mat-toolbar>
-
-<div class="main">
-
-  <h1>Code samples</h1>
-
-  <form [formGroup]="formDoc" (ngSubmit)="onSubmit(formDoc)" novalidate>
-
-    <h2>Simple input</h2>
-
-    <app-code-sample [code]="simple"></app-code-sample>
-
-    <mat-form-field>
-      <ngx-mat-file-input formControlName="basicfile" placeholder="Basic Input"></ngx-mat-file-input>
-      <mat-icon matSuffix>folder</mat-icon>
-    </mat-form-field>
-
-    <h2>Input with clear button</h2>
-
-    <p>
-      This is a workaround for an issue with Firefox that doesn't triggers change event when the user cancels the upload. With other browsers, it results in removing files from the input.
-    </p>
-
-    <app-code-sample [code]="removable"></app-code-sample>
-
-    <p>Add a file to reveal the clear button.</p>
-
-    <mat-form-field>
-      <ngx-mat-file-input #removableInput formControlName="removablefile" placeholder="Removable Input"></ngx-mat-file-input>
-      <button mat-icon-button matSuffix *ngIf="!removableInput.empty" (click)="removableInput.clear($event)">
-        <mat-icon>clear</mat-icon>
-      </button>
-    </mat-form-field>
-
-    <h2>Input with validation: required and maxSize</h2>
-
-    <app-code-sample [code]="advancedTs"></app-code-sample>
-    <app-code-sample [code]="advanced"></app-code-sample>
-
-    <mat-form-field>
-      <ngx-mat-file-input
-        formControlName="requiredfile"
-        placeholder="Required input"
-        valuePlaceholder="No file selected"
-        required
-      ></ngx-mat-file-input>
-      <mat-icon matSuffix>folder</mat-icon>
-      <mat-error *ngIf="formDoc.get('requiredfile')?.hasError('required')"> Please select a file </mat-error>
-      <mat-error *ngIf="formDoc.get('requiredfile')?.hasError('maxContentSize')">
-        The total size must not exceed {{ formDoc.get('requiredfile')?.getError('maxContentSize').maxSize | byteFormat }}
-        ({{ formDoc.get('requiredfile')?.getError('maxContentSize').actualSize | byteFormat }}).
-      </mat-error>
-    </mat-form-field>
-    <pre>{{ formDoc.get('requiredfile')?.errors | json }}</pre>
-
-    <h2>Disabled input</h2>
-
-    <app-code-sample [code]="disabledTs"></app-code-sample>
-
-    <mat-form-field>
-      <ngx-mat-file-input formControlName="disabledfile" placeholder="Disabled Input"></ngx-mat-file-input>
-      <mat-icon matSuffix>folder</mat-icon>
-    </mat-form-field>
-
-    <h2>Multiple input</h2>
-
-    <app-code-sample [code]="multiple"></app-code-sample>
-
-    <mat-form-field>
-      <ngx-mat-file-input formControlName="multiplefile" placeholder="Multiple inputs" multiple></ngx-mat-file-input>
-      <mat-icon matSuffix>folder</mat-icon>
-    </mat-form-field>
-
-    <h2>Input with file type constraint (accept)</h2>
-
-    <app-code-sample [code]="accept"></app-code-sample>
-
-    <mat-form-field>
-      <ngx-mat-file-input formControlName="acceptfile" placeholder="PDF file only" [accept]="'.pdf'"></ngx-mat-file-input>
-      <mat-icon matSuffix>folder</mat-icon>
-    </mat-form-field>
-
-    <h2>Input with custom ErrorStateMatcher</h2>
-    <p>An ErrorStateMatcher defines, when a control displays the error state. A custom ErrorStateMatcher can for example be used to display validations on untouched controls.
-      ErrorStateMatchers can either be defined globally or for single controls (seen in the following example).
-    </p>
-
-    <app-code-sample [code]="errorStateTs"></app-code-sample>
-    <app-code-sample [code]="errorState"></app-code-sample>
-
-    <mat-form-field>
-      <ngx-mat-file-input formControlName="errorStateFile" placeholder="Shows error for PDF" [errorStateMatcher]="errorStateMatcher"></ngx-mat-file-input>
-    </mat-form-field>
-
-    <h2>ByteFormat pipe</h2>
-
-    <app-code-sample [code]="bytePipe"></app-code-sample>
-
-    <p>A file size of {{ maxSize }} gives a human readable size of {{ maxSize | byteFormat }}</p>
-  </form>
-</div>
+<mat-toolbar color="primary">
+  <button mat-icon-button aria-label="Expand or collapse menu" (click)="menuOpened = !menuOpened">
+    <mat-icon>menu</mat-icon>
+  </button>
+  <span class="toolbar-title">Angular Material - File Input</span>
+</mat-toolbar>
+
+<mat-sidenav-container autosize>
+  <mat-sidenav #sidenav [opened]="menuOpened" mode="side">
+    <app-menu></app-menu>
+  </mat-sidenav>
+
+  <div class="sidenav-content">
+    <div class="main">
+      <app-usage></app-usage>
+      <br>
+      <app-appearance></app-appearance>
+    </div>
+  </div>
+
+</mat-sidenav-container>
diff --git a/apps/demo/src/app/app.component.ts b/apps/demo/src/app/app.component.ts
@@ -3,127 +3,16 @@ import { FormGroup, FormBuilder, Validators, FormControl, NgForm, FormGroupDirec
 import { FileValidator } from 'ngx-material-file-input';
 import { ErrorStateMatcher } from '@angular/material';
 
-/**
-* Shows error state on the file-input if a pdf-file is selected.
-*/
-class ExampleErrorStateMatcher implements ErrorStateMatcher {
-  public isErrorState(control: FormControl, _: NgForm | FormGroupDirective): boolean {
-    return (control && control.value && control.value._fileNames && control.value._fileNames.endsWith('pdf'));
-  }
-}
-
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
 export class AppComponent implements OnInit {
-  errorStateMatcher = new ExampleErrorStateMatcher();
-  formDoc: FormGroup;
-
-  // 100 MB
-  readonly maxSize = 104857600;
-
-  constructor(private _fb: FormBuilder) {}
-
-  ngOnInit() {
-    this.formDoc = this._fb.group({
-      basicfile: [],
-      removablefile: [],
-      acceptfile: [],
-      requiredfile: [{ value: undefined, disabled: false }, [Validators.required, FileValidator.maxContentSize(this.maxSize)]],
-      disabledfile: [{ value: undefined, disabled: true }],
-      multiplefile: [{ value: undefined, disabled: false }],
-      errorStateFile: []
-    });
-  }
 
-  onSubmit(form: FormGroup) {}
+  menuOpened = true;
 
-  get simple() {
-    return `<mat-form-field>
-      <ngx-mat-file-input formControlName="basicfile" placeholder="Basic Input" ></ngx-mat-file-input>
-      <mat-icon matSuffix>folder</mat-icon>
-    </mat-form-field>`;
+  ngOnInit(): void {
   }
 
-  get advancedTs() {
-    return `constructor(private _fb: FormBuilder) {}
-
-    ngOnInit() {
-      this.formDoc = this._fb.group({
-        requiredfile: [
-          undefined,
-          [Validators.required, FileValidator.maxContentSize(this.maxSize)]
-        ]
-      });
-    }`;
-  }
-
-  get advanced() {
-    return `<mat-form-field>
-      <ngx-mat-file-input formControlName="requiredfile" placeholder="Required input" valuePlaceholder="No file selected" required></ngx-mat-file-input>
-      <mat-icon matSuffix>folder</mat-icon>
-      <mat-error *ngIf="formDoc.get('requiredfile').hasError('required')">
-        Please select a file
-      </mat-error>
-      <mat-error *ngIf="formDoc.get('requiredfile').hasError('maxContentSize')">
-        The total size must not exceed {{formDoc.get('requiredfile')?.getError('maxContentSize').maxSize | byteFormat}} ({{formDoc.get('requiredfile')?.getError('maxContentSize').actualSize
-        | byteFormat}}).
-      </mat-error>
-    </mat-form-field>`;
-  }
-
-  get disabledTs() {
-    return `constructor(private _fb: FormBuilder) {}
-
-    ngOnInit() {
-      this.formDoc = this._fb.group({
-        disabledfile: [{ value: undefined, disabled: true }]
-      });
-    }`;
-  }
-
-  get accept() {
-    return `<mat-form-field>
-      <ngx-mat-file-input formControlName="acceptfile" placeholder="PDF file only" [accept]="'.pdf'"></ngx-mat-file-input>
-      <mat-icon matSuffix>folder</mat-icon>
-    </mat-form-field>`;
-  }
-
-  get multiple() {
-    return `<mat-form-field>
-      <ngx-mat-file-input formControlName="multiplefile" placeholder="Multiple inputs" multiple></ngx-mat-file-input>
-      <mat-icon matSuffix>folder</mat-icon>
-    </mat-form-field>`;
-  }
-
-  get removable() {
-    return `<mat-form-field>
-    <ngx-mat-file-input #removableInput formControlName="removablefile" placeholder="Removable Input"></ngx-mat-file-input>
-    <button mat-icon-button matSuffix *ngIf="!removableInput.empty" (click)="removableInput.clear($event)">
-      <mat-icon>clear</mat-icon>
-    </button>
-  </mat-form-field>`;
-  }
-
-  get bytePipe() {
-    return `<p>A file size of {{ maxSize }} gives a human readable size of {{ maxSize | byteFormat }}</p>`;
-  }
-
-  get errorStateTs() {
-    return `class ExampleErrorStateMatcher implements ErrorStateMatcher {
-      public isErrorState(control: FormControl, _: NgForm | FormGroupDirective): boolean {
-        return
-          (control && control.value && control.value._fileNames && control.value._fileNames.endsWith('pdf'));
-      }
-    }`;
-  }
-  get errorState() {
-    return `<mat-form-field>
-      <ngx-mat-file-input formControlName="errorStateFile" placeholder="Shows error for PDF"
-        [errorStateMatcher]="errorStateMatcher">
-      </ngx-mat-file-input>
-    </mat-form-field>`;
-  }
 }
diff --git a/apps/demo/src/app/app.module.ts b/apps/demo/src/app/app.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, Injector } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { NxModule } from '@nrwl/nx';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -12,6 +12,11 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { AppComponent } from './app.component';
 import { MaterialFileInputModule } from 'ngx-material-file-input';
 import { CodeSampleComponent } from './code-sample/code-sample.component';
+import { MenuComponent } from './menu/menu.component';
+import { UsageComponent } from './usage/usage.component';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatListModule } from '@angular/material/list';
+import { AppearanceComponent } from './appearance/appearance.component';
 
 @NgModule({
   imports: [
@@ -24,11 +29,19 @@ import { CodeSampleComponent } from './code-sample/code-sample.component';
     MatFormFieldModule,
     MatIconModule,
     MatInputModule,
+    MatListModule,
+    MatSidenavModule,
     MatToolbarModule,
     // Lib Module
     MaterialFileInputModule
   ],
-  declarations: [AppComponent, CodeSampleComponent],
+  declarations: [
+    AppComponent,
+    AppearanceComponent,
+    CodeSampleComponent,
+    MenuComponent,
+    UsageComponent
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule {}
diff --git a/apps/demo/src/app/appearance/appearance.component.css b/apps/demo/src/app/appearance/appearance.component.css
@@ -0,0 +1,3 @@
+mat-form-field {
+  width: 100%;
+}