From 200c4048a317412a9b0a594b6d880344a5462240 Mon Sep 17 00:00:00 2001
From: Alexander Rancourt <Alexander.Rancourt@staples.com>
Date: Thu, 24 Mar 2022 16:05:09 -0400
Subject: [PATCH] Added active/anchor tags to keyboard

---
 src/core/src/directives/keyboard.directive.ts | 15 +++++++--
 src/core/src/services/keyboard.service.ts     | 33 +++++++++++++------
 2 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/src/core/src/directives/keyboard.directive.ts b/src/core/src/directives/keyboard.directive.ts
index 117d5bff2..5499ed5e3 100644
--- a/src/core/src/directives/keyboard.directive.ts
+++ b/src/core/src/directives/keyboard.directive.ts
@@ -14,6 +14,10 @@ export class MatKeyboardDirective implements OnDestroy {
 
   @Input() matKeyboard: string;
 
+  @Input() active: boolean = true;
+
+  @Input() anchor: string = 'bottom';
+
   @Input() darkTheme: boolean;
 
   @Input() duration: number;
@@ -29,8 +33,8 @@ export class MatKeyboardDirective implements OnDestroy {
   @Output() shiftClick: EventEmitter<void> = new EventEmitter<void>();
 
   constructor(private _elementRef: ElementRef,
-              private _keyboardService: MatKeyboardService,
-              @Optional() @Self() private _control?: NgControl) {}
+    private _keyboardService: MatKeyboardService,
+    @Optional() @Self() private _control?: NgControl) { }
 
   ngOnDestroy() {
     this.hideKeyboard();
@@ -38,11 +42,16 @@ export class MatKeyboardDirective implements OnDestroy {
 
   @HostListener('focus', ['$event'])
   public showKeyboard() {
+
+    if (!this.active) {
+      return;
+    }
+
     this._keyboardRef = this._keyboardService.open(this.matKeyboard, {
       darkTheme: this.darkTheme,
       duration: this.duration,
       isDebug: this.isDebug
-    });
+    }, this.anchor);
 
     // reference the input element
     this._keyboardRef.instance.setInputInstance(this._elementRef);
diff --git a/src/core/src/services/keyboard.service.ts b/src/core/src/services/keyboard.service.ts
index ad2859a4a..ae404f869 100644
--- a/src/core/src/services/keyboard.service.ts
+++ b/src/core/src/services/keyboard.service.ts
@@ -27,6 +27,9 @@ export class MatKeyboardService {
 
   private _availableLocales: ILocaleMap = {};
 
+  /** Reference to the anchor position (top/bottom) */
+  private _anchor: string;
+
   /** Reference to the currently opened keyboard at *any* level. */
   private get _openedKeyboardRef(): MatKeyboardRef<MatKeyboardComponent> | null {
     const parent = this._parentKeyboard;
@@ -50,10 +53,10 @@ export class MatKeyboardService {
   }
 
   constructor(private _overlay: Overlay,
-              private _live: LiveAnnouncer,
-              @Inject(LOCALE_ID) private _defaultLocale: string,
-              @Inject(MAT_KEYBOARD_LAYOUTS) private _layouts: IKeyboardLayouts,
-              @Optional() @SkipSelf() private _parentKeyboard: MatKeyboardService) {
+    private _live: LiveAnnouncer,
+    @Inject(LOCALE_ID) private _defaultLocale: string,
+    @Inject(MAT_KEYBOARD_LAYOUTS) private _layouts: IKeyboardLayouts,
+    @Optional() @SkipSelf() private _parentKeyboard: MatKeyboardService) {
     // prepare available layouts mapping
     this._availableLocales = _applyAvailableLayouts(_layouts);
   }
@@ -131,9 +134,11 @@ export class MatKeyboardService {
    * @param layoutOrLocale A string representing the locale or the layout name to be used.
    * @param config Additional configuration options for the keyboard.
    */
-  open(layoutOrLocale: string = this._defaultLocale, config: MatKeyboardConfig = {}): MatKeyboardRef<MatKeyboardComponent> {
+  open(layoutOrLocale: string = this._defaultLocale, config: MatKeyboardConfig = {}, anchor: string = 'bottom'): MatKeyboardRef<MatKeyboardComponent> {
     const _config = _applyConfigDefaults(config);
 
+    this._anchor = anchor;
+
     return this.openFromComponent(layoutOrLocale, _config);
   }
 
@@ -210,11 +215,19 @@ export class MatKeyboardService {
       width: '100%'
     });
 
-    state.positionStrategy = this._overlay
-      .position()
-      .global()
-      .centerHorizontally()
-      .bottom('0');
+    if (this._anchor === 'bottom') {
+      state.positionStrategy = this._overlay
+        .position()
+        .global()
+        .centerHorizontally()
+        .bottom('0');
+    } else {
+      state.positionStrategy = this._overlay
+        .position()
+        .global()
+        .centerHorizontally()
+        .top('0');
+    }
 
     return this._overlay.create(state);
   }