Skip to content

Commit 4538e01

Browse files
vicmansvicmans
committed
feat: add minusClass, plusClass and valueClass input props
1 parent 2ec05d6 commit 4538e01

File tree

11 files changed

+293
-20
lines changed

11 files changed

+293
-20
lines changed

‎CHANGELOG.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,13 @@
22

33
All notable changes to this project will be documented in this file.
44

5+
## [0.0.3]
6+
7+
### Added
8+
9+
- Improved README.md
10+
- Added `minusClass`, `plusClass` and `valueClass` inputs to use custom classes via props
11+
512
## [0.0.2]
613

714
### Added

‎README.md‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,13 +56,121 @@ Use in your components
5656
| step | `number` | `1` | Transition time for the animation |
5757
| minusTemplate | `TemplateRef` | `-` | Pass a TemplateRef to replace the minus button content |
5858
| plusTemplate | `TemplateRef` | `+` | Pass a TemplateRef to replace the plus button content |
59+
| minusClass | `string` | `'ngx-input-counter-button'` | Classes of the minus button |
60+
| plusClass | `string` | `'ngx-input-counter-button'` | Classes of the plus button |
61+
| valueClass | `string` | `'ngx-input-counter-value'` | Classes of value text |
62+
| disabled | `boolean` | `false` | Disables the buttons
5963

6064
### Outputs
6165

6266
| Name | Payload | Description |
6367
| --- | ------ | ------- |
6468
| change | value | Triggered when state of the component changes. <br>Contains: <br>`value` - state of the component |
6569

70+
## Styling
71+
72+
You can use the default classes and add your own styles or using a custom class:
73+
74+
The classes in the component are:
75+
76+
- `ngx-input-counter-container`: The container element.
77+
- `ngx-input-counter-button`: The buttons element.
78+
- `ngx-input-counter-value`: The value element .
79+
80+
```scss
81+
ngx-input-counter.custom {
82+
.ngx-input-counter-container {
83+
border-radius: 50px;
84+
text-align: center;
85+
.ngx-input-counter-value {
86+
width: 30px;
87+
font-weight: bold;
88+
font-size: 18px;
89+
}
90+
}
91+
.ngx-input-counter-button {
92+
border: 1px solid #999;
93+
border-radius: 100%;
94+
background-color: white;
95+
width: 36px;
96+
height: 36px;
97+
text-align: center;
98+
font-weight: 600;
99+
font-size: 20px;
100+
cursor: pointer;
101+
transition: all 0.5s ease;
102+
&:hover {
103+
background-color: #ddd;
104+
box-shadow: 1px 1px 2px 1px #ccc;
105+
}
106+
}
107+
}
108+
```
109+
110+
Then in your component:
111+
112+
```html
113+
<ngx-input-counter [(ngModel)]="qty" class="custom"></ngx-input-counter>
114+
```
115+
116+
You can use the Input props `minusClass`, `plusClass` and `valueClass` to override the default value class and use your own classes, this is usefull if you are using CSS frameworks.
117+
118+
```html
119+
<ngx-input-counter
120+
...
121+
minusClass="btn btn-info"
122+
plusClass="btn btn-primary"
123+
></ngx-input-counter>
124+
```
125+
126+
If you want to use custom icons in the counter buttons use the `minusTemplate` and `plusTemplate` passing a TemplateRef with the content you want to show
127+
128+
```html
129+
<ng-template #plusTemplate>
130+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
131+
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
132+
</svg>
133+
</ng-template>
134+
<ng-template #minusTemplate>
135+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
136+
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
137+
</svg>
138+
</ng-template>
139+
140+
<ngx-input-counter
141+
class="custom-class"
142+
[plusTemplate]="plusTemplate"
143+
[minusTemplate]="minusTemplate"
144+
></ngx-input-counter>
145+
```
146+
147+
You can use the slot, using `minus` for the `minusTemplate` and `plus` for the `plusTemplate` slot
148+
149+
```html
150+
<ngx-input-counter>
151+
<ng-template plus>
152+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
153+
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
154+
</svg>
155+
</ng-template>
156+
<ng-template minus>
157+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
158+
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
159+
</svg>
160+
</ng-template>
161+
</ngx-input-counter>
162+
```
163+
164+
When you use the slot template you can pass classes to override the button class:
165+
166+
```html
167+
<ng-template minus class="rounded p-4">
168+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
169+
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
170+
</svg>
171+
</ng-template>
172+
```
173+
66174
## Development
67175

