ngx-st-qty-input 17.0.3 → 18.0.1

package/README.md

@@ -1,24 +1,569 @@
-# NgxStQtyInput
+# Quantity Input Component - Complete Documentation
 
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.2.0.
+## Table of Contents
+- [Overview](#overview)
+- [Installation](#installation)
+- [Basic Usage](#basic-usage)
+- [Inputs](#inputs)
+- [Outputs](#outputs)
+- [Usage Examples](#usage-examples)
+- [Best Practices](#best-practices)
 
-## Code scaffolding
+---
 
-Run `ng generate component component-name --project ngx-st-qty-input` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ngx-st-qty-input`.
-> 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. 
+## Overview
 
-## Build
+The `ngx-st-qty-input` component is a quantity selector with increment/decrement buttons. Features include:
+- Plus/minus buttons for incrementing/decrementing values
+- Direct numeric input
+- Negative value support (optional)
+- Two-way data binding with model
+- Disabled state support
+- Error state display
+- Change event emission
 
-Run `ng build ngx-st-qty-input` to build the project. The build artifacts will be stored in the `dist/` directory.
+---
 
-## Publishing
+## Installation
 
-After building your library with `ng build ngx-st-qty-input`, go to the dist folder `cd dist/ngx-st-qty-input` and run `npm publish`.
+```bash
+npm install ngx-st-qty-input
+```
 
-## Running unit tests
+Import the module:
 
-Run `ng test ngx-st-qty-input` to execute the unit tests via [Karma](https://karma-runner.github.io).
+```typescript
+import { NgxStQtyInputModule } from 'ngx-st-qty-input';
 
-## Further help
+@NgModule({
+  imports: [NgxStQtyInputModule]
+})
+export class AppModule { }
+```
+
+---
+
+## Basic Usage
+
+```html
+<ngx-st-qty-input
+  [(qtyModel)]="quantity">
+</ngx-st-qty-input>
+
+<p>Quantity: {{ quantity }}</p>
+```
+
+---
+
+## Inputs
+
+### `qtyModel` (model signal)
+- **Type:** `number`
+- **Required:** Yes
+- **Description:** The quantity value. Uses Angular's model signal for two-way binding.
+- **Example:**
+  ```html
+  [(qtyModel)]="quantity"
+  ```
+
+### `allowNegative`
+- **Type:** `boolean`
+- **Default:** `false`
+- **Description:** Allows negative values. When false, values below 0 are automatically reset to 0.
+- **Example:**
+  ```html
+  [allowNegative]="true"
+  [allowNegative]="false"
+  ```
+
+### `disabled`
+- **Type:** `boolean`
+- **Default:** `false`
+- **Description:** Disables the entire component (input and buttons).
+- **Example:**
+  ```html
+  [disabled]="isProcessing"
+  [disabled]="true"
+  ```
+
+### `showError`
+- **Type:** `boolean`
+- **Default:** `false`
+- **Description:** Shows an error state styling on the input.
+- **Example:**
+  ```html
+  [showError]="quantity < minRequired"
+  [showError]="hasValidationError"
+  ```
+
+---
+
+## Outputs
+
+### `newValueEmitter`
+- **Type:** `number`
+- **Description:** Emitted whenever the quantity value changes (via buttons or direct input).
+- **Example:**
+  ```typescript
+  (newValueEmitter)="onQuantityChange($event)"
+  
+  onQuantityChange(newValue: number): void {
+    console.log('New quantity:', newValue);
+    this.updateCart(newValue);
+  }
+  ```
+
+---
+
+## Usage Examples
+
+### Example 1: Basic Shopping Cart Quantity
+
+```typescript
+// Component
+@Component({
+  selector: 'app-cart-item',
+  template: `
+    <div class="cart-item">
+      <img [src]="product.image" [alt]="product.name">
+      <h3>{{ product.name }}</h3>
+      <p>Price: ${{ product.price }}</p>
+      
+      <ngx-st-qty-input
+        [(qtyModel)]="quantity"
+        (newValueEmitter)="updateCartItem($event)">
+      </ngx-st-qty-input>
+      
+      <p>Total: ${{ total }}</p>
+    </div>
+  `
+})
+export class CartItemComponent {
+  product = {
+    id: 1,
+    name: 'Product Name',
+    price: 19.99,
+    image: 'product.jpg'
+  };
+  
+  quantity = 1;
+  
+  get total(): number {
+    return this.product.price * this.quantity;
+  }
+  
+  updateCartItem(newQuantity: number): void {
+    console.log('Updating cart with quantity:', newQuantity);
+    // API call to update cart
+  }
+}
+```
+
+### Example 2: With Negative Values
+
+```typescript
+// Component
+@Component({
+  selector: 'app-adjustment',
+  template: `
+    <h3>Stock Adjustment</h3>
+    <p>Current Stock: {{ currentStock }}</p>
+    
+    <label>Adjustment:</label>
+    <ngx-st-qty-input
+      [(qtyModel)]="adjustment"
+      [allowNegative]="true"
+      (newValueEmitter)="calculateNewStock($event)">
+    </ngx-st-qty-input>
+    
+    <p>New Stock: {{ newStock }}</p>
+    <button (click)="applyAdjustment()">Apply</button>
+  `
+})
+export class StockAdjustmentComponent {
+  currentStock = 100;
+  adjustment = 0;
+  newStock = 100;
+  
+  calculateNewStock(adjustment: number): void {
+    this.newStock = this.currentStock + adjustment;
+  }
+  
+  applyAdjustment(): void {
+    this.currentStock = this.newStock;
+    this.adjustment = 0;
+  }
+}
+```
+
+### Example 3: Disabled State
+
+```typescript
+// Component
+@Component({
+  selector: 'app-disabled-qty',
+  template: `
+    <ngx-st-qty-input
+      [(qtyModel)]="quantity"
+      [disabled]="outOfStock">
+    </ngx-st-qty-input>
+    
+    <p *ngIf="outOfStock" class="error">Out of Stock</p>
+    <button (click)="toggleStock()">Toggle Stock</button>
+  `
+})
+export class DisabledQtyComponent {
+  quantity = 1;
+  outOfStock = false;
+  
+  toggleStock(): void {
+    this.outOfStock = !this.outOfStock;
+  }
+}
+```
+
+### Example 4: With Validation and Error Display
+
+```typescript
+// Component
+@Component({
+  selector: 'app-validated-qty',
+  template: `
+    <div class="qty-input-wrapper">
+      <label>Quantity (Min: {{ minQty }}, Max: {{ maxQty }}):</label>
+      <ngx-st-qty-input
+        [(qtyModel)]="quantity"
+        [showError]="hasError"
+        (newValueEmitter)="validate($event)">
+      </ngx-st-qty-input>
+      
+      <p *ngIf="hasError" class="error-message">
+        {{ errorMessage }}
+      </p>
+    </div>
+  `
+})
+export class ValidatedQtyComponent {
+  quantity = 1;
+  minQty = 1;
+  maxQty = 10;
+  hasError = false;
+  errorMessage = '';
+  
+  validate(value: number): void {
+    if (value < this.minQty) {
+      this.hasError = true;
+      this.errorMessage = `Minimum quantity is ${this.minQty}`;
+    } else if (value > this.maxQty) {
+      this.hasError = true;
+      this.errorMessage = `Maximum quantity is ${this.maxQty}`;
+    } else {
+      this.hasError = false;
+      this.errorMessage = '';
+    }
+  }
+}
+```
+
+### Example 5: Multiple Quantity Inputs
+
+```typescript
+// Component
+@Component({
+  selector: 'app-order-form',
+  template: `
+    <h3>Order Products</h3>
+    <div *ngFor="let item of orderItems" class="order-item">
+      <span>{{ item.name }}</span>
+      <ngx-st-qty-input
+        [(qtyModel)]="item.quantity"
+        (newValueEmitter)="updateItemTotal(item)">
+      </ngx-st-qty-input>
+      <span>{{ item.price | currency }} each</span>
+      <span>Total: {{ item.total | currency }}</span>
+    </div>
+    
+    <div class="order-summary">
+      <h4>Order Total: {{ orderTotal | currency }}</h4>
+    </div>
+  `
+})
+export class OrderFormComponent {
+  orderItems = [
+    { id: 1, name: 'Item 1', price: 10, quantity: 1, total: 10 },
+    { id: 2, name: 'Item 2', price: 15, quantity: 2, total: 30 },
+    { id: 3, name: 'Item 3', price: 20, quantity: 1, total: 20 }
+  ];
+  
+  updateItemTotal(item: any): void {
+    item.total = item.price * item.quantity;
+  }
+  
+  get orderTotal(): number {
+    return this.orderItems.reduce((sum, item) => sum + item.total, 0);
+  }
+}
+```
+
+### Example 6: With Min/Max Enforcement
+
+```typescript
+// Component
+@Component({
+  selector: 'app-constrained-qty',
+  template: `
+    <label>Select Quantity (1-100):</label>
+    <ngx-st-qty-input
+      [(qtyModel)]="quantity"
+      [showError]="isOutOfRange"
+      (newValueEmitter)="enforceRange($event)">
+    </ngx-st-qty-input>
+    
+    <p *ngIf="isOutOfRange" class="warning">
+      Quantity must be between 1 and 100
+    </p>
+  `
+})
+export class ConstrainedQtyComponent {
+  quantity = 1;
+  minValue = 1;
+  maxValue = 100;
+  isOutOfRange = false;
+  
+  enforceRange(value: number): void {
+    this.isOutOfRange = false;
+    
+    if (value < this.minValue) {
+      this.quantity = this.minValue;
+      this.isOutOfRange = true;
+    } else if (value > this.maxValue) {
+      this.quantity = this.maxValue;
+      this.isOutOfRange = true;
+    }
+  }
+}
+```
+
+### Example 7: Real-time Price Calculator
+
+```typescript
+// Component
+@Component({
+  selector: 'app-price-calculator',
+  template: `
+    <div class="calculator">
+      <h3>{{ product.name }}</h3>
+      <img [src]="product.image" [alt]="product.name">
+      
+      <div class="price-info">
+        <p>Unit Price: {{ product.price | currency }}</p>
+        
+        <div class="qty-selector">
+          <label>Quantity:</label>
+          <ngx-st-qty-input
+            [(qtyModel)]="quantity"
+            [disabled]="!product.inStock"
+            (newValueEmitter)="calculatePrice($event)">
+          </ngx-st-qty-input>
+        </div>
+        
+        <div class="discount" *ngIf="discount > 0">
+          <p>Discount: -{{ discount | currency }}</p>
+        </div>
+        
+        <div class="total">
+          <h2>Total: {{ totalPrice | currency }}</h2>
+        </div>
+        
+        <button 
+          [disabled]="!product.inStock"
+          (click)="addToCart()">
+          Add to Cart
+        </button>
+      </div>
+    </div>
+  `
+})
+export class PriceCalculatorComponent {
+  product = {
+    id: 1,
+    name: 'Premium Widget',
+    price: 29.99,
+    image: 'widget.jpg',
+    inStock: true
+  };
+  
+  quantity = 1;
+  totalPrice = 29.99;
+  discount = 0;
+  
+  calculatePrice(qty: number): void {
+    const subtotal = this.product.price * qty;
+    
+    // Apply bulk discounts
+    if (qty >= 10) {
+      this.discount = subtotal * 0.1; // 10% off
+    } else if (qty >= 5) {
+      this.discount = subtotal * 0.05; // 5% off
+    } else {
+      this.discount = 0;
+    }
+    
+    this.totalPrice = subtotal - this.discount;
+  }
+  
+  addToCart(): void {
+    console.log(`Adding ${this.quantity} items to cart`);
+    // Add to cart logic
+  }
+}
+```
+
+### Example 8: With Stock Availability
+
+```typescript
+// Component
+@Component({
+  selector: 'app-stock-aware-qty',
+  template: `
+    <div class="product">
+      <h3>{{ product.name }}</h3>
+      <p>Available Stock: {{ product.stock }}</p>
+      
+      <ngx-st-qty-input
+        [(qtyModel)]="quantity"
+        [showError]="exceedsStock"
+        [disabled]="product.stock === 0"
+        (newValueEmitter)="checkStock($event)">
+      </ngx-st-qty-input>
+      
+      <p *ngIf="exceedsStock" class="error">
+        Only {{ product.stock }} items available
+      </p>
+      
+      <p *ngIf="product.stock === 0" class="out-of-stock">
+        Out of Stock
+      </p>
+      
+      <button 
+        [disabled]="exceedsStock || product.stock === 0"
+        (click)="purchase()">
+        Purchase
+      </button>
+    </div>
+  `
+})
+export class StockAwareQtyComponent {
+  product = {
+    name: 'Limited Edition Item',
+    stock: 5
+  };
+  
+  quantity = 1;
+  exceedsStock = false;
+  
+  checkStock(qty: number): void {
+    if (qty > this.product.stock) {
+      this.exceedsStock = true;
+      // Optionally auto-correct
+      this.quantity = this.product.stock;
+    } else {
+      this.exceedsStock = false;
+    }
+  }
+  
+  purchase(): void {
+    this.product.stock -= this.quantity;
+    console.log(`Purchased ${this.quantity} items`);
+    this.quantity = 1;
+  }
+}
+```
+
+---
+
+## Best Practices
+
+1. **Set appropriate initial values**:
+   ```typescript
+   quantity = 1;  // Don't start with 0 for shopping carts
+   ```
+
+2. **Use validation** to enforce business rules:
+   ```typescript
+   onQuantityChange(qty: number): void {
+     if (qty > maxStock) {
+       this.quantity = maxStock;
+     }
+   }
+   ```
+
+3. **Disable when not applicable**:
+   ```html
+   [disabled]="outOfStock || isProcessing"
+   ```
+
+4. **Show errors for invalid values**:
+   ```html
+   [showError]="quantity < minRequired || quantity > maxAllowed"
+   ```
+
+5. **Use `allowNegative` only when needed**:
+   ```html
+   <!-- For adjustments -->
+   [allowNegative]="true"
+   
+   <!-- For quantities (default) -->
+   [allowNegative]="false"
+   ```
+
+6. **Provide feedback** on changes:
+   ```typescript
+   onQuantityChange(qty: number): void {
+     this.updateTotal();
+     this.checkAvailability();
+     this.calculateShipping();
+   }
+   ```
+
+7. **Consider debouncing** for API calls:
+   ```typescript
+   onQuantityChange = debounce((qty: number) => {
+     this.updateCartOnServer(qty);
+   }, 500);
+   ```
+
+---
+
+## Component Behavior
+
+### Increment Button (+)
+- Increases value by 1
+- Emits `newValueEmitter` event
+- Disabled when component is disabled
+
+### Decrement Button (-)
+- Decreases value by 1
+- If `allowNegative` is false and value would go below 0, sets to 0
+- Emits `newValueEmitter` event
+- Disabled when component is disabled
+
+### Direct Input
+- Allows manual entry of numeric values
+- Validates and corrects negative values if `allowNegative` is false
+- Emits `newValueEmitter` event on blur or enter
+
+---
+
+## Common Use Cases
+
+1. **Shopping Cart**: Product quantity selection
+2. **Inventory Management**: Stock adjustments (with negative values)
+3. **Order Forms**: Quantity selection for multiple items
+4. **Configurators**: Selecting quantities of customizable items
+5. **Bulk Operations**: Specifying number of items to process
+
+---
+
+This documentation covers all inputs, outputs, and usage patterns for the Quantity Input component.
 
-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.

package/esm2022/lib/components/qty-input/qty-input.component.mjs

@@ -34,10 +34,10 @@ export class QtyInputComponent {
         }
         this.newValueEmitter.emit(this.qtyModel());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QtyInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", 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: 55px; margin-bottom: -15px\">\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 }); }
+    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 }); }
+    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: 55px; margin-bottom: -15px\">\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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QtyInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: QtyInputComponent, decorators: [{
             type: Component,
             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: 55px; margin-bottom: -15px\">\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"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });

package/esm2022/lib/ngx-st-qty-input.module.mjs

@@ -12,21 +12,21 @@ export class StQtyInputModule {
         this.matIconRegistry = matIconRegistry;
         this.matIconRegistry.setDefaultFontSetClass('material-symbols-outlined');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StQtyInputModule, deps: [{ token: i1.MatIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: StQtyInputModule, declarations: [QtyInputComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StQtyInputModule, deps: [{ token: i1.MatIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: StQtyInputModule, declarations: [QtyInputComponent], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             MatButtonModule,
             MatInputModule,
             MatIconModule], exports: [QtyInputComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StQtyInputModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StQtyInputModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             MatButtonModule,
             MatInputModule,
             MatIconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StQtyInputModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StQtyInputModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [QtyInputComponent],

package/fesm2022/ngx-st-qty-input.mjs

@@ -40,10 +40,10 @@ class QtyInputComponent {
         }
         this.newValueEmitter.emit(this.qtyModel());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QtyInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", 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: 55px; margin-bottom: -15px\">\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 }); }
+    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 }); }
+    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: 55px; margin-bottom: -15px\">\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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QtyInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: QtyInputComponent, decorators: [{
             type: Component,
             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: 55px; margin-bottom: -15px\">\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"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
@@ -53,21 +53,21 @@ class StQtyInputModule {
         this.matIconRegistry = matIconRegistry;
         this.matIconRegistry.setDefaultFontSetClass('material-symbols-outlined');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StQtyInputModule, deps: [{ token: i1$1.MatIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: StQtyInputModule, declarations: [QtyInputComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StQtyInputModule, deps: [{ token: i1$1.MatIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: StQtyInputModule, declarations: [QtyInputComponent], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             MatButtonModule,
             MatInputModule,
             MatIconModule], exports: [QtyInputComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StQtyInputModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StQtyInputModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             MatButtonModule,
             MatInputModule,
             MatIconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StQtyInputModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StQtyInputModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [QtyInputComponent],

package/fesm2022/ngx-st-qty-input.mjs.map

@@ -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: 55px; margin-bottom: -15px\">\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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"}
+{"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: 55px; margin-bottom: -15px\">\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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"}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "ngx-st-qty-input",
-  "version": "17.0.3",
+  "version": "18.0.1",
   "peerDependencies": {
-    "@angular/common": "^17.3.12",
-    "@angular/core": "^17.3.12",
-    "@angular/material": "^17.3.10"
+    "@angular/common": "^18.0.0",
+    "@angular/core": "^18.0.0",
+    "@angular/material": "^18.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"