NGX CSS - Angular Components Squid Style
  1. Components
  2. SqInputNumberFormControlComponent

File

src/components/sq-input-number-form-control/sq-input-number-form-control.component.ts

Description

Componente de input numérico que estende SqInputMaskFormControlComponent. Configura automaticamente a máscara para valores numéricos inteiros com separador de milhares.

Example :
```html
<sq-input-number-form-control
  [formControl]="quantityControl"
  [label]="'Quantidade'"
></sq-input-number-form-control>

<sq-input-number-form-control [formControl]="ageControl" [label]="'Idade'" [minValue]="0" [maxValue]="120"

Example :

Extends

SqInputMaskFormControlComponent

Implements

OnInit

Metadata

changeDetection ChangeDetectionStrategy.OnPush
providers { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SqInputNumberFormControlComponent), multi: true, }
selector sq-input-number-form-control
standalone true
imports NgClass NgStyle NgTemplateOutlet ReactiveFormsModule NgxMaskDirective SqTooltipComponent UniversalSafePipe
styleUrls ./sq-input-number-form-control.component.scss
templateUrl ../sq-input-mask-form-control/sq-input-mask-form-control.component.html

Index

Properties
Methods
Inputs
Outputs
HostListeners

Inputs

incrementValue
Type : number
Default value : 1
Defined in src/components/sq-input-number-form-control/sq-input-number-form-control.component.ts:57

Valor de incremento/decremento ao pressionar Arrow Up/Down.
allowNegativeNumbers
Type : boolean
Default value : false
Inherited from SqInputMaskFormControlComponent
Defined in SqInputMaskFormControlComponent:109

Indicates whether negative numbers are allowed.
decimalMarker
Type : "." | "," |
Default value : ['.', ',']
Inherited from SqInputMaskFormControlComponent
Defined in SqInputMaskFormControlComponent:115

The decimal marker character or an array of characters to represent decimal values.
leadZero
Type : boolean
Default value : false
Inherited from SqInputMaskFormControlComponent
Defined in SqInputMaskFormControlComponent:128

Indicates whether leading zeros should be preserved.
mask
Type : string
Default value : ''
Inherited from SqInputMaskFormControlComponent
Defined in SqInputMaskFormControlComponent:73

The mask pattern for input validation and formatting.

Example :
```html
```html
maxValue
Type : number
Inherited from SqInputMaskFormControlComponent
Defined in SqInputMaskFormControlComponent:140

Defines the maximum value that can be accepted as input (for numeric masks).
minValue
Type : number
Inherited from SqInputMaskFormControlComponent
Defined in SqInputMaskFormControlComponent:134

Defines the minimum value that can be accepted as input (for numeric masks).
placeHolderCharacter
Type : string
Default value : ''
Inherited from SqInputMaskFormControlComponent
Defined in SqInputMaskFormControlComponent:122

The character to use as a placeholder in empty mask slots.

Example :
prefix
Type : string
Default value : ''
Inherited from SqInputMaskFormControlComponent
Defined in SqInputMaskFormControlComponent:97

The prefix to be prepended to the input value.

Example :
```html
showMaskTyped
Type : boolean
Default value : false
Inherited from SqInputMaskFormControlComponent
Defined in SqInputMaskFormControlComponent:103

Indicates whether the mask should be visible while typing.
suffix
Type : string
Default value : ''
Inherited from SqInputMaskFormControlComponent
Defined in SqInputMaskFormControlComponent:89

The suffix to be appended to the input value.

Example :
```html
thousandSeparator
Type : string
Default value : ''
Inherited from SqInputMaskFormControlComponent
Defined in SqInputMaskFormControlComponent:81

The character used as a thousand separator in numeric input.

Example :
```html
inputMode
Type : string
Default value : ''
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:69

Input mode for mobile devices.
timeToChange
Type : number
Default value : 0
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:59

Time in milliseconds for debouncing value changes. When set to a value > 0, the value change will be debounced.
type
Type : "text" | "email" | "email-multiple" | "hidden" | "password" | "tel" | "url" | "file"
Default value : 'text'
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:64

Type of the input element (e.g., text, email, password).
customClass
Type : string
Default value : ''
Inherited from SqFormControlBaseDirective
Defined in SqFormControlBaseDirective:55

Custom CSS class for the input element.
id
Type : string
Inherited from SqFormControlBaseDirective
Defined in SqFormControlBaseDirective:45

The id attribute for the input element.
label
Type : string
Inherited from SqFormControlBaseDirective
Defined in SqFormControlBaseDirective:50

