Skip to content

Commit 2ec05d6

Browse files
vicmansvicmans
committed
feat: slots and template props for minus and plus button content
add Changelog
1 parent 2e57773 commit 2ec05d6

File tree

13 files changed

+223
-21
lines changed

13 files changed

+223
-21
lines changed

‎CHANGELOG.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# Changelog
2+
3+
All notable changes to this project will be documented in this file.
4+
5+
## [0.0.2]
6+
7+
### Added
8+
9+
- Added minus and plus slots
10+
- Added `minusTemplate` and `plusTemplate` inputs to use the slots via props
11+
- Added `CHANGELOG.md`
12+
13+
## [0.0.1] - 2019-02-15
14+
15+
### Added
16+
17+
- Firts release
18+
- Add `min` and `max` props

‎README.md‎

Lines changed: 30 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
11
# NgxInputCounter
22

3+
<p align="center">
4+
<img src="projects/demo/src/assets/demo.gif" alt="project-logo" width="50%" />
5+
</p>
6+
7+
[![npm version](https://img.shields.io/npm/v/ngx-input-counter)][npm-url]
8+
[![npm dlm](https://img.shields.io/npm/dm/ngx-input-counter)][npm-url]
9+
10+
[npm-url]: https://www.npmjs.com/package/ngx-input-counter
11+
312
The input number with counter for Angular
413

514
## Getting Started
@@ -37,15 +46,32 @@ Use in your components
3746
<ngx-input-counter [(ngModel)]="qty"></ngx-input-counter>
3847
```
3948

40-
## Development server
49+
### Props
50+
51+
| Name | Type | Default | Description |
52+
|-------------|--------------------|-------------|------------------------------------------|
53+
| value | `number` | `0` | Initial state of the toggle button |
54+
| min | `number` | `-Infinity` | Transition time for the animation |
55+
| max | `number` | `Infinity` | Transition time for the animation |
56+
| step | `number` | `1` | Transition time for the animation |
57+
| minusTemplate | `TemplateRef` | `-` | Pass a TemplateRef to replace the minus button content |
58+
| plusTemplate | `TemplateRef` | `+` | Pass a TemplateRef to replace the plus button content |
59+
60+
### Outputs
61+
62+
| Name | Payload | Description |
63+
| --- | ------ | ------- |
64+
| change | value | Triggered when state of the component changes. <br>Contains: <br>`value` - state of the component |
65+
66+
## Development
4167

42-
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
68+
Clone this repo and install the dependencies. Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
4369

44-
## Running unit tests
70+
### Running unit tests
4571

4672
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
4773

48-
## Running end-to-end tests
74+
### Running end-to-end tests
4975

5076
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
5177

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ngx-input-counter",
3-
"version": "0.0.1",
3+
"version": "0.0.2",
44
"keywords": [
55
"frontend",
66
"input",

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

Lines changed: 53 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,68 @@
11
<h1>Demo</h1>
22

3-
<div>
3+
<div class="content">
44

55
<ngx-input-counter [(ngModel)]="qty"></ngx-input-counter>
66

77
Value: {{qty}}
88

99
<h2>Custom style</h2>
1010

11-
<ngx-input-counter class="custom" [(ngModel)]="custom" [max]="5" [min]="0"></ngx-input-counter>
11+
<ngx-input-counter class="custom" [(ngModel)]="custom" [max]="5" [min]="0">
12+
<ng-container ngProjectAs="[minus]">
13+
<ng-template let-step="step" let-min="min" let-value="value">
14+
<svg *ngIf="custom !== min + step" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
15+
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
16+
</svg>
17+
<svg *ngIf="custom == min + step" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
18+
<path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
19+
</svg>
20+
</ng-template>
21+
</ng-container>
22+
</ngx-input-counter>
1223

1324
Value: {{custom}}
1425

26+
<h2>Custom style 2</h2>
27+
28+
<!-- <small>Using SVG icons</small> -->
29+
30+
<div style="display: flex;">
31+
32+
<ngx-input-counter class="custom-plus" style="margin: auto;" [(ngModel)]="custom" [max]="5" [min]="0" *ngIf="custom>0">
33+
<ng-template plus>
34+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
35+
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
36+
</svg>
37+
</ng-template>
38+
<ng-template minus let-step="step" let-min="min" let-value="value">
39+
<svg *ngIf="custom !== min + step" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
40+
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
41+
</svg>
42+
<svg *ngIf="custom == min + step" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#EF2F35">
43+
<path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
44+
</svg>
45+
</ng-template>
46+
</ngx-input-counter>
47+
</div>
48+
49+
<h2>Custom Template prop</h2>
50+
<div>
51+
<ng-template #plusTemplate>
52+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width: 24px;height: 24px;">
53+
<path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5V18M15 7.5V18M3 16.811V8.69c0-.864.933-1.406 1.683-.977l7.108 4.061a1.125 1.125 0 010 1.954l-7.108 4.061A1.125 1.125 0 013 16.811z" />
54+
</svg>
55+
</ng-template>
56+
<ngx-input-counter
57+
style="margin: auto;"
58+
[(ngModel)]="custom"
59+
(change)="onChange($event)"
60+
[max]="5"
61+
[min]="0"
62+
[minusTemplate]="plusTemplate">
63+
</ngx-input-counter>
64+
</div>
65+
1566
<h2>Form</h2>
1667

1768
<div [formGroup]="myForm">

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
11
:host {
22
text-align: center;
3+
}
4+
5+
.content {
6+
text-align: center;
37
}

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,8 @@ export class AppComponent {
1414
myForm: FormGroup = new FormGroup({
1515
age: new FormControl(2, [Validators.min(18)])
1616
})
17+
18+
onChange(e: any) {
19+
console.log(e, 'onChange called');
20+
}
1721
}

‎projects/demo/src/assets/demo.gif‎

61.9 KB
Loading

‎projects/demo/src/styles.scss‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,4 +28,43 @@ ngx-input-counter.custom {
2828
box-shadow: 1px 1px 2px 1px #ccc;
2929
}
3030
}
31+
}
32+
33+
ngx-input-counter.custom-plus {
34+
font-family: 'Segoe UI', Verdana, sans-serif;
35+
.ngx-input-counter-container {
36+
box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.1);
37+
border-radius: 25px;
38+
text-align: center;
39+
display: flex;
40+
align-items: center;
41+
width: fit-content;
42+
overflow: hidden;
43+
.ngx-input-counter-value {
44+
width: 30px;
45+
display: inline-block;
46+
font-weight: bold;
47+
font-size: 18px;
48+
}
49+
}
50+
51+
.ngx-input-counter-button {
52+
background-color: white;
53+
display: flex;
54+
justify-content: center;
55+
align-items: center;
56+
width: 48px;
57+
height: 48px;
58+
border-radius: 25px;
59+
cursor: pointer;
60+
transition: all 0.5s ease;
61+
line-height: unset;
62+
svg {
63+
width: 24px;
64+
height: 24px;
65+
}
66+
&:hover {
67+
background-color: #ddd;
68+
}
69+
}
3170
}

‎projects/ngx-input-counter/README.md‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -31,14 +31,25 @@ import { NgxInputCounterModule } from 'ngx-input-counter';
3131
})
3232
```
3333

34-
## Publishing
34+
Use in your components
3535

36-
After building your library with `ng build ngx-input-counter`, go to the dist folder `cd dist/ngx-input-counter` and run `npm publish`.
36+
```html
37+
<ngx-input-counter [(ngModel)]="qty"></ngx-input-counter>
38+
```
3739

38-
## Running unit tests
40+
### Props
3941

40-
Run `ng test ngx-input-counter` to execute the unit tests via [Karma](https://karma-runner.github.io).
42+
| Name | Type | Default | Description |
43+
|-------------|--------------------|-------------|-------------|
44+
| value | `number` | `0` | Initial state of the toggle button |
45+
| min | `number` | `-Infinity` | Transition time for the animation |
46+
| max | `number` | `Infinity` | Transition time for the animation |
47+
| step | `number` | `1` | Transition time for the animation |
48+
| minusTemplate | `TemplateRef` | `-` | Pass a TemplateRef to replace the minus button content |
49+
| plusTemplate | `TemplateRef` | `+` | Pass a TemplateRef to replace the plus button content |
4150

42-
## Further help
51+
### Outputs
4352

44-
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
53+
| Name | Payload | Description |
54+
| --- | ------ | ------- |
55+
| change | value | Triggered when state of the component changes. <br>Contains: <br>`value` - state of the component |

‎projects/ngx-input-counter/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ngx-input-counter",
3-
"version": "0.0.1",
3+
"version": "0.0.2",
44
"keywords": [
55
"frontend",
66
"input",

0 commit comments

Comments
 (0)