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, }` `{ provide: NG_VALIDATORS, 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

Inputs

incrementValue
Type : `number`
Default value : `1`
Defined in src/components/sq-input-number-form-control/sq-input-number-form-control.component.ts:62
Valor de incremento/decremento ao pressionar Arrow Up/Down.

allowNegativeNumbers
Type : `boolean`
Default value : `false`
Inherited from `SqInputMaskFormControlComponent`
Defined in `SqInputMaskFormControlComponent:113`
Indicates whether negative numbers are allowed.

decimalMarker
Type : `"." \| "," \|`
Default value : `['.', ',']`
Inherited from `SqInputMaskFormControlComponent`
Defined in `SqInputMaskFormControlComponent:119`
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:132`
Indicates whether leading zeros should be preserved.

mask
Type : `string`
Default value : `''`
Inherited from `SqInputMaskFormControlComponent`
Defined in `SqInputMaskFormControlComponent:77`
The mask pattern for input validation and formatting. Example : ```html ```html

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

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

placeHolderCharacter
Type : `string`
Default value : `''`
Inherited from `SqInputMaskFormControlComponent`
Defined in `SqInputMaskFormControlComponent:126`
The character to use as a placeholder in empty mask slots. Example :

prefix
Type : `string`
Default value : `''`
Inherited from `SqInputMaskFormControlComponent`
Defined in `SqInputMaskFormControlComponent:101`
The prefix to be prepended to the input value. Example : ```html

showMaskTyped
Type : `boolean`
Default value : `false`
Inherited from `SqInputMaskFormControlComponent`
Defined in `SqInputMaskFormControlComponent:107`
Indicates whether the mask should be visible while typing.

suffix
Type : `string`
Default value : `''`
Inherited from `SqInputMaskFormControlComponent`
Defined in `SqInputMaskFormControlComponent:93`
The suffix to be appended to the input value. Example : ```html

thousandSeparator
Type : `string`
Default value : `''`
Inherited from `SqInputMaskFormControlComponent`
Defined in `SqInputMaskFormControlComponent:85`
The character used as a thousand separator in numeric input. Example : ```html

backgroundColor
Type : `string`
Default value : `''`
Inherited from `SqInputFormControlComponent`
Defined in `SqInputFormControlComponent:132`
Background color of the input element.

borderColor
Type : `string`
Default value : `''`
Inherited from `SqInputFormControlComponent`
Defined in `SqInputFormControlComponent:137`
Border color of the input element.

customClass
Type : `string`
Default value : `''`
Inherited from `SqInputFormControlComponent`
Defined in `SqInputFormControlComponent:92`
Custom CSS class for the input element.

id
Type : `string`
Inherited from `SqInputFormControlComponent`
Defined in `SqInputFormControlComponent:82`
The id attribute for the input element.

inputMode
Type : `string`
Default value : `''`
Inherited from `SqInputFormControlComponent`
Defined in `SqInputFormControlComponent:162`
Input mode for mobile devices.

label
Type : `string`
Inherited from `SqInputFormControlComponent`
Defined in `SqInputFormControlComponent:87`
An optional label for the input.

labelColor
Type : `string`
Default value : `''`
Inherited from `SqInputFormControlComponent`
Defined in `SqInputFormControlComponent:142`
Color of the input label.

maxLength
Type : `number \| null`
Default value : `null`
Inherited from `SqInputFormControlComponent`
Defined in `SqInputFormControlComponent:152`
Maximum length for the input element.

name
Type : `string`
Default value : `random-name-${(1 + Date.now() + Math.random()).toString().replace('.', '')}`
Inherited from `SqInputFormControlComponent`
Defined in `SqInputFormControlComponent:77`
The name attribute for the input element.

pattern
Type : `string`
Default value : `''`
Inherited from `SqInputFormControlComponent`
Defined in `SqInputFormControlComponent:157`
Regular expression pattern for input validation.

placeholder
Type : `string`
Default value : `''`
Inherited from `SqInputFormControlComponent`
Defined in `SqInputFormControlComponent:97`
Placeholder text for the input element.

readonly
Type : `boolean`
Default value : `false`
Inherited from `SqInputFormControlComponent`
Defined in `SqInputFormControlComponent:107`
Flag to make the input element readonly.

timeToChange
Type : `number`
Default value : `0`
Inherited from `SqInputFormControlComponent`
Defined in `SqInputFormControlComponent:102`
Time in milliseconds before triggering input timeout (debounce).

tooltipColor
Type : `string`
Default value : `'inherit'`
Inherited from `SqInputFormControlComponent`
Defined in `SqInputFormControlComponent:122`
Color of the tooltip.

tooltipIcon
Type : `string`
Default value : `''`
Inherited from `SqInputFormControlComponent`
Defined in `SqInputFormControlComponent:127`
Icon for the tooltip.

tooltipMessage
Type : `string`
Default value : `''`
Inherited from `SqInputFormControlComponent`
Defined in `SqInputFormControlComponent:112`
Tooltip message to display.

tooltipPlacement
Type : `"center top" \| "center bottom" \| "left center" \| "right center"`
Default value : `'right center'`
Inherited from `SqInputFormControlComponent`
Defined in `SqInputFormControlComponent:117`
Placement of the tooltip.

type
Type : `"text" \| "email" \| "email-multiple" \| "hidden" \| "password" \| "tel" \| "url" \| "file"`
Default value : `'text'`
Inherited from `SqInputFormControlComponent`
Defined in `SqInputFormControlComponent:147`
Type of the input element (e.g., text, email, password).

Outputs

blurred
Type : `EventEmitter<FocusEvent>`
Inherited from `SqInputFormControlComponent`
Defined in `SqInputFormControlComponent:187`
Event emitter for blur events.

focused
Type : `EventEmitter<FocusEvent>`
Inherited from `SqInputFormControlComponent`
Defined in `SqInputFormControlComponent:182`
Event emitter for focus events.

keyPressDown
Type : `EventEmitter<KeyboardEvent>`
Inherited from `SqInputFormControlComponent`
Defined in `SqInputFormControlComponent:167`
Event emitter for keydown events.

keyPressUp
Type : `EventEmitter<KeyboardEvent>`
Inherited from `SqInputFormControlComponent`
Defined in `SqInputFormControlComponent:172`
Event emitter for keyup events.

valueChange
Type : `EventEmitter<any>`
Inherited from `SqInputFormControlComponent`
Defined in `SqInputFormControlComponent:177`
Event emitter for input value changes.

Methods

Private decrementNumber

decrementNumber()

Defined in src/components/sq-input-number-form-control/sq-input-number-form-control.component.ts:113

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:129

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:104

Incrementa o valor pelo incrementValue.

Returns : void

ngOnInit

ngOnInit()

Inherited from SqInputMaskFormControlComponent

Defined in SqInputMaskFormControlComponent:67

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

Returns : void

onKeyDown

onKeyDown(event: KeyboardEvent)

Inherited from SqInputFormControlComponent

Defined in SqInputFormControlComponent:90

Trata eventos de teclado para incrementar/decrementar valor.

Parameters :

Name	Type	Optional
event	`KeyboardEvent`	No

Returns : void

ngOnChanges

ngOnChanges(changes: SimpleChanges)

Inherited from SqInputFormControlComponent

Defined in SqInputFormControlComponent:266

Lifecycle hook called when any input property changes. Updates validators when the type changes.

Parameters :

Name	Type	Optional
changes	`SimpleChanges`	No

Returns : void

ngOnDestroy

ngOnDestroy()

Inherited from SqInputFormControlComponent

Defined in SqInputFormControlComponent:307

Cleanup on component destruction.

Returns : void

onBlur

onBlur(event: FocusEvent)

Inherited from SqInputFormControlComponent

Defined in SqInputFormControlComponent:421

Handle blur events.

Parameters :

Name	Type	Optional
event	`FocusEvent`	No

Returns : void

onChangeEvent

onChangeEvent(event: Event)

Inherited from SqInputFormControlComponent

Defined in SqInputFormControlComponent:387

Handle input value changes with optional debounce.

Parameters :

Name	Type	Optional
event	`Event`	No

Returns : void

onFocus

onFocus(event: FocusEvent)

Inherited from SqInputFormControlComponent

Defined in SqInputFormControlComponent:429

Handle focus events.

Parameters :

Name	Type	Optional
event	`FocusEvent`	No

Returns : void

onKeyUp

onKeyUp(event: KeyboardEvent)

Inherited from SqInputFormControlComponent

Defined in SqInputFormControlComponent:414

Handle keyup events.

Parameters :

Name	Type	Optional	Description
event	`KeyboardEvent`	No	The keyup event.

Returns : void

registerOnChange

registerOnChange(fn: any)

Inherited from SqInputFormControlComponent

Defined in SqInputFormControlComponent:327

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 SqInputFormControlComponent

Defined in SqInputFormControlComponent:335

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

registerOnValidatorChange

registerOnValidatorChange(fn: () => void)

Inherited from SqInputFormControlComponent

Defined in SqInputFormControlComponent:365

Validator: Registers a callback for validation changes.

Parameters :

Name	Type	Optional	Description
fn	`function`	No	The callback function.

Returns : void

setDisabledState

setDisabledState(isDisabled: boolean)

Inherited from SqInputFormControlComponent

Defined in SqInputFormControlComponent:343

ControlValueAccessor: Sets the disabled state of the control.

Parameters :

Name	Type	Optional	Description
isDisabled	`boolean`	No	Whether the control should be disabled.

Returns : void

Private updateValidators

updateValidators()

Inherited from SqInputFormControlComponent

Defined in SqInputFormControlComponent:277

Updates validators based on the input type. Automatically applies appropriate validators for email, phone, URL, etc. Uses ValidatorHelper through InputValidators for consistency.

Returns : void

validate

validate()

Inherited from SqInputFormControlComponent

Defined in SqInputFormControlComponent:355

Validator: Validates the control.

Returns : ValidationErrors | null

Validation errors or null.

writeValue

writeValue(value: any)

Inherited from SqInputFormControlComponent

Defined in SqInputFormControlComponent:319

ControlValueAccessor: Writes a new value to the element.

Parameters :

Name	Type	Optional	Description
value	`any`	No	The new value.

Returns : void

Properties

control

Default value : new FormControl('')

Inherited from SqInputFormControlComponent

Defined in SqInputFormControlComponent:210

Internal FormControl for managing the input value and state.

Private destroy$

Default value : new Subject<void>()

Inherited from SqInputFormControlComponent

Defined in SqInputFormControlComponent:225

Subject for managing subscriptions.

labelTemplate

Type : TemplateRef<HTMLElement> | null

Default value : null

Decorators :


                            @ContentChild('labelTemplate')

Inherited from SqInputFormControlComponent

Defined in SqInputFormControlComponent:205

Reference to a label template.

leftLabel

Type : TemplateRef<HTMLElement> | null

Default value : null

Decorators :


                            @ContentChild('leftLabel')

Inherited from SqInputFormControlComponent

Defined in SqInputFormControlComponent:193

Reference to a left-aligned label template.

nativeElement

Type : ElementRef

Default value : inject(ElementRef)

Inherited from SqInputFormControlComponent

Defined in SqInputFormControlComponent:215

Reference to the native element.

Private onChange

Type : function

Default value : () => {...}

Inherited from SqInputFormControlComponent

Defined in SqInputFormControlComponent:232

ControlValueAccessor callback function called when the value changes. Registered via registerOnChange().

Private onTouched

Type : function

Default value : () => {...}

Inherited from SqInputFormControlComponent

Defined in SqInputFormControlComponent:239

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

Private onValidationChange

Type : function

Default value : () => {...}

Inherited from SqInputFormControlComponent

Defined in SqInputFormControlComponent:245

External validator function (propagated from parent control).

rightLabel

Type : TemplateRef<HTMLElement> | null

Default value : null

Decorators :


                            @ContentChild('rightLabel')

Inherited from SqInputFormControlComponent

Defined in SqInputFormControlComponent:199

Reference to a right-aligned label template.

Private Optional timeoutInput

Type : ReturnType<>

Inherited from SqInputFormControlComponent

Defined in SqInputFormControlComponent:220

Timeout for input changes (debounce).

import { Component, Input, forwardRef, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { NG_VALUE_ACCESSOR, NG_VALIDATORS, 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,
    },
    {
      provide: NG_VALIDATORS,
      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.
   */
  override onKeyDown(event: KeyboardEvent): void {
    if (event.key === 'ArrowUp') {
      event.preventDefault();
      this.incrementNumber();
    } else if (event.key === 'ArrowDown') {
      event.preventDefault();
      this.decrementNumber();
    }
    super.onKeyDown(event);
  }

  /**
   * 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 [ngStyle]="{ color: labelColor }" [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,
      }"
      [ngStyle]="{
        'background-color': backgroundColor,
        'border-color': borderColor,
      }"
      [id]="id"
      type="text"
      [name]="name"
      [placeholder]="placeholder || ''"
      [readonly]="readonly"
      [formControl]="control"
      [maxlength]="maxLength"
      (input)="onChangeEvent($event)"
      (keydown)="onKeyDown($event)"
      (keyup)="onKeyUp($event)"
      (blur)="onBlur($event)"
      (focus)="onFocus($event)"
      [pattern]="pattern"
      [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>
  @if (maxLength) {
    <div class="d-flex justify-content-end mt-1">
      <small class="text-muted"> {{ maxLength - (control.value?.length || 0) }} caracteres restantes </small>
    </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

File

Description

Extends

Implements

Metadata

Index

Properties

Methods

Inputs

Outputs

Inputs

Outputs

Methods

Properties

results matching ""

No results matching ""