An optional label for the input.
name
Type : string
Default value : `random-name-${(1 + Date.now() + Math.random()).toString().replace('.', '')}`
Inherited from SqFormControlBaseDirective
Defined in SqFormControlBaseDirective:40

The name attribute for the input element.
placeholder
Type : string
Default value : ''
Inherited from SqFormControlBaseDirective
Defined in SqFormControlBaseDirective:60

Placeholder text for the input element.
readonly
Type : boolean
Default value : false
Inherited from SqFormControlBaseDirective
Defined in SqFormControlBaseDirective:65

Flag to make the input element readonly.
tooltipColor
Type : string
Default value : 'inherit'
Inherited from SqFormControlBaseDirective
Defined in SqFormControlBaseDirective:80

Color of the tooltip.
tooltipIcon
Type : string
Default value : ''
Inherited from SqFormControlBaseDirective
Defined in SqFormControlBaseDirective:85

Icon for the tooltip.
tooltipMessage
Type : string
Default value : ''
Inherited from SqFormControlBaseDirective
Defined in SqFormControlBaseDirective:70

Tooltip message to display.
tooltipPlacement
Type : "center top" | "center bottom" | "left center" | "right center"
Default value : 'right center'
Inherited from SqFormControlBaseDirective
Defined in SqFormControlBaseDirective:75

Placement of the tooltip.

Outputs

blurred
Type : EventEmitter<FocusEvent>
Inherited from SqFormControlBaseDirective
Defined in SqFormControlBaseDirective:100

Event emitter for blur events.
focused
Type : EventEmitter<FocusEvent>
Inherited from SqFormControlBaseDirective
Defined in SqFormControlBaseDirective:95

Event emitter for focus events.
valueChange
Type : EventEmitter<any>
Inherited from SqFormControlBaseDirective
Defined in SqFormControlBaseDirective:90

Event emitter for input value changes.

HostListeners

keydown
Arguments : '$event'
keydown(event: KeyboardEvent)
Defined in src/components/sq-input-number-form-control/sq-input-number-form-control.component.ts:87

Trata eventos de teclado para incrementar/decrementar valor. Usa HostListener para interceptar eventos de teclado no input.

Methods

Private decrementNumber
decrementNumber()
Defined in src/components/sq-input-number-form-control/sq-input-number-form-control.component.ts:109

Decrementa o valor pelo incrementValue.

Returns : void
Private getNumericValue
getNumericValue()
Defined in src/components/sq-input-number-form-control/sq-input-number-form-control.component.ts:125

Obtém o valor numérico atual do controle.

Returns : number
Private incrementNumber
incrementNumber()
Defined in src/components/sq-input-number-form-control/sq-input-number-form-control.component.ts:100

Incrementa o valor pelo incrementValue.

Returns : void
ngOnInit
ngOnInit()
Inherited from SqFormControlBaseDirective
Defined in SqFormControlBaseDirective:62

Configura os valores padrão para input numérico.

Returns : void
onKeyDown
onKeyDown(event: KeyboardEvent)
Decorators :
@HostListener('keydown', ['$event'])
Defined in src/components/sq-input-number-form-control/sq-input-number-form-control.component.ts:87

Trata eventos de teclado para incrementar/decrementar valor. Usa HostListener para interceptar eventos de teclado no input.

Parameters :
Name Type Optional
event KeyboardEvent No
Returns : void
watchValueChanges
watchValueChanges()
Inherited from SqFormControlBaseDirective
Defined in SqFormControlBaseDirective:97

Override the watchValueChanges method to add debounce time.

Returns : void
ngOnDestroy
ngOnDestroy()
Inherited from SqFormControlBaseDirective
Defined in SqFormControlBaseDirective:136

Cleanup on component destruction.

Returns : void
onBlur
onBlur(event: FocusEvent)
Inherited from SqFormControlBaseDirective
Defined in SqFormControlBaseDirective:198

Handle blur events. Marks the control as touched when the user leaves the input.

Parameters :
Name Type Optional Description
event FocusEvent No
  • The focus event that triggered the blur.
Returns : void
onFocus
onFocus(event: FocusEvent)
Inherited from SqFormControlBaseDirective
Defined in SqFormControlBaseDirective:208

Handle focus events. Emits the focused event when the input receives focus.

Parameters :
Name Type Optional Description
event FocusEvent No
  • The focus event that triggered the focus.
