ngx-touch-keyboard 2.0.0

package/src/lib/ngx-touch-keyboard.directive.ts

@@ -0,0 +1,164 @@
+import {
+  ComponentRef,
+  Directive,
+  ElementRef,
+  Inject,
+  OnDestroy,
+} from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { Overlay, OverlayRef, OverlaySizeConfig } from '@angular/cdk/overlay';
+import { NgxTouchKeyboardComponent } from './ngx-touch-keyboard.component';
+
+@Directive({
+  selector: 'input[ngxTouchKeyboard], textarea[ngxTouchKeyboard]',
+  exportAs: 'ngxTouchKeyboard',
+})
+export class NgxTouchKeyboardDirective implements OnDestroy {
+  isOpen = false;
+
+  private _overlayRef!: OverlayRef;
+  private _panelRef!: ComponentRef<NgxTouchKeyboardComponent>;
+
+  /**
+   * Constructor
+   */
+  constructor(
+    private _overlay: Overlay,
+    private _elementRef: ElementRef<HTMLInputElement>,
+    @Inject(DOCUMENT) private _document: any
+  ) {}
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Lifecycle hooks
+  // -----------------------------------------------------------------------------------------------------
+
+  /**
+   * On destroy
+   */
+  ngOnDestroy(): void {
+    // Dispose the overlay
+    if (this._overlayRef) {
+      this._overlayRef.dispose();
+    }
+  }
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Public methods
+  // -----------------------------------------------------------------------------------------------------
+
+  /**
+   * Open keyboard panel
+   */
+  openPanel(): void {
+    // return if panel is attached
+    if (this._overlayRef?.hasAttached()) {
+      return;
+    }
+
+    // Create the overlay if it doesn't exist
+    if (!this._overlayRef) {
+      this._createOverlay();
+    }
+
+    // Update direction and size the overlay
+    this._overlayRef.setDirection(this._document.body.getAttribute('dir'));
+    this._overlayRef.updateSize({
+      width: this._inputOrigin().getBoundingClientRect().width,
+      maxWidth: this._inputOrigin().getBoundingClientRect().width,
+      minWidth: '260px',
+    } as OverlaySizeConfig);
+
+    // Attach the portal to the overlay
+    this._panelRef = this._overlayRef.attach(
+      new ComponentPortal(NgxTouchKeyboardComponent)
+    );
+    this._panelRef.instance.setActiveInput(this._elementRef.nativeElement);
+    this.isOpen = true;
+
+    // Reference the input element
+    this._panelRef.instance.closePanel.subscribe(() => this.closePanel());
+  }
+
+  /**
+   * Close keyboard panel
+   */
+  closePanel(): void {
+    this._overlayRef.detach();
+    this.isOpen = false;
+  }
+
+  /**
+   * Toggle keyboard panel
+   */
+  togglePanel(): void {
+    if (this.isOpen) {
+      this.closePanel();
+    } else {
+      this.openPanel();
+    }
+  }
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Private methods
+  // -----------------------------------------------------------------------------------------------------
+
+  /**
+   * Create the overlay
+   */
+  private _createOverlay(): void {
+    // Create the overlay
+    this._overlayRef = this._overlay.create({
+      hasBackdrop: false,
+      scrollStrategy: this._overlay.scrollStrategies.noop(),
+      positionStrategy: this._overlay
+        .position()
+        .flexibleConnectedTo(this._inputOrigin())
+        .withLockedPosition(true)
+        .withPush(true)
+        .withPositions([
+          {
+            originX: 'start',
+            originY: 'bottom',
+            overlayX: 'start',
+            overlayY: 'top',
+          },
+          {
+            originX: 'start',
+            originY: 'top',
+            overlayX: 'start',
+            overlayY: 'bottom',
+          },
+          {
+            originX: 'end',
+            originY: 'bottom',
+            overlayX: 'end',
+            overlayY: 'top',
+          },
+          {
+            originX: 'end',
+            originY: 'top',
+            overlayX: 'end',
+            overlayY: 'bottom',
+          },
+        ]),
+    });
+  }
+
+  /**
+   * Get input origin
+   *
+   * @private
+   */
+  private _inputOrigin(): any {
+    const element = this._elementRef.nativeElement;
+    // Material form field - Check input in mat-form-field
+    if (element.classList.contains('mat-input-element')) {
+      // Return [mat-form-field-flex] element
+      return element.parentNode?.parentNode;
+    }
+
+    // Return input
+    return element;
+  }
+}

package/src/lib/ngx-touch-keyboard.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { OverlayModule } from '@angular/cdk/overlay';
+import { PortalModule } from '@angular/cdk/portal';
+
+import { NgxTouchKeyboardDirective } from './ngx-touch-keyboard.directive';
+import { NgxTouchKeyboardComponent } from './ngx-touch-keyboard.component';
+
+@NgModule({
+  declarations: [NgxTouchKeyboardDirective, NgxTouchKeyboardComponent],
+  imports: [CommonModule, OverlayModule, PortalModule],
+  exports: [NgxTouchKeyboardDirective, NgxTouchKeyboardComponent],
+})
+export class NgxTouchKeyboardModule {}

package/src/public-api.ts

@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of ngx-touch-keyboard
+ */
+
+export * from './lib/ngx-touch-keyboard.component';
+export * from './lib/ngx-touch-keyboard.directive';
+export * from './lib/ngx-touch-keyboard.module';

package/src/test.ts

@@ -0,0 +1,27 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js';
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    <T>(id: string): T;
+    keys(): string[];
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(),
+);
+
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().forEach(context);

package/tsconfig.lib.json

@@ -0,0 +1,15 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,17 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}