From 77551774be6f2cbde53d9b36afd176e280d81c80 Mon Sep 17 00:00:00 2001 From: bjsawyer Date: Mon, 15 Jul 2024 12:47:19 -0400 Subject: [PATCH] feat: update to MDC components --- projects/demo/src/app/app.component.css | 5 ++ projects/demo/src/app/app.component.html | 16 +++-- projects/demo/src/app/app.module.ts | 8 +-- projects/demo/src/index.html | 29 ++++---- .../src/lib/mat-file-upload.component.ts | 70 ++++++++++++------- .../src/lib/mat-file-upload.module.ts | 6 +- 6 files changed, 82 insertions(+), 52 deletions(-) diff --git a/projects/demo/src/app/app.component.css b/projects/demo/src/app/app.component.css index e69de29..105a7a8 100644 --- a/projects/demo/src/app/app.component.css +++ b/projects/demo/src/app/app.component.css @@ -0,0 +1,5 @@ +mat-card { + height: 48px; + display: flex; + justify-content: center; +} diff --git a/projects/demo/src/app/app.component.html b/projects/demo/src/app/app.component.html index fb4992f..68f1a15 100644 --- a/projects/demo/src/app/app.component.html +++ b/projects/demo/src/app/app.component.html @@ -1,9 +1,15 @@ mat-file-upload Demo
- - + + -
\ No newline at end of file + diff --git a/projects/demo/src/app/app.module.ts b/projects/demo/src/app/app.module.ts index ce28eb8..0def267 100644 --- a/projects/demo/src/app/app.module.ts +++ b/projects/demo/src/app/app.module.ts @@ -1,11 +1,11 @@ import { HttpClientModule } from '@angular/common/http' import { NgModule } from '@angular/core' import { FormsModule } from '@angular/forms' -import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button' -import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card' +import { MatButtonModule } from '@angular/material/button' +import { MatCardModule } from '@angular/material/card' import { MatIconModule } from '@angular/material/icon' -import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input' -import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select' +import { MatInputModule } from '@angular/material/input' +import { MatSelectModule } from '@angular/material/select' import { MatToolbarModule } from '@angular/material/toolbar' import { BrowserModule } from '@angular/platform-browser' import { BrowserAnimationsModule } from '@angular/platform-browser/animations' diff --git a/projects/demo/src/index.html b/projects/demo/src/index.html index 084e5f8..7313404 100644 --- a/projects/demo/src/index.html +++ b/projects/demo/src/index.html @@ -1,18 +1,19 @@ - + + + + Demo + - - - Demo - - - - - - - - - - + + + + + + + diff --git a/projects/mat-file-upload/src/lib/mat-file-upload.component.ts b/projects/mat-file-upload/src/lib/mat-file-upload.component.ts index f053cc0..d0fd876 100644 --- a/projects/mat-file-upload/src/lib/mat-file-upload.component.ts +++ b/projects/mat-file-upload/src/lib/mat-file-upload.component.ts @@ -5,10 +5,10 @@ import { Input, Output, ViewChild, -} from '@angular/core' +} from "@angular/core"; @Component({ - selector: 'mat-file-upload', + selector: "mat-file-upload", template: ` {{ labelText }} `, styles: [ - '.file-input-button { margin-right: 8px !important }', - '.file-input-text { font-size: 14px !important; margin-right: 8px !important }', + ` + :host { + display: flex; + align-items: center; + } + .file-input-button { + margin-right: 8px; + } + .file-input-text { + font-size: 14px; + font-family: var( + --mdc-typography-button-font-family, + var(--mdc-typography-font-family, Roboto, sans-serif) + ); + margin-right: 8px; + } + `, ], }) export class MatFileUploadComponent { - @Input() labelText = 'Select File(s)'; - @Input() selectButtonText = 'Select File(s)'; - @Input() selectFilesButtonType: 'button' | 'menu' | 'reset' | 'submit' = 'button'; - @Input() uploadButtonText = 'Upload File(s)'; - @Input() uploadButtonType: 'button' | 'menu' | 'reset' | 'submit' = 'button'; + @Input() labelText = "Select File(s)"; + @Input() selectButtonText = "Select File(s)"; + @Input() selectFilesButtonType: "button" | "menu" | "reset" | "submit" = + "button"; + @Input() uploadButtonText = "Upload File(s)"; + @Input() uploadButtonType: "button" | "menu" | "reset" | "submit" = "button"; @Input() allowMultipleFiles = false; @Input() showUploadButton = true; - @Input() acceptedTypes = '*.*'; + @Input() acceptedTypes = "*.*"; @Input() customSvgIcon?: string = null; - @Output() uploadClicked: EventEmitter = new EventEmitter(); - @Output() selectedFilesChanged: EventEmitter = new EventEmitter(); + @Output() uploadClicked: EventEmitter = + new EventEmitter(); + @Output() selectedFilesChanged: EventEmitter = + new EventEmitter(); - @ViewChild('fileInput') fileInputRef: ElementRef + @ViewChild("fileInput") fileInputRef: ElementRef; selectedFiles: FileList; - selectedFileText = ''; + selectedFileText = ""; filesChanged(files?: FileList): void { - this.selectedFiles = files - this.selectedFilesChanged.emit(this.selectedFiles) + this.selectedFiles = files; + this.selectedFilesChanged.emit(this.selectedFiles); if (this.selectedFiles) { - const numSelectedFiles = this.selectedFiles.length + const numSelectedFiles = this.selectedFiles.length; this.selectedFileText = numSelectedFiles === 1 ? this.selectedFiles[0].name - : `${numSelectedFiles} files selected` + : `${numSelectedFiles} files selected`; } else { - this.selectedFileText = '' - this.resetFileInput() + this.selectedFileText = ""; + this.resetFileInput(); } } uploadFiles(): void { - this.uploadClicked.emit(this.selectedFiles) - this.resetFileInput() + this.uploadClicked.emit(this.selectedFiles); + this.resetFileInput(); } resetFileInput(): void { - this.fileInputRef.nativeElement.value = '' + this.fileInputRef.nativeElement.value = ""; } } diff --git a/projects/mat-file-upload/src/lib/mat-file-upload.module.ts b/projects/mat-file-upload/src/lib/mat-file-upload.module.ts index 77347b5..9651da5 100644 --- a/projects/mat-file-upload/src/lib/mat-file-upload.module.ts +++ b/projects/mat-file-upload/src/lib/mat-file-upload.module.ts @@ -1,10 +1,10 @@ import { CommonModule } from '@angular/common' import { NgModule } from '@angular/core' import { FormsModule } from '@angular/forms' -import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button' +import { MatButtonModule } from '@angular/material/button' import { MatIconModule } from '@angular/material/icon' -import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input' -import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select' +import { MatInputModule } from '@angular/material/input' +import { MatSelectModule } from '@angular/material/select' import { MatFileUploadComponent } from './mat-file-upload.component'