feat: update to MDC components

bjsawyer · Jul 15, 2024 · 7755177 · 7755177
1 parent b1f2a2e
commit 7755177
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 52 deletions.
diff --git 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
@@ -1,9 +1,15 @@
 <mat-toolbar color="primary">mat-file-upload Demo</mat-toolbar>
 <div class="app-padding">
-  <mat-card>
-    <mat-file-upload [labelText]="'Select a file (or multiple) to upload:'" [selectButtonText]="'Choose File(s)'"
-      [uploadButtonText]="'Submit'" [allowMultipleFiles]="true" [showUploadButton]="true"
-      [customSvgIcon]="'close_custom'" [acceptedTypes]="'.png, .jpg, .jpeg'">
+  <mat-card appearance="outlined">
+    <mat-file-upload
+      [labelText]="'Select a file (or multiple) to upload:'"
+      [selectButtonText]="'Choose File(s)'"
+      [uploadButtonText]="'Submit'"
+      [allowMultipleFiles]="true"
+      [showUploadButton]="true"
+      [customSvgIcon]="'close_custom'"
+      [acceptedTypes]="'.png, .jpg, .jpeg'"
+    >
     </mat-file-upload>
   </mat-card>
-</div>
+</div>
diff --git 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
@@ -1,18 +1,19 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Demo</title>
+    <base href="/" />
 
-<head>
-  <meta charset="utf-8">
-  <title>Demo</title>
-  <base href="/">
-
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-</head>
-
-<body>
-  <app-root></app-root>
-</body>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet"
+    />
+  </head>
 
+  <body>
+    <app-root></app-root>
+  </body>
 </html>
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
@@ -5,10 +5,10 @@ import {
   Input,
   Output,
   ViewChild,
-} from '@angular/core'
+} from "@angular/core";
 
 @Component({
-  selector: 'mat-file-upload',
+  selector: "mat-file-upload",
   template: `
     <span class="file-input-text">{{ labelText }}</span>
     <button
@@ -47,55 +47,73 @@ import {
       (click)="filesChanged(null)"
       type="button"
       aria-label="Remove Selected File(s)"
-       *ngIf="selectedFiles != null && selectedFiles.length > 0"
+      *ngIf="selectedFiles != null && selectedFiles.length > 0"
     >
-        <mat-icon *ngIf="!customSvgIcon">close</mat-icon>
-        <mat-icon *ngIf="customSvgIcon" [svgIcon]="customSvgIcon"></mat-icon>
+      <mat-icon *ngIf="!customSvgIcon">close</mat-icon>
+      <mat-icon *ngIf="customSvgIcon" [svgIcon]="customSvgIcon"></mat-icon>
     </button>
   `,
   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<FileList> = new EventEmitter<FileList>();
-  @Output() selectedFilesChanged: EventEmitter<FileList> = new EventEmitter<FileList>();
+  @Output() uploadClicked: EventEmitter<FileList> =
+    new EventEmitter<FileList>();
+  @Output() selectedFilesChanged: EventEmitter<FileList> =
+    new EventEmitter<FileList>();
 
-  @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
@@ -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'