feat(appearance): 'fill' | 'outline'

rbalet · Apr 16, 2024 · ba01963 · ba01963
1 parent e4d0258
commit ba01963
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 deletions.
diff --git a/projects/ngx-mat-birthday-input-tester/src/app/app.component.html b/projects/ngx-mat-birthday-input-tester/src/app/app.component.html
@@ -16,11 +16,15 @@ <h1>Mat birthday Input example</h1>
 </form>
 
 <form #f2="ngForm" [formGroup]="emptyBirthdayForm">
-  <mat-form-field floatLabel="always">
+  <mat-form-field floatLabel="always" appearance="outline">
     <mat-label>Birthday</mat-label>
 
     <!-- @TODO : add min & max -->
-    <ngx-mat-birthday-input formControlName="birthday" id="birthday"></ngx-mat-birthday-input>
+    <ngx-mat-birthday-input
+      formControlName="birthday"
+      id="birthday"
+      appearance="outline"
+    ></ngx-mat-birthday-input>
 
     <mat-icon matSuffix>event</mat-icon>
 

diff --git a/projects/ngx-mat-birthday-input/src/lib/ngx-mat-birthday-input.component.html b/projects/ngx-mat-birthday-input/src/lib/ngx-mat-birthday-input.component.html
@@ -1,5 +1,5 @@
 <form class="birthday-form" [formGroup]="itemForm" [autocomplete]="autocomplete">
-  <mat-form-field class="day-input" subscriptSizing="dynamic">
+  <mat-form-field class="day-input" subscriptSizing="dynamic" [appearance]="appearance">
     <mat-label *ngIf="labels">{{ labels[0] }}</mat-label>
     <input
       matInput
@@ -12,7 +12,7 @@
       [placeholder]="placeholders[0]"
     />
   </mat-form-field>
-  <mat-form-field class="month-input" subscriptSizing="dynamic">
+  <mat-form-field class="month-input" subscriptSizing="dynamic" [appearance]="appearance">
     <mat-label *ngIf="labels">{{ labels[1] }}</mat-label>
     <input
       matInput
@@ -26,7 +26,7 @@
       #monthInput
     />
   </mat-form-field>
-  <mat-form-field class="year-input" subscriptSizing="dynamic">
+  <mat-form-field class="year-input" subscriptSizing="dynamic" [appearance]="appearance">
     <mat-label *ngIf="labels">{{ labels[2] }}</mat-label>
     <input
       matInput

diff --git a/projects/ngx-mat-birthday-input/src/lib/ngx-mat-birthday-input.component.ts b/projects/ngx-mat-birthday-input/src/lib/ngx-mat-birthday-input.component.ts
@@ -27,7 +27,11 @@ import {
   ReactiveFormsModule,
 } from '@angular/forms'
 import { ErrorStateMatcher, _AbstractConstructor, mixinErrorState } from '@angular/material/core'
-import { MatFormFieldControl, MatFormFieldModule } from '@angular/material/form-field'
+import {
+  MatFormFieldAppearance,
+  MatFormFieldControl,
+  MatFormFieldModule,
+} from '@angular/material/form-field'
 import { MatInputModule } from '@angular/material/input'
 import { Subject, takeUntil } from 'rxjs'
 
@@ -92,6 +96,7 @@ export class NgxMatBirthdayInputComponent
   @Input() labels: [string, string, string] = ['DD', 'MM', 'YYYY']
   @Input() placeholders: [string, string, string] = ['', '', '']
   @Input() name?: string
+  @Input() appearance: MatFormFieldAppearance = 'fill'
 
   @Output() dateChanged: EventEmitter<Date> = new EventEmitter<Date>()