68176
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.

‎package-lock.json‎

Lines changed: 3 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{
22
"name": "ngx-input-counter",
3-
"version": "0.0.2",
3+
"description": "Input counter component for Angular",
4+
"version": "0.0.3",
45
"keywords": [
56
"frontend",
67
"input",

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

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ <h1>Demo</h1>
33
<div class="content">
44

55
<ngx-input-counter [(ngModel)]="qty"></ngx-input-counter>
6-
6+
<br>
77
Value: {{qty}}
88

99
<h2>Custom style</h2>
@@ -20,7 +20,7 @@ <h2>Custom style</h2>
2020
</ng-template>
2121
</ng-container>
2222
</ngx-input-counter>
23-
23+
<br>
2424
Value: {{custom}}
2525

2626
<h2>Custom style 2</h2>
@@ -59,7 +59,29 @@ <h2>Custom Template prop</h2>
5959
(change)="onChange($event)"
6060
[max]="5"
6161
[min]="0"
62-
[minusTemplate]="plusTemplate">
62+
[plusTemplate]="plusTemplate">
63+
</ngx-input-counter>
64+
</div>
65+
66+
<h2>Custom class</h2>
67+
<div>
68+
<ng-template plus #minus2>
69+
<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;">
70+
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
71+
</svg>
72+
</ng-template>
73+
<ngx-input-counter
74+
style="margin: auto;"
75+
[(ngModel)]="custom"
76+
(change)="onChange($event)"
77+
[max]="5"
78+
[min]="0"
79+
class=""
80+
valueClass="p-2 border border-gray-400 font-monospace"
81+
minusClass="btn border-gray-400 rounded-l-md opacity-50 hover:opacity-40"
82+
plusClass="btn border-gray-400 rounded-r-md opacity-50 hover:opacity-40"
83+
[minusTemplate]="plusTemplate"
84+
[plusTemplate]="minus2">
6385
</ngx-input-counter>
6486
</div>
6587

‎projects/demo/src/styles.scss‎

Lines changed: 104 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,4 +67,107 @@ ngx-input-counter.custom-plus {
6767
background-color: #ddd;
6868
}
6969
}
70-
}
70+
}
71+
72+
.btn {
73+
padding: 0.125rem 0.5rem;
74+
background-color: transparent;
75+
border-color: transparent;
76+
display: inline-block;
77+
text-align: center;
78+
text-decoration: none;
79+
vertical-align: middle;
80+
cursor: pointer;
81+
-webkit-user-select: none;
82+
-moz-user-select: none;
83+
user-select: none;
84+
border: var(--bs-btn-border-width) solid var(border-color);
85+
border-radius: var(--bs-btn-border-radius);
86+
background-color: var(--bs-btn-bg);
87+
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
88+
outline: none;
89+
}
90+
91+
.border-gray-400 {
92+
border-color: #9ca3af;
93+
}
94+
95+
.opacity-50 {
96+
opacity: 0.5;
97+
}
98+
99+
.hover\:opacity-40:hover {
100+
opacity: 0.4;
101+
}
102+
103+
.rounded-md {
104+
border-radius: 0.375rem;
105+
}
106+
107+
.p-2 {
108+
padding: 0.5rem;
109+
}
110+
111+
.rounded-r-md {
112+
border-top-right-radius: 6px;
113+
border-bottom-right-radius: 6px;
114+
}
115+
116+
.rounded-l-md {
117+
border-top-left-radius: 6px;
118+
border-bottom-left-radius: 6px;
119+
}
120+
121+
.rounded-md {
122+
border-radius: 0.375rem;
123+
}
124+
125+
.flex {
126+
display: flex;
127+
}
128+
.border {
129+
border-width: 1px;
130+
border-style: solid;
131+
}
132+
133+
.font-monospace {
134+
font-family: monospace;
135+
}
136+
137+
.p-2 {
138+
padding: 0.5rem;
139+
}
140+
141+
.btn-primary {
142+
--bs-btn-color: #fff;
143+
--bs-btn-bg: #0d6efd;
144+
border-color: #0d6efd;
145+
--bs-btn-hover-color: #fff;
146+
--bs-btn-hover-bg: #0b5ed7;
147+
--bs-btn-hover-border-color: #0a58ca;
148+
--bs-btn-focus-shadow-rgb: 49,132,253;
149+
--bs-btn-active-color: #fff;
150+
--bs-btn-active-bg: #0a58ca;
151+
--bs-btn-active-border-color: #0a53be;
152+
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
153+
--bs-btn-disabled-color: #fff;
154+
--bs-btn-disabled-bg: #0d6efd;
155+
--bs-btn-disabled-border-color: #0d6efd;
156+
}
157+
158+
.btn-info {
159+
color: #000;
160+
background-color: #0dcaf0;
161+
border-color: #0dcaf0;
162+
--bs-btn-hover-color: #000;
163+
--bs-btn-hover-bg: #31d2f2;
164+
--bs-btn-hover-border-color: #25cff2;
165+
--bs-btn-focus-shadow-rgb: 11,172,204;
166+
--bs-btn-active-color: #000;
167+
--bs-btn-active-bg: #3dd5f3;
168+
--bs-btn-active-border-color: #25cff2;
169+
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
170+
--bs-btn-disabled-color: #000;
171+
--bs-btn-disabled-bg: #0dcaf0;
172+
--bs-btn-disabled-border-color: #0dcaf0;
173+
}

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,10 @@ Use in your components
4747
| step | `number` | `1` | Transition time for the animation |
4848
| minusTemplate | `TemplateRef` | `-` | Pass a TemplateRef to replace the minus button content |
4949
| plusTemplate | `TemplateRef` | `+` | Pass a TemplateRef to replace the plus button content |
50+
| minusClass | `string` | `'ngx-input-counter-button'` | Classes of the minus button |
51+
| plusClass | `string` | `'ngx-input-counter-button'` | Classes of the plus button |
52+
| valueClass | `string` | `'ngx-input-counter-value'` | Classes of value text |
53+
| disabled | `boolean` | `false` | Disables the buttons
5054