Returns : void
registerOnChange
registerOnChange(fn: any)
Inherited from SqFormControlBaseDirective
Defined in SqFormControlBaseDirective:153

ControlValueAccessor: Registers a callback function that is called when the control's value changes.

Parameters :
Name Type Optional Description
fn any No
  • The callback function.
Returns : void
registerOnTouched
registerOnTouched(fn: any)
Inherited from SqFormControlBaseDirective
Defined in SqFormControlBaseDirective:161

ControlValueAccessor: Registers a callback function that is called when the control is touched.

Parameters :
Name Type Optional Description
fn any No
  • The callback function.
Returns : void
setDisabledState
setDisabledState(isDisabled: boolean)
Inherited from SqFormControlBaseDirective
Defined in SqFormControlBaseDirective:169

ControlValueAccessor: Sets the disabled state of the control.

Parameters :
Name Type Optional Description
isDisabled boolean No
  • Whether the control should be disabled.
Returns : void
writeValue
writeValue(value: any)
Inherited from SqFormControlBaseDirective
Defined in SqFormControlBaseDirective:145

ControlValueAccessor: Writes a new value to the element.

Parameters :
Name Type Optional Description
value any No
  • The new value.
Returns : void

Properties

labelTemplate
Type : TemplateRef<HTMLElement> | null
Default value : null
Decorators :
@ContentChild('labelTemplate')
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:87

Reference to a label template.
leftLabel
Type : TemplateRef<HTMLElement> | null
Default value : null
Decorators :
@ContentChild('leftLabel')
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:75

Reference to a left-aligned label template.
nativeElement
Type : ElementRef
Default value : inject(ElementRef)
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:92

Reference to the native element.
rightLabel
Type : TemplateRef<HTMLElement> | null
Default value : null
Decorators :
@ContentChild('rightLabel')
Inherited from SqInputFormControlComponent
Defined in SqInputFormControlComponent:81

Reference to a right-aligned label template.
control
Default value : new FormControl<any>(null)
Inherited from SqFormControlBaseDirective
Defined in SqFormControlBaseDirective:105

Internal FormControl for managing the input value and state.
Protected destroy$
Default value : new Subject<void>()
Inherited from SqFormControlBaseDirective
Defined in SqFormControlBaseDirective:110

Subject for managing subscriptions.
Protected onChange
Type : function
Default value : () => {...}
Inherited from SqFormControlBaseDirective
Defined in SqFormControlBaseDirective:117

ControlValueAccessor callback function called when the value changes. Registered via registerOnChange().
Protected onTouched
Type : function
Default value : () => {...}
Inherited from SqFormControlBaseDirective
Defined in SqFormControlBaseDirective:124

ControlValueAccessor callback function called when the control is touched. Registered via registerOnTouched().

 
import { Component, Input, forwardRef, OnInit, ChangeDetectionStrategy, HostListener } from '@angular/core';
import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
import { NgxMaskDirective } from 'ngx-mask';
import { SqInputMaskFormControlComponent } from '../sq-input-mask-form-control/sq-input-mask-form-control.component';
import { SqTooltipComponent } from '../sq-tooltip/sq-tooltip.component';
import { UniversalSafePipe } from '../../pipes/universal-safe/universal-safe.pipe';

/**
 * Componente de input numérico que estende SqInputMaskFormControlComponent.
 * Configura automaticamente a máscara para valores numéricos inteiros com separador de milhares.
 *
 * @example
 * ```html
 * <sq-input-number-form-control
 *   [formControl]="quantityControl"
 *   [label]="'Quantidade'"
 * ></sq-input-number-form-control>
 *
 * <!-- Com limites -->
 * <sq-input-number-form-control
 *   [formControl]="ageControl"
 *   [label]="'Idade'"
 *   [minValue]="0"
 *   [maxValue]="120"
 * ></sq-input-number-form-control>
 * ```
 */
@Component({
  selector: 'sq-input-number-form-control',
  templateUrl: '../sq-input-mask-form-control/sq-input-mask-form-control.component.html',
  styleUrls: ['./sq-input-number-form-control.component.scss'],
  standalone: true,
  imports: [
    NgClass,
    NgStyle,
    NgTemplateOutlet,
    ReactiveFormsModule,
    NgxMaskDirective,
    SqTooltipComponent,
    UniversalSafePipe,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => SqInputNumberFormControlComponent),
      multi: true,
    },
  ],
})
export class SqInputNumberFormControlComponent extends SqInputMaskFormControlComponent implements OnInit {
  /**
   * Valor de incremento/decremento ao pressionar Arrow Up/Down.
   * @default 1
   */
  @Input() incrementValue = 1;

