ngx-st-qty-input 18.0.4 → 18.0.5
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
|
@@ -15,12 +15,14 @@
|
|
|
15
15
|
|
|
16
16
|
The `ngx-st-qty-input` component is a quantity selector with increment/decrement buttons. Features include:
|
|
17
17
|
- Plus/minus buttons for incrementing/decrementing values
|
|
18
|
-
- Direct numeric input
|
|
18
|
+
- Direct numeric input (spinner arrows hidden for cleaner UI)
|
|
19
19
|
- Negative value support (optional)
|
|
20
20
|
- Two-way data binding with model
|
|
21
21
|
- Disabled state support
|
|
22
22
|
- Error state display
|
|
23
23
|
- Change event emission
|
|
24
|
+
- Customizable input width
|
|
25
|
+
- Material Design form field appearance options
|
|
24
26
|
|
|
25
27
|
---
|
|
26
28
|
|
|
@@ -96,6 +98,27 @@ export class AppModule { }
|
|
|
96
98
|
[showError]="hasValidationError"
|
|
97
99
|
```
|
|
98
100
|
|
|
101
|
+
### `appearance`
|
|
102
|
+
- **Type:** `'fill' | 'outline'`
|
|
103
|
+
- **Default:** `'fill'`
|
|
104
|
+
- **Description:** Material Design form field appearance. 'fill' for filled style, 'outline' for outlined style.
|
|
105
|
+
- **Example:**
|
|
106
|
+
```html
|
|
107
|
+
[appearance]="'fill'"
|
|
108
|
+
[appearance]="'outline'"
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
### `inputWidth`
|
|
112
|
+
- **Type:** `string`
|
|
113
|
+
- **Default:** `'55px'`
|
|
114
|
+
- **Description:** CSS width value for the input field. Allows customization of the input width by parent components.
|
|
115
|
+
- **Example:**
|
|
116
|
+
```html
|
|
117
|
+
[inputWidth]="'60px'"
|
|
118
|
+
[inputWidth]="'80px'"
|
|
119
|
+
[inputWidth]="'100%'"
|
|
120
|
+
```
|
|
121
|
+
|
|
99
122
|
---
|
|
100
123
|
|
|
101
124
|
## Outputs
|
|
@@ -419,7 +442,89 @@ export class PriceCalculatorComponent {
|
|
|
419
442
|
}
|
|
420
443
|
```
|
|
421
444
|
|
|
422
|
-
### Example 8:
|
|
445
|
+
### Example 8: Customizing Input Width
|
|
446
|
+
|
|
447
|
+
```typescript
|
|
448
|
+
// Component
|
|
449
|
+
@Component({
|
|
450
|
+
selector: 'app-customizable-qty',
|
|
451
|
+
template: `
|
|
452
|
+
<div class="qty-variants">
|
|
453
|
+
<div class="compact">
|
|
454
|
+
<label>Compact (55px):</label>
|
|
455
|
+
<ngx-st-qty-input
|
|
456
|
+
[(qtyModel)]="quantity1"
|
|
457
|
+
[inputWidth]="'55px'">
|
|
458
|
+
</ngx-st-qty-input>
|
|
459
|
+
</div>
|
|
460
|
+
|
|
461
|
+
<div class="medium">
|
|
462
|
+
<label>Medium (80px):</label>
|
|
463
|
+
<ngx-st-qty-input
|
|
464
|
+
[(qtyModel)]="quantity2"
|
|
465
|
+
[inputWidth]="'80px'">
|
|
466
|
+
</ngx-st-qty-input>
|
|
467
|
+
</div>
|
|
468
|
+
|
|
469
|
+
<div class="large">
|
|
470
|
+
<label>Large (120px):</label>
|
|
471
|
+
<ngx-st-qty-input
|
|
472
|
+
[(qtyModel)]="quantity3"
|
|
473
|
+
[inputWidth]="'120px'">
|
|
474
|
+
</ngx-st-qty-input>
|
|
475
|
+
</div>
|
|
476
|
+
|
|
477
|
+
<div class="responsive">
|
|
478
|
+
<label>Full Width:</label>
|
|
479
|
+
<ngx-st-qty-input
|
|
480
|
+
[(qtyModel)]="quantity4"
|
|
481
|
+
[inputWidth]="'100%'">
|
|
482
|
+
</ngx-st-qty-input>
|
|
483
|
+
</div>
|
|
484
|
+
</div>
|
|
485
|
+
`
|
|
486
|
+
})
|
|
487
|
+
export class CustomizableQtyComponent {
|
|
488
|
+
quantity1 = 1;
|
|
489
|
+
quantity2 = 2;
|
|
490
|
+
quantity3 = 3;
|
|
491
|
+
quantity4 = 1;
|
|
492
|
+
}
|
|
493
|
+
```
|
|
494
|
+
|
|
495
|
+
### Example 9: Different Material Appearances
|
|
496
|
+
|
|
497
|
+
```typescript
|
|
498
|
+
// Component
|
|
499
|
+
@Component({
|
|
500
|
+
selector: 'app-appearance-variants',
|
|
501
|
+
template: `
|
|
502
|
+
<div class="appearance-variants">
|
|
503
|
+
<div class="filled">
|
|
504
|
+
<label>Filled Appearance (Default):</label>
|
|
505
|
+
<ngx-st-qty-input
|
|
506
|
+
[(qtyModel)]="quantity1"
|
|
507
|
+
[appearance]="'fill'">
|
|
508
|
+
</ngx-st-qty-input>
|
|
509
|
+
</div>
|
|
510
|
+
|
|
511
|
+
<div class="outlined">
|
|
512
|
+
<label>Outlined Appearance:</label>
|
|
513
|
+
<ngx-st-qty-input
|
|
514
|
+
[(qtyModel)]="quantity2"
|
|
515
|
+
[appearance]="'outline'">
|
|
516
|
+
</ngx-st-qty-input>
|
|
517
|
+
</div>
|
|
518
|
+
</div>
|
|
519
|
+
`
|
|
520
|
+
})
|
|
521
|
+
export class AppearanceVariantsComponent {
|
|
522
|
+
quantity1 = 1;
|
|
523
|
+
quantity2 = 1;
|
|
524
|
+
}
|
|
525
|
+
```
|
|
526
|
+
|
|
527
|
+
### Example 10: With Stock Availability
|
|
423
528
|
|
|
424
529
|
```typescript
|
|
425
530
|
// Component
|
|
@@ -537,6 +642,11 @@ export class StockAwareQtyComponent {
|
|
|
537
642
|
|
|
538
643
|
## Component Behavior
|
|
539
644
|
|
|
645
|
+
### Input Field Design
|
|
646
|
+
- **Spinner Arrows Hidden**: The native HTML number input spinner arrows (up/down) are intentionally hidden for a cleaner UI design. Users should use the dedicated plus/minus buttons instead.
|
|
647
|
+
- **Browser Compatibility**: The hiding of spinner arrows is implemented using CSS that works across all modern browsers (Chrome, Firefox, Safari, Edge).
|
|
648
|
+
- **Clean Aesthetic**: This provides a unified, Material Design-compliant appearance without browser-specific controls.
|
|
649
|
+
|
|
540
650
|
### Increment Button (+)
|
|
541
651
|
- Increases value by 1
|
|
542
652
|
- Emits `newValueEmitter` event
|
|
@@ -13,6 +13,10 @@ export class QtyInputComponent {
|
|
|
13
13
|
this.allowNegative = input(false);
|
|
14
14
|
this.disabled = input(false);
|
|
15
15
|
this.showError = input(false);
|
|
16
|
+
/**
|
|
17
|
+
* When true, displays the input with red border to indicate a validation error
|
|
18
|
+
*/
|
|
19
|
+
this.error = input(false);
|
|
16
20
|
this.appearance = input('fill');
|
|
17
21
|
this.inputWidth = input('55px');
|
|
18
22
|
this.newValueEmitter = output();
|
|
@@ -37,10 +41,10 @@ export class QtyInputComponent {
|
|
|
37
41
|
this.newValueEmitter.emit(this.qtyModel());
|
|
38
42
|
}
|
|
39
43
|
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 }); }
|
|
40
|
-
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 }, inputWidth: { classPropertyName: "inputWidth", publicName: "inputWidth", 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
|
|
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 }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, inputWidth: { classPropertyName: "inputWidth", publicName: "inputWidth", 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\r\n [style.width]=\"inputWidth()\"\r\n [appearance]=\"appearance()\"\r\n [class.field-error]=\"error()\">\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}.st-qty-input input[type=number]::-webkit-outer-spin-button,.st-qty-input input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.st-qty-input input[type=number]{-moz-appearance:textfield}.field-error ::ng-deep .mat-mdc-text-field-wrapper .mat-mdc-form-field-focus-overlay{background-color:#f443360d}.field-error ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading,.field-error ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch,.field-error ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing,.field-error ::ng-deep .mdc-text-field--filled .mdc-notched-outline .mdc-notched-outline__leading,.field-error ::ng-deep .mdc-text-field--filled .mdc-notched-outline .mdc-notched-outline__notch,.field-error ::ng-deep .mdc-text-field--filled .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#f44336!important;border-width:2px!important}.field-error ::ng-deep .mat-mdc-input-element{color:#f44336}\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 }); }
|
|
41
45
|
}
|
|
42
46
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: QtyInputComponent, decorators: [{
|
|
43
47
|
type: Component,
|
|
44
|
-
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
|
|
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\r\n [style.width]=\"inputWidth()\"\r\n [appearance]=\"appearance()\"\r\n [class.field-error]=\"error()\">\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}.st-qty-input input[type=number]::-webkit-outer-spin-button,.st-qty-input input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.st-qty-input input[type=number]{-moz-appearance:textfield}.field-error ::ng-deep .mat-mdc-text-field-wrapper .mat-mdc-form-field-focus-overlay{background-color:#f443360d}.field-error ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading,.field-error ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch,.field-error ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing,.field-error ::ng-deep .mdc-text-field--filled .mdc-notched-outline .mdc-notched-outline__leading,.field-error ::ng-deep .mdc-text-field--filled .mdc-notched-outline .mdc-notched-outline__notch,.field-error ::ng-deep .mdc-text-field--filled .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#f44336!important;border-width:2px!important}.field-error ::ng-deep .mat-mdc-input-element{color:#f44336}\n"] }]
|
|
45
49
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
|
|
46
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
50
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicXR5LWlucHV0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zdC1xdHktaW5wdXQvc3JjL2xpYi9jb21wb25lbnRzL3F0eS1pbnB1dC9xdHktaW5wdXQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXN0LXF0eS1pbnB1dC9zcmMvbGliL2NvbXBvbmVudHMvcXR5LWlucHV0L3F0eS1pbnB1dC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBRXZCLFNBQVMsRUFFVCxpQkFBaUIsRUFDakIsS0FBSyxFQUNMLE1BQU0sRUFDTixLQUFLLEdBQ04sTUFBTSxlQUFlLENBQUM7Ozs7Ozs7O0FBU3ZCLE1BQU0sT0FBTyxpQkFBaUI7SUFvQjVCLFlBQW9CLGlCQUFvQztRQUFwQyxzQkFBaUIsR0FBakIsaUJBQWlCLENBQW1CO1FBbkJ4RCxhQUFRLEdBQUcsS0FBSyxDQUFDLFFBQVEsRUFBVSxDQUFDO1FBRXBDLGtCQUFhLEdBQUcsS0FBSyxDQUFVLEtBQUssQ0FBQyxDQUFDO1FBRXRDLGFBQVEsR0FBRyxLQUFLLENBQVUsS0FBSyxDQUFDLENBQUM7UUFFakMsY0FBUyxHQUFHLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUV6Qjs7V0FFRztRQUNILFVBQUssR0FBRyxLQUFLLENBQVUsS0FBSyxDQUFDLENBQUM7UUFFOUIsZUFBVSxHQUFHLEtBQUssQ0FBcUIsTUFBTSxDQUFDLENBQUM7UUFFL0MsZUFBVSxHQUFHLEtBQUssQ0FBUyxNQUFNLENBQUMsQ0FBQztRQUVuQyxvQkFBZSxHQUFHLE1BQU0sRUFBVSxDQUFDO0lBRXdCLENBQUM7SUFFNUQsUUFBUSxLQUFVLENBQUM7SUFFbkIsYUFBYSxDQUFDLEtBQWlCO1FBQzdCLEtBQUssQ0FBQyx3QkFBd0IsRUFBRSxDQUFDO1FBRWpDLElBQUksQ0FBQyxRQUFRLENBQUMsTUFBTSxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsR0FBRyxHQUFHLENBQUMsQ0FBQyxDQUFDO1FBQ3JDLElBQUksQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQyxDQUFDO1FBQzNDLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxZQUFZLEVBQUUsQ0FBQztJQUN4QyxDQUFDO0lBRUQsVUFBVSxDQUFDLEtBQWlCO1FBQzFCLEtBQUssQ0FBQyx3QkFBd0IsRUFBRSxDQUFDO1FBRWpDLElBQUksQ0FBQyxRQUFRLENBQUMsTUFBTSxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsR0FBRyxHQUFHLENBQUMsQ0FBQyxDQUFDO1FBQ3JDLElBQUksQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQyxDQUFDO1FBQzNDLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxZQUFZLEVBQUUsQ0FBQztJQUN4QyxDQUFDO0lBRUQsZUFBZTtRQUNiLElBQUksQ0FBQyxJQUFJLENBQUMsYUFBYSxFQUFFLElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRSxHQUFHLENBQUMsRUFBRSxDQUFDO1lBQ2pELElBQUksQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQ3ZCLENBQUM7UUFFRCxJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUMsQ0FBQztJQUM3QyxDQUFDOytHQTlDVSxpQkFBaUI7bUdBQWpCLGlCQUFpQiw0aUNDbEI5Qiw0aUNBcUNBOzs0RkRuQmEsaUJBQWlCO2tCQVA3QixTQUFTOytCQUNFLGtCQUFrQixtQkFHWCx1QkFBdUIsQ0FBQyxNQUFNLGlCQUNoQyxpQkFBaUIsQ0FBQyxJQUFJIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcclxuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcclxuICBDaGFuZ2VEZXRlY3RvclJlZixcclxuICBDb21wb25lbnQsXHJcbiAgT25Jbml0LFxyXG4gIFZpZXdFbmNhcHN1bGF0aW9uLFxyXG4gIGlucHV0LFxyXG4gIG91dHB1dCxcclxuICBtb2RlbCxcclxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnbmd4LXN0LXF0eS1pbnB1dCcsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL3F0eS1pbnB1dC5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vcXR5LWlucHV0LmNvbXBvbmVudC5zY3NzJ10sXHJcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXHJcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcclxufSlcclxuZXhwb3J0IGNsYXNzIFF0eUlucHV0Q29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuICBxdHlNb2RlbCA9IG1vZGVsLnJlcXVpcmVkPG51bWJlcj4oKTtcclxuXHJcbiAgYWxsb3dOZWdhdGl2ZSA9IGlucHV0PGJvb2xlYW4+KGZhbHNlKTtcclxuXHJcbiAgZGlzYWJsZWQgPSBpbnB1dDxib29sZWFuPihmYWxzZSk7XHJcblxyXG4gIHNob3dFcnJvciA9IGlucHV0KGZhbHNlKTtcclxuXHJcbiAgLyoqXHJcbiAgICogV2hlbiB0cnVlLCBkaXNwbGF5cyB0aGUgaW5wdXQgd2l0aCByZWQgYm9yZGVyIHRvIGluZGljYXRlIGEgdmFsaWRhdGlvbiBlcnJvclxyXG4gICAqL1xyXG4gIGVycm9yID0gaW5wdXQ8Ym9vbGVhbj4oZmFsc2UpO1xyXG5cclxuICBhcHBlYXJhbmNlID0gaW5wdXQ8J2ZpbGwnIHwgJ291dGxpbmUnPignZmlsbCcpO1xyXG5cclxuICBpbnB1dFdpZHRoID0gaW5wdXQ8c3RyaW5nPignNTVweCcpO1xyXG5cclxuICBuZXdWYWx1ZUVtaXR0ZXIgPSBvdXRwdXQ8bnVtYmVyPigpO1xyXG5cclxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGNoYW5nZURldGVjdG9yUmVmOiBDaGFuZ2VEZXRlY3RvclJlZikge31cclxuXHJcbiAgbmdPbkluaXQoKTogdm9pZCB7fVxyXG5cclxuICByZW1vdmVDbGlja2VkKGV2ZW50OiBNb3VzZUV2ZW50KSB7XHJcbiAgICBldmVudC5zdG9wSW1tZWRpYXRlUHJvcGFnYXRpb24oKTtcclxuXHJcbiAgICB0aGlzLnF0eU1vZGVsLnVwZGF0ZSh2YWwgPT4gdmFsIC0gMSk7XHJcbiAgICB0aGlzLm5ld1ZhbHVlRW1pdHRlci5lbWl0KHRoaXMucXR5TW9kZWwoKSk7XHJcbiAgICB0aGlzLmNoYW5nZURldGVjdG9yUmVmLm1hcmtGb3JDaGVjaygpO1xyXG4gIH1cclxuXHJcbiAgYWRkQ2xpY2tlZChldmVudDogTW91c2VFdmVudCkge1xyXG4gICAgZXZlbnQuc3RvcEltbWVkaWF0ZVByb3BhZ2F0aW9uKCk7XHJcblxyXG4gICAgdGhpcy5xdHlNb2RlbC51cGRhdGUodmFsID0+IHZhbCArIDEpO1xyXG4gICAgdGhpcy5uZXdWYWx1ZUVtaXR0ZXIuZW1pdCh0aGlzLnF0eU1vZGVsKCkpO1xyXG4gICAgdGhpcy5jaGFuZ2VEZXRlY3RvclJlZi5tYXJrRm9yQ2hlY2soKTtcclxuICB9XHJcblxyXG4gIHF0eU1vZGVsQ2hhbmdlZCgpIHtcclxuICAgIGlmICghdGhpcy5hbGxvd05lZ2F0aXZlKCkgJiYgdGhpcy5xdHlNb2RlbCgpIDwgMCkge1xyXG4gICAgICB0aGlzLnF0eU1vZGVsLnNldCgwKTtcclxuICAgIH1cclxuXHJcbiAgICB0aGlzLm5ld1ZhbHVlRW1pdHRlci5lbWl0KHRoaXMucXR5TW9kZWwoKSk7XHJcbiAgfVxyXG59XHJcbiIsIjxkaXYgY2xhc3M9XCJyb3cgYWxpZ24taXRlbXMtY2VudGVyIHN0LXF0eS1pbnB1dFwiPlxyXG4gIDxkaXYgY2xhc3M9XCJjb2wteHMtYXV0b1wiPlxyXG4gICAgPGJ1dHRvblxyXG4gICAgICBtYXQtaWNvbi1idXR0b25cclxuICAgICAgY29sb3I9XCJ3YXJuXCJcclxuICAgICAgKGNsaWNrKT1cInJlbW92ZUNsaWNrZWQoJGV2ZW50KVwiXHJcbiAgICAgIFtkaXNhYmxlZF09XCIoIWFsbG93TmVnYXRpdmUoKSAmJiBxdHlNb2RlbCgpID09PSAwKSB8fCBkaXNhYmxlZCgpXCJcclxuICAgID5cclxuICAgICAgPG1hdC1pY29uPnJlbW92ZTwvbWF0LWljb24+XHJcbiAgICA8L2J1dHRvbj5cclxuICA8L2Rpdj5cclxuICA8ZGl2IGNsYXNzPVwiY29sXCI+XHJcbiAgICA8bWF0LWZvcm0tZmllbGRcclxuICAgICAgW3N0eWxlLndpZHRoXT1cImlucHV0V2lkdGgoKVwiXHJcbiAgICAgIFthcHBlYXJhbmNlXT1cImFwcGVhcmFuY2UoKVwiXHJcbiAgICAgIFtjbGFzcy5maWVsZC1lcnJvcl09XCJlcnJvcigpXCI+XHJcbiAgICAgIDxpbnB1dFxyXG4gICAgICAgIG1hdElucHV0XHJcbiAgICAgICAgdHlwZT1cIm51bWJlclwiXHJcbiAgICAgICAgWyhuZ01vZGVsKV09XCJxdHlNb2RlbFwiXHJcbiAgICAgICAgW2Rpc2FibGVkXT1cImRpc2FibGVkKClcIlxyXG4gICAgICAgIFtuZ0NsYXNzXT1cInsgJ3F0eS1pbnB1dC1lcnJvcic6IHNob3dFcnJvcigpIH1cIlxyXG4gICAgICAgIChuZ01vZGVsQ2hhbmdlKT1cInF0eU1vZGVsQ2hhbmdlZCgpXCJcclxuICAgICAgLz5cclxuICAgIDwvbWF0LWZvcm0tZmllbGQ+XHJcbiAgPC9kaXY+XHJcbiAgPGRpdiBjbGFzcz1cImNvbC14cy1hdXRvXCI+XHJcbiAgICA8YnV0dG9uXHJcbiAgICAgIG1hdC1pY29uLWJ1dHRvblxyXG4gICAgICBjb2xvcj1cImFjY2VudFwiXHJcbiAgICAgIChjbGljayk9XCJhZGRDbGlja2VkKCRldmVudClcIlxyXG4gICAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWQoKVwiXHJcbiAgICA+XHJcbiAgICAgIDxtYXQtaWNvbj5hZGQ8L21hdC1pY29uPlxyXG4gICAgPC9idXR0b24+XHJcbiAgPC9kaXY+XHJcbjwvZGl2PlxyXG4iXX0=
|
|
@@ -19,6 +19,10 @@ class QtyInputComponent {
|
|
|
19
19
|
this.allowNegative = input(false);
|
|
20
20
|
this.disabled = input(false);
|
|
21
21
|
this.showError = input(false);
|
|
22
|
+
/**
|
|
23
|
+
* When true, displays the input with red border to indicate a validation error
|
|
24
|
+
*/
|
|
25
|
+
this.error = input(false);
|
|
22
26
|
this.appearance = input('fill');
|
|
23
27
|
this.inputWidth = input('55px');
|
|
24
28
|
this.newValueEmitter = output();
|
|
@@ -43,11 +47,11 @@ class QtyInputComponent {
|
|
|
43
47
|
this.newValueEmitter.emit(this.qtyModel());
|
|
44
48
|
}
|
|
45
49
|
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 }); }
|
|
46
|
-
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 }, inputWidth: { classPropertyName: "inputWidth", publicName: "inputWidth", 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
|
|
50
|
+
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 }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, inputWidth: { classPropertyName: "inputWidth", publicName: "inputWidth", 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\r\n [style.width]=\"inputWidth()\"\r\n [appearance]=\"appearance()\"\r\n [class.field-error]=\"error()\">\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}.st-qty-input input[type=number]::-webkit-outer-spin-button,.st-qty-input input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.st-qty-input input[type=number]{-moz-appearance:textfield}.field-error ::ng-deep .mat-mdc-text-field-wrapper .mat-mdc-form-field-focus-overlay{background-color:#f443360d}.field-error ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading,.field-error ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch,.field-error ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing,.field-error ::ng-deep .mdc-text-field--filled .mdc-notched-outline .mdc-notched-outline__leading,.field-error ::ng-deep .mdc-text-field--filled .mdc-notched-outline .mdc-notched-outline__notch,.field-error ::ng-deep .mdc-text-field--filled .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#f44336!important;border-width:2px!important}.field-error ::ng-deep .mat-mdc-input-element{color:#f44336}\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 }); }
|
|
47
51
|
}
|
|
48
52
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: QtyInputComponent, decorators: [{
|
|
49
53
|
type: Component,
|
|
50
|
-
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
|
|
54
|
+
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\r\n [style.width]=\"inputWidth()\"\r\n [appearance]=\"appearance()\"\r\n [class.field-error]=\"error()\">\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}.st-qty-input input[type=number]::-webkit-outer-spin-button,.st-qty-input input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.st-qty-input input[type=number]{-moz-appearance:textfield}.field-error ::ng-deep .mat-mdc-text-field-wrapper .mat-mdc-form-field-focus-overlay{background-color:#f443360d}.field-error ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading,.field-error ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch,.field-error ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing,.field-error ::ng-deep .mdc-text-field--filled .mdc-notched-outline .mdc-notched-outline__leading,.field-error ::ng-deep .mdc-text-field--filled .mdc-notched-outline .mdc-notched-outline__notch,.field-error ::ng-deep .mdc-text-field--filled .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#f44336!important;border-width:2px!important}.field-error ::ng-deep .mat-mdc-input-element{color:#f44336}\n"] }]
|
|
51
55
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
|
|
52
56
|
|
|
53
57
|
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 appearance = input<'fill' | 'outline'>('fill');\r\n\r\n inputWidth = input<string>('55px');\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
|
|
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 /**\r\n * When true, displays the input with red border to indicate a validation error\r\n */\r\n error = input<boolean>(false);\r\n\r\n appearance = input<'fill' | 'outline'>('fill');\r\n\r\n inputWidth = input<string>('55px');\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\r\n [style.width]=\"inputWidth()\"\r\n [appearance]=\"appearance()\"\r\n [class.field-error]=\"error()\">\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,10 @@ 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
|
+
/**
|
|
10
|
+
* When true, displays the input with red border to indicate a validation error
|
|
11
|
+
*/
|
|
12
|
+
error: import("@angular/core").InputSignal<boolean>;
|
|
9
13
|
appearance: import("@angular/core").InputSignal<"fill" | "outline">;
|
|
10
14
|
inputWidth: import("@angular/core").InputSignal<string>;
|
|
11
15
|
newValueEmitter: import("@angular/core").OutputEmitterRef<number>;
|
|
@@ -15,5 +19,5 @@ export declare class QtyInputComponent implements OnInit {
|
|
|
15
19
|
addClicked(event: MouseEvent): void;
|
|
16
20
|
qtyModelChanged(): void;
|
|
17
21
|
static ɵfac: i0.ɵɵFactoryDeclaration<QtyInputComponent, never>;
|
|
18
|
-
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; }; "inputWidth": { "alias": "inputWidth"; "required": false; "isSignal": true; }; }, { "qtyModel": "qtyModelChange"; "newValueEmitter": "newValueEmitter"; }, never, never, false, never>;
|
|
22
|
+
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; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "inputWidth": { "alias": "inputWidth"; "required": false; "isSignal": true; }; }, { "qtyModel": "qtyModelChange"; "newValueEmitter": "newValueEmitter"; }, never, never, false, never>;
|
|
19
23
|
}
|