5155
### Outputs
5256

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

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,23 @@
11
{
22
"name": "ngx-input-counter",
3-
"version": "0.0.2",
3+
"description": "Input counter component for Angular",
4+
"version": "0.0.3",
45
"keywords": [
56
"frontend",
67
"input",
78
"component",
89
"input-number",
910
"counter"
1011
],
12+
"license": "MIT",
13+
"homepage": "https://github.com/Codenity-team/ngx-input-counter#readme",
14+
"repository": {
15+
"type": "git",
16+
"url": "https://github.com/Codenity-team/ngx-input-counter.git"
17+
},
18+
"bugs": {
19+
"url": "https://github.com/Codenity-team/ngx-input-counter/issues"
20+
},
1121
"peerDependencies": {
1222
"@angular/common": "^15.0.0",
1323
"@angular/core": "^15.0.0"

‎projects/ngx-input-counter/src/lib/ngx-input-counter.component.html‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,23 @@
11
<ng-template #minus>-</ng-template>
22
<ng-template #plus>+</ng-template>
33
<div class="ngx-input-counter-container">
4-
<button class="ngx-input-counter-button" (click)="addItem(-step)">
5-
<ng-template
6-
[ngTemplateOutlet]="minusTemplate || minusTemplateFromContent?.templateRef || minus"
7-
[ngTemplateOutletContext]="context"
8-
></ng-template>
9-
<ng-content select="[minus]"></ng-content>
10-
</button>
11-
<div class="ngx-input-counter-value">
4+
<ng-template let-class="class" #tm>
5+
<button [class]="minusTemplateFromContent?.class || minusClass" (click)="addItem(-step)" [disabled]="disabled">
6+
<ng-template
7+
[ngTemplateOutlet]="minusTemplate || minusTemplateFromContent?.templateRef || minus"
8+
[ngTemplateOutletContext]="context"
9+
></ng-template>
10+
</button>
11+
</ng-template>
12+
<ng-template
13+
[ngTemplateOutlet]="tm || minus"
14+
[ngTemplateOutletContext]="context"
15+
></ng-template>
16+
<ng-content select="[minus]"></ng-content>
17+
<div [class]="valueClass">
1218
{{value}}
1319
</div>
14-
<button class="ngx-input-counter-button" (click)="addItem(step)">
20+
<button [class]="plusTemplateFromContent?.class || plusClass" (click)="addItem(step)" [disabled]="disabled">
1521
<ng-template *ngTemplateOutlet="plusTemplate || plusTemplateFromContent?.templateRef || plus; context: context"></ng-template>
1622
</button>
1723
</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
.ngx-input-counter-container {
22
text-align: center;
3+
display: inline-flex;
34
.ngx-input-counter-value {
45
width: 36px;
5-
display: inline-block;
66
}
77
}
88

0 commit comments

Comments
 (0)