Merge pull request #26 from mohsen77sk/v4

V4

Author: mohsen77sk

.editorconfig

@@ -7,6 +7,7 @@ indent_style = space
 indent_size = 2
 insert_final_newline = true
 trim_trailing_whitespace = true
+max_line_length = 120
 
 [*.ts]
 quote_type = single

.github/workflows/main.yml

@@ -10,44 +10,46 @@ jobs:
   build:
     name: Build
     runs-on: ubuntu-latest
-        
+
     steps:
     - name: Syncing repository
-      uses: actions/checkout@v3
-    
+      uses: actions/checkout@v4
+
     - name: Setup Node.js
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
+        node-version: 20.14.0
         cache: 'npm'
-    
+
     - name: Install Dependencies
       run: npm ci
-    
+
     - name: Build Application
       run: npm run build-demo
-    
+
     - name: Upload artifact
-      uses: actions/upload-artifact@v3
+      uses: actions/upload-artifact@v4
       with:
         name: dist
         path: dist/
-  
+
   test:
     name: Test
     runs-on: ubuntu-latest
-    
+
     steps:
     - name: Syncing repository
-      uses: actions/checkout@v3
-    
+      uses: actions/checkout@v4
+
     - name: Setup Node.js
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
+        node-version: 20.14.0
         cache: 'npm'
-        
+
     - name: Install Dependencies
       run: npm ci
-        
+
     - name: Test Lib
       run: npm run test-lib
     - name: Test Demo
@@ -63,13 +65,13 @@ jobs:
 
     steps:
     - name: Download artifact
-      uses: actions/download-artifact@v3
+      uses: actions/download-artifact@v4
       with:
         name: dist
         path: dist/
 
     - name: Deploy demo
-      uses: peaceiris/actions-gh-pages@v3
+      uses: peaceiris/actions-gh-pages@v4
       with:
         github_token: ${{ secrets.GITHUB_TOKEN }}
         publish_dir: dist/angular-touch-keyboard

CHANGELOG.md

@@ -5,6 +5,18 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [4.0.0] - 2025-03-04
+
+### Changed
+
+- Updated to Angular 18
+- Updated documentation
+
+### Added
+
+- Support custom position origin
+- Support change default locale
+
 ## [3.3.0] - 2024-09-19
 
 ### Added

README.md

@@ -1,129 +1,141 @@
 # AngularTouchKeyboard
 