  /**
   * Configura os valores padrão para input numérico.
   */
  override ngOnInit(): void {
    // Máscara para números inteiros com separador de milhares
    this.mask = 'separator';

    // Formato brasileiro como padrão
    if (this.thousandSeparator === '') {
      this.thousandSeparator = '.';
    }

    // Input mode numérico para dispositivos móveis
    this.inputMode = 'numeric';

    // Valor inicial 0 se não definido (pode ser sobrescrito pelo form pai)
    if (this.control.value === null || this.control.value === undefined || this.control.value === '') {
      this.control.setValue('0', { emitEvent: false });
    }

    super.ngOnInit();
  }

  /**
   * Trata eventos de teclado para incrementar/decrementar valor.
   * Usa HostListener para interceptar eventos de teclado no input.
   */
  @HostListener('keydown', ['$event'])
  onKeyDown(event: KeyboardEvent): void {
    if (event.key === 'ArrowUp') {
      event.preventDefault();
      this.incrementNumber();
    } else if (event.key === 'ArrowDown') {
      event.preventDefault();
      this.decrementNumber();
    }
  }

  /**
   * Incrementa o valor pelo incrementValue.
   */
  private incrementNumber(): void {
    const currentValue = this.getNumericValue();
    const newValue = currentValue + this.incrementValue;
    this.control.setValue(String(newValue));
  }

  /**
   * Decrementa o valor pelo incrementValue.
   */
  private decrementNumber(): void {
    const currentValue = this.getNumericValue();
    const newValue = currentValue - this.incrementValue;

    // Não permite negativos se allowNegativeNumbers for false
    if (!this.allowNegativeNumbers && newValue < 0) {
      this.control.setValue('0');
      return;
    }

    this.control.setValue(String(newValue));
  }

  /**
   * Obtém o valor numérico atual do controle.
   */
  private getNumericValue(): number {
    const value = this.control.value;
    if (value === null || value === undefined || value === '') {
      return 0;
    }

    // Remove separadores de milhar para parsear
    const normalized = String(value).replace(/\./g, '');
    return parseInt(normalized, 10) || 0;
  }
}


<div class="wrapper-all-inside-input {{ customClass }}">
  @if (label?.length || tooltipMessage || labelTemplate) {
    <label
      class="display-flex"
      [ngClass]="{
        readonly: readonly,
      }"
      [for]="id"
    >
      @if (label && !labelTemplate) {
        <div [innerHtml]="label | universalSafe"></div>
      }
      @if (labelTemplate) {
        <div>
          <ng-container *ngTemplateOutlet="labelTemplate"></ng-container>
        </div>
      }
      @if (tooltipMessage) {
        <sq-tooltip
          class="ml-1"
          [message]="tooltipMessage"
          [placement]="tooltipPlacement"
          [color]="tooltipColor"
          [icon]="tooltipIcon"
        ></sq-tooltip>
      }
    </label>
  }
  <div
    class="p-0 wrapper-input wrapper-input-squid text-ellipsisarea"
    [ngClass]="{
      readonly: readonly,
    }"
  >
    @if (leftLabel) {
      <span class="input-group-text m-0">
        <ng-container *ngTemplateOutlet="leftLabel"></ng-container>
      </span>
    }
    <input
      class="col input"
      [ngClass]="{
        disabled: disabled,
        readonly: readonly,
      }"
      [id]="id"
      type="text"
      [name]="name"
      [placeholder]="placeholder || ''"
      [readonly]="readonly"
      [formControl]="control"
      (blur)="onBlur($event)"
      (focus)="onFocus($event)"
      [attr.inputmode]="inputMode"
      mask="{{ mask }}"
      [thousandSeparator]="thousandSeparator"
      [suffix]="suffix"
      [prefix]="prefix"
      [showMaskTyped]="showMaskTyped"
      [allowNegativeNumbers]="allowNegativeNumbers"
      [decimalMarker]="decimalMarker"
      [placeHolderCharacter]="placeHolderCharacter"
      [leadZero]="leadZero"
    />
    @if (rightLabel) {
      <span class="input-group-text m-0">
        <ng-container *ngTemplateOutlet="rightLabel"></ng-container>
      </span>
    }
  </div>
</div>

./sq-input-number-form-control.component.scss 

// Importa os estilos do componente pai (mask-form-control)
@use '../sq-input-mask-form-control/sq-input-mask-form-control.component';
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""