add min and max props

Author: vicmans

README.md

@@ -1,27 +1,27 @@
 # NgxInputCounter
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.1.3.
+The input number with counter for Angular
 
 ## Getting Started
 
 ### Versions
 
-| Angular  | lib |
+| Angular  | ngx-input-counter |
 | -------- |:------:| 
 | >=15.0.0 | v0.0.x |
 
 ### Instalation
 
 ```
-npm i lib
+npm i ngx-input-counter
 ```
 
 ## Usage
 
 Import the module
 
 ```typescript
-import { NgxInputCounterModule } from 'lib';
+import { NgxInputCounterModule } from 'ngx-input-counter';
 @NgModule({
   ...
   imports: [

projects/demo/src/app/app.component.html

@@ -1,5 +1,26 @@
 <h1>Demo</h1>
 
+<div>
+
 <ngx-input-counter [(ngModel)]="qty"></ngx-input-counter>
 
-Value: {{qty}}
+Value: {{qty}}
+
+<h2>Custom style</h2>
+
+<ngx-input-counter class="custom" [(ngModel)]="custom" [max]="5" [min]="0"></ngx-input-counter>
+
+Value: {{custom}}
+
+<h2>Form</h2>
+
+<div [formGroup]="myForm">
+  <ngx-input-counter class="custom" formControlName="age" [max]="20" [min]="18"></ngx-input-counter>
+
+  <pre>form: {{myForm.value | json}}
+    errors: {{myForm.errors | json}}
+  </pre>
+  
+</div>
+
+</div>

projects/demo/src/app/app.component.scss

@@ -0,0 +1,3 @@
+:host {
+  text-align: center;
+}

projects/demo/src/app/app.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-root',
@@ -8,4 +9,9 @@ import { Component } from '@angular/core';
 export class AppComponent {
   title = 'demo';
   qty = 2
+  custom = 1
+
+  myForm: FormGroup = new FormGroup({
+    age: new FormControl(2, [Validators.min(18)])
+  })
 }

projects/demo/src/app/app.module.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgxInputCounterModule } from 'projects/ngx-input-counter/src/public-api';
 
@@ -12,7 +12,8 @@ import { AppComponent } from './app.component';
   imports: [
     BrowserModule,
     NgxInputCounterModule,
-    FormsModule
+    FormsModule,
+    ReactiveFormsModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

projects/demo/src/styles.scss

@@ -1 +1,31 @@
 /* You can add global styles to this file, and also import other style files */
+ngx-input-counter.custom {
+  font-family: 'Segoe UI', Verdana, sans-serif;
+  .ngx-input-counter-container {
+    border-radius: 500px;
+    text-align: center;
+    .ngx-input-counter-value {
+      width: 30px;
+      display: inline-block;
+      font-weight: bold;
+      font-size: 18px;
+    }
+  }
+  
+  .ngx-input-counter-button {
+    border: 1px solid #999;
+    border-radius: 100%;
+    background-color: white;
+    width: 36px;
+    height: 36px;
+    text-align: center;
+    font-weight: 600;
+    font-size: 20px;
+    cursor: pointer;
+    transition: all 0.5s ease;
+    &:hover {
+      background-color: #ddd;
+      box-shadow: 1px 1px 2px 1px #ccc;
+    }
+  }
+}

projects/ngx-input-counter/README.md

@@ -1,15 +1,35 @@
 # NgxInputCounter
 
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.1.0.
+The input number with counter for Angular
 
-## Code scaffolding
+## Getting Started
 
-Run `ng generate component component-name --project ngx-input-counter` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ngx-input-counter`.
-> Note: Don't forget to add `--project ngx-input-counter` or else it will be added to the default project in your `angular.json` file. 
+### Versions
 
-## Build
+| Angular  | ngx-input-counter |
+| -------- |:------:| 
+| >=15.0.0 | v0.0.x |
 
-Run `ng build ngx-input-counter` to build the project. The build artifacts will be stored in the `dist/` directory.
+### Instalation
+
+```
+npm i ngx-input-counter
+```
+
+## Usage
+
+Import the module
+
+```typescript
+import { NgxInputCounterModule } from 'ngx-input-counter';
+@NgModule({
+  ...
+  imports: [
+    ...,
+    NgxInputCounterModule,
+  ],
+})
+```
 
 ## Publishing
 

projects/ngx-input-counter/src/lib/ngx-input-counter.component.scss

@@ -1,6 +1,4 @@
 .ngx-input-counter-container {
-  border: 1px solid #999;
-  width: fit-content;
   text-align: center;
   .ngx-input-counter-value {
     width: 36px;

projects/ngx-input-counter/src/lib/ngx-input-counter.component.ts

@@ -39,11 +39,16 @@ export class NgxInputCounterComponent implements ControlValueAccessor {
 
   @Input() value: number = 0;
   @Input() step: number = 1;
-  @Input() min: number | undefined;
+  @Input() min: number = -Infinity;
   @Input() max: number = Infinity;
   @Input() disabled: boolean = false;
 
   addItem(step: number) {
-    this.onInput(this.value + step)
+    let newValue = this.value + step;
+    if(this.value < this.min) newValue = this.min
+    if(this.value > this.max) newValue = this.max
+    const minValue = newValue >= this.min
+    if(this.max >= newValue && minValue)
+      this.onInput(newValue)
   }
 }