+An Angular touch keyboard component that provides a customizable on-screen keyboard for input elements.
+
 [![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE) [![npm version](https://badge.fury.io/js/ngx-touch-keyboard.svg)](http://badge.fury.io/js/ngx-touch-keyboard) [![Build Status](https://github.com/mohsen77sk/angular-touch-keyboard/workflows/main/badge.svg)](https://github.com/mohsen77sk/angular-touch-keyboard/actions)
 
-## What is this?
+![angular touch keyboard](https://mohsen77sk.github.io/angular-touch-keyboard/assets/images/angularTouchKeyboard.png)
 
-Virtual Keyboard for Angular applications.
+## Features
 
-![angular touch keyboard](https://mohsen77sk.github.io/angular-touch-keyboard/assets/images/angularTouchKeyboard.png)
+- 📱 Responsive virtual keyboard
+- 🌐 Multiple locale support
+- 🎯 Flexible positioning
+- 🖥️ Full-screen mode support
+- 🎨 Customizable appearance
+- 🔧 Material Design integration
 
 ## Demo
 
 [https://mohsen77sk.github.io/angular-touch-keyboard/](https://mohsen77sk.github.io/angular-touch-keyboard/)
 
-## Install
-
-### Step 1: Install [ngx-touch-keyboard](https://www.npmjs.com/package/ngx-touch-keyboard)
+## Installation
 
-```sh
+```bash
 npm install @angular/cdk ngx-touch-keyboard
 ```
 
-### Step 2: Import the module
+## Compatibility
+
+The version of this library is synchronized with the major version of Angular to ensure compatibility.
+
+| Angular Version | Package Version |
+| --------------- | --------------- |
+| >= 18.0.0       | 4.x             |
+| >= 16.0.0       | 3.x             |
+| >= 14.0.0       | 2.x             |
+
+## Basic Usage
 
-Add `ngxTouchKeyboardModule` as an import in your app's root NgModule.
+Import the `NgxTouchKeyboardModule` in your app.module.ts:
 
 ```typescript
-import { ngxTouchKeyboardModule }  from 'ngx-touch-keyboard';
+import { NgxTouchKeyboardModule } from 'ngx-touch-keyboard';
+
 @NgModule({
-  ...
   imports: [
-    ...
-    ngxTouchKeyboardModule,
+    NgxTouchKeyboardModule
   ],
-  ...
 })
 export class AppModule { }
 ```
 
-### Compatibility
-
-#### Version [`3.0.0`]
+If you want to set the custom locale, provide `NGX_TOUCH_KEYBOARD_LOCALE` by custom locale
 
-* `@angular/core`: `^16.0.0` || `^17.0.0` || `^18.0.0`
-* `@angular/cdk`: `^16.0.0` || `^17.0.0` || `^18.0.0`
+- default locale is `enUS`
 
-#### Version [`2.0.0`]
+```typescript
+import { NGX_TOUCH_KEYBOARD_LOCALE, faIR } from 'ngx-touch-keyboard';
 
-* `@angular/core`: `^14.0.0` || `^15.0.0`
-* `@angular/cdk`: `^14.0.0` || `^15.0.0`
+@NgModule({
+  providers: [
+    { provide: NGX_TOUCH_KEYBOARD_LOCALE, useValue: faIR }
+  ],
+})
+export class AppModule { }
+```
 
-## Localization
+Add the directive to your input elements:
 
-AngularTouchKeyboard is localized in 7 keyboard-specific locales:
+```html
+<input ngxTouchKeyboard [(ngxTouchKeyboardOpen)]="isOpen">
+```
 
-* `en-US` English (United States) (default)
-* `en-UK` English (United Kingdom)
-* `fa-IR` Persian (Iran)
-* `he-IL` Hebrew (Israel)
-* `ka-GE` Georgian (Georgia)
-* `ru-RU` Russian (Russia)
-* `sv-SE` Swedish (Sweden)
+## API Reference
 
-## Usage
+### Directives
 
-Simple usage example
+#### NgxTouchKeyboard
 
-```html
-<input
-  type="text"
-  ngxTouchKeyboard
-  #touchKeyboard="ngxTouchKeyboard"
-  (focus)="touchKeyboard.openPanel()"
-/>
+```typescript
+@Directive({
+  selector: 'input[ngxTouchKeyboard], textarea[ngxTouchKeyboard]'
+})
 ```
 
-Locale usage example
+### Inputs
+
+| Name                              | Type                     | Default | Description                                    |
+| --------------------------------- | ------------------------ | ------- | ---------------------------------------------- |
+| `ngxTouchKeyboardOpen`            | `boolean`                | `false` | Controls the visibility of the keyboard        |
+| `ngxTouchKeyboardLocale`          | `Locale`                 | `enUS`  | Sets the keyboard locale                       |
+| `ngxTouchKeyboardFullScreen`      | `boolean`                | `false` | Enables full-screen mode                       |
+| `ngxTouchKeyboardDebug`           | `boolean`                | `false` | Enables debug mode                             |
+| `ngxConnectedTouchKeyboardOrigin` | `NgxTouchKeyboardOrigin` | `null`  | Sets a custom origin for the keyboard position |
+
+### Methods
+
+- `openPanel()`: Opens the keyboard panel
+- `closePanel()`: Closes the keyboard panel
+- `togglePanel()`: Toggles the keyboard panel visibility
+
+## Material Design Integration
+
+The component automatically detects and integrates with Angular Material form fields, providing proper positioning and styling.
+
+## Advanced Usage
+
+### Custom locale
 
 ```html
-<input
-  type="text"
-  ngxTouchKeyboard="fa-IR"
-  #touchKeyboard="ngxTouchKeyboard"
-  (focus)="touchKeyboard.openPanel()"
-/>
+<input ngxTouchKeyboard [ngxTouchKeyboardLocale]="faIR">
 ```
 
-Material usage example
+### Full-Screen Mode
 
 ```html
-<mat-form-field>
-  <mat-label>Default</mat-label>
-  <input
-    matInput
-    type="text"
-    ngxTouchKeyboard
-    #touchKeyboard="ngxTouchKeyboard"
-  />
-  <button
-    mat-icon-button
-    matSuffix
-    type="button"
-    (click)="touchKeyboard.togglePanel()"
-  >
-    <mat-icon> keyboard </mat-icon>
-  </button>
-</mat-form-field>
+<input ngxTouchKeyboard [ngxTouchKeyboardFullScreen]="true">
 ```
 
-### Properties
+### Custom Position Origin
 
-| Property                     | Description                                                 |
-| ---------------------------- | ----------------------------------------------------------- |
-| `ngxTouchKeyboard`           | Required to initialize Virtual Keyboard to specified input. |
-| `ngxTouchKeyboardDebug`      | Debug mode is on.                                           |
-| `ngxTouchKeyboardFullScreen` | Full screen mode is on.                                     |
+```html
+<div ngxTouchKeyboardOrigin #origin="ngxTouchKeyboardOrigin">
+  <input ngxTouchKeyboard [ngxConnectedTouchKeyboardOrigin]="origin">
+</div>
+```
 
-### Methods
+## Localization
 
-Here's the list of all available methods:
+AngularTouchKeyboard is localized in 7 keyboard-specific locales:
 
-| Methods               | Description           |
-| --------------------- | --------------------- |
-| `openPanel(): void`   | Open keyboard panel   |
-| `closePanel(): void`  | Close keyboard panel  |
-| `togglePanel(): void` | Toggle keyboard panel |
+* `en-US` English (United States) (default)
+* `en-UK` English (United Kingdom)
+* `fa-IR` Persian (Iran)
+* `he-IL` Hebrew (Israel)
+* `ka-GE` Georgian (Georgia)
+* `ru-RU` Russian (Russia)
+* `sv-SE` Swedish (Sweden)
 
 ## Themes
 
@@ -167,6 +179,10 @@ The most useful commands for development are:
 * `npm run start` to start a development server
 * `npm run build-demo` to build the demo locally (it will be published automatically by GitHub Actions)
 
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
 ## License
 
 [The MIT License (MIT)](LICENSE)

angular.json

@@ -69,18 +69,18 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "angular-touch-keyboard:build:production"
+              "buildTarget": "angular-touch-keyboard:build:production"
             },
             "development": {
-              "browserTarget": "angular-touch-keyboard:build:development"
+              "buildTarget": "angular-touch-keyboard:build:development"
             }
           },
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "angular-touch-keyboard:build"
+            "buildTarget": "angular-touch-keyboard:build"
           }
         },
         "test": {