136 lines
2.4 KiB
Markdown
136 lines
2.4 KiB
Markdown
# @ngshack/input
|
|
|
|
Biblioteka komponentów input i nawigacji dla aplikacji Webland z obsługą gamepadów.
|
|
|
|
## Instalacja
|
|
|
|
```bash
|
|
npm install @ngshack/input
|
|
```
|
|
|
|
## Development
|
|
|
|
### Prerequisites
|
|
- Node.js 18+
|
|
- Angular CLI 17+
|
|
|
|
### Setup
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
### Generate Components
|
|
```bash
|
|
# Generate new component
|
|
ng generate component components/my-component --project=input
|
|
|
|
# Generate service
|
|
ng generate service services/my-service --project=input
|
|
|
|
# Generate module
|
|
ng generate module modules/my-module --project=input
|
|
```
|
|
|
|
### Build Library
|
|
```bash
|
|
ng build input
|
|
```
|
|
|
|
### Test
|
|
```bash
|
|
ng test input
|
|
```
|
|
|
|
### Publish
|
|
```bash
|
|
npm run build:libs
|
|
npm publish dist/input
|
|
```
|
|
|
|
## Usage
|
|
|
|
### Navigation Module
|
|
|
|
```typescript
|
|
import { NavigationModule } from '@ngshack/input';
|
|
|
|
@Component({
|
|
imports: [NavigationModule],
|
|
template: `
|
|
<div inputActionBinding="confirm" (action)="onConfirm()">
|
|
<button>Confirm</button>
|
|
</div>
|
|
`
|
|
})
|
|
export class MyComponent {
|
|
onConfirm() {
|
|
console.log('Confirmed!');
|
|
}
|
|
}
|
|
```
|
|
|
|
### Action Binding Directive
|
|
|
|
```typescript
|
|
import { ActionBindingDirective } from '@ngshack/input';
|
|
|
|
@Component({
|
|
imports: [ActionBindingDirective],
|
|
template: `
|
|
<div inputActionBinding="back" (action)="goBack()">
|
|
Back Button
|
|
</div>
|
|
`
|
|
})
|
|
export class MyComponent {
|
|
goBack() {
|
|
// Handle back action
|
|
}
|
|
}
|
|
```
|
|
|
|
## Features
|
|
|
|
- 🎮 Gamepad support
|
|
- ⌨️ Keyboard navigation
|
|
- 🖱️ Mouse/touch support
|
|
- 🎯 Action binding system
|
|
- 📱 Responsive design
|
|
- 🎨 Gaming console theme
|
|
|
|
## Publishing the Library
|
|
|
|
Once the project is built, you can publish your library by following these steps:
|
|
|
|
1. Navigate to the `dist` directory:
|
|
```bash
|
|
cd dist/input
|
|
```
|
|
|
|
2. Run the `npm publish` command to publish your library to the npm registry:
|
|
```bash
|
|
npm publish
|
|
```
|
|
|
|
## Running unit tests
|
|
|
|
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
|
|
|
|
```bash
|
|
ng test
|
|
```
|
|
|
|
## Running end-to-end tests
|
|
|
|
For end-to-end (e2e) testing, run:
|
|
|
|
```bash
|
|
ng e2e
|
|
```
|
|
|
|
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
|
|
|
|
## Additional Resources
|
|
|
|
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
|