ngx-st-qty-input 18.0.0 → 18.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -1,24 +1,569 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Quantity Input Component - Complete Documentation
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
## Table of Contents
|
|
4
|
+
- [Overview](#overview)
|
|
5
|
+
- [Installation](#installation)
|
|
6
|
+
- [Basic Usage](#basic-usage)
|
|
7
|
+
- [Inputs](#inputs)
|
|
8
|
+
- [Outputs](#outputs)
|
|
9
|
+
- [Usage Examples](#usage-examples)
|
|
10
|
+
- [Best Practices](#best-practices)
|
|
4
11
|
|
|
5
|
-
|
|
12
|
+
---
|
|
6
13
|
|
|
7
|
-
|
|
8
|
-
> Note: Don't forget to add `--project ngx-st-qty-input` or else it will be added to the default project in your `angular.json` file.
|
|
14
|
+
## Overview
|
|
9
15
|
|
|
10
|
-
|
|
16
|
+
The `ngx-st-qty-input` component is a quantity selector with increment/decrement buttons. Features include:
|
|
17
|
+
- Plus/minus buttons for incrementing/decrementing values
|
|
18
|
+
- Direct numeric input
|
|
19
|
+
- Negative value support (optional)
|
|
20
|
+
- Two-way data binding with model
|
|
21
|
+
- Disabled state support
|
|
22
|
+
- Error state display
|
|
23
|
+
- Change event emission
|
|
11
24
|
|
|
12
|
-
|
|
25
|
+
---
|
|
13
26
|
|
|
14
|
-
##
|
|
27
|
+
## Installation
|
|
15
28
|
|
|
16
|
-
|
|
29
|
+
```bash
|
|
30
|
+
npm install ngx-st-qty-input
|
|
31
|
+
```
|
|
17
32
|
|
|
18
|
-
|
|
33
|
+
Import the module:
|
|
19
34
|
|
|
20
|
-
|
|
35
|
+
```typescript
|
|
36
|
+
import { NgxStQtyInputModule } from 'ngx-st-qty-input';
|
|
21
37
|
|
|
22
|
-
|
|
38
|
+
@NgModule({
|
|
39
|
+
imports: [NgxStQtyInputModule]
|
|
40
|
+
})
|
|
41
|
+
export class AppModule { }
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
---
|
|
45
|
+
|
|
46
|
+
## Basic Usage
|
|
47
|
+
|
|
48
|
+
```html
|
|
49
|
+
<ngx-st-qty-input
|
|
50
|
+
[(qtyModel)]="quantity">
|
|
51
|
+
</ngx-st-qty-input>
|
|
52
|
+
|
|
53
|
+
<p>Quantity: {{ quantity }}</p>
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
---
|
|
57
|
+
|
|
58
|
+
## Inputs
|
|
59
|
+
|
|
60
|
+
### `qtyModel` (model signal)
|
|
61
|
+
- **Type:** `number`
|
|
62
|
+
- **Required:** Yes
|
|
63
|
+
- **Description:** The quantity value. Uses Angular's model signal for two-way binding.
|
|
64
|
+
- **Example:**
|
|
65
|
+
```html
|
|
66
|
+
[(qtyModel)]="quantity"
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
### `allowNegative`
|
|
70
|
+
- **Type:** `boolean`
|
|
71
|
+
- **Default:** `false`
|
|
72
|
+
- **Description:** Allows negative values. When false, values below 0 are automatically reset to 0.
|
|
73
|
+
- **Example:**
|
|
74
|
+
```html
|
|
75
|
+
[allowNegative]="true"
|
|
76
|
+
[allowNegative]="false"
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
### `disabled`
|
|
80
|
+
- **Type:** `boolean`
|
|
81
|
+
- **Default:** `false`
|
|
82
|
+
- **Description:** Disables the entire component (input and buttons).
|
|
83
|
+
- **Example:**
|
|
84
|
+
```html
|
|
85
|
+
[disabled]="isProcessing"
|
|
86
|
+
[disabled]="true"
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
### `showError`
|
|
90
|
+
- **Type:** `boolean`
|
|
91
|
+
- **Default:** `false`
|
|
92
|
+
- **Description:** Shows an error state styling on the input.
|
|
93
|
+
- **Example:**
|
|
94
|
+
```html
|
|
95
|
+
[showError]="quantity < minRequired"
|
|
96
|
+
[showError]="hasValidationError"
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
---
|
|
100
|
+
|
|
101
|
+
## Outputs
|
|
102
|
+
|
|
103
|
+
### `newValueEmitter`
|
|
104
|
+
- **Type:** `number`
|
|
105
|
+
- **Description:** Emitted whenever the quantity value changes (via buttons or direct input).
|
|
106
|
+
- **Example:**
|
|
107
|
+
```typescript
|
|
108
|
+
(newValueEmitter)="onQuantityChange($event)"
|
|
109
|
+
|
|
110
|
+
onQuantityChange(newValue: number): void {
|
|
111
|
+
console.log('New quantity:', newValue);
|
|
112
|
+
this.updateCart(newValue);
|
|
113
|
+
}
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
---
|
|
117
|
+
|
|
118
|
+
## Usage Examples
|
|
119
|
+
|
|
120
|
+
### Example 1: Basic Shopping Cart Quantity
|
|
121
|
+
|
|
122
|
+
```typescript
|
|
123
|
+
// Component
|
|
124
|
+
@Component({
|
|
125
|
+
selector: 'app-cart-item',
|
|
126
|
+
template: `
|
|
127
|
+
<div class="cart-item">
|
|
128
|
+
<img [src]="product.image" [alt]="product.name">
|
|
129
|
+
<h3>{{ product.name }}</h3>
|
|
130
|
+
<p>Price: ${{ product.price }}</p>
|
|
131
|
+
|
|
132
|
+
<ngx-st-qty-input
|
|
133
|
+
[(qtyModel)]="quantity"
|
|
134
|
+
(newValueEmitter)="updateCartItem($event)">
|
|
135
|
+
</ngx-st-qty-input>
|
|
136
|
+
|
|
137
|
+
<p>Total: ${{ total }}</p>
|
|
138
|
+
</div>
|
|
139
|
+
`
|
|
140
|
+
})
|
|
141
|
+
export class CartItemComponent {
|
|
142
|
+
product = {
|
|
143
|
+
id: 1,
|
|
144
|
+
name: 'Product Name',
|
|
145
|
+
price: 19.99,
|
|
146
|
+
image: 'product.jpg'
|
|
147
|
+
};
|
|
148
|
+
|
|
149
|
+
quantity = 1;
|
|
150
|
+
|
|
151
|
+
get total(): number {
|
|
152
|
+
return this.product.price * this.quantity;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
updateCartItem(newQuantity: number): void {
|
|
156
|
+
console.log('Updating cart with quantity:', newQuantity);
|
|
157
|
+
// API call to update cart
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
### Example 2: With Negative Values
|
|
163
|
+
|
|
164
|
+
```typescript
|
|
165
|
+
// Component
|
|
166
|
+
@Component({
|
|
167
|
+
selector: 'app-adjustment',
|
|
168
|
+
template: `
|
|
169
|
+
<h3>Stock Adjustment</h3>
|
|
170
|
+
<p>Current Stock: {{ currentStock }}</p>
|
|
171
|
+
|
|
172
|
+
<label>Adjustment:</label>
|
|
173
|
+
<ngx-st-qty-input
|
|
174
|
+
[(qtyModel)]="adjustment"
|
|
175
|
+
[allowNegative]="true"
|
|
176
|
+
(newValueEmitter)="calculateNewStock($event)">
|
|
177
|
+
</ngx-st-qty-input>
|
|
178
|
+
|
|
179
|
+
<p>New Stock: {{ newStock }}</p>
|
|
180
|
+
<button (click)="applyAdjustment()">Apply</button>
|
|
181
|
+
`
|
|
182
|
+
})
|
|
183
|
+
export class StockAdjustmentComponent {
|
|
184
|
+
currentStock = 100;
|
|
185
|
+
adjustment = 0;
|
|
186
|
+
newStock = 100;
|
|
187
|
+
|
|
188
|
+
calculateNewStock(adjustment: number): void {
|
|
189
|
+
this.newStock = this.currentStock + adjustment;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
applyAdjustment(): void {
|
|
193
|
+
this.currentStock = this.newStock;
|
|
194
|
+
this.adjustment = 0;
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
```
|
|
198
|
+
|
|
199
|
+
### Example 3: Disabled State
|
|
200
|
+
|
|
201
|
+
```typescript
|
|
202
|
+
// Component
|
|
203
|
+
@Component({
|
|
204
|
+
selector: 'app-disabled-qty',
|
|
205
|
+
template: `
|
|
206
|
+
<ngx-st-qty-input
|
|
207
|
+
[(qtyModel)]="quantity"
|
|
208
|
+
[disabled]="outOfStock">
|
|
209
|
+
</ngx-st-qty-input>
|
|
210
|
+
|
|
211
|
+
<p *ngIf="outOfStock" class="error">Out of Stock</p>
|
|
212
|
+
<button (click)="toggleStock()">Toggle Stock</button>
|
|
213
|
+
`
|
|
214
|
+
})
|
|
215
|
+
export class DisabledQtyComponent {
|
|
216
|
+
quantity = 1;
|
|
217
|
+
outOfStock = false;
|
|
218
|
+
|
|
219
|
+
toggleStock(): void {
|
|
220
|
+
this.outOfStock = !this.outOfStock;
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
```
|
|
224
|
+
|
|
225
|
+
### Example 4: With Validation and Error Display
|
|
226
|
+
|
|
227
|
+
```typescript
|
|
228
|
+
// Component
|
|
229
|
+
@Component({
|
|
230
|
+
selector: 'app-validated-qty',
|
|
231
|
+
template: `
|
|
232
|
+
<div class="qty-input-wrapper">
|
|
233
|
+
<label>Quantity (Min: {{ minQty }}, Max: {{ maxQty }}):</label>
|
|
234
|
+
<ngx-st-qty-input
|
|
235
|
+
[(qtyModel)]="quantity"
|
|
236
|
+
[showError]="hasError"
|
|
237
|
+
(newValueEmitter)="validate($event)">
|
|
238
|
+
</ngx-st-qty-input>
|
|
239
|
+
|
|
240
|
+
<p *ngIf="hasError" class="error-message">
|
|
241
|
+
{{ errorMessage }}
|
|
242
|
+
</p>
|
|
243
|
+
</div>
|
|
244
|
+
`
|
|
245
|
+
})
|
|
246
|
+
export class ValidatedQtyComponent {
|
|
247
|
+
quantity = 1;
|
|
248
|
+
minQty = 1;
|
|
249
|
+
maxQty = 10;
|
|
250
|
+
hasError = false;
|
|
251
|
+
errorMessage = '';
|
|
252
|
+
|
|
253
|
+
validate(value: number): void {
|
|
254
|
+
if (value < this.minQty) {
|
|
255
|
+
this.hasError = true;
|
|
256
|
+
this.errorMessage = `Minimum quantity is ${this.minQty}`;
|
|
257
|
+
} else if (value > this.maxQty) {
|
|
258
|
+
this.hasError = true;
|
|
259
|
+
this.errorMessage = `Maximum quantity is ${this.maxQty}`;
|
|
260
|
+
} else {
|
|
261
|
+
this.hasError = false;
|
|
262
|
+
this.errorMessage = '';
|
|
263
|
+
}
|
|
264
|
+
}
|
|
265
|
+
}
|
|
266
|
+
```
|
|
267
|
+
|
|
268
|
+
### Example 5: Multiple Quantity Inputs
|
|
269
|
+
|
|
270
|
+
```typescript
|
|
271
|
+
// Component
|
|
272
|
+
@Component({
|
|
273
|
+
selector: 'app-order-form',
|
|
274
|
+
template: `
|
|
275
|
+
<h3>Order Products</h3>
|
|
276
|
+
<div *ngFor="let item of orderItems" class="order-item">
|
|
277
|
+
<span>{{ item.name }}</span>
|
|
278
|
+
<ngx-st-qty-input
|
|
279
|
+
[(qtyModel)]="item.quantity"
|
|
280
|
+
(newValueEmitter)="updateItemTotal(item)">
|
|
281
|
+
</ngx-st-qty-input>
|
|
282
|
+
<span>{{ item.price | currency }} each</span>
|
|
283
|
+
<span>Total: {{ item.total | currency }}</span>
|
|
284
|
+
</div>
|
|
285
|
+
|
|
286
|
+
<div class="order-summary">
|
|
287
|
+
<h4>Order Total: {{ orderTotal | currency }}</h4>
|
|
288
|
+
</div>
|
|
289
|
+
`
|
|
290
|
+
})
|
|
291
|
+
export class OrderFormComponent {
|
|
292
|
+
orderItems = [
|
|
293
|
+
{ id: 1, name: 'Item 1', price: 10, quantity: 1, total: 10 },
|
|
294
|
+
{ id: 2, name: 'Item 2', price: 15, quantity: 2, total: 30 },
|
|
295
|
+
{ id: 3, name: 'Item 3', price: 20, quantity: 1, total: 20 }
|
|
296
|
+
];
|
|
297
|
+
|
|
298
|
+
updateItemTotal(item: any): void {
|
|
299
|
+
item.total = item.price * item.quantity;
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
get orderTotal(): number {
|
|
303
|
+
return this.orderItems.reduce((sum, item) => sum + item.total, 0);
|
|
304
|
+
}
|
|
305
|
+
}
|
|
306
|
+
```
|
|
307
|
+
|
|
308
|
+
### Example 6: With Min/Max Enforcement
|
|
309
|
+
|
|
310
|
+
```typescript
|
|
311
|
+
// Component
|
|
312
|
+
@Component({
|
|
313
|
+
selector: 'app-constrained-qty',
|
|
314
|
+
template: `
|
|
315
|
+
<label>Select Quantity (1-100):</label>
|
|
316
|
+
<ngx-st-qty-input
|
|
317
|
+
[(qtyModel)]="quantity"
|
|
318
|
+
[showError]="isOutOfRange"
|
|
319
|
+
(newValueEmitter)="enforceRange($event)">
|
|
320
|
+
</ngx-st-qty-input>
|
|
321
|
+
|
|
322
|
+
<p *ngIf="isOutOfRange" class="warning">
|
|
323
|
+
Quantity must be between 1 and 100
|
|
324
|
+
</p>
|
|
325
|
+
`
|
|
326
|
+
})
|
|
327
|
+
export class ConstrainedQtyComponent {
|
|
328
|
+
quantity = 1;
|
|
329
|
+
minValue = 1;
|
|
330
|
+
maxValue = 100;
|
|
331
|
+
isOutOfRange = false;
|
|
332
|
+
|
|
333
|
+
enforceRange(value: number): void {
|
|
334
|
+
this.isOutOfRange = false;
|
|
335
|
+
|
|
336
|
+
if (value < this.minValue) {
|
|
337
|
+
this.quantity = this.minValue;
|
|
338
|
+
this.isOutOfRange = true;
|
|
339
|
+
} else if (value > this.maxValue) {
|
|
340
|
+
this.quantity = this.maxValue;
|
|
341
|
+
this.isOutOfRange = true;
|
|
342
|
+
}
|
|
343
|
+
}
|
|
344
|
+
}
|
|
345
|
+
```
|
|
346
|
+
|
|
347
|
+
### Example 7: Real-time Price Calculator
|
|
348
|
+
|
|
349
|
+
```typescript
|
|
350
|
+
// Component
|
|
351
|
+
@Component({
|
|
352
|
+
selector: 'app-price-calculator',
|
|
353
|
+
template: `
|
|
354
|
+
<div class="calculator">
|
|
355
|
+
<h3>{{ product.name }}</h3>
|
|
356
|
+
<img [src]="product.image" [alt]="product.name">
|
|
357
|
+
|
|
358
|
+
<div class="price-info">
|
|
359
|
+
<p>Unit Price: {{ product.price | currency }}</p>
|
|
360
|
+
|
|
361
|
+
<div class="qty-selector">
|
|
362
|
+
<label>Quantity:</label>
|
|
363
|
+
<ngx-st-qty-input
|
|
364
|
+
[(qtyModel)]="quantity"
|
|
365
|
+
[disabled]="!product.inStock"
|
|
366
|
+
(newValueEmitter)="calculatePrice($event)">
|
|
367
|
+
</ngx-st-qty-input>
|
|
368
|
+
</div>
|
|
369
|
+
|
|
370
|
+
<div class="discount" *ngIf="discount > 0">
|
|
371
|
+
<p>Discount: -{{ discount | currency }}</p>
|
|
372
|
+
</div>
|
|
373
|
+
|
|
374
|
+
<div class="total">
|
|
375
|
+
<h2>Total: {{ totalPrice | currency }}</h2>
|
|
376
|
+
</div>
|
|
377
|
+
|
|
378
|
+
<button
|
|
379
|
+
[disabled]="!product.inStock"
|
|
380
|
+
(click)="addToCart()">
|
|
381
|
+
Add to Cart
|
|
382
|
+
</button>
|
|
383
|
+
</div>
|
|
384
|
+
</div>
|
|
385
|
+
`
|
|
386
|
+
})
|
|
387
|
+
export class PriceCalculatorComponent {
|
|
388
|
+
product = {
|
|
389
|
+
id: 1,
|
|
390
|
+
name: 'Premium Widget',
|
|
391
|
+
price: 29.99,
|
|
392
|
+
image: 'widget.jpg',
|
|
393
|
+
inStock: true
|
|
394
|
+
};
|
|
395
|
+
|
|
396
|
+
quantity = 1;
|
|
397
|
+
totalPrice = 29.99;
|
|
398
|
+
discount = 0;
|
|
399
|
+
|
|
400
|
+
calculatePrice(qty: number): void {
|
|
401
|
+
const subtotal = this.product.price * qty;
|
|
402
|
+
|
|
403
|
+
// Apply bulk discounts
|
|
404
|
+
if (qty >= 10) {
|
|
405
|
+
this.discount = subtotal * 0.1; // 10% off
|
|
406
|
+
} else if (qty >= 5) {
|
|
407
|
+
this.discount = subtotal * 0.05; // 5% off
|
|
408
|
+
} else {
|
|
409
|
+
this.discount = 0;
|
|
410
|
+
}
|
|
411
|
+
|
|
412
|
+
this.totalPrice = subtotal - this.discount;
|
|
413
|
+
}
|
|
414
|
+
|
|
415
|
+
addToCart(): void {
|
|
416
|
+
console.log(`Adding ${this.quantity} items to cart`);
|
|
417
|
+
// Add to cart logic
|
|
418
|
+
}
|
|
419
|
+
}
|
|
420
|
+
```
|
|
421
|
+
|
|
422
|
+
### Example 8: With Stock Availability
|
|
423
|
+
|
|
424
|
+
```typescript
|
|
425
|
+
// Component
|
|
426
|
+
@Component({
|
|
427
|
+
selector: 'app-stock-aware-qty',
|
|
428
|
+
template: `
|
|
429
|
+
<div class="product">
|
|
430
|
+
<h3>{{ product.name }}</h3>
|
|
431
|
+
<p>Available Stock: {{ product.stock }}</p>
|
|
432
|
+
|
|
433
|
+
<ngx-st-qty-input
|
|
434
|
+
[(qtyModel)]="quantity"
|
|
435
|
+
[showError]="exceedsStock"
|
|
436
|
+
[disabled]="product.stock === 0"
|
|
437
|
+
(newValueEmitter)="checkStock($event)">
|
|
438
|
+
</ngx-st-qty-input>
|
|
439
|
+
|
|
440
|
+
<p *ngIf="exceedsStock" class="error">
|
|
441
|
+
Only {{ product.stock }} items available
|
|
442
|
+
</p>
|
|
443
|
+
|
|
444
|
+
<p *ngIf="product.stock === 0" class="out-of-stock">
|
|
445
|
+
Out of Stock
|
|
446
|
+
</p>
|
|
447
|
+
|
|
448
|
+
<button
|
|
449
|
+
[disabled]="exceedsStock || product.stock === 0"
|
|
450
|
+
(click)="purchase()">
|
|
451
|
+
Purchase
|
|
452
|
+
</button>
|
|
453
|
+
</div>
|
|
454
|
+
`
|
|
455
|
+
})
|
|
456
|
+
export class StockAwareQtyComponent {
|
|
457
|
+
product = {
|
|
458
|
+
name: 'Limited Edition Item',
|
|
459
|
+
stock: 5
|
|
460
|
+
};
|
|
461
|
+
|
|
462
|
+
quantity = 1;
|
|
463
|
+
exceedsStock = false;
|
|
464
|
+
|
|
465
|
+
checkStock(qty: number): void {
|
|
466
|
+
if (qty > this.product.stock) {
|
|
467
|
+
this.exceedsStock = true;
|
|
468
|
+
// Optionally auto-correct
|
|
469
|
+
this.quantity = this.product.stock;
|
|
470
|
+
} else {
|
|
471
|
+
this.exceedsStock = false;
|
|
472
|
+
}
|
|
473
|
+
}
|
|
474
|
+
|
|
475
|
+
purchase(): void {
|
|
476
|
+
this.product.stock -= this.quantity;
|
|
477
|
+
console.log(`Purchased ${this.quantity} items`);
|
|
478
|
+
this.quantity = 1;
|
|
479
|
+
}
|
|
480
|
+
}
|
|
481
|
+
```
|
|
482
|
+
|
|
483
|
+
---
|
|
484
|
+
|
|
485
|
+
## Best Practices
|
|
486
|
+
|
|
487
|
+
1. **Set appropriate initial values**:
|
|
488
|
+
```typescript
|
|
489
|
+
quantity = 1; // Don't start with 0 for shopping carts
|
|
490
|
+
```
|
|
491
|
+
|
|
492
|
+
2. **Use validation** to enforce business rules:
|
|
493
|
+
```typescript
|
|
494
|
+
onQuantityChange(qty: number): void {
|
|
495
|
+
if (qty > maxStock) {
|
|
496
|
+
this.quantity = maxStock;
|
|
497
|
+
}
|
|
498
|
+
}
|
|
499
|
+
```
|
|
500
|
+
|
|
501
|
+
3. **Disable when not applicable**:
|
|
502
|
+
```html
|
|
503
|
+
[disabled]="outOfStock || isProcessing"
|
|
504
|
+
```
|
|
505
|
+
|
|
506
|
+
4. **Show errors for invalid values**:
|
|
507
|
+
```html
|
|
508
|
+
[showError]="quantity < minRequired || quantity > maxAllowed"
|
|
509
|
+
```
|
|
510
|
+
|
|
511
|
+
5. **Use `allowNegative` only when needed**:
|
|
512
|
+
```html
|
|
513
|
+
<!-- For adjustments -->
|
|
514
|
+
[allowNegative]="true"
|
|
515
|
+
|
|
516
|
+
<!-- For quantities (default) -->
|
|
517
|
+
[allowNegative]="false"
|
|
518
|
+
```
|
|
519
|
+
|
|
520
|
+
6. **Provide feedback** on changes:
|
|
521
|
+
```typescript
|
|
522
|
+
onQuantityChange(qty: number): void {
|
|
523
|
+
this.updateTotal();
|
|
524
|
+
this.checkAvailability();
|
|
525
|
+
this.calculateShipping();
|
|
526
|
+
}
|
|
527
|
+
```
|
|
528
|
+
|
|
529
|
+
7. **Consider debouncing** for API calls:
|
|
530
|
+
```typescript
|
|
531
|
+
onQuantityChange = debounce((qty: number) => {
|
|
532
|
+
this.updateCartOnServer(qty);
|
|
533
|
+
}, 500);
|
|
534
|
+
```
|
|
535
|
+
|
|
536
|
+
---
|
|
537
|
+
|
|
538
|
+
## Component Behavior
|
|
539
|
+
|
|
540
|
+
### Increment Button (+)
|
|
541
|
+
- Increases value by 1
|
|
542
|
+
- Emits `newValueEmitter` event
|
|
543
|
+
- Disabled when component is disabled
|
|
544
|
+
|
|
545
|
+
### Decrement Button (-)
|
|
546
|
+
- Decreases value by 1
|
|
547
|
+
- If `allowNegative` is false and value would go below 0, sets to 0
|
|
548
|
+
- Emits `newValueEmitter` event
|
|
549
|
+
- Disabled when component is disabled
|
|
550
|
+
|
|
551
|
+
### Direct Input
|
|
552
|
+
- Allows manual entry of numeric values
|
|
553
|
+
- Validates and corrects negative values if `allowNegative` is false
|
|
554
|
+
- Emits `newValueEmitter` event on blur or enter
|
|
555
|
+
|
|
556
|
+
---
|
|
557
|
+
|
|
558
|
+
## Common Use Cases
|
|
559
|
+
|
|
560
|
+
1. **Shopping Cart**: Product quantity selection
|
|
561
|
+
2. **Inventory Management**: Stock adjustments (with negative values)
|
|
562
|
+
3. **Order Forms**: Quantity selection for multiple items
|
|
563
|
+
4. **Configurators**: Selecting quantities of customizable items
|
|
564
|
+
5. **Bulk Operations**: Specifying number of items to process
|
|
565
|
+
|
|
566
|
+
---
|
|
567
|
+
|
|
568
|
+
This documentation covers all inputs, outputs, and usage patterns for the Quantity Input component.
|
|
23
569
|
|
|
24
|
-
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.
|
|
@@ -13,6 +13,7 @@ export class QtyInputComponent {
|
|
|
13
13
|
this.allowNegative = input(false);
|
|
14
14
|
this.disabled = input(false);
|
|
15
15
|
this.showError = input(false);
|
|
16
|
+
this.appearance = input('fill');
|
|
16
17
|
this.newValueEmitter = output();
|
|
17
18
|
}
|
|
18
19
|
ngOnInit() { }
|
|
@@ -35,10 +36,10 @@ export class QtyInputComponent {
|
|
|
35
36
|
this.newValueEmitter.emit(this.qtyModel());
|
|
36
37
|
}
|
|
37
38
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: QtyInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
38
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: QtyInputComponent, selector: "ngx-st-qty-input", inputs: { qtyModel: { classPropertyName: "qtyModel", publicName: "qtyModel", isSignal: true, isRequired: true, transformFunction: null }, allowNegative: { classPropertyName: "allowNegative", publicName: "allowNegative", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showError: { classPropertyName: "showError", publicName: "showError", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { qtyModel: "qtyModelChange", newValueEmitter: "newValueEmitter" }, ngImport: i0, template: "<div class=\"row align-items-center st-qty-input\">\r\n <div class=\"col-xs-auto\">\r\n <button\r\n mat-icon-button\r\n color=\"warn\"\r\n (click)=\"removeClicked($event)\"\r\n [disabled]=\"(!allowNegative() && qtyModel() === 0) || disabled()\"\r\n >\r\n <mat-icon>remove</mat-icon>\r\n </button>\r\n </div>\r\n <div class=\"col\">\r\n <mat-form-field style=\"width:
|
|
39
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: QtyInputComponent, selector: "ngx-st-qty-input", inputs: { qtyModel: { classPropertyName: "qtyModel", publicName: "qtyModel", isSignal: true, isRequired: true, transformFunction: null }, allowNegative: { classPropertyName: "allowNegative", publicName: "allowNegative", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showError: { classPropertyName: "showError", publicName: "showError", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { qtyModel: "qtyModelChange", newValueEmitter: "newValueEmitter" }, ngImport: i0, template: "<div class=\"row align-items-center st-qty-input\">\r\n <div class=\"col-xs-auto\">\r\n <button\r\n mat-icon-button\r\n color=\"warn\"\r\n (click)=\"removeClicked($event)\"\r\n [disabled]=\"(!allowNegative() && qtyModel() === 0) || disabled()\"\r\n >\r\n <mat-icon>remove</mat-icon>\r\n </button>\r\n </div>\r\n <div class=\"col\">\r\n <mat-form-field style=\"width: 60px; margin-bottom: -15px\" [appearance]=\"appearance()\">\r\n <input\r\n matInput\r\n type=\"number\"\r\n [(ngModel)]=\"qtyModel\"\r\n [disabled]=\"disabled()\"\r\n [ngClass]=\"{ 'qty-input-error': showError() }\"\r\n (ngModelChange)=\"qtyModelChanged()\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n <div class=\"col-xs-auto\">\r\n <button\r\n mat-icon-button\r\n color=\"accent\"\r\n (click)=\"addClicked($event)\"\r\n [disabled]=\"disabled()\"\r\n >\r\n <mat-icon>add</mat-icon>\r\n </button>\r\n </div>\r\n</div>\r\n", styles: [".st-qty-input{min-width:120px;flex-wrap:nowrap!important}.st-qty-input .qty-input-error{color:red;font-weight:700}.st-qty-input .col-auto,.st-qty-input .col{padding:0}.st-qty-input mat-form-field input{text-align:right}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
39
40
|
}
|
|
40
41
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: QtyInputComponent, decorators: [{
|
|
41
42
|
type: Component,
|
|
42
|
-
args: [{ selector: 'ngx-st-qty-input', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"row align-items-center st-qty-input\">\r\n <div class=\"col-xs-auto\">\r\n <button\r\n mat-icon-button\r\n color=\"warn\"\r\n (click)=\"removeClicked($event)\"\r\n [disabled]=\"(!allowNegative() && qtyModel() === 0) || disabled()\"\r\n >\r\n <mat-icon>remove</mat-icon>\r\n </button>\r\n </div>\r\n <div class=\"col\">\r\n <mat-form-field style=\"width:
|
|
43
|
+
args: [{ selector: 'ngx-st-qty-input', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"row align-items-center st-qty-input\">\r\n <div class=\"col-xs-auto\">\r\n <button\r\n mat-icon-button\r\n color=\"warn\"\r\n (click)=\"removeClicked($event)\"\r\n [disabled]=\"(!allowNegative() && qtyModel() === 0) || disabled()\"\r\n >\r\n <mat-icon>remove</mat-icon>\r\n </button>\r\n </div>\r\n <div class=\"col\">\r\n <mat-form-field style=\"width: 60px; margin-bottom: -15px\" [appearance]=\"appearance()\">\r\n <input\r\n matInput\r\n type=\"number\"\r\n [(ngModel)]=\"qtyModel\"\r\n [disabled]=\"disabled()\"\r\n [ngClass]=\"{ 'qty-input-error': showError() }\"\r\n (ngModelChange)=\"qtyModelChanged()\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n <div class=\"col-xs-auto\">\r\n <button\r\n mat-icon-button\r\n color=\"accent\"\r\n (click)=\"addClicked($event)\"\r\n [disabled]=\"disabled()\"\r\n >\r\n <mat-icon>add</mat-icon>\r\n </button>\r\n </div>\r\n</div>\r\n", styles: [".st-qty-input{min-width:120px;flex-wrap:nowrap!important}.st-qty-input .qty-input-error{color:red;font-weight:700}.st-qty-input .col-auto,.st-qty-input .col{padding:0}.st-qty-input mat-form-field input{text-align:right}\n"] }]
|
|
43
44
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
|
|
44
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
45
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicXR5LWlucHV0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zdC1xdHktaW5wdXQvc3JjL2xpYi9jb21wb25lbnRzL3F0eS1pbnB1dC9xdHktaW5wdXQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXN0LXF0eS1pbnB1dC9zcmMvbGliL2NvbXBvbmVudHMvcXR5LWlucHV0L3F0eS1pbnB1dC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBRXZCLFNBQVMsRUFFVCxpQkFBaUIsRUFDakIsS0FBSyxFQUNMLE1BQU0sRUFDTixLQUFLLEdBQ04sTUFBTSxlQUFlLENBQUM7Ozs7Ozs7O0FBU3ZCLE1BQU0sT0FBTyxpQkFBaUI7SUFhNUIsWUFBb0IsaUJBQW9DO1FBQXBDLHNCQUFpQixHQUFqQixpQkFBaUIsQ0FBbUI7UUFaeEQsYUFBUSxHQUFHLEtBQUssQ0FBQyxRQUFRLEVBQVUsQ0FBQztRQUVwQyxrQkFBYSxHQUFHLEtBQUssQ0FBVSxLQUFLLENBQUMsQ0FBQztRQUV0QyxhQUFRLEdBQUcsS0FBSyxDQUFVLEtBQUssQ0FBQyxDQUFDO1FBRWpDLGNBQVMsR0FBRyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7UUFFekIsZUFBVSxHQUFHLEtBQUssQ0FBcUIsTUFBTSxDQUFDLENBQUM7UUFFL0Msb0JBQWUsR0FBRyxNQUFNLEVBQVUsQ0FBQztJQUV3QixDQUFDO0lBRTVELFFBQVEsS0FBVSxDQUFDO0lBRW5CLGFBQWEsQ0FBQyxLQUFpQjtRQUM3QixLQUFLLENBQUMsd0JBQXdCLEVBQUUsQ0FBQztRQUVqQyxJQUFJLENBQUMsUUFBUSxDQUFDLE1BQU0sQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLEdBQUcsR0FBRyxDQUFDLENBQUMsQ0FBQztRQUNyQyxJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUMsQ0FBQztRQUMzQyxJQUFJLENBQUMsaUJBQWlCLENBQUMsWUFBWSxFQUFFLENBQUM7SUFDeEMsQ0FBQztJQUVELFVBQVUsQ0FBQyxLQUFpQjtRQUMxQixLQUFLLENBQUMsd0JBQXdCLEVBQUUsQ0FBQztRQUVqQyxJQUFJLENBQUMsUUFBUSxDQUFDLE1BQU0sQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLEdBQUcsR0FBRyxDQUFDLENBQUMsQ0FBQztRQUNyQyxJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUMsQ0FBQztRQUMzQyxJQUFJLENBQUMsaUJBQWlCLENBQUMsWUFBWSxFQUFFLENBQUM7SUFDeEMsQ0FBQztJQUVELGVBQWU7UUFDYixJQUFJLENBQUMsSUFBSSxDQUFDLGFBQWEsRUFBRSxJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUUsR0FBRyxDQUFDLEVBQUUsQ0FBQztZQUNqRCxJQUFJLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUN2QixDQUFDO1FBRUQsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDLENBQUM7SUFDN0MsQ0FBQzsrR0F2Q1UsaUJBQWlCO21HQUFqQixpQkFBaUIsNnlCQ2xCOUIsOC9CQWtDQTs7NEZEaEJhLGlCQUFpQjtrQkFQN0IsU0FBUzsrQkFDRSxrQkFBa0IsbUJBR1gsdUJBQXVCLENBQUMsTUFBTSxpQkFDaEMsaUJBQWlCLENBQUMsSUFBSSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XHJcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXHJcbiAgQ2hhbmdlRGV0ZWN0b3JSZWYsXHJcbiAgQ29tcG9uZW50LFxyXG4gIE9uSW5pdCxcclxuICBWaWV3RW5jYXBzdWxhdGlvbixcclxuICBpbnB1dCxcclxuICBvdXRwdXQsXHJcbiAgbW9kZWwsXHJcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ25neC1zdC1xdHktaW5wdXQnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9xdHktaW5wdXQuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL3F0eS1pbnB1dC5jb21wb25lbnQuc2NzcyddLFxyXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxyXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBRdHlJbnB1dENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcbiAgcXR5TW9kZWwgPSBtb2RlbC5yZXF1aXJlZDxudW1iZXI+KCk7XHJcblxyXG4gIGFsbG93TmVnYXRpdmUgPSBpbnB1dDxib29sZWFuPihmYWxzZSk7XHJcblxyXG4gIGRpc2FibGVkID0gaW5wdXQ8Ym9vbGVhbj4oZmFsc2UpO1xyXG5cclxuICBzaG93RXJyb3IgPSBpbnB1dChmYWxzZSk7XHJcblxyXG4gIGFwcGVhcmFuY2UgPSBpbnB1dDwnZmlsbCcgfCAnb3V0bGluZSc+KCdmaWxsJyk7XHJcblxyXG4gIG5ld1ZhbHVlRW1pdHRlciA9IG91dHB1dDxudW1iZXI+KCk7XHJcblxyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgY2hhbmdlRGV0ZWN0b3JSZWY6IENoYW5nZURldGVjdG9yUmVmKSB7fVxyXG5cclxuICBuZ09uSW5pdCgpOiB2b2lkIHt9XHJcblxyXG4gIHJlbW92ZUNsaWNrZWQoZXZlbnQ6IE1vdXNlRXZlbnQpIHtcclxuICAgIGV2ZW50LnN0b3BJbW1lZGlhdGVQcm9wYWdhdGlvbigpO1xyXG5cclxuICAgIHRoaXMucXR5TW9kZWwudXBkYXRlKHZhbCA9PiB2YWwgLSAxKTtcclxuICAgIHRoaXMubmV3VmFsdWVFbWl0dGVyLmVtaXQodGhpcy5xdHlNb2RlbCgpKTtcclxuICAgIHRoaXMuY2hhbmdlRGV0ZWN0b3JSZWYubWFya0ZvckNoZWNrKCk7XHJcbiAgfVxyXG5cclxuICBhZGRDbGlja2VkKGV2ZW50OiBNb3VzZUV2ZW50KSB7XHJcbiAgICBldmVudC5zdG9wSW1tZWRpYXRlUHJvcGFnYXRpb24oKTtcclxuXHJcbiAgICB0aGlzLnF0eU1vZGVsLnVwZGF0ZSh2YWwgPT4gdmFsICsgMSk7XHJcbiAgICB0aGlzLm5ld1ZhbHVlRW1pdHRlci5lbWl0KHRoaXMucXR5TW9kZWwoKSk7XHJcbiAgICB0aGlzLmNoYW5nZURldGVjdG9yUmVmLm1hcmtGb3JDaGVjaygpO1xyXG4gIH1cclxuXHJcbiAgcXR5TW9kZWxDaGFuZ2VkKCkge1xyXG4gICAgaWYgKCF0aGlzLmFsbG93TmVnYXRpdmUoKSAmJiB0aGlzLnF0eU1vZGVsKCkgPCAwKSB7XHJcbiAgICAgIHRoaXMucXR5TW9kZWwuc2V0KDApO1xyXG4gICAgfVxyXG5cclxuICAgIHRoaXMubmV3VmFsdWVFbWl0dGVyLmVtaXQodGhpcy5xdHlNb2RlbCgpKTtcclxuICB9XHJcbn1cclxuIiwiPGRpdiBjbGFzcz1cInJvdyBhbGlnbi1pdGVtcy1jZW50ZXIgc3QtcXR5LWlucHV0XCI+XHJcbiAgPGRpdiBjbGFzcz1cImNvbC14cy1hdXRvXCI+XHJcbiAgICA8YnV0dG9uXHJcbiAgICAgIG1hdC1pY29uLWJ1dHRvblxyXG4gICAgICBjb2xvcj1cIndhcm5cIlxyXG4gICAgICAoY2xpY2spPVwicmVtb3ZlQ2xpY2tlZCgkZXZlbnQpXCJcclxuICAgICAgW2Rpc2FibGVkXT1cIighYWxsb3dOZWdhdGl2ZSgpICYmIHF0eU1vZGVsKCkgPT09IDApIHx8IGRpc2FibGVkKClcIlxyXG4gICAgPlxyXG4gICAgICA8bWF0LWljb24+cmVtb3ZlPC9tYXQtaWNvbj5cclxuICAgIDwvYnV0dG9uPlxyXG4gIDwvZGl2PlxyXG4gIDxkaXYgY2xhc3M9XCJjb2xcIj5cclxuICAgIDxtYXQtZm9ybS1maWVsZCBzdHlsZT1cIndpZHRoOiA2MHB4OyBtYXJnaW4tYm90dG9tOiAtMTVweFwiIFthcHBlYXJhbmNlXT1cImFwcGVhcmFuY2UoKVwiPlxyXG4gICAgICA8aW5wdXRcclxuICAgICAgICBtYXRJbnB1dFxyXG4gICAgICAgIHR5cGU9XCJudW1iZXJcIlxyXG4gICAgICAgIFsobmdNb2RlbCldPVwicXR5TW9kZWxcIlxyXG4gICAgICAgIFtkaXNhYmxlZF09XCJkaXNhYmxlZCgpXCJcclxuICAgICAgICBbbmdDbGFzc109XCJ7ICdxdHktaW5wdXQtZXJyb3InOiBzaG93RXJyb3IoKSB9XCJcclxuICAgICAgICAobmdNb2RlbENoYW5nZSk9XCJxdHlNb2RlbENoYW5nZWQoKVwiXHJcbiAgICAgIC8+XHJcbiAgICA8L21hdC1mb3JtLWZpZWxkPlxyXG4gIDwvZGl2PlxyXG4gIDxkaXYgY2xhc3M9XCJjb2wteHMtYXV0b1wiPlxyXG4gICAgPGJ1dHRvblxyXG4gICAgICBtYXQtaWNvbi1idXR0b25cclxuICAgICAgY29sb3I9XCJhY2NlbnRcIlxyXG4gICAgICAoY2xpY2spPVwiYWRkQ2xpY2tlZCgkZXZlbnQpXCJcclxuICAgICAgW2Rpc2FibGVkXT1cImRpc2FibGVkKClcIlxyXG4gICAgPlxyXG4gICAgICA8bWF0LWljb24+YWRkPC9tYXQtaWNvbj5cclxuICAgIDwvYnV0dG9uPlxyXG4gIDwvZGl2PlxyXG48L2Rpdj5cclxuIl19
|
|
@@ -19,6 +19,7 @@ class QtyInputComponent {
|
|
|
19
19
|
this.allowNegative = input(false);
|
|
20
20
|
this.disabled = input(false);
|
|
21
21
|
this.showError = input(false);
|
|
22
|
+
this.appearance = input('fill');
|
|
22
23
|
this.newValueEmitter = output();
|
|
23
24
|
}
|
|
24
25
|
ngOnInit() { }
|
|
@@ -41,11 +42,11 @@ class QtyInputComponent {
|
|
|
41
42
|
this.newValueEmitter.emit(this.qtyModel());
|
|
42
43
|
}
|
|
43
44
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: QtyInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
44
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: QtyInputComponent, selector: "ngx-st-qty-input", inputs: { qtyModel: { classPropertyName: "qtyModel", publicName: "qtyModel", isSignal: true, isRequired: true, transformFunction: null }, allowNegative: { classPropertyName: "allowNegative", publicName: "allowNegative", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showError: { classPropertyName: "showError", publicName: "showError", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { qtyModel: "qtyModelChange", newValueEmitter: "newValueEmitter" }, ngImport: i0, template: "<div class=\"row align-items-center st-qty-input\">\r\n <div class=\"col-xs-auto\">\r\n <button\r\n mat-icon-button\r\n color=\"warn\"\r\n (click)=\"removeClicked($event)\"\r\n [disabled]=\"(!allowNegative() && qtyModel() === 0) || disabled()\"\r\n >\r\n <mat-icon>remove</mat-icon>\r\n </button>\r\n </div>\r\n <div class=\"col\">\r\n <mat-form-field style=\"width:
|
|
45
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: QtyInputComponent, selector: "ngx-st-qty-input", inputs: { qtyModel: { classPropertyName: "qtyModel", publicName: "qtyModel", isSignal: true, isRequired: true, transformFunction: null }, allowNegative: { classPropertyName: "allowNegative", publicName: "allowNegative", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showError: { classPropertyName: "showError", publicName: "showError", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { qtyModel: "qtyModelChange", newValueEmitter: "newValueEmitter" }, ngImport: i0, template: "<div class=\"row align-items-center st-qty-input\">\r\n <div class=\"col-xs-auto\">\r\n <button\r\n mat-icon-button\r\n color=\"warn\"\r\n (click)=\"removeClicked($event)\"\r\n [disabled]=\"(!allowNegative() && qtyModel() === 0) || disabled()\"\r\n >\r\n <mat-icon>remove</mat-icon>\r\n </button>\r\n </div>\r\n <div class=\"col\">\r\n <mat-form-field style=\"width: 60px; margin-bottom: -15px\" [appearance]=\"appearance()\">\r\n <input\r\n matInput\r\n type=\"number\"\r\n [(ngModel)]=\"qtyModel\"\r\n [disabled]=\"disabled()\"\r\n [ngClass]=\"{ 'qty-input-error': showError() }\"\r\n (ngModelChange)=\"qtyModelChanged()\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n <div class=\"col-xs-auto\">\r\n <button\r\n mat-icon-button\r\n color=\"accent\"\r\n (click)=\"addClicked($event)\"\r\n [disabled]=\"disabled()\"\r\n >\r\n <mat-icon>add</mat-icon>\r\n </button>\r\n </div>\r\n</div>\r\n", styles: [".st-qty-input{min-width:120px;flex-wrap:nowrap!important}.st-qty-input .qty-input-error{color:red;font-weight:700}.st-qty-input .col-auto,.st-qty-input .col{padding:0}.st-qty-input mat-form-field input{text-align:right}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
45
46
|
}
|
|
46
47
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: QtyInputComponent, decorators: [{
|
|
47
48
|
type: Component,
|
|
48
|
-
args: [{ selector: 'ngx-st-qty-input', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"row align-items-center st-qty-input\">\r\n <div class=\"col-xs-auto\">\r\n <button\r\n mat-icon-button\r\n color=\"warn\"\r\n (click)=\"removeClicked($event)\"\r\n [disabled]=\"(!allowNegative() && qtyModel() === 0) || disabled()\"\r\n >\r\n <mat-icon>remove</mat-icon>\r\n </button>\r\n </div>\r\n <div class=\"col\">\r\n <mat-form-field style=\"width:
|
|
49
|
+
args: [{ selector: 'ngx-st-qty-input', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"row align-items-center st-qty-input\">\r\n <div class=\"col-xs-auto\">\r\n <button\r\n mat-icon-button\r\n color=\"warn\"\r\n (click)=\"removeClicked($event)\"\r\n [disabled]=\"(!allowNegative() && qtyModel() === 0) || disabled()\"\r\n >\r\n <mat-icon>remove</mat-icon>\r\n </button>\r\n </div>\r\n <div class=\"col\">\r\n <mat-form-field style=\"width: 60px; margin-bottom: -15px\" [appearance]=\"appearance()\">\r\n <input\r\n matInput\r\n type=\"number\"\r\n [(ngModel)]=\"qtyModel\"\r\n [disabled]=\"disabled()\"\r\n [ngClass]=\"{ 'qty-input-error': showError() }\"\r\n (ngModelChange)=\"qtyModelChanged()\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n <div class=\"col-xs-auto\">\r\n <button\r\n mat-icon-button\r\n color=\"accent\"\r\n (click)=\"addClicked($event)\"\r\n [disabled]=\"disabled()\"\r\n >\r\n <mat-icon>add</mat-icon>\r\n </button>\r\n </div>\r\n</div>\r\n", styles: [".st-qty-input{min-width:120px;flex-wrap:nowrap!important}.st-qty-input .qty-input-error{color:red;font-weight:700}.st-qty-input .col-auto,.st-qty-input .col{padding:0}.st-qty-input mat-form-field input{text-align:right}\n"] }]
|
|
49
50
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
|
|
50
51
|
|
|
51
52
|
class StQtyInputModule {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ngx-st-qty-input.mjs","sources":["../../../projects/ngx-st-qty-input/src/lib/components/qty-input/qty-input.component.ts","../../../projects/ngx-st-qty-input/src/lib/components/qty-input/qty-input.component.html","../../../projects/ngx-st-qty-input/src/lib/ngx-st-qty-input.module.ts","../../../projects/ngx-st-qty-input/src/public-api.ts","../../../projects/ngx-st-qty-input/src/ngx-st-qty-input.ts"],"sourcesContent":["import {\r\n ChangeDetectionStrategy,\r\n ChangeDetectorRef,\r\n Component,\r\n OnInit,\r\n ViewEncapsulation,\r\n input,\r\n output,\r\n model,\r\n} from '@angular/core';\r\n\r\n@Component({\r\n selector: 'ngx-st-qty-input',\r\n templateUrl: './qty-input.component.html',\r\n styleUrls: ['./qty-input.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n})\r\nexport class QtyInputComponent implements OnInit {\r\n qtyModel = model.required<number>();\r\n\r\n allowNegative = input<boolean>(false);\r\n\r\n disabled = input<boolean>(false);\r\n\r\n showError = input(false);\r\n\r\n newValueEmitter = output<number>();\r\n\r\n constructor(private changeDetectorRef: ChangeDetectorRef) {}\r\n\r\n ngOnInit(): void {}\r\n\r\n removeClicked(event: MouseEvent) {\r\n event.stopImmediatePropagation();\r\n\r\n this.qtyModel.update(val => val - 1);\r\n this.newValueEmitter.emit(this.qtyModel());\r\n this.changeDetectorRef.markForCheck();\r\n }\r\n\r\n addClicked(event: MouseEvent) {\r\n event.stopImmediatePropagation();\r\n\r\n this.qtyModel.update(val => val + 1);\r\n this.newValueEmitter.emit(this.qtyModel());\r\n this.changeDetectorRef.markForCheck();\r\n }\r\n\r\n qtyModelChanged() {\r\n if (!this.allowNegative() && this.qtyModel() < 0) {\r\n this.qtyModel.set(0);\r\n }\r\n\r\n this.newValueEmitter.emit(this.qtyModel());\r\n }\r\n}\r\n","<div class=\"row align-items-center st-qty-input\">\r\n <div class=\"col-xs-auto\">\r\n <button\r\n mat-icon-button\r\n color=\"warn\"\r\n (click)=\"removeClicked($event)\"\r\n [disabled]=\"(!allowNegative() && qtyModel() === 0) || disabled()\"\r\n >\r\n <mat-icon>remove</mat-icon>\r\n </button>\r\n </div>\r\n <div class=\"col\">\r\n <mat-form-field style=\"width:
|
|
1
|
+
{"version":3,"file":"ngx-st-qty-input.mjs","sources":["../../../projects/ngx-st-qty-input/src/lib/components/qty-input/qty-input.component.ts","../../../projects/ngx-st-qty-input/src/lib/components/qty-input/qty-input.component.html","../../../projects/ngx-st-qty-input/src/lib/ngx-st-qty-input.module.ts","../../../projects/ngx-st-qty-input/src/public-api.ts","../../../projects/ngx-st-qty-input/src/ngx-st-qty-input.ts"],"sourcesContent":["import {\r\n ChangeDetectionStrategy,\r\n ChangeDetectorRef,\r\n Component,\r\n OnInit,\r\n ViewEncapsulation,\r\n input,\r\n output,\r\n model,\r\n} from '@angular/core';\r\n\r\n@Component({\r\n selector: 'ngx-st-qty-input',\r\n templateUrl: './qty-input.component.html',\r\n styleUrls: ['./qty-input.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n})\r\nexport class QtyInputComponent implements OnInit {\r\n qtyModel = model.required<number>();\r\n\r\n allowNegative = input<boolean>(false);\r\n\r\n disabled = input<boolean>(false);\r\n\r\n showError = input(false);\r\n\r\n appearance = input<'fill' | 'outline'>('fill');\r\n\r\n newValueEmitter = output<number>();\r\n\r\n constructor(private changeDetectorRef: ChangeDetectorRef) {}\r\n\r\n ngOnInit(): void {}\r\n\r\n removeClicked(event: MouseEvent) {\r\n event.stopImmediatePropagation();\r\n\r\n this.qtyModel.update(val => val - 1);\r\n this.newValueEmitter.emit(this.qtyModel());\r\n this.changeDetectorRef.markForCheck();\r\n }\r\n\r\n addClicked(event: MouseEvent) {\r\n event.stopImmediatePropagation();\r\n\r\n this.qtyModel.update(val => val + 1);\r\n this.newValueEmitter.emit(this.qtyModel());\r\n this.changeDetectorRef.markForCheck();\r\n }\r\n\r\n qtyModelChanged() {\r\n if (!this.allowNegative() && this.qtyModel() < 0) {\r\n this.qtyModel.set(0);\r\n }\r\n\r\n this.newValueEmitter.emit(this.qtyModel());\r\n }\r\n}\r\n","<div class=\"row align-items-center st-qty-input\">\r\n <div class=\"col-xs-auto\">\r\n <button\r\n mat-icon-button\r\n color=\"warn\"\r\n (click)=\"removeClicked($event)\"\r\n [disabled]=\"(!allowNegative() && qtyModel() === 0) || disabled()\"\r\n >\r\n <mat-icon>remove</mat-icon>\r\n </button>\r\n </div>\r\n <div class=\"col\">\r\n <mat-form-field style=\"width: 60px; margin-bottom: -15px\" [appearance]=\"appearance()\">\r\n <input\r\n matInput\r\n type=\"number\"\r\n [(ngModel)]=\"qtyModel\"\r\n [disabled]=\"disabled()\"\r\n [ngClass]=\"{ 'qty-input-error': showError() }\"\r\n (ngModelChange)=\"qtyModelChanged()\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n <div class=\"col-xs-auto\">\r\n <button\r\n mat-icon-button\r\n color=\"accent\"\r\n (click)=\"addClicked($event)\"\r\n [disabled]=\"disabled()\"\r\n >\r\n <mat-icon>add</mat-icon>\r\n </button>\r\n </div>\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\nimport { QtyInputComponent } from './components/qty-input/qty-input.component';\r\nimport { CommonModule } from '@angular/common';\r\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatInputModule } from '@angular/material/input';\r\nimport { MatIconModule, MatIconRegistry } from '@angular/material/icon';\r\n\r\n@NgModule({\r\n declarations: [QtyInputComponent],\r\n imports: [\r\n CommonModule,\r\n FormsModule,\r\n ReactiveFormsModule,\r\n MatButtonModule,\r\n MatInputModule,\r\n MatIconModule,\r\n ],\r\n exports: [QtyInputComponent],\r\n})\r\nexport class StQtyInputModule {\r\n constructor(private matIconRegistry: MatIconRegistry) {\r\n this.matIconRegistry.setDefaultFontSetClass('material-symbols-outlined');\r\n }\r\n}\r\n","/*\r\n * Public API Surface of ngx-st-qty-input\r\n */\r\n\r\nexport * from './lib/components/qty-input/qty-input.component';\r\nexport * from './lib/ngx-st-qty-input.module';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i6","i1"],"mappings":"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"}
|
|
@@ -6,6 +6,7 @@ export declare class QtyInputComponent implements OnInit {
|
|
|
6
6
|
allowNegative: import("@angular/core").InputSignal<boolean>;
|
|
7
7
|
disabled: import("@angular/core").InputSignal<boolean>;
|
|
8
8
|
showError: import("@angular/core").InputSignal<boolean>;
|
|
9
|
+
appearance: import("@angular/core").InputSignal<"fill" | "outline">;
|
|
9
10
|
newValueEmitter: import("@angular/core").OutputEmitterRef<number>;
|
|
10
11
|
constructor(changeDetectorRef: ChangeDetectorRef);
|
|
11
12
|
ngOnInit(): void;
|
|
@@ -13,5 +14,5 @@ export declare class QtyInputComponent implements OnInit {
|
|
|
13
14
|
addClicked(event: MouseEvent): void;
|
|
14
15
|
qtyModelChanged(): void;
|
|
15
16
|
static ɵfac: i0.ɵɵFactoryDeclaration<QtyInputComponent, never>;
|
|
16
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<QtyInputComponent, "ngx-st-qty-input", never, { "qtyModel": { "alias": "qtyModel"; "required": true; "isSignal": true; }; "allowNegative": { "alias": "allowNegative"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "showError": { "alias": "showError"; "required": false; "isSignal": true; }; }, { "qtyModel": "qtyModelChange"; "newValueEmitter": "newValueEmitter"; }, never, never, false, never>;
|
|
17
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<QtyInputComponent, "ngx-st-qty-input", never, { "qtyModel": { "alias": "qtyModel"; "required": true; "isSignal": true; }; "allowNegative": { "alias": "allowNegative"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "showError": { "alias": "showError"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; }, { "qtyModel": "qtyModelChange"; "newValueEmitter": "newValueEmitter"; }, never, never, false, never>;
|
|
17
18
|
}
|