From ba019636014d262a796fe746899fce7c7d3d23c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Balet?= <raphael@megaphone.info>
Date: Tue, 16 Apr 2024 16:59:40 +0200
Subject: [PATCH] feat(appearance): 'fill' | 'outline'

---
 .../src/app/app.component.html                            | 8 ++++++--
 .../src/lib/ngx-mat-birthday-input.component.html         | 6 +++---
 .../src/lib/ngx-mat-birthday-input.component.ts           | 7 ++++++-
 3 files changed, 15 insertions(+), 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
index ab68817..08ef7be 100644
--- 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
index 4caf43b..6c59006 100644
--- 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
index 32c5739..312512f 100644
--- 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>()