feat(lib): enhanced the lib

Author: AnthonyNahas

Diff for: projects/angular-material-extensions/input-counter/package.json

@@ -44,9 +44,42 @@
   },
   "peerDependencies": {
     "@angular/common": "^9.1.11",
-    "@angular/core": "^9.1.11"
+    "@angular/core": "^9.1.11",
+    "@angular/flex-layout": "^9.0.0-beta.31",
+    "@angular/cdk": "^9.2.0",
+    "@angular/material": "^9.2.0"
   },
   "dependencies": {
     "tslib": "^1.10.0"
+  },
+  "engines": {
+    "node": ">=10.0.0"
+  },
+  "release-it": {
+    "github": {
+      "release": true
+    },
+    "npm": {
+      "publish": true,
+      "publishPath": "../../../dist/angular-material-extensions/google-maps-autocomplete"
+    },
+    "publishConfig": {
+      "access": "public"
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": "angular",
+        "infile": "../../../CHANGELOG.md"
+      }
+    },
+    "hooks": {
+      "before:init": [
+        "npm run clean"
+      ],
+      "after:bump": "echo \"building lib v${version}... \" && npm run build",
+      "before:git:release": "echo \"Updating CHANGELOG.md for v${version} \" && git commit -a -m \"docs(project): Updating CHANGELOG.md for v${version} \" && git push",
+      "after:release": "echo Successfully released ${name} v${version} to ${repo.repository}.",
+      "before:npm": "echo building the library..."
+    }
   }
 }

Diff for: projects/angular-material-extensions/input-counter/src/lib/input-counter.component.html

@@ -0,0 +1,14 @@
+<div fxLayout="row" fxLayoutGap="5px" fxLayoutAlign="center center">
+  <button mat-mini-fab (click)="decrement()" [disabled]="value - step < min">
+    <mat-icon>remove</mat-icon>
+  </button>
+  <mat-form-field [appearance]="appearance">
+    <mat-label>
+      {{label}}
+    </mat-label>
+    <input #input matInput [placeholder]="placeholder" type="number" [(ngModel)]="value">
+  </mat-form-field>
+  <button mat-mini-fab (click)="increment()" [disabled]="value + step > max">
+    <mat-icon>add</mat-icon>
+  </button>
+</div>

Diff for: projects/angular-material-extensions/input-counter/src/lib/input-counter.component.scss

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

Diff for: projects/angular-material-extensions/input-counter/src/lib/input-counter.component.ts

@@ -1,5 +1,6 @@
 import {Component, EventEmitter, forwardRef, Input, OnInit, Output} from '@angular/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
+import {MatFormFieldAppearance} from '@angular/material/form-field';
 
 @Component({
   selector: 'mat-input-counter',
@@ -16,7 +17,7 @@ import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 export class InputCounterComponent implements OnInit, ControlValueAccessor {
 
   @Input()
-  value: number;
+  _value: number;
 
   @Input()
   max: number;
@@ -25,23 +26,50 @@ export class InputCounterComponent implements OnInit, ControlValueAccessor {
   min: number;
 
   @Input()
-  step: number;
+  step = 1;
+
+  @Input()
+  appearance: MatFormFieldAppearance = 'standard';
 
   @Input()
   placeholder: string;
 
   @Input()
-  label: string;
+  label = 'Number';
 
   @Output()
   change: EventEmitter<number> = new EventEmitter<number>();
 
   propagateChange = (_: any) => {
   };
 
+  get value() {
+    return this._value;
+  }
+
+  set value(val) {
+    this._value = val;
+    this.propagateChange(this._value);
+  }
+
   ngOnInit(): void {
   }
 
+  increment() {
+    console.log('incr', this.value);
+    if (!this.value) {
+      this.value = 0;
+    }
+    this.value += this.step;
+  }
+
+  decrement() {
+    if (!this.value) {
+      this.value = 0;
+    }
+    this.value -= this.step;
+  }
+
   writeValue(obj: any): void {
     if (obj) {
       this.value = obj;

Diff for: projects/angular-material-extensions/input-counter/src/lib/input-counter.service.spec.ts

@@ -1,11 +1,21 @@
 import { NgModule } from '@angular/core';
 import { InputCounterComponent } from './input-counter.component';
+import {MatButtonModule} from '@angular/material/button';
+import {MatIconModule} from '@angular/material/icon';
+import {MatInputModule} from '@angular/material/input';
+import {FlexModule} from '@angular/flex-layout';
+import {FormsModule} from '@angular/forms';
 
 
 
 @NgModule({
   declarations: [InputCounterComponent],
   imports: [
+    MatButtonModule,
+    MatIconModule,
+    MatInputModule,
+    FlexModule,
+    FormsModule
   ],
   exports: [InputCounterComponent]
 })

Diff for: projects/angular-material-extensions/input-counter/src/lib/input-counter.service.ts

@@ -1,7 +1,5 @@
 /*
  * Public API Surface of input-counter
  */
-
-export * from './lib/input-counter.service';
 export * from './lib/input-counter.component';
 export * from './lib/mat-input-counter.module';